/* ============================================================
   doiteveryday.co — Journal Edition
   Editorial / newspaper aesthetic: cream paper, serif type,
   oxblood accent, hairlines, no glows.
   ============================================================ */

/* ---------- Fonts ----------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;0,6..72,700;1,6..72,400;1,6..72,500&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
  /* ---------- Ink & paper -------------------------------- */
  --paper:           #F4ECD9;        /* warm cream — primary canvas */
  --paper-2:         #EFE5CE;        /* slightly darker, deep sections */
  --paper-3:         #E8DCC0;        /* tone for cards/insets */
  --paper-deepest:   #2A2620;        /* footer flips to deep ink */

  --ink:             #1A1611;        /* primary text — warm near-black */
  --ink-2:           #3D362C;        /* secondary */
  --ink-3:           #6E6354;        /* muted, captions */
  --ink-4:           #968874;        /* dim, hints */

  --accent:          #A8331C;        /* OXBLOOD — emphasis, "live", shipped */
  --accent-2:        #8B2614;        /* darker oxblood */
  --gold:            #B8902F;        /* used sparingly */
  --sepia:           #8A6843;        /* mid-tone for streak grid */

  /* ---------- Backgrounds (legacy names, repurposed) ----- */
  --bg-cosmic:       var(--paper);   /* the canvas is now cream */
  --bg-deep:         var(--paper-2);
  --bg-card:         var(--paper-3);
  --bg-card-hover:   #E2D4B5;
  --bg-glass:        rgba(244,236,217,0.92);

  /* ---------- Brand-name aliases (legacy) ---------------- */
  --bz-purple:       var(--ink);     /* "primary" repurposed to ink */
  --bz-violet:       var(--ink-2);
  --bz-deep:         var(--paper-deepest);
  --bz-darker:       var(--paper-deepest);
  --bz-darkest:      var(--paper-deepest);
  --bz-soft-purple:  var(--ink-4);
  --bz-cyan:         var(--accent);  /* "accent" repurposed to oxblood */
  --bz-tint:         var(--paper-3);

  /* ---------- Status ------------------------------------- */
  --status-live:     var(--accent);
  --status-build:    var(--gold);
  --status-concept:  var(--ink-4);
  --status-paused:   var(--ink-4);

  /* ---------- Gradients ---------------------------------- */
  /* No glows. Subtle paper-tone shift for the masthead. */
  --grad-brand:      linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
  --grad-text:       none;            /* gradient text doesn't suit newspaper */
  --glow-cyan:       transparent;
  --glow-purple:     transparent;

  /* ---------- Hairlines ---------------------------------- */
  --rule:            #C9BC9F;         /* warm gray-tan rule */
  --rule-strong:     #1A1611;         /* heavy black rule */
  --border-1:        var(--rule);
  --border-2:        rgba(201,188,159,0.5);
  --border-cyan:     var(--accent);

  /* ---------- Shadows ------------------------------------ */
  /* Editorial = no shadows. Keep variables defined but flat. */
  --shadow-sm:       none;
  --shadow-md:       none;
  --shadow-lg:       none;
  --shadow-cyan:     none;
  --shadow-purple:   none;

  /* ---------- Radii (sharper, less rounded) -------------- */
  --r-xs:            0px;
  --r-sm:            0px;
  --r-md:            0px;
  --r-lg:            0px;
  --r-full:          999px;          /* still round for the rare pill */

  /* ---------- Spacing ------------------------------------ */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;
  --sp-9: 88px;  /* section rhythm */
  --sp-10: 128px;

  /* ---------- Layout ------------------------------------- */
  --container:        1180px;
  --container-narrow: 760px;
  --container-prose:  680px;

  /* ---------- Type families ------------------------------ */
  --font-display:    'DM Serif Display', 'Playfair Display', Georgia, serif;
  --font-body:       'Newsreader', 'Source Serif Pro', Georgia, serif;
  --font-mono:       'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ---------- Semantic type sizes ------------------------ */
  --t-h1:            clamp(48px, 7vw, 96px);
  --t-h2:            clamp(32px, 4.4vw, 52px);
  --t-h3:            clamp(22px, 2.8vw, 30px);
  --t-h4:            22px;
  --t-body-lg:       19px;
  --t-body:          17px;
  --t-body-sm:       15px;
  --t-caption:       13px;
  --t-mono-sm:       12px;
  --t-pill:          11px;

  /* ---------- Motion ------------------------------------- */
  --ease-out:        cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out:     cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:        180ms;
  --dur-med:         320ms;
  --dur-slow:        600ms;

  /* Foreground tokens (legacy names) → repurposed */
  --fg-1: var(--ink);
  --fg-2: var(--ink-2);
  --fg-3: var(--ink-3);
  --fg-4: var(--ink-4);
  --fg-on-bright: var(--paper);
}

/* ============================================================
   Base / reset
   ============================================================ */
*,
*::before,
*::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--paper);
  /* subtle paper texture: very faint diagonal noise via repeating gradient */
  background-image:
    repeating-linear-gradient(45deg, rgba(0,0,0,0.012) 0 2px, transparent 2px 4px),
    radial-gradient(circle at 20% 0%, rgba(168,51,28,0.04), transparent 40%);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection {
  background: var(--accent);
  color: var(--paper);
}

/* ============================================================
   Semantic type
   ============================================================ */
h1, .h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--t-h1);
  line-height: 0.98;
  letter-spacing: -0.025em;
  margin: 0 0 var(--sp-5);
  color: var(--ink);
}

h2, .h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--t-h2);
  line-height: 1.05;
  letter-spacing: -0.018em;
  margin: 0 0 var(--sp-4);
  color: var(--ink);
}

h3, .h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--t-h3);
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0 0 var(--sp-3);
  color: var(--ink);
}

h4, .h4 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--t-h4);
  line-height: 1.25;
  margin: 0 0 var(--sp-2);
  color: var(--ink);
}

p, .p {
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: 1.65;
  color: var(--ink-2);
  margin: 0 0 var(--sp-4);
}

.lead {
  font-size: var(--t-body-lg);
  line-height: 1.5;
  color: var(--ink-2);
}

.muted { color: var(--ink-3); }
.dim   { color: var(--ink-4); }

/* Editorial italic class — for emphasis throughout body */
em, .italic {
  font-style: italic;
  color: var(--ink);
}

/* "Gradient text" no longer makes sense; render flat oxblood */
.grad-text {
  background: none;
  -webkit-background-clip: initial;
          background-clip: initial;
  -webkit-text-fill-color: var(--accent);
          color: var(--accent);
  font-style: italic;
}

/* Eyebrow / meta mono labels */
.eyebrow,
.mono-meta {
  font-family: var(--font-mono);
  font-size: var(--t-mono-sm);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 500;
}

code, kbd, .mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
  color: var(--ink-2);
  font-weight: 500;
}

/* Links */
a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--accent-2); }
a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.hr-faint {
  height: 1px;
  background: var(--rule);
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}