/* ==========================================================================
   THE INFLUENCE TABLE — gold / v2
   --------------------------------------------------------------------------
   Same content and same palette as v1, laid out as a site rather than as a
   card: masthead, one split section (invitation left, request right),
   footer. Still one screen — nothing scrolls on a normal desktop.

   Contents
     01. Design tokens
     02. Base + shell
     03. Ambience (warm pools, vignette, grain)
     04. Gold foil (shared text treatment)
     05. Masthead
     06. The lede — eyebrow, wordmark, hairline, meta, ask
     07. The panel — frame + corner ticks
     08. Form + fields
     09. Button
     10. Footer
     11. Motion utilities
     12. Responsive
     13. Reduced motion
   ========================================================================== */


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

  /* --- Ground ----------------------------------------------------------
     The emailer is pure black edge to edge. --ink-950 is the barely-lifted
     tone used for input wells so a field reads as a recess, not a hole.
     -------------------------------------------------------------------- */
  --ink-1000: #000000;
  --ink-975: #050403;
  --ink-950: #0B0906;
  --ink-925: #0F0C08;

  /* --- Gold ------------------------------------------------------------
     sealOuter #D8AA52 · titleRight #E7C063 · titleLeft #CFAA64
     titleMid  #E2C198 · sealText   #B3904E · presents   #9C8565
     -------------------------------------------------------------------- */
  --gold-hi: #F6E3B0;
  /* foil highlight — the catch of light  */
  --gold: #E7C063;
  /* the accent proper                    */
  --gold-mid: #CFAA64;
  --gold-deep: #B3904E;
  --gold-dim: #9C8565;
  /* eyebrow, keys, field labels          */
  --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. This is how
     the room stays in the page without the picture being in it.
       leather  #5D3C19   tan chairs down both sides
       amber    #F1A31B   the juice, the warmest thing in frame
       wood     #110E0C   the table itself
     -------------------------------------------------------------------- */
  --leather-rgb: 93, 60, 25;
  --amber-rgb: 241, 163, 27;
  --wood-rgb: 17, 14, 12;

  /* --- Text ------------------------------------------------------------
     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     #E7C063  ≈ 11.4:1  (AAA)
       --gold-dim #9C8565  ≈  5.6:1  (AA)
     -------------------------------------------------------------------- */
  --text-hi: #FFFEFB;
  --text-mid: #C9C2B4;
  --text-low: #8A8377;

  /* --- Lines ------------------------------------------------------------ */
  --line: rgba(var(--gold-rgb), .16);
  --line-strong: rgba(var(--gold-rgb), .38);
  --line-cool: rgba(255, 255, 255, .12);

  /* --- 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: .64rem;
  --fs-eyebrow: clamp(.6rem, .55rem + .18vw, .7rem);
  --fs-the: clamp(1rem, .85rem + .7vw, 1.35rem);
  --fs-wordmark: clamp(2.6rem, .5rem + 9vw, 5.5rem);
  --fs-meta: clamp(.74rem, .68rem + .3vw, .88rem);
  --fs-ask: clamp(.94rem, .84rem + .5vw, 1.2rem);
  --fs-input: clamp(.92rem, .88rem + .2vw, 1rem);

  /* --- Spacing ---------------------------------------------------------- */
  --space-2xs: .5rem;
  --space-xs: .9rem;
  --space-sm: 1.25rem;
  --space-md: 2rem;

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

  /* --- Layout ----------------------------------------------------------
     The section is full-bleed: no centred container, only gutters. What is
     capped instead is the one thing that stops working when it gets wide —
     the form panel (see --panel). The wordmark is held by its own cap in
     section 06.
     -------------------------------------------------------------------- */
  --gutter: clamp(1.25rem, .4rem + 3.6vw, 4rem);
  --bar-y: clamp(.8rem, .6rem + .9vw, 1.1rem);
  --panel: 460px;
}


/* ==========================================================================
   02. BASE + SHELL
   ========================================================================== */
*,
*::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: var(--gutter);
  top: var(--gutter);
  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;
}

/* Masthead / section / footer, with the section taking the slack. Full
   viewport width — the masthead rule and the footer rule run the whole way
   across, which is most of what makes this read as a site rather than a
   card. svh, not vh, so mobile browser chrome cannot push the footer out
   of reach. */
.shell {
  position: relative;
  z-index: 1;
  min-height: 100svh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding-inline: var(--gutter);
}


/* ==========================================================================
   03. AMBIENCE
   Warm pools and a vignette carry the room. The tones are the photograph's
   own, at the intensity of light rather than of paint — so the page reads
   as the same evening without showing it. Weighted left here, under the
   wordmark, rather than symmetrically as in v1.
   ========================================================================== */
.ambience {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.ambience__pool {
  position: absolute;
  border-radius: 50%;
  filter: blur(40px);
}

/* The table: a low amber wash across the bottom. */
.ambience__pool--table {
  left: 30%;
  bottom: -36vh;
  width: min(140vw, 1400px);
  height: 62vh;
  transform: translateX(-50%);
  background: radial-gradient(closest-side,
      rgba(var(--amber-rgb), .12) 0%,
      rgba(var(--leather-rgb), .10) 45%,
      transparent 100%);
}

/* The chairs, as leather-brown haze behind the type. */
.ambience__pool--left {
  top: 12%;
  left: -18vw;
  width: 60vw;
  height: 70vh;
  background: radial-gradient(closest-side,
      rgba(var(--leather-rgb), .17) 0%,
      transparent 100%);
}

/* Pulls the corners back to true black so the type always sits on ground. */
.ambience__vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 95% 75% at 40% 45%,
      transparent 0%,
      rgba(var(--wood-rgb), .55) 62%,
      var(--ink-1000) 100%);
}

/* A 2% noise tile. Without it the large near-black fields band on 8-bit
   displays, exactly where the pools and gradients sit. */
.grain {
  position: fixed;
  inset: -50%;
  z-index: 0;
  pointer-events: none;
  opacity: .04;
  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");
}


/* ==========================================================================
   04. GOLD FOIL
   background-clip:text on one shared ramp, so the wordmark, the panel
   titles and the closing line read as one pressed material. The sweep is a
   slow background pan, not a pseudo-element, so it never disturbs layout.
   ========================================================================== */
.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%;
  }
}


/* ==========================================================================
   05. MASTHEAD
   ========================================================================== */
.masthead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: var(--bar-y) 0;
  border-bottom: 1px solid var(--line);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  text-decoration: none;
}

/* 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(28px, 3vw, 36px);
  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);
  transition: color var(--dur-base) var(--ease);
}

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

.masthead__meta {
  margin: 0;
  font-size: var(--fs-micro);
  font-weight: 300;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--text-mid);
  white-space: nowrap;
}


/* ==========================================================================
   06. THE LEDE
   ========================================================================== */
.split {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  align-items: center;
  gap: clamp(2rem, 1rem + 4vw, 4.5rem);
  padding: clamp(1.5rem, 1rem + 2.5vw, 2.25rem) 0;
}

.lede {
  container-type: inline-size;
  /* so the wordmark can size to the column */
  min-width: 0;
}

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

.wordmark {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 300;
  line-height: 1;
  text-transform: uppercase;
}

/* "THE" with a rule running off to the right of it. */
.wordmark__the {
  display: flex;
  align-items: center;
  gap: clamp(.7rem, .4rem + 1.4vw, 1.5rem);
  margin-bottom: clamp(.35rem, .25rem + .5vw, .65rem);
  font-size: var(--fs-the);
  letter-spacing: .34em;
}

.wordmark__the .rule {
  display: block;
  height: 1px;
  flex: 1 1 auto;
  background: linear-gradient(90deg, var(--line-strong), transparent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1400ms var(--ease) 300ms;
}

.wordmark__the.is-in .rule {
  transform: scaleX(1);
}

/* Two lines, ragged left, sized to fill the column. Measured: "INFLUENCE"
   at 100px with 0.08em tracking sets 627.5px, so
   0.96 x column / 6.275 = 15.3cqw fills it with room for the trailing
   tracking. "TABLE" keeps that size and takes wider tracking, which steps
   it out to roughly three-quarters of the line above.
   The --fs-wordmark clamp is only the pre-container-query fallback. */
.wordmark__line {
  display: block;
  font-size: var(--fs-wordmark);
  letter-spacing: .08em;
  white-space: nowrap;
  /* A soft bloom under the foil — the artwork's own glow off black. */
  filter: drop-shadow(0 0 36px rgba(var(--gold-rgb), .2));
}

.wordmark__line--wide {
  letter-spacing: .3em;
}

/* The cap is what stops the full-bleed layout running away with it: at
   1920 the left column is ~920px, and 15.3cqw of that is 141px, which
   swamps the panel beside it. The stacked layout below 900px needs a lower
   cap again — there the column is the whole page. */
@supports (font-size: 1cqw) {
  .wordmark__line {
    font-size: min(15.3cqw, 5.5rem);
  }
}

@media (min-width: 900px) {
  @supports (font-size: 1cqw) {
    .wordmark__line {
      font-size: min(15.3cqw, 7rem);
    }
  }
}

.hairline {
  display: block;
  width: clamp(72px, 16cqw, 128px);
  height: 1px;
  margin: clamp(1.35rem, 1rem + 1.6vw, 2.1rem) 0;
  background: linear-gradient(90deg, var(--line-strong), transparent);
}

/* --- Date / venue, as a labelled pair ---------------------------------- */
.meta {
  margin: 0;
  display: grid;
  gap: clamp(.55rem, .4rem + .6vw, .85rem);
}

.meta__row {
  display: grid;
  grid-template-columns: minmax(0, 4.5rem) 1fr;
  align-items: baseline;
  gap: clamp(.75rem, .5rem + 1vw, 1.25rem);
}

.meta__key {
  margin: 0;
  font-size: var(--fs-micro);
  font-weight: 400;
  letter-spacing: .22em;
  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;
}

.lede__ask {
  margin: clamp(1.5rem, 1.1rem + 1.8vw, 2.25rem) 0 0;
  /* Balance, or the measure strands "TABLE?" alone on the second line. */
  max-width: 30ch;
  text-wrap: balance;
  font-size: var(--fs-ask);
  font-weight: 300;
  line-height: 1.5;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-hi);
}


/* ==========================================================================
   07. THE PANEL
   A hairline frame with engraved corner ticks, matching v1's card — the
   request as a printed slip laid beside the invitation.
   ========================================================================== */
.enquiry {
  min-width: 0;
}

/* Capped and pushed to the right edge. Past ~460px the inputs get long
   enough that the eye loses the start of the line on the way back, and the
   panel stops reading as a slip and starts reading as a second column of
   page. The growing gap to its left is the point of the full-bleed layout. */
.panel {
  position: relative;
  max-width: var(--panel);
  margin-left: auto;
  padding: clamp(1.4rem, 1rem + 1.8vw, 2.25rem);
  background:
    radial-gradient(ellipse 120% 80% at 50% 0%,
      rgba(var(--gold-rgb), .05) 0%, transparent 62%),
    rgba(0, 0, 0, .42);
  border: 1px solid var(--line);
}

.panel__tick {
  position: absolute;
  width: 11px;
  height: 11px;
  border: 0 solid var(--gold-mid);
  opacity: .55;
}

.panel__tick--tl {
  top: -1px;
  left: -1px;
  border-top-width: 1px;
  border-left-width: 1px;
}

.panel__tick--tr {
  top: -1px;
  right: -1px;
  border-top-width: 1px;
  border-right-width: 1px;
}

.panel__tick--bl {
  bottom: -1px;
  left: -1px;
  border-bottom-width: 1px;
  border-left-width: 1px;
}

.panel__tick--br {
  bottom: -1px;
  right: -1px;
  border-bottom-width: 1px;
  border-right-width: 1px;
}

.panel__title {
  margin: 0 0 .35rem;
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 1.05rem + 1.1vw, 1.75rem);
  font-weight: 400;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.panel__sub {
  margin: 0 0 clamp(1.25rem, 1rem + 1.2vw, 1.75rem);
  font-size: .74rem;
  font-weight: 300;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-low);
}

/* --- Success state ------------------------------------------------------ */
.panel__done[hidden] {
  display: none;
}

.panel__done-mark {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin-bottom: clamp(.9rem, .7rem + .8vw, 1.25rem);
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  color: var(--gold);
}

.panel__done .panel__sub {
  margin-bottom: clamp(1.5rem, 1.2rem + 1.4vw, 2rem);
  text-transform: none;
  letter-spacing: .06em;
  font-size: .84rem;
  color: var(--text-mid);
}


/* ==========================================================================
   08. FORM
   ========================================================================== */
.field+.field {
  margin-top: var(--space-sm);
}

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

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

.field__input {
  width: 100%;
  padding: .78rem .95rem;
  background: var(--ink-950);
  border: 1px solid var(--line-cool);
  border-radius: 2px;
  color: var(--text-hi);
  font-family: inherit;
  font-size: var(--fs-input);
  font-weight: 300;
  letter-spacing: .02em;
  transition:
    border-color var(--dur-base) var(--ease),
    background-color var(--dur-base) var(--ease),
    box-shadow var(--dur-base) var(--ease);
}

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

.field__input:hover {
  border-color: var(--line);
}

.field__input:focus {
  outline: none;
  background: var(--ink-925);
  border-color: var(--line-strong);
  box-shadow: 0 0 0 3px rgba(var(--gold-rgb), .07);
}

/* Only ever set by JS after a submit attempt — never on :invalid, which
   would flag every field the moment the page loads. */
.field.is-invalid .field__input {
  border-color: rgba(216, 92, 72, .65);
}

.field.is-invalid .field__label {
  color: #D07E6C;
}

.field__error {
  margin: .3rem 0 0;
  min-height: 1.05em;
  font-size: .72rem;
  line-height: 1.4;
  letter-spacing: .04em;
  color: #D07E6C;
}

.form .btn {
  margin-top: clamp(1.25rem, 1rem + 1.2vw, 1.75rem);
}

.form__note {
  margin: var(--space-sm) 0 0;
  min-height: 1.35em;
  font-size: .76rem;
  letter-spacing: .08em;
  color: var(--text-low);
  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;
}


/* ==========================================================================
   09. BUTTON
   Filled by default here — it is the page's one action, so it does not need
   to be discovered. .btn--quiet is the outline variant, for the secondary
   action on the success state.
   ========================================================================== */
.btn {
  position: relative;
  display: block;
  width: 100%;
  padding: .9rem 1.5rem;
  background: transparent;
  border: 1px solid var(--gold);
  border-radius: 2px;
  color: var(--ink-1000);
  font-family: inherit;
  font-size: .76rem;
  font-weight: 400;
  letter-spacing: .24em;
  text-indent: .24em;
  text-transform: uppercase;
  cursor: pointer;
  overflow: hidden;
  transition:
    color var(--dur-base) var(--ease),
    border-color var(--dur-base) var(--ease),
    box-shadow var(--dur-base) var(--ease);
}

.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, var(--gold-deep), var(--gold), var(--gold-hi));
  transform: scaleX(1);
  transform-origin: left center;
  transition: transform 520ms var(--ease), filter var(--dur-base) var(--ease);
}

.btn__label {
  position: relative;
  z-index: 1;
}

.btn:hover,
.btn:focus-visible {
  box-shadow: 0 12px 44px -18px rgba(var(--gold-rgb), .6);
}

.btn:hover::before,
.btn:focus-visible::before {
  filter: brightness(1.12);
}

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

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

/* Outline variant: gold wipes in from the left on hover. */
.btn--quiet {
  color: var(--gold);
  border-color: var(--line-strong);
}

.btn--quiet::before {
  transform: scaleX(0);
}

.btn--quiet:hover,
.btn--quiet:focus-visible {
  color: var(--ink-1000);
  border-color: var(--gold);
}

.btn--quiet:hover::before,
.btn--quiet:focus-visible::before {
  transform: scaleX(1);
  filter: none;
}


/* ==========================================================================
   10. FOOTER
   ========================================================================== */
.footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: var(--bar-y) 0;
  border-top: 1px solid var(--line);
}

.footer__write,
.footer__closing {
  margin: 0;
  font-size: var(--fs-micro);
  font-weight: 400;
  letter-spacing: .2em;
  text-transform: uppercase;
  white-space: nowrap;
}

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

.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);
}


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

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


/* ==========================================================================
   12. RESPONSIVE
   ========================================================================== */

/* Below the split, the invitation stacks above the request. The page is
   allowed to scroll here — forcing two blocks into one phone screen would
   shrink the wordmark past the point of being the wordmark. */
@media (max-width: 899.98px) {
  .shell {
    min-height: 0;
  }

  .split {
    grid-template-columns: 1fr;
    gap: clamp(2rem, 1.5rem + 3vw, 3rem);
    padding-block: clamp(2rem, 1.5rem + 3vw, 3rem);
  }

  .lede__ask {
    max-width: none;
  }

  /* Stacked, the panel is the column — the cap and the auto margin only
     make sense while there is a left column to sit beside. */
  .panel {
    max-width: none;
    margin-left: 0;
  }
}

@media (max-width: 575.98px) {
  .masthead {
    flex-direction: column;
    align-items: flex-start;
    gap: .6rem;
  }

  .footer {
    flex-direction: column;
    align-items: flex-start;
    gap: .5rem;
  }

  .brand__name {
    letter-spacing: .14em;
  }

  .wordmark__line--wide {
    letter-spacing: .22em;
  }

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

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

/* Very short desktop viewports: let the shell scroll rather than crushing
   the rhythm to fit. */
@media (min-width: 900px) and (max-height: 680px) {
  .shell {
    min-height: 0;
  }
}


/* ==========================================================================
   13. 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;
  }

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

  .wordmark__the .rule {
    transform: scaleX(1);
  }

  /* 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%;
  }
}