/* ============================================================
   PR PLUS — "DOSSIER" edition
   Editorial / classified-brief aesthetic
   Paper + ink + press-red · serif display + mono labels
   ============================================================ */

:root {
  --paper: #efe9dc;
  --paper-2: #e7e0d0;
  --ink: #16130d;
  --ink-2: #2b261d;
  --ink-soft: rgba(22, 19, 13, 0.62);
  --ink-faint: rgba(22, 19, 13, 0.40);
  --rule: rgba(22, 19, 13, 0.22);
  --rule-soft: rgba(22, 19, 13, 0.12);
  --red: #bf2f1c;
  --red-deep: #8f2114;

  --serif: "Instrument Serif", Georgia, "Times New Roman", serif;
  --mono: "Spline Sans Mono", "SFMono-Regular", ui-monospace, monospace;
  --sans: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;

  --maxw: 1320px;
  --gut: clamp(18px, 4vw, 56px);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

:root[data-mode="dark"] {
  --paper: #14120c;
  --paper-2: #1b1810;
  --ink: #f0ead9;
  --ink-2: #d8d2c2;
  --ink-soft: rgba(240, 234, 217, 0.64);
  --ink-faint: rgba(240, 234, 217, 0.40);
  --rule: rgba(240, 234, 217, 0.24);
  --rule-soft: rgba(240, 234, 217, 0.12);
  --red: #e8543d;
  --red-deep: #c0341d;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  transition: background .5s var(--ease), color .5s var(--ease);
}

/* subtle paper grain */
body::before {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none; z-index: 1;
  opacity: .5;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
}
:root[data-mode="dark"] body::before { mix-blend-mode: screen; opacity: .35; }

::selection { background: var(--red); color: var(--paper); }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gut); }
section { position: relative; z-index: 2; }

/* ---------- Type ---------- */
.serif { font-family: var(--serif); font-weight: 400; }
.mono { font-family: var(--mono); }

.kicker {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--red);
}
.label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

h1, h2, h3 { font-family: var(--serif); font-weight: 400; line-height: 0.94; letter-spacing: -0.01em; }
.d-xl { font-size: clamp(3.4rem, 12vw, 11rem); line-height: 0.86; letter-spacing: -0.02em; }
.d-lg { font-size: clamp(2.6rem, 7vw, 6rem); line-height: 0.9; }
.d-md { font-size: clamp(1.8rem, 3.6vw, 3.4rem); line-height: 0.96; }
.italic { font-style: italic; }
.red { color: var(--red); }

.lead { font-size: clamp(1.05rem, 1.5vw, 1.3rem); line-height: 1.5; color: var(--ink-soft); max-width: 54ch; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--mono); font-size: 12px; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase;
  padding: 15px 24px; cursor: pointer; border: 1.5px solid var(--ink);
  background: var(--ink); color: var(--paper);
  transition: all .3s var(--ease);
}
.btn:hover { background: var(--red); border-color: var(--red); transform: translate(-2px,-2px); box-shadow: 4px 4px 0 var(--ink); }
.btn-out { background: transparent; color: var(--ink); }
.btn-out:hover { background: var(--ink); color: var(--paper); box-shadow: 4px 4px 0 var(--red); }
.btn .x { transition: transform .3s var(--ease); }
.btn:hover .x { transform: translateX(3px); }