/* ============================================================
   MONARK v2
   Language: club flyer / print archive. Anton display shouted at
   poster scale, Space Mono for every label and date. Red is a
   ground with a halftone screen, sections tear like paper, the
   posters hang crooked with tape. Glass on exactly two elements
   (nav, signup widget), which is what the client asked for.
   No framework. No build step.
   ============================================================ */

/* ------------------------------------------------------------
   Self-hosted webfonts. These used to come from Google Fonts,
   which handed every visitor's IP to a US server on page load —
   the site's only third-party request, and its only GDPR problem.
   The files are the unmodified `latin` woff2 subsets Google itself
   serves (Anton v27, Space Mono v17); SIL OFL 1.1, see
   fonts/LICENSE.txt. Paths are relative to THIS FILE, not the page.
   Only the three faces the site actually uses are shipped: no
   italic (nothing on the site is italic — every <i> is an empty
   decorative shape) and no latin-ext (the only non-ASCII glyphs in
   the copy are · — ’ …, all inside the latin range).
   ------------------------------------------------------------ */
@font-face{
  font-family:'Anton';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('../fonts/anton-400.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Space Mono';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('../fonts/space-mono-400.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Space Mono';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('../fonts/space-mono-700.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root{
  color-scheme:dark;
  --ink:#0c0b0b;
  --ink-2:#151313;
  --bone:#f2efe9;
  --bone-dim:#a8a29a;
  --red:#e0221b;
  --red-dark:#9c1610;

  --disp:"Anton","Archivo Black",Impact,"Arial Black",sans-serif;
  --mono:"Space Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  /* Safe areas. The pages ship viewport-fit=cover, so on a phone with a notch
     or a Dynamic Island the layout runs edge to edge and these are the strips
     the hardware sits in. Off such a device every one of them is 0px and every
     rule below collapses to what it was.
     --nav-h is the whole bar, inset included, on purpose: eight rules across
     two stylesheets size themselves off it (hero min-height, the drawer's
     inset, .poster's padding, the story-map stage, the hero's scroll-margin),
     and every one of them wants the taller bar. .nav pads its own content down
     by --sat so the wordmark clears the island while the bar's ground fills
     the strip above it — which is the strip the page used to scroll through. */
  --sat:env(safe-area-inset-top,0px);
  --sab:env(safe-area-inset-bottom,0px);
  --sal:env(safe-area-inset-left,0px);
  --sar:env(safe-area-inset-right,0px);

  --pad:max(clamp(20px,5vw,72px),var(--sal),var(--sar));
  --nav-h:calc(64px + var(--sat));
  --tape:rgba(242,239,233,.9);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:clip;scroll-snap-type:y proximity}
body{
  margin:0;background:var(--ink);color:var(--bone);
  font-family:var(--mono);
  font-size:15px;line-height:1.6;
  /* `hidden` first, `clip` second, on purpose. Safari only learned `clip` in
     16, so on iOS 15 both of this file's overflow-x:clip declarations are
     dropped as invalid and .marq (106vw at margin-left:-3vw, see below) leaks
     off the right edge of every page that carries it: measured +12px of
     sideways scroll at 390, +99px at 1280 where body also holds the 60px
     spine padding. `hidden` on body propagates to the viewport whenever html
     computes to `visible` — which is exactly the iOS 15 case — so body itself
     stays a plain block: no new formatting context, sticky nav untouched.
     Anywhere `clip` parses, the second declaration wins and nothing changes.
     Clipping .marq at its own wrapper instead does not work: `rotate:-1.4deg`
     is a transform, so the wrapper's box is the untilted band and
     overflow:hidden would slice the tilt and the drop shadow flat. */
  overflow-x:hidden;overflow-x:clip;
  -webkit-font-smoothing:antialiased;
}
/* height:auto is load-bearing: every <img> now carries intrinsic width/height
   attributes (they stop layout shift). Without height:auto the attribute
   wins over the CSS width and the image renders at its raw pixel height —
   the 900x300 logo came out square. The attributes must act as an aspect
   ratio hint, not as a size. */
img,video,svg{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit;color:inherit}
::selection{background:var(--red);color:#fff}
:focus-visible{outline:2px solid var(--red);outline-offset:3px}
/* the tap flash, which is the sibling of ::selection above and the only touch
   feedback most elements here get — :active is styled on .btn and nowhere else,
   so setting this to transparent would remove feedback rather than add polish.
   Left to the browser it is rgba(51,181,229,.4) on Chrome for Android: a sky
   blue box, on a black and red flyer. The property inherits, so one rule on the
   root recolours every tap on the site. */
html{-webkit-tap-highlight-color:rgba(224,34,27,.28)}
html{scrollbar-color:var(--red) var(--ink)}
::-webkit-scrollbar{width:11px}
::-webkit-scrollbar-track{background:var(--ink)}
::-webkit-scrollbar-thumb{background:var(--red);border:2px solid var(--ink)}

.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- type ---------------------------------------------------- */
.d,h1,h2,h3{
  font-family:var(--disp);
  font-weight:400;text-transform:uppercase;
  letter-spacing:.012em;word-spacing:.05em;line-height:.88;margin:0;
  text-wrap:balance;
}
h1{font-size:clamp(3.2rem,9.6vw,9rem)}
h2{font-size:clamp(2.5rem,6.4vw,5.8rem)}
h3{font-size:clamp(1.15rem,2vw,1.6rem);line-height:1}
p{margin:0 0 1.1em;max-width:58ch}
.lede{font-size:clamp(1rem,1.35vw,1.15rem);line-height:1.65;color:#ded9d1}
.dim{color:var(--bone-dim)}
.meta{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--bone-dim)}
/* Every .meta link on the site is the same one: "← Every night" at the top of
   the 11 event pages, and it is the whole paragraph, not a word inside a
   sentence — so the inline exemption from the target-size rules does not cover
   it and 112x17 is a real miss on a thumb. The <a> is inline, so vertical
   padding grows the hit box (17 → 45px) without touching the line box, and the
   paragraph's own clamp(18px,2.6vw,30px) bottom margin absorbs the overhang. */
.meta a{padding:14px 0}
.num{font-variant-numeric:tabular-nums}

/* stroke-only display line: hierarchy without changing size */
.ghost{-webkit-text-stroke:2.5px var(--bone);-webkit-text-fill-color:transparent}
.band .ghost{-webkit-text-stroke:2.5px #fff}

/* catalog index, our own numbering, set in red */
.cat{display:block;font-family:var(--mono);font-weight:700;color:var(--red);
  font-size:.6rem;letter-spacing:.14em;margin-bottom:4px;-webkit-text-fill-color:var(--red)}
.cat-inline{color:var(--red);font-weight:700}

/* the 4-point sparkle from the wordmark, the only separator */
.star{display:inline-block;width:.62em;height:.62em;flex:none;
  background:currentColor;
  clip-path:polygon(50% 0,58% 42%,100% 50%,58% 58%,50% 100%,42% 58%,0 50%,42% 42%);
}

/* ---------- shell --------------------------------------------------- */
.wrap{width:min(1440px,100% - var(--pad)*2);margin-inline:auto}
.sec{padding:clamp(72px,11vw,168px) 0;position:relative}
.sec-tight{padding:clamp(48px,7vw,96px) 0;position:relative}

/* film grain, one fixed layer */
body::after{
  content:"";position:fixed;inset:0;z-index:90;pointer-events:none;
  opacity:.42;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
}

/* ---------- buttons: sharp, directional fill ------------------------ */
.btn{
  position:relative;z-index:0;overflow:hidden;
  display:inline-flex;align-items:center;gap:.7em;
  padding:1.05em 1.6em;border:1px solid var(--bone);
  background:transparent;color:var(--bone);
  font-family:var(--mono);
  font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;font-weight:700;
  cursor:pointer;white-space:nowrap;
  transition:color .22s,border-color .22s,transform .12s;
}
.btn::before{
  content:"";position:absolute;inset:0;z-index:-1;background:var(--bone);
  translate:0 101%;transition:translate .28s cubic-bezier(.16,1,.3,1);
}
.btn:hover{color:var(--ink)}
.btn:hover::before{translate:0 0}
.btn:active{transform:translateY(1px)}
.btn svg{width:1.05em;height:1.05em;flex:none}
/* every icon in icons/ is white, so one rule covers them all: the button fills
   light on hover and the icon has to flip or it vanishes into the fill. */
.btn img{transition:filter .22s}
.btn:hover img{filter:invert(1)}

.btn-red{background:var(--red);border-color:var(--red);color:#fff}
.btn-red::before{background:#fff}
.btn-red:hover{color:var(--red)}
.btn-fill-ink{background:var(--ink);border-color:var(--ink);color:var(--bone)}
.btn-fill-ink::before{background:var(--bone)}
.btn-fill-ink:hover{color:var(--ink)}

/* ---------- nav: glass, one line, 64px ------------------------------ */
.nav{
  position:sticky;top:0;z-index:80;height:var(--nav-h);padding-top:var(--sat);
  display:flex;align-items:center;
  background:rgba(12,11,11,.62);
  border-bottom:1px solid rgba(242,239,233,.14);
  backdrop-filter:blur(20px) saturate(160%);
  -webkit-backdrop-filter:blur(20px) saturate(160%);
}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:24px}
.nav-logo img{height:19px;width:auto}
/* the anchor was exactly the image, 57x19, and on a phone it is the only way
   back to the homepage. Transparent padding takes the tap target to 57x45; the
   matching negative margin hands the flex row the same 19px margin box it had,
   so .nav-in's height, and the wordmark's position in it, do not move. */
.nav-logo{padding:13px 0;margin:-13px 0}
.nav-links{display:flex;align-items:center;gap:clamp(12px,1.9vw,30px)}
.nav-links a{
  font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--bone-dim);padding:4px 0;position:relative;transition:color .18s;
}
.nav-links a:hover{color:var(--bone)}
.nav-links a[aria-current]{color:var(--bone)}
.nav-links a[aria-current]::after{
  content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--red);
}
.nav-cta{padding:.72em 1.15em;font-size:.66rem}
.nav-cta[aria-current]{color:#fff}
.nav-cta[aria-current]::after{display:none}
.burger{display:none;background:none;border:0;padding:10px 12px;margin-right:-12px;cursor:pointer}
.burger i{display:block;width:24px;height:2px;background:var(--bone);margin:5px 0;transition:transform .25s,opacity .25s}
.nav.open .burger i:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav.open .burger i:nth-child(2){opacity:0}
.nav.open .burger i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* The drawer is back, and opaque. Two things were wrong with it.
   The bar is rgba(12,11,11,.62) over a backdrop-filter, so on a phone the
   poster wall read straight through it — fine over a video hero, ugly over
   a grid of bright 4:5 tiles. Under 900px it is solid, and the blur goes
   with it: backdrop-filter on .nav also made .nav the containing block for
   the position:fixed drawer inside it, so the panel was only ever pinned to
   the viewport by the coincidence of the bar being stuck at 0.
   The "menu opens at the top of the site" half of it was js/v2.js locking
   scroll on body; that is fixed there, on the root instead. */
@media (max-width:900px){
  .nav{background:#0c0b0b;backdrop-filter:none;-webkit-backdrop-filter:none}
  /* The bar's ground keeps going above the bar. Whatever opens a strip over a
     sticky top:0 element — iOS Safari offsetting the layout viewport from the
     visual one as it collapses its toolbar, the page running under a notch or
     a Dynamic Island, a rubber-band bounce at the top of the document — the
     page used to scroll through that strip: measured off a photo of an iPhone
     16 Pro, the black band started at y=68 CSS and the poster wall was visible
     above it. This block sits immediately above the bar, and every other time
     — which is the bar actually at y=0 — it is off-screen, so it costs nothing
     and cannot shift anything: out of flow, and the bar has no overflow to
     clip it. 200px covers the tallest inset iOS has. Mobile only, where the
     bar is #0c0b0b and the two match exactly; desktop keeps its glass. */
  .nav::before{
    content:"";position:absolute;left:0;right:0;bottom:100%;height:200px;
    background:#0c0b0b;
  }
  .burger{display:block}
  .nav-links{
    position:fixed;inset:var(--nav-h) 0 auto 0;flex-direction:column;
    align-items:stretch;gap:0;padding:8px var(--pad) 26px;
    background:#0c0b0b;
    border-bottom:1px solid rgba(242,239,233,.14);
    transform:translateY(-130%);transition:transform .32s cubic-bezier(.16,1,.3,1);
  }
  .nav.open .nav-links{transform:translateY(0)}
  .nav-links a{
    font-family:var(--disp);font-weight:400;
    font-size:2.2rem;letter-spacing:.01em;color:var(--bone);
    padding:11px 0;border-bottom:1px solid rgba(242,239,233,.1);
  }
  .nav-links a[aria-current]::after{display:none}
  .nav-links a[aria-current]{color:var(--red)}
  /* TICKETS is one of the five, not a red chip at the bottom. The .nav-links a
     rule above already wins the face (it beats .btn and .nav-cta on the type
     selector), so only .btn's box has to be taken off. */
  .nav-links .nav-cta{
    background:none;border:0;border-bottom:1px solid rgba(242,239,233,.1);
    overflow:visible;min-height:0;margin-top:0;
  }
  .nav-links .nav-cta::before{display:none}
}

/* ---------- hero: the video punches through the tagline -------------- */
.hero{
  position:relative;min-height:calc(100dvh - var(--nav-h));
  overflow:hidden;background:#000;isolation:isolate;
  display:flex;flex-direction:column;
}
.hero-top{position:relative;z-index:1;
  padding:clamp(18px,3vh,34px) var(--pad) 10px}
.hero-bot{position:relative;z-index:1;
  padding:12px var(--pad) clamp(20px,3.5vh,38px);
  display:flex;align-items:center;justify-content:space-between;gap:14px}
.hero-bg{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:contrast(1.12) saturate(1.4) brightness(1.45);
}
/* full-bleed video hero: the old darken-knockout made the letters as dark
   as the club footage, i.e. often invisible. Now the video shows across the
   whole hero and the tagline is solid bone with a red offset shadow (print
   misregistration, flyer language) — legible on any frame. The scrim keeps
   the middle bright and darkens top/bottom for the wordmark and buttons. */
.hero-scrim{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(12,11,11,.72),rgba(12,11,11,.18) 32%,rgba(12,11,11,.18) 68%,rgba(12,11,11,.8))}
.hero-knock{
  position:relative;z-index:1;flex:1;
  display:flex;flex-direction:column;justify-content:center;
  gap:clamp(4px,.8vw,14px);
  padding:clamp(8px,1.6vh,18px) var(--pad);
  text-transform:uppercase;color:var(--bone);
  opacity:.78; /* slightly transparent: the video ghosts through the whole tagline */
}
.fit{
  display:block;font-family:var(--disp);font-weight:400;
  line-height:.84;letter-spacing:.01em;white-space:nowrap;
  font-size:clamp(2.6rem,9.5vw,8rem); /* no-JS fallback */
  text-shadow:.032em .032em 0 var(--red),0 .04em .5em rgba(0,0,0,.55);
}
.js .fit{visibility:hidden}
.js .fit.on{visibility:visible}
/* desktop: two lines (bigger glyphs); mobile: three */
.fit-d{display:none}
@media (min-width:901px){.fit-m{display:none}.fit-d{display:block}}
.hero-mark{width:min(300px,48vw);margin-inline:auto}
.hero-acts{display:flex;gap:12px;flex-wrap:wrap}

/* ---------- the one marquee, tilted like a strap --------------------- */
.marq-tilt{position:relative;z-index:6}
.marq{
  background:var(--red);color:#fff;overflow:hidden;
  padding:clamp(12px,1.6vw,20px) 0;
  border-block:1px solid var(--red-dark);
  width:106vw;margin-left:-3vw;rotate:-1.4deg;
  box-shadow:0 16px 44px -20px rgba(0,0,0,.85);
}
.marq-track{display:flex;width:max-content;gap:0;animation:roll 34s linear infinite}
.marq .marq-track span{
  display:flex;align-items:center;gap:.55em;padding-right:.55em;
  font-family:var(--disp);font-weight:400;
  font-size:clamp(1.5rem,3.2vw,2.8rem);line-height:1;
  text-transform:uppercase;letter-spacing:.01em;white-space:nowrap;
}
@keyframes roll{to{transform:translateX(-50%)}}

/* ---------- red band: halftone, photo under, torn edges -------------- */
.band{background:var(--red);color:#fff;position:relative;overflow:hidden;isolation:isolate}
.band-media{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-1;
  mix-blend-mode:luminosity;opacity:.22;filter:contrast(1.15) brightness(.85);
}
.band::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.16;
  background-image:radial-gradient(circle at 1px 1px,#000 1px,transparent 1.4px);
  background-size:7px 7px;
}
.band > .wrap{position:relative;z-index:1}
.band .dim{color:#fff}
.band .meta{color:#fff}
.tear{
  position:absolute;left:0;right:0;height:20px;background:var(--ink);z-index:0;
  clip-path:polygon(0% 0%,100% 0%,97.8% 34%,95.0% 28%,92.5% 51%,90.8% 62%,89.1% 56%,87.4% 29%,85.0% 86%,83.2% 39%,80.5% 96%,77.8% 53%,74.5% 26%,71.3% 45%,69.5% 31%,67.3% 86%,65.4% 67%,62.6% 51%,60.0% 27%,58.3% 38%,55.5% 55%,53.4% 68%,50.9% 45%,47.9% 77%,45.9% 67%,43.3% 90%,40.4% 44%,37.0% 31%,34.7% 81%,32.8% 60%,31.1% 74%,28.2% 67%,25.0% 46%,22.1% 68%,19.5% 58%,16.4% 96%,13.9% 74%,12.2% 77%,9.5% 99%,6.4% 44%,4.1% 74%,2.4% 58%,0.5% 31%,0.0% 82%);
}
.tear-t{top:-1px}
.tear-b{bottom:-1px;transform:scaleY(-1) scaleX(-1)}

/* ---------- next night + the glass widget ---------------------------- */
.next{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(28px,5vw,80px);align-items:center;
}
.next-date{
  font-family:var(--disp);font-weight:400;
  font-size:clamp(2.6rem,6.2vw,5.6rem);line-height:.88;letter-spacing:.01em;
  text-transform:uppercase;margin:0 0 .3em;max-width:13ch;text-wrap:balance;
}
.next-sub{max-width:34ch;margin-bottom:0}
.next.has-poster{grid-template-columns:minmax(0,.95fr) minmax(0,.6fr) minmax(0,.85fr)}
.next-poster{position:relative;display:block;rotate:-1.6deg;justify-self:center;width:min(340px,100%)}
.next-poster img{width:100%;box-shadow:0 24px 48px -20px rgba(0,0,0,.8)}
.next-poster::before{ /* tape */
  content:"";position:absolute;top:-10px;left:50%;width:78px;height:22px;
  transform:translateX(-50%) rotate(-2.4deg);
  background:var(--tape);opacity:.28;z-index:2;
}
/* Between seasons the next-night slot has no poster to hang. Same 4:5 frame,
   tape and tilt as a real one — it sits inside .next-poster and inherits all
   of that — but the missing date is the subject, not a placeholder image. */
.tba{
  aspect-ratio:4/5;display:grid;align-content:center;justify-items:center;
  gap:clamp(12px,1.6vw,18px);padding:clamp(22px,3vw,38px);text-align:center;
  background:var(--ink-2);border:1px dashed rgba(242,239,233,.26);
  box-shadow:0 24px 48px -20px rgba(0,0,0,.8);
  transition:border-color .3s,background .3s;
}
.tba img{width:min(160px,54%);box-shadow:none}
.tba b{
  font-family:var(--disp);font-weight:400;text-transform:uppercase;
  font-size:clamp(1.6rem,3.6vw,2.4rem);line-height:.9;letter-spacing:.01em;
}
.tba i.star{width:11px;height:11px;color:var(--red)}
a.next-poster:hover .tba{border-color:var(--red);background:#191616}
/* glass widget: frosted, hung slightly crooked like a sticker */
.glass{
  position:relative;isolation:isolate;overflow:hidden;
  padding:clamp(24px,3vw,40px);
  border:1px solid rgba(255,255,255,.34);
  background:linear-gradient(150deg,rgba(255,255,255,.26),rgba(255,255,255,.07));
  backdrop-filter:blur(26px) saturate(150%);
  -webkit-backdrop-filter:blur(26px) saturate(150%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 24px 60px -28px rgba(0,0,0,.55);
  rotate:-1.3deg;transition:rotate .35s cubic-bezier(.16,1,.3,1);
}
.glass:hover{rotate:0deg}
.glass::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 60% at 12% 0%,rgba(255,255,255,.4),transparent 46%);
}
.glass > *{position:relative;z-index:1}
@media (prefers-reduced-transparency:reduce){
  .glass{background:var(--red-dark);backdrop-filter:none;-webkit-backdrop-filter:none}
}
@media (max-width:900px){.next,.next.has-poster{grid-template-columns:1fr}.contact-grid{grid-template-columns:1fr!important}}

/* ---------- word stickers -------------------------------------------- */
.stick{
  position:absolute;z-index:7;rotate:var(--r,0deg);pointer-events:none;
  filter:drop-shadow(0 16px 28px rgba(0,0,0,.5));
}
@supports (animation-timeline:view()){
  .stick{animation:stickdrift linear both;animation-timeline:view();animation-range:entry 0% cover 55%}
  @keyframes stickdrift{from{translate:0 52px}to{translate:0 0}}
}

/* ---------- date slash + updates feed -------------------------------- */
.sl{color:var(--red);font-weight:700}
.feed{border-top:1px solid rgba(242,239,233,.16)}
.feed-row{
  display:grid;grid-template-columns:auto 1fr auto;align-items:baseline;
  gap:clamp(14px,3vw,40px);padding:13px 2px;
  border-bottom:1px solid rgba(242,239,233,.16);
  transition:background .18s,padding-left .25s;
}
.feed-row:hover{background:rgba(224,34,27,.1);padding-left:12px}
.feed-row .meta{white-space:nowrap}
.feed-txt{font-size:.86rem;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.feed-go{opacity:0;transition:opacity .2s;align-self:center}
.feed-row:hover .feed-go{opacity:1}
@media (max-width:620px){.feed-row{grid-template-columns:1fr auto}.feed-row .meta{grid-column:1/-1}}

/* ---------- manifesto slab ------------------------------------------- */
.slab{font-size:clamp(2.5rem,6.4vw,5.8rem);max-width:16ch}
.slab-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(28px,5vw,72px);align-items:end}
.slab-photo{width:100%;aspect-ratio:3/4;object-fit:cover;filter:grayscale(1) contrast(1.15);
  box-shadow:0 26px 60px -26px rgba(0,0,0,.8)}
.figs{display:flex;flex-wrap:wrap;gap:0;margin-top:clamp(28px,4vw,52px);
  border-top:1px solid rgba(242,239,233,.16)}
.fig{flex:1 1 130px;padding:22px 20px 20px 0}
.fig b{display:block;font-family:var(--disp);font-weight:400;
  font-size:clamp(2.4rem,4.6vw,4rem);line-height:1;letter-spacing:.01em}
@media (max-width:900px){.slab-grid{grid-template-columns:1fr}.slab-photo{aspect-ratio:16/10}}

/* poster marquee: the whole archive rolling on one row (index) */
.wall-marq{overflow:hidden}
.wall-track{display:flex;width:max-content;animation:roll 80s linear infinite}
.wall-track .pin{width:clamp(220px,23vw,320px);flex:none;margin-right:clamp(16px,2vw,30px)}
.wall-marq:hover .wall-track{animation-play-state:paused}
.wall-marq{cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.wall-marq:active{cursor:grabbing}
.wall-track .pin img{-webkit-user-drag:none}

/* ---------- poster wall ----------------------------------------------- */
.wall{
  display:grid;grid-template-columns:repeat(12,1fr);
  gap:clamp(16px,2.4vw,34px) clamp(14px,2vw,28px);
}
.pin{
  position:relative;display:block;grid-column:span 3;
  transition:transform .4s cubic-bezier(.16,1,.3,1),filter .4s;
}
.pin img{width:100%;aspect-ratio:3/4;object-fit:cover;filter:saturate(.92) contrast(1.04);
  box-shadow:0 24px 48px -20px rgba(0,0,0,.8)}
.pin::before{ /* tape */
  content:"";position:absolute;top:-10px;left:50%;width:78px;height:22px;
  transform:translateX(-50%) rotate(-2.4deg);
  background:var(--tape);opacity:.28;z-index:2;
}
.pin figcaption{
  display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  padding-top:11px;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;
}
.pin figcaption b{font-weight:400;color:var(--bone)}
.pin figcaption span{color:var(--bone-dim);font-variant-numeric:tabular-nums}
/* the date is a direct child, the catalog id is nested in the <b>: only the
   date must not break, or a long night name squeezes it onto two lines */
.pin figcaption > span{white-space:nowrap}
.pin:nth-child(4n+1){transform:rotate(-1.6deg)}
.pin:nth-child(4n+2){transform:rotate(1.1deg) translateY(18px)}
.pin:nth-child(4n+3){transform:rotate(-.7deg) translateY(-10px)}
.pin:nth-child(4n+4){transform:rotate(1.9deg) translateY(8px)}
.pin:hover{transform:rotate(0) translateY(-8px) scale(1.02);z-index:3}
.pin:hover img{filter:saturate(1.1) contrast(1.08)}
.pin .go{
  position:absolute;right:10px;bottom:64px;width:38px;height:38px;
  display:grid;place-items:center;background:var(--red);color:#fff;
  opacity:0;transform:translateY(6px);transition:opacity .3s,transform .3s;
}
.pin:hover .go{opacity:1;transform:none}
.pin .go svg{width:17px;height:17px}
.chip{
  position:absolute;top:10px;left:-6px;z-index:2;
  background:var(--red);color:#fff;
  font-size:.62rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  padding:.45em .8em;rotate:-4deg;
  box-shadow:0 6px 16px -6px rgba(0,0,0,.7);
}
/* hover one poster, the rest step back */
@media (hover:hover){
  .wall:hover .pin:not(:hover){filter:grayscale(.75) opacity(.55)}
  .wall .pin{transition:transform .4s cubic-bezier(.16,1,.3,1),filter .45s,opacity .45s}
}
.wall .pin.wide{grid-column:span 6}
.wall .pin.wide img{aspect-ratio:16/11}
@media (max-width:1024px){
  .pin{grid-column:span 6}
  .wall .pin.wide{grid-column:span 12}
}
/* Two across on a phone, not one: eleven single-column tiles made the wall
   a scroll with nothing to compare, and 3/4 tiles at half width still read.
   The tilt comes off — at this pitch the rotations touch. */
@media (max-width:620px){
  .pin,.wall .pin.wide{transform:none!important}
  .pin:hover{transform:translateY(-4px)!important}
  /* name over date, not beside it: the date is white-space:nowrap and 109px
     wide, so on a 133px tile at 320px it shared a line with the name and
     pushed every caption 2-21px past its own box. */
  .pin figcaption{display:block;padding-top:8px;font-size:.58rem;letter-spacing:.08em}
  .pin figcaption b,.pin figcaption > span{display:block}
}
/* An odd poster count leaves the last row with a single tile hanging left.
   Centre it instead. Scoped per breakpoint so the 620px stack stays span 12. */
@media (min-width:1025px){
  .wall .pin:last-child:nth-child(4n+1){grid-column:5/span 3}
}
@media (max-width:1024px){
  .wall .pin:last-child:nth-child(odd){grid-column:4/span 6}
}

/* ---------- ticket stubs ---------------------------------------------- */
.stub{
  display:grid;grid-template-columns:auto 1fr auto;align-items:stretch;
  background:var(--ink-2);border:1px solid rgba(242,239,233,.12);
  transition:border-color .25s,background .25s;
}
.stub:hover{border-color:var(--red);background:#191515}
.stub-img{width:clamp(84px,10vw,132px);align-self:stretch;object-fit:cover;filter:saturate(.9)}
.stub-body{padding:clamp(16px,2vw,26px);min-width:0;display:flex;flex-direction:column;justify-content:center;gap:9px}
.stub-name{font-size:clamp(1.5rem,3vw,2.5rem)}
.stub-line{display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center}
.stub-end{
  position:relative;display:flex;flex-direction:column;align-items:flex-end;
  justify-content:center;gap:12px;padding:clamp(16px,2vw,26px);
  border-left:1px dashed rgba(242,239,233,.26);
}
.stub-end::before,.stub-end::after{
  content:"";position:absolute;left:-9px;width:18px;height:18px;
  background:var(--ink);border-radius:50%;
}
.stub-end::before{top:-9px}
.stub-end::after{bottom:-9px}
.stamp{
  font-size:.68rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  border:2px solid var(--red);color:#ff5c52;padding:.4em .75em;
  transform:rotate(-6deg);white-space:nowrap;
}
@media (max-width:720px){
  .stub{grid-template-columns:auto 1fr}
  .stub-end{grid-column:1/-1;flex-direction:row;align-items:center;justify-content:space-between;
    border-left:0;border-top:1px dashed rgba(242,239,233,.26);padding-top:14px}
  .stub-end::before{top:-9px;left:-9px}
  .stub-end::after{bottom:auto;top:-9px;left:auto;right:-9px}
}

/* ---------- video tiles ------------------------------------------------ */
.reel{display:grid;grid-template-columns:2fr 1fr;gap:clamp(14px,1.8vw,24px);align-items:start}
.reel-side{display:grid;gap:clamp(14px,1.8vw,24px)}
.tile{position:relative;display:block;overflow:hidden;background:#111;cursor:pointer}
.tile img{width:100%;height:100%;object-fit:cover;filter:brightness(.66) grayscale(.3);
  transition:filter .45s,transform .8s cubic-bezier(.16,1,.3,1)}
.tile:hover img{filter:brightness(.92) grayscale(0);transform:scale(1.035)}
.tile-16{aspect-ratio:16/9}
.tile-9{aspect-ratio:9/13}
.tile-1{aspect-ratio:1/1}
.tile-side{aspect-ratio:16/9}
.tile-cap{position:absolute;left:0;right:0;bottom:0;padding:clamp(14px,1.8vw,22px);
  background:linear-gradient(transparent,rgba(12,11,11,.92) 72%);
  display:flex;align-items:flex-end;justify-content:space-between;gap:14px}
.tile-cap h3{margin:0 0 5px;font-size:clamp(1.3rem,2.2vw,1.9rem)}
.play{
  width:56px;height:56px;flex:none;display:grid;place-items:center;
  background:var(--red);color:#fff;transition:transform .25s,background .25s;
}
.tile:hover .play{transform:scale(1.09)}
.play svg{width:19px;height:19px;margin-left:2px}
.tile[data-soon]{cursor:default}
.tile[data-soon] .play{background:rgba(242,239,233,.16)}
.tile[data-soon]:hover .play{transform:none}
@media (max-width:900px){.reel{grid-template-columns:1fr}}

.crew-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(18px,2.6vw,34px);margin-top:clamp(26px,4vw,48px)}
.crew-card{border:1px solid rgba(242,239,233,.14);background:var(--ink-2);
  padding:clamp(18px,2.4vw,30px)}
.crew-card p:last-child{margin:0}
@media (max-width:720px){.crew-grid{grid-template-columns:1fr}}

/* ---------- crew roster ------------------------------------------------ */
.roster{border-top:1px solid rgba(242,239,233,.16)}
.paper .roster{border-top:2px solid #171412}
.paper .roster-row{border-bottom:1px solid rgba(23,20,18,.3)}
.roster-row{
  display:flex;align-items:baseline;justify-content:space-between;gap:20px;
  padding:clamp(16px,2.2vw,26px) 0;border-bottom:1px solid rgba(242,239,233,.16);
  transition:padding-left .3s,color .3s;
}
.roster-row:hover{padding-left:14px}
.roster-name{font-size:clamp(2rem,4.8vw,3.8rem)}
.roster-row:hover .roster-name{color:var(--red)}
.role{color:var(--red);font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;white-space:nowrap}

/* ---------- forms ------------------------------------------------------ */
.field{display:grid;gap:7px;margin-bottom:16px}
.field label{font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--bone-dim)}
.field input,.field textarea,.field select{
  /* 16px, not the inherited 15px: iOS Safari zooms any input under 16px
     on focus and never zooms back out. */
  font-size:16px;
  background:rgba(242,239,233,.05);border:1px solid rgba(242,239,233,.26);
  padding:.9em 1em;width:100%;transition:border-color .18s,background .18s;
}
.field input::placeholder,.field textarea::placeholder{color:#8b857d}
.field input:focus,.field textarea:focus,.field select:focus{
  outline:none;border-color:var(--red);background:rgba(224,34,27,.08)}
.field textarea{min-height:150px;resize:vertical}
.field .err{color:#ff8a80;font-size:.72rem;letter-spacing:.04em;min-height:1.2em}
.band .field label{color:rgba(255,255,255,.9)}
.band .field input{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.5);color:#fff}
.band .field input::placeholder{color:rgba(255,255,255,.84)}
.band .field input:focus{background:rgba(255,255,255,.24);border-color:#fff}
.row{display:flex;gap:10px;flex-wrap:wrap}
.row input{flex:1 1 220px}
.note{font-size:.7rem;letter-spacing:.05em;margin:10px 0 0}

/* ---------- footer ------------------------------------------------------ */
.foot{border-top:1px solid rgba(242,239,233,.14);padding:clamp(52px,7vw,96px) 0 26px;overflow:hidden;position:relative}
.foot-giant{display:block;width:min(92vw,1300px);margin:clamp(26px,5vw,56px) auto -6.5%;opacity:.92}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:clamp(24px,4vw,64px)}
.foot-mark{width:min(320px,74%);margin-bottom:16px}
.foot h4{font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--red);
  margin:0 0 14px;font-family:var(--mono);font-weight:700}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
/* the <a> is inline, so vertical padding grows the hit box (20 → 32px) and
   leaves the line box, and therefore the whole footer, exactly where it was.
   6px is the ceiling: the rows are 24px tall on a 9px grid gap, a 33px pitch,
   so 7px would start overlapping the link above and below. Reaching the 44px
   floor here needs .foot ul{gap} to grow to 20px, which is a visible change to
   the footer, so these stay at 32 — better than 20, honestly short of 44. */
.foot ul a{font-size:.82rem;color:var(--bone-dim);transition:color .18s;padding:6px 0}
.foot ul a:hover{color:var(--bone)}
.soc-row{display:flex;gap:9px;flex-wrap:wrap;margin-top:18px}
.soc{width:42px;height:42px;display:grid;place-items:center;position:relative;
  border:1px solid rgba(242,239,233,.24);transition:background .2s,border-color .2s,transform .2s}
/* the square stays 42 — the .soc-row rhythm and the contact.html double row are
   built on it — and a transparent 1px halo carries the tap target to 44x44.
   Absolutely positioned, so it is out of the grid and place-items:center still
   only sees the icon. The 9px gap leaves 7px between two halos. */
.soc::after{content:"";position:absolute;inset:-1px}
.soc img{width:17px;height:17px;opacity:.85;transition:opacity .2s}
.soc:hover{background:var(--red);border-color:var(--red);transform:translateY(-2px)}
.soc:hover img{opacity:1}
.foot-end{display:flex;flex-wrap:wrap;gap:8px 22px;justify-content:space-between;
  margin-top:clamp(36px,5vw,64px);padding-top:20px;
  border-top:1px solid rgba(242,239,233,.14);font-size:.68rem;letter-spacing:.12em;
  text-transform:uppercase;color:#6f6961}
@media (max-width:800px){.foot-grid{grid-template-columns:1fr 1fr}.foot-brand{grid-column:1/-1}}

/* ---------- motion ------------------------------------------------------ */
.js .rise{opacity:0;translate:0 28px}
.js .rise.on{opacity:1;translate:none;
  transition:opacity .7s cubic-bezier(.16,1,.3,1),translate .7s cubic-bezier(.16,1,.3,1)}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  .js .rise{opacity:1;translate:none}
  .js .fit{visibility:visible}
  .marq-track{animation:none}
  /* the unconditional touch-action:pan-y above forbids horizontal panning,
     and js/v2.js skips the drag handler under reduce, so without this the
     wall is a 1.5-poster stub and 9 of the 11 nights are unreachable. */
  .wall-marq{overflow-x:auto;touch-action:auto}
}

/* ---------- sticky next-night strip ----------------------------------- */
.nextbar{
  position:fixed;left:0;right:0;bottom:0;z-index:70;
  display:flex;align-items:center;gap:clamp(12px,2.5vw,28px);
  padding:11px var(--pad);padding-bottom:calc(11px + var(--sab));
  background:var(--red);color:#fff;
  border-top:1px solid var(--red-dark);
  box-shadow:0 -14px 40px -18px rgba(0,0,0,.85);
  translate:0 110%;transition:translate .4s cubic-bezier(.16,1,.3,1);
}
.nextbar.show{translate:0 0}
.nextbar-t{font-size:1.05rem;letter-spacing:.02em}
.nextbar-d{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;font-weight:700;
  border:1.5px solid #fff;padding:.35em .7em;white-space:nowrap}
.nextbar-cta{
  margin-left:auto;font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;font-weight:700;
  display:inline-flex;align-items:center;gap:.6em;white-space:nowrap;
}
.nextbar-cta::after{content:"";width:22px;height:1.5px;background:#fff;transition:width .25s}
.nextbar:hover .nextbar-cta::after{width:38px}
@media (max-width:620px){.nextbar-t{display:none}}
body:has(.nextbar) .foot{padding-bottom:72px}

/* ---------- star debris (poster wall only) ------------------------------ */
.debris{
  position:fixed;z-index:60;width:11px;height:11px;pointer-events:none;
  background:var(--red);
  clip-path:polygon(50% 0,58% 42%,100% 50%,58% 58%,50% 100%,42% 58%,0 50%,42% 42%);
  animation:debris .8s ease-out forwards;
}
@keyframes debris{
  from{opacity:1;transform:translate(0,0) scale(1) rotate(0)}
  to{opacity:0;transform:translate(var(--dx,0),46px) scale(.3) rotate(160deg)}
}

/* ---------- the spine: the binding of the flyer book ------------------- */
.spine{display:none}
@media (min-width:1024px){
  body{padding-left:60px}
  .spine{
    display:flex;position:fixed;top:0;bottom:0;left:0;width:60px;z-index:85;
    flex-direction:column;align-items:center;justify-content:space-between;
    padding:14px 0;background:var(--ink);
    border-right:1px solid rgba(242,239,233,.16);
  }
  .spine .star{width:14px;height:14px;color:var(--red)}
  .spine-txt{
    writing-mode:vertical-rl;font-family:var(--mono);font-size:.6rem;
    letter-spacing:.3em;text-transform:uppercase;color:var(--bone-dim);
    white-space:nowrap;
  }
  .nextbar{left:60px}
}

/* ---------- paper ground: sections printed on bone ---------------------- */
.paper{background:var(--bone);color:#171412;position:relative}
.paper h1,.paper h2,.paper h3,.paper .d{color:#171412}
.paper .lede{color:#2e2925}
.paper .dim{color:#544e47}
.paper .meta{color:#6b645c}
.paper .btn{border-color:#171412;color:#171412}
.paper .btn::before{background:#171412}
.paper .btn:hover{color:var(--bone)}
.paper .btn-red{border-color:var(--red);background:var(--red);color:#fff}
.paper .btn-red::before{background:#171412}
.paper .btn-red:hover{color:var(--bone)}
.paper .ghost{-webkit-text-stroke:2.5px #171412}
.paper .cat{-webkit-text-fill-color:var(--red)}
/* black tears top/bottom: the paper strip is glued onto the black page */
.paper .tear{background:var(--ink)}

/* rubber stamps (stats on paper) */
.stamps{display:flex;flex-wrap:wrap;gap:clamp(14px,2.5vw,30px);align-items:center}
.stamp-big{
  border:3px solid var(--red);color:var(--red);padding:.35em .7em .3em;
  font-family:var(--disp);font-size:clamp(1.5rem,3vw,2.6rem);line-height:1;
  text-transform:uppercase;letter-spacing:.02em;white-space:nowrap;
  rotate:-3deg;opacity:.92;
}
.stamps .stamp-big:nth-child(2){rotate:2deg}
.stamps .stamp-big:nth-child(3){rotate:-1.5deg}
.stamps .stamp-big span{display:block;font-family:var(--mono);font-size:.55rem;
  letter-spacing:.22em;font-weight:700;margin-top:4px}

/* ---------- archive index (mono ledger on paper) ------------------------ */
.idx{border-top:2px solid #171412}
.idx-row{
  display:grid;grid-template-columns:auto auto 1fr auto auto;
  gap:clamp(10px,2vw,28px);align-items:center;
  padding:clamp(12px,1.6vw,20px) 6px;border-bottom:1px solid rgba(23,20,18,.3);
  font-family:var(--mono);font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;
  transition:background .15s,color .15s;
}
.idx-row:hover{background:var(--red);color:#fff}
.idx-row:hover .idx-name,.idx-row:hover .cat-inline{color:#fff}
.idx-name{font-family:var(--disp);font-size:clamp(1.3rem,2.8vw,2.2rem);
  letter-spacing:.01em;text-transform:uppercase;line-height:.95;color:#171412;
  white-space:normal;transition:color .15s}
.idx-go{opacity:0;transition:opacity .15s}
.idx-row:hover .idx-go{opacity:1}
.idx-go img{filter:invert(1)}
@media (max-width:720px){
  .idx-row{grid-template-columns:auto 1fr auto;row-gap:4px}
  .idx-row .idx-venue,.idx-row .idx-go{display:none}
}

/* ---------- full-screen poster sections --------------------------------- */
/* The nav is sticky and 64px tall, and .poster deliberately starts at y=0 so
   the band photo runs full-bleed behind it. That means the CONTENT has to
   clear the nav itself: without this padding the centred h1 landed 12.6px
   under the bar on events/contact at 390px and lost its top third. Height is
   100svh (not 100svh - nav) because the box starts above the nav, and
   border-box keeps the padding inside it. */
.poster{min-height:100svh;padding-top:var(--nav-h);display:flex;flex-direction:column;justify-content:center;
  scroll-snap-align:start;position:relative;overflow:hidden}
/* .hero is the other way round: it starts BELOW the sticky nav, at y=64px, so
   proximity snapping pulled that edge to the viewport top on load and parked
   the bar over the wordmark. scroll-margin-top backs the snap off by the nav
   height. Per-element, not scroll-padding-top on html, which would also shove
   .poster (y=0, pads its own content) down by 64px. */
.hero{scroll-snap-align:start;scroll-margin-top:var(--nav-h)}
.poster .band-media{opacity:.13;filter:contrast(1.2) brightness(.62)}

/* ---------- printed sleeve frame -------------------------------------- */
.pframe{display:none!important}
.pframe-off{position:fixed;inset:11px;z-index:62;pointer-events:none;
  border:1px solid rgba(242,239,233,.16)}
.pframe span{
  position:absolute;bottom:7px;font-family:var(--mono);font-size:.58rem;
  letter-spacing:.2em;text-transform:uppercase;color:rgba(242,239,233,.55);
  background:var(--ink);padding:0 8px;white-space:nowrap;
}
.pframe span:first-child{left:18px}
.pframe span:last-child{right:18px}
@media (max-width:900px){.pframe{display:none}}

/* ---------- red duotone frames ----------------------------------------- */
.duo{position:relative;overflow:hidden;display:block}
.duo img{filter:grayscale(1) contrast(1.35) brightness(1.05)}
.duo::after{content:"";position:absolute;inset:0;background:var(--red);
  mix-blend-mode:multiply;opacity:.85;pointer-events:none}

/* ---------- lightbox ----------------------------------------------------- */
.lb{position:fixed;inset:0;z-index:100;display:none;place-items:center;padding:var(--pad);
  background:rgba(6,5,5,.93)}
.lb[open]{display:grid}
.lb video{width:min(1180px,100%);max-height:84vh;border:1px solid rgba(242,239,233,.18)}
.lb-x{position:absolute;top:16px;right:16px;width:46px;height:46px;
  border:1px solid rgba(242,239,233,.3);background:none;color:var(--bone);
  font-size:22px;line-height:1;cursor:pointer}
.lb-x:hover{background:var(--red);border-color:var(--red);color:#fff}

/* ---------- event page --------------------------------------------------
   One night, on the red band: poster right, the facts left. The line-up is set
   as redaction bars (ink on red, alternating tilt) because that is how the
   scene sets a bill; a red bar would vanish into the band, so there is no
   headliner colour here.                                                    */
.ev-line{display:flex;flex-wrap:wrap;gap:9px 10px;margin:12px 0 0}
.ev-bar{
  background:var(--ink);color:var(--bone);padding:.2em .55em;rotate:-1.5deg;
  font-family:var(--disp);font-weight:400;letter-spacing:.02em;text-transform:uppercase;
  font-size:clamp(1rem,2.1vw,1.6rem);line-height:1.15;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
}
.ev-line .ev-bar:nth-child(even){rotate:1.7deg}
.ev-facts{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:7px 22px;
  margin:clamp(22px,3vw,32px) 0 0;padding-top:clamp(18px,2.4vw,26px);
  border-top:1px solid rgba(255,255,255,.34);max-width:38ch;
}
.ev-facts dt{opacity:.72}
.ev-facts dd{margin:0;font-weight:700}
.ev-acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(24px,3.4vw,34px)}
.ev-nav{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between}
@media (max-width:620px){.ev-nav{flex-direction:column;align-items:stretch}}

/* ---------- footer legal links ------------------------------------------ */
/* Privacy / Cookies / Legal, third span in .foot-end. a{color:inherit} and
   a{text-decoration:none} are global, so without this they read as plain text
   and there is no hover target. Underline is the affordance, not decoration. */
/* 40-56 x 16 was the smallest target on the site. Inline links again, so the
   padding is free of the layout. It is asymmetric because the space is: on a
   phone .foot-end stacks and the tagline line sits 7px above this row, while
   below it the footer's own 26px bottom padding is empty. 7 + 16 + 21 = 44. */
.foot-legal a{text-decoration:underline;text-underline-offset:3px;transition:color .18s;
  padding:7px 0 21px}
.foot-legal a:hover{color:var(--bone)}