/* Home hero: the first screen of the home page.
   Left: the headline, the search bar (a light circles its rim), quick keywords. Right: a book of figures, one plate
   per section of the site: a real plot drawn by home-hero.js from the formulas in home-figs-models.js, a question for
   a headline, a caption, a link into the section. The page turns by itself; the belt under it carries every plate's
   name round and round. The plates keep to a journal's manners: one ink, one green, one gold, mono labels.
   Everything that moves is transform, opacity or canvas paint: no layout shift. Reduced motion: all of it stands still. */
@property --hs-a{syntax:"<angle>";inherits:false;initial-value:0deg}

@media(min-width:1700px){main{max-width:1520px}}
@media(min-width:2100px){main{max-width:1680px}}

.intro{position:relative;isolation:isolate;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);gap:clamp(28px,5vw,84px);padding:clamp(30px,4.6vw,72px) 0 clamp(28px,3.4vw,52px)}
/* A soft light under the hero that leans toward the pointer (--hx / --hy, set by home-hero.js). */
.intro::before{content:"";position:absolute;z-index:-1;inset:-36px 0;pointer-events:none;background:radial-gradient(560px circle at var(--hx,74%) var(--hy,44%),color-mix(in srgb,var(--accent-2) var(--hero-glow,9%),transparent),transparent 72%);-webkit-mask-image:radial-gradient(ellipse closest-side,#000 62%,transparent);mask-image:radial-gradient(ellipse closest-side,#000 62%,transparent)}
.intro-copy{position:relative;z-index:1;min-width:0}
/* The headline is sized from its own column (cqw), not from the window: one line each at every width, also under the
   site's zoom setting, where vw counts the unzoomed window. */
.intro-copy{container-type:inline-size}

/* ── left: words and the search bar ── */
.intro .eyebrow{display:flex;align-items:center;gap:12px;margin-bottom:18px;color:var(--accent-text);letter-spacing:.2em}
.intro .eyebrow::before{content:"";flex:none;width:34px;height:1px;background:linear-gradient(90deg,transparent,var(--gold))}
.intro h1{font-size:clamp(33px,4.25vw,66px);font-size:clamp(26px,9.6cqw,66px);line-height:1.22;letter-spacing:-.022em;font-weight:650;margin:0 0 clamp(16px,1.6vw,24px)}
html[lang=en] .intro h1{font-size:clamp(30px,3.15vw,54px);font-size:clamp(28px,6.7cqw,54px);letter-spacing:-.028em}
.intro h1 em{display:block;width:fit-content;max-width:100%;margin-top:.06em;padding-bottom:.08em;color:var(--accent-2)}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .intro h1 em{background:linear-gradient(100deg,var(--accent-2) 0%,var(--accent-2) 34%,var(--hero-glint,#f4e3ae) 46%,var(--accent-2) 58%,var(--gold) 100%) 100% 0/250% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
}
:root{--hero-glint:#9a7a2e}
:root[data-theme=dark]{--hero-glint:#fff3c9;--hero-glow:16%}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--hero-glint:#fff3c9;--hero-glow:16%}}
.intro-text{font-size:clamp(14px,1.08vw,17px);line-height:1.95;max-width:36em;margin-bottom:clamp(20px,2vw,30px)}
.intro-actions{gap:12px;align-items:center}
.intro .button{border-radius:12px}

.intro-search{position:relative;flex-wrap:nowrap;gap:6px;align-items:center;padding:6px;margin:0 0 2px;border:1px solid color-mix(in srgb,var(--line-strong) 80%,transparent);border-radius:18px;background:color-mix(in srgb,var(--surface) 86%,transparent);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 22px 44px -30px color-mix(in srgb,var(--accent) 80%,transparent);transition:border-color .25s,box-shadow .25s}
.intro-search:hover{border-color:color-mix(in srgb,var(--accent-2) 60%,transparent)}
.intro-search:focus-within{border-color:var(--accent-2);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent-2) 17%,transparent),0 24px 50px -28px color-mix(in srgb,var(--accent) 90%,transparent)}
/* The light that circles the rim: a conic gradient shown only in the 1.5 px border ring. */
.intro-search::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1.5px;pointer-events:none;background:conic-gradient(from var(--hs-a),transparent 0 64%,color-mix(in srgb,var(--accent-2) 80%,transparent) 80%,var(--gold) 90%,transparent 100%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:.8;animation:hs-spin 7s linear infinite}
.intro-search:focus-within::before{animation-duration:2.6s;opacity:1}
@keyframes hs-spin{to{--hs-a:360deg}}
.intro-search .search-label{border:0;background:none;gap:10px;padding:0 4px 0 12px;border-radius:12px}
.intro-search .search-label:focus-within{outline:0}
.intro-search .hs-ico{display:grid;place-items:center;color:var(--accent-2);transition:color .2s,transform .3s cubic-bezier(.34,1.56,.64,1)}
.intro-search:focus-within .hs-ico{color:var(--gold);transform:scale(1.1) rotate(-8deg)}
.intro-search .search-label input{padding:13px 0;font-size:15px}
.intro-search .button{min-height:46px;padding:0 18px;gap:12px;border-radius:13px;white-space:nowrap;transition:background .2s,transform .2s cubic-bezier(.34,1.56,.64,1),box-shadow .2s}
.intro-search .button:hover{transform:translateY(-1px);box-shadow:0 10px 22px -12px var(--accent)}
.intro-search .button:active{transform:scale(.97)}

.hero-try{flex-basis:100%;display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin:2px 0 8px;font-size:12px;color:var(--muted)}
.hero-try>span{margin-right:3px}
.hero-try button{min-height:30px;padding:3px 12px;border:1px solid color-mix(in srgb,var(--line-strong) 70%,transparent);border-radius:999px;background:color-mix(in srgb,var(--surface) 60%,transparent);color:var(--ink-2);font-size:12px;transition:border-color .2s,color .2s,transform .2s cubic-bezier(.34,1.56,.64,1),background .2s}
.hero-try button:hover{border-color:var(--accent-2);color:var(--ink);background:var(--surface);transform:translateY(-2px)}
.intro .snapshot{margin-top:20px}
.intro .snapshot::before{content:"";display:inline-block;vertical-align:.08em;margin:0 10px 0 3px;width:6px;height:6px;border-radius:50%;background:var(--accent-2);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent-2) 18%,transparent)}

/* ── right: the book of figures ── */
/* The plate's own colours (home-hero.js reads them for the canvas): paper in the light theme, a dark plate in the dark. */
.stage{--st-bg:#fbfaf4;--st-ink:#14251d;--st-dim:#5d6f66;--st-grid:#eceee4;--st-frame:#93a399;--st-green:#1f7a55;--st-gold:#8a6417;--st-rule:#dfe3d6;--st-m0:#fbfaf4;--st-m1:#e9dca4;--st-m2:#6fb48d;--st-m3:#1f7052;--st-m4:#0a2a1e;--st-shadow:0 34px 60px -44px rgba(20,40,30,.55)}
:root[data-theme=dark] .stage{--st-bg:#0b110f;--st-ink:#f3f0e2;--st-dim:#8fa398;--st-grid:#18221d;--st-frame:#5d7067;--st-green:#2f9e6e;--st-gold:#d9b962;--st-rule:#1d2823;--st-m0:#0b110f;--st-m1:#123e30;--st-m2:#268c62;--st-m3:#d6b454;--st-m4:#fff8e0;--st-shadow:0 40px 80px -50px #000}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .stage{--st-bg:#0b110f;--st-ink:#f3f0e2;--st-dim:#8fa398;--st-grid:#18221d;--st-frame:#5d7067;--st-green:#2f9e6e;--st-gold:#d9b962;--st-rule:#1d2823;--st-m0:#0b110f;--st-m1:#123e30;--st-m2:#268c62;--st-m3:#d6b454;--st-m4:#fff8e0;--st-shadow:0 40px 80px -50px #000}}
.stage{position:relative;z-index:1;min-width:0;width:100%;max-width:640px;margin:0 auto;text-align:left;container-type:inline-size}
.st-plate{position:relative;perspective:1800px;border-radius:14px;background:var(--st-bg);box-shadow:0 0 0 1px var(--st-rule),var(--st-shadow)}
.st-page{position:relative;border-radius:inherit;background:var(--st-bg);color:var(--st-ink);overflow:hidden}
.st-head{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:13px 20px;border-bottom:1px solid var(--st-rule);font:500 11px/1.2 var(--font-mono);letter-spacing:.14em;color:var(--st-dim);white-space:nowrap}
.st-no b{color:var(--st-gold);font-weight:600}
.st-sec{overflow:hidden;text-overflow:ellipsis;letter-spacing:.08em}
.st-fig{display:block;width:100%;aspect-ratio:600/384;cursor:pointer}
.st-foot{display:flex;flex-direction:column;align-items:flex-start;padding:16px 20px 20px;border-top:1px solid var(--st-rule)}
.st-foot h2{margin:0 0 7px;padding-right:0;font:500 clamp(19px,3.9cqw,25px)/1.36 var(--font-num),"Songti SC","Noto Serif SC",serif;letter-spacing:.01em;color:var(--st-ink);text-wrap:balance}
html[lang=en] .st-foot h2{font-size:clamp(18px,3.6cqw,23px);line-height:1.3}
.st-foot p{margin:0;max-width:none;font-size:12.5px;line-height:1.72;color:var(--st-dim);text-align:left}
.st-go{display:inline-flex;align-items:center;gap:8px;margin-top:auto;padding:12px 0 2px;border-bottom:2px solid var(--st-gold);color:var(--st-gold);font-size:13px;font-weight:650;text-decoration:none;--metal:var(--st-gold)}
.st-go:hover{color:var(--st-ink);border-color:var(--st-ink);--metal:var(--st-ink)}
.st-nav{position:absolute;z-index:3;right:16px;bottom:16px;display:flex;gap:8px}
.st-nav button{display:grid;place-items:center;width:38px;height:38px;border:1px solid var(--st-frame);border-radius:50%;background:var(--st-bg);color:var(--st-ink);font-size:14px;cursor:pointer;--metal:var(--st-ink);transition:background .2s,border-color .2s,transform .2s cubic-bezier(.34,1.56,.64,1)}
.st-nav button:hover{background:var(--st-gold);border-color:var(--st-gold);--metal:var(--st-bg)}
.st-nav button:hover .ico-ext{transform:none}
.st-nav button:active{transform:scale(.92)}
/* Turning a page: the old page is copied onto a leaf over the new one and swings shut on the spine (the left edge). */
.st-leaf{position:absolute;z-index:2;inset:0;transform-origin:0 50%;backface-visibility:hidden;pointer-events:none;animation:st-turn 1.15s cubic-bezier(.45,0,.55,1) forwards;box-shadow:24px 0 44px -22px rgba(0,0,0,.55)}
.st-leaf.is-back{transform-origin:100% 50%;animation-name:st-turn-back;box-shadow:-24px 0 44px -22px rgba(0,0,0,.55)}
.st-leaf::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.5),rgba(0,0,0,.08) 55%,rgba(0,0,0,.3));animation:st-shade 1.15s ease-in forwards}
@keyframes st-turn{to{transform:rotateY(-93deg)}}
@keyframes st-turn-back{to{transform:rotateY(93deg)}}
@keyframes st-shade{from{opacity:0}to{opacity:1}}
/* The belt: the plates' names go round like plates on a sushi belt; it stops under the pointer or the keyboard. */
.st-belt{position:relative;margin-top:14px;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.st-track{display:flex;gap:8px;width:max-content;padding:2px 0;animation:st-belt calc(var(--st-n,12)*4.2s) linear infinite}
.st-belt:hover .st-track,.st-belt:focus-within .st-track{animation-play-state:paused}
@keyframes st-belt{to{transform:translateX(calc(-50% - 4px))}}
.st-chip{flex:none;display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 15px;border:1px solid var(--line-strong);border-radius:8px;background:color-mix(in srgb,var(--surface) 88%,transparent);color:var(--ink-2);font:500 12.5px/1 var(--font-sans);white-space:nowrap;cursor:pointer;transition:background .2s,border-color .2s,color .2s}
.st-chip b{font:500 10px var(--font-mono);color:var(--faint);letter-spacing:.06em}
.st-chip:hover{border-color:var(--gold);color:var(--ink)}
.st-chip[aria-pressed=true]{background:var(--st-ink);border-color:var(--st-ink);color:var(--st-bg);font-weight:650}
.st-chip[aria-pressed=true] b{color:var(--st-bg);opacity:.7}
.st-chip:focus-visible,.st-nav button:focus-visible,.st-go:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
@container (max-width:470px){
  .st-head{padding:11px 14px;font-size:10px;letter-spacing:.08em}
  .st-fig{aspect-ratio:470/330}
  .st-foot{padding:13px 14px 16px}.st-foot p{font-size:12px}
  .st-nav{right:12px;bottom:12px}.st-nav button{width:36px;height:36px}
}

/* ── the figures: four doors, each number counts up when it comes into view ── */
.metrics{padding:0}
.metrics>a{position:relative;display:flex;flex-direction:column;padding:26px 26px 24px;border-right:1px solid var(--line);color:inherit;text-decoration:none}
.metrics>a:first-child{padding-left:0}
.metrics>a:last-child{border:0}
.metrics>a::before{content:"";position:absolute;left:0;right:0;top:-1px;height:2px;background:linear-gradient(90deg,var(--gold),color-mix(in srgb,var(--accent-2) 70%,transparent));transform:scaleX(0);transform-origin:0 50%;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.metrics>a:hover::before,.metrics>a:focus-visible::before{transform:scaleX(1)}
.metrics>a::after{content:"";position:absolute;right:22px;top:30px;width:13px;height:13px;background:var(--metal,var(--gold));-webkit-mask:var(--ico-ext) center/contain no-repeat;mask:var(--ico-ext) center/contain no-repeat;opacity:0;transform:translate(-6px,6px);transition:opacity .25s,transform .3s cubic-bezier(.2,.8,.2,1)}
.metrics>a:hover::after,.metrics>a:focus-visible::after{opacity:1;transform:none}
.metrics strong{font-size:clamp(30px,2.9vw,46px);line-height:1.2;font-variant-numeric:tabular-nums lining-nums;transition:color .25s}
.metrics>a:hover strong{color:var(--accent-text)}
.metrics span{transition:color .25s}
.metrics>a:hover span{color:var(--ink-2)}

/* ── narrower ── */
@media(max-width:1050px){
  .intro{gap:26px}
}
@media(max-width:720px){
  .intro{grid-template-columns:minmax(0,1fr);gap:22px;padding:26px 0 30px}
  .intro::before{background:radial-gradient(360px circle at 50% 78%,color-mix(in srgb,var(--accent-2) var(--hero-glow,9%),transparent),transparent 72%)}
  .intro .eyebrow{gap:9px;margin-bottom:12px;letter-spacing:.12em}.intro .eyebrow::before{width:22px}
  .intro-text{font-size:13.5px}
  .intro-search{border-radius:16px}.intro-search .search-label{padding-left:10px}.intro-search .button{flex:none;border-radius:11px}
  .hero-try{flex-wrap:nowrap;overflow-x:auto;margin-right:-18px;padding:2px 18px 4px 0;scrollbar-width:none}.hero-try::-webkit-scrollbar{display:none}
  .hero-try>span,.hero-try button{flex:none}.hero-try button{min-height:32px}
  .intro .snapshot{margin-top:14px}
  .metrics>a{padding:18px 16px}.metrics>a:nth-child(odd){padding-left:0}.metrics>a:nth-child(2){border:0}.metrics>a:nth-child(-n+2){border-bottom:1px solid var(--line)}.metrics>a::after{display:none}
  .metrics{gap:0;padding:0}
}
/* Small phones: the button keeps only its arrow, so the words typed stay readable. */
@media(max-width:480px){
  .intro-search .button{width:46px;padding:0;gap:0;font-size:0}.intro-search .button .ico-ext{font-size:17px}
}

/* ── motion ── */
@keyframes hero-rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes hero-glint{from{background-position:100% 0}to{background-position:0 0}}
@keyframes hero-scroll{from{opacity:.25;transform:translateY(36px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:no-preference){
  /* Reading order: eyebrow, headline, text, search and buttons, snapshot; then the book of figures
     and the figures under the hero. With the entrance sheet (entrance.css) the same order starts when the sheet closes. */
  html:not([data-entrance]) .intro-copy>*,html:not([data-entrance]) .stage,html:not([data-entrance]) .metrics{animation:hero-rise .8s cubic-bezier(.2,.7,.2,1) backwards;animation-delay:calc(40ms + var(--hi,0)*80ms)}
  .intro-copy>:nth-child(2){--hi:1}.intro-copy>:nth-child(3){--hi:2}.intro-copy>:nth-child(4){--hi:3}.intro-copy>:nth-child(5){--hi:4}.stage{--hi:5}.metrics{--hi:8}
  .intro h1 em{animation:hero-glint 1.7s cubic-bezier(.4,0,.2,1) both;animation-delay:calc(var(--ent-out,0ms) + 620ms)}
  /* Further down, each block comes up a little as it scrolls into view (where the browser can tie an animation to
     scrolling; elsewhere the page is simply still). Fill mode "none": above and below that stretch it is untouched. */
  @supports (animation-timeline:view()){
    .digest-card,.glass-duo,.catalog>.section-title,.paths,.meta-strip{animation:hero-scroll linear;animation-timeline:view();animation-range:entry 0% entry 55%}
  }
}
@media(prefers-reduced-motion:reduce){
  .intro-search::before{animation:none;opacity:.5}
  .st-track{animation:none}.st-belt{overflow-x:auto;scrollbar-width:none}.st-leaf{display:none}
}
@media print{.intro::before,.st-belt,.st-nav{display:none}}