/* ============================================================
   EDITORIAL — Sébastien Reuille
   The magazine / journal layer that gives the system its
   premium Swiss-editorial direction: warm paper, hairline
   rules, tracked-out section kickers, datelines, drop caps
   and pull quotes. Ships as utility classes + tokens so both
   components and hand-written layouts can use them.
   ============================================================ */

:root {
  /* Editorial surfaces — warm paper instead of clinical white */
  --surface-paper: #f6f3ee;
  --surface-paper-deep: #efe9e0;
  --ink: #141210;          /* warm near-black */
  --ink-soft: #5b554c;     /* captions / secondary */
  --newsprint: #e7e1d6;    /* muted panel */

  /* Rules */
  --rule-ink: rgba(20, 18, 16, 0.16);
  --rule-ink-strong: rgba(20, 18, 16, 0.42);
  --rule-gold: var(--color-turmeric);
  --rule-hair: 1px;

  /* Editorial typography */
  --measure: 64ch;             /* ideal body column width */
  --kicker-size: 0.8125rem;    /* 13px */
  --kicker-tracking: 0.22em;
  --dateline-tracking: 0.14em;
}

/* ---- Warm paper surface (premium default for editorial screens) ---- */
.paper {
  background-color: var(--surface-paper);
  color: var(--ink);
}
.paper-deep {
  background-color: var(--surface-paper-deep);
  color: var(--ink);
}

/* ---- Section kicker: "01 — RUBRICA", tracked out, with a gold tick ---- */
.kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--kicker-size);
  line-height: 1;
  letter-spacing: var(--kicker-tracking);
  text-transform: uppercase;
  color: inherit;
}
.kicker::before {
  content: "";
  width: 1.6rem;
  height: 2px;
  background: var(--rule-gold);
  flex: none;
}
.kicker-index {
  font-variant-numeric: tabular-nums;
  color: var(--color-turmeric-dark);
}

/* ---- Dateline: LUGANO · 2026 ---- */
.dateline {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-small);
  letter-spacing: var(--dateline-tracking);
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* ---- Hairline rules ---- */
.rule {
  border: 0;
  height: var(--rule-hair);
  background: var(--rule-ink);
  margin: 0;
}
.rule-strong { background: var(--rule-ink-strong); }
.rule-gold { background: var(--rule-gold); height: 2px; }

/* ---- Body column with an ideal measure ---- */
.measure { max-width: var(--measure); }

/* ---- Drop cap for a lead paragraph ---- */
.dropcap::first-letter {
  font-family: var(--font-heading);
  font-weight: 600;
  float: left;
  font-size: 3.6em;
  line-height: 0.82;
  padding: 0.06em 0.12em 0 0;
  color: var(--ink);
}

/* ---- Pull quote ---- */
.pull-quote {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  line-height: 1.24;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

/* ---- Caption (photo credit / small furniture) ---- */
.caption {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--text-small);
  letter-spacing: 0.02em;
  color: var(--ink-soft);
}