/* ============================================================
   meridianbound.uk — landing page

   Fresh file. Recipes are copied from frontend/app/notebook.css
   (paper theme only) rather than imported, so the landing page
   stays decoupled from the app build.

   Grid discipline — the whole page is one scrolling document:
   - every text style has line-height: var(--lh) (or a multiple)
   - every vertical margin/padding is a grid multiple via calc()
   - the rules' phase is tuned once via --rule-offset so the
     16px body baseline floats ~4px above its rule (the notebook
     feel: written on the line, not stamped onto it); classes at
     other font sizes carry a transform-only baseline nudge
     (translateY never shifts flow, so seated blocks stay seated)
============================================================ */

@font-face {
  font-family: "EB Garamond";
  src: url("/fonts/eb-garamond.woff2") format("woff2");
  font-weight: 400 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "EB Garamond";
  src: url("/fonts/eb-garamond-italic.woff2") format("woff2");
  font-weight: 400 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("/fonts/jetbrains-mono.woff2") format("woff2");
  font-weight: 400 500;
  font-style: normal;
  font-display: swap;
}

:root {
  --paper:    #f0e3c4;
  --ink:      #243044;
  --ink-soft: #4d5a72;
  --ink-faint:#968a6e;
  --accent:   #8a3a3a;

  --font-display: "EB Garamond", Georgia, serif;
  --font-mono:    "JetBrains Mono", ui-monospace, monospace;

  /* the grid */
  --lh: 30px;           /* rule pitch (36px at >=900px) */
  --margin-x: 50px;     /* red margin rule x position */
  --clear-top: 150px;   /* cleared band above the first rule (5 rules) */
  --rule-offset: 24px;  /* phase: 16px baselines float ~4px above rules */
  --rule-color: rgba(36, 48, 68, 0.10);
}

@media (min-width: 900px) {
  :root {
    --lh: 36px;
    --margin-x: 100px;
    --clear-top: 180px; /* 5 rules */
    --rule-offset: 27px;
  }
}

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

html { background: var(--paper); }

body {
  font-family: var(--font-display);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* --- desk and sheet ----------------------------------------- */
/* Mobile: the sheet is full-bleed (.page and .content read as one
   surface). Desktop: .page becomes a darker desk and .content the
   ruled sheet floating on it; the rule phase rides with the sheet
   because the paper recipe is painted on .content. */
.page {
  min-height: 100vh;
  background: var(--paper);
}

/* the paper (recipe from notebook.css .notebook-page) */
.content {
  min-height: 100vh;
  max-width: 740px;
  padding: 0 20px calc(var(--lh) * 2) calc(var(--margin-x) + 16px);
  background-color: var(--paper);
  background-image:
    /* red margin rule */
    linear-gradient(90deg,
      transparent 0 var(--margin-x),
      rgba(138, 58, 58, 0.65) var(--margin-x) calc(var(--margin-x) + 2px),
      transparent calc(var(--margin-x) + 2px)),
    /* fine grain */
    radial-gradient(rgba(36, 48, 68, 0.040) 1px, transparent 1.5px),
    radial-gradient(rgba(36, 48, 68, 0.025) 1px, transparent 1.5px),
    /* warm page tint */
    radial-gradient(circle at 80% 20%, rgba(226, 210, 173, 0.55), transparent 60%),
    /* clear top margin (hides rules behind the masthead) */
    linear-gradient(180deg, var(--paper) var(--clear-top), transparent var(--clear-top)),
    /* ruled lines */
    repeating-linear-gradient(180deg,
      transparent 0 calc(var(--lh) - 1px),
      var(--rule-color) calc(var(--lh) - 1px) var(--lh));
  background-size:
    100% 100%,
    9px 9px,
    17px 17px,
    100% 100%,
    100% 100%,
    100% var(--lh);
  background-position:
    0 0,
    0 0,
    4px 5px,
    0 0,
    0 0,
    0 var(--rule-offset);
}

@media (min-width: 900px) {
  .page {
    background: color-mix(in srgb, var(--paper) 72%, var(--ink) 28%);
    padding: calc(var(--lh) * 2) 24px;
  }
  .content {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 calc(var(--margin-x) + 32px) calc(var(--lh) * 2);
    box-shadow: 0 4px 30px rgba(36, 48, 68, 0.25);
  }
}

p, li { max-width: 56ch; }

/* --- masthead (brand recipe from .mobile-brand-text) -------- */
/* Occupies exactly the cleared top band so the hero starts on
   the first rule. Baseline-aligned row: brand left, crumb right. */
.masthead {
  height: var(--clear-top);
  padding-top: calc(var(--lh) * 2);
  display: flex;
  flex-wrap: wrap; /* narrow screens: crumb drops to its own line, right-aligned */
  justify-content: space-between;
  align-items: baseline;
}
.brand {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 28px;
  line-height: var(--lh);
  color: var(--ink);
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
}
.brand::before {
  content: "✦";
  font-style: normal;
  font-size: 15px;
  color: var(--accent);
  transform: translateY(-3px);
}
/* mono tracked micro-label, echoing the section labels */
.crumb {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  white-space: nowrap;
  margin-left: auto;
  line-height: var(--lh);
  color: var(--ink-faint);
}

/* --- mono small-caps labels (.write-field-label idiom) ------ */
.label {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 10px;
  letter-spacing: 0.25em;
  color: var(--ink-faint);
  line-height: var(--lh);
  display: block;
  /* baseline nudge (measured): 10px mono sits 2px high of the rule */
  transform: translateY(2px);
}
/* section-opening labels step up and take the accent */
section > .label {
  font-size: 12px;
  color: var(--accent);
  transform: translateY(1px); /* baseline nudge (measured) */
}
@media (min-width: 900px) {
  section > .label { font-size: 13px; }
}

/* --- hero --------------------------------------------------- */
h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 44px;
  line-height: calc(var(--lh) * 2);
  letter-spacing: -0.01em;
  text-wrap: balance;
  color: var(--ink);
  /* baseline nudge (measured): floats the last line on its rule
     without shifting flow */
  transform: translateY(5px);
}
@media (min-width: 900px) {
  h1 { font-size: 66px; transform: translateY(36px); }
}
.subhead {
  font-size: 18px;
  line-height: var(--lh);
  max-width: 46ch;
  color: var(--ink-soft);
  /* nets one visible blank line: the h1's display translateY
     eats one row */
  margin-top: calc(var(--lh) * 2);
  transform: translateY(-1px); /* baseline nudge (measured) */
}
@media (min-width: 900px) {
  .subhead { font-size: 19px; }
}

/* --- body sections ------------------------------------------ */
/* one blank line between blocks; the star separators carry one
   extra line each side */
section { margin-top: var(--lh); }
.hero { margin-top: 0; }

/* section separators: the brand ✦, centred over the text column,
   floating between the rule lines (meridian close + beta divider) */
.problem::before,
.beta::before {
  content: "✦";
  display: block;
  max-width: 55ch; /* ≈ the 46ch subhead column in this glyph's ch */
  text-align: center;
  font-size: 15px;
  line-height: var(--lh);
  color: var(--accent);
  margin-bottom: var(--lh);
  /* centres the glyph ink in the band (measured: ✦ ink is 12px up,
     1px down from the baseline, which floats 4px above the rule) */
  transform: translateY(-5.5px);
}
@media (min-width: 900px) {
  .problem::before,
  .beta::before { transform: translateY(-8.5px); }
}

.problem p {
  font-size: 16px;
  line-height: var(--lh);
  color: var(--ink-soft);
}
/* the opening line is a statement beat, one rule tall */
.problem p:first-of-type {
  font-style: italic;
  font-size: 27px;
  color: var(--ink);
  transform: translateY(-4px); /* baseline nudge (measured) */
}
@media (min-width: 900px) {
  .problem p:first-of-type { font-size: 32px; transform: translateY(-6px); }
}
.problem p + p { margin-top: var(--lh); }

.holds ol {
  list-style: none;
  counter-reset: holds;
  margin-top: var(--lh);
}
.holds li {
  counter-increment: holds;
  font-size: 16px;
  line-height: var(--lh);
  color: var(--ink-soft);
  position: relative;
  padding-left: 52px; /* 40px numeral gutter + breathing room */
}
@media (min-width: 900px) {
  .holds li { padding-left: 60px; }
}
.holds li + li { margin-top: var(--lh); }
.holds li::before {
  content: counter(holds, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0;
  width: 40px;
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 12px;
  line-height: var(--lh);
  color: var(--accent);
  transform: translateY(1px); /* baseline nudge (measured) */
}
/* the lead phrase becomes its own display line */
.holds strong {
  display: block;
  font-weight: 500;
  font-size: 18px;
  line-height: var(--lh);
  color: var(--ink);
  transform: translateY(-1px); /* baseline nudge (measured) */
}
@media (min-width: 900px) {
  .holds strong { font-size: 19px; }
}

/* direct children only: the form's paragraphs (.privacy-line,
   .form-state) and the section label keep their own sizes */
.beta > p:not(.label) {
  font-size: 16px;
  line-height: var(--lh);
}
.beta > p + p { margin-top: var(--lh); }
/* the intro line steps up to meet the ask */
.beta > .label + p {
  font-size: 18px;
  transform: translateY(-1px); /* baseline nudge (measured) */
}
@media (min-width: 900px) {
  .beta > .label + p { font-size: 19px; }
}

/* --- the form ----------------------------------------------- */
#signup-form { margin-top: var(--lh); }

.field-label {
  margin: 0;
  color: var(--accent);
}

#email {
  font-family: var(--font-display);
  font-size: 20px;
  color: var(--ink);
  background: transparent;
  border: none;
  border-bottom: 1.5px solid color-mix(in srgb, var(--accent) 42%, transparent);
  outline: none;
  border-radius: 0;
  width: 100%;
  max-width: 34ch;
  height: var(--lh);
  line-height: var(--lh);
  display: block;
  transition: border-color 160ms ease;
  transform: translateY(-6px); /* seats the underline on a rule */
}
@media (min-width: 900px) {
  #email { transform: translateY(-9px); }
}
#email::placeholder { color: var(--ink-faint); font-style: italic; }
#email:focus { border-bottom-color: color-mix(in srgb, var(--accent) 75%, transparent); }

/* honeypot: off-screen, not display:none */
.hp {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* interaction-only appearance: invisible and zero-height for most
   visitors, so the slot collapses and leaves no gap. When a real
   challenge renders it grows in flow between email and button —
   off-grid for that rare case, accepted. */
.turnstile-slot { margin-top: 0; }

/* --- hand-drawn oval CTA (recipe from .cta) ----------------- */
.cta {
  position: relative;
  z-index: 0; /* stacking context so the oval fill stays behind the text */
  display: inline-block;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 18px;
  line-height: var(--lh);
  color: var(--accent);
  padding: 0 20px;
  margin-top: var(--lh);
  background: none;
  border: 0;
  cursor: pointer;
  transition: color 160ms ease;
  transform: translateY(-1px); /* baseline nudge (measured) */
}
.cta::before {
  content: "";
  position: absolute;
  inset: -3px -10px;
  z-index: -1;
  border: 1.4px solid var(--accent);
  border-radius: 48% 52% 58% 42% / 52% 56% 46% 54%;
  opacity: 0.7;
  pointer-events: none;
  transition: background-color 160ms ease, opacity 160ms ease;
}
.cta:not(:disabled):hover,
.cta:not(:disabled):focus-visible {
  color: var(--paper);
}
.cta:not(:disabled):hover::before,
.cta:not(:disabled):focus-visible::before {
  background-color: var(--accent);
  opacity: 1;
}
.cta:disabled { opacity: 0.55; cursor: default; }

.privacy-line {
  font-size: 13px;
  font-style: italic;
  line-height: var(--lh);
  color: var(--ink-faint);
  margin-top: var(--lh);
  transform: translateY(1px); /* baseline nudge (measured), matches .foot p */
}

.form-state {
  font-size: 15px;
  font-style: italic;
  line-height: var(--lh);
  color: var(--ink-soft);
  margin-top: var(--lh);
}
.form-state.error { color: var(--accent); }
.form-state.success { color: var(--ink); }
.form-state.success::before {
  content: "✦";
  font-style: normal;
  font-size: 12px;
  color: var(--accent);
  margin-right: 8px;
}

.noscript-line {
  font-size: 15px;
  font-style: italic;
  line-height: var(--lh);
  color: var(--ink-soft);
  margin-top: var(--lh);
}

/* --- foot --------------------------------------------------- */
.foot { margin-top: var(--lh); }
.foot p {
  font-size: 13px;
  line-height: var(--lh);
  color: var(--ink-faint);
  transform: translateY(1px); /* baseline nudge (measured) */
}
.foot a { color: var(--ink-soft); }