/* Latin faces carry the punctuation the Arabic subsets leave out, so they are declared first */
@font-face { font-family: "Amiri"; src: url("../fonts/amiri-latin-400.woff2") format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0000-00FF, U+2000-206F; }
@font-face { font-family: "Amiri"; src: url("../fonts/amiri-latin-700.woff2") format("woff2"); font-weight: 700; font-display: swap; unicode-range: U+0000-00FF, U+2000-206F; }
@font-face { font-family: "Amiri"; src: url("../fonts/amiri-400.woff2") format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+200C-200E, U+2010-2011, U+FB50-FDFF, U+FE70-FEFC; }
@font-face { font-family: "Amiri"; src: url("../fonts/amiri-700.woff2") format("woff2"); font-weight: 700; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+200C-200E, U+2010-2011, U+FB50-FDFF, U+FE70-FEFC; }
@font-face { font-family: "Noto Naskh Arabic"; src: url("../fonts/noto-naskh-arabic-latin-400.woff2") format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0000-00FF, U+2000-206F; }
@font-face { font-family: "Noto Naskh Arabic"; src: url("../fonts/noto-naskh-arabic-latin-500.woff2") format("woff2"); font-weight: 500; font-display: swap; unicode-range: U+0000-00FF, U+2000-206F; }
@font-face { font-family: "Noto Naskh Arabic"; src: url("../fonts/noto-naskh-arabic-400.woff2") format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+200C-200E, U+2010-2011, U+FB50-FDFF, U+FE70-FEFC; }
@font-face { font-family: "Noto Naskh Arabic"; src: url("../fonts/noto-naskh-arabic-500.woff2") format("woff2"); font-weight: 500; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+200C-200E, U+2010-2011, U+FB50-FDFF, U+FE70-FEFC; }

/* Lets the gold rim's reveal angle animate */
@property --reveal {
  syntax: "<angle>";
  inherits: true;
  initial-value: 100deg;
}

:root {
  --stone: #efe5d1;
  --stone-lit: #faf4e6;
  --stone-shade: #e6d9bf;
  --niche: #f8f0e0;
  --niche-lit: #fffcf4;

  --ink: #2b1e10;
  --ink-body: #4b3a25;
  --ink-soft: #75603f;

  --gold-low: #96691a;
  --gold-mid: #d2a03a;
  --gold-high: #fbe7a8;
  --gold-text: #7d5310;
  --gold-line: #bd9038;
  --rim-flat: #c6983c;

  --plate-top: #fffdf7;
  --plate-bottom: #fbf3e4;
  --panel-ring: rgb(178 134 48 / 0.36);
  --bar-track: rgb(150 105 26 / 0.13);
  --tone-1: #6b4a0e;
  --tone-2: #a97a1f;
  --tone-3: #d2a03a;
  --tone-4: #cbb68a;

  --button-bg: #2b1e10;
  --button-lit: #3b2813;
  --button-lift: inset 0 1px 0 rgb(255 240 210 / 0.12), 0 2px 0 #160e06, 0 5px 10px -3px rgb(92 66 24 / 0.5);
  --button-lift-high: inset 0 1px 0 rgb(255 240 210 / 0.18), 0 2px 0 #160e06, 0 10px 16px -6px rgb(92 66 24 / 0.6);
  --button-ink: #fbeed6;
  --frieze-frame: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='34'%3E%3Cg transform='translate(8)'%3E%3Cpath d='M0 .4h18M0 6.1h18' stroke='%23d2a03a' stroke-width='.8' fill='none'/%3E%3Cpath d='M0 3.25C3.200 1.200 5.800 1.200 9 3.250S14.800 5.300 18 3.250M0 3.250C3.200 5.300 5.800 5.300 9 3.250S14.800 1.200 18 3.250' stroke='%23d2a03a' stroke-width='.6' fill='none'/%3E%3C/g%3E%3Cg transform='translate(26 34) rotate(180)'%3E%3Cpath d='M0 .4h18M0 6.1h18' stroke='%23d2a03a' stroke-width='.8' fill='none'/%3E%3Cpath d='M0 3.25C3.200 1.200 5.800 1.200 9 3.250S14.800 5.300 18 3.250M0 3.250C3.200 5.300 5.800 5.300 9 3.250S14.800 1.200 18 3.250' stroke='%23d2a03a' stroke-width='.6' fill='none'/%3E%3C/g%3E%3Cg transform='translate(0 26) rotate(-90)'%3E%3Cpath d='M0 .4h18M0 6.1h18' stroke='%23d2a03a' stroke-width='.8' fill='none'/%3E%3Cpath d='M0 3.25C3.200 1.200 5.800 1.200 9 3.250S14.800 5.300 18 3.250M0 3.250C3.200 5.300 5.800 5.300 9 3.250S14.800 1.200 18 3.250' stroke='%23d2a03a' stroke-width='.6' fill='none'/%3E%3C/g%3E%3Cg transform='translate(34 8) rotate(90)'%3E%3Cpath d='M0 .4h18M0 6.1h18' stroke='%23d2a03a' stroke-width='.8' fill='none'/%3E%3Cpath d='M0 3.25C3.200 1.200 5.800 1.200 9 3.250S14.800 5.300 18 3.250M0 3.250C3.200 5.300 5.800 5.300 9 3.250S14.800 1.200 18 3.250' stroke='%23d2a03a' stroke-width='.6' fill='none'/%3E%3C/g%3E%3Cpath d='M0 .4h8M.4 0v8M6.100 6.100h1.900M6.100 6.100v1.900' stroke='%23d2a03a' stroke-width='.8' fill='none'/%3E%3Cpath d='M3.250 1.700 4.800 3.250 3.250 4.800 1.700 3.250Z' fill='%23d2a03a'/%3E%3Cg transform='translate(34) scale(-1 1)'%3E%3Cpath d='M0 .4h8M.4 0v8M6.100 6.100h1.900M6.100 6.100v1.900' stroke='%23d2a03a' stroke-width='.8' fill='none'/%3E%3Cpath d='M3.250 1.700 4.800 3.250 3.250 4.800 1.700 3.250Z' fill='%23d2a03a'/%3E%3C/g%3E%3Cg transform='translate(0 34) scale(1 -1)'%3E%3Cpath d='M0 .4h8M.4 0v8M6.100 6.100h1.900M6.100 6.100v1.900' stroke='%23d2a03a' stroke-width='.8' fill='none'/%3E%3Cpath d='M3.250 1.700 4.800 3.250 3.250 4.800 1.700 3.250Z' fill='%23d2a03a'/%3E%3C/g%3E%3Cg transform='translate(34 34) scale(-1 -1)'%3E%3Cpath d='M0 .4h8M.4 0v8M6.100 6.100h1.900M6.100 6.100v1.900' stroke='%23d2a03a' stroke-width='.8' fill='none'/%3E%3Cpath d='M3.250 1.700 4.800 3.250 3.250 4.800 1.700 3.250Z' fill='%23d2a03a'/%3E%3C/g%3E%3C/svg%3E");

  --jar-line: #7a1d2b;
  --jar-body: #fcca92;
  --jar-edge: #f8bf5c;
  --jar-gold: #f0a93a;
  --jar-text: #7a1d2b;
  --jar-ground: #fffdf6;

  /* Radii by kind of thing, each nested one worked out by the concentric rule: inner = outer - padding */
  --inset: 0.375rem;
  --r-control: 0.75rem;
  --r-plate: 1.25rem;
  --r-plate-in: calc(var(--r-plate) - var(--inset)); /* 20 - 6 = 14 */
  --plate-rx: clamp(4rem, 6.6vw, 6.25rem);
  --r-tip: 0.625rem;

  /* One light from above: an edge catching it, then a short and a long soft shadow */
  --lift: inset 0 1px 0 rgb(255 255 255 / 0.8), 0 1px 1px rgb(92 66 24 / 0.06), 0 4px 8px -2px rgb(92 66 24 / 0.1), 0 14px 28px -14px rgb(92 66 24 / 0.22);
  --lift-high: inset 0 1px 0 rgb(255 255 255 / 0.9), 0 1px 1px rgb(92 66 24 / 0.08), 0 6px 12px -2px rgb(92 66 24 / 0.13), 0 20px 34px -14px rgb(92 66 24 / 0.3);

  --bar: calc(3.875rem + env(safe-area-inset-top));
  --bar-bg: #f4ebda;
  --frieze-art: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='24' fill='none' stroke='%23b4904a' stroke-width='.8'%3E%3Cpath d='M0 12C11 3 21 3 32 12S53 21 64 12'/%3E%3Cpath d='M0 12C11 21 21 21 32 12S53 3 64 12'/%3E%3Ccircle cx='16' cy='12' r='1.300' fill='%23b4904a' stroke='none'/%3E%3Ccircle cx='48' cy='12' r='1.300' fill='%23b4904a' stroke='none'/%3E%3C/svg%3E");

  --shadow-warm: 92 66 24;
  --vault:
    inset 0 1.5rem 2.75rem -1.25rem rgb(92 66 24 / 0.34),
    inset 1rem 0 1.75rem -1.25rem rgb(92 66 24 / 0.18),
    inset -1rem 0 1.75rem -1.25rem rgb(92 66 24 / 0.18);

  --font-display: "Amiri", "Traditional Arabic", serif;
  --font-body: "Noto Naskh Arabic", "Amiri", "Traditional Arabic", serif;

  --gutter: clamp(1rem, 3.5vw, 4.5rem);
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --ease-draw: cubic-bezier(0.65, 0, 0.2, 1);
  --ease-sheet: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-arch: cubic-bezier(0.45, 0, 0.2, 1);

  --z-texture: 5;
  --z-sheet: 12;
  --z-skip: 20;
}

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

/* The browser's own bar takes width and looks foreign on stone, so a slim gold marker stands in for it */
html {
  scrollbar-width: none;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
::-webkit-scrollbar { display: none; }

body {
  display: flex;
  flex-direction: column;
  min-height: 100svh;
  margin: 0;
  overflow-x: clip;
  background:
    radial-gradient(80rem 44rem at 50% -8%, var(--stone-lit), transparent 72%),
    var(--stone);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.85;
  -webkit-font-smoothing: antialiased;
}

/* Limestone: a broad mottling under a fine grain */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: var(--z-texture);
  pointer-events: none;
  opacity: 0.075;
  transform: translateZ(0);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .36 0 0 0 0 .27 0 0 0 0 .12 0 0 0 .7 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='900'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.008' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .4 0 0 0 0 .3 0 0 0 0 .15 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23m)'/%3E%3C/svg%3E");
}

.scroll-thumb {
  position: fixed;
  top: 0;
  right: 3px;
  z-index: calc(var(--z-texture) + 1);
  width: 6px;
  border-radius: 999px;
  background: var(--gold-mid);
  opacity: 0.45;
  touch-action: none;
  transition: opacity 180ms var(--ease);
}
/* A wider place to grab than the line you can see */
.scroll-thumb::before { content: ""; position: absolute; inset-block: 0; left: -8px; right: -3px; }
.scroll-thumb:hover, .scroll-thumb.is-held { opacity: 0.85; }
.scroll-thumb[hidden] { display: none; }

img { display: block; max-width: 100%; height: auto; -webkit-user-drag: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
p, h1, h2, dl, dd { margin: 0; }
address { font-style: normal; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
main:focus { outline: none; }

/* Selected text takes the site's own gold, quietly */
::selection { background: rgb(214 165 66 / 0.5); color: var(--ink); }
[data-theme="night"] ::selection { background: rgb(224 170 80 / 0.42); color: #fff6e4; }

:focus-visible {
  outline: 2px solid var(--gold-text);
  outline-offset: 3px;
  border-radius: 0.5rem;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  inset-block-start: 0.5rem;
  inset-inline-start: 0.5rem;
  z-index: var(--z-skip);
  padding: 0.5rem 1rem;
  background: var(--ink);
  color: var(--niche-lit);
  transform: translateY(-200%);
}
.skip-link:focus { transform: none; }

.filters { position: absolute; }

/* Masthead: the original arrangement, Arabic and English either side of the jar */
.masthead { position: relative; padding: clamp(0.5rem, 1.7vh, 1.5rem) var(--gutter) clamp(0.25rem, 1.1vh, 0.875rem); }
.masthead__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: clamp(0.875rem, 1.6vw, 1.75rem);
}
.masthead__ar, .masthead__en { display: grid; text-align: end; }
.masthead__small { color: var(--ink-soft); font-size: clamp(0.875rem, 1.05vw, 1.0625rem); line-height: 1.6; }
.masthead__name {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.05vw, 2.0625rem);
  font-weight: 700;
  line-height: 1.45;
  background: linear-gradient(100deg, var(--gold-text), #b5801c 48%, var(--gold-text));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.masthead__en .masthead__name { font-size: clamp(1.125rem, 1.8vw, 1.8125rem); }

/* The jar from the original header, traced line by line so it is sharp at any size and in both themes */
.masthead__jar { display: block; flex: none; height: min(5.625rem, 11vh); aspect-ratio: 70 / 121; }
.masthead__jar svg { display: block; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
/* The original jar is left white where the Cana scene sits; that ground has to be drawn on stone and at night */
.mast__ground { fill: var(--jar-ground); }
.mast__body { fill: var(--jar-body); stroke: var(--jar-edge); stroke-width: 0.8; }
.mast__gold { fill: var(--jar-gold); }
.mast__fill { fill: var(--jar-line); }
.mast__line { fill: none; stroke: var(--jar-line); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.mast__line--heavy { stroke-width: 1.8; }
.mast__line--thin { stroke-width: 0.5; }
.mast__text { fill: var(--jar-text); font-family: var(--font-display); font-weight: 700; }

/* Byzantine guilloche, edge to edge */
.frieze {
  flex: none;
  height: 1.625rem;
  border-block: 1px solid var(--gold-line);
  background: var(--frieze-art) center / 64px 24px repeat-x;
  box-shadow: 0 0.375rem 0.75rem -0.5rem rgb(var(--shadow-warm) / 0.4);
}

/* The three arches */
.sanctuary {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.14fr) minmax(0, 1.4fr) minmax(0, 1.14fr);
  padding: clamp(1rem, 3vh, 2rem) var(--gutter) 0;
}
/* --arch-ratio is the height of a pillar's curve over half its width. Widgets copy it, so their tops are the same curve at a smaller size. */
.arch {
  --crown: clamp(9rem, 11.5vw, 13.5rem);
  --arch-ratio: 0.87;
  --plate-ry: calc(var(--plate-rx) * var(--arch-ratio));
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  margin-block-start: min(3.5rem, 4vh);
  padding-inline: clamp(1.25rem, 2.2vw, 2.75rem);
  padding-block-end: clamp(1rem, 3vh, 2rem);
  border-radius: 50% 50% 0 0 / var(--crown) var(--crown) 0 0;
  background: linear-gradient(180deg, var(--stone-shade) 0, var(--niche) 30%, var(--niche-lit) 100%);
}
/* The shade inside the vault is its own layer: redrawing it every frame was the main cost of a page change,
   so it fades away with the words before the stone moves and returns once it has settled */
.arch::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: var(--vault);
  pointer-events: none;
  transition: opacity 320ms ease-out;
}
.is-leaving .arch::before, .is-morphing .arch::before { opacity: 0; transition: opacity 170ms ease-out; }
.arch--center {
  --crown: clamp(11rem, 17.5vw, 21rem);
  --arch-ratio: 0.65;
  margin-block-start: 0;
  padding-block-start: clamp(2.5rem, 7.5vh, 5.25rem);
  padding-inline: clamp(1.5rem, 2.6vw, 3.25rem);
  padding-block-end: clamp(2rem, 5vh, 3.5rem);
  background: radial-gradient(70% 55vh at 50% 34vh, #fffdf8, transparent 74%), linear-gradient(180deg, var(--stone-shade) 0, var(--niche) 16rem, var(--niche-lit) 100%);
  text-align: center;
}
.sanctuary--home .arch--center { padding-block-end: clamp(1rem, 3vh, 2rem); }
.sanctuary--home .arch--center .arch__inner { margin-block: auto; }
.arch__inner { position: relative; display: flex; flex-direction: column; align-items: center; width: 100%; }
/* Side arches stay in view beside long pages */
.arch__sticky {
  position: sticky;
  inset-block-start: 1.25rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
.arch--menu { padding-inline: clamp(0.75rem, 1.2vw, 1.5rem); padding-block: clamp(1.25rem, 3.4vh, 2.5rem) 0.75rem; }
.arch--side { --plate-rx: clamp(3.5rem, 5vw, 4.75rem); padding-block-start: clamp(1.75rem, 5vh, 3.75rem); text-align: center; }
/* Widgets in the left pillar size their own arch tops from this */
.arch__inner--side { container-type: inline-size; }

/* Gold leaf rim: a plain line always, with a polished layer on top that rests during moves */
.rim {
  --reveal: 100deg;
  position: absolute;
  inset: 0;
  border: 2px solid var(--rim-flat);
  border-block-end: 0;
  border-radius: inherit;
  pointer-events: none;
}
.first-visit .rim {
  -webkit-mask-image: conic-gradient(from calc(var(--reveal) * -1) at 50% 100%, #000 calc(var(--reveal) * 2), transparent 0);
  mask-image: conic-gradient(from calc(var(--reveal) * -1) at 50% 100%, #000 calc(var(--reveal) * 2), transparent 0);
}
.rim::before {
  content: "";
  position: absolute;
  inset: -2px -2px 0;
  padding: 2px 2px 0;
  border-radius: inherit;
  background:
    radial-gradient(20rem circle at var(--light-x, 50%) var(--light-y, 0%), var(--gold-high) 0, color-mix(in srgb, var(--gold-high) 72%, transparent) 26%, color-mix(in srgb, var(--gold-high) 36%, transparent) 48%, color-mix(in srgb, var(--gold-high) 12%, transparent) 66%, color-mix(in srgb, var(--gold-high) 3%, transparent) 82%, transparent 100%),
    linear-gradient(115deg, var(--gold-low), var(--gold-mid) 30%, #f0d48a 50%, var(--gold-mid) 70%, var(--gold-low));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  transition: opacity 320ms ease-out;
}
.is-leaving .rim::before, .is-morphing .rim::before { opacity: 0; transition: opacity 170ms ease-out; }
/* Second line: each axis of its curve is the pillar's minus the 8px between them */
.rim::after {
  content: "";
  position: absolute;
  inset: calc(0.5rem - 2px) calc(0.5rem - 2px) 0;
  border: 1px solid var(--rim-flat);
  border-block-end: 0;
  border-radius: 50% 50% 0 0 / calc(var(--crown) - 0.5rem) calc(var(--crown) - 0.5rem) 0 0;
  opacity: 0.55;
}

/* Menu arch */
.saint {
  position: relative;
  flex: none;
  width: clamp(3rem, min(5.2vw, 8vh), 5.5rem);
  margin-block-end: clamp(0.375rem, 1.2vh, 0.875rem);
  padding: 0.1875rem;
  border-radius: 50% 50% 0.5rem 0.5rem / 34% 34% 0.5rem 0.5rem;
  background: linear-gradient(135deg, #e9cf8c, var(--gold-low));
  box-shadow: 0 0.5rem 1rem -0.5rem rgb(var(--shadow-warm) / 0.55);
}
/* 8 - 3 = 5 */
.saint img { width: 100%; border-radius: 50% 50% 0.3125rem 0.3125rem / 34% 34% 0.3125rem 0.3125rem; pointer-events: none; }
.saint--large { width: clamp(6.5rem, 8.4vw, 10.25rem); margin-block-end: 1rem; }

.menu { width: 100%; }
.menu a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  /* Measured from the text itself, so the space between links never collapses on a short screen */
  padding-block: 0.3em;
  color: var(--ink);
  font-size: clamp(1rem, min(1.26vw, 2.6vh), 1.375rem);
  line-height: 1.3;
  text-align: center;
  text-wrap: balance;
  transition: color 180ms var(--ease);
}
.menu a::before, .menu a::after, .menu__mark {
  content: "";
  flex: none;
  width: 0.375rem;
  height: 0.375rem;
  background: var(--gold-mid);
  transform: rotate(45deg);
}
.menu a::before, .menu a::after {
  opacity: 0;
  transform: rotate(45deg) scale(0.4);
  transition: opacity 180ms var(--ease), transform 180ms var(--ease);
}
.menu a[aria-current]::before, .menu a[aria-current]::after { display: none; }
.menu a:hover { color: var(--gold-text); }
.menu a:hover::before, .menu a:hover::after { opacity: 1; transform: rotate(45deg) scale(1); }
.menu a[aria-current], .menu .menu__key { color: var(--gold-text); font-weight: 500; }
.bar-menu { display: none; }

/* Shared type */
.label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  color: var(--gold-text);
  font-family: var(--font-display);
  font-size: 1.25rem;
}
.label i, .footer > i {
  flex: none;
  width: 0.375rem;
  height: 0.375rem;
  background: var(--gold-mid);
  transform: rotate(45deg);
}
.statement {
  max-width: 13em;
  font-family: var(--font-display);
  font-size: clamp(1.625rem, min(3.05vw, 5vh), 3.1875rem);
  font-weight: 700;
  line-height: 1.42;
  text-wrap: balance;
}
.page-head { display: grid; justify-items: center; gap: 0.25rem; margin-block-end: clamp(1.75rem, 4vh, 2.75rem); }
.page-title {
  max-width: 14em;
  font-family: var(--font-display);
  font-size: clamp(2rem, 3vw, 3.125rem);
  font-weight: 700;
  line-height: 1.35;
  text-wrap: balance;
}
.page-lead {
  color: var(--gold-text);
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 1.85vw, 1.875rem);
  line-height: 1.7;
  text-wrap: balance;
}

/* Reading column */
.prose {
  width: 100%;
  max-width: 46rem;
  color: var(--ink-body);
  font-size: clamp(1.25rem, 1.3vw, 1.5rem);
  line-height: 2;
  text-align: start;
}
.prose p { text-wrap: pretty; }
.intro { color: var(--ink); font-family: var(--font-display); font-size: 1.4em; line-height: 1.6; text-align: center; text-wrap: balance; }
.note { margin-block-start: 1.25rem; color: var(--ink-soft); text-wrap: balance; }

/* Purpose page and its kin: each part reads as its own chapter */
.chapter { position: relative; padding-block: clamp(1.5rem, 3.4vh, 2.5rem); text-align: start; }
.chapter + .chapter { border-block-start: 1px solid var(--panel-ring); }
.chapter + .chapter::before {
  content: "";
  position: absolute;
  inset-block-start: -0.25rem;
  inset-inline-start: calc(50% - 0.25rem);
  width: 0.5rem;
  height: 0.5rem;
  background: var(--gold-mid);
  transform: rotate(45deg);
}
.chapter:first-child { padding-block-start: 0; }
.chapter > h2 {
  margin-block: 0 0.625em;
  color: var(--gold-text);
  font-family: var(--font-display);
  font-size: 1.4em;
  font-weight: 700;
  line-height: 1.55;
  text-align: center;
  text-wrap: balance;
}
.lede { color: var(--ink); text-wrap: pretty; }
.chapter > p + p { margin-block-start: 1em; }

.ruled { width: 100%; }
.ruled li { padding-block: clamp(0.25rem, 1.2vh, 1rem); line-height: 1.75; text-wrap: pretty; }
.ruled li + li { border-block-start: 1px solid var(--panel-ring); }

/* Two materials, one family. Wide things are plates: a softly lit slab with a gold hairline set in from its edge.
   Narrow things are niches: the same slab with an arch top measured from its own width, as the pillars are. */
.step__body, .audience li, .blessing, .contact, .score, .side-card, .fact--wide,
.session, .fact, .tool, .stat {
  position: relative;
  background: linear-gradient(180deg, var(--plate-top), var(--plate-bottom));
  box-shadow: var(--lift);
}
.step__body, .blessing, .contact, .score, .side-card, .fact--wide {
  border-radius: var(--plate-rx) var(--plate-rx) var(--r-plate) var(--r-plate) / var(--plate-ry) var(--plate-ry) var(--r-plate) var(--r-plate);
}
.step__body::before, .audience li::before, .blessing::before, .contact::before, .score::before, .side-card::before, .fact--wide::before,
.session::before, .fact::before, .tool::before, .stat::before {
  content: "";
  position: absolute;
  inset: var(--inset);
  border: 1px solid var(--panel-ring);
  border-radius: calc(var(--plate-rx) - var(--inset)) calc(var(--plate-rx) - var(--inset)) var(--r-plate-in) var(--r-plate-in) / calc(var(--plate-ry) - var(--inset)) calc(var(--plate-ry) - var(--inset)) var(--r-plate-in) var(--r-plate-in);
  pointer-events: none;
  transition: border-color 220ms var(--ease);
}
/* A small gold lozenge sits on the plate's hairline, the line parting around it */
.step__body::after, .blessing::after, .contact::after, .score::after, .side-card::after, .fact--wide::after {
  content: "";
  position: absolute;
  inset-block-start: calc(var(--inset) - 0.1875rem + 0.5px);
  inset-inline-start: calc(50% - 0.1875rem);
  width: 0.375rem;
  height: 0.375rem;
  background: var(--gold-mid);
  box-shadow: 0 0 0 0.1875rem var(--plate-top);
  transform: rotate(45deg);
  pointer-events: none;
}
/* Narrow widgets are small copies of the pillar they stand in: half their width times the pillar's own ratio.
   The hairline takes 6px off each axis of that. */
.session, .fact:not(.fact--wide), .tool, .stat, .audience li {
  --rise: calc(var(--card, 12rem) / 2 * var(--arch-ratio));
  border-radius: 50% 50% var(--r-plate) var(--r-plate) / var(--rise) var(--rise) var(--r-plate) var(--r-plate);
}
.session::before, .fact:not(.fact--wide)::before, .tool::before, .stat::before, .audience li::before {
  border-radius: 50% 50% var(--r-plate-in) var(--r-plate-in) / calc(var(--rise) - var(--inset)) calc(var(--rise) - var(--inset)) var(--r-plate-in) var(--r-plate-in);
}

.blessing {
  padding: 1.75rem clamp(1.25rem, 2vw, 2rem);
  color: var(--gold-text);
  font-family: var(--font-display);
  font-size: 1.2em;
  line-height: 1.8;
  text-align: center;
}
.blessing > * + * { margin-block-start: 0.5em; }

/* Numbered widgets. A faint line joins each number to the next, and a gold one fills it as the page is read,
   so the last number is reached exactly when the page ends. */
.steps { --step-gap: clamp(1rem, 2.2vh, 1.5rem); position: relative; display: grid; gap: var(--step-gap); width: 100%; max-width: 46rem; text-align: start; }
.steps:not(.steps--plain) > .step:not(:last-child)::before,
.steps:not(.steps--plain) > .step:not(:last-child)::after {
  content: "";
  position: absolute;
  inset-block: 3.875rem calc(-1 * var(--step-gap));
  inset-inline-start: calc(1.625rem - 0.5px);
  width: 1px;
  background: var(--panel-ring);
  transform-origin: top;
}
.steps:not(.steps--plain) > .step:not(:last-child)::after { background: var(--gold-mid); }
.step { position: relative; display: grid; grid-template-columns: 3.25rem minmax(0, 1fr); gap: clamp(0.75rem, 1.2vw, 1.25rem); align-items: start; }
.step__n {
  position: relative;
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.875rem;
  padding-block-start: 0.25rem;
  z-index: 1;
  border-radius: 50% 50% var(--r-control) var(--r-control) / calc(1.625rem * var(--arch-ratio)) calc(1.625rem * var(--arch-ratio)) var(--r-control) var(--r-control);
  background: var(--niche-lit);
  box-shadow: 0 0 0 1px var(--gold-line), inset 0 0 0 3px var(--niche-lit), inset 0 0 0 4px var(--panel-ring);
  color: var(--gold-text);
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1;
}
.step__body {
  z-index: 1;
  padding: 1.875rem clamp(1.625rem, 2vw, 2.25rem) 1.5rem;
  color: var(--ink-body);
  font-size: clamp(1.25rem, 1.3vw, 1.5rem);
  line-height: 1.95;
}
.step__body p { text-wrap: pretty; }
.step__body h2 {
  margin: 0 0 0.25em;
  color: var(--gold-text);
  font-family: var(--font-display);
  font-size: 1.25em;
  font-weight: 700;
  line-height: 1.5;
  text-wrap: balance;
}

.audience { container-type: inline-size; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.875rem; }
.audience li {
  --card: calc((100cqi - 2 * 0.875rem) / 3);
  display: grid;
  place-items: center;
  padding: calc(var(--card, 12rem) / 4 * var(--arch-ratio) + 0.75rem) 1.25rem 1.5rem;
  color: var(--ink);
  line-height: 1.5;
  text-align: center;
  text-wrap: balance;
}


/* Schedule: every session is a small niche, the same shape as the pillars around it */
.courses { container-type: inline-size; display: grid; gap: clamp(1.75rem, 3.6vh, 2.5rem); width: 100%; }
.course__head { display: flex; align-items: center; gap: 1rem; margin-block-end: 1.5rem; }
.course__head::after { content: ""; order: 1; flex: 1; height: 1px; background: var(--gold-line); }
.course__title {
  color: var(--gold-text);
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.75vw, 1.875rem);
  font-weight: 700;
  line-height: 1.4;
}
.course__meta { order: 2; color: var(--ink-soft); font-size: 1.0625rem; white-space: nowrap; }

.sessions { --card: calc((100cqi - 0.875rem) / 2); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 0.875rem; }
@container (min-width: 37rem) {
  .sessions { --card: calc((100cqi - 3 * 0.875rem) / 4); grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.session {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: calc(var(--card, 12rem) / 4 * var(--arch-ratio) + 0.75rem) 1.375rem 1.375rem;
  text-align: center;
  transition: box-shadow 220ms var(--ease);
}
.session__weekday { color: var(--ink-soft); font-size: 1rem; line-height: 1.4; }
.session__day { color: var(--gold-text); font-family: var(--font-display); font-size: 3rem; font-weight: 700; line-height: 1.15; }
.session__topic { flex: 1; margin-block-start: 0.25rem; color: var(--ink); font-size: clamp(1.125rem, 1.15vw, 1.3125rem); font-weight: 500; line-height: 1.5; text-wrap: balance; }
.session__people { display: grid; gap: 0.125rem; width: 100%; margin-block-start: 0.75rem; padding-block-start: 0.625rem; border-block-start: 1px solid var(--panel-ring); line-height: 1.45; }
.session__people b { color: var(--ink-body); font-size: clamp(1.0625rem, 1.05vw, 1.1875rem); font-weight: 500; }
.session__people small { color: var(--ink-soft); font-size: 0.9375rem; }

/* The next session wears a gold line; the ones already over step back */
.session.is-past { opacity: 0.45; }
.session.is-next { box-shadow: 0 0 0 1.5px var(--gold-mid), var(--lift); }
.session.is-next::before { border-color: var(--gold-mid); }
.session-flag {
  position: absolute;
  inset-block-start: -0.8125rem;
  inset-inline-start: 50%;
  translate: 50% 0;
  z-index: 1;
  padding: 0 0.875rem;
  border-radius: 999px;
  background: var(--gold-mid);
  color: #24190b;
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.7;
  white-space: nowrap;
}
.table-download { margin-block-start: 1rem; }

/* Pillar widgets */
.next { --card: min(100cqi, 17rem); width: min(100%, 17rem); }
.next .session { padding-block-end: 1.5rem; }
.next .session__day { font-size: clamp(3.5rem, 4.4vw, 5rem); }
.next .session__topic { font-size: clamp(1.1875rem, 1.3vw, 1.4375rem); }

.facts { --card: calc((100cqi - 0.875rem) / 2); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.875rem; width: 100%; }
.fact { display: grid; justify-items: center; align-content: center; padding: calc(var(--card, 12rem) / 4 * var(--arch-ratio) + 0.75rem) 0.75rem 1.25rem; }
.fact b { color: var(--gold-text); font-family: var(--font-display); font-size: clamp(2.75rem, 3.6vw, 4rem); font-weight: 700; line-height: 1.1; }
.fact span { color: var(--ink-body); font-size: clamp(1.125rem, 1.2vw, 1.3125rem); line-height: 1.5; }
.fact--wide { grid-column: 1 / -1; padding: 1.5rem 1.25rem 1.375rem; }
.fact--wide b { font-size: clamp(1.875rem, 2.2vw, 2.5rem); line-height: 1.3; }
.side-card { padding: 1.875rem 1.75rem 1.5rem; color: var(--ink-body); font-size: clamp(1.1875rem, 1.2vw, 1.375rem); line-height: 1.8; text-wrap: pretty; }

/* Custom marks for the two meeting apps, so they belong to the page */
.tools { --card: calc((100cqi - 0.875rem) / 2); container-type: inline-size; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.875rem; width: min(100%, 22rem); }
.tool { display: grid; justify-items: center; gap: 0.25rem; padding: 2rem 0.5rem 1.125rem; color: var(--gold-text); text-align: center; transition: box-shadow 220ms var(--ease), translate 240ms var(--ease); }
.tool svg { width: 3.25rem; height: 3.25rem; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.tool span { color: var(--ink); font-size: 1.0625rem; line-height: 1.4; }

/* Six stone jars of Cana. Their own drawing, each with its name written large on its belly. */
.jars { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(0.75rem, 2vh, 1.25rem) 0.75rem; width: 100%; justify-items: center; }
.stone { position: relative; width: min(100%, 11.5rem); }
.stone svg { display: block; width: 100%; height: auto; overflow: visible; pointer-events: none; }
.stone span {
  position: absolute;
  inset: 30% 13% 7%;
  display: grid;
  place-items: center;
  color: var(--ink);
  font-size: clamp(1.0625rem, 6cqi, 1.3125rem);
  font-weight: 500;
  line-height: 1.35;
  text-align: center;
  text-wrap: balance;
}
.stone__lug { fill: none; stroke: var(--gold-mid); stroke-width: 3; stroke-linecap: round; }
.stone__body { fill: var(--plate-top); stroke: var(--gold-mid); stroke-width: 1.5; stroke-linejoin: round; }
.stone__rim { fill: none; stroke: var(--gold-mid); stroke-width: 2.25; stroke-linecap: round; }

/* Appraisal keeps the sheet's own order: benefit of the lectures on the right, the centre's work on the left */
.stat { --card: min(26rem, 78vw); display: grid; justify-items: center; align-content: center; width: min(100%, 26rem); padding: 3.25rem 2rem 2rem; text-align: center; }
.stat__value { color: var(--gold-text); font-family: var(--font-display); font-size: clamp(3.5rem, 5vw, 5rem); font-weight: 700; line-height: 1.1; }
.stat__label { color: var(--ink); font-family: var(--font-display); font-size: clamp(1.25rem, 1.5vw, 1.625rem); line-height: 1.5; text-wrap: balance; }
.appraisal__note { margin-block: clamp(1.25rem, 3vh, 1.75rem); }
.appraisal { container-type: inline-size; width: 100%; text-align: start; }
.appraisal__cols { display: grid; gap: 1.125rem; }
.appraisal__col { display: grid; align-content: start; gap: 1.125rem; }
@container (min-width: 50rem) {
  .appraisal__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.score { padding: 1.625rem clamp(1.375rem, 1.6vw, 1.75rem) 1.125rem; }
.score__name { margin: 0 0 0.625rem; color: var(--gold-text); font-family: var(--font-display); font-size: clamp(1.25rem, 1.35vw, 1.5rem); font-weight: 700; line-height: 1.45; text-wrap: balance; }
.score__body { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 0.875rem; }
.score__rows { display: grid; grid-auto-rows: 2.125rem; font-variant-numeric: tabular-nums; }
.score__row { display: grid; grid-template-columns: 5.25rem minmax(0, 1fr) 3.875rem 2.5rem; align-items: center; column-gap: 0.5rem; }
.score__row dt { color: var(--ink); font-size: 1rem; line-height: 1.3; white-space: nowrap; }
.score__bar { display: flex; height: 0.625rem; overflow: hidden; border-radius: 999px; background: var(--bar-track); }
.score__bar i { display: block; min-width: 2px; border-radius: 999px; transform-origin: right; }
.score__pct { color: var(--ink); font-size: 1rem; text-align: end; }
.score__count { color: var(--ink-soft); font-size: 0.9375rem; text-align: end; }
/* The bracket from the sheet, joining "excellent" and "good" into one result */
.score__sum {
  display: grid;
  place-content: center;
  height: 4.25rem;
  padding-inline: 0.75rem 0.125rem;
  border-inline-start: 2px solid var(--gold-mid);
  border-start-start-radius: 0.875rem;
  border-end-start-radius: 0.875rem;
  text-align: center;
}
.score__sum b { color: var(--gold-text); font-family: var(--font-display); font-size: clamp(1.375rem, 1.6vw, 1.75rem); font-weight: 700; line-height: 1.2; }
.score__sum small { max-width: 5.5em; color: var(--ink-soft); font-size: 0.8125rem; line-height: 1.3; text-wrap: balance; }
.score__raters { display: flex; justify-content: space-between; margin-block-start: 0.5rem; padding-block-start: 0.375rem; border-block-start: 1px solid var(--panel-ring); color: var(--ink-soft); font-size: 0.9375rem; }
.score__raters b { color: var(--ink); font-weight: 500; }
.tone-1 { background: var(--tone-1); }
.tone-2 { background: var(--tone-2); }
.tone-3 { background: var(--tone-3); }
.tone-4 { background: var(--tone-4); }

@container (max-width: 30rem) {
  .score__body { grid-template-columns: minmax(0, 1fr); }
  .score__sum { order: -1; display: flex; align-items: baseline; justify-content: center; gap: 0.625rem; height: auto; margin-block-end: 0.375rem; padding: 0; border: 0; }
  .score__sum small { max-width: none; }
  .score__rows { grid-auto-rows: auto; row-gap: 0.5rem; }
  .score__row { grid-template-columns: minmax(0, 1fr) auto 2.75rem; row-gap: 0.25rem; }
  .score__bar { grid-column: 1 / -1; order: 3; }
}

/* Wide pages let the middle arch take over the left pillar */
.table-after { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0.75rem 2rem; width: 100%; margin-block-start: 1.75rem; }

.contact { display: grid; justify-items: center; width: min(100%, 26rem); margin-block-start: 1.75rem; padding: 1.75rem 1.75rem 0.75rem; }
.contact h2 { color: var(--gold-text); font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; line-height: 1.6; }

/* Controls */
.actions {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5rem 1.75rem;
  margin-block-start: clamp(0.5rem, 2vh, 1.375rem);
}
.button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.125rem;
  padding: 0 1.75rem;
  /* A square plaque standing slightly proud of the stone, edged with a slim run of the frieze from the bar */
  border: 0.5rem solid transparent;
  border-image: var(--frieze-frame) 8 round;
  background: var(--button-bg);
  box-shadow: var(--button-lift);
  color: var(--button-ink);
  font-family: var(--font-display);
  font-size: 1.1875rem;
  font-weight: 700;
  white-space: nowrap;
  transition: translate 220ms var(--ease), scale 220ms var(--ease), box-shadow 220ms var(--ease), background-color 220ms var(--ease);
}
.button:active { scale: 0.985; }
.button--large { min-height: 3.5rem; margin-block-start: 0.5rem; padding-inline: 2.5rem; font-size: 1.375rem; }
.text-link {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  color: var(--gold-text);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: var(--gold-mid);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.4em;
  transition: color 180ms var(--ease), text-decoration-color 180ms var(--ease), text-underline-offset 220ms var(--ease);
}
.text-link:hover { color: var(--ink); text-decoration-color: var(--ink); }

/* Hover needs a real mouse. On touch these would stick after the tap. */
@media (hover: hover) {
  /* Barely lifts and grows a touch, the way a sign-in button does on a phone. No bounce. */
  .button:hover {
    background: var(--button-lit);
    box-shadow: var(--button-lift-high);
    translate: 0 -1px;
    scale: 1.035;
  }
  .button:active { translate: 0; scale: 0.985; }
  .text-link:hover { text-underline-offset: 0.55em; }

  .session:not(.is-past):not(.is-next):hover, a.tool:hover { box-shadow: var(--lift-high); }
  .session:not(.is-past):hover::before, a.tool:hover::before { border-color: var(--gold-mid); }
  a.tool:hover { translate: 0 -2px; }
}

/* Home centre arch */
.logo-frame { position: relative; display: block; width: min(100%, 27.5rem, 40vh); }
.logo { width: 100%; pointer-events: none; }
.logo-saint { display: none; pointer-events: none; }
.logo-frame + .label { margin-block-start: clamp(0.25rem, 1.6vh, 1.125rem); }

/* Side arch */
.cross {
  flex: none;
  width: clamp(1.75rem, 2.1vw, 2.5rem);
  height: clamp(1.75rem, 2.1vw, 2.5rem);
  margin-block-end: clamp(0.375rem, 1.6vh, 1.125rem);
  filter: drop-shadow(0 0.1875rem 0.25rem rgb(var(--shadow-warm) / 0.35));
}
.side__title {
  color: var(--gold-text);
  font-family: var(--font-display);
  font-size: clamp(1.125rem, min(1.5vw, 2.7vh), 1.625rem);
  font-weight: 700;
  line-height: 1.6;
  text-wrap: balance;
}
.side__text { color: var(--ink-body); font-size: clamp(1.0625rem, 1.08vw, 1.25rem); text-wrap: balance; }
.side__note { margin-block: 0.875rem; color: var(--gold-text); font-family: var(--font-display); font-size: 1.1875rem; line-height: 1.7; text-wrap: balance; }
.arch__inner--side .ruled { margin-block-start: clamp(0.125rem, 1vh, 0.75rem); color: var(--ink-body); font-size: clamp(0.9375rem, min(1.08vw, 2.4vh), 1.25rem); }
.arch__inner--side .button { margin-block-start: 1rem; }

/* The ledge the arches stand on */
.sill {
  flex: none;
  height: 0.875rem;
  border-block: 1px solid var(--gold-line);
  background: linear-gradient(180deg, var(--stone-lit), var(--stone-shade));
  box-shadow: 0 0.625rem 1.25rem -0.625rem rgb(var(--shadow-warm) / 0.45);
}

.footer {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0 1rem;
  padding: clamp(0.125rem, 1.2vh, 0.75rem) var(--gutter);
  color: var(--ink-soft);
  font-size: 0.9375rem;
}
.footer a {
  display: inline-flex;
  align-items: center;
  min-height: 2.25rem;
  transition: color 180ms var(--ease);
}
.footer a:hover { color: var(--gold-text); }
.footer__ar, .footer__en { display: none; }

/* Night candle: stands on the gold band, wick waiting, lights when pressed */
.night-toggle {
  display: block;
  color: var(--ink-soft);
  transition: transform 240ms var(--ease), color 180ms var(--ease);
}
.night-toggle:active { transform: scale(0.94); }
.masthead > .night-toggle {
  position: absolute;
  inset-block: auto 0;
  inset-inline-end: var(--gutter);
  width: 3rem;
  height: 3.25rem;
  margin: 0;
  border-radius: 0;
  transform-origin: 50% 100%;
}
.masthead > .night-toggle .candle { position: absolute; inset-block-end: 0; inset-inline-start: calc(50% - 0.25rem); }
.candle {
  position: relative;
  display: block;
  width: 0.5rem;
  height: 1.625rem;
  border-radius: 0.125rem 0.125rem 0 0;
  background: linear-gradient(90deg, #b58f55, #f1e3c0 44%, #c9a66d);
}
/* Its small brass foot sits on the band */
.candle::after {
  content: "";
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: calc(50% - 0.625rem);
  width: 1.25rem;
  height: 0.1875rem;
  border-radius: 0.125rem 0.125rem 0 0;
  background: linear-gradient(90deg, var(--gold-low), var(--gold-mid), var(--gold-low));
}
.candle__wick {
  position: absolute;
  inset-block-end: 100%;
  inset-inline-start: calc(50% - 0.5px);
  width: 1px;
  height: 0.25rem;
  background: #3a2a14;
}
.candle__flame {
  position: absolute;
  inset-block-end: calc(100% + 0.0625rem);
  inset-inline-start: calc(50% - 0.3125rem);
  width: 0.625rem;
  height: 1.3125rem;
  transform: scale(0);
  transform-origin: 50% 100%;
  transition: transform 520ms cubic-bezier(0.3, 1.5, 0.5, 1);
}
.candle__flame b {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50% 50% 46% 46% / 68% 68% 32% 32%;
  background: radial-gradient(58% 54% at 50% 70%, #fffdf0 0, #ffe9a6 32%, #ffb648 64%, rgb(255 130 30 / 0) 100%);
  transform-origin: 50% 100%;
}
[data-theme="night"] .candle__flame { transform: scale(1); }
@media (hover: hover) {
  .night-toggle:hover { color: var(--gold-text); }
  [data-theme="day"] .night-toggle:hover .candle__flame { transform: scale(0.4); }
}

/* Tooltip plaque */
.tip {
  position: fixed;
  z-index: var(--z-skip);
  max-width: 18rem;
  padding: 0.3125rem 0.875rem;
  border-radius: var(--r-tip);
  background: var(--ink);
  color: var(--niche-lit);
  font-size: 1rem;
  line-height: 1.5;
  text-align: center;
  box-shadow: 0 0.5rem 1.25rem -0.625rem rgb(42 33 22 / 0.7);
  opacity: 0;
  transform: scale(0.88);
  transform-origin: var(--arrow, 50%) 100%;
  pointer-events: none;
  transition: opacity 130ms ease-out, transform 200ms var(--ease);
}
.tip.is-below { transform-origin: var(--arrow, 50%) 0; }
.tip.is-on { opacity: 1; transform: none; }
.tip::after {
  content: "";
  position: absolute;
  bottom: -0.25rem;
  left: calc(var(--arrow, 50%) - 0.3125rem);
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 0 0 0.125rem 0;
  background: inherit;
  transform: rotate(45deg);
}
.tip.is-below::after { top: -0.25rem; bottom: auto; }

/* Warm light that lives inside the arches and stops at the stone */
.glow { display: none; }
[data-theme="night"] .glow {
  display: block;
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  opacity: 0;
  pointer-events: none;
  transition: opacity 600ms var(--ease);
}
[data-theme="night"] .arch.is-lit .glow { opacity: 1; }
.glow i {
  position: absolute;
  top: -9rem;
  left: -9rem;
  width: 18rem;
  height: 18rem;
  border-radius: 50%;
  /* Eased, so it thins away with no visible edge */
  background: radial-gradient(circle closest-side, rgb(236 200 150 / 0.05) 0, rgb(236 200 150 / 0.043) 18%, rgb(236 200 150 / 0.03) 36%, rgb(236 200 150 / 0.017) 54%, rgb(236 200 150 / 0.007) 72%, rgb(236 200 150 / 0.002) 88%, transparent 100%);
  will-change: transform;
}


/* Laptops and desktops */
@media (min-width: 68.0625rem) {
  /* The space between pillars is one constant, carried as margins so it never changes as tracks move */
  .sanctuary {
    --arch-gap: clamp(0.875rem, 1.8vw, 2.25rem);
    padding-inline: calc(var(--gutter) - var(--arch-gap) / 2);
  }
  .arch { margin-inline: calc(var(--arch-gap) / 2); }

  /* Inner pages: the menu pillar narrows a touch and the reading arch takes the room */
  .sanctuary:not(.sanctuary--home) { grid-template-columns: minmax(0, 0.96fr) minmax(0, 1.6fr) minmax(0, 1.08fr); }
  .sanctuary:not(.sanctuary--home) .arch--center { --crown: clamp(10rem, 13vw, 15.5rem); }
  /* Wide pages: the left pillar folds away and the middle arch takes its place */
  .sanctuary.sanctuary--wide { grid-template-columns: minmax(0, 0.96fr) minmax(0, 2.68fr) minmax(0, 0fr); }
  .sanctuary.sanctuary--wide .arch--center { --crown: clamp(10rem, 12vw, 15rem); --arch-ratio: 0.36; }

  /* The left pillar earns its place: its material is set large and fills the arch */
  .sanctuary:not(.sanctuary--home) .arch__inner--side {
    min-height: min(calc(100svh - 18.5rem), 42rem);
    justify-content: center;
    gap: clamp(0.875rem, 2vh, 1.5rem);
  }
  .sanctuary:not(.sanctuary--home) .arch--side { padding-inline: clamp(1.125rem, 1.9vw, 2.5rem); }
  .sanctuary.sanctuary--wide:not(.sanctuary--home) .arch--side { margin-inline: 0; padding-inline: 0; overflow: hidden; opacity: 0; visibility: hidden; }
  .sanctuary:not(.sanctuary--home) .arch--side .cross { width: clamp(3rem, 3.8vw, 4.75rem); height: clamp(3rem, 3.8vw, 4.75rem); margin: 0; }
  .sanctuary:not(.sanctuary--home) .side__title { font-size: clamp(1.625rem, 2vw, 2.375rem); line-height: 1.45; }
  .sanctuary:not(.sanctuary--home) .side__text { font-size: clamp(1.25rem, 1.3vw, 1.5rem); line-height: 1.75; }
  .sanctuary:not(.sanctuary--home) .side__note { margin: 0; font-size: clamp(1.25rem, 1.35vw, 1.5625rem); }
  .sanctuary:not(.sanctuary--home) .arch__inner--side .button { width: 100%; max-width: 20rem; min-height: 3.5rem; margin: 0; font-size: 1.375rem; }
  .sanctuary:not(.sanctuary--home) .arch--side .text-link { font-size: clamp(1.1875rem, 1.25vw, 1.4375rem); }
  .saint--large { width: clamp(9.5rem, 13vw, 15rem); margin: 0; }
  .footer a { min-height: 1.75rem; }
}

/* Short laptop screens: the same composition with the air let out, so the home page needs no scrolling */
@media (min-width: 68.0625rem) and (max-height: 40rem) {
  .masthead__jar { height: 9.5vh; }
  .frieze { height: 1.25rem; background-size: 53px 20px; }
  .sanctuary { padding-block-start: 0.5rem; }
  .arch { margin-block-start: 0.75rem; }
  .arch--center { margin-block-start: 0; padding-block-start: 2rem; }
  .arch--menu { padding-block-start: 1.125rem; }
  .arch--side { padding-block-start: 1.25rem; }
  .logo-frame { width: min(100%, 36vh); }
  .arch__inner--side .ruled li { line-height: 1.6; }
}

/* Phones and small tablets are a booklet: no pillars, just the page, ruled lines and the frieze */
@media (max-width: 68rem) {
  body { background: var(--stone); }
  body.sheet-open { overflow: hidden; }

  /* The bar that stays: jar, name, candle, menu */
  .masthead {
    position: sticky;
    inset-block-start: 0;
    z-index: var(--z-sheet);
    display: flex;
    align-items: center;
    height: var(--bar);
    padding: env(safe-area-inset-top) 5.875rem 0 0.75rem;
    padding-inline: 0.75rem 5.875rem;
    background: var(--bar-bg);
  }
  .masthead__inner { display: flex; align-items: center; justify-content: flex-start; gap: 0.5rem; min-width: 0; }
  .masthead__ar { min-width: 0; text-align: start; }
  .masthead__jar { order: -1; height: 3.125rem; }
  .masthead__en, .masthead__small { display: none; }
  .masthead__name { font-size: clamp(0.9375rem, 4.5vw, 1.375rem); line-height: 1.3; white-space: nowrap; }
  .masthead > .night-toggle { inset-inline-end: 3rem; width: 2.5rem; }
  .bar-menu {
    position: absolute;
    inset-block-end: 0.5625rem;
    inset-inline-end: 0.5rem;
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    color: var(--gold-text);
  }
  .bar-menu span { position: relative; display: block; width: 1.5rem; height: 1rem; }
  .bar-menu span::before, .bar-menu span::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    height: 1.5px;
    background: currentColor;
    transition: transform 220ms var(--ease), inset-block-start 220ms var(--ease);
  }
  .bar-menu span::before { inset-block-start: 0; }
  .bar-menu span::after { inset-block-start: calc(100% - 1.5px); }
  .bar-menu[aria-expanded="true"] span::before { inset-block-start: calc(50% - 0.75px); transform: rotate(45deg); }
  .bar-menu[aria-expanded="true"] span::after { inset-block-start: calc(50% - 0.75px); transform: rotate(-45deg); }
  .frieze {
    position: sticky;
    inset-block-start: var(--bar);
    z-index: var(--z-sheet);
    height: 1.25rem;
    background: var(--bar-bg) var(--frieze-art) center / 53px 20px repeat-x;
    box-shadow: none;
  }

  /* Every pillar comes off; only the words remain on the page */
  .sanctuary { display: block; padding: 0; }
  .arch { display: block; margin: 0; padding: 0; border-radius: 0; background: none; }
  .arch::before, .rim, .glow { display: none; }
  .arch--center { max-width: 40rem; margin-inline: auto; padding: 2rem 1.625rem 2.25rem; }
  .sanctuary--home .arch--center { padding-block: 2rem; }
  .sanctuary--home .arch--center .arch__inner { margin-block: 0; }
  .arch--side { max-width: 40rem; margin-inline: auto; padding: 0 1.625rem 2.25rem; }
  .sanctuary--wide .arch--side { display: none; }
  .arch--side .arch__sticky { position: static; }

  /* A run of frieze parts the page, like the turn of a leaf */
  .arch--side::before {
    content: "";
    position: static;
    display: block;
    height: 1.25rem;
    margin-inline: calc(50% - 50vw);
    margin-block-end: 1.75rem;
    border-block: 1px solid var(--gold-line);
    background: var(--frieze-art) center / 53px 20px repeat-x;
    box-shadow: none;
  }
  .sill { height: 1.25rem; background: var(--frieze-art) center / 53px 20px repeat-x; box-shadow: none; }

  .logo-frame { width: min(100%, 16rem, 34svh); }
  .logo-frame + .label { margin-block-start: 0.75rem; }
  .statement { font-size: clamp(1.75rem, 7.8vw, 2.75rem); }
  .actions { flex-direction: column; gap: 0.5rem; margin-block-start: 0.875rem; }
  .page-title { font-size: clamp(2rem, 8.4vw, 3rem); }
  .page-lead { font-size: clamp(1.375rem, 5.8vw, 1.875rem); }
  .page-head { margin-block-end: 1.5rem; }
  .button--large { width: 100%; max-width: 22rem; }
  .prose, .step__body { font-size: 1.1875rem; line-height: 1.9; }
  .chapter { padding-block: 1.5rem; }

  .arch__inner--side { gap: 0.875rem; text-align: start; }
  .cross { display: none; }
  .side__title { font-size: 1.4375rem; text-align: center; }
  .side__text, .side__note { text-align: center; }
  .side__text, .arch__inner--side .ruled { font-size: 1.1875rem; }
  .side__note { margin: 0; }
  .arch__inner--side .button { margin: 0; width: 100%; max-width: 22rem; }
  .saint--large { width: 9rem; margin: 0; }
  .next { display: none; }

  /* Widgets lay down flat: no slabs, only rules between things */
  .step__body, .blessing, .contact, .score, .side-card, .fact, .fact:not(.fact--wide), .session, .session.is-next, .tool, .stat, .audience li {
    border-radius: 0;
    background: none;
    box-shadow: none;
  }
  .step__body::before, .step__body::after, .blessing::before, .blessing::after, .contact::before, .contact::after, .score::before, .score::after, .side-card::before, .side-card::after, .fact::before, .fact::after, .session::before, .tool::before, .stat::before, .audience li::before, .step::before, .step::after { display: none; }

  .steps { gap: 0; }
  .step { grid-template-columns: 2rem minmax(0, 1fr); gap: 0.75rem; padding-block: 1rem; }
  .step + .step { border-block-start: 1px solid var(--panel-ring); }
  .step:first-child { padding-block-start: 0; }
  .step__n { position: static; width: 2rem; height: auto; padding: 0; border-radius: 0; background: none; box-shadow: none; font-size: 1.75rem; line-height: 1.5; }
  .step__body { padding: 0; }

  .sessions { display: block; }
  .session {
    display: grid;
    grid-template-columns: 4rem minmax(0, 1fr);
    grid-template-areas: "day topic" "week people";
    column-gap: 1rem;
    align-items: center;
    padding: 0.75rem 0;
    text-align: start;
  }
  .session + .session { border-block-start: 1px solid var(--panel-ring); }
  .session__day { grid-area: day; font-size: 2.125rem; line-height: 1.1; text-align: center; }
  .session__weekday { grid-area: week; font-size: 0.875rem; text-align: center; }
  .session__topic { grid-area: topic; margin: 0; }
  .session:not(:has(.session__people)) .session__topic { grid-row: 1 / span 2; }
  .session__people { grid-area: people; margin: 0; padding: 0; border: 0; }
  .session-flag { inset-block-start: 0.5rem; inset-inline: auto 0; translate: 0; }
  .course__head { margin-block-end: 0.25rem; }

  .audience, .facts { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .audience li + li { border-block-start: 1px solid var(--panel-ring); }
  .audience li { padding: 0.75rem 0; }
  .fact { padding: 0.5rem; }
  .fact--wide { padding: 1rem 0; border-block-start: 1px solid var(--panel-ring); }
  .side-card { padding: 1rem 0; }
  .side-card + .side-card { border-block-start: 1px solid var(--panel-ring); }
  .tools { width: 100%; gap: 0; margin-inline: auto; }
  .tool { padding: 0.75rem 0.5rem; }
  .blessing { padding: 1.25rem 0; border-block: 1px solid var(--panel-ring); }
  .stat { width: 100%; padding: 0.25rem 0 0.75rem; }
  .appraisal__cols, .appraisal__col { gap: 0; }
  .score { padding: 1.25rem 0; }
  .score + .score, .appraisal__col + .appraisal__col { border-block-start: 1px solid var(--panel-ring); }
  .contact { width: 100%; padding: 1.25rem 0 0; border-block-start: 1px solid var(--panel-ring); }
  .stone { width: min(100%, 10.5rem); }

  /* The menu is a whole page under the bar */
  .arch--menu {
    position: fixed;
    inset: calc(var(--bar) + 1.25rem) 0 0;
    z-index: calc(var(--z-sheet) - 1);
    max-width: none;
    background: var(--bar-bg);
    opacity: 0;
    translate: 0 -0.5rem;
    visibility: hidden;
    transition: opacity 180ms ease-out, translate 180ms ease-out, visibility 0s linear 180ms;
  }
  .arch--menu:focus { outline: none; }
  .arch--menu.is-open {
    opacity: 1;
    translate: 0;
    visibility: visible;
    transition: opacity 220ms ease-out, translate 220ms var(--ease), visibility 0s;
  }
  .arch--menu .arch__sticky {
    position: static;
    height: 100%;
    padding: 0.25rem 1.625rem calc(0.5rem + env(safe-area-inset-bottom));
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .arch--menu .saint { display: none; }
  .menu { display: flex; flex-direction: column; min-height: 100%; max-width: 32rem; margin-inline: auto; }
  .menu li { flex: 1 0 auto; display: flex; }
  .menu li + li { border-block-start: 1px solid var(--panel-ring); }
  .menu a { flex: 1; min-height: 2.875rem; padding-block: 0; font-size: 1.1875rem; }
  .menu br { display: none; }

  .footer { flex-direction: column; gap: 0; padding-block: 1rem 1.25rem; text-align: center; }
  .footer > i { display: none; }
  .footer__ar, .footer__en { display: block; margin-block-start: 0.5rem; font-size: 0.8125rem; line-height: 1.6; text-wrap: balance; }
  .footer__en + * { margin: 0; }
}

/* Night: black stone and bone. Neutral darkness with no colour cast, flat from edge to edge, the pillars a step deeper than the wall.
   Candle gold is kept for a few words and the fine lines, so it reads as the only warm thing in the room. */
[data-theme="night"] {
  color-scheme: dark;
  --stone: #121213;
  --stone-lit: #121213;
  --stone-shade: #0c0c0d;
  --niche: #0b0b0c;
  --niche-lit: #0b0b0c;

  --ink: #efeae0;
  --ink-body: #cfcac0;
  --ink-soft: #96918a;

  --gold-low: #7a6a4c;
  --gold-mid: #cdae72;
  --gold-high: #e9d6a8;
  --gold-text: #dcc08a;
  --gold-line: #3d3a34;
  --rim-flat: #8a7a5a;

  --plate-top: #18181a;
  --plate-bottom: #18181a;
  --panel-ring: rgb(205 174 114 / 0.18);
  --bar-track: rgb(239 234 224 / 0.08);
  --tone-1: #dcc08a;
  --tone-2: #a98f5f;
  --tone-3: #6f6248;
  --tone-4: #45403a;

  --button-bg: #1c1c1e;
  --button-lit: #262628;
  --button-ink: #efe2c4;
  --button-lift: inset 0 1px 0 rgb(255 255 255 / 0.07), 0 2px 0 #000, 0 5px 10px -3px rgb(0 0 0 / 0.8);
  --button-lift-high: inset 0 1px 0 rgb(255 255 255 / 0.1), 0 2px 0 #000, 0 10px 16px -6px rgb(0 0 0 / 0.9);
  --frieze-frame: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='34'%3E%3Cg transform='translate(8)'%3E%3Cpath d='M0 .4h18M0 6.1h18' stroke='%23c7a86a' stroke-width='.8' fill='none'/%3E%3Cpath d='M0 3.25C3.200 1.200 5.800 1.200 9 3.250S14.800 5.300 18 3.250M0 3.250C3.200 5.300 5.800 5.300 9 3.250S14.800 1.200 18 3.250' stroke='%23c7a86a' stroke-width='.6' fill='none'/%3E%3C/g%3E%3Cg transform='translate(26 34) rotate(180)'%3E%3Cpath d='M0 .4h18M0 6.1h18' stroke='%23c7a86a' stroke-width='.8' fill='none'/%3E%3Cpath d='M0 3.25C3.200 1.200 5.800 1.200 9 3.250S14.800 5.300 18 3.250M0 3.250C3.200 5.300 5.800 5.300 9 3.250S14.800 1.200 18 3.250' stroke='%23c7a86a' stroke-width='.6' fill='none'/%3E%3C/g%3E%3Cg transform='translate(0 26) rotate(-90)'%3E%3Cpath d='M0 .4h18M0 6.1h18' stroke='%23c7a86a' stroke-width='.8' fill='none'/%3E%3Cpath d='M0 3.25C3.200 1.200 5.800 1.200 9 3.250S14.800 5.300 18 3.250M0 3.250C3.200 5.300 5.800 5.300 9 3.250S14.800 1.200 18 3.250' stroke='%23c7a86a' stroke-width='.6' fill='none'/%3E%3C/g%3E%3Cg transform='translate(34 8) rotate(90)'%3E%3Cpath d='M0 .4h18M0 6.1h18' stroke='%23c7a86a' stroke-width='.8' fill='none'/%3E%3Cpath d='M0 3.25C3.200 1.200 5.800 1.200 9 3.250S14.800 5.300 18 3.250M0 3.250C3.200 5.300 5.800 5.300 9 3.250S14.800 1.200 18 3.250' stroke='%23c7a86a' stroke-width='.6' fill='none'/%3E%3C/g%3E%3Cpath d='M0 .4h8M.4 0v8M6.100 6.100h1.900M6.100 6.100v1.900' stroke='%23c7a86a' stroke-width='.8' fill='none'/%3E%3Cpath d='M3.250 1.700 4.800 3.250 3.250 4.800 1.700 3.250Z' fill='%23c7a86a'/%3E%3Cg transform='translate(34) scale(-1 1)'%3E%3Cpath d='M0 .4h8M.4 0v8M6.100 6.100h1.900M6.100 6.100v1.900' stroke='%23c7a86a' stroke-width='.8' fill='none'/%3E%3Cpath d='M3.250 1.700 4.800 3.250 3.250 4.800 1.700 3.250Z' fill='%23c7a86a'/%3E%3C/g%3E%3Cg transform='translate(0 34) scale(1 -1)'%3E%3Cpath d='M0 .4h8M.4 0v8M6.100 6.100h1.900M6.100 6.100v1.900' stroke='%23c7a86a' stroke-width='.8' fill='none'/%3E%3Cpath d='M3.250 1.700 4.800 3.250 3.250 4.800 1.700 3.250Z' fill='%23c7a86a'/%3E%3C/g%3E%3Cg transform='translate(34 34) scale(-1 -1)'%3E%3Cpath d='M0 .4h8M.4 0v8M6.100 6.100h1.900M6.100 6.100v1.900' stroke='%23c7a86a' stroke-width='.8' fill='none'/%3E%3Cpath d='M3.250 1.700 4.800 3.250 3.250 4.800 1.700 3.250Z' fill='%23c7a86a'/%3E%3C/g%3E%3C/svg%3E");
  --bar-bg: #121213;

  --jar-line: #a8543a;
  --jar-ground: #e9dfcb;

  --lift: inset 0 1px 0 rgb(255 255 255 / 0.05), 0 1px 0 rgb(0 0 0 / 0.6);
  --lift-high: inset 0 1px 0 rgb(255 255 255 / 0.08), 0 1px 0 rgb(0 0 0 / 0.6);

  --shadow-warm: 0 0 0;
  --vault: none;
}
[data-theme="night"] body { background: var(--stone); }
[data-theme="night"] body::before { opacity: 0.05; }

[data-theme="night"] .masthead__name { background: none; color: var(--ink); }
[data-theme="night"] .masthead__jar svg { filter: brightness(0.82); }
[data-theme="night"] .frieze { box-shadow: none; opacity: 0.45; }
[data-theme="night"] .arch, [data-theme="night"] .arch--center { background: var(--niche); }

/* The rim is a plain line; only the stretch nearest the mouse catches any light */
[data-theme="night"] .rim::before {
  background: radial-gradient(9rem circle at var(--light-x, 50%) var(--light-y, 0%), rgb(233 214 168 / 0.5) 0, rgb(233 214 168 / 0.4) 22%, rgb(233 214 168 / 0.24) 44%, rgb(233 214 168 / 0.1) 62%, rgb(233 214 168 / 0.03) 80%, transparent 100%);
  opacity: 0;
}
[data-theme="night"] .sanctuary:not(.is-leaving, .is-morphing) .arch.is-lit .rim::before { opacity: 1; }

/* The logo's lettering is dark, so by night it becomes old gilt */
[data-theme="night"] .logo { filter: url("#gild") brightness(0.92); }
[data-theme="night"] .logo-saint {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  filter: brightness(0.94) saturate(0.9);
  -webkit-mask-image: radial-gradient(15.5% 36% at 42.3% 47%, #000 88%, transparent 100%);
  mask-image: radial-gradient(15.5% 36% at 42.3% 47%, #000 88%, transparent 100%);
}
[data-theme="night"] .saint { background: var(--gold-low); box-shadow: none; }
[data-theme="night"] .saint img { filter: brightness(0.85) saturate(0.9); }
[data-theme="night"] .cross { filter: none; }
[data-theme="night"] .cross path { fill: var(--gold-mid); }
[data-theme="night"] .sill { background: var(--stone-shade); box-shadow: none; }
[data-theme="night"] .night-toggle { color: var(--gold-text); }
[data-theme="night"] .tip { background: #26262a; color: var(--ink); box-shadow: 0 0.25rem 0.5rem rgb(0 0 0 / 0.5); }
@media (max-width: 68rem) {
  [data-theme="night"] body { background: var(--stone); }
  [data-theme="night"] .arch, [data-theme="night"] .arch--center { background: none; }
  [data-theme="night"] .arch--menu { background: var(--bar-bg); }
  [data-theme="night"] .frieze { opacity: 1; }
}

/* Printing the guide: plain, black on white, no ink wasted on stone */
@media print {
  body { display: block; background: #fff; color: #000; }
  body::before, .frieze, .sill, .tip, .bar-menu, .glow, .arch--menu, .arch--side, .rim, .masthead__jar, .night-toggle, .footer, .scroll-thumb { display: none !important; }
  .sanctuary { display: block; padding: 0; }
  .arch { display: block; margin: 0; padding: 0; border-radius: 0; background: none; }
  .arch::before { display: none; }
  .masthead__name { background: none; color: #000; }
  .masthead__small, .prose, .step, .step__body, .page-title, .label, .step__n, .prose h2 { color: #000; }
  .step::before, .step::after { display: none !important; }
  .step__body, .score, .session, .blessing, .stat { box-shadow: none; }
  .step, .course, .session, .score, .chapter, .stat { break-inside: avoid; animation: none !important; opacity: 1 !important; transform: none !important; }
  .score__bar i { animation: none !important; transform: none !important; }
}

/* Motion. Everything lives here so reduced-motion turns it all off in one place. */
@media (prefers-reduced-motion: no-preference) {
  /* The gold grows down from the crown, once per visit */
  .first-visit .rim { animation: draw-rim 1800ms var(--ease-draw) both; }
  .first-visit .arch--menu .rim, .first-visit .arch--side .rim { animation-delay: 240ms; }
  @keyframes draw-rim {
    from { --reveal: 0deg; }
    to { --reveal: 100deg; }
  }

  [data-theme="night"] .candle__flame b { animation: flame 3.1s ease-in-out infinite; }

  @keyframes flame {
    0%, 100% { transform: scale(1, 1) skewX(0deg); opacity: 1; }
    17% { transform: scale(0.94, 1.07) skewX(-2deg); opacity: 0.94; }
    41% { transform: scale(1.03, 0.95) skewX(1.5deg); opacity: 1; }
    63% { transform: scale(0.97, 1.05) skewX(-1deg); opacity: 0.9; }
    82% { transform: scale(1.02, 0.97) skewX(2deg); opacity: 0.98; }
  }
  /* Day to night is a slow dimming of the whole room */
  .theme-change * { view-transition-name: none !important; }
  .theme-change::view-transition-old(root), .theme-change::view-transition-new(root) {
    animation-duration: 1100ms;
    animation-timing-function: ease-in-out;
  }
  .theme-change::view-transition-old(root) { animation-name: room-out; }
  .theme-change::view-transition-new(root) { animation-name: room-in; }
  @keyframes room-out { to { opacity: 0; } }
  @keyframes room-in { from { opacity: 0; } }

  /* Desktop: the words fade, the empty stone reshapes, the new words fade in. Nothing moves unless a page is changing. */
  @media (min-width: 68.0625rem) {
    .sanctuary.is-morphing { transition: grid-template-columns 760ms var(--ease-arch), height 760ms var(--ease-arch); }
    .is-morphing .arch, .is-morphing .rim::after { transition: border-radius 760ms var(--ease-arch); }
    .is-morphing .arch--side { transition: border-radius 760ms var(--ease-arch), opacity 420ms ease 240ms, visibility 0s; }
    .sanctuary--wide.is-morphing .arch--side { transition: border-radius 760ms var(--ease-arch), opacity 300ms ease, visibility 0s linear 300ms; }
    .is-morphing .arch__inner { contain: layout style; }
    .is-hidden .arch__inner, .is-far.is-hidden .arch--menu .arch__sticky { opacity: 0; }
    .is-far.is-leaving .arch--menu .arch__sticky { opacity: 0; transition: opacity 170ms ease-out; }
    .is-far.is-entering .arch--menu .arch__sticky { animation: page-rest 420ms ease-out var(--enter-delay, 20ms) both; }
    .is-leaving .arch__inner { opacity: 0; transition: opacity 170ms ease-out; }
    .is-entering .arch__inner { animation: page-rest 420ms ease-out var(--enter-delay, 20ms) both; }
    .is-entering .arch--side .arch__inner { animation-delay: calc(var(--enter-delay, 20ms) + 60ms); }
    @keyframes page-rest { from { opacity: 0; } }
  }

  /* Phones: the browser's own page change, the words crossing over while the bar stays put */
  @media (max-width: 68rem) {
    @view-transition { navigation: auto; }

    .arch--center .arch__inner { view-transition-name: page-main; }
    .arch--side .arch__inner { view-transition-name: page-side; }

    ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
    ::view-transition-old(page-main), ::view-transition-old(page-side) { animation: page-out 160ms ease-in both; }
    ::view-transition-new(page-main), ::view-transition-new(page-side) { animation: page-in 260ms var(--ease) 100ms both; }
    @keyframes page-out { to { opacity: 0; } }
    @keyframes page-in { from { opacity: 0; } }
  }

  /* The rail fills as you read down */
  @supports (animation-timeline: view()) {
    .steps:not(.steps--plain) > .step:not(:last-child)::after {
      animation: rail-fill linear both;
      animation-timeline: scroll(root block);
      animation-range: calc(var(--i) / var(--n) * 100%) calc((var(--i) + 1) / var(--n) * 100%);
    }
    @keyframes rail-fill { from { transform: scaleY(0); } }

    /* Sections settle into place, bars draw in from the right */
    .chapter, .step__body, .score, .session, .stat { animation: settle linear both; animation-timeline: view(); animation-range: entry 0% entry 42%; }
    @keyframes settle { from { opacity: 0; transform: translateY(0.875rem); } }
    .score__bar i { animation: bar-grow linear both; animation-timeline: view(); animation-range: entry 30% entry 100%; }
    @keyframes bar-grow { from { transform: scaleX(0); } }
  }
}

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