/* ═══════════════════════════════════════════════════════════════════════
   PORCHLIGHTRE.COM — shared styles (spec r3w3b)

   ┌─────────────────────────────────────────────────────────────────────┐
   │ BRAND LAYER — the ONLY block the Lane + Alex brand session edits.   │
   │ Swap accent hue, display face, paper tone here; nothing below this  │
   │ block or in any page names a color. Re-skin = these lines only.     │
   │ Source of truth: docs/clients/porchlight/brand/tokens.css           │
   └─────────────────────────────────────────────────────────────────────┘ */
:root {
  --pl-ink:         #1C1B19;   /* headlines, mark frame */
  --pl-ink-soft:    #36332D;   /* body emphasis */
  --pl-paper:       #FBF8F2;   /* page ground */
  --pl-paper-2:     #F4EFE4;   /* card / band on paper */
  --pl-accent:      #B9842A;   /* THE one warm spark: CTA, lit step, glow */
  --pl-accent-deep: #8f6620;
  --pl-stone:       #6B6657;   /* muted captions */
  --pl-line:        #E4DDCE;   /* hairlines */
  --pl-serif: Georgia, "Source Serif Pro", "Tiempos Text", "Iowan Old Style", serif;
  --pl-sans:  -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
  --pl-mono:  ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --pl-r: 12px;
}
/* ═══════════════ end BRAND LAYER — structure below is stable ═══════════ */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--pl-paper); color: var(--pl-ink);
  font-family: var(--pl-sans); line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-family: var(--pl-serif); line-height: 1.14; margin: 0; font-weight: 600; }
h1 { font-size: clamp(30px, 5vw, 46px); letter-spacing: -.01em; }
h2 { font-size: clamp(22px, 3vw, 28px); }
h3 { font-size: 17px; }
p { margin: 0; }
a { color: inherit; }
img { max-width: 100%; }

.kicker {
  text-transform: uppercase; letter-spacing: .26em; font-size: 11px;
  color: var(--pl-stone); font-weight: 600;
}
.lede { color: var(--pl-ink-soft); max-width: 62ch; font-size: 16.5px; margin-top: 14px; }
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 28px; }
.num { font-family: var(--pl-mono); font-variant-numeric: tabular-nums; }

/* ── header: sticky, CTA always visible ────────────────────────────── */
.site-head {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--pl-paper) 92%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--pl-line);
}
.site-head .bar {
  display: flex; align-items: center; gap: 18px;
  padding: 12px 0; flex-wrap: wrap;
}
.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; margin-right: auto; }
.brand svg { width: 30px; height: 30px; color: var(--pl-ink); flex: none; }
.brand .wm b {
  font-family: var(--pl-serif); font-size: 19px; font-weight: 600;
  letter-spacing: .2px; color: var(--pl-ink); display: block; line-height: 1;
}
.brand .wm span {
  display: block; font-size: 8.5px; letter-spacing: .28em;
  color: var(--pl-stone); margin-top: 3px; text-transform: uppercase;
}
nav.site-nav { display: flex; gap: 4px; overflow-x: auto; }
nav.site-nav a {
  text-decoration: none; font-size: 14px; color: var(--pl-ink-soft);
  padding: 11px 12px; border-radius: 8px; white-space: nowrap; min-height: 44px;
  display: inline-flex; align-items: center;
}
nav.site-nav a:hover { background: var(--pl-paper-2); }
nav.site-nav a[aria-current="page"] { color: var(--pl-ink); font-weight: 600; }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 46px; padding: 11px 20px; border-radius: 10px;
  font-size: 15px; font-weight: 600; text-decoration: none;
  border: 1.5px solid transparent; cursor: pointer;
}
.btn-primary { background: var(--pl-accent); color: var(--pl-ink); }
.btn-primary:hover { background: var(--pl-accent-deep); color: var(--pl-paper); }
.btn-ghost { border-color: var(--pl-ink); color: var(--pl-ink); }
.btn-ghost:hover { background: var(--pl-ink); color: var(--pl-paper); }
.site-head .btn { min-height: 44px; padding: 9px 16px; font-size: 14px; }

/* ── hero: warm lantern glow, motion only if allowed ───────────────── */
.hero { position: relative; overflow: hidden; padding: 72px 0 64px; }
.hero .glow {
  position: absolute; top: -180px; right: -120px; width: 560px; height: 560px;
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle,
    color-mix(in srgb, var(--pl-accent) 22%, transparent) 0%,
    transparent 65%);
}
@media (prefers-reduced-motion: no-preference) {
  .hero .glow { animation: drift 26s ease-in-out infinite alternate; }
  @keyframes drift {
    from { transform: translate(0, 0) scale(1); }
    to   { transform: translate(-50px, 34px) scale(1.08); }
  }
}
.hero .inner { position: relative; max-width: 720px; }
.hero .actions { display: flex; gap: 12px; margin-top: 26px; flex-wrap: wrap; }

/* ── sections ──────────────────────────────────────────────────────── */
section.band { padding: 52px 0; border-top: 1px solid var(--pl-line); }
section.band > .wrap > .kicker { display: block; margin-bottom: 8px; }
section.band h2 { margin-bottom: 10px; }

/* five values: rule-topped columns, no boxes */
.values { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); margin-top: 26px; }
.values .v { border-top: 2px solid var(--pl-ink); padding-top: 12px; }
.values .v b { display: block; font-family: var(--pl-serif); font-size: 16.5px; margin-bottom: 6px; }
.values .v span { font-size: 13.5px; color: var(--pl-ink-soft); line-height: 1.5; }

/* two paths */
.paths { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); margin-top: 26px; }
.path {
  background: var(--pl-paper-2); border-radius: var(--pl-r);
  padding: 26px 26px 24px; text-decoration: none; display: block;
  border: 1px solid var(--pl-line);
}
.path:hover { border-color: var(--pl-ink); }
.path h3 { font-size: 21px; margin-bottom: 8px; }
.path p { font-size: 14.5px; color: var(--pl-ink-soft); max-width: 46ch; }
.path .go { display: inline-block; margin-top: 14px; font-weight: 600; font-size: 14px; color: var(--pl-accent-deep); }

/* callout: the unknown-unknowns block */
.callout {
  background: var(--pl-paper-2); border-left: 3px solid var(--pl-accent);
  padding: 22px 26px; margin-top: 26px; border-radius: 0 10px 10px 0;
}
.callout h3 { margin-bottom: 7px; }
.callout p { font-size: 14.5px; color: var(--pl-ink-soft); max-width: 64ch; }

/* guide cards */
.guides { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); margin-top: 22px; }
.gcard { border-top: 2px solid var(--pl-line); padding-top: 12px; }
.gcard b { display: block; font-family: var(--pl-serif); font-size: 16px; margin-bottom: 5px; }
.gcard span { font-size: 13.5px; color: var(--pl-ink-soft); line-height: 1.5; }
.stage-group { margin-top: 34px; }
.stage-group > .kicker { color: var(--pl-accent-deep); }

/* phase bands (buy/sell process) — the proven grammar */
.phase { border-bottom: 1px solid var(--pl-line); padding: 30px 0; }
.phase:last-of-type { border-bottom: 0; }
.phase-head { display: flex; align-items: baseline; gap: 16px; margin-bottom: 4px; }
.phase-n {
  font-family: var(--pl-mono); font-size: 12px; color: var(--pl-accent-deep);
  font-weight: 700; letter-spacing: .1em; flex: none; width: 34px;
}
.phase-title { font-family: var(--pl-serif); font-size: 25px; font-weight: 600; }
.phase-sub { color: var(--pl-stone); font-size: 14.5px; margin: 0 0 18px 50px; max-width: 58ch; }
.steps {
  display: grid; gap: 14px; margin-left: 50px;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
}
.step { border-top: 2px solid var(--pl-line); padding-top: 11px; }
.step b { display: block; font-family: var(--pl-serif); font-size: 16px; margin-bottom: 5px; }
.step span { font-size: 13.5px; color: var(--pl-ink-soft); line-height: 1.5; }
.gate { margin: 16px 0 0 50px; font-size: 12.5px; color: var(--pl-stone); font-style: italic; }

/* standing CTA band */
.cta-band { background: var(--pl-ink); color: var(--pl-paper); padding: 52px 0; }
.cta-band h2 { color: var(--pl-paper); }
.cta-band p { color: color-mix(in srgb, var(--pl-paper) 78%, var(--pl-ink)); margin-top: 8px; max-width: 58ch; }
.cta-band .btn-primary { margin-top: 22px; }

/* team cards (about) */
.team { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); margin-top: 26px; }
.person { background: var(--pl-paper-2); border-radius: var(--pl-r); padding: 24px; border: 1px solid var(--pl-line); }
.person .photo {
  width: 84px; height: 84px; border-radius: 50%;
  background: var(--pl-line); display: flex; align-items: center; justify-content: center;
  color: var(--pl-stone); font-family: var(--pl-serif); font-size: 26px; margin-bottom: 14px;
}
.person b { font-family: var(--pl-serif); font-size: 18px; display: block; }
.person .role { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--pl-accent-deep); font-weight: 700; margin: 3px 0 10px; }
.person p { font-size: 14px; color: var(--pl-ink-soft); }

/* footer: trust block as a feature, not fine print */
footer.site-foot { border-top: 2px solid var(--pl-ink); margin-top: 0; padding: 30px 0 44px; }
.site-foot .sig { font-family: var(--pl-serif); font-size: 17px; }
.site-foot .cred { font-size: 12.5px; color: var(--pl-stone); margin-top: 5px; }
.site-foot .eho {
  font-size: 10px; color: var(--pl-stone); letter-spacing: .08em;
  text-transform: uppercase; margin-top: 12px;
}
.site-foot .disc { font-size: 11px; color: var(--pl-stone); margin-top: 6px; font-style: italic; }

/* mobile */
@media (max-width: 700px) {
  .wrap { padding: 0 18px; }
  .hero { padding: 46px 0 44px; }
  .phase-sub, .steps, .gate { margin-left: 0; }
  .phase-head { gap: 10px; }
  .phase-n { width: auto; }
  .site-head .bar { padding: 10px 0; row-gap: 0; }
  nav.site-nav { order: 3; width: 100%; margin: 0 -18px; padding: 0 12px 4px; }
}
@media print {
  @page { margin: 14mm; }
  body { background: #fff; }
  .site-head, .cta-band .btn, .hero .actions { display: none; }
  .phase { break-inside: avoid; }
}