/* ==========================================================================
   Aretepolis: styles.css
   Implements design/DESIGN.md. A printed invitation on cream paper: ink,
   one quiet olive, two typefaces, whitespace. Nothing moves except one
   underline. Font faces are declared inline in index.html <head>.
   Only faces available: Cardo 400 (+ Greek subset), Cardo 400 italic,
   Inter 400. Never request a heavier weight.
   ========================================================================== */

/* 1. Tokens ---------------------------------------------------------------- */
:root {
  color-scheme: light;
  font-synthesis: none;

  --color-bg: #F6F2EA;
  --color-text: #262420;
  --color-muted: #655F55;
  --color-accent: #4A5D3A;
  --color-accent-soft: #7E8A70;
  --color-selection: #DDE2D1;
  --color-rule: var(--color-accent-soft);
  --color-focus: var(--color-accent);

  --font-display: "Cardo", "Cardo Fallback", Georgia, "Times New Roman", serif;
  --font-body: "Inter", "Inter Fallback", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --step-wordmark: clamp(2rem, 1.2rem + 3.5vw, 4rem);
  --step-2: clamp(1.5rem, 1.35rem + 0.6vw, 1.75rem);
  --step-1: clamp(1.125rem, 1rem + 0.5vw, 1.3125rem);
  --step-0: clamp(1rem, 0.875rem + 0.4vw, 1.125rem);
  --step-greek: 1rem;
  --step-label: 1rem;
  --step--1: 0.875rem;

  --leading-body: 1.65;
  --leading-display: 1.1;
  --leading-heading: 1.25;
  --leading-annotation: 1.6;
  --tracking-wordmark: 0.14em;
  --tracking-label: 0.16em;

  --measure: 38rem;
  --gutter: clamp(1.25rem, 4vw, 1.5rem);
  --space-page-top: clamp(4rem, 2rem + 8vw, 8.5rem);
  --space-header: clamp(4.5rem, 3rem + 6vw, 7.5rem);
  --space-section: clamp(4rem, 2.5rem + 6vw, 7rem);
  --space-page-bottom: clamp(3rem, 2rem + 3vw, 4.5rem);
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-s: 1rem;
  --space-m: 1.5rem;
  --space-l: 2.5rem;
  --space-xl: clamp(3rem, 2.25rem + 3vw, 4rem); /* 48 → 64px: stays below --space-section on phones */
  --space-para: 1em;
}

/* 2. Reset ----------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

body, h1, h2, h3, p, ol, ul, dl, dd { margin: 0; }
ol, ul { padding: 0; }

/* No bold anywhere: only 400 faces exist. */
h1, h2, h3, strong { font-weight: 400; }

/* 3. Page ------------------------------------------------------------------ */
html {
  background: var(--color-bg);
  color: var(--color-text);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: var(--leading-body);
  hyphens: manual;
  overflow-wrap: break-word;
  padding-inline: max(var(--gutter), env(safe-area-inset-left), env(safe-area-inset-right));
}

::selection {
  background: var(--color-selection);
  color: var(--color-text);
}

/* Single centered column */
header, main, footer {
  max-width: var(--measure);
  margin-inline: auto;
}

p { margin-bottom: var(--space-para); text-wrap: pretty; }
section > :last-child,
.affirmation > :last-child { margin-bottom: 0; }

/* 4. Masthead: wordmark and Greek roots ------------------------------------ */
.masthead {
  padding-top: var(--space-page-top);
  margin-bottom: var(--space-header);
  text-align: center;
}

.wordmark {
  font-family: var(--font-display);
  font-size: var(--step-wordmark);
  line-height: var(--leading-display);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wordmark);
  text-indent: var(--tracking-wordmark); /* offsets trailing tracking: optical centre */
  text-wrap: balance;
}

.roots {
  margin-top: var(--space-m);
  font-family: var(--font-display);
  font-size: var(--step-greek);
  line-height: var(--leading-annotation);
  color: var(--color-muted);
}

/* Each root is a dictionary entry: Greek word above its gloss. */
.root { text-wrap: balance; }
.root + .root { margin-top: var(--space-xs); }
.root dt,
.root dd { display: block; }
.root dd { line-height: 1.4; }

/* Greek is set upright (real Cardo glyphs, no synthesis needed). */
[lang="grc"] { font-style: normal; letter-spacing: 0.02em; }
/* English gloss in Cardo italic. */
.root dd { font-style: italic; }

/* Smallest phones: one step down (15px, inside the brief's 14–16px) so each
   gloss still sits on a single line. */
@media (width < 21.25em) {
  .roots { font-size: 0.9375rem; }
}

/* 5. Section rhythm and hairlines ------------------------------------------ */
/* Gap between sections = --space-section, with a short olive hairline at its
   midpoint. Border (not background) so it also survives printing. */
main > section + section,
footer { margin-top: calc(var(--space-section) / 2); }

main > section + section::before,
footer::before {
  content: "";
  display: block;
  width: 2.5rem;
  height: 0;
  border-top: 1px solid var(--color-rule);
  margin: 0 auto calc(var(--space-section) / 2);
}

/* 6. Charter --------------------------------------------------------------- */
h2,
h3 {
  font-family: var(--font-display);
  font-style: normal;
  line-height: var(--leading-heading);
  text-align: center;
  text-wrap: balance;
}

h2 {
  font-size: var(--step-2);
  letter-spacing: 0.01em;
  margin-bottom: var(--space-l);
}

/* Small inscriptional labels */
h3 {
  font-size: var(--step-label);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  text-indent: var(--tracking-label);
  margin-bottom: var(--space-m);
}

.principles + h3 { margin-top: var(--space-xl); }

/* Lists: outside markers hang in the padding; both lists share one text edge. */
.principles,
.commitments { padding-inline-start: 2.25em; }

.principles  { list-style-type: upper-roman; }
.commitments { list-style-type: "\2022\2002"; } /* bullet + en space */

.principles > li::marker,
.commitments > li::marker {
  font-family: var(--font-display); /* Safari ignores this; acceptable */
  color: var(--color-accent);
}
.principles > li::marker { font-size: 1.05em; }

.principles > li + li,
.commitments > li + li { margin-top: var(--space-s); }

/* Lead phrases: a rubric in the serif voice, never bold. */
.principles strong,
.commitments strong {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.125em; /* matches Inter's x-height */
  line-height: 1;     /* keeps the line box from growing */
  color: var(--color-text);
  /* An Inter word space after Cardo italic reads tight (worst where the
     italic letters overhang into it); open every gap equally. */
  margin-inline-end: 0.15em;
}

/* Affirmation: the closing element, set apart by space alone. */
.affirmation {
  margin-top: var(--space-xl);
  margin-inline: auto;
  max-width: 30em;
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--step-1);
  line-height: var(--leading-annotation);
  text-align: center;
}

.affirmation p { margin: 0; text-wrap: balance; }
.affirmation p + p { margin-top: var(--space-s); }

/* 7. Mailto link (the only interactive element) ---------------------------- */
a {
  color: var(--color-accent);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  text-decoration-color: var(--color-accent-soft); /* always visible: WCAG 1.4.1 */
  overflow-wrap: anywhere; /* long address never forces scroll at 320px */
}

a:hover,
a:focus-visible { text-decoration-color: var(--color-accent); }

/* A little extra air after "For inquiries:" so the focus ring clears the colon. */
.membership a { margin-inline-start: 0.2em; }

/* Narrow screens: set the address on its own line, like a card, rather than
   wherever it happens to wrap. fit-content keeps the focus ring snug. */
@media (width < 28em) {
  .membership a { display: block; width: fit-content; margin-inline-start: 0; }
}

@media (prefers-reduced-motion: no-preference) {
  a { transition: text-decoration-color 150ms ease; } /* the one permitted transition */
}

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

/* 8. Footer ---------------------------------------------------------------- */
.colophon {
  padding-bottom: var(--space-page-bottom);
  font-size: var(--step--1);
  color: var(--color-muted);
  letter-spacing: 0.02em;
  text-align: center;
  text-wrap: balance;
}
.colophon p { margin: 0; }

/* 9. Print ----------------------------------------------------------------- */
@media print {
  @page { margin: 2cm; }

  :root {
    --color-bg: #fff;
    --color-text: #000;
    --color-muted: #333;
    --color-accent: #000;
    --color-accent-soft: #999; /* underline and hairlines */
    --step-0: 11pt;
    --step-wordmark: 28pt;
    --space-page-top: 0;
    --space-header: 2rem;
    --space-section: 2rem;
    --gutter: 0;
  }

  h2, h3 { break-after: avoid; }
  li, .affirmation { break-inside: avoid; }
}