/* =========================================================================
   FOLIO — a lesson opened like a manuscript page.

   The hero is three columns that line up with the page below it:
     margin  the folio mark, in the same column as the lessons rail
     main    previously, title, lead, cap — in the reading column
     figure  the one number the lesson turns on

   The structure is the same in every edition; only the material changes.
   Every colour is a --hero-* token, so Night and Paper get the teal jacket
   in gold and Mono gets ink on white, without a rule per theme. Paper's
   jacket comes back here: reading-themes.css had flattened it to the page.

   Loaded on every standard lesson (not the pattern layouts, which draw
   their own hero).
   ========================================================================= */

.folio-hero{--fo-line:color-mix(in srgb,var(--hero-accent) 50%,transparent)}

/* ---------- the jacket, in every edition ---------- */
html[data-theme] .hero.folio-hero{
  background:radial-gradient(120% 90% at 78% 40%,var(--hero-1) 0%,var(--hero-2) 62%);
  border-bottom:0;--strong:var(--hero-text)}
html[data-theme="bw"] .hero.folio-hero{border-bottom:1px solid var(--line)}

/* Paper keeps its canvas off; a quiet dot field stands in for it, fading out
   before it reaches the text. Mono stays plain. */
html[data-theme="paper"] .hero.folio-hero::before{display:block;content:"";position:absolute;
  inset:0 0 0 42%;pointer-events:none;
  background-image:radial-gradient(color-mix(in srgb,var(--hero-accent) 38%,transparent) 1.1px,transparent 1.6px);
  background-size:22px 22px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 45%,#000 75%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 45%,#000 75%,transparent)}

/* ---------- grid ---------- */
html[data-theme] .hero.folio-hero .inner{display:grid;grid-template-columns:minmax(0,1fr);
  gap:1.4rem;padding-top:clamp(2rem,5vw,3.6rem);padding-bottom:clamp(2rem,5vw,3.4rem);
  padding-left:var(--gutter);padding-right:var(--gutter)}
.folio-hero .hero-main{display:flex;flex-direction:column;min-width:0}
@media (min-width:64rem){
  html[data-theme] .hero.folio-hero .inner{grid-template-columns:var(--rail) minmax(0,1fr) 13rem;
    column-gap:3.5rem;align-items:center}
}

/* ---------- main: one order and one palette in every edition ---------- */
html[data-theme] .folio-hero .slug{order:0;margin:0 0 1rem;color:var(--hero-eyebrow);font-size:.72rem}
html[data-theme] .folio-hero .prev{order:1}
html[data-theme] .folio-hero h1{order:2;margin:.9rem 0 0;color:var(--hero-text);
  font-size:clamp(2.3rem,4.4vw,3.6rem);max-width:none}
html[data-theme] .folio-hero h1 em{color:var(--hero-accent)}
html[data-theme] .folio-hero .lead{order:3;margin:1.2rem 0 0;color:var(--hero-dim);max-width:34rem}
html[data-theme] .folio-hero .cap{order:4;color:var(--hero-dim)}
html[data-theme] .folio-hero .cap b{color:var(--hero-accent)}
html[data-theme] .folio-hero .updated-on{order:5;color:var(--hero-dim)}

.folio-hero .prev{margin:0;font-family:var(--font-body);font-style:italic;font-weight:400;
  font-size:1rem;line-height:1.55;color:var(--hero-dim)}
.folio-hero .prev span{display:block;margin:0 0 .2rem;font-family:var(--font-ui);font-style:normal;
  font-weight:700;font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--hero-eyebrow)}
.folio-hero .prev a{color:inherit;text-decoration:none;border-bottom:1px solid var(--fo-line)}
.folio-hero .prev a:hover{color:var(--hero-text)}

/* ---------- margin: the folio mark ---------- */
.folio{font-family:var(--font-ui);color:var(--hero-dim);align-self:center}
.folio p{margin:0}
.fo-part{font-weight:700;font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;color:var(--hero-eyebrow)}
.fo-num{margin:.7rem 0 0 !important;padding:.75rem 0;
  border-top:3px double var(--fo-line);border-bottom:3px double var(--fo-line);
  font-family:"Cormorant Garamond",Georgia,serif;font-weight:400;font-size:2.5rem;line-height:1;
  letter-spacing:.01em;color:var(--hero-text);white-space:nowrap}
.fo-num span{margin:0 .12em;color:var(--hero-accent)}
.fo-ch{margin:.9rem 0 0 !important;font-family:"Cormorant Garamond",Georgia,serif;font-style:italic;
  font-size:1.2rem;line-height:1.25;color:var(--hero-text)}
.fo-dots{display:flex;gap:.45rem;margin:1rem 0 .55rem !important}
.fo-dots i{width:.5rem;height:.5rem;border-radius:50%;border:1px solid var(--hero-accent)}
.fo-dots i.on{background:var(--hero-accent)}
.fo-dots i.here{box-shadow:0 0 0 3px color-mix(in srgb,var(--hero-accent) 28%,transparent)}
.fo-meta{font-weight:600;font-size:.72rem;letter-spacing:.03em;line-height:1.7}

/* ---------- figure: the number ---------- */
.hero-fig{margin:0;align-self:center;padding:.3rem 0 .3rem 1.4rem;border-left:1px solid var(--fo-line)}
.hero-fig b{display:block;font-family:"Cormorant Garamond",Georgia,serif;font-weight:300;
  font-size:clamp(3.6rem,6vw,5.4rem);line-height:.9;letter-spacing:-.01em;color:var(--hero-accent)}
.hero-fig.long b{font-size:clamp(2.6rem,4vw,3.5rem);line-height:1}
.hero-fig b small{display:block;margin-top:.3rem;font-family:var(--font-ui);font-weight:700;
  font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;line-height:1.2}
.hero-fig figcaption{margin:.8rem 0 0;font-family:var(--font-ui);font-weight:600;font-size:.78rem;
  line-height:1.5;color:var(--hero-dim);max-width:12rem}

/* ---------- below desktop: the margin folds into one line ---------- */
@media (max-width:63.9rem){
  .folio{display:flex;flex-wrap:wrap;align-items:center;gap:.3rem .75rem;
    padding-bottom:.85rem;border-bottom:3px double var(--fo-line)}
  .fo-num{margin:0 !important;padding:0;border:0;font-size:1.15rem}
  .fo-ch{display:none}
  .fo-dots{margin:0 !important}
  .hero-fig{display:flex;align-items:baseline;gap:1rem;padding:1rem 0 0;border-left:0;
    border-top:1px solid var(--fo-line)}
  .hero-fig b,.hero-fig.long b{font-size:2.6rem}
  .hero-fig b small{display:inline;margin:0 0 0 .4rem}
  .hero-fig figcaption{margin:0;max-width:none}
}

/* =========================================================================
   The ribbon, the bookmark and the stamp. See scripts/folio.js.
   ========================================================================= */

/* bookmark and stamp colour, per edition: gold on night, deep gold on paper, ink on mono */
.bookmark,.stamp-slot,.fo-ribbon{--thread:var(--hot)}
html[data-theme="paper"] :is(.bookmark,.stamp-slot,.fo-ribbon){--thread:var(--ice)}
html[data-theme="bw"] :is(.bookmark,.stamp-slot,.fo-ribbon){--thread:var(--text)}

/* the ribbon replaces the top bar's percent line and "Page 3 of 8" */
body:has(.folio-hero) .topbar :is(.pc,.prog){display:none}
/* the page label used to push the theme switch into the corner; keep it there */
body:has(.folio-hero) .topbar .edwrap{margin-left:auto}

/* ---------- the ribbon: hangs from the top bar, comes down as you read ---------- */
.hanger{position:fixed;z-index:26;width:.9rem;height:2.5rem;pointer-events:none;
  background:var(--hero-accent);
  box-shadow:inset 2px 0 0 rgba(0,0,0,.16),inset -2px 0 0 rgba(0,0,0,.16),0 4px 10px -4px rgba(0,0,0,.45);
  clip-path:polygon(0 0,100% 0,100% 100%,50% calc(100% - .45rem),0 100%);
  transition:height .12s linear}
html[data-theme="bw"] .hanger{background:var(--text)}
@media (max-width:63.9rem){.hanger{width:.6rem;clip-path:polygon(0 0,100% 0,100% 100%,50% calc(100% - .32rem),0 100%)}}

/* ---------- the bookmark ---------- */
.flow{position:relative}
.bookmark{position:absolute;left:-1.75rem;width:.8rem;z-index:2;pointer-events:none;transform:translateX(-50%)}
.bookmark i{display:block;width:.8rem;height:4.2rem;background:var(--thread);
  box-shadow:inset 2px 0 0 rgba(0,0,0,.14),inset -2px 0 0 rgba(0,0,0,.14);
  clip-path:polygon(0 0,100% 0,100% 100%,50% calc(100% - .45rem),0 100%);
  animation:lay .7s cubic-bezier(.22,.9,.28,1) both}
.bookmark span{position:absolute;top:0;right:1.15rem;writing-mode:vertical-rl;transform:rotate(180deg);
  white-space:nowrap;font-family:var(--font-body);font-style:italic;font-size:.82rem;
  color:var(--dim);animation:fade .6s ease .5s both}
@keyframes lay{from{clip-path:polygon(0 0,100% 0,100% 0,50% 0,0 0)}}
@keyframes fade{from{opacity:0}}
@media (max-width:63.9rem){
  .bookmark{left:calc(-1 * var(--gutter) / 2)}
  .bookmark i{width:.55rem;height:3.2rem}
  .bookmark span{display:none}
}

/* the way to it, in the folio */
.fo-ribbon{display:flex;gap:.55rem;align-items:flex-start;margin:1.1rem 0 0;
  font-family:var(--font-body);font-size:.92rem;line-height:1.4;color:var(--hero-text);text-decoration:none}
.fo-ribbon i{flex:none;width:.5rem;height:1.2rem;margin-top:.1rem;background:var(--hero-accent);
  clip-path:polygon(0 0,100% 0,100% 100%,50% calc(100% - .3rem),0 100%)}
.fo-ribbon em{color:var(--hero-dim)}
.fo-ribbon:hover em{color:var(--hero-text)}
@media (max-width:63.9rem){.fo-ribbon{flex-basis:100%;margin:.2rem 0 0}}

/* ---------- the stamp ---------- */
.stamp-slot{display:flex;justify-content:flex-end;margin:2.4rem 0 0}
.stamp{width:7.5rem;height:7.5rem;color:var(--thread);transform:rotate(-9deg);opacity:.9}
.stamp svg{display:block;width:100%;height:100%;overflow:visible}
.stamp text{fill:currentColor}
.stamp .ring{font-family:var(--font-ui);font-weight:700;font-size:8.4px;letter-spacing:2.1px}
.stamp .day{font-family:"Cormorant Garamond",Georgia,serif;font-weight:600;font-size:17px;letter-spacing:.5px}
.stamp .yr{font-family:var(--font-ui);font-weight:700;font-size:9px;letter-spacing:2px}
.stamp.waiting{opacity:0}
/* pressed: comes down from above the page, lands, and the ink spreads */
.stamp.press{animation:press .42s cubic-bezier(.3,1.4,.5,1) both}
.stamp.press svg{animation:ink .9s ease-out .3s both}
@keyframes press{
  0%{opacity:0;transform:rotate(-16deg) scale(1.7)}
  70%{opacity:1;transform:rotate(-8deg) scale(.96)}
  100%{opacity:.9;transform:rotate(-9deg) scale(1)}}
@keyframes ink{
  0%{filter:drop-shadow(0 0 0 currentColor)}
  35%{filter:drop-shadow(0 0 3px color-mix(in srgb,currentColor 55%,transparent))}
  100%{filter:drop-shadow(0 0 0 transparent)}}