/* ==========================================================================
   Graffiti — full-spread feature page (graffiti-wall.html), 2026-10-07.
   Loaded after food-edition.css. Same locked 4BQ system; the moving opener
   gets a restrained "pixel video" treatment made only of CSS overlays
   (dot grid, vignette, light bloom, colour wash). Nothing is baked into the
   video files, and every overlay is pointer-events:none and low-opacity so
   the mural stays legible.
   ========================================================================== */

/* ---------- opening spread: full-bleed hyperlapse ---------- */
.gw-open{
  position:relative;background:var(--coal);color:var(--cream);overflow:hidden;
  aspect-ratio:16/9;max-height:calc(100vh - 46px);min-height:220px;width:100%;
}
.gw-open video,.gw-open .gw-still{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 55%;display:block;
  filter:saturate(1.06) contrast(1.03);
}
.gw-open .gw-still{display:none;}
/* overlays */
.gw-fx{position:absolute;inset:0;pointer-events:none;}
.gw-fx--tint{ /* slight atmospheric colour: deep teal up top, warm ember low */
  background:linear-gradient(180deg, rgba(5,45,62,.22) 0%, rgba(5,45,62,0) 45%, rgba(254,75,11,.08) 100%);
  mix-blend-mode:soft-light;
}
.gw-fx--bloom{ /* controlled light bloom over the wall's centre */
  background:radial-gradient(ellipse 60% 45% at 50% 46%, rgba(255,244,226,.16), rgba(255,244,226,0) 70%);
  mix-blend-mode:screen;
}
.gw-fx--grid{ /* pixel / halftone dot grid */
  background-image:radial-gradient(circle at 50% 50%, rgba(3,3,3,.55) 0 .9px, transparent 1.25px);
  background-size:4px 4px;opacity:.28;mix-blend-mode:multiply;
}
.gw-fx--vignette{
  background:
    radial-gradient(ellipse 85% 80% at 50% 45%, rgba(3,3,3,0) 58%, rgba(3,3,3,.62) 100%),
    linear-gradient(0deg, rgba(3,3,3,.72) 0%, rgba(3,3,3,0) 34%);
}
/* stationary title block (absolutely positioned: video changes never reflow it) */
/* Desktop: one low line of type in the grass strip under the wall, so the
   mural itself is never covered. */
.gw-title{
  position:absolute;left:clamp(16px,3vw,48px);bottom:clamp(14px,1.8vw,26px);right:clamp(150px,14vw,220px);
  display:flex;align-items:flex-end;gap:clamp(14px,2vw,28px);flex-wrap:wrap;
}
.gw-title .gw-kicker{position:absolute;left:0;bottom:100%;margin:0 0 4px;color:var(--cream);opacity:.85;text-shadow:0 1px 8px rgba(3,3,3,.7);}
.gw-kicker{
  font-family:var(--mono);font-weight:700;font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ember-ink,#C0331A);margin:0 0 6px;
}
.gw-h1{
  font-family:var(--display);font-weight:400;text-transform:uppercase;line-height:.86;
  font-size:clamp(52px,6.4vw,104px);margin:0;letter-spacing:.005em;text-shadow:0 2px 24px rgba(3,3,3,.45);
}
.gw-dek{
  font-family:var(--body-serif);font-size:clamp(16px,1.5vw,20px);line-height:1.4;margin:0 0 .5em;max-width:40ch;
  text-shadow:0 1px 12px rgba(3,3,3,.6);
}
/* play / pause control */
.gw-toggle{
  position:absolute;right:clamp(14px,2.4vw,32px);bottom:clamp(14px,2.4vw,32px);z-index:3;
  display:inline-flex;align-items:center;gap:10px;min-width:48px;min-height:48px;padding:0 16px;
  font-family:var(--mono);font-weight:700;font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--cream);background:rgba(3,3,3,.62);border:1px solid rgba(253,249,238,.55);border-radius:999px;cursor:pointer;
}
.gw-toggle:hover{background:var(--ember);color:var(--coal);border-color:var(--ember);}
.gw-toggle:focus-visible{outline:2px solid var(--ember);outline-offset:3px;}
.gw-toggle .gw-ico{width:14px;height:14px;display:inline-block;position:relative;}
.gw-toggle[data-state="playing"] .gw-ico::before,.gw-toggle[data-state="playing"] .gw-ico::after{
  content:"";position:absolute;top:0;bottom:0;width:4px;background:currentColor;
}
.gw-toggle[data-state="playing"] .gw-ico::before{left:2px;}
.gw-toggle[data-state="playing"] .gw-ico::after{right:2px;}
.gw-toggle[data-state="paused"] .gw-ico::before{
  content:"";position:absolute;left:2px;top:0;border-style:solid;border-width:7px 0 7px 12px;
  border-color:transparent transparent transparent currentColor;
}

/* ---------- spread under the opener ---------- */
.gw-spread{padding-top:clamp(24px,3vw,40px);}
.gw-spread .fp-page{padding-left:0;padding-right:0;}
.gw-spread .fp-left{padding-right:clamp(0px,2vw,24px);}
.gw-spread .fp-right{padding-left:clamp(0px,2vw,24px);}
.gw-lead{
  font-family:var(--body-serif);font-size:clamp(19px,2vw,23px);line-height:1.55;margin:0 0 16px;max-width:40ch;
}
.gw-label{
  font-family:var(--mono);font-weight:700;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ember-ink,#C0331A);margin:0 0 10px;display:block;
}
.gw-h2{
  font-family:var(--display);font-weight:400;text-transform:uppercase;line-height:.92;
  font-size:clamp(38px,5vw,72px);margin:0 0 14px;text-wrap:balance;
}
.gw-note{font-family:var(--mono);font-size:12px;letter-spacing:.03em;opacity:.72;margin:8px 0 0;}

/* story copy inside the spread / closing area: fill the page, not the 66ch article column */
.gw-prose{max-width:none;}
.gw-prose h3:first-child{margin-top:0;}
.gw-lead strong{font-weight:700;}

/* ---------- artists at work (process video) ---------- */
.gw-process{
  display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,.9fr);gap:clamp(20px,3vw,44px);align-items:end;
  margin:clamp(40px,5vw,72px) 0 0;padding-top:clamp(24px,3vw,36px);border-top:2px solid var(--coal);
}
.gw-process video{width:100%;aspect-ratio:16/9;background:var(--coal);display:block;}
.gw-process figcaption{font-family:var(--mono);font-size:11.5px;letter-spacing:.03em;line-height:1.5;opacity:.75;margin-top:8px;}
.gw-artists{list-style:none;padding:0;margin:0 0 16px;border-top:1px solid var(--rule);}
.gw-artists li{
  font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:clamp(28px,3.2vw,44px);
  line-height:1;padding:12px 0;border-bottom:1px solid var(--rule);
}
.gw-artists li small{
  display:block;margin-top:6px;font-family:var(--mono);font-weight:700;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ember-ink,#C0331A);line-height:1.2;
}
.gw-credits{margin:0;border-top:1px solid var(--rule);}
.gw-credits dt{
  font-family:var(--mono);font-weight:700;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  opacity:.65;padding-top:12px;
}
.gw-credits dd{
  font-family:var(--body-serif);font-size:18px;line-height:1.4;margin:2px 0 0;padding-bottom:12px;
  border-bottom:1px solid var(--rule);
}

/* ---------- final reveal ---------- */
.gw-reveal{margin:clamp(44px,6vw,84px) calc(-1 * clamp(16px,3vw,48px)) 0;position:relative;background:var(--coal);}
.gw-reveal img{width:100%;display:block;}
.gw-reveal figcaption{
  position:absolute;left:clamp(16px,3vw,48px);bottom:clamp(14px,2vw,26px);color:var(--cream);
  font-family:var(--mono);font-weight:700;font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  background:rgba(3,3,3,.6);padding:6px 10px;
}
/* closing sections flow in two balanced columns under the finished-wall reveal */
.gw-closing{
  margin-top:clamp(28px,3.5vw,48px);column-count:2;column-gap:clamp(24px,4vw,56px);
}
.gw-closing h3{break-after:avoid;margin-top:0;}
.gw-closing h3:not(:first-child){margin-top:32px;}
.gw-closing p{break-inside:avoid;}
.gw-after{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(20px,3vw,44px);margin-top:clamp(24px,3vw,40px);}

/* ---------- reduced motion: no autoplay, show the completed wall ---------- */
@media (prefers-reduced-motion: reduce){
  .gw-open video{display:none;}
  .gw-open .gw-still{display:block;}
}
.gw-open.is-still video{display:none;}
.gw-open.is-still .gw-still{display:block;}

/* ---------- mobile ---------- */
@media (max-width:760px){
  .gw-open{aspect-ratio:auto;max-height:none;min-height:0;overflow:visible;display:flex;flex-direction:column;}
  .gw-open .gw-frame{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;}
  .gw-open video,.gw-open .gw-still{object-fit:contain;object-position:50% 50%;}
  .gw-title{position:static;padding:18px 16px 22px;right:auto;display:block;}
  .gw-title .gw-kicker{position:static;color:var(--ember-ink,#C0331A);opacity:1;text-shadow:none;margin:0 0 6px;}
  .gw-dek{margin:10px 0 0;}
  .gw-h1{font-size:clamp(56px,17vw,84px);}
  .gw-fx--vignette{background:radial-gradient(ellipse 90% 85% at 50% 50%, rgba(3,3,3,0) 62%, rgba(3,3,3,.5) 100%);}
  .gw-toggle{right:10px;bottom:10px;padding:0 14px;}
  .gw-process,.gw-after{grid-template-columns:1fr;}
  .gw-closing{column-count:1;}
  .gw-reveal figcaption{position:static;display:block;background:none;color:var(--ink);padding:8px 16px 0;}
}
@media (min-width:760.02px){
  .gw-open .gw-frame{position:absolute;inset:0;}
}