/* ============================================================
   Defensible Space — Core Tokens
   Pla del Color (Barcelona Eixample) palette + editorial type.
   ============================================================ */

/* Licensed Erotica family (self-hosted) + Cormorant (Google Fonts).
   Erotica Big      → Hero / wordmark (Spencerian flourish, display sizes)
   Erotica Small    → Smaller display copies of the script
   Erotica Inline   → Decorative inline-filigreed variant (rare, hero moments)
   Erotica Capitals Small → Ornate capitals for titling
   Erotica Capitals Thin  → Tracked thin capitals for eyebrows / labels
   Erotica Fleurons → Printer's-ornament dingbat font (section breaks)
   Cinzel / Pinyon Script remain as web-safe fallbacks only.           */
@import url("https://fonts.googleapis.com/css2?family=Pinyon+Script&family=Cinzel:wght@400;500;600&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400;1,500&family=Cormorant+Infant:ital,wght@0,400;1,400&family=IM+Fell+English:ital@0;1&display=swap");

@font-face {
  font-family: "Erotica Big";
  src: url("fonts/Erotica-Big.woff2") format("woff2"),
       url("fonts/Erotica-Big.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Erotica Small";
  src: url("fonts/Erotica-Small.woff2") format("woff2"),
       url("fonts/Erotica-Small.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Erotica Inline";
  src: url("fonts/EroticaInlinePro.otf") format("opentype"),
       url("fonts/Erotica-Inline.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Erotica Capitals";
  src: url("fonts/EroticaCapitals-Thin.woff2") format("woff2"),
       url("fonts/EroticaCapitals-Thin.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Erotica Capitals";
  src: url("fonts/EroticaCapitalsSmall.woff2") format("woff2"),
       url("fonts/EroticaCapitalsSmall.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Erotica Fleurons";
  src: url("fonts/Erotica-Fleurons.woff2") format("woff2"),
       url("fonts/Erotica-Fleurons.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
/* Junicode — medievalist OpenType text face by Peter S. Baker, SIL OFL.
   Self-hosted subset (digits, basic punctuation, common Latin glyphs)
   used for the stat-card numerals so they read as oldstyle / historical
   figures alongside the Erotica display script. See fonts/Junicode-OFL.txt
   for license. Source: https://github.com/psb1558/Junicode-font */
@font-face {
  font-family: "Junicode";
  src: url("fonts/Junicode-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---------- Color: Pla del Color ---------- */
  --terra:     #C27A73; /* Tierra                  -- warm accent 1 */
  --ocre:      #C0A05A; /* golden ochre / mustard  -- warm accent 2 */
  --celadon:   #BDC093; /* muted sage              -- cool accent 1 (防 mark) */
  --sky:       #A5C5C0; /* dusty blue-green        -- cool accent 2 */
  --calc:      #ECE4CB; /* warm chalky cream       -- paper / bg    */
  --charcoal:  #2B2218; /* warm near-black         -- ink / text    */

  /* Tonal siblings for borders, rules, subtle fills. */
  --calc-deep:   #E0D6B8;  /* slightly darker paper, used for rules/borders */
  --calc-deeper: #CFC29F;  /* aged paper, hairlines on calc bg             */
  --charcoal-80: rgba(43, 34, 24, 0.80);
  --charcoal-60: rgba(43, 34, 24, 0.60);
  --charcoal-40: rgba(43, 34, 24, 0.40);
  --charcoal-20: rgba(43, 34, 24, 0.20);
  --charcoal-10: rgba(43, 34, 24, 0.10);
  --charcoal-06: rgba(43, 34, 24, 0.06);

  /* ---------- Semantic surfaces ---------- */
  --bg:         var(--calc);
  --bg-sunk:    #E4DBBF;     /* inset panels, quoted passages */
  --bg-raised:  #F6F0DC;     /* cards lifted above the page */
  --bg-overlay: rgba(43, 34, 24, 0.60); /* scrim behind modals / dropdowns */
  --bg-accent-soft-terra:   rgba(194, 122, 115, 0.15); /* ~15% Tierra wash */
  --bg-accent-soft-celadon: rgba(189, 192, 147, 0.22); /* ~22% Celadon wash */
  --ink:          var(--charcoal);
  --ink-inverse:  var(--calc);        /* on dark or accent fills */
  --ink-muted:    rgba(43, 34, 24, 0.70); /* captions, metadata */
  --ink-faint:    var(--charcoal-40);
  --rule:         var(--charcoal-20);   /* hairlines on CALC */
  --rule-on-sunk: rgba(43, 34, 24, 0.32); /* hairlines on --bg-sunk */
  --rule-soft:    var(--charcoal-10);

  /* ---------- Typography: families ---------- */
  --font-hero:      "Erotica Big", "Erotica Small", "Pinyon Script", cursive;
  --font-hero-inline: "Erotica Inline", "Erotica Big", "Pinyon Script", cursive;
  --font-label:     "Erotica Capitals", "Cinzel", "IM Fell English SC", serif;
  --font-serif:     "Cormorant Garamond", "Cormorant Infant", "IM Fell English", Georgia, serif;
  --font-fleurons:  "Erotica Fleurons", "Cormorant Garamond", serif;
  --font-mono:      "IM Fell English", ui-monospace, "Courier New", monospace;
  /* Numerals on stat cards — oldstyle figures via Junicode. Falls back
     to Cormorant Garamond's text figures if Junicode hasn't loaded. */
  --font-figure:    "Junicode", "Cormorant Garamond", Georgia, serif;

  /* ---------- Type scale (fluid-ish, editorial) ---------- */
  --fs-hero:    clamp(4rem, 9vw, 8rem);     /* wordmark, front-page title */
  --fs-display: clamp(3rem, 6vw, 5.25rem);  /* section monuments */
  --fs-h1:      clamp(2.25rem, 3.8vw, 3.5rem);
  --fs-h2:      clamp(1.6rem, 2.4vw, 2.25rem);
  --fs-h3:      1.375rem;
  --fs-h4:      1.125rem;
  --fs-body:    1.0625rem;  /* 17px — broadsheet feel */
  --fs-small:   0.9375rem;
  --fs-caption: 0.8125rem;
  --fs-eyebrow: 0.75rem;

  /* Line-height and tracking */
  --lh-tight: 1.05;
  --lh-snug:  1.2;
  --lh-body:  1.55;
  --lh-loose: 1.7;

  --tr-eyebrow: 0.24em;   /* generous tracking for Cinzel labels */
  --tr-label:   0.16em;
  --tr-normal:  0.01em;

  /* ---------- Spacing (editorial, generous but not airy) ---------- */
  --sp-0: 0;
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;
  --sp-10: 8rem;

  /* ---------- Borders / radii / shadow ---------- */
  --radius-0: 0;
  --radius-1: 2px;         /* stamp-style labels, slight softening */
  --radius-2: 4px;
  --radius-3: 8px;         /* color swatches */
  --radius-pill: 999px;

  --border-hair: 1px solid var(--rule);
  --border-rule: 1px solid var(--charcoal);
  --border-heavy: 2px solid var(--charcoal);
  --border-double: 3px double var(--charcoal);  /* editorial double-rule */

  /* Soft inset / letterpress-style shadows. No SaaS drop-shadows. */
  --shadow-press: inset 0 1px 0 rgba(255,255,255,0.35), inset 0 -1px 0 rgba(43,34,24,0.08);
  --shadow-card:  0 1px 0 rgba(43,34,24,0.12), 0 8px 20px -14px rgba(43,34,24,0.35);
  --shadow-stamp: 0 0 0 1px var(--charcoal) inset, 0 1px 0 rgba(43,34,24,0.15);

  /* ---------- Motion (restrained) ---------- */
  --ease-editorial: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast: 120ms;
  --dur-med:  220ms;
  --dur-slow: 420ms;
}

/* ============================================================
   Base elements — editorial defaults
   ============================================================ */

html, body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Hero: Spencerian flourish. Use sparingly. */
.t-hero, h1.hero {
  font-family: var(--font-hero);
  font-weight: 400;
  font-size: var(--fs-hero);
  line-height: 1;
  letter-spacing: 0;
  color: var(--ink);
}

/* Display: big editorial serif title */
.t-display {
  font-family: var(--font-serif);
  font-weight: 500;
  font-style: italic;
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: -0.005em;
}

/* Headings — Cormorant serif, hierarchical. */
h1, .t-h1 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: var(--fs-h1);
  line-height: var(--lh-snug);
  letter-spacing: -0.005em;
  margin: 0 0 var(--sp-5);
}
h2, .t-h2 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  margin: 0 0 var(--sp-4);
}
h3, .t-h3 {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: var(--fs-h3);
  line-height: 1.3;
  margin: 0 0 var(--sp-3);
}
h4, .t-h4 {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: var(--fs-h4);
  line-height: 1.35;
  margin: 0 0 var(--sp-2);
}

/* Eyebrow / section label — tracked-out Cinzel caps. */
.t-eyebrow, .t-label {
  font-family: var(--font-label);
  font-weight: 500;
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--charcoal-80);
}
.t-label-lg {
  font-family: var(--font-label);
  font-weight: 500;
  font-size: var(--fs-small);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
}

/* Body / running text */
p, .t-body {
  font-family: var(--font-serif);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  text-wrap: pretty;
  margin: 0 0 var(--sp-4);
}
.t-lead {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 1.375rem;
  line-height: 1.5;
  color: var(--ink);
}
.t-caption {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--fs-caption);
  color: var(--ink-muted);
}
.t-small { font-size: var(--fs-small); }

/* Drop-cap helper for broadsheet openings */
.t-dropcap::first-letter {
  font-family: var(--font-hero);
  font-size: 4.5em;
  line-height: 0.9;
  float: left;
  padding: 0.15em 0.12em 0 0;
  color: var(--terra);
}

/* Links — editorial underline, never plain blue. */
a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  text-decoration-color: var(--charcoal-40);
  transition: text-decoration-color var(--dur-fast) var(--ease-editorial),
              color var(--dur-fast) var(--ease-editorial);
}
a:hover { text-decoration-color: var(--terra); color: var(--terra); }

hr {
  border: 0;
  border-top: 1px solid var(--charcoal);
  margin: var(--sp-6) 0;
}
hr.double {
  border: 0;
  border-top: 3px double var(--charcoal);
  margin: var(--sp-6) 0;
}

/* Stamp label — used on swatches, figure numbers, colophon marks */
.t-stamp {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-family: var(--font-label);
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 0.3em 0.7em;
  border: 1px solid var(--charcoal);
  border-radius: var(--radius-1);
  color: var(--charcoal);
  background: transparent;
}

/* Selection */
::selection { background: var(--ocre); color: var(--charcoal); }