/*
  Direction: the same rubricated book page as the landing page, set as a
  back-matter leaf — the colophon and notes at the end of a well-made Bible.
  Tokens are lifted verbatim from index.html, which took them from the app's
  own App/Sources/Theme.swift. Do not invent new ones here.
*/

:root {
  --canvas:#F4F5F7;
  --surface:#FFFFFF;
  --sunken:#EDEFF2;
  --ink:#16181D;
  --ink-2:#5E636E;
  --rose:#BE3450;
  --rose-text:#A82740;
  --gold-text:#8A5A0E;
  --teal:#0F6E6E;
  --hairline:#E3E5E9;
  --shadow:0 1px 2px rgb(22 24 29 / .05), 0 8px 24px rgb(22 24 29 / .05);

  --display:"Fraunces", ui-serif, Georgia, "Times New Roman", serif;
  --sans:"Public Sans", ui-sans-serif, -apple-system, "Helvetica Neue", Arial, sans-serif;

  --step--1:clamp(.82rem, .79rem + .13vw, .89rem);
  --step-0:clamp(1rem, .96rem + .2vw, 1.12rem);
  --step-1:clamp(1.2rem, 1.1rem + .5vw, 1.5rem);
  --step-2:clamp(1.5rem, 1.3rem + 1vw, 2.1rem);
  --step-3:clamp(2rem, 1.6rem + 2vw, 3.2rem);

  --gap-s:clamp(.75rem, .6rem + .6vw, 1.1rem);
  --gap-m:clamp(1.4rem, 1.1rem + 1.4vw, 2.4rem);
  --gap-l:clamp(2.6rem, 1.9rem + 3.4vw, 5rem);
  --rail:11rem;
  --measure:62ch;
  --ease:cubic-bezier(.165,.84,.44,1);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --canvas:#14161A;
    --surface:#1E2127;
    --sunken:#2A2E36;
    --ink:#F1F2F4;
    --ink-2:#A2A7B0;
    --rose:#C93E58;
    --rose-text:#F08098;
    --gold-text:#E8B84B;
    --teal:#3FBFB0;
    --hairline:#2E323A;
    --shadow:0 1px 2px rgb(0 0 0 / .4), 0 8px 24px rgb(0 0 0 / .3);
  }
}
:root[data-theme="dark"] {
  --canvas:#14161A;
  --surface:#1E2127;
  --sunken:#2A2E36;
  --ink:#F1F2F4;
  --ink-2:#A2A7B0;
  --rose:#C93E58;
  --rose-text:#F08098;
  --gold-text:#E8B84B;
  --teal:#3FBFB0;
  --hairline:#2E323A;
  --shadow:0 1px 2px rgb(0 0 0 / .4), 0 8px 24px rgb(0 0 0 / .3);
}

*,*::before,*::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body {
  margin:0;
  background:var(--canvas);
  color:var(--ink);
  font-family:var(--sans);
  font-size:var(--step-0);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
a { color:var(--rose-text); text-decoration-thickness:1px; text-underline-offset:.18em; }
a:focus-visible { outline:2px solid var(--teal); outline-offset:3px; border-radius:2px; }

.page {
  max-width:74rem;
  margin-inline:auto;
  padding:clamp(1.5rem,1rem + 3vw,4rem) clamp(1.25rem,.8rem + 3vw,3.5rem) 0;
}

.masthead { padding-block:var(--gap-m) 0; }
.masthead a { text-decoration:none; color:inherit; display:inline-block; }
.masthead a:hover .wordmark { color:var(--rose-text); }
.wordmark {
  font-family:var(--display);
  font-variation-settings:"SOFT" 12,"WONK" 1,"opsz" 120;
  font-weight:600;
  font-size:var(--step-2);
  line-height:1;
  margin:0;
  letter-spacing:-.015em;
  transition:color .3s var(--ease);
}
.domain { font-size:var(--step--1); color:var(--ink-2); letter-spacing:.06em; margin:.3em 0 0; }

.doc-head { padding-block:var(--gap-l) var(--gap-m); }
.doc-title {
  font-family:var(--display);
  font-variation-settings:"SOFT" 20,"WONK" 0,"opsz" 144;
  font-weight:400;
  font-size:var(--step-3);
  line-height:1.14;
  letter-spacing:-.02em;
  margin:0;
  text-wrap:balance;
}
.dateline {
  font-size:var(--step--1);
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-2);
  margin:var(--gap-s) 0 0;
}
.summary {
  font-size:var(--step-1);
  line-height:1.5;
  max-width:46ch;
  margin:var(--gap-m) 0 0;
}

/* The rail carries running-heads, the way a printed Bible carries them in the
   outer margin. Below 62rem it becomes an inline eyebrow instead. */
.band {
  display:grid;
  grid-template-columns:var(--rail) minmax(0,1fr);
  column-gap:var(--gap-m);
  padding-block:var(--gap-l);
  border-top:1px solid var(--hairline);
}
.band > .head {
  font-size:var(--step--1);
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--rose-text);
  padding-top:.45em;
  margin:0;
}
.band > .body { max-width:var(--measure); }
@media (max-width:62rem) {
  .band { grid-template-columns:1fr; row-gap:var(--gap-s); }
  .band > .head { padding-top:0; }
}

h2 {
  font-family:var(--display);
  font-variation-settings:"SOFT" 16,"WONK" 0,"opsz" 100;
  font-weight:600;
  font-size:var(--step-2);
  line-height:1.15;
  letter-spacing:-.015em;
  margin:0 0 var(--gap-s);
  text-wrap:balance;
}
h3 {
  font-size:var(--step-0);
  font-weight:600;
  margin:var(--gap-m) 0 .4em;
}
h3:first-child { margin-top:0; }
p { margin:0 0 1em; }
p:last-child { margin-bottom:0; }
.lede { font-size:var(--step-1); line-height:1.55; }

.list { list-style:none; margin:0; padding:0; display:grid; gap:var(--gap-s); }
.list li {
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:.9em;
  align-items:start;
}
.list .tick { color:var(--teal); font-weight:600; line-height:1.65; }
.list .cross { color:var(--rose-text); font-weight:600; line-height:1.65; }
.list b { font-weight:600; }
.list span.detail { color:var(--ink-2); }

.qa { display:grid; gap:var(--gap-m); }
.qa > div {
  background:var(--surface);
  border:1px solid var(--hairline);
  border-radius:.75rem;
  padding:var(--gap-s) var(--gap-s) calc(var(--gap-s) * 1.1);
}
.qa h3 { margin-top:0; }

.mailto {
  display:inline-flex;
  align-items:center;
  gap:.55em;
  background:var(--rose);
  color:#fff;
  font-weight:600;
  padding:.72em 1.35em;
  border-radius:.6rem;
  text-decoration:none;
  margin-top:var(--gap-s);
  transition:transform .35s var(--ease);
}
.mailto:hover { transform:translateY(-2px); }

footer {
  border-top:1px solid var(--hairline);
  margin-top:var(--gap-l);
  padding:var(--gap-m) 0 var(--gap-l);
  font-size:var(--step--1);
  color:var(--ink-2);
  line-height:1.7;
}
footer p { max-width:70ch; }
footer nav { margin-bottom:.8em; display:flex; flex-wrap:wrap; gap:1.2em; }