/* ==========================================================================
   THE VENICE CHESS INVITATIONAL
   Light editorial. Warm white, gilt gold, deep Venetian green.

   IMAGES live in /assets, FONTS in /fonts — kept apart deliberately so the
   _headers cache rules cannot both match the same file.
   PLAYER NAMES: see the comment above .seats in index.html.
   ========================================================================== */

/* ── Self-hosted fonts ──────────────────────────────────────────────────────
   Latin + Latin-Ext subsets pulled from Google Fonts and served from this
   origin, so no visitor IP is handed to a third party. Both families are
   VARIABLE: Bodoni carries opsz 6..96 and wght 400..700, which the type
   scale depends on — do not swap these for static weight files.
   -------------------------------------------------------------------- */
@font-face {
  font-family: 'Bodoni Moda';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/bodoni-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Bodoni Moda';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/bodoni-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Bodoni Moda';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/bodoni-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Bodoni Moda';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/bodoni-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 300 500;
  font-display: swap;
  src: url('fonts/jost-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 300 500;
  font-display: swap;
  src: url('fonts/jost-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── Tokens ─────────────────────────────────────────────────────────────── */
:root {
  --paper:      #FCFBF8;   /* warm white */
  --paper-2:    #F5F3EC;   /* card / inset */
  --sage:       #EDF1EC;   /* pale green panel */
  --sage-2:     #E2E9E1;

  /* Translucent versions of the above, so the marble veining reads through
     every panel instead of stopping at its edge. */
  --paper-t:    rgba(252, 251, 248, .55);
  --paper2-t:   rgba(245, 243, 236, .42);
  --sage-t:     rgba(233, 239, 232, .46);

  --green:      #143D31;   /* deep Venetian green — display type */
  --green-2:    #2E5B4B;   /* mid green */
  --ink:        #2B342F;   /* body copy */
  --ink-soft:   #5C6660;

  --gold:       #A8832F;   /* rules, ornament */
  --gold-text:  #8F6E22;   /* gold used as text — AA on paper */
  --gold-pale:  #E5D9B8;

  --line:       rgba(20, 61, 49, .14);
  --line-gold:  rgba(168, 131, 47, .34);

  --display: 'Bodoni Moda', 'Didot', 'Bodoni MT', Georgia, serif;
  --sans:    'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

  --shell:  1220px;
  --narrow: 780px;
  --pad:    clamp(1.25rem, 5vw, 4rem);
  --bay:    clamp(7rem, 15vw, 14rem);   /* vertical rhythm between chapters */

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

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

html {
  scroll-behavior: smooth; scroll-padding-top: 6rem;
  background: var(--paper);   /* the marble layer sits above this */
}

body {
  margin: 0;
  background: transparent;    /* must stay transparent or it hides .marble */
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 300;
  font-size: clamp(1rem, .96rem + .2vw, 1.09rem);
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

p { margin: 0 0 1.4rem; }
p:last-child { margin-bottom: 0; }

a { color: var(--green); }

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

.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 {
  position: absolute; left: 50%; top: 0; transform: translate(-50%, -130%);
  background: var(--green); color: var(--paper);
  padding: .75rem 1.35rem; font-size: .8rem; letter-spacing: .1em;
  text-decoration: none; z-index: 300;
  transition: transform .25s var(--ease);
}
.skip-link:focus { transform: translate(-50%, 0); }

/* White marble. Generated by the SVG turbulence filter in the markup, painted
   once as a fixed layer behind everything — no tiling, so no repeat seams.
   To dial it back, lower the opacity here; to change the veining, edit
   baseFrequency and the feFuncR/G/B tableValues in index.html. */
.marble {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  overflow: hidden;
  opacity: .55;   /* ← the one dial for how present the marble is */
}
/* Rotated and oversized: real marble veining runs on the diagonal, and the
   scale keeps the rotated edges outside the viewport. */
.marble svg {
  width: 100%; height: 100%; display: block;
  transform: rotate(-8deg) scale(1.45);
  transform-origin: center;
}

/* Paper grain — the cheapest thing that stops a flat page reading as flat. */
.grain {
  position: fixed; inset: 0; z-index: 400; pointer-events: none;
  opacity: .5; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.055'/%3E%3C/svg%3E");
}

/* ── Shells ─────────────────────────────────────────────────────────────── */
.shell {
  width: 100%; max-width: var(--shell);
  margin-inline: auto; padding-inline: var(--pad);
}
.shell--narrow { max-width: var(--narrow); }

.chapter { padding-block: var(--bay); position: relative; }
.chapter--sage { background: var(--sage-t); }
.chapter--venue { background: var(--paper2-t); }

/* ── Bodoni weight ──────────────────────────────────────────────────────────
   Bodoni is a Didone: its hairlines thin out badly as type scales up, and the
   opsz axis makes it worse (high optical sizes are drawn finer). So we pin
   opsz low and push wght up. Adjust 'wght' here to re-weight the whole page.
   -------------------------------------------------------------------------- */
.hero__title, .display, .purse__figure, .numeral, .doc__title {
  font-variation-settings: 'opsz' 16, 'wght' 620;   /* display sizes */
  /* Engraved: a highlight below the stroke, a shadow above it, so the
     letterform reads as cut into the marble rather than printed on it. */
  text-shadow:
    0 1px 0 rgba(255, 255, 255, .92),
    0 -1px 1px rgba(20, 61, 49, .07);
}
.standfirst, .pull p, .day__h, .seat__no, .block__h, .doc__dek {
  font-variation-settings: 'opsz' 13, 'wght' 580;   /* sub-display */
}
/* Anything at reading size gets the LOWEST opsz on the page — that is the
   cut drawn for small text, with the sturdiest strokes. Raising this number
   is what makes small Bodoni turn spidery. */
.hero__meta dd, .specs b, .day dd, .seat__name, .partner__word,
.nav__mark-a, .footer__a, .footer__where, td.num, .kv dd {
  font-variation-settings: 'opsz' 9, 'wght' 600;
}

/* ── Type ───────────────────────────────────────────────────────────────── */
.micro {
  font-family: var(--sans);
  font-size: .68rem; font-weight: 400;
  letter-spacing: .32em; text-transform: uppercase;
  color: var(--gold-text);
  margin: 0;
}

.display {
  font-family: var(--display);
  font-weight: 400;
  text-wrap: balance;          /* stops single-word last lines */
  font-size: clamp(2.1rem, 1.2rem + 3.6vw, 4rem);
  line-height: 1.1;
  letter-spacing: -.012em;
  color: var(--green);
  margin: 0 0 1.75rem;
}
.display em { font-style: italic; color: var(--green-2); }
.display--wide { max-width: 16ch; }

.standfirst {
  font-family: var(--display);
  text-wrap: pretty;
  font-size: clamp(1.2rem, 1.05rem + .8vw, 1.6rem);
  line-height: 1.5;
  color: var(--green-2);
  max-width: 40ch;
  margin: 0 0 2.5rem;
}

.footnote {
  font-size: .9rem; color: var(--ink-soft);
  border-top: 1px solid var(--line); padding-top: 1.25rem; margin-top: 2rem;
}

/* Unconfirmed content — deliberately conspicuous. */
.tbd {
  color: var(--gold-text);
  font-style: italic;
  border-bottom: 1px dashed var(--line-gold);
  padding-bottom: 1px;
}

/* ── Chapter heads ──────────────────────────────────────────────────────── */
.chapter__head {
  display: flex; align-items: baseline; gap: 1.5rem;
  padding-bottom: 1.5rem; margin-bottom: clamp(2.5rem, 5vw, 4rem);
  border-bottom: 1px solid var(--line-gold);
}
.numeral {
  font-family: var(--display);
  font-size: clamp(2.25rem, 1.6rem + 2.4vw, 3.5rem);
  line-height: .8;
  color: var(--gold);
  opacity: .55;
  font-style: italic;
}

/* ── Nav ────────────────────────────────────────────────────────────────── */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 200;
  border-bottom: 1px solid transparent;
  transition: background-color .4s var(--ease), border-color .4s var(--ease);
}
.nav.is-scrolled {
  background: rgba(252, 251, 248, .9);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom-color: var(--line-gold);
}

.nav__inner {
  max-width: var(--shell); margin-inline: auto;
  padding: 1.15rem var(--pad);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}

.nav__mark { text-decoration: none; display: flex; flex-direction: column; line-height: 1; }
.nav__mark-a {
  font-family: var(--display); font-size: 1.3rem;
  letter-spacing: .2em; text-transform: uppercase; color: var(--green);
}
.nav__mark-b {
  font-size: .62rem; letter-spacing: .28em; text-transform: uppercase;
  color: var(--gold-text); margin-top: .35rem;
}

.nav__menu { display: flex; align-items: center; gap: clamp(.9rem, 1.9vw, 2rem); }
.nav__menu a {
  position: relative;
  text-decoration: none; color: var(--green);
  font-size: .74rem; letter-spacing: .14em; text-transform: uppercase;
  display: inline-flex; align-items: baseline; gap: .5rem;
  padding-block: .35rem;
}
.nav__menu a em {
  font-family: var(--display); font-style: italic;
  color: var(--gold); font-size: .8rem;
}
.nav__menu a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px; background: var(--gold);
  transform: scaleX(0); transform-origin: right;
  transition: transform .4s var(--ease);
}
.nav__menu a:hover::after, .nav__menu a.is-active::after {
  transform: scaleX(1); transform-origin: left;
}
.nav__cta { border: 1px solid var(--line-gold); padding: .55rem 1.1rem !important; }
.nav__cta::after { display: none; }
.nav__cta:hover { border-color: var(--gold); background: rgba(168,131,47,.06); }

.nav__toggle { display: none; background: none; border: 0; cursor: pointer; padding: .6rem; color: var(--green); }
.nav__toggle span[aria-hidden] { display: block; width: 26px; }
.nav__toggle i { display: block; height: 1px; background: currentColor; transition: transform .3s var(--ease); }
.nav__toggle i + i { margin-top: 7px; }
.nav__toggle[aria-expanded="true"] i:first-child { transform: translateY(4px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] i:last-child { transform: translateY(-4px) rotate(-45deg); }

/* ── Hero ───────────────────────────────────────────────────────────────── */
.hero {
  position: relative; min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  padding: 8rem 0 clamp(14rem, 26vw, 20rem);
  overflow: hidden;
  background:
    radial-gradient(120% 80% at 15% 0%, rgba(255, 255, 255, .8) 0%, transparent 62%),
    linear-gradient(180deg, transparent 50%, var(--sage-t) 100%);
}

.hero__grid {
  width: 100%; max-width: var(--shell);
  margin-inline: auto; padding-inline: var(--pad);
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(240px, .75fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: end;
  position: relative; z-index: 2;
}

.hero__micro { margin-bottom: 2rem; }
.hero__micro span { position: relative; padding-left: 3.5rem; }
.hero__micro span::before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: 2.5rem; height: 1px; background: var(--gold);
}

.hero__title {
  font-family: var(--display); font-weight: 400;
  text-wrap: balance;
  font-size: clamp(3rem, 1rem + 9.5vw, 8.5rem);
  line-height: .92;
  letter-spacing: -.028em;
  color: var(--green);
  margin: 0;
}
.hero__title span { display: block; }
.hero__title .l2 { padding-left: .32em; font-style: italic; color: var(--green-2); }
.hero__title .l3 { padding-left: .1em; }

.hero__meta { padding-bottom: .6rem; }
.hero__meta dl { margin: 0; border-top: 1px solid var(--line-gold); }
.hero__meta div {
  display: grid; grid-template-columns: 4.5rem 1fr; gap: 1rem;
  padding: .8rem 0; border-bottom: 1px solid var(--line);
}
.hero__meta dt {
  font-size: .64rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--gold-text); padding-top: .45rem;
}
.hero__meta dd {
  margin: 0; font-family: var(--display);
  font-size: 1.16rem; line-height: 1.5; color: var(--green);
}
.hero__note { margin-top: 1.75rem; font-size: .93rem; line-height: 1.7; color: var(--ink-soft); }

/* Venice, drawn */
.skyline { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; pointer-events: none; }
.skyline svg { display: block; width: 100%; height: clamp(180px, 26vw, 320px); }
.skyline path { fill: none; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.sky-far path   { stroke: var(--gold); stroke-width: 1;   opacity: .32; }
.sky-near path  { stroke: var(--green); stroke-width: 1.2; opacity: .55; }
.water          { stroke: var(--gold);  stroke-width: 1;   opacity: .55; }
.ripple path    { stroke: var(--gold);  stroke-width: 1;   opacity: .28; }
.bricole path   { stroke: var(--green); stroke-width: 1.4; opacity: .42; }
.gondola path   { stroke: var(--green); stroke-width: 1.3; opacity: .5; }

.hero__cue {
  position: absolute; left: 50%; bottom: 2.25rem; translate: -50% 0;
  z-index: 3; padding: 1rem; display: block;
}
.hero__cue span {
  display: block; width: 1px; height: 52px;
  background: linear-gradient(180deg, transparent, var(--gold));
  animation: cue 2.8s var(--ease) infinite;
}
@keyframes cue {
  0%, 100% { opacity: .25; transform: scaleY(.55); transform-origin: top; }
  50%      { opacity: 1;   transform: scaleY(1);   transform-origin: top; }
}

/* ── Editorial (chapter I) ──────────────────────────────────────────────── */
.editorial {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
}
.editorial__lead .display { margin-bottom: 0; }
.editorial__body { padding-top: .5rem; }

.drop::first-letter {
  font-family: var(--display);
  float: left;
  font-size: 4.1em;
  line-height: .78;
  padding: .06em .12em 0 0;
  color: var(--gold);
}

.pull {
  margin: clamp(3rem, 7vw, 5.5rem) 0;
  padding: clamp(2rem, 4vw, 3rem) 0;
  border-top: 1px solid var(--line-gold);
  border-bottom: 1px solid var(--line-gold);
  text-align: center;
}
.pull p {
  font-family: var(--display); font-style: italic; font-weight: 400;
  font-size: clamp(1.5rem, 1rem + 2.4vw, 2.75rem);
  line-height: 1.28; color: var(--green); margin: 0;
}

/* ── Purse (chapter II) ─────────────────────────────────────────────────── */
.purse {
  margin: clamp(3.5rem, 8vw, 6.5rem) 0;
  padding: clamp(2.5rem, 6vw, 4rem) 0;
  border-top: 1px solid var(--line-gold);
  border-bottom: 1px solid var(--line-gold);
  text-align: center;
}
.purse__figure {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(3.25rem, 1.5rem + 8vw, 7.5rem);
  line-height: 1; letter-spacing: -.03em;
  color: var(--green); margin: 1.25rem 0;
}
.purse__note { max-width: 46ch; margin-inline: auto; color: var(--ink-soft); font-size: .95rem; }

.days {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.day { padding-top: 1.4rem; border-top: 1px solid var(--line-gold); }
.day__h {
  font-family: var(--display); font-weight: 400; font-style: italic;
  font-size: 2.1rem; color: var(--green); margin: .6rem 0 1.5rem;
}
.day dl { margin: 0; }
.day dl div {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: .7rem 0; border-top: 1px solid var(--line);
}
.day dt { font-size: .64rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-text); padding-top: .3rem; }
.day dd { margin: 0; font-family: var(--display); font-size: 1.05rem; color: var(--green); text-align: right; }

.specs { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-gold); }
.specs li {
  display: grid; grid-template-columns: minmax(110px, 170px) 1fr; gap: 1.5rem;
  padding: 1.1rem 0; border-bottom: 1px solid var(--line);
}
.specs span { font-size: .64rem; letter-spacing: .22em; text-transform: uppercase; color: var(--gold-text); padding-top: .35rem; }
.specs b { font-family: var(--display); font-weight: 400; font-size: 1.15rem; color: var(--green); }
.specs i { font-size: .9rem; }

/* ── Seats (chapter III) ────────────────────────────────────────────────── */
.seats {
  list-style: none; margin: clamp(2.5rem, 5vw, 3.5rem) 0 0; padding: 0;
  /* Six seats: 3 x 2 on desktop. Never leave an orphan on its own row. */
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 3vw, 2.75rem);
}
.seat {
  padding-top: 1.15rem; border-top: 1px solid var(--line-gold);
  display: flex; flex-direction: column; gap: .55rem;
}
.seat__no {
  font-family: var(--display); font-style: italic;
  font-size: 1.45rem; line-height: 1;
  color: var(--gold);
}
/* An unfilled seat reads as a placeholder: italic and quieter. */
.seat__name {
  font-family: var(--display); font-size: 1.3rem; line-height: 1.3;
  color: var(--ink-soft); font-style: italic;
}
.seat--filled .seat__name { color: var(--green); font-style: normal; }

/* ── Venue (chapter IV) ─────────────────────────────────────────────────── */
.venue {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(2rem, 6vw, 5rem); align-items: start;
}
.venue__body .display { margin-bottom: 1.25rem; }
.venue__body .standfirst { margin-bottom: 0; }
.venue__aside { padding-top: .4rem; }

/* The source is a 2.5:1 panorama, so it runs at its native ratio — no crop,
   nothing lost from either end of the terrace. */
.venue__figure { margin: clamp(2.5rem, 6vw, 4.5rem) 0 0; }
.venue__figure img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 2.5 / 1;
  object-fit: cover; object-position: center;
  border: 1px solid var(--line-gold);
}
.venue__figure figcaption { margin-top: 1rem; text-align: right; }

/* ── Partners (chapter V) ───────────────────────────────────────────────── */
.partners {
  list-style: none; margin: clamp(2.5rem, 5vw, 3.5rem) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(2.5rem, 6vw, 5rem);
}
.partner {
  padding-top: 1.5rem; border-top: 1px solid var(--line-gold);
  display: flex; flex-direction: column; align-items: center; gap: .8rem;
  text-align: center;
}
.partner__word {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(1.3rem, 1.05rem + .9vw, 1.85rem);
  color: var(--green); line-height: 1.2;
}
.partner__logo { max-height: 48px; width: auto; }

/* ── Form ───────────────────────────────────────────────────────────────── */
.form { margin-top: 2.5rem; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.field { display: flex; flex-direction: column; gap: .55rem; margin-bottom: 1.5rem; }
.field label { font-size: .64rem; letter-spacing: .22em; text-transform: uppercase; color: var(--gold-text); }
.field input, .field select, .field textarea {
  font-family: var(--sans); font-size: 1rem; font-weight: 300;
  color: var(--ink); background: transparent;
  border: 0; border-bottom: 1px solid var(--line-gold);
  padding: .8rem .1rem; width: 100%;
  transition: border-color .3s var(--ease);
}
.field textarea { resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  border-bottom-color: var(--gold); outline: none;
}
.field select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--gold) 50%),
                    linear-gradient(135deg, var(--gold) 50%, transparent 50%);
  background-position: calc(100% - 14px) 50%, calc(100% - 8px) 50%;
  background-size: 6px 6px, 6px 6px; background-repeat: no-repeat;
  padding-right: 2.25rem; border-radius: 0;
}
.hp { position: absolute; left: -9999px; }

.btn {
  position: relative; display: inline-block;
  font-family: var(--sans); font-size: .76rem;
  letter-spacing: .2em; text-transform: uppercase;
  padding: 1.1rem 2.5rem; cursor: pointer;
  color: var(--paper); background: var(--green);
  border: 1px solid var(--green);
  transition: background-color .35s var(--ease), color .35s var(--ease);
}
.btn:hover { background: transparent; color: var(--green); }

.form__status {
  margin-top: 1.25rem; font-size: .92rem; min-height: 1.4em;
}
.form__status.is-working { color: var(--ink-soft); }
.form__status.is-good    { color: var(--green); }
.form__status.is-bad     { color: #8A2B22; }
.btn[disabled] { opacity: .55; cursor: default; }

.contact__alt { margin-top: 2rem; font-size: .95rem; color: var(--ink-soft); }
.contact__alt a {
  color: var(--green); text-decoration: none;
  border-bottom: 1px solid var(--line-gold);
  padding-bottom: 1px;
  transition: border-color .3s var(--ease);
}
.contact__alt a:hover { border-bottom-color: var(--gold); }

/* ── Footer ─────────────────────────────────────────────────────────────── */
.footer { background: var(--sage-t); border-top: 1px solid var(--line-gold); padding-block: clamp(3.5rem, 7vw, 5rem); }
.footer__inner { display: grid; gap: 2.25rem; }
.footer__a {
  display: block; font-family: var(--display); font-size: 1.5rem;
  letter-spacing: .2em; text-transform: uppercase; color: var(--green);
}
.footer__b {
  display: block; font-size: .66rem; letter-spacing: .26em;
  text-transform: uppercase; color: var(--gold-text); margin-top: .4rem;
}
.footer__where { font-family: var(--display); font-size: 1.05rem; color: var(--green-2); margin: 0; }
.footer__nav { display: flex; flex-wrap: wrap; gap: 1rem 2rem; }
.footer__nav a {
  color: var(--green); text-decoration: none;
  font-size: .74rem; letter-spacing: .16em; text-transform: uppercase;
  opacity: .75; transition: opacity .25s var(--ease);
  padding-block: .55rem;        /* WCAG 2.2 target size */
}
.footer__nav a:hover { opacity: 1; }
.footer__legal {
  font-size: .78rem; color: var(--ink-soft); margin: 0;
  padding-top: 1.75rem; border-top: 1px solid var(--line);
}

/* ── Reveal ─────────────────────────────────────────────────────────────── */
.reveal-el { opacity: 0; transform: translateY(22px); }
.reveal-el.is-in {
  opacity: 1; transform: none;
  transition: opacity 1s var(--ease), transform 1s var(--ease);
}

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 980px) {
  .hero__grid { grid-template-columns: 1fr; align-items: start; }
  .hero__meta { max-width: 420px; }
  .editorial, .venue { grid-template-columns: 1fr; }
  /* 2.5:1 is only ~150px tall on a phone — crop tighter so it still reads. */
  .venue__figure img { aspect-ratio: 3 / 2; }
}

@media (max-width: 760px) {
  .nav__toggle { display: block; }
  .nav__menu {
    position: fixed; inset: 0;
    background: rgba(252, 251, 248, .98);
    backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
    flex-direction: column; justify-content: center; gap: 1.75rem;
    opacity: 0; visibility: hidden;
    transition: opacity .35s var(--ease), visibility .35s var(--ease);
  }
  .nav__menu.is-open { opacity: 1; visibility: visible; }
  .nav__menu a { font-size: .95rem; letter-spacing: .18em; }

  .hero { padding-top: 6.5rem; padding-bottom: clamp(7.5rem, 30vw, 11rem); }

  /* At 375px the 1440-wide drawing was cropped to half a dome. Sizing it so
     the whole skyline fits reads as a deliberate band instead of a crop. */
  .skyline svg { height: 88px; }

  /* Uppercase micro-labels sit at the readable floor on a phone. */
  .micro { font-size: .74rem; }
  .hero__meta dt, .field label, .specs span, .day dt, .seat__no { font-size: .7rem; }
  .nav__menu a { padding-block: .8rem; }
  .footer__nav { gap: .25rem 2rem; }
  .form__row { grid-template-columns: 1fr; gap: 0; }
  .seats { grid-template-columns: repeat(2, 1fr); }
  .specs li { grid-template-columns: 1fr; gap: .3rem; }
  .specs span { padding-top: 0; }
}

/* ── Motion & print ─────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .reveal-el { opacity: 1; transform: none; }
}

@media print {
  .nav, .hero__cue, .form, .grain, .skyline { display: none; }
  body { background: #fff; }
}