:root{
  --ink:#0a0b0c;
  --ink-2:#111315;
  --line:rgba(255,255,255,.12);
  --bone:#e9e4da;
  --sand:#c8b49a;
  --navy:#1c2440;
  --mist:#8b9096;
  --mint:#7fd6b8;
  --pad:clamp(20px,4vw,56px);
  --display:'Unbounded',system-ui,sans-serif;
  --body:'Manrope',system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--ink);color:var(--bone);font-family:var(--body);font-weight:300;line-height:1.6;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

.label{font-family:var(--mono);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--mist)}
.body{color:var(--mist);max-width:44ch}
h2{font-family:var(--display);font-weight:500;font-size:clamp(1.6rem,4.2vw,3.4rem);line-height:1.08;letter-spacing:-.02em}

/* NAV */
.nav{position:fixed;inset:0 0 auto 0;z-index:50;display:flex;justify-content:space-between;align-items:center;padding:18px var(--pad);mix-blend-mode:difference;color:#fff}
.mark{display:block}
.mark img{height:clamp(18px,2.4vw,24px);width:auto}
.mark span{font-family:var(--display);font-weight:700;font-size:.95rem;letter-spacing:.02em}
.nav nav{display:flex;gap:clamp(16px,3vw,36px);font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase}
.nav a{opacity:.85;transition:opacity .2s}
.nav a:hover{opacity:1}

/* HERO */
.hero{height:260vh;position:relative}
.hero__stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;perspective:1200px;display:grid;place-items:center;background:radial-gradient(120% 90% at 70% 20%,#1a1f2c 0%,var(--ink) 60%)}
.hero__bg,.hero__figure{position:absolute;inset:-6% 0;will-change:transform}
.hero__bg img,.hero__figure img{width:100%;height:100%;object-fit:cover}
.hero__bg img{opacity:.38;filter:saturate(.7) contrast(1.05)}
.hero__figure{inset:12vh 4vw 0 auto;width:min(38vw,520px)}
.hero__figure video{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 20%;background:#0d0f14;-webkit-mask-image:linear-gradient(180deg,#000 62%,transparent);mask-image:linear-gradient(180deg,#000 62%,transparent)}
.hero__grain{position:absolute;inset:0;pointer-events:none;opacity:.18;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
.hero__title{position:relative;z-index:2;font-family:var(--display);font-weight:700;font-size:clamp(2.6rem,9.4vw,8.6rem);line-height:.96;letter-spacing:-.04em;text-transform:uppercase;padding:0 var(--pad);width:100%;will-change:transform,opacity;transform-style:preserve-3d}
.line{display:block;overflow:hidden;padding-bottom:.06em}
.line>span{display:block}
.line--dim{color:transparent;-webkit-text-stroke:1px rgba(233,228,218,.7)}
.hero__meta{position:absolute;left:var(--pad);bottom:28px;display:flex;align-items:center;gap:14px;font-family:var(--mono);font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--mist)}
.hero__meta i{display:block;width:64px;height:1px;background:var(--mist);transform-origin:left;animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{50%{transform:scaleX(.3)}}

/* SECTIONS */
section{position:relative}
.section-head{padding:clamp(80px,14vw,180px) var(--pad) clamp(40px,6vw,80px);display:grid;gap:22px}

/* ARCHIVE */
.archive{perspective:1600px;background:var(--ink)}
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(14px,2vw,28px);padding:0 var(--pad) clamp(80px,12vw,160px)}
.card{position:relative;grid-column:span 6;cursor:pointer;transform-style:preserve-3d;will-change:transform;text-align:left;display:block}
.card:nth-child(3n+2){grid-column:span 5;margin-top:clamp(40px,10vw,140px)}
.card:nth-child(3n+3){grid-column:span 7}
.card__plate{position:relative;aspect-ratio:4/5;overflow:hidden;background:linear-gradient(160deg,var(--navy),#0d0f14 70%);border:1px solid var(--line);transform:translateZ(0)}
.card:nth-child(3n+1) .card__plate{background:linear-gradient(160deg,#2a2620,#0d0f14 70%)}
.card:nth-child(3n+3) .card__plate{background:linear-gradient(160deg,#17191c,#08090a 70%)}
.card__plate img{position:absolute;inset:-8% 0;width:100%;height:116%;object-fit:cover;will-change:transform}
.card__plate::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(0,0,0,.55));pointer-events:none}
.card__no{position:absolute;top:16px;left:16px;z-index:2;font-family:var(--mono);font-size:.7rem;letter-spacing:.16em;color:var(--bone)}
.card__state{position:absolute;top:16px;right:16px;z-index:2;font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;padding:5px 9px;border:1px solid var(--line);backdrop-filter:blur(6px)}
.card__state[data-s="available"]{color:var(--mint);border-color:rgba(127,214,184,.45)}
.card__state[data-s="collected"]{color:var(--mist)}
.card__info{display:flex;justify-content:space-between;gap:16px;padding:16px 2px 0;transform:translateZ(30px)}
.card__name{font-family:var(--display);font-weight:500;font-size:clamp(.95rem,1.4vw,1.2rem);letter-spacing:-.01em}
.card__ed{font-family:var(--mono);font-size:.74rem;color:var(--mist);white-space:nowrap;transition:color .2s}
.card:hover .card__ed{color:var(--mint)}
.card__name small{font-family:var(--body);font-weight:300;color:var(--mist);font-size:.8em}
.card__state[data-s="motion"]{color:var(--bone)}
/* white-background flat lays sit on a bone plate, so they read as paper tiles */
.card[data-tone="light"] .card__plate{background:var(--bone);border-color:transparent}
.card[data-tone="light"] .card__plate img{mix-blend-mode:multiply}
.card[data-tone="light"] .card__plate::after{display:none}
.card[data-tone="light"] .card__no{color:var(--ink)}

/* Honest label for AI-generated mock-up clips */
.concept-tag{position:absolute;right:10px;bottom:10px;z-index:3;font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--bone);background:rgba(10,11,12,.7);border:1px solid var(--line);padding:5px 9px;backdrop-filter:blur(6px)}
.concept-tag--stage{right:var(--pad);bottom:28px}

/* IN MOTION (scroll-scrubbed interlude) */
.motion{height:260vh;position:relative;background:var(--ink)}
.motion__stage{position:sticky;top:0;height:100vh;height:100svh;display:grid;place-items:center;overflow:hidden}
.motion__stage video{display:block;height:min(88svh,calc(100vw * 4 / 3));aspect-ratio:3/4;max-width:100%;object-fit:cover;background:#0d0f14;border:1px solid var(--line)}
.motion__label{position:absolute;left:var(--pad);bottom:28px}

/* COLLECTORS / REQUEST */
.collectors{padding:clamp(90px,14vw,200px) var(--pad);background:var(--ink-2);border-block:1px solid var(--line);perspective:1400px}
.collectors__inner{display:grid;gap:24px;max-width:760px;transform-origin:50% 100%}
.request{padding:clamp(100px,16vw,220px) var(--pad);display:grid;gap:34px;justify-items:start}
.btn{display:inline-block;font-family:var(--mono);font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;padding:16px 26px;border:1px solid var(--bone);transition:background .25s,color .25s,transform .25s}
.btn:hover{background:var(--bone);color:var(--ink)}
.btn--solid{background:var(--bone);color:var(--ink)}
.btn--solid:hover{background:var(--mint);border-color:var(--mint)}

.footer{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;padding:28px var(--pad);border-top:1px solid var(--line);font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--mist)}

/* SHEET (piece overlay: 3D push-in) */
.sheet{position:fixed;inset:0;z-index:100;display:grid;place-items:center;background:rgba(5,6,7,.82);backdrop-filter:blur(10px);perspective:1800px;opacity:0;visibility:hidden}
.sheet__panel{position:relative;width:min(1100px,92vw);max-height:92vh;overflow:auto;display:grid;grid-template-columns:1.05fr 1fr;background:var(--ink-2);border:1px solid var(--line);transform-origin:50% 50%}
.sheet__media{background:#0c0d0f;min-height:320px;position:relative}
.sheet__media>img,.sheet__media>video{width:100%;height:100%;object-fit:cover;aspect-ratio:4/5;display:block}
.sheet__media>video{position:absolute;inset:0;background:#000}
.sheet__media[data-tone="light"]{background:var(--bone)}
.sheet__media[data-tone="light"]>img{mix-blend-mode:multiply}
.thumbs{position:absolute;left:12px;right:12px;bottom:12px;display:flex;gap:8px;z-index:2;overflow-x:auto}
.thumbs button{flex:0 0 52px;height:52px;border:1px solid var(--line);background:#000;padding:0;opacity:.6;transition:opacity .2s,border-color .2s}
.thumbs button[aria-current="true"],.thumbs button:hover{opacity:1;border-color:var(--bone)}
.thumbs img{width:100%;height:100%;object-fit:cover}
:focus-visible{outline:2px solid var(--mint);outline-offset:3px}
.sheet__body{padding:clamp(24px,4vw,52px);display:grid;gap:20px;align-content:center}
.sheet__body h3{font-family:var(--display);font-weight:500;font-size:clamp(1.4rem,2.6vw,2.2rem);letter-spacing:-.02em;line-height:1.1}
.specs{display:grid;grid-template-columns:auto 1fr;gap:8px 22px;font-size:.88rem;border-top:1px solid var(--line);padding-top:18px}
.specs dt{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mist);padding-top:2px}
.sheet__close{position:absolute;top:14px;right:16px;z-index:3;font-family:var(--mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;padding:8px 12px;background:rgba(10,11,12,.7);border:1px solid var(--line)}

/* MOBILE */
@media (max-width:820px){
  .grid{grid-template-columns:1fr}
  .card,.card:nth-child(3n+2),.card:nth-child(3n+3){grid-column:auto;margin-top:0}
  .hero{height:220vh}
  .hero__figure{width:80vw;opacity:.55}
  .sheet__panel{grid-template-columns:1fr}
  .sheet__media img{aspect-ratio:1/1}
}

/* REDUCED MOTION */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .hero{height:100vh}
  .motion{height:100vh}
  .hero__meta i{animation:none}
}