/* ===========================================================================
   The Cove Social Club
   styles.css
   ---------------------------------------------------------------------------
   One stylesheet, no framework, no build step, no CDN, no web fonts. The whole
   site opens from a folder by double-clicking index.html, with no internet.

   The look is "midnight and brass": a near-black neutral ground, brushed brass
   for rules and numerals, and the club's own photography carrying the warmth.
   The wordmark is off-white on transparent, drawn for a dark page, so the page
   is built around it rather than the other way round.

   Structure of this file
     1. Tokens          colours, type scale, spacing
     2. Reset & base    plus bands, rules, scrims
     3. Furniture       header, nav, footer, buttons, labels
     4. Home            hero, marquee, spaces, membership call
     5. Events          the weekly calendar
     6. Venue           space cards, capability list
     7. Membership      the offer, privileges, terms
     8. Inquire         form
     9. Motion, responsive, print
   =========================================================================== */

/* ============================================================== 1. TOKENS */
:root {
  /* Near-black, neutral rather than warm. The photography is heavily warm
     already; a brown-black ground under it turned everything muddy. */
  --ink:    #0B0B0D;
  --ink-2:  #121216;
  --ink-3:  #191920;
  --ink-4:  #23232B;

  --paper:   #F4F2ED;
  --paper-2: #CFCBC2;
  --paper-3: #9A958B;
  --paper-4: #6E6A62;

  /* Brushed brass. --brass paints rules, hairlines and numerals; --brass-t is
     the tint that carries text on the dark ground. */
  --brass:      #C89A54;
  --brass-t:    #E5C68E;
  --brass-deep: #8A6528;

  /* One accent per recurring event, so the calendar is readable at a glance
     rather than five identical cards. Each has a -t tint for type on ink. */
  --wine:    #7A2E3C;  --wine-t:  #D98C9C;   /* The Wednesday Pour */
  --steel:   #3E5A6E;  --steel-t: #9BBBD4;   /* Trivia Night       */
  --ember:   #B4552A;  --ember-t: #E9A177;   /* Latin Night        */
  --teal:    #0E6B62;  --teal-t:  #79CFC2;   /* spare accent       */

  --line:   rgba(244, 242, 237, .14);
  --line-2: rgba(244, 242, 237, .07);

  /* Geometric caps for headings and labels, which is how club signage is set.
     The wordmark is a high-contrast serif, so a geometric sans beside it reads
     as a deliberate pairing instead of a near-miss. */
  --display: Futura, "Century Gothic", "Avenir Next", "Helvetica Neue", Helvetica, Arial, sans-serif;
  /* Event names and pull quotes, echoing the serif in the logo. */
  --serif:   Optima, Candara, "Palatino Linotype", Palatino, Georgia, serif;
  /* Anything read in paragraphs. */
  --body:    "Helvetica Neue", Helvetica, "Segoe UI", system-ui, -apple-system, Arial, sans-serif;

  --t-xs:   clamp(.68rem, .645rem + .16vw, .77rem);
  --t-sm:   clamp(.84rem, .805rem + .18vw, .94rem);
  --t-base: clamp(1rem, .96rem + .22vw, 1.11rem);
  --t-lg:   clamp(1.12rem, 1.04rem + .38vw, 1.34rem);
  --t-xl:   clamp(1.34rem, 1.15rem + .82vw, 1.95rem);
  --t-2xl:  clamp(1.8rem, 1.35rem + 1.9vw, 3.2rem);
  --t-3xl:  clamp(2.4rem, 1.55rem + 3.6vw, 5.4rem);
  --t-4xl:  clamp(3rem, 1.6rem + 6vw, 7.6rem);

  --s1: .25rem; --s2: .5rem;  --s3: .75rem; --s4: 1rem;
  --s5: 1.5rem; --s6: 2rem;   --s7: 3rem;   --s8: 4.5rem;
  --s9: 6.5rem;

  --wrap: 1280px;
  --gutter: clamp(1.25rem, .6rem + 2.4vw, 3.5rem);
  --bleed: max(var(--gutter), calc(50vw - (var(--wrap) / 2)));
  --ease: cubic-bezier(.22, .61, .36, 1);

  /* Set per section; everything accent-coloured reads these. */
  --acc: var(--brass);
  --acc-t: var(--brass-t);
}

/* ======================================================= 2. RESET & BASE */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
  -webkit-text-size-adjust: 100%;
  background: var(--ink);
}

body {
  margin: 0;
  background: transparent;
  color: var(--paper-2);
  font-family: var(--body);
  font-size: var(--t-base);
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body.nav-open { overflow: hidden; }

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

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--paper);
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: var(--t-3xl); letter-spacing: .005em; }
h2 { font-size: var(--t-2xl); }
h3 { font-size: var(--t-lg); line-height: 1.2; letter-spacing: .06em; }
p  { margin: 0 0 var(--s4); }
p:last-child { margin-bottom: 0; }

.wrap { width: min(100% - calc(var(--gutter) * 2), var(--wrap)); margin-inline: auto; }
.wrap--narrow { width: min(100% - calc(var(--gutter) * 2), 880px); margin-inline: auto; }

.band { padding-block: clamp(3.5rem, 2rem + 6vw, 8rem); position: relative; }
.band--tight { padding-block: clamp(2.5rem, 1.6rem + 3.4vw, 5rem); }
.band--raised { background: var(--ink-2); }
.band--deep   { background: #070709; }

.lede   { font-size: var(--t-lg); color: var(--paper-2); max-width: 60ch; line-height: 1.55; }
.dim    { color: var(--paper-3); max-width: 66ch; }
.dimmer { color: var(--paper-4); }
.small  { font-size: var(--t-sm); }
.nums   { font-variant-numeric: lining-nums tabular-nums; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--brass); color: var(--ink);
  padding: var(--s3) var(--s5); font-family: var(--display);
  letter-spacing: .16em; text-transform: uppercase;
}
.skip:focus { left: var(--s4); top: var(--s4); }

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

/* ========================================================== 3. FURNITURE */

/* The small letterspaced label above a heading, with a brass rule leading in. */
.label {
  display: flex; align-items: center; gap: .75rem;
  font-family: var(--display); font-size: var(--t-xs); font-weight: 600;
  letter-spacing: .3em; text-transform: uppercase;
  color: var(--acc-t);
  margin: 0 0 var(--s5);
}
.label::before {
  content: ""; width: 30px; height: 2px; flex: none; background: var(--acc);
}
.label--center { justify-content: center; }
.label--center::after {
  content: ""; width: 30px; height: 2px; flex: none; background: var(--acc);
}
.label--bare::before { display: none; }

/* A hairline closing a section heading, brass for its first stretch. */
.rule {
  height: 1px; border: 0; margin: var(--s6) 0 0;
  background: linear-gradient(to right, var(--acc) 0 64px, var(--line) 64px);
}

.idx {
  font-family: var(--serif); font-size: clamp(3rem, 2rem + 4.5vw, 6rem);
  line-height: .8; color: transparent;
  -webkit-text-stroke: 1px var(--acc);
  letter-spacing: -.02em; margin: 0;
  font-variant-numeric: lining-nums;
}
@supports not ((-webkit-text-stroke: 1px black)) { .idx { color: var(--acc); } }

/* ---------------------------------------------------------------- BUTTONS */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  font-family: var(--display); font-size: var(--t-xs); font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase;
  padding: 1rem 1.9rem;
  border: 1px solid var(--paper);
  color: var(--paper);
  text-decoration: none; background: transparent; cursor: pointer;
  transition: background .3s var(--ease), color .3s var(--ease),
              border-color .3s var(--ease), transform .3s var(--ease);
}
.btn:hover { background: var(--paper); color: var(--ink); }
.btn:active { transform: translateY(1px); }
.btn .ico { transition: transform .3s var(--ease); }
.btn:hover .ico { transform: translateX(3px); }

.btn--brass { background: var(--brass); border-color: var(--brass); color: var(--ink); }
.btn--brass:hover { background: var(--brass-t); border-color: var(--brass-t); color: var(--ink); }

.btn--quiet { border-color: var(--line); color: var(--paper-2); }
.btn--quiet:hover { background: transparent; border-color: var(--paper); color: var(--paper); }

.btn--lg { padding: 1.15rem 2.3rem; }
.btn--wide { width: 100%; }
.btns { display: flex; flex-wrap: wrap; gap: var(--s4); align-items: center; }

.ico { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.5; flex: none; }

.tlink {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--display); font-size: var(--t-xs); font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--acc-t); text-decoration: none;
  position: relative; padding-bottom: 4px;
}
.tlink::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%;
  background: currentColor; transform: scaleX(0); transform-origin: left;
  transition: transform .4s var(--ease);
}
.tlink:hover::after { transform: scaleX(1); }

/* ----------------------------------------------------------------- HEADER */
.site-head {
  position: sticky; top: 0; z-index: 100;
  border-bottom: 1px solid transparent;
  transition: background .4s var(--ease), border-color .4s var(--ease);
}
.site-head.is-stuck {
  background: rgba(11, 11, 13, .86);
  backdrop-filter: blur(14px) saturate(120%);
  border-bottom-color: var(--line);
}
.head-in {
  display: flex; align-items: center; gap: var(--s5);
  min-height: 88px; transition: min-height .4s var(--ease);
}
.site-head.is-stuck .head-in { min-height: 64px; }

/* The supplied wordmark is a 1024x640 PNG with wide transparent margins, so
   the visible lettering is only about three quarters of the box. These heights
   are set against the drawn mark, not the file, which is why they run larger
   than they otherwise would. */
.brand { display: flex; align-items: center; text-decoration: none; margin-right: auto; }
.brand img {
  height: clamp(50px, 38px + 1.9vw, 68px); width: auto;
  transition: height .4s var(--ease);
}
.site-head.is-stuck .brand img { height: clamp(40px, 32px + 1.3vw, 52px); }

.nav { display: flex; align-items: center; gap: clamp(1rem, .2rem + 1.8vw, 2.2rem); }
.nav__list {
  display: flex; align-items: center; list-style: none; margin: 0; padding: 0;
  gap: clamp(1rem, .2rem + 1.8vw, 2.2rem);
}
.nav__list a {
  font-family: var(--display); font-size: var(--t-xs); font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--paper-2); text-decoration: none;
  position: relative; padding-block: .4rem; transition: color .3s;
}
.nav__list a::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%;
  background: var(--brass); transform: scaleX(0); transform-origin: left;
  transition: transform .4s var(--ease);
}
.nav__list a:hover { color: var(--paper); }
.nav__list a:hover::after,
.nav__list a[aria-current="page"]::after { transform: scaleX(1); }
.nav__list a[aria-current="page"] { color: var(--brass-t); }

.burger {
  display: none; width: 44px; height: 44px; padding: 0;
  background: none; border: 1px solid var(--line); color: var(--paper); cursor: pointer;
}
.burger span {
  display: block; width: 18px; height: 1.5px; margin: 4px auto;
  background: currentColor; transition: transform .35s var(--ease), opacity .25s;
}
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

.nav-scrim {
  position: fixed; inset: 0; z-index: 98;
  background: rgba(5, 5, 7, .7); backdrop-filter: blur(3px);
  opacity: 0; pointer-events: none; transition: opacity .4s var(--ease);
}
.nav-scrim.is-open { opacity: 1; pointer-events: auto; }

/* ----------------------------------------------------------------- FOOTER */
.foot {
  background: #070709;
  border-top: 1px solid var(--line);
  padding-block: var(--s9) var(--s6);
}
.foot__grid {
  display: grid; gap: var(--s7) var(--s6);
  grid-template-columns: 1.5fr repeat(3, minmax(0, 1fr));
}
.foot__mark { height: 56px; width: auto; margin-bottom: var(--s5); }
.foot p, .foot li, .foot address { font-size: var(--t-sm); color: var(--paper-3); }
.foot address { font-style: normal; line-height: 1.9; }
.foot h3 {
  font-size: var(--t-xs); letter-spacing: .26em; color: var(--brass-t);
  margin-bottom: var(--s5); padding-bottom: var(--s3);
  border-bottom: 1px solid var(--line-2);
}
.foot__links { list-style: none; margin: 0; padding: 0; display: grid; gap: .65rem; }
.foot a { text-decoration: none; transition: color .3s; }
.foot a:hover { color: var(--brass-t); }
.foot__social { display: flex; gap: .5rem; margin-top: var(--s5); }
.foot__social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border: 1px solid var(--line); color: var(--paper-2);
  transition: border-color .3s, color .3s, transform .3s var(--ease);
}
.foot__social a:hover { border-color: var(--brass); color: var(--brass-t); transform: translateY(-2px); }
.foot__social .ico { width: 16px; height: 16px; }
.foot__legal {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s3) var(--s5);
  margin-top: var(--s8); padding-top: var(--s5);
  border-top: 1px solid var(--line-2);
  font-family: var(--display); font-size: var(--t-xs); letter-spacing: .1em;
  color: var(--paper-4);
}

/* =============================================================== 4. HOME */

/* The hero is the club's own room photograph, full bleed, with the wordmark
   over it. The scrim is two gradients rather than one flat wash so the type
   stays legible without dimming the whole picture to mud. */
.hero {
  position: relative; isolation: isolate;
  min-height: clamp(560px, 88vh, 900px);
  display: flex; align-items: flex-end;
  padding-block: var(--s9) var(--s8);
  overflow: hidden;
}
.hero__bg {
  position: absolute; inset: 0; z-index: -2;
  /* 48%, not 50%: the hero box is wider than the photograph, so cover crops
     top and bottom. Sitting a touch high keeps the chandeliers and the top of
     the mirror wall in frame rather than trimming them off. */
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 48%;
}
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(to top, rgba(11,11,13,.95) 0%, rgba(11,11,13,.74) 34%, rgba(11,11,13,.32) 66%, rgba(11,11,13,.55) 100%),
    linear-gradient(to right, rgba(11,11,13,.78) 0%, rgba(11,11,13,.44) 34%, rgba(11,11,13,.04) 72%);
}
.hero__mark { width: clamp(210px, 26vw, 380px); height: auto; margin-bottom: var(--s6); }
.hero__tag {
  font-family: var(--display); font-size: var(--t-xs); font-weight: 600;
  letter-spacing: .42em; text-transform: uppercase;
  color: var(--brass-t); margin: 0 0 var(--s5);
}
.hero h1 {
  font-size: var(--t-2xl); max-width: 18ch; color: var(--paper);
  margin-bottom: var(--s5);
}
.hero__sub { font-size: var(--t-lg); color: var(--paper-2); max-width: 46ch; }
.hero .btns { margin-top: var(--s7); }
.hero__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s6);
  margin-top: var(--s7); padding-top: var(--s5);
  border-top: 1px solid var(--line);
  font-family: var(--display); font-size: var(--t-xs); font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--paper-3);
}

/* --------------------------------------------------------------- MARQUEE */
.ticker {
  background: var(--brass); color: var(--ink);
  overflow: hidden; display: flex; padding-block: var(--s4);
}
.ticker__track { display: flex; flex: 0 0 auto; animation: slide 44s linear infinite; }
.ticker__set { display: flex; flex: 0 0 auto; align-items: center; }
.ticker__set span {
  font-family: var(--display); font-size: var(--t-sm); font-weight: 600;
  letter-spacing: .28em; text-transform: uppercase;
  padding-inline: clamp(1rem, 2.2vw, 2rem);
  display: inline-flex; align-items: center; gap: clamp(1rem, 2.2vw, 2rem);
  white-space: nowrap;
}
.ticker__set span::after {
  content: ""; width: 5px; height: 5px; flex: none;
  background: currentColor; transform: rotate(45deg); opacity: .7;
}
@keyframes slide { to { transform: translateX(-50%); } }

/* --------------------------------------------------------------- FEATURE */
.feature {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .85fr);
  gap: clamp(2rem, 1rem + 5vw, 6rem); align-items: center;
}
.feature--flip { grid-template-columns: minmax(0, .85fr) minmax(0, 1fr); }
.feature__fig { position: relative; margin: 0; isolation: isolate; }
.feature__fig img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
.feature__fig::before {
  content: ""; position: absolute; inset: 1.4rem -1.4rem -1.4rem 1.4rem;
  border: 1px solid var(--brass); z-index: -1;
}
.feature--flip .feature__fig::before { inset: 1.4rem 1.4rem -1.4rem -1.4rem; }

.head--split {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .8fr);
  gap: clamp(1.5rem, .8rem + 3vw, 4rem); align-items: end;
}

/* ------------------------------------------------------------- STAT ROW */
.facts { display: flex; flex-wrap: wrap; margin-top: var(--s7); border-top: 1px solid var(--line); }
.facts > div {
  padding: var(--s5) var(--s6) 0 0; margin-right: var(--s6);
  border-right: 1px solid var(--line);
}
.facts > div:last-child { border-right: 0; margin-right: 0; padding-right: 0; }
.facts__n {
  font-family: var(--serif); font-size: var(--t-2xl); line-height: 1;
  color: var(--acc-t); display: block; margin-bottom: .4rem;
  font-variant-numeric: lining-nums;
}
.facts__k {
  font-family: var(--display); font-size: var(--t-xs); font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase; color: var(--paper-4);
}

/* ============================================================= 5. EVENTS

   The calendar is the reason this site exists right now, so it gets the
   strongest component on the page. Each recurring night carries its own
   accent, set inline on the card, so a glance tells them apart. */
.week {
  display: grid; gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  background: var(--line-2);
  border: 1px solid var(--line-2);
}
.ev {
  position: relative; background: var(--ink);
  padding: var(--s6) var(--s5) var(--s5);
  display: flex; flex-direction: column; gap: .6rem;
  transition: background .35s var(--ease);
}
.ev::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--acc);
  transform: scaleX(0); transform-origin: left;
  transition: transform .5s var(--ease);
}
.ev:hover { background: var(--ink-2); }
.ev:hover::before { transform: scaleX(1); }
/* Today's night is lit without needing a hover, and the JS marks it. */
.ev.is-today { background: var(--ink-3); }
.ev.is-today::before { transform: scaleX(1); }

.ev__day {
  font-family: var(--display); font-size: var(--t-xs); font-weight: 600;
  letter-spacing: .28em; text-transform: uppercase; color: var(--acc-t);
  margin: 0;
}
.ev__name {
  font-family: var(--serif); font-size: var(--t-xl); line-height: 1.1;
  color: var(--paper); margin: 0; letter-spacing: .01em;
}
.ev__with {
  font-family: var(--display); font-size: var(--t-xs); font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--paper-3); margin: 0;
}
.ev__note { font-size: var(--t-sm); color: var(--paper-3); margin: 0; }
.ev__when {
  margin-top: auto; padding-top: var(--s4);
  font-family: var(--display); font-size: var(--t-xs); font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--paper-4);
}
/* The chip used wherever a detail is genuinely not settled yet. It is a
   deliberate design element, not a placeholder left in by accident. */
.tba {
  display: inline-flex; align-items: center; gap: .4rem;
  font-family: var(--display); font-size: .62rem; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--brass-t); border: 1px solid currentColor;
  padding: .18rem .5rem; white-space: nowrap;
}
.ev__today-flag {
  position: absolute; top: var(--s4); right: var(--s4);
  font-family: var(--display); font-size: .6rem; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--ink); background: var(--acc-t); padding: .2rem .5rem;
  display: none;
}
.ev.is-today .ev__today-flag { display: block; }

/* A bordered callout panel, used for the side panels on the enquiry page. */
.season {
  --acc: var(--teal); --acc-t: var(--teal-t);
  border: 1px solid var(--line);
  border-left: 3px solid var(--teal);
  background: var(--ink-2);
  padding: clamp(1.6rem, 1rem + 2.4vw, 3rem);
}

/* ============================================================== 6. VENUE */
.spaces { display: grid; gap: clamp(1.5rem, .8rem + 2.6vw, 3rem); }
/* 420px, not 320px: at 320 a 1280px wrap fits three tracks, and the four
   spaces land as 3 + 1 with a lonely card on its own row. At 420 it settles
   into a clean 2 x 2, which also gives each photograph more room. */
.spaces--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }
.space { position: relative; }
.space__fig { margin: 0 0 var(--s5); overflow: hidden; }
.space__fig img {
  width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover;
  transition: transform .8s var(--ease);
}
.space:hover .space__fig img { transform: scale(1.04); }
.space h3 { margin-bottom: var(--s3); }
.space p { font-size: var(--t-sm); color: var(--paper-3); }

.ticks { list-style: none; margin: var(--s5) 0 0; padding: 0; display: grid; gap: .85rem; }
.ticks li {
  display: grid; grid-template-columns: 1.4rem 1fr; gap: .7rem;
  align-items: start; font-size: var(--t-sm); color: var(--paper-2);
}
.ticks li::before {
  content: ""; width: 7px; height: 7px; margin-top: .55em;
  background: var(--acc); transform: rotate(45deg);
}

/* ========================================================= 7. MEMBERSHIP */
.offer {
  border: 1px solid var(--brass);
  background: linear-gradient(180deg, var(--ink-3), var(--ink-2));
  padding: clamp(1.8rem, 1.2rem + 2.6vw, 3.2rem);
}
.offer__flag {
  display: inline-block;
  font-family: var(--display); font-size: var(--t-xs); font-weight: 600;
  letter-spacing: .24em; text-transform: uppercase;
  background: var(--brass); color: var(--ink);
  padding: .45rem .9rem; margin-bottom: var(--s5);
}
.price { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--s4); margin-top: var(--s5); }
.price__was {
  font-family: var(--serif); font-size: var(--t-xl); color: var(--paper-4);
  text-decoration: line-through; font-variant-numeric: lining-nums;
}
.price__now {
  font-family: var(--serif); font-size: var(--t-3xl); line-height: 1;
  color: var(--brass-t); font-variant-numeric: lining-nums;
}
.price__per {
  font-family: var(--display); font-size: var(--t-xs); font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase; color: var(--paper-3);
}
.fee {
  margin-top: var(--s5); padding-top: var(--s5);
  border-top: 1px solid var(--line);
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s4); flex-wrap: wrap;
}
.fee__k {
  font-family: var(--display); font-size: var(--t-xs); font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase; color: var(--paper-3);
}
.fee__v { font-family: var(--serif); font-size: var(--t-xl); color: var(--paper); font-variant-numeric: lining-nums; }

.terms {
  margin-top: var(--s6); padding: var(--s5);
  background: rgba(244, 242, 237, .04);
  border-left: 2px solid var(--paper-4);
  font-size: var(--t-sm); color: var(--paper-3);
}

/* ============================================================ 8. INQUIRE */
.form { display: grid; gap: var(--s5); }
.field { display: grid; gap: .5rem; }
.field label {
  font-family: var(--display); font-size: var(--t-xs); font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase; color: var(--paper-3);
}
.field input, .field textarea, .field select {
  font-family: var(--body); font-size: var(--t-base); color: var(--paper);
  background: var(--ink-2); border: 1px solid var(--line);
  padding: .9rem 1rem; width: 100%;
}
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-color: var(--brass);
}
.field textarea { min-height: 150px; resize: vertical; }
.field--2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: var(--s5); }

.contactgrid {
  display: grid; gap: 0;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  border-top: 1px solid var(--paper-4);
}
.contact { padding: var(--s6) var(--s5) var(--s6) 0; border-bottom: 1px solid var(--line-2); }
.contact__k {
  display: flex; align-items: center; gap: .55rem;
  font-family: var(--display); font-size: var(--t-xs); font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase; color: var(--acc-t);
  margin-bottom: var(--s4);
}
.contact p { font-size: var(--t-sm); line-height: 1.75; }
.contact a { color: var(--paper); text-decoration: none; border-bottom: 1px solid var(--line); }
.contact a:hover { border-bottom-color: currentColor; }

/* ====================================================== 9. MOTION & MEDIA */
[data-in] {
  opacity: 0; transform: translateY(20px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
  transition-delay: calc(var(--d, 0) * 100ms);
}
[data-in].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  [data-in] { opacity: 1; transform: none; }
  .ticker__track { animation: none; }
}

@media (max-width: 1040px) {
  .head--split { grid-template-columns: 1fr; align-items: start; }
  .hero { min-height: 0; padding-block: var(--s8) var(--s7); }
}

@media (max-width: 960px) {
  .burger { display: block; }
  .nav {
    position: fixed; inset: 0 0 0 auto; z-index: 99;
    width: min(86vw, 360px);
    background: var(--ink-2); border-left: 1px solid var(--line);
    flex-direction: column; align-items: flex-start; justify-content: center;
    gap: var(--s6); padding: var(--s8) var(--s7);
    transform: translateX(100%); transition: transform .45s var(--ease);
  }
  .nav.is-open { transform: none; }
  .nav__list { flex-direction: column; align-items: flex-start; gap: var(--s5); }
  .nav__list a { font-size: var(--t-sm); }

  .feature, .feature--flip { grid-template-columns: 1fr; }
  .feature__fig { max-width: 500px; }
  .feature__fig::before,
  .feature--flip .feature__fig::before { inset: 1rem -1rem -1rem 1rem; }
  .foot__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .btns { flex-direction: column; align-items: stretch; }
  .btns .btn { width: 100%; }
  .facts > div { padding: var(--s5) var(--s5) 0 0; margin-right: var(--s5); }
  .foot__grid { grid-template-columns: 1fr; gap: var(--s6); }
  .contact { padding-right: 0; }
  .fee { flex-direction: column; gap: var(--s2); }
}

@media print {
  .site-head, .ticker, .btns, .btn, .skip, .nav-scrim, .foot__social,
  .hero__bg, .form { display: none !important; }
  html, body { background: #fff; color: #000; }
  .hero::after { display: none; }
  .band, .band--raised, .band--deep, .ev, .offer, .season, .foot {
    background: #fff !important; color: #000 !important;
  }
  h1, h2, h3, .ev__name, .price__now, .facts__n { color: #000 !important; }
  .idx { color: #000 !important; -webkit-text-stroke: 0; }
  [data-in] { opacity: 1 !important; transform: none !important; }
  .band { padding-block: 1.2rem; }
  .ev { page-break-inside: avoid; }
  a { text-decoration: none; color: #000; }
}