/* GIAB - Goodness In A Bottle. One stylesheet, built into site/assets/site.css.
   Tokens from the approved Field Notebook design (design_intake/2026-09-22-field-notebook/README.md).
   Body face is Golos Text, not Instrument Sans: Instrument Sans carries no Cyrillic (22 Sep 2026). */

/* ---------- fonts (vendored, house rule: no third-party host) ---------- */
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/cormorant-garamond-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/cormorant-garamond-cyrillic-400-normal.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/cormorant-garamond-latin-500-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/cormorant-garamond-cyrillic-500-normal.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/cormorant-garamond-latin-600-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/cormorant-garamond-cyrillic-600-normal.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Cormorant Garamond";font-style:italic;font-weight:400;font-display:swap;src:url(/assets/fonts/cormorant-garamond-latin-400-italic.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Cormorant Garamond";font-style:italic;font-weight:400;font-display:swap;src:url(/assets/fonts/cormorant-garamond-cyrillic-400-italic.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Cormorant Garamond";font-style:italic;font-weight:500;font-display:swap;src:url(/assets/fonts/cormorant-garamond-latin-500-italic.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Cormorant Garamond";font-style:italic;font-weight:500;font-display:swap;src:url(/assets/fonts/cormorant-garamond-cyrillic-500-italic.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Golos Text";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/golos-text-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Golos Text";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/golos-text-cyrillic-400-normal.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Golos Text";font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/golos-text-latin-500-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Golos Text";font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/golos-text-cyrillic-500-normal.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Golos Text";font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/golos-text-latin-600-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Golos Text";font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/golos-text-cyrillic-600-normal.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/ibm-plex-mono-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/ibm-plex-mono-cyrillic-400-normal.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/ibm-plex-mono-latin-500-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/ibm-plex-mono-cyrillic-500-normal.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Archivo";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/archivo-latin-400-normal.woff2) format("woff2")}
/* metric fallbacks so text does not jump when the woff2 lands */
@font-face{font-family:"Cormorant Fallback";src:local("Georgia"),local("Times New Roman");size-adjust:92%;ascent-override:88%;descent-override:26%}
@font-face{font-family:"Golos Fallback";src:local("Helvetica Neue"),local("Arial");size-adjust:97%}

/* ---------- tokens ---------- */
:root{
  --paper:#f4eee0;--paper-2:#ebe3cf;--plate:#fbf7ec;--raised:#fcfaf4;
  --ink:#1e241c;--body:#33372f;--muted:#6c7263;--faint:#8d9284;
  --rust:#8a4a2a;--rust-2:#b03a25;--red:#bf1e2e;--orange:#f7941d;--orange-k:#a0561a;--green:#3ab54a;--green-k:#087a38;--gold:#fcb040;--trunk:#623a17;
  --forest:#16241b;--forest-2:#1f3226;--on-forest:#f0ede0;--on-forest-muted:#b4bca8;
  --hair:rgba(30,36,28,.14);--hair-2:rgba(30,36,28,.25);--hair-3:rgba(30,36,28,.4);--margin:rgba(170,70,50,.35);--tape:rgba(226,214,180,.75);
  --serif:"Cormorant Garamond","Cormorant Fallback",Georgia,serif;
  --sans:"Golos Text","Golos Fallback","Helvetica Neue",Arial,sans-serif;
  --mono:"IBM Plex Mono","SFMono-Regular",Consolas,monospace;
  --ease:cubic-bezier(.22,1,.36,1);--pop:cubic-bezier(.34,1.26,.64,1);
  --margin-x:clamp(28px,6vw,92px);--content-x:clamp(44px,9vw,140px);--right-x:clamp(20px,6vw,96px);
  --nav-h:64px;--sat:env(safe-area-inset-top,0px);--sal:env(safe-area-inset-left,0px);--sar:env(safe-area-inset-right,0px);--sab:env(safe-area-inset-bottom,0px);
  --body-size:1.0625rem;
  color-scheme:light;
}
@media (max-width:767px){:root{--content-x:clamp(28px,7vw,44px);--margin-x:16px;--right-x:20px;--body-size:1rem}}

/* ---------- reset and page ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 16px)}
body{margin:0;background:var(--paper);color:var(--body);font-family:var(--sans);font-size:var(--body-size);line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:clip}
img,svg,video{display:block;max-width:100%;height:auto}
img{background-color:var(--paper-2);color:transparent}
img[alt=""]{background-color:transparent}
a{color:var(--rust);text-underline-offset:.16em;text-decoration-thickness:1px}
a:hover{color:var(--ink)}
:focus-visible{outline:2px solid var(--rust);outline-offset:3px;border-radius:2px}
h1,h2,h3,h4{margin:0;font-family:var(--serif);font-weight:500;color:var(--ink);line-height:1.02;letter-spacing:-.015em;text-wrap:balance}
h1 em,h2 em,h3 em{font-style:italic;font-weight:400}
p{margin:0}
button{font:inherit;color:inherit}
::selection{background:rgba(138,74,42,.22)}

.page{position:relative;background-color:var(--paper);background-image:repeating-linear-gradient(180deg,transparent 0 31px,rgba(30,36,28,.07) 31px 32px)}
.page::before{content:"";position:absolute;top:0;bottom:0;left:calc(var(--margin-x) + var(--sal));width:1px;background:var(--margin);pointer-events:none}
.section{position:relative;padding:clamp(64px,11vh,150px) calc(var(--right-x) + var(--sar)) clamp(64px,11vh,150px) calc(var(--content-x) + var(--sal));border-top:1px solid var(--hair)}
.section > .wrap{max-width:1200px} @media (min-width:1100px){.section > .wrap{max-width:min(1200px,100% - 150px)}}
.section.forest{background:linear-gradient(180deg,var(--forest),var(--forest-2));color:var(--on-forest-muted);border-top:0}
.forest h1,.forest h2,.forest h3{color:var(--on-forest)}
.forest p{color:var(--on-forest-muted)}
.forest .kicker{color:var(--gold)}
.forest a{color:var(--gold)} .forest a:hover{color:var(--on-forest)}
.forest.page{background-color:var(--forest);background-image:linear-gradient(180deg,var(--forest),var(--forest-2))} .forest.page::before{background:rgba(252,176,64,.28)}

/* ---------- type ---------- */
.kicker{display:block;font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--rust);line-height:1.5}
.kicker.orange{color:var(--orange-k)} .kicker.green{color:var(--green-k)} .kicker.red{color:var(--rust-2)}
.h1{font-size:clamp(2.6rem,6.2vw,5.8rem);line-height:.98;letter-spacing:-.02em;max-width:12ch}
.h2{font-size:clamp(2rem,3.6vw,3.2rem)}
.h3{font-size:clamp(1.5rem,2.2vw,2rem);line-height:1.1}
.lede{font-family:var(--serif);font-size:clamp(1.2rem,1.8vw,1.55rem);line-height:1.4;color:var(--ink);max-width:44ch}
.forest .lede{color:var(--on-forest)}
.body{font-size:var(--body-size);line-height:1.7;max-width:60ch}
.small{font-size:.95rem;line-height:1.65;color:var(--muted)}
.forest .small{color:var(--on-forest-muted)}
.stack{display:flex;flex-direction:column;gap:14px}
.stack-lg{display:flex;flex-direction:column;gap:clamp(36px,6vh,72px)}
.cols{display:grid;gap:48px;align-items:start;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.cols-3{display:grid;gap:28px;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
.cols-4{display:grid;gap:32px 28px;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}
.rule-top{border-top:1px solid var(--hair);padding-top:40px}
.arrow-link{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--rust);text-decoration:none;position:relative}
.arrow-link::after{content:"→";transition:transform 240ms var(--ease)}
.arrow-link:hover{color:var(--ink)}
@media (hover:hover) and (pointer:fine){.arrow-link:hover::after{transform:translateX(4px)}}
.forest .arrow-link{color:var(--gold)}
.em-line{font-family:var(--serif);font-style:italic;font-size:1.25rem;line-height:1.35;color:var(--ink)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:44px;padding:13px 24px;border-radius:3px;border:1px solid transparent;font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;cursor:pointer;transition:background 240ms var(--ease),color 240ms var(--ease),transform 160ms var(--ease),border-color 240ms var(--ease);text-align:center}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--ink);color:var(--paper);position:relative;overflow:hidden;isolation:isolate} .btn-primary::before{content:"";position:absolute;inset:0;background:var(--rust);transform:translateX(-101%);transition:transform 320ms var(--ease);z-index:-1} .btn-primary:hover{color:var(--paper)}
@media (hover:hover) and (pointer:fine){.btn-primary:hover::before{transform:none}}
.btn-secondary{background:transparent;color:var(--ink);border-color:var(--hair-3)} .btn-secondary:hover{background:var(--paper-2);color:var(--ink)}
.forest .btn-primary{background:var(--gold);color:var(--forest)} .forest .btn-primary:hover{background:var(--on-forest)}
.forest .btn-secondary{color:var(--on-forest);border-color:rgba(240,237,224,.4)} .forest .btn-secondary:hover{background:rgba(240,237,224,.08);color:var(--on-forest)}
.btn[disabled]{opacity:.6;cursor:wait;transform:none}
.btn-row{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
@media (max-width:479px){.btn-row .btn{width:100%}}

/* ---------- plates (taped-in cards) ---------- */
.plate{position:relative;background:var(--plate);padding:10px 10px 28px;box-shadow:0 1px 2px rgba(30,36,28,.12),0 18px 40px -22px rgba(30,36,28,.45);transform:translateY(var(--py,0px)) rotate(var(--rot,0deg));transition:transform 700ms var(--ease),box-shadow 700ms var(--ease);margin:0}
.plate::before,.plate::after{content:"";position:absolute;top:-9px;width:54px;height:18px;background:var(--tape);box-shadow:0 1px 1px rgba(30,36,28,.15);transform:rotate(-3deg);pointer-events:none}
.plate::before{left:14px} .plate::after{right:14px;transform:rotate(4deg)}
.plate img{width:100%;height:auto;background:var(--plate)}
.plate figcaption,.plate .cap{padding:8px 2px 0;font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);line-height:1.5}
.plate.text{padding:26px 26px 28px}
@media (hover:hover) and (pointer:fine){.plate:hover{transform:translateY(calc(var(--py,0px) - 6px)) rotate(0deg);box-shadow:0 2px 4px rgba(30,36,28,.12),0 30px 60px -24px rgba(30,36,28,.5)}}
.forest .plate{background:var(--forest);border:1px solid rgba(240,237,224,.14);box-shadow:0 18px 40px -22px rgba(0,0,0,.7)} .forest .plate::before,.forest .plate::after{background:rgba(252,176,64,.28)}
.forest .plate img{background:var(--forest-2)} .forest .plate figcaption{color:var(--on-forest-muted)}
.plate .photo{display:block;aspect-ratio:4/5;overflow:hidden;background:var(--paper-2)} .plate figcaption{display:flex;flex-direction:column;gap:4px} .plate .photo img{width:100%;height:100%;object-fit:cover;transition:transform 900ms var(--ease)}
@media (hover:hover) and (pointer:fine){.plate:hover .photo img{transform:scale(1.04)}}
.contain img{object-fit:contain;aspect-ratio:3/2;max-height:640px;background:#fff}

/* ---------- nav ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:var(--nav-h);padding:calc(8px + var(--sat)) calc(clamp(16px,4vw,48px) + var(--sar)) 8px calc(clamp(16px,4vw,48px) + var(--sal));background:rgba(244,238,224,.94);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid var(--hair);view-transition-name:nav}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);min-height:44px}
.brand .mark{height:38px;width:auto} .brand .mark svg{height:38px;width:auto}
.brand .word{font-family:var(--serif);font-weight:600;font-size:1.35rem;letter-spacing:.2em;color:var(--ink)}
.brand .tag{font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;color:var(--rust);text-transform:uppercase;margin-left:4px}
@media (max-width:1099px){.brand .tag{display:none}}
.nav-links{display:flex;align-items:center;gap:clamp(14px,2vw,26px)}
.nav-links a[data-link]{font-family:var(--serif);font-size:1.12rem;color:var(--ink);text-decoration:none;white-space:nowrap;padding:8px 0;position:relative}
.nav-links a[data-link]::after{content:"";position:absolute;left:0;right:100%;bottom:4px;height:1px;background:var(--rust);transition:right 260ms var(--ease)}
.nav-links a[data-link]:hover{color:var(--rust)} .nav-links a[data-link]:hover::after{right:0}
.nav-links a[aria-current="page"]{color:var(--rust)} .nav-links a[aria-current="page"]::after{right:0}
.lang{font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);text-decoration:none;padding:10px 8px;min-height:44px;display:inline-flex;align-items:center}
.lang:hover{color:var(--rust)}
.nav .btn{padding:11px 18px;min-height:40px}
.menu-btn{display:none;min-height:44px;min-width:44px;padding:8px 10px;background:transparent;border:1px solid var(--hair-3);border-radius:3px;font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;cursor:pointer}
@media (max-width:959px){
  .nav-links{position:fixed;top:calc(var(--nav-h) + var(--sat));left:0;right:0;flex-direction:column;align-items:stretch;gap:0;padding:8px calc(clamp(16px,4vw,48px) + var(--sal)) 24px;background:var(--paper);border-bottom:1px solid var(--hair);transform:translateY(-8px);opacity:0;visibility:hidden;transition:opacity 220ms var(--ease),transform 220ms var(--ease),visibility 0s 220ms}
  .nav[data-open] .nav-links{transform:none;opacity:1;visibility:visible;transition:opacity 220ms var(--ease),transform 220ms var(--ease)}
  .nav-links a[data-link]{font-size:1.5rem;padding:12px 0;border-bottom:1px dotted var(--hair-2)}
  .nav-links a[data-link]::after{display:none}
  .nav-links .lang{display:none}
  .nav-links .btn{margin-top:12px}
  .menu-btn{display:inline-flex;align-items:center;gap:8px}
  .nav-right{display:flex;align-items:center;gap:8px}
  .nav-right .btn{display:none}
}
@media (min-width:960px){.nav-right{display:contents}.nav-right > .btn,.nav-right > .lang{display:none}}

/* ---------- cover ---------- */
.cover{min-height:100svh;padding:calc(var(--nav-h) + var(--sat) + clamp(40px,8vh,96px)) calc(var(--right-x) + var(--sar)) clamp(48px,8vh,80px) calc(var(--content-x) + var(--sal));display:flex;flex-direction:column;justify-content:center;overflow:clip}
.cover .col{position:relative;max-width:min(820px,62%);display:flex;flex-direction:column;gap:clamp(18px,3vh,28px);z-index:2}
@media (max-width:1099px){.cover .col{max-width:min(820px,72%)}}
@media (max-width:767px){.cover .col{max-width:100%}}
.cover .kline{display:flex;gap:14px;flex-wrap:wrap;font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.cover h1 .line{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.cover h1 .line > span{display:block}
.cover h1 em{color:var(--rust);position:relative;display:inline-block}
.cover h1 em svg{position:absolute;left:0;bottom:-.02em;width:100%;height:.14em;overflow:visible}
.cover h1 em path{stroke:var(--rust);stroke-width:2.4;fill:none;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0}
.cover .ru-note{font-size:.95rem;line-height:1.6;color:var(--muted);max-width:52ch;border-left:2px solid var(--rust);padding-left:14px}
.cover-plates{position:absolute;inset:0;pointer-events:none;z-index:1}
.cover-plates .plate{position:absolute;width:var(--w);left:var(--x);top:var(--y);opacity:.97;pointer-events:auto;will-change:transform}
.cover-plates .plate figcaption{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:1099px){.cover-plates .plate:nth-child(n+2){display:none}.cover-plates .plate:first-child{left:auto;right:var(--right-x);top:calc(var(--nav-h) + 24px);width:clamp(120px,18vw,200px)}}
@media (max-width:767px){.cover-plates{position:static;order:-1;margin:0 0 8px;display:block}.cover-plates .plate:first-child{position:relative;left:auto;top:auto;right:auto;width:38vw;max-width:170px;margin-left:auto;--rot:3deg}.cover{justify-content:flex-start}}
@media (max-height:520px) and (orientation:landscape){.cover{min-height:auto;padding-top:calc(var(--nav-h) + 16px);padding-bottom:32px}.cover-plates{display:none}.cover .h1{font-size:2.2rem}.cover .col{gap:12px;max-width:100%}.cover .ru-note{display:none}.cover .lede{font-size:1.1rem;max-width:60ch}}

/* ---------- doors / cells ---------- */
.doors{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:1px;background:var(--hair);border:1px solid var(--hair)}
.door{background:var(--paper);padding:36px 32px 40px;display:flex;flex-direction:column;gap:12px;transition:background 240ms var(--ease);text-decoration:none;color:inherit}
.door:hover{background:var(--raised);color:inherit}
.door:active{transform:scale(.995)}
.door{transition:background 240ms var(--ease),transform 160ms var(--ease)}
.door .disc{width:22px;height:22px;border-radius:50%;background:var(--red)} .door .disc.orange{background:var(--orange)} .door .disc.green{background:var(--green)}
.door h3{font-size:1.7rem;font-weight:600}
.door .arrow-link{margin-top:auto;padding-top:10px}
@media (max-width:767px){.door{padding:28px 20px 30px}}
.cap-cell{display:flex;flex-direction:column;gap:12px;padding-top:0} .cap-cell::before{content:"";display:block;height:2px;background:var(--ink);margin-bottom:4px;transform-origin:left}
.cap-cell h3{font-size:1.75rem;font-weight:600;line-height:1.05}
.cap-cell ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px;font-size:.95rem;line-height:1.5}
.cap-cell.orange::before{background:var(--orange)} .cap-cell.green::before{background:var(--green)} .cap-cell.red::before{background:var(--red)} .cap-cell.gold::before{background:var(--gold)}
.pills{display:flex;gap:8px;flex-wrap:wrap}
.pill{padding:6px 11px;border:1px solid var(--hair-3);border-radius:3px;font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--body)}
.forest .pill{border-color:rgba(252,176,64,.5);color:var(--on-forest)}

/* ---------- steps, checklist, log, faq ---------- */
.steps{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:22px}
.step{display:grid;grid-template-columns:44px minmax(0,1fr);gap:14px}
.step .num{font-family:var(--serif);font-style:italic;font-size:1.65rem;color:var(--rust);line-height:1;display:inline-block;transform-origin:50% 60%}
.step h3{font-size:1.5rem;font-weight:600;line-height:1.1}
.step p{font-size:.95rem;line-height:1.65;max-width:52ch}
.step .stack{gap:6px}
@media (max-width:479px){.step{grid-template-columns:34px minmax(0,1fr);gap:10px}}
.teach{padding-left:58px;font-family:var(--serif);font-style:italic;font-size:1.2rem;color:var(--ink)} @media (max-width:479px){.teach{padding-left:44px}}
.checklist{margin:14px 0 0;padding:0;list-style:none;display:flex;flex-direction:column}
.checklist li{display:grid;grid-template-columns:22px minmax(0,.9fr) minmax(0,1.3fr);gap:10px;padding:10px 0;border-top:1px solid var(--hair);font-size:.85rem;line-height:1.5}
.checklist .name{font-family:var(--serif);font-size:1.06rem;color:var(--ink)} .checklist .out{color:var(--muted)}
.tick{display:inline-block;font-family:var(--mono);color:var(--rust);transform-origin:center}
@media (max-width:479px){.checklist li{grid-template-columns:22px minmax(0,1fr)}.checklist .out{grid-column:2}}
.log{margin:0;padding:0;list-style:none;display:flex;flex-direction:column}
.log li{display:grid;grid-template-columns:96px minmax(0,1fr);gap:14px;padding:8px 0;font-size:.95rem;line-height:1.5;position:relative} .log li::after{content:"";position:absolute;left:0;right:0;bottom:0;border-bottom:1px dotted var(--hair-2);transform-origin:left}
.log .date{font-family:var(--mono);font-size:.7rem;letter-spacing:.06em;color:var(--ink);padding-top:3px;display:inline-block;transform-origin:left center}
@media (max-width:479px){.log li{grid-template-columns:72px minmax(0,1fr);gap:10px}}
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr));gap:16px 24px;border-top:1px solid var(--hair);padding-top:16px}
.facts dt{font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)} .facts dd{margin:4px 0 0;font-family:var(--serif);font-size:1.15rem;color:var(--ink);line-height:1.2}
.faq{display:flex;flex-direction:column;border-top:1px solid var(--hair)}
.faq-item{border-bottom:1px solid var(--hair)}
.faq-q{display:flex;justify-content:space-between;align-items:center;gap:20px;width:100%;padding:16px 0;background:transparent;border:0;cursor:pointer;text-align:left;font-family:var(--serif);font-weight:600;font-size:1.25rem;line-height:1.2;color:var(--ink);min-height:44px}
.faq-q:hover{color:var(--rust)} .faq-q:active{transform:scale(.99)} .faq-q{transition:color 200ms var(--ease),transform 160ms var(--ease)}
.faq-q .plus{font-family:var(--serif);font-size:1.6rem;line-height:1;color:var(--rust);flex:none;transition:transform 400ms var(--ease)}
.faq-q[aria-expanded="true"] .plus{transform:rotate(45deg)}
.faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows 400ms var(--ease)}
.faq-a > div{overflow:hidden}
.faq-a p{padding:0 0 18px;font-size:.95rem;line-height:1.65;max-width:58ch}
.faq-item[data-open] .faq-a{grid-template-rows:1fr}
.works{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:28px}
.work{display:flex;flex-direction:column;gap:10px;text-decoration:none;color:inherit}
.work h3{font-size:1.6rem;font-weight:600;line-height:1.1}
.work p{font-size:.95rem;line-height:1.65}
.notes{display:flex;flex-direction:column}
.note{display:flex;flex-direction:column;gap:4px;padding:14px 0;border-top:1px dotted var(--hair-2);text-decoration:none;color:inherit}
.note .kind{font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.note h3{font-size:1.3rem;font-weight:600;line-height:1.2} .note p{font-size:.95rem;line-height:1.5}
.forest .note .kind{color:var(--on-forest-muted)}
.manifesto-lines{font-family:var(--serif);font-style:italic;font-size:clamp(1.3rem,2vw,1.7rem);line-height:1.4;color:var(--muted);display:flex;flex-direction:column;gap:6px}
.manifesto-lines span:nth-child(2){padding-left:1.2em} .manifesto-lines span:nth-child(3){padding-left:2.4em} .manifesto-lines span:nth-child(4){padding-left:3.6em}
.statement{font-family:var(--serif);font-weight:500;font-size:clamp(1.7rem,2.8vw,2.5rem);line-height:1.15;color:var(--ink);text-wrap:balance}
.dropcap::first-letter{font-family:var(--serif);font-size:3.4em;line-height:.8;float:left;padding:.08em .12em 0 0;color:var(--rust)}

/* ---------- institute mist ---------- */
.mist{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.mist img{width:110%;height:110%;object-fit:cover;opacity:.22;filter:saturate(.2);background:transparent}
.forest .wrap{position:relative;z-index:1}
.credit-line{position:absolute;right:16px;bottom:10px;font-family:var(--mono);font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(240,237,224,.4);z-index:1}

/* ---------- teaser plates ---------- */
.teaser{position:relative;height:320px}
.teaser .plate{position:absolute;width:var(--w);left:var(--x);top:var(--y)}
@media (max-width:767px){.teaser{height:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.teaser .plate{position:static;width:auto}}

/* ---------- plate room ---------- */
.tradition{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:48px;align-items:start;border-top:1px solid var(--hair);padding-top:40px}
.tradition .who{position:sticky;top:calc(var(--nav-h) + 24px);display:flex;flex-direction:column;gap:10px}
.tradition h2{font-size:1.9rem}
.grid-plates{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:28px 22px}
.grid-plates .plate{cursor:zoom-in;border:0;text-align:left;font:inherit;color:inherit;width:100%}
.grid-plates .plate:active{transform:translateY(calc(var(--py,0px) - 2px)) rotate(0deg) scale(.985)}
@media (max-width:767px){.tradition{grid-template-columns:1fr;gap:24px}.tradition .who{position:static}.grid-plates{grid-template-columns:repeat(2,1fr);gap:22px 14px}}
.lightbox{position:fixed;inset:0;z-index:100;background:rgba(30,36,28,.86);display:none;align-items:center;justify-content:center;padding:calc(24px + var(--sat)) 24px calc(24px + var(--sab))}
.lightbox[data-open]{display:flex}
.lightbox figure{margin:0;max-width:min(92vw,900px);max-height:92svh;display:flex;flex-direction:column;background:var(--plate);padding:12px 12px 12px;box-shadow:0 30px 80px rgba(0,0,0,.5)}
.lightbox img{max-height:calc(92svh - 70px);width:auto;max-width:100%;object-fit:contain;margin:0 auto}
.lightbox figcaption{padding:10px 2px 0;font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.lightbox .close{position:absolute;top:calc(16px + var(--sat));right:16px;min-width:44px;min-height:44px;background:var(--plate);border:0;border-radius:3px;font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;cursor:pointer;transition:transform 160ms var(--ease)}
.lightbox .close:active,.lightbox .prev:active,.lightbox .next:active{transform:scale(.94)}
.lightbox .prev,.lightbox .next{position:absolute;top:50%;transform:translateY(-50%);min-width:44px;min-height:44px;background:var(--plate);border:0;border-radius:3px;font-family:var(--serif);font-size:1.4rem;cursor:pointer}
.lightbox .prev{left:12px} .lightbox .next{right:12px}

/* ---------- form ---------- */
.form{display:flex;flex-direction:column;gap:20px}
.field{display:flex;flex-direction:column;gap:6px}
.field > span{font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.field input,.field textarea{appearance:none;width:100%;background:transparent;border:0;border-bottom:1px solid var(--hair-3);border-radius:0;padding:6px 0 8px;font-family:var(--serif);font-size:1.2rem;color:var(--ink);outline:none;transition:border-color 240ms var(--ease);min-height:44px}
.field textarea{resize:vertical;min-height:88px}
.field input:focus,.field textarea:focus{border-bottom-color:var(--rust);box-shadow:0 1px 0 var(--rust)}
.field input::placeholder,.field textarea::placeholder{color:var(--faint);opacity:1}
.field.invalid input,.field.invalid textarea{border-bottom-color:var(--red)}
.field .err{font-size:.85rem;color:var(--red);display:none} .field.invalid .err{display:block}
.two{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:20px}
.choices{display:flex;gap:8px;flex-wrap:wrap}
.choice{position:relative}
.choice input{position:absolute;opacity:0;width:1px;height:1px}
.choice span{display:inline-flex;align-items:center;min-height:40px;padding:8px 14px;border-radius:3px;border:1px solid var(--hair-3);font-size:.85rem;cursor:pointer;transition:background 240ms var(--ease),color 240ms var(--ease),border-color 240ms}
.choice input:checked + span{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.choice input:focus-visible + span{outline:2px solid var(--rust);outline-offset:3px}
.choice:active span{transform:scale(.97)}
.consent{display:flex;gap:10px;align-items:flex-start;font-size:.85rem;line-height:1.5;color:var(--body)}
.consent input,.field input[type=checkbox]{width:18px;height:18px;min-height:0;margin:3px 0 0;accent-color:var(--rust);flex:none;border:0;appearance:auto;box-shadow:none}
.hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.form-foot{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.status{font-size:.95rem;line-height:1.5;min-height:1.4em;color:var(--body)} .status[data-kind="error"]{color:var(--red)} .status[data-kind="ok"]{color:var(--green-k)}
.sent{display:none;flex-direction:column;gap:12px;padding:8px 0} .form-wrap[data-sent] .sent{display:flex} .form-wrap[data-sent] form{display:none}
.sent .mark{height:56px;width:auto;align-self:flex-start}
.sent h3{font-size:1.6rem}

/* ---------- footer ---------- */
.footer{border-top:1px solid var(--hair);padding:36px 0 calc(40px + var(--sab));display:flex;flex-direction:column;gap:22px}
.footer .row{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
.footer .links{display:flex;gap:22px;font-size:.85rem;flex-wrap:wrap}
.footer .links a{color:var(--body);text-decoration:none;padding:6px 0} .footer .links a:hover{color:var(--rust)}
.footer .fine{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);line-height:1.7}
.footer .fine .left{max-width:70ch}
.footer .brand .word{font-size:1.2rem}
.footer .quip{font-family:var(--serif);font-style:italic;font-size:.95rem;color:var(--muted)}
/* the credit: Archivo 400, 11.5px, 86% opacity, Latin in every language, bee outside the phrase (house rule) */
.pkc{display:inline-flex;align-items:center;gap:8px;font-family:Archivo,system-ui,sans-serif;font-size:11.5px;letter-spacing:.03em;text-transform:none;line-height:1;color:rgba(30,36,28,.86);text-decoration:none;white-space:nowrap}
.pkc:hover{color:var(--ink)}
.pkc .bee{flex:none;display:block;position:relative;width:40px;height:26px;transform:rotate(-11deg);margin:-8px 0}
.pkc .bee span{display:block;width:100%;height:100%} .pkc .bee .s1{animation:pkcStep 38s ease-in-out infinite} .pkc .bee .s2{animation:pkcGait 6.5s ease-in-out infinite} .pkc .bee .s3{position:relative;animation:pkcBreathe 7.2s ease-in-out infinite}
.pkc .bee img{position:absolute;inset:0;width:100%;height:100%;background:transparent}
.pkc .bee .wl{transform-origin:46.1% 32.5%;animation:pkcWingL 8.3s ease-in-out infinite} .pkc .bee .wr{transform-origin:54.1% 32.5%;animation:pkcWingR 10.1s ease-in-out infinite}
.pkc .bee .ll{transform-origin:43.5% 50.7%;animation:pkcLegL 9.4s ease-in-out infinite} .pkc .bee .lr{transform-origin:56.6% 50.7%;animation:pkcLegR 11.6s ease-in-out infinite}
.pkc .bee .al{transform-origin:48% 14.3%;animation:pkcAntL 7.1s ease-in-out infinite} .pkc .bee .ar{transform-origin:54.7% 14.3%;animation:pkcAntR 8.3s ease-in-out infinite}
.pkc[data-idle] *{animation-play-state:paused!important}
@keyframes pkcStep{0%{transform:translate(0,0) rotate(0)}11%,22%{transform:translate(.34px,-.05px) rotate(-.22deg)}33%,47%{transform:translate(.72px,.06px) rotate(.12deg)}58%,72%{transform:translate(1.05px,-.07px) rotate(.3deg)}84%,93%{transform:translate(.5px,.05px) rotate(-.16deg)}100%{transform:translate(0,0) rotate(0)}}
@keyframes pkcGait{0%,100%{transform:translateY(0)}50%{transform:translateY(-.5px)}}
@keyframes pkcBreathe{0%,100%{transform:scale(1)}43%{transform:scale(1.012)}}
@keyframes pkcWingL{0%,70%,100%{transform:rotate(0)}73%{transform:rotate(-6deg)}77%{transform:rotate(-1.5deg)}81%{transform:rotate(0)}}
@keyframes pkcWingR{0%,54%,100%{transform:rotate(0)}57%{transform:rotate(5.5deg)}61%{transform:rotate(1deg)}66%{transform:rotate(0)}}
@keyframes pkcLegL{0%,100%{transform:rotate(0)}38%{transform:rotate(-4deg)}62%{transform:rotate(1.5deg)}}
@keyframes pkcLegR{0%,100%{transform:rotate(0)}46%{transform:rotate(3.6deg)}72%{transform:rotate(-1.2deg)}}
@keyframes pkcAntL{0%,80%,100%{transform:rotate(0)}83%{transform:rotate(-9deg)}87%{transform:rotate(-3deg)}91%{transform:rotate(-7deg)}96%{transform:rotate(0)}}
@keyframes pkcAntR{0%,62%,100%{transform:rotate(0)}65%{transform:rotate(8deg)}70%{transform:rotate(2deg)}75%{transform:rotate(6deg)}80%{transform:rotate(0)}}

/* ---------- fruit rail (desktop) ---------- */
.rail{position:fixed;left:calc(var(--margin-x) + var(--sal));top:50%;transform:translate(-50%,-50%);z-index:20;display:none;flex-direction:column;gap:14px;padding:10px 6px;background:rgba(244,238,224,.8);border-radius:20px}
@media (min-width:1280px){.rail{display:flex}}
.rail a{display:block;width:14px;height:14px;border-radius:50%;border:1.5px solid var(--c,var(--rust));background:transparent;transition:background 300ms var(--ease),transform 300ms var(--pop);position:relative}
.rail a[aria-current]{background:var(--c,var(--rust));transform:scale(1.25)}
@media (hover:hover) and (pointer:fine){.rail a:hover{transform:scale(1.25)}}
.rail a:active{transform:scale(1.1)}
.rail a span{position:absolute;left:24px;top:50%;transform:translateY(-50%);white-space:nowrap;font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);opacity:0;transition:opacity 200ms var(--ease);pointer-events:none}
.rail a:hover span,.rail a:focus-visible span{opacity:1}

/* ---------- sap line (case page) ---------- */
.sap{position:absolute;left:calc(var(--margin-x) + var(--sal) - 1px);top:0;bottom:0;width:3px;background:linear-gradient(180deg,var(--green),#85c340);transform-origin:top;transform:scaleY(var(--sap,0));pointer-events:none;border-radius:2px;opacity:.85}
@supports (animation-timeline:view()){.sap{animation:sapRise linear both;animation-timeline:view();animation-range:entry 0% exit 100%;transform:none}}
@keyframes sapRise{from{transform:scaleY(0)}to{transform:scaleY(1)}}

/* ---------- motion: entrance and reveal ---------- */
@keyframes lineRise{from{transform:translateY(110%);opacity:0}to{transform:none;opacity:1}}
@keyframes rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes floatIn{from{opacity:0;transform:translateY(70px) rotate(calc(var(--rot,0deg) + 9deg)) scale(.94)}}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes marginDraw{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes fruitPop{from{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes stamp{from{transform:scale(1.25) rotate(-4deg);opacity:0}60%{transform:scale(.96) rotate(.5deg);opacity:1}to{transform:none;opacity:1}}
@keyframes tickPop{from{transform:scale(.6);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes drift{from{transform:translate3d(0,0,0) scale(1.02)}50%{transform:translate3d(-3%,-2%,0) scale(1.06)}to{transform:translate3d(0,0,0) scale(1.02)}}
[data-reveal]{opacity:1;transform:none;transition:opacity 900ms var(--ease),transform 900ms var(--ease)}
[data-reveal] > *{transition:opacity 800ms var(--ease),transform 800ms var(--ease)}
[data-reveal] > *:nth-child(2){transition-delay:90ms}[data-reveal] > *:nth-child(3){transition-delay:180ms}[data-reveal] > *:nth-child(4){transition-delay:270ms}[data-reveal] > *:nth-child(5){transition-delay:360ms}[data-reveal] > *:nth-child(6){transition-delay:450ms}[data-reveal] > *:nth-child(7){transition-delay:540ms}[data-reveal] > *:nth-child(8){transition-delay:630ms}
html[data-anim] [data-reveal]:not([data-in]){opacity:0;transform:translateY(28px)}
html[data-anim] [data-reveal]:not([data-in]) > *{opacity:0;transform:translateY(18px)}
html[data-anim] .tick{opacity:0;transform:scale(.6)}
html[data-anim] [data-in] .tick{animation:tickPop 600ms var(--pop) both;animation-delay:calc(400ms + var(--i,0) * 80ms)}
html[data-anim] .step .num{opacity:0}
html[data-anim] [data-in] .step .num{animation:stamp 420ms var(--ease) both;animation-delay:calc(120ms + var(--i,0) * 140ms)}
html[data-anim] .log .date{opacity:0}
html[data-anim] [data-in] .log .date{animation:stamp 380ms var(--ease) both;animation-delay:calc(80ms + var(--i,0) * 70ms)}
html[data-anim] .cover.page::before{transform-origin:top;animation:marginDraw 1600ms var(--ease) 200ms both}
html[data-anim] .cover .kline{animation:rise 900ms var(--ease) 50ms both}
html[data-anim] .cover h1 .line > span{animation:lineRise 1000ms var(--ease) both}
html[data-anim] .cover h1 .line:nth-child(1) > span{animation-delay:150ms}html[data-anim] .cover h1 .line:nth-child(2) > span{animation-delay:300ms}html[data-anim] .cover h1 .line:nth-child(3) > span{animation-delay:450ms}
html[data-anim] .cover h1 em path{stroke-dashoffset:1;animation:draw 900ms var(--ease) 1300ms both}
html[data-anim] .cover .lede,html[data-anim] .cover .ru-note{animation:rise 900ms var(--ease) 750ms both}
html[data-anim] .cover .btn-row{animation:rise 900ms var(--ease) 950ms both}
html[data-anim] .cover-plates .plate{animation:floatIn 1400ms var(--ease) both;animation-delay:calc(500ms + var(--i,0) * 220ms)}
html[data-anim] .inner-head{animation:rise 800ms var(--ease) 60ms both}
html[data-anim]:not([data-popped]) .brand .fruit{animation:fruitPop 520ms var(--pop) both;animation-delay:calc(200ms + var(--i,0) * 30ms);transform-origin:center;transform-box:fill-box}
html[data-anim] .mist img{animation:drift 50s ease-in-out infinite}
html[data-anim] .mist[data-idle] img{animation-play-state:paused}
@media (max-width:767px){html[data-anim] [data-reveal]:not([data-in]){transform:translateY(18px)}html[data-anim] [data-reveal]:not([data-in]) > *{transform:translateY(12px)}}

/* ---------- page turn (cross-document view transitions) ---------- */
@view-transition{navigation:auto}
::view-transition-old(root){animation:turnOut 420ms var(--ease) both}
::view-transition-new(root){animation:turnIn 420ms var(--ease) both}
@keyframes turnOut{to{opacity:0;transform:translateX(-4%) scale(.985)}}
@keyframes turnIn{from{opacity:0;transform:translateX(5%)}}
::view-transition-old(nav),::view-transition-new(nav){animation:none}

/* ---------- reduced motion: everything visible, feedback instant ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  [data-reveal],[data-reveal] > *,.tick,.step .num,.log .date,.cover-plates .plate,.cover .kline,.cover .lede,.cover .btn-row,.cover h1 .line > span,.brand .fruit,.inner-head{animation:none!important;opacity:1!important;transform:none!important;transition:none!important}
  .cover.page::before{animation:none!important;transform:none!important}
  .cover h1 em path{animation:none!important;stroke-dashoffset:0!important}
  .mist img{animation:none!important}
  /* reduced motion is fewer and gentler, not zero (RULES.md, Expressive motion): movement goes,
     colour and opacity feedback stays, because a reader still needs to see a control respond. */
  .plate,.plate .photo img,.rail a,.arrow-link::after,.faq-q .plus,.nav-links,.btn,.choice span,.door,.faq-q{transition-property:color,background-color,border-color,opacity,box-shadow!important;transition-duration:160ms!important}
  .faq-a{transition-duration:1ms!important}
  .btn:active,.door:active,.faq-q:active,.choice:active span,.rail a:active,.grid-plates .plate:active,.lightbox .close:active{transform:none!important}
  .sap{animation:none!important;transform:none!important}
  ::view-transition-old(root),::view-transition-new(root){animation:none!important}
  .pkc .bee *{animation-duration:.001ms!important;animation-iteration-count:1!important}
}

/* ---------- utilities ---------- */
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:fixed;left:0;top:0;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;background:var(--ink);color:var(--paper);padding:10px 14px;border-radius:3px;z-index:60;font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;text-decoration:none}
.skip:focus{left:8px;top:calc(8px + var(--sat));width:auto;height:auto;clip:auto}
.inner-head{padding-top:calc(var(--nav-h) + var(--sat) + clamp(40px,8vh,96px));display:flex;flex-direction:column;gap:18px;max-width:62ch}
.inner-head .h1{max-width:16ch;font-size:clamp(2.4rem,5vw,4.6rem)}
.accent-plate{display:none} @media (min-width:1100px){.accent-plate{display:block;position:absolute;right:clamp(16px,4vw,64px);top:48px;width:clamp(90px,9vw,140px);opacity:.92;z-index:1}}
.breadcrumb{font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);display:flex;gap:10px;flex-wrap:wrap;list-style:none;margin:0;padding:0}
.breadcrumb a{color:var(--muted);text-decoration:none} .breadcrumb a:hover{color:var(--rust)}
.prose{max-width:64ch;display:flex;flex-direction:column;gap:18px} .prose h2{font-size:1.7rem;margin-top:14px} .prose ul{margin:0;padding-left:1.2em} .prose li{margin:4px 0}
.prose dl{margin:0} .prose dt{font-family:var(--serif);font-size:1.15rem;color:var(--ink);margin-top:10px} .prose dd{margin:4px 0 0}

/* archive strip on the case page: uneven plates, like photographs taped in */
.archive{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:36px 28px;align-items:start}
.archive .plate:nth-child(2){margin-top:28px} .archive .plate:nth-child(5){margin-top:20px}
.archive .plate figcaption{text-transform:none;letter-spacing:.06em;font-size:.7rem}
@media (max-width:767px){.archive .plate:nth-child(n){margin-top:0}}

/* ---------- lively, elegant: the notebook writes itself as you read ---------- */
.w{display:inline} .h2 .w,.h3 .w,.statement .w{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.1em;margin-bottom:-.1em} .h2 .w > span,.h3 .w > span,.statement .w > span{display:inline-block}
html[data-anim] [data-reveal]:not([data-in]) .w > span{transform:translateY(110%);opacity:0}
html[data-anim] [data-in] .w > span{animation:lineRise 800ms var(--ease) both;animation-delay:calc(var(--i,0) * 45ms)}
@keyframes typeIn{from{clip-path:inset(-2px 100% -2px 0)}to{clip-path:inset(-2px 0 -2px 0)}}
html[data-anim] [data-reveal]:not([data-in]) .kicker{clip-path:inset(-2px 100% -2px 0)}
html[data-anim] [data-in] .kicker{animation:typeIn 700ms steps(26) both}
@keyframes tapeIn{from{opacity:0;transform:translateY(calc(var(--py,0px) + 48px)) rotate(calc(var(--rot,0deg) + 7deg)) scale(.96)}to{opacity:1;transform:translateY(var(--py,0px)) rotate(var(--rot,0deg))}}
html[data-anim] [data-reveal]:not([data-in]) .plate{opacity:0}
html[data-anim] [data-in] .plate:not([data-taped]){animation:tapeIn 900ms var(--ease) both;animation-delay:calc(var(--i,0) * 70ms)}
@keyframes drawX{from{transform:scaleX(0)}to{transform:scaleX(1)}}
html[data-anim] [data-reveal]:not([data-in]) .cap-cell::before,html[data-anim] [data-reveal]:not([data-in]) .log li::after{transform:scaleX(0)}
html[data-anim] [data-in] .cap-cell::before{animation:drawX 760ms var(--ease) both;animation-delay:calc(var(--i,0) * 80ms)}
html[data-anim] [data-in] .log li::after{animation:drawX 700ms var(--ease) both;animation-delay:calc(120ms + var(--i,0) * 70ms)}
html[data-anim] [data-reveal]:not([data-in]) .door .disc{transform:scale(.4);opacity:0}
html[data-anim] [data-in] .door .disc{animation:tickPop 620ms var(--pop) both;animation-delay:calc(240ms + var(--i,0) * 140ms)}
html[data-anim] [data-reveal]:not([data-in]) .plate .photo img{transform:scale(1.1)}
html[data-anim] [data-in] .plate .photo img{transition-duration:1600ms}
@media (hover:hover) and (pointer:fine){.brand:hover .fruit{animation:fruitRipple 900ms var(--pop) both;animation-delay:calc(var(--i,0) * 18ms);transform-origin:center;transform-box:fill-box}}
@keyframes fruitRipple{30%{transform:scale(1.28)}100%{transform:scale(1)}}
/* the margin inks down the viewport as the page is read: scroll-driven, JS fallback sets --read */
.ink{position:fixed;left:calc(var(--margin-x) + var(--sal) - .5px);top:0;width:2px;height:100vh;background:var(--rust);transform-origin:top;transform:scaleY(var(--read,0));opacity:.5;pointer-events:none;z-index:1}
@supports (animation-timeline:scroll()){.ink{animation:inkDown linear both;animation-timeline:scroll(root);transform:none}}
@keyframes inkDown{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@media (max-width:767px){.ink{display:none}}
@media (prefers-reduced-motion:reduce){.w > span,.kicker,.plate,.cap-cell::before,.log li::after,.door .disc,.plate .photo img,.brand .fruit{animation:none!important;transform:none!important;clip-path:none!important;opacity:1!important}.ink{display:none}.btn-primary::before{transition-property:opacity!important}}