/*
Theme Name: sosSTEVIE
Theme URI: https://sosstevie.com
Author: Stevie
Description: Speed-first theme for sosSTEVIE. No page builder, no webfonts, no runtime dependencies. Built to be exported as static HTML in Phase 2.
Version: 1.0
License: GPL v2 or later
Text Domain: sosstevie
*/

/* ============================================================
   TOKENS
   Orange is reserved for emergency. Nothing else uses it.
   ============================================================ */

:root {
  --ink:        #14171a;
  --ink-2:      #3d444b;
  --slate:      #5a6068;
  --mute:       #868d94;
  --rule:       #e2e3e0;
  --rule-soft:  #eeefec;
  --paper:      #f7f7f5;
  --card:       #ffffff;

  --signal:     #e8500f;
  --signal-ink: #b83c08;
  --signal-bg:  #fdeee6;

  --measure:    68ch;
  --shell:      1180px;
  --prose:      42rem;

  --f-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --f-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* Type scale — 1.25 ratio, clamped for fluid display sizes */
  --t-xs:   0.75rem;
  --t-sm:   0.875rem;
  --t-base: 1.0625rem;
  --t-md:   1.1875rem;
  --t-lg:   clamp(1.35rem, 1.1rem + 1.1vw, 1.75rem);
  --t-xl:   clamp(1.75rem, 1.3rem + 2vw, 2.5rem);
  --t-2xl:  clamp(2.25rem, 1.5rem + 3.4vw, 3.75rem);

  --sp-1: .375rem;
  --sp-2: .75rem;
  --sp-3: 1.25rem;
  --sp-4: 2rem;
  --sp-5: 3rem;
  --sp-6: 4.5rem;
  --sp-7: 7rem;
}

/* ============================================================
   RESET
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

body {
  font-family: var(--f-body);
  font-size: var(--t-base);
  line-height: 1.65;
  color: var(--ink-2);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, picture, svg, video { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
h1, h2, h3, h4 { text-wrap: balance; }
p, li { text-wrap: pretty; }

:focus-visible {
  outline: 3px solid var(--signal);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--ink); color: #fff; padding: var(--sp-2) var(--sp-3);
}
.skip:focus { left: 0; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ============================================================
   LAYOUT
   ============================================================ */

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--sp-3);
}
@media (min-width: 40rem) { .shell { padding-inline: var(--sp-4); } }

.prose { max-width: var(--prose); }
.prose > * + * { margin-top: var(--sp-3); }
.prose h2 { margin-top: var(--sp-6); }
.prose h3 { margin-top: var(--sp-5); }
.prose > :first-child { margin-top: 0; }

/* ============================================================
   TYPE
   ============================================================ */

h1, .h1 {
  font-size: var(--t-2xl);
  line-height: 1.04;
  letter-spacing: -0.033em;
  font-weight: 800;
  color: var(--ink);
}

h2, .h2 {
  font-size: var(--t-xl);
  line-height: 1.14;
  letter-spacing: -0.021em;
  font-weight: 750;
  color: var(--ink);
}

h3, .h3 {
  font-size: var(--t-lg);
  line-height: 1.25;
  letter-spacing: -0.012em;
  font-weight: 700;
  color: var(--ink);
}

h4 {
  font-size: var(--t-md);
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.006em;
}

/* Micro-label. Wide tracking, small, uppercase. Used for pillar
   markers and section eyebrows — always encodes real information. */
.label {
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--mute);
  display: inline-flex;
  align-items: center;
  gap: .55em;
}
.label--signal { color: var(--signal-ink); }
.label::before {
  content: "";
  width: 1.4em; height: 2px;
  background: currentColor;
  flex: none;
}

.dek {
  font-size: var(--t-md);
  line-height: 1.5;
  color: var(--slate);
  font-style: italic;
  max-width: 34rem;
}

.lede { font-size: var(--t-md); line-height: 1.55; color: var(--ink-2); }

a { color: var(--ink); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--signal-ink); }

.prose ul, .prose ol { padding-left: 1.15rem; }
.prose li + li { margin-top: .5rem; }
.prose li::marker { color: var(--mute); }
.prose strong { color: var(--ink); font-weight: 700; }

hr {
  border: 0;
  height: 1px;
  background: var(--rule);
  margin-block: var(--sp-5);
}

/* ============================================================
   SIGNATURE — THE ANSWER BLOCK
   The extractable AEO paragraph. The most important object on
   any page, so it is the one element that gets real treatment.
   ============================================================ */

.answer {
  margin-block: var(--sp-5);
  padding: var(--sp-4);
  background: var(--card);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--ink);
  position: relative;
}

.answer__label {
  font-size: var(--t-xs);
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink);
  display: block;
  margin-bottom: var(--sp-2);
}

.answer__body {
  font-size: var(--t-md);
  line-height: 1.55;
  color: var(--ink);
  font-weight: 450;
}

/* On rescue pages the answer is an emergency instruction. */
.pillar-rescue .answer {
  border-left-color: var(--signal);
  background: var(--signal-bg);
  border-color: #f6d9c9;
}
.pillar-rescue .answer__label { color: var(--signal-ink); }

/* ============================================================
   TAKEAWAYS
   ============================================================ */

.takeaways {
  margin-block: var(--sp-5);
  padding-top: var(--sp-3);
  border-top: 2px solid var(--ink);
}
.takeaways ul { list-style: none; padding: 0; margin-top: var(--sp-3); }
.takeaways li {
  padding-left: 1.6rem;
  position: relative;
  margin-top: var(--sp-2);
}
.takeaways li::before {
  content: "";
  position: absolute;
  left: 0; top: .68em;
  width: .7rem; height: 2px;
  background: var(--mute);
}

/* ============================================================
   EMERGENCY BAR — sitewide, sticky, always reachable
   ============================================================ */

.emergency {
  background: var(--ink);
  color: #fff;
  font-size: var(--t-sm);
}
.emergency__in {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2) var(--sp-3);
  padding-block: .6rem;
  text-align: center;
}
.emergency a {
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  border-bottom: 2px solid var(--signal);
  padding-bottom: 1px;
  white-space: nowrap;
}
.emergency a:hover { color: #fff; background: var(--signal); border-color: var(--signal); }
.emergency__dot {
  width: .5rem; height: .5rem; border-radius: 50%;
  background: var(--signal);
  flex: none;
}

/* ============================================================
   HEADER
   ============================================================ */

.masthead {
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
  position: sticky;
  top: 0;
  z-index: 50;
}
.masthead__in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding-block: var(--sp-2);
  min-height: 3.75rem;
}

.brand {
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: -.028em;
  color: var(--ink);
  text-decoration: none;
  flex: none;
}
.brand span { color: var(--signal); }

.nav { display: flex; align-items: center; gap: var(--sp-3); }
.nav a {
  font-size: var(--t-sm);
  font-weight: 650;
  text-decoration: none;
  color: var(--ink-2);
  letter-spacing: -.005em;
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--ink); }
.nav a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--ink); }

@media (max-width: 46rem) {
  .nav--main { display: none; }
}

/* ============================================================
   BUTTONS
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  padding: .8em 1.35em;
  font-size: var(--t-sm);
  font-weight: 700;
  letter-spacing: -.005em;
  text-decoration: none;
  border: 2px solid var(--ink);
  background: var(--ink);
  color: #fff;
  transition: background .12s ease, color .12s ease;
}
.btn:hover { background: transparent; color: var(--ink); }

.btn--ghost { background: transparent; color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: #fff; }

.btn--signal {
  background: var(--signal);
  border-color: var(--signal);
  color: #fff;
}
.btn--signal:hover { background: transparent; color: var(--signal-ink); }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
}

/* ============================================================
   HERO
   ============================================================ */

.hero { padding-block: var(--sp-6) var(--sp-5); }
.hero__label { margin-bottom: var(--sp-3); }
.hero h1 { max-width: 22ch; }
.hero .dek { margin-top: var(--sp-3); }

.hero__media {
  margin-top: var(--sp-5);
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--rule-soft);
}
.hero__media img { width: 100%; height: 100%; object-fit: cover; }

/* ============================================================
   PILLARS — the triage ladder. Order carries meaning.
   ============================================================ */

.pillars {
  display: grid;
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  margin-block: var(--sp-5);
}
@media (min-width: 52rem) { .pillars { grid-template-columns: repeat(4, 1fr); } }

.pillar {
  background: var(--card);
  padding: var(--sp-4) var(--sp-3);
  text-decoration: none;
  display: block;
  transition: background .12s ease;
}
.pillar:hover { background: var(--paper); }
.pillar__step {
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  color: var(--mute);
  letter-spacing: .04em;
}
.pillar__name {
  font-size: var(--t-lg);
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--ink);
  margin-top: var(--sp-1);
}
.pillar__state {
  font-size: var(--t-sm);
  color: var(--slate);
  margin-top: var(--sp-1);
}
.pillar--rescue .pillar__name { color: var(--signal-ink); }

/* ============================================================
   SERVICE INDEX
   ============================================================ */

.svc-list { list-style: none; padding: 0; margin-top: var(--sp-4); }
.svc {
  border-top: 1px solid var(--rule);
}
.svc:last-child { border-bottom: 1px solid var(--rule); }
.svc a {
  display: grid;
  gap: var(--sp-1) var(--sp-3);
  padding-block: var(--sp-3);
  text-decoration: none;
  align-items: baseline;
}
@media (min-width: 46rem) {
  .svc a { grid-template-columns: 1fr auto; }
}
.svc:hover { background: var(--card); }
.svc__q { font-size: var(--t-md); font-weight: 700; color: var(--ink); letter-spacing: -.012em; }
.svc__meta { font-size: var(--t-sm); color: var(--mute); }
.svc__price { font-family: var(--f-mono); font-size: var(--t-sm); color: var(--ink-2); white-space: nowrap; }

/* ============================================================
   FAQ
   ============================================================ */

.faq { margin-top: var(--sp-4); }
.faq__item { border-top: 1px solid var(--rule); padding-block: var(--sp-3); }
.faq__item:last-child { border-bottom: 1px solid var(--rule); }
.faq__q { font-size: var(--t-md); font-weight: 700; color: var(--ink); }
.faq__a { margin-top: var(--sp-2); }

/* ============================================================
   FIGURES
   ============================================================ */

figure { margin-block: var(--sp-5); }
figure img { width: 100%; }
figcaption {
  font-size: var(--t-sm);
  color: var(--mute);
  margin-top: var(--sp-2);
  max-width: var(--prose);
}

/* ============================================================
   AUTHOR / BIO
   ============================================================ */

.bio {
  margin-top: var(--sp-6);
  padding-top: var(--sp-4);
  border-top: 2px solid var(--ink);
}
.bio__name { font-size: var(--t-md); font-weight: 800; color: var(--ink); }
.bio p { margin-top: var(--sp-2); color: var(--slate); font-size: var(--t-sm); line-height: 1.6; }

/* ============================================================
   CTA PANEL
   ============================================================ */

.cta {
  margin-top: var(--sp-6);
  padding: var(--sp-5) var(--sp-4);
  background: var(--ink);
  color: #fff;
}
.cta h2 { color: #fff; }
.cta p { color: #c9ccd0; margin-top: var(--sp-2); max-width: 38rem; }
.cta .btn { border-color: #fff; background: #fff; color: var(--ink); }
.cta .btn:hover { background: transparent; color: #fff; }
.cta .btn--signal { background: var(--signal); border-color: var(--signal); color: #fff; }
.cta .btn--signal:hover { background: transparent; color: #fff; }

/* ============================================================
   FOOTER
   ============================================================ */

.foot {
  margin-top: var(--sp-6);
  border-top: 1px solid var(--rule);
  padding-block: var(--sp-5) var(--sp-4);
  font-size: var(--t-sm);
}
.foot__grid { display: grid; gap: var(--sp-4); }
@media (min-width: 46rem) { .foot__grid { grid-template-columns: 1.4fr 1fr 1fr; } }
.foot h4 { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .13em; color: var(--mute); font-weight: 700; }
.foot ul { list-style: none; padding: 0; margin-top: var(--sp-2); }
.foot li + li { margin-top: .4rem; }
.foot a { color: var(--ink-2); text-decoration: none; }
.foot a:hover { color: var(--signal-ink); text-decoration: underline; }
.foot__legal {
  margin-top: var(--sp-4);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--rule-soft);
  color: var(--mute);
  font-size: var(--t-xs);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-3);
  justify-content: space-between;
}

/* ============================================================
   SECTIONS
   ============================================================ */

.section { padding-block: var(--sp-5); }
.section--tight { padding-block: var(--sp-4); }
.section__head { max-width: 44rem; margin-bottom: var(--sp-4); }
.section__head .label { margin-bottom: var(--sp-2); }

.rule-top { border-top: 1px solid var(--rule); }

/* Print — people do print rescue instructions */
@media print {
  .emergency, .masthead, .cta, .foot { display: none; }
  body { background: #fff; font-size: 11pt; }
  .answer { border: 2px solid #000; background: #fff; }
}