/* Hardware index. Same paper, ink, red and type as the studio (style.css) so
   the two pages read as cover and interior; Archivo Expanded is the one face
   the studio does not have — the nameplate weight for the big words. */
:root{--paper:#f1f1ee;--ink:#17191b;--muted:#6b7176;--line:#d3d5d2;--accent:#db3438;--mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;--sans:'DM Sans',Arial,sans-serif;--display:Archivo,'Arial Black',Impact,sans-serif;--gutter:clamp(18px,3.4vw,52px);--bar:72px}
*{box-sizing:border-box}
html{background:var(--paper);color:var(--ink);font-family:var(--sans);-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;padding:0 var(--gutter);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer}
button,a{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
::selection{background:var(--ink);color:var(--paper)}

/* The stage sits between the page ground and the page: only .word.back is
   allowed beneath it. Everything else that should read over the 3D is
   position:relative; z-index:1 in the root stacking context. */
#stage{position:fixed;inset:0;width:100%;height:100%;z-index:0;opacity:0;transition:opacity 1.1s ease}
#stage.ready{opacity:1}
.no-webgl #stage{display:none}

.bar{position:fixed;top:0;left:0;right:0;z-index:5;display:flex;align-items:center;gap:44px;height:var(--bar);padding:0 var(--gutter);border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--paper) 72%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.brand{font-family:var(--mono);font-weight:500;font-size:25px;letter-spacing:-1.5px;line-height:1}
.brand span{display:block;font-size:9px;letter-spacing:2px;color:var(--muted);margin-top:8px}
.bar-index{font-size:13px;color:var(--muted);display:flex;align-items:center;gap:12px}
.bar-index strong{font-weight:500;color:var(--ink)}
.bar-index small{font:10px var(--mono);letter-spacing:.5px;border:1px solid var(--line);padding:4px 6px;border-radius:3px}
.bar-link,.hero-scroll{font:500 11px var(--mono);letter-spacing:1.2px;text-transform:uppercase;white-space:nowrap}
.bar-link{margin-left:auto}
.bar-link:hover,.hero-scroll:hover{color:var(--accent)}

.hero{position:relative;min-height:100vh;min-height:100svh;padding-top:var(--bar);display:grid;grid-template-rows:minmax(0,1fr) auto}
.hero-title{margin:0;display:flex;flex-direction:column;justify-content:center;font-family:var(--display);font-stretch:125%;font-weight:800;font-size:clamp(84px,19.5vw,330px);line-height:.86;letter-spacing:-.03em;text-transform:uppercase;pointer-events:none;user-select:none}
.word{display:block;position:relative;width:max-content}
.word.back{z-index:-1}
.word.front{z-index:1;align-self:flex-end}
.word i,.slot-name i{font-style:normal;color:var(--accent)}
.hero-foot{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) auto;gap:32px;align-items:end;padding:28px 0 32px;border-top:1px solid var(--line)}
.hero-line{margin:0;font-size:clamp(20px,2.2vw,28px);font-weight:500;letter-spacing:-.02em;line-height:1.15}
.hero-copy{margin:0;max-width:44ch;color:var(--muted);font-size:14px}
.hero-scroll span{display:inline-block;margin-left:6px;animation:nudge 2.4s ease-in-out infinite}
@keyframes nudge{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}

.index{position:relative;z-index:1}
.slots{list-style:none;margin:0;padding:0}
.slot{border-top:1px solid var(--line);padding:26px 0 72px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:32px;align-content:start}
.slot.open{min-height:100vh;min-height:100svh}
.slot.reserved{min-height:60vh}
.slot-head{grid-column:1/-1;display:flex;align-items:baseline;flex-wrap:wrap;gap:8px 24px;margin-bottom:56px}
.slot-no{font-family:var(--display);font-stretch:125%;font-weight:800;font-size:clamp(44px,6.4vw,96px);line-height:.85;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.slot-code,.slot-status,.skins-head span,.cta-note,dt{font:11px var(--mono);letter-spacing:1.2px;text-transform:uppercase;color:var(--muted)}
.slot-code em{font-style:normal;margin:0 8px;color:var(--line)}
.slot-status{display:flex;align-items:center;gap:9px;color:var(--ink)}
.slot-status i{width:6px;height:6px;border-radius:50%;background:var(--accent);animation:pulse 2.6s ease-in-out infinite}
@keyframes pulse{50%{opacity:.35}}
.reserved .slot-status{color:var(--muted)}
.slot-body{grid-column:1;max-width:580px;display:flex;flex-direction:column;gap:32px}
.slot-name{margin:0;font-family:var(--display);font-stretch:125%;font-weight:800;font-size:clamp(46px,7.4vw,132px);line-height:.88;letter-spacing:-.035em}
.reserved .slot-name{color:transparent;-webkit-text-stroke:1.5px var(--muted);transition:color .3s,-webkit-text-stroke-color .3s}
.reserved:hover .slot-name{-webkit-text-stroke-color:var(--accent)}
.slot-tagline{margin:0;font-size:clamp(16px,1.35vw,19px);line-height:1.45;max-width:46ch;text-wrap:pretty}
.reserved .slot-tagline{color:var(--muted)}
.reserved .slot-body{gap:18px}
.spec{display:grid;grid-template-columns:1fr 1fr;gap:1px;margin:0;background:var(--line);border:1px solid var(--line)}
.spec div{background:var(--paper);padding:14px 16px 15px;min-width:0}
dd{margin:6px 0 0;font-size:17px;font-weight:500;letter-spacing:-.01em;white-space:nowrap}
.skins{display:flex;flex-direction:column;gap:12px}
.skins-head{display:flex;align-items:baseline;gap:12px}
.skins-head strong{font-weight:500;font-size:16px}
.skins-head small{font:11px var(--mono);letter-spacing:.6px;text-transform:uppercase;color:var(--muted)}
.skin-list{display:flex;gap:8px}
.skin{width:54px;height:54px;padding:0;border:1px solid var(--line);border-radius:6px;background:#dfe1de center/cover no-repeat;transition:transform .2s,border-color .2s}
.skin:hover{transform:translateY(-2px);border-color:var(--muted)}
.skin[aria-pressed="true"]{border-color:var(--ink);box-shadow:0 0 0 3px var(--paper),0 0 0 4px var(--ink)}
.slot-actions{display:flex;align-items:center;flex-wrap:wrap;gap:14px 22px}
.cta{display:inline-flex;align-items:center;gap:16px;background:var(--ink);color:var(--paper);padding:15px 22px 15px 24px;border-radius:999px;font-size:15px;font-weight:500;transition:background .2s,transform .2s}
.cta span{transition:transform .2s}
.cta:hover{background:var(--accent)}.cta:hover span{transform:translateX(4px)}
.cta:active{transform:scale(.98)}
.cta-note{text-transform:none;letter-spacing:.2px;font-family:var(--sans);font-size:13px}

/* The closing sheet: the camera ends in plan view over the whole stack, so
   the footer holds a viewport of room for it and keeps its text on the floor. */
footer{position:relative;z-index:1;min-height:92vh;min-height:92svh;border-top:1px solid var(--line);padding:24px 0 30px;display:flex;flex-wrap:wrap;align-content:flex-end;align-items:center;gap:12px 40px;font:10px var(--mono);letter-spacing:.8px;text-transform:uppercase;color:var(--muted)}
.plan{position:absolute;top:24px;left:0;display:flex;gap:24px}
.plan em{font-style:normal;color:var(--line)}
.foot-note{flex:1 1 320px;max-width:560px;text-transform:none;letter-spacing:.2px}
footer a:hover{color:var(--accent)}

/* Missing-object page: same index chrome, one column. */
.missing-body{position:relative;z-index:1;min-height:100vh;min-height:100svh;padding-top:var(--bar);display:flex;flex-direction:column;justify-content:center;gap:28px;max-width:720px}
.missing .slot-name{font-size:clamp(52px,9vw,140px)}

/* One column whenever the stage cannot sit beside the copy: narrow, or taller
   than wide. catalog.js reads the same query to pick the portrait keyframes. */
@media(max-width:900px),(max-aspect-ratio:21/20){
  .bar{gap:24px}.bar-index{font-size:12px}
  .hero-foot{grid-template-columns:1fr;gap:16px}.hero-scroll{justify-self:start}
  /* The slab floats above the words instead of between them. */
  .hero-title{justify-content:flex-end;padding-bottom:5vh}
  .slot{grid-template-columns:1fr;padding-bottom:56px}
  /* The object takes the top of the sheet, the copy the bottom. */
  .slot.open{padding-top:44vh;min-height:auto}
  /* Reserved rows: copy on top, the growing stack in the lower half. */
  .slot.reserved{min-height:100vh;min-height:100svh;padding-top:10vh}
  .slot-head{margin-bottom:28px;gap:6px 14px}
  .slot-status{flex-basis:100%}
  .slot-body{gap:24px}
}
@media(max-width:760px){
  :root{--bar:58px}
  .brand{font-size:21px}.brand span{font-size:8px;margin-top:5px}
  .hero-title{font-size:clamp(72px,23vw,140px)}
  .spec div{padding:11px 12px}dd{font-size:15px}
  .skin{width:46px;height:46px}
  .cta{padding:14px 18px 14px 20px;font-size:14px}
  footer{padding-bottom:26px;min-height:80vh}
}
@media(max-width:420px){.bar-index small{display:none}}
@media(max-width:350px){.spec{grid-template-columns:1fr}dd{white-space:normal}}
@media(prefers-reduced-motion:reduce){.hero-scroll span,.slot-status i{animation:none}.skin,.cta,.cta span,#stage{transition:none}}
.missing .slot-actions .bar-link{margin-left:0}