/* ============================================================
   Antique Ink — Hugo theme
   Adapted from Allan Pedersen's design system.
   ============================================================ */

/* ---- Tiempos Text — variable font, 300–700 -------------------- */
@font-face {
  font-family: "Tiempos Text";
  src: url("/fonts/TiemposText-VF-Roman.woff2") format("woff2-variations"),
       url("/fonts/TiemposText-VF-Roman.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Tiempos Text";
  src: url("/fonts/TiemposText-VF-Italic.woff2") format("woff2-variations"),
       url("/fonts/TiemposText-VF-Italic.woff2") format("woff2");
  font-weight: 300 700;
  font-style: italic;
  font-display: swap;
}

/* ---- Tiempos Headline — static cuts --------------------------- */
@font-face {
  font-family: "Tiempos Headline";
  src: url("/fonts/TiemposHeadline-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Tiempos Headline";
  src: url("/fonts/TiemposHeadline-Medium.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Tiempos Headline";
  src: url("/fonts/TiemposHeadline-Semibold.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Tiempos Headline";
  src: url("/fonts/TiemposHeadline-Bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Tiempos Headline";
  src: url("/fonts/TiemposHeadline-Black.woff2") format("woff2");
  font-weight: 900; font-style: normal; font-display: swap;
}

/* ---- Ogg — Display / Masthead (Sharp Type) -------------------- */
@font-face {
  font-family: "Ogg";
  src: url("/fonts/Ogg-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Ogg";
  src: url("/fonts/Ogg-Italic.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Ogg";
  src: url("/fonts/Ogg-Bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Ogg";
  src: url("/fonts/Ogg-BoldItalic.woff2") format("woff2");
  font-weight: 700; font-style: italic; font-display: swap;
}

/* ---- DM Sans — UI (Google Fonts CDN) -------------------------- */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&display=swap');

/* ---- Tokens ---------------------------------------------------- */
:root {
  /* Paper — aged vellum warmth */
  --paper-0:      #FDFAF4;
  --paper-1:      #F5EFE0;
  --paper-2:      #EDE4CC;
  --paper-3:      #E2D6B8;
  --paper-4:      #CEC29E;
  --paper-5:      #B5A882;

  /* Prussian Ink — editorial soul */
  --ink-0:        #E8EDF2;
  --ink-1:        #B8CAD9;
  --ink-2:        #6A8FA8;
  --ink-3:        #2E5470;
  --ink-4:        #1C3A50;
  --ink-5:        #0D1F2D;

  /* Sepia — typographic warmth */
  --sepia-1:      #7A5C3A;
  --sepia-2:      #4A3320;
  --sepia-3:      #2E1E10;

  /* Signal — rare emphasis */
  --signal:       #8B2020;

  /* Semantic — light mode */
  --fg-1: var(--sepia-3);
  --fg-2: var(--sepia-1);
  --fg-3: var(--ink-2);
  --fg-link: var(--ink-3);
  --fg-link-hover: var(--sepia-3);
  --fg-brand: var(--signal);
  --bg-page: var(--paper-1);
  --bg-card: var(--paper-0);
  --bg-inset: var(--paper-2);
  --bg-rule: var(--paper-4);
  --bg-strong: var(--ink-5);

  /* Type families */
  --font-display:  "Ogg", "EB Garamond", Georgia, serif;
  --font-body:     "Tiempos Text", "Charter", "Iowan Old Style", Georgia, serif;
  --font-headline: "Tiempos Headline", "Charter", Georgia, serif;
  --font-deck:     "Tiempos Text", Georgia, serif;
  --font-sans:     "DM Sans", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono:     "JetBrains Mono", "IBM Plex Mono", "SF Mono", Menlo, Consolas, monospace;

  --fs-12: 0.75rem;  --fs-14: 0.875rem; --fs-16: 1rem;
  --fs-18: 1.125rem; --fs-20: 1.25rem;  --fs-24: 1.5rem;
  --fs-28: 1.75rem;  --fs-32: 2rem;     --fs-40: 2.5rem;
  --fs-48: 3rem;     --fs-60: 3.75rem;  --fs-72: 4.5rem;

  --lh-tight: 1.05; --lh-snug: 1.18; --lh-body: 1.55; --lh-loose: 1.65;
  --ls-tight: -0.015em; --ls-caps: 0.12em;

  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px;
  --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px;
  --s-16: 64px; --s-20: 80px; --s-24: 96px;

  --bw-hair: 1px; --bw-rule: 2px; --bw-section: 3px;
  --shadow-1: 0 1px 2px rgba(13, 31, 45, 0.08);
  --shadow-pop: 0 12px 32px rgba(13, 31, 45, 0.18);

  --ease-standard: cubic-bezier(.2, .0, .2, 1);
  --dur-1: 120ms; --dur-2: 200ms;

  /* Layout */
  --measure: 38rem;
  --content-max: 1080px;
  --gutter: 24px;
}

/* ---- Dark mode ------------------------------------------------- */
:root[data-theme="dark"] {
  --fg-1: #F2E9DC;
  --fg-2: #B7B0A6;
  --fg-3: var(--ink-1);
  --fg-link: var(--ink-1);
  --fg-link-hover: #F2E9DC;
  --fg-brand: #C85A5A;
  --bg-page: var(--ink-5);
  --bg-card: #1A2A38;
  --bg-inset: #14232F;
  --bg-rule: #2E5470;
}

/* ---- Reset & base --------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { color: var(--fg-1); background: var(--bg-page); }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-18);
  line-height: var(--lh-body);
  color: var(--fg-1);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { max-width: 100%; height: auto; display: block; }
hr { border: 0; border-top: var(--bw-hair) solid var(--bg-rule); margin: var(--s-8) 0; }

/* ---- Typography ----------------------------------------------- */
h1, .h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(var(--fs-32), 4.4vw, var(--fs-60));
  line-height: var(--lh-tight);
  letter-spacing: 0.01em;
  color: var(--fg-1);
  margin: 0 0 var(--s-4);
}
h2, .h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(var(--fs-24), 2.8vw, var(--fs-32));
  line-height: var(--lh-snug);
  letter-spacing: 0.01em;
  color: var(--fg-1);
  margin: var(--s-10) 0 var(--s-3);
}
h3, .h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-24);
  line-height: var(--lh-snug);
  margin: var(--s-8) 0 var(--s-2);
}
h4 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-18);
  margin: var(--s-6) 0 var(--s-2);
}

p {
  font-family: var(--font-body);
  font-size: var(--fs-18);
  line-height: var(--lh-body);
  color: var(--fg-1);
  margin: 0 0 var(--s-5);
  text-wrap: pretty;
}

ul, ol {
  font-size: var(--fs-18);
  line-height: var(--lh-body);
  margin: 0 0 var(--s-5);
  padding-left: 1.4em;
}
li { margin-bottom: var(--s-2); }
li::marker { color: var(--fg-2); }

blockquote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-24);
  line-height: 1.35;
  color: var(--ink-4);
  border-top: var(--bw-rule) solid var(--ink-3);
  border-bottom: var(--bw-rule) solid var(--ink-3);
  margin: var(--s-8) 0;
  padding: var(--s-5) 0;
}
:root[data-theme="dark"] blockquote { color: var(--ink-1); }
blockquote p:last-child { margin-bottom: 0; }

a {
  color: var(--fg-link);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color var(--dur-1) var(--ease-standard),
              border-color var(--dur-1) var(--ease-standard);
}
.post-content a,
.about-content a {
  border-bottom: 1px solid var(--fg-link);
}
a:hover { color: var(--fg-link-hover); border-bottom-color: var(--fg-link-hover); }

code, kbd, samp {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--bg-inset);
  padding: 0.1em 0.35em;
  border-radius: 2px;
}
pre {
  font-family: var(--font-mono);
  font-size: var(--fs-14);
  line-height: 1.55;
  background: var(--bg-inset);
  border: var(--bw-hair) solid var(--bg-rule);
  padding: var(--s-4) var(--s-5);
  overflow-x: auto;
  margin: var(--s-6) 0;
}
pre code { background: none; padding: 0; font-size: inherit; }

/* ---- Editorial atoms ------------------------------------------ */
.kicker, .eyebrow {
  display: inline-block;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-12);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: var(--s-3);
}
:root[data-theme="dark"] .kicker,
:root[data-theme="dark"] .eyebrow { color: var(--ink-2); }

.standfirst, .deck {
  font-family: var(--font-deck);
  font-weight: 400;
  font-style: italic;
  font-size: var(--fs-20);
  line-height: 1.45;
  color: var(--ink-3);
  margin: 0 0 var(--s-6);
  text-wrap: balance;
}
:root[data-theme="dark"] .standfirst,
:root[data-theme="dark"] .deck { color: var(--ink-1); }

.byline {
  font-family: var(--font-body);
  font-feature-settings: "smcp" 1, "onum" 1;
  font-size: var(--fs-14);
  letter-spacing: 0.04em;
  color: var(--fg-2);
  margin: 0;
}
.byline time { color: var(--fg-3); }
.byline .sep { margin: 0 0.5em; color: var(--fg-3); }

/* Rules */
.rule          { border: 0; border-top: var(--bw-rule) solid var(--ink-3); margin: var(--s-6) 0; }
.rule--hair    { border-top: var(--bw-hair) solid var(--bg-rule); }
.rule--section { border-top: var(--bw-section) solid var(--ink-3); }

/* ---- Layout shell --------------------------------------------- */
.page {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(245, 239, 224, 0.92);
  backdrop-filter: saturate(140%) blur(8px);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
  border-bottom: var(--bw-hair) solid var(--bg-rule);
}
:root[data-theme="dark"] .site-header {
  background: rgba(13, 31, 45, 0.92);
}
.site-header__inner {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--s-2) var(--gutter);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
}
.site-header__top {
  display: flex;
  align-items: center;
  order: 3;
}

.site-title {
  display: block;
  border-bottom: 0;
  transition: opacity var(--dur-1) var(--ease-standard);
  order: 1;
}
.site-title:hover { opacity: 0.8; border-bottom: 0; }
/* Inline SVG logos — give the SVG access to the page's @font-face (Ogg / Tiempos)
   and let theme tokens drive colours so dark mode flips automatically. */
.site-title svg { display: block; width: auto; height: 64px; }
.site-footer__logo svg { display: block; width: auto; height: 48px; }

.site-logo__name {
  font-family: var(--font-display);
  fill: var(--fg-1);
}
.site-logo__tagline {
  font-family: var(--font-body);
  fill: var(--fg-link);
}
.site-mark__text {
  font-family: var(--font-headline);
  fill: var(--fg-link);
}
/* Dark-mode tagline / mark accent — crimson, per the spec. */
:root[data-theme="dark"] .site-logo__tagline,
:root[data-theme="dark"] .site-mark__text {
  fill: var(--fg-brand);
}

.site-nav {
  display: flex;
  gap: var(--s-6);
  order: 2;
}
.site-nav a {
  font-family: var(--font-sans);
  font-size: var(--fs-14);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--fg-1);
  border-bottom: 0;
  padding: var(--s-1) 0;
  position: relative;
}
.site-nav a:hover { color: var(--fg-brand); }
.site-nav a.active { color: var(--fg-brand); }
.site-nav a.active::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -6px;
  height: 2px;
  background: var(--fg-brand);
}

/* Theme toggle */
.theme-toggle {
  font-family: var(--font-sans);
  font-size: var(--fs-12);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  background: transparent;
  border: var(--bw-hair) solid var(--bg-rule);
  color: var(--fg-2);
  padding: 6px 10px;
  cursor: pointer;
  transition: border-color var(--dur-1) var(--ease-standard),
              color var(--dur-1) var(--ease-standard);
}
.theme-toggle:hover { border-color: var(--fg-1); color: var(--fg-1); }
.theme-toggle .label-dark { display: none; }
:root[data-theme="dark"] .theme-toggle .label-light { display: none; }
:root[data-theme="dark"] .theme-toggle .label-dark  { display: inline; }

.content {
  padding: var(--s-12) 0 var(--s-20);
}

/* ---- Site footer ---------------------------------------------- */
.site-footer {
  border-top: var(--bw-hair) solid var(--bg-rule);
  padding: var(--s-8) 0 var(--s-10);
  margin-top: var(--s-20);
}
.site-footer__inner {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-4);
  font-family: var(--font-sans);
  font-size: var(--fs-12);
  letter-spacing: 0.02em;
  color: var(--fg-2);
}
.site-footer__logo { display: block; opacity: 0.6; transition: opacity var(--dur-1) var(--ease-standard); }
.site-footer__logo:hover { opacity: 1; }
.site-footer__logo img { display: block; width: auto; height: 48px; }
.site-footer a { color: var(--fg-2); border-bottom: 0; }
.site-footer a:hover { color: var(--fg-1); }

/* ---- Home — no hero, straight to content --------------------- */

/* Lead story */
.lead-story {
  padding: var(--s-2) 0 var(--s-8);
  border-bottom: var(--bw-hair) solid var(--bg-rule);
  margin-bottom: var(--s-6);
}
.lead-story .kicker { margin-bottom: var(--s-3); }
.lead-story__title {
  font-family: var(--font-headline);
  font-weight: 600;
  font-size: clamp(var(--fs-28), 3.4vw, var(--fs-40));
  line-height: 1.1;
  letter-spacing: var(--ls-tight);
  margin: 0 0 var(--s-3);
  text-wrap: balance;
}
.lead-story__title a { color: var(--fg-1); border-bottom: 0; }
.lead-story__title a:hover { color: var(--ink-3); }
:root[data-theme="dark"] .lead-story__title a:hover { color: var(--fg-link); }
.lead-story__dek {
  font-family: var(--font-body);
  font-size: var(--fs-20);
  line-height: 1.45;
  color: var(--fg-2);
  margin: 0 0 var(--s-4);
  max-width: 36em;
  text-wrap: pretty;
}
.home-letter { max-width: var(--measure); margin: var(--s-12) auto 0; }

.home-section { margin-bottom: var(--s-16); }
.home-section__head {
  border-top: var(--bw-section) solid var(--ink-3);
  padding: var(--s-3) 0 var(--s-5);
  margin-bottom: var(--s-6);
}
:root[data-theme="dark"] .home-section__head {
  border-top-color: var(--ink-2);
}
.home-section__head h2 {
  font-family: var(--font-display);
  font-size: var(--fs-24);
  margin: 0;
  letter-spacing: 0.01em;
}

.home-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--s-6);
}
.home-card {
  border: var(--bw-hair) solid var(--bg-rule);
  padding: var(--s-5);
  background: var(--bg-card);
  transition: border-color var(--dur-1) var(--ease-standard);
}
.home-card:hover { border-color: var(--ink-3); }
.home-card .kicker {
  display: block;
  margin-bottom: var(--s-3);
}
.home-card__title {
  font-family: var(--font-headline);
  font-weight: 600;
  font-size: var(--fs-20);
  line-height: 1.2;
  margin: 0 0 var(--s-2);
  color: var(--fg-1);
}
.home-card__title a { color: inherit; border-bottom: 0; }
.home-card__title a:hover { color: var(--ink-3); }
:root[data-theme="dark"] .home-card__title a:hover { color: var(--fg-link); }
.home-card__meta {
  font-family: var(--font-sans);
  font-size: var(--fs-12);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fg-3);
  margin-top: var(--s-3);
}

/* ---- Post list ------------------------------------------------ */
.post-list { list-style: none; padding: 0; margin: 0; }
.post-list li {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--s-5);
  align-items: baseline;
  border-top: var(--bw-hair) solid var(--bg-rule);
  padding: var(--s-5) 0;
  margin: 0;
}
.post-list li:first-child { border-top: 0; padding-top: var(--s-2); }
.post-list .post-title {
  font-family: var(--font-headline);
  font-weight: 500;
  font-size: var(--fs-20);
  line-height: 1.25;
  color: var(--fg-1);
  border-bottom: 0;
}
.post-list .post-title:hover { color: var(--ink-3); }
:root[data-theme="dark"] .post-list .post-title:hover { color: var(--fg-link); }
.post-list time {
  font-family: var(--font-sans);
  font-size: var(--fs-12);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fg-3);
  white-space: nowrap;
}

/* ---- Section index -------------------------------------------- */
.list-page__head {
  border-top: var(--bw-section) solid var(--ink-3);
  padding: var(--s-3) 0 var(--s-8);
  margin-bottom: var(--s-6);
}
:root[data-theme="dark"] .list-page__head { border-top-color: var(--ink-2); }
.list-page__kicker {
  font-family: var(--font-sans);
  font-size: var(--fs-12);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: var(--s-3);
}
:root[data-theme="dark"] .list-page__kicker { color: var(--ink-2); }
.list-page__head h1 {
  font-size: clamp(var(--fs-32), 4vw, var(--fs-48));
  margin-bottom: var(--s-3);
}
.list-page__intro {
  max-width: 36em;
  color: var(--fg-2);
  font-size: var(--fs-18);
}

/* ---- Article (single) ---------------------------------------- */
.post {
  max-width: var(--measure);
  margin: 0 auto;
}
.post.is-wide { max-width: 48rem; }
.post-header {
  margin-bottom: var(--s-8);
  padding-bottom: var(--s-5);
  border-bottom: var(--bw-rule) solid var(--ink-3);
}
.post-header .kicker { margin-bottom: var(--s-4); }
.post-header h1 {
  font-family: var(--font-headline);
  font-weight: 600;
  font-size: clamp(var(--fs-32), 4.2vw, var(--fs-48));
  line-height: 1.1;
  letter-spacing: var(--ls-tight);
  margin-bottom: var(--s-5);
  text-wrap: balance;
}
.post-header .standfirst { margin-bottom: var(--s-5); }

.post-content > p:first-of-type::first-letter {
  font-family: var(--font-display);
  font-weight: 700;
  float: left;
  font-size: 4.4em;
  line-height: 0.85;
  padding: 0.05em 0.1em 0 0;
  color: var(--ink-3);
}
:root[data-theme="dark"] .post-content > p:first-of-type::first-letter {
  color: var(--ink-2);
}

.post-content figure { margin: var(--s-8) 0; }
.post-content figcaption {
  font-family: var(--font-sans);
  font-size: var(--fs-12);
  line-height: 1.4;
  color: var(--fg-2);
  margin-top: var(--s-2);
}

.post-content table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-16);
  margin: var(--s-6) 0;
}
.post-content th, .post-content td {
  text-align: left;
  padding: var(--s-2) var(--s-3);
  border-bottom: var(--bw-hair) solid var(--bg-rule);
}
.post-content th {
  font-family: var(--font-sans);
  font-size: var(--fs-12);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--fg-2);
}

.post-footer {
  margin-top: var(--s-12);
  padding-top: var(--s-5);
  border-top: var(--bw-hair) solid var(--bg-rule);
  display: flex;
  justify-content: space-between;
  font-family: var(--font-sans);
  font-size: var(--fs-12);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--fg-2);
}
.post-footer a { color: var(--fg-2); border-bottom: 0; }
.post-footer a:hover { color: var(--fg-1); }

/* ---- Articles & projects: Tiempos only (no Ogg) --------------- */
/* Both writing/ and projects/ render inside <article class="post">,
   so scoping here covers both. Site chrome (wordmark, home, about)
   intentionally still uses --font-display (Ogg). */
.post h1,
.post h2,
.post h3,
.post h4,
.post-content h1,
.post-content h2,
.post-content h3,
.post-content h4 {
  font-family: var(--font-headline);
}
.post blockquote,
.post-content blockquote {
  font-family: var(--font-body);
}
.post-content > p:first-of-type::first-letter {
  font-family: var(--font-headline);
}

/* ---- About / generic page ------------------------------------ */
.about-page { max-width: var(--measure); margin: 0 auto; }
.about-page h1 {
  font-family: var(--font-display);
  font-size: clamp(var(--fs-40), 5vw, var(--fs-60));
  margin-bottom: var(--s-8);
}
.about-content { font-size: var(--fs-18); line-height: var(--lh-loose); }
.about-content p { margin-bottom: var(--s-5); }

/* ---- Mobile --------------------------------------------------- */
@media (max-width: 720px) {
  :root { --gutter: 16px; }
  .site-header__inner {
    flex-direction: column;
    align-items: center;
    padding: var(--s-3) var(--gutter);
    gap: var(--s-3);
  }
  .site-header__top {
    width: 100%;
    justify-content: flex-end;
    order: 0;
  }
  .site-title { order: 1; }
  .site-title svg { height: 56px; }
  .site-nav { order: 2; }
  .home-grid {
    grid-template-columns: 1fr;
  }
  .site-nav {
    justify-self: start;
    gap: var(--s-5);
    overflow-x: auto;
  }
  .post-list li {
    grid-template-columns: 1fr;
    gap: var(--s-1);
  }

  .post-content > p:first-of-type::first-letter {
    font-size: 3.6em;
  }
}

/* ---- Print ---------------------------------------------------- */
@media print {
  .site-header, .site-footer, .theme-toggle { display: none; }
  body { background: white; color: black; }
  .post { max-width: none; }
}