/* ————————————————————————————————————————————————————————
   dr-2026 — tokens.css
   @font-face block per Phase C §06, expanded to include latin + latin-ext.
   Each face has two declarations: latin first, latin-ext second.
   Browsers select by unicode-range, so the latin file (preloaded)
   serves basic-latin glyphs and the latin-ext file lazy-loads when
   any extended-latin glyph (Hervé, Søren, Björk, etc.) is encountered.
   Token block below per /design/phase-b/tokens.css (Phase A locked).
   ———————————————————————————————————————————————————————— */

/* ============================================================
   Source Serif 4 — Regular (400)
   ============================================================ */
@font-face {
  font-family: "Source Serif 4";
  src: url("./fonts/SourceSerif4-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2074,
                 U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Source Serif 4";
  src: url("./fonts/SourceSerif4-Regular.latin-ext.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
                 U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ============================================================
   Source Serif 4 — Italic (400)
   ============================================================ */
@font-face {
  font-family: "Source Serif 4";
  src: url("./fonts/SourceSerif4-It.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2074,
                 U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Source Serif 4";
  src: url("./fonts/SourceSerif4-It.latin-ext.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
                 U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ============================================================
   Source Serif 4 — Medium (500)
   ============================================================ */
@font-face {
  font-family: "Source Serif 4";
  src: url("./fonts/SourceSerif4-Medium.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2074,
                 U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Source Serif 4";
  src: url("./fonts/SourceSerif4-Medium.latin-ext.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
                 U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ============================================================
   JetBrains Mono — Regular (400)
   ============================================================ */
@font-face {
  font-family: "JetBrains Mono";
  src: url("./fonts/JetBrainsMono-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2074,
                 U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("./fonts/JetBrainsMono-Regular.latin-ext.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
                 U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ============================================================
   JetBrains Mono — Medium (500)
   ============================================================ */
@font-face {
  font-family: "JetBrains Mono";
  src: url("./fonts/JetBrainsMono-Medium.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2074,
                 U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("./fonts/JetBrainsMono-Medium.latin-ext.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
                 U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ————————————————————————————————————————————————————————
   duncanriley.com — design tokens (Phase A, locked)
   Used by all Phase B mockups. This file IS the style-tile basis for Phase C.
   ———————————————————————————————————————————————————————— */

:root {
  /* Paper & ink */
  --color-bg:         #f7f4ee;
  --color-bg-2:       #efeae0;
  --color-text:       #1a1613;
  --color-text-2:     #4e4842;
  --color-text-3:     #6f685e;
  --color-rule:       #d8d1c3;
  --color-rule-2:     #8a8273;

  /* Accent — deep muted navy (approved) */
  --color-accent:       #1d2a4a;
  --color-accent-hover: #121c36;
  --color-mark:         #e7dfcd;

  /* Type */
  --font-serif: "Source Serif 4", "Source Serif Pro", "Iowan Old Style",
                "Palatino Linotype", Georgia, serif;
  --font-mono:  "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo,
                Consolas, monospace;

  /* 8px base scale */
  --space-_1: 4px;
  --space-0:  8px;
  --space-1:  12px;
  --space-2:  16px;
  --space-3:  24px;
  --space-4:  32px;
  --space-5:  48px;
  --space-6:  64px;
  --space-7:  96px;
  --space-8:  128px;

  /* Measure caps */
  --measure-tight:  44ch;
  --measure-prose:  62ch;
  --measure-wide:   72ch;

  /* Container widths */
  --container-landing: 1080px;
  --container-prose:   720px;
  --container-wide:    1120px;

  /* —— Phase C extension tokens ————————————————————————
     Originally a separate :root block; merged here so the file has one
     authoritative root. Names per Phase C §01.
     —————————————————————————————————————————————————— */
  /* Focus colour — explicit alias of accent for readability of focus ring */
  --color-focus: var(--color-accent);

  /* Type scale */
  --fs-display:  84px;   /* hero name, desktop */
  --fs-h1:       72px;   /* page titles, desktop */
  --fs-h2:       28px;
  --fs-h3:       22px;
  --fs-card:     19px;   /* feed card title */
  --fs-lede:     21px;   /* italic intro */
  --fs-body-lg:  19px;   /* landing bio, about prose */
  --fs-body:     17px;
  --fs-sm:       15px;
  --fs-xs:       13.5px;
  --fs-meta:     11px;

  /* Line heights */
  --lh-tight:    1.0;
  --lh-snug:     1.1;
  --lh-title:    1.15;
  --lh-heading:  1.3;
  --lh-body:     1.6;
  --lh-prose:    1.7;

  /* Letter spacing */
  --ls-display:  -0.025em;
  --ls-title:    -0.02em;
  --ls-h:        -0.015em;
  --ls-h-sm:     -0.005em;
  --ls-body:      0;
  --ls-meta:      0.14em;
  --ls-nav:       0.12em;

  /* Borders & radii */
  --border-hair:   1px solid var(--color-rule);
  --border-strong: 1px solid var(--color-text);
  --radius-0:      0;
  --radius-sm:     2px;

  /* Motion */
  --t-fast: 120ms;
  --t-med:  180ms;
  --ease:   cubic-bezier(0.2, 0.7, 0.3, 1);

  /* Focus ring */
  --focus-outline: 2px solid var(--color-focus);
  --focus-offset:  3px;
}

/* Shared element-level defaults — rescoped from .dr-site (which never
   appears in the rendered DOM) to the elements that always do. base.css
   carries the same rules; duplicating here is harmless and keeps tokens.css
   self-sufficient if it's ever loaded standalone. */
*, *::before, *::after { box-sizing: border-box; }

body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-serif);
  font-size: 17px;
  line-height: 1.6;
  font-feature-settings: "kern","liga","onum";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a {
  color: var(--color-accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
a:hover { color: var(--color-accent-hover); }

/* Masthead ————————————————————————————— */
.dr-masthead {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-bottom: 1px solid var(--color-text);
  padding: 0 0 var(--space-1);
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-2);
}
.dr-masthead .dr-wordmark { color: var(--color-text); font-weight: 500; }
.dr-masthead nav { display: flex; gap: var(--space-3); }
.dr-masthead nav a { color: var(--color-text-2); text-decoration: none; }
.dr-masthead nav a[aria-current="page"] { color: var(--color-text); }
.dr-masthead nav a:hover { color: var(--color-accent); }

/* Footer ————————————————————————————— */
.dr-footer {
  border-top: 1px solid var(--color-rule);
  padding: var(--space-4) 0 var(--space-2);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-3);
  align-items: end;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-3);
}
.dr-footer .dr-socials { display: flex; gap: var(--space-3); flex-wrap: wrap; justify-content: flex-end; }
.dr-footer .dr-socials a { color: var(--color-text-2); text-decoration: none; }
.dr-footer .dr-socials a:hover { color: var(--color-accent); }
.dr-footer .dr-credit { color: var(--color-text-3); }

/* Meta / eyebrow / chip ————————————————————————————— */
.dr-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-3);
}
.dr-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent);
}
.dr-chip::before {
  content: "";
  width: 6px; height: 6px;
  background: var(--color-accent);
  border-radius: 100%;
}

/* Headings ————————————————————————————— */
.dr-h1 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 44px;
  line-height: 1.08;
  letter-spacing: -0.015em;
  margin: 0;
  text-wrap: balance;
}
.dr-h2 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 28px;
  line-height: 1.2;
  letter-spacing: -0.005em;
  margin: 0;
}
.dr-lede {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 21px;
  line-height: 1.5;
  color: var(--color-text-2);
  margin: 0;
}
.dr-prose p {
  font-size: 17px;
  line-height: 1.7;
  margin: 0 0 var(--space-3);
  max-width: var(--measure-prose);
}
.dr-prose p:last-child { margin-bottom: 0; }

/* Rule ————————————————————————————— */
.dr-rule {
  border: 0;
  border-top: 1px solid var(--color-rule);
  margin: var(--space-5) 0;
}

/* SiliconANGLE card ————————————————————————————— */
.dr-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: 0;
}
.dr-card-thumb {
  aspect-ratio: 16/10;
  background: var(--color-bg-2);
  overflow: hidden;
  position: relative;
}
.dr-card-thumb .dr-ph {
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(135deg,
      rgba(0,0,0,0.035) 0 8px,
      transparent 8px 16px),
    var(--color-bg-2);
  display: flex; align-items: center; justify-content: center;
}
.dr-card-thumb .dr-ph span {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em;
  color: var(--color-text-3); text-transform: uppercase;
}
.dr-card-meta {
  display: flex; gap: var(--space-2); align-items: baseline;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--color-text-3);
}
.dr-card-title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 19px;
  line-height: 1.28;
  letter-spacing: -0.005em;
  color: var(--color-text);
  margin: 0;
  text-wrap: balance;
}
.dr-card-title a { color: inherit; text-decoration: none; }
.dr-card-title a:hover { color: var(--color-accent); }
.dr-card-excerpt {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--color-text-2);
  margin: 0;
}

/* Placeholder portrait — used on artboards until the real photo drops in */
.dr-portrait {
  aspect-ratio: 4/5;
  background: var(--color-bg-2);
  overflow: hidden;
  position: relative;
}
.dr-portrait img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dr-portrait-cap {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-3);
  margin-top: var(--space-1);
  display: flex; justify-content: space-between;
}

/* Form controls (contact) ————————————————————————————— */
.dr-field {
  display: flex; flex-direction: column; gap: var(--space-0);
  margin-bottom: var(--space-3);
}
.dr-field label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-3);
}
.dr-field input,
.dr-field textarea {
  font-family: var(--font-serif);
  font-size: 17px;
  line-height: 1.5;
  color: var(--color-text);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--color-rule-2);
  padding: 8px 0;
  outline: none;
  width: 100%;
  resize: none;
}
.dr-field input:focus,
.dr-field textarea:focus {
  border-bottom-color: var(--color-accent);
}
.dr-btn {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: var(--color-text);
  color: var(--color-bg);
  border: 0;
  padding: 14px 22px;
  cursor: pointer;
}
.dr-btn:hover { background: var(--color-accent); }

/* Archive list ————————————————————————————— */
.dr-archive-item {
  padding: var(--space-3) 0;
  border-top: 1px solid var(--color-rule);
}
.dr-archive-item:last-child { border-bottom: 1px solid var(--color-rule); }
.dr-archive-item .dr-archive-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-3);
  margin-bottom: var(--space-0);
  display: flex; gap: var(--space-2);
}
.dr-archive-item h3 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 22px;
  line-height: 1.28;
  letter-spacing: -0.005em;
  margin: 0 0 var(--space-1);
  text-wrap: balance;
}
.dr-archive-item h3 a { color: var(--color-text); text-decoration: none; }
.dr-archive-item h3 a:hover { color: var(--color-accent); }
.dr-archive-item p {
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--color-text-2);
  margin: 0;
  max-width: var(--measure-prose);
}

/* Year filter row ————————————————————————————— */
.dr-years {
  display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-2);
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.08em;
  padding: var(--space-2) 0;
  border-top: 1px solid var(--color-rule);
  border-bottom: 1px solid var(--color-rule);
}
.dr-years a { color: var(--color-text-2); text-decoration: none; }
.dr-years a[aria-current="true"] { color: var(--color-text); font-weight: 500; }
.dr-years a:hover { color: var(--color-accent); }

/* Pagination ————————————————————————————— */
.dr-pager {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: var(--space-4) 0;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-3);
}
.dr-pager .dr-nums { display: flex; gap: var(--space-2); }
.dr-pager a { color: var(--color-text-2); text-decoration: none; }
.dr-pager a[aria-current="page"] { color: var(--color-text); }
.dr-pager a:hover { color: var(--color-accent); }