/* Guided Hope, company site
   ------------------------------------------------------------------------------------
   The same register as the Recovery Companion patient app: warm paper, deep ink, a serif
   voice for headings, small-caps mono labels for the system voice, hairline rules instead
   of boxes, and one saturated element per screen, the clay call to action.

   Fonts are system stacks. Nothing here loads from a third party. No script runs. */

:root {
  --paper: #f4f0e8;
  --paper-2: #ece7dc;
  --paper-3: #e3ddcf;
  --ink: #1b1917;
  --ink-2: #48433c;
  --ink-3: #7d766b;
  --rule: rgba(27, 25, 23, .16);
  --rule-strong: rgba(27, 25, 23, .34);
  --clay: #b8562f;
  --clay-deep: #96431f;
  --clay-ink: #f9f2ec;
  --sage: #5a7a60;
  --serif: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino, "URW Palladio L", P052, Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --gutter: 24px;
  --measure: 1120px;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #161412;
    --paper-2: #1c1916;
    --paper-3: #24201c;
    --ink: #ece6da;
    --ink-2: #c6bfb1;
    --ink-3: #8b8377;
    --rule: rgba(236, 230, 218, .14);
    --rule-strong: rgba(236, 230, 218, .32);
    --clay: #d7764f;
    --clay-deep: #b95c37;
    --clay-ink: #1d110b;
    --sage: #93b397;
    --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #161412; --paper-2: #1c1916; --paper-3: #24201c;
  --ink: #ece6da; --ink-2: #c6bfb1; --ink-3: #8b8377;
  --rule: rgba(236, 230, 218, .14); --rule-strong: rgba(236, 230, 218, .32);
  --clay: #d7764f; --clay-deep: #b95c37; --clay-ink: #1d110b; --sage: #93b397;
  color-scheme: dark;
}

/* ---------- base ---------- */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; min-width: 320px;
  font-family: var(--sans); font-size: 17px; line-height: 1.55; color: var(--ink);
  background: var(--paper);
  font-synthesis: none; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased;
}
body::before {
  content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image: var(--grain);
}
body > * { position: relative; z-index: 1; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
:where(a):focus-visible { outline: 2px solid var(--clay); outline-offset: 3px; }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; letter-spacing: -.01em; margin: 0; }
h1 { font-size: clamp(38px, 5.2vw, 62px); line-height: 1.04; }
h1 em { font-style: italic; color: var(--clay); }
h2 { font-size: clamp(28px, 3.4vw, 40px); line-height: 1.12; max-width: 22ch; }
h3 { font-size: 21px; line-height: 1.25; margin-bottom: 8px; }
p { margin: 0; }
p + p { margin-top: 1em; }
.lede { font-size: clamp(18px, 1.6vw, 20px); color: var(--ink-2); max-width: 58ch; }

/* Small-caps mono label: the system voice for metadata. */
.label {
  font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-3); font-weight: 500; margin: 0 0 14px;
}
.label::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--clay); margin-right: 10px; vertical-align: 1px; }

.skip { position: absolute; left: -999px; top: 8px; background: var(--paper); padding: 8px 12px; z-index: 5; }
.skip:focus { left: 8px; }

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

/* ---------- masthead ---------- */

.masthead {
  display: flex; align-items: center; gap: 28px;
  max-width: var(--measure); margin: 0 auto; padding: 18px var(--gutter);
  border-bottom: 1px solid var(--rule);
}
.wordmark { display: inline-flex; align-items: center; gap: 10px; font-family: var(--serif); font-size: 22px; text-decoration: none; }
.wordmark i { width: 9px; height: 9px; border-radius: 50%; background: var(--clay); }
.masthead nav { display: flex; gap: 22px; margin-left: auto; }
.masthead nav a {
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-2); text-decoration: none; padding: 6px 0; border-bottom: 1px solid transparent;
}
.masthead nav a:hover { border-bottom-color: var(--rule-strong); }

/* ---------- controls ---------- */

.cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 22px; border-radius: 999px; background: var(--clay); color: var(--clay-ink);
  text-decoration: none; font-weight: 500; white-space: nowrap;
}
.cta:hover { background: var(--clay-deep); }
.cta.small { padding: 9px 16px; font-size: 14px; }
.quiet {
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-2); text-decoration: none; border-bottom: 1px solid var(--rule-strong); padding-bottom: 3px;
}
.quiet:hover { color: var(--ink); border-bottom-color: var(--ink); }
.actions { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; margin-top: 30px; }

/* ---------- hero ---------- */

.hero {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 48px; align-items: center;
  max-width: var(--measure); margin: 0 auto; padding: 72px var(--gutter) 64px;
}
.hero .lede { margin-top: 22px; }
.shot { margin: 0; }
.shot img {
  border: 1px solid var(--rule-strong); border-radius: 6px; background: var(--paper-2);
  box-shadow: 0 24px 60px -30px rgba(27, 25, 23, .45);
}
.shot figcaption { margin-top: 12px; font-size: 13.5px; color: var(--ink-3); }

/* ---------- bands ---------- */

.band {
  max-width: var(--measure); margin: 0 auto; padding: 64px var(--gutter);
  border-top: 1px solid var(--rule);
}
.band h2 { margin-bottom: 36px; }
.band .lede + .shot, .band h2 + .lede { margin-top: -16px; }
.band .lede { margin-bottom: 36px; }
.three, .two { display: grid; gap: 40px; }
.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.two { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 48px; }
.three > div, .two > div { border-top: 1px solid var(--rule-strong); padding-top: 18px; }
.three p, .two p { color: var(--ink-2); }
ul { margin: 0; padding: 0; list-style: none; }
ul li { position: relative; padding-left: 22px; color: var(--ink-2); }
ul li + li { margin-top: 10px; }
ul li::before { content: ''; position: absolute; left: 0; top: .72em; width: 8px; height: 1px; background: var(--ink-3); }

.steps { margin: 0; padding: 0; list-style: none; display: grid; gap: 36px; max-width: 760px; }
.steps li { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 18px; align-items: start; }
.steps .num { font-family: var(--serif); font-size: 40px; line-height: 1; color: var(--clay); font-variant-numeric: lining-nums; }
.steps p { color: var(--ink-2); }

.shot.wide { margin: 0 0 8px; }

.status {
  margin-top: 48px; padding: 24px 28px; border: 1px solid var(--rule-strong); border-radius: 6px;
  background: var(--paper-2); max-width: 760px;
}
.status p:last-child { color: var(--ink-2); }

.contact .address { margin-top: 8px; font-family: var(--serif); font-size: clamp(24px, 3vw, 34px); }
.contact .address a { text-decoration: none; border-bottom: 1px solid var(--rule-strong); }
.contact .address a:hover { color: var(--clay); border-bottom-color: var(--clay); }

/* ---------- colophon ---------- */

.colophon {
  max-width: var(--measure); margin: 0 auto; padding: 22px var(--gutter) 40px;
  border-top: 1px solid var(--rule); display: flex; gap: 8px 28px; flex-wrap: wrap;
  font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3);
}

/* ---------- narrower ---------- */

@media (max-width: 960px) {
  .hero { grid-template-columns: minmax(0, 1fr); gap: 40px; padding-top: 56px; }
  .three { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .masthead nav { display: none; }
}
@media (max-width: 640px) {
  :root { --gutter: 16px; }
  body { font-size: 16px; }
  .two { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .band { padding: 48px var(--gutter); }
  .steps li { grid-template-columns: 40px minmax(0, 1fr); gap: 12px; }
  .steps .num { font-size: 30px; }
  .cta.small { display: none; }
  .masthead { padding: 14px var(--gutter); }
}