/* ============================================================
   shared.css, D2M design system
   Tokens, base type, masthead, navigation, footer, primitives.
   Owned by the home-page agent; referenced by all other pages.
   ============================================================ */

@layer reset, tokens, type, layout, components;

/* ---------- reset ---------- */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; }
  body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
  }
  img, svg { display: block; max-width: 100%; }
  h1, h2, h3, h4, p, figure, ul, ol { margin: 0; padding: 0; }
  ul, ol { list-style: none; }
  a { color: inherit; text-decoration: none; }
}

/* ---------- design tokens ---------- */
@layer tokens {
  :root {
    /* surfaces */
    --bg:        oklch(0.975 0.008 80);   /* warm off-white */
    --bg-tint:   oklch(0.955 0.012 78);
    --paper:     oklch(0.99  0.005 80);

    /* ink scale (never #000) */
    --ink:       oklch(0.20 0.012 60);
    --ink-2:     oklch(0.36 0.012 60);
    --ink-3:     oklch(0.54 0.010 60);
    --ink-4:     oklch(0.72 0.008 60);
    --muted-ink: var(--ink-3);
    --rule:      oklch(0.86 0.010 70);

    /* the one accent, vermilion */
    --accent:      oklch(0.62 0.20 35);
    --accent-deep: oklch(0.52 0.21 33);
    --accent-soft: oklch(0.88 0.06 40);

    /* type stacks */
    --font-serif: "Source Serif 4", Georgia, "Times New Roman", serif;
    --font-sans:  "Inter Tight", system-ui, sans-serif;

    /* layout */
    --maxw:     1180px;
    --col-text: 72ch;

    /* type scale */
    --step--1: clamp(0.74rem, 0.70rem + 0.18vw, 0.84rem);
    --step-0:  clamp(0.98rem, 0.94rem + 0.18vw, 1.05rem);
    --step-1:  clamp(1.08rem, 1.00rem + 0.30vw, 1.20rem);
    --step-2:  clamp(1.30rem, 1.15rem + 0.65vw, 1.55rem);
    --step-3:  clamp(1.60rem, 1.35rem + 1.10vw, 2.10rem);
    --step-4:  clamp(2.00rem, 1.60rem + 1.80vw, 2.80rem);
    --step-5:  clamp(2.60rem, 2.00rem + 2.40vw, 3.80rem);

    /* spacing */
    --gutter-x: clamp(20px, 4vw, 56px);
  }
}

/* ---------- base typography ---------- */
@layer type {
  body {
    font-family: var(--font-serif);
    font-optical-sizing: auto;
    font-size: var(--step-0);
    line-height: 1.62;
    color: var(--ink);
    background: var(--bg);
  }

  p { margin: 0 0 1.05em; }
  p:last-child { margin-bottom: 0; }

  em, i { font-style: italic; }
  strong, b { font-weight: 600; color: var(--ink); }

  blockquote {
    margin: 1.4em 0;
    padding: 0 0 0 1.1em;
    border-left: 2px solid var(--accent);
    font-style: italic;
    color: var(--ink-2);
  }

  a { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; text-decoration-color: var(--rule); }
  a:hover { text-decoration-color: var(--accent); color: var(--accent-deep); }

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

  h1, h2, h3, h4 {
    font-family: var(--font-sans);
    font-weight: 700;
    letter-spacing: -0.025em;
    color: var(--ink);
    line-height: 1.1;
  }
}

/* ---------- layout primitives ---------- */
@layer layout {
  .container {
    max-width: var(--maxw);
    margin: 0 auto;
    padding-left: var(--gutter-x);
    padding-right: var(--gutter-x);
  }
  .text-column {
    max-width: var(--col-text);
  }

  /* tracked-out caps eyebrow */
  .eyebrow {
    font-family: var(--font-sans);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-3);
  }
}

/* ---------- masthead ---------- */
@layer components {
  .masthead {
    border-bottom: 1px solid var(--rule);
    background: var(--bg);
  }
  .masthead-inner {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 16px var(--gutter-x);
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 24px;
    flex-wrap: wrap;
  }
  .masthead-brand {
    font-family: var(--font-sans);
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-2);
    display: inline-flex;
    align-items: baseline;
    gap: 0.65em;
  }
  .masthead-dot {
    display: inline-block;
    width: 0.55em;
    height: 0.55em;
    background: var(--accent);
    transform: translateY(0.02em);
    flex-shrink: 0;
  }
  .masthead-name { color: var(--ink-2); }
  .masthead-sep {
    color: var(--ink-4);
    font-weight: 400;
    padding: 0 0.05em;
  }
  .masthead-project { color: var(--ink); font-weight: 600; }
  .masthead-date {
    font-family: var(--font-sans);
    font-size: 0.74rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-3);
  }

  /* ---------- site navigation ---------- */
  .site-nav {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 14px var(--gutter-x) 16px;
    display: flex;
    gap: clamp(1.5rem, 3vw, 3rem);
    flex-wrap: wrap;
    border-top: 1px solid var(--rule);
  }
  .site-nav-link {
    font-family: var(--font-sans);
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-2);
    text-decoration: none;
    padding-bottom: 4px;
    border-bottom: 2px solid transparent;
    transition: color 120ms ease, border-color 120ms ease;
  }
  .site-nav-link:hover {
    color: var(--ink);
    border-bottom-color: var(--rule);
  }
  .site-nav-link.is-active {
    color: var(--ink);
    border-bottom-color: var(--accent);
  }

  /* ---------- site footer ---------- */
  .site-footer {
    margin-top: clamp(60px, 8vw, 120px);
    border-top: 1px solid var(--rule);
    background: var(--bg);
  }
  .site-footer-inner {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: clamp(28px, 4vw, 48px) var(--gutter-x) clamp(40px, 5vw, 64px);
    display: grid;
    gap: 14px;
  }
  .site-footer-credit {
    font-family: var(--font-sans);
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    color: var(--ink-2);
  }
  .site-footer-credit a {
    color: var(--ink-2);
    text-decoration: underline;
    text-decoration-color: var(--rule);
    text-underline-offset: 3px;
  }
  .site-footer-credit a:hover {
    color: var(--accent-deep);
    text-decoration-color: var(--accent);
  }
  .site-footer-sources {
    font-family: var(--font-sans);
    font-size: 0.72rem;
    line-height: 1.62;
    color: var(--ink-3);
    max-width: 80ch;
  }
  .site-footer-sources em {
    font-family: var(--font-serif);
    font-style: italic;
  }
}

/* ---------- mobile refinements ---------- */
@media (max-width: 640px) {
  .masthead-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .site-nav {
    gap: 1.25rem;
    padding-top: 12px;
    padding-bottom: 14px;
  }
  .masthead-brand {
    font-size: 0.70rem;
    flex-wrap: wrap;
  }
}