/* ============================================================================
   THE GATE — our own form, matched to the measured Flodesk popup.

   >>> EVERY NUMBER IN THIS FILE CAME OUT OF getComputedStyle ON THE LIVE
       FLODESK POPUP. NONE OF IT WAS CHOSEN BY EYE. <<<

   The measurements, the raw served payloads and the photos are committed in
   reference/flodesk/. The Flodesk forms themselves are being deleted, so that
   directory is the only reference once they are gone. If you change a value
   here, change it there too and say why, or the match stops being auditable.

   Measured -> implemented, the values that matter:
     panel bg          rgb(202,150,63)                  #CA963F
     panel radius      0px                              0
     panel padding     0 (inner blocks carry it)        0, 24px sides inside
     panel shadow      rgba(0,0,0,.11) 6.5px 11.3px 19px
     panel width       511.99px / 321.67px phone        max-width 512px
     dialog margin     30px top and bottom
     backdrop          rgba(236,236,236,0.5)            a LIGHT scrim, not dark
     photo             512 x 289.3, radius 0, centred   aspect-ratio 400/226
     headline          40px / 48px, weight 400
     body              20px / 26px, weight 300, ls .1px
     field             46px tall, transparent, bottom rule only, radius 0
     field padding     12px 20px
     field type        14px, ls .4px, UPPERCASE
     field pitch       61.98px top-to-top  ->  46 + 16 margin
     placeholder       transparent (the label carries the text)
     consent box       18x18, radius 4px
     interest box      18x18, radius 0 (a heart, not a tick)
     button            464 x 57.64, radius 29px, transparent, 1px solid #000
     button type       15px, ls .4px, UPPERCASE
   Vertical rhythm measured from the panel top:
     photo 0->289.3 | headline 329.3 | body 401.3 | fields 485.2
     fields end 717.2 | consent 733.2 | interests 790.9 | button 972.6->1030.2
     panel height 1070.3  ->  40px of air under the button
   ========================================================================== */

/* The type could NOT be matched: all three Flodesk faces are licensed to
   Flodesk, not to us. Breathing-Personal-Use-Only is personal-use-only by its
   own filename; futura-pt and aktiv-grotesk come from Flodesk's domain-locked
   Adobe kit. Sizes, weights, line-heights and tracking are matched exactly;
   only the families differ. See MEASUREMENTS.md. */
@font-face {
  font-family: 'Sacramento';
  src: url('/assets/fonts/sacramento-latin.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Jost';
  src: url('/assets/fonts/jost-var-latin.woff2') format('woff2');
  font-weight: 300 500;
  font-style: normal;
  font-display: swap;
}

.gate {
  --gate-gold: #CA963F;
  --gate-ink: #000;
  --gate-pad: 24px;

  position: fixed;
  inset: 0;
  z-index: 3000;
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  margin: 0;
  padding: 30px 0;
  border: 0;
  background: rgba(236, 236, 236, 0.5);   /* measured: a LIGHT scrim */
  overflow-y: auto;
  overscroll-behavior: contain;
}
.gate[open] { display: flex; align-items: flex-start; justify-content: center; }
.gate::backdrop { background: rgba(236, 236, 236, 0.5); }

.gate__panel {
  position: relative;
  width: 100%;
  max-width: 512px;
  margin: auto;
  background: var(--gate-gold);
  border-radius: 0;
  box-shadow: rgba(0, 0, 0, 0.11) 6.5px 11.3px 19px 0;
  padding-bottom: 40px;                    /* measured air under the button */
}

.gate__close {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--gate-ink);
  cursor: pointer;
}
.gate__close:focus-visible { outline: 2px solid var(--focus-dark); outline-offset: -4px; box-shadow: inset 0 0 0 4px var(--focus-light); }

/* Full bleed, square, cropped dead centre — measured, not chosen. */
.gate__photo { display: block; }
.gate__photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 400 / 226;
  object-fit: cover;
  object-position: 50% 50%;
}

.gate__body { padding: 0 var(--gate-pad); }
.gate__body:focus { outline: none; }

.gate__headline {
  margin: 40px 0 0;                        /* photo -> headline = 40px */
  font-family: 'Sacramento', 'Segoe Script', cursive;
  font-size: 40px;
  line-height: 48px;
  font-weight: 400;
  letter-spacing: normal;
  color: var(--gate-ink);
  text-align: left;
}

.gate__intro {
  margin: 24px 0 0;                        /* headline -> body = 24px */
  font-family: 'Jost', var(--font-body);
  font-size: 20px;
  line-height: 26px;
  font-weight: 300;
  letter-spacing: 0.1px;
  color: var(--gate-ink);
}

.gate__form { margin: 32px 0 0; }          /* body -> first field = 32px */

/* --- fields ---------------------------------------------------------------
   Transparent, with a bottom rule only. The visible "FIRST NAME" is a real
   <label> sitting where a placeholder would be, exactly as the popup does it —
   its placeholder is transparent. Ours stays in the accessibility tree at all
   times, so a screen reader always announces the field even while the visual
   text is hidden during typing.
   -------------------------------------------------------------------------- */

.gate__field { position: relative; margin: 0 0 16px; }   /* 46 + 16 = 62 pitch */

.gate__input {
  display: block;
  width: 100%;
  height: 46px;
  padding: 12px 20px;
  border: 0;
  border-bottom: 1px solid var(--gate-ink);
  border-radius: 0;
  background: transparent;
  font-family: 'Jost', var(--font-body);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--gate-ink);
}
.gate__input::placeholder { color: transparent; }
/* DELIBERATE DIVERGENCE. The popup has NO focus indication on its fields at
   all, which fails WCAG 2.4.7. Accessibility was named as a permitted
   improvement, so ours gets a visible ring. */
.gate__input:focus-visible { outline: 2px solid var(--gate-ink); outline-offset: 2px; }

.gate__label {
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  font-family: 'Jost', var(--font-body);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--gate-ink);
  transition: opacity 0.15s ease;
}
.gate__input:focus + .gate__label,
.gate__input:not(:placeholder-shown) + .gate__label { opacity: 0; }

/* --- honeypot -------------------------------------------------------------
   Off screen rather than display:none, because bots routinely skip fields that
   are display:none and fill everything else. aria-hidden + tabindex -1 keep it
   away from real people and assistive tech. */
.gate__hp {
  position: absolute !important;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* --- consent --------------------------------------------------------------
   Measured 18x18 with a 4px radius, and it sits inset from the left rather
   than flush, so the row reads as centred. */
.gate__consent {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 16px 0 0;                        /* fields -> consent = 16px */
  padding-left: 88px;
  cursor: pointer;
}
.gate__consent input { position: absolute; opacity: 0; width: 18px; height: 18px; margin: 0; }
.gate__tick {
  flex: none;
  width: 18px;
  height: 18px;
  border: 1px solid var(--gate-ink);
  border-radius: 4px;
  position: relative;
}
.gate__tick::after {
  content: '';
  position: absolute;
  left: 5px; top: 1px;
  width: 5px; height: 10px;
  border: solid var(--gate-ink);
  border-width: 0 1.6px 1.6px 0;
  transform: rotate(45deg);
  opacity: 0;
  transition: opacity 0.12s ease;
}
.gate__consent input:checked + .gate__tick::after { opacity: 1; }
.gate__consent input:focus-visible + .gate__tick { outline: 2px solid var(--gate-ink); outline-offset: 2px; }
.gate__consent-text {
  font-family: 'Jost', var(--font-body);
  font-size: 14px;
  font-weight: 300;
  letter-spacing: 0.1px;
  color: var(--gate-ink);
}

/* --- interests ------------------------------------------------------------
   Measured: legend on the left, the four boxes in a column starting 268px into
   a 512px panel, hearts rather than ticks, no corner radius. */
.gate__interests {
  margin: 40px 0 0;                        /* consent -> interests = ~40px */
  padding: 0;
  border: 0;
}
/* The row is a plain div, NOT the fieldset, because a <legend> cannot be a flex
   item — doing it that way collapsed the two columns into one. */
.gate__interests-row { display: flex; gap: 16px; }
.gate__interests-label {
  flex: none;
  width: 132px;
  padding: 0;
  font-family: 'Jost', var(--font-body);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--gate-ink);
}
.gate__interests-list { display: flex; flex-direction: column; gap: 17px; }

.gate__interest { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.gate__interest input { position: absolute; opacity: 0; width: 18px; height: 18px; margin: 0; }
.gate__heartbox { flex: none; width: 18px; height: 18px; color: var(--gate-ink); display: block; }
.gate__heart { display: block; }
.gate__interest input:checked + .gate__heartbox .gate__heart path { fill: currentColor; }
.gate__interest input:focus-visible + .gate__heartbox { outline: 2px solid var(--gate-ink); outline-offset: 2px; }
.gate__interest-text {
  font-family: 'Jost', var(--font-body);
  font-size: 14px;
  font-weight: 300;
  letter-spacing: 0.1px;
  line-height: 1.3;
  text-transform: uppercase;
  color: var(--gate-ink);
}

/* --- button ---------------------------------------------------------------
   Measured: full width, 57.64 tall, 29px pill, TRANSPARENT with a 1px black
   rule, uppercase 15px. */
.gate__submit {
  display: block;
  width: 100%;
  margin: 40px 0 0;
  padding: 16px 48px;
  border: 1px solid var(--gate-ink);
  border-radius: 29px;
  background: transparent;
  color: var(--gate-ink);
  font-family: 'Jost', var(--font-body);
  font-size: 15px;
  font-weight: 400;
  line-height: 24px;                       /* 16+16+24+2 = 58 ~ measured 57.64 */
  letter-spacing: 0.4px;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}
/* DELIBERATE DIVERGENCE. Measured hover is nothing at all — the only :hover
   rule on their button is `outline: none`. A 58px primary button with no hover
   feedback reads as broken, so this adds the least it can: an ink fill. Rest
   state is untouched and still matches exactly. */
.gate__submit:hover { background: var(--gate-ink); color: var(--gate-gold); }
.gate__submit:focus-visible { outline: 2px solid var(--gate-ink); outline-offset: 3px; }
.gate__submit[disabled] { opacity: 0.8; cursor: default; }

.gate__note {
  margin: 14px 0 0;
  min-height: 1.2em;
  font-family: 'Jost', var(--font-body);
  font-size: 13px;
  font-weight: 300;
  letter-spacing: 0.1px;
  color: var(--gate-ink);
}
.gate__note[data-state="error"] { font-weight: 400; }

/* Page behind a modal must not scroll under it. showModal() does not do this. */
html.gate-is-open, html.gate-is-open body { overflow: hidden; }

/* ------------------------------------------------------------------ PHONE --
   Measured at a real 390px viewport: panel 321.67 wide, field 273.67, button
   273.67, and every type size unchanged. The panel simply narrows. Below that
   the two-column interests row has no room, so it stacks — the one layout
   change, and it is a reflow rather than a restyle. */
@media (max-width: 575px) {
  .gate { padding: 0; }
  .gate__panel { max-width: none; min-height: 100%; padding-bottom: 48px; }
  .gate__interests-row { flex-direction: column; gap: 14px; }
  .gate__interests-label { width: auto; }
  .gate__consent { padding-left: 0; }
}