/* ----------------------------------------------------------------------------
 * Igodo landing page, Movement Two (docs/igodo-landing-page-spec.md).
 * One ground, ink, and one warm light. Depth is tone and a 1px hairline,
 * never a shadow. Bronze appears at most once per viewport: the spark in the
 * hero, the one primary button in the form. Motion is limited to calm fades.
 * Token values mirror constants/theme.ts exactly.
 * -------------------------------------------------------------------------- */

@font-face {
  font-family: 'Fraunces';
  src: url('fonts/Fraunces-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Fraunces';
  src: url('fonts/Fraunces-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Hanken Grotesk';
  src: url('fonts/HankenGrotesk.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Hanken Grotesk';
  src: url('fonts/HankenGrotesk-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  --wall: #F2EBDC;
  --ink: #1F1A12;
  --warm: #B57738;
  --quiet: #9C907C;
  --card: #FAF6EA;
  --hair: #E4DBC8;
  --warm-soft: #EBD9B6;
  --cream: #FBF7EC;
  --error: #A6442E;

  --serif: 'Fraunces', Georgia, serif;
  --sans: 'Hanken Grotesk', system-ui, sans-serif;

  --radius-field: 10px;
  --radius-button: 12px;
  --radius-card: 16px;

  --measure: 38rem;
  --fade: 400ms;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  background: var(--wall);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection {
  background: var(--warm-soft);
}

/* ----------------------------------------------------------------------------
 * The lockup: the open-circle mark riding the middle o of the wordmark, as in
 * the app's AuthHeader, scaled up to own the hero: the word at 44px on phones
 * and 56px from 600px up. Static values re-derived at each size F from the
 * app's metrics (components/AuthHeader.tsx, components/brand/Wordmark.tsx),
 * Fraunces Regular upm 2000, run advances for 'ıgodo'
 * [531, 1035, 1076, 1104, 1076], tracking a fixed 0.3px after each glyph:
 *   mark        = F x 42/40, the AuthHeader ratio
 *   mark shift  = middle o centre - word box centre
 *               = (2104 x F/2000 + 0.6) - (4822 x F/2000 + 1.5) / 2
 *               = -6.9px at 44, -8.7px at 56
 *   line box    = round(F x 1.18) = 52px at 44, 66px at 56
 *   spark       = diameter round(F x 0.13): 6px at 44, 7px at 56
 *                 left F x 0.067: 2.9px at 44, 3.8px at 56
 *                 top F x 0.2245 below the line box top: 9.9px at 44,
 *                 12.6px at 56
 * Fraunces carries USE_TYPO_METRICS with typo equal to hhea (1956/-510), so
 * the browser centres the same band in the line box that the app does and
 * the ratios carry over unchanged.
 * -------------------------------------------------------------------------- */

.lockup {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: var(--ink);
}

.lockup-mark {
  width: 46.2px;
  height: 46.2px;
  transform: translateX(-6.9px);
}

.wordmark {
  position: relative;
  margin-top: 8px;
}

.wordmark-word {
  display: block;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 44px;
  line-height: 52px;
  letter-spacing: 0.3px;
  color: var(--ink);
}

.wordmark-spark {
  position: absolute;
  left: 2.9px;
  top: 9.9px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--warm);
}

@media (min-width: 600px) {
  .lockup-mark {
    width: 58.8px;
    height: 58.8px;
    transform: translateX(-8.7px);
  }

  .wordmark-word {
    font-size: 56px;
    line-height: 66px;
  }

  .wordmark-spark {
    left: 3.8px;
    top: 12.6px;
    width: 7px;
    height: 7px;
  }
}

/* ----------------------------------------------------------------------------
 * Layout: one centred column, gallery air between sections, hairlines for
 * separation.
 * -------------------------------------------------------------------------- */

.column {
  max-width: var(--measure);
  margin-inline: auto;
  padding-inline: 24px;
}

.hero {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding-block: 64px;
}

.hero h1 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(2.375rem, 5vw + 1rem, 3.25rem);
  line-height: 1.15;
  margin-top: 40px;
  max-width: 16em;
}

.hero-sub {
  font-size: 18px;
  line-height: 1.5;
  margin-top: 16px;
  max-width: 26em;
}

.hero .button {
  margin-top: 40px;
}

.hero-note {
  font-size: 14px;
  line-height: 1.4;
  color: var(--quiet);
  margin-top: 16px;
}

section {
  border-top: 1px solid var(--hair);
  padding-block: clamp(64px, 10vw, 112px);
}

h2 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(1.75rem, 2vw + 1rem, 2.125rem);
  line-height: 1.2;
  margin-bottom: 32px;
}

h3 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 21px;
  line-height: 27px;
}

.stand p + p {
  margin-top: 24px;
}

/* ----------------------------------------------------------------------------
 * Framed app views: three PNG screenshots in quiet frames, the hairline the
 * only edge, no shadow, on the wall. Beside their text from 600px up,
 * alternating sides down the page (right, left, right); stacked beneath the
 * text on phones. Sources are normalised to 1080px wide, comfortably past
 * 3x of the 240px frame.
 *
 * Composition rule: a pair whose text block nearly fills the frame's height
 * shares one top line, heading top on the frame's top edge (media-pair-top:
 * the stand). A pair whose text would leave a dead field beneath, more than
 * roughly 180px, centres the text block against the frame instead (the two
 * how-it-works beats).
 * -------------------------------------------------------------------------- */

.media-pair + .media-pair,
.media-pair + .beat {
  margin-top: 48px;
}

.media-frame {
  width: min(240px, 100%);
  margin: 32px auto 0;
  border: 1px solid var(--hair);
  border-radius: 28px;
  overflow: hidden;
  background: var(--wall);
}

.media-frame img {
  display: block;
  width: 100%;
  height: auto;
}

@media (min-width: 600px) {
  .media-pair {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 240px;
    gap: 40px;
    align-items: center;
  }

  .media-pair .media-frame {
    margin: 0;
  }

  .media-pair-top {
    align-items: start;
  }

  .media-pair-flip {
    grid-template-columns: 240px minmax(0, 1fr);
  }

  .media-pair-flip .media-frame {
    order: -1;
  }
}

/* How it works: three beats, a quiet numeral beside each. */

.beat {
  display: flex;
  gap: 20px;
}

.beat-number {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 21px;
  line-height: 27px;
  color: var(--quiet);
  min-width: 1.2em;
}

.beat p {
  margin-top: 8px;
}

/* The house rules: the app's three rules verbatim (components/HouseRules.tsx),
   the lead semibold in ink. On phones the compact list, lead running into
   body, the 24px gap mirroring the app's Spacing.lg between rules. From
   600px up, three equal columns: each lead its own line over its body, the
   block lead pushing the body text into its own block beneath, the three
   leads sharing one baseline across the row. The heading above keeps the one
   32px h2 gap every section shares. */

.rules-list {
  list-style: none;
}

.rules-list li + li {
  margin-top: 24px;
}

.rules-list strong {
  font-weight: 600;
}

@media (min-width: 600px) {
  .rules-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
  }

  .rules-list li + li {
    margin-top: 0;
  }

  .rules-list strong {
    display: block;
    margin-bottom: 8px;
  }
}

/* First Light: the founding section, two paths side by side, then the form. */

.founding-intro {
  margin-bottom: 40px;
}

.paths {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

@media (max-width: 600px) {
  .paths {
    grid-template-columns: 1fr;
  }
}

.card {
  background: var(--card);
  border: 1px solid var(--hair);
  border-radius: var(--radius-card);
}

.path {
  padding: 24px;
}

.path p {
  margin-top: 12px;
  font-size: 15px;
  line-height: 22px;
}

/* ----------------------------------------------------------------------------
 * The form. Card panel, hairline, no shadow. Field styling mirrors the app's
 * Input; the submit button mirrors the app's primary Button. The focus border
 * is ink rather than the app's bronze so the panel keeps to one bronze
 * accent, the button.
 * -------------------------------------------------------------------------- */

.form-panel {
  margin-top: 40px;
  padding: 32px 24px;
}

@media (min-width: 600px) {
  .form-panel {
    padding: 40px;
  }
}

.form-stage {
  transition: opacity var(--fade) ease;
}

.form-stage.is-faded {
  opacity: 0;
}

.field-label {
  display: block;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 13px;
  color: var(--ink);
  margin-bottom: 8px;
}

input[type='email'] {
  width: 100%;
  background: var(--card);
  border: 1px solid var(--hair);
  border-radius: var(--radius-field);
  padding: 12px 16px;
  font-family: var(--sans);
  font-size: 16px;
  color: var(--ink);
  min-height: 50px;
}

input[type='email']:focus {
  outline: none;
  border-color: var(--ink);
}

.choice {
  border: 0;
  margin-top: 24px;
}

.choice-options {
  display: flex;
  gap: 8px;
}

.choice-option {
  flex: 1;
}

.choice-option input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.choice-option span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--hair);
  border-radius: 9999px;
  font-size: 15px;
  color: var(--ink);
  cursor: pointer;
  transition: background-color 200ms ease;
}

.choice-option input:checked + span {
  background: var(--warm-soft);
  border-color: var(--warm-soft);
  font-weight: 600;
}

.choice-option input:focus-visible + span {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 12px 24px;
  border: 0;
  border-radius: var(--radius-button);
  font-family: var(--sans);
  font-weight: 600;
  font-size: 16px;
  text-decoration: none;
  cursor: pointer;
  transition: opacity 200ms ease, background-color 200ms ease;
}

.button:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

.button-primary {
  background: var(--warm);
  color: var(--cream);
  width: 100%;
  margin-top: 32px;
}

.button-primary:hover {
  opacity: 0.92;
}

.button-primary:active {
  opacity: 0.8;
}

.button-primary:disabled {
  opacity: 0.45;
  cursor: default;
}

.button-quiet {
  background: transparent;
  border: 1.5px solid var(--ink);
  color: var(--ink);
}

.button-quiet:hover {
  background: var(--card);
}

.button-quiet:active {
  opacity: 0.8;
}

.form-failure {
  font-size: 14px;
  line-height: 1.4;
  color: var(--error);
  margin-top: 16px;
  transition: opacity var(--fade) ease;
}

.form-failure.is-faded {
  opacity: 0;
}

.form-note {
  font-size: 13px;
  line-height: 18px;
  color: var(--quiet);
  margin-top: 16px;
  text-align: center;
}

.form-success {
  text-align: center;
  padding-block: 24px;
}

.form-success .success-lead {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 21px;
  line-height: 27px;
}

.form-success .success-body {
  margin-top: 8px;
}

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

footer {
  border-top: 1px solid var(--hair);
  padding-block: 48px;
  text-align: center;
}

.footer-line {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 18px;
}

.footer-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px 24px;
  margin-top: 24px;
  font-size: 13px;
  color: var(--quiet);
}

.footer-nav a {
  color: var(--quiet);
  text-decoration: none;
  transition: color 200ms ease;
}

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

.footer-nav a:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

/* ----------------------------------------------------------------------------
 * The legal stubs.
 * -------------------------------------------------------------------------- */

.stub {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
}

.stub-home {
  display: block;
  text-decoration: none;
}

.stub-home:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 4px;
}

.stub h1 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 28px;
  line-height: 34px;
  margin-top: 48px;
}

.stub p {
  margin-top: 16px;
  color: var(--ink);
}

/* Calm is the default; remove what little motion there is on request. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .form-stage,
  .form-failure,
  .choice-option span,
  .button,
  .footer-nav a {
    transition: none;
  }
}