/* ==========================================================================
   Comitia
   Editorial + institutional. The register of a thoughtful advocacy report.
   ========================================================================== */

:root {
  color-scheme: light;

  /* neutrals — tinted toward the brand green, not pure */
  --paper:        oklch(98.4% 0.008 95);
  --paper-warm:   oklch(96.5% 0.014 78);
  --field:        oklch(95.2% 0.018 130);
  --rule:         oklch(78%   0.018 150);
  --rule-soft:    oklch(89%   0.014 145);

  /* ink */
  --ink:          oklch(22%   0.028 175);
  --ink-soft:     oklch(38%   0.024 175);
  --ink-muted:    oklch(52%   0.020 175);

  /* brand greens */
  --green:        oklch(42%   0.10  158);
  --green-deep:   oklch(24%   0.06  170);
  --green-band:   oklch(20%   0.045 172);
  --green-band-2: oklch(28%   0.055 168);
  --green-light:  oklch(91%   0.025 150);

  /* editorial accents — used sparingly */
  --clay:         oklch(58%   0.13  42);
  --gold:         oklch(72%   0.10  72);

  /* dark band on contrast sections */
  --paper-on-dark:    oklch(94% 0.012 140);
  --paper-on-dark-2:  oklch(82% 0.018 145);
  --rule-on-dark:     oklch(40% 0.04  170);

  /* spacing scale (4pt) */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  24px;
  --s-6:  32px;
  --s-7:  48px;
  --s-8:  64px;
  --s-9:  96px;
  --s-10: 144px;

  --measure: 64ch;
  --max:     1240px;
  --gutter:  clamp(20px, 4vw, 48px);

  /* type stacks */
  --serif:  "Spectral", "Iowan Old Style", "Hoefler Text", Georgia, ui-serif, serif;
  --sans:   "Atkinson Hyperlegible", ui-sans-serif, system-ui, sans-serif;
}

* { box-sizing: border-box; }

html {
  min-width: 320px;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

a { color: inherit; }

/* ---- type primitives ----------------------------------------------------- */

.display,
h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--ink);
}

h1 {
  margin: 0;
  font-size: clamp(2.6rem, 5.2vw, 4.6rem);
  line-height: 1.02;
  font-weight: 500;
}

h2 {
  margin: 0;
  font-size: clamp(1.9rem, 3.6vw, 2.9rem);
  line-height: 1.08;
  font-weight: 500;
}

h3 {
  margin: 0;
  font-size: 1.18rem;
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: 0;
}

p { margin: 0; }

.eyebrow {
  margin: 0 0 var(--s-3);
  color: var(--green);
  font-family: var(--sans);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

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

.lede {
  max-width: 38ch;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.15rem, 1.8vw, 1.4rem);
  line-height: 1.45;
  color: var(--ink-soft);
}

.prose {
  max-width: var(--measure);
  color: var(--ink-soft);
  line-height: 1.62;
}

/* ---- layout primitives --------------------------------------------------- */

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

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

.hair {
  height: 1px;
  background: var(--rule-soft);
  border: 0;
  margin: 0;
}

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

.site-header {
  border-bottom: 1px solid var(--rule-soft);
  background: var(--paper);
}

.nav {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--s-5);
  width: min(var(--max), calc(100% - calc(var(--gutter) * 2)));
  margin-inline: auto;
  padding-block: var(--s-4);
}

.brand {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  font-family: var(--serif);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  color: var(--ink);
}

.brand .mark {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 4px;
  background: var(--green-deep);
  color: var(--paper);
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.95rem;
  font-weight: 500;
  transform: translateY(2px);
}

.nav-links {
  display: flex;
  justify-content: center;
  gap: var(--s-5);
  font-size: 0.9rem;
  letter-spacing: 0.02em;
}

.nav-links a {
  color: var(--ink-soft);
  text-decoration: none;
  padding-block: var(--s-1);
  border-bottom: 1px solid transparent;
}

.nav-links a:hover,
.nav-links a:focus-visible {
  color: var(--ink);
  border-bottom-color: var(--ink);
}

.language-nav {
  display: flex;
  gap: var(--s-3);
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.language-nav a {
  color: var(--ink-muted);
  text-decoration: none;
  padding-block: var(--s-1);
  border-bottom: 1px solid transparent;
  font-weight: 700;
}

.language-nav a[aria-current="page"] {
  color: var(--ink);
  border-bottom-color: var(--green);
}

.language-nav a:hover,
.language-nav a:focus-visible {
  color: var(--ink);
  border-bottom-color: var(--rule);
}

/* ---- hero ---------------------------------------------------------------- */

.hero {
  width: min(var(--max), calc(100% - calc(var(--gutter) * 2)));
  margin-inline: auto;
  padding-block: clamp(56px, 10vw, 128px) clamp(40px, 7vw, 96px);
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 3fr);
  column-gap: clamp(32px, 5vw, 80px);
  row-gap: var(--s-7);
  align-items: start;
}

.hero-headline {
  grid-column: 1 / -1;
  max-width: 18ch;
  font-size: clamp(3rem, 7.4vw, 6.6rem);
  line-height: 0.97;
  letter-spacing: -0.015em;
  font-weight: 500;
}

.hero-headline em {
  font-style: italic;
  font-weight: 400;
  color: var(--green-deep);
}

.hero-body {
  display: grid;
  gap: var(--s-5);
}

.hero-body .lede {
  max-width: 48ch;
}

.hero-aside {
  position: relative;
  padding-top: var(--s-5);
  border-top: 1px solid var(--rule);
  font-family: var(--sans);
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 32ch;
}

.hero-aside .label {
  display: block;
  margin-bottom: var(--s-3);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.hero-aside p + p {
  margin-top: var(--s-3);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-5) var(--s-7);
  align-items: baseline;
  margin-top: var(--s-3);
}

.cta {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  padding-block: var(--s-2);
  font-family: var(--sans);
  font-weight: 700;
  font-size: 0.98rem;
  letter-spacing: 0.01em;
  text-decoration: none;
  color: var(--ink);
  border-bottom: 1px solid var(--ink);
  transition: color 220ms cubic-bezier(0.2, 0.8, 0.2, 1),
              border-color 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.cta::after {
  content: "→";
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  transform: translateX(0);
  transition: transform 260ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.cta:hover::after,
.cta:focus-visible::after {
  transform: translateX(4px);
}

.cta--primary {
  color: var(--green-deep);
  border-color: var(--green-deep);
}

.cta--primary:hover,
.cta--primary:focus-visible {
  color: var(--green);
  border-color: var(--green);
}

.cta--quiet {
  color: var(--ink-soft);
  border-color: var(--rule);
}

.cta--quiet:hover,
.cta--quiet:focus-visible {
  color: var(--ink);
  border-color: var(--ink);
}

/* ---- standfirst (a wide editorial intro band) --------------------------- */

.standfirst {
  width: min(var(--max), calc(100% - calc(var(--gutter) * 2)));
  margin-inline: auto;
  padding-block: clamp(40px, 6vw, 80px);
  border-top: 1px solid var(--rule);
}

.standfirst-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 5fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: baseline;
}

.standfirst-label {
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.standfirst-text {
  font-family: var(--serif);
  font-size: clamp(1.4rem, 2.4vw, 2rem);
  line-height: 1.32;
  color: var(--ink);
  max-width: 36ch;
}

.standfirst-text em {
  font-style: italic;
  color: var(--green);
}

/* ---- procedure (replaces "What Comitia does" card grid) ------------------ */

.procedure {
  width: min(var(--max), calc(100% - calc(var(--gutter) * 2)));
  margin-inline: auto;
  padding-block: clamp(40px, 6vw, 96px);
}

.procedure-head {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 5fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: end;
  padding-bottom: var(--s-7);
  border-bottom: 1px solid var(--ink);
}

.procedure-head h2 {
  max-width: 24ch;
}

.procedure-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.procedure-item {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 5fr);
  gap: clamp(24px, 4vw, 64px);
  padding-block: clamp(28px, 4vw, 56px);
  border-bottom: 1px solid var(--rule-soft);
}

.procedure-item:last-child {
  border-bottom: 0;
}

.procedure-numeral {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(2.4rem, 5vw, 4rem);
  line-height: 0.92;
  color: var(--green);
  letter-spacing: -0.01em;
}

.procedure-body h3 {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  font-weight: 500;
  line-height: 1.15;
  margin-bottom: var(--s-4);
  letter-spacing: -0.005em;
}

.procedure-body p {
  max-width: var(--measure);
  color: var(--ink-soft);
  line-height: 1.62;
}

.procedure-body p + p {
  margin-top: var(--s-4);
}

.procedure-aside {
  display: inline-flex;
  margin-top: var(--s-4);
  padding-top: var(--s-3);
  border-top: 1px solid var(--rule-soft);
  font-family: var(--sans);
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

/* ---- audience band (dark contrast, three rows, distinct registers) ----- */

.audience {
  background: var(--green-band);
  color: var(--paper-on-dark);
  padding-block: clamp(64px, 10vw, 144px);
  margin-top: clamp(24px, 4vw, 56px);
}

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

.audience-head {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 5fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: end;
  padding-bottom: var(--s-7);
  border-bottom: 1px solid var(--rule-on-dark);
}

.audience-head .eyebrow {
  color: var(--gold);
}

.audience-head h2 {
  color: var(--paper-on-dark);
  max-width: 22ch;
}

.audience-row {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 5fr);
  gap: clamp(24px, 4vw, 64px);
  padding-block: clamp(28px, 4vw, 56px);
  border-bottom: 1px solid var(--rule-on-dark);
}

.audience-row:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.audience-tag {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  line-height: 1.05;
  color: var(--gold);
  letter-spacing: -0.005em;
}

.audience-row[data-density="dense"] .audience-tag {
  font-style: normal;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 0.86rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
}

.audience-body {
  color: var(--paper-on-dark-2);
  max-width: var(--measure);
  line-height: 1.62;
}

.audience-body strong {
  color: var(--paper-on-dark);
  font-weight: 700;
}

.audience-body p + p {
  margin-top: var(--s-4);
}

.audience-row[data-density="warm"] .audience-body {
  font-family: var(--serif);
  font-size: 1.1rem;
  font-style: italic;
  font-weight: 400;
  line-height: 1.5;
  color: var(--paper-on-dark);
}

.audience-row[data-density="dense"] .audience-body {
  font-size: 0.95rem;
  line-height: 1.6;
}

/* ---- contact (editorial colophon) --------------------------------------- */

.colophon {
  width: min(var(--max), calc(100% - calc(var(--gutter) * 2)));
  margin-inline: auto;
  padding-block: clamp(56px, 9vw, 128px);
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 5fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: start;
  border-bottom: 1px solid var(--rule);
}

.colophon-mark {
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.95rem;
  color: var(--ink-muted);
  letter-spacing: 0.01em;
}

.colophon-body h2 {
  max-width: 18ch;
  margin-bottom: var(--s-5);
}

.colophon-body .prose {
  margin-bottom: var(--s-7);
}

.colophon-mail {
  display: inline-block;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.8rem, 4vw, 3rem);
  line-height: 1.1;
  color: var(--green-deep);
  text-decoration: none;
  border-bottom: 1px solid var(--green);
  padding-bottom: var(--s-1);
  letter-spacing: -0.005em;
  transition: color 240ms cubic-bezier(0.2, 0.8, 0.2, 1),
              border-color 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.colophon-mail:hover,
.colophon-mail:focus-visible {
  color: var(--clay);
  border-color: var(--clay);
}

.colophon-meta {
  margin-top: var(--s-7);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--s-5);
  padding-top: var(--s-5);
  border-top: 1px solid var(--rule-soft);
}

.colophon-meta dt {
  font-family: var(--sans);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: var(--s-2);
}

.colophon-meta dd {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.94rem;
  line-height: 1.55;
}

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

.site-footer {
  width: min(var(--max), calc(100% - calc(var(--gutter) * 2)));
  margin-inline: auto;
  padding-block: var(--s-7) var(--s-9);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--s-5);
  align-items: baseline;
  color: var(--ink-muted);
  font-size: 0.88rem;
}

.site-footer p { margin: 0; }

.site-footer .footer-meta {
  font-family: var(--serif);
  font-style: italic;
  letter-spacing: 0.005em;
}

/* ============================================================================
   /security page
   ============================================================================ */

.security-hero {
  width: min(var(--max), calc(100% - calc(var(--gutter) * 2)));
  margin-inline: auto;
  padding-block: clamp(64px, 10vw, 144px) clamp(40px, 6vw, 96px);
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 5fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: end;
  border-bottom: 1px solid var(--ink);
}

.security-hero h1 {
  font-size: clamp(2.4rem, 5.4vw, 4.4rem);
  max-width: 16ch;
}

.security-hero .lede {
  max-width: 44ch;
  margin-top: var(--s-5);
}

/* threshold visual: a row of dots, last few highlighted */

.threshold {
  width: min(var(--max), calc(100% - calc(var(--gutter) * 2)));
  margin-inline: auto;
  padding-block: clamp(40px, 6vw, 96px);
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 5fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: start;
  border-bottom: 1px solid var(--rule-soft);
}

.threshold-body h2 {
  margin-bottom: var(--s-5);
}

.threshold-body p {
  max-width: var(--measure);
  color: var(--ink-soft);
  line-height: 1.62;
}

.threshold-body p + p {
  margin-top: var(--s-4);
}

.threshold-figure {
  margin-top: var(--s-7);
  padding-top: var(--s-5);
  border-top: 1px solid var(--rule-soft);
}

.threshold-figure figcaption {
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: var(--s-4);
}

.threshold-dots {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin-bottom: var(--s-3);
}

.threshold-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid var(--rule);
  background: var(--paper-warm);
}

.threshold-dot.is-match {
  background: var(--green);
  border-color: var(--green);
}

.threshold-note {
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.96rem;
  color: var(--ink-soft);
  max-width: 48ch;
}

/* what is not stored */

.absences {
  width: min(var(--max), calc(100% - calc(var(--gutter) * 2)));
  margin-inline: auto;
  padding-block: clamp(40px, 6vw, 96px);
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 5fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: start;
  border-bottom: 1px solid var(--rule-soft);
}

.absences-list {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: absent;
}

.absences-list li {
  counter-increment: absent;
  display: grid;
  grid-template-columns: 3.2em minmax(0, 1fr);
  gap: var(--s-4);
  padding-block: var(--s-5);
  border-top: 1px solid var(--rule-soft);
}

.absences-list li:last-child {
  border-bottom: 1px solid var(--rule-soft);
}

.absences-list li::before {
  content: "—";
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.4rem;
  color: var(--clay);
  line-height: 1;
}

.absences-list h3 {
  font-family: var(--serif);
  font-size: 1.25rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  margin-bottom: var(--s-2);
}

.absences-list p {
  color: var(--ink-soft);
  line-height: 1.6;
  max-width: var(--measure);
}

/* legal handoff section */

.handoff {
  background: var(--paper-warm);
  padding-block: clamp(48px, 7vw, 112px);
  border-top: 1px solid var(--rule-soft);
  border-bottom: 1px solid var(--rule-soft);
}

.handoff-shell {
  width: min(var(--max), calc(100% - calc(var(--gutter) * 2)));
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 5fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: start;
}

.handoff-body h2 {
  margin-bottom: var(--s-5);
  max-width: 22ch;
}

.handoff-body .prose {
  margin-bottom: var(--s-6);
}

.handoff-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--s-5);
  margin-top: var(--s-6);
  padding-top: var(--s-5);
  border-top: 1px solid var(--rule-soft);
}

.handoff-step .label {
  font-family: var(--sans);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: var(--s-2);
}

.handoff-step h3 {
  font-family: var(--serif);
  font-size: 1.1rem;
  font-weight: 500;
  margin-bottom: var(--s-2);
  line-height: 1.25;
}

.handoff-step p {
  color: var(--ink-soft);
  font-size: 0.94rem;
  line-height: 1.55;
}

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

@media (max-width: 880px) {
  body { font-size: 16px; }

  .nav {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "brand languages"
      "links links";
    row-gap: var(--s-3);
  }

  .nav .brand     { grid-area: brand; }
  .nav-links      {
    grid-area: links;
    justify-content: flex-start;
    gap: var(--s-5);
    padding-top: var(--s-2);
    border-top: 1px solid var(--rule-soft);
  }
  .language-nav   { grid-area: languages; }

  .hero,
  .hero-headline {
    grid-template-columns: 1fr;
  }

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

  .standfirst-grid,
  .procedure-head,
  .procedure-item,
  .audience-head,
  .audience-row,
  .colophon,
  .security-hero,
  .threshold,
  .absences,
  .handoff-shell {
    grid-template-columns: 1fr;
    gap: var(--s-5);
  }

  .procedure-head,
  .audience-head,
  .security-hero {
    align-items: start;
  }

  .procedure-numeral {
    font-size: 2.4rem;
  }

  .audience-tag {
    font-size: 1.4rem;
  }

  .colophon-mail {
    font-size: clamp(1.5rem, 7vw, 2.4rem);
  }

  .site-footer {
    grid-template-columns: 1fr;
    gap: var(--s-2);
  }

  .absences-list li {
    grid-template-columns: 1.6em minmax(0, 1fr);
    gap: var(--s-3);
  }
}

@media (max-width: 520px) {
  :root {
    --gutter: 18px;
  }
  .hero { padding-block: clamp(40px, 12vw, 80px) clamp(28px, 8vw, 56px); }
  .hero-aside { max-width: none; }
}

/* ---- focus -------------------------------------------------------------- */

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 3px;
  border-radius: 2px;
}

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

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.001ms !important;
    animation-duration: 0.001ms !important;
  }
  html { scroll-behavior: auto; }
}