/* ==========================================================================
   NC WATERMELON QUEEN
   "Press Room" palette + editorial structure, with the motion devices
   Michelle liked from "Sugar Rush".

   Revised 9/7 against her second round of notes. The changes there were all
   in one direction — calmer, quieter, more air — so the whole sheet was
   retuned rather than patched:

     - headings hold one size (the scroll-driven width axis is gone)
     - the vertical section labels down the left margin are gone
     - the marquee is a closing band above the footer, not a fixed top bar
     - sections breathe: more padding, fewer things per screen
     - photograph captions are gone from the gallery frames
     - the paper grain is half its old strength

   Still deliberately excluded, per her first round:
     - tape strips and crooked hero photography
     - pill / oval navigation shapes
     - double titles
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  --paper:      #F2EFE7;
  --paper-2:    #EDE9DF;
  --paper-3:    #E6E1D4;

  /* The watermelon toile behind Meet the Queen. Declared once and used by
     both the section and the wave above it, so they cannot drift apart.
     620px is how big the melons come out — raise it for larger. */
  --toile: url("../../images/background_images/bg4.jpg") center / 620px auto repeat;

  /* The grounds Michelle picked on 9/15 (part two). Each is one line here and
     one line at the section that wears it, so swapping a background means
     editing this block and nothing else. The flat colour beside each image is
     that image's own base colour, read off the file — a wave, a border or a
     card drawn in it meets the pattern with no seam.

       seed   pale blush scattered with grey seeds — the gallery albums
       bloom  soft pink under white line-art melons — Past Queens

     rind (the gallery head) and water (the video library) were the other two
     of the original four, both retired on 9/16 when those two heads moved to
     the bg16 / bg14 pattern set below — rindbg-web.jpg and waterbg-web.jpg
     went missing from a local cleanup on 9/22, and since nothing had painted
     with either token in months, they were removed here rather than replaced. */
  --seed-bg:   #FCE0DF;
  --seed-img:  url("../../images/background_images/seed1-web.jpg") center / 520px auto repeat;
  /* bloom was bglightandwhite.jpg through 9/16; swapped to bg36 on 9/22. */
  --bloom-bg:  #F3CDD8;
  --bloom-img: url("../../images/background_images/bg36-web.webp") center / cover no-repeat;

  /* The 9/16 grounds — Michelle's new bg1…bg22 set, which all sit in the
     same pale-pink family as bglightandwhite and seed1. Each is a -web.jpg
     copy in images/background_images/ (the 1.5–2.6 MB PNGs in images/ stay
     at home). To try a different one, change the number here — e.g. bg12 to
     bg19 — after making its -web.jpg, or point straight at the .png.

       home-hero      the home page head, under a heavy white veil
       home-gallery   the six-frame gallery block on the home page
       home-video     the In Motion block on the home page
       gallery-hero   the head of gallery.php
       video-head     the Video Gallery heading block on video.php  */
  --home-hero-img:    url("../../images/background_images/bg22-web.jpg") center / cover no-repeat;
  --home-gallery-img: url("../../images/background_images/bg13-web.jpg") center / 900px auto repeat;
  --home-video-img:   url("../../images/background_images/bg12-web.jpg") center / 900px auto repeat;
  --gallery-hero-img: url("../../images/background_images/bg36-web.webp") center / cover no-repeat;   /* 9/27: was bg16 */
  --gallery-hero-bg:  #EFC2CC;   /* bg36 own pink, read off the file */
  --video-head-img:   url("../../images/background_images/bg14-web.jpg") center / 760px auto repeat;
  --blush-bg:         #F9DCD9;   /* the base colour of all four, read off the files */

  /* Three more grounds, added 9/22 on her note — same one-line-here rule:
       vine   the pink watermelon toile in background_images  — Still to Come
       sugar  pale pink scattered with cut wedges              — the Past Queens carousel, replacing flat forest
       dew    the ornate pink-and-cream toile                  — the Contact head, replacing the film */
  --vine-bg:   #F4D6DB;
  --vine-img:  url("../../images/background_images/paisly-web.jpg") center / 640px auto repeat;
  --sugar-bg:  #FAD6DC;
  --sugar-img: url("../../images/background_images/bg14-web.jpg") center / 640px auto repeat;
  --dew-bg:    #F3C7D2;
  --dew-img:   url("../../images/background_images/bg37-web.webp") center / cover no-repeat;

  /* The toile, faded the way the schedule head fades it — Michelle asked for
     Meet the Queen to look like that (9/16). One token so the section and
     anything that meets it stay the same strength. */
  --toile-soft: linear-gradient(rgba(242, 239, 231, .8), rgba(242, 239, 231, .8)), var(--toile);
  --ink:        #111110;
  --seed:       #1B1A17;
  --red:        #D8232F;   /* the "Be Our Next Queen" red she asked for */
  --melon:      #F2617A;
  --rind:       #14562B;
  --rind-deep:  #0E3B21;

  /* Very dark green. Nothing on this site has a black background any more —
     she asked for it out of the feature block, the footer, the gallery, the
     buttons and their shadows, all of it. Ink is still the text colour. */
  --forest:     #0C3320;
  --darkerforest: #0F1201;

  /* The nav bar and the hero share one ground. Three candidates so far — tan,
     deep green, and the pink below. Everything that sits on that ground reads
     --on-ground rather than a literal colour, so swapping it is the block of
     six lines under GROUND and nothing else. Light grounds want ink type;
     dark ones want white. --ground-rgb is the same colour as raw numbers,
     because gradients cannot take a hex variable and an alpha together. */
  --tan:        #D8C7A9;
  --pink:       #CB3A62;   /* watermelon flesh, dark enough to carry white */

  /* GROUND ------------------------------------------------------------ */
  --ground:        #FFFFFF;
  --ground-rgb:    255, 255, 255;
  --on-ground:     var(--ink);
  --on-ground-dim: rgba(17, 17, 16, .74);
  --ground-rule:   rgba(17, 17, 16, .26);
  --ground-ghost:  rgba(17, 17, 16, .17);   /* the 2026 outline and idle dots */
  --on-ground-soft: rgba(17, 17, 16, .58);  /* the two small lockup lines */
  --ground-accent: var(--pink);             /* underlines, current page, dots */

  /* The two grounds tried before this one, kept so either is a paste away.
     A light ground takes ink type and a pink accent; a dark one takes white
     type and needs --ground-accent set to #FFFFFF, because red disappears
     against both of them.

     pink: --ground: var(--pink); --ground-rgb: 203, 58, 98;
           --on-ground: #FFFFFF; --on-ground-dim: rgba(255,255,255,.84);
           --ground-rule: rgba(255,255,255,.44); --ground-ghost: rgba(255,255,255,.34);
           --ground-accent: #FFFFFF; --on-ground-soft: rgba(255,255,255,.7);

     tan:  --ground: var(--tan); --ground-rgb: 216, 199, 169;
           --on-ground: var(--ink); --on-ground-dim: rgba(17,17,16,.78);
           --ground-rule: rgba(17,17,16,.42); --ground-ghost: rgba(17,17,16,.20);
           --ground-accent: var(--red); --on-ground-soft: rgba(17,17,16,.62); */
  --dim:        #77736A;
  --hair:       rgba(17, 17, 16, .16);

  /* Headings are Archivo Expanded Light now, not Anybody Black. Every display
     rule reads these three tokens, so the whole site retunes from here:
     drop --display-wght to 200 for thinner, raise it to 500 for more body. */
  --font-display: "Prata", system-ui, -apple-system, sans-serif;
  --font-body:    "Inter", system-ui, -apple-system, sans-serif;
  --font-mono:    "Marko One", ui-monospace, "SFMono-Regular", monospace;
  --font-script:  "Sacramento", "Brush Script MT", cursive;

  --display-wght:  300;
  --display-wdth:  125;
  --display-track: .005em;   /* light type needs air, not the old -.035em */

  --wrap:  1240px;
  --gutter: 30px;

  /* One vertical rhythm for the whole site. Sections got roomier in the
     9/7 pass — the old 104px was the main reason the page felt crowded. */
  --section: clamp(88px, 11vw, 150px);

  --ease-out: cubic-bezier(.22, 1, .36, 1);
}

*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
  /* clip, not hidden: hidden makes the body a scroll container and the sticky
     nav stops sticking. Old browsers fall back to the line above. */
  overflow-x: hidden;
  overflow-x: clip;
}

img { display: block; max-width: 100%; }
a   { color: inherit; }

.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.mono {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.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 link — keyboard users land here first. */
.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  background: var(--forest);
  color: var(--paper);
  padding: 12px 18px;
  font-family: var(--font-mono);
  font-size: 12px;
}
.skip:focus { left: 8px; top: 8px; }

:focus-visible {
  outline: 3px solid var(--red);
  outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   2. Paper grain — sits over everything, never intercepts clicks.
      Halved on 9/7; at full strength it read as noise rather than stock.
   -------------------------------------------------------------------------- */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9000;
  opacity: .2;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.3'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   3. Opening animation — whole screen is a melon, it splits, the halves
      fall away as particles and reveal the page underneath.
      Canvas is drawn by assets/js/melon-intro.js
   -------------------------------------------------------------------------- */
#intro {
  position: fixed;
  inset: 0;
  z-index: 9500;
  background: var(--paper);
  display: grid;
  place-items: center;
  /* Safety net. The overlay is only ever taken away by melon-intro.js, so on
     9/15 — when that file reached the server as 0 bytes — the whole site sat
     behind a blank cream screen with a Skip button that did nothing. The real
     animation finishes in 3.4s; if the overlay is still here at 7s, the
     stylesheet clears it on its own. */
  animation: intro-failsafe .5s var(--ease-out) 7s forwards;
}
@keyframes intro-failsafe {
  to { opacity: 0; visibility: hidden; }
}
#intro canvas { width: 100%; height: 100%; display: block; }

#intro.done {
  opacity: 0;
  visibility: hidden;
  transition: opacity .5s var(--ease-out), visibility .5s;
}

.intro-skip {
  position: absolute;
  right: 22px;
  bottom: 22px;
  z-index: 2;
  background: transparent;
  border: 1.5px solid var(--ink);
  color: var(--ink);
  padding: 9px 16px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: .18s;
}
.intro-skip:hover { background: var(--forest); color: var(--paper); }

body.intro-running { overflow: hidden; }

/* --------------------------------------------------------------------------
   4. Navigation — the association lockup in the middle, the links either
      side, and the bar running the full width of the window.

      Rebuilt 9/7 from the Glenwood reference Michelle sent. The bar is opaque
      and carries the same colour as the hero directly beneath it, so the two
      read as one field. Because it no longer floats over photography, the old
      transparent / .stuck / .on-paper states are gone.

      Nothing in here names a colour. It all reads the GROUND tokens, so the
      bar follows the hero whichever way that goes.
   -------------------------------------------------------------------------- */
/* The focus ring follows whatever the ground can actually show. */
.nav :focus-visible,
.hero :focus-visible { outline-color: var(--ground-accent); }

.nav {
  position: sticky;
  top: 0;
  z-index: 150;
  background: var(--ground);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: clamp(12px, 2.2vw, 38px);
  padding: 16px clamp(20px, 3vw, 46px);
}
/* The lockup: melon above the name, three lines, centred. */
.brand {
  grid-column: 2;
  grid-row: 1;
  justify-self: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  text-decoration: none;
  color: var(--on-ground);
}
/* The crown mark — drawn, not photographed. cr4.png was a hairline outline
   on a transparent square, and at this size its lines fell under a pixel and
   went to grey mush (Michelle, 9/15). crown_mark() in includes/db.php draws
   solid shape instead, so it survives any size and takes its two colours from
   here rather than from a file. */
.crown-mark { display: block; height: auto; }
.crown-mark .cm-body { fill: currentColor; }
.crown-mark .cm-seed { fill: var(--crown-seed, var(--red)); }

.brand-mark {
  --crown-seed: var(--ground-accent);
  width: clamp(36px, 3.1vw, 46px);
  margin-bottom: 2px;
  color: var(--on-ground);
  transition: transform .3s var(--ease-out);
}
.brand:hover .brand-mark,
.brand:focus-visible .brand-mark { transform: translateY(-2px) scale(1.05); }
.brand-name {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
  text-align: center;
}
/* Letter-spacing hangs off the last character; text-indent pulls it back so
   the three lines stay optically centred on one another. */
.bn-sm {
  font-family: var(--font-mono);
  font-size: clamp(8px, .68vw, 9.5px);
  letter-spacing: .3em;
  text-indent: .3em;
  text-transform: uppercase;
  color: var(--on-ground-soft);
}
/* The queen's name in the same script the footer uses, so the top and the
   bottom of every page say the same thing in the same hand.

   text-transform has to be turned off here and on the link itself: .nav a
   sets every link in capitals, which a script face cannot survive. The
   hover underline is switched off for the same reason — the lockup is not
   one of the seven links. */
.brand { text-transform: none; }
.brand::after { display: none; }
.bn-script {
  font-family: var(--font-script);
  font-weight: 400;
  font-size: clamp(23px, 2vw, 30px);
  line-height: .95;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ground-accent);
  margin-top: 1px;
  white-space: nowrap;
}

/* The two link groups sit either side of the lockup. display:contents lets
   the wrapper the mobile menu needs drop out of the desktop grid. */
.links     { display: contents; }
.nav-side  { display: flex; align-items: center; }
.nav-left  { grid-column: 1; grid-row: 1; justify-self: end;   }
.nav-right { grid-column: 3; grid-row: 1; justify-self: start; }

.nav a {
  position: relative;
  padding: 8px clamp(7px, .85vw, 15px);
  font-family: var(--font-mono);
  font-size: clamp(9px, .76vw, 11px);
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  color: var(--on-ground-dim);
  transition: transform .22s var(--ease-out), color .22s;
}
.nav a::after {
  content: "";
  position: absolute;
  left: clamp(7px, .85vw, 15px);
  right: clamp(7px, .85vw, 15px);
  bottom: 2px;
  height: 1.5px;
  background: var(--ground-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .28s var(--ease-out);
}
.nav a:hover,
.nav a:focus-visible { color: var(--on-ground); transform: translateY(-2px); }
.nav a:hover::after,
.nav a:focus-visible::after { transform: scaleX(1); }

.nav a[aria-current="page"] { color: var(--ground-accent); }
.nav a[aria-current="page"]::after { transform: scaleX(1); }

/* Mobile toggle */
.nav-toggle {
  display: none;
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
  background: transparent;
  border: 1px solid var(--ground-rule);
  color: var(--on-ground);
  padding: 9px 14px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  cursor: pointer;
}
.nav-toggle:hover { border-color: var(--ground-accent); color: var(--ground-accent); }

/* --------------------------------------------------------------------------
   5. Hero — the Glenwood arrangement, from her 9/7 note.

      A single column, everything centred on the green: the cut-out melon
      first, then the carousel as an inset panel, then the title. The melon
      overlaps the top edge of the photograph and the title overlaps the
      bottom, which is what gives the block its depth — the photograph is a
      layer in the middle, not a background.

      The carousel itself is unchanged: same slides, same dots, same slow
      ken-burns push, driven by initHero() in assets/js/main.js.
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  /* 9/16: one of her new pale grounds, lightly — a white veil over bg22 so
     the head sits in the same family as Schedule and Past Queens. The veil
     closes to solid white at the foot, where the wave's white top meets it. */
  background:
    linear-gradient(180deg,
      rgba(var(--ground-rgb), .62) 0%,
      rgba(var(--ground-rgb), .72) 70%,
      rgba(var(--ground-rgb), 1) 100%),
    var(--home-hero-img),
    var(--ground);
  padding: clamp(20px, 2.8vw, 44px) var(--gutter) clamp(48px, 5.4vw, 82px);
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
}

/* Where Glenwood put an oversized letter "G": a hairline rule the width of
   the photograph below it, broken in the middle by the tiara.

   The rule itself is the flex row — one pixel tall — and the drawing is taken
   out of the flow and hung on it, so it cannot push the hero taller.

   The drawing is crown_mark() since 9/15 — its viewBox is the tiara and
   nothing else, so it is simply centred on the line and lifted a third of
   its height, which drops the band onto the rule. */
.hero-rule {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: 1080px;
  height: 1px;
  display: flex;
  align-items: center;
  gap: clamp(92px, 10vw, 172px);
  margin: clamp(36px, 4vw, 62px) 0 clamp(24px, 2.8vw, 42px);
}
.hero-rule i {
  display: block;
  flex: 1;
  height: 1px;
  background: var(--ground-rule);
}
.hero-crown {
  position: absolute;
  left: 50%;
  top: 50%;
  width: clamp(72px, 7vw, 116px);
  color: var(--on-ground);
  transform: translate(-50%, -50%) translateY(-34%);
  pointer-events: none;
}

/* Inset, not full-bleed — the green has to show around all four sides.

   Sized off the window height rather than a fixed ratio, because the
   photographs are cover-cropped and the ratio can move. 46vh, then 62vh, now
   76vh — it kept cutting the top of her head off.

   Height alone was never going to fix that. The photographs are portrait,
   about 4:5; the panel is nearer 7:4. Covering one with the other shows less
   than half the picture, and where that slice sits is object-position, not
   height. So the crop points below came down as well — the default from 22%
   to 8%, which puts the top of the frame above her crown rather than through
   it. Raising the panel and lowering the crop are both needed. */
.hero-stage {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1080px;
  height: clamp(400px, 70vh, 780px);
  overflow: hidden;
  background: var(--forest);
  /* On a white ground a pale studio photograph runs straight into the page.
     An inset hairline gives the panel an edge without adding a border box. */
  box-shadow: inset 0 0 0 1px var(--ground-rule);
}
.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.6s var(--ease-out);
}
.hero-slide.on { opacity: 1; }
.hero-slide img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 8%;
  animation: kenburns 16s ease-out forwards;
  transform-origin: center 40%;
}
.hero-slide:nth-child(even) img { animation-name: kenburns-out; }

/* Crop points. Most of the six photographs are portrait and the panel is
   landscape, so the tall ones need the frame pulled up or nothing but a
   shoulder survives. Set per slide in the $heroSlides array in index.php. */
.hero-slide.pos-top img { object-position: center 3%;  }
.hero-slide.pos-mid img { object-position: center 38%; }

@keyframes kenburns {
  from { transform: scale(1.02) translate3d(0, 0, 0); }
  to   { transform: scale(1.14) translate3d(-1.2%, -1.6%, 0); }
}
@keyframes kenburns-out {
  from { transform: scale(1.16) translate3d(1%, 1.2%, 0); }
  to   { transform: scale(1.02) translate3d(0, 0, 0); }
}

/* A wash, weighted to the bottom edge where the title crosses the picture.
   It is the ground colour itself, not a neutral, so the foot of the
   photograph dissolves into the field around it. */
.hero-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  /* It only has to cover the headline, which crosses the bottom 7% or so of
     the panel. Reaching to 46% put haze halfway up the photograph. */
  /* 9/16: reaches a little higher now, because the script name sits on the
     photograph above the capitals. */
  /* 9/22: only the script's tail touches the photograph now (see
     .hero-title), so the wash is back down to a thin band at the foot. */
  background: linear-gradient(to top,
    rgba(var(--ground-rgb), .9) 0%,
    rgba(var(--ground-rgb), .5) 6%,
    rgba(var(--ground-rgb), 0)  16%);
}

/* The title. Line one is set in the heading face; the queen's own name is
   script, the way the association's 2026 artwork sets it. */
.hero-title {
  position: relative;
  z-index: 3;
  /* 9/22: was clamp(-118px, -7vw, -40px), which pulled the script name and
     half the capitals up onto the photograph — across her chin and mouth on
     most of the six slides (Michelle). The title now stands below the panel
     and only the top of the script crosses the bottom edge, which is always
     shoulders, never face. The crossing is what ties title to picture. */
  margin: clamp(-14px, -.8vw, -4px) 0 0;
  text-align: center;
  color: var(--on-ground);
}
/* 9/16: the Schedule / Past Queens arrangement — red script first, tucked
   down over oversized Prata capitals that rise out of their own line
   (initPageHead). Same faces, same colours, same overlap as those heads. */
.hero-title .t-name {
  position: relative;
  z-index: 2;
  display: block;
  color: var(--red);
  font-family: var(--font-script);
  font-weight: 400;
  font-size: clamp(50px, 7vw, 108px);
  line-height: .9;
  letter-spacing: 0;
  text-transform: none;
  margin-bottom: -.2em;          /* tucks the name down onto the capitals */
  transform: rotate(-3deg);      /* 9/22: was -4; the raised right end climbed into the picture */
  transform-origin: center bottom;
}
.hero-title .t-line {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: .26em;
  overflow: hidden;              /* the words rise up out of this */
  padding-top: .16em;            /* Prata's capitals overshoot a tight line box */
  margin-top: -.16em;
  padding-bottom: .04em;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(34px, 5.8vw, 86px);
  line-height: .95;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--ink);
}
.hero-title .h-ch { display: inline-block; }

/* Two cut-out melons, one either side of the photograph — the device the
   other two heads use. Off below 1100px, where there is no margin for them. */
.hero .melon-float { z-index: 2; }
.hero-m1 { width: clamp(150px, 15vw, 250px); left: clamp(-30px, -1vw, 0px); bottom: 26%; }   /* 9/22: was 12%, and sat on the N of the title once the title moved down */
.hero-m2 { width: clamp(90px, 8vw, 140px);  right: clamp(10px, 3vw, 60px);  top: 16%; }
@media (max-width: 1100px) { .hero .melon-float { display: none; } }

/* --------------------------------------------------------------------------
   6. Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-block;
  padding: 15px 26px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration: none;
  border: 2px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  box-shadow: 4px 4px 0 var(--forest);
  cursor: pointer;
  transition: transform .2s var(--ease-out), box-shadow .2s var(--ease-out),
              background .2s var(--ease-out), color .2s var(--ease-out);
}
.btn:hover,
.btn:focus-visible {
  transform: translate(3px, 3px);
  box-shadow: 1px 1px 0 var(--forest);
}
.btn-red {
  background: var(--red);
  border-color: var(--red);
  color: var(--paper);
  box-shadow: 4px 4px 0 var(--forest);
}
.btn-red:hover,
.btn-red:focus-visible { background: #c01d28; border-color: #c01d28; }

.btn-ink {
  background: var(--forest);
  border-color: var(--forest);
  color: var(--paper);
  box-shadow: 4px 4px 0 rgba(12, 51, 32, .3);
}

.btn-ghost {
  background: transparent;
  border-color: var(--paper);
  color: var(--paper);
  box-shadow: 4px 4px 0 rgba(242, 239, 231, .3);
}
.btn-ghost:hover,
.btn-ghost:focus-visible { background: var(--paper); color: var(--ink); }

/* On a paper ground the ghost button inverts. */
.on-paper-btn,
section:not(#compete) .section-head .btn-ghost {
  border-color: var(--ink);
  color: var(--ink);
  box-shadow: 4px 4px 0 rgba(12, 51, 32, .24);
}
section:not(#compete) .section-head .btn-ghost:hover,
section:not(#compete) .section-head .btn-ghost:focus-visible {
  background: var(--forest);
  color: var(--paper);
}

/* Vertical oversized year, running DOWN the left margin of the green.
   Outlined in paper rather than red — red on this green vibrates. It only
   appears where there is genuine margin beside the photograph; below 1280px
   it is hidden rather than allowed to collide with the panel. */
.vtype {
  position: absolute;
  left: clamp(8px, 1.4vw, 26px);
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-family: var(--font-display);
  font-weight: var(--display-wght);
  font-variation-settings: "wdth" var(--display-wdth);
  font-size: clamp(52px, 6.4vw, 112px);
  line-height: 1;
  letter-spacing: .06em;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--ground-ghost);
  margin: 0;
  user-select: none;
  pointer-events: none;
}
@media (max-width: 1280px) { .vtype { display: none; } }

/* Carousel controls — centred under the title now that the hero is one
   centred column. */
.hero-dots {
  position: relative;
  z-index: 3;
  margin-top: clamp(20px, 2.4vw, 30px);
  display: flex;
  justify-content: center;
  gap: 9px;
}
.hero-dots button {
  width: 34px; height: 3px;
  border: 0;
  padding: 0;
  background: var(--ground-ghost);
  cursor: pointer;
  transition: background .25s;
}
.hero-dots button[aria-selected="true"] { background: var(--ground-accent); }

/* --------------------------------------------------------------------------
   7. Title plate — the association's own 2026 artwork.

      UNUSED as of the 9/7 hero rebuild. The hero itself now says "2026 NC
      Watermelon Queen / Lilah Byrum", so the plate directly beneath it was a
      second title saying the same words — the thing Michelle struck out in her
      first round. The rules are kept so putting the plate back is one block of
      markup in index.php, nothing else.

      It used to be cropped into a letterbox band, which cut the top off
      "2026 North Carolina Watermelon Queen". It is shown whole now, centred
      on its own pink ground, and carries Lilah's name for the home page.
   -------------------------------------------------------------------------- */
.title-plate {
  background: #FBEFF2;
  border-bottom: 1px solid var(--hair);
  padding: clamp(20px, 3vw, 46px) var(--gutter);
  display: flex;
  justify-content: center;
}
.title-plate img {
  width: 100%;
  max-width: 1000px;
  height: auto;
}

/* --------------------------------------------------------------------------
   8. Wavy section divider — the break she liked from Sugar Rush
   -------------------------------------------------------------------------- */
/* Two curves eighteen pixels apart, with a band of colour riding between
   them. It used to be one cream path on a cream page, which is why she
   could not see it at all.

   Drawn upward, not downward: the strip's own background is whatever sits
   BELOW the break, one path covers the top in whatever sits ABOVE, and the
   band shows between them. That way round because an SVG path cannot be
   filled with an image but a background can — which is what lets the
   watermelon toile under Meet the Queen run right up into the wave instead
   of stopping at a flat cream edge. */
.wave {
  display: block;
  width: 100%;
  height: 76px;
  margin-bottom: -1px;
}

/* the band between the curves */
.wave .w-accent            { fill: var(--melon); }
.wave.accent-rind .w-accent { fill: var(--rind); }

/* what is ABOVE the break — painted over the top of the strip */
.wave .w-top              { fill: var(--paper); }
.wave.above-ground .w-top { fill: var(--ground); }
.wave.above-paper  .w-top { fill: var(--paper); }

/* what is BELOW the break — the strip itself */
.wave.below-paper  { background: var(--paper); }
.wave.below-paper2 { background: var(--paper-2); }
.wave.below-forest { background: var(--forest); }
.wave.below-toile  { background: var(--toile); }
.wave.below-toile-soft { background: var(--toile-soft); }

.wave + section { margin-top: -1px; }

/* --------------------------------------------------------------------------
   8b. Drifting cut-out melons.

       Michelle asked for the schedule head's melons on Past Queens and on
       Contact too (9/15, part two), so the behaviour lives here once and the
       two pages only say where each melon sits. data-depth on an image is how
       far it drifts as the page scrolls; initPageHead() in main.js reads it.
       Everything still works with JavaScript off — the melons simply hold
       still.
   -------------------------------------------------------------------------- */
.melon-float {
  position: absolute;
  display: block;
  height: auto;
  filter: drop-shadow(0 22px 26px rgba(12, 51, 32, .24));
  will-change: transform;
}


/* --------------------------------------------------------------------------
   9. Sections and headings
      One title per section. No stacked/echoed duplicate headings, and no
      heading that changes size as you scroll past it.
   -------------------------------------------------------------------------- */
section { position: relative; padding: var(--section) 0; }
/* Anything the nav bar or a link can jump to stops clear of the sticky bar
   rather than under it — "Be Our Queen" is index.php#compete. */
section[id], header[id] { scroll-margin-top: calc(var(--nav-h, 110px) + 20px); }
section.tight { padding: clamp(56px, 7vw, 92px) 0 var(--section); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--dim);
}
.eyebrow i { width: 34px; height: 2px; background: var(--red); display: block; }

h1.big,
h2.big {
  font-family: var(--font-display);
  font-weight: var(--display-wght);
  font-variation-settings: "wdth" var(--display-wdth);
  text-transform: uppercase;
  font-size: clamp(34px, 5.2vw, 68px);
  line-height: .92;
  letter-spacing: var(--display-track);
  margin: 0 0 30px;
  max-width: 18ch;
}

/* A short standfirst under a page title. */
.lead {
  max-width: 62ch;
  font-size: clamp(16px, 1.35vw, 18.5px);
  line-height: 1.65;
  color: var(--dim);
  margin: 0;
}

/* Section title on the left, a link to the full page on the right. */
.section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 28px;
  flex-wrap: wrap;
  margin-bottom: 42px;
}
.section-head h2.big { margin-bottom: 0; }

/* A small heading with a hairline above it — used to break long lists up. */
.rule-head {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--red);
  border-top: 1px solid var(--hair);
  padding-top: 14px;
  margin: 0 0 20px;
}
.rule-head-gap { margin-top: 72px; }

/* A short mono kicker above a block of copy. */
.kicker {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--red);
  margin: 0 0 14px;
}

.empty {
  padding: 40px 0;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--dim);
}

/* Standing notes — used for the PAST_QUEENS placeholder and form messages. */
.note {
  border-left: 3px solid var(--red);
  background: var(--paper-2);
  padding: 16px 20px;
  margin: 0 0 34px;
  font-size: 15px;
}
.note b { display: block; margin-bottom: 3px; }
.note-ok  { border-left-color: var(--rind); }
.note-bad { border-left-color: var(--red); }

/* --------------------------------------------------------------------------
   10. Page head — the banner block on the inner pages
   -------------------------------------------------------------------------- */
/* The bar is in the flow now, so this no longer has to clear a fixed nav. */
.page-head {
  padding: 0;
  background: var(--paper);
}

.page-head-img {
  position: relative;
  height: clamp(230px, 34vh, 420px);
  overflow: hidden;
  background: var(--forest);
}
.page-head-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 42%;
}
.page-head-img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(9, 40, 24, .6), rgba(9, 40, 24, .18));
}

.page-head-copy { padding-top: clamp(40px, 5vw, 72px); }
.page-head.has-img .page-head-copy { padding-top: clamp(44px, 5vw, 76px); }

/* --------------------------------------------------------------------------
   11. Meet the Queen — one bordered card, centred, then the quote.

       Rebuilt on her third note. It used to be a bare two-column grid running
       the full width of the wrapper, which she said read as boring. It is a
       contained card now: a real border, a hard offset shadow, the photograph
       inside it rather than floating beside it, and rules either side of the
       block so the section has edges.

       The "Chapter One" eyebrow is gone, and so is the separate MEET THE QUEEN
       heading — the card's own title carries the section, which also keeps it
       off her rejected list of double titles.
   -------------------------------------------------------------------------- */
/* Cream until 9/8, then the toile. Nothing in this section sits directly on
   the pattern — the card and the quote block both have their own ground — so
   it needs no veil to stay readable. */
/* 9/16: faded under the same paper veil as the schedule head, which she
   pointed to — the full-strength toile was fighting the card. --toile-soft
   is set in the tokens; raise its .8 to fade further. */
#meet { background: var(--toile-soft); }

/* The shared bordered block: the queen card and the video block both sit in
   one of these, at the same width, so the page has a spine. */
.block-card {
  max-width: 1080px;
  margin: 0 auto;
  background: #FFFFFF;
  border: 1.5px solid var(--ink);
  box-shadow: 12px 12px 0 rgba(12, 51, 32, .12);
  padding: clamp(24px, 3vw, 44px);
}
.block-card .section-head { margin-bottom: clamp(22px, 2.6vw, 34px); }

.queen-card {
  position: relative;
  max-width: 1080px;
  margin: 0 auto;
  background: #FFFFFF;   /* white, as she asked — not the paper cream */
  border: 1.5px solid var(--ink);
  box-shadow: 12px 12px 0 rgba(12, 51, 32, .12);
  display: grid;
  grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr);
  gap: clamp(24px, 3.4vw, 48px);
  padding: clamp(20px, 2.4vw, 32px);
  align-items: stretch;
}

.qc-photo {
  position: relative;
  overflow: hidden;
  background: var(--paper-3);
  min-height: 340px;
}
.qc-photo img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 18%;
}

.qc-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: clamp(6px, 1.4vw, 20px) clamp(4px, 1vw, 16px) clamp(6px, 1vw, 14px) 0;
}

/* A rectangular tag, not a capsule — she struck the pill shapes out. */
.qc-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--red);
  border: 1px solid var(--red);
  padding: 5px 10px;
  margin: 0 0 20px;
}

.qc-title {
  font-family: var(--font-display);
  font-weight: var(--display-wght);
  font-variation-settings: "wdth" var(--display-wdth);
  font-size: clamp(28px, 3.4vw, 46px);
  line-height: 1.04;
  letter-spacing: var(--display-track);
  margin: 0 0 20px;
  text-wrap: balance;
}
.qc-title span {
  display: block;
  color: var(--red);
}

.qc-lead {
  font-size: clamp(15.5px, 1.25vw, 17px);
  line-height: 1.7;
  max-width: 52ch;
  margin: 0 0 26px;
}

.qc-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px 26px;
  width: 100%;
  margin: 0 0 30px;
  padding-top: 22px;
  border-top: 1px solid var(--hair);
}
.qc-facts dt {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 6px;
}
.qc-facts dd {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.4;
}

/* The quote. Deep rind green, the one place that colour still appears now
   that the hero has gone tan. */
.queen-quote {
  max-width: 1080px;
  margin: clamp(28px, 3.4vw, 46px) auto 0;
  background: var(--rind-deep);
  color: var(--paper);
  padding: clamp(30px, 4vw, 58px) clamp(26px, 4vw, 64px);
}
.queen-quote blockquote {
  margin: 0 0 20px;
  font-size: clamp(17px, 1.85vw, 25px);
  line-height: 1.5;
  font-style: italic;
  font-weight: 300;
  text-wrap: pretty;
}
.queen-quote blockquote::before { content: "\201C"; }
.queen-quote blockquote::after  { content: "\201D"; }
.queen-quote figcaption {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--melon);
}

/* --------------------------------------------------------------------------
   12. Modal — where the long biography lives now
   -------------------------------------------------------------------------- */
.modal {
  position: fixed;
  inset: 0;
  z-index: 700;
  display: grid;
  place-items: center;
  padding: clamp(16px, 4vw, 48px);
  background: rgba(6, 26, 16, .78);
  backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity .3s var(--ease-out);
}
.modal[hidden] { display: none; }
.modal.on { opacity: 1; }

.modal-panel {
  position: relative;
  width: min(760px, 100%);
  max-height: min(86vh, 900px);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--paper);
  border-top: 6px solid var(--red);
  box-shadow: 0 40px 90px rgba(0, 0, 0, .45);
  padding: clamp(34px, 5vw, 62px) clamp(24px, 5vw, 64px) clamp(38px, 5vw, 62px);
  transform: translateY(22px) scale(.985);
  transition: transform .38s var(--ease-out);
}
.modal.on .modal-panel { transform: none; }

.modal-close {
  position: sticky;
  top: 0;
  float: right;
  margin: -10px -14px 0 0;
  width: 44px; height: 44px;
  display: grid;
  place-items: center;
  background: transparent;
  border: 1px solid var(--hair);
  color: var(--ink);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  transition: background .2s, color .2s;
}
.modal-close:hover { background: var(--forest); color: var(--paper); }

.modal-title {
  font-family: var(--font-display);
  font-weight: var(--display-wght);
  font-variation-settings: "wdth" var(--display-wdth);
  text-transform: uppercase;
  font-size: clamp(30px, 4.4vw, 52px);
  line-height: .94;
  letter-spacing: var(--display-track);
  margin: 0 0 26px;
}
.modal-body {
  max-width: 62ch;
  font-size: 16.5px;
  line-height: 1.78;
}
.modal-body p { margin: 0 0 18px; }
.modal-body p:last-child { margin-bottom: 0; }
.modal-body a { color: var(--red); }

body.modal-open { overflow: hidden; }

/* --------------------------------------------------------------------------
   13. Home page blocks — rebuilt 9/16.

       Michelle asked for the home page to look like it came from the same
       site as the Schedule and Past Queens heads. So every block below the
       queen card now carries their heading — a red script word tucked over
       oversized Prata capitals (.kh-*) — and sits on one of her pale grounds
       instead of forest green or flat paper:

         schedule   tanvid.mp4, melon vines growing across tan
         gallery    bg13 (--home-gallery-img)
         in motion  bg12 (--home-video-img)
         compete    stays red — it is the one loud block, and she likes it

       The old .feature photograph-under-green-wash rules are gone; nothing
       else used them.
   -------------------------------------------------------------------------- */

/* The heading. Same proportions as .pq-script / .pq-word, one step smaller,
   because these are sections of a page rather than the head of one. */
.kh-title { margin: 0; line-height: .9; }
.kh-script {
  position: relative;
  z-index: 1;
  display: block;
  margin-left: clamp(2px, .5vw, 8px);
  font-family: var(--font-script);
  font-weight: 400;
  font-size: clamp(46px, 5.2vw, 84px);
  line-height: .72;
  color: var(--red);
  transform-origin: left bottom;
}
.kh-word {
  display: flex;
  flex-wrap: wrap;
  overflow: hidden;              /* the letters rise out of this */
  padding-top: .16em;
  margin-top: -.16em;
  padding-bottom: .04em;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(46px, 7.4vw, 116px);
  line-height: .9;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--ink);
}
.kh-word .h-ch { display: inline-block; }
/* Letters of one word sit tight; .is-words is for a heading split into whole
   words instead, which a flex row would otherwise run together. */
.kh-word.is-words { column-gap: .26em; }
.kh-lead {
  max-width: 46ch;
  margin: clamp(20px, 2.4vw, 30px) 0 0;
  padding-left: 18px;
  border-left: 2px solid var(--red);
  font-size: clamp(15.5px, 1.3vw, 17.5px);
  line-height: 1.65;
  color: rgba(17, 17, 16, .76);
}

/* SCHEDULE — the vines film behind, a paper veil over the left where the
   words are, thinning to nothing so the vines show on the right. */
.home-season {
  --season-tan: #DED5C3;         /* the film's own ground, read off a frame */
  overflow: hidden;
  isolation: isolate;
  background: var(--season-tan);
  padding: var(--section) 0 calc(var(--section) + 20px);
}
.hs-film {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.home-season::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  /* top band: one flat colour under the wave coming out of Meet the Queen,
     so the curve meets the film with no seam */
  background:
    linear-gradient(180deg, #ECE6DA 0, rgba(236, 230, 218, 0) 150px),
    linear-gradient(180deg, rgba(222, 213, 195, 0) 80%, var(--season-tan) 100%),
    linear-gradient(95deg,
      rgba(242, 239, 231, .94) 0%,
      rgba(242, 239, 231, .86) 40%,
      rgba(242, 239, 231, .2) 72%,
      rgba(242, 239, 231, 0) 100%);
}
.hs-copy { max-width: 640px; }

.feature-list {
  list-style: none;
  margin: clamp(26px, 3vw, 38px) 0 34px;
  padding: 0;
  max-width: 540px;
}
.feature-list li {
  display: flex;
  gap: 18px;
  align-items: baseline;
  padding: 12px 0;
  border-top: 1px solid rgba(17, 17, 16, .18);
}
.feature-list li:last-child { border-bottom: 1px solid rgba(17, 17, 16, .18); }
.fl-date {
  flex: 0 0 74px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--red);
}
/* Prata, the way the Schedule page sets a kind of stop — not heavy Inter
   capitals, which was the one face on this block that matched nothing. */
.fl-what {
  font-family: var(--font-display);
  font-size: clamp(17px, 1.5vw, 21px);
  line-height: 1.25;
  color: var(--ink);
}

/* GALLERY and IN MOTION — the grounds, each under a light paper veil. */
.home-gallery {
  background:
    linear-gradient(rgba(252, 249, 245, .42), rgba(252, 249, 245, .42)),
    var(--home-gallery-img),
    var(--blush-bg);
  color: var(--ink);
  padding-top: calc(var(--section) + 40px);
}
.home-video {
  background:
    linear-gradient(rgba(252, 249, 245, .42), rgba(252, 249, 245, .42)),
    var(--home-video-img),
    var(--blush-bg);
}
.home-gallery .section-head,
.home-video .section-head { align-items: flex-end; }

/* The break out of the schedule block, drawn inside the gallery section so
   its background runs up under the curve with no seam. The top fill is the
   film's tan. */
.wave-in {
  position: absolute;
  top: -1px;
  left: 0;
  display: block;
  width: 100%;
  height: 76px;
  pointer-events: none;
}
.wave-in .w-accent { fill: var(--melon); }
.wave-in .w-top    { fill: #DED5C3; }

/* The break out of Meet the Queen into the film: drawn from the bottom up at
   the foot of #meet, so the faded toile shows above the curve. */
#meet { padding-bottom: 0; }
.meet-wave { display: block; width: 100%; height: 76px; margin: clamp(56px, 6vw, 96px) 0 -1px; }
.meet-wave .w-accent { fill: var(--melon); }
.meet-wave .w-paper  { fill: #ECE6DA; }

/* White frames on the blush, with a soft green shadow rather than the dark
   drop they had on forest. */
.home-gallery .frame { background: #FFFFFF; box-shadow: 0 10px 26px rgba(12, 51, 32, .14); }
.home-gallery .frame:hover,
.home-gallery .frame:focus-visible { box-shadow: 0 20px 40px rgba(12, 51, 32, .26); }


/* --------------------------------------------------------------------------
   14a. The Season — the head of schedule.php, rebuilt 9/15.

        Replaces the shared page-head on this page only. The toile runs the
        full width under a paper veil — she asked for it much lighter (9/15),
        so the veil never drops below --toile-veil anywhere, and thickens
        behind the title on the left. Raise --toile-veil toward 1 to fade
        the pattern further; lower it to bring the melons back up.
        The title spans the whole grid and runs over the melons — the one
        deliberate overlap on the page.
   -------------------------------------------------------------------------- */
.sched-hero {
  --toile-veil: .7;
  position: relative;
  overflow: hidden;
  padding: clamp(40px, 5vw, 76px) 0 0;
  background:
    linear-gradient(90deg,
      rgba(242, 239, 231, .95) 0%,
      rgba(242, 239, 231, .9) 40%,
      rgba(242, 239, 231, var(--toile-veil)) 70%),
    var(--toile);
}

.sh-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: auto auto;
  column-gap: var(--gutter);
  align-items: start;
}

/* The title — "The" in script tucked into the top-left of SEASON. */
.sh-title {
  grid-column: 1 / -1;
  grid-row: 1;
  position: relative;
  z-index: 3;
  margin: 0;
  padding-top: clamp(38px, 5.4vw, 84px);   /* room for the script above */
  line-height: 1;
  pointer-events: none;
}
.sh-the {
  position: absolute;
  top: 0;
  left: clamp(4px, 1.2vw, 18px);
  font-family: var(--font-script);
  font-weight: 400;
  font-size: clamp(58px, 8.4vw, 132px);
  line-height: 1;
  color: var(--red);
  transform-origin: left bottom;
  z-index: 2;   /* in front of SEASON — GSAP's transforms on the letters would
                   otherwise stack them over the script */
}
.sh-word {
  display: flex;
  overflow: hidden;              /* the letters rise up out of this */
  /* Prata's capitals stand taller than a .9 line box, so the clip was
     cutting their tops off. The padding widens the clip; the negative margin
     hands the space straight back, so nothing around the title moves. */
  padding-top: .16em;
  margin-top: -.16em;
  padding-bottom: .04em;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(66px, 14.2vw, 204px);
  line-height: .9;
  letter-spacing: -.01em;
  text-transform: uppercase;
  color: var(--ink);
}
.sh-ch { display: inline-block; }

/* The melon composition — right-hand columns, under the title. */
.sh-art {
  grid-column: 7 / -1;
  grid-row: 1 / 3;
  position: relative;
  z-index: 1;
  min-height: clamp(420px, 44vw, 600px);
}
.sh-melon {
  position: absolute;
  display: block;
  height: auto;
  filter: drop-shadow(0 22px 26px rgba(12, 51, 32, .22));
  will-change: transform;
}
.sh-melon-main  { width: 88%;  right: -5%; top: 20%; }
.sh-melon-slice { width: 36%;  left: 6%;   top: -2%; }   /* sits behind the ON of SEASON */
.sh-melon-cubes { width: 22%;  right: 0;   top: -6%; }

.sh-copy {
  grid-column: 1 / 7;
  grid-row: 2;
  position: relative;
  z-index: 2;
  padding: clamp(22px, 2.6vw, 38px) 0 clamp(30px, 3.4vw, 50px);
}
.sh-lead {
  margin: 0 0 18px;
  max-width: 21ch;
  font-family: var(--font-display);
  font-size: clamp(25px, 2.7vw, 38px);
  line-height: 1.18;
  color: var(--ink);
}
.sh-lead em {
  font-style: normal;
  color: var(--red);
  box-shadow: inset 0 -.24em 0 rgba(242, 97, 122, .26);   /* a highlighter swipe */
}
.sh-sub {
  margin: 0;
  max-width: 44ch;
  padding-left: 18px;
  border-left: 2px solid var(--red);
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.65;
  color: rgba(17, 17, 16, .78);
}

/* The next appearance, as a ticket stub laid over the big melon. */
.sh-next {
  grid-column: 7 / 10;
  grid-row: 2;
  align-self: end;
  position: relative;
  z-index: 4;
  display: grid;
  gap: 6px;
  margin: 0 0 clamp(30px, 3.4vw, 50px);
  padding: 18px 20px 16px;
  background: #FFFFFF;
  border: 1.5px solid var(--ink);
  box-shadow: 8px 8px 0 var(--forest);
  color: var(--ink);
  text-decoration: none;
  transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out);
}
.sh-next::before {                 /* the perforation along the top */
  content: "";
  position: absolute;
  left: 14px; right: 14px; top: 6px;
  border-top: 2px dotted rgba(17, 17, 16, .28);
}
.sh-next:hover,
.sh-next:focus-visible {
  transform: translate(4px, 4px);
  box-shadow: 4px 4px 0 var(--forest);
}
.sh-next-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--red);
  margin-top: 4px;
}
.sh-next-date { display: flex; align-items: center; gap: 10px; }
.sh-next-date b {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 58px;
  line-height: .9;
  color: var(--red);
}
.sh-next-date span {
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.35;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.sh-next-what {
  font-weight: 600;
  font-size: 15px;
  line-height: 1.3;
  text-transform: uppercase;
}
.sh-next-where { font-size: 13px; color: var(--dim); }
.sh-next-go {
  margin-top: 6px;
  padding-top: 10px;
  border-top: 1px solid var(--hair);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.sh-next-go i { font-style: normal; display: inline-block; transition: transform .25s var(--ease-out); }
.sh-next:hover .sh-next-go i { transform: translateY(3px); }

/* The strip — five numbered kinds of stop, then the booking cell in red. */
/* 9/16: cut right down. The five kinds of stop are decoration, and as tall
   white boxes with a hover state they looked like buttons that did nothing
   (Michelle). They are one slim line of labels now, with the booking details
   as a small red tag at the end — still there, no longer a banner. */
.sh-strip {
  position: relative;
  z-index: 4;
  list-style: none;
  margin: 0;
  padding: 10px 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 22px;
  border-top: 1px solid rgba(17, 17, 16, .2);
  border-bottom: 1px solid rgba(17, 17, 16, .2);
}
.sh-cell {
  font-family: var(--font-display);
  font-size: 14px;
  line-height: 1.3;
  color: rgba(17, 17, 16, .78);
  white-space: nowrap;
}
.sh-cell b {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 9.5px;
  letter-spacing: .16em;
  color: var(--red);
  margin-right: 7px;
}

.sh-book {
  margin-left: auto;
  padding: 6px 12px;
  background: var(--red);
  color: var(--paper);
  font-family: var(--font-body);
  font-size: 12.5px;
  white-space: normal;
}
.sh-book br { display: none; }
.sh-book b {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--paper);
  margin-right: 8px;
}
.sh-book a { color: #FFFFFF; }
.sh-book br + a { margin-left: 10px; padding-left: 10px; border-left: 1px solid rgba(255, 255, 255, .5); }

/* The break into the calendar: melon band, then paper. Drawn from the bottom
   up, so the toile shows through above the curve. */
.sh-wave {
  display: block;
  width: 100%;
  height: 76px;
  margin: clamp(30px, 3.6vw, 52px) 0 -1px;
}
.sh-wave .w-accent { fill: var(--melon); }
.sh-wave .w-paper  { fill: var(--paper); }

@media (max-width: 1100px) {
  .sh-book { margin-left: 0; }
}
/* 9/22: the five labels are gone, so the strip is just the booking tag —
   no rules above and below it, set to the right as before. */
.sh-strip-book { border: 0; padding: 0; justify-content: flex-end; }
.sh-strip-book .sh-book { margin-left: 0; }

@media (max-width: 900px) {
  .sched-hero {
    background:
      linear-gradient(180deg,
        rgba(242, 239, 231, .92) 0%,
        rgba(242, 239, 231, var(--toile-veil)) 45%,
        rgba(242, 239, 231, .92) 100%),
      var(--toile);
  }
  .sh-grid { grid-template-columns: minmax(0, 1fr); }
  .sh-title { grid-column: 1; grid-row: 1; }
  .sh-art {
    grid-column: 1;
    grid-row: 2;
    min-height: 0;
    height: clamp(260px, 62vw, 420px);
    margin-top: -8vw;               /* tuck the melons up under SEASON */
    margin-bottom: -70px;           /* the ticket rides up over the melons —
                                       pulled from here, not by a negative
                                       margin on the ticket, which would
                                       shrink its row and let it cover the
                                       paragraph below */
  }
  .sh-melon-main  { width: 66%; right: 0;   top: 6%; }
  .sh-melon-slice { width: 36%; left: 2%;   bottom: 0; }
  .sh-melon-cubes { width: 20%; right: 2%;  top: -6%; }
  .sh-next {
    grid-column: 1;
    grid-row: 3;
    justify-self: start;
    width: min(100%, 320px);
    margin: 0;
  }
  .sh-copy { grid-column: 1; grid-row: 4; }
}

@media (max-width: 600px) {
  .sh-strip { gap: 6px 16px; }
  .sh-book { width: 100%; }
}

/* --------------------------------------------------------------------------
   14. The calendar on schedule.php — rebuilt 9/15.

       From two references she sent: a row of month columns you swipe
       through, and a poster list where each date sits in a white tile with a
       chequered strip on top beside a colour-coded card. Both use only the
       site's own palette and fonts, and every corner is square — no pills.

       The colour of a card is the kind of stop. Each .k-* class sets two
       tokens, the card colour and the text colour that reads on it, and
       everything below paints from those two.
   -------------------------------------------------------------------------- */
.k-fest   { --k: var(--red);    --k-ink: #FFFFFF; }
.k-store  { --k: var(--melon);  --k-ink: var(--ink); }
.k-school { --k: var(--rind);   --k-ink: var(--paper); }
.k-farm   { --k: var(--tan);    --k-ink: var(--ink); }
.k-conv   { --k: var(--forest); --k-ink: var(--paper); }

/* The chequer on top of every date tile — the kind's colour against paper. */
.p-strip,
.ce-day::before {
  background: repeating-conic-gradient(var(--k) 0 25%, var(--paper) 0 50%) 0 0 / 12px 12px;
}

/* The body of the page — Still to Come and Month by Month both stand on this.
   Plain paper until 9/22; the vine toile from background_images now runs
   underneath. First pass veiled this at .86 opacity right at the top, which
   read as a flat white band directly under the wave before the pattern faded
   in — a flat, lighter veil instead, so the pattern is there immediately. */
.sched-body {
  background:
    rgba(242, 239, 231, .4),
    var(--vine-img),
    var(--vine-bg);
}

/* Still to Come — the posters ---------------------------------------------- */
.posters {
  list-style: none;
  margin: 0 0 clamp(80px, 9vw, 130px);
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 2vw, 28px);
}
.poster:last-child:nth-child(odd) { grid-column: 1 / -1; }

.poster {
  display: grid;
  grid-template-columns: clamp(96px, 9vw, 122px) minmax(0, 1fr);
  gap: 12px;
}
.poster > * {
  border: 1.5px solid var(--ink);
  transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out);
}
.poster:hover > * {
  transform: translate(-3px, -3px);
  box-shadow: 6px 6px 0 var(--forest);
}

.p-date {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 34px 8px 16px;
  background: #FFFFFF;
  overflow: hidden;
}
.p-strip {
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 18px;
  border-bottom: 1.5px solid var(--ink);
}
.p-date b {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(44px, 4.4vw, 60px);
  line-height: .9;
}
.p-date b.p-tba { font-size: 28px; }
.p-date span {
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .2em;
  text-transform: uppercase;
}

.p-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 160px;
  padding: 18px 20px;
  background: var(--k);
  color: var(--k-ink);
}
.p-badge {                        /* a rectangular tag — the reference's time box */
  position: absolute;
  top: 14px;
  right: 14px;
  padding: 6px 9px;
  background: #FFFFFF;
  border: 1.5px solid var(--ink);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
}
.p-kind {
  margin: 0 120px 12px 0;         /* keeps clear of the badge */
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  opacity: .88;
}
.p-card h3 {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(21px, 1.9vw, 27px);
  line-height: 1.08;
  text-transform: uppercase;
}
.p-when { margin: auto 0 0; font-size: 14.5px; font-weight: 500; }
.p-where { margin: 4px 0 0; font-size: 14px; opacity: .88; }
.p-where::before {                /* a small diamond marker for the place */
  content: "";
  display: inline-block;
  width: 7px; height: 7px;
  margin-right: 9px;
  border: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
}

/* Month by Month — the swipeable rail --------------------------------------- */
.cal-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 28px;
  margin-bottom: 22px;
  padding-top: 14px;
  border-top: 1px solid var(--hair);
}
.cal-bar .rule-head { margin: 0; padding: 0; border: 0; }

.cal-key {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin: 0;
  padding: 0;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.cal-key li { display: inline-flex; align-items: center; gap: 8px; }
.cal-key i {
  display: block;
  width: 13px; height: 13px;
  background: var(--k);
  border: 1.5px solid var(--ink);
}

.cal-nav { display: flex; gap: 10px; }
.cal-btn {
  min-width: 44px;
  height: 44px;
  padding: 0 14px;
  background: var(--paper);
  border: 1.5px solid var(--ink);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  box-shadow: 3px 3px 0 var(--forest);
  cursor: pointer;
  transition: transform .15s var(--ease-out), box-shadow .15s var(--ease-out), background .15s;
}
.cal-btn:hover { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--forest); background: #FFFFFF; }
.cal-btn:disabled { opacity: .35; cursor: default; transform: none; box-shadow: none; }

.cal-rail {
  position: relative;              /* so each month's offsetLeft is measured from here */
  overflow-x: auto;
  /* July runs to a dozen stops and September to none. main.js sets the
     rail's height to the tallest month in view, so a short stretch of the
     season does not sit above a screen of blank space. */
  overflow-y: hidden;
  transition: height .35s var(--ease-out);
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  padding: 4px 0 24px;
  cursor: grab;
  scrollbar-width: thin;
  scrollbar-color: var(--red) transparent;
  /* the right edge fades, so it is obvious there is more to swipe to */
  -webkit-mask-image: linear-gradient(90deg, #000 86%, transparent);
          mask-image: linear-gradient(90deg, #000 86%, transparent);
}
.cal-rail.at-end { -webkit-mask-image: none; mask-image: none; }
.cal-rail.is-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.cal-rail:focus-visible { outline: 3px solid var(--red); outline-offset: 4px; }

.cal-months {
  list-style: none;
  margin: 0;
  padding: 0 10px 0 0;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: clamp(252px, 23vw, 296px);
  gap: 18px;
  align-items: start;
}

.cal-month {
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  min-height: 360px;
  background: #FFFFFF;
  border: 1.5px solid var(--ink);
}
.cal-month.is-now { box-shadow: 8px 8px 0 var(--forest); }

.cal-mhead {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 16px 16px 12px;
  border-bottom: 1.5px solid var(--ink);
}
.cal-mhead b {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 34px;
  line-height: 1;
}
.cal-mhead span { font-family: var(--font-mono); font-size: 11px; letter-spacing: .16em; }
.cal-mhead em {
  margin-left: auto;
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--dim);
}
.cal-month.is-now .cal-mhead { background: var(--red); color: var(--paper); }
.cal-month.is-now .cal-mhead em { color: var(--paper); }
.cal-month.is-past .cal-mhead { background: var(--paper-2); }

.cal-evs {
  list-style: none;
  margin: 0;
  padding: 12px;
  display: grid;
  gap: 10px;
}
.cal-ev {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  min-height: 60px;
  background: var(--k);
  color: var(--k-ink);
  border: 1.5px solid var(--ink);
}
.cal-month.is-past .cal-ev { opacity: .72; transition: opacity .2s; }
.cal-month.is-past:hover .cal-ev { opacity: 1; }

.ce-day {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 8px;
  background: #FFFFFF;
  color: var(--ink);
  border-right: 1.5px solid var(--ink);
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 1;
}
.ce-day::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 8px;
  border-bottom: 1px solid var(--ink);
  background-size: 8px 8px;
}
.ce-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  min-width: 0;
  padding: 8px 10px;
}
.ce-body strong {
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.25;
  text-transform: uppercase;
  letter-spacing: .01em;
}
.ce-body small { font-size: 12px; opacity: .88; }

/* An empty month: a cut-out melon and a line instead of "No events". */
.cal-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  padding: 22px 18px 26px;
}
.cal-empty img { width: 112px; height: auto; margin-left: -8px; }
.cal-empty span {
  font-family: var(--font-display);
  font-size: 21px;
  line-height: 1.25;
  color: rgba(17, 17, 16, .62);
}
.cal-empty small {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--red);
}

.cal-hint {
  margin: 4px 0 0;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--dim);
}
.cal-hint i {
  display: inline-block;
  font-style: normal;
  margin-left: 6px;
  animation: cal-nudge 1.6s var(--ease-out) infinite;
}
@keyframes cal-nudge {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(6px); }
}

@media (max-width: 760px) {
  .posters { grid-template-columns: minmax(0, 1fr); }
  .poster { grid-template-columns: 84px minmax(0, 1fr); gap: 8px; }
  .p-kind { margin-right: 104px; }
  .cal-months { grid-auto-columns: 80vw; gap: 14px; }
  .cal-rail { -webkit-mask-image: none; mask-image: none; }
}

@media (prefers-reduced-motion: reduce) {
  .cal-hint i { animation: none; }
  .poster > * { transition: none; }
}

/* --------------------------------------------------------------------------
   15. Gallery — the Press Room contact sheet.
       Captions are gone from the frames; album titles are headings instead.
   -------------------------------------------------------------------------- */
.gallery-page { background: var(--forest); color: var(--paper); }
.gallery-page h2.big { color: var(--paper); }
.gallery-page .eyebrow { color: rgba(242, 239, 231, .7); }
.gallery-page .rule-head {
  color: var(--melon);
  border-top-color: rgba(242, 239, 231, .22);
}

.sheet {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.sheet-preview { grid-template-columns: repeat(3, 1fr); }

.frame {
  display: block;
  position: relative;
  background: var(--paper);
  padding: 9px;
  border: 0;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
  transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
.frame:nth-child(3n) { transform: rotate(1.2deg); }
.frame:nth-child(4n) { transform: rotate(-1.4deg); }
.frame:hover,
.frame:focus-visible {
  transform: rotate(0) scale(1.04);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .45);
  z-index: 5;
}
.frame img {
  width: 100%; height: 100%;
  object-fit: cover;
  aspect-ratio: 1;
  filter: grayscale(.12) contrast(1.04);
  transition: filter .3s var(--ease-out);
}
.frame:hover img { filter: none; }

/* Lightbox */
.lb {
  position: fixed;
  inset: 0;
  z-index: 800;
  background: rgba(8, 8, 7, .95);
  display: none;
  place-items: center;
  padding: 40px;
}
.lb.on { display: grid; }
.lb img { max-width: 92vw; max-height: 84vh; object-fit: contain; }
.lb button {
  position: absolute;
  background: transparent;
  border: 1px solid rgba(242, 239, 231, .5);
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: 12px;
  padding: 10px 15px;
  cursor: pointer;
  transition: background .2s, color .2s;
}
.lb button:hover { background: var(--paper); color: var(--ink); }
.lb .lb-close { top: 24px; right: 24px; }
.lb .lb-prev  { left: 24px;  top: 50%; transform: translateY(-50%); }
.lb .lb-next  { right: 24px; top: 50%; transform: translateY(-50%); }

/* --------------------------------------------------------------------------
   15b. Gallery page — rebuilt 9/15.

        A pink hero where a band of real photographs drifts sideways along a
        centre line under a huge script title (the ALET and Pictura
        references), then a swipeable index of albums, then every album as a
        spread — one large photograph and a strip of thumbnails that swap it
        (Amy Currell, Giulia).

        Deliberately unlike the schedule head, which she did not want echoed:
        no toile, no serif capitals, no cut-out melons. Photographs and
        script, centred. The contact-sheet .sheet / .frame rules above stay,
        because the home page preview still uses them.
   -------------------------------------------------------------------------- */
/* The ground here was melon pink until 9/15, when Michelle asked for the
   rind. The photograph of the skin is busy, so two scrims go over it: a
   darkening one so cream type holds, and a melon soft-light so the green
   belongs to the palette rather than fighting it. */
.ghero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  min-height: clamp(620px, 90vh, 900px);
  /* 9/16: the rind is gone ("that background is horrible" — Michelle). The
     ground is bg16, gold-edged wedges on blush, under a light paper veil that
     is strongest in the middle where the title crosses the photographs. The
     type on it went from cream to ink and red. */
  background:
    radial-gradient(80% 64% at 50% 46%, rgba(252, 249, 245, .74), rgba(252, 249, 245, .5) 78%),
    var(--gallery-hero-img),
    var(--gallery-hero-bg);
  color: var(--ink);
}

.ghero-count {
  position: relative;
  z-index: 3;
  margin: clamp(26px, 3vw, 40px) 0 0;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
}
.ghero-count b {
  font-weight: 400;
  margin: 0 5px;
  padding: 3px 8px;
  background: var(--red);
  color: var(--paper);
}
.ghero-count span { margin: 0 6px; }

/* The drifting band. The track holds the photographs twice over and slides
   by exactly half its own width, so the loop has no seam. */
.ghero-band {
  position: absolute;
  left: 0; right: 0;
  top: 58%;
  z-index: 1;
  height: clamp(250px, 32vw, 400px);
  transform: translateY(-50%);
  display: flex;
  align-items: center;
}
.ghero-track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: gdrift 110s linear infinite;
}
.ghero:hover .ghero-track { animation-play-state: paused; }
@keyframes gdrift { to { transform: translateX(-50%); } }

/* Seven sizes and heights, repeating — the frames overlap one another the
   way the reference's do, and sit above and below the centre line. */
.gd {
  position: relative;
  flex: 0 0 auto;
  margin-right: clamp(-44px, -2.6vw, -18px);
  padding: 6px;
  background: var(--paper);
  background: #FFFFFF;
  box-shadow: 0 18px 40px rgba(12, 51, 32, .24);
}
.gd img { display: block; width: 100%; height: 100%; object-fit: cover; }
.gd-0 { width: clamp(140px, 14vw, 220px); height: clamp(180px, 18vw, 280px); transform: translateY(-16%); z-index: 2; }
.gd-1 { width: clamp(200px, 21vw, 320px); height: clamp(140px, 15vw, 230px); transform: translateY(14%);  z-index: 1; }
.gd-2 { width: clamp(110px, 10vw, 160px); height: clamp(110px, 10vw, 160px); transform: translateY(-40%); z-index: 3; }
.gd-3 { width: clamp(180px, 18vw, 280px); height: clamp(220px, 23vw, 350px); transform: translateY(4%);   z-index: 2; }
.gd-4 { width: clamp(96px, 8.6vw, 136px); height: clamp(124px, 11vw, 176px); transform: translateY(44%);  z-index: 4; }
.gd-5 { width: clamp(210px, 22vw, 330px); height: clamp(150px, 16vw, 240px); transform: translateY(-24%); z-index: 1; }
.gd-6 { width: clamp(130px, 12.5vw, 196px); height: clamp(170px, 16.5vw, 250px); transform: translateY(26%); z-index: 3; }

/* The title sits in the upper-left of the band. Script above and to the
   left, smaller; oversized capitals below, dominating — the same two-part
   pattern as the Schedule and Past Queens heroes (.sh-title / .pq-title), so
   the three heads read as one family. GALLERY runs ink rather than red, so
   the red stays a single accent (the script) instead of two competing reds.
   Both lines keep the white halo the single script word used, so they still
   hold over the photographs. */
.ghero-title {
  position: absolute;
  z-index: 6;
  left: clamp(16px, 5vw, 56px);
  top: 15%;   /* 9/26: was 20% — the bigger word keeps its head above the photographs */
  margin: 0;
  text-align: left;
  pointer-events: none;
}
.ghero-script {
  display: block;
  margin-left: clamp(2px, .6vw, 10px);
  font-family: var(--font-script);
  font-weight: 400;
  font-size: clamp(58px, 8.4vw, 132px);   /* 9/26: same as .sh-the on Schedule */
  line-height: .72;
  color: var(--red);
  text-shadow: 0 4px 0 #FFFFFF, 0 14px 34px rgba(252, 249, 245, .9);
}
.ghero-word {
  display: block;
  margin-top: -.05em;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(66px, 14.2vw, 204px);   /* 9/26: same as .sh-word on Schedule */
  line-height: .86;
  letter-spacing: -.01em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ink);
  text-shadow: 0 5px 0 #FFFFFF, 0 22px 50px rgba(252, 249, 245, .9);
}

.ghero-foot {
  position: relative;
  z-index: 7;
  margin-top: auto;
  padding: 0 var(--gutter) clamp(16px, 2vw, 24px);
  text-align: center;
}
.ghero-sub {
  max-width: 44ch;
  margin: 0 auto 14px;
  font-family: var(--font-display);
  font-size: clamp(18px, 1.7vw, 24px);
  line-height: 1.3;
}
.ghero-go {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1.5px solid var(--red);
  padding-bottom: 3px;
}
.ghero-go i { display: inline-block; font-style: normal; animation: gnudge 1.6s var(--ease-out) infinite; }
@keyframes gnudge { 50% { transform: translateY(4px); } }

.ghero-wave {
  position: relative;
  z-index: 3;
  display: block;
  width: 100%;
  height: 64px;
  margin-bottom: -1px;
}
.ghero-wave .w-accent { fill: var(--melon); }
.ghero-wave .w-top    { fill: var(--seed-bg); }

/* The albums — index rail, then spreads. Green until 9/15; the ground is
   the seeded blush now, so everything on it reads ink instead of cream and
   the accents moved off melon, which had nothing to push against. */
.gpage {
  background: var(--seed-img), var(--seed-bg);
  color: var(--ink);
  padding: clamp(40px, 5vw, 70px) 0 var(--section);
}

.ga-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 24px;
  margin-bottom: 18px;
  padding-top: 14px;
  border-top: 1px solid rgba(17, 17, 16, .2);
}
.ga-bar .rule-head { margin: 0; padding: 0; border: 0; color: var(--red); }
.ga-hint {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(17, 17, 16, .6);
}
.ga-hint i { font-style: normal; }

.ga-rail {
  list-style: none;
  margin: 0 0 clamp(64px, 8vw, 110px);
  padding: 6px 0 18px;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: clamp(140px, 12.5vw, 176px);
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  scrollbar-color: var(--melon) transparent;
}
.ga-chip { display: block; scroll-snap-align: start; color: var(--ink); text-decoration: none; }
.ga-chip-img {
  position: relative;
  display: block;
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--rind);
  border: 1.5px solid rgba(17, 17, 16, .22);
  transition: border-color .2s, transform .25s var(--ease-out);
}
.ga-chip-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease-out); }
.ga-chip:hover .ga-chip-img,
.ga-chip:focus-visible .ga-chip-img { border-color: var(--red); transform: translateY(-4px); }
.ga-chip:hover .ga-chip-img img { transform: scale(1.08); }
.ga-n {
  position: absolute;
  left: 0; top: 0;
  padding: 4px 7px;
  background: var(--red);
  color: #FFFFFF;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .1em;
}
.ga-t {
  display: -webkit-box;
  margin-top: 9px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: .02em;
  text-transform: uppercase;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* A spread: stage and info side by side, mirrored on every other album.
   Each takes its accent — number, shadow, active thumbnail — from --sp. */
.spread {
  --sp: var(--red);
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(28px, 4.4vw, 70px);
  align-items: center;
  scroll-margin-top: calc(var(--nav-h, 110px) + 24px);
}
.spread + .spread { margin-top: clamp(76px, 9vw, 132px); }
.spread:nth-child(even) { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.spread:nth-child(even) .sp-stage-wrap { order: 2; }
.sp-a1 { --sp: var(--forest); }
.sp-a2 { --sp: var(--melon); }
.sp-a3 { --sp: var(--rind); }

.sp-stage {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  padding: 0;
  overflow: hidden;
  cursor: zoom-in;
  background: var(--rind);
  border: 8px solid #FFFFFF;
  box-shadow: 14px 14px 0 var(--sp), 0 2px 0 rgba(17, 17, 16, .1);
}
/* Behind every photograph, a blurred copy of itself fills the frame — so a
   portrait, or one of the small 206px originals, sits in colour rather than
   in empty bars. */
.sp-blur {
  position: absolute;
  inset: -30px;
  width: calc(100% + 60px);
  height: calc(100% + 60px);
  object-fit: cover;
  filter: blur(26px) saturate(1.2);
  opacity: .75;
}
.sp-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: opacity .25s var(--ease-out), transform .6s var(--ease-out);
}
.sp-stage:not(.is-small):hover .sp-img { transform: scale(1.02); }
.sp-stage.is-swapping .sp-img { opacity: 0; }
.sp-stage.is-small .sp-img {
  inset: auto;
  left: 50%; top: 50%;
  width: auto; height: auto;
  max-width: 58%; max-height: 70%;
  transform: translate(-50%, -50%);
  border: 5px solid #FFFFFF;
  box-shadow: 0 18px 40px rgba(6, 26, 16, .3);
}
.sp-zoom {
  position: absolute;
  right: 12px; bottom: 12px;
  padding: 6px 9px;
  background: #FFFFFF;
  border: 1px solid var(--ink);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .25s, transform .25s var(--ease-out);
}
.sp-stage:hover .sp-zoom,
.sp-stage:focus-visible .sp-zoom { opacity: 1; transform: none; }

.sp-counter {
  margin: 26px 0 0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .18em;
  color: rgba(17, 17, 16, .6);
}
.sp-counter b {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 22px;
  color: var(--ink);
}

.sp-num {
  display: block;
  margin-bottom: 14px;
  font-family: var(--font-display);
  font-size: clamp(56px, 6vw, 92px);
  line-height: .85;
  color: var(--sp);
}
.sp-title {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(24px, 2.4vw, 36px);
  line-height: 1.08;
  text-transform: uppercase;
  color: var(--ink);
}
.sp-note {
  margin: 0 0 6px;
  font-size: 15.5px;
  line-height: 1.55;
  color: rgba(17, 17, 16, .7);
}
.sp-count {
  margin: 0 0 20px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  /* ink, not red: at 10.5px red on the blush ground falls under 4.5:1 */
  color: rgba(17, 17, 16, .6);
}
.sp-strip {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
  gap: 8px;
  max-width: 440px;
}
.sp-thumb {
  position: relative;
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  overflow: hidden;
  cursor: pointer;
  background: var(--rind);
  opacity: .6;
  outline: 2px solid transparent;
  outline-offset: 3px;
  transition: opacity .2s, outline-color .2s, transform .2s var(--ease-out);
}
.sp-thumb img { width: 100%; height: 100%; object-fit: cover; }
.sp-thumb:hover { opacity: 1; transform: translateY(-2px); }
.sp-thumb.is-on { opacity: 1; outline-color: var(--sp); }
.sp-thumb:focus-visible { opacity: 1; outline-color: var(--ink); }
.sp-single .sp-strip { display: none; }

.sp-top {
  display: inline-block;
  margin-top: 24px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(17, 17, 16, .58);
  text-decoration: none;
  border-bottom: 1px solid rgba(17, 17, 16, .26);
}
.sp-top i { font-style: normal; }
.sp-top:hover { color: var(--red); border-bottom-color: var(--red); }

@media (max-width: 900px) {
  .ghero-band { top: 52%; }
  .spread,
  .spread:nth-child(even) { grid-template-columns: minmax(0, 1fr); }
  .spread:nth-child(even) .sp-stage-wrap { order: 0; }
  .sp-stage { border-width: 6px; box-shadow: 8px 8px 0 var(--sp); }
}
@media (max-width: 600px) {
  .ghero { min-height: 560px; }
  .ga-rail { grid-auto-columns: 128px; }
}

/* --------------------------------------------------------------------------
   16. Video

       Home page: the three most recent, as cards that lift on hover and link
       through to the library. The video page itself is 16b, below.
   -------------------------------------------------------------------------- */
.strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.vid {
  display: block;
  border: 2px solid var(--ink);
  background: #fff;
  text-decoration: none;
  color: var(--ink);
  transition: transform .32s var(--ease-out), box-shadow .32s var(--ease-out);
}
.vid:hover,
.vid:focus-visible {
  transform: translateY(-8px);
  box-shadow: 0 20px 42px rgba(17, 17, 16, .22);
}

.vid-shot {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--paper-3);
  aspect-ratio: 16 / 9;
}
.vid-shot img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .55s var(--ease-out);
}
.vid:hover .vid-shot img,
.vid:focus-visible .vid-shot img { transform: scale(1.06); }

/* Play marker — a red disc with a paper triangle punched out of it. */
.vid-play {
  position: absolute;
  left: 50%; top: 50%;
  width: 62px; height: 62px;
  margin: -31px 0 0 -31px;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
  transition: transform .32s var(--ease-out), background .32s var(--ease-out);
}
.vid-play::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  margin: -10px 0 0 -6px;
  border-left: 17px solid var(--paper);
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
}
.vid:hover .vid-play,
.vid:focus-visible .vid-play { transform: scale(1.12); background: #c01d28; }

/* 9/16: Prata, not heavy Inter capitals — the one face on the home page
   that matched nothing else. The database titles are in capitals already. */
.vid-label {
  display: block;
  padding: 15px 17px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.3;
  letter-spacing: .02em;
  border-top: 2px solid var(--ink);
}

/* --------------------------------------------------------------------------
   16b. Video page — rebuilt 9/15.

        The newest QUEEN_VIDEOS row fills the window, muted and looping, the
        moment the page opens. Browsers only allow sound after a click, which
        is what the Sound on button is for. The association's logo sits in
        the corner like a television channel's mark, and the frame carries
        viewfinder corners and a recording light.

        Below: a pink ticker, then every volume as a colour block card on
        green, in a grid whose cards take turns being wide and narrow. A card
        opens a player window instead of the page loading thirteen embeds.
   -------------------------------------------------------------------------- */
.vhero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: max(580px, calc(100vh - var(--nav-h, 110px)));
  min-height: max(580px, calc(100svh - var(--nav-h, 110px)));
  background: var(--forest);
  color: var(--paper);
}

.vhero-media { position: absolute; inset: 0; z-index: 0; overflow: hidden; container-type: size; }
.vhero-poster {
  position: absolute;
  inset: -40px;
  width: calc(100% + 80px);
  height: calc(100% + 80px);
  object-fit: cover;
  filter: blur(10px) saturate(1.15);
}
.vhero.is-still .vhero-poster { inset: 0; width: 100%; height: 100%; filter: none; object-position: 50% 30%; }

/* Cover-fit a 16:9 film to whatever shape the hero is, then push it slightly
   past the edges so YouTube's own title bar stays out of sight. It fades in
   only once the player reports that it is actually playing. */
.vhero-frame {
  position: absolute;
  left: 50%; top: 50%;
  width: 100%;
  height: 100%;
  width: max(100cqw, 177.78cqh);
  height: max(100cqh, 56.25cqw);
  border: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(1.18);
  opacity: 0;
  transition: opacity 1.4s var(--ease-out);
}
.vhero.is-live .vhero-frame { opacity: 1; }

.vhero-wash {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(0deg, rgba(12, 51, 32, .94) 0%, rgba(12, 51, 32, .55) 32%, rgba(12, 51, 32, 0) 60%),
    linear-gradient(180deg, rgba(12, 51, 32, .55) 0%, rgba(12, 51, 32, 0) 24%),
    linear-gradient(90deg, rgba(12, 51, 32, .45) 0%, rgba(12, 51, 32, 0) 52%);
}
/* A breath of melon laid over the footage, so the film belongs to the palette. */
.vhero-wash::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--melon);
  mix-blend-mode: soft-light;
  opacity: .3;
}

.vhero-marks { position: absolute; inset: clamp(14px, 2vw, 28px); z-index: 2; pointer-events: none; }
.vhero-marks i {
  position: absolute;
  width: clamp(22px, 2.6vw, 40px);
  height: clamp(22px, 2.6vw, 40px);
  border: 0 solid rgba(242, 239, 231, .85);
}
.vhero-marks i:nth-child(1) { left: 0;  top: 0;    border-left-width: 2px;  border-top-width: 2px; }
.vhero-marks i:nth-child(2) { right: 0; top: 0;    border-right-width: 2px; border-top-width: 2px; }
.vhero-marks i:nth-child(3) { left: 0;  bottom: 0; border-left-width: 2px;  border-bottom-width: 2px; }
.vhero-marks i:nth-child(4) { right: 0; bottom: 0; border-right-width: 2px; border-bottom-width: 2px; }

.vhero-rec {
  position: absolute;
  left: clamp(40px, 4.4vw, 72px);
  top: clamp(34px, 3.6vw, 56px);
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
}
.vhero-rec i {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 0 4px rgba(216, 35, 47, .3);
  animation: vrec 1.6s ease-in-out infinite;
}
@keyframes vrec { 50% { opacity: .25; } }

/* The channel mark: the association's logo in a paper disc, ringed the way
   the footer medallion is. */
.vhero-bug {
  position: absolute;
  right: clamp(40px, 4.4vw, 72px);
  top: clamp(34px, 3.6vw, 56px);
  z-index: 3;
  display: grid;
  place-items: center;
  width: clamp(92px, 9vw, 138px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--paper);
  box-shadow: 0 0 0 5px var(--forest), 0 0 0 7px rgba(242, 239, 231, .7), 0 18px 40px rgba(6, 26, 16, .45);
}
.vhero-bug img { width: 78%; height: auto; }

.vhero-inner {
  position: relative;
  z-index: 3;
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 26px 44px;
  padding-top: 190px;
  padding-bottom: clamp(56px, 6vw, 88px);
}
/* container-type makes the title's own column measurable (cqi below). */
.vhero-title { margin: 0; line-height: .84; container-type: inline-size; }
.vt-script {
  position: relative;
  z-index: 1;
  display: block;
  margin: 0 0 -.02em clamp(4px, 1vw, 16px);
  font-family: var(--font-script);
  font-size: clamp(62px, 8vw, 132px);
  line-height: .7;
  color: var(--melon);
}
.vt-word {
  display: flex;
  overflow: hidden;              /* the letters rise up out of this */
  padding-top: .16em;
  margin-top: -.16em;
  font-family: var(--font-display);
  font-weight: 400;
  /* Seven capitals have to fit the column beside the Now playing panel —
     any larger and the mask that lets them rise clips the Y. */
  font-size: clamp(46px, 10.2vw, 150px);
  /* 9/27: the Y was still clipped at some window widths (Michelle), because
     vw follows the window while the column is the window minus the panel.
     GALLERY measures 4.95em, so 19% of the column's own width (cqi) sets it
     at ~94% of the column whatever the window does. The line above stays as
     the fallback for browsers without container units. */
  font-size: min(clamp(46px, 10.2vw, 150px), 19cqi);
  line-height: .9;
  letter-spacing: -.005em;
  text-transform: uppercase;
  color: var(--paper);
}
.vt-ch { display: inline-block; }

.vhero-now {
  width: min(360px, 100%);
  padding: 18px 20px 20px;
  background: rgba(12, 51, 32, .66);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  border: 1px solid rgba(242, 239, 231, .26);
  border-top: 4px solid var(--melon);
}
.vn-label {
  display: block;
  margin-bottom: 8px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--melon);
}
.vn-title {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(20px, 1.8vw, 26px);
  line-height: 1.1;
  text-transform: uppercase;
}
.vn-vol {
  display: block;
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(242, 239, 231, .75);
}
.vhero-ctrl { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.vbtn {
  padding: 10px 13px;
  background: transparent;
  border: 1.5px solid rgba(242, 239, 231, .7);
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background .2s, color .2s, border-color .2s;
}
.vbtn:hover,
.vbtn:focus-visible,
.vbtn[aria-pressed="true"] { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.vbtn-red { background: var(--red); border-color: var(--red); }
.vbtn-red:hover,
.vbtn-red:focus-visible { background: #c01d28; border-color: #c01d28; color: var(--paper); }

.vhero-down {
  position: absolute;
  left: 50%;
  bottom: clamp(18px, 2vw, 30px);
  z-index: 3;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(242, 239, 231, .82);
  text-decoration: none;
}
.vhero-down i { display: inline-block; font-style: normal; animation: gnudge 1.6s var(--ease-out) infinite; }

/* The ticker between the film and the library. */
/* 9/16: made to match the smaller ticker above the footer, as Michelle asked
   — the same paper band, the same small spaced capitals, red marks. It was a
   tall melon-pink band in big Prata capitals. */
.vband {
  overflow: hidden;
  background: var(--paper-3);
  color: var(--ink);
  border-top: 1px solid var(--hair);
  border-bottom: 1px solid var(--hair);
}
.vband-track { display: flex; width: max-content; animation: vband 46s linear infinite; }
.vband-track span {
  flex: 0 0 auto;
  padding: 13px 0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  white-space: nowrap;
}
.vband-track b { margin: 0 22px; font-weight: 400; color: var(--red); }
@keyframes vband { to { transform: translateX(-50%); } }

/* The library. Green until 9/15, when Michelle moved it onto waterbg.jpg —
   white, with a river of cut cubes running down the right. The veil over it
   is heaviest on the left, where the heading sits, and thins toward the
   cubes so they stay visible. */
.vlib {
  position: relative;
  overflow: hidden;
  padding: clamp(70px, 8vw, 120px) 0 var(--section);
  /* 9/16: bg14 under a paper veil, heaviest on the left behind the heading —
     the Past Queens recipe. The old cubes ground (waterbg.jpg) was retired
     here before this; the --water-img token itself is gone as of 9/22. */
  background:
    linear-gradient(95deg,
      rgba(252, 249, 245, .88) 0%,
      rgba(252, 249, 245, .66) 42%,
      rgba(252, 249, 245, .3) 78%,
      rgba(252, 249, 245, .2) 100%),
    var(--video-head-img),
    var(--blush-bg);
  color: var(--ink);
}

.vgrid {
  position: relative;
  z-index: 2;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(16px, 1.8vw, 26px);
}
.vs-4  { grid-column: span 4; }
.vs-5  { grid-column: span 5; }
.vs-7  { grid-column: span 7; }
.vs-8  { grid-column: span 8; }
.vs-12 { grid-column: span 12; }

.vc-red   { --vc: var(--red);   --vc-ink: #FFFFFF; }
.vc-melon { --vc: var(--melon); --vc-ink: var(--ink); }
.vc-tan   { --vc: var(--tan);   --vc-ink: var(--ink); }
.vc-forest { --vc: var(--forest); --vc-ink: var(--paper); }
.vc-rind  { --vc: var(--rind);  --vc-ink: var(--paper); }

.vcard-link {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--vc);
  color: var(--vc-ink);
  text-decoration: none;
  border: 1.5px solid var(--forest);
  box-shadow: 8px 8px 0 rgba(12, 51, 32, .82);
  transition: transform .28s var(--ease-out), box-shadow .28s var(--ease-out);
}
.vcard-link:hover,
.vcard-link:focus-visible {
  transform: translate(-4px, -4px);
  box-shadow: 12px 12px 0 var(--forest);
}

/* YouTube's hqdefault still is 4:3 with bars above and below a 16:9 film;
   cover-fitting it into 16:9 crops the bars away. */
.vcard-shot {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--rind);
  border-bottom: 1.5px solid var(--forest);
}
.vcard-shot img {
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.02);
  transition: transform .6s var(--ease-out);
}
.vcard-link:hover .vcard-shot img,
.vcard-link:focus-visible .vcard-shot img { transform: scale(1.08); }

.vcard-play {
  position: absolute;
  left: 14px; bottom: 14px;
  width: 54px; height: 54px;
  background: var(--paper);
  border: 1.5px solid var(--forest);
  box-shadow: 4px 4px 0 var(--forest);
  transition: background .2s, transform .2s var(--ease-out);
}
.vcard-play::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  margin: -9px 0 0 -5px;
  border-left: 15px solid var(--ink);
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
}
.vcard-link:hover .vcard-play,
.vcard-link:focus-visible .vcard-play { background: var(--red); transform: translate(-2px, -2px); }
.vcard-link:hover .vcard-play::after,
.vcard-link:focus-visible .vcard-play::after { border-left-color: var(--paper); }

.vcard-new {
  position: absolute;
  top: 12px; right: 12px;
  padding: 5px 8px;
  background: var(--forest);
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.vcard-meta {
  flex: 1;
  display: flex;
  align-items: flex-end;
  gap: 18px;
  padding: 16px 18px 18px;
}
.vcard-num {
  display: flex;
  flex-direction: column;
  font-family: var(--font-display);
  font-size: clamp(58px, 5.4vw, 88px);
  line-height: .78;
  letter-spacing: -.02em;
}
.vcard-num small {
  margin-bottom: 8px;
  font-family: var(--font-mono);
  font-size: 10px;
  line-height: 1;
  letter-spacing: .22em;
  text-transform: uppercase;
}
.vs-7 .vcard-num,
.vs-8 .vcard-num,
.vs-12 .vcard-num { font-size: clamp(76px, 7.6vw, 128px); }

.vcard-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding-bottom: 2px; }
.vcard-name {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.vcard-desc {
  display: -webkit-box;
  font-size: 13.5px;
  line-height: 1.45;
  opacity: .85;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.vcard-cta {
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.vcard-cta i { display: inline-block; font-style: normal; transition: transform .25s var(--ease-out); }
.vcard-link:hover .vcard-cta i { transform: translateX(4px); }

/* The player window */
.vplayer {
  position: fixed;
  inset: 0;
  z-index: 720;
  display: grid;
  place-items: center;
  padding: clamp(14px, 4vw, 48px);
  background: rgba(6, 26, 16, .86);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity .3s var(--ease-out);
}
.vplayer[hidden] { display: none; }
.vplayer.on { opacity: 1; }
.vplayer-panel {
  width: min(1100px, 100%);
  background: var(--forest);
  border: 1.5px solid rgba(242, 239, 231, .35);
  box-shadow: 14px 14px 0 var(--melon);
  transform: translateY(20px) scale(.98);
  transition: transform .38s var(--ease-out);
}
.vplayer.on .vplayer-panel { transform: none; }
.vplayer-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 10px 10px 18px;
  color: var(--paper);
}
.vplayer-title {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.vplayer-close {
  flex: 0 0 auto;
  width: 44px; height: 44px;
  display: grid;
  place-items: center;
  background: transparent;
  border: 1.5px solid rgba(242, 239, 231, .6);
  color: var(--paper);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  transition: background .2s, color .2s;
}
.vplayer-close:hover,
.vplayer-close:focus-visible { background: var(--paper); color: var(--ink); }
.vplayer-screen { position: relative; aspect-ratio: 16 / 9; background: var(--rind); }
.vplayer-screen iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

@media (max-width: 900px) {
  .vhero-inner { grid-template-columns: minmax(0, 1fr); padding-top: 170px; }
  .vgrid .vcard { grid-column: span 6; }
}
@media (max-width: 600px) {
  .vgrid .vcard { grid-column: 1 / -1; }
  .vhero-down { display: none; }
  .vhero-rec { font-size: 9.5px; letter-spacing: .16em; }
  .vhero-inner { padding-bottom: 40px; }
}

/* --------------------------------------------------------------------------
   17. Be Our Next Queen — the red block, with a cut-out melon filling the
       empty right-hand side.
   -------------------------------------------------------------------------- */
/* Centred on itself now, over one very large melon rather than a cut-out
   standing beside the words. The melon is a photograph, so it needs a wash
   over it before cream type will hold. */
#compete {
  position: relative;
  background: var(--red);
  color: var(--paper);
  overflow: hidden;
  text-align: center;
}
#compete p { max-width: 58ch; margin-left: auto; margin-right: auto; font-size: 16.5px; }
#compete a:not(.cta) { color: var(--paper); }

/* Was one giant drifting melon photograph; since 9/22 it is Sharon's own
   film, placecrownvid2.mp4 — the same clip that used to run behind the
   Contact head, moved here on her note. The melon stays underneath as the
   poster: it shows while the video loads and stands in on its own below
   700px and under reduced motion, the way the Contact head used to. */
.compete-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.compete-bg img,
.compete-bg video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
}
/* The overlay sits on the film, under the words. */
.compete-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(140, 18, 26, .55);
}
@media (max-width: 700px) {
  /* Five megabytes is not a fair thing to send down a phone — the poster
     melon stands in, same rule the Contact head used to follow. */
  .compete-bg video { display: none; }
}

.compete-inner {
  position: relative;
  z-index: 1;
  max-width: 860px;
  margin: 0 auto;
}

/* A different face for this one heading, as she asked — the script that sets
   the queen's name in the hero. It is a question now, not a label. */
/* 9/16: the .kh-title heading every other block uses, in paper on the red.
   Centred, because this block is centred. */
.compete-title { margin: 0 0 30px; }
.compete-title .kh-script {
  margin-left: 0;
  color: var(--paper);
  transform-origin: center bottom;
}
.compete-title .kh-word {
  justify-content: center;
  font-size: clamp(40px, 6.4vw, 100px);
  color: var(--paper);
}

.cta-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 300px));   /* 9/22: three — Online Application joined */
  justify-content: center;
  gap: 20px;
  margin-top: 38px;
}
@media (max-width: 1100px) and (min-width: 901px) {
  .cta-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* 9/28: the forest card's shape in the ticket's colours. Three mockups were
   shown that day (ticket stubs / forest cards / watermelon slice); she kept
   the ticket's paper, forest title and red script, but not the ticket shape,
   and asked for the forest card's instead: a plain rectangle with a thin frame
   set inside it, a small label across the top, and a round arrow button in the
   bottom corner. On hover the card rises, the frame draws in and turns red,
   and the arrow turns forest and tips up.

   The grid is let out wider than .compete-inner (860px) so "INFORMATION" and
   "APPLICATION" sit on one line at a size that reads. */
.cta-grid {
  width: min(1060px, calc(100vw - 48px));   /* 48, not 32: 100vw counts the scrollbar */
  position: relative;
  left: 50%;
  translate: -50% 0;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px;
}
.cta {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 270px;
  padding: 32px 28px 26px;
  text-align: left;
  text-decoration: none;
  background: var(--paper);
  color: var(--forest);
  box-shadow: 0 18px 40px rgba(60, 8, 12, .4);
  transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out);
}
/* The frame set inside the card. */
.cta::before {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(12, 51, 32, .3);
  pointer-events: none;
  transition: inset .35s var(--ease-out), border-color .35s var(--ease-out);
}
.cta:hover,
.cta:focus-visible {
  transform: translateY(-8px);
  box-shadow: 0 28px 50px rgba(60, 8, 12, .5);
  color: var(--forest);
  outline: none;
}
.cta:hover::before,
.cta:focus-visible::before { inset: 12px; border-color: var(--red); }

.cta-label {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--dim);
}
.cta-kicker {
  display: block;
  margin-top: 14px;
  font-family: var(--font-script);
  font-size: 36px;
  line-height: .85;
  color: var(--red);
}
.cta b {
  display: block;
  font-family: var(--font-display);
  font-weight: 400;              /* Prata has no bold — never ask it for one */
  font-size: clamp(22px, 2.4vw, 32px);
  text-transform: uppercase;
  letter-spacing: .01em;
  line-height: 1.02;
  margin: 4px 0 12px;
}
.cta-desc {
  display: block;
  font-size: 14.5px;
  color: var(--dim);
  line-height: 1.5;
  max-width: 26ch;
}
.cta-go {
  margin-top: auto;
  align-self: flex-end;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--red);
  color: var(--paper);
  display: grid;
  place-items: center;
  font-style: normal;
  font-size: 19px;
  transition: background .3s var(--ease-out), transform .35s var(--ease-out);
}
.cta:hover .cta-go,
.cta:focus-visible .cta-go { background: var(--forest); transform: rotate(-45deg); }

/* The application card if $applicationUrl in index.php is ever emptied:
   the same card, paler and still, with no arrow. */
.cta.cta-soon { cursor: default; opacity: .8; }
.cta.cta-soon:hover { transform: none; box-shadow: 0 18px 40px rgba(60, 8, 12, .4); }
.cta.cta-soon:hover::before { inset: 8px; border-color: rgba(12, 51, 32, .3); }

@media (max-width: 1100px) and (min-width: 901px) {
  .cta-grid { gap: 20px; }
  .cta { padding: 28px 22px 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .cta, .cta::before, .cta-go { transition: none; }
  .cta:hover, .cta:focus-visible { transform: none; }
}

/* --------------------------------------------------------------------------
   18. Past Queens — rebuilt 9/15.

       Photographs only for now. The head was centred on paper until 9/15,
       when Michelle asked for bglightandwhite.jpg behind it and said the
       centring did not look like the rest of the site. It is the schedule
       head's arrangement now — the title and the words on the left, three
       cut-out melons drifting on the right — without borrowing the toile or
       the ticket, which belong to that page.

       Then the carousel on green after the eyka reference: the centre
       photograph stands taller than its neighbours, the run loops forever,
       and it moves on by itself every few seconds.

       Without JavaScript the track is simply a row you can scroll sideways;
       .is-ready is what switches on the sliding version.
   -------------------------------------------------------------------------- */
.pq-head {
  position: relative;
  overflow: hidden;
  /* Bottom padding used to be clamp(30px, 3.6vw, 54px) here, which landed
     *after* the wave (the wave is this header's last child) — the bloom
     ground kept showing for another 30-54px below the curve before the
     carousel's own background started, reading as a stray flat band between
     the wave and the green. Zero, matching .sched-hero and .ct-head, which
     both already put the wave flush against the header's own edge. */
  padding: clamp(46px, 5.4vw, 84px) 0 0;
  /* A paper veil over the line-art melons, heaviest on the left where the
     words are. Raise the first two numbers to fade the pattern further. */
  background:
    linear-gradient(95deg,
      rgba(252, 249, 245, .88) 0%,
      rgba(252, 249, 245, .66) 42%,
      rgba(252, 249, 245, .2) 78%,
      rgba(252, 249, 245, .05) 100%),
    var(--bloom-img),
    var(--bloom-bg);
}
.pq-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  align-items: center;
}
.pq-copy {
  grid-column: 1 / 8;
  position: relative;
  z-index: 2;
}
.pq-crown {
  width: clamp(54px, 5vw, 74px);
  margin-bottom: clamp(10px, 1.2vw, 18px);
  color: var(--ink);
}
.pq-title { margin: 0; line-height: .9; }
.pq-script {
  position: relative;
  z-index: 1;
  display: block;
  margin-left: clamp(2px, .6vw, 10px);
  font-family: var(--font-script);
  font-weight: 400;
  font-size: clamp(54px, 6.4vw, 104px);
  line-height: .72;
  color: var(--red);
  transform-origin: left bottom;
}
.pq-word {
  display: flex;
  overflow: hidden;              /* the letters rise out of this */
  padding-top: .16em;            /* Prata's capitals overshoot a .9 line box */
  margin-top: -.16em;
  padding-bottom: .04em;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(56px, 9.4vw, 148px);
  line-height: .9;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--ink);
}
.pq-lead {
  max-width: 46ch;
  margin: clamp(20px, 2.4vw, 30px) 0 0;
  padding-left: 18px;
  border-left: 2px solid var(--red);
  font-size: clamp(15.5px, 1.3vw, 17.5px);
  line-height: 1.65;
  color: rgba(17, 17, 16, .76);
}
.pq-tally {
  margin: clamp(16px, 1.8vw, 24px) 0 0;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(17, 17, 16, .6);
}
.pq-tally b {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 30px;
  letter-spacing: 0;
  color: var(--red);
  vertical-align: -.12em;
  margin-right: 7px;
}

/* The melons. Same idea as the schedule head's, different fruit, so the two
   pages rhyme without repeating. data-depth is how far each drifts on scroll
   — see initPageHead() in main.js. */
/* Below the head, the carousel stands on the sugar ground (bg14) rather than
   flat forest since 9/22 — so this wave breaks into that pink, not green. */
.pq-head .sh-wave { margin: clamp(24px, 3vw, 44px) 0 -1px; }
.pq-head .sh-wave .w-paper { fill: var(--sugar-bg); }

.pq-art {
  grid-column: 8 / -1;
  grid-row: 1;
  position: relative;
  min-height: clamp(280px, 30vw, 420px);
}
/* Two wedges low and wide, two triangles above them, cubes scattered top
   right — a different arrangement from the schedule's whole melon, so the
   two heads rhyme rather than repeat. */
.pq-m1 { width: 82%; right: -6%; bottom: 4%; }
.pq-m2 { width: 34%; left: 2%;   top: 8%; }
.pq-m3 { width: 26%; right: 4%;  top: -4%; }

@media (max-width: 900px) {
  .pq-grid { grid-template-columns: minmax(0, 1fr); }
  .pq-copy { grid-column: 1; grid-row: 1; }
  .pq-art  {
    grid-column: 1;
    grid-row: 2;
    min-height: 0;
    height: clamp(210px, 48vw, 320px);
    margin-top: 18px;
  }
  .pq-m1 { width: 62%; right: 0;  bottom: 0; }
  .pq-m2 { width: 30%; left: 4%;  top: 6%; }
  .pq-m3 { width: 22%; right: 2%; top: -6%; }
}



.pq {
  --pq-w: clamp(240px, 27vw, 380px);
  --pq-gap: clamp(16px, 2.2vw, 30px);
  position: relative;
  overflow: hidden;
  padding: clamp(48px, 6vw, 84px) 0 clamp(60px, 7vw, 100px);
  /* Was flat forest through 9/16; she asked for a pattern in its place on
     9/22 — bg15 first, then bg14 — which flips this band from dark to
     light — ink type now, not paper, the same swap the gallery spreads made
     against seed1. */
  background: var(--sugar-img), var(--sugar-bg);
  color: var(--ink);
}
.pq-bar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: clamp(24px, 3vw, 40px);
}
.pq-count {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(17, 17, 16, .6);
}
.pq-count b {
  margin-right: 6px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(40px, 4vw, 60px);
  letter-spacing: 0;
  color: var(--red);
  vertical-align: -.12em;
}
.pq-ctrl { display: flex; align-items: center; gap: 10px; }
.pq-btn {
  min-width: 48px;
  height: 48px;
  padding: 0 14px;
  background: transparent;
  border: 1.5px solid rgba(17, 17, 16, .35);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .2s, color .2s, border-color .2s;
}
.pq-btn:hover,
.pq-btn:focus-visible { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* The big diagonal arrow from the reference. */
.pq-next {
  display: grid;
  place-items: center;
  width: clamp(64px, 6vw, 84px);
  height: clamp(64px, 6vw, 84px);
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
}
.pq-next svg {
  width: 100%; height: 100%;
  fill: none;
  stroke: var(--ink);
  stroke-width: 5;
  transition: transform .3s var(--ease-out), stroke .2s;
}
.pq-next:hover svg,
.pq-next:focus-visible svg { transform: translate(4px, -4px); stroke: var(--red); }

.pq-viewport { overflow-x: auto; padding-bottom: 20px; }
.pq.is-ready .pq-viewport { overflow: hidden; touch-action: pan-y; }

.pq-track {
  list-style: none;
  width: max-content;
  height: calc(var(--pq-w) * 1.34);
  margin: 0;
  padding: 0 var(--gutter);
  display: flex;
  align-items: flex-end;
  gap: var(--pq-gap);
}
.pq.is-ready .pq-track {
  padding: 0;
  transition: transform 1s var(--ease-out);
  will-change: transform;
}
.pq-track.no-anim,
.pq-track.no-anim .pq-card { transition: none !important; }

.pq-card {
  flex: 0 0 var(--pq-w);
  height: calc(var(--pq-w) * 1.02);
  overflow: hidden;
  background: var(--rind);
  cursor: pointer;
  transition: height 1s var(--ease-out), filter .6s var(--ease-out), box-shadow .6s var(--ease-out);
}
.pq.is-ready .pq-card:not(.is-active) { filter: saturate(.7) brightness(.8); }
.pq-card.is-active { height: calc(var(--pq-w) * 1.34); box-shadow: 10px 10px 0 var(--melon); }
.pq-card img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 22%;
  user-select: none;
}

@media (max-width: 700px) {
  .pq { --pq-w: 66vw; }
  .pq-bar { flex-wrap: wrap; }
}

/* --------------------------------------------------------------------------
   19. Contact page
   -------------------------------------------------------------------------- */
.contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
  gap: clamp(40px, 6vw, 84px);
  align-items: start;
}

.contact-form { max-width: 620px; }

.field { margin-bottom: 22px; }
.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.field label {
  display: block;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: 8px;
}
.field .req { color: var(--red); }

.field input,
.field textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: #FFFDF8;
  border: 1px solid var(--hair);
  border-bottom: 2px solid var(--ink);
  padding: 13px 15px;
  transition: border-color .2s, background .2s;
}
.field textarea { resize: vertical; min-height: 150px; }
.field input:focus,
.field textarea:focus {
  outline: none;
  background: #fff;
  border-bottom-color: var(--red);
}
.field input[aria-invalid="true"],
.field textarea[aria-invalid="true"] { border-bottom-color: var(--red); }
.field .err {
  margin: 7px 0 0;
  font-size: 13px;
  color: var(--red);
}

/* The honeypot. Off-screen rather than display:none so bots still see it. */
.trap {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

.contact-details p { margin: 0 0 24px; }
.contact-details a { text-decoration: none; border-bottom: 1px solid var(--red); }
.contact-details a:hover { background: var(--red); color: var(--paper); }
.contact-details .rule-head { margin-top: 34px; }
.contact-details .rule-head:first-child { margin-top: 0; }

/* The contact head — rebuilt 9/15 (part two), brought into line 9/26.

   Michelle, 9/26: the script under CONTACT could not be read, the title had
   to be two words with the script word on top like the other pages, and the
   thrown melons were "pretty crazy". So this head now uses the same recipe as
   the Schedule and Past Queens heads: the dew toile under a paper veil that is
   heaviest where the words are, ink capitals, red script above them, one
   cut-out melon to the right, the booking ticket over its foot, and the
   melon-pink wave to close. The dark scrim, duotone and glow that were built
   for the film are gone. Raise the first two veil numbers to fade the toile
   further. */
.ct-head {
  position: relative;
  overflow: hidden;
  padding: clamp(46px, 5.4vw, 84px) 0 0;
  text-align: left;
  color: var(--ink);
  background:
    linear-gradient(95deg,
      rgba(252, 249, 245, .9) 0%,
      rgba(252, 249, 245, .74) 44%,
      rgba(252, 249, 245, .3) 78%,
      rgba(252, 249, 245, .12) 100%),
    var(--dew-img),
    var(--dew-bg);
}

.ct-grid {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  align-items: end;
}

/* One melon, right-hand side, set behind the ticket so the two layer. */
.ct-art {
  grid-column: 8 / -1;
  grid-row: 1 / span 2;
  position: relative;
  z-index: 1;
  min-height: clamp(300px, 32vw, 460px);
  pointer-events: none;
}
.ct-whole {
  width: 92%;
  right: -4%;
  top: 0;
  filter: drop-shadow(0 22px 30px rgba(12, 51, 32, .22));
}

.ct-copy {
  grid-column: 1 / 8;
  grid-row: 2;
  align-self: end;
  position: relative;
  z-index: 3;
}
/* Same proportions as .sh-the / .sh-word on the Schedule page. */
.ct-title { grid-column: 1 / -1; grid-row: 1; position: relative; z-index: 3; margin: 0; line-height: .9; pointer-events: none; }
.ct-script {
  position: relative;
  z-index: 1;
  display: block;
  margin-left: clamp(2px, .6vw, 10px);
  font-family: var(--font-script);
  font-weight: 400;
  font-size: clamp(58px, 8.4vw, 132px);
  line-height: .72;
  color: var(--red);
  transform-origin: left bottom;
}
.ct-word {
  display: flex;
  overflow: hidden;              /* the letters rise out of this */
  padding-top: .16em;            /* Prata's capitals overshoot a .9 line box */
  margin-top: -.16em;
  padding-bottom: .04em;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(66px, 14.2vw, 204px);
  line-height: .9;
  letter-spacing: -.01em;
  text-transform: uppercase;
  color: var(--ink);
}
.ct-lead {
  max-width: 40ch;
  margin: clamp(18px, 2vw, 26px) 0 0;
  padding-left: 18px;
  border-left: 2px solid var(--red);
  font-size: clamp(15.5px, 1.3vw, 17.5px);
  line-height: 1.65;
  color: rgba(17, 17, 16, .78);
}
.ct-quick {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: clamp(22px, 2.6vw, 32px);
}
.ct-quick .on-paper-btn:hover,
.ct-quick .on-paper-btn:focus-visible { background: var(--forest); color: var(--paper); }

/* The booking ticket — the schedule head's stub, with the details on it. */
.ct-card {
  grid-column: 9 / -1;
  grid-row: 2;
  align-self: end;
  margin-top: clamp(18px, 2.2vw, 32px);   /* clear of CONTACT above it */
  position: relative;
  z-index: 4;
  display: grid;
  gap: 5px;
  padding: 22px 22px 18px;
  background: #FFFFFF;
  border: 1.5px solid var(--ink);
  box-shadow: 10px 10px 0 var(--red);
  color: var(--ink);
}
.ct-card::before {                 /* the perforation along the top */
  content: "";
  position: absolute;
  left: 14px; right: 14px; top: 7px;
  border-top: 2px dotted rgba(17, 17, 16, .28);
}
.ct-card-label {
  margin-top: 4px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--red);
}
.ct-card-name {
  font-family: var(--font-display);
  font-size: clamp(26px, 2.2vw, 34px);
  line-height: 1.05;
}
.ct-card-line {
  font-size: 14.5px;
  text-decoration: none;
  border-bottom: 1px solid var(--red);
  justify-self: start;
  word-break: break-word;
}
.ct-card-line:hover,
.ct-card-line:focus-visible { background: var(--red); color: #FFFFFF; }
.ct-card-note {
  margin-top: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--hair);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--dim);
}

.ct-head .sh-wave { position: relative; z-index: 3; margin: clamp(30px, 3.6vw, 52px) 0 -1px; }

@media (max-width: 1000px) {
  .ct-copy { grid-column: 1 / -1; grid-row: 2; }
  .ct-art  { grid-column: 1 / -1; grid-row: 3; min-height: clamp(220px, 44vw, 340px); margin-top: 20px; }
  .ct-whole { width: min(64vw, 440px); right: 0; top: 0; }
  .ct-card { grid-column: 1 / -1; grid-row: 3; align-self: end; justify-self: start; width: min(100%, 360px); }
}
@media (max-width: 700px) {
  .ct-card { box-shadow: 7px 7px 0 var(--red); }
  .ct-art  { display: none; }   /* the ticket would cover it; the toile carries the phone view */
  .ct-word { font-size: clamp(40px, 16.5vw, 66px); }   /* CONTACT is one row of letters and cannot wrap — it shrinks with the phone instead */
}



/* --------------------------------------------------------------------------
   20. Marquee ticker — a closing band above the footer now, not a fixed bar
   -------------------------------------------------------------------------- */
/* Paper rather than ink: sitting directly on top of the black footer, an
   ink band simply disappeared into it. */
.ticker {
  background: var(--paper-3);
  color: var(--ink);
  padding: 13px 0;
  overflow: hidden;
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  border-top: 1px solid var(--hair);
}
.ticker-track {
  display: inline-block;
  animation: ticker-slide 46s linear infinite;
  will-change: transform;
}
.ticker span { padding: 0 22px; }
.ticker b { color: var(--red); font-weight: 700; }
.ticker:hover .ticker-track { animation-play-state: paused; }

@keyframes ticker-slide {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* --------------------------------------------------------------------------
   21. Footer — "The Seal"

   Chosen 9/9 from four directions. Ceremonial and symmetrical: the
   association logo sits in a paper medallion with the hairlines running out
   of it to both edges, the way a letterhead is ruled. Everything is centred,
   which is deliberate — this is the one block on the site allowed to be
   perfectly symmetrical, and it is what makes it read as a seal rather than
   as another content row.

   Forest, not black, per the 9/7 rule. The old .f-grid / .f-logo three-column
   footer is gone; nothing outside this block and footer.php referenced it.
   -------------------------------------------------------------------------- */
footer {
  background: var(--forest);
  color: var(--paper);
  padding: 78px 0 30px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

/* A faint ring set behind the medallion, echoing a wax seal. Purely
   decorative, so below 820px it is hidden rather than reflowed. */
footer::before {
  content: "";
  position: absolute;
  top: 22px;
  left: 50%;
  width: 420px;
  height: 420px;
  margin-left: -210px;
  border: 1px solid rgba(242, 239, 231, .10);
  border-radius: 50%;
  pointer-events: none;
}

/* The medallion and its two rules ---------------------------------------- */
.f-seal {
  position: relative;
  display: flex;
  align-items: center;
}

/* Two hairlines 4px apart — a ruled letterhead doubles its lines, and one
   line on its own read thin against the forest. */
.f-rule {
  flex: 1 1 auto;
  height: 0;
  border-top: 1px solid rgba(242, 239, 231, .26);
  position: relative;
}
.f-rule::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 4px;
  border-top: 1px solid rgba(242, 239, 231, .13);
}

/* The ring around the disc is three spread shadows rather than a border,
   so the gap between disc and ring is the ground colour itself and stays
   correct if --forest is ever changed. */
.f-disc {
  flex: 0 0 auto;
  width: 176px;
  height: 176px;
  margin: 0 30px;
  border-radius: 50%;
  background: var(--paper);
  display: grid;
  place-items: center;
  box-shadow:
    0 0 0 1px rgba(242, 239, 231, .30),
    0 0 0 9px var(--forest),
    0 0 0 10px rgba(242, 239, 231, .18);
}
.f-disc img { width: 122px; height: auto; }

/* The name ---------------------------------------------------------------- */
.f-name {
  font-family: var(--font-display);
  font-size: clamp(22px, 3.3vw, 38px);
  letter-spacing: .1em;
  text-transform: uppercase;
  line-height: 1.24;
  margin: 40px 0 0;
}
.f-name em {
  display: block;
  font-family: var(--font-script);
  font-style: normal;
  font-size: clamp(30px, 4.4vw, 50px);
  letter-spacing: 0;
  text-transform: none;
  color: var(--melon);
  margin-top: 2px;
}
/* Wider than .mono on purpose — it is the quietest line in the block. */
.f-est {
  margin: 22px 0 0;
  opacity: .55;
  letter-spacing: .3em;
}

/* Links ------------------------------------------------------------------- */
.f-nav {
  margin-top: 46px;
  padding: 26px 0;
  border-top: 1px solid rgba(242, 239, 231, .18);
  border-bottom: 1px solid rgba(242, 239, 231, .18);
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0 30px;
}
.f-nav a {
  text-decoration: none;
  padding: 5px 0;
  border-bottom: 1px solid transparent;
  transition: color .3s var(--ease-out), border-color .3s var(--ease-out);
}
.f-nav a:hover,
.f-nav a[aria-current="page"] {
  color: var(--melon);
  border-bottom-color: var(--melon);
}

/* The three detail columns ------------------------------------------------ */
.f-cols {
  margin-top: 44px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}
footer h4 {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--melon);
  font-weight: 400;
  margin: 0 0 12px;
}
footer p { margin: 0; font-size: 14px; line-height: 1.72; opacity: .84; }
footer a { color: inherit; }
.f-cols a { text-decoration: none; border-bottom: 1px solid rgba(242, 239, 231, .3); }
.f-cols a:hover { color: var(--melon); border-bottom-color: var(--melon); }

.f-bot {
  margin-top: 52px;
  padding-top: 20px;
  border-top: 1px solid rgba(242, 239, 231, .14);
  opacity: .45;
}

/* Melon rather than red — red disappears against the forest. */
footer a:focus-visible {
  outline: 2px solid var(--melon);
  outline-offset: 3px;
  border-radius: 1px;
}

/* Below 820px the seal cannot hold its rules: the disc centres on its own
   and the three columns stack. */
@media (max-width: 820px) {
  footer::before { display: none; }
  .f-rule { display: none; }
  .f-disc { margin: 0 auto; }
  .f-cols { grid-template-columns: 1fr; gap: 30px; }
}

/* --------------------------------------------------------------------------
   22. Scroll-in animation defaults.
       JS adds .in when the element enters the viewport. If JS never runs the
       content is still visible, because .reveal only dims once JS marks the
       document as capable.
   -------------------------------------------------------------------------- */
.js .reveal { opacity: 0; transform: translateY(22px); }
.js .reveal.in {
  opacity: 1;
  transform: none;
  transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
}
.js .fly { opacity: 0; transform: translateY(34px); }
.js .fly.in {
  opacity: 1;
  transform: none;
  transition: opacity .55s var(--ease-out), transform .55s var(--ease-out);
}

/* --------------------------------------------------------------------------
   23. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1080px) {
  .sheet   { grid-template-columns: repeat(3, 1fr); }
}

/* The links hold their own down to here now that "Meet the Queen" — the
   longest label — is out of the bar. Below this they stack behind Menu. */
@media (max-width: 860px) {
  .nav { grid-template-columns: 1fr auto 1fr; padding: 12px 20px; }
  .nav-toggle { display: inline-block; }

  .links {
    display: none;
    grid-column: 1 / -1;
    grid-row: 2;
    flex-direction: column;
    margin-top: 12px;
    border-top: 1px solid var(--ground-rule);
  }
  .links.open { display: flex; }
  .nav-side {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    grid-column: 1 / -1;
  }
  .nav-left, .nav-right { justify-self: stretch; }
  .nav .links a {
    padding: 13px 4px;
    color: var(--on-ground);
    border-bottom: 1px solid var(--ground-rule);
    font-size: 11px;
  }
  .nav .links a::after { display: none; }
  .nav .links a[aria-current="page"] { color: var(--ground-accent); }
}

@media (max-width: 900px) {
  :root { --gutter: 20px; }

  .hero-stage { aspect-ratio: 4 / 3; }

  .queen-card { grid-template-columns: 1fr; }
  .qc-photo   { min-height: 300px; }
  .qc-facts   { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .contact-layout,
  .field-row { grid-template-columns: 1fr; }

  .sheet,
  .sheet-preview { grid-template-columns: repeat(2, 1fr); }
  .strip,
  .cta-grid { grid-template-columns: 1fr; }
  .cta-grid { grid-template-columns: minmax(0, 360px); }

  .section-head { align-items: flex-start; }
}

@media (max-width: 520px) {
  .qc-facts { grid-template-columns: 1fr; gap: 14px; }
  #meet .wrap::before,
  #meet .wrap::after { display: none; }
  .feature-copy { padding: 28px 22px 34px; }

  /* A landscape panel on a phone leaves a letterbox slot. Portrait suits both
     the screen and the photographs. */
  .hero-stage { aspect-ratio: 4 / 5; }
  .hero-rule     { gap: 60px; margin-top: 52px; }
  .hero-crown    { width: 70px; }
  .hero-title { margin-top: -12px; }
}

/* --------------------------------------------------------------------------
   24. Motion preferences and print
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .hero-slide img    { animation: none; transform: none; }
  .ticker-track      { animation: none; }
  .compete-bg video { display: none; }
  /* The two drifting bands hold still rather than jumping to their ends. */
  .ghero-track,
  .vband-track    { animation: none; }
  .js .reveal,
  .js .fly { opacity: 1; transform: none; }
  #intro { display: none; }
}

@media print {
  .ticker, .nav, #intro, .hero-dots, .modal { display: none !important; }
  body::before { display: none; }
  body { background: #fff; color: #000; }
}