/* ============================================================
   EMA — EDITORIAL INDEX  ·  design system
   Monochrome (warm paper / near-black ink) + one accent.
   Bodoni Moda (Didone display) · Archivo (grotesque) · Space Mono
   ============================================================ */

:root {
  --paper:      #F1EEE6;   /* warm newsprint */
  --paper-2:    #E9E5DB;   /* slightly deeper panel */
  --ink:        #14120E;   /* warm near-black */
  --ink-2:      #1A1814;   /* dark section bg */
  --ink-70:     rgba(20,18,14,0.74);
  --ink-45:     rgba(20,18,14,0.56);
  --line:       rgba(20,18,14,0.20);
  --line-soft:  rgba(20,18,14,0.11);
  --paper-70:   rgba(241,238,230,0.78);
  --paper-line: rgba(241,238,230,0.18);

  --accent:      #E2452A;  /* vermillion (default) */
  --accent-ink:  #14120E;  /* text sitting on accent */

  --display: "Archivo Expanded", "Archivo", system-ui, sans-serif;
  --serif: "Archivo", system-ui, sans-serif;  /* repurposed: bold grotesque headlines */
  --sans:  "Archivo", system-ui, sans-serif;
  --mono:  "Space Mono", ui-monospace, monospace;

  --pad: clamp(20px, 4.4vw, 80px);   /* page gutter */
  --ease: cubic-bezier(0.18, 0.9, 0.24, 1);
  --maxw: 1380px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
::selection { background: var(--accent); color: var(--paper); }
img { display: block; max-width: 100%; }
a { color: inherit; }

/* ---------- page frame ---------- */
.shell { max-width: var(--maxw); margin: 0 auto; padding-left: var(--pad); padding-right: var(--pad); position: relative; }
.bleed { width: 100%; }

/* ---------- type primitives ---------- */
.serif { font-family: var(--serif); font-weight: 800; letter-spacing: -0.03em; line-height: 0.94; margin: 0; }
.serif .it { font-style: italic; font-weight: 800; }
.serif .thin { font-weight: 500; }

/* eyebrow / kicker — grotesque, wide tracking */
.kick {
  font-family: var(--sans); font-weight: 700; font-size: 12px;
  letter-spacing: 0.3em; text-transform: uppercase; margin: 0; color: var(--ink);
}
.kick.accent { color: var(--accent); }

/* mono folio label */
.folio {
  font-family: var(--mono); font-weight: 400; font-size: 12px;
  letter-spacing: 0.02em; text-transform: uppercase; color: var(--ink-70); margin: 0;
}

.lead { font-size: clamp(18px, 1.4vw, 22px); line-height: 1.5; font-weight: 500; }
.muted { color: var(--ink-70); }
.body p { margin: 0 0 1.1em; }
.body p:last-child { margin-bottom: 0; }

/* numeral big */
.numeral { font-family: var(--serif); font-weight: 300; line-height: 0.8; font-feature-settings: "lnum" 1; }

/* ---------- rules ---------- */
.rule { height: 1px; background: var(--ink); border: 0; width: 100%; }
.rule.thin { background: var(--line); }
.rule.draw { width: 0; }
.is-visible > .rule.draw, .rv-done .rule.draw { width: 100%; }
.rule.draw { transition: width 720ms var(--ease); }
.rv-done .rule.draw, html.no-anim .rule.draw { width: 100% !important; transition: none !important; }

/* ---------- links / buttons ---------- */
.cta {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--sans); font-weight: 600; font-size: 12px;
  letter-spacing: 0.18em; text-transform: uppercase;
  padding: 17px 30px; border: 1px solid var(--ink); background: var(--ink); color: var(--paper);
  text-decoration: none; cursor: pointer; border-radius: 0;
  transition: background 240ms var(--ease), color 240ms var(--ease), border-color 240ms var(--ease);
  white-space: nowrap;
}
.cta:hover { background: var(--accent); border-color: var(--accent); color: var(--paper); }
.cta .arw { transition: transform 260ms var(--ease); }
.cta:hover .arw { transform: translateX(5px); }

.cta.ghost { background: transparent; color: var(--ink); }
.cta.ghost:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.cta.on-dark { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.cta.on-dark:hover { background: var(--accent); border-color: var(--accent); color: var(--paper); }

/* underline link */
.ulink {
  font-family: var(--sans); font-weight: 600; font-size: 12px; letter-spacing: 0.16em;
  text-transform: uppercase; text-decoration: none; color: var(--ink);
  display: inline-flex; align-items: center; gap: 9px; cursor: pointer;
  background: none; border: 0; padding: 0;
}
.ulink .arw { transition: transform 240ms var(--ease); color: var(--accent); }
.ulink:hover .arw { transform: translateX(5px); }
.ulink .bar { display: inline-block; height: 1px; width: 22px; background: var(--accent); transition: width 240ms var(--ease); }
.ulink:hover .bar { width: 40px; }

/* ---------- reveal (robust; degrades to visible) ---------- */
.reveal { opacity: 0; transform: translateY(30px); transition: opacity 820ms var(--ease), transform 820ms var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }
.reveal.rv-done { opacity: 1 !important; transform: none !important; transition: none !important; }
html.no-anim .reveal { opacity: 1 !important; transform: none !important; transition: none !important; animation: none !important; }

/* clip reveal for big type (wipes up) */
.clip { display: inline-block; }
.clip > span { display: inline-block; transform: translateY(106%); transition: transform 900ms var(--ease); }
.is-visible .clip > span, .rv-done .clip > span { transform: none; }
html.no-anim .clip > span { transform: none !important; }

/* ---------- dark section ---------- */
.dark { background: var(--ink-2); color: var(--paper); }
.dark .kick, .dark .serif { color: var(--paper); }
.dark .kick.accent { color: var(--accent); }
.dark .muted { color: var(--paper-70); }
.dark .folio { color: var(--paper-70); }
.dark .rule { background: var(--paper); }
.dark .rule.thin { background: var(--paper-line); }

/* ---------- motion off ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
  .clip > span { transform: none !important; }
  .rule.draw { width: 100% !important; }
  html { scroll-behavior: auto; }
}