/* ==========================================================================
   Moreneta — pre-launch landing page
   Hand-authored from the Moreneta design system. This file is authoritative.
   Canvas: docs/design/canvas/ (Palette.dc.html carries the measured ratios)

   R14: ZERO third-party requests. Never add an @import or a url() pointing
   at any host other than this one. Fonts are self-hosted below. The design
   canvas pulls them from Google Fonts because that is the only font host it
   can reach; this page must not.

   Palette provenance: La Moreneta of Montserrat, secularly. The statue is
   polychrome painted wood, so the pigments are Romanesque — azurite,
   verdigris, orpiment, gilding. The ground is warm patina rather than black
   because her darkness came from candle smoke and oxidising varnish, not
   from the carving. No red anywhere; nothing here needs it.

   CONTRAST — every pair below was computed, not eyeballed.
     On chalk #FAF6EE:  ink 15.6  muted-light 6.0  azure-deep 6.0
                        jade-deep 4.8  saffron-deep 4.7  brass-deep 5.7
                        sage-deep 6.2  clay-deep 5.7   edge-light 3.8
     On patina #5A3E18: paper 8.8   muted-dark 5.6   brass 5.2  azure 5.6
                        jade 5.3    saffron 5.2      sage 5.1   clay 5.1
                        faint-dark 4.8               edge-dark 3.7
     On patina-sunk #4A3113: paper 10.8  muted-dark 6.9

   TWO RULES THAT ARE NOT NEGOTIABLE
     1. A pigment's light value never appears on a light ground, or the
        reverse. brass-deep on patina is unreadable; brass on chalk is 2.1:1.
     2. The --hairline tokens are decorative rules ONLY — never a field
        border. That is what --edge is for, at 3.7-3.8:1 as a UI boundary.
   ========================================================================== */

/* --- Self-hosted fonts (R14) -------------------------------------------
   Drop latin-subset woff2 files into assets/fonts/ with the names below.
   All three families are SIL Open Font License, so self-hosting is
   permitted. If the files are absent the stacks fall through to system
   fonts and the page still renders correctly — nothing here breaks.
   Bricolage Grotesque and Noto Sans also ship as variable fonts; a single
   variable file per family works if you prefer, adjust the src accordingly.

   NOTE: these files are NOT yet in the repo. Until they are, the page runs
   on its fallbacks. See docs/runbooks/2026-09-landing-page-deploy.md.
   ---------------------------------------------------------------------- */

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("assets/fonts/bricolage-grotesque-700.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("assets/fonts/bricolage-grotesque-800.woff2") format("woff2");
  font-weight: 800;
  font-display: swap;
}
@font-face {
  font-family: "Noto Sans";
  src: url("assets/fonts/noto-sans-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Noto Sans";
  src: url("assets/fonts/noto-sans-500.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Noto Sans";
  src: url("assets/fonts/noto-sans-600.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "EB Garamond";
  src: url("assets/fonts/eb-garamond-400-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

:root {
  /* Light family — the page */
  --chalk: #faf6ee;
  --chalk-raised: #f0e9db;
  --ink: #241c16;
  --muted-light: #6b5c4a;
  --edge-light: #96795a;
  --hairline-light: #e6dece;

  /* Dark family — the crisis band and the footer */
  --patina: #5a3e18;
  --patina-sunk: #4a3113;
  --patina-deep: #452e11;
  --paper: #f7f2e9;
  --muted-dark: #cfc2b0;
  --faint-dark: #c0b3a1;
  --edge-dark: #b09c88;
  --hairline-dark: #7a5a2a;

  /* Pigments — light value for dark grounds, deep value for light grounds */
  --brass: #ddb878;
  --brass-hover: #e5c48d;
  --brass-deep: #7e5c20;
  --azure: #9cc7f2;
  --azure-deep: #1f5fa8;
  --jade: #6ed0b3;
  --jade-deep: #1f7a63;
  --saffron: #efb25a;
  --saffron-deep: #96651a;

  /* States */
  --sage: #b4c09e;
  --sage-deep: #55603f;
  --clay: #edac92;
  --clay-deep: #9a4a2f;

  /* Type */
  --display: "Bricolage Grotesque", "Helvetica Neue", Helvetica, system-ui, sans-serif;
  --body: "Noto Sans", system-ui, "Segoe UI", Roboto, Helvetica, sans-serif;
  --accent: "EB Garamond", Georgia, "Times New Roman", serif;

  /* Scale */
  --step-0: 0.9375rem;
  --step-1: 1rem;
  --step-2: 1.3125rem;
  --step-3: clamp(1.6rem, 1.1rem + 2.2vw, 2.375rem);
  --step-4: clamp(2.3rem, 1.1rem + 5.4vw, 4.75rem);

  --gutter: clamp(1.25rem, 5vw, 3.25rem);
  --measure: 34rem;
  --radius: 12px;
  --pill: 999px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--chalk);
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--step-1);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3 {
  font-family: var(--display);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.03em;
  margin: 0 0 0.5em;
  text-wrap: pretty;
}

h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); font-weight: 700; letter-spacing: -0.025em; }
h3 { font-size: var(--step-2); font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a {
  color: var(--azure-deep);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}
a:hover { color: var(--ink); }

:focus-visible {
  outline: 3px solid var(--azure-deep);
  outline-offset: 3px;
  border-radius: 3px;
}

img { max-width: 100%; height: auto; }

.wrap {
  width: 100%;
  max-width: 70rem;
  margin: 0 auto;
  padding-inline: var(--gutter);
}

.measure { max-width: var(--measure); }

section { padding-block: clamp(2.75rem, 7vw, 4.5rem); }

.eyebrow {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--jade-deep);
  margin: 0 0 0.9rem;
}

.skip {
  position: absolute;
  left: -9999px;
}
.skip:focus {
  left: var(--gutter);
  top: 0.75rem;
  z-index: 10;
  background: var(--ink);
  color: var(--chalk);
  padding: 0.7rem 1rem;
  border-radius: var(--pill);
  font-weight: 600;
}

/* --- Header: the name set in type, no logo ------------------------------
   The previous header image was the Android splash-screen template's
   safe-zone GUIDE GRID, not a mark. There is no Moreneta logo yet; the
   wordmark in the display face is the identity until there is one.       */

.masthead {
  padding-block: 1.25rem;
  border-bottom: 1px solid var(--hairline-light);
}
.masthead .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.wordmark {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: -0.02em;
}
.masthead-org {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-light);
}
.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.tag {
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.3rem 0.7rem;
  border-radius: var(--pill);
  color: var(--chalk);
}

/* --- Hero --------------------------------------------------------------- */

.hero { padding-block: clamp(3rem, 8vw, 5rem); }
.hero h1 { margin-bottom: 0.4em; max-width: 19ch; }
.lede {
  font-size: var(--step-2);
  line-height: 1.5;
  font-weight: 500;
  max-width: 44ch;
  margin-bottom: 0.7em;
}
.hero .sub {
  color: var(--muted-light);
  max-width: 46ch;
  margin-bottom: 1.6em;
}

/* --- Buttons ------------------------------------------------------------ */

.actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }
/* Classes rather than inline style attributes: the CSP is `style-src 'self'`
   with no 'unsafe-inline', which blocks style="" attributes outright. An
   inline style here would silently not apply. */
.actions-submit { margin-top: 1.1rem; }
.doc-back { margin-top: 2.5rem; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 0.85rem 1.7rem;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.0625rem;
  border: 2px solid transparent;
  border-radius: var(--pill);
  cursor: pointer;
  text-decoration: none;
}
.btn-primary {
  color: var(--chalk);
  background: var(--patina);
  border-color: var(--patina);
}
.btn-primary:hover {
  color: var(--chalk);
  background: var(--patina-deep);
  border-color: var(--patina-deep);
}
.btn-secondary {
  color: var(--ink);
  background: transparent;
  border-color: var(--edge-light);
}
.btn-secondary:hover { color: var(--ink); background: var(--chalk-raised); }
.btn[disabled] { opacity: 0.55; cursor: progress; }

/* --- Crisis band (R9 / U4) ---------------------------------------------
   Patina ground so it reads as a different kind of thing from the
   marketing around it, directly below the hero so it is reachable without
   scrolling on a phone. Cards are RECESSED, not raised: a lighter panel
   could not carry secondary text at AA once the ground came up, and
   recessing gives the numbers 10.8:1 instead of 8.8:1.                    */

.crisis {
  background: var(--patina);
  color: var(--paper);
  padding-block: clamp(1.6rem, 4vw, 2.25rem);
}
.crisis h2 {
  font-size: var(--step-2);
  color: var(--paper);
  margin-bottom: 0.3em;
}
.crisis .note {
  color: var(--muted-dark);
  font-size: var(--step-0);
  max-width: 70ch;
  margin-bottom: 1.2rem;
}
.lines {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.6rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
.lines a {
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
  min-height: 52px;
  padding: 0.65rem 0.9rem;
  background: var(--patina-sunk);
  border-radius: var(--radius);
  border-left: 4px solid var(--saffron);
  color: var(--paper);
  text-decoration: none;
}
.lines li:nth-child(2) a,
.lines li:nth-child(5) a { border-left-color: var(--jade); }
.lines li:nth-child(3) a,
.lines li:nth-child(6) a { border-left-color: var(--azure); }
.lines a:hover,
.lines a:focus-visible {
  background: var(--patina-deep);
}
.lines .num {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.25rem;
}
.lines .who {
  font-size: 0.8125rem;
  color: var(--muted-dark);
}

/* --- Facts list --------------------------------------------------------- */

.facts {
  list-style: none;
  margin: 1.8rem 0 0;
  padding: 0;
  display: grid;
  gap: 1.1rem;
  max-width: 52rem;
}
.facts li {
  padding-left: 1.1rem;
  border-left: 2px solid var(--hairline-light);
  color: var(--muted-light);
  font-size: var(--step-0);
}
.facts b { color: var(--ink); font-weight: 600; font-family: var(--display); }
.facts li:nth-child(3n + 1) { border-left-color: var(--azure-deep); }
.facts li:nth-child(3n + 2) { border-left-color: var(--jade-deep); }
.facts li:nth-child(3n + 3) { border-left-color: var(--brass-deep); }

/* --- Pull quote: the one place the serif appears ------------------------ */

.quote {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 2px solid var(--ink);
  max-width: 58ch;
}
.quote p {
  font-family: var(--accent);
  font-style: italic;
  font-size: clamp(1.25rem, 1rem + 1.2vw, 1.6875rem);
  line-height: 1.35;
  color: var(--ink);
  margin-bottom: 0.5em;
}
.quote .src { font-family: var(--body); font-style: normal; font-size: 0.875rem; color: var(--muted-light); }

/* --- Events ------------------------------------------------------------- */

.event {
  border-radius: var(--radius);
  padding: clamp(1.3rem, 3vw, 1.8rem);
  max-width: 46rem;
  background: var(--chalk-raised);
  margin-top: 1.8rem;
}
.event h3 { margin-bottom: 0.5em; }
.event .tags { margin-bottom: 1rem; }
.tag-soldout { background: var(--clay-deep); }
.tag-plain {
  background: transparent;
  border: 1px solid var(--edge-light);
  color: var(--muted-light);
}
.event dl {
  margin: 0 0 1rem;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.4rem 1.2rem;
  font-size: var(--step-0);
}
.event dt {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brass-deep);
  padding-top: 0.3rem;
}
.event dd { margin: 0; }
.event .aside { font-size: var(--step-0); color: var(--muted-light); margin: 0; }

/* --- Signup (R5-R8, R15) ------------------------------------------------
   The form itself lives on Tally, so there are no field styles here. It is a
   link-out rather than an embed because embedding would load third-party
   scripts and break R14 (zero third-party requests) — and nginx.conf's CSP
   would block it anyway. The collection notice stays on THIS page because
   APP 5 requires notice at or before collection.                          */

.signup { background: var(--chalk-raised); }

.notice {
  margin-top: 1.4rem;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--muted-light);
  max-width: 62ch;
}
.notice p { margin-bottom: 0.6em; }
.notice strong { color: var(--ink); font-weight: 600; }

.actions-submit { margin-top: 1.4rem; }

.direct {
  margin-top: 2.25rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--hairline-light);
  max-width: var(--measure);
}
.direct p { color: var(--muted-light); font-size: var(--step-0); }

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

footer {
  background: var(--patina);
  color: var(--muted-dark);
  padding-block: 2rem;
  font-size: 0.875rem;
  line-height: 1.7;
}
footer p { margin-bottom: 0.3em; }
footer .legal {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.0625rem;
  color: var(--paper);
}
footer a { color: var(--brass); }
footer a:hover { color: var(--paper); }

/* --- Privacy policy page ------------------------------------------------ */

.doc { max-width: 42rem; }
.doc h2 { font-size: var(--step-2); margin-top: 2.2rem; }
.doc h2:first-of-type { margin-top: 0; }
.doc p,
.doc li { color: var(--muted-light); font-size: var(--step-0); }
.doc strong { color: var(--ink); font-weight: 600; }
.doc ul { padding-left: 1.2rem; }
.doc li { margin-bottom: 0.5rem; }
.meta {
  font-size: 0.8125rem;
  color: var(--muted-light);
  padding-bottom: 1.4rem;
  margin-bottom: 2rem;
  border-bottom: 1px solid var(--hairline-light);
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}