/* ============================================================
   SOBOR — Theme 14 · the embroidered parish
   Demo organization: St. Olga of Kyiv Orthodox Church
   Type: Alegreya · Alegreya Sans
   Grammar: linen cream, rushnyk embroidery bands in oxblood
   and forest, cross-stitch ornament. Warm village formality.
   ============================================================ */

:root {
  --s-linen: oklch(0.955 0.012 85);
  --s-flax: oklch(0.92 0.02 85);
  --s-forest: oklch(0.33 0.05 155);
  --s-ink: oklch(0.28 0.03 60);
  --s-ink-dim: oklch(0.28 0.03 60 / 0.66);
  --s-oxblood: oklch(0.42 0.13 25);
  --s-wheat: oklch(0.72 0.1 85);
  --s-line: oklch(0.28 0.03 60 / 0.16);
  --s-serif: "Alegreya", Georgia, serif;
  --s-sans: "Alegreya Sans", system-ui, sans-serif;
  --s-ease: cubic-bezier(0.3, 0.9, 0.3, 1);

  /* ============================================================
     STUDIO BRIDGE — canonical --ad-* palette for the Parish Studio
     back-office reskin. Derived from SOBOR's own primitives above.
     The public face is warm linen + oxblood floss on a forest ground;
     a back-office stays on the theme's LINEN paper (its lightest base
     surface) with deep warm ink, so long admin sessions read clean and
     legible. Both threads carry through: oxblood is the primary action
     accent, forest the secondary (status / nav) accent. Contrast: deep
     warm ink (--s-ink) on linen passes AAA; the muted ink (--s-ink-dim,
     ~0.66 alpha over linen) holds ≥ 4.5:1 for secondary text.
     ============================================================ */
  --ad-surf:     oklch(0.955 0.012 85);            /* linen — the paper ground */
  --ad-surf-2:   oklch(0.985 0.006 90);            /* a raised, brighter cream for cards/panels */
  --ad-txt:      oklch(0.28 0.03 60);              /* deep warm ink — primary */
  --ad-txt-dim:  oklch(0.28 0.03 60 / 0.66);       /* muted ink — secondary */
  --ad-accent:   oklch(0.42 0.13 25);              /* oxblood floss — the primary action accent */
  --ad-accent-2: oklch(0.33 0.05 155);             /* forest — the secondary (status / nav) accent */
  --ad-rule:     oklch(0.28 0.03 60 / 0.16);       /* hairline / divider on linen */
  --ad-display:  "Alegreya", Georgia, serif;       /* the embroidered serif display face */
  --ad-sans:     "Alegreya Sans", system-ui, sans-serif; /* body / UI text */
}

/* ---------- colorways ---------- */
/* SOBOR ships NO colorways — by design (AEON facet 01-COLORWAYS): warm linen +
   oxblood floss + forest ground is load-bearing identity, not a swappable vestment.
   Re-dyeing the threads (e.g. forest-leading for a Lenten cloth) would either drift
   toward NICAEA-forest or break tripwire #3 (no cool/inverted palette). The single
   rushnyk palette in :root above is the theme. Do not add html[data-colorway] rules
   here without a deliberate design pass. */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--s-linen);
  color: var(--s-ink);
  font-family: var(--s-serif);
  font-size: 18px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

::selection { background: oklch(0.72 0.1 85 / 0.35); }
img { max-width: 100%; display: block; }

/* ---------- editor hooks ---------- */

main > [data-block] {
  --surf: var(--s-linen);
  --txt: var(--s-ink);
  --txt-dim: var(--s-ink-dim);
  --rule: var(--s-line);
  --accent: var(--s-oxblood);
  background: var(--surf);
  color: var(--txt);
  padding-block: clamp(52px, 8vw, 120px);
}
main > [data-block][data-surface="b"] { --surf: var(--s-flax); }
main > [data-block][data-surface="c"] {
  --surf: var(--s-forest);
  --txt: oklch(0.95 0.015 90);
  --txt-dim: oklch(0.95 0.015 90 / 0.72);
  --rule: oklch(0.95 0.015 90 / 0.25);
  --accent: var(--s-wheat);
}
main > [data-block][data-pad="s"]  { padding-block: clamp(26px, 3.5vw, 52px); }
main > [data-block][data-pad="m"]  { padding-block: clamp(52px, 8vw, 120px); }
main > [data-block][data-pad="l"]  { padding-block: clamp(78px, 11vw, 168px); }
main > [data-block][data-pad="xl"] { padding-block: clamp(104px, 15vw, 224px); }
main > [data-block][data-align="left"] { text-align: left; }
main > [data-block] { text-align: center; }

.s-wrap { width: min(1060px, calc(100% - clamp(32px, 5vw, 88px))); margin-inline: auto; }
.s-wrap--narrow { width: min(680px, calc(100% - clamp(32px, 5vw, 88px))); margin-inline: auto; }

/* ---------- embroidery ---------- */

.s-band {
  height: 22px;
  /* cross-stitch weave: the two crossing 45/-45 floss runs (the origin's read),
     plus a centred row of wheat seed-stitch knots so the band reads as embroidered
     thread, not a vector hatch (SOBOR tripwire #1: the stitch must look WOVEN). */
  background:
    radial-gradient(circle at 50% 50%, var(--s-wheat) 0 1.6px, transparent 1.9px) 0 50% / 11px 22px repeat-x,
    repeating-linear-gradient(45deg, var(--accent) 0 5px, transparent 5px 11px),
    repeating-linear-gradient(-45deg, var(--accent) 0 5px, transparent 5px 11px);
  border-top: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  opacity: 0.85;
}
.s-band--thin { height: 10px; border-width: 1.5px; opacity: 0.6; background-size: 9px 10px, auto, auto; }

/* a band section is a flush seam — kill the block's padding-block so the stitch
   runs edge to edge (the prototype set `padding:0 !important` on the section).
   the .s-band class appears only on divider bands, so this never catches the
   rushnyk cloth or kokoshnik cards. */
main > [data-block]:has(.s-band) { padding-block: 0; }

/* cross-stitch cross glyph (pixel shadows) */
.s-stitch {
  display: inline-block;
  width: 7px; height: 7px;
  margin: 14px 24px 24px;
  background: var(--accent);
  box-shadow:
    0 -9px 0 var(--accent), 0 -18px 0 var(--accent),
    0 9px 0 var(--accent), 0 18px 0 var(--accent),
    -9px 0 0 var(--accent), 9px 0 0 var(--accent),
    -9px -9px 0 oklch(0.72 0.1 85 / 0.0);
}

/* ---------- typography ---------- */

.s-eyebrow {
  font-family: var(--s-sans);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 22px;
}

.s-display {
  font-weight: 500;
  font-size: clamp(42px, 6.6vw, 92px);
  line-height: 1.06;
  margin: 0;
  text-wrap: balance;
}
.s-display i { color: var(--accent); }

.s-h2 {
  font-weight: 500;
  font-size: clamp(30px, 4.2vw, 52px);
  line-height: 1.12;
  margin: 0 0 22px;
  text-wrap: balance;
}
.s-h2 i { color: var(--accent); }

.s-h3 { font-weight: 700; font-size: 22px; margin: 0 0 8px; }

.s-lede { font-size: clamp(19px, 1.9vw, 24px); font-style: italic; margin: 0; text-wrap: pretty; }
.s-body { color: var(--txt-dim); margin: 0; text-wrap: pretty; }

/* ---------- buttons ---------- */

.s-actions { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
[data-align="left"] .s-actions { justify-content: flex-start; }
.s-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--s-sans);
  font-weight: 700;
  font-size: 13.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--s-linen);
  background: var(--s-oxblood);
  padding: 17px 30px;
  border-radius: 2px;
  position: relative;
  transition: background 0.35s var(--s-ease), transform 0.45s var(--s-ease), box-shadow 0.35s var(--s-ease);
}
.s-btn::after {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px dashed oklch(0.95 0.015 90 / 0.55);
  border-radius: 1px;
  pointer-events: none;
}
.s-btn:hover { background: var(--s-forest); transform: translateY(-2px); }
.s-btn--ghost { background: transparent; color: var(--txt); box-shadow: inset 0 0 0 1.5px var(--accent); }
.s-btn--ghost::after { border-color: transparent; }
.s-btn--ghost:hover { background: var(--accent); color: var(--s-linen); }
/* keyboard focus — a stitched oxblood/wheat ring, never a colored left bar.
   the offset ring echoes the photo's dashed outline so focus reads "embroidered". */
.s-btn:focus-visible,
.s-btn--ghost:focus-visible {
  outline: 2px solid var(--s-wheat);
  outline-offset: 3px;
}
main > [data-block][data-surface="c"] .s-btn:focus-visible { outline-color: var(--s-linen); }

/* ---------- header ---------- */

.s-header {
  position: sticky;
  top: 0;
  z-index: 900;
  background: var(--s-linen);
  border-bottom: 2px solid var(--s-oxblood);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px clamp(18px, 4vw, 44px);
}
.s-header__mark {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--s-ink);
  font-weight: 700;
  font-size: 20px;
}
.s-header__mark svg { width: 14px; height: auto; color: var(--s-oxblood); }
.s-header nav { display: flex; gap: clamp(14px, 2.5vw, 30px); }
.s-header nav a {
  font-family: var(--s-sans);
  font-weight: 700;
  font-size: 13.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--s-ink-dim);
  text-decoration: none;
}
.s-header nav a:hover { color: var(--s-oxblood); }
/* keyboard focus across the header furniture — a bubble ring, not a left bar */
.s-header a:focus-visible,
.s-header summary:focus-visible {
  outline: 2px solid var(--s-oxblood);
  outline-offset: 4px;
  border-radius: 2px;
}

/* header nav: dropdown of children — an embroidered hanging band */
.s-header__item { position: relative; display: inline-flex; align-items: center; }
.s-header__item > a { display: inline-flex; align-items: center; gap: 5px; }
.s-header__caret { font-size: 0.62em; line-height: 1; opacity: 0.7; }
.s-header__drop {
  position: absolute;
  top: calc(100% + 11px);
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  min-width: 198px;
  background: oklch(0.985 0.006 90);
  border: 1.5px solid var(--s-oxblood);
  border-radius: 2px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  box-shadow: 0 24px 44px -28px oklch(0.28 0.03 60 / 0.5);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s var(--s-ease), transform 0.25s var(--s-ease);
  z-index: 5;
}
/* the rushnyk cross-stitch ribbon hanging from the top edge of the menu */
.s-header__drop::before {
  content: "";
  position: absolute;
  top: -1.5px; left: 0; right: 0;
  height: 8px;
  background:
    repeating-linear-gradient(45deg, var(--s-oxblood) 0 3px, transparent 3px 7px),
    repeating-linear-gradient(-45deg, var(--s-oxblood) 0 3px, transparent 3px 7px);
  opacity: 0.8;
  pointer-events: none;
}
/* invisible hover-bridge spanning the 11px gap so the cursor can travel from the
   nav item to the menu without crossing dead space (which dropped the hover and
   closed the menu). The bridge is part of the drop, so .s-header__drop:hover
   below keeps the menu open the moment the cursor enters the gap. */
.s-header__drop::after {
  content: "";
  position: absolute;
  top: -14px; left: 0; right: 0;
  height: 14px;
}
.s-header__item:hover .s-header__drop,
.s-header__item:focus-within .s-header__drop,
.s-header__drop:hover {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.s-header__drop a {
  font-family: var(--s-sans);
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--s-ink-dim);
  text-decoration: none;
  padding: 9px 12px;
  border-radius: 1px;
  white-space: nowrap;
}
.s-header__drop a:hover { color: var(--s-linen); background: var(--s-oxblood); }

/* header auth furniture */
.s-header__auth { display: flex; align-items: center; gap: 16px; margin-left: clamp(6px, 1.5vw, 18px); }
.s-header__authlink {
  font-family: var(--s-sans);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--s-oxblood);
  text-decoration: none;
  border-bottom: 1.5px solid transparent;
  padding-bottom: 1px;
}
.s-header__authlink:hover { border-bottom-color: var(--s-oxblood); }
.s-header__studio {
  font-family: var(--s-sans);
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--s-linen);
  background: var(--s-forest);
  padding: 9px 16px;
  border-radius: 2px;
  position: relative;
}
.s-header__studio::after {
  content: "";
  position: absolute;
  inset: 3px;
  border: 1px dashed oklch(0.95 0.015 90 / 0.5);
  border-radius: 1px;
  pointer-events: none;
}
.s-header__studio:hover { background: var(--s-oxblood); }

/* the right-hand cluster (nav + auth) sits together on the desktop bar */
.s-header__nav { display: flex; align-items: center; gap: clamp(14px, 2.5vw, 30px); }
.s-header__end { display: flex; align-items: center; gap: clamp(14px, 2.5vw, 26px); }

/* ---------- mobile menu (the typeset drawer) ---------- */

.s-header__menu { display: none; }
.s-header__menu > summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--s-sans);
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--s-oxblood);
}
.s-header__menu > summary::-webkit-details-marker { display: none; }
.s-header__bars { display: inline-grid; gap: 4px; }
.s-header__bars i { display: block; width: 22px; height: 2px; background: var(--s-oxblood); border-radius: 2px; }
.s-header__drawer {
  position: absolute;
  top: 100%;
  left: 0; right: 0;
  background: var(--s-linen);
  border-bottom: 2px solid var(--s-oxblood);
  display: flex;
  flex-direction: column;
  padding: 8px clamp(18px, 4vw, 44px) 26px;
}
.s-header__drawer a {
  display: flex;
  align-items: baseline;
  gap: 14px;
  font-family: var(--s-serif);
  font-weight: 500;
  font-size: 22px;
  color: var(--s-ink);
  text-decoration: none;
  padding: 13px 0;
  border-bottom: 1px dashed var(--s-line);
}
.s-header__drawer a small {
  font-family: var(--s-sans);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--s-oxblood);
  min-width: 28px;
}
.s-header__drawer a:hover { color: var(--s-oxblood); }
.s-header__drawer-sub { padding-left: 42px; font-size: 18px; }
.s-header__drawer-auth { display: flex; flex-direction: column; margin-top: 6px; }

/* ---------- rushnyk table ---------- */

.s-rushnyk {
  background: oklch(0.985 0.006 90);
  border: 1px solid var(--rule);
  text-align: left;
  position: relative;
}
.s-rushnyk::before, .s-rushnyk::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 12px;
  background:
    repeating-linear-gradient(45deg, var(--s-oxblood) 0 4px, transparent 4px 9px),
    repeating-linear-gradient(-45deg, var(--s-oxblood) 0 4px, transparent 4px 9px);
  opacity: 0.8;
}
.s-rushnyk::before { top: 0; }
.s-rushnyk::after { bottom: 0; }
.s-rushnyk__inner { padding: 30px clamp(20px, 4vw, 44px) 34px; }
.s-rushnyk__row {
  display: grid;
  grid-template-columns: 130px 96px 1fr;
  gap: clamp(14px, 3vw, 36px);
  align-items: baseline;
  padding: 16px 0;
  border-bottom: 1px dashed var(--rule);
}
.s-rushnyk__row:last-child { border-bottom: 0; }
.s-rushnyk__day {
  font-family: var(--s-sans);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--s-oxblood);
}
.s-rushnyk__time { font-weight: 700; font-size: 20px; }
.s-rushnyk__row p { margin: 0; font-size: 15.5px; color: var(--txt-dim); }

/* ---------- kokoshnik cards (scalloped) ---------- */

.s-kok { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.s-kokcard {
  background: oklch(0.985 0.006 90);
  border: 1px solid var(--rule);
  border-radius: 8px;
  /* kokoshnik ogee peak — a pointed crown at center, NOT a round arch (round-top
     is LAVRA). The peak is drawn with an inset top notch so the card silhouette
     rises to a point above the body. */
  border-top: 0;
  padding: 52px 26px 30px;
  position: relative;
  transition: transform 0.5s var(--s-ease), box-shadow 0.5s var(--s-ease);
}
/* the kokoshnik crown: a pointed ogee peak rising above the card body — two
   shoulders that sweep up to a central point. NOT a round arch (round-top is
   LAVRA). Drawn as a clipped slab in the card's own cream, ruled like the body. */
.s-kokcard::after {
  content: "";
  position: absolute;
  left: -1px; right: -1px;
  top: -32px;
  height: 33px;
  background: inherit;
  /* the peak silhouette: flat shoulders that step inward, then rise to a centre
     point — the kokoshnik ogee read, distinct from a semicircle. */
  clip-path: polygon(0 100%, 0 38%, 16% 38%, 50% 0, 84% 38%, 100% 38%, 100% 100%);
  -webkit-clip-path: polygon(0 100%, 0 38%, 16% 38%, 50% 0, 84% 38%, 100% 38%, 100% 100%);
  /* the crown is OUTLINED, not a bare cream notch: a thin oxblood stroke follows the
     ogee edge (clip-path strips borders, so the outline is painted as two stacked
     drop-shadows hugging the silhouette) plus a soft cast for cloth depth. */
  filter:
    drop-shadow(0 -1.4px 0 var(--s-oxblood))
    drop-shadow(0 1.4px 0 var(--s-oxblood))
    drop-shadow(0 -10px 16px oklch(0.28 0.03 60 / 0.16));
}
.s-kokcard:hover { transform: translateY(-5px); box-shadow: 0 24px 44px -28px oklch(0.28 0.03 60 / 0.45); }
/* beadwork at the kokoshnik point — an oxblood bead flanked by two wheat beads,
   sitting just below the crown's tip. */
.s-kokcard::before {
  content: "";
  position: absolute;
  top: -20px; left: 50%;
  z-index: 1;
  transform: translateX(-50%);
  width: 8px; height: 8px;
  background: var(--s-oxblood);
  box-shadow: -13px 12px 0 -2px var(--s-wheat), 13px 12px 0 -2px var(--s-wheat);
  border-radius: 50%;
}
[data-surface="b"] .s-kokcard { background: var(--s-linen); }
.s-kokcard p { font-size: 15px; color: var(--txt-dim); margin: 0; }

/* contrast guard — on the forest ground (surface c) the cream card faces would
   carry cream --txt (set on the block) → invisible text. Re-ink the card content
   to the warm ink so a kokoshnik/rushnyk dropped onto green stays legible, while
   the card itself keeps its cream cloth. */
[data-surface="c"] .s-kokcard,
[data-surface="c"] .s-rushnyk {
  color: var(--s-ink);
  --txt-dim: var(--s-ink-dim);
}
[data-surface="c"] .s-kokcard .s-h3,
[data-surface="c"] .s-rushnyk__time { color: var(--s-ink); }
[data-surface="c"] .s-kokcard p,
[data-surface="c"] .s-rushnyk__row p { color: var(--s-ink-dim); }

/* ---------- photo with stitched frame ---------- */

.s-photo {
  position: relative;
  border: 2px solid var(--s-oxblood);
  outline: 1px dashed var(--s-oxblood);
  outline-offset: 6px;
  overflow: hidden;
}
.s-photo img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; }
.s-photo.img-fallback { display: grid; place-items: center; min-height: 280px; background: var(--s-flax); }
.img-fallback::before {
  content: attr(data-alt);
  font-family: var(--s-sans);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--txt-dim);
}

/* ---------- quote ---------- */

.s-quote {
  font-weight: 500;
  font-style: italic;
  font-size: clamp(26px, 3.8vw, 46px);
  line-height: 1.3;
  margin: 0;
  text-wrap: balance;
}
.s-quote-cite {
  display: block;
  font-family: var(--s-sans);
  font-style: normal;
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--accent);
  margin-top: 26px;
}

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

.s-foot { text-align: center; color: var(--s-ink-dim); }
.s-foot__inner { padding: clamp(48px, 7vw, 88px) 24px 44px; }
.s-foot b {
  display: block;
  font-weight: 700;
  font-size: 26px;
  color: var(--s-ink);
  margin-bottom: 10px;
}
.s-foot p { font-size: 15.5px; margin: 4px 0; }
.s-foot nav { display: flex; justify-content: center; gap: 26px; margin-top: 20px; flex-wrap: wrap; }
.s-foot nav a {
  font-family: var(--s-sans);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--s-ink);
  text-decoration: none;
}
.s-foot nav a:hover { color: var(--s-oxblood); }
.s-foot nav a:focus-visible { outline: 2px solid var(--s-oxblood); outline-offset: 4px; border-radius: 2px; }

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

@media (prefers-reduced-motion: no-preference) {
  [data-reveal] {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.9s var(--s-ease), transform 0.9s var(--s-ease);
    transition-delay: calc(var(--rd, 0) * 100ms);
  }
  [data-reveal].in { opacity: 1; transform: none; }

  /* SOBOR's own reveal: embroidery bands are WOVEN ON — they wipe in
     horizontally from the left, as if run off the loom, rather than rising. */
  .s-band[data-reveal],
  .s-band[data-reveal].in {
    transform: none;
    clip-path: inset(0 100% 0 0);
    -webkit-clip-path: inset(0 100% 0 0);
    transition: opacity 0.6s var(--s-ease), clip-path 1.1s var(--s-ease);
    transition-delay: calc(var(--rd, 0) * 100ms);
    opacity: 1;
  }
  .s-band[data-reveal].in {
    clip-path: inset(0 0 0 0);
    -webkit-clip-path: inset(0 0 0 0);
  }
}

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

@media (max-width: 920px) {
  /* stacked cards need room for the kokoshnik peak that rises above each card. */
  .s-kok { grid-template-columns: 1fr; max-width: 380px; margin-inline: auto; gap: 44px; }
  .s-rushnyk__row { grid-template-columns: 1fr; gap: 4px; }
  .s-header__mark { font-size: 17px; }
  /* the desktop running nav + auth fold into the typeset drawer */
  .s-header__nav, .s-header__auth { display: none; }
  .s-header__menu { display: inline-flex; }
}

/* ---------- universal block adapter ----------
   The 22 generic blocks render off --surf/--txt/--txt-dim/--rule/--accent
   (set on each [data-block] above) plus --ab-display / --ab-accent and the
   six swatch tokens --ab-sw-1..6. Left to their defaults the swatches chain
   off the single oxblood accent → a flat monochrome floss set. SOBOR is a
   rushnyk palette — oxblood + forest + wheat on linen — so curate the swatch
   set by hand from the theme's own threads, so generic Stats / Numbered rows /
   accent chips read like embroidery floss, not a bright generic widget dropped
   onto the cloth. */
main {
  --ab-display: var(--s-serif);
  --ab-accent: var(--s-oxblood);
  --ab-sw-1: var(--txt);                              /* ink — primary figure */
  --ab-sw-2: var(--s-oxblood);                        /* oxblood — the warm action floss */
  --ab-sw-3: var(--s-forest);                         /* forest — the cool ground floss */
  --ab-sw-4: oklch(0.58 0.1 85);                      /* harvest wheat between the two */
  --ab-sw-5: var(--txt-dim);                          /* quiet ink */
  --ab-sw-6: oklch(0.52 0.07 40);                     /* faded madder — a softer oxblood */
}
/* on the forest ground (surface c) the curated floss re-dyes to read on green:
   the dark forest/oxblood threads would vanish, so swap to the wheat/cream set. */
main > [data-block][data-surface="c"] {
  --ab-sw-1: oklch(0.95 0.015 90);                    /* cream ink */
  --ab-sw-2: var(--s-wheat);                          /* wheat — the warm accent on green */
  --ab-sw-3: oklch(0.95 0.015 90 / 0.72);             /* quiet cream */
  --ab-sw-4: oklch(0.82 0.09 85);                     /* deeper wheat */
  --ab-sw-5: oklch(0.95 0.015 90 / 0.6);              /* faintest cream */
  --ab-sw-6: oklch(0.7 0.08 60);                      /* warm amber */
}
/* --ab-accent tracks the per-surface accent so generic eyebrows / accent chips
   re-dye to wheat on the forest ground (where flat oxblood would read dark-on-dark)
   and stay oxblood on the linen/flax surfaces. */
main > [data-block] { --ab-accent: var(--accent); }
/* universal eyebrows inherit sobor's wide cross-stitch tracking so a generic
   Heading block sits in the same embroidered register as the signatures */
main > [data-block] .ab-eyebrow { letter-spacing: 0.3em; }
/* generic figures (Stats / Numbered rows / Schedule times / Event dates) are set
   in the serif with TABULAR-NUMS so columns of numerals line up — never monospace */
main > [data-block] :is(.ab-stat b, .ab-row__no, .ab-sched__time, .ab-event__date) {
  font-family: var(--s-serif);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}


:root { --menu-surf: oklch(0.33 0.05 155 / 0.97); --menu-txt: oklch(0.95 0.015 90); --menu-accent: oklch(0.72 0.1 85); --menu-display: "Alegreya", serif; }
/* depth pass */
.s-rushnyk { box-shadow: 0 2px 4px oklch(0.28 0.03 60 / 0.06), 0 34px 70px -40px oklch(0.28 0.03 60 / 0.4); }
.s-kokcard { box-shadow: 0 1px 2px oklch(0.28 0.03 60 / 0.05), 0 14px 30px -22px oklch(0.28 0.03 60 / 0.28); }
.s-photo { box-shadow: 0 36px 70px -42px oklch(0.28 0.03 60 / 0.5); }


/* ---- signature style variants ---- */
main > [data-block][data-style="2"] .s-rushnyk { background: transparent; border: 0; box-shadow: none; }
main > [data-block][data-style="2"] .s-rushnyk::before, main > [data-block][data-style="2"] .s-rushnyk::after { display: none; }
main > [data-block][data-style="2"] .s-rushnyk__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 0; }
main > [data-block][data-style="2"] .s-rushnyk__row { grid-template-columns: 1fr; gap: 6px; border: 1.5px solid var(--s-oxblood); padding: 22px 24px; }
main > [data-block][data-style="3"] .s-rushnyk__row { padding-block: 10px; }
main > [data-block][data-style="4"] .s-rushnyk { background: var(--s-forest); color: oklch(0.95 0.015 90); }
main > [data-block][data-style="4"] .s-rushnyk::before, main > [data-block][data-style="4"] .s-rushnyk::after { background: repeating-linear-gradient(45deg, var(--s-wheat) 0 4px, transparent 4px 9px), repeating-linear-gradient(-45deg, var(--s-wheat) 0 4px, transparent 4px 9px); }
main > [data-block][data-style="4"] .s-rushnyk__day { color: var(--s-wheat); }
main > [data-block][data-style="4"] .s-rushnyk__row p { color: oklch(0.95 0.015 90 / 0.75); }
/* style 2 — Rows: flat-topped bordered rows, crown + peak removed. */
main > [data-block][data-style="2"] .s-kok { grid-template-columns: 1fr; max-width: 640px; margin-inline: auto; }
main > [data-block][data-style="2"] .s-kokcard { border-radius: 14px; border-top: 1px solid var(--rule); padding: 26px; text-align: left; }
main > [data-block][data-style="2"] .s-kokcard::before,
main > [data-block][data-style="2"] .s-kokcard::after { display: none; }
/* style 3 — Stitched: dashed oxblood card, keep the ogee crown but stitch it. */
main > [data-block][data-style="3"] .s-kokcard { border: 1.5px dashed var(--s-oxblood); border-radius: 10px; }
main > [data-block][data-style="3"] .s-kokcard::after { border-radius: 0; }
/* style 4 — Joined: a single banded strip, peaks + crowns removed. */
main > [data-block][data-style="4"] .s-kok { gap: 0; border: 2px solid var(--s-oxblood); }
main > [data-block][data-style="4"] .s-kokcard, main > [data-block][data-style="4"] .s-kokcard:hover { border-radius: 0; border: 0; border-top: 0; padding-top: 30px; transform: none; box-shadow: none; }
main > [data-block][data-style="4"] .s-kokcard::before,
main > [data-block][data-style="4"] .s-kokcard::after { display: none; }
main > [data-block][data-style="4"] .s-kokcard + .s-kokcard { border-left: 2px solid var(--s-oxblood); }
@media (max-width: 920px) {
  main > [data-block][data-style="2"] .s-rushnyk__inner { grid-template-columns: 1fr; }
  main > [data-block][data-style="4"] .s-kokcard + .s-kokcard { border-left: 0; border-top: 2px solid var(--s-oxblood); }
  /* row / stitched / joined card variants don't grow peaks, so they keep tight gaps. */
  main > [data-block][data-style="2"] .s-kok { gap: 16px; }
  main > [data-block][data-style="4"] .s-kok { gap: 0; }
}

/* mobile scale guard */
@media (max-width: 640px) { .s-display { font-size: clamp(28px, 9vw, 40px); } }

/* ============================================================
   SOBOR signature Invitation — the closing "come to the table" call.
   An embroidered card pinned to the linen: a thin cross-stitch surround
   in oxblood floss (the ::before / ::after weave runs the top + bottom
   seams, matching the rushnyk band's 45/-45 floss), a wheat-threaded
   cross-stitch crown, then the typeset call + sobor's dashed-frame button.
   Reads off --surf/--txt/--accent so it re-dyes on the forest surface.
   ============================================================ */

.s-invite {
  position: relative;
  padding: clamp(40px, 6vw, 72px) clamp(28px, 5vw, 64px) clamp(40px, 6vw, 68px);
  background: var(--surf);
  border-left: 2px solid var(--s-oxblood);
  border-right: 2px solid var(--s-oxblood);
  box-shadow: 0 1px 2px oklch(0.28 0.03 60 / 0.05), 0 30px 64px -44px oklch(0.28 0.03 60 / 0.4);
}
/* the two stitched seams — wheat seed-knots over crossing oxblood floss, the
   same weave the divider band uses, so the card reads woven, not boxed. */
.s-invite::before,
.s-invite::after {
  content: "";
  position: absolute;
  left: -2px;
  right: -2px;
  height: 16px;
  background:
    radial-gradient(circle at 50% 50%, var(--s-wheat) 0 1.4px, transparent 1.7px) 0 50% / 10px 16px repeat-x,
    repeating-linear-gradient(45deg, var(--s-oxblood) 0 4px, transparent 4px 9px),
    repeating-linear-gradient(-45deg, var(--s-oxblood) 0 4px, transparent 4px 9px);
  opacity: 0.9;
}
.s-invite::before { top: -2px; }
.s-invite::after  { bottom: -2px; }
/* the crown stitch sits flush under the top seam */
.s-invite .s-stitch { margin-top: 6px; }
/* tighten the lede inside the card so the call reads as one quiet paragraph */
.s-invite .s-lede { color: var(--txt-dim); margin-top: 4px; }

/* style 2 — Open: drop the card chrome, let the call float on the linen
   (the lavra "Open" read). The crown + dashed button still carry sobor. */
main > [data-block][data-style="2"] .s-invite {
  border: 0;
  box-shadow: none;
  background: transparent;
  padding-inline: 0;
}
main > [data-block][data-style="2"] .s-invite::before,
main > [data-block][data-style="2"] .s-invite::after { display: none; }

/* style 3 — Forest: pin the card to the deep forest ground with wheat floss,
   regardless of the block surface, for a vesper-vespers closing panel. */
main > [data-block][data-style="3"] .s-invite {
  background: var(--s-forest);
  color: oklch(0.95 0.015 90);
  border-color: var(--s-wheat);
}
main > [data-block][data-style="3"] .s-invite::before,
main > [data-block][data-style="3"] .s-invite::after {
  background:
    radial-gradient(circle at 50% 50%, var(--s-wheat) 0 1.4px, transparent 1.7px) 0 50% / 10px 16px repeat-x,
    repeating-linear-gradient(45deg, var(--s-wheat) 0 4px, transparent 4px 9px),
    repeating-linear-gradient(-45deg, var(--s-wheat) 0 4px, transparent 4px 9px);
}
main > [data-block][data-style="3"] .s-invite .s-eyebrow { color: var(--s-wheat); }
main > [data-block][data-style="3"] .s-invite .s-h2 i { color: var(--s-wheat); }
main > [data-block][data-style="3"] .s-invite .s-lede { color: oklch(0.95 0.015 90 / 0.78); }
main > [data-block][data-style="3"] .s-invite .s-btn--ghost {
  color: oklch(0.95 0.015 90);
  box-shadow: inset 0 0 0 1.5px var(--s-wheat);
}
main > [data-block][data-style="3"] .s-invite .s-btn--ghost:hover {
  background: var(--s-wheat);
  color: var(--s-forest);
}

@media (max-width: 640px) {
  .s-invite { padding-inline: clamp(20px, 6vw, 40px); }
}