/* aramaic bible academy — design variant 6, the hero alternative of "Ember
   Tablet" (variant 4)

   Basalt and molten gold, dark and monumental. One accent, gold, for the
   headline, the labels and the framed buttons. Fine umber lines divide the
   bands. The hero is one stage under the header: the photograph of a split
   basalt shard with a column of Serto, and in front of it the gold leaf
   lettering, "Still" left of the column and "spoken." over the seam. Everything
   on the stage is sized in cqw (the stage is a size container), which keeps the
   lettering and the stone locked together at every width. Below 60rem the two
   words move above the stone, side by side in one line.

   Sliders: VARIANZ 7, MOTION 1, DICHTE 3. Only hover and focus move.

   Images live in assets/img (webp and jpg). No external request, no inline
   styles: the csp is default-src 'none'. Fonts are the shared ones under
   web/assets/fonts/. */


/* ---------- self hosted fonts (SIL OFL, licences sit next to the files) ---------- */

@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/cormorant-garamond-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/cormorant-garamond-latin-400-italic.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/cormorant-garamond-latin-500-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}
/* latin-ext, for the dotted letters of the transliteration. h and s with a
   dot below appear in six prayer lines and are missing from the latin subset,
   without this they fall back to a system face */
@font-face {
  font-family: "Cormorant Garamond";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/cormorant-garamond-latin-ext-400-italic.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/cormorant-garamond-latin-ext-500-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("../fonts/manrope-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Noto Sans Syriac Western";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/noto-sans-syriac-western-syriac-400-normal.woff2") format("woff2");
  unicode-range: U+0303-0304, U+0307-0308, U+030A, U+0320, U+0323-0325, U+032D-032E, U+0330-0331, U+060C, U+061B-061C, U+061F, U+0640, U+064E-0652, U+0670, U+0700-074A, U+074D-074F, U+0860-086A, U+1DF8, U+1DFA, U+200C-200F, U+25CC, U+2670-2671;
}
/* the headline face, eleven glyphs rebuilt from the sketch of "Still spoken."
   (internal asset, licence note next to the file). font-display block on
   purpose: the file is a few kilobytes, and a swap would first set the
   giant headline in Cormorant and then jump to the gold lettering */
@font-face {
  font-family: "ABA Still Spoken";
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("../fonts/aba-still-spoken.woff2") format("woff2");
}


/* ---------- tokens, the single place colour, type, space and curve live ---------- */

:root {
  /* the ground. basalt, never pure black */
  --basalt: #0E0C08;
  --basalt-deep: #0A0906;
  --umbra: #140F09;
  --umbra-lift: #271A10;

  /* text on the ground. contrast on basalt in brackets */
  --text: #E9DFD0;           /* 14.8 */
  --text-soft: #B8A78E;      /*  8.3 */
  --text-dim: #A89782;       /*  6.9, smallest notes only */

  /* the one accent, gold. gold for text and frames, the gradient for the
     headline only (large type) */
  --gold: #D7A05D;           /*  8.4 */
  --gold-light: #E8B87A;     /* 10.8 */
  --gold-deep: #C08B49;      /*  6.5 */
  --gold-gradient: linear-gradient(180deg, #F2D09A 0%, #D7A05D 46%, #B8803F 100%);

  /* lines. warm brown, hairlines only, never text. frames of controls take
     the lighter stop so they keep 3:1 against the ground */
  --brown: #6D543B;
  --brown-up: #8F7152;       /*  4.3 */
  --line: rgba(109, 84, 59, 0.6);
  --line-soft: rgba(109, 84, 59, 0.38);
  --line-gold: rgba(215, 160, 93, 0.45);

  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --title: "ABA Still Spoken", "Cormorant Garamond", Georgia, serif;
  --sans: "Manrope", "Segoe UI", system-ui, sans-serif;
  --serto: "Noto Sans Syriac Western", "Noto Sans Syriac", serif;

  /* 8 px grid */
  --s1: 0.5rem;
  --s2: 1rem;
  --s3: 1.5rem;
  --s4: 2rem;
  --s6: 3rem;
  --s8: 4rem;
  --s12: 6rem;
  --s16: 8rem;

  --measure: 60ch;
  --wrap: 74rem;
  --gutter: clamp(1.25rem, 5vw, 4rem);
  --radius: 0;

  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}


/* ---------- base ---------- */

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

html {
  background: var(--basalt-deep);
  color: var(--text);
  font-family: var(--sans);
  font-size: 100%;
  line-height: 1.7;
  color-scheme: dark;
  -webkit-text-size-adjust: 100%;
}

[hidden] { display: none !important; }

body {
  margin: 0;
  min-height: 100dvh;
  background-color: var(--basalt);
  overflow-x: hidden;
  overflow-wrap: break-word;
}

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.08;
  margin: 0;
  letter-spacing: -0.005em;
  color: var(--text);
}

p { margin: 0; max-width: var(--measure); }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }
picture { display: block; }

:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 4px; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip {
  position: absolute;
  left: var(--s2);
  top: -4rem;
  padding: var(--s1) var(--s2);
  background: var(--gold);
  color: var(--basalt);
  font-weight: 600;
  z-index: 30;
}
.skip:focus { top: var(--s2); }

.wrap {
  width: min(100% - 2 * var(--gutter), var(--wrap));
  margin-inline: auto;
}

/* the aramaic line. right to left, serto, the most beautiful thing on the page */
.serto {
  font-family: var(--serto);
  direction: rtl;
  unicode-bidi: isolate;
  font-weight: 400;
  line-height: 1.25;
}

/* tracked small caps label, the gold of the page */
.label {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--gold);
  max-width: none;
}

/* gold type of the page heads. a real gradient on large type only, with the flat gold as the
   fallback and as the answer to forced colours */
.pagehead h1 { color: var(--gold); }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .pagehead h1 {
    background-image: var(--gold-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
  }
}
@media (forced-colors: active) {
  .pagehead h1 { background: none; -webkit-text-fill-color: currentColor; color: CanvasText; }
}

/* the honest marker. a line no person has vouched for yet says so, and so
   does a paragraph the teachers still have to write */
.pending {
  display: inline-block;
  font-family: var(--sans);
  font-style: normal;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  border: 1px solid var(--line-gold);
  padding: 0.2rem 0.5rem;
  white-space: nowrap;
  vertical-align: middle;
}

.pending-block {
  max-width: none;
  margin-bottom: var(--s4);
  color: var(--text-soft);
  font-size: 0.9rem;
}
.pending-block .pending { margin-right: var(--s2); }

/* a short gold line where a block ends, as in the reference. it carries
   nothing, so it stays one hairline. not rendered since 2026-11-02, its only
   user was the closing band of story.php */
.rule { width: 3rem; height: 1px; background: var(--gold); }
.rule .diamond { display: none; }

.note { color: var(--text-soft); margin-top: var(--s1); }


/* ---------- buttons, thin gold frames in tracked capitals ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  min-height: 3rem;
  padding: 0 1.5rem;
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  border: 1px solid var(--brown-up);
  color: var(--text);
  transition: background-color 200ms var(--ease), color 200ms var(--ease), border-color 200ms var(--ease);
}
.btn::after {
  content: "\2192";
  content: "\2192" / "";
  font-size: 1rem;
  letter-spacing: 0;
  color: var(--gold);
  transition: color 200ms var(--ease);
}
.btn.primary { border-color: var(--gold); color: var(--gold); }
.btn:hover { background: var(--gold); border-color: var(--gold); color: var(--basalt); }
.btn:hover::after { color: var(--basalt); }

.link-arrow {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  padding-block: 0.7rem;
  border-bottom: 1px solid var(--line-gold);
}
.link-arrow:hover { border-bottom-color: var(--gold); }


/* ---------- header, transparent over the page band, a plate of its own on the home page ---------- */

.site-head {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 10;
  padding-block: var(--s3);
}
/* a soft plate of basalt behind the row, so the links keep their contrast
   where the bright edge of the tablet reaches up into the header */
.site-head::before {
  content: "";
  position: absolute;
  inset: 0 0 -2.5rem 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(10, 9, 6, 0.92) 0%, rgba(10, 9, 6, 0.7) 55%, rgba(10, 9, 6, 0) 100%);
  pointer-events: none;
}
/* home: the hero stage starts below the header, so the stone can never reach
   into it or be covered by it */
.page-home .site-head {
  position: relative;
  background: var(--basalt-deep);
  border-bottom: 1px solid var(--line-soft);
}
.page-home .site-head::before { display: none; }
.site-head .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
}

.brand { display: flex; align-items: center; gap: var(--s2); width: max-content; }
/* the logo as in design_handoff_aramaic_logo: the signet stands on the
   baseline of ABA (an image has its baseline at its bottom edge), ABA in
   ivory, the rule beside the name in gold. signet height = ABA cap height / 0.78 */
.brand .mark { display: flex; align-items: baseline; gap: 0.6rem; }
.brand .signet { display: block; width: auto; height: 1.85rem; }
.brand .mono {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 2.3rem;
  letter-spacing: 0.02em;
  line-height: 1;
  color: var(--text);
}
/* the three words of the name stack on three lines beside a hairline */
.brand .name {
  width: min-content;
  padding-left: var(--s2);
  border-left: 1px solid var(--gold);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.26em;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--text-soft);
}
.brand .tag { display: none; }

/* the row of pages, from 72rem. below that the drop down takes over */
.nav-row { display: none; }
.site-nav ul { list-style: none; margin: 0; padding: 0; }
.nav-row.site-nav { margin-left: auto; }
.nav-row.site-nav ul { display: flex; align-items: center; gap: var(--s4); }
.nav-row.site-nav a {
  display: block;
  padding-block: 0.9rem;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--text-soft);
  border-bottom: 1px solid transparent;
  transition: color 200ms var(--ease), border-color 200ms var(--ease);
}
.nav-row.site-nav a:hover { color: var(--text); }
.nav-row.site-nav a[aria-current="page"] { color: var(--gold); border-bottom-color: var(--gold); }
/* coaching is the one thing to book, so it is the framed one, as Enroll is
   in the reference */
.nav-row.site-nav .nav-coaching a {
  padding: 0.7rem 1.2rem;
  border: 1px solid var(--gold);
  color: var(--gold);
}
.nav-row.site-nav .nav-coaching a:hover { background: var(--gold); color: var(--basalt); }
.nav-row.site-nav .nav-coaching a[aria-current="page"] { background: rgba(215, 160, 93, 0.14); }

.lang { display: flex; gap: var(--s1); }
.lang a {
  display: inline-block;
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding: 0.7rem 0.5rem;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-align: center;
  color: var(--text-soft);
  border-bottom: 1px solid transparent;
  transition: color 200ms var(--ease);
}
.lang a:hover { color: var(--text); }
.lang a[aria-current="true"] { color: var(--gold); border-bottom-color: var(--gold); }
.nav-row.lang { display: none; gap: 0; margin-left: calc(var(--s2) * -1); }

/* the drop down. a <details>, so it opens and closes without any script and
   the keyboard reaches it */
.menu { position: relative; }
.menu summary {
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  min-height: 2.75rem;
  padding: 0 var(--s2) 0 var(--s3);
  border: 1px solid var(--brown-up);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--text);
  background: rgba(10, 9, 6, 0.55);
  cursor: pointer;
  transition: border-color 200ms var(--ease), background-color 200ms var(--ease);
}
.menu summary::-webkit-details-marker { display: none; }
.menu summary:hover, .menu[open] summary { border-color: var(--gold); background: var(--umbra-lift); }
.menu-glyph { width: 1.25rem; height: 1.25rem; color: var(--gold); }

.menu-panel {
  position: absolute;
  right: 0;
  top: calc(100% + var(--s1));
  min-width: 16rem;
  padding: var(--s1) 0;
  background: var(--umbra);
  border: 1px solid var(--brown-up);
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.6);
}
.menu-panel .site-nav a {
  display: block;
  padding: 0.7rem var(--s3);
  font-family: var(--serif);
  font-size: 1.5rem;
  line-height: 1.2;
  color: var(--text);
  transition: color 200ms var(--ease), background-color 200ms var(--ease);
}
.menu-panel .site-nav a:hover { background: var(--umbra-lift); }
.menu-panel .site-nav a[aria-current="page"] { color: var(--gold); }
.menu-panel .lang { margin: var(--s1) var(--s2) 0; padding-top: var(--s1); border-top: 1px solid var(--line); }

@media (min-width: 72rem) {
  .nav-row, .nav-row.lang { display: flex; }
  .menu { display: none; }
}


/* ---------- the aramaic figure ---------- */

.aramaic { margin: 0; }
.aramaic .translit {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2);
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.25rem;
  line-height: 1.4;
  color: var(--text-soft);
}


/* ---------- hero, the stage ---------- */

/* the photograph is 2400 x 1357. the stone sits at 38.7 to 62.3 percent of
   the width and 13.5 to 89.1 percent of the height, the column of Serto at
   43.4 to 50.6 by 28.1 to 70.8, the seam and the right half from 51.5 on.
   every figure below hangs on those */

.hero { background: var(--basalt-deep); }

.hero-stage {
  position: relative;
  container-type: inline-size;
  aspect-ratio: 2400 / 1357;
  max-width: 2400px;
  margin-inline: auto;
  overflow: hidden;
}

.hero-art { position: absolute; inset: 0; }
.hero-art picture, .hero-art img { width: 100%; height: 100%; }
.hero-art img { object-fit: cover; object-position: 50.5% 50%; }

/* let the bottom run into the next band and darken the lower left and right
   so the foot lines read. the stone stays clear of both */
.hero-art::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(0deg, var(--basalt) 0%, rgba(14, 12, 8, 0.7) 5%, rgba(14, 12, 8, 0) 15%),
    linear-gradient(90deg, rgba(10, 9, 6, 0.5) 0%, rgba(10, 9, 6, 0) 36%),
    linear-gradient(270deg, rgba(10, 9, 6, 0.4) 0%, rgba(10, 9, 6, 0) 34%);
  pointer-events: none;
}

/* the headline, live text in "ABA Still Spoken" filled with gold leaf through
   background-clip, in front of the stone. 12.33 cqw makes "spoken." 38.5 cqw
   wide. "Still" ends at 42.5 cqw, in front of the left edge of the shard and
   clear of the column of Serto, "spoken." starts at 51.5 cqw, over the seam
   and the right half. one sheet of leaf runs across both words (51 cqw wide).
   the background only paints inside the box: ascenders above line-height 1
   and the negative side bearing of the S would stay unfilled, so the box gets
   padding and the same negative margin. a dark pool behind "spoken." keeps it
   readable where the seam glows */
.hero h1 {
  position: absolute;
  z-index: 2;
  inset: 0;
  margin: 0;
  max-width: none;
  pointer-events: none;
}
.hero h1 .w {
  position: absolute;
  top: 16.33cqw;
  font-family: var(--title);
  font-size: 12.33cqw;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
  white-space: nowrap;
  font-kerning: none;
  font-synthesis: none;
  color: transparent;
  background-image:
    linear-gradient(180deg, rgba(255, 236, 196, 0.30) 0%, rgba(255, 236, 196, 0) 40%, rgba(70, 30, 0, 0.42) 100%),
    image-set(url("../img/gold-1600.webp") type("image/webp"), url("../img/gold-1600.jpg") type("image/jpeg"));
  background-size: 100% 100%, 51cqw auto;
  background-repeat: no-repeat, repeat;
  -webkit-background-clip: text;
  background-clip: text;
  padding: 0.14em 0.1em;
  margin: -0.14em -0.1em;
}
.hero h1 .w1 { right: 57.5cqw; background-position: 0 0, calc(-21.27cqw + 0.1em) calc(-7.83cqw + 0.14em); }
.hero h1 .w2 { left: 51.5cqw; background-position: 0 0, calc(-51.5cqw + 0.1em) calc(-7.83cqw + 0.14em); }
.hero h1 .w2::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -10% -6%;
  background: radial-gradient(ellipse at center, rgba(10, 9, 6, 0.5) 0%, rgba(10, 9, 6, 0.26) 45%, rgba(10, 9, 6, 0) 72%);
  pointer-events: none;
}
/* no clip support or forced colours: plain gold text, never invisible */
@supports not ((background-clip: text) or (-webkit-background-clip: text)) {
  .hero h1 .w { color: var(--gold); background: none; }
}
@media (forced-colors: active) {
  .hero h1 .w { color: CanvasText; background: none; forced-color-adjust: none; }
}

.hero-foot {
  position: absolute;
  z-index: 4;
  inset: auto 0 5cqw 0;
}
.hero-foot .wrap {
  width: auto;
  margin-inline: 4cqw;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s4);
}
.hero-lead { display: grid; gap: var(--s3); max-width: 26cqw; }
.hero .lede {
  font-size: clamp(0.68rem, 0.95cqw, 0.8rem);
  font-weight: 500;
  letter-spacing: 0.16em;
  line-height: 1.95;
  text-transform: uppercase;
  color: var(--text);
  max-width: none;
}
.actions { display: flex; flex-wrap: wrap; gap: var(--s2); }

.hero-verse {
  margin: 0;
  display: grid;
  gap: var(--s1);
  max-width: 26cqw;
  padding-left: var(--s2);
  border-left: 1px solid var(--gold);
}
.hero-verse p {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1rem, 1.6cqw, 1.45rem);
  line-height: 1.3;
  color: var(--text);
}
.hero-verse cite {
  font-style: normal;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold);
}

/* a narrower stage has less height for the foot lines, so they tighten */
@container (max-width: 1180px) {
  .hero-foot { inset: auto 0 3.5cqw 0; }
  .hero-lead { gap: var(--s2); }
  .hero .lede { line-height: 1.7; letter-spacing: 0.12em; }
  .hero .btn { min-height: 2.75rem; padding: 0 1rem; gap: 0.6rem; font-size: 0.66rem; letter-spacing: 0.14em; }
}


/* ---------- why Aramaic, the wall bleeding off to the right ---------- */

.why {
  position: relative;
  padding-block: clamp(5rem, 10vw, 9rem);
  background: var(--basalt);
  border-top: 1px solid var(--line-soft);
  overflow: hidden;
}
.why-media { position: absolute; inset: 0 0 0 auto; width: 58%; }
.why-media picture, .why-media img { width: 100%; height: 100%; }
.why-media img { object-fit: cover; object-position: 40% center; }
.why-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, var(--basalt) 0%, rgba(14, 12, 8, 0) 22%),
    linear-gradient(180deg, var(--basalt) 0%, rgba(14, 12, 8, 0) 14%, rgba(14, 12, 8, 0) 86%, var(--basalt) 100%);
}
.why .wrap { position: relative; z-index: 1; }
.why-text { display: grid; gap: var(--s3); max-width: 28rem; }
.why h2 { font-size: clamp(2.2rem, 4vw, 3.4rem); }
.prose { max-width: var(--measure); }
.prose p + p { margin-top: var(--s3); }
.why-text .prose { color: var(--text); }
.why-mission { font-family: var(--serif); font-size: clamp(1.35rem, 2vw, 1.7rem); line-height: 1.3; color: var(--gold-light); }
.why-note { color: var(--text-soft); font-family: var(--serif); font-style: italic; font-size: 1.2rem; line-height: 1.4; }


/* ---------- the vein, a slim band of gold in basalt ---------- */

.vein { position: relative; }
.vein img { width: 100%; height: clamp(7rem, 13vw, 13rem); object-fit: cover; }
.vein::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, var(--basalt) 0%, rgba(14, 12, 8, 0.1) 40%, rgba(14, 12, 8, 0.1) 60%, var(--basalt) 100%);
}


/* ---------- the rooms, heading left and four text lists right ---------- */

.rooms { padding-block: clamp(4rem, 8vw, 7rem); background: var(--basalt); }
.rooms .wrap {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--s8);
  align-items: start;
}
.rooms-head { display: grid; gap: var(--s3); justify-items: start; }
.rooms h2 { font-size: clamp(2rem, 3.6vw, 3rem); }
.rooms-head p { color: var(--text-soft); }
.rooms-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.rooms-list li { border-top: 1px solid var(--line); }
.rooms-list li:nth-child(even) { border-left: 1px solid var(--line); }
.rooms-list li:nth-child(odd) a { padding-right: var(--s4); }
.rooms-list li:nth-child(even) a { padding-left: var(--s4); }
.rooms-list a {
  display: grid;
  gap: var(--s2);
  padding-block: var(--s4);
  height: 100%;
  align-content: start;
}
.rooms-list a:hover .label { color: var(--gold-light); }
.rooms-list .desc { color: var(--text); max-width: 26ch; font-size: 0.95rem; line-height: 1.6; }


/* ---------- pray, the arch left and the first line right ---------- */

.pray-teaser {
  display: grid;
  grid-template-columns: minmax(0, 44fr) minmax(0, 56fr);
  align-items: stretch;
  background: var(--umbra);
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}
.pray-media { position: relative; min-height: 26rem; }
.pray-media picture, .pray-media img { width: 100%; height: 100%; position: absolute; inset: 0; }
.pray-media img { object-fit: cover; object-position: 40% center; }
.pray-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(20, 15, 9, 0) 60%, var(--umbra) 100%);
}
.pray-text {
  display: grid;
  gap: var(--s3);
  align-content: center;
  justify-items: start;
  padding: clamp(4rem, 8vw, 7rem) var(--gutter) clamp(4rem, 8vw, 7rem) var(--s4);
  max-width: 44rem;
}
.pray-text h2 { font-size: clamp(2rem, 3.4vw, 3rem); }
.pray-text h2 em { font-style: italic; }
.pray-text .ref { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; color: var(--text-soft); }
.pray-text > p:not(.label):not(.ref) { color: var(--text-soft); }
.pray-text .pray-line { display: grid; gap: var(--s1); padding-block: var(--s2); border-block: 1px solid var(--line); width: 100%; }
.pray-text .pray-line .serto { font-size: clamp(2.4rem, 4vw, 3.6rem); color: var(--gold-light); text-align: left; }
.pray-text .pray-line .translit { font-size: 1.15rem; }


/* ---------- our story, text left and the lamps bleeding right ---------- */

.story-teaser {
  position: relative;
  padding-block: clamp(5rem, 10vw, 9rem);
  background: var(--basalt);
  overflow: hidden;
}
.story-media { position: absolute; inset: 0 0 0 auto; width: 54%; }
.story-media picture, .story-media img { width: 100%; height: 100%; }
.story-media img { object-fit: cover; object-position: 50% center; }
.story-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, var(--basalt) 0%, rgba(14, 12, 8, 0) 28%),
    linear-gradient(180deg, var(--basalt) 0%, rgba(14, 12, 8, 0) 14%, rgba(14, 12, 8, 0) 86%, var(--basalt) 100%);
}
.story-teaser .wrap { position: relative; z-index: 1; }
.story-text { display: grid; gap: var(--s3); justify-items: start; max-width: 26rem; }
.story-text h2 { font-size: clamp(2.2rem, 3.8vw, 3.2rem); }
.story-text p:not(.label) { color: var(--text); }


/* ---------- community, a band under rising embers ---------- */

.community-band {
  position: relative;
  isolation: isolate;
  padding-block: clamp(5rem, 10vw, 9rem);
  background: var(--basalt-deep);
  border-top: 1px solid var(--line-soft);
  overflow: hidden;
}
.community-media { position: absolute; inset: 0; z-index: -1; }
.community-media picture, .community-media img { width: 100%; height: 100%; }
.community-media img { object-fit: cover; object-position: center 70%; }
.community-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(10, 9, 6, 0.85) 0%, rgba(10, 9, 6, 0.4) 50%, rgba(10, 9, 6, 0.1) 100%),
    linear-gradient(180deg, var(--basalt) 0%, rgba(10, 9, 6, 0) 25%);
}
.community-text { display: grid; gap: var(--s3); justify-items: start; max-width: 32rem; }
.community-text h2 { font-size: clamp(2.2rem, 4vw, 3.4rem); }
.community-text p:not(.label) { color: var(--text); }


/* ---------- page head, a dark band of image under the header ---------- */

.pagehead {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(8.5rem, 16vw, 12rem) clamp(3rem, 6vw, 5rem);
  background: var(--umbra);
  border-bottom: 1px solid var(--line);
}
.pagehead .wrap { display: grid; gap: var(--s3); justify-items: start; }
.pagehead h1 { font-size: clamp(3rem, 7.5vw, 6.2rem); font-weight: 500; max-width: 16ch; line-height: 1; }
.pagehead .lede { font-size: clamp(1.05rem, 1.4vw, 1.25rem); color: var(--text); max-width: 46ch; }
.pagehead::before, .pagehead::after { content: ""; position: absolute; inset: 0; }
.pagehead::before { z-index: -2; background-repeat: no-repeat; background-size: cover; background-position: center; }
.pagehead::after {
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(10, 9, 6, 0.93) 0%, rgba(10, 9, 6, 0.82) 42%, rgba(10, 9, 6, 0.42) 100%),
    linear-gradient(0deg, rgba(14, 12, 8, 0.9) 0%, rgba(14, 12, 8, 0) 45%),
    linear-gradient(180deg, rgba(10, 9, 6, 0.7) 0%, rgba(10, 9, 6, 0) 35%);
}

/* one picture per page, the 800 px file on small screens */
.page-learn .pagehead::before {
  background-image: url("../img/vein-800.jpg");
  background-image: image-set(url("../img/vein-800.webp") type("image/webp"), url("../img/vein-800.jpg") type("image/jpeg"));
}
.page-pray .pagehead::before {
  background-image: url("../img/arch-800.jpg");
  background-image: image-set(url("../img/arch-800.webp") type("image/webp"), url("../img/arch-800.jpg") type("image/jpeg"));
  background-position: 40% 55%;
}
.page-story .pagehead::before {
  background-image: url("../img/lamps-800.jpg");
  background-image: image-set(url("../img/lamps-800.webp") type("image/webp"), url("../img/lamps-800.jpg") type("image/jpeg"));
}
.page-community .pagehead::before {
  background-image: url("../img/embers-800.jpg");
  background-image: image-set(url("../img/embers-800.webp") type("image/webp"), url("../img/embers-800.jpg") type("image/jpeg"));
  background-position: center 78%;
}
.page-coaching .pagehead::before {
  background-image: url("../img/wall-800.jpg");
  background-image: image-set(url("../img/wall-800.webp") type("image/webp"), url("../img/wall-800.jpg") type("image/jpeg"));
}
@media (min-width: 40.01rem) {
  .page-learn .pagehead::before {
    background-image: url("../img/vein-1600.jpg");
    background-image: image-set(url("../img/vein-1600.webp") type("image/webp"), url("../img/vein-1600.jpg") type("image/jpeg"));
  }
  .page-pray .pagehead::before {
    background-image: url("../img/arch-1600.jpg");
    background-image: image-set(url("../img/arch-1600.webp") type("image/webp"), url("../img/arch-1600.jpg") type("image/jpeg"));
  }
  .page-story .pagehead::before {
    background-image: url("../img/lamps-1600.jpg");
    background-image: image-set(url("../img/lamps-1600.webp") type("image/webp"), url("../img/lamps-1600.jpg") type("image/jpeg"));
  }
  .page-community .pagehead::before {
    background-image: url("../img/embers-1600.jpg");
    background-image: image-set(url("../img/embers-1600.webp") type("image/webp"), url("../img/embers-1600.jpg") type("image/jpeg"));
  }
  .page-coaching .pagehead::before {
    background-image: url("../img/wall-1600.jpg");
    background-image: image-set(url("../img/wall-1600.webp") type("image/webp"), url("../img/wall-1600.jpg") type("image/jpeg"));
  }
}
/* legal has no picture, a quiet umber band */
.page-legal .pagehead { background: var(--umbra); padding-bottom: clamp(2.5rem, 5vw, 4rem); }
.page-legal .pagehead::after { background: none; }
.page-coaching .booking-price { font-family: var(--serif); font-size: 1.5rem; color: var(--gold-light); max-width: none; }


/* ---------- sections below the band ---------- */

.section { padding-block: clamp(4rem, 9vw, 8rem); background: var(--basalt); }
.section + .section { border-top: 1px solid var(--line-soft); }
.section.stone { background: var(--umbra); border-block: 1px solid var(--line); }
.section.stone + .section { border-top: 0; }

.section-head { display: grid; gap: var(--s2); margin-bottom: var(--s6); align-content: start; justify-items: start; }
.section-head h2 { font-size: clamp(2rem, 3.6vw, 3.1rem); max-width: 18ch; }
.section-head .note, .section-head p { color: var(--text-soft); }
.section-head p.label { color: var(--gold); }

/* the two column: claim left, content right */
.split, .downloads {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--s8);
  align-items: start;
}
.split .section-head, .downloads .section-head { margin: 0; }

.prose h3 { font-size: 1.6rem; margin-top: var(--s4); }
.prose .hint { font-size: 0.9rem; color: var(--text-soft); }
.prose a { color: var(--gold); text-decoration: underline; text-underline-offset: 0.2em; text-decoration-color: var(--line-gold); }
.prose a:hover { text-decoration-color: var(--gold); }
.prose ul, .prose ol { padding-left: 1.2rem; margin: var(--s2) 0 0; }
.prose li + li { margin-top: var(--s1); }
.prose strong { font-weight: 600; color: var(--text); }
.prose p, .prose li { color: var(--text); }

/* a bible verse. serif italic, a gold line beside it, the reference beneath */
.verse {
  margin: var(--s4) 0 0;
  display: grid;
  gap: var(--s2);
  padding: var(--s1) 0 var(--s1) var(--s3);
  border-left: 1px solid var(--gold);
}
.verse p { font-family: var(--serif); font-style: italic; font-size: clamp(1.4rem, 2.2vw, 1.9rem); line-height: 1.3; color: var(--text); max-width: 30ch; }
.verse cite { font-style: normal; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold); }

/* dialects and formats. a definition list on fine lines */
.dialects { margin: 0; border-top: 1px solid var(--line); }
.dialects > div {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: var(--s4);
  padding-block: var(--s3);
  border-bottom: 1px solid var(--line);
}
.dialects dt { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s2); }
.dialects .name { font-family: var(--serif); font-size: 1.8rem; line-height: 1.15; color: var(--text); }
.dialects dd { margin: 0; color: var(--text-soft); max-width: 46ch; }
/* the two languages and the branches carry a list inside the definition.
   a short gold tick instead of a bullet, so the lines read as one column */
.dialects dd ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s1); }
.dialects dd li { position: relative; padding-left: var(--s3); }
.dialects dd li::before { content: ""; position: absolute; left: 0; top: 0.85em; width: 0.75rem; height: 1px; background: var(--gold-deep); }
.languages > div { grid-template-columns: minmax(0, 1fr); gap: var(--s2); }
.languages dd { max-width: var(--measure); }
.languages .intro { color: var(--text); margin-bottom: var(--s2); }

/* the channel index on community */
.paths ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.paths li { border-bottom: 1px solid var(--line); }
.paths a {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 5fr) auto;
  align-items: baseline;
  gap: var(--s4);
  padding-block: var(--s3);
}
.paths a:hover .name { color: var(--gold-light); }
.paths .name { font-family: var(--serif); font-size: clamp(1.8rem, 3.4vw, 2.8rem); line-height: 1; color: var(--text); transition: color 200ms var(--ease); }
.paths .desc { color: var(--text-soft); max-width: 44ch; }
.paths .platform { display: inline-flex; align-items: center; gap: 0.5em; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); white-space: nowrap; }
.icon { width: 1.1rem; height: 1.1rem; flex: none; }

/* closing paragraph under a short gold line. not rendered since 2026-11-02,
   maya asked for the band to go (story.php) */
.who .wrap { display: grid; justify-items: start; gap: var(--s3); }
.who h2 { font-size: clamp(2rem, 3.4vw, 2.8rem); max-width: 22ch; }
.who p { color: var(--text-soft); max-width: 52ch; }


/* ---------- story: chapters and teachers ---------- */

.chapters { display: grid; gap: var(--s6); }
.chapter { display: grid; gap: var(--s2); padding-top: var(--s3); border-top: 1px solid var(--line); }
.chapter h3 { font-size: 1.9rem; }
.chapter p { color: var(--text); }
.placeholder {
  color: var(--text-soft);
  padding: var(--s3);
  border: 1px dashed var(--brown-up);
  max-width: none;
}
.placeholder .pending { margin-right: var(--s1); }
/* not rendered since 2026-11-02, maya asked for it to go */
.chapters-byline { font-family: var(--serif); font-style: italic; font-size: 1.25rem; color: var(--gold-light); }

.people-list { display: grid; gap: var(--s8); }
/* every portrait takes the wide column and the columns mirror with it, so both
   teachers stand the same size. the short texts sit in the narrow column at the
   height of the picture's middle (marcus 2026-11-05, option 1 of 4. before,
   the even row alone gave its portrait the 7fr column and it looked worth more,
   and both in 5fr left a wide column of three lines over an empty field) */
.person { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s6); align-items: center; }
.person:nth-child(even) .portrait { order: 2; }
.person:nth-child(even) { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }

/* the frame a photograph will stand in. a hairline outside, a gold hairline
   inside it, so the empty place already looks like a place of honour. a real
   portrait sits in the same frame */
.portrait { position: relative; margin: 0; aspect-ratio: 3 / 2; border: 1px solid var(--brown-up); background: var(--umbra); max-width: none; }
.portrait::after {
  content: "";
  position: absolute;
  inset: var(--s2);
  border: 1px solid var(--line-gold);
  pointer-events: none;
}
.portrait img { width: 100%; height: 100%; object-fit: cover; }
.portrait-pending {
  display: grid;
  place-items: center;
  background: radial-gradient(ellipse at 50% 40%, var(--umbra-lift) 0%, var(--umbra) 70%);
}
.person-text { display: grid; gap: var(--s2); justify-items: start; }
.person h3 { font-size: 2.2rem; }
.person-text p:last-child { color: var(--text-soft); }


/* ---------- footer ---------- */

.site-foot { background: var(--basalt-deep); border-top: 1px solid var(--line); padding-block: var(--s8) var(--s6); font-size: 0.85rem; color: var(--text-soft); }
.preview-note {
  max-width: none;
  margin-bottom: var(--s4);
  padding: var(--s1) var(--s2);
  border: 1px solid var(--line-gold);
  color: var(--gold);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
}
.foot-verse { margin: 0 0 var(--s8); display: grid; gap: var(--s1); justify-items: center; text-align: center; }
.foot-verse p { font-family: var(--serif); font-style: italic; font-size: clamp(1.5rem, 2.6vw, 2.2rem); line-height: 1.3; color: var(--text); max-width: 30ch; }
.foot-verse cite { font-style: normal; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold); }
.foot-grid { display: grid; grid-template-columns: 1fr auto; gap: var(--s3) var(--s4); align-items: end; padding-top: var(--s4); border-top: 1px solid var(--line-soft); }
.foot-grid .brand .mono { font-size: 1.9rem; }
.foot-grid .brand .signet { height: 1.55rem; }
.foot-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s1) var(--s4); }
.foot-nav a { display: inline-block; min-height: 2.75rem; padding-block: 0.7rem; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; }
.foot-line { grid-column: 1; }
.foot-social { grid-column: 2; list-style: none; margin: 0; padding: 0; display: flex; justify-content: flex-end; gap: var(--s2); }
.foot-social a { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border: 1px solid var(--brown-up); border-radius: 50%; color: var(--text-soft); transition: color 200ms var(--ease), border-color 200ms var(--ease); }
.foot-social a:hover { color: var(--gold); border-color: var(--gold); }
.foot-copy { grid-column: 2; display: flex; flex-wrap: wrap; gap: var(--s2); justify-content: flex-end; }
.site-foot a:hover { color: var(--gold); }
/* maker credit, the pattern of bss-elektrotechnik and dieserubi (2026-11-05).
   their 0.3 opacity on the text would fall under the 4.5:1 floor, so the text
   keeps --text-soft and only the logo, a logotype without a contrast floor,
   is dimmed */
.powered-by { display: inline-flex; align-items: center; gap: 0.35rem; }
.powered-by__text { font-size: 0.68rem; font-weight: 300; letter-spacing: 0.03em; }
.powered-by__logo { height: 9px; width: auto; opacity: 0.45; transition: opacity 200ms var(--ease); }
.powered-by:hover .powered-by__logo, .powered-by:focus-visible .powered-by__logo { opacity: 0.9; }


/* ---------- pray page ---------- */

/* the band carries the arch on its right side and fades into basalt on the
   left, where the Serto line, the headline and the player stand */
.pray-hero::before { left: 36%; }
.pray-hero::after {
  background:
    linear-gradient(90deg, var(--basalt) 0%, var(--basalt) 36%, rgba(14, 12, 8, 0.5) 62%, rgba(14, 12, 8, 0.15) 100%),
    linear-gradient(0deg, rgba(14, 12, 8, 0.9) 0%, rgba(14, 12, 8, 0) 40%),
    linear-gradient(180deg, rgba(10, 9, 6, 0.7) 0%, rgba(10, 9, 6, 0) 30%);
}
.pray-hero .wrap { max-width: 40rem; margin-left: max(var(--gutter), calc((100% - var(--wrap)) / 2)); width: auto; margin-right: var(--gutter); }
.pray-hero .aramaic { display: grid; gap: var(--s2); }
.pray-hero .hero-line .serto { font-size: clamp(3.6rem, 7vw, 6.4rem); line-height: 1.1; color: var(--gold-light); text-align: left; }
.pray-hero h1 { font-size: clamp(2.4rem, 4.6vw, 4rem); max-width: 20ch; }
.pray-hero h1 em { font-style: italic; }

/* the audio bar. app.js finds its hooks here, so the names stay */
.player {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas: "play track time" "variants variants variants";
  align-items: center;
  gap: var(--s2) var(--s3);
  padding: var(--s2) var(--s3);
  border: 1px solid var(--brown-up);
  background: rgba(20, 15, 9, 0.88);
  color: var(--text);
  width: min(100%, 40rem);
  margin-top: var(--s2);
  text-align: left;
}
.player audio { grid-column: 1 / -1; width: 100%; color-scheme: dark; }
.player .play, .player .track, .player .time { display: none; }
.player.is-ready audio { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.player.is-ready .play, .player.is-ready .track, .player.is-ready .time { display: grid; }
.player .play { grid-area: play; width: 2.75rem; height: 2.75rem; padding: 0; border-radius: 50%; border: 1px solid var(--gold); background: transparent; color: var(--gold); place-items: center; cursor: pointer; transition: background-color 200ms var(--ease), color 200ms var(--ease); }
.player .play:hover { background: var(--gold); color: var(--basalt); }
.player .tri { width: 0; height: 0; border-left: 0.7rem solid currentColor; border-top: 0.45rem solid transparent; border-bottom: 0.45rem solid transparent; margin-left: 0.15rem; }
.player .bars { display: none; width: 0.7rem; height: 0.8rem; border-left: 0.22rem solid currentColor; border-right: 0.22rem solid currentColor; }
.player.is-playing .tri { display: none; }
.player.is-playing .bars { display: block; }
.player .track { grid-area: track; position: relative; height: 2.75rem; align-items: center; cursor: pointer; }
.player .track::before { content: ""; position: absolute; left: 0; right: 0; height: 1px; background: var(--brown-up); }
.player .fill { position: absolute; left: 0; width: 100%; height: 1px; background: var(--gold); transform-origin: left; transform: scaleX(0); }
.player .knob { position: absolute; left: 0; width: 7px; height: 7px; margin-left: -3px; background: var(--gold); transform: rotate(45deg); }
.player .time { grid-area: time; grid-auto-flow: column; gap: 0.3em; font-size: 0.78rem; letter-spacing: 0.08em; color: var(--text-soft); font-variant-numeric: tabular-nums; }
.player .variants { grid-area: variants; display: flex; flex-wrap: wrap; gap: var(--s1) var(--s3); font-size: 0.78rem; letter-spacing: 0.06em; }
.player .variants a { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--text-soft); border-bottom: 1px solid transparent; padding-block: 0.2rem; }
.player .variants a:hover, .player .variants a[aria-current="true"] { color: var(--gold); border-bottom-color: var(--gold); }

/* the prayer, line by line. serto right, transliteration and meaning left */
.lines { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.lines li { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s4); align-items: baseline; padding-block: var(--s3); border-bottom: 1px solid var(--line); }
.lines .serto { font-size: clamp(2rem, 3.4vw, 3rem); color: var(--gold-light); text-align: right; order: 2; }
.lines .latin { order: 1; }
.lines .latin .t { font-family: var(--serif); font-style: italic; font-size: 1.4rem; color: var(--text); }
.lines .latin .m { display: block; color: var(--text-soft); margin-top: 0.25rem; }

.downloads ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.downloads li { border-bottom: 1px solid var(--line); }
.downloads a { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s3); padding-block: var(--s2); color: var(--text); }
.downloads a:hover .what { color: var(--gold-light); }
.downloads .kind { color: var(--text-soft); font-size: 0.85rem; letter-spacing: 0.06em; white-space: nowrap; }
.downloads .what { display: inline-flex; align-items: center; gap: 0.5em; transition: color 200ms var(--ease); }
.downloads .section-head p { color: var(--text-soft); }

.free { display: grid; justify-items: start; gap: var(--s3); }
.free h2 { font-size: clamp(2rem, 3.6vw, 3.1rem); max-width: 20ch; }
.free h2 em { font-style: italic; }
.free p { color: var(--text-soft); }


/* ---------- responsive ---------- */

@media (max-width: 60rem) {
  /* the stage gives up the overlap. lettering above, stone below it, the
     foot lines under that */
  .hero-stage {
    aspect-ratio: auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    padding-top: var(--s6);
  }
  .hero-art { position: relative; inset: auto; grid-column: 1; grid-row: 2; aspect-ratio: 1 / 1; }
  .hero-art::after {
    background:
      linear-gradient(180deg, var(--basalt-deep) 0%, rgba(10, 9, 6, 0) 10%),
      linear-gradient(0deg, var(--basalt) 0%, rgba(14, 12, 8, 0) 22%);
  }
  /* "Still spoken." is 5.12 em wide: one line, centred, as large as fits */
  .hero h1 {
    position: relative;
    inset: auto;
    grid-column: 1;
    grid-row: 1;
    z-index: 4;
    width: 100%;
    margin: 0 0 var(--s3);
    text-align: center;
    font-size: min(17.5vw, 7.5rem);
    line-height: 1;
  }
  .hero h1 .w {
    position: relative;
    inset: auto;
    top: auto;
    display: inline-block;
    font-size: 1em;
    background-size: 100% 100%, 260% auto;
    background-position: 0 0, 30% 40%;
  }
  .hero h1 .w1, .hero h1 .w2 { right: auto; left: auto; }
  .hero h1 .w2::before { inset: -20% -6%; }
  .hero-foot { position: relative; inset: auto; grid-column: 1; grid-row: 3; padding-block: var(--s2) var(--s8); z-index: 4; }
  .hero-foot .wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; flex-direction: column; align-items: flex-start; gap: var(--s6); }
  .hero-lead { max-width: 34rem; }
  .hero .lede { font-size: 0.78rem; }
  .hero-verse { max-width: 24rem; }
  .hero-verse p { font-size: 1.3rem; }

  .why-media, .story-media { position: relative; inset: auto; width: 100%; aspect-ratio: 16 / 10; margin-bottom: var(--s4); }
  .why, .story-teaser { padding-top: 0; }
  .why-media::after, .story-media::after {
    background:
      linear-gradient(180deg, rgba(14, 12, 8, 0) 55%, var(--basalt) 100%),
      linear-gradient(180deg, rgba(14, 12, 8, 0.4) 0%, rgba(14, 12, 8, 0) 20%);
  }
  .why-text, .story-text { max-width: none; }

  .rooms .wrap, .split, .downloads, .person { grid-template-columns: minmax(0, 1fr); gap: var(--s6); }
  .downloads .kind { white-space: normal; }
  .rooms-head { gap: var(--s2); }
  .pray-teaser { grid-template-columns: minmax(0, 1fr); }
  .pray-media { min-height: 0; aspect-ratio: 16 / 10; }
  .pray-media::after { background: linear-gradient(180deg, rgba(20, 15, 9, 0) 55%, var(--umbra) 100%); }
  .pray-text { padding: var(--s4) var(--gutter) var(--s12); max-width: none; }
  .community-media::after {
    background:
      linear-gradient(90deg, rgba(10, 9, 6, 0.8) 0%, rgba(10, 9, 6, 0.5) 100%),
      linear-gradient(180deg, var(--basalt) 0%, rgba(10, 9, 6, 0) 25%);
  }

  .person:nth-child(even) .portrait { order: 0; }
  .person:nth-child(even) { grid-template-columns: minmax(0, 1fr); }
  .lines li, .dialects > div { grid-template-columns: minmax(0, 1fr); gap: var(--s1); }
  .lines .serto { text-align: left; order: 1; }
  .lines .latin { order: 2; }
  .paths a { grid-template-columns: minmax(0, 1fr); gap: var(--s1); }
  .foot-grid { grid-template-columns: minmax(0, 1fr); }
  .foot-copy, .foot-social { grid-column: 1; justify-content: flex-start; }

  .pray-hero::before { left: 0; }
  .pray-hero::after {
    background:
      linear-gradient(90deg, rgba(14, 12, 8, 0.92) 0%, rgba(14, 12, 8, 0.7) 100%),
      linear-gradient(0deg, rgba(14, 12, 8, 0.9) 0%, rgba(14, 12, 8, 0) 40%);
  }
  .pray-hero .wrap { max-width: none; width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }
}

@media (max-width: 40rem) {
  .site-head { padding-block: var(--s2); }
  .brand .name { display: none; }
  .menu summary { padding-left: var(--s2); }
  .menu-word { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .hero-art { aspect-ratio: 4 / 5; }
  .hero-stage { padding-top: var(--s4); }
  .rooms-list { grid-template-columns: minmax(0, 1fr); }
  .rooms-list li:nth-child(even) { border-left: 0; }
  .rooms-list li:nth-child(odd) a, .rooms-list li:nth-child(even) a { padding-inline: 0; }
  .rooms-list a { padding-block: var(--s3); }
  .aramaic .translit { font-size: 1.1rem; }
  .player { grid-template-columns: auto 1fr; grid-template-areas: "play track" "time time" "variants variants"; }
  .actions .btn { width: 100%; justify-content: space-between; }
}

/* a phone shows the stone tall, so its Serto stays readable */
@media (max-width: 30rem) {
  .hero-art { aspect-ratio: 3 / 5; }
}


/* ---------- motion floor ---------- */

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


/* ---------- coaching, the request page ---------- */
/* the live block of web/coaching.php, set for the dark ground. the classes are
   the live ones, the look is this variant's */

.booking h2 { font-size: clamp(1.9rem, 3vw, 2.6rem); margin: 0 0 var(--s2); }
.booking .step-hint { color: var(--text-soft); font-size: 0.9rem; margin: var(--s2) 0 var(--s3); }
.booking .step-title, .booking .slot-legend { font-family: var(--serif); font-weight: 400; line-height: 1.15; font-size: clamp(1.6rem, 2.4vw, 2.1rem); color: var(--text); }
.booking .step-title { margin: var(--s8) 0 0; }
.booking .slot-legend { padding: 0; margin-bottom: var(--s2); }
.booking .note, .booking-actions .note { color: var(--text-soft); }

.teacher-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: var(--s2); margin: var(--s3) 0 0; padding: 0; list-style: none; }
.teacher-cell { display: flex; flex-direction: column; justify-content: center; gap: 4px; min-height: 5.5rem; padding: var(--s2) var(--s3); border: 1px solid var(--brown-up); background: var(--umbra); color: var(--text); transition: border-color 200ms var(--ease), background-color 200ms var(--ease); }
a.teacher-cell:hover { border-color: var(--gold); background: var(--umbra-lift); }
.teacher-name { font-family: var(--serif); font-size: 1.6rem; line-height: 1.2; }
.teacher-langs { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); }

.month-head { margin: var(--s4) 0 var(--s2); }
.month-head:first-of-type { margin-top: var(--s2); }
.date-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr)); gap: var(--s1); margin: 0; padding: 0; list-style: none; }
.date-cell { display: flex; flex-direction: column; justify-content: center; gap: 2px; min-height: 4.25rem; padding: var(--s1) var(--s2); border: 1px solid var(--brown-up); background: var(--umbra); color: var(--text); transition: border-color 200ms var(--ease), background-color 200ms var(--ease); }
a.date-cell:hover { border-color: var(--gold); background: var(--umbra-lift); }
.date-cell.is-full { border-style: dashed; border-color: var(--brown); background: transparent; color: var(--text-dim); cursor: default; }
.date-cell.is-full .dom { text-decoration: line-through; text-decoration-thickness: 1px; }
.date-state { font-size: 0.6rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-dim); }
.date-grid .dow { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); }
.date-cell.is-full .dow { color: var(--text-dim); }
.date-grid .dom { font-family: var(--serif); font-size: 1.4rem; line-height: 1.2; font-variant-numeric: lining-nums; }

.slot-field { border: 0; padding: 0; margin: var(--s4) 0 0; min-width: 0; }
.slot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr)); gap: var(--s1); }
.slot { position: relative; display: flex; align-items: center; justify-content: center; min-height: 3rem; padding: 0 var(--s2); border: 1px solid var(--brown-up); background: var(--umbra); cursor: pointer; font-size: 0.95rem; font-variant-numeric: lining-nums; color: var(--text); transition: border-color 200ms var(--ease), background-color 200ms var(--ease), color 200ms var(--ease); }
.slot input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
label.slot:hover { border-color: var(--gold); }
.slot:has(:checked) { background: var(--gold); border-color: var(--gold); color: var(--basalt); font-weight: 600; }
.slot:has(:focus-visible) { outline: 2px solid var(--gold-light); outline-offset: 3px; }
.slot.is-taken { border-style: dashed; border-color: var(--brown); background: transparent; color: var(--text-dim); cursor: default; }
.slot.is-taken .slot-time { text-decoration: line-through; text-decoration-thickness: 1px; }

.booking-form { margin-top: var(--s4); max-width: 40rem; }
.field { margin-top: var(--s3); }
.field label { display: block; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); margin-bottom: var(--s1); }
.field input[type="text"], .field input[type="email"], .field textarea {
  width: 100%;
  min-height: 3rem;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--brown-up);
  border-radius: 0;
  background: var(--umbra);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--text);
  transition: border-color 200ms var(--ease);
}
.field textarea { min-height: 8.5rem; resize: vertical; }
.field input:hover, .field textarea:hover { border-color: var(--gold-deep); }
.field input:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 2px; border-color: var(--gold); }
.field ::placeholder { color: var(--text-dim); opacity: 1; }
.field-hint { font-size: 0.85rem; color: var(--text-soft); margin: var(--s1) 0 0; }
.field-optional { text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--text-soft); }
.consent { display: flex; gap: var(--s2); align-items: flex-start; margin-top: var(--s3); }
.consent input { flex: 0 0 auto; width: 1.25rem; height: 1.25rem; margin: 0.25rem 0 0; accent-color: var(--gold); }
.consent input:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 3px; }
.consent label { font-size: 0.95rem; line-height: 1.6; color: var(--text-soft); }
.consent a { color: var(--gold); text-decoration: underline; text-underline-offset: 0.2em; }
.booking-actions { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; margin-top: var(--s4); }
.btn-book { display: inline-flex; align-items: center; justify-content: center; min-height: 3.25rem; padding: 0 var(--s4); border: 1px solid var(--gold); border-radius: 0; background: var(--gold); color: var(--basalt); font-family: var(--sans); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; cursor: pointer; transition: background-color 200ms var(--ease), color 200ms var(--ease); }
.btn-book:hover { background: transparent; color: var(--gold); }
.btn-book:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 3px; }
.booking-actions .note { font-size: 0.85rem; margin: 0; }

.tz-hint .tz-reset { margin-left: var(--s1); color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }
.tz-form { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1) var(--s2); margin: 0 0 var(--s3); }
.tz-pick { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-soft); }
.tz-select { max-width: 100%; min-height: 2.75rem; padding: 0.45rem 0.6rem; border: 1px solid var(--brown-up); border-radius: 0; background: var(--umbra); color: var(--text); font-family: var(--sans); font-size: 0.85rem; }
.tz-select:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 2px; border-color: var(--gold); }
.tz-go, .tz-own { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 var(--s2); border: 1px solid var(--brown-up); border-radius: 0; background: transparent; cursor: pointer; font-family: var(--sans); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text); transition: border-color 200ms var(--ease), color 200ms var(--ease), background-color 200ms var(--ease); }
.tz-go:hover, .tz-own:hover { border-color: var(--gold); color: var(--gold); }
.tz-go:focus-visible, .tz-own:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 2px; }
.tz-own { border-color: var(--gold); color: var(--gold); }
.tz-own:hover { background: var(--gold); color: var(--basalt); }
.tz-note { margin-top: var(--s2); }
.step-back { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--text-soft); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--brown-up); }
.step-back:hover { color: var(--gold); }

.form-error { margin: 0 0 var(--s3); padding: var(--s2) var(--s3); border-left: 2px solid var(--gold); background: var(--umbra-lift); }
.form-error p { margin: 0; color: var(--text); }
.form-error ul { margin: var(--s1) 0 0; padding-left: 1.2rem; color: var(--text-soft); }
.booking-done { padding: var(--s4); border: 1px solid var(--brown-up); background: var(--umbra); max-width: var(--measure); }
.booking-done .when { font-family: var(--serif); font-size: 1.5rem; color: var(--gold-light); margin: 0 0 var(--s2); }
.booking-done .when-alt { color: var(--text-soft); margin: calc(-1 * var(--s2) + 4px) 0 var(--s2); }
.booking-done p { color: var(--text-soft); margin: 0 0 var(--s2); }
.booking-done .next { margin-top: var(--s3); }
.empty-note { margin-top: var(--s3); padding: var(--s3); border: 1px dashed var(--brown-up); color: var(--text-soft); max-width: var(--measure); }
.hp { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }

@media (max-width: 40rem) {
  .date-grid { grid-template-columns: repeat(auto-fill, minmax(5.75rem, 1fr)); }
  .slot-grid { grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr)); }
  .btn-book { width: 100%; }
}

/* ---------- forced colours ----------
   the chosen time and the played part of a recording say what they say by a
   background alone, which a high contrast theme removes (audit 2026-11-02) */
@media (forced-colors: active) {
  .slot:has(:checked) { outline: 3px solid Highlight; outline-offset: -3px; }
  .player .fill { forced-color-adjust: none; background: Highlight; }
}

/* the line to write on in the withdrawal form (legal.php): underscores in the
   text, so it prints as a line too. unstyled until 2026-11-02, it ran out of a
   phone screen */
.rule-line { overflow: hidden; white-space: nowrap; color: var(--brown-up); }

/* ---------- shop (plan-shop.md, 2026-11-03) ----------
   the functional first version of shop.php: catalog, cart, downloads. the
   product pages get their design later (RICHTUNG part 3, "Der Shop ist eine
   Produktoberfläche"); until then the shop borrows the frame, the form and
   the buttons of the coaching request and adds only lists. rows, not cards:
   three equal cards in a row are on the list of things we stay away from */
.shop-banner { margin: 0 0 var(--s4); padding: var(--s2) var(--s3); border: 1px dashed var(--line-gold); color: var(--gold-light); font-size: 0.9rem; max-width: var(--measure); }
.shop-list, .shop-cart, .shop-files { list-style: none; margin: var(--s4) 0; padding: 0; max-width: 48rem; }
.shop-item { padding: var(--s4) 0; border-top: 1px solid var(--line-soft); display: grid; gap: var(--s1); }
.shop-item:last-child { border-bottom: 1px solid var(--line-soft); }
.shop-item-name { font-family: var(--serif); font-weight: 500; font-size: clamp(1.4rem, 2.2vw, 1.8rem); color: var(--text); margin: 0; }
.shop-item-desc { color: var(--text-soft); margin: 0; max-width: var(--measure); }
.shop-price { font-family: var(--serif); font-size: 1.35rem; color: var(--gold-light); margin: 0; font-variant-numeric: lining-nums tabular-nums; }
.shop-cart li, .shop-files li { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s2) var(--s3); padding: var(--s2) 0; border-top: 1px solid var(--line-soft); }
.shop-cart .shop-item-name { font-size: 1.25rem; flex: 1 1 16rem; }
.shop-cart .shop-total { border-top: 1px solid var(--line); justify-content: space-between; color: var(--text-soft); font-size: 0.8rem; letter-spacing: 0.2em; text-transform: uppercase; }
.shop-remove { display: inline-flex; align-items: center; min-height: 44px; color: var(--text-soft); font-size: 0.85rem; text-decoration: underline; text-underline-offset: 0.2em; }
.shop-remove:hover { color: var(--gold); }
.shop-files .shop-file-name { flex: 1 1 16rem; color: var(--text); overflow-wrap: anywhere; }
.shop-files .shop-file-size { color: var(--text-dim); font-size: 0.85rem; font-variant-numeric: tabular-nums; }
.shop-legal { max-width: var(--measure); }
.shop-legal h2 { font-size: 1.5rem; margin: var(--s6) 0 var(--s2); }
.shop-legal h2:first-child { margin-top: 0; }
.shop-legal p { color: var(--text-soft); }