/* ===========================================================
   KOVISHIN — Bauhaus design system
   Shared by every page. Palette and shape vocabulary come from
   bauhaus-components/STYLE-GUIDE.md; the deck at /deck.html keeps
   its own inline copy so it stays a self-contained artefact.
   =========================================================== */

/* ---------- tokens ---------- */
:root{
  --paper:#F1F1EF;
  --paper-2:#E7E7E4;
  --yellow:#FED132;
  --red:#FF6641;
  --blue:#236DF6;
  --ink:#211814;

  --ink-60:rgba(33,24,20,.6);
  --ink-40:rgba(33,24,20,.4);
  --ink-15:rgba(33,24,20,.15);
  --paper-60:rgba(241,241,239,.6);
  --paper-30:rgba(241,241,239,.3);

  /* WhatsApp brand green. The only colour here from outside the palette:
     the button is a platform cue, so it reads as WhatsApp or it reads as
     nothing. Ink text over it, not white — white sits at about 2.6:1. */
  --wa:#25D366;
  --rule:3px;
  --bar:6px;                                /* animated stripe at the very top */
  --head:clamp(58px,8vh,74px);
  --gut:clamp(18px,5vw,64px);
  --max:1200px;
  --max-read:66ch;

  --sp-1:clamp(6px,1vw,10px);
  --sp-2:clamp(10px,1.6vw,18px);
  --sp-3:clamp(16px,2.4vw,28px);
  --sp-4:clamp(24px,3.6vw,44px);
  --sp-5:clamp(36px,5.4vw,72px);
  --sp-6:clamp(52px,8vw,112px);

  /* Two voices, one skeleton. The display face is traced from the Bauhaus
     specimen — geometric, caps-only. Archivo used to carry the body copy, but
     it is a grotesque: different construction, different era, and it read as a
     third typeface fighting the other two. DM Sans is built on the same
     geometric skeleton as the display face (circular bowls, even stroke) but
     with a tall x-height and humanist proportions, so it stays legible at
     15px while still belonging to the headlines, so it carries the paragraphs.

     Kovishin Text is the bespoke middle voice: built from the same geometric
     skeleton as the display face but with a 72% x-height and open apertures,
     so it carries the labels, nav, buttons and sub-headings that sit between
     a headline and a paragraph. Paragraphs stay on DM Sans — a geometric
     alphabet has near-identical round letters, which is what makes it sharp
     at 24px and tiring at 15px. */
  --display:'Kovishin Display','Kovishin Text','DM Sans',Futura,sans-serif;
  --sans:'Kovishin Text','DM Sans',Futura,'Century Gothic',sans-serif;
  --body:'DM Sans','Helvetica Neue',Arial,sans-serif;
}

/* The traced Bauhaus face. Caps-only, single weight — wordmark and
   headings only, never body copy. */
@font-face{
  font-family:'Kovishin Display';
  src:url('../../fonts/KovishinDisplay-Regular.woff2') format('woff2'),
      url('../../fonts/KovishinDisplay-Regular.ttf') format('truetype');
  font-weight:400 900;
  font-style:normal;
  font-display:swap;
}

/* Kovishin Text — the bespoke companion, 4 KB a weight. Built from
   font-src/build_kovishin_text.py; rerun that script to change it.
   U+0026 is held out of the range on purpose: a geometric ampersand is the
   one glyph the construction can't carry, and mine read as an A in
   "VENUES & FESTS". Excluding it hands just that character to DM Sans. */
@font-face{
  font-family:'Kovishin Text';
  src:url('../../fonts/KovishinText-Regular.woff2') format('woff2'),
      url('../../fonts/KovishinText-Regular.otf') format('opentype');
  font-weight:400 500;
  font-style:normal;
  font-display:swap;
  unicode-range:U+0-25,U+27-10FFFF;
}
@font-face{
  font-family:'Kovishin Text';
  src:url('../../fonts/KovishinText-Bold.woff2') format('woff2'),
      url('../../fonts/KovishinText-Bold.otf') format('opentype');
  font-weight:600 900;
  font-style:normal;
  font-display:swap;
  unicode-range:U+0-25,U+27-10FFFF;
}

/* DM Sans — self-hosted variable font (opsz 9..40, wght 100..1000), the
   same two files Google Fonts serves, split by script so a page that only
   uses ASCII downloads just the 61 KB latin file. Previously loaded from
   fonts.googleapis.com; moved in-house so no page makes a third-party
   request before first paint. */
@font-face{
  font-family:'DM Sans';
  src:url('../../fonts/DMSans-latin.woff2') format('woff2');
  font-weight:100 1000;
  font-style:normal;
  font-display:swap;
  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:'DM Sans';
  src:url('../../fonts/DMSans-latin-ext.woff2') format('woff2');
  font-weight:100 1000;
  font-style:normal;
  font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--paper);color:var(--ink);
  /* DM Sans has a taller x-height than Archivo, so the same optical size needs
     slightly less leading and a touch of negative tracking to stop it feeling
     loose against the tightly set display headings. */
  font-family:var(--body);font-size:clamp(15.5px,1.05vw,17px);line-height:1.6;
  letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
  padding-top:calc(var(--bar) + var(--head));
}
img,svg,video{display:block;max-width:100%}
ul,ol{list-style:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
a{color:inherit}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
::selection{background:var(--yellow);color:var(--ink)}

/* film grain, same as the deck */
body::after{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:400;opacity:.045;
  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='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- type scale ---------- */
.h-mega,.h-1,.h-2,.h-3{font-family:var(--display);text-transform:uppercase;line-height:.92;letter-spacing:0}
.h-mega{font-size:clamp(52px,13vw,150px);line-height:.86}
.h-1{font-size:clamp(32px,6.4vw,78px)}
.h-2{font-size:clamp(25px,4vw,48px)}
.h-3{font-family:var(--sans);font-weight:700;text-transform:uppercase;font-size:clamp(17px,2vw,24px);letter-spacing:.02em;line-height:1.18}
.h-4{font-family:var(--sans);font-weight:700;text-transform:uppercase;font-size:clamp(14px,1.4vw,17px);letter-spacing:.04em;line-height:1.25}

.kicker{
  font-family:var(--sans);font-weight:500;text-transform:uppercase;
  /* DM Sans sets wider than Jost, so the tracking comes down a notch to keep
     these labels the same optical length they had before */
  font-size:clamp(9px,1vw,12px);letter-spacing:.24em;
}
.kicker-r{color:var(--red)} .kicker-b{color:var(--blue)}
.lead{font-size:clamp(16.5px,1.5vw,21px);line-height:1.48;letter-spacing:-.012em}
.prose p{max-width:var(--max-read);margin-bottom:1.05em}
.prose p:last-child{margin-bottom:0}
.prose h3{margin:1.8em 0 .5em}
.prose h3:first-child{margin-top:0}
.prose ul{max-width:var(--max-read);margin-bottom:1.05em}
.prose ul li{position:relative;padding-left:1.4em;margin-bottom:.45em}
.prose ul li::before{
  content:'';position:absolute;left:0;top:.62em;width:.5em;height:.5em;
  border-radius:50%;background:var(--red);
}
.prose ul li:nth-child(2n)::before{background:var(--blue)}
.prose ul li:nth-child(3n)::before{background:var(--yellow)}
.prose a:not(.btn){text-decoration:none;border-bottom:2px solid var(--red);font-weight:600}
.prose a:not(.btn):hover{background:var(--yellow);border-bottom-color:var(--ink)}
.muted{color:var(--ink-60)}

/* inline highlighters */
.kw{background:var(--yellow);padding:0 .22em;font-weight:600}
.kw-r{background:var(--red);color:var(--paper);padding:0 .22em;font-weight:600}
.kw-b{background:var(--blue);color:var(--paper);padding:0 .22em;font-weight:600}

/* the spinning record that stands in for the letter O */
.vo{
  display:inline-block;width:.72em;height:.72em;background:var(--red);border-radius:50%;
  margin:0 .04em;position:relative;vertical-align:-6%;animation:ospin 3.5s linear infinite;
}
.vo::after{
  content:'';position:absolute;left:50%;top:50%;width:14%;height:14%;
  transform:translate(-50%,-50%);background:var(--paper);border-radius:50%;
}
.vo em{position:absolute;left:19%;top:23%;width:8%;height:8%;background:var(--paper);border-radius:50%;opacity:.85}
@keyframes ospin{to{transform:rotate(360deg)}}

/* ---------- shape vocabulary ---------- */
.f-y{background:var(--yellow)} .f-r{background:var(--red)}
.f-b{background:var(--blue)}  .f-k{background:var(--ink)}
.f-p{background:var(--paper)}
.c{border-radius:50%}
.q-tl{border-radius:100% 0 0 0} .q-tr{border-radius:0 100% 0 0}
.q-bl{border-radius:0 0 0 100%} .q-br{border-radius:0 0 100% 0}
.h-t{border-radius:50% 50% 0 0 / 100% 100% 0 0}
.h-b{border-radius:0 0 50% 50% / 0 0 100% 100%}
.arch{border-radius:50% 50% 0 0 / 32% 32% 0 0}
.spin-s{animation:ospin 9s linear infinite}
.spin-m{animation:ospin 14s linear infinite}
.spin-l{animation:ospin 20s linear infinite reverse}

.tilerow{display:grid;grid-template-columns:repeat(12,1fr);width:100%}
.tilerow > div{position:relative;aspect-ratio:1/1}
.tilerow > div > i{position:absolute;inset:0;display:block}
@media (max-width:640px){.tilerow{grid-template-columns:repeat(6,1fr)}}

.shaperow{display:flex}
.shaperow span{
  width:clamp(26px,5vw,56px);height:clamp(26px,5vw,56px);display:block;
  animation:bob 3.2s ease-in-out infinite;
}
.shaperow span:nth-child(2){animation-delay:.4s}
.shaperow span:nth-child(3){animation-delay:.8s}
.shaperow span:nth-child(4){animation-delay:1.2s}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}

/* ---------- top stripe ---------- */
.topbar{
  position:fixed;top:0;left:0;right:0;height:var(--bar);z-index:620;
  background:repeating-linear-gradient(90deg,
    var(--red) 0 70px,var(--yellow) 70px 140px,var(--blue) 140px 210px,var(--ink) 210px 280px);
  background-size:280px 100%;animation:flowx 7s linear infinite;
}
@keyframes flowx{to{background-position:280px 0}}

/* ---------- header ---------- */
.site-head{
  position:fixed;top:var(--bar);left:0;right:0;height:var(--head);z-index:600;
  background:var(--paper);border-bottom:var(--rule) solid var(--ink);
  display:flex;align-items:center;gap:var(--sp-2);padding:0 var(--gut);
}
.brand{
  font-family:var(--display);font-weight:900;text-transform:uppercase;
  font-size:clamp(17px,2vw,24px);letter-spacing:.01em;text-decoration:none;
  display:flex;align-items:center;flex:0 0 auto;
}
.brand:hover .vo{background:var(--blue)}

.site-nav{display:flex;align-items:center;gap:clamp(10px,1.7vw,26px);margin-left:auto}
.site-nav a{
  font-family:var(--sans);font-weight:500;text-transform:uppercase;text-decoration:none;
  font-size:clamp(10px,.95vw,12px);letter-spacing:.2em;white-space:nowrap;
  padding:8px 0;position:relative;
}
.site-nav a::after{
  content:'';position:absolute;left:0;right:0;bottom:2px;height:3px;background:var(--ink);
  transform:scaleX(0);transform-origin:left;transition:transform .3s cubic-bezier(.2,.8,.2,1);
}
.site-nav a:hover::after{transform:scaleX(1)}
.site-nav a[aria-current="page"]{font-weight:700}
.site-nav a[aria-current="page"]::after{transform:scaleX(1);background:var(--red)}

.head-cta{
  font-family:var(--sans);font-weight:700;text-transform:uppercase;text-decoration:none;
  font-size:clamp(10px,.95vw,12px);letter-spacing:.18em;
  background:var(--ink);color:var(--paper);padding:11px clamp(13px,1.5vw,20px);
  box-shadow:4px 4px 0 var(--red);transition:box-shadow .18s ease,transform .18s ease;
  flex:0 0 auto;white-space:nowrap;
}
.head-cta:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--red)}
.head-cta::after{display:none}

#sndbtn{
  flex:0 0 auto;width:38px;height:38px;border-radius:50%;
  background:var(--yellow);box-shadow:0 0 0 2.5px var(--ink);
  display:flex;align-items:flex-end;justify-content:center;gap:3px;padding-bottom:11px;position:relative;
}
#sndbtn:hover{background:var(--red)}
#sndbtn i{display:block;width:3px;height:6px;background:var(--ink);border-radius:2px 2px 0 0}
#sndbtn.playing i{animation:sndb .9s ease-in-out infinite}
#sndbtn.playing i:nth-child(2){animation-delay:.25s;animation-duration:.7s}
#sndbtn.playing i:nth-child(3){animation-delay:.1s;animation-duration:1.1s}
@keyframes sndb{0%,100%{height:5px}50%{height:15px}}
#sndbtn:not(.playing){opacity:.8}
#sndbtn:not(.playing)::after{
  content:'';position:absolute;left:18%;top:46%;width:64%;height:2.5px;
  background:var(--ink);transform:rotate(-38deg);border-radius:2px;
}

/* burger + mobile drawer */
.burger{
  display:none;flex:0 0 auto;width:40px;height:40px;
  flex-direction:column;justify-content:center;align-items:center;gap:5px;
  border:2.5px solid var(--ink);
}
.burger i{display:block;width:18px;height:3px;background:var(--ink);transition:transform .25s,opacity .2s}
body.menu-open .burger i:nth-child(1){transform:translateY(8px) rotate(45deg)}
body.menu-open .burger i:nth-child(2){opacity:0}
body.menu-open .burger i:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

.drawer{
  position:fixed;inset:calc(var(--bar) + var(--head)) 0 0 0;z-index:590;
  background:var(--paper);padding:var(--sp-4) var(--gut) var(--sp-5);
  display:flex;flex-direction:column;gap:var(--sp-2);
  transform:translateY(-12px);opacity:0;visibility:hidden;
  transition:opacity .3s ease,transform .35s cubic-bezier(.2,.8,.2,1),visibility .3s;
  overflow-y:auto;
}
body.menu-open .drawer{transform:none;opacity:1;visibility:visible}
.drawer a{
  font-family:var(--display);text-transform:uppercase;text-decoration:none;
  font-size:clamp(26px,8vw,44px);line-height:1;
  border-bottom:var(--rule) solid var(--ink);padding-bottom:.18em;
  display:flex;align-items:baseline;gap:.5em;
}
.drawer a .n{font-family:var(--sans);font-weight:700;font-size:12px;letter-spacing:.2em;color:var(--red)}
.drawer a:hover{color:var(--red)}
.drawer .drawer-foot{margin-top:auto;padding-top:var(--sp-3)}

@media (max-width:1000px){
  .site-nav,.head-cta{display:none}
  .burger{display:flex}
  /* with the nav gone, both controls belong together on the right */
  #sndbtn{margin-left:auto}
}

/* ---------- reading progress ---------- */
.scrollprog{position:fixed;top:calc(var(--bar) + var(--head));left:0;right:0;height:3px;z-index:610;pointer-events:none}
.scrollprog i{display:block;height:100%;width:0;background:var(--red)}

/* ---------- layout ---------- */
.wrap{width:100%;max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
.wrap-wide{max-width:1480px}
section{position:relative}
.band{padding:var(--sp-6) 0}
.band-tight{padding:var(--sp-5) 0}
.band-ink{background:var(--ink);color:var(--paper)}
.band-ink .kicker{color:var(--yellow)}
.band-ink .muted{color:var(--paper-60)}
.band-paper2{background:var(--paper-2)}
.band-yellow{background:var(--yellow)}
.band-blue{background:var(--blue);color:var(--paper)}
.band-blue .kicker{color:var(--yellow)}
.band-red{background:var(--red);color:var(--paper)}
.band-red .kicker{color:var(--ink)}

.sec-head{
  display:flex;align-items:baseline;gap:var(--sp-2);
  border-bottom:4px solid currentColor;padding-bottom:var(--sp-1);margin-bottom:var(--sp-4);
}
.sec-head .n{font-family:var(--display);font-size:clamp(20px,3.4vw,44px);color:var(--red);line-height:1}
.band-ink .sec-head .n,.band-blue .sec-head .n{color:var(--yellow)}
.sec-head h2{font-family:var(--display);text-transform:uppercase;font-size:clamp(20px,3.4vw,42px);line-height:1;letter-spacing:.01em}
.sec-head .aside{margin-left:auto;text-align:right}

.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-4)}
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-3)}
.grid-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp-3)}
.grid-side{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:var(--sp-5);align-items:start}
.grid-side-rev{grid-template-columns:minmax(0,1fr) minmax(0,1.45fr)}
@media (max-width:980px){
  .grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid-side,.grid-side-rev{grid-template-columns:1fr}
}
@media (max-width:760px){
  .grid-2,.grid-3{grid-template-columns:1fr}
}

/* ---------- hero ---------- */
.hero{padding:var(--sp-5) 0 var(--sp-6);position:relative;overflow:hidden}
.hero-home{padding-top:var(--sp-4)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,38%);gap:var(--sp-5);align-items:center}
@media (max-width:900px){.hero-grid{grid-template-columns:1fr;gap:var(--sp-4)}}
.hero-copy > * + *{margin-top:var(--sp-2)}
/* The wordmark must never break across lines. "KOVISHIN" in the display face
   is 4.889x the font size wide, so the type is sized against the hero column
   itself: 100/4.889 = 20.45cqw fills it exactly, and 19.5 leaves a margin.
   The vw clamp on the line above is the fallback for browsers without
   container query units, and is safe at every width with nowrap on. */
.hero-copy{container-type:inline-size}
.hero-copy .h-mega{
  white-space:nowrap;
  font-size:clamp(52px,10vw,150px);
  /* the svh term keeps the left column short enough to fit a laptop screen */
  font-size:min(19.5cqw,20svh,150px);
}
.genres{
  font-family:var(--sans);font-weight:500;text-transform:lowercase;
  font-size:clamp(13px,1.8vw,22px);letter-spacing:.08em;
}
.genres b{font-weight:700;color:var(--blue)}
.genres em{font-style:normal;font-weight:700;color:var(--red)}
.cities{display:flex;align-items:baseline;gap:var(--sp-2);flex-wrap:wrap;font-family:var(--sans);text-transform:uppercase}
.cities .lbl{font-weight:500;font-size:clamp(9px,1vw,12px);letter-spacing:.24em}
.city-roll{font-family:var(--display);font-size:clamp(20px,3.6vw,40px);line-height:1.2;letter-spacing:.02em;perspective:400px}
#cityflip{display:inline-block;transform-origin:50% 115%;backface-visibility:hidden}
.cf-out{animation:cfout .26s ease-in both}
.cf-in{animation:cfin .34s ease-out both}
@keyframes cfout{to{transform:rotateX(86deg);opacity:.15}}
@keyframes cfin{from{transform:rotateX(-86deg);opacity:.15}to{transform:none;opacity:1}}
.c1{color:var(--red)} .c2{color:var(--blue)} .c3{color:var(--ink)} .c4{color:var(--red)} .c5{color:var(--blue)}

.hero-photo{position:relative}
.hero-photo .ph{overflow:hidden;background:var(--ink);aspect-ratio:1000/665;border:var(--rule) solid var(--ink)}
.hero-photo .ph img{width:100%;height:100%;object-fit:contain}
.hero-photo .ph picture{display:contents}
.hero-geo{display:grid;grid-template-columns:repeat(3,1fr)}
.hero-geo span{aspect-ratio:1/1;display:block}
.photo-cap{
  font-family:var(--sans);font-weight:500;font-size:10px;letter-spacing:.22em;
  text-transform:uppercase;padding-top:10px;text-align:right;color:var(--ink-60);
}

/* The home hero must land fully inside a laptop screen on open — no scroll to
   see the wordmark, the photo and the call to action. The section is pinned to
   the space under the header and the photo column is given that exact height,
   so the image flexes to whatever is left after the shape row and caption
   instead of dictating the height from its own 3:4 ratio. */
@media (min-width:901px) and (min-height:520px){
  .hero-home{
    min-height:calc(100svh - var(--bar) - var(--head));
    padding:var(--sp-3) 0;
    display:flex;align-items:center;
  }
  .hero-home > .hero-grid{width:100%}
  .hero-home .hero-photo{
    display:flex;flex-direction:column;justify-content:center;
    max-height:calc(100svh - var(--bar) - var(--head) - 2 * var(--sp-3));
  }
  .hero-home .hero-geo,
  .hero-home .photo-cap{flex:0 0 auto}
}

/* inner-page hero: colour slab + oversized title */
.hero-slab{border-bottom:var(--rule) solid var(--ink);padding:var(--sp-5) 0}
.hero-slab .eyebrow{display:flex;align-items:center;gap:10px;margin-bottom:var(--sp-2)}
.hero-slab .eyebrow i{width:12px;height:12px;border-radius:50%;background:var(--red);display:block;flex:0 0 auto}
.hero-slab .lead{margin-top:var(--sp-3);max-width:62ch}
.hero-slab .hero-actions{margin-top:var(--sp-4)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.6em;text-decoration:none;
  font-family:var(--sans);font-weight:700;text-transform:uppercase;
  font-size:clamp(11px,1.1vw,14px);letter-spacing:.16em;
  padding:clamp(12px,1.5vw,17px) clamp(18px,2.4vw,30px);
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease,color .18s ease;
}
.btn-primary{background:var(--ink);color:var(--paper);box-shadow:5px 5px 0 var(--red)}
.btn-primary:hover{transform:translate(-3px,-3px);box-shadow:8px 8px 0 var(--red)}
.btn-yellow{background:var(--yellow);color:var(--ink);box-shadow:5px 5px 0 var(--ink)}
.btn-yellow:hover{transform:translate(-3px,-3px);box-shadow:8px 8px 0 var(--ink)}
.btn-red{background:var(--red);color:var(--paper);box-shadow:5px 5px 0 var(--ink)}
.btn-red:hover{transform:translate(-3px,-3px);box-shadow:8px 8px 0 var(--ink)}
.btn-ghost{border:var(--rule) solid currentColor}
.btn-ghost:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.band-ink .btn-ghost:hover,.band-blue .btn-ghost:hover{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.btn .arr{display:inline-block;animation:arrbob 1.6s ease-in-out infinite}
@keyframes arrbob{0%,100%{transform:translate(0,0)}50%{transform:translate(4px,-4px)}}
.btn-row{display:flex;flex-wrap:wrap;gap:var(--sp-2)}

/* ---------- cards ---------- */
.card{
  padding:var(--sp-3);display:flex;flex-direction:column;gap:var(--sp-2);
  transition:transform .18s ease,box-shadow .18s ease;
}
.card .tag{font-family:var(--sans);font-weight:500;font-size:10px;letter-spacing:.24em;text-transform:uppercase}
.card h3{font-family:var(--sans);font-weight:700;text-transform:uppercase;font-size:clamp(16px,1.8vw,22px);line-height:1.12}
.card p{font-size:clamp(13.5px,1.1vw,15.5px);line-height:1.5}
.card-red{background:var(--red);color:var(--paper)} .card-red .tag{color:var(--ink)}
.card-blue{background:var(--blue);color:var(--paper)} .card-blue .tag{color:var(--yellow)}
.card-yellow{background:var(--yellow);color:var(--ink)}
.card-ink{background:var(--ink);color:var(--paper)} .card-ink .tag{color:var(--yellow)}
.card-paper{background:var(--paper);color:var(--ink);border:var(--rule) solid var(--ink)}
a.card{text-decoration:none}
a.card:hover{transform:translate(-3px,-3px);box-shadow:8px 8px 0 var(--ink)}
a.card-ink:hover{box-shadow:8px 8px 0 var(--red)}
.card .more{margin-top:auto;font-family:var(--sans);font-weight:700;font-size:11px;letter-spacing:.2em;text-transform:uppercase}

/* numbered feature block */
.steps{counter-reset:s}
.step{
  display:grid;grid-template-columns:auto 1fr;gap:var(--sp-3);
  border-top:var(--rule) solid var(--ink);padding:var(--sp-3) 0;align-items:start;
}
.step:last-child{border-bottom:var(--rule) solid var(--ink)}
.step .num{font-family:var(--display);font-size:clamp(26px,4vw,52px);line-height:.85;color:var(--red)}
.step:nth-child(2n) .num{color:var(--blue)}
.step:nth-child(3n) .num{color:var(--ink)}
.band-ink .step{border-color:var(--paper-30)}
.band-ink .step:nth-child(3n) .num{color:var(--yellow)}
.step p{max-width:62ch;margin-top:.35em}

/* ---------- stats ---------- */
/* The same four boxes sit in a ~400px hero column on the homepage and across
   the full measure on about, so a hard four-across cannot serve both: at 400px
   each cell had 45px of room for a 46px "100%", which ran out over the rule.
   Four across is the default; .stats-2 is the shape for a narrow column.
   auto-fit was the obvious move and the wrong one — at 408px it lands on three
   columns, which leaves one box orphaned on a second row.
   Rules are drawn by gap-over-ink rather than per-cell borders, so any number
   of columns or rows closes up correctly without breakpoint patching. */
.stats{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:var(--rule);background:var(--ink);
  border:var(--rule) solid var(--ink);
}
.stats.stats-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.stats .stat{
  container-type:inline-size;min-width:0;
  background:var(--paper);
  padding:var(--sp-2) clamp(12px,1.6vw,20px);
}
/* sized against the cell, not the viewport: the viewport says nothing about
   how much room a number has once the block is in a narrow column */
.stat .n{
  font-family:var(--display);line-height:1;display:flex;align-items:center;
  white-space:nowrap;
  font-size:clamp(24px,3.6vw,46px);
  font-size:min(33cqw,46px);
}
.stat:nth-child(1) .n{color:var(--red)}
.stat:nth-child(2) .n{color:var(--blue)}
.stat .l{
  font-family:var(--sans);font-weight:500;text-transform:uppercase;margin-top:8px;
  font-size:10px;letter-spacing:.2em;
  font-size:min(9.4cqw,10px);letter-spacing:min(1.8cqw,.2em);
  overflow-wrap:anywhere;
}
.cdots{display:inline-flex;gap:.12em;margin-left:.24em;flex:0 0 auto}
.cdots i{width:.38em;height:.38em;border-radius:50%;display:block;animation:bob 2.4s ease-in-out infinite}
.cdots i:first-child{background:var(--red)}
.cdots i:last-child{background:var(--blue);animation-delay:.5s}
.meter{height:5px;background:var(--ink-15);margin-top:8px;overflow:hidden}
.meter i{display:block;height:100%;width:0;background:var(--red);transition:width 1.4s cubic-bezier(.2,.8,.2,1)}
.meter.run i{width:100%}
@media (max-width:760px){
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ---------- venue list ---------- */
.venues li{
  display:grid;grid-template-columns:auto 1fr auto;gap:var(--sp-3);align-items:center;
  border-bottom:2px solid currentColor;padding:clamp(8px,1.4vw,16px) 0;
}
.venues .idx{font-family:var(--sans);font-weight:900;font-size:clamp(11px,1.3vw,17px);color:var(--blue)}
.venues li:nth-child(odd) .idx{color:var(--red)}
.venues .name{
  font-family:var(--display);text-transform:uppercase;letter-spacing:.01em;
  font-size:clamp(22px,5.2vw,62px);line-height:1;
  color:transparent;-webkit-text-stroke:2px var(--ink);transition:color .4s ease;
}
.venues li.lit .name{color:var(--ink)}
.venues li.lit:nth-child(3n+1) .name{color:var(--red)}
.venues li.lit:nth-child(3n+2) .name{color:var(--blue)}
.venues .where{font-size:clamp(9px,1vw,12px);letter-spacing:.14em;text-transform:uppercase;text-align:right;color:var(--ink-60)}
@media (max-width:640px){
  .venues .name{-webkit-text-stroke:1.2px var(--ink)}
  .venues .where{display:none}
}

/* ---------- gallery ---------- */
.gal{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-3)}
.gal-item{display:flex;flex-direction:column}
.gal-item .ph{overflow:hidden;aspect-ratio:1/1;background:var(--ink)}
.gal-item img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05);transition:filter .45s ease,transform .5s cubic-bezier(.2,.8,.2,1)}
.gal-item:hover img{filter:none;transform:scale(1.05)}
.gal-round .ph{border-radius:50%}
.gal-arch .ph{border-radius:50% 50% 0 0 / 32% 32% 0 0}
.gal-quart .ph{border-radius:0 34% 0 0}
.gal-tall .ph{aspect-ratio:3/4}
.gal-cap{
  font-family:var(--sans);font-weight:500;font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  margin-top:12px;display:flex;align-items:center;gap:8px;
}
.gal-cap::before{content:'';width:9px;height:9px;border-radius:50%;background:var(--red);flex:0 0 auto}
.gal-item:nth-child(3n+2) .gal-cap::before{background:var(--blue)}
.gal-item:nth-child(3n) .gal-cap::before{background:var(--yellow)}
@media (max-width:860px){.gal{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.gal{grid-template-columns:1fr}}

/* ---------- genre chips ---------- */
.chips{display:flex;flex-wrap:wrap;gap:var(--sp-1)}
.chip{
  font-family:var(--sans);font-weight:700;text-transform:uppercase;
  font-size:clamp(10px,1vw,12px);letter-spacing:.18em;
  padding:9px 15px;border:2.5px solid currentColor;
}
.chip-r{color:var(--red)} .chip-b{color:var(--blue)}
.chip-fill-y{background:var(--yellow);border-color:var(--ink);color:var(--ink)}
.chip-fill-k{background:var(--ink);border-color:var(--ink);color:var(--paper)}

/* ---------- availability pill ---------- */
.avail{
  display:inline-flex;align-items:center;gap:var(--sp-2);
  background:var(--yellow);color:var(--ink);
  padding:clamp(10px,1.4vw,15px) clamp(14px,2vw,24px);
  font-family:var(--sans);font-weight:700;text-transform:uppercase;
  font-size:clamp(10px,1.1vw,14px);letter-spacing:.18em;
}
.avail::before{
  content:'';width:.75em;height:.75em;border-radius:50%;background:var(--red);
  flex:0 0 auto;animation:availpulse 1.6s ease-in-out infinite;
}
@keyframes availpulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.35);opacity:.75}}

/* ---------- contact buttons ---------- */
.contacts{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-2)}
.contacts .cbtn{
  display:flex;flex-direction:column;gap:var(--sp-1);justify-content:space-between;
  padding:var(--sp-3);text-decoration:none;font-family:var(--sans);text-transform:uppercase;
  transition:transform .16s ease,box-shadow .16s ease;min-height:clamp(96px,11vw,132px);
}
.contacts .cbtn:hover{transform:translate(-3px,-3px);box-shadow:8px 8px 0 var(--paper)}
.contacts .k{font-weight:500;font-size:10px;letter-spacing:.26em}
.contacts .v{font-weight:700;font-size:clamp(13px,1.5vw,19px);letter-spacing:.02em;overflow-wrap:anywhere}
.cbtn-ig{background:var(--red);color:var(--paper)}
.cbtn-ph{background:var(--yellow);color:var(--ink)}
.cbtn-em{background:var(--blue);color:var(--paper)}
.cbtn-em .v{text-transform:lowercase}
@media (max-width:760px){.contacts{grid-template-columns:1fr}}

/* ---------- quote ---------- */
.quote{
  border-left:8px solid var(--red);padding-left:var(--sp-3);
  font-family:var(--sans);font-weight:500;font-size:clamp(18px,2.4vw,30px);
  line-height:1.3;max-width:34ch;
}
.quote cite{display:block;font-size:11px;letter-spacing:.22em;text-transform:uppercase;font-style:normal;margin-top:var(--sp-2);color:var(--ink-60)}
.band-ink .quote cite{color:var(--paper-60)}

/* ---------- FAQ ---------- */
.faq details{border-bottom:var(--rule) solid var(--ink);padding:var(--sp-2) 0}
.faq details:first-of-type{border-top:var(--rule) solid var(--ink)}
.faq summary{
  cursor:pointer;list-style:none;display:flex;align-items:center;gap:var(--sp-2);
  font-family:var(--sans);font-weight:700;text-transform:uppercase;
  font-size:clamp(13px,1.4vw,17px);letter-spacing:.03em;padding:var(--sp-1) 0;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{
  content:'';width:16px;height:16px;flex:0 0 auto;background:var(--red);
  border-radius:0 100% 0 0;transition:transform .25s ease,background .25s ease;
}
.faq details[open] summary::before{transform:rotate(90deg);background:var(--blue)}
.faq .ans{padding:var(--sp-1) 0 var(--sp-2) calc(16px + var(--sp-2))}
.faq .ans p{max-width:66ch;margin-bottom:.8em}
.faq .ans p:last-child{margin-bottom:0}

/* ---------- timeline ---------- */
.tl{position:relative;padding-left:clamp(26px,4vw,48px)}
.tl::before{content:'';position:absolute;left:clamp(7px,1.2vw,14px);top:8px;bottom:8px;width:3px;background:var(--ink-15)}
.tl li{position:relative;padding-bottom:var(--sp-4)}
.tl li:last-child{padding-bottom:0}
.tl li::before{
  content:'';position:absolute;left:calc(-1 * clamp(26px,4vw,48px) + clamp(1px,.3vw,4px));top:7px;
  width:clamp(16px,2.4vw,26px);height:clamp(16px,2.4vw,26px);background:var(--red);border-radius:50%;
}
.tl li:nth-child(2n)::before{background:var(--blue);border-radius:0 100% 0 0}
.tl li:nth-child(3n)::before{background:var(--yellow);border-radius:0}
.tl .yr{font-family:var(--sans);font-weight:700;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-60)}
.tl h3{margin:.2em 0 .35em}
.tl p{max-width:60ch}

/* ---------- marquee ---------- */
.mq{background:var(--red);color:var(--paper);overflow:hidden;display:flex;align-items:center;height:clamp(32px,4vw,44px)}
.mq-track{
  display:inline-flex;white-space:nowrap;animation:marquee 24s linear infinite;
  font-family:var(--sans);font-weight:700;text-transform:uppercase;letter-spacing:.26em;
  font-size:clamp(9px,1.1vw,13px);
}
.mq:hover .mq-track{animation-play-state:paused}
.mq-track span{display:inline-block;padding:0 .8em}
.mq-track .sep{color:var(--ink)}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ---------- CTA strip ---------- */
.cta{background:var(--ink);color:var(--paper);padding:var(--sp-5) 0}
.cta .inner{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--sp-4);flex-wrap:wrap}
.cta .big{font-family:var(--display);text-transform:uppercase;font-size:clamp(30px,6vw,76px);line-height:.95;color:var(--yellow)}
.cta .sub{margin-top:var(--sp-2);max-width:48ch;color:var(--paper-60)}

/* ---------- footer ---------- */
.site-foot{background:var(--ink);color:var(--paper);padding:var(--sp-5) 0 var(--sp-3)}
.foot-grid{display:grid;grid-template-columns:minmax(0,1.3fr) repeat(3,minmax(0,1fr));gap:var(--sp-4)}
@media (max-width:860px){.foot-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.foot-grid{grid-template-columns:1fr}}
.site-foot .brand{color:var(--paper);font-size:clamp(22px,3vw,34px)}
.site-foot .blurb{color:var(--paper-60);max-width:40ch;margin-top:var(--sp-2);font-size:14px}
.foot-col h3{font-family:var(--sans);font-weight:700;font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--yellow);margin-bottom:var(--sp-2)}
.foot-col li{margin-bottom:.55em}
.foot-col a{text-decoration:none;font-size:14px;color:var(--paper-60);transition:color .2s}
.foot-col a:hover{color:var(--paper)}
.foot-fine{
  border-top:1px solid var(--paper-30);margin-top:var(--sp-4);padding-top:var(--sp-2);
  display:flex;justify-content:space-between;gap:var(--sp-2);flex-wrap:wrap;
  font-family:var(--sans);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--paper-60);
}

/* ---------- scroll reveal ---------- */
/* Gated on html.js, set by an inline script in the head. Unconditional
   opacity:0 means that if the script never runs the page is simply blank —
   the reveal is an enhancement and must not be load-bearing. */
.js .rv{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .7s cubic-bezier(.2,.8,.2,1)}
.js .rv.in{opacity:1;transform:none}
.rv-off .rv{opacity:1!important;transform:none!important;transition:none!important}
.rv-d1{transition-delay:.08s} .rv-d2{transition-delay:.16s} .rv-d3{transition-delay:.24s}
.rv-d4{transition-delay:.32s} .rv-d5{transition-delay:.4s}

/* ---------- WhatsApp enquiry button ---------- */
/* Sits under the drawer (590) so an open menu covers it, and hides outright
   while the menu is open. The mark is a geometric bubble rather than the
   WhatsApp logo: the palette has no green in it, and a recoloured logo looks
   worse than a shape that belongs to the rest of the page. */
.wa-fab{
  position:fixed;z-index:560;
  right:clamp(12px,2vw,26px);bottom:clamp(12px,2vw,26px);
  display:inline-flex;align-items:center;gap:.7em;
  background:var(--wa);color:var(--ink);text-decoration:none;
  padding:13px 20px;box-shadow:5px 5px 0 var(--ink);
  font-family:var(--sans);font-weight:700;font-size:11px;
  letter-spacing:.18em;text-transform:uppercase;
  transition:transform .18s ease,box-shadow .18s ease;
}
.wa-fab:hover{transform:translate(-3px,-3px);box-shadow:8px 8px 0 var(--ink)}
.wa-fab:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ink)}
.wa-fab:focus-visible{outline:var(--rule) solid var(--ink);outline-offset:4px}
.menu-open .wa-fab{opacity:0;pointer-events:none}
.wa-bub{
  position:relative;flex:0 0 auto;width:15px;height:15px;
  border:3px solid var(--ink);border-radius:50%;
}
.wa-bub::after{
  content:'';position:absolute;left:0;bottom:-6px;
  border-left:6px solid var(--ink);border-bottom:5px solid transparent;
}
/* Icon-only was the first instinct and it read as a search button — a ringed
   bubble at 15px is not a recognisable mark. The word carries it instead;
   only "Enquire on" is dropped. */
@media (max-width:620px){
  .wa-fab{padding:12px 15px;font-size:10px}
  .wa-fab .wa-lead{
    position:absolute;width:1px;height:1px;padding:0;margin:-1px;
    overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
  }
}
@media print{.wa-fab{display:none}}

/* ---------- brand download grid ---------- */
.bdlgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(196px,1fr));gap:var(--sp-2)}
.bdlgrid-sm{grid-template-columns:repeat(auto-fill,minmax(132px,1fr))}
.bdl{border:var(--rule) solid var(--paper);background:var(--ink);display:flex;flex-direction:column}
/* A mid-grey chequer, not the usual white one: half these marks are paper and
   would vanish on it, the other half ink. Grey shows both. */
.bdl-ph{
  aspect-ratio:3/2;display:grid;place-items:center;padding:14px;
  border-bottom:var(--rule) solid var(--paper);
  background-color:#919191;
  background-image:
    linear-gradient(45deg,#7f7f7f 25%,transparent 25%,transparent 75%,#7f7f7f 75%),
    linear-gradient(45deg,#7f7f7f 25%,transparent 25%,transparent 75%,#7f7f7f 75%);
  background-size:18px 18px;background-position:0 0,9px 9px;
}
.bdlgrid-sm .bdl-ph{aspect-ratio:1}
.bdl-ph img{max-width:100%;max-height:100%;width:auto;height:auto;display:block}
.bdl figcaption{padding:10px 12px 12px;display:flex;flex-direction:column;gap:5px;flex:1 1 auto}
.bdl-t{
  font-family:var(--sans);font-weight:700;font-size:10px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--paper);line-height:1.3;
}
.bdl-n{font-family:var(--body);font-size:11px;line-height:1.4;color:var(--paper-60);flex:1 1 auto}
.bdl-l{display:flex;align-items:center;gap:6px;margin-top:2px;flex-wrap:wrap}
.bdl-l a{
  font-family:var(--sans);font-weight:700;font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;text-decoration:none;
  background:var(--yellow);color:var(--ink);padding:5px 9px;
  transition:background .15s ease;
}
.bdl-l a:hover{background:var(--paper)}
.bdl-sz{font-family:var(--sans);font-size:9px;letter-spacing:.1em;color:var(--paper-30)}

/* ---------- brand asset preview ---------- */
.bdl-ph{cursor:zoom-in}
.bdl-ph:focus-visible{outline:3px solid var(--yellow);outline-offset:-3px}
.blb{
  position:fixed;inset:0;z-index:700;background:rgba(33,24,20,.95);
  display:flex;align-items:center;justify-content:center;flex-direction:column;
  gap:var(--sp-2);padding:var(--sp-4) var(--gut);
  opacity:0;visibility:hidden;transition:opacity .25s ease,visibility .25s;
}
.blb.open{opacity:1;visibility:visible}
/* the same chequer as the tiles: the point of the preview is seeing what is
   transparent and what is paper-white, which a flat backdrop hides */
.blb-stage{
  max-width:min(100%,1000px);padding:var(--sp-3);
  border:var(--rule) solid var(--paper);
  background-color:#919191;
  background-image:
    linear-gradient(45deg,#7f7f7f 25%,transparent 25%,transparent 75%,#7f7f7f 75%),
    linear-gradient(45deg,#7f7f7f 25%,transparent 25%,transparent 75%,#7f7f7f 75%);
  background-size:26px 26px;background-position:0 0,13px 13px;
}
.blb-stage img{display:block;max-width:100%;max-height:58vh;width:auto;height:auto}
.blb-t{
  font-family:var(--sans);font-weight:700;font-size:12px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--paper);text-align:center;
}
.blb-n{font-family:var(--body);font-size:13px;color:var(--paper-60);text-align:center;max-width:52ch}
.blb-l{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.blb-l a{
  font-family:var(--sans);font-weight:700;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;text-decoration:none;
  background:var(--yellow);color:var(--ink);padding:9px 16px;
}
.blb-l a:hover{background:var(--paper)}
.blb-close{
  position:absolute;top:var(--sp-3);right:var(--gut);
  width:46px;height:46px;border:2.5px solid var(--paper);color:var(--paper);
  background:none;font-size:20px;line-height:1;
  display:flex;align-items:center;justify-content:center;
}
.blb-close:hover{background:var(--red);border-color:var(--red)}
.blb-nav{display:flex;gap:10px}
.blb-nav button{
  width:44px;height:44px;border:2.5px solid var(--paper);background:none;color:var(--paper);
  font-size:18px;line-height:1;
}
.blb-nav button:hover{background:var(--paper);color:var(--ink)}
@media (max-width:600px){
  .blb-stage img{max-height:44vh}
  .blb-close{top:8px;right:8px;width:40px;height:40px}
}

/* ---------- embedded video ---------- */
.vid{
  position:relative;aspect-ratio:16/9;width:100%;
  border:var(--rule) solid var(--ink);background:var(--ink);
  margin-bottom:var(--sp-2);
}
.vid iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.vid-cap{
  font-family:var(--sans);font-weight:500;font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;opacity:.6;margin-bottom:var(--sp-4);
}


/* ---------- utilities ---------- */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{
  position:absolute;left:-9999px;top:0;z-index:999;background:var(--ink);color:var(--paper);
  padding:12px 18px;font-family:var(--sans);font-weight:700;letter-spacing:.2em;text-transform:uppercase;font-size:11px;
}
.skip:focus{left:var(--gut);top:calc(var(--bar) + var(--head) + 8px)}
.center{text-align:center}
.mt-2{margin-top:var(--sp-2)} .mt-3{margin-top:var(--sp-3)} .mt-4{margin-top:var(--sp-4)} .mt-5{margin-top:var(--sp-5)}
.flex-between{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--sp-3);flex-wrap:wrap}
.nowrap{white-space:nowrap}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .rv{opacity:1;transform:none}
  .venues li .name{color:var(--ink)}
  .meter i{width:100%}
}