/* Styles for the policy pages and the 404 page.
   Tokens, buttons, nav and footer match the home page, which keeps its own copy inline. */

/* League Spartan (SIL Open Font License) */
@font-face{
  font-family:'League Spartan';
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url(/assets/league-spartan.woff2) format('woff2');
}

/* ============================= RESET ============================= */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3, p { margin: 0; }

/* ============================= TOKENS ============================= */
:root{
  --ink:        #2A2124;
  --ink-soft:   #61535A;
  --ink-muted:  #75676E;
  --red:        #BE3A3B;
  --red-deep:   #9E2C2E;
  --red-soft:   #E8A29B;
  --blush:      #FBEDEA;
  --blush-deep: #F6DCD8;
  --cream:      #FFFAF7;
  --rule:       #F0DFD9;
  --rule-soft:  #F8ECE7;
  --paper:      #FFFFFF;
  --max:        1180px;
  --gutter:     clamp(20px, 5vw, 60px);
  --display:    "League Spartan", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --sans:       "Helvetica Neue", Helvetica, Arial, sans-serif;
  --ease-out:   cubic-bezier(0.23, 1, 0.32, 1);
}

/* ============================= BASE ============================= */
body{
  background: var(--cream);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16.5px;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
}
::selection{ background: var(--blush-deep); color: var(--ink); }
h1, h2, h3{ font-family: var(--display); letter-spacing: -0.03em; line-height: 1.1; }
.wrap{ max-width: var(--max); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.skip-link{ position:absolute; left:-9999px; top:0; background: var(--ink); color:#fff; padding:12px 20px; z-index:999; font-weight:700; }
.skip-link:focus{ left:0; }
a:focus-visible{ outline: 2.5px solid var(--red); outline-offset: 3px; border-radius: 6px; }
/* In the dark footer a red ring can't be seen, so it turns white there. */
.footer a:focus-visible{ outline-color:#fff; }

/* ============================= BUTTONS ============================= */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding: 15px 28px; border-radius: 999px;
  font-family: var(--sans); font-size: 14.5px; font-weight: 700; letter-spacing: 0.01em;
  text-decoration:none; border:1.5px solid transparent; cursor:pointer; white-space:nowrap;
  transition: transform 140ms var(--ease-out), background 180ms var(--ease-out), border-color 180ms var(--ease-out), color 180ms var(--ease-out);
}
.btn-primary{ background: var(--red); color:#fff; }
.btn-primary:hover{ background: var(--red-deep); }
.btn-ghost{ border-color: #B97D78; color: var(--ink); background: rgba(255,255,255,.7); }
.btn-ghost:hover{ border-color: var(--red); color: var(--red-deep); background: var(--blush); }
.btn-sm{ padding: 11px 20px; font-size: 13.5px; }
.btn:active{ transform: scale(0.97); }

/* ============================= NAV ============================= */
.nav{
  position: sticky; top:0; z-index:100;
  background: rgba(253,248,244,.92);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border-bottom: 1px solid var(--rule);
}
.nav-inner{ display:flex; align-items:center; justify-content:space-between; gap:24px; height:74px; }
.nav-logo img{ height:46px; width:auto; }

/* ============================= POLICY TEXT ============================= */
.page{ padding: clamp(44px,6vw,80px) 0 clamp(66px,8vw,112px); }
.prose{ max-width: 44rem; }
.page h1{ font-size: clamp(35px, 4.6vw, 52px); font-weight: 800; line-height: 1.04; margin-bottom: clamp(26px,3vw,40px); max-width: 44rem; }
.prose h2{ font-size: clamp(22px, 2.4vw, 27px); font-weight: 800; margin: 44px 0 14px; }
.prose h3{ font-size: 19px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.3; margin: 32px 0 10px; }
.prose > :first-child{ margin-top: 0; }
.prose p{ color: var(--ink-soft); margin: 0 0 12px; }
.prose p strong, .prose li strong{ color: var(--ink); }
.prose ul{ margin: 4px 0 18px; padding-left: 1.2em; color: var(--ink-soft); }
.prose li{ margin: 0 0 8px; padding-left: 4px; }
.prose li::marker{ color: var(--red); }
.prose a{ color: var(--red-deep); text-underline-offset: 3px; overflow-wrap: anywhere; }
.prose a:hover{ color: var(--red); }
.prose .notice{ margin: 0 0 28px; border:1px solid var(--blush-deep); border-radius: 14px; background: var(--blush); padding:16px 20px; color: var(--red-deep); font-weight:700; font-size:15px; }

/* ============================= SERVICE, PROFILE AND ARTICLE PAGES ============================= */
.prose .page-lede{ font-size: 19px; line-height: 1.6; color: var(--ink); margin: 0 0 26px; }
.page-ctas{ display:flex; flex-wrap:wrap; gap:12px; margin: 0 0 12px; }
.prose .page-ctas a{ color: inherit; text-decoration: none; }
.prose .page-ctas .btn-primary{ color:#fff; }
.facts{ display:grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap:12px; margin: 6px 0 18px; }
.facts div{ background: var(--paper); border:1px solid var(--rule); border-radius:14px; padding:14px 16px; }
.facts dt{ font-size:13px; font-weight:700; color: var(--ink-muted); }
.facts dd{ margin:4px 0 0; font-family: var(--display); font-size:22px; font-weight:800; letter-spacing:-0.02em; line-height:1.15; color: var(--red); }
.prose ul.chip-list{ list-style:none; padding:0; display:flex; flex-wrap:wrap; gap:8px; margin: 4px 0 18px; }
.prose ul.chip-list li{ margin:0; padding:7px 15px; border-radius:999px; background: var(--blush); color: var(--ink); font-size:14.5px; font-weight:600; }
.quote{ margin: 0 0 16px; padding: 20px 22px; background: var(--paper); border:1px solid var(--rule); border-radius:14px; }
.quote blockquote{ margin:0; }
.prose .quote p{ color: var(--ink); margin:0; }
.quote figcaption{ margin-top:10px; font-size:14px; font-weight:700; color: var(--ink-muted); }
.prose .address{ color: var(--ink); }
.prose .quals{ font-size:14.5px; font-weight:700; letter-spacing:0.02em; color: var(--red-deep); margin: 0 0 16px; }
.about-photo{ width: 200px; border-radius: 18px; margin: 0 0 22px; }
.byline{ margin: -14px 0 30px; font-size:15px; color: var(--ink-muted); }
.byline a{ color: var(--red-deep); text-underline-offset: 3px; }
.prose ol{ margin: 4px 0 18px; padding-left: 1.4em; color: var(--ink-soft); }
.prose .article-note{ margin-top:34px; padding-top:18px; border-top:1px solid var(--rule); font-size:14.5px; }

/* ============================= 404 ============================= */
.lost{ text-align:center; padding: clamp(80px,12vw,160px) 0; }
.lost h1{ margin: 0 auto 18px; }
.lost p{ color: var(--ink-soft); font-size: 18px; max-width: 30em; margin: 0 auto; }
.lost .ctas{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top: 34px; }

/* ============================= FOOTER ============================= */
.footer{ background: var(--ink); color: rgba(255,255,255,.72); padding: clamp(54px,6vw,76px) 0 34px; }
.foot-grid{ display:grid; grid-template-columns: 1.5fr 1fr 1fr; gap:44px; }
@media (max-width:780px){ .foot-grid{ grid-template-columns:1fr; gap:34px; } }
.foot-grid > div > img{ height:52px; width:auto; margin-bottom:18px; filter: brightness(0) invert(1); opacity:.92; }
.foot-grid p{ font-size:14px; max-width:30em; }
.foot-col h2{ font-family: var(--sans); font-size:14px; font-weight:700; letter-spacing:0; line-height:1.4; color:#fff; margin-bottom:12px; }
.foot-col a{ display:block; text-decoration:none; color: rgba(255,255,255,.78); font-size:14.5px; padding:8px 0; text-underline-offset:4px; transition: color 180ms var(--ease-out); }
.foot-col a:hover{ color:#fff; text-decoration: underline; }
.foot-reg, .foot-addr{ margin-top:10px; }
.nowrap{ white-space:nowrap; }
.foot-col p{ margin-bottom:10px; }
.foot-emergency{ margin-top:18px; font-weight:700; color:#fff; font-size:13.5px; }
.foot-bottom{ margin-top:30px; padding-top:24px; border-top:1px solid rgba(255,255,255,.14); display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between; align-items:center; font-size:12.5px; color: rgba(255,255,255,.62); }
.to-top{ display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 18px; border:1px solid rgba(255,255,255,.35); border-radius:999px; color:#fff; font-size:14px; font-weight:700; text-decoration:none; transition: border-color 180ms var(--ease-out), background 180ms var(--ease-out); }
.to-top svg{ width:16px; height:16px; }
.to-top:hover{ border-color:#fff; background: rgba(255,255,255,.08); }
html{ scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ transition-duration:.001ms !important; }
}