/* ----------------------
    Design tokens
---------------------- */
:root{
  /* bordeaux & beige palette */
  --bordeaux-900:#4f0e22;
  --bordeaux-800:#66132b;
  --bordeaux-700:#7a1634;
  --bordeaux-600:#8d1a3d;
  --beige-50:#f7f2ea;
  --beige-100:#f3ede4;
  --ink:#1d1a1a;
  --ink-soft:#4c4444;
  --line:#e8dfd4;
  --accent:#b88f5a; /* subtle brass for details */

  --radius: 20px;
  --radius-sm: 12px;
  --shadow-soft: 0 10px 30px rgba(30,7,16,.08);

  /* Type scale */
  --step--1: clamp(.9rem, .85rem + .2vw, 1rem);
  --step-0: clamp(1rem, .9rem + .5vw, 1.125rem);
  --step-1: clamp(1.25rem, 1.1rem + .9vw, 1.5rem);
  --step-2: clamp(1.7rem, 1.4rem + 1.6vw, 2.2rem);
  --step-3: clamp(2.2rem, 1.8rem + 2.4vw, 3rem);
  --step-4: clamp(3rem, 2.2rem + 4vw, 4rem);
  --letter: .02em;
  --container: min(92vw, 72ch);
}

/* ----------------------
    Reset / base
---------------------- */
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  color: var(--ink);
  background: linear-gradient(180deg, var(--beige-50), var(--beige-100));
  line-height: 1.6;
  letter-spacing: var(--letter);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
.container{max-width: var(--container); margin-inline:auto; padding-inline: 1rem}

/* ----------------------
    Top bar / nav
---------------------- */
.topbar{ position:sticky; top:0; z-index: 50; backdrop-filter: saturate(120%) blur(6px); background: color-mix(in oklab, var(--beige-50) 80%, white 20%); border-bottom:1px solid var(--line)}
.nav{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding: .8rem 0}
.brand{display:flex; align-items:center; gap:.8rem}
.brand img{ width:42px; height:42px; object-fit:contain; filter: drop-shadow(0 2px 6px rgba(0,0,0,.05));}
.brand .wordmark{ font-family: "Iowan Old Style", "Charter", "Spectral", Georgia, serif; font-weight:600; font-size: 1.05rem; letter-spacing:.04em }

.menu{ list-style:none; display:flex; gap:1.2rem; margin:0; padding:0; flex-wrap: wrap }
.menu a{ position:relative; padding:.35rem .1rem; font-weight:590; font-size:.95rem }
.menu a::after{ content:""; position:absolute; left:0; right:0; bottom:.15rem; height:2px; transform:scaleX(0); transform-origin:left; background: linear-gradient(90deg, var(--bordeaux-700), var(--accent)); transition:.25s ease}
.menu a:hover::after{ transform:scaleX(1) }

/* ----------------------
    Hero
---------------------- */
.hero{ background: radial-gradient(1200px 600px at 10% -10%, rgba(122,22,52,.08), transparent 50%), linear-gradient(180deg, white 0%, var(--beige-100) 100%); border-bottom:1px solid var(--line) }
.hero-inner{ padding: clamp(3rem, 6vw, 6rem) 0; display:grid; gap:2rem; justify-items:center; text-align:center }
.crest{ width:min(180px, 40vw)}
.kicker{ text-transform: uppercase; letter-spacing:.18em; font-size: .82rem; color: var(--bordeaux-700) }
h1.site-title{ margin: -2.5rem 0 0; font-family: "Iowan Old Style", "Charter", "Spectral", Georgia, serif; font-weight: 600; font-size: var(--step-0); color: var(--bordeaux-900); line-height:1.15 }
.sub{ max-width: 56ch; color: var(--bordeaux-600); font-size: var(--step-1) }
.tagline{ margin-top:.3rem; font-weight:600; color: var(--bordeaux-700) }

/* Highlight card */
.card{ margin-top:1.4rem; background: #fff; border:1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-soft); padding: clamp(1rem, 2.2vw, 1.6rem) }
.card p{ margin: 0 }

/* ----------------------
    Main content
---------------------- */
main{ padding: clamp(2rem, 5vw, 4rem) 0 ; flex: 1;}
.prose{ max-width: var(--container); margin-inline:auto; padding-inline:1rem }
.section-title{ font-family: "Iowan Old Style", "Charter", "Spectral", Georgia, serif; font-weight:700; font-size: var(--step-2); color: var(--bordeaux-900); margin: 0 0 1rem }
.lead{ font-size: var(--step-0); color: var(--ink-soft) }

.prose p{ font-size: var(--step-0); margin: 1.1rem 0 }
.prose p:first-child{ margin-top:.2rem }

blockquote{ margin: 2rem 0; padding: 1rem 1.25rem; background: linear-gradient(180deg, #fff, #fffaf5); border-left: 4px solid var(--bordeaux-700); border-radius: 0 var(--radius) var(--radius) 0; color: var(--ink) }

/* ----------------------
    Footer
---------------------- */
footer{ border-top:1px solid var(--line); background: #fff; }
.foot-inner{ padding: 2rem 0; display:grid; place-items:center; color: var(--ink-soft); font-size: var(--step--1) }


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

/* ======================
   Blog index (blog.html)
====================== */

/* Center the page title and give it the same container rhythm as the site */
body > h1 {
  text-align: center;
  max-width: var(--container);
  margin: 2rem auto 1.5rem;
  padding-inline: 1rem;
  font-family: "Iowan Old Style", "Charter", "Spectral", Georgia, serif;
  font-weight: 700;
  font-size: var(--step-2);
  color: var(--bordeaux-900);
  line-height: 1.15;
}

.post {
  max-width: var(--container);
  margin: 0 auto 2rem;
  padding: 0 1rem 1.25rem;
  border-bottom: 1px solid var(--line);
}

.post h2 {
  margin: 0 0 .35rem;
  font-family: "Iowan Old Style", "Charter", "Spectral", Georgia, serif;
  font-weight: 700;
  font-size: var(--step-1);
  color: var(--bordeaux-900);
  line-height: 1.2;
}

.post a {
  text-decoration: none;
  font-weight: 700;
  color: var(--bordeaux-700);         
}

.post a:hover {
  color: var(--bordeaux-800);
  text-decoration: underline;
}

.post p {
  margin: .35rem 0 0;
  font-size: var(--step-0);
  color: var(--ink-soft);
}

body > p:last-of-type {
  max-width: var(--container);
  margin: 2rem auto;
  padding-inline: 1rem;
  font-size: var(--step-0);
}

body > p:last-of-type a {
  color: var(--bordeaux-700);
  font-weight: 600;
}

h1.site-title{
  margin: .4rem 0 0;
  font-family: "Iowan Old Style", "Charter", "Spectral", Georgia, serif;
  font-weight: 700;
  font-size: var(--step-3);   
  color: var(--bordeaux-900);
  line-height: 1.15;
}

.sub{
  max-width: 56ch;
  color: var(--ink-soft);
  font-size: var(--step-0);  
}


/* Hero area for the blog index */
.blog-hero {
  padding: clamp(2rem, 5vw, 4rem) 0 1rem;
  text-align: center;
}

.page-title {
  margin: 0 0 .3rem;
  font-family: "Iowan Old Style", "Charter", "Spectral", Georgia, serif;
  font-weight: 800;
  font-size: var(--step-3);
  color: var(--bordeaux-900);
  letter-spacing: .01em;
  line-height: 1.1;
}

.page-lead {
  margin: 0 auto;
  max-width: 60ch;
  color: var(--ink-soft);
  font-size: var(--step-0);
}

.post-grid {
  display: grid;
  gap: clamp(1rem, 2.5vw, 1.5rem);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr));
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
}

.post-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  overflow: clip;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  will-change: transform;
}

.post-link {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: .75rem;
  padding: clamp(1rem, 2.2vw, 1.25rem) clamp(1rem, 2.2vw, 1.25rem);
}

.post-content { display: grid; gap: .35rem }

.post-title {
  margin: 0;
  font-family: "Iowan Old Style", "Charter", "Spectral", Georgia, serif;
  font-weight: 700;
  font-size: var(--step-1);
  line-height: 1.2;
  color: var(--bordeaux-900);
}

.post-excerpt {
  margin: 0;
  color: var(--ink-soft);
  font-size: var(--step-0);
}

.post-meta {
  margin-top: .15rem;
  font-size: var(--step--1);
  color: color-mix(in oklab, var(--ink-soft) 70%, black 30%);
}

.post-arrow {
  align-self: center;
  font-size: 1.4rem;
  line-height: 1;
  translate: 0 1px;
  opacity: .75;
  transition: transform .18s ease, opacity .18s ease;
}

.post-card:hover,
.post-card:has(.post-link:focus-visible) {
  transform: translateY(-2px);
  box-shadow: 0 14px 40px rgba(30,7,16,.12);
  border-color: color-mix(in oklab, var(--line) 60%, var(--bordeaux-700) 40%);
}

.post-card:hover .post-arrow,
.post-link:focus-visible + .post-arrow {
  transform: translateX(2px);
  opacity: 1;
}

.post-link {
  color: inherit;
  text-decoration: none;
}

.post-link:focus-visible {
  outline: 3px solid color-mix(in oklab, var(--bordeaux-700) 60%, white 40%);
  outline-offset: 3px;
  border-radius: calc(var(--radius) - 2px);
}

.backline {
  max-width: var(--container);
  margin: 2rem auto;
  padding-inline: 1rem;
  font-size: var(--step-0);
}

.backline a { color: var(--bordeaux-700); font-weight: 600 }
.backline a:hover { text-decoration: underline }

@media (prefers-color-scheme: dark) {
  .post-card { background: color-mix(in oklab, #000 6%, #fff); border-color: color-mix(in oklab, var(--line) 60%, #000 40%) }
  .page-lead, .post-excerpt, .post-meta { color: color-mix(in oklab, var(--beige-100) 70%, #000 30%) }
}


.post {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  padding: clamp(1rem, 2.2vw, 1.25rem);
  max-width: var(--container);
  margin: 0 auto 1.25rem;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.post:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 40px rgba(30,7,16,.12);
  border-color: color-mix(in oklab, var(--line) 60%, var(--bordeaux-700) 40%);
}

.post h2 { margin: 0 0 .35rem; font-family: "Iowan Old Style", "Charter", "Spectral", Georgia, serif; font-weight: 700; font-size: var(--step-1); color: var(--bordeaux-900) }
.post p { margin: .35rem 0 0; color: var(--ink-soft); font-size: var(--step-0) }
.post a { color: var(--bordeaux-700); font-weight: 700; text-decoration: none }
.post a:hover { text-decoration: underline }


.prose .hl {
  background: linear-gradient(120deg,
    color-mix(in oklab, var(--bordeaux-700) 18%, transparent) 0%,
    transparent 100%);
  padding: 0 .25em;
  border-radius: 4px;
}

.prose .page-break {
  border: 0;
  height: 1px;
  margin: 2rem 0;
  background: linear-gradient(90deg, transparent, var(--bordeaux-700), transparent);
  opacity: .35;
}

.prose .callout {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin: 2rem 0;
  padding: 1rem;
  border: 1px solid var(--line);
  border-left: 4px solid var(--bordeaux-700);
  border-radius: var(--radius-sm);
  background: linear-gradient(180deg, #fff, #fffaf5);
  box-shadow: var(--shadow-soft);
}

.prose .tech-icon {
  display: inline-grid;
  place-items: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  font-weight: 700;
  background: var(--bordeaux-700);
  color: #fff;
}

.prose .footnotes {
  margin-top: 2.5rem;
  padding: 1.25rem 1rem;
  background: color-mix(in oklab, #fff 85%, var(--beige-100) 15%);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-soft);
}

.prose .footnotes h2 {
  margin: 0 0 .75rem;
  font-family: "Iowan Old Style","Charter","Spectral",Georgia,serif;
  font-size: var(--step-1);
  color: var(--bordeaux-900);
}

.prose .footnotes ol {
  margin: 0;
  padding-left: 1.25rem;
}

.prose .footnotes li {
  margin-bottom: .6rem;
  padding-left: .5rem;
  border-left: 3px solid color-mix(in oklab, var(--bordeaux-700) 35%, var(--line));
}

.prose .footnotes a {
  color: var(--bordeaux-700);
  word-break: break-all;
}

.prose .footnotes a:hover { text-decoration: underline; }

.prose sup a {
  text-decoration: none;
  font-weight: 700;
  color: var(--bordeaux-700);
}
.prose sup a:hover { text-decoration: underline; }