/* ==========================================================================
   THE INFLUENCE TABLE — gold / v3 · Colour Block
   --------------------------------------------------------------------------
   Same content and same sampled palette as v1 and v2. What is different is
   that the gold is a *surface* here rather than an accent: the page is two
   full-height fields meeting on one seam — black carrying the invitation,
   solid gold carrying the request, printed in black ink.

   There is no masthead bar and no footer bar. Each field runs the whole
   height of the viewport and holds its own furniture, which is what stops
   this reading as another header/section/footer arrangement.

   Contents
     01. Design tokens
     02. Ink on gold — the second palette
     03. Base + the split
     04. Grain
     05. Gold foil (on the black field only)
     06. The black field
     07. Wordmark
     08. Meta, signature
     09. The gold field
     10. Form + fields on gold
     11. Buttons
     12. Motion utilities
     13. Responsive
     14. Reduced motion
   ========================================================================== */


/* ==========================================================================
   01. DESIGN TOKENS
   Identical values to v1 and v2 — every one was read off the emailer JPEG
   with a canvas pixel readback. The builds are separate files on purpose
   (each is self-contained), but the palette must stay in step.
   ========================================================================== */
:root {

  /* --- Ground ----------------------------------------------------------- */
  --ink-1000: #000000;
  --ink-975: #050403;
  --ink-950: #0B0906;

  /* --- Gold ------------------------------------------------------------
     sealOuter #D8AA52 · titleRight #E7C063 · titleLeft #CFAA64
     titleMid  #E2C198 · sealText   #B3904E · presents   #9C8565
     -------------------------------------------------------------------- */
  --gold-hi: #F6E3B0;
  --gold: #E7C063;
  --gold-mid: #CFAA64;
  --gold-deep: #B3904E;
  --gold-dim: #9C8565;
  --gold-shadow: #6E5526;
  --gold-rgb: 231, 192, 99;

  --foil: linear-gradient(100deg,
      var(--gold-shadow) 0%,
      var(--gold-deep) 14%,
      var(--gold) 30%,
      var(--gold-hi) 44%,
      var(--gold) 58%,
      var(--gold-deep) 74%,
      var(--gold-mid) 88%,
      var(--gold-hi) 100%);

  /* --- Room tones ------------------------------------------------------
     Averaged out of the photograph, then used only as light, and only on
     the black field.
       leather  #5D3C19   amber #F1A31B   wood #110E0C
     -------------------------------------------------------------------- */
  --leather-rgb: 93, 60, 25;
  --amber-rgb: 241, 163, 27;
  --wood-rgb: 17, 14, 12;

  /* --- Text on black ---------------------------------------------------
     Contrast against --ink-1000:
       --text-hi  #FFFEFB  ≈ 20.5:1  (AAA)
       --text-mid #C9C2B4  ≈ 12.0:1  (AAA)
       --text-low #8A8377  ≈  5.6:1  (AA)
       --gold-dim #9C8565  ≈  5.6:1  (AA)
     -------------------------------------------------------------------- */
  --text-hi: #FFFEFB;
  --text-mid: #C9C2B4;
  --text-low: #8A8377;

  --line: rgba(var(--gold-rgb), .16);
  --line-soft: rgba(var(--gold-rgb), .10);

  /* --- Type ------------------------------------------------------------- */
  --font-display: "Cormorant Garamond", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --font-body: "Jost", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --fs-micro: .62rem;
  --fs-eyebrow: clamp(.58rem, .53rem + .18vw, .68rem);
  --fs-the: clamp(.8rem, .72rem + .38vw, 1.05rem);
  --fs-wordmark: clamp(2.4rem, .8rem + 7vw, 7rem);
  --fs-meta: clamp(.72rem, .67rem + .26vw, .86rem);
  --fs-input: clamp(.92rem, .88rem + .2vw, 1rem);

  /* --- Motion: one curve, everywhere ------------------------------------ */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 200ms;
  --dur-base: 320ms;
  --dur-reveal: 1000ms;

  /* --- Layout ----------------------------------------------------------- */
  --pad-dark: clamp(1.5rem, .6rem + 3.6vw, 4rem);
  --pad-gold: clamp(1.5rem, .8rem + 3vw, 3.5rem);
}


/* ==========================================================================
   02. INK ON GOLD
   The gold field needs its own text palette, because everything that works
   on black fails on it and vice versa. The panel gradient is deliberately
   narrow — #F0CE7E down to #D2A957 — so a single set of inks stays legible
   across the whole surface rather than only at the light end.

   Contrast, computed in-page against the panel's DARKEST stop #D2A957 —
   i.e. the worst case anywhere on the surface:
     --on-gold      #14100A   8.62:1   body and headings      (AAA)
     --on-gold-mid  #3D3115   5.79:1   labels, secondary      (AA)
     --on-gold-low  #574522   4.19:1   placeholders           (AA large)
     --on-gold-bad  #7A1E10   4.73:1   error text             (AA)
   Against the lightest stop #F0CE7E, --on-gold reaches 12.48:1.
   The button inverts: --gold on black is 12.12:1.
   ========================================================================== */
:root {
  --panel: linear-gradient(155deg, #F0CE7E 0%, #E7C063 42%, #D2A957 100%);
  --on-gold: #14100A;
  --on-gold-mid: #3D3115;
  --on-gold-low: #574522;
  --on-gold-rule: rgba(20, 16, 10, .28);
  --on-gold-rule-strong: rgba(20, 16, 10, .62);
  --on-gold-bad: #7A1E10;
}


/* ==========================================================================
   03. BASE + THE SPLIT
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--ink-1000);
  color: var(--text-mid);
  font-family: var(--font-body);
  font-weight: 300;
  line-height: 1.7;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection {
  background: rgba(var(--gold-rgb), .28);
  color: var(--text-hi);
}

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

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
}

.skip-link:focus {
  left: 1rem;
  top: 1rem;
  padding: .6rem 1rem;
  background: var(--ink-950);
  border: 1px solid var(--gold);
  color: var(--gold);
  font-size: .8rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
}

/* The two fields, meeting on one seam. No gutter between them and no
   container around them — the seam is the only structure on the page. */
.split {
  min-height: 100svh;
  display: grid;
  grid-template-columns: 1.18fr .82fr;
}


/* ==========================================================================
   04. GRAIN
   A 2% noise tile over both fields. The gold needs it as much as the black:
   a large flat gradient of a saturated colour bands badly on 8-bit panels.
   ========================================================================== */
.grain {
  position: fixed;
  inset: -50%;
  z-index: 5;
  pointer-events: none;
  opacity: .05;
  mix-blend-mode: overlay;
  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)'/%3E%3C/svg%3E");
}


/* ==========================================================================
   05. GOLD FOIL
   Only ever used on the black field — background-clip:text in gold on a
   gold panel would be invisible.
   ========================================================================== */
.foil {
  background-image: var(--foil);
  background-size: 260% 100%;
  background-position: 0% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: foil-sweep 9s var(--ease) infinite;
}

@keyframes foil-sweep {

  0%,
  100% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }
}


/* ==========================================================================
   06. THE BLACK FIELD
   Three rows: the lockup at the top, the type in the middle taking the
   slack, the details on the floor.
   ========================================================================== */
.dark {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: clamp(1.5rem, 1rem + 2.4vw, 2.75rem);
  padding: var(--pad-dark);
  background: var(--ink-1000);
  container-type: inline-size;
  /* so the wordmark can size to the field */
}

/* The room as light. Clipped by the field's overflow, so none of it
   crosses the seam onto the gold. */
.dark__pool {
  position: absolute;
  left: 42%;
  top: 52%;
  width: 130%;
  height: 70%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  filter: blur(40px);
  pointer-events: none;
  background: radial-gradient(closest-side,
      rgba(var(--amber-rgb), .13) 0%,
      rgba(var(--leather-rgb), .10) 42%,
      transparent 100%);
}

.dark>* {
  position: relative;
}

/* --- The lockup --------------------------------------------------------- */
.dark__top {
  display: flex;
  align-items: center;
  gap: .7rem;
}

/* img/IIGC-logo.png is black artwork on transparency, so its alpha is the
   shape. Masking a gold-gradient box with it gives a crisp seal at any size
   from one file — no second raster, no filter guesswork. */
.brand__seal {
  position: relative;
  display: block;
  width: clamp(30px, 3.2vw, 40px);
  aspect-ratio: 1;
  flex: none;
}

.brand__mark {
  position: absolute;
  inset: 0;
  background-image: var(--foil);
  background-size: 260% 100%;
  background-position: 0% 50%;
  -webkit-mask: url("../img/IIGC-logo.png") center / contain no-repeat;
  mask: url("../img/IIGC-logo.png") center / contain no-repeat;
  animation: foil-sweep 9s var(--ease) infinite;
}

/* If masking is unavailable the mark would vanish; tint the raw artwork
   instead rather than showing nothing. */
@supports not ((-webkit-mask: url("")) or (mask: url(""))) {
  .brand__mark {
    background: none;
    animation: none;
    filter: invert(1) sepia(1) saturate(2.4) hue-rotate(-15deg) brightness(.95);
  }
}

.brand__name {
  font-size: var(--fs-micro);
  font-weight: 400;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold-dim);
}

/* --- The middle row ----------------------------------------------------- */
.dark__mid {
  align-self: center;
  min-width: 0;
}

.eyebrow {
  margin: 0 0 clamp(.5rem, .4rem + .5vw, .8rem);
  font-size: var(--fs-eyebrow);
  font-weight: 400;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--gold-dim);
}


/* ==========================================================================
   07. WORDMARK
   Two lines, hard left, sized to fit the black field rather than to overrun
   it — the field's own edge is the seam with the gold, and type running
   into that would read as a mistake rather than as a bleed.

   Measured in Cormorant Garamond 300 at 0.08em tracking, INFLUENCE's ink is
   5.906em. 15.4cqw therefore sets it to 15.4 x 5.906 = 91% of the field,
   leaving a clear margin before the seam at every width.

   MEASURE THIS WITH THE WEBFONT CONFIRMED LOADED. An earlier pass took the
   ratio from a probe span created before anything on the page had used
   Cormorant, so the browser had not fetched it and the probe silently
   measured the fallback serif — 6.275em, 5% wide. Check document.fonts for
   the family at the weight you need, not just document.fonts.ready, which
   resolves happily when nothing was requested.
   ========================================================================== */
.wordmark {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 300;
  line-height: .95;
  text-transform: uppercase;
}

.wordmark__the,
.wordmark__line {
  display: block;
}

/* The inline run carries the tracking and pulls the trailing letter-space
   back off the advance, so a line measures its glyphs and nothing else. */
.wordmark .ink {
  display: inline;
  white-space: nowrap;
}

.wordmark__the {
  margin-bottom: clamp(.35rem, .28rem + .4vw, .6rem);
  font-size: var(--fs-the);
  color: var(--gold-dim);
}

.wordmark__the .ink {
  letter-spacing: .38em;
  margin-inline-end: -.38em;
}

.wordmark__line {
  font-size: var(--fs-wordmark);
  /* A soft bloom under the foil — the artwork's own glow off black. */
  filter: drop-shadow(0 0 34px rgba(var(--gold-rgb), .2));
}

.wordmark__line .ink {
  letter-spacing: .08em;
  margin-inline-end: -.08em;
}

@supports (font-size: 1cqw) {
  .wordmark__line {
    font-size: 15.4cqw;
  }
}

.seats {
  margin: clamp(.9rem, .7rem + .9vw, 1.4rem) 0 0;
  font-size: var(--fs-meta);
  font-weight: 300;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--text-hi);
}


/* ==========================================================================
   08. META, SIGNATURE
   ========================================================================== */
.dark__foot {
  align-self: end;
}

.meta {
  margin: 0;
  display: grid;
  border-top: 1px solid var(--line);
}

.meta__row {
  display: grid;
  grid-template-columns: minmax(0, 5rem) 1fr;
  align-items: baseline;
  gap: clamp(.8rem, .6rem + .9vw, 1.35rem);
  padding: clamp(.5rem, .4rem + .45vw, .72rem) 0;
  border-bottom: 1px solid var(--line-soft);
}

.meta__key {
  margin: 0;
  font-size: var(--fs-micro);
  font-weight: 400;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--gold-dim);
}

.meta__val {
  margin: 0;
  font-size: var(--fs-meta);
  font-weight: 300;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-hi);
}

.meta__val sup {
  font-size: .6em;
  letter-spacing: 0;
}

.sign {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .5rem 1.5rem;
  margin: clamp(1rem, .8rem + .9vw, 1.5rem) 0 0;
  font-size: var(--fs-micro);
  font-weight: 400;
  letter-spacing: .2em;
  text-transform: uppercase;
}

.sign__write {
  color: var(--text-low);
}

.sign__closing {
  color: var(--gold-dim);
}

.link {
  color: var(--text-hi);
  text-decoration: none;
  background-image: linear-gradient(var(--gold), var(--gold));
  background-size: 100% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  padding-bottom: 2px;
  transition: color var(--dur-base) var(--ease);
}

.link:hover,
.link:focus-visible {
  color: var(--gold);
}


/* ==========================================================================
   09. THE GOLD FIELD
   ========================================================================== */
.gold {
  display: flex;
  align-items: center;
  padding: var(--pad-gold);
  background: var(--panel);
  color: var(--on-gold);
}

/* The focus ring switches to ink here — a gold ring on gold is invisible. */
.gold :focus-visible {
  outline-color: var(--on-gold);
}

.gold ::selection {
  background: rgba(20, 16, 10, .22);
  color: var(--on-gold);
}

.gold__inner {
  width: 100%;
  max-width: 30rem;
  margin-inline: auto;
}

.gold__ask {
  margin: 0 0 .35rem;
  font-size: var(--fs-micro);
  font-weight: 400;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--on-gold-mid);
}

.gold__title {
  margin: 0 0 clamp(1.35rem, 1.1rem + 1.3vw, 2rem);
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 1.35rem + 1.7vw, 2.6rem);
  font-weight: 400;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--on-gold);
}

.gold__done[hidden] {
  display: none;
}

.gold__done:focus {
  outline: none;
}

.gold__done-sub {
  margin: 0;
  font-size: .9rem;
  letter-spacing: .03em;
  color: var(--on-gold-mid);
}


/* ==========================================================================
   10. FORM ON GOLD
   Ruled underlines in ink. A boxed field on a gold panel reads as a hole
   punched in it; a rule reads as a line on a printed card.
   ========================================================================== */
.field+.field {
  margin-top: clamp(.8rem, .65rem + .6vw, 1.1rem);
}

.field__label {
  display: block;
  margin-bottom: .25rem;
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--on-gold-mid);
  transition: color var(--dur-base) var(--ease);
}

.field:focus-within .field__label {
  color: var(--on-gold);
}

.field__input {
  width: 100%;
  padding: .5rem .1rem;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--on-gold-rule);
  border-radius: 0;
  color: var(--on-gold);
  font-family: inherit;
  font-size: var(--fs-input);
  font-weight: 400;
  letter-spacing: .02em;
  transition: border-color var(--dur-base) var(--ease);
}

.field__input::placeholder {
  color: var(--on-gold-low);
  opacity: 1;
}

.field__input:hover {
  border-bottom-color: rgba(20, 16, 10, .42);
}

.field__input:focus {
  outline: none;
  border-bottom-color: var(--on-gold-rule-strong);
}

/* Only ever set by JS after a submit attempt — never on :invalid, which
   would flag every field the moment the page loads. Red on gold is muddy,
   so the invalid state is carried by a heavier rule and a dark oxblood
   rather than by a bright red that the panel would swallow. */
.field.is-invalid .field__input {
  border-bottom-width: 2px;
  border-bottom-color: var(--on-gold-bad);
}

.field.is-invalid .field__label,
.field__error {
  color: var(--on-gold-bad);
}

.field__error {
  margin: .25rem 0 0;
  min-height: 1.05em;
  font-size: .72rem;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: .04em;
}

.form__note {
  margin: .8rem 0 0;
  min-height: 1.35em;
  font-size: .74rem;
  font-weight: 400;
  letter-spacing: .06em;
  color: var(--on-gold-mid);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity var(--dur-base) var(--ease), transform var(--dur-base) var(--ease);
}

.form__note.is-shown {
  opacity: 1;
  transform: none;
}


/* ==========================================================================
   11. BUTTONS
   Inverted: solid black with gold type, the one place on the gold field
   where the palette flips back.
   ========================================================================== */
.btn {
  display: block;
  width: 100%;
  margin-top: clamp(1.35rem, 1.1rem + 1.2vw, 2rem);
  padding: .95rem 1.5rem;
  background: var(--ink-1000);
  border: 1px solid var(--ink-1000);
  border-radius: 2px;
  color: var(--gold);
  font-family: inherit;
  font-size: .74rem;
  font-weight: 400;
  letter-spacing: .24em;
  text-indent: .24em;
  text-transform: uppercase;
  cursor: pointer;
  transition:
    color var(--dur-base) var(--ease),
    background-color var(--dur-base) var(--ease),
    box-shadow var(--dur-base) var(--ease);
}

.btn:hover,
.btn:focus-visible {
  color: var(--gold-hi);
  background: var(--ink-975);
  box-shadow: 0 14px 34px -16px rgba(20, 16, 10, .7);
}

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

.btn[disabled] {
  cursor: default;
  opacity: .6;
}

/* Send another: a word, not a button. */
.link-btn {
  margin-top: clamp(1.35rem, 1.1rem + 1.2vw, 2rem);
  padding: 0;
  background: none;
  border: 0;
  color: var(--on-gold);
  font-family: inherit;
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: var(--on-gold-rule);
  transition: text-decoration-color var(--dur-base) var(--ease);
}

.link-btn:hover,
.link-btn:focus-visible {
  text-decoration-color: var(--on-gold);
}


/* ==========================================================================
   12. MOTION UTILITIES
   Everything animates transform + opacity only. .is-in is added by the
   staggered reveal in js/main.js.
   ========================================================================== */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity var(--dur-reveal) var(--ease),
    transform var(--dur-reveal) var(--ease);
}

/* The gold field arrives as a whole surface, so it slides in from the seam
   rather than lifting — a panel this size moving vertically reads as the
   page settling rather than as the panel arriving. */
.gold.reveal {
  transform: translateX(24px);
}

.reveal.is-in {
  opacity: 1;
  transform: none;
}


/* ==========================================================================
   13. RESPONSIVE
   ========================================================================== */

/* Below the split the two fields stack, black over gold, and each is sized
   by its own content rather than by the viewport. */
@media (max-width: 899.98px) {
  .split {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .dark {
    min-height: 82svh;
  }

  .gold__inner {
    max-width: 34rem;
    margin-inline: 0;
  }

  .gold.reveal {
    transform: translateY(16px);
  }
}

@media (max-width: 575.98px) {
  .sign {
    flex-direction: column;
    gap: .35rem;
  }

  .meta__row {
    grid-template-columns: minmax(0, 4rem) 1fr;
  }

  .btn {
    letter-spacing: .16em;
    text-indent: .16em;
  }
}

/* Short desktop viewports: let the page scroll rather than crushing the
   black field's three rows into each other. */
@media (min-width: 900px) and (max-height: 640px) {
  .split {
    min-height: 0;
  }

  .dark {
    min-height: 640px;
  }
}


/* ==========================================================================
   14. REDUCED MOTION
   Nothing may be left hidden — every animated state resolves to its end.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    transition-delay: 0ms !important;
  }

  .reveal,
  .gold.reveal {
    opacity: 1;
    transform: none;
  }

  /* Park the foil mid-ramp so it still reads as gold, not as one flat end
     stop of the gradient. */
  .foil,
  .brand__mark {
    background-position: 50% 50%;
  }
}