/* ============================================================
   GOOD THINGS — Editorial Design System
   Foundations: color + type tokens
   Derived from the "Good Things Takes Time" poster (Reffanfx)
   ------------------------------------------------------------
   Display face: "Against" (Didone, high-contrast).
   ⚠ SUBSTITUTION: the licensed "Against" binary is not bundled.
   We load DM Serif Display (CDN) as the nearest open match.
   Drop the real Against .woff2 into /fonts and swap --font-display.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=Spectral:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400;1,500&display=swap');

:root {
  /* ---- Paper / surfaces -------------------------------- */
  --paper:        #FBF6E5;   /* primary warm cream ground   */
  --paper-2:      #F3EBD4;   /* deeper card / panel cream   */
  --paper-3:      #ECE2C7;   /* sunk wells, hairline fills  */
  --paper-edge:   #E2D6B8;   /* hairline borders on paper   */

  /* ---- Ink ---------------------------------------------- */
  --ink:          #211B12;   /* warm near-black, headlines  */
  --ink-soft:     #4A4334;   /* body copy                   */
  --ink-mute:     #6F6C5D;   /* captions, credits, meta     */
  --ink-faint:    #9A9482;   /* disabled / watermark        */

  /* ---- Brand color -------------------------------------- */
  --oxblood:      #CE6320;   /* display accent, gebrand oranje */
  --oxblood-2:    #B0541C;
  --magenta:      #E9657B;   /* primary accent (lelie-roze)  */
  --magenta-deep: #D14862;   /* pressed / on-light accent   */
  --magenta-soft: #F4AEBA;   /* tints, washes               */
  --magenta-wash: #FBE3E8;   /* lightest tint surface       */
  --sage:         #7C7A4E;   /* foliage olive, tertiary     */

  /* ---- Semantic ----------------------------------------- */
  --accent:        var(--magenta);
  --accent-press:  var(--magenta-deep);
  --link:          var(--oxblood);
  --focus-ring:    color-mix(in oklch, var(--magenta) 55%, transparent);
  --selection:     var(--magenta-soft);

  /* ---- Type families ------------------------------------ */
  --font-display: 'DM Serif Display', 'Against', 'Playfair Display', Georgia, serif;
  --font-body:    'Spectral', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --font-mono:    ui-monospace, 'SFMono-Regular', Menlo, monospace;

  /* ---- Type scale (poster-editorial, fluid) ------------- */
  --t-display:  clamp(64px, 11vw, 148px); /* @kind font */
  --t-h1:       clamp(40px, 6vw, 72px); /* @kind font */
  --t-h2:       clamp(30px, 4vw, 46px); /* @kind font */
  --t-h3:       28px;
  --t-h4:       21px;
  --t-body:     17px;
  --t-small:    14px;
  --t-eyebrow:  12px;   /* letterspaced caps             */

  --lh-tight:   0.96; /* @kind font */
  --lh-snug:    1.12; /* @kind font */
  --lh-body:    1.6; /* @kind font */

  /* ---- Spacing (4pt base) ------------------------------- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;
  --s-9: 96px; --s-10:128px;

  /* ---- Radii (soft photo-corner language) --------------- */
  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 18px;   /* photo / card corners as on the poster */
  --r-xl: 28px;
  --r-pill: 999px;

  /* ---- Borders ------------------------------------------ */
  --hair: 1px solid var(--paper-edge);
  --rule: 1.5px solid var(--ink);

  /* ---- Shadows (low, warm, paper-soft) ------------------ */
  --sh-1: 0 1px 2px rgba(33,27,18,.06);
  --sh-2: 0 6px 18px -8px rgba(33,27,18,.18);
  --sh-3: 0 18px 44px -18px rgba(33,27,18,.28);
}

/* ============================================================
   SEMANTIC ELEMENT STYLES
   ============================================================ */

.gt-display {
  font-family: var(--font-display);
  font-size: var(--t-display);
  line-height: var(--lh-tight);
  letter-spacing: -0.01em;
  color: var(--ink);
}
.gt-display em, .gt-display .it { font-style: italic; }
.gt-display .oxblood { color: var(--oxblood); }

h1, .gt-h1 {
  font-family: var(--font-display);
  font-size: var(--t-h1);
  line-height: var(--lh-snug);
  letter-spacing: -0.005em;
  color: var(--ink);
  margin: 0;
}
h2, .gt-h2 {
  font-family: var(--font-display);
  font-size: var(--t-h2);
  line-height: var(--lh-snug);
  color: var(--ink);
  margin: 0;
}
h3, .gt-h3 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--t-h3);
  line-height: 1.25;
  color: var(--ink);
  margin: 0;
}
h4, .gt-h4 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--t-h4);
  line-height: 1.3;
  color: var(--ink);
  margin: 0;
}

p, .gt-body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--t-body);
  line-height: var(--lh-body);
  color: var(--ink-soft);
  text-wrap: pretty;
  margin: 0;
}

.gt-lead {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 21px;
  line-height: 1.45;
  color: var(--ink-soft);
}

.gt-caption {
  font-family: var(--font-body);
  font-size: var(--t-small);
  line-height: 1.45;
  color: var(--ink-mute);
}

.gt-eyebrow {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--t-eyebrow);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

a, .gt-link {
  color: var(--link);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in oklch, var(--link) 35%, transparent);
  transition: border-color .18s ease, color .18s ease;
}
a:hover { border-bottom-color: var(--link); }

code, .gt-code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--paper-3);
  padding: 0.1em 0.4em;
  border-radius: var(--r-sm);
  color: var(--oxblood);
}

::selection { background: var(--selection); color: var(--ink); }

hr, .gt-rule { border: none; border-top: var(--rule); margin: var(--s-6) 0; }