/* Hearthside Apps - the hearth shell. One stylesheet for every page.
   Two materials: the soot-dark firebox (header, hero, footer) and the warm
   ash room where the reading happens. Display face Zilla Slab is the cast
   iron; Atkinson Hyperlegible carries the words, because legal pages should
   be the easiest text on the internet to read. Fonts are self-hosted: this
   site makes no third-party request, exactly as the privacy page promises. */

/* ---------- fonts ---------- */
@font-face{font-family:"Zilla Slab";font-style:normal;font-weight:600;font-display:swap;
  src:url("fonts/ZillaSlab-600.woff2") format("woff2")}
@font-face{font-family:"Zilla Slab";font-style:normal;font-weight:700;font-display:swap;
  src:url("fonts/ZillaSlab-700.woff2") format("woff2")}
@font-face{font-family:"Atkinson Hyperlegible";font-style:normal;font-weight:400;font-display:swap;
  src:url("fonts/Atkinson-400.woff2") format("woff2")}
@font-face{font-family:"Atkinson Hyperlegible";font-style:normal;font-weight:700;font-display:swap;
  src:url("fonts/Atkinson-700.woff2") format("woff2")}
@font-face{font-family:"Atkinson Hyperlegible";font-style:italic;font-weight:400;font-display:swap;
  src:url("fonts/Atkinson-400i.woff2") format("woff2")}

/* ---------- tokens ---------- */
:root{
  --soot:#1b1512;        /* the firebox */
  --coal:#2a221e;        /* unlit days, raised panels in the dark */
  --ash:#e9e3dd;         /* the room */
  --ash2:#f3efeb;        /* a lighter stone in the room */
  --iron:#3a302a;        /* text on ash */
  --smoke:#7b6d63;       /* dim text on ash */
  --line:#d6cbc1;        /* rules in the room */
  --ember:#e07a3f;       /* Kindling's own colour: links, lit days */
  --ember-dim:#e07a3f4d; /* a day that dimmed but never died */
  --gold:#d9a441;        /* the one brightest day */
  --ash-on-soot:#efe7df; /* text in the firebox */
  --smoke-on-soot:#a89a8f;
  --display:"Zilla Slab",Georgia,"Times New Roman",serif;
  --body:"Atkinson Hyperlegible","Segoe UI",system-ui,sans-serif;
}
@media (prefers-color-scheme:dark){
  :root{
    --ash:#221b17;
    --ash2:#2b2320;
    --iron:#eee6de;
    --smoke:#a89a8f;
    --line:#3b312b;
  }
}

/* ---------- base ---------- */
*{margin:0;padding:0;box-sizing:border-box}
html{color-scheme:light dark}
body{background:var(--ash);color:var(--iron);font-family:var(--body);
     font-size:1.06rem;line-height:1.65}
a{color:var(--ember);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:var(--gold)}
:focus-visible{outline:2px solid var(--ember);outline-offset:3px;border-radius:2px}
.wrap{max-width:1040px;margin:0 auto;padding:0 24px}

/* ---------- the firebox: header ---------- */
header.site{background:var(--soot);color:var(--ash-on-soot);padding:20px 0}
header.site .wrap{display:flex;align-items:baseline;justify-content:space-between;gap:18px}
.wordmark{font-family:var(--display);font-weight:700;font-size:1.25rem;letter-spacing:.06em;
          color:var(--ash-on-soot);text-decoration:none}
.wordmark span{color:var(--ember)}
.wordmark:hover{color:var(--ash-on-soot)}
.nav{display:flex;gap:22px;font-size:.82rem;letter-spacing:.12em;text-transform:uppercase}
.nav a{color:var(--smoke-on-soot);text-decoration:none;font-weight:700}
.nav a:hover,.nav a[aria-current]{color:var(--ember)}
/* one row of the ember grid, as the rule beneath the firebox */
.ember-rule{height:5px;background:var(--soot);position:relative}
.ember-rule::after{content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(90deg,var(--ember) 0 10px,transparent 10px 14px);
  opacity:.42}

/* ---------- the firebox: hero (index) ---------- */
.hero{background:var(--soot);color:var(--ash-on-soot);padding:64px 0 72px}
.hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
.kicker{font-family:var(--body);font-weight:700;font-size:.78rem;letter-spacing:.22em;
        text-transform:uppercase;color:var(--ember);margin-bottom:16px}
.hero h1{font-family:var(--display);font-weight:700;font-size:clamp(2.2rem,5vw,3.6rem);
         line-height:1.08;margin-bottom:18px;letter-spacing:-.005em}
.hero p{color:var(--smoke-on-soot);font-size:1.12rem;max-width:520px}
.hero p a{color:var(--ash-on-soot)}
.hero p a:hover{color:var(--ember)}
figure.grid{margin:0}
figure.grid svg{display:block;width:100%;max-width:400px;height:auto;margin:0 auto}
figure.grid .off{fill:var(--coal)}
figure.grid .lit{fill:var(--ember)}
figure.grid .dim{fill:var(--ember-dim)}
figure.grid .now{fill:var(--gold)}
@media (prefers-reduced-motion:no-preference){
  figure.grid .now{animation:breathe 4s ease-in-out infinite}
  @keyframes breathe{0%,100%{fill:var(--gold)}50%{fill:var(--ember)}}
}
figure.grid figcaption{color:var(--smoke-on-soot);font-size:.88rem;text-align:center;margin-top:16px}

/* ---------- the room ---------- */
section.room{padding:64px 0}
.eyebrow{font-weight:700;font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;
         color:var(--ember);margin-bottom:12px}
section.room h2{font-family:var(--display);font-weight:700;font-size:clamp(1.7rem,3.4vw,2.4rem);
                line-height:1.15;max-width:640px;margin-bottom:26px}
.facts{list-style:none;max-width:640px}
.facts li{position:relative;padding-left:26px;margin-bottom:14px}
.facts li::before{content:"";position:absolute;left:0;top:.55em;width:10px;height:10px;
                  border-radius:2px;background:var(--ember)}
.status{display:inline-block;margin-top:22px;font-size:.82rem;letter-spacing:.12em;
        text-transform:uppercase;font-weight:700;color:var(--smoke);
        border:1px solid var(--line);padding:6px 12px;border-radius:2px}
.contact{border-top:1px solid var(--line);margin-top:56px;padding-top:28px;color:var(--smoke)}
.contact a{font-weight:700}

/* ---------- the hearthstone: the pledge, soot on ash ---------- */
.hearth{background:var(--soot);color:var(--ash-on-soot);border-left:6px solid var(--ember);
        border-radius:2px;padding:22px 26px;margin:26px 0 8px}
.hearth b{font-family:var(--display);font-weight:700;font-size:1.15rem;color:var(--gold);
          display:block;margin-bottom:6px}
.hearth p{margin:0;color:var(--ash-on-soot)}
.hearth a{color:var(--ash-on-soot)}

/* ---------- prose pages ---------- */
.prose{max-width:760px;margin:0 auto;padding:52px 24px 72px}
.prose h1{font-family:var(--display);font-weight:700;font-size:clamp(2rem,4.4vw,2.8rem);
          line-height:1.1;margin-bottom:8px}
.prose .dim{color:var(--smoke)}
.prose h2{font-family:var(--display);font-weight:700;font-size:1.35rem;margin:40px 0 10px;
          padding-top:18px;border-top:1px solid var(--line)}
.prose h3{font-family:var(--display);font-weight:600;font-size:1.08rem;margin:22px 0 6px;color:var(--ember)}
.prose p,.prose li{margin-bottom:12px}
.prose ul{padding-left:22px}
.prose li{padding-left:4px}
.prose strong{font-weight:700}
.btn{display:inline-block;background:var(--ember);color:var(--soot);text-decoration:none;
     font-weight:700;padding:12px 20px;border-radius:2px;margin:6px 0 14px}
.btn:hover{background:var(--gold);color:var(--soot)}

/* ---------- the firebox: footer ---------- */
footer.site{background:var(--soot);color:var(--smoke-on-soot);padding:34px 0;font-size:.92rem}
footer.site .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;align-items:baseline}
footer.site .tag{font-family:var(--display);font-weight:600;font-size:1.02rem;color:var(--ash-on-soot)}
footer.site a{color:var(--smoke-on-soot);text-decoration:none}
footer.site a:hover{color:var(--ember)}

/* ---------- responsive ---------- */
@media (max-width:820px){
  .hero{padding:44px 0 52px}
  .hero .wrap{grid-template-columns:1fr;gap:34px}
  figure.grid{order:-1}
  figure.grid svg{max-width:320px}
  header.site .wrap{flex-wrap:wrap;justify-content:center;row-gap:10px}
  .nav{flex-wrap:wrap;justify-content:center;gap:14px}
  section.room{padding:48px 0}
}