/* ════════════════════════════════════════════════════════════════
   JRG—MADRID.DEV — ISSUE 02
   brutalist editorial / graphic realism
   no framework. modern CSS only.
   ────────────────────────────────────────────────────────────────
   0.0  font faces
   0.1  tokens & reset
   0.2  utilities
   0.3  atmosphere (noise / grid overlay / progress / cursor / rails)
   1.0  masthead
   2.0  hero
   3.0  ticker
   4.0  section head
   5.0  works
   6.0  spec
   7.0  statement
   8.0  contact
   9.0  colophon
   10.0 motion & media
   ════════════════════════════════════════════════════════════════ */

/* ── 0.0 FONT FACES ─────────────────────────────────────────── */
/* self-hosted, subsetted, name-stripped cuts — see scripts/build-fonts.sh.
   "D" Aktiv Grotesk Ex (extended, display voice) · "S" Aktiv Grotesk
   (normal width, body voice) · "M" Pitch (mono voice).                  */

@font-face{
  font-family:"D"; font-weight:700; font-style:normal; font-display:swap;
  src:url("../fonts/c8baef27.woff2") format("woff2");
}
@font-face{
  font-family:"S"; font-weight:400; font-style:normal; font-display:swap;
  src:url("../fonts/a31f83e4.woff2") format("woff2");
}
@font-face{
  font-family:"S"; font-weight:500; font-style:normal; font-display:swap;
  src:url("../fonts/8f72a869.woff2") format("woff2");
}
@font-face{
  font-family:"M"; font-weight:400; font-style:normal; font-display:swap;
  src:url("../fonts/cb052f6c.woff2") format("woff2");
}
@font-face{
  font-family:"M"; font-weight:700; font-style:normal; font-display:swap;
  src:url("../fonts/70fd4fb0.woff2") format("woff2");
}

/* ── 0.1 TOKENS & RESET ─────────────────────────────────────── */

:root{
  /* EDIT: the whole identity lives in these six lines */
  --paper:   #ECE9E2;                 /* bone (hex fallback)     */
  --ink:     #1B1A17;                 /* warm near-black         */
  --mark:    #C8291D;                 /* kruger red — the mark   */
  --signal:  #0083B8;                 /* process cyan (blueline) */
  --on-mark: #F4F1EA;                 /* text sitting on red     */
  --paper:   oklch(0.94 0.012 95);
  --ink:     oklch(0.17 0.006 90);
  --mark:    oklch(0.55 0.22 27);
  --signal:  oklch(0.6 0.13 235);
  --on-mark: oklch(0.96 0.01 95);

  --hair:    color-mix(in oklch, var(--ink) 26%, var(--paper));
  --ink-60:  color-mix(in oklch, var(--ink) 60%, var(--paper));

  --font-d: "S", "Helvetica Neue", system-ui, sans-serif;
  --font-x: "D", "Helvetica Neue", system-ui, sans-serif;
  --font-m: "M", ui-monospace, "SF Mono", monospace;

  --pad:    clamp(1rem, 3vw, 2.5rem);
  --head-h: 3.5rem;

  color-scheme: light;
}

/* INVERT — pure CSS theme swap, driven by the hidden checkbox */
html:has(#t-invert:checked){
  --paper: #191814;
  --ink:   #F2EFE7;
  --paper: oklch(0.16 0.006 90);
  --ink:   oklch(0.95 0.012 95);
  color-scheme: dark;
}

*,*::before,*::after{ margin:0; padding:0; box-sizing:border-box; }

html{
  scrollbar-width:thin;
  scrollbar-color:var(--ink) var(--paper);
}
::-webkit-scrollbar{ width:10px; }
::-webkit-scrollbar-track{ background:var(--paper); border-left:1px solid var(--hair); }
::-webkit-scrollbar-thumb{ background:var(--ink); }

body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-d);
  font-size:1rem;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
  cursor:crosshair; /* instrument, not decoration */
}

main{ overflow:clip; }

section{ scroll-margin-top:var(--head-h); }

a{ color:inherit; text-decoration:none; }
a:any-link{ cursor:pointer; }

::selection{ background:var(--mark); color:var(--on-mark); }

:focus-visible{ outline:2px solid var(--signal); outline-offset:3px; }

/* ── 0.2 UTILITIES ──────────────────────────────────────────── */

/* mono microcopy — the annotation layer */
.mono{
  font-family:var(--font-m);
  font-size:0.6875rem;
  font-weight:400;
  letter-spacing:0.08em;
  line-height:1.5;
  text-transform:uppercase;
}

/* display voice — aktiv grotesk ex, tight */
.display{
  font-family:var(--font-x);
  font-weight:700;
  text-transform:uppercase;
  line-height:0.78;
  letter-spacing:-0.015em;
}

/* hollow type — stroke follows theme; ancestors may override via --ol
   (fallback, not self-set: a --ol declared here would beat the ancestor) */
.outline{
  color:transparent;
  -webkit-text-stroke:clamp(1.5px, 0.28vw, 4px) var(--ol, var(--ink));
}

.vh{
  position:absolute; width:1px; height:1px;
  clip-path:inset(50%); overflow:hidden; white-space:nowrap;
}

.skip{
  position:fixed; top:0.5rem; left:0.5rem; z-index:200;
  background:var(--mark); color:var(--on-mark);
  padding:0.4rem 0.8rem; transform:translateY(-300%);
}
.skip:focus{ transform:none; }

/* ── 0.3 ATMOSPHERE ─────────────────────────────────────────── */

/* film grain */
.noise{
  position:fixed; inset:0; z-index:90; pointer-events:none;
  opacity:0.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* exposed 12-col grid — toggle [GRID] */
.grid-overlay{
  position:fixed; inset:var(--head-h) 0 0 0; z-index:80;
  display:grid; grid-template-columns:repeat(12, 1fr);
  gap:var(--pad); padding-inline:var(--pad);
  pointer-events:none; opacity:0; transition:opacity 0.2s;
}
.grid-overlay i{ border-inline:1px solid color-mix(in oklch, var(--signal) 55%, transparent); }
html:has(#t-grid:checked) .grid-overlay{ opacity:1; }

/* scroll progress hairline — scroll-driven animation where supported */
.progress{
  position:fixed; top:var(--head-h); left:0; z-index:85;
  width:100%; height:2px; background:var(--mark);
  transform:scaleX(0); transform-origin:0 50%;
}

/* instrument cursor — box + coordinate readout */
.cursor{ display:none; }
@media (hover:hover) and (pointer:fine){
  .cursor{
    display:block; position:fixed; top:0; left:0; z-index:100;
    pointer-events:none; mix-blend-mode:difference; color:#fff;
    opacity:0; /* revealed on first pointermove (.is-live) */
  }
  .cursor.is-live{ opacity:1; }
  .cursor__box{
    position:absolute; width:14px; height:14px;
    border:1.5px solid #fff; transform:translate(-50%, -50%);
  }
  .cursor__read{
    position:absolute; left:16px; top:10px;
    font-size:0.5625rem; color:#fff; white-space:nowrap;
  }
}

/* vertical side rails */
.rail{
  position:fixed; top:50%; z-index:60;
  writing-mode:vertical-rl; pointer-events:none;
  color:var(--ink-60); font-size:0.625rem;
}
.rail--l{ left:0.6rem;  transform:translateY(-50%) rotate(180deg); }
.rail--r{ right:0.6rem; transform:translateY(-50%); }

/* ── 1.0 MASTHEAD ───────────────────────────────────────────── */

.site-head{
  position:fixed; top:0; left:0; right:0; z-index:70;
  height:var(--head-h);
  display:grid; align-items:center; gap:var(--pad);
  grid-template-columns:auto auto 1fr auto auto;
  padding-inline:var(--pad);
  background:var(--paper);
  border-bottom:1px solid var(--hair);
}

.site-head__brand{
  font-family:var(--font-x);
  font-weight:700;
  font-size:1.05rem; letter-spacing:-0.01em; white-space:nowrap;
}
.site-head__brand sup{ font-size:0.5em; margin-left:0.1em; }
.site-head__brand:hover{ background:var(--mark); color:var(--on-mark); }

.site-head__issue{ color:var(--ink-60); }

.site-head__nav{ display:flex; gap:1.6rem; justify-self:center; }
.site-head__nav em{ font-style:normal; opacity:0.45; margin-right:0.5em; }
.site-head__nav a{ padding:0.15rem 0.2rem; }
/* dim siblings — :has() */
.site-head__nav:has(a:hover) a:not(:hover){ opacity:0.35; }
.site-head__nav a:hover{ background:var(--mark); color:var(--on-mark); opacity:1; }

.site-head__loc{ text-align:right; color:var(--ink-60); }
.js-clock{ color:var(--ink); font-weight:700; }

.site-head__tools{ display:flex; gap:0.4rem; }
.site-head__tools label{
  border:1px solid var(--hair); padding:0.3rem 0.6rem;
  cursor:pointer; user-select:none;
}
.site-head__tools label:hover{ border-color:var(--ink); }
html:has(#t-grid:checked)   .site-head__tools label[for="t-grid"],
html:has(#t-invert:checked) .site-head__tools label[for="t-invert"]{
  background:var(--mark); color:var(--on-mark); border-color:var(--mark);
}

/* ── 2.0 HERO ───────────────────────────────────────────────── */

.hero{
  position:relative;
  min-height:100svh;
  padding-top:var(--head-h);
  display:grid;
  grid-template-columns:repeat(12, 1fr);
  grid-template-rows:auto 1fr auto auto;
  column-gap:var(--pad);
  padding-inline:var(--pad);
  border-bottom:1px solid var(--hair);
}

.hero__title{
  grid-column:1 / -1; grid-row:1 / 2; z-index:2;
  font-size:clamp(4.5rem, 15.5vw, 17rem);
  padding-top:clamp(1rem, 4vh, 3rem);
}
.hero__line{ display:block; }
.hero__line--a sup{ font-size:0.14em; letter-spacing:0.08em; margin-left:0.4em; -webkit-text-stroke:0; }
.hero__line--b{ padding-left:1.2ch; } /* editorial stagger */

.hero__figwrap{
  grid-column:9 / 13; grid-row:1 / 3; z-index:1;
  align-self:center; justify-self:end;
  position:relative;
  width:min(100%, 30rem);
}
.fig--hero{ aspect-ratio:3 / 4; }

/* figure placeholder — halftone + crosshair; swap for real imagery */
.fig{
  position:relative; overflow:hidden;
  background:color-mix(in oklch, var(--ink) 88%, var(--paper));
}
.fig::before{ /* halftone dots */
  content:""; position:absolute; inset:0;
  background-image:radial-gradient(color-mix(in oklch, var(--paper) 55%, transparent) 1px, transparent 1.5px);
  background-size:7px 7px;
  opacity:0.5;
}
.fig::after{ /* registration cross */
  content:"+"; position:absolute; top:50%; left:50%;
  transform:translate(-50%, -50%);
  font-family:var(--font-m); font-size:1.6rem; color:var(--mark);
}
.fig__no{
  position:absolute; left:0.5rem; bottom:0.2rem;
  font-size:clamp(3rem, 6vw, 5.5rem);
  color:transparent; -webkit-text-stroke:1.5px color-mix(in oklch, var(--paper) 70%, transparent);
}
.fig__cap{
  position:absolute; left:0.5rem; top:0.5rem;
  background:var(--mark); color:var(--on-mark);
  padding:0.2rem 0.45rem; font-size:0.5625rem;
}

/* dithered artwork — figs/*.png via scripts/dither-figs.sh. applied as a
   mask so the screen prints in the mark red, on ink, in every theme */
.fig__art{
  position:absolute; inset:6%;
  background:var(--mark);
  -webkit-mask:var(--art) center / contain no-repeat;
  mask:var(--art) center / contain no-repeat;
}

/* rubber stamp — inked, static, slightly off-register like a real one */
.badge{
  position:absolute; top:-2.2rem; right:-2.2rem; z-index:3;
  width:clamp(5.5rem, 9vw, 7.5rem); height:auto;
  transform:rotate(-12deg);
  mix-blend-mode:multiply; opacity:0.92;
}
.badge__disc{ fill:none; stroke:var(--mark); stroke-width:3; }
.badge__ring{ fill:none; stroke:var(--mark); stroke-width:1; }
.badge__text{
  font-family:var(--font-m); font-size:10.5px; letter-spacing:2.2px;
  fill:var(--mark); text-transform:uppercase;
}
.badge__star{ font-size:2rem; fill:var(--mark); }

.hero__meta{
  grid-column:1 / 8; grid-row:3 / 4;
  align-self:end; padding-bottom:1.5rem;
}
.hero__intro{
  font-size:clamp(1.05rem, 1.6vw, 1.4rem);
  font-weight:500;
  line-height:1.35; max-width:34ch;
  text-wrap:balance;
  margin-bottom:1.6rem;
}
.hero__facts{ display:flex; gap:2.2rem; flex-wrap:wrap; }
.hero__facts dt{ color:var(--ink-60); margin-bottom:0.15rem; }
.hero__facts dd{ font-weight:700; }
.dot::before{
  content:"●"; color:var(--mark); margin-right:0.5em;
  -webkit-text-stroke:0.5px var(--on-mark);
}
.hero__foot{
  grid-column:1 / -1; grid-row:4 / 5;
  display:flex; justify-content:space-between; align-items:center;
  gap:1rem; padding-block:0.8rem;
  border-top:1px solid var(--hair);
  color:var(--ink-60);
}
.hero__cue{ color:var(--ink); }

/* barcode — layered rules */
.barcode{
  width:96px; height:24px; display:inline-block;
  background:
    repeating-linear-gradient(90deg, var(--ink) 0 2px, transparent 2px 4px),
    repeating-linear-gradient(90deg, var(--ink) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(90deg, var(--ink) 0 3px, transparent 3px 11px);
  opacity:0.85;
}

/* colour-control strip — press-sheet furniture (C M Y K + the mark + paper) */
.cbar{
  width:96px; height:14px; display:inline-block;
  border:1px solid var(--hair);
  background:linear-gradient(90deg,
    #0085C7 0 16.6%, #D5007F 16.6% 33.3%, #F9E300 33.3% 50%,
    var(--ink) 50% 66.6%, var(--mark) 66.6% 83.3%, var(--paper) 83.3% 100%);
}

/* ── 3.0 TICKER ─────────────────────────────────────────────── */

.ticker{
  border-bottom:1px solid var(--hair);
  overflow:hidden;
}
.ticker__track{
  display:flex; width:max-content;
  animation:marquee 24s linear infinite;
}
.ticker__track span{
  white-space:nowrap;
  font-size:clamp(0.85rem, 1.4vw, 1.1rem);
  font-weight:700;
  padding-block:0.55rem;
}
@keyframes marquee{ to{ transform:translateX(-50%); } }

/* ── 4.0 SECTION HEAD ───────────────────────────────────────── */

.sec-head{
  display:grid; grid-template-columns:6ch 1fr auto;
  align-items:end; gap:var(--pad);
  padding:1rem var(--pad) 0.9rem;
  border-bottom:1px solid var(--hair);
}
.sec-head__no{
  align-self:start; padding-top:0.6rem;
  border-top:2px solid var(--ink);
}
.sec-head__title{ font-size:clamp(2.4rem, 7.5vw, 7rem); }
.sec-head__meta{ color:var(--ink-60); padding-bottom:0.4rem; text-align:right; }

/* ── 5.0 WORKS ──────────────────────────────────────────────── */

.works{ position:relative; border-bottom:1px solid var(--hair); }

.work{
  display:grid;
  grid-template-columns:6ch 1fr auto 7ch 3ch;
  align-items:baseline; gap:var(--pad);
  padding:1.3rem var(--pad);
  border-bottom:1px solid var(--hair);
  cursor:pointer;
  transition:background 0.18s, color 0.18s;
}
/* rows mix <a> and <article>, so :last-of-type would also catch the last
   <a> mid-list — the final row is the one the preview block follows */
.work:has(+ .preview){ border-bottom:0; }
.work__idx{ color:var(--ink-60); transition:color 0.18s; }
.work__title{
  font-size:clamp(2.2rem, 6vw, 5.2rem);
  font-weight:700;
  transition:transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.work__tags{ color:var(--ink-60); transition:color 0.18s; }
.work__year{ text-align:right; }
.work__arrow{
  font-size:1.6rem; line-height:1; justify-self:end;
  transition:transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* full-bleed red inversion — kruger declaration */
.work:hover, .work:focus-visible{
  background:var(--mark); color:var(--on-mark);
}
.work:hover .work__idx,
.work:hover .work__tags,
.work:focus-visible .work__idx,
.work:focus-visible .work__tags{ color:color-mix(in oklch, var(--on-mark) 70%, var(--mark)); }
.work:hover .work__title, .work:focus-visible .work__title{
  transform:translateX(0.6rem);
}.work:hover .work__arrow, .work:focus-visible .work__arrow{
  transform:translate(0.3rem, -0.3rem);
}

/* cursor-followed figure preview */
.preview{
  position:fixed; top:0; left:0; z-index:65;
  width:min(240px, 22vw); aspect-ratio:4 / 5;
  pointer-events:none;
  opacity:0; scale:0.92;
  transition:opacity 0.22s, scale 0.22s;
}
.preview.is-on{ opacity:1; scale:1; }
.preview .fig{ position:absolute; inset:0; opacity:0; transition:opacity 0.18s; }
.preview .fig.is-active{ opacity:1; }

/* the red plate lands a hair off-register, then snaps true — once per
   impression, then dead still. the press, not ambience. */
.preview .fig.is-active .fig__art{
  animation:register 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
@keyframes register{
  from{ transform:translate(5px, -4px); }
  to{ transform:none; }
}

/* ── 6.0 SPEC ───────────────────────────────────────────────── */

.spec{
  border-bottom:1px solid var(--hair);
  container-type:inline-size; /* container queries demo */
}

.spec__grid{
  display:grid; grid-template-columns:1fr;
}
.spec__cell{
  position:relative;
  padding:1.8rem var(--pad) 2.4rem;
  border-bottom:1px solid var(--hair);
}
/* plate numeral — same register as the fig numbers, ghosted into the sheet */
.spec__no{
  position:absolute; top:0.7rem; right:0.8rem;
  font-size:clamp(3.2rem, 4.5vw, 5rem);
  line-height:0.8;
  color:transparent;
  -webkit-text-stroke:1.5px var(--hair);
}
.spec__head{
  font-weight:700; margin-bottom:1.1rem;
  border-bottom:1px solid var(--hair); padding-bottom:0.6rem;
}
.spec__list{ list-style:none; display:grid; gap:0.45rem; }
.spec__list li::before{
  content:"▪"; color:var(--mark);
  margin-right:0.7em;
  -webkit-text-stroke:0.5px var(--on-mark);
}

@container (min-width: 40rem){
  .spec__grid{ grid-template-columns:1fr 1fr; }
  .spec__cell:nth-child(odd){ border-right:1px solid var(--hair); }
  .spec__cell:nth-child(n+5){ border-bottom:0; }
}
@container (min-width: 64rem){
  .spec__grid{ grid-template-columns:repeat(3, 1fr); }
  .spec__cell{ border-bottom:0; border-right:1px solid var(--hair); }
  .spec__cell:nth-child(-n+3){ border-bottom:1px solid var(--hair); }
  .spec__cell:nth-child(3n){ border-right:0; }
}

/* ── 7.0 STATEMENT ──────────────────────────────────────────── */

.statement{
  background:var(--ink); color:var(--paper);
  padding:clamp(4rem, 14vh, 9rem) var(--pad);
  border-bottom:1px solid var(--hair);
}
.statement__kicker{ color:color-mix(in oklch, var(--paper) 55%, var(--ink)); margin-bottom:2rem; }
.statement__text{
  --ol:var(--paper);
  font-size:clamp(1.9rem, 5vw, 4.4rem);
  font-weight:700;
  line-height:1.02;
  max-width:22ch;
  text-wrap:balance;
}
.statement__text mark{
  background:var(--mark); color:var(--on-mark);
  padding:0 0.12em;
}

/* ── 8.0 CONTACT ────────────────────────────────────────────── */

.contact{ border-bottom:1px solid var(--hair); padding-bottom:2rem; }

.contact__ask{
  padding:clamp(2rem, 6vh, 4rem) var(--pad) 1rem;
  font-size:clamp(3.2rem, 11vw, 11rem);
}
.contact__ask span{ display:block; }
.contact__ask .outline{ padding-left:1ch; }

.contact__mail{
  display:flex; justify-content:space-between; align-items:center;
  gap:1rem;
  margin:0 var(--pad);
  padding:0.6rem 0.2rem;
  font-size:clamp(1.4rem, 5.8vw, 5.8rem);
  border-top:1px solid var(--hair);
  border-bottom:1px solid var(--hair);
  transition:background 0.18s, color 0.18s, padding 0.18s;
}
.contact__mail:hover{
  background:var(--mark); color:var(--on-mark);
  padding-inline:0.4rem;
}
.contact__arrow{ font-size:0.6em; }

.contact__socials{
  list-style:none;
  display:grid; grid-auto-flow:column; grid-auto-columns:1fr; /* N socials, N equal cells */
  margin:1.6rem var(--pad) 0;
  border:1px solid var(--hair);
}
.contact__socials a{
  display:flex; justify-content:space-between; gap:0.5rem;
  padding:0.9rem 1rem;
  border-right:1px solid var(--hair);
  transition:background 0.15s, color 0.15s;
}
.contact__socials li:last-child a{ border-right:0; }
.contact__socials a:hover{ background:var(--mark); color:var(--on-mark); }

/* ── 9.0 COLOPHON ───────────────────────────────────────────── */

.foot{ padding:1.6rem var(--pad) 0; }

.foot__cols{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:var(--pad);
  padding-bottom:2.5rem;
  color:var(--ink-60);
}
.foot__cols p:first-child{ color:var(--ink); }

.foot__word{
  font-size:clamp(3.4rem, 14.5vw, 15rem);
  white-space:nowrap;
  text-align:center;
  transform:translateY(0.16em);
  opacity:0.9;
}

.foot__base{
  display:flex; justify-content:space-between;
  border-top:1px solid var(--hair);
  padding-block:0.8rem;
  color:var(--ink-60);
}
.foot__top a:hover{ background:var(--mark); color:var(--on-mark); }

/* ── 10.0 MOTION & MEDIA ────────────────────────────────────── */

/* scroll-driven entrance — enhancement only, content visible without it */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .reveal{
      animation:rise linear both;
      animation-timeline:view();
      animation-range:entry 5% entry 45%;
    }
    .progress{
      animation:grow linear both;
      animation-timeline:scroll(root);
    }
  }
}
@keyframes rise{
  from{ opacity:0; transform:translateY(2rem); }
  to{   opacity:1; transform:none; }
}
@keyframes grow{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }

@media (prefers-reduced-motion: reduce){
  .ticker__track{ animation:none; }
  .fig__art{ animation:none !important; }
  *{ transition-duration:0.01ms !important; }
}

/* ── responsive ── */

@media (max-width: 75rem){
  .rail{ display:none; }
}

@media (max-width: 64rem){
  .site-head__issue, .site-head__loc{ display:none; }
  .site-head{ grid-template-columns:auto 1fr auto; }
  .site-head__nav{ justify-self:end; margin-right:1rem; }

  .hero{ grid-template-rows:auto auto auto auto; }
  .hero__title{ font-size:clamp(3.4rem, 17.5vw, 8rem); }
  .hero__figwrap{
    grid-column:1 / -1; grid-row:2 / 3;
    justify-self:stretch; width:100%;
    margin-block:1.5rem;
  }
  .fig--hero{ aspect-ratio:4 / 3; }
  .hero__meta{ grid-column:1 / -1; grid-row:3 / 4; }

  .work{ grid-template-columns:1fr 8ch 3ch; } /* 8ch: "2026—NOW" unwrapped */
  .work__idx, .work__tags{ display:none; }

  .foot__cols{ grid-template-columns:1fr 1fr; }
}

/* phones — the masthead reflows to two decks so nav + toggles stay reachable */
@media (max-width: 40rem){
  :root{ --head-h:5.9rem; }

  .site-head{
    grid-template-columns:1fr auto;
    grid-template-rows:auto auto;
    row-gap:0.45rem;
    padding-block:0.6rem;
    align-items:center;
  }
  .site-head__brand{ grid-column:1; grid-row:1; }
  .site-head__tools{ grid-column:2; grid-row:1; justify-self:end; }
  .site-head__nav{
    grid-column:1 / -1; grid-row:2;
    justify-self:stretch; margin-right:0;
    justify-content:space-between; gap:0.5rem;
  }
  .site-head__nav em{ display:none; } /* index numbers cost the width that clips CONTACT */

  /* keep MADRID's bleed a bleed, not a truncated glyph */
  .hero__title{ font-size:clamp(3rem, 15vw, 8rem); }
  .hero__line--b{ padding-left:0.5ch; }

  .hero__foot{ flex-wrap:wrap; row-gap:0.6rem; }

  /* section heads — meta column doesn't fit; the title takes the row */
  .sec-head{ grid-template-columns:6ch 1fr; }
  .sec-head__meta{ display:none; }
  .sec-head__title{ font-size:clamp(1.9rem, 8.5vw, 7rem); }
}

@media print{
  .noise, .cursor, .grid-overlay, .progress, .rail, .site-head__tools{ display:none !important; }
  .site-head{ position:static; }
}

/* js-gated cursor/preview states (added by main.js) */
html.js-fine-pointer .works{ cursor:none; }

/* render-skip below the fold — layout/paint deferred until near viewport */
.works, .spec, .statement, .contact, .foot{
  content-visibility:auto;
  contain-intrinsic-size:auto 700px;
}