/* The Move Ahead: homepage with the finder card.
   Brand: brand/BRAND-FOUNDATION-v1.md section 38, plus Var's 2026-10-17 calls:
   black background (a subtle tiled grid since 2026-10-18; it was white dust), D-DIN for body text, Schabo for headlines,
   and "it must not look like a game" (reference studied: theformulaofawakening.com).
   So: Schabo only for big statements, sentence case everywhere else, hairlines instead of boxes,
   teal only for the chosen answer and progress, radio buttons, no letter keys, no chunky blocks. */

@font-face { font-family: "Schabo"; src: url("../fonts/schabo-condensed.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "DDIN"; src: url("../fonts/D-DIN.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "DDIN"; src: url("../fonts/D-DIN-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "DDIN Cond"; src: url("../fonts/D-DINCondensed.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "DDIN Cond"; src: url("../fonts/D-DINCondensed-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --bg: #08080A;          /* black (Var, 2026-10-17: darker) */
  --panel: rgba(231, 225, 212, .025);
  --bone: #E7E1D4;
  --bone-2: rgba(231, 225, 212, .74);
  --bone-3: rgba(231, 225, 212, .56);
  --hair: rgba(231, 225, 212, .10);
  --hair-2: rgba(231, 225, 212, .20);
  --teal: #28C7BC;
  --rust: #A8492E;
  --gold: #C6A25E;

  --display: "Schabo", "DDIN Cond", "Arial Narrow", sans-serif;
  --system: "DDIN Cond", "Arial Narrow", sans-serif;
  --body: "DDIN", "Helvetica Neue", Arial, sans-serif;

  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --s10: 144px;
  --gutter: clamp(20px, 5vw, 72px);
  --max: 1200px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; background: var(--bg); }
body { position: relative; color: var(--bone); font-family: var(--body); font-size: 18px; line-height: 1.6; min-height: 100vh;
  background: radial-gradient(ellipse 80% 55% at 50% -5%, rgba(231, 225, 212, .055), transparent 70%), var(--bg); }
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; }
:focus-visible { outline: 1px solid var(--teal); outline-offset: 4px; }
[tabindex="-1"]:focus { outline: none; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
main, header, footer { position: relative; z-index: 2; }

/* Tiled grid behind the top of the page (Var, 2026-10-18, replacing the white dust; the earlier version is in
   website/versions/dust-background-2026-10-17/). Square tiles with dark hairline gaps, a faint lighter edge on each
   tile and every other tile a shade lighter (a subtle checkerboard). Strongest at the top, fading into black.
   Pure CSS, no image, no motion. Every layer repeats on the same two-by-two block and is centred, so the
   lines and the checkerboard always line up and the grid sits symmetrically on any screen. */
.grid-bg { position: absolute; top: 0; left: 0; right: 0; height: max(900px, 115vh); z-index: 1; pointer-events: none;
  --t: 64px; --t1: calc(var(--t) + 1px); --t2: calc(var(--t) + 2px);
  /* Var, 2026-10-18: "make the grid more subtle" (first version: gap .7, edge .03, check .025, base .03) */
  --gap: rgba(0, 0, 0, .5); --edge: rgba(255, 255, 255, .015); --check: rgba(231, 225, 212, .014);
  background-color: rgba(231, 225, 212, .018);
  background-image:
    linear-gradient(to right, var(--gap) 1px, transparent 1px var(--t), var(--gap) var(--t) var(--t1), transparent var(--t1)),
    linear-gradient(to bottom, var(--gap) 1px, transparent 1px var(--t), var(--gap) var(--t) var(--t1), transparent var(--t1)),
    linear-gradient(to right, transparent 1px, var(--edge) 1px 2px, transparent 2px var(--t1), var(--edge) var(--t1) var(--t2), transparent var(--t2)),
    linear-gradient(to bottom, transparent 1px, var(--edge) 1px 2px, transparent 2px var(--t1), var(--edge) var(--t1) var(--t2), transparent var(--t2)),
    conic-gradient(var(--check) 25%, transparent 0 50%, var(--check) 0 75%, transparent 0);
  background-size: calc(var(--t) * 2) calc(var(--t) * 2);
  background-position: 50% 0;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 25%, transparent 92%);
          mask-image: linear-gradient(to bottom, #000 0%, #000 25%, transparent 92%); }
@media (max-width: 640px) { .grid-bg { --t: 44px; } }

/* Type */
.display { font-family: var(--display); font-weight: 400; text-transform: uppercase; line-height: .92; letter-spacing: .01em; word-spacing: .08em; overflow-wrap: anywhere; }
.label { font-family: var(--system); font-weight: 400; text-transform: uppercase; letter-spacing: .28em; font-size: 13px; color: var(--bone-3); }
.wordmark { font-family: var(--system); font-weight: 700; text-transform: uppercase; letter-spacing: .2em; font-size: 15px; text-decoration: none; }
.lead { font-size: clamp(18px, 1.5vw, 21px); color: var(--bone-2); max-width: 40ch; }

/* Layout */
.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: var(--s5); padding-top: var(--s6); padding-bottom: var(--s6); }
/* The menu (Var, 2026-10-18: logo on the left, menu on the right). On small phones only "Blog" shows;
   the quiz card is right below on the homepage, and every post ends with the same button. */
.menu { display: flex; align-items: center; gap: var(--s5); }
.menu a { display: inline-flex; align-items: center; min-height: 44px; font-family: var(--system); font-size: 13px; letter-spacing: .22em;
  text-transform: uppercase; text-decoration: none; color: var(--bone-2); transition: color .2s, border-color .2s; }
.menu a:hover, .menu a[aria-current="page"] { color: var(--bone); }
.menu .menu-cta { padding: 0 var(--s4); border: 1px solid var(--hair-2); }
.menu .menu-cta:hover { border-color: var(--bone-3); }
@media (max-width: 560px) { .menu .menu-cta { display: none; } }

/* Buttons: quiet, editorial */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s3); min-height: 52px; padding: 0 var(--s6);
  background: var(--bone); color: var(--bg); font-family: var(--system); font-weight: 700; font-size: 14px; letter-spacing: .24em; text-transform: uppercase; text-decoration: none; transition: opacity .2s; }
.btn::after { content: "\2192"; font-family: var(--body); font-weight: 400; letter-spacing: 0; font-size: 18px; }
.btn:hover { opacity: .88; }
.btn[disabled] { background: transparent; color: var(--bone-3); border: 1px solid var(--hair-2); cursor: not-allowed; }
.btn[disabled]::after { opacity: .5; }
.btn-ghost { display: inline-flex; align-items: center; gap: var(--s2); min-height: 44px; font-family: var(--system); font-size: 13px; letter-spacing: .22em; text-transform: uppercase; text-decoration: none; color: var(--bone-2); border-bottom: 1px solid var(--hair-2); transition: color .2s, border-color .2s; }
.btn-ghost::after { content: "\2192"; font-family: var(--body); letter-spacing: 0; }
.btn-ghost:hover { color: var(--bone); border-color: var(--bone-2); }
.link { font-family: var(--system); font-size: 13px; letter-spacing: .2em; text-transform: uppercase; color: var(--bone-3); text-decoration: none; border-bottom: 1px solid var(--hair-2); min-height: 44px; display: inline-flex; align-items: center; transition: color .2s; }
.link:hover { color: var(--bone); }

/* Hero: one calm statement, then the finder */
.hero { position: relative; isolation: isolate; padding: var(--s7) 0 var(--s9); text-align: center; }
/* Image slot for the Higgsfield hero art. Empty until the art exists: set --hero-art on .hero to switch it on. */
.hero-art { position: absolute; inset: 0; z-index: -1; background: var(--hero-art, none) center / cover no-repeat; opacity: .35; }
.hero-copy { display: flex; flex-direction: column; align-items: center; }
.hero h1 { font-size: clamp(56px, 6.2vw, 88px); margin: var(--s5) 0 var(--s5); }
/* Silver headline (Var, 2026-10-18, from the same reference page): the letters are filled with a light that is
   white in the centre and turns grey toward the edges. Browsers that can't fill text this way keep plain bone. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .hero h1 { background: radial-gradient(circle, #FFFFFF 14%, #6E6A64 100%); -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; }
}
@media print, (forced-colors: active) { .hero h1 { background: none; -webkit-text-fill-color: currentColor; } }
.hero .lead { margin: 0 auto; }

/* The finder card */
.finder { width: 100%; max-width: 680px; margin: var(--s7) auto 0; text-align: left; background: linear-gradient(var(--panel), var(--panel)), var(--bg); /* solid, so the grid never shows through the questions */ border: 1px solid var(--hair); scroll-margin-top: var(--s5); }
.finder-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); min-height: 52px; padding: 0 var(--s6); border-bottom: 1px solid var(--hair); }
.finder-bar .back { font-family: var(--system); font-size: 13px; letter-spacing: .22em; text-transform: uppercase; color: var(--bone-3); min-height: 44px; transition: color .2s; }
.finder-bar .back:hover { color: var(--bone); }
.progress { display: flex; align-items: center; gap: var(--s4); margin-left: auto; }
.progress .count { font-family: var(--system); font-size: 13px; letter-spacing: .22em; text-transform: uppercase; color: var(--bone-3); }
.progress .count b { color: var(--bone); font-weight: 400; }
.progress .bar { width: 80px; height: 1px; background: var(--hair-2); }
.progress .bar i { display: block; height: 100%; background: var(--teal); transition: width .3s; }
.finder-body { padding: var(--s7) var(--s6) var(--s6); }
.q-title { font-family: var(--body); font-weight: 400; font-size: clamp(26px, 2.4vw, 34px); line-height: 1.2; letter-spacing: -.005em; overflow-wrap: anywhere; }
.finder-body .help { margin-top: var(--s2); color: var(--bone-3); font-size: 16px; }
.finder-body textarea { width: 100%; min-height: 120px; margin-top: var(--s5); padding: var(--s4); background: transparent; color: var(--bone);
  border: 0; border-bottom: 1px solid var(--hair-2); font: inherit; font-size: 18px; resize: vertical; }
.finder-body textarea:focus { border-color: var(--teal); outline: none; }
.finder-body textarea::placeholder { color: var(--bone-3); }
.finder .none { margin-top: var(--s5); }
.actions { margin-top: var(--s6); display: flex; flex-wrap: wrap; align-items: center; gap: var(--s4) var(--s6); }

/* Answers: rows separated by hairlines, a small ring that fills when chosen */
.choices { list-style: none; margin-top: var(--s5); border-top: 1px solid var(--hair); }
.choices li { border-bottom: 1px solid var(--hair); }
.choice { width: 100%; display: grid; grid-template-columns: 14px minmax(0, 1fr); align-items: center; gap: var(--s4); text-align: left;
  min-height: 60px; padding: var(--s4) var(--s2); font-size: 18px; line-height: 1.4; color: var(--bone-2); overflow-wrap: anywhere; transition: color .2s, background .2s; }
.choice:hover { color: var(--bone); background: rgba(231, 225, 212, .025); }
.choice .tick { width: 14px; height: 14px; border: 1px solid var(--hair-2); border-radius: 50%; transition: background .2s, border-color .2s; }
.choice[aria-checked="true"] { color: var(--bone); }
.choice[aria-checked="true"] .tick { background: var(--teal); border-color: var(--teal); box-shadow: 0 0 10px rgba(40, 199, 188, .35); }
.choices.multi .tick { border-radius: 2px; }

/* The result */
.result > .label { display: block; }
.result h2 { font-size: clamp(36px, 4vw, 56px); margin-top: var(--s3); text-wrap: balance; }
.result .why { margin-top: var(--s5); display: grid; gap: var(--s3); font-size: 17px; color: var(--bone-2); }
.result .why p { overflow-wrap: anywhere; }
.result .why p:first-child { color: var(--bone); }
.putoff { margin-top: var(--s6); border-left: 1px solid var(--gold); padding: var(--s1) 0 var(--s1) var(--s5); }
.putoff .label { color: var(--gold); }
.putoff q { display: block; margin-top: var(--s2); font-size: 19px; font-style: italic; quotes: "\201C" "\201D"; overflow-wrap: anywhere; }
.move { margin-top: var(--s7); padding-top: var(--s6); border-top: 1px solid var(--hair-2); }
.move .label { color: var(--teal); }
.move-title { font-family: var(--body); font-weight: 700; font-size: clamp(24px, 2.2vw, 30px); line-height: 1.2; margin-top: var(--s2); }
.move ol { list-style: none; counter-reset: s; margin-top: var(--s5); display: grid; gap: var(--s4); }
.move ol li { counter-increment: s; display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: var(--s2); font-size: 17px; overflow-wrap: anywhere; }
.move ol li::before { content: counter(s, decimal-leading-zero); font-family: var(--system); color: var(--bone-3); letter-spacing: .14em; padding-top: 2px; }
.move .tips { list-style: none; margin-top: var(--s5); display: grid; gap: var(--s2); color: var(--bone-3); font-size: 16px; }
.move .closing { margin-top: var(--s5); padding-top: var(--s4); border-top: 1px solid var(--hair); font-weight: 700; font-size: 19px; line-height: 1.4; color: var(--bone); overflow-wrap: anywhere; }
.next { margin-top: var(--s7); display: grid; grid-template-columns: 1fr 1fr; gap: var(--s6); padding-top: var(--s6); border-top: 1px solid var(--hair); }
.next > div { overflow-wrap: anywhere; }
.next h4 { font-family: var(--body); font-weight: 700; font-size: 19px; margin-top: var(--s2); line-height: 1.3; }
.next p { margin-top: var(--s1); color: var(--bone-3); font-size: 16px; }
.status { display: block; margin-top: var(--s2); font-family: var(--system); font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: var(--bone-3); }

footer { padding: var(--s8) 0 var(--s7); }
footer .wrap { display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--s4); border-top: 1px solid var(--hair); padding-top: var(--s6); }
footer .wordmark { font-size: 13px; color: var(--bone-2); }
footer small { font-family: var(--system); letter-spacing: .2em; text-transform: uppercase; color: var(--bone-3); font-size: 12px; }

/* Phones */
@media (max-width: 640px) {
  body { font-size: 17px; }
  .topbar { padding-top: var(--s5); padding-bottom: var(--s4); }
  .hero { padding: var(--s4) 0 var(--s8); }
  .hero h1 { font-size: min(15.5vw, 64px); margin: var(--s3) 0 var(--s4); }
  .hero .lead { font-size: 17px; }
  .finder { margin-top: var(--s6); }
  .finder-bar { padding: 0 var(--s4); }
  .finder-bar .meta { display: none; }
  .finder-body { padding: var(--s5) var(--s4); }
  .choice { min-height: 56px; font-size: 17px; }
  .actions .btn { width: 100%; }
  .next { grid-template-columns: minmax(0, 1fr); gap: var(--s5); }
}

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

/* "Email me my result" inside the result */
.emailme { margin-top: var(--s7); padding-top: var(--s6); border-top: 1px solid var(--hair-2); }
.emailme .label { display: block; }
.emailme input[type="email"] { display: block; width: 100%; margin-top: var(--s5); padding: var(--s3) 0; background: transparent; color: var(--bone);
  border: 0; border-bottom: 1px solid var(--hair-2); font: inherit; font-size: 18px; border-radius: 0; }
.emailme input[type="email"]:focus { outline: none; border-color: var(--teal); }
.emailme input[type="email"]::placeholder { color: var(--bone-3); }
.check { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: var(--s3); align-items: start; margin-top: var(--s4); font-size: 16px; color: var(--bone-2); cursor: pointer; }
.check input { width: 16px; height: 16px; margin-top: 4px; accent-color: var(--teal); }
.form-note { margin-top: var(--s4); min-height: 1.6em; color: var(--bone); font-size: 16px; }
.fine { margin-top: var(--s2); font-size: 14px; color: var(--bone-3); }
.fine a, footer small a { color: inherit; text-underline-offset: 3px; }

/* Small pages: confirm, unsubscribe, privacy */
.page { padding-top: var(--s8); padding-bottom: var(--s9); }
.page-card { margin-top: 0; }
.prose { max-width: 680px; margin: 0 auto; }
.prose .q-title { margin-top: var(--s3); }
.prose h2 { font-family: var(--body); font-weight: 700; font-size: 19px; margin-top: var(--s6); }
.prose p { margin-top: var(--s3); color: var(--bone-2); font-size: 17px; }

/* Manifesto (Var, 2026-10-19): the section after the diagnosis. Black, so the checkerboard fades straight into it
   (Var: "make the background black. Because the checkerboard is fading into black."). Brutalist type in bone, the one
   boxed word in bone with black letters, and a rust rule. Type confronts, the body restores calm. */
.manifesto { position: relative; z-index: 2; background: var(--bg); color: var(--bone); padding: 0 0 var(--s9); }
.manifesto-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s7); align-items: start;
  border-top: 1px solid var(--hair); padding-top: var(--s9); }
.manifesto h2 { font-size: clamp(64px, 8.6vw, 132px); margin-top: var(--s4); }
.manifesto h2 .block { display: inline-block; background: var(--bone); color: var(--bg); padding: .04em .1em 0; }
.manifesto .rule { display: block; width: 96px; height: 6px; background: var(--rust); margin-top: var(--s7); }
.manifesto-body { display: grid; gap: var(--s4); font-size: clamp(18px, 1.4vw, 20px); line-height: 1.55; max-width: 44ch; padding-top: var(--s5); color: var(--bone-2); }
.manifesto-body .noticed { font-weight: 700; color: var(--bone); }
.manifesto .vows { list-style: none; border-top: 1px solid var(--hair-2); color: var(--bone); }
.manifesto .vows li { padding: var(--s3) 0; border-bottom: 1px solid var(--hair-2); }
.manifesto .turn { font-weight: 700; font-size: clamp(20px, 1.6vw, 23px); line-height: 1.35; color: var(--bone); }
.manifesto .join { margin-top: var(--s3); }
.manifesto .fine { margin-top: var(--s3); color: var(--bone-3); font-size: 15px; }
/* On wide screens the headline stays in view while the creed scrolls past it, so the left column never sits empty. */
@media (min-width: 901px) { .manifesto-head { position: sticky; top: var(--s8); } }
@media (max-width: 900px) {
  .manifesto-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s5); }
  .manifesto-body { padding-top: 0; }
}
@media (max-width: 640px) {
  .manifesto { padding: 0 0 var(--s8); }
  .manifesto-grid { padding-top: var(--s8); }
  .manifesto h2 { font-size: min(17vw, 76px); }
  .manifesto .join .btn { width: 100%; }
}