/* ==========================================================================
   Dr. Tashema — Quantum Developmental Tools
   Recreated from the Genspark Design handoff (high-fidelity).
   Design tokens, spacing, easing and card geometry per the handoff README.
   ========================================================================== */

:root{
  /* Type system — solid, upright, established faces (no slants) across the
     site, replacing the AI-signature pairing (slanted Fraunces + wide-tracked
     Inter). The hero headline is the one deliberate exception: it keeps the
     original Fraunces italic as the brand's signature title treatment. */
  --font-display: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --font-sans: 'Source Sans 3', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-headline: 'Fraunces', Georgia, serif;
  --ivory-0:  #f7f2e8;
  --ivory-1:  #efe8d8;
  --forest:   #2e3d2f;
  --forest-2: #445443;
  --sage:     #8a9a86;
  --gold:     #b58f4a;
  --gold-soft:#c9a668;
  --gold-hair:rgba(181,143,74,.35);
  --ink:      #2e3d2f;
  --ink-soft: rgba(46,61,47,.72);
  --ink-faint:rgba(46,61,47,.5);
}
*{ box-sizing:border-box; margin:0; padding:0; }
html{ height:100%; background: var(--ivory-0); scroll-behavior: smooth; }
body{
  min-height:100%;
  font-family: var(--font-sans);
  color: var(--ink);
  position:relative;
  background: transparent;
  -webkit-font-smoothing: antialiased;
}

/* Background image — fixed, spans the whole page.
   Softened, de-saturated and slightly enlarged so the sage watercolour reads
   as a faint frosted texture rather than a strong green mass. */
.atmos{
  position: fixed; inset: 0;
  background: url("/static/assets/hero-ivory.jpg") center/cover no-repeat;
  z-index: 0;
  filter: blur(14px) saturate(.62) brightness(1.06);
  transform: scale(1.12);
  transform-origin: center;
}
/* Frosted ivory veil: heavier on the LEFT (where the green rises highest),
   with a gentle vertical wash to unify the hero and the reading section. */
.atmos-wash{
  position: fixed; inset: 0; z-index: 1; pointer-events:none;
  background:
    /* side-to-side frost bias — strongest at the left edge */
    linear-gradient(90deg,
      rgba(247,242,232,.66) 0%,
      rgba(247,242,232,.48) 34%,
      rgba(247,242,232,.26) 68%,
      rgba(247,242,232,.12) 100%),
    /* top-to-bottom unity wash */
    linear-gradient(180deg,
      rgba(247,242,232,.30) 0%,
      rgba(247,242,232,.44) 55%,
      rgba(247,242,232,.58) 100%);
}

/* Content sits above atmosphere */
.page{ position: relative; z-index: 2; }

/* ── HERO — centered product-shot composition ─────────────────── */
.hero{
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px clamp(24px, 4vw, 64px);
  gap: clamp(32px, 5vw, 72px);
  position: relative;
}

.hero-copy{
  flex: 0 1 auto;
  max-width: 480px;
}
.eyebrow{
  display:inline-flex; align-items:center; gap: 14px;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 36px;
  opacity: 0; animation: rise 1s ease .1s forwards;
}
.eyebrow::before{
  content:""; width: 36px; height: 1px;
  background: var(--gold-hair);
}

h1{
  /* Original handoff treatment — Fraunces italic, restored by request. */
  font-family: var(--font-headline);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(38px, 5vw, 68px);
  line-height: 1.08;
  letter-spacing: -.02em;
  color: var(--forest);
  margin: 0;
  opacity: 0; animation: rise 1.2s ease .3s forwards;
  text-wrap: balance;
}
/* Founder byline beneath the headline */
.founder{
  display: block;
  margin: 18px 0 0;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: 0; animation: rise 1.2s ease .42s forwards;
}

.sub{
  margin: 32px 0 0;
  max-width: 46ch;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(16px, 1.25vw, 18px);
  line-height: 1.68;
  color: var(--ink-soft);
  opacity: 0; animation: rise 1.2s ease .5s forwards;
  text-wrap: pretty;
}

.cta-wrap{
  margin-top: 48px;
  display: inline-block;
  opacity: 0; animation: rise 1.2s ease .7s forwards;
}
.cta{
  display:inline-flex; align-items:center; gap:16px;
  padding: 16px 32px 16px 36px;
  border-radius: 999px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 0;
  color: var(--forest);
  background: rgba(255,255,255,.5);
  border: 1px solid var(--gold);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow:
    0 1px 0 rgba(255,255,255,.6) inset,
    0 8px 24px rgba(46,61,47,.12);
  text-decoration:none;
  cursor:pointer;
  transition: all .4s ease;
}
.cta:hover{
  background: var(--forest);
  color: var(--ivory-0);
  border-color: var(--forest);
}
.cta:hover .arrow{ color: var(--gold-soft); border-color: var(--gold-soft); transform: translateY(2px); }
.cta .arrow{
  width: 26px; height: 26px; border-radius: 50%;
  border: 1px solid var(--gold);
  display:inline-flex; align-items:center; justify-content:center;
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--gold);
  transition: all .4s;
}

/* ── HERO DECK — the "product shot" ─────────────────── */
.hero-deck{
  position: relative;
  flex: 0 0 auto;
  /* Sized to hold its own against the copy column on the left. The shot is a
     wide 1.58:1 image, so a given width buys little height — at 460px it read
     smaller than the 480px copy block beside it. This scales it up on wide
     screens while staying inside the flex row's spare space at mid widths. */
  width: clamp(340px, 44vw, 620px);
  /* Pulled slightly toward the copy column so the hero reads as one composition
     rather than two blocks either side of a wide gutter. Done with `left` (not a
     transform) because the entrance animation already owns `transform`.
     The offset is a fraction of the viewport so it can never close the flex gap
     entirely: at 900px it moves 18px of the 45px gutter, at 1440px 29px of 72px. */
  left: clamp(-36px, -2vw, 0px);
  display:flex; align-items:center; justify-content:center;
  opacity: 0; animation: rise 1.4s ease .9s forwards;
}
/* The product photo is a transparent cut-out (box + standing card), so it sits
   straight on the ivory like a real product shot — no white plate behind it. */
.hero-deck picture{ display:block; width:100%; }
.hero-deck .product-shot{
  display:block;
  width: 100%;
  height: auto;
  /* soft ground shadow, matching the light in the photograph */
  filter: drop-shadow(0 26px 30px rgba(46,61,47,.18))
          drop-shadow(0 6px 10px rgba(46,61,47,.10));
}

/* scroll hint below hero */
.scroll-hint{
  position: absolute;
  bottom: 32px; left: 50%; transform: translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap: 10px;
  font-family: var(--font-sans);
  font-size: 9px; font-weight:600;
  letter-spacing: .24em; text-transform: uppercase;
  color: var(--ink-faint);
  opacity: 0; animation: rise 1.4s ease 1.2s forwards, bob 3s ease-in-out infinite 2.5s;
}
.scroll-hint::after{
  content:""; width: 1px; height: 32px;
  background: linear-gradient(180deg, var(--gold-hair), transparent);
}
@keyframes bob{
  0%,100% { transform: translate(-50%, 0); }
  50%     { transform: translate(-50%, 6px); }
}

@keyframes rise{
  from{ opacity:0; transform: translateY(16px); }
  to  { opacity:1; transform: translateY(0); }
}

/* ── READING SECTION — pure white stage ─────────────────── */
.reading-section{
  min-height: 100vh;
  padding: 100px clamp(24px, 5vw, 80px);
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  text-align:center;
  position: relative;
  background: #ffffff;
  /* solid so it fully covers the ivory/sage atmosphere behind */
}
.reading-eyebrow{
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 20px;
}
.reading-title{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(30px, 3.6vw, 46px);
  line-height: 1.22;
  color: var(--forest);
  max-width: 26ch;
  margin-bottom: 60px;
  letter-spacing: -.012em;
}

/* Pull pills — how many cards to draw. Sit right under the reading title. */
.draw-pills{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin: -32px 0 44px;
}
.draw-pill{
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .04em;
  color: var(--forest);
  background: rgba(255,255,255,.5);
  border: 1px solid var(--gold);
  border-radius: 999px;
  padding: 11px 24px;
  cursor: pointer;
  transition: all .3s ease;
  backdrop-filter: blur(6px);
}
.draw-pill:hover:not(:disabled){
  background: #fff;
  border-color: var(--forest);
}
.draw-pill.is-active{
  background: var(--forest);
  color: var(--ivory-0);
  border-color: var(--forest);
}
.draw-pill:disabled{ opacity: .45; cursor: default; }
/* Gentle attention pulse when the visitor arrives from the hero CTA */
.draw-pills.nudge .draw-pill{
  animation: pill-nudge 1.2s ease-in-out 2;
}
@keyframes pill-nudge{
  0%,100%{ transform: translateY(0); }
  50%    { transform: translateY(-4px); box-shadow: 0 8px 20px rgba(181,143,74,.22); }
}
@media (prefers-reduced-motion: reduce){
  .draw-pills.nudge .draw-pill{ animation: none; }
}
@media (max-width: 480px){
  .draw-pills{ gap: 8px; }
  .draw-pill{ padding: 10px 16px; font-size: 12px; }
}

/* Deck stage */
.deck-stage{
  position: relative;
  /* Cards are 250px tall and vertically centred. The box needs enough
     head-room for the vertical drop-in: a pulled card starts near the top
     edge of this box and falls into place.
     360px leaves 55px above a centred card, 30px below a resting drawn card,
     and gives the visible drop ~73px to travel. (There is no fan any more, so
     no extra arc head-room is needed.) */
  width: min(760px, 90vw); height: 360px;
  perspective: 1600px;
  /* Deliberately NOT clipped — the drop is kept inside the box by geometry
     instead. Clipping a perspective/3D stage is exactly the kind of thing
     that renders differently on phone GPUs. */
}
/* Idle state — the pre-fanned deck is clickable and hoverable */
.deck-stage.idle{ cursor: pointer; }
.deck-stage.idle .card{
  transition: transform .6s cubic-bezier(.5,.05,.3,1), opacity .4s ease;
}
.card{
  position: absolute;
  left: 50%; top: 50%;
  width: 160px; height: 250px;
  margin-left: -80px; margin-top: -125px;
  border-radius: 11px;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  /* Never the exact identity matrix: a card with no Z translation can be
     flattened out of its own 3D layer, and its rotateY turn-over then
     flickers on some phone GPUs. The engine writes translateZ too, but this
     keeps the resting state safe as well. */
  transform: translate3d(0,0,0.01px);
  transition: transform .6s cubic-bezier(.7,.1,.3,1), opacity .4s ease;
  will-change: transform;
  backface-visibility: hidden;
}
.card .face{
  position:absolute; inset:0; border-radius:12px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  overflow: hidden;
}
.card .face.back{
  background: #2e3d2f;   /* matches the artwork bg so any border area blends */
  box-shadow:
    0 20px 40px rgba(46,61,47,.25),
    0 0 0 1px rgba(181,143,74,.5) inset,
    0 0 0 6px #2e3d2f inset,
    0 0 0 7px rgba(181,143,74,.35) inset;
}
.card .face.back .art{
  position: absolute; inset: 7px;   /* sit just inside the gold hairline */
  background: url("/static/assets/card-back.jpg") center/cover no-repeat;
  border-radius: 6px;
}
.card .face.front{
  transform: rotateY(180deg);
  background: #2e3d2f;                     /* matches the card back */
  color: var(--gold-soft);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding: 22px 18px;
  text-align:center;
  box-shadow:
    0 24px 44px rgba(46,61,47,.28),
    0 0 0 1px rgba(201,166,104,.55) inset,
    0 0 0 6px #2e3d2f inset,
    0 0 0 7px rgba(201,166,104,.45) inset;
}
.card .back-pattern{
  position:absolute; inset: 14px;
  border: 1px solid rgba(181,143,74,.4);
  border-radius: 6px;
  display:flex; align-items:center; justify-content:center;
}
.card .sigil{
  width: 78px; height: 78px;
  color: rgba(201,166,104,.9);
}
.card .corner{
  position:absolute; font-family:var(--font-display);
  font-size: 11px; color: rgba(201,166,104,.6); letter-spacing:.06em;
}
.card .corner.tl{ top: 10px; left: 12px; }
.card .corner.br{ bottom: 10px; right: 12px; transform: rotate(180deg); }

/* PDF-style card face: green bg, gold serif, centered rhythm */
.card .front-num{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .04em;
  color: rgba(201,166,104,.7);
  line-height: 1;
  margin-bottom: 10px;
}
/* Small-caps label like "KEYWORDS" / "NAME" with tiny sparkle-dash flanks */
.card .front-label{
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold-soft);
  margin-bottom: 8px;
}
.card .front-label::before,
.card .front-label::after{
  content: "✦··";
  letter-spacing: .1em;
  font-size: 8px;
  opacity: .75;
}
.card .front-label::after{ content: "··✦"; }

.card .front-kw{
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 10px;
  line-height: 1.55;
  color: var(--gold-soft);
  padding: 0 4px;
  text-wrap: balance;
}

/* Filigree divider between KEYWORDS and NAME */
.card .front-divider{
  display:flex; align-items:center; justify-content:center;
  gap: 6px;
  margin: 10px 0;
  color: rgba(201,166,104,.65);
}
.card .front-divider .line{
  width: 32px; height: 1px;
  background: linear-gradient(90deg, transparent, currentColor);
}
.card .front-divider .line.r{
  background: linear-gradient(90deg, currentColor, transparent);
}
.card .front-divider .diamond{
  font-size: 8px;
  letter-spacing: .2em;
}

.card .front-name{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 12.5px;
  line-height: 1.25;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--gold-soft);
  padding: 0 4px;
  text-wrap: balance;
}
.card.faded{ opacity: 0 !important; pointer-events:none; }

/* Tap-to-peek — on narrow screens the three drawn cards overlap, so a revealed
   card can be tapped to lift it clear to the front and read its face.
   The transform itself is composed inline in app.js (it must preserve the
   card's rotateY flip); CSS only handles affordance + highlight here. */
.card.flipped{
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.card.flipped.peeked .face.front{
  box-shadow:
    0 34px 64px rgba(46,61,47,.34),
    0 0 0 1px rgba(201,166,104,.8) inset,
    0 0 0 6px #2e3d2f inset,
    0 0 0 7px rgba(201,166,104,.6) inset;
}
.card.flipped:focus-visible{
  outline: 2px solid var(--gold);
  outline-offset: 6px;
  border-radius: 14px;
}

/* Peek affordance hint — shown only when the drawn cards actually overlap */
.peek-hint{
  /* Collapsed while hidden so it never holds open space between the cards and
     the interpretations — it only expands on the narrow screens that overlap. */
  margin-top: 0;
  max-height: 0;
  overflow: hidden;
  font-family: var(--font-sans);
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-faint);
  opacity: 0;
  transition: opacity .6s .3s, max-height .35s ease, margin-top .35s ease;
}
.peek-hint.show{ opacity: 1; max-height: 40px; margin-top: 14px; }

.card .position-label{
  position: absolute;
  top: -34px; left: 0; right: 0;
  text-align: center;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: 0;
  transition: opacity .6s .2s;
  transform: rotateY(180deg);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  pointer-events: none;
}
.card.flipped .position-label{ opacity: 1; }

.reading-caption{
  margin-top: 12px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(16px, 1.4vw, 19px);
  color: var(--ink-soft);
  max-width: 32ch;
  line-height: 1.6;
  min-height: 1.6em;
  transition: opacity .5s;
}
/* Once the reading settles the caption is emptied — take its reserved box out
   of the flow so it stops pushing the interpretations down. */
.reading-caption:empty{
  margin-top: 0;
  min-height: 0;
}
/* Interpretation panel — the three revealed meanings, side by side */
.reading-meanings{
  margin-top: 26px;
  max-width: 1000px; width: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  opacity: 0;
  transition: opacity .8s .2s;
}
.reading-meanings.show{ opacity: 1; }
/* Fewer cards → fewer, wider columns */
.reading-meanings[data-count="1"]{ grid-template-columns: 1fr; max-width: 560px; }
.reading-meanings[data-count="2"]{ grid-template-columns: repeat(2, 1fr); max-width: 800px; }
.meaning-cell{
  text-align: center;
  padding: 0 8px;
}
.meaning-cell .m-pos{
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 10px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 12px;
}
.meaning-cell .m-name{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 21px;
  color: var(--forest);
  margin-bottom: 16px;
  letter-spacing: -.005em;
}
.meaning-cell .m-text{
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.6;
  color: rgba(46,61,47,.75);
  text-wrap: pretty;
}
@media (max-width: 820px){
  /* Must out-specify the [data-count] rules above so 2- and 3-card spreads
     still collapse to a single readable column on narrow screens. */
  .reading-meanings,
  .reading-meanings[data-count="1"],
  .reading-meanings[data-count="2"],
  .reading-meanings[data-count="3"]{ grid-template-columns: 1fr; gap: 32px; max-width: 620px; }
}

.reading-actions{
  margin-top: 48px;
  display:flex; gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
  opacity: 0;
  transition: opacity .6s .3s;
  pointer-events: none;
}
.reading-actions.show{ opacity: 1; pointer-events: auto; }
.reading-btn{
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 26px;
  border-radius: 999px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 14px;
  color: var(--forest);
  background: rgba(255,255,255,.4);
  border: 1px solid var(--gold);
  cursor: pointer;
  text-decoration: none;
  transition: all .3s;
  backdrop-filter: blur(6px);
}
.reading-btn:hover{
  background: var(--forest);
  color: var(--ivory-0);
  border-color: var(--forest);
}
.reading-btn--primary{
  background: var(--forest);
  color: var(--ivory-0);
  border-color: var(--forest);
  font-weight: 600;
}
.reading-btn--primary:hover{
  background: var(--gold);
  border-color: var(--gold);
  color: var(--forest);
}
.reading-btn-arrow{ transition: transform .3s ease; }
.reading-btn--primary:hover .reading-btn-arrow{ transform: translateX(3px); }

@media (max-width: 780px){
  .hero{
    flex-direction: column;
    padding: 60px 24px;
    gap: 40px;
    text-align: center;
  }
  .hero-copy{
    text-align: center;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  /* Match the eyebrow decoration on BOTH sides when centered */
  .eyebrow::after{
    content:""; width: 36px; height: 1px;
    background: var(--gold-hair);
  }
  .sub{ margin-left: auto; margin-right: auto; }
  /* The product shot is a wide 1.58:1 image, so a fixed 220px left it small
     and lost on a phone. Scale it to the column instead. */
  .hero-deck{ width: min(84vw, 380px); }
  .scroll-hint{ display: none; }
}

/* Quality floor — keyboard focus + reduced motion */
.cta:focus-visible,
.reading-btn:focus-visible,
.deck-stage.idle:focus-visible{
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 999px;
}
@media (prefers-reduced-motion: reduce){
  *,
  *::before,
  *::after{
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  html{ scroll-behavior: auto; }
}

/* Password gate */
.gate-body .page{ display: none; }
.gate{
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  max-width: 480px;
  margin: 0 auto;
  padding: 72px 28px;
  position: relative;
  z-index: 1;
}
.gate .eyebrow{
  margin-bottom: 12px;
  justify-content: center;
}
.gate .eyebrow::after{
  content:""; width: 36px; height: 1px;
  background: var(--gold-hair);
}
.gate-form{
  margin-top: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  opacity: 0;
  animation: rise 1.2s ease .7s forwards;
}
.gate-label{
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold);
}
.gate-visually-hidden{
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.gate-input{
  width: min(100%, 320px);
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid var(--gold-hair);
  background: rgba(255,255,255,.55);
  color: var(--forest);
  font-family: var(--font-display);
  font-size: 18px;
  outline: none;
  text-align: left;
}
.gate-input::placeholder,
.gate-input::-webkit-input-placeholder{
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  text-align: left;
  color: #8e8e93;
  -webkit-text-fill-color: #8e8e93;
  opacity: 1;
}
.gate-input:focus{
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(181,143,74,.18);
}
button.gate-submit{
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  margin-top: 14px;
  padding: 11px 28px;
  border-radius: 999px;
  border: 1px solid var(--gold);
  background: rgba(255,255,255,.88);
  background-color: rgba(255,255,255,.88);
  background-image: none;
  box-shadow: none;
  font: inherit;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .2em;
  line-height: 1;
  text-transform: uppercase;
  color: var(--forest);
  cursor: pointer;
  transition: background .3s ease, color .3s ease, border-color .3s ease;
}
button.gate-submit:hover{
  background: var(--forest);
  background-color: var(--forest);
  border-color: var(--forest);
  color: var(--ivory-0);
}
button.gate-submit:focus-visible{
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}
.gate-error{
  font-family: var(--font-display);
  font-size: 15px;
  color: #7a3a32;
}