/* Shared look for the smaller pages (quiz, intake, welcome, domain).
   Same palette tokens and self-hosted fonts as the main page; each page adds its own bits inline.
   The brand name lives only in each page's title, header and footer, so a rename stays easy. */
:root {
  /* one look for everyone, whatever their light or dark setting: the main page's charcoal soil (in soil.css,
     with its mycelium), warm charcoal cards, bone ink and chanterelle gold (Pollen's Mycelium palette, Sep 30).
     No purple anywhere. */
  color-scheme: dark;
  --paper: #151513; --paper-2: #10100e; --card: #1c1b18;   /* fields and answers; chosen or hovered; cards */
  --ink: #ece6da; --ink-soft: #b9b3a7; --hairline: #34322d;
  /* chanterelle gold: pale for links and the italic words, deeper for labels and lines, the richest as a fill */
  --candle: #f2c77c; --link: var(--candle); --on-link: #1c1209;
  --acc: #f0b867; --acc-line: rgba(240, 184, 103, 0.55);
  --btn: #e6a852; --on-btn: #1c1209; --btn-hover: #f0b867;
  --moonlight: #ece3d3; --moonglow: rgba(236, 227, 211, 0.35);
  --band: #161513; --band-text: #ece6da; --band-soft: #bcb6aa;
  --focus: #f0b867; --err: #e2947f; --ok: #9dbb85; --field-edge: #7f7a6e;
  /* words over photos */
  --on-photo: #f6efe5; --on-photo-soft: rgba(246, 239, 229, 0.92);
  /* the veil over the photos: the soil's own dark */
  --veil: 15, 15, 13;
}

* { box-sizing: border-box; }
/* the soil and the mycelium behind everything live in soil.css (shared with the main page) */
html { -webkit-text-size-adjust: 100%; background: #0e0e0c; /* the soil, in case soil.css is slow */
  font-synthesis-weight: none; /* Gloock has one weight only: never let the browser smear a fake bold */ }
body {
  margin: 0; color: var(--ink);
  font-family: 'Spectral', Georgia, 'Times New Roman', serif; font-size: 18px; line-height: 1.62;
}
p, li { text-wrap: pretty; }
h1, h2, h3 { font-family: 'Gloock', Georgia, serif; font-weight: 400; line-height: 1.12; text-wrap: balance; margin: 0; }
a { color: var(--link); text-underline-offset: 3px; text-decoration-color: var(--acc-line); }
a:hover { text-decoration-color: currentColor; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 3px; }
.gutter { padding-inline: 22px; }
.wrap { max-width: 680px; margin: 0 auto; }
.nowrap { white-space: nowrap; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.eyebrow, .kicker {
  font-family: 'Spectral', Georgia, serif; font-size: 12.5px; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--acc);
}
.kicker { display: block; margin-bottom: 8px; text-wrap: balance; }

/* ---------- the photo band that opens every page ----------
   The photo arrives first and settles from a soft zoom, then the veil, then the words glide
   up one at a time. The script right after the band adds .wait/.go, so without JavaScript or
   with reduced motion everything simply shows at rest. */
.page-hero {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column;
  min-height: clamp(420px, 64svh, 620px);
  color: var(--on-photo);
}
.page-hero.short { min-height: clamp(380px, 54svh, 540px); }
.page-hero .photo {
  position: absolute; left: 0; top: -4%; width: 100%; height: 108%;
  object-fit: cover; z-index: -3; display: block;
}
/* the photo's foot melts into solid soil (behind the words, so none of them fade), and main::before lets the
   mycelium rise out of that soil gradually below it, so the photo never ends on a line */
.page-hero::before {
  content: ""; position: absolute; inset: auto 0 0 0; height: 16%; z-index: -1; pointer-events: none;
  background: linear-gradient(0deg, var(--soil-fade));
}
.page-hero::after {
  content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(ellipse 72% 58% at 50% 72%, rgba(var(--veil), 0.55), rgba(var(--veil), 0) 76%),
    linear-gradient(180deg, rgba(var(--veil), 0.74) 0%, rgba(var(--veil), 0.34) 30%, rgba(var(--veil), 0.52) 58%, rgba(var(--veil), 0.86) 100%);
}
.page-hero .bar {
  display: flex; align-items: center; justify-content: space-between; gap: 10px 20px; flex-wrap: wrap;
  width: 100%; max-width: 1180px; margin: 0 auto; padding: 22px 22px 0;
}
.page-hero .brand {
  font-family: 'Gloock', Georgia, serif; font-weight: 400; font-size: 21px; letter-spacing: 0;
  color: var(--on-photo); text-decoration: none; padding-block: 8px; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 9px; min-height: 44px;
}
.page-hero .brand svg { width: 20px; height: 20px; flex: none; }
.page-hero .brand .wm span { color: var(--candle); }
/* a soft dark glow keeps the name and the little menu words readable where the photo is brightest (the
   forest's sun, on phones; the gaps between the trees on a big screen) */
.page-hero .brand, .page-hero nav a { text-shadow: 0 1px 2px rgba(var(--veil), 0.7), 0 0 12px rgba(var(--veil), 0.5); }
.page-hero nav { display: flex; gap: 4px 16px; flex-wrap: wrap; margin-left: auto; justify-content: flex-end; }
.page-hero nav a {
  font-family: 'Spectral', Georgia, serif; font-weight: 500; font-size: 12.5px; letter-spacing: 0.14em;
  text-transform: uppercase; text-decoration: none; color: var(--on-photo); opacity: 0.9;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; min-width: 44px; padding: 0 4px; text-align: center;
}
.page-hero nav a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 4px; }
.page-hero a:focus-visible { outline-color: var(--on-photo); }
.page-hero .words {
  margin: auto auto 0; width: 100%; max-width: 760px; text-align: center;
  padding: 56px 22px 52px;
  /* a soft dark glow keeps the small gold words readable over bright mushroom caps and sun */
  text-shadow: 0 1px 2px rgba(var(--veil), 0.75), 0 0 16px rgba(var(--veil), 0.7);
}
/* cream like the main page's hero eyebrow: small gold capitals get lost on bright caps and sun */
.page-hero .eyebrow {
  color: var(--on-photo); display: block; margin-bottom: 16px; letter-spacing: 0.22em;
  text-shadow: 0 1px 2px rgba(var(--veil), 0.85), 0 0 8px rgba(var(--veil), 0.8), 0 0 20px rgba(var(--veil), 0.6);
}
.page-hero h1 {
  font-weight: 400; font-size: clamp(36px, 7.4vw, 60px); letter-spacing: -0.01em;
  color: var(--on-photo); max-width: 16ch; margin-inline: auto;
}
.page-hero h1 em {
  font-family: 'Spectral', Georgia, serif; font-style: italic; font-weight: 400;
  letter-spacing: -0.01em; color: var(--candle);
}
.page-hero .lede {
  font-size: clamp(18px, 2.4vw, 20.5px); color: var(--on-photo-soft);
  max-width: 34em; margin: 18px auto 0;
}
.page-hero .lede a { color: var(--on-photo); }

.page-hero.wait .photo, .page-hero.wait::after,
.page-hero.wait .eyebrow, .page-hero.wait h1, .page-hero.wait .lede { opacity: 0; }
.page-hero.go .photo { animation: hero-photo 3.4s cubic-bezier(.22, 1, .36, 1) both; }
.page-hero.go::after { animation: hero-fade 2.4s ease 0.8s both; }
.page-hero.go .eyebrow { animation: hero-rise-sm 2s cubic-bezier(.22, 1, .36, 1) 1.6s both; }
.page-hero.go h1 { animation: hero-rise 2.4s cubic-bezier(.22, 1, .36, 1) 1.9s both; }
.page-hero.go .lede { animation: hero-rise-sm 2.2s cubic-bezier(.22, 1, .36, 1) 2.7s both; }
@keyframes hero-photo { from { opacity: 0; transform: scale(1.2); } 20% { opacity: 1; } to { opacity: 1; transform: none; } }
@keyframes hero-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes hero-rise { from { opacity: 0; transform: translateY(64px); } to { opacity: 1; transform: none; } }
@keyframes hero-rise-sm { from { opacity: 0; transform: translateY(32px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .page-hero .photo { translate: none !important; }
}

/* phones held sideways: the photo band shrinks to fit its words, so the page starts on screen one */
@media (max-height: 520px) and (orientation: landscape) {
  .page-hero, .page-hero.short { min-height: 0; }
  .page-hero .bar { padding-top: 12px; }
  .page-hero .words { padding-block: 22px 30px; }
  .page-hero h1 { font-size: clamp(32px, 5.4vw, 46px); }
  .page-hero .lede { margin-top: 12px; }
}

/* ---------- gentle fade-up as things scroll into view ---------- */
.reveal.pre { opacity: 0; transform: translateY(30px); }
.reveal.in { opacity: 1; transform: none; transition: opacity 0.8s cubic-bezier(.2, .7, .3, 1), transform 0.8s cubic-bezier(.2, .7, .3, 1); }
@media (prefers-reduced-motion: reduce) { .reveal.pre { opacity: 1; transform: none; } }

/* ---------- content ---------- */
/* no background of its own: every word sits straight on the soil and its mycelium (checked at the brightest
   thread or light), or on a card */
main {
  display: flow-root;
  padding-bottom: 40px;
  position: relative; isolation: isolate;
}
/* just under the photo the soil is still solid, and the mycelium comes up out of it slowly */
main::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: clamp(140px, 24vh, 280px); z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, var(--soil-fade));
}
.card {
  background: var(--card); border: 1px solid var(--hairline); border-radius: 16px;
  padding: 26px 26px 28px; margin-top: 24px;
}
.card.yours { border: 2px solid var(--acc); }
.card h2 { font-size: 24px; font-weight: 400; margin: 0 0 12px; }
.card p { margin: 10px 0 0; }
.card p.soft, .soft { color: var(--ink-soft); font-size: 16.5px; }
.note { font-size: 15px; color: var(--ink-soft); font-style: italic; margin-top: 14px; }

ul.checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
ul.checks li { padding-left: 26px; position: relative; font-size: 17px; }
ul.checks li::before { content: "\2713"; position: absolute; left: 0; color: var(--acc); font-weight: 700; }
ul.checks li small { display: block; color: var(--ink-soft); font-size: 15px; line-height: 1.5; margin-top: 2px; }
ul.checks.never li::before { content: "\2717"; color: var(--ink-soft); }

/* tall pill buttons, the same as the main page */
.btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 50px;
  text-decoration: none; text-align: center; cursor: pointer; text-wrap: balance;
  font-family: 'Gloock', Georgia, serif; font-weight: 400; font-size: 17px; line-height: 1.2; letter-spacing: 0.01em; word-spacing: 0.03em;
  padding: 12px 28px; border-radius: 999px;
  background: var(--btn); color: var(--on-btn); border: 1.5px solid var(--btn);
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.btn:hover { background: var(--btn-hover); border-color: var(--btn-hover); box-shadow: 0 0 0 5px rgba(230, 168, 82, 0.16), 0 0 30px rgba(230, 168, 82, 0.35); }
.btn.secondary { background: transparent; color: var(--link); }
/* a solid card behind the words on hover, so the gold stays readable over any thread behind it */
.btn.secondary:hover { background: var(--card); box-shadow: none; }

/* two-column money table, collapses to stacked rows on phones */
.money { width: 100%; border-collapse: collapse; margin-top: 14px; font-size: 16px; line-height: 1.5; }
.money th, .money td { text-align: left; vertical-align: top; padding: 11px 10px 11px 0; border-bottom: 1px solid var(--hairline); }
.money thead th {
  font-family: 'Spectral', Georgia, serif; font-size: 11.5px; font-weight: 500; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--acc);
}
.money tbody th { font-family: 'Gloock', Georgia, serif; font-weight: 400; font-size: 17px; letter-spacing: 0.01em; width: 32%; }
.money tbody th small { display: block; font-family: 'Spectral', Georgia, serif; font-weight: 400; font-size: 14.5px; color: var(--ink-soft); }
.money td { color: var(--ink); }
.money tr:last-child th, .money tr:last-child td { border-bottom: none; }
@media (max-width: 560px) {
  .money thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .money, .money tbody, .money tr, .money th, .money td { display: block; width: 100%; }
  .money tr { padding: 12px 0; border-bottom: 1px solid var(--hairline); }
  .money tr:last-child { border-bottom: none; }
  .money tbody th, .money td { border: none; padding: 0; }
  .money tbody th { width: auto; margin-bottom: 6px; }
  .money td { display: grid; grid-template-columns: 5.8em 1fr; gap: 10px; padding: 3px 0; }
  .money td::before {
    content: attr(data-col); content: attr(data-col) / ""; font-family: 'Spectral', Georgia, serif; font-weight: 500; font-size: 11px; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--acc); padding-top: 3px;
  }
}

/* the triple moon, drawn in pale gold */
.moon { width: 1em; height: 1em; vertical-align: -0.12em; color: var(--candle); flex-shrink: 0; }

/* the same quiet footer as the main page: no band, just the soil and a gold hairline */
footer.site-foot { margin-top: 56px; color: var(--ink-soft); padding: 0 22px 40px; font-size: 15.5px; }
.site-foot .foot-in {
  max-width: 1120px; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 30px;
  padding-top: 26px; border-top: 1px solid rgba(230, 168, 82, 0.3);
}
.site-foot .brand {
  font-family: 'Gloock', Georgia, serif; font-weight: 400; font-size: 19px; letter-spacing: 0;
  color: var(--ink); text-decoration: none; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 9px; min-height: 44px;
}
.site-foot .brand svg { width: 18px; height: 18px; flex: none; }
.site-foot .brand svg > circle { fill: var(--candle); }
.site-foot .brand .wm span { color: var(--candle); }
.site-foot ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0 22px; }
.site-foot a:not(.brand) { display: inline-flex; min-height: 44px; align-items: center; }
.site-foot a[aria-current] { text-decoration: none; color: var(--ink-soft); }
.site-foot .fine { width: 100%; margin: 0; font-family: 'Spectral', Georgia, serif; font-weight: 400; font-style: italic; font-size: 15px; color: var(--ink-soft); }

/* narrow phones: a little more room for the words, and brand + nav stay on one row */
@media (max-width: 380px) {
  .gutter { padding-inline: 16px; }
  main .card { padding: 20px 16px 22px; }
  .page-hero .bar { padding-inline: 16px; gap: 8px 10px; }
  .page-hero .words { padding-inline: 16px; }
  .page-hero .brand { font-size: 18px; gap: 7px; }
  .page-hero .brand svg { width: 17px; height: 17px; }
  .page-hero nav { gap: 4px 8px; }
  .page-hero nav a { font-size: 12px; letter-spacing: 0.1em; padding-inline: 3px; }
}
@media (max-width: 345px) {
  .page-hero .brand { font-size: 16.5px; gap: 6px; }
  .page-hero .brand svg { width: 15px; height: 15px; }
  .page-hero nav a { font-size: 11px; letter-spacing: 0.08em; }
}

/* print: everything shown, nothing waiting for a scroll or an intro that never comes */
@media print {
  .reveal.pre { opacity: 1 !important; transform: none !important; }
  .page-hero.wait .photo, .page-hero.wait::after, .page-hero.wait .eyebrow,
  .page-hero.wait h1, .page-hero.wait .lede { opacity: 1 !important; }
  .page-hero *, .page-hero::after { animation: none !important; }
  main::before { display: none; }
  /* paper is white, so the ink turns dark (soil.css leaves the soil and its mycelium off the page) */
  :root { --paper: #fff; --paper-2: #f6f2ea; --card: #fff; --ink: #262420; --ink-soft: #5a554c; --hairline: #ddd6c8; --candle: #7a4a12; --link: #7a4a12; --acc: #7a4a12; --btn: #7a4a12; --on-btn: #fff; --band: #fff; --band-text: #262420; --band-soft: #5a554c; }
}