@font-face{font-family:"Anton";src:url("/assets/fonts/anton-latin.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("/assets/fonts/inter-latin.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url("/assets/fonts/instrument-serif-italic-latin.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url("/assets/fonts/jetbrains-mono-latin.woff2") format("woff2");font-weight:100 800;font-style:normal;font-display:swap}

:root{
  color-scheme:light;
  --paper:#f3ede2;--paper-2:#ebe2d2;--card:#f8f4ec;--ink:#16171b;--text:#2c2d33;--muted:#5b5a55;--line:#d6ccba;
  --blue:#2c50dc;--blue-ink:#2443c4;--lime:#c6ec4b;--coral:#ff6a4d;--yellow:#ffc53d;--cubby:#f1e7d5;
  --display:"Anton",Impact,"Arial Narrow",sans-serif;--sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --serif:"Instrument Serif",Georgia,"Times New Roman",serif;--mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --gutter:clamp(16px,4vw,48px);--radius:18px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:16px}
body{margin:0;background-color:var(--paper);background-image:radial-gradient(rgba(22,23,27,.075) 1px,transparent 1.3px);background-size:22px 22px;color:var(--text);font:400 16px/1.55 var(--sans);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto}
a{color:inherit;-webkit-tap-highlight-color:transparent}
button{font:inherit;color:inherit;-webkit-tap-highlight-color:transparent}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:6px}
[hidden]{display:none!important}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.wrap{width:min(1240px,calc(100% - 2 * var(--gutter)));margin-inline:auto}
.skip-link{position:fixed;left:16px;top:-80px;z-index:50;background:var(--ink);color:var(--paper);padding:12px 16px;border-radius:10px;text-decoration:none}
.skip-link:focus{top:12px}
.js .no-js{display:none}
html:not(.js) .js-only{display:none!important}

/* ---------------------------------------------------------------- masthead */
.masthead{display:flex;align-items:center;justify-content:space-between;min-height:76px;gap:16px}
.monogram{font:400 30px/1 var(--display);letter-spacing:.01em;text-decoration:none;color:var(--ink);display:inline-flex;align-items:center;min-height:44px;min-width:44px}
.monogram span{color:var(--coral)}
.masthead nav{display:flex;gap:4px;flex-wrap:wrap;justify-content:flex-end}
.masthead nav a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;padding:0 12px;border-radius:999px;text-decoration:none;font-weight:550;font-size:15px;color:var(--ink)}
.masthead nav a:hover{background:rgba(22,23,27,.06)}

/* ---------------------------------------------------------------- hero */
.hero{display:grid;grid-template-columns:minmax(330px,.8fr) minmax(0,1.2fr);gap:clamp(24px,3vw,48px);align-items:center;padding:8px 0 56px}
.eyebrow,.kicker{font:500 12.5px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0 0 18px}
.hero h1{font:400 clamp(68px,8.4vw,138px)/.86 var(--display);text-transform:uppercase;letter-spacing:-.005em;color:var(--ink);margin:0 0 26px}
.lead{font-size:clamp(25px,2.5vw,36px);line-height:1.12;font-weight:650;letter-spacing:-.025em;color:var(--ink);margin:0 0 20px;max-width:15em}
mark{background:linear-gradient(transparent 58%,var(--lime) 58%,var(--lime) 92%,transparent 92%);color:inherit;padding:0 .04em}
.bio{font-size:17px;line-height:1.6;color:var(--text);margin:0 0 28px;max-width:31em}
a.inline{color:var(--blue-ink);font-weight:600;text-decoration-thickness:1.5px;text-underline-offset:3px;padding-block:12px}
.actions{display:flex;flex-wrap:wrap;gap:10px}
.button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 20px;border-radius:999px;border:1.5px solid var(--ink);color:var(--ink);background:transparent;text-decoration:none;font-weight:600;font-size:15px;cursor:pointer;transition:background .2s,color .2s,transform .2s}
.button:hover{background:rgba(22,23,27,.06)}
.button.primary{background:var(--ink);color:var(--paper)}
.button.primary:hover{background:#2d2f36}

.hero-stage{position:relative;min-width:0}
.stage-note{margin:0 0 6px;font:500 13px/1.45 var(--mono);color:var(--muted);display:flex;gap:8px;flex-wrap:wrap;align-items:baseline}
.stage-note .hand{font:italic 400 22px/1.1 var(--serif);color:var(--ink);letter-spacing:0}
.stage{position:relative;aspect-ratio:1.2;width:100%;isolation:isolate}
/* While a toy is open, the stage (and its panel, a fixed sheet on phones) sits above later page content. */
.stage.is-focus{z-index:40}
/* The path-traced shelf: a rendered plate with one rendered sprite per toy. */
.real{position:absolute;inset:0;overflow:visible;pointer-events:none;opacity:0;transition:opacity .5s ease}
.stage.is-live .real{opacity:1}
.real .plate{position:absolute;left:0;top:0;width:100%;height:auto;display:block;user-select:none}
.real-toy{position:absolute;left:0;top:0;will-change:transform}
.real-toy img{position:absolute;inset:0;width:100%;height:100%;display:block;user-select:none}
.real-shadow{transition:opacity .25s}
.real-scrim{position:absolute;inset:-2%;z-index:25;visibility:hidden;opacity:0;background:rgba(243,237,226,.5);-webkit-backdrop-filter:blur(7px) saturate(.9);backdrop-filter:blur(7px) saturate(.9);border-radius:18px}

/* The shelf as plain HTML: a blue grid of cubbies (no JavaScript, no WebGL, or loading). */
.shelf{position:absolute;inset:64px 0 0;list-style:none;margin:0;padding:10px;display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:1fr;gap:10px;background:var(--blue);border-radius:6px;box-shadow:14px 18px 0 rgba(58,42,18,.09)}
.shelf li{min-width:0;min-height:0;display:flex}
.item{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;width:100%;min-height:44px;padding:6px 6px 8px;background:radial-gradient(circle at 50% 42%,#fbf6ec,var(--cubby) 70%,#e3d6bf);border-radius:2px;text-decoration:none;color:var(--ink);overflow:hidden;transition:transform .25s ease}
.item img{flex:1 1 auto;min-height:0;width:100%;object-fit:contain;transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.item:hover img,.item:focus-visible img{transform:translateY(-4px) scale(1.07)}
.item .name{font-weight:650;font-size:13px;line-height:1.2;text-align:center}
.item .line{display:none}
.item .rank{position:absolute;left:6px;top:6px;font:600 11px/1 var(--mono);color:var(--paper);background:var(--ink);padding:4px 6px;border-radius:5px}
.moved{position:absolute;right:6px;top:6px;font:700 11px/1 var(--mono);padding:4px 6px;border-radius:5px;opacity:0;pointer-events:none}
.moved[data-dir=up]{background:var(--lime);color:var(--ink)}
.moved[data-dir=down]{background:var(--paper-2);color:var(--muted)}
.moved.show{animation:moved 2.6s ease forwards}
@keyframes moved{0%{opacity:0;transform:translateY(6px)}12%{opacity:1;transform:none}75%{opacity:1}100%{opacity:0}}
.on-top{position:absolute;z-index:2;right:4%;top:4px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;min-height:52px;padding:6px 14px;border-radius:12px;background:var(--card);text-decoration:none;color:var(--ink);box-shadow:0 6px 18px rgba(58,42,18,.12)}
.on-top-label{font-weight:650;font-size:14px}
.on-top-note{font:500 11px/1.3 var(--mono);color:var(--muted);text-transform:uppercase;letter-spacing:.06em}

/* Live: the rendered layers draw the shelf; the links become transparent hit areas over each cubby. */
.stage.is-live .shelf{display:block;padding:0;inset:0;background:none;box-shadow:none;pointer-events:none;z-index:28}
.stage.is-live .shelf li{display:contents}
.stage.is-live .item{position:absolute;left:0;top:0;width:0;height:0;padding:0;background:none;border-radius:10px;pointer-events:auto;overflow:visible;cursor:pointer;transition:none}
.stage.is-live .item img,.stage.is-live .item .name,.stage.is-live .item .line{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.stage.is-live .item .rank{left:8px;top:auto;bottom:6px;background:rgba(22,23,27,.82);transition:background .2s}
.stage.is-live .item:hover .rank,.stage.is-live .item:focus-visible .rank{background:var(--coral);color:var(--ink)}
.stage.is-live .item:focus-visible{outline:3px solid var(--lime);outline-offset:-6px}
.stage.is-live .moved{top:8px;right:8px}
.stage.is-live .on-top{z-index:29;right:auto;left:0;padding:0;background:none;box-shadow:none;border-radius:8px}
.stage.is-live .on-top span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.stage.is-loading .shelf{opacity:.92}
.stage.is-focus .item,.stage.is-focus .on-top{pointer-events:none}
.stage.is-live.is-focus .item .rank,.stage.is-live.is-focus .moved{opacity:0!important;animation:none}
.stage.is-static.is-focus .shelf{filter:blur(3px) saturate(.8);opacity:.5;transition:filter .3s,opacity .3s}
.stage.is-static.is-focus .on-top{visibility:hidden}

.tag{position:absolute;left:0;top:0;z-index:40;pointer-events:none;display:grid;gap:2px;min-width:180px;max-width:260px;padding:10px 12px 11px;border-radius:12px;background:var(--ink);color:var(--paper);box-shadow:0 12px 30px rgba(22,23,27,.24)}
.tag-rank{font:600 11px/1.3 var(--mono);color:var(--lime);letter-spacing:.06em;text-transform:uppercase}
.tag strong{font-size:16px;line-height:1.2}
.tag span{font-size:13px;line-height:1.35;color:#d8d3c8}
.tag .tag-why{font:500 11.5px/1.4 var(--mono);color:#a9c4ff}

.hud{display:flex;align-items:center;gap:10px 14px;flex-wrap:wrap;margin-top:12px;min-height:44px;font:500 12.5px/1.4 var(--mono);color:var(--muted)}
.hud-line{display:flex;align-items:baseline;gap:10px;min-width:0}
.hud-line .live{flex:none;transform:translateY(-1px)}
.live{width:9px;height:9px;border-radius:50%;background:#58b81f;box-shadow:0 0 0 0 rgba(88,184,31,.5);animation:pulse 2.2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(88,184,31,.45)}70%{box-shadow:0 0 0 9px rgba(88,184,31,0)}100%{box-shadow:0 0 0 0 rgba(88,184,31,0)}}
#hud-status{color:var(--ink)}
.hud-latency{color:var(--blue-ink)}
.hud-reset,.console-reset{min-height:44px;padding:0 16px;border-radius:999px;border:1.5px solid currentColor;background:transparent;cursor:pointer;font:600 12.5px/1 var(--mono)}
.hud-reset{margin-left:auto;color:var(--ink)}
.hud-reset:hover{background:rgba(22,23,27,.06)}

/* ---------------------------------------------------------------- detail panel */
.panel{position:absolute;z-index:35;top:4%;bottom:4%;right:0;width:min(460px,50%);display:flex;flex-direction:column;gap:10px;padding:18px 22px 20px;border-radius:var(--radius);background:#faf6ee;box-shadow:0 30px 70px rgba(22,23,27,.2),0 0 0 1px rgba(22,23,27,.06);overflow:auto;animation:panel-in .45s cubic-bezier(.2,.8,.2,1)}
@keyframes panel-in{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:none}}
.panel-top{display:flex;align-items:center;gap:10px}
.panel-top .panel-close{margin-left:auto}
.panel-count{font:600 13px/1 var(--mono);color:var(--muted)}
.panel-close{min-height:44px;padding:0 16px;border-radius:999px;border:1.5px solid var(--ink);background:transparent;cursor:pointer;font-weight:600}
.panel-close:hover{background:rgba(22,23,27,.06)}
.panel-kicker{margin:6px 0 0;font:500 12px/1.4 var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--blue-ink)}
.panel-title{margin:0;font:400 clamp(30px,3vw,44px)/.95 var(--display);text-transform:uppercase;color:var(--ink)}
.panel-title:focus{outline:none}
.panel-title:focus-visible{outline:3px solid var(--blue);outline-offset:4px}
.panel-body{margin:0;font-size:15.5px;line-height:1.55}
.panel-links{display:flex;flex-wrap:wrap;gap:8px}
.panel-also{margin-top:auto}
.panel-label{margin:4px 0 8px;font:600 11.5px/1 var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.panel-also ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.panel-also button{width:100%;min-height:44px;display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 6px;border-radius:12px;border:1px solid var(--line);background:var(--card);cursor:pointer;font-size:12.5px;font-weight:600;line-height:1.2;text-align:center}
.panel-also button:hover{border-color:var(--ink)}
.panel-also img{width:64px;height:51px;object-fit:contain}
.panel-nav{display:flex;gap:6px}
.panel-nav button{width:44px;height:44px;border-radius:50%;border:1.5px solid var(--line);background:transparent;cursor:pointer;font-size:17px;line-height:1}
.panel-nav button:hover{background:rgba(22,23,27,.06)}

/* ---------------------------------------------------------------- sections */
.section{padding:clamp(64px,9vw,128px) 0 0}
.section-head{max-width:860px;margin-bottom:clamp(28px,4vw,48px)}
.section h2{font:400 clamp(44px,6.2vw,92px)/.9 var(--display);text-transform:uppercase;color:var(--ink);margin:0;letter-spacing:-.003em}
.sub{font:italic 400 clamp(26px,2.8vw,40px)/1.1 var(--serif);color:var(--ink);margin:12px 0 0}
.intro{font-size:clamp(17px,1.5vw,19px);line-height:1.6;margin:22px 0 0;max-width:42em}

/* Live model console */
.console{display:grid;grid-template-columns:1fr 1fr 1.6fr;gap:0;border-radius:22px;background:#15161a;color:#ece7dc;overflow:hidden;box-shadow:0 30px 60px rgba(22,23,27,.18)}
.console-col{padding:24px 24px 22px;border-right:1px solid #2b2d34;min-width:0}
.console-col:last-of-type{border-right:0}
.console h3{margin:0 0 16px;font:600 12px/1 var(--mono);text-transform:uppercase;letter-spacing:.1em;color:#cfc9bc}
.console h3 span{color:var(--lime);margin-right:6px}
.console .note{margin:14px 0 0;font:500 11.5px/1.5 var(--mono);color:#a7a294}
.signals,.ranking{list-style:none;margin:0;padding:0}
.signals li{display:flex;gap:10px;padding:8px 0;border-bottom:1px solid #26282e;font-size:14px}
.signals li .n{font:600 12px/1.6 var(--mono);color:var(--lime)}
.signals .empty{color:#a7a294;border:0;font-size:14px}
.taste{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.taste li{display:grid;grid-template-columns:1fr auto;gap:6px 10px;align-items:center;font-size:14px}
.taste .bar{grid-column:1/-1;height:8px;border-radius:99px;background:#2a2c33;overflow:hidden}
.taste .fill{display:block;height:100%;border-radius:inherit;background:var(--lime);transition:width .8s cubic-bezier(.2,.8,.2,1)}
.taste .value{grid-row:1;grid-column:2;font:600 12.5px/1 var(--mono);color:#ece7dc}
.taste li[data-trend=up] .value::after{content:" ▲";color:var(--lime)}
.taste li[data-trend=down] .value::after{content:" ▼";color:#ff9c86}
.w38{width:38%}.w20{width:20%}.w14{width:14%}
.ranking{counter-reset:rank}
.ranking li{display:grid;grid-template-columns:28px minmax(0,1fr) 72px 40px 38px;align-items:center;gap:10px;padding:5px 0;border-bottom:1px solid #222429;font-size:13.5px;counter-increment:rank}
html:not(.js) .ranking li::before{content:counter(rank,decimal-leading-zero);font:600 12px/1 var(--mono);color:#a7a294}
.ranking .r{font:600 12px/1 var(--mono);color:#a7a294}
.ranking .name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ranking .bar{height:6px;border-radius:99px;background:#2a2c33;overflow:hidden}
.ranking .fill{display:block;height:100%;background:#8fb0ff;border-radius:inherit}
.ranking .score{font:600 12px/1 var(--mono);text-align:right;color:#ece7dc}
.ranking .delta{font:600 11.5px/1 var(--mono);text-align:right;color:#8c8778}
.ranking .delta[data-dir=up]{color:var(--lime)}
.ranking .delta[data-dir=down]{color:#ff9c86}
.ranking .why{grid-column:2/-1;font:500 11px/1.3 var(--mono);color:#8c8778;margin-top:-2px}
.ranking li.explore .name::after{content:"explore";margin-left:8px;font:600 10px/1 var(--mono);color:var(--ink);background:var(--yellow);border-radius:4px;padding:2px 5px;vertical-align:1px}
.console-foot{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;padding:14px 24px;border-top:1px solid #2b2d34;font:500 12.5px/1.4 var(--mono);color:#a7a294}
.console-foot .metric{color:var(--lime)}
.console-foot .source{display:inline-flex;align-items:center;gap:6px;min-height:44px;color:#a9c4ff;text-decoration:none}
.console-foot .source:hover{text-decoration:underline}
.console-reset{margin-left:auto;color:#ece7dc}

.compare{margin-top:clamp(32px,4vw,56px)}
.compare h3{font:italic 400 clamp(26px,2.4vw,34px)/1.1 var(--serif);color:var(--ink);margin:0 0 14px}
.compare table{width:100%;border-collapse:collapse;font-size:15.5px}
.compare th,.compare td{text-align:left;padding:14px 16px 14px 0;border-top:1px solid var(--line);vertical-align:top}
.compare thead th{font:600 12px/1.3 var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--muted);border-top:0}
.compare tbody th{font-weight:600;color:var(--ink);width:24%}
.compare td:last-child{color:var(--ink)}

/* Work cards */
.cards{display:grid;gap:clamp(14px,1.6vw,22px)}
.cards.four{grid-template-columns:repeat(4,1fr)}
.cards.three{grid-template-columns:repeat(3,1fr)}
.card{display:flex;flex-direction:column;gap:10px;min-width:0}
.card img{width:100%;aspect-ratio:1.25;object-fit:contain;background:radial-gradient(circle at 50% 45%,#fbf7ef,var(--cubby) 72%);border-radius:var(--radius);box-shadow:inset 0 0 0 1px rgba(22,23,27,.05)}
.card h3{margin:6px 0 0;font-size:20px;line-height:1.2;letter-spacing:-.015em;color:var(--ink)}
.card p{margin:0;font-size:15.5px;line-height:1.55}
.card .button{align-self:flex-start;margin-top:auto}
.loop{margin-top:clamp(28px,4vw,48px);padding:24px;border-radius:var(--radius);border:1.5px dashed var(--line)}
.loop-steps{list-style:none;margin:0 0 14px;padding:0;display:flex;flex-wrap:wrap;gap:8px 6px;align-items:center}
.loop-steps li{display:inline-flex;align-items:center;gap:6px;font:600 12.5px/1 var(--mono);color:var(--ink)}
.loop-steps li::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--blue)}
.loop-steps li:not(:last-child)::after{content:"→";margin-left:6px;color:var(--muted)}
.loop-steps li:last-child::after{content:"↺";margin-left:6px;color:var(--coral);font-size:16px}
.loop p{margin:0;max-width:52em}

/* Family */
.spread{position:relative;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));align-items:start;margin:8px 0 clamp(40px,6vw,80px)}
.print{margin:0;padding:14px 14px 0;background:#fffdf8;box-shadow:0 2px 0 rgba(58,42,18,.06),0 30px 60px rgba(58,42,18,.2),0 8px 18px rgba(58,42,18,.12);transition:transform .6s cubic-bezier(.2,.8,.2,1),box-shadow .6s}
.print a{display:block;border-radius:2px;overflow:hidden}
.print img{display:block;width:100%;height:auto;transition:transform 1.2s cubic-bezier(.2,.8,.2,1)}
.print figcaption{display:flex;align-items:center;justify-content:center;min-height:68px;font:italic 400 clamp(22px,2vw,30px)/1 var(--serif);color:var(--ink)}
.print-a{grid-column:1/8;grid-row:1;transform:rotate(-2.2deg);z-index:1}
.print-b{grid-column:7/12;grid-row:1;margin-top:clamp(70px,11vw,160px);transform:rotate(3deg);z-index:2}
.print:hover{transform:rotate(0) translateY(-6px) scale(1.01);z-index:3;box-shadow:0 2px 0 rgba(58,42,18,.06),0 40px 80px rgba(58,42,18,.26),0 10px 22px rgba(58,42,18,.14)}
.print:hover img{transform:scale(1.03)}
.spread-note{grid-column:9/13;grid-row:1;align-self:start;margin:0 0 0 auto;padding-top:8px;text-align:right;font:500 12.5px/1.6 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.notes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.6vw,22px)}
.note-card{display:flex;flex-direction:column;gap:12px;padding:14px 14px 18px;border-radius:var(--radius);background:rgba(248,244,236,.85);box-shadow:inset 0 0 0 1px rgba(22,23,27,.05)}
.note-card img{width:100%;height:auto;aspect-ratio:1.6;object-fit:contain;background:radial-gradient(circle at 50% 45%,#fbf7ef,var(--cubby) 72%);border-radius:12px}
.note-card h3{margin:0 0 6px;font-size:20px;line-height:1.2;color:var(--ink)}
.note-card p{margin:0}
.pull{margin:clamp(48px,7vw,90px) 0 0;padding:0}
.pull p{margin:0;max-width:22em;font:italic 400 clamp(30px,3.6vw,52px)/1.08 var(--serif);color:var(--ink)}

/* Credo + footer */
.credo{margin-top:clamp(80px,11vw,150px);padding:clamp(80px,11vw,160px) 0 clamp(64px,8vw,110px);background:var(--ink);color:var(--paper)}
.credo p{margin:0;max-width:17em;font:italic 400 clamp(38px,5.6vw,88px)/1.03 var(--serif);color:var(--paper);letter-spacing:-.01em}
.credo em{font-style:italic;color:var(--lime)}
.credo .credo-note{max-width:none;margin-top:28px;font:500 13px/1.4 var(--mono);color:#b9b3a6;letter-spacing:.06em;text-transform:uppercase}
.footer{display:flex;align-items:center;flex-wrap:wrap;gap:8px 28px;padding:22px 0 34px}
.footer p{margin:0}
.footer-name{font:400 22px/1 var(--display);text-transform:uppercase;color:var(--ink)}
.footer nav{display:flex;flex-wrap:wrap;gap:4px}
.footer nav a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;padding:0 10px;text-decoration:none;font-weight:600;color:var(--ink);border-radius:999px}
.footer nav a:hover{background:rgba(22,23,27,.06)}
.dedication{margin-left:auto!important;font:italic 400 20px/1 var(--serif);color:var(--muted)}

/* ---------------------------------------------------------------- responsive */
@media (max-width:1100px){
  .hero{grid-template-columns:1fr;gap:28px;padding-top:4px}
  .hero h1{font-size:clamp(64px,12vw,120px)}
  .lead{max-width:none}
  .cards.four{grid-template-columns:repeat(2,1fr)}
  .console{grid-template-columns:1fr 1fr}
  .ranking-col{grid-column:1/-1;border-top:1px solid #2b2d34}
  .console-col:nth-child(2){border-right:0}
}
@media (max-width:860px){
  .notes{grid-template-columns:1fr}
  .note-card{flex-direction:row;align-items:center}
  .note-card img{width:150px;flex:none}
  .cards.three{grid-template-columns:1fr 1fr}
}
@media (max-width:699px){
  body{font-size:15.5px}
  .masthead{min-height:64px}
  .masthead nav a{padding:0 8px;font-size:14px}
  .monogram{font-size:26px}
  .stage{aspect-ratio:.8}
  .shelf{grid-template-columns:repeat(3,1fr);padding:7px;gap:7px;inset:58px 0 0}
  .item .name{font-size:11.5px}
  .panel{position:fixed;z-index:30;left:8px;right:8px;top:auto;bottom:8px;width:auto;max-height:min(60vh,560px);padding:16px 16px 18px;animation-name:sheet-in;box-shadow:0 -10px 50px rgba(22,23,27,.25),0 0 0 1px rgba(22,23,27,.08)}
  @keyframes sheet-in{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}
  .panel-also img{width:52px;height:42px}
  .console{grid-template-columns:1fr}
  .console-col{border-right:0;border-bottom:1px solid #2b2d34}
  .ranking li{grid-template-columns:24px minmax(0,1fr) 44px 34px 32px;gap:8px;font-size:13px}
  .cards.four,.cards.three{grid-template-columns:1fr}
  .card img{aspect-ratio:1.6}
  .note-card{gap:14px;padding:12px}
  .note-card img{width:96px}
  .print{padding:9px 9px 0}
  .print figcaption{min-height:48px;font-size:20px}
  .print-a{grid-column:1/11}
  .print-b{grid-column:3/13;grid-row:2;margin-top:6px}
  .spread-note{grid-column:1/13;grid-row:3;margin:28px 0 0;text-align:left}
  .compare table,.compare tbody,.compare tr{display:block}
  .compare thead{display:none}
  .compare tr{padding:12px 0;border-top:1px solid var(--line)}
  .compare th,.compare td{display:block;border:0;padding:2px 0;width:auto!important}
  .compare td::before{display:block;font:600 11px/1.6 var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
  .compare td:nth-of-type(1)::before{content:"On this shelf"}
  .compare td:nth-of-type(2)::before{content:"At Coframe"}
  .dedication{margin-left:0!important;flex-basis:100%}
  .hud-reset{margin-left:0}
}
@media (max-width:380px){
  .masthead nav a{padding:0 6px;font-size:13px}
  .hero h1{font-size:60px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .live{animation:none}
  .moved.show{animation:none;opacity:1}
  .print,.print img{transition:none}
}