/* ============================================================
   PROSE AND PROFANITY — Foundations
   Literary brutalism: ink on paper, redaction bars, one shock of red.
   Import this file, then use the variables below.
   ============================================================ */

/* ---- Fonts (loaded from Google Fonts CDN — see README font note) ---- */
@import url('https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,opsz,wght@0,6..96,400;0,6..96,500;0,6..96,600;0,6..96,700;0,6..96,800;0,6..96,900;1,6..96,400;1,6..96,500;1,6..96,600&family=Spectral:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,500&family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap');

:root {
  /* ============== COLOR — RAW ============== */
  --ink:        #14110F;  /* near-black, warm. primary text + ink */
  --ink-soft:   #3A332E;  /* secondary text */
  --ink-faint:  #807468;  /* tertiary text, metadata, captions */
  --paper:      #F3EDE0;  /* warm bone — primary background */
  --paper-2:    #EBE3D2;  /* slightly deeper paper — panels, wells */
  --paper-pure: #FBF7EE;  /* lifted paper — cards on paper */
  --redact:     #000000;  /* pure black — redaction bars, hard rules */

  /* the one shock */
  --blood:      #D8210E;  /* vermillion — accent, links, marks */
  --blood-deep: #A4160A;  /* pressed / hover-dark */
  --blood-wash: #F0C9C2;  /* tint for selection, washes */

  /* rare cold counterpoint — used sparingly for "challenge" energy */
  --cyan:       #1E63D8;  /* editorial blue, footnotes/alt links */

  /* hairlines + edges */
  --rule:       #14110F;        /* full-strength rule */
  --rule-soft:  rgba(20,17,15,0.22); /* faint divider */
  --rule-blood: #D8210E;

  /* ============== COLOR — SEMANTIC ============== */
  --bg:            var(--paper);
  --bg-panel:      var(--paper-2);
  --bg-card:       var(--paper-pure);
  --bg-invert:     var(--ink);
  --fg1:           var(--ink);        /* primary text */
  --fg2:           var(--ink-soft);   /* secondary */
  --fg3:           var(--ink-faint);  /* tertiary / meta */
  --fg-invert:     var(--paper);      /* text on ink */
  --accent:        var(--blood);
  --accent-press:  var(--blood-deep);
  --link:          var(--blood);
  --selection-bg:  var(--blood);
  --selection-fg:  var(--paper);

  /* ============== TYPE — FAMILIES ============== */
  --font-display: 'Bodoni Moda', 'Times New Roman', serif; /* Didone — titles, hero */
  --font-read:    'Spectral', Georgia, serif;              /* the poems + reading body */
  --font-mono:    'Space Mono', 'Courier New', monospace;  /* system voice — meta, nav, labels */

  /* ============== TYPE — SCALE (fluid) ============== */
  --step--2: clamp(0.69rem, 0.66rem + 0.15vw, 0.78rem);
  --step--1: clamp(0.83rem, 0.78rem + 0.22vw, 0.95rem);
  --step-0:  clamp(1.00rem, 0.94rem + 0.30vw, 1.18rem);   /* base reading */
  --step-1:  clamp(1.25rem, 1.14rem + 0.55vw, 1.62rem);
  --step-2:  clamp(1.56rem, 1.36rem + 1.00vw, 2.43rem);
  --step-3:  clamp(1.95rem, 1.60rem + 1.75vw, 3.65rem);
  --step-4:  clamp(2.44rem, 1.84rem + 3.00vw, 5.48rem);
  --step-5:  clamp(3.05rem, 2.05rem + 5.00vw, 8.22rem);   /* hero blast */

  /* ============== SPACING (8pt-ish, with a tight 4) ============== */
  --space-3xs: 2px;
  --space-2xs: 4px;
  --space-xs:  8px;
  --space-sm:  12px;
  --space-md:  20px;
  --space-lg:  32px;
  --space-xl:  52px;
  --space-2xl: 84px;
  --space-3xl: 136px;

  /* ============== RADII — near-zero. paper has corners. ============== */
  --radius-0: 0px;       /* default. brutalist square. */
  --radius-1: 2px;       /* barely-there softening on inputs */
  --radius-pill: 999px;  /* only for tiny tags/dots */

  /* ============== BORDERS ============== */
  --border-hair:  1px solid var(--rule-soft);
  --border-rule:  1px solid var(--rule);
  --border-heavy: 2px solid var(--ink);
  --border-blood: 2px solid var(--blood);

  /* ============== SHADOWS — minimal. ink, not blur. ============== */
  --shadow-none: none;
  --shadow-print: 3px 3px 0 var(--ink);          /* hard offset "print" shadow */
  --shadow-print-blood: 3px 3px 0 var(--blood);
  --shadow-lift: 0 10px 30px -12px rgba(20,17,15,0.35); /* rare soft lift */

  /* ============== MOTION ============== */
  --ease-snap: cubic-bezier(0.2, 0.9, 0.25, 1);   /* quick, slight overshoot */
  --ease-ink:  cubic-bezier(0.65, 0, 0.35, 1);    /* deliberate */
  --dur-fast:  120ms;
  --dur-base:  220ms;
  --dur-slow:  420ms;
}

/* ============================================================
   SEMANTIC ELEMENT STYLES — opt-in via .pp-prose / utility classes
   ============================================================ */

::selection { background: var(--selection-bg); color: var(--selection-fg); }

.pp-hero {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--step-5);
  line-height: 0.92;
  letter-spacing: -0.015em;
  color: var(--fg1);
}

h1, .pp-h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step-4);
  line-height: 0.98;
  letter-spacing: -0.01em;
  color: var(--fg1);
  margin: 0;
}
h2, .pp-h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--step-3);
  line-height: 1.02;
  letter-spacing: -0.005em;
  color: var(--fg1);
  margin: 0;
}
h3, .pp-h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--step-2);
  line-height: 1.08;
  color: var(--fg1);
  margin: 0;
}

/* the poem / reading body */
.pp-read, .pp-poem {
  font-family: var(--font-read);
  font-weight: 400;
  font-size: var(--step-0);
  line-height: 1.62;
  color: var(--fg1);
}
.pp-poem {
  line-height: 1.5;
  white-space: pre-wrap;     /* poems honor their own line breaks */
  text-wrap: balance;
}
.pp-lede {
  font-family: var(--font-read);
  font-weight: 300;
  font-style: italic;
  font-size: var(--step-1);
  line-height: 1.4;
  color: var(--fg2);
}

/* the system voice — labels, nav, metadata, kickers */
.pp-meta, .pp-kicker, .pp-label {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: var(--step--1);
  letter-spacing: 0.04em;
  color: var(--fg3);
}
.pp-kicker {
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: var(--step--2);
  color: var(--blood);
  font-weight: 700;
}
.pp-num {
  font-family: var(--font-mono);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

a, .pp-link {
  color: var(--link);
  text-decoration: none;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  border-bottom: 1px solid var(--blood);
  transition: background var(--dur-fast) var(--ease-ink);
}
a:hover, .pp-link:hover { background: var(--blood); color: var(--paper); }

/* the signature: a redaction bar */
.pp-redact {
  background: var(--redact);
  color: var(--redact);
  padding: 0 0.18em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.pp-redact-reveal:hover { color: var(--paper); }