/* Hearth Above — shared styles. Skin: "Hearth & Wood" (design/themes/skins/set-1/skins.json, key "hearth-wood").
   Art in /assets/hearth-wood-*.svg is derived from design/themes/skins/set-1/svg/ (see README).
   System fonts only: no web fonts, no third parties. */

:root {
  color-scheme: light dark;
  --page: #EDE3D4;
  --page-rgb: 237 227 212;
  --text-strong: #34261E;
  --text: #44362B;
  --text-soft: #5B4938;
  --text-muted: #5D4D3C;
  --accent: #804D1F;
  --scripture-bg: #F3E8D8;
  --scripture-text: #49351F;
  --scripture-rule: #996229;
  --mark: #694B43;
  --flame: #A45E2E;
  --hairline: rgb(170 132 69 / 0.45);
  --glow: rgb(231 170 86 / 0.25); /* peak kept low so accent links pass 4.5:1 even under it */
  --glow-soft: rgb(222 179 124 / 0.05);

  --card-top: #FCF8F1;
  --card-bottom: #F9F4EB;
  --card-border: #CAB8A6;
  --card-highlight: #FFFDF6;
  --card-shadow: 0 1px 2px rgb(92 64 42 / 0.08), 0 7px 12px rgb(92 64 42 / 0.13), 0 18px 32px -14px rgb(92 64 42 / 0.18);

  --btn-top: #8B5C32;
  --btn-bottom: #78491F;
  --btn-hover-top: #93633A;
  --btn-hover-bottom: #7E4E24;
  --btn-active-top: #7A4C22;
  --btn-active-bottom: #6E431C;
  --btn-text: #FFF8EB;
  --btn-border: #7D4E24;
  --btn-highlight: rgb(255 228 190 / 0.38);
  --btn-shade: rgb(52 30 12 / 0.22);
  --btn-shadow-rgb: 92 64 42;

  --img-wood: url("/assets/hearth-wood-wood-light.svg");
  --img-hearth: url("/assets/hearth-wood-hearth-light.svg");
  --img-texture: url("/assets/hearth-wood-texture-light.svg");
  --img-corner: url("/assets/hearth-wood-corner-light.svg");
  --img-divider: url("/assets/hearth-wood-divider-light.svg");
  --img-frame: url("/assets/hearth-wood-header-light.svg");

  /* Close to the skin's heading font (Lora 700) using fonts already on the reader's device. */
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
  --radius: 16px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --page: #211B17;
    --page-rgb: 33 27 23;
    --text-strong: #F3E8D7;
    --text: #E6D8C5;
    --text-soft: #CFBDA7;
    --text-muted: #BFA98E;
    --accent: #E2B06C;
    --scripture-bg: #382C21;
    --scripture-text: #EDDCBF;
    --scripture-rule: #D9A55F;
    --mark: #FAE7CB;
    --flame: #DEB074;
    --hairline: rgb(194 160 100 / 0.38);
    --glow: rgb(231 170 86 / 0.16);
    --glow-soft: rgb(222 179 124 / 0.035);

    --card-top: #2F2620;
    --card-bottom: #2D251F;
    --card-border: #6F5B47;
    --card-highlight: #686055;
    --card-shadow: 0 1px 2px rgb(19 15 13 / 0.3), 0 7px 12px rgb(19 15 13 / 0.28), 0 20px 36px -14px rgb(19 15 13 / 0.5);

    --btn-top: #E4B677;
    --btn-bottom: #E2B06C;
    --btn-hover-top: #EBC287;
    --btn-hover-bottom: #E6B674;
    --btn-active-top: #D9A862;
    --btn-active-bottom: #DCAA64;
    --btn-text: #292016;
    --btn-border: #DCAE74;
    --btn-highlight: rgb(255 246 226 / 0.6);
    --btn-shade: rgb(90 58 24 / 0.22);
    --btn-shadow-rgb: 19 15 13;

    --img-wood: url("/assets/hearth-wood-wood-dark.svg");
    --img-hearth: url("/assets/hearth-wood-hearth-dark.svg");
    --img-texture: url("/assets/hearth-wood-texture-dark.svg");
    --img-corner: url("/assets/hearth-wood-corner-dark.svg");
    --img-divider: url("/assets/hearth-wood-divider-dark.svg");
    --img-frame: url("/assets/hearth-wood-header-dark.svg");
  }
}

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

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background-color: var(--page); }

/* Page: oak planks, a warm glow at the top, and a calm wash over the planks further down. */
body {
  margin: 0;
  background-color: var(--page);
  background-image:
    linear-gradient(180deg, rgb(var(--page-rgb) / 0) 0, rgb(var(--page-rgb) / 0.15) 420px, rgb(var(--page-rgb) / 0.6) 1100px),
    radial-gradient(ellipse 560px 480px at 82% 0, var(--glow), var(--glow-soft) 60%, transparent 100%),
    var(--img-wood);
  background-repeat: no-repeat, no-repeat, repeat;
  background-size: auto, auto, 390px 844px;
  color: var(--text);
  font-family: var(--sans);
  font-size: 1.0625rem; /* 17px */
  line-height: 1.6;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.wrap {
  width: 100%;
  max-width: 44rem;
  margin: 0 auto;
  padding: 0 16px;
}

.skip {
  position: absolute;
  left: 16px;
  top: -4rem;
  background: var(--card-top);
  color: var(--text-strong);
  padding: 0.5rem 0.9rem;
  border-radius: 8px;
  z-index: 10;
}
.skip:focus { top: 8px; }

/* Header */
.site-header { position: relative; padding: 14px 0 10px; }
.site-header::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--hairline) 18%, var(--hairline) 82%, transparent);
}
.site-header .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 24px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--text-strong); text-decoration: none; font-family: var(--serif); font-weight: 700; font-size: 1.4rem; line-height: 1.2; letter-spacing: -0.01em; }
.brand svg { width: 28px; height: 30px; flex: none; }
.brand .m1 { fill: var(--mark); }
.brand .m2 { fill: var(--flame); }
.site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 18px; }
.site-nav a { display: inline-block; padding: 8px 0; color: var(--text-soft); text-decoration: none; font-size: 0.95rem; }
.site-nav a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 6px; }
.site-nav a[aria-current="page"] { color: var(--text-strong); font-weight: 600; text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 6px; text-decoration-thickness: 2px; }

/* Main */
main { flex: 1 0 auto; padding: 36px 0 56px; }
main p, main li { max-width: 65ch; }

h1, h2, h3 { font-family: var(--serif); color: var(--text-strong); font-weight: 700; line-height: 1.22; }
h1 { font-size: clamp(2rem, 6.4vw, 2.75rem); margin: 0 0 0.5em; letter-spacing: -0.015em; }
h2 { font-size: 1.5rem; margin: 2em 0 0.5em; letter-spacing: -0.01em; }
h3 { font-size: 1.18rem; margin: 1.8em 0 0.3em; }
p { margin: 0 0 1em; }
ul { padding-left: 1.3em; margin: 0 0 1em; }
li { margin-bottom: 0.45em; }
li::marker { color: var(--scripture-rule); }
.lede { font-size: 1.2rem; color: var(--text-soft); max-width: 40ch; }
.meta { color: var(--text-muted); font-size: 0.95rem; }

a { color: var(--accent); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
a:focus-visible, summary:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

/* Ornamental frame behind the hero and page titles (the skin's header ornament). */
.hero, .page-head { position: relative; }
.hero::before, .page-head::before {
  content: "";
  position: absolute;
  inset: -14px -6px 0;
  background: var(--img-frame) center / 100% 100% no-repeat;
  pointer-events: none;
}

/* On phones the hero is too full for one big frame, so the frame holds the headline, as on the other pages. */
@media (max-width: 719px) {
  .hero::before { content: none; }
  .hero h1 { z-index: 0; padding: 16px 10px 22px; max-width: none; }
  .hero h1::before {
    content: "";
    position: absolute;
    inset: 0 -12px;
    z-index: -1;
    background: var(--img-frame) center / 100% 100% no-repeat;
    pointer-events: none;
  }
}

/* Section divider (the skin's divider ornament) */
hr.ornament {
  border: 0;
  height: 16px;
  margin: 36px auto;
  background: var(--img-divider) center / min(100%, 300px) 16px no-repeat;
}

/* Home hero */
.hero { text-align: center; padding: 22px 12px 34px; }
.hero > * { position: relative; }
.hero .lockup { display: block; width: min(100%, 440px); height: auto; margin: 0 auto 26px; }
.hero h1 { max-width: 20ch; margin-left: auto; margin-right: auto; }
.hero .lede { margin-left: auto; margin-right: auto; }

.soon { display: flex; flex-direction: column; align-items: center; gap: 14px; margin: 30px 0 4px; }
.soon p { margin: 0; max-width: none; color: var(--text-soft); font-size: 0.98rem; }

/* Primary button: the skin's button with real depth. */
.button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 13px 28px;
  border: 1px solid var(--btn-border);
  border-radius: 14px;
  background: linear-gradient(180deg, var(--btn-top), var(--btn-bottom));
  color: var(--btn-text);
  font-family: var(--sans);
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.2;
  text-decoration: none;
  box-shadow:
    inset 0 1px 0 var(--btn-highlight),
    inset 0 -2px 0 var(--btn-shade),
    0 1px 1px rgb(var(--btn-shadow-rgb) / 0.22),
    0 4px 10px rgb(var(--btn-shadow-rgb) / 0.24),
    0 12px 24px -10px rgb(var(--btn-shadow-rgb) / 0.35);
}
a.button:hover, button.button:hover {
  background: linear-gradient(180deg, var(--btn-hover-top), var(--btn-hover-bottom));
  text-decoration: none;
  box-shadow:
    inset 0 1px 0 var(--btn-highlight),
    inset 0 -2px 0 var(--btn-shade),
    0 2px 2px rgb(var(--btn-shadow-rgb) / 0.2),
    0 8px 16px rgb(var(--btn-shadow-rgb) / 0.26),
    0 18px 30px -12px rgb(var(--btn-shadow-rgb) / 0.4);
}
a.button:active, button.button:active {
  background: linear-gradient(180deg, var(--btn-active-top), var(--btn-active-bottom));
  box-shadow:
    inset 0 2px 4px rgb(var(--btn-shadow-rgb) / 0.35),
    inset 0 -1px 0 var(--btn-highlight),
    0 1px 2px rgb(var(--btn-shadow-rgb) / 0.2);
}
a.button:focus-visible, button.button:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; border-radius: 14px; }

/* Cards: gradient, fine border, 1px top highlight, warm layered shadow, wood texture, mirrored corner ornaments. */
.points li, .sheet {
  position: relative;
  border: 1.2px solid var(--card-border);
  border-radius: var(--radius);
  background: var(--img-texture) 0 0 / 120px 120px repeat, linear-gradient(180deg, var(--card-top), var(--card-bottom));
  box-shadow: inset 0 1px 0 var(--card-highlight), var(--card-shadow);
}
.points li::before, .points li::after, .sheet::before, .sheet::after {
  content: "";
  position: absolute;
  top: 0;
  width: 38px;
  height: 38px;
  background: var(--img-corner) 0 0 / 38px 38px no-repeat;
  opacity: 0.65;
  pointer-events: none;
}
.points li::before, .sheet::before { left: 0; }
.points li::after, .sheet::after { right: 0; transform: scaleX(-1); }

/* Points */
.points { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.points li { max-width: none; margin: 0; padding: 24px 22px 10px; }
.points h2 { font-size: 1.22rem; margin: 0 0 0.4em; }
.points p { font-size: 1rem; color: var(--text); }

/* Scripture: tinted box with a left rule, as in the app. */
.scripture {
  margin: 1.6em 0;
  padding: 20px 22px 18px;
  background: var(--scripture-bg);
  color: var(--scripture-text);
  border-left: 3px solid var(--scripture-rule);
  border-radius: 3px var(--radius) var(--radius) 3px;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.06), inset 0 0 0 1px rgb(153 98 41 / 0.08);
}
.scripture blockquote { margin: 0; }
.scripture p { font-family: var(--serif); font-size: 1.22rem; line-height: 1.45; margin: 0 0 0.6em; max-width: 60ch; }
.scripture figcaption { font-size: 0.74rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--scripture-text); }
.home .scripture { margin: 0; box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.06), var(--card-shadow); }

/* Content pages: title on the wood, text on a card. */
.page-head { padding: 30px 24px 26px; margin-bottom: 18px; }
.page-head > * { position: relative; }
.page-head h1 { margin: 0 0 0.35em; }
.page-head .lede, .page-head .meta { margin: 0; }
.sheet { padding: 28px 22px 14px; }
.sheet > :first-child { margin-top: 0; }
.sheet h2::before {
  content: "";
  display: block;
  height: 16px;
  margin: 0 0 1.4em;
  background: var(--img-divider) center / min(100%, 300px) 16px no-repeat;
}
.sheet > h2:first-child::before { content: none; }
.faq h3 { margin-top: 1.6em; }
address { font-style: normal; }

/* Footer: a hairline with the flame ornament at its center. */
.site-footer { position: relative; padding: 32px 0 36px; font-size: 0.92rem; color: var(--text-muted); }
.site-footer::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--hairline) 15%, var(--hairline) calc(50% - 26px), transparent calc(50% - 26px), transparent calc(50% + 26px), var(--hairline) calc(50% + 26px), var(--hairline) 85%, transparent);
}
.site-footer::after {
  content: "";
  position: absolute;
  top: -8px; left: 50%;
  width: 300px; height: 16px;
  margin-left: -150px;
  background: var(--img-divider) center / 300px 16px no-repeat;
}
.site-footer p { margin: 0 0 0.7em; max-width: 65ch; }
.site-footer ul { list-style: none; padding: 0; margin: 0 0 0.9em; display: flex; flex-wrap: wrap; gap: 0 18px; }
.site-footer li { margin: 0; }
.site-footer a { display: inline-block; padding: 6px 0; }

@media (min-width: 720px) {
  body { font-size: 1.125rem; } /* 18px */
  main { padding-top: 52px; }
  .hero { padding: 30px 24px 40px; }
  .points { grid-template-columns: repeat(3, 1fr); }
  .points li { padding: 26px 22px 10px; }
  .scripture { padding: 26px 30px 22px; }
  .page-head { padding: 30px 28px 34px; }
  .sheet { padding: 40px 48px 24px; }
}

/* On wide screens the little hearth from the skin sits in the open space at the top right, under its glow. */
@media (min-width: 1100px) {
  body {
    background-image:
      linear-gradient(180deg, rgb(var(--page-rgb) / 0) 0, rgb(var(--page-rgb) / 0.15) 420px, rgb(var(--page-rgb) / 0.6) 1100px),
      var(--img-hearth),
      radial-gradient(ellipse 620px 520px at calc(50% + 30rem) 150px, var(--glow), var(--glow-soft) 60%, transparent 100%),
      var(--img-wood);
    background-repeat: no-repeat, no-repeat, no-repeat, repeat;
    background-size: auto, 150px 150px, auto, 390px 844px;
    background-position: 0 0, calc(50% + 30rem) 96px, 0 0, 0 0;
  }
}

@media (prefers-reduced-motion: no-preference) {
  a { transition: color 0.15s ease; }
  .button { transition: transform 0.15s ease, box-shadow 0.15s ease; }
  a.button:hover, button.button:hover { transform: translateY(-1px); }
  a.button:active, button.button:active { transform: translateY(1px); transition-duration: 0.05s; }
}