/* MONOLITH™ v6 "Lumen" — the monograph, lit from within. Built on v5 "Monograph"
   Built from the studio's own material — the Didone wordmark and its drafting lines, the capabilities deck
   (serif + italic accent, crosshair marks, roman numerals, folios, ghost words) and the brand boards
   (Playfair Display + Inter, #0B0B0C / #232427 / #6F737A / #B6BCC4 / #F2F3F5, liquid chrome plates). */

/* self-hosted fonts (SIL Open Font License 1.1) — Inter, Playfair Display */
@font-face{font-family:"Inter";font-style:normal;font-weight:300 500;font-display:swap;src:url(../fonts/inter-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Inter";font-style:normal;font-weight:300 500;font-display:swap;src:url(../fonts/inter-latin.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:"Playfair Display";font-style:normal;font-weight:400 500;font-display:swap;src:url(../fonts/playfair-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Playfair Display";font-style:normal;font-weight:400 500;font-display:swap;src:url(../fonts/playfair-latin.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:"Playfair Display";font-style:italic;font-weight:400 500;font-display:swap;src:url(../fonts/playfair-italic-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Playfair Display";font-style:italic;font-weight:400 500;font-display:swap;src:url(../fonts/playfair-italic-latin.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}

:root{
  /* NIGHT (default) — hardened for daylight: brighter text, stronger rules */
  --ink:#0A0A0B;--carbon:#131416;--iron:#26282B;--stone:#80858C;--chrome:#C9CCD1;--pearl:#E3E5E8;--white:#F3F3F1;
  --muted:#A5AAB1;
  --fg-rgb:243 243 241;--bg-rgb:10 10 11;
  --hair:rgb(var(--fg-rgb) / .13);--line:rgb(var(--fg-rgb) / .23);--line-strong:rgb(var(--fg-rgb) / .42);
  /* the one colour: it only ever behaves like light */
  --signal:#FF2B1C;--signal-rgb:255 43 28;--ember:#B8130B;--coal:#2A0604;
  --error:#EFA9A9;
  --cross:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17'%3E%3Cpath d='M8.5 0v17M0 8.5h17' stroke='%23F4F5F7' stroke-opacity='.55' stroke-width='1'/%3E%3C/svg%3E");
  color-scheme:dark;
  --serif:"Playfair Display",Georgia,"Times New Roman",serif;
  --sans:"Inter",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;--s8:64px;--s9:96px;--s10:144px;
  --section:clamp(104px,14vw,220px);
  --pad:clamp(20px,5vw,80px);
  --header-h:92px;
  --ease:cubic-bezier(.19,1,.22,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
}
/* DAY — paper, ink and sharp rules. Follows the device unless the visitor chose a mode. */
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]){
  --ink:#E4E5E7;--carbon:#D9DBDE;--iron:#C3C6CA;--stone:#5E626A;--chrome:#2A2D32;--pearl:#18191C;--white:#0A0A0B;
  --muted:#4B4F56;--fg-rgb:10 10 11;--bg-rgb:228 229 231;--signal:#D41A0E;--signal-rgb:212 26 14;--ember:#8E0F0A;
  --hair:rgb(var(--fg-rgb) / .12);--line:rgb(var(--fg-rgb) / .2);--line-strong:rgb(var(--fg-rgb) / .4);--error:#A3262B;
  --cross:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17'%3E%3Cpath d='M8.5 0v17M0 8.5h17' stroke='%230B0B0C' stroke-opacity='.5' stroke-width='1'/%3E%3C/svg%3E");
  color-scheme:light}}
:root[data-theme="light"]{
  --ink:#E4E5E7;--carbon:#D9DBDE;--iron:#C3C6CA;--stone:#5E626A;--chrome:#2A2D32;--pearl:#18191C;--white:#0A0A0B;
  --muted:#4B4F56;--fg-rgb:10 10 11;--bg-rgb:228 229 231;--signal:#D41A0E;--signal-rgb:212 26 14;--ember:#8E0F0A;
  --hair:rgb(var(--fg-rgb) / .12);--line:rgb(var(--fg-rgb) / .2);--line-strong:rgb(var(--fg-rgb) / .4);--error:#A3262B;
  --cross:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17'%3E%3Cpath d='M8.5 0v17M0 8.5h17' stroke='%230B0B0C' stroke-opacity='.5' stroke-width='1'/%3E%3C/svg%3E");
  color-scheme:light}
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:110px;background:var(--ink)}
body{background:var(--ink);color:var(--chrome);font-family:var(--sans);font-size:1.0625rem;line-height:1.7;font-weight:380;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
img,picture,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
em{font-style:italic}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
fieldset{border:0;min-width:0}
blockquote{margin:0}
:focus-visible{outline:1px solid var(--white);outline-offset:4px}
::selection{background:rgb(var(--signal-rgb) / .85);color:#fff}
.sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:var(--s4);top:-80px;z-index:300;padding:var(--s3) var(--s5);background:var(--white);color:var(--ink);font-size:.875rem;transition:top .2s}
.skip:focus{top:var(--s4)}

/* ---------- type ---------- */
h1,h2,h3{color:var(--white);font-weight:400}
.display{font-family:var(--serif);font-weight:400;color:var(--white);letter-spacing:-.012em;line-height:1.02;font-size:clamp(2.5rem,5.6vw,5.5rem);text-wrap:balance}
.display em{color:var(--chrome)}
.display.sm{font-size:clamp(1.5rem,2.6vw,2.4rem);line-height:1.12}
.display.xl{font-size:clamp(2.8rem,8.4vw,8.6rem);line-height:.98}
h1.display{font-size:clamp(3.4rem,8vw,8.2rem);line-height:1.04;letter-spacing:-.035em}
.dim{color:var(--muted)}
p{max-width:40rem}
.lead{font-size:clamp(1.125rem,1.4vw,1.3125rem);line-height:1.6;color:var(--pearl);max-width:34rem;font-weight:340}
.label{font-family:var(--sans);font-size:.75rem;line-height:1.6;letter-spacing:.16em;text-transform:uppercase;font-weight:400;color:var(--muted)}
.kicker{display:block;margin-bottom:var(--s6)}
.rn{font-family:var(--serif);font-style:italic;color:var(--stone);font-weight:400}
.tm{font-family:var(--sans);font-size:.3em;vertical-align:1.3em;margin-left:.12em;letter-spacing:0;font-weight:400;font-style:normal}
.logo{height:20px;width:auto;aspect-ratio:1926/288;color:var(--white)}
.signature{width:200px;height:auto;color:var(--white);flex:none}

.mark{display:flex;align-items:baseline;gap:var(--s4);margin-bottom:var(--s6)}
.mark .rn{font-size:1.5rem;line-height:1;min-width:1.6em}
.mark .label{padding-left:var(--s4);border-left:1px solid var(--line)}

.marks{position:absolute;inset:0;pointer-events:none;z-index:1;
  background:var(--cross) left top/17px no-repeat,var(--cross) right top/17px no-repeat,var(--cross) left bottom/17px no-repeat,var(--cross) right bottom/17px no-repeat;
  margin:-8px}

/* ---------- layout ---------- */
.wrap{width:100%;max-width:1360px;margin-inline:auto;position:relative}
.section,.chap{padding:var(--section) var(--pad);position:relative}
.two-col{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--s7) var(--s5);align-items:start}
.two-col > :first-child{grid-column:1/7}.two-col > :last-child{grid-column:8/-1}
.head2{margin-bottom:var(--s8)}
.head2 .lead{margin-top:var(--s6)}
main{display:block}

/* ---------- buttons & links ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s4);min-height:56px;padding:0 var(--s6);border:1px solid var(--line-strong);font-family:var(--sans);font-size:.75rem;letter-spacing:.22em;text-transform:uppercase;font-weight:400;color:var(--white);cursor:pointer;position:relative;overflow:hidden;isolation:isolate;transition:color .5s var(--ease),border-color .5s;white-space:nowrap}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--white);transform:scaleY(0);transform-origin:bottom;transition:transform .6s var(--ease)}
.btn:hover{color:var(--ink);border-color:var(--white)}
.btn:hover::before{transform:none}
.btn.solid{background:var(--white);color:var(--ink);border-color:var(--white)}
.btn.solid::before{background:var(--chrome)}
.btn[disabled]{opacity:.55;cursor:progress}
.arr{width:22px;height:10px;flex:none;transition:transform .5s var(--ease)}
.btn:hover .arr,.link:hover .arr,.prod:hover .arr,.head-cta:hover .arr{transform:translateX(5px)}
.link{display:inline-flex;align-items:center;gap:var(--s3);font-size:.75rem;letter-spacing:.22em;text-transform:uppercase;color:var(--white);padding:var(--s2) 0;background:linear-gradient(var(--white),var(--white)) left bottom/0 1px no-repeat,linear-gradient(var(--line-strong),var(--line-strong)) left bottom/100% 1px no-repeat;transition:background-size .6s var(--ease)}
.link:hover{background-size:100% 1px,100% 1px}

/* ---------- header ---------- */
.site-header{position:fixed;inset:0 0 auto;z-index:100;padding:0 var(--pad);transition:background .5s,border-color .5s;border-bottom:1px solid transparent}
.site-header.solid{background:rgb(var(--bg-rgb) / .64) linear-gradient(180deg,rgb(255 255 255 / .05),rgb(255 255 255 / 0));-webkit-backdrop-filter:blur(16px) saturate(1.3);backdrop-filter:blur(16px) saturate(1.3);border-color:var(--line);box-shadow:inset 0 1px 0 rgb(255 255 255 / .07),0 18px 40px -30px rgb(0 0 0 / .6)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.site-header.solid{background:rgb(var(--bg-rgb) / .97)}}
.bar{max-width:1360px;margin-inline:auto;height:var(--header-h);display:flex;align-items:center;justify-content:space-between;gap:var(--s5)}
.brand{display:block;padding:var(--s3) 0;flex-shrink:0}
.primary ul{display:flex;gap:var(--s6)}
.primary a,.lang a,.head-cta{font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);transition:color .3s}
.primary a{position:relative;padding:var(--s2) 0}
.primary a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--white);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.primary a:hover,.primary a[aria-current="page"]{color:var(--white)}
.primary a:hover::after,.primary a[aria-current="page"]::after{transform:none}
.tools{display:flex;align-items:center;gap:var(--s6)}
.lang{display:flex;gap:var(--s3)}
.lang a{display:inline-flex;align-items:center;min-height:44px}
.lang a:hover,.lang a[aria-current="true"]{color:var(--white)}
.head-cta{display:inline-flex;align-items:center;gap:var(--s3);color:var(--white);padding:var(--s3) 0;border-bottom:1px solid var(--line-strong)}
.head-cta:hover{border-color:var(--white)}
.menu-toggle{display:none;align-items:center;gap:var(--s3);height:44px;color:var(--white);font-size:.6875rem;letter-spacing:.24em;text-transform:uppercase}
.menu-toggle .bars{width:20px;height:7px;position:relative}
.menu-toggle .bars::before,.menu-toggle .bars::after{content:"";position:absolute;left:0;right:0;height:1px;background:currentColor;transition:transform .4s var(--ease),top .4s var(--ease)}
.menu-toggle .bars::before{top:0}.menu-toggle .bars::after{top:6px}
.menu-toggle[aria-expanded="true"] .bars::before{top:3px;transform:rotate(45deg)}
.menu-toggle[aria-expanded="true"] .bars::after{top:3px;transform:rotate(-45deg)}
.menu{display:none}

/* ---------- loading screen: the wordmark draws itself, the curtain lifts ---------- */
.intro{display:none}
html.is-loading .intro,html.is-loaded .intro{display:flex;position:fixed;inset:0;z-index:400;align-items:center;justify-content:center;background:var(--ink);color:var(--white)}
html.is-loading .intro{animation:introFail .8s 3.4s forwards}
html.is-loaded .intro{transform:translateY(-100%);transition:transform 1s var(--ease-io),visibility 0s 1s;visibility:hidden}
.intro > .marks{margin:0;inset:24px}
.intro-mark{display:grid;gap:22px;width:clamp(220px,34vw,460px)}
.intro-logo{width:100%;height:auto;color:var(--white);clip-path:inset(0 100% 0 0);animation:introDraw 1.1s var(--ease-io) .1s forwards}
.intro-line{position:relative;display:block;height:1px;background:var(--line)}
.intro-line i{position:absolute;inset:0;background:var(--signal);box-shadow:0 0 14px 1px rgb(var(--signal-rgb) / .6);transform-origin:left;transform:scaleX(var(--p,0))}
.intro-lbl{position:absolute;left:clamp(28px,5vw,72px);bottom:clamp(28px,5vw,64px)}
.intro-pct{position:absolute;right:clamp(28px,5vw,72px);bottom:calc(clamp(28px,5vw,64px) - 6px);font-family:var(--serif);font-style:italic;font-size:1.75rem;line-height:1;color:var(--white);font-variant-numeric:lining-nums tabular-nums}
@keyframes introDraw{to{clip-path:inset(0 0 0 0)}}
@keyframes introFail{to{transform:translateY(-100%);visibility:hidden}}
html.menu-open{overflow:hidden}

.veil{position:fixed;inset:0;z-index:350;background:var(--ink);opacity:0;pointer-events:none;transition:opacity 1s var(--ease-io)}
.veil.on{opacity:1;pointer-events:auto}

/* ---------- lock-in headline ---------- */
.lock .ln,.blk{display:block}
.js .lock .ln{overflow:hidden;padding:0 .06em .12em 0;margin-bottom:-.12em}
.js .lock .ln > span{display:block;transform:translateY(110%);animation:lockIn 1.4s var(--ease) .1s forwards}
.js .lock .ln:nth-child(2) > span{animation-delay:.24s}
.js .lock .ln:nth-child(3) > span{animation-delay:.38s}
html.is-loading .lock .ln > span{animation-play-state:paused}
@keyframes lockIn{to{transform:none}}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* ---------- cover ---------- */
.cover{position:relative;min-height:max(720px,100svh);display:flex;flex-direction:column;justify-content:flex-end;padding:calc(var(--header-h) + var(--s8)) var(--pad) var(--s6);overflow:hidden}
.cover > .marks,.cover-diag,.cover-plate .marks{display:none}
.js .cover-diag{clip-path:inset(0 100% 0 0);animation:wipe 2.4s var(--ease-io) .6s forwards}
html.is-loading .cover-diag{animation-play-state:paused}
@keyframes wipe{to{clip-path:inset(0 0 0 0)}}
.cover-grid{position:relative;z-index:2;display:grid;grid-template-columns:repeat(12,1fr);gap:var(--s5);align-items:center;max-width:1360px;margin-inline:auto;width:100%;flex:1}
.cover-copy{grid-column:1/8;padding-bottom:var(--s6);position:relative;z-index:2}
.cover .kicker{max-width:30rem;margin-bottom:var(--s7)}
.cover .actions{gap:var(--s5) var(--s6)}
.cover .btn{letter-spacing:.12em;border-color:var(--line-strong);padding-inline:var(--s5)}
.cover .link{letter-spacing:.12em}
.cover .sub{margin-top:var(--s6);font-size:clamp(1.0625rem,1.4vw,1.25rem);color:var(--chrome);max-width:26rem}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s5) var(--s7);margin-top:var(--s7)}
.cover-plate{grid-column:8/-1;align-self:center;width:100%}
.cover-plate .plate-img{aspect-ratio:4/5}
.cover-meta{position:relative;z-index:2;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s5);max-width:1360px;width:100%;margin:var(--s7) auto 0;padding-top:var(--s4);border-top:1px solid var(--line)}
.cover-meta dd{color:var(--chrome);font-family:var(--sans);font-size:.8125rem;margin-top:var(--s2);font-weight:400}
.js .cover .kicker,.js .cover .sub,.js .cover .actions,.js .cover-meta,.js .cover-plate{opacity:0;animation:fadeUp 1.2s var(--ease) forwards}
.js .cover .kicker{animation-delay:.05s}.js .cover .sub{animation-delay:.6s}.js .cover .actions{animation-delay:.75s}.js .cover-meta{animation-delay:1s}.js .cover-plate{animation-delay:.35s}
html.is-loading .cover .kicker,html.is-loading .cover .sub,html.is-loading .cover .actions,html.is-loading .cover-meta,html.is-loading .cover-plate{animation-play-state:paused}

/* ---------- plates ---------- */
.plate{position:relative;margin:0}
.plate-frame{position:relative}
.plate-frame > .marks{margin:-8px}
.plate-img{position:relative;overflow:hidden;background:var(--carbon)}
.plate-img picture,.plate-img img{width:100%;height:100%}
.plate-img img{object-fit:cover;transform:translate3d(0,calc(var(--py,0) * 1px),0) scale(1.08)}
.plate figcaption{display:flex;gap:var(--s4);align-items:baseline;margin-top:var(--s4);font-family:var(--serif);font-style:italic;font-size:.9375rem;color:var(--muted)}
.plate figcaption .label{font-style:normal;flex:none}
.plate.wide .plate-img{aspect-ratio:21/9}
.plate.wide{padding:0 var(--pad);max-width:calc(1360px + 2 * var(--pad));margin-inline:auto}


/* ---------- scroll-driven chapters ---------- */
html.live .scrolly{height:240vh;padding:0 var(--pad)}
html.live .scrolly.studies-chap{height:270vh}
html.live .stick{position:sticky;top:0;height:100svh;display:flex;align-items:center;padding-top:var(--header-h)}
.two{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--s6) var(--s5);align-items:center;width:100%}
.two .txt{grid-column:1/7}
.two > :last-child{grid-column:7/-1}
html.live [data-at]{opacity:.12;transition:opacity .8s var(--ease),color .6s}
html.live [data-at].on{opacity:1}

.form-chap .neg{margin-top:var(--s6);display:grid;gap:var(--s1)}
.form-chap .neg li{font-family:var(--serif);font-style:italic;font-size:clamp(1.25rem,2vw,1.75rem);line-height:1.35;color:var(--chrome)}
.form-chap .end{margin-top:var(--s7);font-size:clamp(2rem,3.8vw,3.6rem)}
.slab{position:relative;display:flex;justify-content:flex-end;padding:var(--s5)}
.slab > .marks{margin:0}
.slab-svg{width:100%;max-width:400px;height:auto;max-height:74svh}
.slab .guides path{stroke:var(--chrome);stroke-width:.6;stroke-opacity:.3;stroke-dasharray:1}
.slab .guides .diag{stroke-opacity:.18}
.slab .outline path{stroke:var(--white);stroke-width:1;stroke-dasharray:1}
.slab .dims path{stroke:var(--stone);stroke-width:.8;fill:none}
.slab .dims text{fill:var(--stone);font-family:var(--serif);font-style:italic;font-size:15px}
.slab .edge{stroke:var(--white);stroke-width:1.4}
.readout{position:absolute;top:var(--s5);left:var(--s5);display:grid;gap:var(--s1)}
.readout .pct{font-family:var(--serif);font-size:clamp(2.4rem,4vw,3.6rem);color:var(--white);line-height:1;font-variant-numeric:lining-nums tabular-nums}
.stages{position:absolute;left:var(--s5);bottom:var(--s6);display:grid;gap:var(--s2)}
.stages li{display:flex;gap:var(--s3);align-items:baseline;font-size:.6875rem;letter-spacing:.24em;text-transform:uppercase;color:var(--muted)}
.stages .rn{font-size:1rem;letter-spacing:0;text-transform:none;min-width:1.8em}
html.live .stages li[data-at]{opacity:.3}
html.live .stages li.on{opacity:1;color:var(--white)}

/* ---------- II: spread ---------- */
.spread-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--s7) var(--s5);margin-top:var(--s8);align-items:start}
.pull{grid-column:1/6;border-left:1px solid var(--line-strong);padding-left:var(--s6)}
.pull p{font-family:var(--serif);font-style:italic;font-size:clamp(1.25rem,1.9vw,1.625rem);line-height:1.45;color:var(--pearl)}
.spread-grid > div{grid-column:7/-1}
.toc{border-top:1px solid var(--line)}
.toc li{display:flex;align-items:baseline;gap:var(--s4);padding:var(--s4) 0;border-bottom:1px solid var(--line)}
.toc .rn{min-width:2em;font-size:1rem}
.toc .t{font-family:var(--serif);font-size:clamp(1.375rem,2.2vw,2rem);color:var(--white);line-height:1.1}
.toc .leader{flex:1;height:1px;align-self:center;background:linear-gradient(90deg,var(--line-strong) 1px,transparent 1px) 0 0/6px 1px repeat-x;transform-origin:left}
.js .toc .leader{transform:scaleX(0);transition:transform 1s var(--ease-io) calc(var(--i) * .12s + .3s)}
.js .reveal.in .toc .leader{transform:none}
.toc-end{margin-top:var(--s6)}

/* ---------- III: products ---------- */
.products-chap{overflow:hidden}
.ghost{position:absolute;left:0;right:0;top:clamp(80px,9vw,140px);font-family:var(--serif);font-style:italic;font-size:clamp(5rem,15vw,15rem);line-height:1;color:rgb(var(--fg-rgb) / .045);white-space:nowrap;pointer-events:none;transform:translateX(calc(var(--gx,0) * 1px))}
.prods{border-top:1px solid var(--line);margin-bottom:var(--s7)}
.prod{position:relative;display:grid;grid-template-columns:64px minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr) 28px;gap:var(--s5);align-items:baseline;padding:var(--s6) 0;border-bottom:1px solid var(--line);transition:padding .7s var(--ease)}
.prod::after{content:"";position:absolute;left:0;bottom:-1px;height:1px;width:100%;background:var(--white);transform:scaleX(0);transform-origin:left;transition:transform .8s var(--ease)}
.prod:hover{padding-left:var(--s4)}
.prod:hover::after{transform:none}
.prod .rn{font-size:1.25rem}
.pname{font-family:var(--serif);font-weight:400;color:var(--white);font-size:clamp(1.9rem,4.2vw,3.8rem);line-height:1;letter-spacing:.06em}
.ptag{font-family:var(--serif);color:var(--pearl);font-size:clamp(1.0625rem,1.5vw,1.375rem)}
.pshort{color:var(--muted);font-size:.9375rem}
.prod .arr{color:var(--white);justify-self:end;align-self:center}

/* ---------- IV: models ---------- */
.models{display:grid;grid-template-columns:1fr 1fr;margin-top:var(--s8);border-top:1px solid var(--line)}
.model{padding:var(--s6) var(--s6) var(--s6) 0}
.model + .model{padding-left:var(--s6);border-left:1px solid var(--line)}
.model h3{margin-bottom:var(--s5)}
.model li{position:relative;padding:var(--s3) 0;border-bottom:1px solid var(--hair);font-size:clamp(1.125rem,1.6vw,1.375rem);font-family:var(--serif)}
.model.old li{color:var(--muted);width:fit-content;border:0;padding:var(--s2) 0}
.model.old li::after{content:"";position:absolute;left:0;top:55%;height:1px;width:var(--w,0);background:var(--muted);transition:width .9s var(--ease-io) calc(var(--i) * .12s + .4s)}
.model.old.in li{--w:100%}
html:not(.js) .model.old li{text-decoration:line-through}
.model.new li{color:var(--white)}
.model.new li::before{content:"—";color:var(--stone);margin-right:var(--s3)}

/* ---------- V: the studio's own studies ---------- */
.studies-chap .txt > p{margin-top:var(--s6)}
.study-index{position:static;margin:var(--s6) 0}
.studies{display:grid;grid-template-columns:1fr 1fr;gap:var(--s5)}
.study{position:relative;margin:0;display:flex;flex-direction:column}
.study > .marks{margin:-8px;bottom:auto;height:calc(100% - 52px)}
.study-body{position:relative;display:grid;place-items:center;aspect-ratio:4/3;padding:var(--s6);background:var(--carbon);border:1px solid var(--hair);overflow:hidden}
.study figcaption{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4);align-items:baseline;margin-top:var(--s4);min-height:36px}
.study figcaption em{font-family:var(--serif);color:var(--muted);font-size:.9375rem}
.study .drafted{margin:0;max-width:100%}
.study .swatches{width:100%;align-self:stretch;flex:none}
.study .swatches .chip-c{aspect-ratio:auto;height:100%;min-height:120px}
.study .swatches li{height:100%}
.study.s2 .study-body{padding:var(--s5)}
.specimens{display:flex;gap:var(--s7);align-items:flex-end}
.specimens .aa{font-size:clamp(5rem,9vw,9rem);line-height:.8;color:var(--white)}
.specimens .serif{font-family:var(--serif)}
.specimens .sans{font-family:var(--sans);font-weight:300;color:var(--chrome)}
.study.s4 .study-body{padding:0}
.study.s4 .plate-img{position:absolute;inset:0}
/* live: one study at a time, pinned */
html.live .studies{display:block;position:relative;aspect-ratio:4/3.4}
html.live .study{position:absolute;inset:0;z-index:1;opacity:0;transform:translateY(16px) scale(.985);transition:opacity .5s var(--ease),transform 1s var(--ease);pointer-events:none}
html.live .study.on{z-index:2;opacity:1;transform:none;pointer-events:auto}
html.live .study .drafted .dl{clip-path:inset(0 100% 0 0);transition:clip-path 1.6s var(--ease-io) .2s}
html.live .study.on .drafted .dl{clip-path:inset(0 0 0 0)}
html.live .study .swatches li{opacity:0;transform:translateY(10px);transition:opacity .6s var(--ease) calc(var(--i) * .08s + .15s),transform .8s var(--ease) calc(var(--i) * .08s + .15s)}
html.live .study.on .swatches li{opacity:1;transform:none}
html.live .study .specimens .aa{opacity:0;transform:translateY(20px);transition:opacity .8s var(--ease) .15s,transform 1s var(--ease) .15s}
html.live .study .specimens .sans{transition-delay:.3s}
html.live .study.on .specimens .aa{opacity:1;transform:none}

/* ---------- VI: plate spread ---------- */
.plate-spread .wrap{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--s7) var(--s5);align-items:end}
.plate-spread .plate{grid-column:1/8}
.plate-spread .plate-img{aspect-ratio:4/3}
.plate-spread .wrap > div{grid-column:9/-1;padding-bottom:var(--s8)}
.plate-spread h2{margin-bottom:var(--s6)}
.plate-spread .blk + .blk{color:var(--chrome)}

/* ---------- VII: journey ---------- */
.desire h2{max-width:12ch}
.journey{margin-top:var(--s9);border-top:1px solid var(--line)}
.journey li{font-family:var(--serif);font-size:clamp(1.75rem,4.2vw,4rem);line-height:1.1;padding:var(--s5) 0 var(--s5) calc(var(--i) * 16%);border-bottom:1px solid var(--line)}
.journey .w{color:var(--white)}
.journey em{color:var(--muted)}

/* ---------- final ---------- */
.final{padding-top:var(--section)}
.final-page{padding:var(--section) var(--pad);text-align:center;display:flex;flex-direction:column;align-items:center;max-width:1100px}
.final-page > .marks{margin:0;inset:var(--s8) 0}
.final-mark .logo{height:clamp(22px,3vw,34px);margin-bottom:var(--s8)}
.final-page > .label{margin-bottom:var(--s5)}
.final-page h2{max-width:16ch}
.final-page .lead{margin:var(--s6) auto var(--s7)}
.contacts{display:grid;grid-template-columns:repeat(3,auto);gap:var(--s4) var(--s8);justify-content:center;margin-bottom:var(--s8);padding:var(--s5) 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.contacts dd{font-family:var(--serif);color:var(--white);font-size:1.125rem;margin-top:var(--s1)}
.contacts a:hover{color:var(--chrome)}
.final-actions{display:flex;flex-wrap:wrap;gap:var(--s5) var(--s7);align-items:center;justify-content:center}
.return{color:var(--muted)}

/* ---------- inner page hero ---------- */
.page-hero{position:relative;padding:calc(var(--header-h) + var(--s10)) var(--pad) var(--s9)}
.page-hero > .marks{margin:0;inset:calc(var(--header-h) + 12px) calc(var(--pad) - 8px) 0}
.page-hero .lead{margin-top:var(--s7)}
.page-hero.compact{padding-bottom:var(--s7)}
.page-hero.compact .lead{margin-top:0}

/* page hero with a plate (system) */
.page-hero.with-plate .wrap{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--s7) var(--s5);align-items:end}
.page-hero.with-plate .ph-copy{grid-column:1/8}
.page-hero .ph-plate{grid-column:9/-1}
.ph-plate .plate-img{aspect-ratio:3/4}
.ph-plate .plate-img img{object-position:50% 80%}
.page-hero.with-plate h1.display{font-size:clamp(3rem,6.6vw,7rem)}

/* ---------- studio: case 00 ---------- */
.case-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--s5);align-items:stretch}
.spec{position:relative;padding:var(--s6);border:1px solid var(--hair);background:var(--carbon);display:flex;flex-direction:column;gap:var(--s5)}
.spec > .marks{margin:-8px}
.spec figcaption,.spec .note{font-family:var(--serif);font-style:italic;color:var(--muted);font-size:.9375rem}
.spec-mark{grid-column:1/-1;padding:var(--s7) var(--s7) var(--s6)}
.drafted{width:100%;height:auto;max-width:1100px;margin:var(--s5) auto}
.drafted{color:var(--white)}
.drafted .dl path{stroke:var(--stone);stroke-width:1;vector-effect:non-scaling-stroke;fill:none}
.drafted .dl .t{stroke:var(--iron)}
.js .spec-mark .dl{clip-path:inset(0 100% 0 0);transition:clip-path 2.2s var(--ease-io) .3s}
.js .spec-mark.in .dl{clip-path:inset(0 0 0 0)}
.spec-palette{grid-column:1/8}
.swatches{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--s2);flex:1}
.swatches li{display:flex;flex-direction:column;gap:var(--s2)}
.swatches .chip-c{display:block;aspect-ratio:3/4;background:var(--c);border:1px solid var(--hair)}
.swatches .nm{font-family:var(--serif);color:var(--white);font-size:1.0625rem;line-height:1.2}
.spec-type{grid-column:8/-1}
.specimen{display:flex;align-items:flex-end;gap:var(--s5);padding-bottom:var(--s4);border-bottom:1px solid var(--hair)}
.specimen .aa{font-size:clamp(4rem,7vw,6.5rem);line-height:.8;color:var(--white)}
.specimen.serif .aa{font-family:var(--serif)}
.specimen.sans .aa{font-family:var(--sans);font-weight:300}
.specimen b{display:block;font-weight:400;color:var(--white)}
.specimen em{font-family:var(--serif);color:var(--muted)}
.case-splash{grid-column:1/9}
.case-splash .plate-img{aspect-ratio:3/2}
.spec-signature{grid-column:9/-1;align-items:flex-start;justify-content:space-between}
.spec-signature .signature{width:min(100%,240px);height:auto;align-self:center;margin-block:var(--s8)}
.case-field{grid-column:3/11;margin-top:var(--s7)}
.case-field .plate-img{aspect-ratio:960/680}
.case-note{margin-top:var(--s6)}

/* ---------- system page ---------- */
.subnav{position:sticky;top:var(--header-h);z-index:50;padding:0 var(--pad);background:rgb(var(--bg-rgb) / .97);border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.subnav ol{max-width:1360px;margin-inline:auto;display:flex;gap:var(--s7);overflow-x:auto;scrollbar-width:none}
.subnav a{display:flex;gap:var(--s2);align-items:baseline;padding:var(--s4) 0;font-size:.6875rem;letter-spacing:.24em;color:var(--muted);white-space:nowrap;border-bottom:1px solid transparent;transition:color .3s,border-color .3s}
.subnav a .rn{font-size:.9375rem;letter-spacing:0}
.subnav a:hover,.subnav a.on{color:var(--white)}
.subnav a.on{border-color:var(--white)}
.products{padding-top:var(--s8)}
.product{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--s7) var(--s5);padding:var(--s9) 0;border-top:1px solid var(--line);scroll-margin-top:150px}
.p-head{grid-column:1/7;position:sticky;top:190px;align-self:start}
.p-head .pname{font-size:clamp(3rem,7.4vw,7rem);margin-bottom:var(--s4);display:block;letter-spacing:.04em}
.p-head .ptag{margin-bottom:var(--s5)}
.p-head .for{color:var(--chrome)}
.purpose{margin-top:var(--s6);padding-top:var(--s4);border-top:1px solid var(--line);max-width:28rem}
.purpose dd{font-family:var(--serif);font-style:italic;color:var(--white);font-size:1.375rem;margin-top:var(--s2)}
.p-body{grid-column:8/-1}
.p-body h3{margin-bottom:var(--s4)}
.inc{border-top:1px solid var(--line);columns:2;column-gap:var(--s6)}
.inc li{display:flex;gap:var(--s4);align-items:baseline;padding:var(--s3) 0;border-bottom:1px solid var(--hair);color:var(--white);break-inside:avoid}
.inc .label{min-width:1.8em}
.invest{margin-top:var(--s6);border-top:1px solid var(--line-strong);border-bottom:1px solid var(--line-strong)}
.invest > p{max-width:none;display:flex;justify-content:space-between;align-items:baseline;gap:var(--s4);flex-wrap:wrap;padding:var(--s4) 0}
.invest > p + p{border-top:1px solid var(--hair)}
.invest .parts{justify-content:flex-start}
.invest .count{font-family:var(--serif);font-size:2.4rem;line-height:1;color:var(--white)}
.invest .iv span:last-child{font-family:var(--serif);font-style:italic;color:var(--white)}
.invest .offer{justify-content:flex-start;font-family:var(--serif);font-style:italic;color:var(--white);font-size:1.0625rem}
.invest .offer .rn{font-style:normal;color:var(--chrome)}
.next{margin-top:var(--s6)}
.after{margin-top:var(--s8);padding-top:var(--s5);border-top:1px solid var(--line);font-family:var(--serif);font-size:clamp(1.125rem,1.6vw,1.375rem);color:var(--pearl);max-width:44rem}
.combo{margin-top:var(--s6);display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line)}
.combo li{padding:var(--s4) var(--s4) var(--s4) 0;border-bottom:1px solid var(--line);color:var(--white);font-family:var(--serif)}
.stack{border-top:1px solid var(--line)}
.stack > li{display:grid;grid-template-columns:64px minmax(0,1fr) minmax(0,1.2fr) minmax(0,1.6fr);gap:var(--s5);align-items:baseline;padding:var(--s6) 0;border-bottom:1px solid var(--line)}
.stack .rn{font-size:1.25rem}
.stack h3{font-family:var(--serif);font-size:clamp(1.625rem,2.8vw,2.5rem);line-height:1}
.stack p{color:var(--pearl);font-family:var(--serif);font-size:1.0625rem}
.tags{display:flex;flex-wrap:wrap}
.tags li{font-size:.6875rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);padding:2px var(--s3) 2px 0;margin:0 var(--s3) var(--s2) 0;border-right:1px solid var(--line)}
.tags li:last-child{border:0}
.principle{margin-top:var(--s8)}

/* ---------- method page ---------- */
.method{border-top:1px solid var(--line)}
.method li{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--s5);align-items:baseline;padding:var(--s7) 0;border-bottom:1px solid var(--line)}
.method .rn.big{grid-column:1/3;font-size:clamp(3rem,6vw,5.5rem);line-height:.9;color:var(--iron)}
.method h2{grid-column:3/8;font-family:var(--serif);font-size:clamp(2rem,4.4vw,4rem);line-height:1}
.method p{grid-column:8/-1;color:var(--chrome)}
.prose{margin-top:var(--s6)}
.prose p + p{margin-top:var(--s4)}
.std-split{display:grid;gap:var(--s6);padding-top:var(--s6)}
.std-split .display{font-size:clamp(1.9rem,4vw,3.6rem)}

/* ---------- studio page ---------- */
.manifesto{display:grid;gap:var(--s2);font-size:clamp(1.9rem,4.4vw,4.2rem);line-height:1.08}
.manifesto li{color:var(--stone)}
.manifesto li:last-child{color:var(--white);font-style:italic}
.something{border-top:1px solid var(--line)}
.something li{padding:var(--s4) 0;border-bottom:1px solid var(--line);color:var(--white);font-family:var(--serif);font-size:clamp(1.125rem,1.7vw,1.5rem)}
.four{display:grid;gap:var(--s3);font-size:clamp(1.7rem,3.8vw,3.6rem);line-height:1.08}
.four li{color:var(--white)}
.four em{color:var(--muted)}
.pers{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s5)}
.pers li{border-top:1px solid var(--line-strong);padding-top:var(--s5)}
.pers .rn{font-size:1.25rem}
.pers h3{font-size:clamp(2.2rem,4.4vw,4rem);margin:var(--s4) 0}
.diff{border-top:1px solid var(--line)}
.diff div{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4);padding:var(--s4) 0;border-bottom:1px solid var(--line)}
.diff dt{color:var(--white);font-family:var(--serif)}
.diff dd{color:var(--muted);font-family:var(--serif)}
.diff-is{margin-top:var(--s6);color:var(--white);font-family:var(--serif);font-size:1.25rem;line-height:1.5}
.equation ol{display:flex;flex-wrap:wrap;gap:0 .4em;font-size:clamp(1.7rem,4.4vw,4.2rem);line-height:1.1}
.equation li{color:var(--stone)}
.equation li + li::before{content:"+";margin-right:.4em;color:var(--iron);font-style:italic}
.equation .result{margin-top:var(--s6);padding-top:var(--s6);border-top:1px solid var(--line);font-size:clamp(2.6rem,7.4vw,7.4rem)}
.equation .result > span{color:var(--stone)}

/* ---------- start: project flow ---------- */
.flow-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--s7) var(--s5);align-items:start}
.flow,.done{grid-column:1/9}
.flow-grid aside{grid-column:10/-1;position:sticky;top:120px}
.flow-grid aside h2{margin-bottom:var(--s5)}
.flow-grid aside dl{border-top:1px solid var(--line)}
.flow-grid aside dl div{padding:var(--s4) 0;border-bottom:1px solid var(--line)}
.flow-grid aside dd{color:var(--white);font-family:var(--serif);margin-top:var(--s1)}
.flow-grid aside dd a:hover{color:var(--chrome)}
.progress{display:none}
html.flow .progress{display:flex;align-items:center;gap:var(--s5);margin-bottom:var(--s8)}
.progress b{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--white);font-size:1rem;letter-spacing:0;text-transform:none}
.progress .bar{flex:1;height:1px;background:var(--line);position:relative}
.progress .bar i{position:absolute;inset:0;background:var(--white);transform-origin:left;transform:scaleX(var(--prog,.2));transition:transform .9s var(--ease)}
.step{margin-bottom:var(--s9)}
html.flow .step{display:none;margin-bottom:0}
html.flow .step.cur{display:block;animation:fadeUp .8s var(--ease)}
.step legend{display:block;margin-bottom:var(--s7)}
.step legend .rn{display:block;font-size:1.5rem;margin-bottom:var(--s3)}
.step .q{display:block;font-size:clamp(2.4rem,5.4vw,5rem)}
.step .hint{margin:calc(var(--s6) * -1) 0 var(--s6);color:var(--muted);font-family:var(--serif);font-style:italic}
.sub-q{margin:var(--s7) 0 var(--s4);color:var(--white);font-family:var(--serif);font-size:1.25rem}
.sub-q .opt,.field .opt{color:var(--muted);font-family:var(--sans);font-size:.875rem}
.chips{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));border-top:1px solid var(--line);border-left:1px solid var(--line)}
.chip{position:relative;display:block;cursor:pointer}
.chip input{position:absolute;opacity:0;width:100%;height:100%;inset:0;margin:0;cursor:pointer}
.chip > span{display:flex;flex-direction:column;gap:var(--s2);min-height:112px;padding:var(--s4) var(--s5);border-right:1px solid var(--line);border-bottom:1px solid var(--line);color:var(--white);transition:background .4s var(--ease)}
.chip > span > i{font-size:.9375rem}
.chip > span > b{font-family:var(--serif);font-weight:400;font-size:1.25rem;line-height:1.2;margin-top:auto}
.chip > span > small{color:var(--muted);font-family:var(--serif);font-style:italic;font-size:.9375rem}
.chip .tm{font-size:.55em;vertical-align:.6em}
.chip:hover > span{background:rgb(var(--fg-rgb) / .05)}
.chip input:checked + span{background:var(--white);color:var(--ink)}
.chip input:checked + span > i,.chip input:checked + span > small{color:var(--stone)}
.chip input:focus-visible + span{outline:1px solid var(--white);outline-offset:-5px}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:var(--s6) var(--s5)}
.flow .field{display:flex;flex-direction:column;gap:var(--s2);min-width:0}
.flow .field + .field{margin-top:var(--s6)}
.fields .field + .field{margin-top:0}
.flow .field.full{grid-column:1/-1}
.flow .field label{font-size:.6875rem;letter-spacing:.24em;text-transform:uppercase;color:var(--muted)}
.control{width:100%;min-height:52px;padding:var(--s3) 0;background:transparent;border:0;border-bottom:1px solid var(--line-strong);border-radius:0;color:var(--white);font-family:var(--serif);font-size:1.25rem;line-height:1.5;transition:border-color .3s}
.control::placeholder{color:var(--stone);font-style:italic}
.control:hover{border-color:rgb(var(--fg-rgb) / .55)}
.control:focus{outline:none;border-color:var(--white)}
textarea.control{min-height:200px;resize:vertical;border:1px solid var(--line-strong);padding:var(--s4)}
.control[aria-invalid="true"]{border-color:var(--error)}
.err{display:none;margin-top:var(--s4);color:var(--error);font-size:.9375rem}
.err.on{display:block}
.privacy{margin-top:var(--s5);font-size:.875rem;color:var(--muted)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.flow-nav{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s5);margin-top:var(--s8);padding-top:var(--s6);border-top:1px solid var(--line)}
.flow-nav [data-next]{display:none}
html.flow .flow-nav [data-next]{display:inline-flex}
html.flow .flow-nav [data-submit]{display:none}
html.flow.last .flow-nav [data-next]{display:none}
html.flow.last .flow-nav [data-submit]{display:inline-flex}
.back{margin-right:auto;color:var(--muted)}
.status{margin-bottom:var(--s6);padding:var(--s5);border:1px solid var(--error);color:var(--white)}
.status[hidden]{display:none}
.status a{text-decoration:underline;text-underline-offset:3px}
.done{padding:var(--s8) 0}
.done[hidden]{display:none}
.done .signature{width:180px;margin-bottom:var(--s7)}
.done h2{margin-bottom:var(--s6)}

/* ---------- footer (deck folio) ---------- */
.site-footer{border-top:1px solid var(--line);padding:var(--s9) var(--pad) var(--s6)}
.foot-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--s7) var(--s5)}
.foot-brand{grid-column:1/6;display:flex;flex-direction:column;gap:var(--s6);align-items:flex-start}
.foot-brand .signature{width:180px}
.lockup{display:grid;gap:var(--s1);font-family:var(--serif);font-style:italic;color:var(--muted)}
.lockup li:first-child{color:var(--white);font-style:normal}
.foot-grid nav{grid-column:7/10}
.foot-grid .contact{grid-column:10/-1}
.foot-grid h2{margin-bottom:var(--s4)}
.foot-grid nav a,.foot-grid address a{color:var(--white);transition:color .3s}
.foot-grid nav a:hover,.foot-grid address a:hover{color:var(--chrome)}
.foot-grid address{font-style:normal;display:grid;gap:var(--s1);color:var(--white)}
.folio{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:var(--s4);margin-top:var(--s9);padding-top:var(--s5);border-top:1px solid var(--line)}
.folio .logo{height:13px;color:var(--chrome)}

/* ---------- 404 ---------- */
.p-404 main{position:relative;min-height:100svh;padding:var(--s9) var(--pad);display:flex;flex-direction:column;justify-content:center;gap:var(--s5);max-width:1360px;margin-inline:auto}
.p-404 main > .marks{margin:0;inset:var(--s5)}
.p-404 .brand{position:absolute;top:var(--s7);left:var(--pad)}
.nf{margin-bottom:var(--s7)}
.nf .lead{margin:var(--s5) 0}

/* ---------- reveal ---------- */
.js .reveal{opacity:0;transform:translateY(14px);transition:opacity .9s var(--ease),transform 1s var(--ease)}
.js .reveal.in{opacity:1;transform:none}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .prod{grid-template-columns:48px minmax(0,1fr) 28px;row-gap:var(--s2)}
  .prod .ptag,.prod .pshort{grid-column:2}.prod .arr{grid-column:3;grid-row:1}
  .stack > li{grid-template-columns:48px minmax(0,1fr);row-gap:var(--s3)}
  .stack > li > p,.stack > li > .tags{grid-column:2}
}
@media (max-width:1024px){
  .page-hero.with-plate .ph-copy,.page-hero .ph-plate{grid-column:1/-1}
  .ph-plate{max-width:420px}
  .spec-palette,.spec-type,.case-splash,.spec-signature,.case-field{grid-column:1/-1}
  .two-col > :first-child,.two-col > :last-child{grid-column:1/-1}
  .pull,.spread-grid > div{grid-column:1/-1}
  .product .p-head,.product .p-body{grid-column:1/-1;position:static}
  .method .rn.big,.method h2,.method p{grid-column:1/-1}
  .flow,.done,.flow-grid aside{grid-column:1/-1;position:static}
  .pers{grid-template-columns:1fr}
  .foot-brand{grid-column:1/-1}.foot-grid nav{grid-column:1/7}.foot-grid .contact{grid-column:7/-1}
  .plate-spread .plate,.plate-spread .wrap > div{grid-column:1/-1;padding-bottom:0}
  .two .txt,.two > :last-child{grid-column:1/-1}
  html.live .form-chap .two{align-content:center;height:100%;padding:var(--s4) 0}
  html.live .slab{padding:var(--s3)}
  html.live .slab-svg{max-height:40svh}
  html.live .form-chap .neg li{font-size:1.125rem}
  html.live .form-chap .end{margin-top:var(--s4)}
  html.live .form-chap .mark,html.live .studies-chap .mark{margin-bottom:var(--s4)}
  html.live .studies-chap .txt > p{display:none}   /* the link stays: it is the only way to the proof */
  html.live .studies-chap .txt .link{margin-top:var(--s4)}
  html.live .study-index{margin:var(--s4) 0;display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4)}
  html.live .studies-chap .display{font-size:clamp(2rem,8vw,3.4rem)}
  html.live .studies{max-width:min(560px,calc((100svh - 380px) * 1.18));width:100%;margin-inline:auto}
  .studies{grid-template-columns:1fr}
  .inc{columns:1}
}
@media (max-width:820px){
  :root{--header-h:76px}
  .primary,.tools .head-cta,.tools .lang,.tools .theme-toggle,.tools .sound-toggle{display:none}
  .menu-toggle{display:inline-flex}
  .site-header.open{background:var(--ink)}
  .menu{display:block;position:fixed;inset:var(--header-h) 0 0;background:var(--ink);padding:var(--s7) var(--pad);border-top:1px solid var(--hair);overflow:auto}
  .menu[hidden]{display:none}
  .menu-tools{display:flex;align-items:center;justify-content:space-between;gap:var(--s5);padding-bottom:var(--s6);margin-bottom:var(--s6);border-bottom:1px solid var(--hair)}
  .menu ol{counter-reset:m}
  .menu li{counter-increment:m}
  .menu li a{display:flex;align-items:baseline;gap:var(--s5);padding:var(--s5) 0;font-family:var(--serif);font-size:2.4rem;line-height:1.1;color:var(--white);border-bottom:1px solid var(--line)}
  .menu li a::before{content:counter(m,upper-roman);font-style:italic;font-size:1rem;color:var(--stone);min-width:2em}
  html:not(.js) .menu-toggle{display:none}
  html:not(.js) .menu{position:static;padding:0}
  html:not(.js) .site-header{position:absolute}
  .cover{padding-top:calc(var(--header-h) + var(--s6))}
  .cover-grid{display:flex;flex-direction:column;align-items:stretch}
  .cover-copy{padding-bottom:var(--s5)}
  .cover-plate .plate-img{aspect-ratio:4/3}
  .cover-meta{grid-template-columns:1fr 1fr;gap:var(--s5)}
  .cover-meta > :nth-child(2){grid-column:1/-1;grid-row:2}
  .cover .kicker{margin-bottom:var(--s5)}
  .cover .actions{margin-top:var(--s6)}
  .cover > .marks{inset:calc(var(--header-h) + 8px) calc(var(--pad) - 12px) 8px}
  .models{grid-template-columns:1fr}
  .model{padding:var(--s5) 0}.model + .model{padding-left:0;border-left:0;border-top:1px solid var(--line)}
  .journey li{padding-left:calc(var(--i) * 8%)}
  .plate.wide .plate-img{aspect-ratio:16/10}
  .contacts{grid-template-columns:1fr;gap:var(--s4)}
  .combo{grid-template-columns:1fr}
  .fields{grid-template-columns:1fr}
  .diff div{grid-template-columns:1fr;gap:0}
  .foot-grid nav,.foot-grid .contact{grid-column:1/-1}
  .subnav ol{gap:var(--s5)}
}
@media (max-width:520px){
  .swatches{grid-template-columns:repeat(3,1fr)}
  .spec,.spec-mark{padding:var(--s5)}
  .lang{gap:var(--s2)}
  .tools{gap:var(--s4)}
  .logo{height:17px}
  .menu-toggle{letter-spacing:.12em}
  .cover .sub{margin-top:var(--s5);font-size:1rem;line-height:1.6}
  .cover .actions{gap:var(--s4)}
  .cover .actions .btn{width:auto;min-height:48px;font-size:.6875rem;padding-inline:var(--s4)}
  .cover .actions .link{font-size:.6875rem;min-height:44px}
  .actions .btn,.final-actions .btn{width:100%}
  .chips{grid-template-columns:1fr 1fr}
  .chip > span{min-height:96px;padding:var(--s3) var(--s4)}
  .chip > span > b{font-size:1.0625rem}
  .flow-nav .btn{flex:1}
  .stack > li{grid-template-columns:1fr}.stack > li > *{grid-column:1!important}
  .foot-brand{flex-direction:column}
}
@media (max-width:820px) and (max-height:700px){
  html.live .form-chap .two{gap:var(--s4);padding-block:var(--s3)}
  html.live .form-chap .display{font-size:1.9rem;line-height:1.08}
  html.live .form-chap .neg{margin-top:var(--s4)}
  html.live .form-chap .neg li{font-size:1rem}
  html.live .form-chap .end{font-size:1.75rem;margin-top:var(--s4)}
  html.live .slab-svg{max-height:180px}
  html.live .readout{top:0;left:var(--s3)}
  html.live .readout .pct{font-size:1.75rem}
  html.live .stages{bottom:var(--s2);left:var(--s3);gap:2px}
  html.live .stages li{font-size:.625rem;letter-spacing:.12em}
  html.live .stages .rn{font-size:.8125rem}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-delay:0s!important}
  .js .reveal{opacity:0;transform:translateY(14px);transition:opacity .9s var(--ease),transform 1s var(--ease)}
  .plate-img img{transform:none}
}
.study .swatches{grid-template-columns:repeat(5,1fr)!important;gap:6px}
@media (max-width:520px){.study .swatches .label{font-size:8px;letter-spacing:.04em}.study .swatches .chip-c{min-height:90px}}

/* ---------- UX pass: orientation, previews, light, brief ---------- */
/* chapter index — where am I, what's left (home, wide screens) */
.chapters{position:fixed;right:20px;top:50%;z-index:60;transform:translateY(-50%);opacity:0;pointer-events:none;transition:opacity .6s var(--ease)}
.chapters.show{opacity:1;pointer-events:auto}
.chapters ol{display:grid;gap:2px;padding-right:14px}
.chapters a{position:relative;display:flex;align-items:center;justify-content:flex-end;gap:10px;padding:5px 0;color:var(--stone);transition:color .3s}
.chapters .rn{font-size:.9375rem;min-width:1.8em;text-align:right;transition:color .3s}
.chapters .t{position:absolute;right:calc(100% + 4px);font-size:.6875rem;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;padding:2px 8px;background:var(--ink);color:var(--pearl);opacity:0;transform:translateX(6px);transition:opacity .4s var(--ease),transform .5s var(--ease)}
.chapters a:hover .t,.chapters a:focus-visible .t{opacity:1;transform:none}
.chapters a.on .rn,.chapters a:hover .rn{color:var(--white)}
.chapters a.on .rn{font-size:1.125rem}
.chapters a.on::after{content:"";width:10px;height:1px;background:var(--white);margin-right:-14px}
.chapters .rail{position:absolute;right:0;top:6px;bottom:6px;width:1px;background:var(--line)}
.chapters .rail i{position:absolute;inset:0;background:var(--white);transform-origin:top;transform:scaleY(var(--prog,0))}
@media (max-width:1180px){.chapters{display:none}}

/* product rows reveal what is built */
.prod .pmore{grid-column:2/-1;display:grid;grid-template-rows:0fr;transition:grid-template-rows .6s var(--ease)}
.prod .pmore > span{overflow:hidden;min-height:0;color:var(--chrome);font-size:.9375rem;line-height:1.6}
.prod .pmore > span::before{content:"";display:block;height:var(--s3)}
.prod .pmore .label{margin-right:var(--s3)}
.prod:hover .pmore,.prod:focus-visible .pmore{grid-template-rows:1fr}
@media (hover:none){.prod .pmore{grid-template-rows:1fr}}

/* light reveals form — a soft light follows the pointer across the plates */
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .plate-img::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;opacity:0;transition:opacity .7s var(--ease);mix-blend-mode:screen;
    background:radial-gradient(circle 280px at var(--mx,50%) var(--my,50%),rgb(var(--signal-rgb) / .10),rgb(var(--signal-rgb) / 0) 70%)}
  .plate-img:hover::after{opacity:1}
  .plate-img img{transition:transform 1.4s var(--ease)}
}

/* start: what you told us so far */
.brief-summary{margin:0 0 var(--s7);border-top:1px solid var(--line)}
.brief-summary > .label{padding:var(--s4) 0 var(--s2)}
.brief-summary dl > div{display:grid;grid-template-columns:minmax(110px,160px) minmax(0,1fr) auto;gap:var(--s4);align-items:baseline;padding:var(--s3) 0;border-bottom:1px solid var(--hair)}
.brief-summary dd{font-family:var(--serif);color:var(--white);font-size:1.0625rem;overflow-wrap:anywhere}
.brief-summary .edit{font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);padding:6px 0;border-bottom:1px solid var(--line)}
.brief-summary .edit:hover{color:var(--white);border-color:var(--white)}
@media (max-width:520px){.brief-summary dl > div{grid-template-columns:1fr auto}.brief-summary dt{grid-column:1/-1}}

/* ---------- v5.2: day/night, glass, trust, reach ---------- */
/* theme switch — a square, one-line glyph: sun by night, moon by day */
.theme-toggle{display:inline-grid;place-items:center;width:44px;height:44px;color:var(--white);border:1px solid var(--line);transition:border-color .3s,background .3s}
.theme-toggle:hover{border-color:var(--white);background:rgb(var(--fg-rgb) / .05)}
.theme-toggle svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.2}
.theme-toggle .moon{display:none}
:root[data-theme="light"] .theme-toggle .sun{display:none}
:root[data-theme="light"] .theme-toggle .moon{display:block}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]) .theme-toggle .sun{display:none}:root:not([data-theme="dark"]) .theme-toggle .moon{display:block}}

/* theme change: light spreads from the switch (where supported) */
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}
html.theming::view-transition-new(root){animation:themeReveal .7s var(--ease-io)}
@keyframes themeReveal{from{clip-path:circle(0 at var(--tx,100%) var(--ty,0))}to{clip-path:circle(150% at var(--tx,100%) var(--ty,0))}}

/* page to page: a quiet cross-fade; the header stays put */
@view-transition{navigation:auto}
.site-header{view-transition-name:site-header}
::view-transition-old(root){animation:vtOut .28s var(--ease) both}
::view-transition-new(root){animation:vtIn .5s var(--ease) both}
@keyframes vtOut{to{opacity:0}}
@keyframes vtIn{from{opacity:0;transform:translateY(8px)}}
@media (prefers-reduced-motion:reduce){@view-transition{navigation:none}}

/* readability in glare: no hairline serifs under 18px */
.plate figcaption{font-family:var(--sans);font-style:normal;font-size:.875rem;color:var(--muted)}
.study figcaption em{font-family:var(--sans);font-style:normal;font-size:.875rem;color:var(--muted)}
.lockup{font-family:var(--sans);font-style:normal}
.lockup li:first-child{font-family:var(--serif)}
.pshort{color:var(--muted)}

/* touch targets ≥ 44px */
.lang a{display:inline-grid;place-items:center;min-width:44px;min-height:44px}
.link,.return{min-height:44px}
.foot-grid nav a,.foot-grid address a,.contacts dd a,.flow-grid aside dd a{display:inline-block;padding:10px 0}
.foot-grid li + li{margin-top:0}
.foot-grid address{gap:0}
.brand{padding:12px 0;min-height:44px}

/* mobile dock — a sharp glass bar that keeps the next step in reach */
.dock{display:none}
@media (max-width:820px){
  .dock{display:flex;position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:90;align-items:stretch;justify-content:space-between;gap:0;min-height:56px;padding:0;
    color:var(--white);background:rgb(var(--bg-rgb) / .66) linear-gradient(180deg,rgb(255 255 255 / .06),rgb(255 255 255 / 0));-webkit-backdrop-filter:blur(16px) saturate(1.3);backdrop-filter:blur(16px) saturate(1.3);
    border:1px solid var(--line);box-shadow:inset 0 1px 0 rgb(255 255 255 / .08),0 20px 40px -20px rgb(0 0 0 / .55);
    font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;transform:translateY(calc(100% + 24px));transition:transform .6s var(--ease)}
  .dock.show{transform:none}
  .dock .arr{width:22px}
  @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.dock{background:var(--ink)}}
  .site-footer{padding-bottom:calc(var(--s9) + 40px)}
}

/* FAQ — native disclosure, square and ruled */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:48px minmax(0,1fr) 24px;gap:var(--s4);align-items:baseline;padding:var(--s5) 0;min-height:44px}
.faq summary::-webkit-details-marker{display:none}
.faq summary .q{font-family:var(--serif);font-size:clamp(1.25rem,2vw,1.625rem);color:var(--white);line-height:1.25}
.faq summary .pm{position:relative;width:14px;height:14px;align-self:center;justify-self:end}
.faq summary .pm::before,.faq summary .pm::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:var(--white);transition:transform .4s var(--ease)}
.faq summary .pm::after{transform:rotate(90deg)}
.faq details[open] summary .pm::after{transform:rotate(0)}
.faq summary:hover .q{color:var(--chrome)}
.faq .a{padding:0 0 var(--s6) calc(48px + var(--s4));max-width:44rem;color:var(--chrome)}
@media (max-width:520px){.faq summary{grid-template-columns:32px minmax(0,1fr) 20px}.faq .a{padding-left:0}}

/* legal page */
.legal{max-width:46rem}
.legal h2{font-family:var(--serif);font-weight:400;font-size:clamp(1.5rem,2.4vw,2rem);margin:var(--s8) 0 var(--s4);color:var(--white)}
.legal p,.legal li{color:var(--chrome)}
.legal p + p{margin-top:var(--s4)}
.legal ul{margin-top:var(--s3);display:grid;gap:var(--s2)}
.legal li{padding-left:var(--s5);position:relative}
.legal li::before{content:"—";position:absolute;left:0;color:var(--stone)}
.legal a{color:var(--white);text-decoration:underline;text-underline-offset:4px}
.privacy a{color:var(--white);text-decoration:underline;text-underline-offset:3px}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
html.theming::view-transition-old(root){animation:none}

/* ---------- start a project: the brief sheet ---------- */
.start-hero{padding-bottom:var(--s8)}
.start-hero .lead{margin-top:var(--s6)}
.flow-grid > .sheet{grid-column:1/9}
.flow-grid > .brief-live{grid-column:9/-1;position:sticky;top:calc(var(--header-h) + 24px);align-self:start}
.sheet{position:relative;border:1px solid var(--line);background:var(--carbon)}
.sheet > .marks{margin:-8px}
.sheet-head{display:flex;justify-content:space-between;align-items:center;gap:var(--s4);padding:var(--s4) var(--s6);border-bottom:1px solid var(--line)}
.sheet-count{font-family:var(--serif);font-style:italic;color:var(--muted)}
.sheet-count b{font-weight:400;color:var(--white);font-size:1.375rem}
.stepper{display:grid;grid-template-columns:repeat(5,1fr);border-bottom:1px solid var(--line)}
.stepper li + li{border-left:1px solid var(--hair)}
.stepper button{position:relative;width:100%;display:flex;align-items:baseline;gap:10px;min-height:54px;padding:14px var(--s5);color:var(--stone);text-align:left;transition:color .3s,background .3s}
.stepper .rn{font-size:1rem;color:inherit}
.stepper .sl{font-size:.75rem;letter-spacing:.14em;text-transform:uppercase}
.stepper button::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--white);transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease)}
.stepper li.cur button{color:var(--white)}
.stepper li.cur button::after{transform:none}
.stepper li.past button{color:var(--chrome);cursor:pointer}
.stepper li.past button:hover{background:rgb(var(--fg-rgb) / .05);color:var(--white)}
.stepper button:disabled{cursor:default}
.sheet .flow{padding:var(--s7) var(--s6) var(--s6)}
html.flow .progress,.progress{display:none!important}
.sheet .step .q{font-size:clamp(2rem,4vw,3.6rem);line-height:1.05}
.sheet .step legend{margin-bottom:var(--s6)}
.sheet .step .hint{margin:calc(var(--s5) * -1) 0 var(--s6);font-family:var(--sans);font-style:normal;color:var(--muted)}

/* options as ruled rows with a square tick */
.opts{display:grid;border-top:1px solid var(--line)}
.opt{position:relative;display:block;cursor:pointer}
.opt input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer;z-index:1}
.opt-row{display:grid;grid-template-columns:44px minmax(0,1fr) 22px;gap:var(--s4);align-items:center;min-height:66px;padding:var(--s3) var(--s4) var(--s3) var(--s2);border-bottom:1px solid var(--line);transition:background .35s var(--ease),padding .5s var(--ease)}
.opt-row .rn{font-size:1rem}
.opt-t b{display:block;font-family:var(--serif);font-weight:400;font-size:1.3125rem;line-height:1.25;color:var(--white)}
.opt-t .tm{font-size:.5em;vertical-align:.8em}
.opt-t small{display:block;margin-top:2px;font-size:.875rem;color:var(--muted)}
.tick{position:relative;justify-self:end;width:18px;height:18px;border:1px solid var(--line-strong);transition:background .3s,border-color .3s}
.tick::after{content:"";position:absolute;left:5px;top:1px;width:5px;height:10px;border:solid var(--ink);border-width:0 1.5px 1.5px 0;transform:rotate(45deg) scale(0);transition:transform .35s var(--ease)}
.opt:hover .opt-row{background:rgb(var(--fg-rgb) / .04);padding-left:var(--s4)}
.opt input:checked + .opt-row{background:rgb(var(--fg-rgb) / .07)}
.opt input:checked + .opt-row .rn{color:var(--white)}
.opt input:checked + .opt-row .tick{background:var(--white);border-color:var(--white)}
.opt input:checked + .opt-row .tick::after{transform:rotate(45deg) scale(1)}
.opt input:focus-visible + .opt-row{outline:1px solid var(--white);outline-offset:-3px}

/* timing as one segmented control */
.seg{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.seg-i{position:relative}
.seg-i input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer;z-index:1}
.seg-i span{display:grid;place-items:center;min-height:54px;padding:8px;text-align:center;font-size:.875rem;color:var(--chrome);background:var(--carbon);transition:background .3s,color .3s}
.seg-i:hover span{background:rgb(var(--fg-rgb) / .06)}
.seg-i input:checked + span{background:var(--white);color:var(--ink)}
.seg-i input:focus-visible + span{outline:1px solid var(--white);outline-offset:-4px}
.opt-note{color:var(--muted);font-size:.8125rem;letter-spacing:0;text-transform:none}

/* writing the brief */
.sheet textarea.area{min-height:190px;border:1px solid var(--line-strong);background:var(--ink);padding:var(--s4) var(--s5);font-size:1.1875rem}
.sheet textarea.area:focus{border-color:var(--white)}
.counter{max-width:none;margin-top:6px;text-align:right;font-size:.75rem;letter-spacing:.08em;color:var(--stone);transition:color .3s}
.counter.ok{color:var(--white)}
.counter.ok::before{content:"✓  "}
.sheet .flow-nav{margin-top:var(--s7);padding-top:var(--s5)}
.enter-hint{margin-left:auto;color:var(--stone)}
@media (hover:none){.enter-hint{display:none}}
.sheet .flow-nav .back + .enter-hint{margin-left:0}
.sheet .flow-nav .back{margin-right:auto}

/* the brief, forming as you answer */
.brief-live .live-card{position:relative;padding:var(--s6);border:1px solid var(--line)}
.live-card > .marks{margin:-8px}
.live-card dl{margin-top:var(--s3)}
.live-card dl div{padding:var(--s3) 0;border-bottom:1px solid var(--hair);animation:fadeUp .5s var(--ease)}
.live-card dd{margin-top:2px;font-family:var(--serif);font-size:1.0625rem;color:var(--white);overflow-wrap:anywhere}
.live-empty{margin-top:var(--s4);font-family:var(--serif);font-style:italic;color:var(--muted)}
.brief-live .direct{margin-top:var(--s7)}
.brief-live .direct h2{margin-bottom:var(--s4)}
.brief-live .direct dl{border-top:1px solid var(--line)}
.brief-live .direct dl div{padding:var(--s3) 0;border-bottom:1px solid var(--line)}
.brief-live .direct dd{font-family:var(--serif);color:var(--white)}
@media (min-width:1025px){.brief-summary{display:none!important}}

.sheet.is-done .stepper,.sheet.is-done .sheet-head{display:none}
.sheet .done{padding:var(--s8) var(--s6)}
.sheet .done .signature{width:min(260px,60%);height:auto;margin-bottom:var(--s7);color:var(--white)}

@media (max-width:1024px){
  .flow-grid > .sheet,.flow-grid > .brief-live{grid-column:1/-1;position:static}
  .brief-live .live-card{display:none}
  .brief-live .direct{margin-top:var(--s5)}
}
@media (max-width:700px){
  .stepper .sl{display:none}
  .stepper button{justify-content:center;padding:14px 0}
  .sheet .flow{padding:var(--s6) var(--s4) var(--s5)}
  .sheet-head{padding:var(--s3) var(--s4)}
  .opt-row{grid-template-columns:30px minmax(0,1fr) 20px;gap:var(--s3);min-height:60px}
  .opt-t b{font-size:1.125rem}
  .seg{grid-template-columns:1fr 1fr}
  .sheet .flow-nav{flex-wrap:nowrap}
  .sheet .flow-nav .btn{flex:1;padding:0 var(--s4)}
}
.sheet .step:focus{outline:none}
.sheet{scroll-margin-top:calc(var(--header-h) + 16px)}
.sheet-count{white-space:nowrap}
@media (max-width:700px){.sh-suffix{display:none}}
@media (max-width:700px){.sheet .flow-nav .btn{white-space:normal;text-align:center;line-height:1.35;letter-spacing:.12em;padding:10px var(--s4);min-height:56px}}

@media (max-width:700px){.enter-hint{display:none}}
@media (max-width:380px){.pname{letter-spacing:.02em;font-size:1.75rem}.prod{gap:var(--s3)}}
@media (max-width:380px){.sheet .flow-nav .btn{letter-spacing:.06em;padding:10px 12px;gap:8px}.sheet .flow-nav .btn .arr{display:none}.sheet .flow-nav{gap:var(--s3)}}

/* ---------- mobile rhythm: tighter vertical spacing ---------- */
@media (max-width:820px){
  :root{--section:clamp(56px,11vw,88px)}
  .page-hero{padding-top:calc(var(--header-h) + var(--s8))}
  .head2{margin-bottom:var(--s6)}
  .products{padding-top:var(--s3)}
  .product{padding:var(--s7) 0;gap:var(--s5) var(--s5)}
  .after{margin-top:var(--s6);padding-top:var(--s5)}
  .stack > li{padding:var(--s5) 0}
  .final{padding-top:var(--s8)}
  .final-page{padding:var(--s9) var(--pad)}
  .final-page > .marks{inset:var(--s6) 0}
  .site-footer{padding-top:var(--s8)}
  .foot-mark{margin-top:var(--s8)}
  .manifesto,.four{gap:var(--s2)}
  .case-grid{gap:var(--s4)}
  .journey{margin-top:var(--s7)}
  .spread-grid{margin-top:var(--s6)}
  .method li{padding:var(--s6) 0}
  .legal h2{margin-top:var(--s7)}
}
@media (max-width:820px){
  .page-hero{padding-bottom:var(--s7)}
  .product{padding:var(--s6) 0}
  .p-body .next{margin-top:var(--s5)}
  .purpose{margin-top:var(--s5)}
  .final-page{padding:var(--s8) var(--pad)}
  .final-mark .logo{margin-bottom:var(--s6)}
  .final-page .lead{margin:var(--s5) auto var(--s6)}
  .contacts{margin-bottom:var(--s6)}
  .spec,.spec-mark{padding:var(--s5)}
  .case-field,.case-splash{margin-top:0}
  .case-note{margin-top:var(--s4)}
  .drafted{margin:var(--s3) auto}
}


/* ---------- the monolith answers: a small slab you can ask ---------- */

.bot{position:fixed;right:max(var(--pad),calc((100vw - 1360px) / 2));bottom:clamp(16px,3vw,40px);z-index:95;
  display:flex;flex-direction:column;align-items:flex-end;gap:var(--s3);
  transition:opacity .45s var(--ease),transform .45s var(--ease)}
html:not(.js) .bot{display:none}
html.chap-pinned .bot:not(.is-open){opacity:0;transform:translateY(10px);pointer-events:none}

.bot-launch{position:relative;display:grid;place-items:center;width:74px;height:74px;padding:0;background:none;border:0;cursor:pointer}
.orb{display:block;width:100%;height:100%}
.orb-launch{filter:drop-shadow(0 16px 26px rgb(0 0 0 / .45))}
.bot-launch-t{position:absolute;inset:auto 0 -18px;font-size:.5625rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);opacity:0;transition:opacity .4s var(--ease);white-space:nowrap;text-align:center}
.bot-launch:hover .bot-launch-t,.bot-launch:focus-visible .bot-launch-t{opacity:1}
.bot-launch:focus-visible{outline:1px solid var(--white);outline-offset:6px}
.bot.is-open .bot-launch,.bot.is-open .bot-hint{display:none}

@media (prefers-reduced-motion:no-preference){
  /* the orb itself is drawn in code; it stirs on hover and while it is answering */
  .bot-launch .orb,.dock-ask .orb{transition:transform .6s var(--ease)}
  .bot-launch:hover .orb,.dock-ask:hover .orb{transform:translateY(-3px)}
}


.bot-panel{position:relative;display:flex;flex-direction:column;width:min(384px,calc(100vw - 24px));max-height:min(580px,calc(100svh - 120px));
  background:rgb(var(--bg-rgb) / .84) linear-gradient(180deg,rgb(255 255 255 / .05),rgb(255 255 255 / 0));
  -webkit-backdrop-filter:blur(22px) saturate(1.3);backdrop-filter:blur(22px) saturate(1.3);
  border:1px solid var(--line);box-shadow:inset 0 1px 0 rgb(255 255 255 / .07),0 40px 80px -40px rgb(0 0 0 / .7)}
.bot-panel[hidden]{display:none}
.bot-panel > .marks{margin:6px}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.bot-panel,.bot-hint{background:var(--ink)}}
@media (prefers-reduced-motion:no-preference){
  .bot.is-open .bot-panel{animation:botIn .55s var(--ease) both}
  @keyframes botIn{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
}

.bot-head{display:grid;grid-template-columns:auto 1fr auto;align-items:start;gap:0 var(--s4);padding:var(--s5) var(--s5) var(--s4);border-bottom:1px solid var(--hair)}
.bot-avatar{grid-row:1/3;display:block;width:38px;height:38px}
.bot-head .label{grid-column:2;color:var(--stone)}
.bot-title{grid-column:2;font-family:var(--serif);font-size:1.25rem;line-height:1.2;color:var(--white);margin-top:2px}
.bot-x{grid-column:3;grid-row:1/3;display:inline-grid;place-items:center;width:34px;height:34px;color:var(--muted);border:1px solid transparent;transition:color .3s,border-color .3s}
.bot-x:hover{color:var(--white);border-color:var(--line)}
.bot-x svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:1.2}

.bot-body{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain}
.bot-body:focus-visible{outline:1px solid var(--white);outline-offset:-2px}
.bot-log{padding:var(--s5) var(--s5) 0;display:grid;gap:var(--s5);align-content:start}
.bot-msg{display:grid;gap:var(--s2)}
.bot-msg p{font-family:var(--serif);font-size:1rem;line-height:1.55;color:var(--chrome)}
.bot-msg em{font-style:normal;color:var(--white)}
.bot-msg.is-you{justify-items:end;text-align:right}
.bot-msg.is-you p{font-family:var(--sans);font-size:.8125rem;line-height:1.5;color:var(--white);border-right:1px solid var(--line-strong);padding-right:var(--s4)}
.bot-caret{display:inline-block;width:.5em;height:1em;margin-left:.06em;background:var(--white);vertical-align:-.12em}
@media (prefers-reduced-motion:no-preference){.bot-caret{animation:botCaret .9s steps(1) infinite}
  @keyframes botCaret{0%,50%{opacity:1}51%,100%{opacity:0}}
  .bot-msg{animation:botMsg .5s var(--ease) both}
  @keyframes botMsg{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}}
.bot-more{display:inline-flex;align-items:center;gap:var(--s3);font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;color:var(--white);
  border-bottom:1px solid var(--line-strong);padding-bottom:2px;align-self:start;transition:border-color .3s}
.bot-more:hover{border-color:var(--white)}
.bot-more .arr{width:18px}

.bot-ask{display:grid;gap:1px;padding:0 var(--s5) var(--s5)}
.bot-q{display:grid;grid-template-columns:auto 1fr;align-items:baseline;gap:var(--s4);width:100%;text-align:left;
  padding:var(--s3) 0;border-top:1px solid var(--hair);color:var(--white);font-size:.875rem;line-height:1.4;transition:color .3s}
.bot-q .rn{font-size:.75rem;color:var(--stone);min-width:1.6em;transition:color .3s}
.bot-q:hover .rn{color:var(--white)}
@media (prefers-reduced-motion:no-preference){.bot-q{animation:botMsg .45s var(--ease) both}}

.bot-foot{display:grid;gap:var(--s3);padding:var(--s4) var(--s5);border-top:1px solid var(--hair)}
.bot-foot-top{display:flex;align-items:center;justify-content:space-between;gap:var(--s4)}
.bot-restart{font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);transition:color .3s}
.bot-restart:hover{color:var(--white)}
.bot-restart[hidden]{display:none}
.bot-cta{display:inline-flex;align-items:center;gap:var(--s3);margin-left:auto;font-size:.6875rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--white);border-bottom:1px solid var(--line-strong);padding-bottom:3px;transition:border-color .3s}
.bot-cta:hover{border-color:var(--white)}
.bot-cta .arr{width:20px}
.bot-reach{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s2) var(--s4);min-width:0}
.bot-reach > *{min-width:0}
.bot-reach .label{color:var(--stone)}
.bot-reach a{font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--hair);padding-bottom:2px;transition:color .3s,border-color .3s}
.bot-reach a:hover{color:var(--white);border-color:var(--line-strong)}

/* panel carries its own call to action — the dock would only repeat it */
html.bot-open .dock{transform:translateY(calc(100% + 24px));pointer-events:none}

@media (max-width:820px){
  html.dock-on .bot{bottom:calc(80px + env(safe-area-inset-bottom))}
  .bot-launch{width:58px;height:58px}
  .bot-panel{max-height:min(72svh,calc(100svh - 130px))}
  .bot-log{padding:var(--s4)}
  .bot-ask{padding:0 var(--s4) var(--s4)}
  .bot-head,.bot-foot{padding-inline:var(--s4)}
}

/* narrow screens: the panel becomes a drawer on the page's own gutters, like the dock */
@media (max-width:560px){
  .bot{left:12px;right:12px;align-items:flex-end}
  .bot-panel{width:100%;max-height:min(78svh,calc(100svh - 96px))}
  .bot-head{grid-template-columns:auto 1fr auto;padding:var(--s4)}
  .bot-title{font-size:1.125rem}
  .bot-foot{gap:var(--s2);padding:var(--s3) var(--s4) var(--s4)}
  .bot-reach{gap:var(--s2) var(--s3)}
  .bot-reach .label{flex-basis:100%}
}
/* the assistant is part of the site's own contact routes, not only a floating slab */
.foot-ask{display:inline-flex;align-items:center;gap:var(--s3);margin-top:var(--s4);min-height:44px;font-size:.6875rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--hair);padding-bottom:3px;transition:color .3s,border-color .3s}
.foot-ask:hover{color:var(--white);border-color:var(--line-strong)}
.foot-ask[hidden]{display:none}
.foot-ask .arr{width:18px}
/* ask it anything: the field reads as part of the panel's frame, not a bolted-on box */
.bot-form{display:grid;grid-template-columns:1fr auto;align-items:center;gap:var(--s3);
  padding:var(--s3) var(--s5);border-top:1px solid var(--hair)}
.bot-input{width:100%;min-width:0;background:none;border:0;padding:var(--s2) 0;color:var(--white);
  font-family:var(--sans);font-size:.875rem;line-height:1.4}
.bot-input::placeholder{color:var(--stone)}
.bot-input:focus{outline:none}
.bot-form:focus-within{border-top-color:var(--line-strong)}
.bot-send{display:inline-grid;place-items:center;width:38px;height:38px;color:var(--muted);
  border:1px solid transparent;transition:color .3s,border-color .3s}
.bot-send:hover,.bot-form:focus-within .bot-send{color:var(--white);border-color:var(--line)}
.bot-send .arr{width:20px}
@media (max-width:560px){.bot-form{padding:var(--s3) var(--s4)}}
/* the panel is a deliberate layer, so the page recedes behind it instead of fighting it */
.bot-scrim{position:fixed;inset:0;z-index:-1;background:rgb(var(--bg-rgb) / .55);
  opacity:0;pointer-events:none;transition:opacity .5s var(--ease)}
.bot.is-open .bot-scrim{opacity:1;pointer-events:auto}
@media (prefers-reduced-motion:reduce){.bot-scrim{transition:none}}
/* on wide screens the panel leans into the page's own margin, covering as little as possible */
@media (min-width:1500px){.bot-panel{width:min(400px,calc((100vw - 1360px) / 2 + 180px))}}
html.near-final .bot:not(.is-open){opacity:0;transform:translateY(10px);pointer-events:none}

/* on phones the slab lives inside the dock — part of the furniture, covering nothing */
.dock-ask{display:none}
.dock-cta{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);flex:1;padding:0 var(--s5);color:inherit;font:inherit;letter-spacing:inherit}
@media (max-width:820px){
  .dock-ask{display:grid;place-items:center;width:58px;flex:none;border-right:1px solid var(--line);
    padding:var(--s2) 0;transition:background .3s var(--ease)}
  .dock-ask:hover,.dock-ask:focus-visible{background:rgb(var(--fg-rgb) / .06)}
  .dock-ask .orb{width:34px;height:34px}
  .bot-launch,.bot-hint{display:none}          /* the dock carries it instead */
  html.bot-open .dock{transform:translateY(calc(100% + 24px))}
}

/* ---------- work: the dust stage, with the copy always clear of it ---------- */
.uni{position:relative}
.uni-sky{position:sticky;top:0;height:100svh;pointer-events:none;z-index:0}
.uni-sky canvas{display:block;width:100%;height:100%}
.uni-rail{position:relative;z-index:1;margin-top:-100svh}
.uni-st{min-height:100svh;display:grid;align-content:end;padding:0 var(--pad) 14vh;max-width:1360px;margin-inline:auto}
.uni-st > *{max-width:34ch}
.uni-st.right{justify-items:end;text-align:right}
.uni-st.right > *{margin-left:auto}
.uni-h{font-family:var(--serif);font-size:clamp(2rem,4.6vw,3.6rem);line-height:1.04;color:var(--white);letter-spacing:-.01em}
.uni-h em{font-style:italic;color:var(--chrome)}
.uni-p{margin-top:var(--s5);font-size:1rem;line-height:1.6;color:var(--muted)}
.uni-meta{margin-top:var(--s6);display:flex;flex-wrap:wrap;gap:var(--s3) var(--s6)}
.uni-meta span{font-size:.6875rem;letter-spacing:.16em;text-transform:uppercase;color:var(--stone)}
.uni-st .mark{margin-bottom:var(--s4)}

html.js .uni-st.on .mark,html.js .uni-st.on .uni-h,html.js .uni-st.on .uni-p,html.js .uni-st.on .uni-meta{
  opacity:1;transform:none;transition:opacity 1s var(--ease),transform 1.1s var(--ease)}
html.js .uni-st.on .uni-h{transition-delay:.08s}
html.js .uni-st.on .uni-p{transition-delay:.16s}
html.js .uni-st.on .uni-meta{transition-delay:.24s}
@media (prefers-reduced-motion:reduce){
  html.js .uni-st .mark,html.js .uni-h,html.js .uni-p,html.js .uni-meta{opacity:1;transform:none}
}
/* the dust passes behind the copy, so the copy gets a little shade to sit on */
.uni-st{position:relative}
.uni-st::before{content:"";position:absolute;inset:auto 0 0;height:62vh;z-index:-1;pointer-events:none;
  background:linear-gradient(to top,rgb(var(--bg-rgb) / .92),rgb(var(--bg-rgb) / .72) 38%,rgb(var(--bg-rgb) / 0))}
@media (min-width:901px){
  .uni-st::before{inset:auto auto 0 0;width:min(56%,620px);height:70vh;
    background:linear-gradient(to top right,rgb(var(--bg-rgb) / .92),rgb(var(--bg-rgb) / .60) 45%,rgb(var(--bg-rgb) / 0) 78%)}
  .uni-st.right::before{inset:auto 0 0 auto;
    background:linear-gradient(to top left,rgb(var(--bg-rgb) / .92),rgb(var(--bg-rgb) / .60) 45%,rgb(var(--bg-rgb) / 0) 78%)}
}

/* ---------- the map: a way through the site, opened on purpose ---------- */
.map-layer{position:fixed;inset:0;z-index:200;background:var(--ink)}
.map-layer[hidden]{display:none}
html:not(.js) .map-layer{display:none}
html.map-open{overflow:hidden}
.map-sky{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:grab;touch-action:none}
.map-sky.drag{cursor:grabbing}
.map-ui{position:absolute;inset:0;pointer-events:none}
.map-ui > *{pointer-events:auto}
.map-top{position:absolute;top:clamp(16px,4vw,36px);left:var(--pad);right:var(--pad);
  display:flex;justify-content:space-between;align-items:center;gap:var(--s5)}
.map-title{font-family:var(--serif);font-size:1.25rem;color:var(--white)}
.map-x{display:inline-grid;place-items:center;width:44px;height:44px;color:var(--muted);
  border:1px solid transparent;transition:color .3s,border-color .3s}
.map-x:hover{color:var(--white);border-color:var(--line)}
.map-x svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.2}
.map-dots{position:absolute;right:var(--pad);top:50%;transform:translateY(-50%);display:grid;gap:var(--s4)}
.map-dots button{display:block;width:26px;height:44px;padding:0;border:0;background:none;cursor:pointer;position:relative}
.map-dots button::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:var(--line);transition:background .4s var(--ease)}
.map-dots button.on::after,.map-dots button:hover::after{background:var(--white)}
.map-focus{position:absolute;left:var(--pad);bottom:clamp(24px,7vw,64px);max-width:32ch;
  opacity:0;transform:translateY(10px);transition:opacity .4s var(--ease),transform .4s var(--ease)}
.map-focus.on{opacity:1;transform:none}
.map-name{font-family:var(--serif);font-size:clamp(2rem,5vw,3.4rem);line-height:1.02;color:var(--white);margin-top:var(--s2)}
.map-desc{margin-top:var(--s3);color:var(--muted);font-size:.9375rem;line-height:1.6}
.map-go{margin-top:var(--s5);display:inline-flex;align-items:center;gap:var(--s3);min-height:44px;
  font-size:.6875rem;letter-spacing:.16em;text-transform:uppercase;color:var(--white);
  border-bottom:1px solid var(--line-strong)}
.map-go:hover{border-color:var(--white)}
.map-hint{position:absolute;right:var(--pad);bottom:clamp(24px,7vw,64px);max-width:16ch;text-align:right;
  font-size:.6875rem;letter-spacing:.16em;text-transform:uppercase;color:var(--stone)}
.menu-map{display:inline-flex;align-items:center;gap:var(--s3);margin-top:var(--s6);min-height:44px;
  font-size:.6875rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
  border-bottom:1px solid var(--hair);padding-bottom:3px}
.menu-map[hidden]{display:none}
.menu-map .arr{width:18px}
@media (max-width:820px){
  .map-dots{right:12px;gap:var(--s3)}
  .map-hint{display:none}
  .map-focus{right:var(--pad);max-width:none}
}

/* ---------- the route: every page hands you to the next ---------- */
.next-step{border-top:1px solid var(--hair)}
.next-step a{display:grid;grid-template-columns:1fr auto;align-items:end;gap:var(--s3) var(--s5);
  max-width:1360px;margin-inline:auto;padding:var(--s8) var(--pad);color:inherit;
  transition:background .5s var(--ease)}
.next-step a:hover{background:rgb(var(--fg-rgb) / .03)}
.ns-lead{grid-column:1;display:flex;gap:var(--s4);align-items:baseline}
.ns-lead .label{color:var(--stone)}
.ns-count{color:var(--stone)}
.ns-name{grid-column:1;font-family:var(--serif);font-size:clamp(2rem,5vw,3.6rem);line-height:1.02;
  color:var(--white);letter-spacing:-.01em;margin-top:var(--s2)}
.ns-desc{grid-column:1;color:var(--muted);font-size:.9375rem;line-height:1.6;margin-top:var(--s3);max-width:42ch}
.ns-arrow{grid-column:2;grid-row:1/4;align-self:center;display:grid;place-items:center;
  width:56px;height:56px;border:1px solid var(--line);color:var(--white);
  transition:border-color .4s var(--ease),transform .5s var(--ease)}
.next-step a:hover .ns-arrow{border-color:var(--white);transform:translateX(6px)}
.ns-arrow .arr{width:24px}
@media (max-width:640px){
  .next-step a{padding:var(--s7) var(--pad);grid-template-columns:1fr}
  .ns-arrow{grid-column:1;grid-row:auto;width:48px;height:48px;margin-top:var(--s5)}
  .next-step a:hover .ns-arrow{transform:none}
}
/* a generative plate is a plate: same frame, same marks, same caption */
.plate-gen .plate-img{aspect-ratio:4/5}
.plate-gen .gen{display:block;width:100%;height:100%}
.ph-plate.plate-gen .plate-img{aspect-ratio:3/4}

/* ---------- work: plainly set, nothing performing ---------- */
.works .wrap{display:grid;gap:0}
.work-item{display:grid;gap:var(--s4);padding:var(--s8) 0;border-top:1px solid var(--hair);max-width:62ch}
.work-item:first-child{border-top:0}
.work-h{font-family:var(--serif);font-size:clamp(1.9rem,3.6vw,2.9rem);line-height:1.06;color:var(--white);letter-spacing:-.01em}
.work-h em{font-style:italic;color:var(--chrome)}
.work-p{color:var(--muted);font-size:1rem;line-height:1.65}
.work-meta{display:flex;flex-wrap:wrap;gap:var(--s3) var(--s6)}
.work-meta span{font-size:.6875rem;letter-spacing:.16em;text-transform:uppercase;color:var(--stone)}


/* ---------- v6 LUMEN: one light, living inside the material ----------
   Red is never ink: no red paragraphs, no red fills. It appears where something is alive —
   the object, a cell in a button, the voice while it speaks, one accent word. */
.cover h1 em{color:var(--signal)}
.cover-stage .plate-img.stage{background:none;overflow:visible;aspect-ratio:4/5}
.cover-stage .stage canvas{position:absolute;left:-16%;top:-7%;width:132%;height:112%;display:block}
.cover-stage figcaption{position:relative;z-index:1}
html:not(.js) .cover-stage .stage{display:none}

/* a button carries one cell; pointing at it turns the cell on */
.btn::after{content:"";order:-1;flex:none;width:7px;height:7px;background:var(--iron);transition:background .4s var(--ease),box-shadow .4s var(--ease)}
.btn:hover::after,.btn:focus-visible::after{background:var(--signal);box-shadow:0 0 12px 2px rgb(var(--signal-rgb) / .6)}
.btn.solid::after{background:var(--stone)}

/* the slab chapter: the beam that crosses the face is the light itself */
.slab .edge{stroke:var(--signal);stroke-opacity:.85}

/* ICON speaks in light */
.bot-caret{background:var(--signal);box-shadow:0 0 10px rgb(var(--signal-rgb) / .6)}
.bot-title{letter-spacing:.14em}
.bot.is-speaking .bot-head .label{color:var(--signal)}
.bot-q:hover .rn{color:var(--signal)}

/* a Lumen plate is a plate: frame, marks, caption — the object inside is drawn in code */
.plate-lumen .plate-img{aspect-ratio:4/5;background:radial-gradient(120% 80% at 50% 85%,rgb(var(--signal-rgb) / .07),transparent 60%),var(--carbon)}
.plate-lumen .plate-img canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.plate-spread .plate-lumen .plate-img{aspect-ratio:5/4}
html:not(.js) .plate-lumen .plate-img::after{content:"";position:absolute;inset:30% 38%;background:linear-gradient(var(--ember),var(--coal))}

/* ---------- I.C.O.N.: conversion without pressure ---------- */
/* the one-line nudge — once per visit, dismissible, never opens anything by itself */
.bot-hint{display:flex;align-items:stretch;max-width:300px;
  background:rgb(var(--bg-rgb) / .86) linear-gradient(180deg,rgb(255 255 255 / .05),rgb(255 255 255 / 0));
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border:1px solid var(--line);
  box-shadow:0 24px 50px -30px rgb(0 0 0 / .7)}
.bot-hint[hidden]{display:none}
.bot-hint-t{display:flex;align-items:center;gap:var(--s3);padding:var(--s3) var(--s4);text-align:left;
  font-family:var(--serif);font-style:italic;font-size:.9375rem;line-height:1.35;color:var(--white)}
.bot-hint-t i{flex:none;width:6px;height:6px;background:var(--signal);box-shadow:0 0 10px 2px rgb(var(--signal-rgb) / .6)}
.bot-hint-x{display:grid;place-items:center;width:40px;flex:none;color:var(--muted);border-left:1px solid var(--hair);transition:color .3s}
.bot-hint-x:hover{color:var(--white)}
.bot-hint-x svg{width:10px;height:10px;fill:none;stroke:currentColor;stroke-width:1.2}
@media (prefers-reduced-motion:no-preference){.bot-hint:not([hidden]){animation:botMsg .6s var(--ease) both}}

/* the flow's hand-off: the only solid, lit call to action inside the panel */
.bot-go{display:inline-flex;align-items:center;gap:var(--s3);align-self:start;margin-top:var(--s2);padding:var(--s3) var(--s4);
  border:1px solid var(--line-strong);color:var(--white);font-size:.6875rem;letter-spacing:.16em;text-transform:uppercase;
  transition:border-color .3s,background .3s}
.bot-go i{width:6px;height:6px;background:var(--signal);box-shadow:0 0 10px 2px rgb(var(--signal-rgb) / .6)}
.bot-go:hover{border-color:var(--white);background:rgb(var(--fg-rgb) / .05)}
.bot-go .arr{width:18px}
.bot-q[data-opt] .rn{color:var(--stone)}

/* the brief, when I.C.O.N. carried the answers there */
.from-icon{display:flex;align-items:center;gap:var(--s3);margin-bottom:var(--s5);font-family:var(--serif);font-style:italic;color:var(--chrome)}
.from-icon[hidden]{display:none}
.from-icon i{flex:none;width:6px;height:6px;background:var(--signal);box-shadow:0 0 10px 2px rgb(var(--signal-rgb) / .6)}
.plate-lumen-in{background:radial-gradient(120% 80% at 50% 85%,rgb(var(--signal-rgb) / .07),transparent 60%),var(--carbon)}
.plate-lumen-in canvas{position:absolute;inset:0;width:100%;height:100%;display:block}

/* ---------- v6.2 THE PRESENCE: one living object behind the whole site ---------- */
.presence{position:fixed;inset:0;width:100vw;height:100vh;z-index:0;pointer-events:none;display:block}
html:not(.js) .presence,html:not(.js) .presence-hud{display:none}
main,.site-footer{position:relative;z-index:1}
/* the object lives in the right half; copy keeps the left */
.cover-grid{min-height:60svh}
.cover-cap{position:absolute;right:0;bottom:0;display:flex;gap:var(--s3);color:var(--stone);font-size:.6875rem}
.cover-cap .rn{font-size:.9rem;letter-spacing:0;text-transform:none}
.cover-copy{position:relative}
.page-hero.with-presence{min-height:max(640px,86svh);display:flex;align-items:flex-end}
.page-hero.with-presence .wrap{width:100%}
.page-hero.with-presence .ph-copy{max-width:min(760px,56vw)}
.stage-slot{grid-column:1/8;min-height:min(70svh,640px)}
.slab-slot{width:100%;min-height:min(62svh,560px)}
/* JARVIS readout: which form the object holds, and — until the first touch — an invitation */
.presence-hud{display:flex;align-items:center;gap:var(--s2);pointer-events:none;white-space:nowrap;padding:0 var(--s5);border-left:1px solid var(--line);border-right:1px solid var(--line);
  transition:opacity .5s var(--ease)}
.presence-hud .label{color:var(--stone);font-size:.625rem}
.hud-cell{width:6px;height:6px;background:var(--signal);box-shadow:0 0 10px 2px rgb(var(--signal-rgb) / .55)}
.hud-form{font-family:var(--serif);font-style:italic;font-size:.875rem;color:var(--white);min-width:4.5em}
/* the cover's invitation to touch: beside the object, gone after the first touch */
.touch-hint{position:absolute;z-index:2;left:74%;transform:translateX(-50%);bottom:calc(var(--s6) + 84px);white-space:nowrap;display:flex;align-items:center;gap:var(--s3);color:var(--stone);
  pointer-events:none;transition:opacity .8s var(--ease)}
.touch-hint i{width:6px;height:6px;background:var(--signal);box-shadow:0 0 10px 2px rgb(var(--signal-rgb) / .55)}
@media (prefers-reduced-motion:no-preference){.touch-hint i{animation:beat 2.6s ease-in-out infinite}
  @keyframes beat{0%,100%{opacity:1}50%{opacity:.3}}}
html.presence-touched .touch-hint{opacity:0}
@media (prefers-reduced-motion:reduce){.touch-hint{display:none}}
@media (max-width:820px){.touch-hint{display:none}}
@media (max-width:1180px){.presence-hud{display:none}}
@media (max-width:820px){
  .page-hero.with-presence,.start-hero{min-height:auto;padding-top:calc(var(--header-h) + 40svh);padding-bottom:var(--s7)}.page-hero.with-presence .ph-copy{max-width:none}
  .stage-slot{display:none}.slab-slot{min-height:180px}
  .cover-grid{min-height:0}.cover-cap{display:none}
  .cover{padding-top:calc(var(--header-h) + 42svh)}
  .slab-slot{min-height:260px}}
/* sound: a waveform, lit when on */
.sound-toggle{display:inline-grid;place-items:center;width:44px;height:44px;color:var(--muted);border:1px solid var(--line);transition:color .3s,border-color .3s}
.sound-toggle svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.2;stroke-linecap:round}
.sound-toggle:hover{color:var(--white);border-color:var(--line-strong)}
.sound-toggle[aria-pressed="true"]{color:var(--signal);border-color:rgb(var(--signal-rgb) / .5)}
/* cells, not pictures: the studio's material shown as matter */
.cell-field{display:grid;grid-template-columns:repeat(12,1fr);gap:4px;width:100%}
.cell-field i,.ramp-cells i{aspect-ratio:1;display:block;background:var(--coal);border:1px solid rgb(0 0 0 / .45)}
.cell-field .c1,.ramp-cells .c1{background:#5E0B07}
.cell-field .c2,.ramp-cells .c2{background:var(--ember)}
.cell-field .c3,.ramp-cells .c3{background:var(--signal);box-shadow:0 0 14px 1px rgb(var(--signal-rgb) / .5)}
.cell-field .c4,.ramp-cells .c4{background:#FFB9A3;box-shadow:0 0 18px 3px rgb(var(--signal-rgb) / .6)}
.ramp-cells{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;width:100%}
.spec-light,.spec-cells{justify-content:space-between;min-height:260px}
.study-body .cell-field{max-width:420px}

/* ---------- v6.3 offer, legible: what we make, where you are, what you receive ---------- */
/* home III: five capabilities in plain words, before the three systems */
.caps{display:grid;grid-template-columns:repeat(5,1fr);gap:0;margin:var(--s8) 0 var(--s8);border-top:1px solid var(--line)}
.caps li{padding:var(--s5) var(--s5) var(--s5) 0;border-right:1px solid var(--hair)}
.caps li:last-child{border-right:0}
.caps li + li{padding-left:var(--s5)}
.caps .rn{display:block;font-size:.9375rem;margin-bottom:var(--s4)}
.caps h3{font-family:var(--serif);font-weight:400;font-size:1.375rem;line-height:1.15;color:var(--white);margin-bottom:var(--s3)}
.caps p{font-size:.9375rem;line-height:1.55;color:var(--chrome)}
.caps-sys{margin-bottom:var(--s4)}
.caps-links{display:flex;flex-wrap:wrap;gap:var(--s4) var(--s7);margin-top:var(--s7)}
@media (max-width:1100px){.caps{grid-template-columns:1fr 1fr}.caps li{border-right:0;border-bottom:1px solid var(--hair);padding-left:0!important}}
@media (max-width:560px){.caps{grid-template-columns:1fr}}

/* system: start from where you are */
.finder-sec{padding-bottom:var(--s8)}
.finder{border-top:1px solid var(--line)}
.finder{margin-top:var(--s7)}
.finder a{display:grid;grid-template-columns:3em minmax(0,5fr) minmax(0,6fr) auto;align-items:baseline;gap:var(--s5);padding:var(--s5) 0;border-bottom:1px solid var(--hair);color:var(--chrome);transition:color .3s,background .3s}
.finder .rn{font-size:.9375rem}
.finder .f-where{font-family:var(--serif);font-size:clamp(1.25rem,2vw,1.75rem);line-height:1.2;color:var(--white)}
.finder .f-what{font-size:.9375rem;line-height:1.5}
.finder .arr{align-self:center;opacity:.5;transition:transform .5s var(--ease),opacity .3s}
.finder a:hover .arr{opacity:1;transform:translateX(5px)}
.finder a:hover .rn{color:var(--signal)}
@media (max-width:820px){.finder a{grid-template-columns:2em 1fr;gap:var(--s2) var(--s4)}.finder .f-what{grid-column:2}.finder .arr{display:none}}
.purpose .outcome{font-family:var(--sans);font-style:normal;font-size:1rem;line-height:1.55;color:var(--chrome);max-width:26rem}
.purpose dt + dd + dt{margin-top:var(--s5)}
.stack-note{margin-top:var(--s6);font-family:var(--serif);font-style:italic;color:var(--chrome);font-size:1.125rem}

/* method: what you receive at every stage */
.method .step-body{grid-column:8/-1}
.method .step-body p{color:var(--chrome)}
.method .get{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4);align-items:baseline;margin-top:var(--s4);padding-top:var(--s3);border-top:1px solid var(--hair)}
.method .get .label{color:var(--stone)}
.method .get em{font-family:var(--serif);color:var(--white)}
@media (max-width:1024px){.method .step-body{grid-column:1/-1}}

/* ---------- I.C.O.N. thinks before it speaks: three cells, waking in turn ---------- */
.bot-thinking{padding:var(--s2) 0}
.bot-thinking .dots{display:inline-flex;gap:5px;align-items:center;height:1.2em}
.bot-thinking .dots i{width:6px;height:6px;background:var(--iron);transition:background .2s}
@media (prefers-reduced-motion:no-preference){
  .bot-thinking .dots i{animation:iconThink 1.1s ease-in-out infinite}
  .bot-thinking .dots i:nth-child(2){animation-delay:.18s}
  .bot-thinking .dots i:nth-child(3){animation-delay:.36s}
  @keyframes iconThink{0%,100%{background:var(--iron);box-shadow:none}40%{background:var(--signal);box-shadow:0 0 10px 1px rgb(var(--signal-rgb) / .55)}}
}
.bot.is-thinking .bot-head .label{color:var(--signal)}

/* ---------- v6.4 I.C.O.N., more alive: a status that breathes, answers you can tap, a hint while you type ---------- */
.bot-panel{width:min(420px,calc(100vw - 24px));max-height:min(640px,calc(100svh - 110px))}
@media (min-width:1500px){.bot-panel{width:min(440px,calc((100vw - 1360px) / 2 + 200px))}}
.bot-head{grid-template-columns:auto 1fr auto;align-items:center;row-gap:2px}
.bot-avatar{width:46px;height:46px}
.bot-head .bot-title{grid-column:2;grid-row:1;margin-top:0;letter-spacing:.16em}
.bot-status{grid-column:2;grid-row:2;display:flex;align-items:center;gap:var(--s3);font-size:.625rem;letter-spacing:.18em;text-transform:uppercase;color:var(--stone)}
.bot-status .st{display:none}
.bot:not(.is-thinking):not(.is-speaking) .st-idle,.bot.is-thinking .st-think,.bot.is-speaking:not(.is-thinking) .st-speak{display:inline}
.bot.is-thinking .bot-status,.bot.is-speaking .bot-status{color:var(--signal)}
.voice{display:inline-flex;gap:2px;align-items:center}
.voice i{width:4px;height:4px;background:var(--iron);transition:background .25s}
.bot:not(.is-thinking):not(.is-speaking) .voice i:nth-child(6){background:var(--ember)}
@media (prefers-reduced-motion:no-preference){
  .bot:not(.is-thinking):not(.is-speaking) .voice i:nth-child(6){animation:vIdle 3.2s ease-in-out infinite}
  .bot.is-thinking .voice i{animation:vThink 1.2s ease-in-out infinite}
  .bot.is-speaking .voice i{animation:vSpeak .9s steps(2,jump-none) infinite}
  .voice i:nth-child(2){animation-delay:.08s!important}.voice i:nth-child(3){animation-delay:.16s!important}.voice i:nth-child(4){animation-delay:.24s!important}
  .voice i:nth-child(5){animation-delay:.32s!important}.voice i:nth-child(6){animation-delay:.40s!important}.voice i:nth-child(7){animation-delay:.48s!important}
  .voice i:nth-child(8){animation-delay:.56s!important}.voice i:nth-child(9){animation-delay:.64s!important}.voice i:nth-child(10){animation-delay:.72s!important}
  .voice i:nth-child(11){animation-delay:.8s!important}.voice i:nth-child(12){animation-delay:.88s!important}
  .bot.is-speaking .voice i:nth-child(3n){animation-duration:.7s}.bot.is-speaking .voice i:nth-child(4n+1){animation-duration:1.1s}
  @keyframes vIdle{0%,100%{background:var(--iron)}50%{background:var(--ember)}}
  @keyframes vThink{0%,100%{background:var(--iron)}45%{background:var(--signal);box-shadow:0 0 6px rgb(var(--signal-rgb) / .6)}}
  @keyframes vSpeak{0%{background:var(--ember)}50%{background:var(--signal);box-shadow:0 0 6px rgb(var(--signal-rgb) / .6)}100%{background:var(--iron)}}
}
/* what you said: set apart, quietly */
.bot-msg.is-you p{background:rgb(var(--fg-rgb) / .06);border-right:1px solid rgb(var(--signal-rgb) / .6);padding:var(--s2) var(--s4);max-width:85%}
.bot-msg p{font-size:1.0625rem}
/* the next things to say: short, tappable, wrapping like speech */
.bot-ask{display:flex;flex-wrap:wrap;gap:var(--s2);padding:var(--s2) var(--s5) var(--s5)}
.bot-q{display:inline-flex;grid-template-columns:none;width:auto;align-items:center;gap:0;padding:9px 13px;border:1px solid var(--line);border-top:1px solid var(--line);
  font-size:.8125rem;line-height:1.3;color:var(--pearl);background:rgb(var(--fg-rgb) / .02);transition:border-color .3s,color .3s,background .3s}
.bot-q .rn{display:none}
.bot-q:hover,.bot-q:focus-visible{border-color:var(--white);color:var(--white);background:rgb(var(--fg-rgb) / .06)}
.bot-q[data-act^="k:brief"],.bot-q[data-k="brief"]{border-color:rgb(var(--signal-rgb) / .55)}
.bot-q[data-act^="k:brief"]::before,.bot-q[data-k="brief"]::before{content:"";width:5px;height:5px;margin-right:9px;background:var(--signal);box-shadow:0 0 8px 1px rgb(var(--signal-rgb) / .55)}
/* a hint while you type: the part of the work I think you mean */
.bot-suggest{display:flex;align-items:baseline;gap:var(--s3);width:100%;padding:var(--s3) var(--s5);border-top:1px solid var(--hair);text-align:left;color:var(--white);transition:background .3s}
.bot-suggest[hidden]{display:none}
.bot-suggest .label{color:var(--stone)}
.bot-suggest .sg-n{font-family:var(--serif);font-style:italic;font-size:1rem;flex:1}
.bot-suggest .arr{width:18px;align-self:center}
.bot-suggest:hover{background:rgb(var(--fg-rgb) / .05)}
@media (max-width:560px){.bot-ask{padding:var(--s2) var(--s4) var(--s4)}.bot-suggest{padding:var(--s3) var(--s4)}.bot-msg p{font-size:1rem}}

/* ---------- v6.5 I.C.O.N., full screen: the site steps back, the monolith becomes its body ---------- */
.icon-hud,.icon-rail,.bot-x .x-t,.bot-x kbd{display:none}
html.bot-open{overflow:hidden}
html.bot-open main,html.bot-open .site-footer,html.bot-open .site-header,html.bot-open .presence-hud,html.bot-open .chapters{opacity:0;pointer-events:none;transition:opacity .6s var(--ease)}
main,.site-footer,.site-header{transition:opacity .6s var(--ease)}
.bot.is-open .bot-scrim{opacity:0}
.bot.is-open{inset:0;right:0;bottom:0}
.bot.is-open .bot-panel{
  position:fixed;inset:0;z-index:120;width:auto;max-width:none;max-height:none;height:100vh;height:100dvh;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,640px) minmax(240px,300px);
  grid-template-rows:auto minmax(0,1fr) auto auto auto;
  grid-template-areas:"head head head" "stage body rail" "stage sugg rail" "stage form rail" "stage foot rail";
  padding:0 clamp(16px,3.2vw,56px);border:0;box-shadow:none;
  -webkit-backdrop-filter:none;backdrop-filter:none;
  background:
    radial-gradient(70% 90% at 25% 54%,rgb(var(--bg-rgb) / 0) 0%,rgb(var(--bg-rgb) / .25) 45%,rgb(var(--bg-rgb) / .78) 80%),
    linear-gradient(90deg,rgb(var(--bg-rgb) / 0) 30%,rgb(var(--bg-rgb) / .55) 48%,rgb(var(--bg-rgb) / .82) 100%);
}
@media (prefers-reduced-motion:no-preference){.bot.is-open .bot-panel{animation:iconIn .7s var(--ease) both}
  @keyframes iconIn{from{opacity:0}to{opacity:1}}}
.bot.is-open .bot-panel > .marks{margin:14px}
/* head: name and state on the left, time and place in the middle, the way out on the right */
.bot.is-open .bot-head{grid-area:head;position:relative;display:flex;align-items:center;gap:var(--s5);padding:var(--s5) 0;border-bottom:1px solid var(--line)}
.bot.is-open .bot-avatar{display:none}
.bot.is-open .bot-title{font-size:1.5rem;letter-spacing:.3em}
.bot.is-open .bot-status{margin-left:var(--s3)}
.bot.is-open .voice i{width:5px;height:5px}
.bot.is-open .icon-hud{display:flex;gap:var(--s5);margin:0 auto;font-size:.625rem;letter-spacing:.2em;text-transform:uppercase;color:var(--stone);font-variant-numeric:tabular-nums}
.bot.is-open .icon-hud span:first-child{color:var(--white)}
.bot.is-open .bot-x{display:inline-flex;align-items:center;gap:var(--s3);width:auto;height:40px;padding:0 var(--s4);border:1px solid var(--line);color:var(--chrome)}
.bot.is-open .bot-x .x-t{display:inline;font-size:.6875rem;letter-spacing:.16em;text-transform:uppercase}
.bot.is-open .bot-x kbd{display:inline;font:inherit;font-size:.5625rem;letter-spacing:.1em;color:var(--stone);border:1px solid var(--line);padding:1px 5px}
.bot.is-open .bot-x:hover{color:var(--white);border-color:var(--white)}
/* the sweep: a line of light that runs along the head while it thinks or speaks */
.bot.is-open .bot-head::after{content:"";position:absolute;left:0;bottom:-1px;height:1px;width:22%;opacity:0;
  background:linear-gradient(90deg,transparent,var(--signal),transparent)}
@media (prefers-reduced-motion:no-preference){
  .bot.is-open.is-thinking .bot-head::after,.bot.is-open.is-speaking .bot-head::after{opacity:1;animation:iconSweep 2.4s linear infinite}
  @keyframes iconSweep{from{transform:translateX(-30%)}to{transform:translateX(480%)}}
}
/* the conversation: large, the latest lines bright, the older ones receding upward */
.bot.is-open .bot-body{grid-area:body;border-left:1px solid var(--hair);border-right:1px solid var(--hair);padding:0 clamp(20px,2.6vw,40px);
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 14%);mask-image:linear-gradient(to bottom,transparent 0,#000 14%)}
.bot.is-open .bot-log{padding:14vh 0 var(--s4);gap:var(--s6)}
.bot.is-open .bot-msg p{font-size:clamp(1.25rem,1.55vw,1.625rem);line-height:1.45;color:var(--white)}
.bot.is-open .bot-msg em{color:var(--signal)}
.bot.is-open .bot-msg.is-you p{font-family:var(--sans);font-size:.9375rem;line-height:1.5;color:var(--pearl)}
.bot.is-open .bot-msg:not(:nth-last-child(-n+3)){opacity:.42;transition:opacity .6s}
.bot.is-open .bot-ask{padding:var(--s2) 0 var(--s6)}
.bot.is-open .bot-suggest{grid-area:sugg;border-left:1px solid var(--hair);border-right:1px solid var(--hair);padding:var(--s3) clamp(20px,2.6vw,40px)}
.bot.is-open .bot-form{grid-area:form;border-left:1px solid var(--hair);border-right:1px solid var(--hair);border-top:1px solid var(--line);padding:var(--s4) clamp(20px,2.6vw,40px)}
.bot.is-open .bot-input{font-size:1.1875rem;caret-color:var(--signal);padding:var(--s3) 0}
.bot.is-open .bot-foot{grid-area:foot;border-left:1px solid var(--hair);border-right:1px solid var(--hair);padding:var(--s4) clamp(20px,2.6vw,40px) var(--s5)}
/* the rail: what it remembers, and how much of the work has been explored */
.bot.is-open .icon-rail{grid-area:rail;display:flex;flex-direction:column;gap:var(--s4);padding:14vh 0 var(--s6) clamp(20px,2vw,32px);overflow-y:auto}
.icon-rail > .label{color:var(--stone);padding-bottom:var(--s2);border-bottom:1px solid var(--hair)}
.icon-mem{display:grid;gap:var(--s3);margin-bottom:var(--s5)}
.icon-mem dt{font-size:.5625rem;color:var(--stone)}
.icon-mem dd{font-family:var(--serif);font-size:1.0625rem;color:var(--white);line-height:1.3}
.icon-mem dd.flash{animation:memFlash 1.4s var(--ease)}
@keyframes memFlash{0%{color:var(--signal);text-shadow:0 0 12px rgb(var(--signal-rgb) / .6)}100%{color:var(--white);text-shadow:none}}
.icon-map{display:grid;gap:2px;margin-bottom:var(--s5)}
.icon-map button{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto;gap:6px var(--s3);width:100%;padding:var(--s3) var(--s2);text-align:left;border-left:1px solid transparent;transition:background .3s,border-color .3s}
.icon-map button:hover,.icon-map button.cur{background:rgb(var(--fg-rgb) / .05);border-left-color:var(--signal)}
.icon-map .mn{font-size:.8125rem;color:var(--pearl)}
.icon-map .ct{font-size:.625rem;letter-spacing:.12em;color:var(--stone);font-variant-numeric:tabular-nums}
.icon-map .cells{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:3px}
.icon-map .cells i{width:9px;height:9px;background:var(--iron);transition:background .4s,box-shadow .4s}
.icon-map .cells i.on{background:var(--signal);box-shadow:0 0 8px rgb(var(--signal-rgb) / .55)}
.icon-count{font-size:.625rem;letter-spacing:.14em;text-transform:uppercase;color:var(--stone)}
.icon-count span{font-family:var(--serif);font-size:1.5rem;letter-spacing:0;color:var(--white);margin-right:var(--s2);font-variant-numeric:tabular-nums}
.icon-note{font-size:.75rem;line-height:1.5;color:var(--stone);margin-top:auto}
/* narrow screens: one column, the monolith above the conversation, the rail folded away */
@media (max-width:1000px){
  .bot.is-open .bot-panel{grid-template-columns:minmax(0,1fr);grid-template-rows:auto 22svh minmax(0,1fr) auto auto auto;
    grid-template-areas:"head" "stage" "body" "sugg" "form" "foot";padding:0 var(--s4);
    background:linear-gradient(180deg,rgb(var(--bg-rgb) / .1) 0%,rgb(var(--bg-rgb) / .35) 30%,rgb(var(--bg-rgb) / .86) 42%,rgb(var(--bg-rgb) / .92) 100%)}
  .bot.is-open .icon-rail,.bot.is-open .icon-hud{display:none}
  .bot.is-open .bot-body,.bot.is-open .bot-suggest,.bot.is-open .bot-form,.bot.is-open .bot-foot{border-left:0;border-right:0;padding-left:0;padding-right:0}
  .bot.is-open .bot-log{padding-top:var(--s5)}
  .bot.is-open .bot-title{font-size:1.125rem}
  .bot.is-open .bot-x .x-t{display:none}
  .bot.is-open .bot-msg p{font-size:1.125rem}
}
.bot.is-open .bot-x{margin-left:auto}
.bot.is-open .icon-hud + .bot-x{margin-left:0}
@media (max-width:1000px){.bot.is-open .icon-hud + .bot-x{margin-left:auto}}
@media (max-width:560px){.bot.is-open .bot-x kbd{display:none}.bot.is-open .bot-x{padding:0 var(--s3)}.bot.is-open .bot-status .voice{display:none}}