/* ==========================================================================
   Church of Apeiron — "Inscription"
   Antiquity as epigraphy: stone tone, Greek capitals, hairline rules.

   Reference design: desktop 1440, mobile 390. Everything between the two
   is interpolated with clamp(), so there are no layout jumps — only two
   real breakpoints, where the grids fold.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
  /* Surface and ink */
  --paper: #e7e3d8;
  --ink: #241f1a;

  /* Gold. The mockup's #8A6A2F sits at 3.9:1 on paper, which fails WCAG AA
     for the small uppercase labels it is used on; this is the same hue,
     darkened to 4.8:1. --gold-display keeps the original for the large
     display sizes, where 3:1 is the bar. */
  --gold: #7a5c24;
  --gold-display: #8a6a2f;

  /* Ink at reduced strength. --ink-muted is the lightest tint that still
     clears 4.5:1 on paper; the fainter ones are decoration only. */
  --ink-muted: rgba(36, 31, 26, 0.68);
  --rule: rgba(36, 31, 26, 0.25);
  --rule-strong: var(--ink);
  --ink-faint: rgba(36, 31, 26, 0.32);

  --focus: var(--ink);

  /* Type */
  --display: "Cormorant Garamond", "EB Garamond", Georgia, "Times New Roman",
    serif;
  --body: "Spectral", Georgia, "Times New Roman", serif;

  --fs-hero: clamp(2.375rem, 1.586rem + 3.24vw, 4.5rem); /* 38 → 72 */
  --fs-title: clamp(2.25rem, 1.693rem + 2.29vw, 3.75rem); /* 36 → 60 */
  --fs-band: clamp(1.75rem, 1.611rem + 0.57vw, 2.125rem); /* 28 → 34 */
  --fs-section: clamp(1.625rem, 1.532rem + 0.38vw, 1.875rem); /* 26 → 30 */
  --fs-card: clamp(1.375rem, 1.329rem + 0.19vw, 1.5rem); /* 22 → 24 */
  --fs-lead: clamp(1.3125rem, 1.243rem + 0.29vw, 1.5rem); /* 21 → 24 */
  --fs-body: clamp(1.125rem, 1.079rem + 0.19vw, 1.25rem); /* 18 → 20 */
  --fs-eyebrow: clamp(0.75rem, 0.681rem + 0.29vw, 0.9375rem); /* 12 → 15 */
  --fs-nav: clamp(0.9375rem, 0.914rem + 0.1vw, 1rem); /* 15 → 16 */

  /* Rhythm */
  --gutter: clamp(1.5rem, 0.94rem + 2.29vw, 5.5rem); /* 24 → 88 */
  --band-y: clamp(2.25rem, 1.42rem + 3.43vw, 4.5rem); /* 36 → 72 */
  --measure: 42rem;
}

/* --------------------------------------------------------------------------
   2. Reset and base
   -------------------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--fs-body);
  font-weight: 300;
  line-height: 1.8;
  text-wrap: pretty;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3 {
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  line-height: 1.2;
  margin: 0;
}

p {
  margin: 0;
}

img {
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
  text-underline-offset: 0.22em;
  text-decoration-thickness: from-font;
}

em {
  font-style: italic;
}

strong {
  font-weight: 500;
}

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}

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

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* --------------------------------------------------------------------------
   3. Shared pieces
   -------------------------------------------------------------------------- */

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10;
  padding: 0.75rem 1.25rem;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--display);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.skip-link:focus {
  left: 0;
}

.eyebrow {
  font-family: var(--display);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--gold);
  line-height: 1.4;
}

.eyebrow--wide {
  letter-spacing: 0.42em;
}

.band {
  border-bottom: 1px solid var(--rule);
}

.band__inner {
  padding: var(--band-y) var(--gutter);
}

.lead {
  font-size: var(--fs-lead);
  line-height: 1.7;
}

.quiet {
  color: var(--ink-muted);
  font-style: italic;
}

/* The word "apeiron" set as an inscription inside running text. */
.term {
  font-family: var(--display);
  font-size: 1.3em;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold);
  font-style: normal;
}

/* Filled, and outlined, call to action. */
.cta {
  display: inline-block;
  padding: 1rem 2.125rem;
  background: var(--ink);
  color: var(--paper);
  border: 1px solid var(--ink);
  font-family: var(--display);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  line-height: 1.2;
  transition: background-color 0.2s, color 0.2s;
  --focus: var(--paper);
}

.cta:hover {
  background: var(--paper);
  color: var(--ink);
  text-decoration: none;
}

.cta--ghost {
  background: transparent;
  color: var(--ink);
  padding: 0.9375rem 2rem;
  letter-spacing: 0.22em;
  --focus: var(--ink);
}

.cta--ghost:hover {
  background: var(--ink);
  color: var(--paper);
}

/* --------------------------------------------------------------------------
   4. Header
   -------------------------------------------------------------------------- */

.masthead {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  padding: 1.25rem var(--gutter);
  border-bottom: 2px solid var(--rule-strong);
}

.masthead__mark {
  font-family: var(--display);
  font-size: clamp(0.9375rem, 0.87rem + 0.31vw, 1.25rem);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  white-space: nowrap;
}

.masthead__end,
.masthead__nav {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 0.3rem + 1.7vw, 2rem);
}

.masthead__nav {
  font-family: var(--display);
  font-size: var(--fs-nav);
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.masthead__nav [aria-current="page"] {
  color: var(--gold);
}

/* Language switcher: EN · UA · … built from site.locales */
.langs {
  display: flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--display);
  font-size: var(--fs-nav);
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.langs__sep {
  color: var(--ink-faint);
}

.langs [aria-current="true"] {
  color: var(--gold);
}

.langs a {
  color: var(--ink-muted);
}

/* Mobile menu — a <details> element, so it works with zero JavaScript. */
.menu {
  display: none;
}

.menu__toggle {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  list-style: none;
  cursor: pointer;
  user-select: none;
  font-family: var(--display);
  font-size: var(--fs-nav);
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.menu__toggle::-webkit-details-marker {
  display: none;
}

.menu__glyph {
  font-size: 1.25rem;
  line-height: 1;
}

.menu[open] .menu__glyph--open,
.menu:not([open]) .menu__glyph--close {
  display: none;
}

/* Dropped below the bar, absolutely, so the panel spans the full width
   while staying inside <details> where the native toggle can reach it. */
.menu__panel {
  position: absolute;
  z-index: 5;
  inset-inline: 0;
  top: calc(100% + 2px);
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border-bottom: 2px solid var(--rule-strong);
  font-family: var(--display);
  font-size: 1.375rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Direct children only — the language switcher nests its own links. */
.menu__panel > a {
  padding: 0.9rem var(--gutter);
  border-top: 1px solid var(--rule);
}

.menu__panel > a:first-child {
  border-top: 0;
}

.menu__panel .langs {
  padding: 1rem var(--gutter);
  border-top: 1px solid var(--rule);
  font-size: var(--fs-nav);
}

@media (max-width: 63.99em) {
  .masthead__end {
    display: none;
  }

  .menu {
    display: block;
  }
}

/* --------------------------------------------------------------------------
   5. Home
   -------------------------------------------------------------------------- */

.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(1.375rem, 0.9rem + 1.95vw, 2.5rem);
  padding: clamp(3.25rem, 1.4rem + 7.6vw, 6rem) var(--gutter)
    clamp(2.5rem, 1.15rem + 5.5vw, 5rem);
  text-align: center;
}

.hero__title {
  max-width: 70rem;
  font-size: var(--fs-hero);
  line-height: 1.14;
  letter-spacing: 0.03em;
}

.hero__sub {
  max-width: 37.5rem;
  font-size: var(--fs-lead);
  line-height: 1.65;
  font-style: italic;
  color: var(--ink-muted);
}

/* Two columns of running text, divided by a hairline. */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.split__col {
  display: flex;
  flex-direction: column;
  gap: 1.625rem;
  padding: var(--band-y) var(--gutter);
}

.split__col + .split__col {
  border-inline-start: 1px solid var(--rule);
}

.affirm__head {
  margin-bottom: clamp(1.625rem, 0.8rem + 3.4vw, 3rem);
}

/* Three affirmations, marked with Greek capitals. */
.affirm__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 0.1rem + 5.7vw, 3.5rem);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: affirm;
}

@counter-style greek-caps {
  system: fixed;
  symbols: "Α" "Β" "Γ" "Δ" "Ε" "Ζ";
  suffix: "";
}

.affirm__list li {
  display: flex;
  gap: clamp(1rem, 0.8rem + 0.8vw, 1.25rem);
  counter-increment: affirm;
  line-height: 1.65;
}

.affirm__list li::before {
  content: counter(affirm, greek-caps);
  font-family: var(--display);
  font-size: clamp(2.125rem, 1.9rem + 0.95vw, 2.75rem);
  line-height: 1;
  color: var(--ink-faint);
}

.affirm__coda {
  margin-top: clamp(1.5rem, 1rem + 2.1vw, 2.875rem);
  font-size: var(--fs-body);
}

/* A heading in the margin, body text alongside. */
.aside-band {
  display: grid;
  grid-template-columns: 23.75rem 1fr;
}

.aside-band__head {
  padding: var(--band-y) 2.5rem var(--band-y) var(--gutter);
  border-inline-end: 1px solid var(--rule);
}

.aside-band__head h2 {
  font-size: var(--fs-band);
  letter-spacing: 0.04em;
}

.aside-band__body {
  display: flex;
  flex-direction: column;
  gap: 1.625rem;
  align-items: flex-start;
  max-width: 46.25rem;
  padding: var(--band-y) var(--gutter) var(--band-y) 3.5rem;
}

.aside-band__body .cta {
  margin-top: 0.875rem;
}

/* Four cards across the foot of the home page. */
.cardnav {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 2px solid var(--rule-strong);
  font-family: var(--display);
}

.cardnav__item {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  padding: 2.25rem 1.5rem 2.5rem;
  border-inline-end: 1px solid var(--rule);
}

.cardnav__item:first-child {
  padding-inline-start: var(--gutter);
}

.cardnav__item:last-child {
  padding-inline-end: var(--gutter);
  border-inline-end: 0;
}

.cardnav__title {
  font-size: var(--fs-card);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.cardnav__note {
  font-family: var(--body);
  font-size: 0.9375rem;
  font-weight: 300;
  color: var(--ink-muted);
}

/* --------------------------------------------------------------------------
   6. Inner pages
   -------------------------------------------------------------------------- */

.pagehead {
  display: flex;
  flex-direction: column;
  gap: 1.375rem;
  padding: clamp(2.75rem, 1.2rem + 6.3vw, 5rem) var(--gutter)
    clamp(1.75rem, 0.9rem + 3.4vw, 3.5rem);
  border-bottom: 1px solid var(--rule);
}

.pagehead h1 {
  max-width: 62.5rem;
  font-size: var(--fs-title);
  line-height: 1.14;
  letter-spacing: 0.03em;
}

.reading {
  display: grid;
  grid-template-columns: 18.75rem 1fr;
}

/* Pages with no contents list keep the same measure and the same vertical
   rule; the margin column is simply empty. */
.reading--plain::before {
  content: "";
  border-inline-end: 1px solid var(--rule);
}

.toc {
  padding: var(--band-y) 2.5rem var(--band-y) var(--gutter);
  border-inline-end: 1px solid var(--rule);
}

.toc__inner {
  position: sticky;
  top: 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  font-family: var(--display);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1.35;
}

.toc__title {
  color: var(--gold);
}

.toc a {
  color: var(--ink-muted);
}

.prose {
  max-width: var(--measure);
  padding: var(--band-y) var(--gutter) clamp(3.5rem, 2rem + 6.2vw, 6.875rem)
    clamp(1.5rem, 0.5rem + 4vw, 4rem);
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}

.prose > h2 {
  margin-top: 1.5rem;
  padding-top: 1.625rem;
  border-top: 1px solid var(--rule);
  font-size: var(--fs-section);
  letter-spacing: 0.08em;
}

.prose > h3 {
  font-size: var(--fs-card);
  letter-spacing: 0.06em;
}

.prose > .lead {
  font-size: var(--fs-lead);
}

/* A sentence lifted out of the flow, ruled above and below. */
.pull {
  font-family: var(--display);
  font-size: var(--fs-section);
  line-height: 1.4;
  letter-spacing: 0.02em;
  text-transform: none;
  padding: 1.625rem 0;
  border-top: 1px solid var(--rule-strong);
  border-bottom: 1px solid var(--rule-strong);
}

.prose ol,
.prose ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 1.125rem;
}

.prose ol.affirm-inline {
  counter-reset: affirm;
}

.prose ol.affirm-inline li {
  display: flex;
  gap: 1.125rem;
  counter-increment: affirm;
}

.prose ol.affirm-inline li::before {
  content: counter(affirm, greek-caps);
  font-family: var(--display);
  font-size: var(--fs-section);
  line-height: 1.1;
  color: var(--ink-faint);
}

.prose ul.bullets li {
  display: flex;
  gap: 1rem;
}

.prose ul.bullets li::before {
  content: "·";
  font-family: var(--display);
  font-size: 1.5em;
  line-height: 1.1;
  color: var(--gold);
}

.prose .cta,
.prose .cta--ghost {
  align-self: flex-start;
  margin-top: 0.5rem;
}

.prose a:not(.cta) {
  text-decoration: underline;
  text-underline-offset: 0.22em;
  text-decoration-color: var(--ink-faint);
}

.prose a:not(.cta):hover {
  text-decoration-color: currentColor;
}

/* Questions page: a dozen headings in a row, so they are set as questions
   rather than as inscriptions — same rule above, no capitals. */
.prose--qa > h2 {
  margin-top: 1rem;
  text-transform: none;
  font-size: var(--fs-card);
  letter-spacing: 0.02em;
  line-height: 1.35;
}

/* 404 */
.notfound {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.75rem;
  text-align: center;
  padding: clamp(4rem, 2rem + 8vw, 8rem) var(--gutter);
}

.notfound__glyph {
  font-family: var(--display);
  font-size: clamp(4rem, 2rem + 8vw, 7rem);
  line-height: 1;
  color: var(--ink-faint);
  letter-spacing: 0.08em;
}

/* --------------------------------------------------------------------------
   7. Footer
   -------------------------------------------------------------------------- */

.colophon {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  padding: 2rem var(--gutter);
  border-top: 2px solid var(--rule-strong);
  font-family: var(--display);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.colophon__place {
  color: var(--ink-muted);
}

.colophon__links {
  display: flex;
  gap: 1.75rem;
  flex-wrap: wrap;
}

/* --------------------------------------------------------------------------
   8. Folding — the two places where the grids collapse
   -------------------------------------------------------------------------- */

@media (max-width: 63.99em) {
  .reading {
    grid-template-columns: 1fr;
  }

  .reading--plain::before {
    display: none;
  }

  .toc {
    padding: 2rem var(--gutter);
    border-inline-end: 0;
    border-bottom: 1px solid var(--rule);
  }

  .toc__inner {
    position: static;
  }

  .prose {
    max-width: none;
    padding-inline-start: var(--gutter);
  }

  .aside-band {
    grid-template-columns: 1fr;
  }

  .aside-band__head {
    padding: var(--band-y) var(--gutter) 0;
    border-inline-end: 0;
  }

  .aside-band__body {
    max-width: none;
    padding: 1.5rem var(--gutter) var(--band-y);
  }

  .affirm__list {
    grid-template-columns: 1fr;
  }

  .cardnav {
    grid-template-columns: 1fr;
  }

  .cardnav__item {
    flex-direction: row;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    padding: 1.25rem var(--gutter);
    border-inline-end: 0;
    border-bottom: 1px solid var(--rule);
  }

  .cardnav__item:last-child {
    border-bottom: 0;
  }
}

@media (max-width: 47.99em) {
  .split {
    grid-template-columns: 1fr;
  }

  .split__col + .split__col {
    border-inline-start: 0;
    border-top: 1px solid var(--rule);
  }

  .hero__title,
  .hero__sub {
    max-width: none;
  }

  .colophon {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }
}

/* --------------------------------------------------------------------------
   9. Print — the site is text; let it be printable
   -------------------------------------------------------------------------- */

@media print {
  .masthead,
  .menu,
  .cardnav,
  .skip-link,
  .toc {
    display: none;
  }

  body {
    background: #fff;
    color: #000;
    font-size: 11pt;
  }

  .reading {
    grid-template-columns: 1fr;
  }
}