/* =========================================================
   Haumm — shared styles
   Every page loads this file. Page-specific layout lives in a
   small <style> block on that page only.
   ========================================================= */

:root {
  --cream: #F3ECD8;
  --cream-line: #DDCE9F;
  --ink: #26231B;
  --ink-soft: #52493A;
  --ink-faint: #8B8368;
  --forest: #2F4030;
  --forest-deep: #23301F;
  --rust: #C1502E;
  --rust-deep: #A03F22;
  --mustard: #E3A73B;
  --mustard-deep: #C68C29;
  --cream-on-dark: #F3ECD8;
  --ink-on-mustard: #26231B;   /* mustard stays light in dark mode, so its text stays dark */

  --display: "Bevan", Georgia, serif;
  --mono: "Space Mono", ui-monospace, Menlo, Consolas, monospace;
  --sans: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --cream: #1C1913;
    --cream-line: #3A3323;
    --ink: #EEE6CD;
    --ink-soft: #C3B999;
    --ink-faint: #8B8368;
    --cream-on-dark: #EEE6CD;
  }
}
:root[data-theme="dark"] {
  --cream: #1C1913;
  --cream-line: #3A3323;
  --ink: #EEE6CD;
  --ink-soft: #C3B999;
  --ink-faint: #8B8368;
  --cream-on-dark: #EEE6CD;
}

/* ---------- base ---------- */
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--cream); color: var(--ink); }
html { scroll-padding-top: env(safe-area-inset-top, 0px); }
body {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--rust); outline-offset: 2px; }

.wrap { max-width: 1100px; margin: 0 auto; padding: 0 28px; }
@media (max-width: 640px) { .wrap { padding: 0 20px; } }

.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 10;
  background: var(--ink); color: var(--cream); padding: 8px 14px;
  font-family: var(--mono); font-size: 12px; text-decoration: none;
}
.skip-link:focus { top: 12px; }

/* ---------- header / nav ---------- */
header.top {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  max-width: 1100px; margin: 0 auto; padding: 22px 28px;
}
.wordmark { font-family: var(--display); font-size: 22px; letter-spacing: 0.02em; text-decoration: none; color: var(--ink); }
.nav-links { display: flex; align-items: center; gap: 18px; font-family: var(--mono); font-size: 12.5px; }
.nav-links a { text-decoration: none; border-bottom: 1px solid var(--ink); padding-bottom: 1px; }
.nav-links a[aria-current="page"] { border-bottom-width: 3px; }
.nav-links a.cta-mini { border: none; background: var(--rust); color: #F3ECD8; padding: 8px 14px; border-radius: 2px; white-space: nowrap; }
@media (max-width: 560px) {
  header.top { padding: 18px 20px; }
  .nav-links { gap: 12px; font-size: 11.5px; }
  .nav-links .nav-signin { display: none; }   /* "begin writing" goes to the same place */
}

/* ---------- labels ---------- */
.eyebrow { font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.08em; text-transform: uppercase; margin: 0 0 14px; opacity: 0.85; }
.field-label { font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.65; margin: 0 0 22px; }
.on-dark-label { color: rgba(243,236,216,0.75); opacity: 1; }

/* ---------- buttons ---------- */
.btn-stamp {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-weight: 700; font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase;
  color: inherit; background: transparent; border: 2px dashed currentColor; border-radius: 999px;
  padding: 11px 20px; text-decoration: none; width: fit-content; margin-top: 6px;
  transition: background-color 0.15s ease;
}
.btn-stamp:hover { background: rgba(255,255,255,0.12); }
.on-mustard .btn-stamp:hover, .on-cream .btn-stamp:hover, .site-footer .btn-stamp:hover { background: rgba(0,0,0,0.08); }

.cta-note-line { font-family: var(--mono); font-size: 11.5px; opacity: 0.8; margin: 12px 0 0; }
.cta-note-line a { text-underline-offset: 3px; }

/* ---------- colour blocks ---------- */
.on-cream { background: var(--cream); color: var(--ink); }
.on-forest { background: var(--forest); color: var(--cream-on-dark); }
.on-rust { background: var(--rust); color: var(--cream-on-dark); }
.on-mustard { background: var(--mustard); color: var(--ink-on-mustard); }

/* ---------- intro block (inner pages) ---------- */
.intro-block { background: var(--rust); color: var(--cream-on-dark); padding: 90px 0 76px; }
.intro-block h1 {
  font-family: var(--display); text-transform: uppercase;
  font-size: clamp(32px, 5.4vw, 54px); line-height: 1.05; margin: 0 0 22px; max-width: 16ch;
}
.intro-block p { font-size: 16px; max-width: 56ch; margin: 0; opacity: 0.92; }

/* ---------- reason blocks (philosophy, faq, pricing) ---------- */
.reason-block { padding: 76px 0; }
.reason-inner { max-width: 620px; }
.reason-inner h2 {
  font-family: var(--display); text-transform: uppercase;
  font-size: clamp(22px, 3vw, 32px); line-height: 1.15; margin: 0 0 16px; max-width: 18ch;
}
.reason-inner p { font-size: 15.5px; line-height: 1.7; margin: 0; opacity: 0.92; max-width: 58ch; }
.reason-inner p + p { margin-top: 14px; }

/* ---------- mantra ---------- */
.mantra-block { background: var(--forest-deep); color: var(--cream-on-dark); text-align: center; padding: 96px 24px; }
.swatches { display: flex; justify-content: center; gap: 8px; margin-bottom: 26px; }
.swatch { width: 14px; height: 14px; border-radius: 2px; }
.swatch.s1 { background: var(--mustard); }
.swatch.s2 { background: var(--rust); }
.swatch.s3 { background: #DDCE9F; }
.mantra-text {
  font-family: var(--display); text-transform: uppercase;
  font-size: clamp(24px, 4.2vw, 44px); line-height: 1.35; max-width: 17ch; margin: 0 auto;
}

/* ---------- postcard photo ---------- */
.postcard-photo { position: relative; margin: 0; }
.postcard-photo img { width: 100%; max-height: 540px; object-fit: cover; }
.postcard-caption {
  position: absolute; left: 24px; bottom: 24px;
  background: #F3ECD8; color: #26231B;
  font-family: var(--mono); font-size: 12px; padding: 8px 14px; border-radius: 2px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.25);
}

/* ---------- founder stamp card ---------- */
.founder-section { padding: 96px 20px; background: var(--cream); display: flex; justify-content: center; }
.stamp-card { max-width: 480px; background: var(--cream); border: 2px dashed var(--ink-soft); border-radius: 6px; padding: 40px 34px; }
.stamp-corner-label {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft);
  display: flex; justify-content: space-between; gap: 12px; margin-bottom: 22px;
}
.stamp-card blockquote { font-style: italic; font-size: 16px; line-height: 1.65; color: var(--ink); margin: 0 0 18px; }
.stamp-card .attr { font-family: var(--display); font-size: 15px; color: var(--rust); text-transform: uppercase; margin: 0; }
.stamp-card .attr a { text-decoration: none; }
.stamp-card .attr a:hover { text-decoration: underline; }

/* ---------- final cta ---------- */
.final-cta { background: var(--rust); color: var(--cream-on-dark); text-align: center; padding: 100px 24px; }
.final-cta h2 {
  font-family: var(--display); text-transform: uppercase;
  font-size: clamp(24px, 3.8vw, 40px); max-width: 18ch; margin: 0 auto 16px;
}
.final-cta p { max-width: 46ch; margin: 0 auto 28px; font-size: 15.5px; opacity: 0.92; }
.final-cta .btn-stamp { margin: 0 auto; }
.final-cta .cta-note-line { margin: 14px auto 0; }

/* ---------- footer ---------- */
footer.site-footer { background: var(--cream); color: var(--ink); border-top: 2px dashed var(--cream-line); padding: 64px 0 30px; }
.footer-grid { display: flex; flex-wrap: wrap; gap: 40px 48px; justify-content: space-between; margin-bottom: 44px; }
.footer-brand .wordmark { font-size: 20px; }
.footer-tagline { font-family: var(--mono); font-size: 12px; color: var(--ink-soft); margin: 10px 0 18px; max-width: 26ch; }
.footer-col { min-width: 140px; }
.footer-heading { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-faint); margin: 0 0 14px; }
.footer-col a { display: block; font-size: 14px; color: var(--ink-soft); text-decoration: none; margin-bottom: 10px; }
.footer-col a:hover, .footer-col a[aria-current="page"] { color: var(--ink); }
.footer-col a[aria-current="page"] { text-decoration: underline; text-underline-offset: 3px; }
.footer-bottom {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px;
  font-family: var(--mono); font-size: 11px; color: var(--ink-faint);
  padding-top: 22px; border-top: 1px solid var(--cream-line);
}

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