/* STANDALONE PAGES — Mexico City, Compete.
   The film is a scroll performance and stays exactly as it is. These are reading pages, and
   they are a separate stylesheet on purpose: index.html keeps its own inline copy of the nav
   rules untouched, so nothing here can reach back into the film. The nav block below is
   therefore a deliberate duplicate of the film's, matched value for value, rather than a
   shared extraction that would have meant editing the approved page to refactor it.

   Type, colour and chrome are the film's own: Archivo for display, WZA-Unbounded for section
   heads, WZA-Inter for reading, JetBrains Mono for labels. */

/* Same four faces the film loads, redeclared here so these pages depend on nothing inside
   s01-s02-presentation.css. Identical URLs, so the browser serves them from cache — the
   duplicate declaration costs nothing at runtime and keeps the film's stylesheet untouched. */
@font-face{font-family:WZA-Unbounded;src:url('../assets/fonts/unbounded-500.ttf') format('truetype');font-style:normal;font-weight:500;font-display:swap}
@font-face{font-family:WZA-Unbounded;src:url('../assets/fonts/unbounded-700.ttf') format('truetype');font-style:normal;font-weight:700;font-display:swap}
@font-face{font-family:WZA-Inter;src:url('../assets/fonts/inter-500.ttf') format('truetype');font-style:normal;font-weight:500;font-display:swap}
@font-face{font-family:WZA-Inter;src:url('../assets/fonts/inter-600.ttf') format('truetype');font-style:normal;font-weight:600;font-display:swap}

:root{
  --green:#6CC180; --blue:#35A7DF;
  --ink:#fff; --ground:#050505;
  --paper:#f4f1ea;          /* the page ground — the film's own off-white, not pure #fff */
  --rule:rgba(9,9,9,.14);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body.wza-page{
  margin:0; background:var(--paper); color:#111;
  font-family:WZA-Inter,Inter,"Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}

/* ── NAV — value-for-value copy of the film's, so the two never look like different sites ── */
.site-nav{ position:fixed; z-index:100; top:12px; left:20px; right:20px; min-height:78px;
  display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:28px;
  padding:8px 10px 8px 22px; color:#fff; background:rgba(12,12,12,.78);
  border:1px solid rgba(255,255,255,.30); border-radius:20px; box-shadow:0 14px 42px rgba(0,0,0,.22);
  backdrop-filter:blur(16px) saturate(1.1); font:800 11px/1 Archivo,"Helvetica Neue",Arial,sans-serif;
  letter-spacing:.14em; text-transform:uppercase }
.site-nav a,.site-nav button{ color:inherit; font:inherit; letter-spacing:inherit; text-transform:inherit; text-decoration:none; border:0; background:none; cursor:pointer }
.site-brand{ display:flex; align-items:center; width:105px; min-width:105px; height:60px; white-space:nowrap }
.site-brand img{ width:94px; height:60px; object-fit:contain; object-position:left center; filter:drop-shadow(0 2px 5px rgba(0,0,0,.35)) }
.site-links{ justify-self:center; display:flex; align-items:center; gap:clamp(17px,2.15vw,38px); color:rgba(255,255,255,.72) }
.site-links a{ padding:8px 0; position:relative }
.site-links a:hover{ color:#fff }
/* THE ACTIVE MARKER IS aria-current, NOT :first-child. The film hardcodes the underline to the
   first link because Home is always the page you are on there. On a real multi-page nav that
   would underline Home while you are reading Mexico City, so the state is driven by the same
   attribute that tells a screen reader which page this is. */
.site-links a[aria-current="page"]{ color:#fff }
.site-links a[aria-current="page"]::after{ content:""; position:absolute; left:0; right:0; bottom:1px; height:2px; background:#fff }
.site-actions{ display:flex; gap:12px; align-items:center; padding-left:14px; border-left:1px solid rgba(255,255,255,.25) }
.site-menu{ padding:15px 18px; border:1px solid rgba(255,255,255,.42)!important }
.site-lang{ padding:15px 12px; border:1px solid rgba(255,255,255,.28)!important; min-width:42px }
@media(max-width:760px){
  .site-nav{top:10px;left:10px;right:10px;min-height:58px;padding:5px 6px 5px 12px;gap:8px;border-radius:15px}
  .site-links{display:none}
  .site-brand{width:76px;min-width:76px;height:46px}.site-brand img{width:76px;height:46px}
  .site-actions{gap:6px;padding-left:7px}
  .site-menu{padding:12px 10px!important}.site-lang{padding:12px 8px!important;min-width:38px}
}

/* ── PAGE HEAD — a dark band so the fixed nav has something to sit on, as it does on the film ── */
.page-head{ position:relative; padding:clamp(128px,15vh,190px) 0 clamp(48px,6vh,78px); background:var(--ground); color:#fff; overflow:hidden }

/* ASDEPORTE'S OWN TEXTURE, CARRIED ACROSS THE WHOLE DARK BLOCK.
   Jose supplied two cuts of the same watercolour — a 1920x240 band and an 800x320 block, teal
   to green with magenta halftone in opposite corners. It is not on the sponsor strip, which
   stays white to match SoCal, and it is not on the film, which is finished.

   The header and footer now carry it as a full field rather than only as an edge. The BLOCK cut
   fills the area: at 2.5:1 it scales into a header without the 8:1 band having to be stretched
   four times past its own proportion, which smeared the halftone into stripes. The band cut is
   kept for the edge line, where its proportion is exactly right.

   THE REASON THIS NEEDED DARKENING RATHER THAN JUST DROPPING IN. At full strength the green
   kicker (#6CC180) sits on the green half of the watercolour and disappears — same hue, near
   enough the same value. The overlay below is not decoration, it is what keeps that line
   readable.

   .70 is not a guess. The overlay was swept from .90 to .54 and each step measured against the
   real composited backdrop, with the copy hidden so only the backdrop was photographed:

     .90  kicker 8.23:1   texture barely a tint, not worth having
     .82  kicker 7.32:1
     .76  kicker 6.59:1   watercolour and both halftone corners read, block still dark
     .70  kicker 5.87:1   a step brighter on the client's note, still clear of AA  <-- here
     .62  kicker 4.91:1   green starts to overwhelm the block
     .54  kicker 4.15:1   FAILS AA

   At .70 the white title measures 12.83:1 worst case. .62 is the last passing step and .54 puts
   the kicker under the 4.5:1 floor outright, so there is one notch left above this if asked. */
.page-head::before{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:linear-gradient(rgba(9,9,9,.70),rgba(9,9,9,.77)),
             url('https://cdn.wodapalooza.com/media/texture/wza-block-800x320.jpg') center/cover no-repeat }
.page-head::after{ content:""; position:absolute; inset:auto 0 0; z-index:1; height:clamp(10px,1.4vh,16px);
  background:url('https://cdn.wodapalooza.com/media/texture/wza-band-1920x240.jpg') center/cover no-repeat }
.page-foot{ position:relative; overflow:hidden }
.page-foot::after{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:linear-gradient(rgba(9,9,9,.70),rgba(9,9,9,.77)),
             url('https://cdn.wodapalooza.com/media/texture/wza-block-800x320.jpg') center/cover no-repeat }
.page-foot::before{ content:""; position:absolute; inset:0 0 auto; z-index:1; height:clamp(10px,1.4vh,16px);
  background:url('https://cdn.wodapalooza.com/media/texture/wza-band-1920x240.jpg') center/cover no-repeat }
/* Both blocks put an absolutely positioned layer over a static .wrap, which would otherwise
   paint on top of the copy. Lifting the wrap is what keeps the text above the texture. */
/* Event Info's header is a photograph, not a flat block. .head-shot already covers the texture
   at the same z-index, so this changes nothing visually — it states the intent rather than
   leaving it to paint order, and saves fetching a texture that is never seen. Watercolour on top
   of a crowd shot muddies both; the photo carries that header on its own. */
.page-head.has-shot::before{ display:none }
.page-head .wrap,.page-foot .wrap{ position:relative; z-index:2 }
.page-kicker{ margin:0 0 14px; color:var(--green); font:700 10px/1.6 "JetBrains Mono",ui-monospace,monospace; letter-spacing:.2em; text-transform:uppercase }
.page-title{ margin:0; max-width:16ch; font:500 clamp(34px,5.6vw,78px)/1.02 WZA-Unbounded,Archivo,Arial,sans-serif; letter-spacing:-.03em; text-transform:uppercase }
.page-standfirst{ margin:clamp(20px,2.6vh,30px) 0 0; max-width:62ch; color:rgba(255,255,255,.82); font:500 clamp(15px,1.35vw,21px)/1.6 WZA-Inter,Inter,Arial,sans-serif }

.wrap{ width:min(1180px,calc(100% - clamp(32px,7vw,120px))); margin-inline:auto }

/* ── SECTIONS ───────────────────────────────────────────────────────────────────────────── */
.page-body{ padding:clamp(52px,7vh,96px) 0 clamp(72px,10vh,132px) }
.sec{ padding-block:clamp(34px,4.4vh,58px); border-top:1px solid var(--rule) }
.sec:first-child{ border-top:0; padding-top:0 }
.sec-head{ margin:0 0 clamp(22px,3vh,36px); font:500 clamp(22px,2.7vw,38px)/1.1 WZA-Unbounded,Archivo,Arial,sans-serif; letter-spacing:-.02em; text-transform:uppercase }
.sec-intro{ margin:-8px 0 clamp(26px,3.4vh,42px); max-width:66ch; color:#3b3b3b; font:500 clamp(15px,1.3vw,19px)/1.65 WZA-Inter,Inter,Arial,sans-serif }

/* Cards — the neighbourhoods and the areas to see */
.cards{ display:grid; gap:clamp(16px,2vw,26px); grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr)) }
/* WHERE TO STAY IS FOUR CARDS, AND FOUR INTO A THREE-COLUMN GRID LEAVES ONE STRANDED.
   A wider minimum gives two columns at this container width, so the four sit 2x2 and Santa Fe
   — which carries the most copy, including the trade-off paragraph — gets a column wide enough
   to hold it. What to see is five cards and reads fine as 3 + 2, so it keeps the default. */
.cards--stay{ grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr)) }
.card{ padding:clamp(22px,2.4vw,32px); background:#fff; border:1px solid var(--rule) }
.card h3{ margin:0 0 12px; font:500 clamp(17px,1.5vw,23px)/1.15 WZA-Unbounded,Archivo,Arial,sans-serif; letter-spacing:-.01em; text-transform:uppercase }
.card p{ margin:0 0 11px; color:#3b3b3b; font:500 clamp(14px,1.02vw,16px)/1.62 WZA-Inter,Inter,Arial,sans-serif }
.card p:last-child{ margin-bottom:0 }
.card .best{ margin-top:15px; padding-top:13px; border-top:1px solid var(--rule); color:#111; font:600 clamp(12px,.92vw,13px)/1.5 WZA-Inter,Inter,Arial,sans-serif }
.card .best b{ color:var(--green); font-weight:700 }

/* A pulled-out recommendation, used once — Santa Fe vs the walkable neighbourhoods */
.callout{ margin-top:clamp(20px,2.6vw,30px); padding:clamp(22px,2.6vw,34px); background:var(--ground); color:#fff; border-left:3px solid var(--green) }
.callout p{ margin:0; max-width:78ch; font:500 clamp(15px,1.15vw,18px)/1.62 WZA-Inter,Inter,Arial,sans-serif }
.callout b{ color:var(--green); font-weight:700 }

/* Prose blocks — Eat Like a Local, Getting Around */
.prose{ max-width:70ch }
.prose p{ margin:0 0 15px; color:#3b3b3b; font:500 clamp(15px,1.15vw,18px)/1.68 WZA-Inter,Inter,Arial,sans-serif }
.prose p:last-child{ margin-bottom:0 }
.prose .rule-line{ margin:26px 0; padding:20px 24px; background:#fff; border:1px solid var(--rule); color:#111;
  font:500 clamp(17px,1.6vw,25px)/1.25 WZA-Unbounded,Archivo,Arial,sans-serif; letter-spacing:-.02em; text-transform:uppercase }
.prose .note{ margin-top:22px; padding:18px 20px; background:rgba(53,167,223,.07); border:1px solid rgba(53,167,223,.28); color:#25445a;
  font:500 clamp(13px,1vw,15px)/1.6 WZA-Inter,Inter,Arial,sans-serif }
.prose .note b{ color:#111 }

/* Tips — a definition list, because each tip genuinely is term + explanation */
.tips{ display:grid; gap:0; margin:0; max-width:88ch }
.tips div{ display:grid; grid-template-columns:minmax(120px,190px) 1fr; gap:clamp(14px,2vw,32px);
  padding-block:clamp(15px,1.9vh,22px); border-top:1px solid var(--rule) }
.tips div:first-child{ border-top:0 }
.tips dt{ margin:0; font:500 clamp(14px,1.1vw,17px)/1.35 WZA-Unbounded,Archivo,Arial,sans-serif; letter-spacing:-.01em; text-transform:uppercase }
.tips dd{ margin:0; color:#3b3b3b; font:500 clamp(14px,1.05vw,16px)/1.62 WZA-Inter,Inter,Arial,sans-serif }
@media(max-width:640px){ .tips div{ grid-template-columns:1fr; gap:7px } }

/* ── DIVISION STANDARDS TABLE ────────────────────────────────────────────────────────────
   Nine divisions against twelve movements does not fit a phone, and squeezing it would make
   the numbers unreadable — which is the one thing this table exists to convey. So it scrolls
   horizontally inside its own container, exactly as mexico.wodapalooza.com does, and the
   movement column is sticky so you never lose track of which row you are reading. */
.table-scroll{ position:relative; overflow-x:auto; -webkit-overflow-scrolling:touch;
  border:1px solid var(--rule); background:#fff }
.table-hint{ margin:0 0 12px; color:#6a6a6a; font:700 10px/1.5 "JetBrains Mono",ui-monospace,monospace; letter-spacing:.14em; text-transform:uppercase }
table.standards{ border-collapse:collapse; width:max-content; min-width:100%;
  font:500 clamp(12px,.92vw,14px)/1.4 WZA-Inter,Inter,Arial,sans-serif }
table.standards th,table.standards td{ padding:12px 16px; text-align:left; border-bottom:1px solid var(--rule); white-space:nowrap }
table.standards thead th{ position:sticky; top:0; z-index:2; background:var(--ground); color:#fff;
  font:700 10px/1.35 "JetBrains Mono",ui-monospace,monospace; letter-spacing:.1em; text-transform:uppercase; white-space:normal; min-width:104px; vertical-align:bottom }
/* The movement name stays put while the divisions scroll past it. */
table.standards tbody th{ position:sticky; left:0; z-index:1; background:#fff; border-right:1px solid var(--rule);
  font:700 11px/1.35 "JetBrains Mono",ui-monospace,monospace; letter-spacing:.06em; text-transform:uppercase; color:#111; min-width:150px }
table.standards thead th:first-child{ left:0; z-index:3 }
table.standards tbody tr:nth-child(even) td{ background:rgba(9,9,9,.028) }
table.standards tbody tr:nth-child(even) th{ background:#f7f5f0 }
table.standards td{ color:#3b3b3b }
table.standards .yes{ color:var(--green); font-weight:700 }
table.standards .no{ color:#b0b0b0 }

/* ── QUALIFIER ───────────────────────────────────────────────────────────────────────── */
.status-line{ display:inline-block; margin:0 0 clamp(22px,3vh,32px); padding:11px 18px;
  background:rgba(9,9,9,.06); border-left:3px solid #9a9a9a; color:#3b3b3b;
  font:600 clamp(12px,1vw,14px)/1.5 WZA-Inter,Inter,Arial,sans-serif }
/* Five across at full width, so the five workouts read as a set rather than 4 + 1 stranded.
   A 270px minimum gave four columns and orphaned Workout 5 on its own row; 190px lands five
   in the container and still wraps to 3, 2 then 1 as the viewport narrows. */
.wods{ display:grid; gap:clamp(14px,1.6vw,22px); grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr)) }
.wod{ background:#fff; border:1px solid var(--rule); display:flex; flex-direction:column }
.wod img{ display:block; width:100%; height:auto; aspect-ratio:3/4; object-fit:cover; background:#111 }
.wod-body{ padding:clamp(16px,1.7vw,22px); display:flex; flex-direction:column; gap:9px; flex:1 }
.wod-body h3{ margin:0; font:500 clamp(16px,1.35vw,20px)/1.15 WZA-Unbounded,Archivo,Arial,sans-serif; letter-spacing:-.01em; text-transform:uppercase }
.wod-cap{ margin:0; color:var(--green); font:700 10px/1.4 "JetBrains Mono",ui-monospace,monospace; letter-spacing:.12em; text-transform:uppercase }
.wod-scheme{ margin:0; color:#111; font:600 clamp(13px,1.02vw,15px)/1.45 WZA-Inter,Inter,Arial,sans-serif }
.wod ul{ margin:0; padding-left:17px; color:#3b3b3b; font:500 clamp(13px,1vw,15px)/1.6 WZA-Inter,Inter,Arial,sans-serif }
.wod .card-link{ margin-top:auto; padding-top:13px; color:#111; font:700 10px/1 "JetBrains Mono",ui-monospace,monospace; letter-spacing:.12em; text-transform:uppercase; text-decoration:none; border-top:1px solid var(--rule) }
.wod .card-link:hover{ color:var(--green) }

/* ── VENUE RENDERS ───────────────────────────────────────────────────────────────────────
   Asdeporte's renders, used as evidence rather than decoration: each one shows a thing the
   copy claims. A scrim on the hero because white type has to sit on it. */
.head-shot{ position:absolute; inset:0; z-index:0 }
.head-shot img{ width:100%; height:100%; object-fit:cover; object-position:center 38% }
.head-shot::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(5,5,5,.86) 0%,rgba(5,5,5,.62) 45%,rgba(5,5,5,.80) 100%) }
.page-head.has-shot .page-standfirst{ color:rgba(255,255,255,.9) }

.shot{ margin:0; background:#111; border:1px solid var(--rule) }
.shot img{ display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:cover }
.shot figcaption{ padding:11px 15px; background:#fff; color:#5a5a5a;
  font:600 10px/1.5 "JetBrains Mono",ui-monospace,monospace; letter-spacing:.11em; text-transform:uppercase }
.shots{ display:grid; gap:clamp(14px,1.7vw,22px); grid-template-columns:repeat(auto-fit,minmax(min(100%,330px),1fr)); margin-top:clamp(22px,2.8vh,34px) }

/* ── PRIZE PANEL ────────────────────────────────────────────────────────────────────────
   The money IS the news on this page, and as .facts rows it read as small print. The figures
   are set as display type on the brand watercolour instead — the same dark block and the same
   .70 overlay as the page header, so it belongs to the system rather than being a one-off.
   No new asset: wza-block-800x320.jpg is already fetched for the header and footer, so this
   panel costs one extra paint and nothing extra over the network.
   Contrast on that overlay was measured when the header was built: white 12.83:1, the green
   #6CC180 5.87:1. The place labels are green, the amounts white; both clear 4.5:1.
   Three columns for the Elite podium, one row beneath for everything else. Below 720px they
   stack, because $250,000 set at display size cannot share a phone width with two siblings. */
.prizes{ position:relative; overflow:hidden; margin-top:clamp(24px,3vh,38px);
  padding:clamp(26px,3.4vw,44px); background:var(--ground); color:#fff }
.prizes::before{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:linear-gradient(rgba(9,9,9,.70),rgba(9,9,9,.77)),
             url('https://cdn.wodapalooza.com/media/texture/wza-block-800x320.jpg') center/cover no-repeat }
.prizes > *{ position:relative; z-index:2 }
.podium{ display:grid; gap:clamp(18px,2.4vw,32px); grid-template-columns:repeat(3,1fr) }
.prize .place{ margin:0 0 10px; color:var(--green);
  font:700 10px/1.5 "JetBrains Mono",ui-monospace,monospace; letter-spacing:.16em; text-transform:uppercase }
.prize .amount{ margin:0; color:#fff; font:500 clamp(26px,3.3vw,46px)/1.05 WZA-Unbounded,Archivo,Arial,sans-serif;
  letter-spacing:-.02em }
.prize .amount span{ display:inline-block; margin-left:.35em; color:rgba(255,255,255,.62);
  font:700 11px/1 "JetBrains Mono",ui-monospace,monospace; letter-spacing:.14em; vertical-align:middle }
/* The remaining divisions are a different kind of number — a pooled total, not a placing — so
   they sit below the podium on their own rule rather than as a fourth column pretending to be
   one. */
.prize--rest{ margin-top:clamp(22px,2.8vw,34px); padding-top:clamp(20px,2.6vw,30px);
  border-top:1px solid rgba(255,255,255,.22) }
.prize--rest .amount{ font-size:clamp(20px,2.2vw,30px) }
.prizes .foot{ margin:clamp(18px,2.2vw,26px) 0 0; color:rgba(255,255,255,.58);
  font:500 12px/1.6 WZA-Inter,Inter,Arial,sans-serif }
@media(max-width:720px){
  .podium{ grid-template-columns:1fr; gap:clamp(16px,4vw,22px) }
}

/* ── FACT BLOCK — dates, venue, address ─────────────────────────────────────────────────── */
.facts{ display:grid; gap:0; margin:0; max-width:74ch }
.facts div{ display:grid; grid-template-columns:minmax(110px,180px) 1fr; gap:clamp(14px,2vw,30px);
  padding-block:clamp(13px,1.7vh,19px); border-top:1px solid var(--rule) }
.facts div:first-child{ border-top:0 }
.facts dt{ margin:0; color:#111; font:700 10px/1.5 "JetBrains Mono",ui-monospace,monospace; letter-spacing:.13em; text-transform:uppercase }
.facts dd{ margin:0; color:#3b3b3b; font:500 clamp(14px,1.08vw,17px)/1.55 WZA-Inter,Inter,Arial,sans-serif }
.facts dd a{ color:#111; text-decoration:underline; text-underline-offset:3px }
@media(max-width:640px){ .facts div{ grid-template-columns:1fr; gap:5px } }

/* ── DIVISIONS ──────────────────────────────────────────────────────────────────────────── */
.divs{ display:grid; gap:clamp(14px,1.8vw,22px); grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr)) }
.div-card{ padding:clamp(20px,2.2vw,28px); background:#fff; border:1px solid var(--rule) }
.div-card h3{ margin:0 0 6px; font:500 clamp(16px,1.4vw,21px)/1.15 WZA-Unbounded,Archivo,Arial,sans-serif; letter-spacing:-.01em; text-transform:uppercase }
.div-card .who{ margin:0 0 11px; color:var(--green); font:700 9px/1.5 "JetBrains Mono",ui-monospace,monospace; letter-spacing:.13em; text-transform:uppercase }
.div-card p{ margin:0; color:#3b3b3b; font:500 clamp(13px,1vw,15px)/1.6 WZA-Inter,Inter,Arial,sans-serif }
.div-card ul{ margin:10px 0 0; padding-left:16px; color:#3b3b3b; font:500 clamp(13px,1vw,15px)/1.7 WZA-Inter,Inter,Arial,sans-serif }

/* ── A PLAIN LIST OF INCLUSIONS ─────────────────────────────────────────────────────────── */
.ticks{ margin:0; padding:0; list-style:none; display:grid; gap:11px; max-width:70ch }
.ticks li{ padding-left:26px; position:relative; color:#3b3b3b; font:500 clamp(14px,1.08vw,17px)/1.55 WZA-Inter,Inter,Arial,sans-serif }
.ticks li::before{ content:"→"; position:absolute; left:0; top:0; color:var(--green); font-weight:700 }

/* ── CROSS-LINK to the Mexico City page ─────────────────────────────────────────────────── */
.crosslink{ margin-top:clamp(22px,2.8vw,32px); padding:clamp(22px,2.6vw,32px);
  background:var(--ground); color:#fff; display:flex; flex-wrap:wrap; gap:20px 32px; align-items:center; justify-content:space-between }
.crosslink p{ margin:0; max-width:60ch; font:500 clamp(14px,1.1vw,17px)/1.6 WZA-Inter,Inter,Arial,sans-serif; color:rgba(255,255,255,.86) }

/* ── FOOT — deliberately quieter than the film's footer; this is a reading page, not the close ── */
.page-foot{ padding:clamp(44px,6vh,72px) 0; background:var(--ground); color:#fff }
.page-foot .wrap{ display:flex; flex-wrap:wrap; gap:22px 40px; align-items:center; justify-content:space-between }
.page-foot a{ color:var(--green); font:600 14px/1.5 WZA-Inter,Inter,Arial,sans-serif; text-decoration:underline; text-underline-offset:5px }
.page-foot p{ margin:0; color:rgba(255,255,255,.62); font:500 12px/1.6 WZA-Inter,Inter,Arial,sans-serif }
.btn-link{ display:inline-grid; place-items:center; padding:16px 26px; border:1px solid var(--green); color:var(--green)!important;
  font:700 12px/1 WZA-Unbounded,Archivo,Arial,sans-serif; letter-spacing:.1em; text-transform:uppercase; text-decoration:none!important;
  transition:background-color .2s,color .2s }
.btn-link:hover{ background:var(--green); color:#050505!important }

@media(prefers-reduced-motion:reduce){ html{scroll-behavior:auto} .btn-link{transition:none} }