/* studioiggy.com
   Editorial single column with sticky section labels on desktop. The jade hero opens it, the
   disclaimer slab is the loud middle, the dark field of towns closes it. Every color is a token,
   light and dark. Manrope Variable for everything that reads, IBM Plex Mono for labels, and a
   four-character Noto Serif JP subset for the name. */

@font-face{font-family:"Manrope";font-style:normal;font-weight:200 800;font-display:swap;src:url(/fonts/manrope-latin-wght.woff2) format("woff2-variations"),url(/fonts/manrope-latin-wght.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/plex-mono-latin-400.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/plex-mono-latin-500.woff2) format("woff2")}
@font-face{font-family:"Ichigo";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/noto-serif-jp-ichigo.woff2) format("woff2")}

:root{
  color-scheme:light;
  --lily:#BFDBBE;
  --lily-pale:#E4F0DD;
  --lily-deep:#9CC6A3;
  --sheen:#6FA482;
  --brand:#2E6650;
  --brand-hi:#22503E;
  --jade-deep:#183D30;
  --deep:#0E2A22;
  --brand-lo:rgba(46,102,80,.1);
  --on-brand:#FFFFFF;
  --bg:#F9FAF7;
  --bg-2:#FFFFFF;
  --bg-3:#EEF5EC;
  --ink:#1F3129;
  --ink-2:#4B5A53;
  --ink-3:#63716B;
  --line:rgba(31,49,41,.15);
  --line-2:rgba(31,49,41,.08);
  --ember:#D2654C;
  --dot:#DCE6DF;
  --screen:#FFFFFF;
  --screen-ink:#1F3129;
  --screen-mute:#CFD8D3;
  --shadow:rgba(31,49,41,.32);
  --bar-bg:rgba(230,241,223,.9);
  --hero-a:#E6F1DF;--hero-b:#D0E4C9;--hero-c:#BBD9BA;--hero-d:#A9CFB3;
  --slab:#183D30;
  --on-slab:#E4F0DD;
  --on-slab-2:#BFDBBE;
  --sign-line:rgba(228,240,221,.28);
  --sign-bg:rgba(228,240,221,.06);
  --field-ink:#F2F5EF;
  --field-ink-2:#BFD2C4;
  --field-ink-3:#8AA697;
  --display:"Manrope",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --sans:"Manrope",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --jp:"Ichigo","Noto Serif JP","Hiragino Mincho ProN","Yu Mincho",serif;
  --gutter:clamp(18px,5vw,44px);
  --max:1160px;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --bg:#101B16;--bg-2:#162420;--bg-3:#1B2B25;
    --ink:#E7EFE9;--ink-2:#BCCAC2;--ink-3:#8FA398;
    --line:rgba(231,239,233,.2);--line-2:rgba(231,239,233,.1);
    --brand:#9CC6A3;--brand-hi:#BFDBBE;--brand-lo:rgba(156,198,163,.14);--on-brand:#101B16;
    --lily:#2E6650;--lily-pale:#1B2B25;--lily-deep:#3B7C60;
    --dot:#27382F;--shadow:rgba(0,0,0,.55);--bar-bg:rgba(16,27,22,.88);
    --hero-a:#16302A;--hero-b:#153A2E;--hero-c:#173F32;--hero-d:#1A4A3A;
    --slab:#E4F0DD;--on-slab:#183D30;--on-slab-2:#2E6650;
    --sign-line:rgba(24,61,48,.28);--sign-bg:rgba(24,61,48,.06);
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#101B16;--bg-2:#162420;--bg-3:#1B2B25;
  --ink:#E7EFE9;--ink-2:#BCCAC2;--ink-3:#8FA398;
  --line:rgba(231,239,233,.2);--line-2:rgba(231,239,233,.1);
  --brand:#9CC6A3;--brand-hi:#BFDBBE;--brand-lo:rgba(156,198,163,.14);--on-brand:#101B16;
  --lily:#2E6650;--lily-pale:#1B2B25;--lily-deep:#3B7C60;
  --dot:#27382F;--shadow:rgba(0,0,0,.55);--bar-bg:rgba(16,27,22,.88);
  --hero-a:#16302A;--hero-b:#153A2E;--hero-c:#173F32;--hero-d:#1A4A3A;
  --slab:#E4F0DD;--on-slab:#183D30;--on-slab-2:#2E6650;
  --sign-line:rgba(24,61,48,.28);--sign-bg:rgba(24,61,48,.06);
}

html{background:var(--bg);scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;padding-inline:var(--gutter);padding-block:0;background:var(--bg);color:var(--ink);font:400 1.0625rem/1.65 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-webkit-tap-highlight-color:transparent;overflow-x:hidden}
img,svg{max-width:100%}
[hidden]{display:none!important}
a{color:inherit}
:focus-visible{outline:2px solid var(--brand);outline-offset:3px;border-radius:6px}
::selection{background:var(--brand-lo);color:var(--brand-hi)}
p{margin:0}

/* Bar */
.bar{position:sticky;top:env(safe-area-inset-top,0px);z-index:30;margin-inline:calc(-1 * var(--gutter));padding:12px var(--gutter);background:var(--bar-bg);-webkit-backdrop-filter:saturate(1.4) blur(16px);backdrop-filter:saturate(1.4) blur(16px);border-bottom:1px solid var(--line-2)}
.bar-in{max-width:var(--max);margin-inline:auto;display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--brand-hi)}
.brand svg{width:28px;height:28px;flex:none}
.wordmark{font-family:var(--display);font-weight:700;font-size:1.5rem;line-height:1;letter-spacing:-.03em}
.nav{display:flex;align-items:center;gap:26px}
.nav .link{color:var(--ink-2);text-decoration:none;font-size:.9rem;font-weight:600}
.nav .link:hover{color:var(--ink)}
@media (max-width:820px){.nav .link{display:none}}
.bar-jp{font-family:var(--jp);font-size:1.05rem;letter-spacing:.12em;color:var(--brand);text-decoration:none;opacity:.9}
.bar-jp:hover{opacity:1}
/* The disclaimers button: on every page, every width, links to the three signs on the homepage */
.bar-disc{display:inline-flex;align-items:center;min-height:32px;padding:0 12px;border-radius:999px;border:1px solid var(--line);font-family:var(--mono);font-weight:500;font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--brand);text-decoration:none;white-space:nowrap}
.bar-disc:hover{border-color:var(--brand);color:var(--brand-hi)}
@media (max-width:820px){.nav{gap:14px}}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:0 24px;border-radius:999px;font:600 .95rem/1 var(--sans);letter-spacing:.01em;text-decoration:none;border:1px solid transparent;cursor:pointer;color:var(--ink);background:transparent;transition:background-color .2s,color .2s,border-color .2s}
.btn-primary{background:var(--brand);color:var(--on-brand);border-color:var(--brand)}
.btn-primary:hover{background:var(--brand-hi);border-color:var(--brand-hi)}
.btn-ghost{border-color:var(--line)}
.btn-ghost:hover{border-color:var(--brand);color:var(--brand-hi)}
.btn-sm{min-height:38px;padding:0 16px;font-size:.85rem}
.btn svg{width:16px;height:16px;flex:none}
.cta-row{display:flex;flex-wrap:wrap;gap:12px}

/* Type */
.eyebrow,.sec-label,.mono{font-family:var(--mono);font-weight:500;font-size:.72rem;line-height:1.4;letter-spacing:.16em;text-transform:uppercase}
.eyebrow{color:var(--brand);margin:0}
h1,h2{font-family:var(--display);font-weight:800;margin:0;text-wrap:balance;letter-spacing:-.03em;color:var(--ink)}
h1{font-size:clamp(2.6rem,11vw,5.6rem);line-height:1;margin-top:18px}
h2{font-size:clamp(2.1rem,6.4vw,3.4rem);line-height:1.1;max-width:15em}
h1 em,h2 em{font-style:normal;color:var(--brand)}
h3{font:700 1.15rem/1.35 var(--sans);margin:0;color:var(--ink);letter-spacing:-.01em}
.prose{display:grid;gap:18px}
.prose p{margin:0;max-width:36em;color:var(--ink-2)}
.prose strong{color:var(--ink);font-weight:700}
.prose .lead{color:var(--ink);font-size:1.18rem;line-height:1.55;font-weight:600}
.pull{margin:0;font-weight:800;font-size:clamp(1.4rem,5.2vw,2rem);line-height:1.2;letter-spacing:-.02em;color:var(--brand);max-width:20em;text-wrap:balance}
.kicker{margin:14px 0 0;font-size:clamp(1.2rem,4.6vw,1.6rem);line-height:1.3;font-weight:700;letter-spacing:-.015em;color:var(--ink);max-width:24em;text-wrap:balance}
.lede{font-size:clamp(1.05rem,2.6vw,1.2rem);line-height:1.55;color:var(--ink-2);max-width:32em;margin:0;font-weight:500}

/* Hero: spring water on the green, a lily blooming in the corner */
.hero{margin-inline:calc(-1 * var(--gutter));padding:clamp(26px,7vw,88px) var(--gutter) clamp(36px,8vw,104px);
  background:radial-gradient(60% 45% at 82% 18%,rgba(255,255,255,.55),transparent 62%),radial-gradient(45% 32% at 8% 92%,rgba(236,186,194,.36),transparent 70%),linear-gradient(165deg,var(--hero-a) 0%,var(--hero-b) 40%,var(--hero-c) 76%,var(--hero-d) 100%);
  color:var(--ink);border-radius:0 0 28px 28px;position:relative;overflow:hidden}
.hero-in{max-width:var(--max);margin-inline:auto;display:grid;gap:22px;grid-template-columns:minmax(0,1fr);grid-template-areas:"copy" "stage" "foot";align-items:center}
.hero-copy{grid-area:copy;min-width:0}
.hero-foot{grid-area:foot;min-width:0;display:grid;gap:18px}
@media (min-width:920px){
  .hero-in{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);grid-template-areas:"copy stage" "foot stage";column-gap:56px;row-gap:28px}
  .hero-copy{align-self:end}.hero-foot{align-self:start}
}
.hero .role{margin:16px 0 0;font-size:clamp(1.05rem,2.8vw,1.25rem);font-weight:700;color:var(--brand-hi);line-height:1.4}
.tap{display:flex;gap:12px;align-items:flex-start;padding-top:18px;border-top:1px solid var(--line);color:var(--ink-2);font-size:.92rem;line-height:1.5;max-width:30em}
.tap svg{width:22px;height:22px;flex:none;margin-top:1px;color:var(--brand)}
.tap button{appearance:none;background:none;border:0;padding:0;margin:0;font:inherit;color:var(--brand-hi);font-weight:700;cursor:pointer;border-bottom:1.5px solid currentColor;border-radius:0}
.hero-shot{grid-area:stage;margin:0;display:grid;gap:14px;width:100%;max-width:520px;justify-self:center;min-width:0;position:relative}
.hero-shot .frame{position:relative;border-radius:24px;overflow:hidden;background:var(--bg-3);aspect-ratio:4/3;max-width:100%;box-shadow:0 30px 50px -24px var(--shadow)}
.hero-shot .frame::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(255,255,255,.35);pointer-events:none}
.hero-shot img{display:block;width:100%;height:100%;object-fit:cover}
.hero-shot figcaption{font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);line-height:1.5}
.hero-shot .frame{grid-area:1/1}
.hero-shot .seal{grid-area:1/1;align-self:end;justify-self:end;position:relative;margin-right:clamp(14px,4%,32px);margin-bottom:calc(clamp(96px,18vw,132px) / -2 + 26px);width:clamp(96px,18vw,132px);height:auto;z-index:2;filter:drop-shadow(0 10px 18px rgba(21,63,53,.35));animation:spin 40s linear infinite}
.hero-shot figcaption{grid-area:2/1}
.hero-shot figcaption::before{content:"";float:right;width:calc(clamp(96px,18vw,132px) + clamp(14px,4%,32px) + 16px);height:calc(clamp(96px,18vw,132px) / 2 - 4px)}
@keyframes spin{to{transform:rotate(360deg)}}
@media (min-width:920px){.hero-shot{max-width:none}.hero-shot .frame{aspect-ratio:1/1}}

/* Sections: sticky label on the left at desktop */
.sec{max-width:var(--max);margin-inline:auto;padding-block:clamp(64px,10vw,124px);border-top:1px solid var(--line-2);display:grid;gap:22px 56px;grid-template-columns:minmax(0,1fr)}
.sec.tight{padding-block:clamp(44px,7vw,84px)}
.sec-label{color:var(--brand);display:flex;align-items:center;gap:12px;margin:0}
.sec-label::before{content:"";width:20px;height:1px;background:var(--brand)}
.sec-body{min-width:0;display:grid;grid-template-columns:minmax(0,1fr);gap:30px;align-content:start}
@media (min-width:920px){
  .sec{grid-template-columns:190px minmax(0,1fr)}
  .sec-label{position:sticky;top:calc(env(safe-area-inset-top,0px) + 100px);align-self:start;padding-top:16px}
}
section[id],.sub[id]{scroll-margin-top:76px}
/* Who I am: one section, several questions */
.sub{display:grid;gap:26px;padding-top:36px;margin-top:10px;border-top:1px solid var(--line-2)}
.sec-body > .sub:first-child{padding-top:0;margin-top:0;border-top:0}
.sub-h{font-family:var(--display);font-weight:800;font-size:clamp(1.6rem,5vw,2.4rem);line-height:1.12;letter-spacing:-.025em;max-width:16em;text-wrap:balance;color:var(--ink)}
.sub-h em{font-style:normal;color:var(--brand)}

/* The mandate pager */
.pager{display:grid;gap:22px}
.pager-tabs{display:flex;gap:8px;flex-wrap:wrap;border-bottom:1px solid var(--line-2);padding-bottom:14px}
.pager-tab{appearance:none;cursor:pointer;background:transparent;border:1px solid var(--line-2);border-radius:999px;padding:9px 16px;color:var(--ink-2);font:600 .84rem/1 var(--sans);letter-spacing:.005em;transition:background-color .2s,color .2s,border-color .2s}
.pager-tab:hover{color:var(--ink);border-color:var(--line)}
.pager-tab[aria-selected="true"]{background:var(--brand);border-color:var(--brand);color:var(--on-brand)}
.pager-pane{display:grid;gap:26px;align-content:start;animation:pane-in .34s ease-out}
.pager-pane[hidden]{display:none}
@keyframes pane-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.pane-h{font-family:var(--display);font-weight:800;margin:0;text-wrap:balance;letter-spacing:-.03em;font-size:clamp(1.7rem,4.6vw,2.4rem);line-height:1.15;max-width:18em;color:var(--ink)}
.pane-h em{font-style:normal;color:var(--brand)}
.pager-foot{display:flex;align-items:center;gap:16px;padding-top:4px}
.pager-nav{appearance:none;cursor:pointer;flex:none;width:42px;height:42px;border-radius:50%;border:1px solid var(--line-2);background:var(--bg-2);color:var(--ink-2);font-size:1rem;line-height:1;transition:color .2s,border-color .2s,opacity .2s}
.pager-nav:hover:not([disabled]){color:var(--brand);border-color:var(--brand)}
.pager-nav[disabled]{opacity:.35;cursor:default}
.pager-dots{display:flex;gap:8px;margin-inline:auto}
.pager-dots i{width:7px;height:7px;border-radius:50%;background:var(--line);transition:background-color .3s,transform .3s}
.pager-dots i.on{background:var(--brand);transform:scale(1.25)}
.mandate-fig{margin:0;display:grid;gap:12px;max-width:720px}
.mandate-fig svg{display:block;width:100%;height:auto;border-radius:22px;background:var(--bg-3);border:1px solid var(--line-2)}
.mandate-fig figcaption{font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);line-height:1.5}
.web line{stroke:var(--brand);stroke-width:1.1;opacity:.35}
.web circle{fill:var(--brand)}
.web .q{fill:var(--ember)}
.web .q-ring{fill:none;stroke:var(--ember);stroke-width:1.6;opacity:0;transform-origin:center;transform-box:fill-box;animation:ring 3.2s ease-out infinite}
.web .q-ring:nth-of-type(2){animation-delay:1.1s}
@keyframes ring{0%{opacity:.6;transform:scale(.6)}100%{opacity:0;transform:scale(2.6)}}
.web .core{fill:var(--brand-hi)}
.web .cloud{fill:none;stroke:var(--ember);stroke-width:1.4;stroke-dasharray:5 6;transform-origin:center;transform-box:fill-box;animation:approach 6s ease-in-out infinite}
@keyframes approach{0%,100%{transform:scale(1.35);opacity:.3}50%{transform:scale(1);opacity:.85}}
.web text{font-family:var(--mono);font-size:9px;fill:var(--ink-3);letter-spacing:.06em}

/* The garage: two boxes, sorted by which version of me is using them */
.garage{display:grid;gap:22px;max-width:760px}
.seg{display:inline-flex;gap:4px;padding:4px;border:1px solid var(--line-2);border-radius:999px;background:var(--bg-2);justify-self:start}
.seg button{appearance:none;cursor:pointer;border:0;border-radius:999px;background:transparent;color:var(--ink-2);padding:10px 18px;font:600 .88rem/1 var(--sans);transition:background-color .2s,color .2s}
.seg button[aria-pressed="true"]{background:var(--brand);color:var(--on-brand)}
.boxes{display:grid;gap:16px;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);align-items:end}
@media (max-width:520px){.boxes{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:10px}}
.box{margin:0;display:grid;gap:10px;justify-items:center;min-width:0}
.box svg{display:block;width:100%;height:auto;transition:opacity .35s}
.box figcaption{font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);text-align:center;line-height:1.5}
.box.off svg{opacity:.32}
.box.off figcaption{opacity:.55}
.tb-body{fill:var(--bg-2);stroke:var(--line);stroke-width:1}
.tb-red{fill:#B23A2E}
.tb-drawer{fill:var(--bg-3);stroke:var(--line);stroke-width:1;transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.tb-handle{fill:none;stroke:var(--ink-3);stroke-width:1.4;stroke-linecap:round;transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.box.on .tb-drawer.pull,.box.on .tb-handle.pull{transform:translateY(-7px)}
.tb-top{fill:var(--ink-3);opacity:.35}
.tb-wheel{fill:var(--ink-3);opacity:.7}
.tb-blue{fill:#2F5DA8}
.tools{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px;min-height:88px;align-content:start}
.tools li{font-family:var(--mono);font-size:.74rem;letter-spacing:.06em;color:var(--ink-2);border:1px solid var(--line);background:var(--bg-2);border-radius:99px;padding:8px 14px;font-weight:500;animation:tool-in .4s ease-out both}
@keyframes tool-in{from{opacity:0;transform:translateY(6px) scale(.96)}to{opacity:1;transform:none}}
.tools li:nth-child(2){animation-delay:.04s}.tools li:nth-child(3){animation-delay:.08s}.tools li:nth-child(4){animation-delay:.12s}.tools li:nth-child(5){animation-delay:.16s}.tools li:nth-child(6){animation-delay:.2s}.tools li:nth-child(7){animation-delay:.24s}.tools li:nth-child(8){animation-delay:.28s}
.garage-note{margin:0;color:var(--ink-3);font-size:.92rem;max-width:34em}

/* The machine: one evening, in bursts */
.session{margin:0;display:grid;gap:14px;max-width:640px}
.bursts{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.bursts li{display:grid;grid-template-columns:4.6em minmax(0,1fr);gap:4px 14px;align-items:center}
.bursts .when{font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;color:var(--ink-3);text-transform:uppercase;padding-top:2px;align-self:start}
.bursts .row{display:grid;gap:5px;min-width:0}
.bursts .what{font-weight:700;color:var(--ink);font-size:.98rem;line-height:1.3}
.bursts .bar{display:block;height:6px;border-radius:99px;background:var(--lily-deep);opacity:.6;width:var(--w);max-width:100%}
.bursts .think .bar{background:var(--brand);opacity:1;height:10px}
.bursts .think .what{color:var(--ink-3);font-weight:500;font-size:.9rem}
.bursts .len{font-family:var(--mono);font-size:.7rem;letter-spacing:.06em;color:var(--ink-3);line-height:1.5}
.session figcaption{font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);line-height:1.6}

/* What comes first: three cups, then whatever is left over */
.cups{margin:0;display:grid;gap:12px;max-width:640px}
.cups svg{display:block;width:100%;height:auto}
.cups .cup{fill:none;stroke:var(--ink-3);stroke-width:1.6;stroke-linejoin:round}
.cups .fill{fill:var(--brand);transform-origin:50% 100%;transform-box:fill-box;transform:scaleY(0);animation:fill 1.6s cubic-bezier(.3,.8,.3,1) forwards}
.cups .fill.c2{animation-delay:1.3s}.cups .fill.c3{animation-delay:2.6s}
.cups .fill.c4{fill:var(--lily-deep);animation-delay:4.1s;animation-duration:1.4s}
@keyframes fill{to{transform:scaleY(1)}}
.cups .drip{fill:var(--brand);opacity:0;animation:drip 1.4s ease-in 3.9s forwards}
@keyframes drip{0%{opacity:0;transform:translateY(0)}20%{opacity:1}100%{opacity:0;transform:translateY(46px)}}
.cups text{font-family:var(--sans);font-weight:700;font-size:16px;fill:var(--ink);letter-spacing:-.01em}
.cups .sub{font-family:var(--mono);font-weight:500;font-size:11px;fill:var(--ink-3);letter-spacing:.08em}
.cups figcaption{font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);line-height:1.6}

/* The name */
.name-grid{display:grid;gap:24px;align-items:center}
@media (min-width:760px){.name-grid{grid-template-columns:auto minmax(0,1fr);gap:56px}}
.kanji-btn{appearance:none;background:none;border:0;padding:0;margin:0;cursor:pointer;color:inherit;text-align:left;border-radius:12px}
.kanji{display:block;font-family:var(--jp);font-weight:400;font-size:clamp(3.6rem,16vw,7.6rem);line-height:1.15;letter-spacing:.04em;color:var(--brand);margin:0}
.kanji ruby{ruby-position:over}
.kanji rt{font-family:var(--mono);font-size:.13em;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);opacity:0;transition:opacity .35s ease}
.kanji-btn[aria-pressed="true"] rt{opacity:1}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.name-copy{display:grid;gap:10px;min-width:0}
.romaji{color:var(--ink-3);margin:0;display:flex;align-items:center;flex-wrap:wrap;gap:10px}
.say-btn{appearance:none;display:inline-flex;align-items:center;gap:6px;font:600 .86rem/1 var(--sans);letter-spacing:.005em;text-transform:none;color:var(--brand);background:transparent;border:1px solid currentColor;border-radius:999px;padding:5px 11px 5px 9px;cursor:pointer;transition:background .2s,color .2s}
.say-btn:hover,.say-btn:focus-visible{background:var(--brand);color:var(--on-brand)}
.say-btn.playing svg path+path{animation:say-pulse .9s ease-in-out infinite}
@keyframes say-pulse{50%{opacity:.25}}
.trans{font-family:var(--display);font-weight:800;font-size:clamp(1.7rem,4.6vw,2.4rem);line-height:1.1;color:var(--ink);margin:0;letter-spacing:-.03em}
.name-copy .prose{margin-top:10px}
/* On a phone the characters are a mark, not a billboard: the question comes first, then the
   four characters at a modest size, then how to say them, then the answer. */
@media (max-width:759px){
  .name-grid{gap:14px}
  .name-copy{display:contents}
  .name-grid > div:first-child{order:2}
  .name-copy .trans{order:1}
  .name-copy .romaji{order:3}
  .name-copy .prose{order:4;margin-top:4px}
  .kanji{font-size:clamp(2.4rem,11vw,3rem);line-height:1.2;letter-spacing:.1em}
  .kanji rt{font-size:.3em;letter-spacing:.06em}
}
.swatch{display:inline-flex;align-items:center;gap:10px;margin:8px 0 0;font-weight:700;color:var(--ink)}
.swatch .chip{width:30px;height:30px;border-radius:50%;flex:none;background:linear-gradient(125deg,#E4F0DD,#BFDBBE 45%,#D9EBD4 55%,#9CC6A3);box-shadow:inset 0 0 0 1px rgba(31,49,41,.12),0 4px 10px -4px rgba(34,80,62,.4)}
.swatch .mono{color:var(--ink-3);font-weight:500}
.story-shot{margin:0;display:grid;gap:12px;max-width:880px}
.story-shot img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:24px;background:var(--bg-3)}
.story-shot figcaption{font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);line-height:1.6}
@media (max-width:600px){.story-shot img{border-radius:0;margin-inline:calc(-1 * var(--gutter));width:calc(100% + 2 * var(--gutter));max-width:none}}

/* Foreign words: tap any of them to see and hear it */
.term{appearance:none;background:none;border:0;padding:0;margin:0;cursor:pointer;font:inherit;color:inherit;letter-spacing:inherit;line-height:inherit;text-align:inherit;border-bottom:1px dotted currentColor;border-radius:0;transition:opacity .2s}
.term:hover,.term:focus-visible{opacity:.72}
.gloss{position:absolute;z-index:80;width:min(310px,calc(100vw - 24px));background:var(--bg-2);border:1px solid var(--line-2);border-radius:18px;padding:18px;box-shadow:0 20px 44px -18px var(--shadow);display:grid;gap:9px;animation:gloss-in .18s ease-out}
@keyframes gloss-in{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}
.gloss-w{margin:0;font-family:var(--display);font-weight:800;font-size:1.3rem;line-height:1.2;letter-spacing:-.02em;color:var(--brand)}
.gloss-ph{margin:0;font-family:var(--mono);font-size:.82rem;letter-spacing:.01em;color:var(--ink-3)}
.gloss-g{margin:0;font-size:.92rem;line-height:1.55;color:var(--ink-2)}
.gloss-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:2px}
.gloss-btn{appearance:none;display:inline-flex;align-items:center;gap:7px;cursor:pointer;font:600 .86rem/1 var(--sans);color:var(--brand);background:transparent;border:1px solid currentColor;border-radius:999px;padding:7px 13px 7px 11px;transition:background .2s,color .2s}
.gloss-btn:hover,.gloss-btn:focus-visible{background:var(--brand);color:var(--on-brand)}
.gloss-btn svg{width:14px;height:14px;flex:none}
.gloss-btn.playing svg path+path{animation:say-pulse .9s ease-in-out infinite}
.gloss-x{margin-left:auto;appearance:none;background:none;border:0;cursor:pointer;color:var(--ink-3);font-size:1.1rem;line-height:1;padding:4px}
.gloss-x:hover{color:var(--ink)}

/* Disclaimers: three signs on the garage wall */
.slab{margin-inline:calc(-1 * var(--gutter));padding:clamp(52px,9vw,110px) var(--gutter);background:var(--slab);color:var(--on-slab)}
.slab-in{max-width:var(--max);margin-inline:auto;display:grid;gap:36px}
.slab .eyebrow{color:var(--on-slab-2)}
.slab h2{color:var(--on-slab);max-width:13em}
.slab .signs{display:grid;gap:18px;max-width:820px}
.sign{position:relative;border:1.5px solid var(--sign-line);border-radius:14px;background:var(--sign-bg);padding:clamp(22px,4vw,34px) clamp(22px,4vw,34px) clamp(22px,4vw,30px);display:grid;gap:10px}
.sign::before,.sign::after,.sign .scr::before,.sign .scr::after{content:"";position:absolute;width:8px;height:8px;border-radius:50%;background:var(--sign-line);box-shadow:inset 0 0 0 2px var(--slab)}
.sign::before{top:10px;left:10px}.sign::after{top:10px;right:10px}
.sign .scr::before{bottom:10px;left:10px}.sign .scr::after{bottom:10px;right:10px}
.sign h3{color:var(--on-slab);font-size:clamp(1.45rem,5vw,2.05rem);line-height:1.12;letter-spacing:-.025em;font-weight:800}
.sign p{color:var(--on-slab-2);font-size:clamp(1.02rem,3vw,1.18rem);line-height:1.5;font-weight:500;max-width:32em}
.sign p strong{color:var(--on-slab)}
.slab .aside{color:var(--on-slab-2);font-size:.95rem;max-width:32em}
@media (min-width:920px){
  .slab-in{grid-template-columns:190px minmax(0,1fr);gap:22px 56px;align-items:start}
  .slab .eyebrow{grid-column:1;position:sticky;top:calc(env(safe-area-inset-top,0px) + 100px);padding-top:16px}
  .slab h2,.slab .signs,.slab .aside{grid-column:2}
}

/* The door: the disclaimers stay behind it until someone asks (the Disclaimers button, a footer link, or #disclaimers) */
.slab{scroll-margin-top:64px}
.slab.shut{display:none}
.slab.rolling{animation:doorup .7s cubic-bezier(.2,.7,.2,1) both}
@keyframes doorup{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}
@media (prefers-reduced-motion:reduce){.slab.rolling{animation:none}}
.slab .door-close{justify-self:start;font:inherit;font-weight:700;color:var(--on-slab);background:transparent;border:1.5px solid var(--sign-line);border-radius:999px;padding:12px 22px;cursor:pointer}
.slab .door-close:hover{border-color:var(--on-slab)}
@media (min-width:920px){.slab .door-close{grid-column:2}}

/* Studio: projects rendered from studio/projects.json */
.cards{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.card{display:grid;grid-template-rows:auto 1fr;min-width:0;text-decoration:none;color:inherit;border:1px solid var(--line-2);border-radius:24px;background:var(--bg-2);overflow:hidden;box-shadow:0 10px 30px -22px var(--shadow);transition:border-color .2s,transform .2s}
.card:hover{border-color:var(--lily-deep);transform:translateY(-2px)}
.card .art{aspect-ratio:16/10;background:var(--lily-pale);overflow:hidden;display:grid;place-items:center;position:relative}
.card .art img{display:block;width:100%;height:100%;object-fit:cover}
.card .art .stage{width:min(72%,300px);max-width:none}
.card .art .car-card{width:92%;height:auto;display:block}
.card .body{display:grid;gap:12px;padding:22px 22px 24px;align-content:start;min-width:0}
.card .title{display:flex;justify-content:space-between;align-items:baseline;gap:14px}
.card h3{font-size:1.5rem;letter-spacing:-.02em}
.card .season{font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;color:var(--ink-3);white-space:nowrap}
.card .desc{color:var(--ink-2);line-height:1.55}
.card .tags{list-style:none;margin:2px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.card .tags li{font-family:var(--mono);font-weight:500;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--brand-hi);background:var(--bg-3);border-radius:999px;padding:6px 11px}
.card .open{color:var(--brand-hi);font-weight:700;margin-top:4px;border-bottom:1.5px solid currentColor;justify-self:start;padding-bottom:1px}
@media (min-width:760px){
  .cards > .card:last-child:nth-child(odd){grid-column:1/-1}
  .cards > .card:last-child:nth-child(odd){grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);grid-template-rows:none}
  .cards > .card:last-child:nth-child(odd) .art{aspect-ratio:auto;min-height:320px}
  .cards > .card:last-child:nth-child(odd) .body{padding:32px;align-self:center}
}

/* The demo: sticker and the phone that taps it */
.stage{position:relative;width:100%;max-width:min(440px,94%);aspect-ratio:1/1;justify-self:center}
.sticker{position:absolute;left:3%;bottom:5%;width:64%;height:auto;z-index:1;filter:drop-shadow(0 18px 28px rgba(34,80,62,.24))}
.ripples{position:absolute;left:35%;top:63%;width:64%;aspect-ratio:1/1;transform:translate(-50%,-50%);z-index:2;pointer-events:none}
.ripples span{position:absolute;inset:0;border-radius:50%;border:1.5px solid var(--brand);opacity:0;animation:ripple 6s cubic-bezier(.2,.6,.3,1) infinite}
.ripples span:nth-child(2){animation-delay:.22s}
.ripples span:nth-child(3){animation-delay:.44s}
.phone{position:absolute;right:3%;top:1%;width:33%;aspect-ratio:9/19.5;z-index:3;border-radius:17%/7.8%;padding:2.4%;background:linear-gradient(140deg,#D1D4CF 0%,#FAFAF7 26%,#E3E5E1 52%,#FFFFFF 78%,#C4C8C1 100%);box-shadow:0 30px 50px -18px var(--shadow),inset 0 0 0 1px rgba(255,255,255,.8);animation:tap 6s cubic-bezier(.45,.05,.25,1) infinite}
.screen{position:relative;height:100%;border-radius:14%/6.4%;background:var(--screen);overflow:hidden;border:1px solid rgba(31,49,41,.08)}
.screen::before{content:"";position:absolute;top:3.2%;left:50%;width:30%;height:3.4%;transform:translateX(-50%);border-radius:99px;background:#2C312E;z-index:2}
.lit{position:absolute;inset:0;background:var(--screen);padding:26% 11% 0;display:flex;flex-direction:column;gap:6px;animation:lit 6s ease infinite}
.lit .l1{height:9px;width:78%;border-radius:4px;background:var(--screen-ink)}
.lit .l2{height:6px;width:52%;border-radius:4px;background:var(--screen-mute)}
.lit .stars{display:flex;gap:5%;margin-top:10%}
.lit .stars svg{width:17%;height:auto;fill:none;stroke:var(--screen-mute);stroke-width:1.6}
.lit .box{margin-top:10%;height:26%;border-radius:8px;border:1px solid var(--screen-mute)}
.lit .go{margin-top:8%;height:9%;border-radius:99px;background:#2E6650}
@keyframes ripple{0%,31%{opacity:0;transform:scale(.92)}35%{opacity:.35}60%,100%{opacity:0;transform:scale(1.55)}}
@keyframes tap{0%,10%{transform:translate(12%,-6%) rotate(-16deg)}32%,58%{transform:translate(-26%,14%) rotate(-10deg)}82%,100%{transform:translate(12%,-6%) rotate(-16deg)}}
@keyframes lit{0%,33%{opacity:0}40%,76%{opacity:1}86%,100%{opacity:0}}

/* Say hello */
.contact{display:grid;gap:48px;max-width:680px}
.form{display:grid;gap:22px;border:1px solid var(--line-2);border-radius:24px;background:var(--bg-2);padding:clamp(20px,4vw,34px);align-content:start;box-shadow:0 8px 24px -16px var(--shadow);min-width:0}
.form-h{margin:0;font-family:var(--display);font-weight:800;font-size:1.6rem;line-height:1.15;color:var(--ink);letter-spacing:-.02em}
.form-sub{margin:-12px 0 0;color:var(--ink-3);font-size:.94rem}
.row2{display:grid;gap:22px;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
@media (max-width:520px){.row2{grid-template-columns:minmax(0,1fr)}}
.field{display:grid;gap:4px;min-width:0}
.field label{font-family:var(--mono);font-weight:600;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.field input,.field textarea{width:100%;font:500 1.05rem/1.4 var(--sans);color:var(--ink);background:transparent;border:0;border-bottom:1px solid var(--line);border-radius:0;padding:10px 0;outline:none}
.field textarea{resize:vertical;min-height:84px}
.field input::placeholder,.field textarea::placeholder{color:var(--ink-3);opacity:.7}
.field input:focus,.field textarea:focus{border-bottom-color:var(--brand)}
.form .btn{justify-self:start}
.form-status{margin:0;font-size:.92rem;color:var(--ember);min-height:1.2em;font-weight:500}
.composed{display:grid;gap:14px;border-top:1px solid var(--line-2);padding-top:22px}
.composed .mono{color:var(--brand)}
.composed-msg{margin:0;background:var(--bg-3);border-radius:18px 18px 18px 4px;padding:14px 16px;color:var(--ink);line-height:1.5;font-weight:500}
.hint{margin:0;font-size:.86rem;color:var(--ink-3)}

/* The field of towns: the closing line sits on it, and nothing comes after */
.foot{position:relative;margin-inline:calc(-1 * var(--gutter));padding:clamp(72px,12vw,140px) var(--gutter) clamp(72px,11vw,120px);background:radial-gradient(70% 55% at 50% 8%,rgba(94,150,116,.30),transparent 62%),radial-gradient(60% 50% at 88% 96%,rgba(191,219,190,.12),transparent 70%),linear-gradient(170deg,#12332A 0%,#0E2A22 48%,#091C17 100%);color:var(--field-ink);overflow:hidden}
.foot .field{position:absolute;inset:0;pointer-events:none}
.foot .field svg{position:absolute;inset:0;width:100%;height:100%;opacity:.9}
.foot .field line{stroke:#BFDBBE;stroke-width:.7;opacity:0;animation:wire 9s ease-in-out infinite;animation-delay:var(--d)}
.foot .field circle{fill:#BFDBBE;opacity:0;animation:star 7s ease-in-out infinite;animation-delay:var(--d)}
@keyframes wire{0%,100%{opacity:.05}50%{opacity:.26}}
@keyframes star{0%,100%{opacity:.30}50%{opacity:.85}}
.foot .veil{position:absolute;inset:0;pointer-events:none;background:radial-gradient(58% 48% at 50% 46%,rgba(9,28,23,.86),rgba(9,28,23,.45) 62%,transparent 88%)}
.foot-in{position:relative;z-index:2;max-width:var(--max);margin-inline:auto;display:grid;gap:36px}
.foot-row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:18px}
.foot-row .brand{color:#BFDBBE}
.foot-row .jp{font-family:var(--jp);color:#BFDBBE;font-size:1.4rem;letter-spacing:.1em;text-decoration:none;opacity:.8}
.foot .fine{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 24px;color:var(--field-ink-3);font-size:.86rem}
.foot .fine a{color:var(--field-ink-2);text-decoration:none}
.foot .fine a:hover{color:var(--field-ink)}
.closing{margin:0;font-family:var(--display);font-weight:300;font-size:clamp(1.55rem,5.4vw,2.7rem);line-height:1.3;letter-spacing:-.02em;color:var(--field-ink);max-width:24em;text-wrap:balance}
.closing strong{font-weight:700;color:#BFDBBE}

/* The printed card */
.egg{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:calc(env(safe-area-inset-top,0px) + 20px) 18px calc(env(safe-area-inset-bottom,0px) + 20px);background:rgba(24,61,48,.4);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);animation:egg-in .22s ease-out}
@keyframes egg-in{from{opacity:0}to{opacity:1}}
.egg-card{position:relative;max-width:440px;width:100%;max-height:100%;overflow:auto;background:var(--bg-2);border-radius:24px;padding:clamp(22px,5vw,32px);box-shadow:0 30px 70px -24px rgba(24,61,48,.55);display:grid;gap:16px}
.egg-x{position:absolute;top:12px;right:12px;width:34px;height:34px;border-radius:50%;appearance:none;border:1px solid var(--line-2);background:var(--bg);color:var(--ink-2);font-size:1.1rem;line-height:1;cursor:pointer}
.egg-x:hover{color:var(--ink);border-color:var(--line)}
.egg-h{margin:0;font-family:var(--display);font-weight:800;letter-spacing:-.02em;font-size:clamp(1.5rem,5.6vw,2rem);line-height:1.1;color:var(--brand);padding-right:36px}
.egg p{margin:0;color:var(--ink-2);font-size:.97rem;line-height:1.6}
.egg p strong{color:var(--ink)}
.nfc-card{display:block;width:100%;height:auto;border-radius:18px;box-shadow:0 24px 40px -22px var(--shadow)}
.nfc-card .face{fill:#183D30}
.nfc-card .sheen{fill:url(#cardSheen)}
.nfc-card text{font-family:var(--sans);font-weight:700;fill:#E4F0DD}
.nfc-card .sm{font-family:var(--mono);font-weight:500;font-size:6.5px;letter-spacing:.14em;fill:#9CC6A3}

/* Project pages */
.crumb{display:inline-flex;align-items:center;gap:8px;text-decoration:none;color:var(--ink-3);font-weight:600;font-size:.92rem}
.crumb:hover{color:var(--ink)}
.crumb svg{width:16px;height:16px}
.p-meta{display:flex;flex-wrap:wrap;gap:8px;align-items:center;list-style:none;margin:6px 0 0;padding:0}
.p-meta li{font-family:var(--mono);font-weight:500;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--brand-hi);background:var(--bg-2);border:1px solid var(--line-2);border-radius:999px;padding:6px 11px}
.hero .stage{grid-area:stage;width:min(100%,244px);max-width:none;justify-self:center}
@media (min-width:920px){.hero .stage{width:100%;max-width:440px}}

/* Stats */
.stats{display:grid;gap:14px}
.stats-3{grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));max-width:860px}
.stats-4{grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));max-width:640px}
.stat{margin:0;border:1px solid var(--line-2);border-radius:20px;background:var(--bg-2);padding:22px;display:grid;gap:10px;align-content:start;min-width:0}
.stat-n{margin:0;font-family:var(--display);font-weight:700;font-size:clamp(2.4rem,7vw,3.2rem);line-height:1;letter-spacing:-.03em;color:var(--brand);font-variant-numeric:lining-nums}
.stat-t{margin:0;color:var(--ink);font-size:.98rem;line-height:1.5}
.stat figcaption{font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);line-height:1.5}
.stat sup,.sources sup{font-size:.85em;color:var(--brand)}
.stats-h{margin-top:14px;font-family:var(--mono);font-weight:600;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--brand)}

/* The math: dot grids */
.dots-pair{display:grid;gap:36px;max-width:640px}
.dots-fig{margin:0;display:grid;gap:14px}
.dots-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 16px}
.dots-head .big{font-family:var(--display);font-weight:800;font-size:clamp(1.9rem,5vw,2.6rem);line-height:1;font-variant-numeric:lining-nums tabular-nums;color:var(--ink);letter-spacing:-.03em}
.dots-head .pct{font-family:var(--mono);font-size:.78rem;color:var(--ember);letter-spacing:.06em}
.dots svg{display:block;width:100%;height:auto}
.dots circle{fill:var(--dot)}
.dots circle.bad{fill:var(--ember)}
.dots-fig figcaption{color:var(--ink-2);font-size:.95rem;max-width:34em;font-weight:500}

/* How many do you need: room builder */
.room{border:1px solid var(--line-2);border-radius:24px;background:var(--bg-2);padding:clamp(20px,4vw,32px);display:grid;gap:20px;max-width:720px;box-shadow:0 8px 24px -18px var(--shadow)}
.room label{color:var(--ink-2);font-weight:600}
.room-read{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px}
.room-read .num{font-family:var(--display);font-weight:800;font-size:clamp(3rem,10vw,4.4rem);line-height:1;font-variant-numeric:lining-nums tabular-nums;color:var(--brand);min-width:1.6ch;letter-spacing:-.03em}
.room-read .txt{color:var(--ink);font-size:1.05rem;font-weight:500}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:28px;background:transparent;margin:0;cursor:pointer;--pct:37.5%}
input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:99px;background:linear-gradient(to right,var(--brand) 0 var(--pct),var(--bg-3) var(--pct) 100%)}
input[type=range]::-moz-range-track{height:4px;border-radius:99px;background:var(--bg-3)}
input[type=range]::-moz-range-progress{height:4px;border-radius:99px;background:var(--brand)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;margin-top:-10px;border-radius:50%;background:var(--brand);border:4px solid var(--bg-2);box-shadow:0 0 0 1px var(--line)}
input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--brand);border:4px solid var(--bg-2);box-shadow:0 0 0 1px var(--line)}
.floor{display:grid;grid-template-columns:repeat(auto-fill,minmax(30px,1fr));gap:9px}
.t{aspect-ratio:1/1;border:1px solid var(--line);border-radius:7px;display:grid;place-items:center;background:var(--bg)}
.t i{width:6px;height:6px;border-radius:50%;background:var(--brand);box-shadow:0 0 0 4px var(--brand-lo)}
.t.new{animation:pop .35s ease-out}
@keyframes pop{from{transform:scale(.6);opacity:0}to{transform:none;opacity:1}}
.room-inc{margin:0;color:var(--ink-3);font-size:.92rem;font-weight:500}
.traits{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.traits li{font-family:var(--mono);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);border:1px solid var(--line);background:var(--bg-2);border-radius:99px;padding:8px 14px;font-weight:500}
.spec{font-size:.92rem;color:var(--ink-3);max-width:36em;margin:0}

/* Steps */
.steps{list-style:none;margin:0;padding:0;display:grid;gap:0;max-width:720px}
.steps li{display:grid;grid-template-columns:64px minmax(0,1fr);gap:8px 18px;padding-block:26px;border-top:1px solid var(--line-2)}
.steps li:last-child{border-bottom:1px solid var(--line-2)}
.steps .rn{font-family:var(--display);font-weight:800;font-size:1.7rem;line-height:1.1;color:var(--brand);letter-spacing:-.03em}
.steps p{margin:8px 0 0;color:var(--ink-2)}

/* FAQ */
.faq{display:grid;max-width:720px}
.faq details{border-top:1px solid var(--line-2)}
.faq details:last-child{border-bottom:1px solid var(--line-2)}
.faq summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:minmax(0,1fr) 24px;gap:16px;align-items:center;padding-block:22px;font-weight:700;font-size:1.06rem;color:var(--ink);letter-spacing:-.01em}
.faq summary::-webkit-details-marker{display:none}
.faq summary .pm{width:24px;height:24px;position:relative}
.faq summary .pm::before,.faq summary .pm::after{content:"";position:absolute;left:50%;top:50%;width:14px;height:1.5px;background:var(--brand);transform:translate(-50%,-50%);transition:transform .25s}
.faq summary .pm::after{transform:translate(-50%,-50%) rotate(90deg)}
.faq details[open] summary .pm::after{transform:translate(-50%,-50%) rotate(0deg)}
.faq details p{margin:0 0 24px;color:var(--ink-2);max-width:40em}
.sources{display:grid;gap:10px;padding-block:6px}
.sources .mono{color:var(--ink-3)}
.sources ol{margin:0;padding-left:20px;display:grid;gap:8px;color:var(--ink-3);font-size:.85rem;line-height:1.5}
.sources a{color:var(--ink-2);text-underline-offset:3px}
.sources a:hover{color:var(--ink)}

/* Phone-first tuning (iPhone 17 Pro is 402pt wide) */
@media (max-width:600px){
  .hero h1{font-size:clamp(2.5rem,12vw,3.6rem)}
  .sec{padding-block:52px}
  .sec.tight{padding-block:40px}
  .sec-body{gap:24px}
  .steps li{grid-template-columns:44px minmax(0,1fr);gap:6px 12px;padding-block:22px}
  .stats-4{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .stats-4 .stat{padding:16px;gap:8px;border-radius:16px}
  .stats-4 .stat-n{font-size:1.7rem}
  .stats-4 .stat-t{font-size:.88rem;line-height:1.4}
  .stats-3 .stat{padding:18px}
  .card .body{padding:18px 18px 20px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .phone{animation:none;transform:translate(-26%,14%) rotate(-10deg)}
  .lit{animation:none;opacity:1}
  .ripples span{animation:none}
  .ripples span:first-child{opacity:.35;transform:scale(1.2)}
  .hero-shot .seal{animation:none}
  .t.new,.tools li{animation:none}
  .pager-pane{animation:none}
  .web .q-ring{animation:none;opacity:.5;transform:scale(1.6)}
  .web .cloud{animation:none;opacity:.7}
  .cups .fill{animation:none;transform:scaleY(1)}
  .cups .drip{animation:none;opacity:0}
  .foot .field line{animation:none;opacity:.18}.foot .field circle{animation:none;opacity:.6}
  .card,.card:hover{transform:none}
  .egg,.gloss{animation:none}
  .say-btn.playing svg path+path,.gloss-btn.playing svg path+path{animation:none}
}