/* ============================================================
   CONCEPT APPROVED — DIRECTION D · "THE GENERATOR"
   Stylesheet. Paired with propuesta-d-generator.html and assets/d.js.

   Read the rules in CLAUDE.md before editing. The ones that bite:
   · every new section needs a translucent background or it hides the field
   · no native loading="lazy" — use data-src + nearLoad()
   · interface type does not go below ~11.5px
   · any box that bleeds vertical plates counts its columns from the viewport
     ratio in JS, never from a width breakpoint
   ============================================================ */

/* ============================================================
   CONCEPT APPROVED — DIRECTION D · "THE GENERATOR"
   A's monitor wall, B's plum + sulfur and resolve-from-noise,
   C's generate button — welded into one touchable machine.
   ============================================================ */

/* ---------- palette ------------------------------------------------------
   Drenched dark field + a single electric accent. Ultramarine and orange were
   chosen over three alternatives (plum/sulfur, petrol/coral, oxblood/cyan); the
   values of the other three are written down in HANDOFF.md if one is ever wanted
   back. The in-page switcher that compared them has been removed.

   NOTE: the custom cursor is an inline SVG data: URI and cannot read var(--acc),
   so its orange is written by hand as #f2751f. If the accent ever changes, change
   it there too.
   ----------------------------------------------------------------------- */
:root{                             /* ultramar + naranja — la paleta */
  --field:   oklch(0.228 0.105 268);
  --deep:    oklch(0.148 0.080 268);
  --raise:   oklch(0.288 0.112 268);
  --raise-2: oklch(0.338 0.118 268);
  --line:    oklch(0.400 0.090 268);
  --line-2:  oklch(0.322 0.080 268);
  --ink:     oklch(0.975 0.014 268);
  --ink-2:   oklch(0.812 0.042 268);
  --acc:     oklch(0.735 0.195 52);
  --acc-d:   oklch(0.650 0.185 50);
  --glow:    oklch(0.44 0.170 272 / .55);
}

:root{
  --display:"Anybody", "Arial Narrow", sans-serif;
  --text:   "Chivo", system-ui, sans-serif;
  --mono:   "Chivo Mono", ui-monospace, monospace;

  --gut:clamp(16px,3.4vw,60px);
  --ease:cubic-bezier(.16,1,.3,1);
  --ease-s:cubic-bezier(.33,1,.68,1);

  --z-grid:5; --z-cursor:30; --z-bar:40; --z-over:60;
}

/* ---------------- cursor ----------------
   A reticle in the brand orange, not the OS arrow: this page is a machine you
   point at things with. Drawn as SVG so there is no JS lag — a followed div
   always trails the real pointer by a frame and reads as broken.
   The accent is hardcoded (a data URI cannot read var(--acc)); it is the
   ultramarine orange, the chosen palette. The dark outer ring is what keeps it
   readable on top of a bright frame. */
:root{
  --cur:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26'%3E%3Ccircle cx='13' cy='13' r='9.2' fill='none' stroke='%230b1030' stroke-opacity='.5' stroke-width='3'/%3E%3Ccircle cx='13' cy='13' r='9.2' fill='none' stroke='%23f2751f' stroke-width='1.6'/%3E%3Ccircle cx='13' cy='13' r='1.7' fill='%23f2751f'/%3E%3C/svg%3E") 13 13, auto;
  --cur-p: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26'%3E%3Ccircle cx='13' cy='13' r='6.4' fill='none' stroke='%230b1030' stroke-opacity='.5' stroke-width='3'/%3E%3Ccircle cx='13' cy='13' r='6.4' fill='%23f2751f'/%3E%3C/svg%3E") 13 13, pointer;
}
body{ cursor:var(--cur); }
a, button, summary, [role="button"], .cell, .fcell, .row, .pick, .chip, .ratio,
.creed-i{ cursor:var(--cur-p); }
@media (pointer:coarse){ body, a, button, .cell, .fcell, .row{ cursor:auto } }

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--field); color:var(--ink);
  font-family:var(--text); font-size:clamp(15px,.45vw + 13.8px,17px); line-height:1.58;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
  transition:background-color .5s var(--ease-s), color .5s var(--ease-s);
}
img,video,canvas{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button,input{ font:inherit; color:inherit; }
button{ background:none; border:0; cursor:pointer; }
:focus-visible{ outline:2px solid var(--acc); outline-offset:3px; }
::selection{ background:var(--acc); color:var(--deep); }

/* ---------------- type ----------------
   Anybody is a variable-width face. Using one width everywhere wastes it.
   Wide + heavy for the two shouts, condensed for structure and data. */
h1,h2,h3{ margin:0; text-wrap:balance; scroll-margin-top:88px; }
.d{ font-family:var(--display); text-transform:uppercase; line-height:.88; letter-spacing:-.03em;
    font-variation-settings:"wdth" 118,"wght" 800; }
.d--xl{ font-size:clamp(2.1rem,6.2vw,4.9rem); font-variation-settings:"wdth" 130,"wght" 850; letter-spacing:-.038em; }
.d--l { font-size:clamp(1.7rem,4.4vw,3.4rem); font-variation-settings:"wdth" 88,"wght" 800; letter-spacing:-.022em; line-height:.92; }
.d--m { font-size:clamp(1.1rem,1.9vw,1.55rem); font-variation-settings:"wdth" 100,"wght" 780; }
/* the counters: tall, narrow, tabular — numbers as architecture */
.d--n { font-family:var(--display); font-variation-settings:"wdth" 62,"wght" 800;
        font-size:clamp(2.6rem,7vw,5.4rem); line-height:.82; letter-spacing:-.02em;
        font-variant-numeric:tabular-nums; display:block; }
.m{ font-family:var(--mono); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase;
    font-weight:500; color:var(--ink-2); line-height:1.5; }
.m--s{ color:var(--acc); }
.m--i{ color:var(--ink); }
.p{ color:var(--ink-2); margin:0; max-width:62ch; text-wrap:pretty; }
.p--l{ font-size:clamp(1rem,.5vw + .9rem,1.18rem); color:var(--ink); }
.num{ font-variant-numeric:tabular-nums; }

.pad{ padding-inline:var(--gut); }
.sec{ padding-block:clamp(56px,8vw,124px); }
.sec-head{
  display:grid; gap:clamp(10px,1.2vw,16px); padding-inline:var(--gut);
  margin-bottom:clamp(24px,3.2vw,46px);
}

/* ---------------- top bar ---------------- */
.bar{
  position:fixed; z-index:var(--z-bar);
  inset:clamp(10px,1.6vw,18px) clamp(10px,1.6vw,18px) auto;
  display:flex; align-items:center; gap:clamp(8px,2vw,22px);
  padding:11px clamp(12px,1.6vw,20px);
  background:color-mix(in oklab, var(--raise) 72%, transparent);
  border:1px solid color-mix(in oklab, var(--ink) 12%, transparent);
  backdrop-filter:blur(14px) saturate(1.3);
  box-shadow:0 1px 0 color-mix(in oklab, var(--ink) 8%, transparent) inset,
             0 18px 40px -22px color-mix(in oklab, var(--deep) 92%, black);
  transition:background .35s var(--ease-s), box-shadow .35s var(--ease-s),
             border-color .35s var(--ease-s), transform .35s var(--ease);
}
/* once you leave the hero it presses itself down onto the page */
.bar[data-stuck="1"]{
  background:color-mix(in oklab, var(--deep) 88%, transparent);
  border-color:color-mix(in oklab, var(--ink) 18%, transparent);
  box-shadow:0 1px 0 color-mix(in oklab, var(--ink) 10%, transparent) inset,
             0 26px 60px -26px color-mix(in oklab, var(--deep) 96%, black);
}
.wm{
  font-family:var(--display); font-variation-settings:"wdth" 96,"wght" 800;
  text-transform:uppercase; letter-spacing:-.005em; white-space:nowrap;
  font-size:clamp(1.02rem,1.45vw,1.38rem); line-height:1;
  display:inline-flex; align-items:baseline; gap:0;
}
.wm b{ color:var(--acc); font-weight:inherit; }
.wm .mk{ display:inline-block; transition:transform .4s var(--ease); }
.wm:hover .mk{ transform:translateY(-2px); }
.bar .grow{ margin-inline-start:auto; }

/* EN / ES — a two-state switch, not a dropdown: two languages do not deserve
   a menu, and the current one has to be readable at a glance from across a room */
.lang{ display:inline-flex; border:1px solid var(--line); overflow:hidden; flex:0 0 auto; }
.lang-b{
  font-family:var(--mono); font-size:.74rem; letter-spacing:.06em; font-weight:700;
  padding:.62em .78em; color:var(--ink-2); line-height:1;
  transition:background .18s var(--ease-s), color .18s var(--ease-s);
}
.lang-b + .lang-b{ border-left:1px solid var(--line); }
.lang-b:hover{ color:var(--ink); }
.lang-b[aria-pressed="true"]{ background:var(--ink); color:var(--deep); }

.cta{
  background:var(--acc); color:var(--deep);
  font-family:var(--mono); font-size:.76rem; letter-spacing:.08em; text-transform:uppercase; font-weight:700;
  padding:.82em 1.25em; border:1px solid var(--acc);
  transition:background .2s var(--ease-s), color .2s var(--ease-s);
}
.cta:hover{ background:transparent; color:var(--acc); }
.cta{ white-space:nowrap; }
.cta .lg{ display:none }
@media (min-width:900px){ .cta .lg{ display:inline } .cta .sm{ display:none } }
@media (max-width:620px){
  .bar{ gap:7px; padding-inline:10px }
  .wm{ font-size:.78rem }
  .lang-b{ padding:.5em .5em; letter-spacing:.06em }
  .cta{ padding:.66em .72em; letter-spacing:.06em }
}
@media (max-width:360px){
  .wm{ font-size:.68rem }
}
/* no keyboard, no keyboard hints */
@media (pointer:coarse){ .keys{ display:none } }

/* ---------------- the latent field ----------------
   The whole page runs on one idea: work arrives as noise and resolves. The field
   is the state before that, and it is not a hero decoration — it is the ground the
   studio sits on, so it is ONE fixed canvas behind the entire document. Painted in
   greyscale and blended, so it carries no colour of its own and every palette stays
   correct. Purely additive: if the canvas never starts, the page is exactly what it
   was. One loop for the whole site, not one per section. */
.field{
  position:fixed; inset:0; width:100%; height:100%; z-index:0;
  pointer-events:none; mix-blend-mode:soft-light; opacity:1;
}
/* The value field alone is monochrome, and value alone reads as flat on a dark
   page. This is the colour half: two slow radials drifting against each other,
   fixed to the viewport, pure CSS. Between them the ground never sits still. */
.glow{
  position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden;
}
.glow::before, .glow::after{
  content:""; position:absolute; border-radius:50%; filter:blur(60px);
}
.glow::before{
  inset:-35% 30% 25% -25%;
  background:radial-gradient(circle at 50% 50%,
    color-mix(in oklab, var(--acc) 20%, transparent), transparent 66%);
  animation:driftA 34s ease-in-out infinite alternate;
}
.glow::after{
  inset:20% -30% -40% 35%;
  background:radial-gradient(circle at 50% 50%,
    color-mix(in oklab, var(--raise-2) 92%, white 8%), transparent 64%);
  opacity:.55;
  animation:driftB 47s ease-in-out infinite alternate;
}
@keyframes driftA{
  from{ transform:translate3d(0,0,0) scale(1) }
  to  { transform:translate3d(14%,10%,0) scale(1.28) }
}
@keyframes driftB{
  from{ transform:translate3d(0,0,0) scale(1.1) }
  to  { transform:translate3d(-12%,-8%,0) scale(.92) }
}
@media (prefers-reduced-motion: reduce){
  .glow::before, .glow::after{ animation:none }
}
/* everything else rides above the ground */
main, .foot{ position:relative; z-index:1; }

/* ---------------- hero ----------------
   Full bleed, one screen, nothing floating. The film fills it, the name sits on
   it, the slate and the kicker hold the corners. There is no middle to leave
   empty, which is what broke the two-column version on a wide display. */
.hero{
  position:relative; overflow:hidden; isolation:isolate;
  min-height:100svh; display:flex; background:var(--deep);
}
.hero-bg{ position:absolute; inset:0; z-index:0; display:flex; gap:2px; }
.hero-cell{ position:relative; flex:1 1 0; min-width:0; overflow:hidden; background:var(--deep); }
/* How many verticals fit is not a width question — it is a shape question. A
   1180×900 window with three cells makes each one 393×900, narrower than 9:16,
   so the plate overflows vertically and the crop lands on the faces. The count
   is computed from the viewport ratio in JS (see fitHero) and cells outside it
   are hidden; display:block here would beat [hidden], so say it explicitly. */
.hero-cell[hidden]{ display:none; }
.hero-cell img, .hero-cell video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity .9s var(--ease-s);
}
.hero-cell [data-on="1"]{ opacity:1; }
/* the scrim: heavy where the type is, clear where the work is */
.hero::before{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    /* top band so the kicker survives a bright plate behind it */
    linear-gradient(to bottom, color-mix(in oklab, var(--deep) 72%, transparent) 0%,
                               transparent 26%),
    linear-gradient(to top, color-mix(in oklab, var(--deep) 95%, transparent) 0%,
                            color-mix(in oklab, var(--deep) 78%, transparent) 30%,
                            color-mix(in oklab, var(--deep) 22%, transparent) 66%,
                            transparent 100%),
    linear-gradient(to right, color-mix(in oklab, var(--deep) 74%, transparent) 0%,
                              color-mix(in oklab, var(--deep) 18%, transparent) 52%,
                              transparent 78%);
}
/* a breath of the brand colour over the plate so it never reads as stock */
.hero::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(70% 60% at 8% 92%,
             color-mix(in oklab, var(--acc) 20%, transparent), transparent 62%);
  mix-blend-mode:soft-light;
}

.hero-fg{
  position:relative; z-index:2; flex:1;
  display:grid; grid-template-rows:auto 1fr auto;
  padding:clamp(84px,10vh,120px) var(--gut) clamp(22px,3.4vh,46px);
}
.hero-kicker{ color:var(--acc); }
.hero-foot{
  grid-row:3; display:grid; gap:clamp(14px,2vw,28px); align-items:end;
}
@media (min-width:900px){
  .hero-foot{ grid-template-columns:minmax(0,1fr) auto; }
}
.hero-type{ display:grid; gap:clamp(12px,1.3vw,18px); }
.hero-type h1{
  /* Both states have to fit one line each at every width, or the reserved height
     leaves a hole. The vw term governs — measured, not guessed. */
  /* Measured, not guessed: the longest line needs 1297px at 95px type and the
     column is 1187px, so the size has to come down to ~5.6vw. Re-measure with
     scrollWidth + white-space:nowrap if the copy ever changes. */
  font-size:clamp(1.5rem,5.6vw,7.2rem);
  text-wrap:normal;
}
.hero-say h1 em, .hero-type h1 em{ font-style:normal; color:var(--acc); }
.hero-type .p--l{ max-width:52ch; }
.hero-cta{ display:flex; flex-wrap:wrap; gap:10px; margin-top:2px; }
.hero-slate{
  display:flex; gap:clamp(10px,1.6vw,26px); align-items:baseline; justify-self:start;
  border-top:1px solid color-mix(in oklab, var(--ink) 26%, transparent); padding-top:10px;
}
@media (min-width:900px){
  .hero-slate{ justify-self:end; flex-direction:column; align-items:flex-end; gap:6px; text-align:right; }
}

.btn-a, .btn-b{
  font-family:var(--mono); font-size:.86rem; letter-spacing:.08em; text-transform:uppercase;
  font-weight:700; padding:1em 1.7em; border:1px solid var(--acc); white-space:nowrap;
  transition:background .2s var(--ease-s), color .2s var(--ease-s), border-color .2s var(--ease-s);
}
.btn-a{ background:var(--acc); color:var(--deep); }
.btn-a:hover{ background:transparent; color:var(--acc); }
.btn-b{
  background:color-mix(in oklab, var(--deep) 55%, transparent); color:var(--ink);
  border-color:color-mix(in oklab, var(--ink) 40%, transparent);
  backdrop-filter:blur(6px);
}
.btn-b:hover{ border-color:var(--ink); }

/* the composer gets its own band now that the hero is a single screen */
.sec-brief{ position:relative; z-index:1; padding-top:clamp(8px,1.4vw,18px); }

/* Page load: the headline is generated in front of you. The mask rise is CSS
   (runs even if the script dies); the glyph scramble on top is progressive. */
.reveal .ln{ display:block; overflow:hidden; padding-bottom:.06em; }
.reveal .ln i{ display:block; font-style:normal; transform:translateY(105%); animation:rise .95s var(--ease) both; }
.reveal .ln:nth-child(1) i{ animation-delay:.10s }
.reveal .ln:nth-child(2) i{ animation-delay:.24s }
/* A scan pass runs across each line as it lands. It used to be a solid accent
   block filling the whole line, which read as the headline being wiped out.
   Now it is a narrow band on screen blend: it lights the letters, never hides them. */
.reveal .ln{ position:relative; }
.reveal .ln::after{
  content:""; position:absolute; top:0; bottom:0; left:0; width:30%; pointer-events:none;
  background:linear-gradient(90deg, transparent,
             color-mix(in oklab, var(--acc) 55%, transparent) 40%, var(--acc) 66%, transparent);
  mix-blend-mode:screen;
  animation:scan 1s var(--ease-s) both;
}
.reveal .ln:nth-child(1)::after{ animation-delay:.06s }
.reveal .ln:nth-child(2)::after{ animation-delay:.20s }
@keyframes scan{
  0%   { transform:translateX(-110%); opacity:0 }
  14%  { opacity:1 }
  84%  { opacity:1 }
  100% { transform:translateX(390%);  opacity:0 }
}
@media (prefers-reduced-motion: reduce){ .reveal .ln::after{ animation:none; display:none } }
@keyframes rise{ from{ transform:translateY(105%) } to{ transform:none } }
@media (prefers-reduced-motion: reduce){ .reveal .ln i{ transform:none; animation:none } }
/* Scramble scaffolding. A random wide glyph used to push the headline onto a
   third line and back, sixty times a second — the whole page bounced ~70px.
   Every glyph now gets its own box, measured from the real letter with kerning
   intact, so nothing the scramble does can move anything. Torn down when it ends. */
.reveal .gw{ display:inline-block; white-space:nowrap; }
/* no overflow:hidden here — on an inline-block it moves the baseline to the
   bottom edge and the line box grows. Let a fat glyph bleed instead. */
.reveal .gc{ display:inline-block; text-align:center; vertical-align:baseline; }
.hero-aside{ display:grid; gap:16px; }
.keys{ display:flex; flex-wrap:wrap; gap:8px 14px; align-items:center; }
.keys kbd{
  font-family:var(--mono); font-size:.62rem; background:var(--raise); border:1px solid var(--line);
  padding:.24em .5em; color:var(--ink);
}

/* ---------------- brief bar ---------------- */
.brief{
  position:relative; z-index:2; margin:clamp(26px,4vw,52px) var(--gut) 0;
  border:1px solid var(--line); background:color-mix(in oklab, var(--raise) 86%, transparent);
}
.brief-row{
  display:grid; gap:10px 16px; padding:clamp(12px,1.6vw,16px) clamp(12px,1.8vw,20px);
  border-bottom:1px solid var(--line-2); align-items:center;
}
@media (min-width:760px){ .brief-row{ grid-template-columns:8ch 1fr; } }
.chips{ display:flex; flex-wrap:wrap; gap:6px; }
.chip{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.05em; text-transform:uppercase;
  border:1px solid var(--line); padding:.56em .86em; color:var(--ink-2);
  transition:background .16s var(--ease-s), color .16s var(--ease-s), border-color .16s var(--ease-s);
}
.chip:hover{ border-color:var(--ink); color:var(--ink); }
.chip[aria-pressed="true"]{ background:var(--acc); border-color:var(--acc); color:var(--deep); }
.brief-go{
  display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:space-between;
  padding:clamp(12px,1.6vw,16px) clamp(12px,1.8vw,20px);
  background:color-mix(in oklab, var(--raise-2) 88%, transparent);
}
.gen{
  display:inline-flex; align-items:center; gap:.6em;
  background:var(--acc); color:var(--deep);
  font-family:var(--mono); font-weight:700; font-size:.88rem; letter-spacing:.07em; text-transform:uppercase;
  padding:1em 1.8em; border:1px solid var(--acc);
  transition:transform .16s var(--ease), background .2s var(--ease-s);
}
.gen:hover{ background:var(--acc-d); }
.gen:active{ transform:translateY(1px); }
.gen[disabled]{ background:var(--line); border-color:var(--line); color:var(--ink-2); cursor:progress; }
.gen span:first-child{ font-size:.9em; }

/* run log, one line, live */
.runline{
  display:flex; flex-wrap:wrap; gap:6px 14px; align-items:center;
  font-family:var(--mono); font-size:.72rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink-2); min-height:1.4em;
}
.runline b{ color:var(--deep); background:var(--acc); padding:.1em .4em; font-weight:500; }
.runbar{ height:2px; background:var(--line); position:relative; width:min(220px,40vw); }
.runbar i{ position:absolute; inset:0 auto 0 0; width:0; background:var(--acc); transition:width .18s linear; }

/* ---------------- the wall ---------------- */
.wall-wrap{ position:relative; z-index:var(--z-grid); margin-top:clamp(22px,3vw,40px); }
/* Row height is derived from column width, so a cell spanning 2×2 is exactly
   four cells and everything stays flush. Uniform grids read as a template;
   one dominant frame per wall is what makes it look art-directed. */
.wall{
  --cols:2; --g:2px;
  --colw:calc((100vw - (var(--cols) + 1) * var(--g)) / var(--cols));
  display:grid; gap:var(--g); padding:var(--g); background:var(--line-2);
  grid-template-columns:repeat(var(--cols),1fr);
  grid-auto-rows:calc(var(--colw) * 1.25);
  grid-auto-flow:dense; /* spans leave holes otherwise — dense backfills them */
}
/* Tiles used to run to 660px on a wide screen and a 560px master had to stretch
   to fill them — that is what looked soft. More columns keeps every piece at or
   under its native size, and fits far more of the library on one screen. */
@media (min-width:560px){  .wall{ --cols:3 } }
@media (min-width:820px){  .wall{ --cols:4 } }
@media (min-width:1100px){ .wall{ --cols:6 } }
@media (min-width:1400px){ .wall{ --cols:7 } }
@media (min-width:1700px){ .wall{ --cols:8 } }

/* One dominant frame and two wide ones — the rest are equals. The wide pair is
   not decoration: the library now holds four 16:9 films (Obsidian, Pulsa, Glass
   Bottle, Monster) and a 2×1 tile is 1.6:1, so they lose 10% there against 55%
   in a portrait tile. d.js keeps landscape work in exactly these two indices —
   if you move them, move WIDE_AT too or the wall grows a row. */
/* The wide pair applies at EVERY width, not just on desktop: it is geometry, not
   decoration. Inside the 1100px query the phone got no wide tiles, so the two
   16:9 films landed in portrait ones and the wall opened holes (92.6% covered).
   At two columns a span-2 tile is simply a full-width band, which is the right
   shape for a 16:9 anyway. */
.cell:nth-child(6){ grid-column:span 2; }
.cell:nth-child(10){ grid-column:span 2; }
@media (min-width:1100px){
  .cell:nth-child(1){ grid-column:span 2; grid-row:span 2; }
}

/* MURO ESTRECHO. Cuando un brief devuelve poco, el muro baja a una o dos filas y
   ahí el héroe 2×2 no cabe —ocupa dos filas él solo— y las anchas fijas caen en
   posiciones que ya no existen: quedaba un hueco y una fila de más. En estrecho
   no manda la posición sino el material: la pieza apaisada es la que se ensancha,
   esté donde esté. Así un brief de dos piezas 16:9 las enseña las dos enteras. */
.wall[data-tight="1"] .cell:nth-child(1),
.wall[data-tight="1"] .cell:nth-child(6),
.wall[data-tight="1"] .cell:nth-child(10){ grid-column:auto; grid-row:auto; }
.wall[data-tight="1"] .cell[data-wide="1"]{ grid-column:span 2; }

/* smaller tiles need lighter furniture */
@media (min-width:1100px){
  .cell-b{ font-size:.68rem }
  .cell-b small{ display:none }
  .cell:nth-child(1) .cell-b{ font-size:.8rem }
  .cell:nth-child(1) .cell-b small{ display:block }
}

.cell{
  position:relative; overflow:hidden; background:var(--deep);
  padding:0; display:block; text-align:left;
}
/* display:block above beats the user-agent [hidden] rule, so say it again */
.cell[hidden]{ display:none; }

/* the thirteenth cell is not an image — it is the studio talking */
.cell-say{
  display:none; background:var(--acc); color:var(--deep);
  padding:clamp(12px,1.4vw,20px); flex-direction:column; justify-content:space-between; gap:10px;
  text-align:left;
}
@media (min-width:1000px){ .cell-say{ display:flex } }
.cell-say b{
  font-family:var(--display); font-variation-settings:"wdth" 74,"wght" 820;
  text-transform:uppercase; font-size:clamp(.95rem,1.35vw,1.35rem); line-height:.94; letter-spacing:-.01em;
}
.cell-say span{ font-family:var(--mono); font-size:.56rem; letter-spacing:.12em; text-transform:uppercase; }
.cell-say:hover{ background:var(--acc-d); }
/* The wall used to sit at brightness(.72) and only come up on hover, so at a
   glance the whole thing read as switched off — you had to visit every tile to
   see the work. The work is the argument: it is finished on arrival now, and
   hover is a small lift plus the accent rule, not the difference between
   visible and invisible. */
.cell > img, .cell > video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  filter:saturate(.98) brightness(.97);
  transition:filter .45s var(--ease-s), transform .7s var(--ease);
}
.cell > canvas.veil{ position:absolute; inset:0; width:100%; height:100%; z-index:3; pointer-events:none; }
.cell::after{
  content:""; position:absolute; inset:0; z-index:4; pointer-events:none;
  box-shadow:inset 0 0 0 0 var(--acc);
  transition:box-shadow .2s var(--ease-s);
}
.cell:hover > img, .cell:hover > video,
.cell:focus-visible > img, .cell:focus-visible > video{
  filter:saturate(1.04) brightness(1.05); transform:scale(1.04);
}
.cell:hover::after, .cell:focus-visible::after{ box-shadow:inset 0 0 0 2px var(--acc); }
.cell-meta{
  position:absolute; inset:auto 0 0 0; z-index:5; padding:10px;
  display:flex; justify-content:space-between; align-items:flex-end; gap:8px;
  background:linear-gradient(to top, color-mix(in oklab, var(--deep) 90%, transparent), transparent);
  opacity:0; transform:translateY(6px);
  transition:opacity .24s var(--ease-s), transform .24s var(--ease-s);
}
.cell:hover .cell-meta, .cell:focus-visible .cell-meta{ opacity:1; transform:none; }
.cell-b{
  font-family:var(--display); font-variation-settings:"wdth" 84,"wght" 720;
  text-transform:uppercase; font-size:.74rem; letter-spacing:.02em; line-height:1.12;
}
.cell-b small{ display:block; font-family:var(--text); font-weight:400; text-transform:none;
  letter-spacing:0; font-size:.68rem; color:var(--ink-2); }
.cell-slot{ font-family:var(--mono); font-size:.64rem; letter-spacing:.1em; color:var(--acc); }
.cell-new{
  position:absolute; top:8px; left:8px; z-index:5;
  font-family:var(--mono); font-size:.6rem; letter-spacing:.12em; text-transform:uppercase;
  background:var(--acc); color:var(--deep); padding:.24em .44em;
  opacity:0; transition:opacity .3s var(--ease-s);
}
.cell[data-fresh="1"] .cell-new{ opacity:1; }
/* only the creator cuts carry synced dialogue — say so instead of implying it */
.cell-sound{
  position:absolute; top:8px; right:8px; z-index:5;
  font-family:var(--mono); font-size:.6rem; letter-spacing:.1em; text-transform:uppercase;
  border:1px solid var(--acc); color:var(--acc); padding:.2em .4em;
  background:color-mix(in oklab, var(--deep) 70%, transparent);
}

.verdict{
  display:flex; flex-wrap:wrap; gap:8px 20px; align-items:baseline; justify-content:space-between;
  padding:14px var(--gut); background:var(--acc); color:var(--deep);
}
.verdict strong{ font-family:var(--display); font-variation-settings:"wdth" 104,"wght" 800;
  text-transform:uppercase; font-size:clamp(.95rem,1.7vw,1.3rem); letter-spacing:-.01em; }
.verdict .m{ color:color-mix(in oklab, var(--deep) 78%, transparent); }


/* ---------------- hero calls to action ---------------- */
.hero-cta{ display:flex; flex-wrap:wrap; gap:10px; margin-top:4px; }

/* ---------------- what we do ----------------
   Three claims, no icons, no cards. This sits where the brief bar used to be:
   a visitor meets the studio before the studio performs. */
.pitch{
  position:relative; z-index:2;
  margin:clamp(34px,5vw,64px) var(--gut) 0;
  display:grid; gap:clamp(20px,3vw,44px);
  padding-top:clamp(22px,3vw,34px); border-top:1px solid var(--line-2);
}
@media (min-width:860px){ .pitch{ grid-template-columns:repeat(3,1fr); } }
.pitch-i{ display:grid; gap:9px; align-content:start; }
.pitch-k{ color:var(--acc); }
.pitch-h{
  font-family:var(--display); font-variation-settings:"wdth" 84,"wght" 780;
  text-transform:uppercase; font-size:clamp(1.05rem,1.7vw,1.42rem);
  line-height:1.02; letter-spacing:-.012em; margin:0 0 2px;
  text-wrap:balance;
}
.pitch-i .p{ font-size:.92rem; max-width:42ch; }

/* ---------------- the invitation above the brief bar ---------------- */
.brief-lead{
  padding:clamp(34px,4.6vw,64px) var(--gut) clamp(12px,1.6vw,18px);
  display:flex; flex-wrap:wrap; align-items:baseline; gap:8px 18px;
}
.brief-h{
  font-family:var(--display); font-variation-settings:"wdth" 96,"wght" 800;
  text-transform:uppercase; font-size:clamp(1.25rem,2.4vw,1.9rem);
  line-height:1; letter-spacing:-.022em; margin:0;
}
.brief-sub{ color:var(--ink-2); }

/* ---------------- section annotations ----------------
   These paragraphs used to float in the right-hand column with nothing to say
   what they were. Now each is a labelled note: bracketed like an annotation on
   a technical drawing, with a word saying why it is there. */
.note-box{
  position:relative; padding-left:clamp(14px,1.4vw,22px);
  max-width:96ch;
}
/* a hairline in the margin, the way a plan is annotated — no panel, no column,
   so the section head cannot be forced taller than its own heading */
.note-box::before{
  content:""; position:absolute; left:0; top:.28em; bottom:.28em; width:2px;
  background:var(--acc);
}
.note-lab{ color:var(--acc); margin-right:.7em; }
.note-box .p{ margin:0; display:inline; }
.note-box .p, .note-lab{ vertical-align:baseline; }

/* ---------------- the creed ----------------
   Five claims, and each one answered by a frame that proves it. The panel is
   sticky: you read a commitment, the work that backs it is already beside it.
   Everything here is additive — with no JS the list is a plain readable list. */
.creed-wrap{ display:grid; gap:clamp(24px,3vw,56px); margin-top:clamp(30px,4vw,58px); }
@media (min-width:1000px){
  .creed-wrap{ grid-template-columns:minmax(0,1fr) minmax(0,.82fr); align-items:start; }
}
.creed{ list-style:none; margin:0; padding:0; display:grid; gap:clamp(18px,2.4vw,30px); }
.creed-i{
  display:grid; gap:8px; align-content:start;
  padding:clamp(16px,2vw,24px) clamp(14px,1.8vw,22px);
  border:1px solid var(--line-2);
  background:color-mix(in oklab, var(--raise) 34%, transparent);
  transition:border-color .3s var(--ease-s), background .3s var(--ease-s),
             transform .3s var(--ease), opacity .3s var(--ease-s);
}

@media (min-width:1000px){
  /* only the one you are reading is lit; the rest step back */
  .creed-i{ opacity:.58; }
  .creed-i[data-on="1"]{
    opacity:1; transform:translateX(8px);
    border-color:color-mix(in oklab, var(--acc) 55%, transparent);
    background:color-mix(in oklab, var(--raise) 70%, transparent);
  }
}
.creed-n{ color:var(--acc); transition:color .3s var(--ease-s); }
.creed-h{
  font-family:var(--display); font-variation-settings:"wdth" 86,"wght" 760;
  text-transform:uppercase; font-size:clamp(1rem,1.55vw,1.32rem);
  line-height:1.04; letter-spacing:-.012em; margin:0; max-width:26ch;
}
.creed .p{ font-size:.9rem; max-width:52ch; }

/* the frame lives inline on a phone, in the sticky panel on a desktop */
.creed-shot{
  position:relative; overflow:hidden; background:var(--deep);
  aspect-ratio:16/9; margin-top:6px;
}
.creed-shot img{ width:100%; height:100%; object-fit:cover; }
@media (min-width:1000px){ .creed-shot{ display:none } }

.creed-view{ display:none; }
@media (min-width:1000px){
  .creed-view{ display:block; position:sticky; top:104px; }
}
.creed-stage{
  position:relative; overflow:hidden; background:var(--deep);
  aspect-ratio:4/5; max-height:64svh;
  box-shadow:0 40px 90px -50px color-mix(in oklab, var(--deep) 96%, black);
}
.creed-stage img, .creed-stage video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity .55s var(--ease-s), transform 1.6s var(--ease);
  transform:scale(1.04);
}
.creed-stage img[data-on="1"], .creed-stage video[data-on="1"]{ opacity:1; transform:none; }
.creed-stage::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  box-shadow:inset 0 0 0 1px color-mix(in oklab, var(--ink) 14%, transparent);
}
.creed-cap{ display:flex; justify-content:space-between; gap:12px; padding-top:12px; }

/* the giant word must not fight the list underneath it */
.approve .aw{ margin-bottom:clamp(6px,1vw,14px); }


/* cursor tag */
.ctag{
  position:fixed; z-index:var(--z-cursor); top:0; left:0; pointer-events:none;
  background:var(--acc); color:var(--deep);
  font-family:var(--mono); font-size:.66rem; letter-spacing:.12em; text-transform:uppercase;
  padding:.4em .6em; opacity:0; transform:translate(-50%,-160%) scale(.94);
  transition:opacity .18s var(--ease-s), transform .18s var(--ease-s);
}
.ctag[data-on="1"]{ opacity:1; transform:translate(-50%,-160%) scale(1); }
@media (pointer:coarse){ .ctag{ display:none } }

/* ---------------- placement ----------------
   The frame recomposes into each delivery ratio. The box itself changes shape —
   that morph is the argument, so it has to be the thing that moves. Fixed
   height on desktop so the section never jumps; the width follows the ratio. */
.ship-wrap{ display:grid; gap:clamp(20px,3vw,50px); padding-inline:var(--gut); }
@media (min-width:1000px){ .ship-wrap{ grid-template-columns:auto minmax(0,1fr); align-items:start; } }
.ship-stage{ display:grid; justify-items:start; align-items:center; }
@media (min-width:1000px){ .ship-stage{ height:min(62svh,566px); align-content:center; } }
.ship-frame{
  position:relative; overflow:hidden; background:var(--deep);
  width:100%; aspect-ratio:var(--sar, 9/16);
  transition:aspect-ratio .62s var(--ease), width .62s var(--ease);
  outline:1px solid var(--line-2);
}
@media (min-width:1000px){
  /* width is what the eye reads as "this is a different placement", so let the
     tall ratios stay tall and the wide ones actually get wide */
  .ship-frame{ width:auto; height:min(62svh,566px); max-width:min(54vw,720px); }
  .ship-frame[data-wide="1"]{ height:auto; width:min(54vw,720px); }
}
.ship-frame img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:object-position .62s var(--ease);
}
/* thirds and a title-safe box — they flash up while the frame is recomposing
   and settle back, which is what makes the change read as a decision */
.ship-guides{
  position:absolute; inset:0; z-index:3; pointer-events:none; opacity:0;
  transition:opacity .5s var(--ease-s);
  background:
    linear-gradient(to right, transparent calc(33.33% - .5px),
      color-mix(in oklab, var(--acc) 55%, transparent) calc(33.33% - .5px) calc(33.33% + .5px),
      transparent calc(33.33% + .5px), transparent calc(66.66% - .5px),
      color-mix(in oklab, var(--acc) 55%, transparent) calc(66.66% - .5px) calc(66.66% + .5px),
      transparent calc(66.66% + .5px)),
    linear-gradient(to bottom, transparent calc(33.33% - .5px),
      color-mix(in oklab, var(--acc) 55%, transparent) calc(33.33% - .5px) calc(33.33% + .5px),
      transparent calc(33.33% + .5px), transparent calc(66.66% - .5px),
      color-mix(in oklab, var(--acc) 55%, transparent) calc(66.66% - .5px) calc(66.66% + .5px),
      transparent calc(66.66% + .5px));
}
.ship-frame[data-moving="1"] .ship-guides{ opacity:1; }
.ship-guides::after{
  content:""; position:absolute; inset:8%; border:1px dashed color-mix(in oklab, var(--acc) 45%, transparent);
}
.ship-name, .ship-ratio{
  position:absolute; bottom:12px; z-index:4; padding:.4em .7em;
  background:color-mix(in oklab, var(--deep) 78%, transparent);
}
.ship-name{ left:12px; color:var(--acc); }
.ship-ratio{ right:12px; color:var(--ink); }
@media (prefers-reduced-motion: reduce){
  .ship-frame, .ship-frame img{ transition:none }
  .ship-guides{ display:none }
}

.ship-aside{ display:grid; gap:clamp(18px,2vw,26px); align-content:start; }
.ratios{ display:grid; gap:6px; grid-template-columns:repeat(2,minmax(0,1fr)); }
@media (min-width:560px){ .ratios{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
.ratio{
  display:grid; gap:9px; justify-items:start; text-align:left;
  border:1px solid var(--line); padding:11px 12px;
  transition:border-color .2s var(--ease-s), background .2s var(--ease-s);
}
.ratio:hover{ border-color:var(--ink); }
.ratio[aria-pressed="true"]{ border-color:var(--acc); background:color-mix(in oklab, var(--acc) 11%, transparent); }
/* a little proxy of the shape itself, so the rail is readable before you click */
.ratio i{
  display:block; width:var(--w); height:var(--h); background:var(--line-2);
  border:1px solid var(--line); transition:background .2s var(--ease-s), border-color .2s var(--ease-s);
}
.ratio[aria-pressed="true"] i{ background:var(--acc); border-color:var(--acc); }
.ratio b{ font-family:var(--mono); font-size:.66rem; letter-spacing:.08em; font-weight:600; display:block; }
.ratio span{ font-family:var(--mono); font-size:.54rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-2); display:block; }

.scope-nums{ display:grid; gap:0; margin:0; grid-template-columns:repeat(3,1fr); }
.scope-nums div{ display:grid; gap:3px; padding-top:11px; border-top:1px solid var(--line-2); }
.scope-nums dt{ font-family:var(--mono); font-size:.56rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-2); }
.scope-nums dd{ margin:0; font-family:var(--display); font-variation-settings:"wdth" 76,"wght" 760;
  font-size:clamp(.95rem,1.5vw,1.25rem); line-height:1; font-variant-numeric:tabular-nums; }
.scope-nums dd b{ font-weight:inherit; color:var(--acc); }
.picks{ display:flex; flex-wrap:wrap; gap:6px; }
.pick{
  width:clamp(52px,4.6vw,72px); aspect-ratio:4/5; overflow:hidden; padding:0; position:relative;
  background:var(--raise); /* never an invisible hole while it decodes */
  filter:saturate(.86) brightness(.84); transition:filter .22s var(--ease-s);
  outline:1px solid transparent;
}
.pick img{ width:100%; height:100%; object-fit:cover; }
.pick:hover{ filter:none; }
.pick[aria-pressed="true"]{ filter:none; outline-color:var(--acc); }

/* ---------------- rundown ----------------
   The six lines and the monitor are one idea; they should be readable in a
   single screen, so this section breathes a little less than the others. */
#commission, #placement{ padding-block:clamp(48px,6vw,92px); }
.run-grid{ display:grid; gap:clamp(20px,3vw,44px); padding-inline:var(--gut); }
/* The right column used to be a fixed 1fr while the monitor inside it had
   shrunk to its true ratio — so a 180px dead band opened between the rates and
   the photo, and the caption rail stranded itself across it. The column is now
   sized by the monitor: no gap to explain. */
@media (min-width:1000px){ .run-grid{ grid-template-columns:minmax(0,1fr) auto; align-items:start; } }
.rows{ display:grid; }
.row{
  display:grid; grid-template-columns:1fr auto; gap:6px 18px; align-items:baseline; text-align:left;
  padding:clamp(14px,1.5vw,19px) 0; border-top:1px solid var(--line-2); width:100%;
}
.row:last-child{ border-bottom:1px solid var(--line-2); }
.row-name{ font-family:var(--display); font-variation-settings:"wdth" 112,"wght" 740;
  text-transform:uppercase; font-size:clamp(1.05rem,2vw,1.6rem); letter-spacing:-.015em; line-height:1.04;
  transition:color .2s var(--ease-s); }
.row-sub{ grid-column:1; color:var(--ink-2); font-size:.92rem; }
.row-from{ font-family:var(--mono); font-size:.78rem; letter-spacing:.04em; color:var(--ink-2); white-space:nowrap; text-align:right; }
.row:hover .row-name, .row[aria-current="true"] .row-name{ color:var(--acc); }
.row[aria-current="true"] .row-from{ color:var(--ink); }
/* The preview was a 4:5 box as wide as its column — 546×683 at 1440px, taller
   than half the screen, and it forced every format into a shape that wasn't its
   own (the 9:16 frames lost a third of their height). It is a monitor, not a
   second hero: fixed height on desktop, width following the ratio of the frame
   on screen, so nothing is cropped and the section reads in a single look. */
.run-view{ display:grid; }
.run-frame{
  position:relative; overflow:hidden; background:var(--deep);
  width:100%; aspect-ratio:var(--ar, 4/5);
  transition:aspect-ratio .45s var(--ease);
}
@media (min-width:1000px){
  .run-view{ position:sticky; top:96px; justify-items:end; }
  .run-frame{ width:auto; height:min(62svh,570px); }
}
.run-frame img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity .45s var(--ease-s); }
.run-frame img[data-on="1"]{ opacity:1; }
.run-legend{ display:flex; justify-content:space-between; gap:12px; padding-top:12px; width:100%; }

/* ---------------- full-bleed breath ----------------
   One section with no grid, no data, no chrome. The scroll needs a lung. */
/* The library is all portrait, so a wide band is always a hard crop — the only
   lever is band height. At 62svh it showed 36% of the plate: two heads and a
   wall, no shot. At 84svh it shows ~49%, which lands as a proper medium two-shot
   from behind — cap to mid-thigh — with the cap five points clear of the top
   edge at every point of the drift. Shorten the drift too, it was doing the
   cropping for us. */
.band{ position:relative; overflow:hidden; height:clamp(460px,84svh,820px); background:var(--deep); }
/* One portrait plate bled across a wide band is a tight crop by arithmetic: cover
   scales it by WIDTH, so the wider the screen the less of the frame survives — at
   2000px only a third of it, which cut the lettering off the shirt. Plates side by
   side divide the scale. How many is a question of window SHAPE, not width, so
   fitBand() works it out from the band's own height (see the JS) — a fixed pair
   was right at 1440 and wrong again at 2560. */
.band-media{ position:absolute; inset:-4% 0 -4% 0; will-change:transform; display:flex; gap:2px; }
.band-media figure{ position:relative; flex:1 1 0; min-width:0; margin:0; overflow:hidden; }
.band-media figure[hidden]{ display:none; }
.band-media img{ width:100%; height:100%; object-fit:cover; filter:saturate(.95) brightness(.72); }
.band::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(100deg, color-mix(in oklab, var(--deep) 78%, transparent) 0%, transparent 55%);
}
.band-say{
  position:absolute; inset:auto auto clamp(24px,4vw,54px) 0; z-index:2;
  padding-inline:var(--gut); max-width:min(92%, 42ch);
}
.band-say .d{ color:var(--ink); font-size:clamp(1.35rem,2.9vw,2.5rem);
  text-shadow:0 2px 24px color-mix(in oklab, var(--deep) 70%, transparent); }

/* ---------------- counters ---------------- */
.counts{
  display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(18px,3vw,40px);
  padding:0 var(--gut) clamp(34px,5vw,62px);
}
@media (min-width:820px){ .counts{ grid-template-columns:repeat(4,1fr); } }
.counts div{ display:grid; gap:6px; border-top:1px solid var(--line-2); padding-top:14px; }
.counts .d--n{ color:var(--acc); }

/* deeper ground so the dense frame wall sits in a well */
.deepish{ background:color-mix(in oklab, var(--deep) 88%, transparent); }

/* ---------------- frames wall ---------------- */
.frames{
  display:grid; gap:2px; padding:0 2px; background:var(--line-2);
  grid-template-columns:repeat(4,1fr);
}
@media (min-width:620px){  .frames{ grid-template-columns:repeat(6,1fr); } }
@media (min-width:1000px){ .frames{ grid-template-columns:repeat(9,1fr); } }
@media (min-width:1500px){ .frames{ grid-template-columns:repeat(12,1fr); } }
/* Square cells threw away 44% of every 9:16 frame — faces landed outside the
   crop. 4:5 keeps 70% of a vertical and matches the main wall, and the tiles
   arrive lit instead of waiting for a cursor. */
.fcell{ position:relative; aspect-ratio:4/5; overflow:hidden; background:var(--deep); padding:0; }
.fcell img{ width:100%; height:100%; object-fit:cover;
  filter:saturate(.98) brightness(.96); transition:filter .45s var(--ease-s), transform .6s var(--ease); }
.fcell:hover img, .fcell:focus-visible img{ filter:saturate(1.04) brightness(1.05); transform:scale(1.06); }
.fcell figcaption{
  position:absolute; inset:auto 0 0 0; padding:6px 7px;
  font-family:var(--mono); font-size:.52rem; letter-spacing:.08em; text-transform:uppercase;
  background:linear-gradient(to top, color-mix(in oklab, var(--deep) 90%, transparent), transparent);
  opacity:0; transform:translateY(4px); transition:.2s var(--ease-s);
}
.fcell:hover figcaption, .fcell:focus-visible figcaption{ opacity:1; transform:none; }

/* ---------------- timeline ---------------- */
.tl{ padding-inline:var(--gut); }
.tl-line{ height:1px; background:var(--line); position:relative; margin-top:clamp(26px,4vw,48px); }
.tl-fill{ position:absolute; inset:0 auto 0 0; height:1px; background:var(--acc); width:var(--p,100%); transition:width .3s linear; }
.tl-steps{ display:grid; gap:clamp(20px,2vw,30px); grid-template-columns:repeat(2,1fr); }
@media (min-width:780px){ .tl-steps{ grid-template-columns:repeat(5,1fr); } }
.tl-step{ padding-top:16px; position:relative; }
.tl-step::before{ content:""; position:absolute; top:-1px; left:0; width:1px; height:11px; background:var(--line); transition:.3s var(--ease-s); }
.tl-step[data-on="1"]::before{ background:var(--acc); height:19px; }
.tl-tc{ font-family:var(--mono); font-size:.68rem; letter-spacing:.1em; color:var(--acc); display:block; }
.tl-what{ font-family:var(--display); font-variation-settings:"wdth" 96,"wght" 740;
  text-transform:uppercase; font-size:.98rem; margin:.5em 0 .3em; display:block; }
.tl-note{ color:var(--ink-2); font-size:.82rem; max-width:26ch; }

/* ---------------- approved ---------------- */
.approve{ padding:clamp(90px,15vw,200px) var(--gut); border-block:1px solid var(--line-2);
  background:color-mix(in oklab, var(--deep) 88%, transparent);
  /* clip, not hidden: hidden would make this a scroll container and the sticky
     panel inside the creed would stop sticking */
  overflow-x:clip; }
.aw{ position:relative; display:block; }
.aw span{ display:block; font-family:var(--display); font-variation-settings:"wdth" 124,"wght" 830;
  text-transform:uppercase; font-size:clamp(2.1rem,9.8vw,5.6rem); line-height:.9; letter-spacing:-.045em; }
.aw .ghost{ color:transparent; -webkit-text-stroke:1px var(--line); }
.aw .fill{ position:absolute; inset:0; color:var(--acc);
  clip-path:inset(0 calc(100% - var(--fill,0%)) 0 0);
  transition:clip-path .25s linear; }

/* ---------------- end ---------------- */
.end{ padding:clamp(60px,10vw,140px) var(--gut) clamp(36px,5vw,70px); }
.mail{
  display:inline-block; margin-top:clamp(18px,2.6vw,34px);
  font-family:var(--display); font-variation-settings:"wdth" 96,"wght" 740;
  text-transform:uppercase; font-size:clamp(1rem,2.8vw,2.1rem); letter-spacing:-.02em;
  border-bottom:3px solid var(--acc); padding-bottom:.04em;
  transition:color .2s var(--ease-s);
}
.mail:hover{ color:var(--acc); }
.disc{ border:1px solid var(--line-2); padding:clamp(15px,2vw,24px); max-width:72ch; margin-top:clamp(30px,4vw,54px); }
.foot{ display:flex; flex-wrap:wrap; gap:10px 26px; justify-content:space-between; padding:18px var(--gut); border-top:1px solid var(--line-2); }

/* ---------------- takeover ---------------- */
.over{
  position:fixed; inset:0; z-index:var(--z-over); background:color-mix(in oklab, var(--deep) 96%, black);
  display:grid; place-items:center; padding:clamp(12px,3vw,40px);
  opacity:0; visibility:hidden; transition:opacity .28s var(--ease-s), visibility .28s;
}
.over[data-open="1"]{ opacity:1; visibility:visible; }
.over-box{ display:grid; gap:clamp(16px,2.4vw,32px); width:min(1080px,100%); max-height:100%; }
@media (min-width:900px){ .over-box{ grid-template-columns:minmax(0,1fr) 30ch; align-items:start; } }
.over-media{ position:relative; background:var(--deep); overflow:hidden; display:grid; place-items:center; max-height:min(86svh,900px); }
.over-media video, .over-media img{ max-height:min(86svh,900px); width:auto; max-width:100%; }
.over-info{ display:grid; gap:14px; align-content:start; }
.over-close{
  position:absolute; top:calc(env(safe-area-inset-top) + 12px); right:16px;
  font-family:var(--mono); font-size:.62rem; letter-spacing:.14em; text-transform:uppercase;
  border:1px solid var(--line); padding:.55em .9em;
}
.over-close:hover{ border-color:var(--acc); color:var(--acc); }
.dl{ display:grid; margin:0; }
.dl div{ display:flex; justify-content:space-between; gap:16px; padding:8px 0; border-bottom:1px solid var(--line-2); }
.dl dt{ font-family:var(--mono); font-size:.58rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-2); }
.dl dd{ margin:0; font-size:.85rem; text-align:right; }

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  .veil{ display:none !important; }
}

/* enlace del takeover a la pagina de obra — solo aparece si la obra tiene `page` */
.over-page{
  display:inline-block; margin-top:4px;
  font-family:var(--mono); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--acc); border-bottom:1px solid var(--acc); padding-bottom:.2em;
  transition:color .2s var(--ease-s), border-color .2s var(--ease-s);
}
.over-page:hover{ color:var(--ink); border-color:var(--ink); }