/* CLYUS v4 — THE ARCHIVE.

   A bone ground with a weight-900 grotesque display, numbered catalogue rows and
   big work plates. The dark plate survives only where the footage lives.

   Two rules this file exists to keep:
   - Display type is a heavy grotesque, never a Didone. A high-contrast serif's
     hairlines cannot survive light-on-dark at size; that is structural, not a
     tuning problem.
   - Every hot colour used for TYPE is measured against the ground first. On bone,
     #8b8578 is 3.25:1 and #d8400c is 3.99:1 — both under the 4.5 AA floor for the
     12px mono used in the rail, kickers and meta. The values below are measured.
*/

:root{
  --bone:#f4f1e9;            /* the ground */
  --bone-2:#eae6db;          /* panel */
  --rule:#d9d3c5;
  --ink:#0d0c0a;             /* type */
  --ink-2:#57534a;           /* secondary type */
  --ink-3:#6b6559;           /* meta type — 5.12:1 on bone; #8b8578 measured 3.25 */
  --plate:#0b0b0c;           /* the dark plate the footage sits on */
  --plate-2:#141416;
  --hot:#ff5a1f;             /* molten orange, straight off the film */
  --hot-ink:#b53608;         /* the hot hue at 5.32:1 on bone; #d8400c measured 3.99 */

  --sans:"Archivo","Helvetica Neue",Arial,sans-serif;
  --mono:"Martian Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  --max:1320px;
  --gut:clamp(18px,4vw,64px);
  --bar:44px;
  --snap:cubic-bezier(.2,.9,.25,1);
  --ease:cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--bone);color:var(--ink);
  font-family:var(--sans);font-variation-settings:"wght" 400;
  font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;
  padding-top:var(--bar);
}
img,video{max-width:100%;display:block}
a{color:inherit}
::selection{background:var(--hot);color:#fff}
:focus-visible{outline:2px solid var(--hot);outline-offset:3px}
.plate :focus-visible,.reel :focus-visible{outline-color:var(--bone)}

.wrap{width:min(var(--max),100% - 2*var(--gut));margin-inline:auto}
.skip{position:fixed;top:-90px;left:14px;z-index:400;background:var(--ink);color:var(--bone);
  padding:11px 18px;font-family:var(--mono);font-size:12px;text-transform:uppercase;letter-spacing:.08em}
.skip:focus{top:calc(var(--bar) + 10px)}

/* ── TOP RAIL ─────────────────────────────────────────────────────────────
   One line: the name, the pages, the state. Nothing else. */
.rail{position:fixed;top:0;left:0;right:0;z-index:200;height:var(--bar);
  display:flex;align-items:center;gap:clamp(14px,2vw,30px);padding:0 var(--gut);
  /* explicit rgba, never color-mix(var(--x), transparent): if the var is ever
     redefined that resolves fully transparent and the rail ships invisible. */
  background:rgba(244,241,233,.88);
  backdrop-filter:saturate(1.4) blur(14px);
  border-bottom:1px solid var(--rule);
  font-family:var(--mono);font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.rail .brand{font-family:var(--sans);font-variation-settings:"wght" 900;font-size:18px;
  letter-spacing:-.01em;text-transform:none;color:var(--ink);text-decoration:none;line-height:1}
/* The nav was display:none below 860px, which left a phone with no route to
   /work, /studio or /contact at all — the wordmark was the entire header. Three
   short mono labels fit beside the brand even at 320px, so the nav now exists at
   every width; only the .state tagline stays desktop-only. Each link is a
   full-height touch target (the 44px rail itself), not a 12px text sliver. */
.rail nav{display:inline-flex;gap:clamp(12px,1.6vw,24px);margin-left:auto}
.rail nav a{text-decoration:none;color:var(--ink-3);border-bottom:1px solid transparent;
  display:inline-flex;align-items:center;height:var(--bar);
  transition:color .2s,border-color .2s}
.rail nav a:hover,.rail nav a[aria-current="page"]{color:var(--ink);border-color:var(--hot)}
.rail .sp{flex:1}
.rail .state{display:none}
@media (min-width:860px){.rail .state{display:inline}}
@media (max-width:560px){
  .rail{gap:12px;font-size:11px;letter-spacing:.04em}
  .rail .brand{font-size:16px}
  .rail nav{gap:11px}
}

/* ── THE DARK PLATE · hero footage ───────────────────────────────────────
   The only black on the site. It exists because the drip footage needs it. */
.plate{position:relative;background:var(--plate);color:var(--bone);overflow:hidden;
  min-height:clamp(520px,calc(100svh - var(--bar)),920px);display:grid;align-items:end}
.plate video,.plate img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.plate::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(105deg,rgba(9,9,10,.94) 0%,rgba(9,9,10,.72) 34%,rgba(9,9,10,.12) 62%,rgba(9,9,10,.42) 100%)}
.plate .inner{position:relative;z-index:2;width:min(var(--max),100% - 2*var(--gut));margin-inline:auto;
  padding-block:clamp(40px,7vw,96px)}
.plate .eyebrow{font-family:var(--mono);font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--hot);margin:0 0 clamp(16px,2vw,26px)}
.plate h1{margin:0;font-variation-settings:"wght" 900;font-size:clamp(64px,13.5vw,196px);
  line-height:.84;letter-spacing:-.045em;text-transform:uppercase}
.plate .say{margin:clamp(18px,2.4vw,30px) 0 0;max-width:34ch;font-size:clamp(17px,1.35vw,21px);
  line-height:1.5;color:#cfcabf}

/* ── BUTTONS ─────────────────────────────────────────────────────────────
   A button is a rectangle with a label. No machined rings, no knurling. */
.btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:clamp(22px,3vw,34px)}
.btn{display:inline-flex;align-items:center;gap:10px;padding:13px 22px;text-decoration:none;
  font-family:var(--mono);font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;
  border:1px solid currentColor;color:var(--bone);transition:background .2s,color .2s,border-color .2s}
.btn:hover{background:var(--bone);color:var(--ink);border-color:var(--bone)}
.btn--hot{background:var(--hot);border-color:var(--hot);color:#0d0c0a}
.btn--hot:hover{background:#fff;border-color:#fff;color:var(--ink)}
.btn--ink{color:var(--ink);border-color:var(--ink)}
.btn--ink:hover{background:var(--ink);color:var(--bone)}

/* ── SECTIONS on the bone ground ────────────────────────────────────────── */
.sec{padding:clamp(56px,7vw,110px) 0}
.sec + .sec{border-top:1px solid var(--rule)}
.kicker{font-family:var(--mono);font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);margin:0 0 clamp(20px,2.4vw,34px);display:flex;gap:14px;align-items:baseline}
.kicker b{color:var(--hot-ink);font-variation-settings:"wght" 500}
h2.big{margin:0;font-variation-settings:"wght" 900;font-size:clamp(38px,6.4vw,92px);
  line-height:.9;letter-spacing:-.035em;text-transform:uppercase;max-width:16ch}
.lede{margin:clamp(18px,2vw,26px) 0 0;max-width:52ch;font-size:clamp(17px,1.25vw,20px);
  line-height:1.55;color:var(--ink-2)}

/* ── THE NUMBERED INDEX ──────────────────────────────────────────────────
   Straight from the reference: a rule, a numeral, a huge label, a count. */
.index{margin-top:clamp(30px,4vw,54px);border-top:1px solid var(--rule)}
/* On a phone this was a 2-column grid, which threw the numeral, the title, the
   description and the count into alternating cells and wrapped the description
   every three words. Below 900px a row is simply a stack. */
/* The hover used to animate padding-inline, which reflows every row in the list
   on each mouse move. The inset is now RESERVED permanently and cancelled with a
   matching negative margin, so the rows still sit flush with the section heading
   and hover only paints. The nudge moved to a transform on the number. */
.index a,.index .row{display:block;padding:clamp(20px,2.6vw,34px) clamp(8px,1.4vw,20px);
  margin-inline:calc(-1 * clamp(8px,1.4vw,20px));
  border-bottom:1px solid var(--rule);text-decoration:none;color:inherit;
  transition:background .25s}
.index .n{display:inline-block;margin-bottom:8px}
.index a:hover{background:var(--bone-2)}
.index a .n{transition:transform .25s}
.index a:hover .n{transform:translateX(4px)}
.index .n{font-family:var(--mono);font-size:12.5px;color:var(--hot-ink);letter-spacing:.06em}
.index h3{margin:0;font-variation-settings:"wght" 900;font-size:clamp(30px,4.6vw,62px);
  line-height:.94;letter-spacing:-.035em;text-transform:uppercase}
.index p{margin:8px 0 0;max-width:56ch;color:var(--ink-2);font-size:16px;line-height:1.5}
.index .meta{font-family:var(--mono);font-size:12px;color:var(--ink-3);letter-spacing:.06em;
  text-transform:uppercase;margin-top:10px;display:block}
@media (min-width:900px){
  /* 32ch could not hold a 62px display line: "CHARACTER COLLECTIONS" needs ~600px
     and was running straight over the description column. Give the title a real
     share of the row and step the size down to match. */
  .index a,.index .row{display:grid;align-items:baseline;
    grid-template-columns:auto minmax(0,44%) minmax(0,1fr) auto;
    column-gap:clamp(20px,3vw,56px)}
  .index .n{margin-bottom:0}
  .index h3{font-size:clamp(26px,3.1vw,44px)}
  .index .meta{margin-top:0;text-align:right;white-space:nowrap;align-self:center}
}

/* ── WORK GRID ───────────────────────────────────────────────────────────
   Big plates on bone. The work is the loudest thing on the page. */
.grid{display:grid;gap:clamp(14px,1.8vw,28px);margin-top:clamp(28px,3.4vw,46px)}
@media (min-width:760px){.grid{grid-template-columns:repeat(6,1fr)}
  .grid a{grid-column:span 3}
  .grid a.w2{grid-column:span 2}.grid a.w3{grid-column:span 3}
  .grid a.w4{grid-column:span 4}.grid a.w6{grid-column:span 6}}
.grid a{display:block;text-decoration:none;color:inherit;align-self:start}
.grid .shot{position:relative;overflow:hidden;background:var(--bone-2);border:1px solid var(--rule)}
.grid img,.grid video{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.grid a:hover img,.grid a:hover video{transform:scale(1.03)}
.grid .slate{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:12px 2px 0;
  font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.grid .slate b{color:var(--ink);font-variation-settings:"wght" 500}

/* ── THE SHOWREEL ────────────────────────────────────────────────────────
   Presented at plate size, not wall size: the footage is 720p at source, and a
   full-bleed box blew it up 2x. */
.reel{background:var(--plate);padding:0 0 clamp(20px,2.4vw,34px)}
.reel .fr{position:relative;aspect-ratio:16/9;overflow:hidden;background:#000;width:100%}
/* CONTAIN, not cover. Inside the 16:9 frame the two are identical, but in
   FULLSCREEN the video element keeps this rule and a 16:10 MacBook screen made
   `cover` crop ~6% off both sides — Nadav: "when i full screen it, its a bit
   zoomed in". The film is framed edge to edge at 1920x1080; nothing may crop it. */
.reel video{width:100%;height:100%;object-fit:contain;background:#000}
.reel video:fullscreen,.reel video:-webkit-full-screen{object-fit:contain;background:#000}
.reel .bar{width:min(var(--max),100% - 2*var(--gut));margin:16px auto 0;display:flex;align-items:center;
  flex-wrap:wrap;gap:12px 16px;font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:#8b8578}
@media (max-width:640px){.reel .bar .note{display:none}.reel .bar{row-gap:10px}}
.reel .bar b{color:var(--bone);font-variation-settings:"wght" 500}
.play{display:inline-flex;align-items:center;gap:11px;background:none;border:1px solid #3a3a3d;color:var(--bone);
  padding:9px 16px;font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;
  cursor:pointer;transition:background .2s,border-color .2s,color .2s}
.play:hover{background:var(--hot);border-color:var(--hot);color:#0d0c0a}
.play i{width:0;height:0;border-left:9px solid currentColor;border-top:6px solid transparent;
  border-bottom:6px solid transparent}
.reel.playing .bar{opacity:0;pointer-events:none;transition:opacity .3s}

/* ── LOT PAGE ────────────────────────────────────────────────────────────── */
.lot{padding:clamp(30px,4vw,56px) 0 clamp(56px,7vw,100px)}
.lot .top{display:grid;gap:clamp(20px,2.6vw,38px);margin-bottom:clamp(28px,3.4vw,50px)}
@media (min-width:960px){.lot .top{grid-template-columns:minmax(0,58fr) minmax(0,42fr);align-items:end}}
.lot h1{margin:0;font-variation-settings:"wght" 900;font-size:clamp(40px,6.6vw,96px);
  line-height:.9;letter-spacing:-.04em;text-transform:uppercase}
.spec{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 26px;padding-top:16px;}
@media (max-width:440px){.spec{grid-template-columns:1fr;gap:12px}}
.spec{
  border-top:1px solid var(--rule);font-family:var(--mono);font-size:12px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-3)}
.spec b{display:block;margin-top:4px;color:var(--ink);font-variation-settings:"wght" 500}
.gal{display:grid;gap:clamp(12px,1.6vw,24px)}
@media (min-width:900px){.gal{grid-template-columns:repeat(6,1fr)}
  .gal figure{grid-column:span 3}.gal figure.w{grid-column:span 6}}
.gal figure{margin:0;border:1px solid var(--rule);background:var(--bone-2);overflow:hidden}
.gal img,.gal video{width:100%;height:auto}
.gal figcaption{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-3);padding:10px 12px;border-top:1px solid var(--rule)}
.gal figure.px img{image-rendering:pixelated}

/* ── FOOTER ──────────────────────────────────────────────────────────────── */
.foot{border-top:1px solid var(--rule);padding:clamp(40px,5vw,72px) 0 clamp(28px,3vw,44px)}
.foot .row{display:grid;gap:clamp(20px,3vw,44px)}
@media (min-width:820px){.foot .row{grid-template-columns:minmax(0,1fr) auto;align-items:end}}
.foot h2{margin:0;font-variation-settings:"wght" 900;font-size:clamp(30px,4.4vw,60px);
  line-height:.94;letter-spacing:-.035em;text-transform:uppercase;max-width:16ch}
.foot .meta{margin-top:clamp(30px,4vw,54px);padding-top:18px;border-top:1px solid var(--rule);
  display:flex;flex-wrap:wrap;gap:8px 22px;font-family:var(--mono);font-size:12px;
  letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}

/* ── REVEALS ─────────────────────────────────────────────────────────────── */
.rv{opacity:0;transform:translateY(16px)}
.rv.in{opacity:1;transform:none;transition:opacity .05s linear,transform .8s var(--ease)}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none}}
@media print{.rail{display:none}body{padding-top:0}}


/* ── THE ARCHIVE LIST ─────────────────────────────────────────────────────
   Home shows the archive as an index you read down, and each row opens that
   drop. A thumbnail rides on the right so the row still shows the work. */
.arch a{display:grid;grid-template-columns:auto 1fr auto;gap:clamp(14px,2vw,32px);
  align-items:center;padding:clamp(14px,1.6vw,22px) clamp(8px,1.4vw,18px);
  margin-inline:calc(-1 * clamp(8px,1.4vw,18px));border-bottom:1px solid var(--rule);
  text-decoration:none;color:inherit;transition:background .25s}
.arch{border-top:1px solid var(--rule);margin-top:clamp(26px,3vw,44px)}
.arch a:hover{background:var(--bone-2)}
.arch a .n{transition:transform .25s}
.arch a:hover .n{transform:translateX(4px)}
.arch .n{font-family:var(--mono);font-size:12.5px;color:var(--hot-ink);letter-spacing:.06em}
.arch h3{margin:0;font-variation-settings:"wght" 900;font-size:clamp(22px,2.9vw,40px);
  line-height:1;letter-spacing:-.03em;text-transform:uppercase}
.arch .k{display:block;margin-top:6px;font-size:15px;color:var(--ink-2);line-height:1.4;max-width:60ch}
.arch .thumb{width:clamp(74px,9vw,132px);aspect-ratio:16/10;overflow:hidden;background:var(--bone-2);
  border:1px solid var(--rule)}
.arch .thumb img,.arch .thumb video{width:100%;height:100%;object-fit:cover}
.arch .ch{display:none}
@media (min-width:900px){
  .arch a{grid-template-columns:auto minmax(0,1fr) auto auto}
  .arch .ch{display:block;font-family:var(--mono);font-size:12px;color:var(--ink-3);
    letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
}