/* ===========================================================================
   GSquad design system
   Luxury-editorial. Instrument Serif (display) + Instrument Sans (UI).
   Every value below is a token. Nothing in a page file should invent a size,
   a colour or a radius — if you need one that isn't here, add it here.
   =========================================================================== */

/* --- Fonts -------------------------------------------------------------- */
/* Self-hosted so the CSP carries zero third-party origins and the LCP path
   has no cross-origin hop. Both faces are OFL; see fonts/OFL.txt.
   NOTE: crossorigin is required on the <link rel=preload> in each page even
   though these are same-origin, or the browser downloads each file twice. */

@font-face {
  font-family: "Instrument Serif";
  src: url(/fonts/instrument-serif-latin.v1.woff2) format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Instrument Serif";
  src: url(/fonts/instrument-serif-italic-latin.v1.woff2) format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Instrument Sans";
  src: url(/fonts/instrument-sans-latin.v1.woff2) format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}

/* Metric-matched fallback so the display swap doesn't reflow the headline.
   The four percentages MUST be re-measured with Capsize or Fontaine once the
   real woff2 files are in place, then CLS confirmed at ~0 in Lighthouse.
   Values below are a starting point, not a measurement. */
@font-face {
  font-family: "Display Fallback";
  src: local("Georgia"), local("Times New Roman");
  size-adjust: 92%;
  ascent-override: 90%;
  descent-override: 22%;
  line-gap-override: 0%;
}

/* --- Tokens ------------------------------------------------------------- */
/* Light-first, near-monochrome, and deliberately under-decorated. Separation
   comes from space rather than from rules and tints. The hero stays dark and
   full-bleed so the film carries the drama — the page around it stays quiet. */

:root {
  --display: "Instrument Serif", "Display Fallback", Georgia, serif;
  --sans: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Helvetica, Arial, sans-serif;

  --t-hero: clamp(2.75rem, 1.1rem + 7vw, 6.25rem);
  --t-xl: clamp(2rem, 1.1rem + 3.6vw, 3.5rem);
  --t-lg: clamp(1.375rem, 1.1rem + 1.2vw, 1.875rem);
  --t-md: clamp(1.125rem, 1.05rem + 0.5vw, 1.375rem);
  --t-body: 1.0625rem;
  --t-sm: 0.9375rem;
  --t-xs: 0.8125rem;

  --lh-tight: 1.04;
  --lh-snug: 1.12;
  --lh-body: 1.6;
  --track-tight: -0.022em;

  --s1: 0.25rem; --s2: 0.5rem; --s3: 0.75rem; --s4: 1rem; --s5: 1.5rem;
  --s6: 2rem; --s7: 4rem; --s8: 6rem; --s9: 9rem; --s10: 13rem;

  --r-sm: 6px;
  --r-lg: 18px;
  --r-pill: 999px;

  --measure: 32em;
  --measure-wide: 46em;
  --container: 1120px;
  --gutter: clamp(1.25rem, 5vw, 3rem);

  /* Warm near-black ground, champagne gold, oxblood for depth. Dark-first:
     an evening-events brand should look like the evening. The minimal pass's
     spacing, type and component restraint are unchanged — only colour moves. */
  --bone: #0b0908;
  --bone-2: #131010;
  --paper: #171310;
  --ink: #f6f0e6;
  --ink-2: #a89b8d;
  --line: #2a2320;
  --accent: #e8b96a;
  --accent-ink: #120e0a;
  --accent-deep: #8d3c2c;
  --shadow: 0 30px 70px -40px rgba(0, 0, 0, 0.9);

  --on-dark: #f8f3ea;
  --on-dark-2: rgba(248, 243, 234, 0.74);
  --on-dark-3: rgba(248, 243, 234, 0.54);
  --on-dark-line: rgba(248, 243, 234, 0.22);
  --dark-ground: #0b0908;

  color-scheme: dark light;
}

/* Light variant — cream and espresso, still gilded. The gold darkens to
   #855916 here: the lighter champagne measures under 4.5 on cream. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bone: #f7f3ec;
    --bone-2: #efe9de;
    --paper: #fffdf9;
    --ink: #1b1611;
    --ink-2: #6b6054;
    --line: #ded5c7;
    --accent: #7d5310;
    --accent-ink: #fffdf9;
    --accent-deep: #8d3c2c;
    --shadow: 0 26px 60px -40px rgba(27, 22, 17, 0.45);
  }
}

:root[data-theme="light"] {
  --bone: #f7f3ec;
  --bone-2: #efe9de;
  --paper: #fffdf9;
  --ink: #1b1611;
  --ink-2: #6b6054;
  --line: #ded5c7;
  --accent: #7d5310;
  --accent-ink: #fffdf9;
  --accent-deep: #8d3c2c;
  --shadow: 0 26px 60px -40px rgba(27, 22, 17, 0.45);
}

/* --- Reset -------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(4.5rem + env(safe-area-inset-top, 0px));
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
  background: var(--bone);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

img,
video {
  max-width: 100%;
  height: auto;
  display: block;
}

[hidden] {
  display: none !important;
}

h1,
h2,
h3 {
  font-family: var(--display);
  font-weight: 400;
  letter-spacing: var(--track-tight);
  text-wrap: balance;
  margin: 0;
}

h1 {
  font-size: var(--t-hero);
  line-height: var(--lh-tight);
}
h2 {
  font-size: var(--t-xl);
  line-height: var(--lh-snug);
}
h3 {
  font-size: var(--t-lg);
  line-height: var(--lh-snug);
}

p {
  margin: 0;
  text-wrap: pretty;
}

a {
  color: inherit;
}

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

/* --- Layout ------------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Section rhythm is deliberately NOT uniform — the old design gave every
   section identical padding, so nothing could signal importance. */
.band {
  padding-block: var(--s9);
}
.band--tight {
  padding-block: var(--s7);
}
.band--loose {
  padding-block: var(--s10);
}
.band--tint {
  background: var(--bone-2);
}

/* Centred intros. Apple centres almost every section opener, and it is the
   single cheapest way to read as composed rather than assembled. */
.centred {
  text-align: center;
  margin-inline: auto;
}

.centred .lede,
.centred .eyebrow {
  margin-inline: auto;
}
.band--ink {
  background: var(--dark-ground);
  color: var(--on-dark);
}
.band--ink .eyebrow,
.band--ink .lede {
  color: var(--on-dark-2);
}

.measure {
  max-width: var(--measure);
}
.measure-wide {
  max-width: var(--measure-wide);
}

.eyebrow {
  font-size: var(--t-sm);
  letter-spacing: 0;
  color: var(--accent);
  margin-bottom: var(--s4);
}

.lede {
  font-size: var(--t-md);
  color: var(--ink-2);
  line-height: 1.5;
}

/* --- Buttons ------------------------------------------------------------ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  min-height: 2.75rem;
  padding: var(--s2) var(--s5);
  border: 1px solid var(--ink);
  border-radius: var(--r-pill);
  background: var(--ink);
  color: var(--bone);
  font: inherit;
  font-weight: 500;
  font-size: var(--t-sm);
  letter-spacing: 0;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.18s ease, border-color 0.18s ease,
    color 0.18s ease, transform 0.18s ease;
}

.btn:hover {
  background: color-mix(in srgb, var(--ink) 82%, var(--bone));
  border-color: color-mix(in srgb, var(--ink) 82%, var(--bone));
}

.btn:active {
  transform: translateY(1px);
}

.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line);
}

.btn--ghost:hover {
  background: transparent;
  border-color: var(--ink);
  color: var(--ink);
}

.btn--on-dark {
  background: var(--on-dark);
  color: var(--dark-ground);
  border-color: var(--on-dark);
}

.btn--on-dark:hover {
  background: color-mix(in srgb, var(--on-dark) 86%, var(--accent));
  border-color: color-mix(in srgb, var(--on-dark) 86%, var(--accent));
  color: var(--dark-ground);
}

@media (prefers-reduced-motion: reduce) {
  .btn {
    transition: none;
  }
  .btn:active {
    transform: none;
  }
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
  align-items: center;
}

/* --- Header ------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--bone) 88%, transparent);
  backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid transparent;
  padding-top: env(safe-area-inset-top, 0px);
  transition: border-color 0.2s ease;
}

.site-header[data-scrolled] {
  border-bottom-color: var(--line);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  min-height: 4.5rem;
}

.wordmark {
  font-family: var(--display);
  font-size: 1.5rem;
  letter-spacing: -0.02em;
  text-decoration: none;
  line-height: 1;
}

.site-header nav {
  display: flex;
  align-items: center;
  gap: var(--s5);
}

.site-header nav a:not(.btn) {
  font-size: var(--t-sm);
  color: var(--ink-2);
  text-decoration: none;
}

.site-header nav a:not(.btn):hover {
  color: var(--ink);
}

@media (max-width: 560px) {
  .site-header nav a:not(.btn) {
    display: none;
  }
}

/* --- Footer ------------------------------------------------------------- */

.site-footer {
  border-top: 1px solid var(--line);
  padding-block: var(--s7) var(--s8);
  color: var(--ink-2);
  font-size: var(--t-sm);
}

.site-footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: var(--s6);
  align-items: start;
}

.site-footer a {
  color: var(--ink-2);
  text-decoration: none;
}
.site-footer a:hover {
  color: var(--ink);
  text-decoration: underline;
}

.site-footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--s2);
}

.site-footer__legal {
  margin-top: var(--s6);
  padding-top: var(--s5);
  border-top: 1px solid var(--line);
  font-size: var(--t-xs);
  max-width: var(--measure-wide);
}

@media (max-width: 720px) {
  .site-footer__grid {
    grid-template-columns: 1fr;
    gap: var(--s5);
  }
}

/* --- Utilities ---------------------------------------------------------- */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.note {
  font-size: var(--t-xs);
  color: var(--ink-2);
}


/* ===========================================================================
   Volumised type
   Headings are filled with a gradient that runs ink -> metallic -> ink, so
   they read as the text colour with a highlight travelling through them,
   not as gold text. That keeps contrast where it should be: the gradient's
   extremes stay within a passing range of the background, and headings are
   large text (>=24px), so the 3:1 threshold applies.

   On hover the highlight sweeps across. Everything is @supports-guarded with
   a solid-colour fallback, because a browser without background-clip would
   otherwise render transparent — i.e. invisible — text.
   =========================================================================== */

:root {
  /* ink -> warm highlight -> metallic -> ink */
  --sheen: linear-gradient(
    100deg,
    var(--ink) 0%,
    var(--ink) 28%,
    color-mix(in srgb, var(--accent) 55%, var(--ink)) 42%,
    color-mix(in srgb, var(--accent) 92%, white 8%) 50%,
    color-mix(in srgb, var(--accent) 55%, var(--ink)) 58%,
    var(--ink) 72%,
    var(--ink) 100%
  );
  --sheen-relief: 0 1px 0 rgba(0, 0, 0, 0.35);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --sheen-relief: 0 1px 0 rgba(255, 255, 255, 0.7);
  }
}

:root[data-theme="light"] {
  --sheen-relief: 0 1px 0 rgba(255, 255, 255, 0.7);
}

h1,
h2,
.slip__time {
  text-shadow: var(--sheen-relief);
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  h1,
  h2,
  .slip__time {
    background-image: var(--sheen);
    background-size: 260% 100%;
    background-position: 14% 50%;
    background-repeat: no-repeat;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    /* A gradient fill and a text-shadow cannot coexist — the shadow paints
       behind the transparent glyph and muddies it. Relief is dropped here
       and the gradient itself supplies the dimension. */
    text-shadow: none;
    transition: background-position 0.85s cubic-bezier(0.22, 0.61, 0.36, 1);
  }

  h1:hover,
  h2:hover,
  .slip__time:hover {
    background-position: 86% 50%;
  }
}

@media (prefers-reduced-motion: reduce) {
  h1,
  h2,
  .slip__time {
    transition: none;
  }
}

/* Links and buttons get the same idea at a smaller scale: a highlight that
   arrives on hover rather than a flat colour change. */
.btn {
  background-image: linear-gradient(
    100deg,
    transparent 0%,
    transparent 38%,
    color-mix(in srgb, var(--accent) 38%, transparent) 50%,
    transparent 62%,
    transparent 100%
  );
  background-size: 260% 100%;
  background-position: 120% 50%;
  background-repeat: no-repeat;
}

@media (prefers-reduced-motion: no-preference) {
  .btn {
    transition: background-color 0.18s ease, border-color 0.18s ease,
      color 0.18s ease, background-position 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
  }

  .btn:hover {
    background-position: -20% 50%;
  }
}

.site-header nav a:not(.btn),
.faq summary {
  transition: color 0.2s ease;
}

.site-header nav a:not(.btn):hover,
.faq summary:hover {
  color: var(--accent);
}

/* ===========================================================================
   Materials
   Two surfaces, both built from gradients only — no image requests.

   CHAMPAGNE: a faceted metal gradient (many stops, hard-ish transitions, so
   it reads as reflection rather than a fade) with a sparse sparkle layer on
   top. Sparkles are 1px, few, and placed at irregular percentages; regular
   spacing is what makes CSS glitter look like a pattern instead of glitter.

   ALUMINIUM BLACK: a brushed dark metal, matte rather than glossy, with a
   fine speckle. The matte comes from keeping every stop close in value and
   letting the speckle, not a highlight, do the catching-the-light.
   =========================================================================== */

:root {
  /* Sparkle layer — reused by both materials. Kept as its own token so the
     density can be tuned in one place. */
  --sparkle: radial-gradient(circle at 7% 28%, rgba(255, 252, 240, 0.95) 0 0.6px, transparent 1.4px),
    radial-gradient(circle at 23% 71%, rgba(255, 248, 224, 0.8) 0 0.5px, transparent 1.2px),
    radial-gradient(circle at 39% 16%, rgba(255, 255, 255, 0.9) 0 0.6px, transparent 1.5px),
    radial-gradient(circle at 54% 83%, rgba(255, 246, 214, 0.75) 0 0.5px, transparent 1.2px),
    radial-gradient(circle at 71% 37%, rgba(255, 253, 244, 0.95) 0 0.6px, transparent 1.4px),
    radial-gradient(circle at 88% 64%, rgba(255, 244, 208, 0.8) 0 0.5px, transparent 1.3px),
    radial-gradient(circle at 96% 21%, rgba(255, 255, 255, 0.85) 0 0.5px, transparent 1.2px);

  /* Faceted champagne. The near-white stops at 38% and 61% are the two
     "facets" that catch as the gradient sweeps on hover. */
  --champagne: linear-gradient(
    100deg,
    #8a5f1c 0%, #a9762b 11%, #e8b96a 22%, #f7e3b6 31%,
    #fffdf6 38%, #edcd8d 45%, #c99542 52%, #f3dcad 61%,
    #fffaf0 66%, #dcb069 74%, #9d6d24 86%, #8a5f1c 100%
  );

  /* Brushed aluminium-black. Close-valued stops keep it matte. */
  --aluminium: linear-gradient(
    148deg,
    #1f1f22 0%, #141416 14%, #26262a 27%, #131315 41%,
    #212125 55%, #101012 68%, #1d1d21 82%, #0e0e10 100%
  );
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    /* On cream the facets must be darker or the word disappears. */
    --champagne: linear-gradient(
      100deg,
      #4a310a 0%, #6d4a14 12%, #9d6d24 24%, #7d5310 34%,
      #aa7827 41%, #8a5d18 50%, #5c3d0e 60%, #a8752c 70%,
      #6d4a14 82%, #4a310a 100%
    );
    --aluminium: linear-gradient(
      148deg,
      #ffffff 0%, #f4efe4 16%, #fffdf9 32%, #ece5d7 48%,
      #fffdf9 64%, #f0e9dc 80%, #fffdf9 100%
    );
  }
}

:root[data-theme="light"] {
  --champagne: linear-gradient(
    100deg,
    #4a310a 0%, #6d4a14 12%, #9d6d24 24%, #7d5310 34%,
    #aa7827 41%, #8a5d18 50%, #5c3d0e 60%, #a8752c 70%,
    #6d4a14 82%, #4a310a 100%
  );
  --aluminium: linear-gradient(
    148deg,
    #ffffff 0%, #f4efe4 16%, #fffdf9 32%, #ece5d7 48%,
    #fffdf9 64%, #f0e9dc 80%, #fffdf9 100%
  );
}

/* --- Champagne type ------------------------------------------------------
   Replaces the earlier ink->metal->ink sheen on the words that should carry
   the brand. The sparkle layer sits above the metal, both clipped to the
   glyphs. Sparkle is sized far larger than the facet layer so the specks do
   not tile visibly across a headline. */

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .gilded {
    background-image: var(--sparkle), var(--champagne);
    background-size: 340% 180%, 260% 100%;
    background-position: 10% 50%, 14% 50%;
    background-repeat: no-repeat, no-repeat;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    text-shadow: none;
    transition: background-position 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);
  }

  .gilded:hover,
  h1:hover .gilded,
  h2:hover .gilded {
    background-position: 90% 50%, 86% 50%;
  }
}

.gilded {
  color: var(--accent);
}

@media (prefers-reduced-motion: reduce) {
  .gilded {
    transition: none;
  }
}

/* --- Aluminium surfaces --------------------------------------------------
   Applied to the panels that were flat fills. The speckle is a second layer
   at low opacity; on a matte surface it should be felt more than seen. */

.material {
  position: relative;
  isolation: isolate;
  background-image: var(--aluminium);
  border: 1px solid var(--line);
}

.material::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  /* A larger tile and lower opacity: at 180px the repeat was legible as a
     grid, which reads as dust rather than glitter. */
  opacity: 0.38;
  background-image: var(--sparkle);
  background-size: 420px 280px;
  border-radius: inherit;
}