/*
 * Iconography Atelier · production stylesheet (Warmer direction)
 *
 * Gold + cinnabar + bone. Atelier in Jerusalem. Two typefaces, three
 * sizes per page. The warmer key is one drop of cinnabar per page,
 * at most.
 *
 *   home    : Hebrew word inscribed under the icon, in cinnabar.
 *   services: cinnabar tier numerals.
 *   about   : a single dropped initial in cinnabar.
 *   contact : a small "·" before the required label, in cinnabar.
 *   privacy / terms / faq : none. Pure ink on bone.
 *   subscribe / unsubscribed : none.
 */

@import url('./tokens.css');

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bone);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── Skip link for keyboard users ─────────────────────────────────── */
.skip-link {
  position: absolute;
  top: -40px;
  left: 16px;
  background: var(--bone);
  color: var(--ink);
  padding: 8px 16px;
  text-decoration: none;
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  z-index: 100;
  border: 0;
  border-bottom: 1px solid var(--ink);
}
.skip-link:focus { top: 16px; }

.folio {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 0 var(--pad-x-mobile);
}
.folio--narrow { max-width: var(--measure-narrow); }
@media (min-width: 720px) {
  .folio { padding: 0 var(--pad-x-desktop); }
}

.mark {
  padding: 56px var(--pad-x-mobile) 0;
  max-width: var(--measure);
  margin: 0 auto;
}
@media (min-width: 720px) {
  .mark { padding: 64px var(--pad-x-desktop) 0; }
}
.mark__line {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink);
  display: inline-block;
  text-decoration: none;
  border: 0;
}

.t-display {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 28px;
  line-height: 1.2;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0;
}
.t-body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink);
  margin: 0;
  max-width: 68ch;
}
.t-body em { font-style: italic; }
.t-smallcaps {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0;
}
.t-hebrew {
  font-family: var(--font-hebrew);
  font-weight: 400;
  direction: rtl;
}

.title-block { padding: 56px 0 20px; position: relative; }
.title-block__mark {
  display: block;
  width: 28px;
  height: 28px;
  margin: 0 0 32px;
  color: var(--ink);
}
.title-block__eyebrow {
  display: block;
  margin-bottom: 24px;
  color: var(--ink-soft);
}
.ornament { display: block; width: 36px; height: 36px; margin: 0 auto; color: var(--ink); }
.ornament--soft { color: var(--ink-soft); }
.tier__numeral {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 28px;
  line-height: 1;
  letter-spacing: 0.04em;
  color: var(--gold-leaf);
  display: block;
  margin-bottom: 14px;
}
.figure-mark { display: block; width: 88px; height: auto; margin: 0 0 48px; color: var(--ink); }

/* Hero — bone, NOT gold-drenched. The warmth comes from cinnabar accent. */
.hero {
  background: var(--bone);
  padding: 14vh 0 16vh;
}
.hero__inner {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 0 var(--pad-x-mobile);
  min-height: 56vh;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr auto;
  gap: 0;
}
@media (min-width: 720px) {
  .hero__inner { padding: 0 var(--pad-x-desktop); }
}
.hero__mark {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink);
  align-self: start;
  border: 0;
  text-decoration: none;
}
.hero__icon {
  align-self: center;
  justify-self: center;
  width: 240px;
  margin: 80px 0;
}
.hero__caption {
  align-self: end;
  margin-top: 80px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}
.hero__phrase {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
  margin: 0;
  max-width: 32ch;
}
.hero__cta {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  border: 0;
  border-bottom: 1px solid oklch(0.18 0.025 70 / 0.5);
  padding-bottom: 4px;
  white-space: nowrap;
  transition: border-color var(--dur-fast) var(--ease-out-quart);
}
.hero__cta:hover { border-bottom-color: var(--ink); }
.hero__cta:focus-visible {
  outline: 2px solid var(--lapis);
  outline-offset: 4px;
}

.section { padding: 64px 0; }
.section--quiet { padding: 44px 0; }

.rule { height: 1px; border: 0; background: var(--rule); margin: 0; width: 100%; }

/* Tiers */
.tiers { margin-top: 40px; }
.tier {
  display: grid;
  grid-template-columns: 1fr;
  padding: 32px 0;
  border-top: 1px solid var(--rule);
  gap: 16px;
}
.tier:last-child { border-bottom: 1px solid var(--rule); }
@media (min-width: 720px) {
  .tier {
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: start;
    gap: 40px;
  }
  .tier__numeral { padding-top: 2px; }
}
.tier__body { display: contents; }
@media (min-width: 720px) {
  .tier__body { display: block; }
}
.tier__name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 10px;
}
.tier__desc {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink);
  max-width: 56ch;
  margin: 0;
}
.tier__action {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  margin: 0;
}
@media (min-width: 720px) {
  .tier__action { align-items: flex-end; }
}
.tier__cadence {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 18px;
  color: var(--ink);
  white-space: nowrap;
  margin: 0;
}
.tier__cta {
  display: inline-block;
  padding: 9px 18px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--cinnabar);
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--dur-fast) var(--ease-out-quart),
              color var(--dur-fast) var(--ease-out-quart);
}
.tier__cta:hover { background: var(--cinnabar); color: var(--bone); }
.tier__cta:focus-visible {
  outline: 2px solid var(--lapis);
  outline-offset: 3px;
}
.tier__numeral--rare { color: var(--cinnabar); }

/* Prose */
.prose p {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  max-width: 68ch;
  margin: 0 0 1.2em;
}
.prose p:last-child { margin-bottom: 0; }
.prose em { font-style: italic; }

/* Drop initial — only used on About in the WARMER direction */
.dropcap::first-letter {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 56px;
  line-height: 0.9;
  float: left;
  padding: 6px 12px 0 0;
  color: var(--cinnabar);
}

/* Legal */
.legal p {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink);
  max-width: 70ch;
  margin: 0 0 1em;
}
.legal h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 56px 0 18px;
}

/* Form */
.form { margin-top: 56px; }
.field { display: flex; flex-direction: column; gap: 10px; margin-bottom: 40px; }
.field__label {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink);
}
.field__req { color: var(--cinnabar); margin-right: 6px; }
.field__input,
.field__textarea {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--rule);
  padding: 8px 0;
  outline: none;
  width: 100%;
  appearance: none;
  border-radius: 0;
  transition: border-color var(--dur-fast) var(--ease-out-quart);
}
.field__input:focus,
.field__textarea:focus { border-bottom-color: var(--ink); }
.field__input:focus-visible,
.field__textarea:focus-visible {
  outline: 0;
  border-bottom-color: var(--lapis);
}
.field__textarea { resize: vertical; min-height: 140px; }
.form__submit {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--ink);
  padding: 8px 0;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out-quart),
              border-color var(--dur-fast) var(--ease-out-quart);
}
.form__submit:hover { color: var(--lapis); border-bottom-color: var(--lapis); }
.form__submit:active { transform: translateY(1px); }
.form__submit:focus-visible {
  outline: 2px solid var(--lapis);
  outline-offset: 4px;
}

/* Inline notice (subscribe/contact error/success) — server- or JS-rendered */
.notice {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0 0 32px;
  max-width: 56ch;
  padding: 0;
  background: transparent;
  border: 0;
}
.notice--ok { color: var(--ink); }

/* Subscribe inline form (services.html) */
.subscribe {
  margin-top: 80px;
  padding-top: 64px;
  border-top: 1px solid var(--rule);
}
.subscribe__heading {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 32px;
}
.subscribe__row {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-top: 24px;
  max-width: 56ch;
}
@media (min-width: 720px) {
  .subscribe__row {
    flex-direction: row;
    align-items: end;
    gap: 32px;
  }
}
.subscribe__field { flex: 1 1 auto; }
.subscribe__helper {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 14px;
  color: var(--ink-soft);
  margin: 16px 0 0;
  max-width: 56ch;
}

/* FAQ */
.qa { margin-top: 48px; }
.qa__item { padding: 36px 0; border-top: 1px solid var(--rule); }
.qa__item:last-child { border-bottom: 1px solid var(--rule); }
.qa__q {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 18px;
  max-width: 60ch;
}
.qa__a {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  margin: 0;
  max-width: 62ch;
}

/* Foot — book-end colophon, 4-element manuscript pattern + nav row */
.foot {
  border-top: 1px solid var(--rule);
  padding: 48px 0 56px;
  margin-top: 64px;
  text-align: center;
}
.foot__inner {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 0 var(--pad-x-mobile);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
@media (min-width: 720px) {
  .foot__inner { padding: 0 var(--pad-x-desktop); gap: 18px; }
}

.foot__nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 14px;
  margin: 0 0 4px;
  padding: 0;
}
.foot__nav a {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: border-color var(--dur-fast) var(--ease-out-quart);
}
.foot__nav a:hover { border-bottom-color: var(--ink); }
.foot__nav a:focus-visible {
  outline: 2px solid var(--lapis);
  outline-offset: 4px;
}
.foot__nav a[aria-current="page"] {
  font-family: var(--font-body);
  font-style: italic;
  text-transform: none;
  letter-spacing: 0.02em;
  font-size: 14px;
  color: var(--ink-soft);
  border-bottom: 0;
  padding-bottom: 0;
}
.foot__nav a[aria-current="page"]:hover { border-bottom: 0; }
.foot__nav-sep {
  color: var(--ink-soft);
  font-size: 11px;
  user-select: none;
}
.foot__address {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0;
}
.foot__colophon {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0;
}
.foot__greek {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 16px;
  color: var(--ink-soft);
  margin: 0;
}
.foot__copy {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--ink-soft);
  letter-spacing: 0.04em;
  margin: 0;
}

.prose a, .legal a, .qa__a a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
  transition: color var(--dur-fast) var(--ease-out-quart),
              border-color var(--dur-fast) var(--ease-out-quart);
}
.prose a:hover, .legal a:hover, .qa__a a:hover {
  color: var(--lapis);
  border-bottom-color: var(--lapis);
}
.prose a:focus-visible, .legal a:focus-visible, .qa__a a:focus-visible {
  outline: 2px solid var(--lapis);
  outline-offset: 2px;
}

/* Page-enter animation — opacity only.
   The earlier version animated transform: translateY on body, which made
   body a containing block for any position: fixed descendants (drolleries)
   and broke their viewport anchoring. Opacity has no such side-effect. */
@media (prefers-reduced-motion: no-preference) {
  body { animation: page-enter 640ms var(--ease-out-quart) both; }
  @keyframes page-enter {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
}

::selection { background: var(--gold-leaf); color: var(--ink); }

/* ── Scattered ornaments ─────────────────────────────────────────── */

.colophon {
  text-align: center;
  padding: 64px 0 0;
  color: var(--ink-soft);
}
.colophon__mark {
  display: block;
  width: 22px;
  height: 22px;
  margin: 0 auto 18px;
  color: var(--ink-soft);
}
.colophon__line {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0;
}

.break {
  text-align: center;
  margin: 48px 0;
  color: var(--ink-soft);
}
.break svg { width: 60px; height: 24px; }

.margin-mark {
  display: block;
  width: 60px;
  height: auto;
  color: var(--ink-soft);
  opacity: 0.85;
}
.margin-mark--right { float: right; margin: 0 0 24px 32px; }
.margin-mark--left  { float: left;  margin: 0 32px 24px 0; }
@media (max-width: 720px) {
  .margin-mark--right, .margin-mark--left {
    float: none;
    margin: 32px auto;
  }
}

.inscription-mark {
  display: block;
  width: 200px;
  height: 24px;
  margin: 64px 0 24px;
  color: var(--ink-soft);
}
.inscription-mark--center {
  margin-left: auto;
  margin-right: auto;
}

/* ── Chrome header (manuscript folio) — every page ──────────────── */

.page-head {
  border-bottom: 1px solid var(--rule);
}
.page-head__inner {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 22px var(--pad-x-mobile);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
@media (min-width: 720px) {
  .page-head__inner { padding: 26px var(--pad-x-desktop); }
}
.page-head__cross {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  text-decoration: none;
  border: 0;
  flex: 0 0 auto;
}
.page-head__cross svg {
  width: 22px;
  height: 22px;
  display: block;
}
.page-head__brand {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  border: 0;
  flex: 1 1 auto;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.page-head__slug {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-soft);
  flex: 0 0 auto;
  white-space: nowrap;
}
@media (max-width: 540px) {
  .page-head__brand { font-size: 11px; letter-spacing: 0.18em; }
  .page-head__slug  { display: none; }
}

/* Hero overrides on home — without the embedded wordmark */
.hero--no-mark { padding-top: 6vh; }
.hero--no-mark .hero__inner {
  grid-template-rows: 1fr auto;
}

/* ── Section anchor (P1 home, P5 legal) ─────────────────────────── */

.anchored {
  text-align: center;
  margin: 0 auto 24px;
}
.anchored__eyebrow {
  display: block;
  margin: 0 0 24px;
  color: var(--ink-soft);
}
.anchored__mark {
  display: block;
  width: 26px;
  height: 26px;
  margin: 0 auto 22px;
  color: var(--ink);
}
.anchored__rule {
  display: block;
  width: 64px;
  height: 1px;
  border: 0;
  background: var(--rule);
  margin: 0 auto 32px;
}

/* ── Tier dividers (P2) and tier-V asterism ─────────────────────── */

.tier__divider {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px 0 20px;
  color: var(--ink-soft);
}
.tier__divider svg {
  width: 28px;
  height: auto;
  display: block;
}
.tier__divider--book svg,
.tier__divider--mortar svg { width: 36px; }
.tier__divider--easel svg { width: 28px; }

.tier-asterism {
  display: block;
  margin: 0 0 18px;
  font-family: var(--font-body);
  font-size: 16px;
  letter-spacing: 0.6em;
  color: var(--gold-leaf);
}

/* ── Page-marks: small chi-rho between paragraph groups (P5) ────── */

.page-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 56px 0 48px;
  color: var(--ink-soft);
}
.page-mark svg {
  width: 22px;
  height: 22px;
  display: block;
}

/* ── Placeholder figures (P3 services, P7 contact) ──────────────── */

.placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin: 32px auto 0;
  padding: 0;
  max-width: 56ch;
}
.placeholder__mark {
  display: block;
  width: 72px;
  height: auto;
  margin: 0 0 28px;
  color: var(--ink);
}
.placeholder__mark--small {
  width: 32px;
}
.placeholder__line {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 18px;
  line-height: 1.55;
  color: var(--ink);
  margin: 0;
  max-width: 48ch;
}

/* ── About figures (P6) — easel + book companion side by side ──── */

.about-figures {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 48px;
  margin-top: 48px;
  flex-wrap: wrap;
}
.about-figures .figure-mark { margin: 0; }
.about-figures__companion {
  display: block;
  width: 56px;
  height: auto;
  color: var(--ink-soft);
  margin-top: 32px;
}
@media (max-width: 540px) {
  .about-figures { gap: 28px; }
  .about-figures__companion { width: 44px; margin-top: 16px; }
}

/* ── CSP-clean utility classes (replace inline style="…" attrs) ──── */

.folio--center { text-align: center; }
.hero__icon--lg { width: 280px; }
.t-smallcaps--soft { color: var(--ink-soft); }
.t-caption-display {
  font-style: italic;
  font-size: 28px;
  line-height: 1.2;
  margin: 0 0 24px;
}
.rule--short {
  width: 64px;
  margin: 0 auto 24px;
}
.legal__signature {
  color: var(--ink-soft);
  margin-top: 48px;
  font-style: italic;
}
.return-link { margin-top: 64px; }

/* ── Gutter drolleries (P2-2) — only at >1400px viewport ──────────── */

.drollery { display: none; }
@media (min-width: 1400px) {
  .drollery {
    display: block;
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    width: 56px;
    height: auto;
    color: var(--ink-soft);
    opacity: 0.42;
    pointer-events: none;
    z-index: 1;
  }
  .drollery--left  { left: 36px; }
  .drollery--right { right: 36px; }
}

/* ── Tier-mention emphasis (P2-5, set by enhance.js) ─────────────── */

.tier-mention {
  font-style: italic;
  color: var(--ink);
  font-variant: small-caps;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

/* ── Polish-4b: theme toggle (chrome header right-cluster) ─────────
 *
 * Polish-3 placed the toggle in the footer; Polish-4b moves it into
 * the chrome header alongside .page-head__lang. The link selector is
 * still [data-theme-toggle] so theme.js's contract is preserved. The
 * toggle has two parts: a manuscript-spark glyph (✦) and a one-word
 * label that reads as the *target* theme (so the affordance reads
 * "click to enter X mode"):
 *   - Warmer active → label "severe"
 *   - Severe active → label "warmer"
 * theme.js owns the swap.
 */
.page-head__theme {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  margin: 0;
  flex: 0 0 auto;
}
.page-head__theme a {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  cursor: pointer;
  transition: border-bottom-color var(--dur-fast) var(--ease-out-quart),
              color var(--dur-fast) var(--ease-out-quart);
}
.page-head__theme a:hover {
  border-bottom-color: var(--ink);
}
.page-head__theme a:focus-visible {
  outline: 2px solid var(--lapis);
  outline-offset: 3px;
}
.page-head__theme-mark {
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0;
  color: var(--gold-leaf);
  line-height: 1;
}
.page-head__theme-label {
  letter-spacing: 0.22em;
}
@media (max-width: 540px) {
  .page-head__theme a { font-size: 10px; letter-spacing: 0.18em; padding-bottom: 1px; }
  .page-head__theme-mark { font-size: 11px; }
}
@media (max-width: 420px) {
  .page-head__theme-label { display: none; }
  .page-head__theme a { padding: 2px 4px; }
}

/* ── Polish-3: language toggle (manuscript header) ────────────────── */
/*
 * Two text links (EN · RU) at the right of the manuscript header,
 * after the page slug. The active language drops out of Cinzel
 * smallcaps into Cardo italic at the same x-height (mirrors the
 * footer-nav active treatment from D23). Hebrew is decorative on
 * home only and is NOT in the toggle.
 */
.page-head__lang {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  margin: 0;
  flex: 0 0 auto;
}
.page-head__lang a {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: border-bottom-color var(--dur-fast) var(--ease-out-quart);
}
.page-head__lang a:hover { border-bottom-color: var(--ink); }
.page-head__lang a:focus-visible {
  outline: 2px solid var(--lapis);
  outline-offset: 3px;
}
.page-head__lang a[aria-current="page"] {
  font-family: var(--font-body);
  font-style: italic;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--ink-soft);
  border-bottom: 0;
  padding-bottom: 0;
}
.page-head__lang a[aria-current="page"]:hover { border-bottom: 0; }
.page-head__lang-sep {
  color: var(--ink-soft);
  font-size: 11px;
  user-select: none;
}
@media (max-width: 540px) {
  .page-head__lang { font-size: 10px; }
  .page-head__lang a { letter-spacing: 0.18em; padding-bottom: 1px; }
}

/* ── Polish-3: tier-name dual display (Warmer English / Severe Greek) ── */
/*
 * Both spellings rendered into the HTML; CSS hides the inactive one
 * based on data-theme. The toggle is therefore a pure CSS swap with
 * no JS DOM mutation, no flash, no a11y disruption (the lang="grc"
 * attribute on the Severe span tells screen readers to pronounce
 * the Greek correctly when active).
 */
.tier__name--severe { display: none; }
:root[data-theme="severe"] .tier__name--warmer { display: none; }
:root[data-theme="severe"] .tier__name--severe { display: inline; }

/* ── Polish-3: SVG fill classes (theme-aware fills) ──────────────── */
/*
 * Inline SVG presentation attributes (fill="oklch(...)") are not
 * theme-reactive on their own. These classes attach to specific
 * fill regions so they pick up the current --gold-leaf / --cinnabar
 * tokens via CSS instead of carrying a hardcoded literal. Visual
 * is unchanged in Warmer; becomes more saturated in Severe.
 */
.svg-fill-gold      { fill: var(--gold-leaf); }
.svg-fill-gold-mid  { fill: var(--gold-leaf); fill-opacity: 0.45; }
.svg-fill-gold-soft { fill: var(--gold-leaf); fill-opacity: 0.4; }
.svg-fill-gold-pale { fill: var(--gold-leaf); fill-opacity: 0.35; }
.svg-fill-bone      { fill: var(--bone); }
.svg-fill-cinnabar  { fill: var(--cinnabar); }
.svg-fill-cinnabar-soft { fill: var(--cinnabar); fill-opacity: 0.78; }
.svg-stroke-cinnabar { stroke: var(--cinnabar); }
.svg-stroke-bone     { stroke: var(--bone); }

/* ──────────────────────────────────────────────────────────────────
 *  POLISH-4B
 *  Maximalist Severe theme + ornamental layer.
 *  Suspended for this pass: the 25-30% negative-space minimum and the
 *  no-decorative-ornaments reading. Mizrahi bands, pomegranates, and
 *  Hebrew calligraphic flourishes are authentic manuscript ornaments.
 *  See SHAPE-POLISH-4B.md, decisions D34-D37.
 * ────────────────────────────────────────────────────────────────── */

/* ── Top-of-page ornament band ──────────────────────────────────── */
/*
 * A thin Mizrahi-style geometric border at the very top of every
 * page, above the chrome header. The SVG is loaded as a CSS
 * background-image rather than inline so the markup stays clean and
 * the band tiles seamlessly horizontally. In Warmer it's a 6 px
 * ink-soft hairline; in Severe it deepens to 10 px and tints
 * gold-pale to read as gold-leafed.
 */
.ornament-band {
  display: block;
  width: 100%;
  height: 6px;
  margin: 0;
  padding: 0;
  background-image: url('/assets/img/ornaments/mizrahi-band.svg');
  background-repeat: repeat-x;
  background-position: center;
  background-size: 120px 6px;
  color: var(--ink-soft);
  opacity: 0.5;
}
:root[data-theme="severe"] .ornament-band {
  height: 10px;
  background-size: 120px 10px;
  color: var(--gold-leaf);
  opacity: 0.75;
}

/* ── Centered single ornament (empty-space stamps, prose breaks) ─── */
.ornament-stamp {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 24px 0;
  color: var(--ink-soft);
}
.ornament-stamp svg {
  display: block;
  width: 56px;
  height: auto;
}
.ornament-stamp--sm svg { width: 32px; }
.ornament-stamp--md svg { width: 48px; }
.ornament-stamp--lg svg { width: 72px; }
:root[data-theme="severe"] .ornament-stamp { color: var(--gold-deep); }

/* ── Tier gutter ornaments (services.html) ──────────────────────── */
/*
 * A small ornament sits inline at the top of each tier__body, before
 * the tier__name. In Warmer it reads as a manuscript margin-mark; in
 * Severe it tints gold to anchor the page's manuscript feel.
 */
.tier__gutter-mark {
  display: block;
  width: 24px;
  height: auto;
  margin: 0 0 8px;
  color: var(--ink-soft);
}
:root[data-theme="severe"] .tier__gutter-mark { color: var(--gold-leaf); }

/* ── Inter-paragraph flourish (FAQ / privacy / terms / subscribe) ──
 *
 * Two patterns supported:
 *   (a) Wrapper-with-inline-SVG-child — used for one-offs where the
 *       ornament needs custom geometry. Class: .qa-flourish /
 *       .legal-flourish / .subscribe-flourish, holding an <svg>.
 *   (b) Mask-based pure-CSS — the ornament is loaded from an external
 *       SVG via mask-image, and the visible color is currentColor
 *       (or the explicit background-color set below). Compact markup:
 *       <div class="flourish flourish--1"></div>. Used for the
 *       repeated FAQ / privacy / terms inter-paragraph flourishes
 *       (6+ per page; inline-SVG bloat is undesirable).
 */
.qa-flourish,
.legal-flourish,
.subscribe-flourish {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 28px 0;
  color: var(--ink-soft);
  opacity: 0.7;
}
.qa-flourish svg,
.legal-flourish svg,
.subscribe-flourish svg {
  display: block;
  width: 88px;
  height: auto;
}
:root[data-theme="severe"] .qa-flourish,
:root[data-theme="severe"] .legal-flourish,
:root[data-theme="severe"] .subscribe-flourish {
  color: var(--gold-deep);
  opacity: 0.85;
}

/* (b) Mask-based compact flourish. */
.flourish {
  display: block;
  width: 96px;
  height: 24px;
  margin: 32px auto;
  background-color: var(--ink-soft);
  -webkit-mask: url('/assets/img/ornaments/flourish-2.svg') center/contain no-repeat;
          mask: url('/assets/img/ornaments/flourish-2.svg') center/contain no-repeat;
  opacity: 0.7;
}
.flourish--1 {
  -webkit-mask-image: url('/assets/img/ornaments/flourish-1.svg');
          mask-image: url('/assets/img/ornaments/flourish-1.svg');
}
.flourish--3 {
  -webkit-mask-image: url('/assets/img/ornaments/flourish-3.svg');
          mask-image: url('/assets/img/ornaments/flourish-3.svg');
}
:root[data-theme="severe"] .flourish {
  background-color: var(--gold-deep);
  opacity: 0.85;
}

/* Mask-based magen-david for chapter starts on terms/privacy. */
.chapter-mark {
  display: block;
  width: 28px;
  height: 28px;
  margin: 36px auto 24px;
  background-color: var(--ink-soft);
  -webkit-mask: url('/assets/img/ornaments/magen-david.svg') center/contain no-repeat;
          mask: url('/assets/img/ornaments/magen-david.svg') center/contain no-repeat;
  opacity: 0.55;
}
:root[data-theme="severe"] .chapter-mark {
  background-color: var(--gold-leaf);
  opacity: 0.9;
}

/* Mask-based pomegranate / olive ornaments for tier gutters and
 * margin scatter. The container sets size; the modifier sets the
 * mask source. */
.mark--pomegranate-1 {
  display: block;
  aspect-ratio: 32 / 40;
  background-color: currentColor;
  -webkit-mask: url('/assets/img/ornaments/pomegranate-1.svg') center/contain no-repeat;
          mask: url('/assets/img/ornaments/pomegranate-1.svg') center/contain no-repeat;
}
.mark--pomegranate-2 {
  display: block;
  aspect-ratio: 32 / 40;
  background-color: currentColor;
  -webkit-mask: url('/assets/img/ornaments/pomegranate-2.svg') center/contain no-repeat;
          mask: url('/assets/img/ornaments/pomegranate-2.svg') center/contain no-repeat;
}
.mark--olive {
  display: block;
  aspect-ratio: 64 / 32;
  background-color: currentColor;
  -webkit-mask: url('/assets/img/ornaments/olive-branch.svg') center/contain no-repeat;
          mask: url('/assets/img/ornaments/olive-branch.svg') center/contain no-repeat;
}
.mark--hamsa {
  display: inline-block;
  aspect-ratio: 36 / 44;
  background-color: currentColor;
  -webkit-mask: url('/assets/img/ornaments/hamsa.svg') center/contain no-repeat;
          mask: url('/assets/img/ornaments/hamsa.svg') center/contain no-repeat;
  vertical-align: middle;
}
.mark--yemenite {
  display: block;
  aspect-ratio: 1 / 1;
  background-color: currentColor;
  -webkit-mask: url('/assets/img/ornaments/yemenite-corner.svg') center/contain no-repeat;
          mask: url('/assets/img/ornaments/yemenite-corner.svg') center/contain no-repeat;
}

/* ── About-page corner + hamsa ─────────────────────────────────── */
/*
 * Yemenite filigree corner ornament sits at the top-right of the
 * about page's title area. Hamsa sits inline next to the title-block
 * eyebrow. Both subtle by default; in Severe both gain saturation.
 */
.about-corner {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 48px;
  height: 48px;
  color: var(--ink-soft);
  opacity: 0.55;
  pointer-events: none;
}
.about-hamsa {
  display: inline-block;
  width: 22px;
  height: auto;
  margin-right: 10px;
  vertical-align: middle;
  color: var(--ink-soft);
}
:root[data-theme="severe"] .about-corner { color: var(--gold-deep); opacity: 0.8; }
:root[data-theme="severe"] .about-hamsa  { color: var(--gold-leaf); }
@media (max-width: 720px) {
  .about-corner { display: none; }
}

/* ── About prose margin scatter (pomegranate / olive in margins) ── */
.prose-mark {
  display: block;
  width: 32px;
  height: auto;
  color: var(--ink-soft);
  opacity: 0.5;
}
.prose-mark--right { float: right; margin: 4px 0 16px 24px; }
.prose-mark--left  { float: left;  margin: 4px 24px 16px 0; }
:root[data-theme="severe"] .prose-mark { color: var(--gold-leaf); opacity: 0.75; }
@media (max-width: 720px) {
  .prose-mark--right, .prose-mark--left {
    float: none;
    margin: 16px auto;
  }
}

/* ── Empty-space tighter-padding modifier (D37) ─────────────────── */
.section--tight    { padding: 48px 0; }
.section--tighter  { padding: 32px 0; }
/* For the home Maaseh Oman caption section: cuts the gap from
 * 64 to 48 (–25%); paired with an olive-branch ornament-stamp inserted
 * into the gap, this turns dead bone into a felt typographic moment. */
.section.section--tight  { padding: 48px 0; }
.section--quiet.section--tighter { padding: 32px 0; }

/* ──────────────────────────────────────────────────────────────────
 *  SEVERE-ONLY TREATMENTS (D35)
 *
 *   (a) Gold-drenched hero on home
 *   (b) Cinnabar drop caps on more pages
 *   (c) Display-sized Hebrew tier names with niqqud visible
 *   (d) Roman numerals enlarged
 *   (e) Mizrahi border bands replacing tier rules
 *   (f) Severe paper texture
 * ────────────────────────────────────────────────────────────────── */

/* (f) Paper texture under everything. */
:root[data-theme="severe"] body {
  background-color: var(--bone);
  background-image: url('/assets/img/ornaments/paper-texture.svg');
  background-repeat: repeat;
  background-size: 160px 160px;
}

/* (a) Hero is a gold-drenched panel — the icon integrates with its
 * background instead of floating on bone. The gradient softens to
 * parchment at the bottom edge so the next section's bone takes over
 * smoothly. */
:root[data-theme="severe"] .hero {
  background: linear-gradient(
    to bottom,
    var(--gold-pale) 0%,
    var(--gold-pale) 78%,
    var(--bone) 100%
  );
}

/* (b) Cinnabar drop-cap on more prose pages. */
:root[data-theme="severe"] .prose .severe-dropcap::first-letter,
:root[data-theme="severe"] .legal .severe-dropcap::first-letter,
:root[data-theme="severe"] .qa__a.severe-dropcap::first-letter {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 56px;
  line-height: 0.9;
  float: left;
  padding: 6px 12px 0 0;
  color: var(--cinnabar);
}

/* (c) Hebrew tier names display-sized with niqqud crisp at 32 px. */
:root[data-theme="severe"] .tier__name--severe {
  font-family: var(--font-hebrew);
  font-size: 32px;
  line-height: 1.05;
  letter-spacing: 0;
  text-transform: none;
  font-weight: 400;
  display: inline-block;
}
:root[data-theme="severe"] .tier__name {
  margin-bottom: 14px;
}

/* (d) Roman numerals and the asterism enlarge in Severe. */
:root[data-theme="severe"] .tier__numeral {
  font-size: 40px;
  letter-spacing: 0.06em;
}
:root[data-theme="severe"] .tier-asterism {
  font-size: 18px;
  letter-spacing: 0.7em;
  margin-bottom: 22px;
}

/* (e) Tier section borders gain a Mizrahi pattern in Severe. The
 * 1 px gold rule is replaced by the SVG band positioned as a
 * background centered above the tier. The border itself is left as
 * transparent so it occupies the same vertical rhythm. */
:root[data-theme="severe"] .tier {
  border-top-color: transparent;
  position: relative;
  padding-top: 48px;
}
:root[data-theme="severe"] .tier::before {
  content: "";
  position: absolute;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  width: 160px;
  height: 8px;
  background-image: url('/assets/img/ornaments/mizrahi-band.svg');
  background-repeat: repeat-x;
  background-size: 120px 8px;
  background-position: center;
  color: var(--gold-leaf);
  opacity: 0.85;
}
:root[data-theme="severe"] .tier:last-child {
  border-bottom-color: transparent;
}
:root[data-theme="severe"] .tier:last-child::after {
  content: "";
  display: block;
  width: 160px;
  height: 8px;
  margin: 36px auto 0;
  background-image: url('/assets/img/ornaments/mizrahi-band.svg');
  background-repeat: repeat-x;
  background-size: 120px 8px;
  background-position: center;
  opacity: 0.85;
}

/* QA borders and legal h2 separators get the same band on Severe. */
:root[data-theme="severe"] .qa__item {
  border-top-color: transparent;
  position: relative;
  padding-top: 48px;
}
:root[data-theme="severe"] .qa__item::before {
  content: "";
  position: absolute;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  width: 140px;
  height: 6px;
  background-image: url('/assets/img/ornaments/mizrahi-band.svg');
  background-repeat: repeat-x;
  background-size: 120px 6px;
  background-position: center;
  opacity: 0.7;
}
:root[data-theme="severe"] .qa__item:last-child { border-bottom-color: transparent; }

/* Subscribe section's top rule replaced too. */
:root[data-theme="severe"] .subscribe {
  border-top-color: transparent;
  position: relative;
  padding-top: 84px;
}
:root[data-theme="severe"] .subscribe::before {
  content: "";
  position: absolute;
  top: 32px;
  left: 50%;
  transform: translateX(-50%);
  width: 160px;
  height: 8px;
  background-image: url('/assets/img/ornaments/mizrahi-band.svg');
  background-repeat: repeat-x;
  background-size: 120px 8px;
  background-position: center;
  opacity: 0.85;
}

/* Severe also gains a subtle illuminated-initial treatment on the
 * existing about.html dropcap: a small box around the first letter
 * with a gold-leaf hairline. The dropcap class still drives the
 * cinnabar character; this rule adds the box. */
:root[data-theme="severe"] .dropcap::first-letter {
  background: var(--gold-pale);
  padding: 8px 14px 4px;
  margin-right: 14px;
  border: 1px solid var(--gold-leaf);
  color: var(--cinnabar);
}

/* The home Maaseh Oman caption gains a lapis-tinted gold underline
 * in Severe, marking the threshold from gold-drenched hero to
 * parchment body. */
:root[data-theme="severe"] .t-caption-display {
  color: var(--ink);
}
:root[data-theme="severe"] .rule--short {
  background: var(--gold-leaf);
  height: 2px;
}

/* Drolleries (gutter ornaments at >1400px) get a gold tint in
 * Severe so they pick up the manuscript feel on wide screens. */
:root[data-theme="severe"] .drollery {
  color: var(--gold-deep);
  opacity: 0.55;
}

/* Page-mark Aleph stays ink-soft in Warmer; gains gold in Severe. */
:root[data-theme="severe"] .page-mark { color: var(--gold-deep); }

/* Title-block mark gains gold in Severe (was ink). */
:root[data-theme="severe"] .title-block__mark { color: var(--gold-deep); }

/* The tier-V cinnabar V keeps cinnabar in both themes; the asterism
 * above it stays gold (existing rule). In Severe, both swell with
 * the same scale rules above. */

/* ──────────────────────────────────────────────────────────────────
 *
 *  Polish-4c · 2026-05-09 · Severe gets the V2 07 composition lift
 *
 *  Reference: blessings-v2/variants/07-iconography/index.html.
 *  Companion docs: POLISH-4C-KICKOFF.md, SHAPE-POLISH-4C.md, D38, D39.
 *
 *  Why this block exists: Polish-3 / 4 / 4b each layered token nudges
 *  on top of Warmer's composition and Severe never read as visually
 *  distinct. Polish-4c stops nudging tokens and lifts V2 07's
 *  composition wholesale into Severe: full-bleed two-panel hero with
 *  a barber-pole rule, big Cardo display, full-bleed alternating
 *  gold bands separated by 4 px double cinnabar, enlarged tier
 *  numerals + Hebrew, solid cinnabar CTAs, and a dark Hebrew footer.
 *
 *  Warmer is not modified; every rule below is theme-scoped to
 *  :root[data-theme="severe"]. New severe-only DOM nodes are hidden
 *  in Warmer at the bottom of this block.
 *
 *  ────────────────────────────────────────────────────────────── */

/* New severe-only DOM nodes default to display:none so Warmer is
 * unchanged when these elements are added to the static HTML. */
.hero__eyebrow,
.hero__display,
.hero__display-trans,
.foot__hebrew,
.foot__hebrew-trans { display: none; }

/* (1) HERO — full-bleed two-panel grid (V2 07 .icon-hero) ────── */

:root[data-theme="severe"] .hero {
  /* Override the Polish-4b gradient + 14vh padding. The hero now
   * fills the viewport on first paint and supplies its own
   * gradient panel-by-panel via .hero__icon and .hero__caption. */
  background: transparent;
  padding: 0;
  min-height: 100svh;
  /* Break out of any wrapping container to span the viewport. */
  margin-inline: calc(50% - 50vw);
  width: 100vw;
}

:root[data-theme="severe"] .hero--no-mark { padding-top: 0; }

:root[data-theme="severe"] .hero__inner {
  /* The Polish-3 .hero__inner is a centered 1100 px stack. In Severe
   * it becomes a viewport-wide 2-column grid with no padding; the
   * panels themselves carry padding. */
  max-width: none;
  padding: 0;
  min-height: 100svh;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: auto;
  align-items: stretch;
  gap: 0;
}
@media (max-width: 900px) {
  :root[data-theme="severe"] .hero__inner {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
  }
}

/* Left panel — radial-gold ground for the Pantokrator SVG. */
:root[data-theme="severe"] .hero__icon {
  background:
    radial-gradient(60% 50% at 50% 35%,
      var(--gold-pale),
      var(--gold-leaf) 60%,
      var(--gold-deep) 100%);
  margin: 0;
  width: auto;
  align-self: stretch;
  justify-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(24px, 4vw, 80px);
  border-right: 4px double var(--cinnabar);
  position: relative;
}
@media (max-width: 900px) {
  :root[data-theme="severe"] .hero__icon {
    border-right: 0;
    border-bottom: 4px double var(--cinnabar);
    min-height: 70svh;
  }
}
:root[data-theme="severe"] .hero__icon svg {
  width: 100%;
  max-width: 520px;
  height: auto;
  filter: drop-shadow(0 20px 30px oklch(0.18 0.04 85 / 0.35));
}

/* Right panel — flat gold field, vertical-centered text stack with
 * a barber-pole band along the top edge. */
:root[data-theme="severe"] .hero__caption {
  background: var(--gold-leaf);
  margin: 0;
  padding: clamp(56px, 5vw, 100px) clamp(24px, 5vw, 80px) clamp(36px, 5vw, 80px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 22px;
  flex-wrap: nowrap;
  position: relative;
  min-height: 100svh;
}
@media (max-width: 900px) {
  :root[data-theme="severe"] .hero__caption {
    min-height: auto;
    padding: clamp(56px, 8vw, 96px) clamp(24px, 5vw, 64px);
  }
}
:root[data-theme="severe"] .hero__caption::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 36px;
  background: repeating-linear-gradient(90deg,
    var(--cinnabar) 0 22px,
    var(--gold-deep) 22px 24px);
}

/* Severe-only eyebrow / display headline / transliteration. */
:root[data-theme="severe"] .hero__eyebrow {
  display: inline-block;
  margin-top: 24px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--cinnabar);
}
:root[data-theme="severe"] .hero__display {
  display: block;
  margin: 0;
  font-family: var(--font-body);
  font-weight: 700;
  font-style: normal;
  font-size: clamp(80px, 12vw, 220px);
  line-height: 0.95;
  letter-spacing: -0.005em;
  text-transform: none;
  color: var(--ink);
  max-width: none;
}
:root[data-theme="severe"] .hero__display-trans {
  display: block;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cinnabar);
  margin-top: 4px;
}

/* Existing .hero__phrase becomes the V2 07 .sub element below the
 * display. We override the Polish-3 16 px italic to V2 07's larger
 * cardo italic clamp. */
:root[data-theme="severe"] .hero__phrase {
  font-family: var(--font-body);
  font-style: italic;
  font-size: clamp(17px, 0.4vw + 14px, 22px);
  line-height: 1.45;
  color: var(--ink);
  max-width: 44ch;
  margin: 6px 0 0;
}

/* Existing .hero__cta becomes the V2 07 .subscribe button — solid
 * cinnabar fill, bone text, hard-edged. */
:root[data-theme="severe"] .hero__cta {
  margin-top: 14px;
  padding: 14px 24px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--bone);
  background: var(--cinnabar);
  border: 1px solid var(--cinnabar);
  border-bottom: 1px solid var(--cinnabar);
  text-decoration: none;
  white-space: normal;
  transition: background var(--dur-fast) var(--ease-out-quart);
}
:root[data-theme="severe"] .hero__cta:hover {
  background: oklch(0.28 0.20 20);
  border-color: oklch(0.28 0.20 20);
}

/* Hide the home-page Maaseh Oman caption in Severe to avoid
 * doubling: the new hero already establishes the brand-display
 * register; the small caption is redundant in Severe. The "An icon,
 * on commission" smallcaps below it is acceptable to lose since the
 * services CTA in the hero carries the same intent. */
:root[data-theme="severe"] .section--tight {
  display: none;
}

/* (2) FULL-BLEED ALTERNATING SECTION BANDS ──────────────────── */

/* Pull each major section out of its folio (max-width 1100 px or
 * 640 px) by negative-margin so it spans viewport-edge to viewport-
 * edge in Severe; section padding then re-centers the inner
 * content. Inner content max-widths (.t-body 68 ch, .tier__desc
 * 56 ch) keep readability at viewport widths up to 1920 px. */
:root[data-theme="severe"] .section,
:root[data-theme="severe"] .tiers,
:root[data-theme="severe"] .subscribe {
  margin-inline: calc(50% - 50vw);
  padding-block: clamp(72px, 9vw, 140px);
  padding-inline: clamp(24px, 5vw, 80px);
  border-top: 4px double var(--cinnabar);
  background: var(--gold-deep);
  position: relative;
}

/* Alternate gold-deep ↔ gold-leaf via :nth-of-type. All major
 * banded blocks are <section> elements (.section, .tiers,
 * .subscribe), so they share the nth-of-type counter naturally. */
:root[data-theme="severe"] section.section:nth-of-type(even),
:root[data-theme="severe"] section.tiers:nth-of-type(even),
:root[data-theme="severe"] section.subscribe:nth-of-type(even) {
  background: var(--gold-leaf);
}

/* The Polish-2 .section--quiet padding (44 px) is reverted in
 * Severe per D38 — sections all use the V2 07 spec spacing. */
:root[data-theme="severe"] .section--quiet,
:root[data-theme="severe"] .section--tighter {
  padding-block: clamp(72px, 9vw, 140px);
}

/* Inner content max-width for prose-heavy sections — center the
 * paragraphs in the wider band so they don't drift to the left
 * edge of a 1920 px viewport. */
:root[data-theme="severe"] .section > .t-body,
:root[data-theme="severe"] .section > p.t-body,
:root[data-theme="severe"] .subscribe > .t-body,
:root[data-theme="severe"] .subscribe > p.t-body {
  margin-left: auto;
  margin-right: auto;
}

/* (3) TIERS — enlarged numerals, enlarged Hebrew, cinnabar CTA  */

/* Override Polish-4b sizing: Roman numeral 40→60 px, Hebrew 32→48 px. */
:root[data-theme="severe"] .tier__numeral {
  font-size: 60px;
  letter-spacing: 0.04em;
}
:root[data-theme="severe"] .tier__name--severe {
  font-size: 48px;
  line-height: 1.05;
}

/* The Polish-4b ::before mizrahi band sits at top:16px and the tier
 * gets padding-top:48px. With 60 px numerals the visual top of the
 * tier rises; bump the padding so the numeral and the band don't
 * collide. */
:root[data-theme="severe"] .tier {
  padding-top: 64px;
}
:root[data-theme="severe"] .tier::before {
  top: 22px;
}

/* The cadence line softens to ink-soft cardo italic — no smallcaps,
 * no tracking — so the eye lands on the larger Hebrew + numeral
 * first. */
:root[data-theme="severe"] .tier__cadence {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 18px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-soft);
}

/* Tier CTAs adopt the V2 07 solid-cinnabar treatment, matching the
 * hero CTA. */
:root[data-theme="severe"] .tier__cta {
  padding: 14px 24px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--bone);
  background: var(--cinnabar);
  border: 1px solid var(--cinnabar);
}
:root[data-theme="severe"] .tier__cta:hover {
  background: oklch(0.28 0.20 20);
  color: var(--bone);
  border-color: oklch(0.28 0.20 20);
}

/* (4) FOOTER — dark band with Hebrew display line ─────────────── */

:root[data-theme="severe"] .foot {
  background: var(--shadow);
  border-top: 4px double var(--cinnabar);
  margin-top: 0;
  padding: clamp(56px, 7vw, 110px) 0 clamp(40px, 5vw, 80px);
  /* Break out of the implicit body width — footer is direct child of
   * <body> so 100vw is safe here. */
}
:root[data-theme="severe"] .foot__inner {
  padding-inline: clamp(24px, 5vw, 80px);
  gap: 18px;
}

/* Severe-only Hebrew display line + transliteration sit at the top
 * of the footer, right under the nav row. */
:root[data-theme="severe"] .foot__hebrew {
  display: block;
  margin: 24px 0 0;
  font-family: var(--font-hebrew);
  font-weight: 400;
  font-size: clamp(24px, 2vw + 12px, 40px);
  letter-spacing: 0.04em;
  line-height: 1.2;
  color: var(--gold-leaf);
}
:root[data-theme="severe"] .foot__hebrew-trans {
  display: block;
  margin: 6px 0 0;
  font-family: var(--font-body);
  font-style: italic;
  font-size: 16px;
  color: var(--gold-pale);
}

/* Recolor the existing footer text from ink to gold tones. */
:root[data-theme="severe"] .foot__nav a,
:root[data-theme="severe"] .foot__address,
:root[data-theme="severe"] .foot__colophon {
  color: var(--gold-leaf);
}
:root[data-theme="severe"] .foot__nav a:hover {
  border-bottom-color: var(--gold-leaf);
}
:root[data-theme="severe"] .foot__nav a[aria-current="page"] {
  color: var(--gold-pale);
}
:root[data-theme="severe"] .foot__nav-sep {
  color: var(--gold-pale);
}
:root[data-theme="severe"] .foot__greek,
:root[data-theme="severe"] .foot__copy {
  color: var(--gold-pale);
}

/* End Polish-4c block. */