/* TERA WORKS — ONE SYSTEM. DIFFERENT MACHINES.
   Single stylesheet for HOME / WORKS / NT東京 / Privacy / project pages.
   OM-1 keeps its own stack (style.css → machines.css). */

:root{
  --bg:#121313;
  --bg-2:#191a1a;
  --bg-3:#202120;
  --ink:#efede6;
  --ink-2:#cfccc3;
  --muted:#9d9f97;
  --dim:#6c6e68;
  --line:#2b2d2b;
  --line-2:#3e403c;
  --red:#f0644d;
  --tone:var(--red);
  --gb:clamp(16px,3.6vw,52px);
  --g:max(var(--gb),calc((100vw - 1360px)/2));
  --head:60px;
  --sans:"Helvetica Neue",Arial,"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic UI","Yu Gothic",Meiryo,sans-serif;
  --display:"Helvetica Neue","Arial Nova",Arial,"Hiragino Sans","Yu Gothic UI","Yu Gothic",sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --ease:cubic-bezier(.2,.8,.2,1);
  --snap:cubic-bezier(.7,0,.2,1);
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--head) + 16px)}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.85;-webkit-font-smoothing:antialiased;overflow-wrap:anywhere;font-feature-settings:"palt" 0}
img{display:block;max-width:100%;height:auto}
picture{display:contents}
a{color:inherit;text-decoration:none}
p{margin:0}
h1,h2,h3{margin:0;font-weight:700;text-wrap:balance;word-break:keep-all;overflow-wrap:anywhere}
ul,ol,dl,dd,figure{margin:0;padding:0}
ul,ol{list-style:none}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--red);outline-offset:3px}
::selection{background:var(--red);color:#111}
[hidden]{display:none!important}

.skip{position:absolute;left:-999px;top:8px;z-index:50;background:var(--ink);color:var(--bg);padding:10px 16px}
.skip:focus{left:8px}
.mono,.lbl{font-family:var(--mono);font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;line-height:1.5}
.lbl{color:var(--muted)}
.red-line{display:inline-block;width:28px;height:2px;background:var(--red);vertical-align:middle;margin-right:12px}
.mobile-only{display:none}

/* ─── header ─────────────────────────────────────────── */
.hd{position:sticky;top:0;z-index:20;height:var(--head);display:flex;align-items:center;justify-content:space-between;gap:24px;padding:0 var(--g);background:#121313e6;border-bottom:1px solid var(--line);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);transition:border-color .3s}
.hd.is-scrolled{border-color:var(--line-2)}
.brand{display:flex;align-items:center;gap:12px;font-size:.875rem;font-weight:800;letter-spacing:.075em;min-height:44px}
.brand-mark{display:flex;align-items:center;border:1px solid var(--ink);color:var(--ink);font-size:17px;font-weight:800;line-height:1;width:35px;height:35px;padding:6px;letter-spacing:-.13em}
.brand-mark span{align-self:flex-end}
.nav{display:flex;gap:4px 26px;flex-wrap:wrap;justify-content:flex-end}
.nav a{position:relative;display:inline-flex;align-items:center;min-height:44px;font-size:.75rem;font-weight:650;letter-spacing:.12em;color:var(--muted);transition:color .2s}
.nav a:hover,.nav a[aria-current]{color:var(--ink)}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:8px;height:2px;background:var(--red);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.nav a:hover::after,.nav a[aria-current]::after{transform:scaleX(1)}

/* ─── footer ─────────────────────────────────────────── */
.ft{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;padding:40px var(--g) 48px;border-top:1px solid var(--line);margin-top:120px;font-size:.8125rem;color:var(--muted)}
.ft-brand{font-weight:800;letter-spacing:.1em;color:var(--ink);justify-self:start}
.ft-links{display:flex;gap:22px;justify-self:end;flex-wrap:wrap}
.ft-links a{min-height:44px;display:inline-flex;align-items:center}
.ft a:hover{color:var(--ink)}

/* ─── shared pieces ──────────────────────────────────── */
.wrap{padding-inline:var(--g)}
.btn{display:inline-flex;align-items:center;gap:14px;min-height:52px;padding:0 26px;border:1px solid var(--ink);font-size:.875rem;font-weight:700;letter-spacing:.04em;transition:background .25s,color .25s}
.btn:hover{background:var(--ink);color:var(--bg)}
.btn--solid{background:var(--ink);color:var(--bg)}
.btn--solid:hover{background:var(--red);border-color:var(--red);color:#111}
.tlink{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-weight:700;border-bottom:1px solid var(--line-2);transition:border-color .2s,color .2s}
.tlink:hover{border-color:var(--red);color:var(--ink)}
.arrow{display:inline-block;transition:transform .35s var(--ease)}
a:hover .arrow{transform:translate(3px,-3px)}

/* photo “plate”: studio photos sit on their own light field, no frames */
.plate{position:relative;background:var(--plate-bg,var(--plate,#c4c4c6));background-color:var(--plate,#c4c4c6);overflow:hidden}
.plate img{width:100%;height:100%;object-fit:contain}
.plate.is-wide img{-webkit-mask-image:linear-gradient(to bottom,transparent,#000 3%,#000 97%,transparent);mask-image:linear-gradient(to bottom,transparent,#000 3%,#000 97%,transparent)}
.plate.is-cover img{object-fit:cover;object-position:var(--pos,center)}
.plate.is-tall img{-webkit-mask-image:linear-gradient(to right,transparent,#000 3%,#000 97%,transparent);mask-image:linear-gradient(to right,transparent,#000 3%,#000 97%,transparent)}
.photo-frame.image-missing,.plate .photo-fallback{display:grid;place-items:center;gap:6px;padding:24px;background:var(--bg-3);color:var(--muted);font-size:.8125rem;text-align:center;min-height:200px}

/* reveal (only when JS is running and motion is allowed) */
.js [data-reveal]{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.js [data-reveal].is-in{opacity:1;transform:none}
.js [data-reveal="clip"]{opacity:1;transform:none;clip-path:inset(0 0 100% 0);transition:clip-path 1.1s var(--snap)}
.js [data-reveal="clip"].is-in{clip-path:inset(0 0 0 0)}

/* ═══ PROJECT PAGES ═════════════════════════════════════ */
.ph{position:relative;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;padding:28px var(--g) 0;isolation:isolate}
.crumb{grid-column:1/-1;display:flex;gap:10px;flex-wrap:wrap;font-size:.8125rem;color:var(--muted);margin-bottom:56px}
.crumb a{border-bottom:1px solid transparent}
.crumb a:hover{color:var(--ink);border-color:var(--red)}
.ph-kind{grid-column:1/-1;display:flex;align-items:center;flex-wrap:wrap;gap:6px 0;font-family:var(--mono);font-size:.6875rem;letter-spacing:.14em;color:var(--muted);text-transform:uppercase}
.ph-kind .idx{margin-left:auto;color:var(--dim)}
.ph-title{grid-column:1/-1;position:relative;z-index:3;font-family:var(--display);font-size:var(--h1,clamp(3.2rem,7.2vw,6.6rem));line-height:.86;letter-spacing:-.065em;margin:28px 0 0;color:var(--ink);mix-blend-mode:difference;pointer-events:none}
.ph-title em{font-style:normal;color:var(--tone)}
.ph-title.jp{letter-spacing:-.04em;line-height:1.02;font-family:var(--sans)}
.ph-catch{font-size:clamp(1rem,1.3vw,1.2rem);font-weight:700;line-height:1.75;letter-spacing:.02em}
.ph-stats{display:flex;flex-wrap:wrap;gap:22px 40px;margin-top:36px}
.stat{display:grid;gap:6px;min-width:5ch}
.stat strong{font-family:var(--display);font-size:clamp(2.2rem,3.2vw,3.2rem);line-height:.85;letter-spacing:-.06em;color:var(--ink);white-space:nowrap}
.stat--long strong{font-size:clamp(1.8rem,2.3vw,2.4rem)}
.stat strong i{font-style:normal;color:var(--tone)}
.stat small{font-family:var(--mono);font-size:.625rem;letter-spacing:.14em;color:var(--muted);text-transform:uppercase;line-height:1.5}
.ph-photo{position:relative;z-index:1}
.ph-photo a{display:block;cursor:zoom-in}
.ph-photo figcaption{display:flex;justify-content:space-between;gap:12px;padding:12px 0 0;font-family:var(--mono);font-size:.625rem;letter-spacing:.12em;color:var(--dim);text-transform:uppercase}

/* wide hero: title crosses a photo that bleeds off the right edge */
.ph--wide .ph-photo{grid-column:5/-1;grid-row:4/span 2;margin-right:calc(var(--gb)*-1);margin-top:calc(var(--h1,clamp(3.2rem,7.2vw,6.6rem))*-.42)}
.ph--wide .ph-photo .plate{aspect-ratio:var(--ar,4/3);max-height:min(68svh,640px)}
.ph--wide .ph-photo figcaption{padding-right:var(--g)}
.ph--wide .ph-side{grid-column:1/5;grid-row:5;align-self:end;padding-bottom:44px;position:relative;z-index:2}
.ph--wide .ph-title{grid-row:3}
.ph--wide .ph-title em{color:inherit}
.ph--tall .ph-title,.ph--type .ph-title{mix-blend-mode:normal}

/* tall hero: split. photo runs from the header to the fold */
.ph--tall{min-height:min(calc(100svh - var(--head)),760px);padding-bottom:0}
.ph--tall .crumb,.ph--tall .ph-kind,.ph--tall .ph-title,.ph--tall .ph-side{grid-column:1/8}
.ph--tall .ph-title{grid-column:1/8;align-self:start}
.ph--tall .ph-side{grid-row:4;align-self:end;padding:48px 0 56px}
.ph--tall .ph-photo{grid-column:8/12;grid-row:1/span 4;margin:-28px calc(var(--gb)*-1) 0 0;align-self:stretch}
.ph--tall .ph-photo{display:flex;flex-direction:column}
.ph--tall .ph-photo a{flex:1;display:flex;flex-direction:column}
.ph--tall .ph-photo .plate{flex:1;height:100%;min-height:520px;max-height:760px}
.ph--tall .ph-photo .plate img{object-fit:cover;object-position:var(--pos,center)}
.ph--tall .ph-photo .plate.is-tall img{-webkit-mask-image:none;mask-image:none}
.ph--tall .ph-photo figcaption{position:absolute;left:16px;right:16px;bottom:14px;color:#3a3a38}
.ph--tall .ph-kind{grid-row:2}
.ph--tall .ph-title{grid-row:3}

/* type hero: no photo (DIN → USB) */
.ph--type{padding-bottom:40px}
.ph--type .ph-side{grid-column:1/6;margin-top:48px}
.ph--type .ph-diagram{grid-column:7/-1;margin-top:48px}

/* project info strip */
.info{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;margin:72px var(--g) 0;padding:28px 0;border-top:1px solid var(--ink);border-bottom:1px solid var(--line)}
.info .lbl{grid-column:1/3;padding-top:4px}
.info dl{grid-column:3/-1;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:20px 28px}
.info dt{font-family:var(--mono);font-size:.625rem;letter-spacing:.14em;color:var(--dim);margin-bottom:6px}
.info dd{font-size:.9375rem;line-height:1.6;font-weight:600}

/* in-page index */
.toc{position:sticky;top:var(--head);z-index:10;display:flex;flex-wrap:wrap;gap:0 4px;padding:0 var(--g);background:#121313f0;border-bottom:1px solid var(--line);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.toc a{display:inline-flex;align-items:center;gap:8px;min-height:46px;padding:0 12px;font-size:.8125rem;color:var(--muted);position:relative;transition:color .2s}
.toc a:first-child{padding-left:0}
.toc a span{font-family:var(--mono);font-size:.625rem;color:var(--dim)}
.toc a:hover,.toc a.is-current{color:var(--ink)}
.toc a.is-current::after{content:"";position:absolute;left:12px;right:12px;bottom:-1px;height:2px;background:var(--red)}
.toc a:first-child.is-current::after{left:0}

/* giant statement — the OM-1 move, per machine */
.statement{padding:clamp(72px,9vw,140px) var(--g) clamp(64px,7vw,110px);border-bottom:1px solid var(--line);overflow:hidden}
.st-big{font-family:var(--display);font-weight:700;font-size:var(--st,clamp(3rem,8vw,8.2rem));line-height:.86;letter-spacing:-.07em}
.st-big span{display:block}
.st-big em{display:block;font-style:normal;color:var(--muted);padding-left:var(--indent,18%)}
.st-big em b{font-weight:inherit;background:linear-gradient(var(--tone),var(--tone)) 0 92%/100% .07em no-repeat;padding-bottom:.04em}
.st-sub{display:flex;align-items:center;gap:14px;margin:36px 0 0 var(--indent,18%);font-size:clamp(.95rem,1.1vw,1.0625rem);color:var(--ink-2);font-weight:600}
.st-sub::before{content:"";width:36px;height:2px;background:var(--tone);flex:none}
.statement.jp .st-big{font-family:var(--sans);letter-spacing:-.04em;line-height:1.05;font-size:var(--st,clamp(2.6rem,6vw,6.2rem))}

/* reading sections */
.sec{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;padding:clamp(48px,5vw,80px) var(--g);border-bottom:1px solid var(--line)}
.sec-h{grid-column:1/5;align-self:start;position:sticky;top:calc(var(--head) + 72px)}
.sec-h h2{font-size:clamp(1.35rem,1.8vw,1.75rem);line-height:1.38;letter-spacing:.01em;margin-top:18px;max-width:12em}
.sec-b{grid-column:6/-1;max-width:760px}
.sec-b>p,.sec-b>.prose p{color:var(--ink-2);font-size:clamp(1rem,1.1vw,1.0625rem);line-height:2.05}
.sec-b>p+p{margin-top:1.3em}
.sec-b>*+.flow,.sec-b>*+.ledger,.sec-b>*+.steps,.sec-b>*+.feats,.sec-b>.flow+p,.sec-b>.ledger+p,.sec-b>.steps+p,.sec-b>.pair+p,.sec-b>.disc+p{margin-top:48px}
.sec-b .tlink{margin-top:8px}
.sec--wide .sec-b{grid-column:1/-1;max-width:none;margin-top:40px}
.sec--wide .sec-h{grid-column:1/-1;position:static;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:16px 40px}
.sec--wide .sec-h>.lbl{flex-basis:100%}
.sec--wide .sec-h>.lbl+h2{margin-top:0}
.sec--wide .sec-h h2{max-width:none}
.sec--wide .sec-h .lede{max-width:34em;color:var(--ink-2);font-size:.9375rem}
.sec--wide .sec-h .lede+.lede{margin-top:6px}
.sec-h .lede-group{max-width:40em}

/* feature list */
.feats{counter-reset:f;border-top:1px solid var(--line-2)}
.feats li{counter-increment:f;display:grid;grid-template-columns:56px 1fr;gap:16px;padding:18px 0;border-bottom:1px solid var(--line);font-size:1rem;font-weight:600}
.feats li::before{content:counter(f,decimal-leading-zero);font-family:var(--mono);font-size:.6875rem;color:var(--tone);padding-top:5px}

/* signal / operation flow */
.flow{display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));border:1px solid var(--line-2);counter-reset:flow}
.flow li{counter-increment:flow;position:relative;display:grid;align-content:space-between;gap:22px;padding:20px 20px 18px;min-height:128px;border-right:1px solid var(--line-2);font-size:.8125rem;color:var(--muted)}
.flow li:last-child{border-right:0}
.flow li::before{content:counter(flow,decimal-leading-zero);font-family:var(--mono);font-size:.625rem;letter-spacing:.14em;color:var(--dim)}
.flow li:not(:last-child)::after{content:"→";position:absolute;right:-.65em;top:50%;transform:translateY(-50%);z-index:1;background:var(--bg);color:var(--tone);font-family:var(--mono);font-size:1.1rem;line-height:1;padding:4px 0}
.flow strong{display:block;font-family:var(--display);font-size:clamp(1.1rem,1.4vw,1.4rem);line-height:1.1;letter-spacing:-.02em;color:var(--ink);margin-bottom:6px}
.flow a{display:block}
.flow a:hover strong{color:var(--tone)}
.flow li.is-here{background:var(--bg-2)}
.flow-wide{grid-column:1/-1}

/* ledger: big codes + meaning */
.ledger{border-top:1px solid var(--line-2)}
.ledger>div{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:24px;align-items:end;padding:26px 0 22px;border-bottom:1px solid var(--line)}
.ledger dt{display:grid;gap:10px}
.ledger dt .lbl{color:var(--dim)}
.ledger dt strong{font-family:var(--display);font-size:clamp(2.6rem,4.2vw,4rem);line-height:.82;letter-spacing:-.06em}
.ledger dd{font-weight:700;font-size:1.0625rem;line-height:1.5}
.ledger dd span{display:block;font-weight:400;font-size:.875rem;color:var(--muted);margin-top:4px}

/* process steps */
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-top:1px solid var(--line-2)}
.steps li{padding:22px 22px 26px 0;border-right:1px solid var(--line);display:grid;gap:12px;align-content:start}
.steps li+li{padding-left:22px}
.steps li:last-child{border-right:0}
.steps strong{font-size:1.125rem;line-height:1.4}
.steps li>span:last-child{font-size:.8125rem;color:var(--muted)}

/* disclosure (controls) */
.disc{border-top:1px solid var(--line-2)}
.disc details{border-bottom:1px solid var(--line)}
.disc summary{display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:center;gap:18px;min-height:76px;padding:12px 0;cursor:pointer;list-style:none}
.disc summary::-webkit-details-marker{display:none}
.disc summary .n{font-family:var(--mono);font-size:.6875rem;color:var(--tone)}
.disc summary strong{font-family:var(--display);font-size:clamp(1.2rem,1.6vw,1.6rem);line-height:1.1;letter-spacing:-.02em}
.disc summary small{display:block;font-family:var(--mono);font-size:.625rem;letter-spacing:.14em;color:var(--muted);margin-top:6px;text-transform:uppercase}
.disc summary .pm{font-family:var(--mono);font-size:1.25rem;color:var(--muted);transition:transform .35s var(--ease)}
.disc details[open] .pm{transform:rotate(45deg);color:var(--ink)}
.disc details p{padding:0 0 26px 62px;color:var(--ink-2);max-width:40em}

/* A / E pair (guitar) and the 3-part studies */
.pair{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line-2)}
.pair section{padding:28px 26px 30px;display:grid;gap:10px;align-content:start}
.pair section+section{border-left:1px solid var(--line-2);background:var(--bg-2)}
.pair .big{font-family:var(--display);font-size:clamp(4rem,6.2vw,6rem);line-height:.8;letter-spacing:-.06em;margin:10px 0 14px}
.pair section+section .big{color:var(--tone)}
.pair h3{font-size:1.25rem}
.pair p{color:var(--ink-2);font-size:.9375rem}
.triad{display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));gap:0}
.triad article{position:relative;padding:30px 28px 34px 0;border-top:2px solid var(--ink);display:grid;gap:14px;align-content:start}
.triad article+article{padding-left:28px;border-left:1px solid var(--line)}
.triad .no{font-family:var(--display);font-size:clamp(2.8rem,4.2vw,4rem);line-height:.8;letter-spacing:-.06em;color:var(--tone)}
.triad h3{font-size:clamp(1.1rem,1.4vw,1.3rem);line-height:1.4}
.triad p{color:var(--ink-2);font-size:.9375rem;line-height:1.95}
.triad .lbl{margin-top:4px}

/* outputs matrix (shoulder) */
.matrix{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:2px solid var(--ink)}
.matrix>div{padding:22px 20px 24px 0;display:grid;gap:14px}
.matrix>div+div{padding-left:20px;border-left:1px solid var(--line)}
.matrix dt{font-family:var(--display);font-size:clamp(1.6rem,2.3vw,2.2rem);line-height:.9;letter-spacing:-.04em}
.matrix dd strong{display:block;font-size:.9375rem}
.matrix dd span{font-size:.8125rem;color:var(--muted)}

/* specs */
.specs{border-top:2px solid var(--ink)}
.specs>div{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr);gap:24px;padding:17px 0;border-bottom:1px solid var(--line)}
.specs dt{color:var(--muted);font-size:.875rem}
.specs dd{font-weight:650;font-size:.9375rem}

/* related */
.related a{display:grid;gap:10px;padding:26px 0;border-top:2px solid var(--ink);border-bottom:1px solid var(--line)}
.related strong{font-family:var(--display);font-size:clamp(1.6rem,2.4vw,2.3rem);line-height:1;letter-spacing:-.04em}
.related a:hover strong{color:var(--tone)}
.related span:last-child{color:var(--muted);font-size:.875rem}
.kit{display:inline-flex;align-items:center;gap:14px;margin-top:28px;padding:10px 16px 10px 10px;border:1px solid var(--tone);font-weight:700;font-size:.9375rem}
.kit span{background:var(--tone);color:#111;font-family:var(--mono);font-size:.625rem;letter-spacing:.14em;padding:4px 8px}

/* galleries */
.gallery{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:56px 24px;align-items:end}
.gallery figure{grid-column:span 6}
.gallery figure.g-lead{grid-column:1/9}
.gallery figure.g-side{grid-column:9/-1}
.gallery figure.g-full{grid-column:1/-1}
.gallery figure.g-mid{grid-column:3/11}
.gallery figure.g-narrow{grid-column:7/12}
.gallery figure.g-quarter{grid-column:span 3}
.gallery.screens{align-items:start;row-gap:28px}
.gallery.screens figcaption{font-size:.8125rem;line-height:1.7}
.gallery a{display:block;cursor:zoom-in;overflow:hidden;background:var(--bg-2)}
.gallery a img{width:100%;transition:transform 1.2s var(--ease)}
.gallery a:hover img{transform:scale(1.025)}
.gallery figcaption{display:flex;justify-content:space-between;gap:16px;margin-top:14px;font-size:.8125rem;color:var(--muted)}
.gallery figcaption strong{color:var(--ink);font-family:var(--mono);font-size:.6875rem;letter-spacing:.12em;margin-right:12px}
.gallery figcaption .mono{color:var(--dim);font-size:.625rem;white-space:nowrap}
.gallery .zoom{position:absolute}
.note{margin-top:20px;font-size:.8125rem;color:var(--muted);line-height:1.8}

/* video (template, shown only when a URL is set) */
.video-frame{position:relative;aspect-ratio:16/9;background:var(--bg-2)}
.video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* next project */
.next{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;margin:0 var(--g);padding-top:72px}
.next-link{grid-column:1/-1;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:end;padding:28px 0 36px;border-top:2px solid var(--ink);border-bottom:1px solid var(--line);position:relative;overflow:hidden}
.next-link .lbl{grid-column:1/-1;margin-bottom:28px;display:flex;justify-content:space-between}
.next-link strong{grid-column:1/10;font-family:var(--display);font-size:clamp(2.4rem,5.4vw,5.4rem);line-height:.88;letter-spacing:-.065em;transition:color .3s,transform .6s var(--ease)}
.next-link .plate{grid-column:10/13;max-width:300px;justify-self:end;width:100%;aspect-ratio:4/3;transition:transform .8s var(--ease)}
.next-link:hover strong{color:var(--tone);transform:translateX(12px)}
.next-link:hover .plate{transform:scale(1.03)}
.next-back{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:12px 32px;padding-top:24px}

/* ═══ HOME ═════════════════════════════════════════════ */
.hero{position:relative;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;min-height:min(calc(100svh - var(--head)),820px);padding:28px var(--g) 40px;isolation:isolate;overflow:hidden}
.hero-top{grid-column:1/-1;grid-row:1;display:flex;justify-content:space-between;align-items:center;gap:16px;position:relative;z-index:3}
.hero-word{grid-column:1/-1;grid-row:2;position:relative;z-index:3;font-family:var(--display);font-size:clamp(4rem,12.4vw,14.6rem);line-height:.8;letter-spacing:-.075em;margin:clamp(24px,4vw,56px) 0 0 -.04em;mix-blend-mode:difference;pointer-events:none;white-space:nowrap}
.hero-word span{display:inline-block}
.lineup{grid-column:1/-1;grid-row:3;display:flex;gap:10px;align-items:flex-end;margin-top:clamp(-72px,-4.4vw,-26px);position:relative;z-index:1}
.lineup a{flex:var(--r) 1 0;min-width:0;display:block}
.lineup .plate{aspect-ratio:var(--ar)}
.lineup .plate img{transition:transform 1.2s var(--ease)}
.lineup a:hover .plate img{transform:scale(1.03)}
.lineup span{display:flex;gap:10px;padding-top:12px;font-size:.8125rem;color:var(--muted);transition:color .2s}
.lineup span b{font-family:var(--mono);font-weight:400;font-size:.6875rem;color:var(--red);padding-top:2px}
.lineup a:hover span{color:var(--ink)}
.hero-anno{grid-column:9/-1;grid-row:4;justify-self:end;text-align:right;align-self:end;font-family:var(--mono);font-size:.625rem;letter-spacing:.14em;color:var(--dim);line-height:1.8;padding-bottom:4px}
.hero-anno span{color:var(--red)}
.hero-copy{grid-column:1/8;grid-row:4;position:relative;z-index:2;padding-top:56px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 40px;align-items:end}
.hero-copy .hero-actions{grid-column:1/-1}
.override{font-family:var(--mono);font-size:.6875rem;letter-spacing:.14em;color:var(--muted)}
.override s{color:var(--dim);text-decoration-color:var(--red);text-decoration-thickness:2px}
.override b{color:var(--red);font-weight:400;margin-left:8px}
.hero-catch{font-size:clamp(1.2rem,1.6vw,1.6rem);line-height:1.6;font-weight:700;letter-spacing:.01em}
.hero-desc{margin-top:18px;color:var(--ink-2);font-size:.9375rem;max-width:26em}
.hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;margin-top:30px}
.blk{padding:clamp(64px,7vw,110px) var(--g) 0}
.blk-h{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:end;padding-bottom:28px;border-bottom:2px solid var(--ink)}
.blk-h .lbl{grid-column:1/-1;margin-bottom:22px;display:flex;justify-content:space-between}
.blk-h h2{grid-column:1/9;font-size:clamp(1.8rem,3vw,3rem);line-height:1.12;letter-spacing:-.01em}
.blk-h .side{grid-column:9/-1;justify-self:end;color:var(--muted);font-size:.875rem;text-align:right}

/* featured machines — each one gets its own composition */
.feat{position:relative;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;padding:clamp(48px,5vw,80px) 0;border-bottom:1px solid var(--line)}
.feat-media{position:relative}
.feat-media .plate{transition:transform 1.2s var(--ease)}
.feat:hover .feat-media .plate img{transform:scale(1.02)}
.feat-media .plate img{transition:transform 1.4s var(--ease)}
.feat-text{display:flex;flex-direction:column;gap:18px;align-self:end}
.feat-text .lbl{display:flex;gap:16px}
.feat-text .lbl b{color:var(--tone);font-weight:400}
.feat h3{font-family:var(--display);font-size:clamp(2rem,3vw,3rem);line-height:.92;letter-spacing:-.05em}
.feat h3 a::after{content:"";position:absolute;inset:0;z-index:4}
.feat-mega{font-family:var(--display);font-weight:700;font-size:clamp(3.4rem,6.6vw,6.8rem);line-height:.82;letter-spacing:-.075em;color:var(--ink)}
.feat-mega s{text-decoration-color:var(--red);text-decoration-thickness:.08em;color:var(--muted)}
.feat-mega small{display:block;font-family:var(--mono);font-size:.6875rem;letter-spacing:.14em;color:var(--muted);margin-top:18px;line-height:1.6}
.feat-copy{font-size:clamp(1rem,1.2vw,1.15rem);font-weight:700;line-height:1.7}
.feat-desc{color:var(--ink-2);font-size:.9375rem;max-width:30em}
.feat-more{display:inline-flex;gap:10px;align-items:center;font-weight:700;font-size:.875rem;margin-top:6px;padding-bottom:4px;border-bottom:1px solid var(--line-2);align-self:flex-start;transition:border-color .2s}
.feat:hover .feat-more{border-color:var(--red)}
.feat:hover h3{color:var(--tone)}
.feat .areas{font-family:var(--mono);font-size:.625rem;letter-spacing:.14em;color:var(--dim);text-transform:uppercase}
/* 01 bass: long object, long frame */
.feat--a .feat-media{grid-column:1/8;margin-left:calc(var(--gb)*-1)}
.feat--a .feat-media .plate{aspect-ratio:4/3}
.feat--a .feat-text{grid-column:9/-1}
.feat .feat-media .plate{max-height:620px}
/* 02 shoulder: words first, the instrument stands */
.feat--b .feat-text{grid-column:1/7;grid-row:1;align-self:center}
.feat--b .feat-media{grid-column:8/11;grid-row:1}
.feat--b .feat-media .plate{aspect-ratio:2/3}
/* 03 om-1: one switch */
.feat--c .feat-media{grid-column:2/6;grid-row:1}
.feat--c .feat-media .plate{aspect-ratio:3/4}
.feat--c .feat-text{grid-column:7/-1;grid-row:1}
.feat--c .inset{position:absolute;right:-9%;bottom:-6%;width:30%;border:6px solid var(--bg);box-shadow:0 30px 60px #0008;z-index:2}
.feat--c .inset img{width:100%}
/* 04 synth: the number */
.feat--d .feat-text{grid-column:1/6;grid-row:1}
.feat--d .feat-media{grid-column:6/12;grid-row:1}
.feat--d .feat-media .plate{aspect-ratio:4/3}
.feat--d .feat-mega{font-size:clamp(6rem,13vw,13rem);color:var(--tone)}

/* index list with cursor preview */
.index{position:relative}
.index ol{border-top:0}
.index li a{display:grid;grid-template-columns:70px minmax(0,1fr) minmax(0,.9fr) 90px 40px;align-items:center;gap:20px;min-height:64px;padding:10px 0;border-bottom:1px solid var(--line);transition:color .25s,padding .5s var(--ease)}
.index li a:hover{padding-left:14px;color:var(--ink)}
.index .no{font-family:var(--mono);font-size:.6875rem;color:var(--dim)}
.index .nm{font-family:var(--display);font-weight:700;font-size:clamp(1.2rem,1.8vw,1.75rem);letter-spacing:-.035em;line-height:1.1}
.index .ct{font-size:.8125rem;color:var(--muted)}
.index .yr{font-family:var(--mono);font-size:.75rem;color:var(--muted)}
.index .ar{justify-self:end;color:var(--muted)}
.index li a:hover .nm{color:var(--tone,var(--red))}
.index li a:hover .ar{color:var(--red)}
.peek{position:fixed;left:0;top:0;width:min(300px,24vw);aspect-ratio:4/3;pointer-events:none;z-index:15;opacity:0;transform:translate3d(-999px,0,0);transition:opacity .25s}
.peek.is-on{opacity:1}
.peek img{width:100%;height:100%;object-fit:cover}

.home-2col{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;padding-top:44px}
.home-2col>.l{grid-column:1/5}
.home-2col>.r{grid-column:6/-1}
.attitude{font-family:var(--sans);font-size:clamp(2rem,3.2vw,3.3rem);line-height:1.12;letter-spacing:-.03em;font-weight:800}
.attitude span{color:var(--muted)}
.attitude b,.attitude span{white-space:nowrap;font-weight:inherit}
.lead{font-size:clamp(1.05rem,1.3vw,1.2rem);font-weight:700;line-height:1.7}
.prose p{color:var(--ink-2);line-height:2.05}
.prose p+p{margin-top:1.2em}
.approach{margin-top:56px;border-top:1px solid var(--line-2)}
.approach a{display:grid;grid-template-columns:200px minmax(0,1fr) auto;gap:20px;align-items:center;min-height:84px;padding:14px 0;border-bottom:1px solid var(--line)}
.approach .mono{color:var(--muted)}
.approach strong{font-size:clamp(1rem,1.4vw,1.25rem)}
.approach span:last-child{font-size:.8125rem;color:var(--muted);white-space:nowrap}
.approach a:hover strong{color:var(--red)}
.activity article{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.6fr);gap:12px 24px;padding:26px 0;border-bottom:1px solid var(--line)}
.activity article:first-child{border-top:1px solid var(--line-2)}
.activity h3{font-size:clamp(1.3rem,2vw,1.75rem);letter-spacing:-.01em}
.activity h3 a:hover{color:var(--red)}
.activity p{grid-column:2;color:var(--ink-2);font-size:.9375rem}
.activity .mono{color:var(--red);padding-top:8px;grid-row:span 2}
.contact{padding-bottom:0}
.contact-row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:20px 32px;margin-top:28px;color:var(--muted);font-size:.875rem}
.contact-links{display:flex;flex-wrap:wrap;align-items:center;gap:8px 28px;margin-left:auto}
.contact-mail{display:inline-flex;align-items:center;gap:10px;min-height:44px;font-size:.9375rem;font-weight:700;color:var(--ink);border-bottom:1px solid var(--line-2);transition:border-color .2s,color .2s}
.contact-mail .lbl{font-weight:400}
.contact-mail:hover{color:var(--red);border-color:var(--red)}

/* ═══ WORKS ════════════════════════════════════════════ */
.wx-hero{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;padding:28px var(--g) 0}
.wx-hero .hero-top{grid-row:auto}
.wx-word{grid-column:1/-1;font-family:var(--display);font-weight:700;font-size:clamp(5rem,15vw,17rem);line-height:.78;letter-spacing:-.08em;margin:40px 0 0 -.05em;display:flex;align-items:flex-start}
.wx-word sup{font-family:var(--mono);font-size:max(.75rem,1.2vw);letter-spacing:.1em;color:var(--red);margin:.5em 0 0 .6em;vertical-align:top;line-height:1}
.wx-intro{grid-column:1/6;margin-top:44px}
.wx-intro h1{font-size:clamp(1.3rem,2vw,1.8rem);line-height:1.4}
.wx-intro p{margin-top:14px;color:var(--ink-2);font-size:.9375rem}
.wx-legend{grid-column:8/-1;align-self:end;justify-self:end;text-align:right;color:var(--muted)}

.wx-bar{position:sticky;top:var(--head);z-index:10;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 24px;margin-top:72px;padding:12px var(--g);background:#121313f2;border-block:1px solid var(--line);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.wx-filter{display:flex;flex-wrap:wrap;gap:8px}
.wx-filter h2{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.chip{display:inline-flex;align-items:center;gap:10px;min-height:40px;padding:0 16px;border:1px solid var(--line-2);background:transparent;font-size:.8125rem;font-weight:600;color:var(--ink-2);cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.chip span{font-family:var(--mono);font-size:.625rem;color:var(--muted)}
.chip:hover{border-color:var(--ink)}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.chip[aria-pressed="true"] span{color:var(--red)}
.wx-meta{display:flex;align-items:center;gap:20px}
.wx-status{font-size:.8125rem;color:var(--muted)}
.wx-years{display:flex;gap:4px}
.wx-years a{font-family:var(--mono);font-size:.75rem;padding:8px 10px;color:var(--muted);min-height:40px;display:inline-flex;align-items:center}
.wx-years a:hover{color:var(--ink)}

.wx-year{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;padding:72px var(--g) 24px;border-bottom:1px solid var(--line)}
.wx-year-h{grid-column:1/3;align-self:start;position:sticky;top:calc(var(--head) + 90px)}
.wx-year-h h2{font-family:var(--display);font-size:clamp(2.6rem,4.4vw,4.4rem);line-height:.8;letter-spacing:-.07em}
.wx-year-h .mono{display:block;margin-top:16px;color:var(--muted)}
.wx-grid{grid-column:3/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:56px 24px}
.tile{position:relative;display:flex;flex-direction:column}
.tile .plate{aspect-ratio:4/3;margin-bottom:18px}
.tile .plate img{transition:transform 1.1s var(--ease)}
.tile:hover .plate img{transform:scale(1.035)}
.tile .lbl{display:flex;justify-content:space-between;gap:12px;color:var(--dim);margin-bottom:10px}
.tile h3{font-family:var(--display);font-size:clamp(1.25rem,1.5vw,1.5rem);letter-spacing:-.035em;line-height:1.1;transition:color .25s}
.tile:hover h3{color:var(--tone)}
.tile .copy{margin-top:12px;font-weight:700;font-size:.9375rem;line-height:1.65}
.tile .desc{margin-top:8px;color:var(--muted);font-size:.8125rem;line-height:1.85}
.tile .go{margin-top:16px;font-size:.8125rem;font-weight:700;display:inline-flex;gap:8px;align-self:flex-start;border-bottom:1px solid var(--line-2);padding-bottom:3px}
.tile:hover .go{border-color:var(--red)}
.tile--lead{grid-column:span 2}
.tile--lead .plate{aspect-ratio:16/10}
.type-plate{display:grid;place-items:center;background:var(--bg-3);border:1px solid var(--line-2)}
.type-plate strong{font-family:var(--display);font-size:clamp(2.2rem,4vw,3.6rem);letter-spacing:-.05em;line-height:1}
.type-plate strong i{font-style:normal;color:var(--red);margin:0 .12em}
.next-link .type-plate strong{font-size:clamp(1.3rem,2vw,1.9rem);white-space:nowrap}
.type-plate small{position:absolute;left:16px;bottom:14px;font-family:var(--mono);font-size:.625rem;letter-spacing:.14em;color:var(--dim)}
.pins{position:absolute;top:16px;left:16px;display:flex;gap:6px}
.pins i{width:8px;height:8px;border-radius:50%;border:1px solid var(--muted)}
.wx-more{padding:96px var(--g) 0}

/* ═══ NT東京 ═══════════════════════════════════════════ */
.nt-hero{position:relative;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;padding:28px var(--g) 0;isolation:isolate}
.nt-word{grid-column:1/-1;font-family:var(--display);font-weight:700;font-size:clamp(5rem,14vw,16rem);line-height:.78;letter-spacing:-.08em;margin:40px 0 0 -.05em}
.nt-word span{display:block}
.nt-word span+span{color:transparent;-webkit-text-stroke:1.5px var(--ink);padding-left:12vw}
.nt-sub{grid-column:1/6;margin-top:44px;display:grid;gap:12px;align-content:start}
.nt-sub h1{font-size:clamp(1.3rem,2vw,1.8rem);line-height:1.4}
.nt-sub .catch{font-size:clamp(1.05rem,1.4vw,1.25rem);font-weight:700;line-height:1.7;margin-top:12px}
.nt-photo{grid-column:7/-1;max-width:760px;margin:44px calc(var(--gb)*-1) 0 0}
.nt-photo a{display:block;position:relative}
.nt-photo .plate{aspect-ratio:4/3}
.nt-photo .cap{position:absolute;left:18px;bottom:16px;right:18px;display:flex;justify-content:space-between;align-items:end;gap:12px;color:#222;font-weight:700;font-size:.875rem}
.nt-photo .cap .mono{color:#444}
.nt-pick{grid-column:1/-1;margin-top:72px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:2px solid var(--ink)}
.nt-pick a{display:grid;grid-template-columns:auto 1fr auto;gap:4px 14px;align-items:baseline;padding:18px 18px 22px 0;transition:background .25s}
.nt-pick a+a{padding-left:18px;border-left:1px solid var(--line)}
.nt-pick a:hover{background:var(--bg-2)}
.nt-pick .mono{color:var(--red)}
.nt-pick strong{font-size:1.0625rem;line-height:1.35}
.nt-pick small{grid-column:2;color:var(--muted);font-size:.8125rem}
.nt-pick b{color:var(--muted);font-weight:400}
.nt-motto{grid-column:1/-1;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px 24px;padding:22px 0;border-bottom:1px solid var(--line);color:var(--ink-2)}
.nt-visit{margin:120px var(--g) 0;padding:clamp(48px,7vw,96px) 0;border-top:2px solid var(--ink);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px}
.nt-visit .lbl{grid-column:1/4}
.nt-visit p{grid-column:4/-1;font-size:clamp(1.5rem,2.6vw,2.6rem);line-height:1.35;font-weight:800;letter-spacing:-.02em}

/* ─── image viewer (interface.js) ───────────────────── */
.image-viewer{position:fixed;inset:0;width:100%;max-width:none;height:100dvh;max-height:none;margin:0;border:0;padding:24px 40px;background:#0e0f0ff7;color:var(--ink);overflow:auto}
.image-viewer::backdrop{background:#000b;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.image-viewer[open]{display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:16px}
.viewer-top,.viewer-bottom{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.viewer-top>.mono{color:var(--muted);font-size:.625rem}
.viewer-controls{display:flex;gap:8px}
.viewer-button{font:inherit;font-size:.8125rem;background:transparent;color:var(--ink);border:1px solid var(--line-2);min-height:44px;min-width:44px;padding:8px 16px;cursor:pointer}
.viewer-button:hover{border-color:var(--ink)}
.viewer-media{min-height:0;display:grid;place-items:center}
.viewer-media img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.viewer-caption{font-size:.8125rem;color:var(--muted);max-width:70ch}
.viewer-count{font-size:.6875rem;color:var(--muted)}
.viewer-locked{overflow:hidden}

/* ═══ responsive ═══════════════════════════════════════ */
@media (max-width:1100px){
  .wx-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .index li a{grid-template-columns:50px minmax(0,1fr) minmax(0,.8fr) 40px}
  .index .yr{display:none}
  .nt-pick{grid-template-columns:repeat(2,minmax(0,1fr))}
  .nt-pick a:nth-child(3){padding-left:0;border-left:0}
  .nt-pick a:nth-child(n+3){border-top:1px solid var(--line)}
}
@media (max-width:860px){
  :root{--head:auto}
  html{scroll-padding-top:16px}
  .hd{position:relative;height:auto;flex-direction:column;align-items:stretch;gap:0;padding-top:10px;padding-bottom:0;-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--bg)}
  /* ロゴは文字の幅だけ押せる。ナビは等分のボタンにして誤タップを防ぐ */
  .brand{align-self:flex-start}
  .nav{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin:8px calc(var(--gb)*-1) 0;border-top:1px solid var(--line)}
  .nav a{justify-content:center;min-height:50px;font-size:.75rem;letter-spacing:.06em;padding:0}
  .nav a+a{border-left:1px solid var(--line)}
  .nav a::after{left:24%;right:24%;bottom:0}
  .mobile-only{display:inline}

  .ph,.hero,.wx-hero,.nt-hero,.info,.sec,.next,.next-link,.blk-h,.feat,.home-2col,.wx-year,.nt-visit,.gallery{grid-template-columns:minmax(0,1fr);column-gap:0}
  .ph>*,.hero>*,.wx-hero>*,.nt-hero>*,.sec>*,.next-link>*,.blk-h>*,.feat>*,.home-2col>*,.wx-year>*,.nt-visit>*,.gallery>*{grid-column:1/-1!important;grid-row:auto!important}
  .crumb{margin-bottom:32px}
  .ph{--t:clamp(3.1rem,15.5vw,6rem)}
  .ph:has(.ph-title.jp){--t:clamp(2.4rem,11vw,4rem)}
  .ph-title{margin-top:18px;font-size:var(--h1m,var(--t))}
  .ph--wide .ph-title,.ph--tall .ph-title{mix-blend-mode:difference}
  .ph--wide .ph-title em,.ph--tall .ph-title em{color:inherit}
  .ph-title.jp{font-size:var(--h1m,clamp(2.4rem,11vw,4rem))}
  .ph--wide .ph-photo,.ph--tall .ph-photo{margin:calc(var(--t)*-.42) calc(var(--gb)*-1) 0;order:1}
  .ph--wide .ph-side,.ph--tall .ph-side{padding:28px 0 0;order:2}
  .ph--type .ph-title{mix-blend-mode:normal}
  .ph--tall{min-height:0}
  .ph--tall .ph-photo .plate{min-height:0;height:auto;aspect-ratio:var(--ar-m,4/5)}
  .ph--wide .ph-photo .plate{max-height:none}
  .ph-photo figcaption{padding:10px var(--g) 0!important;position:static!important;color:var(--dim)!important}
  .ph-stats{gap:18px 30px;margin-top:26px}
  .ph--type .ph-diagram{margin-top:32px}
  .info{margin-top:56px;row-gap:16px}
  .info>*{grid-column:1/-1!important}
  .info dl{grid-template-columns:1fr 1fr}
  .toc{position:relative;top:0;gap:0 2px}
  .toc a{padding:0 10px 0 0;min-height:42px}
  .toc a.is-current::after{left:0;right:10px}
  .statement{padding:84px var(--g) 72px}
  .st-big{font-size:var(--stm,clamp(2.6rem,13vw,5rem))}
  .statement.jp .st-big{font-size:var(--stm,clamp(2.2rem,10.5vw,4rem))}
  .st-big em{padding-left:var(--indent-m,10%)}
  .st-sub{margin-left:0;margin-top:32px}
  .sec{padding:64px var(--g)}
  .sec-h{position:static;margin-bottom:30px}
  .sec--wide .sec-b{margin-top:0}
  .flow{grid-template-columns:1fr}
  .flow li{border-right:0;border-bottom:1px solid var(--line-2);min-height:0;gap:16px}
  .flow li:last-child{border-bottom:0}
  .flow li:not(:last-child)::after{content:"↓";right:auto;left:22px;top:auto;bottom:-.75em;transform:none;padding:0 4px}
  .steps,.triad,.matrix,.pair{grid-template-columns:1fr}
  .steps li,.steps li+li{padding:20px 0;border-right:0;border-bottom:1px solid var(--line)}
  .triad article,.triad article+article{padding:26px 0 30px;border-left:0}
  .triad article+article{border-top:1px solid var(--line-2)}
  .matrix>div,.matrix>div+div{padding:18px 0;border-left:0;border-bottom:1px solid var(--line)}
  .pair section+section{border-left:0;border-top:1px solid var(--line-2)}
  .ledger>div{grid-template-columns:1fr;gap:12px}
  .disc details p{padding-left:0}
  .specs>div{grid-template-columns:1fr;gap:4px}
  .gallery{row-gap:40px}
  .gallery.screens{grid-template-columns:1fr 1fr;column-gap:12px;row-gap:24px}
  .gallery.screens>*{grid-column:auto!important}
  .gallery figcaption{flex-direction:column;gap:4px}
  .next{margin:0 var(--g)}
  .next-link .plate{margin-top:24px;max-width:320px}
  .ft{grid-template-columns:1fr;justify-items:start;margin-top:80px}
  .ft-links{justify-self:start}

  .hero{min-height:0;padding-bottom:0}
  .hero-word{font-size:clamp(3.4rem,19vw,8rem);white-space:normal;margin-top:28px}
  .hero-word span{display:block}
  .lineup{flex-wrap:wrap;margin-top:calc(clamp(3.4rem,19vw,8rem)*-.42);gap:24px 10px}
  .lineup a{flex:0 0 calc(50% - 5px)}
  .lineup .plate{aspect-ratio:1/1}
  .lineup .plate img{object-fit:cover}
  .hero-copy{padding-top:36px;grid-template-columns:1fr}
  .hero-desc{margin-top:14px}
  .hero-anno{justify-self:start;text-align:left;margin-top:28px}
  .blk-h h2{margin-top:4px}
  .blk-h .side{justify-self:start;text-align:left;margin-top:12px}
  .feat{padding:48px 0;row-gap:28px}
  .feat .feat-media{margin:0 calc(var(--gb)*-1)!important}
  .feat--b .feat-media .plate{aspect-ratio:4/5}
  .feat--c .inset{right:16px;width:30%}
  .feat-text{order:2}
  .feat .feat-media{order:1}
  .feat--d .feat-mega{font-size:clamp(6rem,36vw,10rem)}
  .index li a{grid-template-columns:36px minmax(0,1fr) 24px;gap:12px;min-height:66px}
  .index .ct{display:none}
  .peek{display:none}
  .home-2col{padding-top:28px;row-gap:28px}
  .approach a{grid-template-columns:1fr;gap:6px}
  .activity article{grid-template-columns:1fr}
  .activity p{grid-column:1}
  .activity .mono{grid-row:auto;padding-top:0}

  .wx-word{font-size:clamp(4rem,21vw,10rem);white-space:nowrap}
  .wx-hero .hero-top .lbl:last-child,.nt-hero .hero-top .lbl:last-child{display:none}
  .feats li{grid-template-columns:36px 1fr;gap:10px}
  .feat--c .inset{bottom:14px}
  .wx-legend{justify-self:start;text-align:left;margin-top:18px}
  .wx-bar{position:relative;top:0;margin-top:44px}
  .wx-meta{width:100%;justify-content:space-between}
  .wx-year{padding-top:52px}
  .wx-year-h{position:static;display:flex;align-items:baseline;gap:16px;margin-bottom:28px}
  .wx-year-h .mono{margin:0}
  .wx-grid{grid-template-columns:1fr;row-gap:48px}
  .tile--lead{grid-column:auto}
  .tile--lead .plate{aspect-ratio:1/1}

  .nt-word span+span{padding-left:0}
  .nt-photo{margin:32px calc(var(--gb)*-1) 0}
  .nt-pick{grid-template-columns:1fr;margin-top:44px}
  .nt-pick a,.nt-pick a+a{padding:18px 0;border-left:0;border-top:1px solid var(--line)}
  .nt-pick a:first-child{border-top:0}
  .nt-visit{margin-top:80px}
}
@media (max-width:420px){
  .nav a{font-size:.6875rem;letter-spacing:.02em}
  .info dl{grid-template-columns:1fr}
}
@media (hover:none){.peek{display:none}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;scroll-behavior:auto!important}
  .js [data-reveal],.js [data-reveal="clip"]{opacity:1;transform:none;clip-path:none}
  .sec-h,.wx-year-h{position:static}
  .peek{display:none}
}
@media print{
  body{background:#fff;color:#000}
  .hd,.ft,.toc,.next,.skip,.wx-bar,.peek,.image-viewer{display:none!important}
  .ph-title,.hero-word{mix-blend-mode:normal;color:#000}
}