/* Hallows Day. White and gold, the colours of All Saints' Day; the dawn sky of
   the paintings; vespers indigo for text. Fraunces (soft) for headings, Ysabeau
   Infant for reading. Pictures stand in arches, like statues in niches. */

:root {
  --paper: #ffffff;
  --sky: #f0eefa;      /* the dawn sky in the paintings */
  --sky-2: #e4e0f6;
  --dawn: #fdebdc;     /* the warm horizon under it */
  --gold: #e0a83c;     /* halos */
  --gold-hi: #ebb955;
  --gold-ink: #8a5a06; /* gold dark enough for text */
  --ink: #1c1946;      /* vespers indigo */
  --ink-2: #524c78;
  --line: #e3e0ef;
  --night: #161335;
  --on-night: #f4f2ff;
  --on-gold: #1c1946;
  --shadow: rgb(28 25 70 / .32);

  --serif: "Fraunces", Georgia, serif;
  --sans: "Ysabeau Infant", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --frame: 76rem;
  --gut: clamp(1rem, 4vw, 2.5rem);
  --panel: 2rem;
  --section: clamp(5rem, 10vw, 8.5rem);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #110f26;
    --sky: #1a1736;
    --sky-2: #26224b;
    --dawn: #2b1f33;
    --gold: #f0c160;
    --gold-hi: #f6cf7c;
    --gold-ink: #f0c160;
    --ink: #f3f1ff;
    --ink-2: #bdb7dc;
    --line: #2e2a52;
    --night: #0a0918;
    --shadow: rgb(0 0 0 / .55);
    color-scheme: dark;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 6.5rem; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 460 1.1875rem/1.65 var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-underline-offset: .22em; text-decoration-thickness: 1px; }
a:hover { text-decoration-color: var(--gold); }
p, ul, ol, dl, figure, blockquote { margin: 0; }
p { text-wrap: pretty; }
h1, h2, h3 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 480;
  font-variation-settings: "SOFT" 100;
  line-height: 1.1;
  letter-spacing: -.015em;
  text-wrap: balance;
}
em { font-style: italic; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 6px; }

.frame { width: min(100% - 2 * var(--gut), var(--frame)); margin-inline: auto; }
.skip {
  position: absolute; left: 1rem; top: -5rem; z-index: 50;
  background: var(--ink); color: var(--paper); padding: .75rem 1rem; border-radius: .75rem;
}
.skip:focus { top: 1rem; }

/* ------------------------------------------------------------ header, footer */

.bar {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--paper) 82%, transparent);
  -webkit-backdrop-filter: saturate(1.5) blur(16px);
  backdrop-filter: saturate(1.5) blur(16px);
  border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
}
.bar-in { display: flex; align-items: center; justify-content: space-between; gap: 1rem; height: 4.75rem; }
.brand {
  display: inline-flex; align-items: center; gap: .6rem;
  font: 560 1.5rem/1 var(--serif);
  font-variation-settings: "SOFT" 100, "opsz" 36;
  letter-spacing: -.015em;
  text-decoration: none;
  white-space: nowrap;
}
.mark { width: 2.125rem; height: 2.125rem; flex: none; color: var(--ink); }
.mark-halo { fill: none; stroke: var(--gold); stroke-width: 2.2; }
.nav { display: flex; gap: clamp(1.25rem, 3vw, 2.5rem); }
.nav a { font: 650 1.0625rem/1 var(--sans); text-decoration: none; color: var(--ink-2); padding: .6rem 0; }
.nav a:hover { color: var(--ink); text-decoration: underline 2px var(--gold); text-underline-offset: .45em; }

.foot { background: var(--night); color: var(--on-night); padding-block: clamp(3.5rem, 7vw, 5rem); }
.foot .mark { color: var(--on-night); }
.foot-in { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 2rem 4rem; }
.foot p { margin-top: 1.1rem; max-width: 28rem; font-size: 1.0625rem; color: color-mix(in srgb, var(--on-night) 74%, transparent); }
.foot .sister { margin-top: .6rem; }
.foot .sister a { color: var(--on-night); font-weight: 650; text-decoration-color: var(--gold); text-underline-offset: .3em; }
.day-notes a { color: var(--ink); font-weight: 650; text-decoration: underline 1.5px var(--gold); text-underline-offset: .3em; }
.try a { font-weight: 650; text-decoration-color: var(--gold); }
.foot nav { display: flex; flex-wrap: wrap; gap: .5rem 2rem; }
.foot nav a { font-weight: 650; text-decoration: none; }
.foot nav a:hover { text-decoration: underline 2px var(--gold); text-underline-offset: .4em; }

/* ------------------------------------------------------------ shared parts */

.btn {
  display: inline-flex; align-items: center; gap: .55rem;
  background: var(--gold); color: var(--on-gold);
  font: 700 1.0625rem/1 var(--sans);
  padding: 1.1rem 1.8rem; border-radius: 999px;
  text-decoration: none;
  transition: background-color .2s, transform .2s;
}
.btn:hover { background: var(--gold-hi); transform: translateY(-1px); }
.btn svg, .copy svg, .crumb svg, .grownups svg {
  width: 1.15rem; height: 1.15rem; flex: none;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.more { font-weight: 650; text-decoration: underline 2px var(--gold); text-underline-offset: .4em; }
.more:hover { text-decoration-color: var(--ink); }

/* The arch: a semicircle on a 2:3 picture, with softly rounded feet. */
.arch {
  position: relative; display: block; overflow: hidden;
  aspect-ratio: 2 / 3;
  border-radius: 50% 50% 1rem 1rem / 33.34% 33.34% 1rem 1rem;
  background: oklch(.86 .05 var(--h));
}
.arch img { width: 100%; height: 100%; object-fit: cover; }
.ph { display: grid; place-items: center; width: 100%; height: 100%; background: oklch(.42 .1 var(--h)); }
.ph .emblem { width: 34%; fill: none; stroke: var(--gold); stroke-width: 1.4; }

.halo {
  display: block; flex: none; overflow: hidden;
  width: 4.5rem; aspect-ratio: 1; border-radius: 50%;
  box-shadow: 0 0 0 3px var(--paper), 0 0 0 5px var(--gold);
}
.halo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; scale: 1.7; transform-origin: 50% 12%; }

.legend {
  display: inline-block; vertical-align: .1em;
  background: var(--sky-2); color: var(--ink);
  font: 700 .8125rem/1 var(--sans); letter-spacing: .01em;
  padding: .42rem .75rem; border-radius: 999px;
}

.section { padding-block: var(--section); }
.section-sky { background: var(--sky); }
.section-sky .legend { background: var(--paper); }
.section-head { max-width: 42rem; margin-bottom: clamp(3rem, 6vw, 4.5rem); }
.section-head-c { margin-inline: auto; text-align: center; }
.section-head h2, .legends h2 {
  font-size: clamp(2.375rem, 4.8vw, 3.75rem);
  letter-spacing: -.03em;
  font-variation-settings: "SOFT" 100, "opsz" 144;
}
.section-head p { margin-top: 1.1rem; font-size: clamp(1.1875rem, 1.6vw, 1.3125rem); color: var(--ink-2); }

/* ------------------------------------------------------------ home: hero */

.hero {
  position: relative; overflow: hidden;
  padding-top: clamp(2.75rem, 6vw, 5rem);
  background:
    radial-gradient(60% 46% at 50% 100%, var(--dawn), transparent 72%),
    linear-gradient(180deg, var(--sky) 0%, var(--paper) 78%);
}
.hero-text { max-width: 54rem; margin-inline: auto; text-align: center; }
.hero h1 {
  font-size: clamp(2.875rem, 7.6vw, 6rem);
  line-height: 1;
  letter-spacing: -.028em;
  font-variation-settings: "SOFT" 100, "opsz" 144;
}
.hero-lede {
  max-width: 38rem; margin: 1.4rem auto 0;
  font-size: clamp(1.1875rem, 1.9vw, 1.4375rem); line-height: 1.55;
  color: var(--ink-2);
}
.hero-go { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 1rem 2rem; margin-top: 2.1rem; }

/* Five arches standing side by side, like the portals of a cathedral front,
   the middle one tallest, with a great halo behind it. */
.facade {
  --mid: clamp(9rem, 19vw, 15rem);
  --side: clamp(7rem, 15vw, 11.75rem);
  --outer: clamp(6rem, 12.25vw, 9.5rem);
  position: relative;
  display: flex; justify-content: center; align-items: flex-end;
  gap: clamp(.75rem, 1.8vw, 1.75rem);
  margin-top: clamp(3rem, 5.5vw, 4.5rem);
  padding-bottom: clamp(3rem, 6vw, 5rem);
}
/* Rings round the middle arch, like the carved arches over a church door. */
.rings {
  position: absolute; left: 50%; top: calc(var(--mid) / 2); z-index: -1;
  width: calc(var(--mid) + 2.5rem); aspect-ratio: 1; translate: -50% -50%;
  border-radius: 50%;
  border: 1.5px solid color-mix(in srgb, var(--gold) 80%, transparent);
  pointer-events: none;
}
.rings::before, .rings::after { content: ""; position: absolute; border-radius: 50%; }
.rings::after { inset: -1.6rem; border: 1px solid color-mix(in srgb, var(--gold) 45%, transparent); }
.rings::before { inset: -40%; background: radial-gradient(closest-side, color-mix(in srgb, var(--gold) 22%, transparent), transparent); }
.portal {
  position: relative; isolation: isolate;
  display: flex; flex-direction: column; align-items: center; gap: 1rem;
  width: var(--outer); flex: none;
  text-decoration: none;
}
.portal-1 { width: var(--side); }
.portal-0 { width: var(--mid); }
.portal .arch { width: 100%; box-shadow: 0 1.75rem 3rem -1.75rem var(--shadow); transition: transform .35s cubic-bezier(.2, .7, .2, 1); }
.portal:hover .arch { transform: translateY(-.4rem); }
.portal-name { font: 650 .9375rem/1.3 var(--sans); color: var(--ink-2); text-align: center; text-wrap: balance; }
.portal:hover .portal-name { color: var(--ink); }

@media (prefers-reduced-motion: no-preference) {
  .portal { animation: rise 1s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--d) * 120ms + 150ms); }
  .rings { animation: glow 1.6s ease-out both; }
  @keyframes rise { from { opacity: 0; transform: translateY(1.75rem); } }
  @keyframes glow { from { opacity: 0; scale: .9; } }
}

/* ------------------------------------------------------------ home: struggles */

.strugs {
  list-style: none; padding: 0;
  display: grid; gap: clamp(2.75rem, 4vw, 3.5rem) clamp(2rem, 4vw, 4.5rem);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
}
.strugs li { position: relative; display: flex; gap: 1.4rem; align-items: flex-start; }
.strugs .halo { box-shadow: 0 0 0 3px var(--sky), 0 0 0 5px var(--gold); }
.strugs p {
  font: 380 1.4375rem/1.38 var(--serif);
  font-variation-settings: "SOFT" 100;
  letter-spacing: -.01em;
}
.strugs a { display: inline-block; margin-top: .85rem; font-weight: 650; font-size: 1rem; color: var(--ink-2); text-decoration: underline 1.5px var(--gold); text-underline-offset: .35em; }
.strugs a::after { content: ""; position: absolute; inset: -1rem; }
.strugs li:hover a { color: var(--ink); }

/* ------------------------------------------------------------ home: timeline */

.tl { position: relative; list-style: none; padding: 0; display: grid; }
.tl::before {
  content: ""; position: absolute; top: 1rem; bottom: 1rem; width: 2px;
  left: 1.25rem;
  background: linear-gradient(var(--gold), color-mix(in srgb, var(--gold) 40%, transparent));
}
.tl-era { position: relative; padding: 2.5rem 0 1.25rem 3.75rem; }
.tl-era:first-child { padding-top: 0; }
.tl-era::before {
  content: ""; position: absolute; left: calc(1.25rem + 1px); top: calc(2.5rem + .55rem);
  width: 1.25rem; aspect-ratio: 1; translate: -50% 0;
  border-radius: 50%; background: var(--paper); border: 2px solid var(--gold);
  box-shadow: 0 0 0 5px var(--paper);
}
.tl-era:first-child::before { top: .55rem; }
.tl-era h3 { font-size: clamp(1.75rem, 2.6vw, 2.125rem); letter-spacing: -.02em; }
.tl-era p { margin-top: .3rem; font-size: 1rem; font-weight: 600; color: var(--gold-ink); }

.tl-item { position: relative; padding: .5rem 0 .5rem 2.75rem; }
.tl-item::before {
  content: ""; position: absolute; left: calc(1.25rem + 1px); top: 50%;
  width: .7rem; aspect-ratio: 1; translate: -50% -50%;
  border-radius: 50%; background: var(--gold);
  box-shadow: 0 0 0 4px var(--paper);
}
.tl-item a {
  display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 1.25rem; align-items: center;
  padding: .75rem; border-radius: 1.5rem;
  text-decoration: none;
  transition: background-color .2s;
}
.tl-item a:hover { background: var(--sky); }
.tl-item .arch { transition: transform .35s cubic-bezier(.2, .7, .2, 1); }
.tl-item a:hover .arch { transform: translateY(-.25rem); }
.tl-text { display: flex; flex-direction: column; }
.tl-when { font: 700 .9375rem/1.3 var(--sans); color: var(--gold-ink); }
.tl-name {
  margin-top: .3rem;
  font: 480 1.625rem/1.1 var(--serif);
  font-variation-settings: "SOFT" 100, "opsz" 48;
  letter-spacing: -.02em;
}
.tl-of { font: italic 400 1.0625rem/1.3 var(--serif); color: var(--ink-2); margin-top: .15rem; }
.tl-line { margin-top: .55rem; font-size: 1.0625rem; line-height: 1.5; color: var(--ink-2); }

/* Wide screens: the spine runs down the middle, the eras sit on it, and the
   saints alternate sides, each spanning two rows so neighbours overlap by half. */
@media (min-width: 64rem) {
  .tl { grid-template-columns: minmax(0, 1fr) 6rem minmax(0, 1fr); grid-auto-rows: minmax(4.5rem, auto); }
  .tl::before { left: calc(50% - 1px); }
  .tl-era { grid-column: 1 / -1; grid-row: var(--row); justify-self: center; text-align: center; padding: 3.25rem 1.5rem 1.75rem; background: var(--paper); z-index: 1; }
  .tl-era:first-child { padding-top: 2.25rem; }
  .tl-era::before, .tl-era:first-child::before { left: 50%; top: 0; }
  .tl-item { grid-row: var(--row) / span 2; align-self: center; padding: .25rem 0; }
  .tl-l { grid-column: 1; }
  .tl-r { grid-column: 3; }
  .tl-item a { grid-template-columns: 10rem minmax(0, 1fr); gap: 1.75rem; padding: 1rem; border-radius: 1.75rem; }
  .tl-l a { grid-template-columns: minmax(0, 1fr) 10rem; text-align: right; }
  .tl-l .arch { order: 2; }
  .tl-l .tl-text { align-items: flex-end; }
  .tl-item::before { top: 50%; }
  .tl-l::before { left: auto; right: -3rem; translate: 50% -50%; }
  .tl-r::before { left: -3rem; }
  /* A short tie from the spine to the picture. */
  .tl-item::after {
    content: ""; position: absolute; top: 50%; height: 2px; width: 2.6rem;
    background: color-mix(in srgb, var(--gold) 55%, transparent);
  }
  .tl-l::after { right: -2.95rem; }
  .tl-r::after { left: -2.95rem; }
  .tl-name { font-size: 1.875rem; }
}

/* ------------------------------------------------------------ home: what is Hallows Day */

/* Follows the hero, whose sky already fades to white: less space above. */
.section-day { padding-top: clamp(2.5rem, 5vw, 4.5rem); }
.days {
  list-style: none; padding: 0;
  display: grid; gap: clamp(1.25rem, 3vw, 2rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 21rem), 1fr));
  max-width: 60rem; margin-inline: auto;
}
/* Two arched windows side by side: the eve at night, the feast at dawn. */
.day {
  padding: clamp(3.75rem, 6vw, 4.75rem) clamp(1.5rem, 4vw, 3.25rem) clamp(2.5rem, 4vw, 3.25rem);
  border-radius: 50% 50% var(--panel) var(--panel) / 10rem 10rem var(--panel) var(--panel);
  text-align: center;
}
.day-eve {
  color: var(--on-night);
  background:
    radial-gradient(1.5px 1.5px at 24% 21%, #fff 60%, transparent),
    radial-gradient(1px 1px at 33% 9%, #fff 60%, transparent),
    radial-gradient(2px 2px at 73% 13%, #fff 60%, transparent),
    radial-gradient(1px 1px at 81% 27%, #fff 60%, transparent),
    radial-gradient(1.5px 1.5px at 14% 33%, #fff 60%, transparent),
    radial-gradient(1px 1px at 62% 5%, #fff 60%, transparent),
    radial-gradient(1px 1px at 88% 36%, #fff 60%, transparent),
    radial-gradient(70% 40% at 50% 100%, #2c2463, transparent),
    var(--night);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--on-night) 8%, transparent);
}
.day-feast {
  background:
    radial-gradient(75% 50% at 50% 0%, color-mix(in srgb, var(--gold) 34%, transparent), transparent),
    linear-gradient(180deg, var(--dawn), var(--sky) 85%);
}
.day-date { font: 700 1.0625rem/1 var(--sans); }
.day-n {
  display: block; margin-bottom: .5rem;
  font: 400 clamp(4.5rem, 8vw, 6rem)/.9 var(--serif);
  font-variation-settings: "SOFT" 100, "opsz" 144;
  letter-spacing: -.04em;
  color: var(--gold-ink);
}
.day-eve .day-n { color: #f0c160; }
.day h3 { margin-top: 1.6rem; font-size: clamp(2rem, 3.2vw, 2.5rem); letter-spacing: -.025em; font-variation-settings: "SOFT" 100, "opsz" 96; }
.day-also { margin-top: .4rem; font: italic 380 1.25rem/1.3 var(--serif); font-variation-settings: "SOFT" 100; color: var(--ink-2); }
.day-eve .day-also { color: color-mix(in srgb, var(--on-night) 78%, transparent); }
.day-also + p { max-width: 25rem; margin: 1.25rem auto 0; }
.day-notes { max-width: 40rem; margin: clamp(2.5rem, 5vw, 3.5rem) auto 0; text-align: center; color: var(--ink-2); }

/* ------------------------------------------------------------ home: legends */

.legends { display: grid; gap: 1.5rem clamp(3rem, 7vw, 7rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); align-items: start; }
.legends p { color: var(--ink-2); }
.legends p + p { margin-top: 1rem; }

/* ------------------------------------------------------------ saint page */

.s-grid {
  display: grid;
  grid-template-columns: minmax(15rem, 26rem) minmax(0, 1fr);
  column-gap: clamp(2.5rem, 6vw, 6rem);
}
.s-hero { position: relative; isolation: isolate; overflow: hidden; padding-block: clamp(2.5rem, 6vw, 5rem) clamp(3rem, 6vw, 5rem); }
/* The picture's own colours, blurred into a glow behind it. */
.s-hero::before {
  content: ""; position: absolute; inset: -12%; z-index: -2;
  background: var(--art, none) center / cover;
  filter: blur(90px) saturate(1.3);
  opacity: .55;
}
.s-hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, color-mix(in srgb, var(--paper) 45%, transparent) 0%, var(--paper) 100%);
}
.s-hero .s-grid { align-items: center; }
.s-art .arch { box-shadow: 0 2.5rem 4.5rem -2rem var(--shadow); }
.crumb a { display: inline-flex; align-items: center; gap: .45rem; font: 650 1rem/1 var(--sans); color: var(--ink-2); text-decoration: none; padding: .4rem 0; }
.crumb a:hover { color: var(--ink); }
.s-head h1 {
  margin-top: 1.25rem;
  font-size: clamp(3rem, 6.4vw, 5.5rem);
  line-height: 1;
  letter-spacing: -.035em;
  font-variation-settings: "SOFT" 100, "opsz" 144;
}
.s-head h1 .of {
  display: block; margin-top: .55rem;
  font-size: .4em; font-style: italic; font-weight: 380; letter-spacing: -.01em;
  color: var(--ink-2);
}
.tagline {
  margin-top: 1.4rem;
  font: 380 clamp(1.3125rem, 2.1vw, 1.625rem)/1.35 var(--serif);
  font-variation-settings: "SOFT" 100;
  color: var(--ink-2);
}
.intro { margin-top: 1.75rem; max-width: 42rem; font-size: 1.25rem; line-height: 1.65; }
.intro p + p { margin-top: 1rem; }
.facts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: 1.25rem 2rem;
  max-width: 44rem; margin-top: 2.25rem; padding-top: 1.75rem;
  border-top: 1px solid color-mix(in srgb, var(--ink) 14%, transparent);
}
.facts dt, .look span { font: 650 .875rem/1.3 var(--sans); color: var(--ink-2); }
.facts dd { margin: .35rem 0 0; font: 560 1.0625rem/1.4 var(--sans); }
.look { max-width: 44rem; margin-top: 1.4rem; font-size: 1.0625rem; line-height: 1.5; }
.look span { display: block; margin-bottom: .35rem; }

.s-body { padding-block: clamp(3rem, 6vw, 4.5rem) clamp(4rem, 8vw, 6rem); }
.toc { position: sticky; top: 7rem; align-self: start; max-width: 17rem; }
.toc-h { font: 700 .9375rem/1 var(--sans); color: var(--ink-2); margin-bottom: 1rem; }
.toc ol { list-style: none; padding: 0; border-left: 2px solid var(--line); }
.toc a {
  display: block; margin-left: -2px; padding: .5rem 0 .5rem 1.15rem;
  border-left: 2px solid transparent;
  font: 560 1rem/1.35 var(--sans); color: var(--ink-2); text-decoration: none;
}
.toc a:hover { color: var(--ink); border-left-color: var(--gold); }
.s-article { max-width: 44rem; }

.story + .story { margin-top: clamp(3rem, 5vw, 4rem); }
.story h2, .hard h2 {
  margin-bottom: 1.1rem;
  font-size: clamp(1.875rem, 3vw, 2.375rem);
  letter-spacing: -.025em;
  font-variation-settings: "SOFT" 100, "opsz" 72;
}
.story p + p, .hard p + p, .grownups p + p { margin-top: 1.15rem; }
.legend-line { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .7rem; margin-bottom: 1.1rem; font-size: 1rem; color: var(--ink-2); }
.src { margin-top: 1.1rem; font-size: .9375rem; line-height: 1.5; color: var(--ink-2); }
.src a, .sources a { text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); }
.src a:hover, .sources a:hover { text-decoration-color: var(--gold); }

.hard {
  margin-top: clamp(3.5rem, 6vw, 5rem);
  padding: clamp(1.75rem, 4vw, 3rem);
  border-radius: var(--panel);
  background: var(--dawn);
}

.quote { position: relative; margin-block: clamp(3.5rem, 6vw, 5rem); padding-top: 3.25rem; }
.quote::before {
  content: "\201C"; position: absolute; top: -1.4rem; left: -.3rem;
  font: 600 7.5rem/1 var(--serif); color: var(--gold);
}
.quote blockquote {
  font: italic 360 clamp(1.625rem, 3vw, 2.25rem)/1.3 var(--serif);
  font-variation-settings: "SOFT" 100, "opsz" 72;
  letter-spacing: -.012em;
}
.quote figcaption { margin-top: 1.25rem; font-size: 1rem; color: var(--ink-2); }

.do-pray { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }
.do-pray section { padding: clamp(1.75rem, 3vw, 2.5rem); border-radius: var(--panel); }
.do-pray h2 { display: flex; align-items: center; gap: .6rem; margin-bottom: 1rem; font-size: 1.625rem; letter-spacing: -.015em; }
.try { background: var(--sky); }
.try ul { padding-left: 1.2rem; }
.try li + li { margin-top: .85rem; }
.try li::marker { color: var(--gold); }
.pray { background: var(--night); color: var(--on-night); }
.pray .mark { width: 1.75rem; height: 1.75rem; color: var(--on-night); }
.pray p {
  font: italic 360 1.375rem/1.5 var(--serif);
  font-variation-settings: "SOFT" 100;
}

.grownups { margin-top: clamp(3rem, 5vw, 4rem); border-block: 1px solid var(--line); }
.grownups summary {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: 1.4rem 0; cursor: pointer; list-style: none;
  font: 500 1.375rem/1.3 var(--serif);
  font-variation-settings: "SOFT" 100;
}
.grownups summary::-webkit-details-marker { display: none; }
.grownups summary svg { width: 1.5rem; height: 1.5rem; transition: rotate .2s; color: var(--gold-ink); }
.grownups[open] summary svg { rotate: 45deg; }
.grownups > div { padding-bottom: 1.75rem; color: var(--ink-2); }

.sources { margin-top: 2.75rem; }
.sources h2 { font: 700 1.0625rem/1.3 var(--sans); letter-spacing: 0; }
.sources ol { margin-top: .9rem; padding-left: 1.4rem; font-size: 1rem; line-height: 1.5; color: var(--ink-2); }
.sources li + li { margin-top: .45rem; }

.steps { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; padding-bottom: clamp(4rem, 8vw, 6rem); }
.step {
  display: flex; align-items: center; gap: 1.4rem;
  padding: 1.25rem 1.5rem; border-radius: var(--panel);
  background: var(--sky); text-decoration: none;
  transition: background-color .2s;
}
.step:hover { background: var(--sky-2); }
.step .arch { width: 4.75rem; flex: none; }
.step.next { flex-direction: row-reverse; text-align: right; }
.step-label { display: block; font: 700 .9375rem/1 var(--sans); color: var(--gold-ink); }
.step-name { display: block; margin-top: .45rem; font: 480 1.5rem/1.15 var(--serif); font-variation-settings: "SOFT" 100; letter-spacing: -.015em; }
.step-when { display: block; margin-top: .35rem; font-size: .9375rem; color: var(--ink-2); }

@media (max-width: 56rem) {
  .s-grid { grid-template-columns: minmax(0, 1fr); }
  .s-art { width: min(72vw, 21rem); margin: 0 auto 2.5rem; }
  .toc { display: none; }
  .s-article { max-width: none; }
}
@media (max-width: 40rem) {
  .steps { grid-template-columns: 1fr; }
  .step.next { flex-direction: row; text-align: left; }
  .step .arch { width: 3.75rem; }
  .step-name { font-size: 1.3125rem; }
  .facts { grid-template-columns: 1fr 1fr; }
}

/* ------------------------------------------------------------ QR page, 404 */

.qrp { padding-block: clamp(3rem, 6vw, 5rem) clamp(4rem, 8vw, 6rem); }
.qrp h1, .lost h1 { font-size: clamp(2.5rem, 5.5vw, 4rem); letter-spacing: -.03em; font-variation-settings: "SOFT" 100, "opsz" 144; }
.qr-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 2rem 4rem; margin: 2rem 0 3rem; }
.qr-tips { max-width: 46rem; padding-left: 1.2rem; color: var(--ink-2); }
.qr-tips li + li { margin-top: .5rem; }
.qr-tips li::marker { color: var(--gold); }
.qr-list { list-style: none; padding: 0; display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 23rem), 1fr)); }
.qr-item { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: 1.4rem; align-items: center; padding: 1.25rem; border-radius: 1.75rem; background: var(--sky); }
.qr-item img { width: 7rem; height: 7rem; border-radius: .75rem; background: #fff; }
.qr-item h2 { font-size: 1.375rem; letter-spacing: -.015em; }
.qr-link { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; margin-top: .55rem; font-size: 1rem; }
.copy {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .45rem .8rem; border: 1px solid var(--line); border-radius: 999px;
  background: var(--paper); color: var(--ink);
  font: 650 .875rem/1 var(--sans); cursor: pointer;
}
.copy:hover, .copy.done { border-color: var(--gold); }
.qr-files { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; margin-top: .6rem; font-size: .9375rem; font-weight: 650; }

.lost { padding-block: clamp(5rem, 12vw, 9rem); text-align: center; }
.lost-ring { display: block; width: 5rem; aspect-ratio: 1; margin: 0 auto 2.25rem; border-radius: 50%; border: 2px solid var(--gold); box-shadow: 0 0 0 .9rem color-mix(in srgb, var(--gold) 12%, transparent); }
.lost p { max-width: 32rem; margin: 1.25rem auto 2.25rem; color: var(--ink-2); }

/* ------------------------------------------------------------ phones */

@media (max-width: 40rem) {
  .bar-in { height: 4rem; }
  .brand { font-size: 1.3125rem; }
  .mark { width: 1.875rem; height: 1.875rem; }
  .nav a { font-size: 1rem; }
  .nav a[href$="#about"] { display: none; }
  .facade { --mid: 34vw; --side: 25vw; gap: 3vw; }
  .facade .portal-2 { display: none; }
  .portal-name { font-size: .8125rem; }
  .strugs p { font-size: 1.3125rem; }
  .halo { width: 3.75rem; }
}