/* === Fonts === */
@font-face{font-family:'Source Serif 4';font-style:normal;font-weight:200 900;font-display:swap;src:url(/static/fonts/source-serif-4-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Source Serif 4';font-style:normal;font-weight:200 900;font-display:swap;src:url(/static/fonts/source-serif-4-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Source Serif 4';font-style:italic;font-weight:200 900;font-display:swap;src:url(/static/fonts/source-serif-4-italic-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Source Serif 4';font-style:italic;font-weight:200 900;font-display:swap;src:url(/static/fonts/source-serif-4-italic-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Inter;font-style:normal;font-weight:100 900;font-display:swap;src:url(/static/fonts/inter-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Inter;font-style:normal;font-weight:100 900;font-display:swap;src:url(/static/fonts/inter-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* === Tokens === */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --sans: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --paper: #F7F3EA;
  --paper-deep: #EFE8D8;
  --ink: #1A1814;
  --ink-soft: #3A352E;
  --ink-mute: #7A7367;
  --rule: #D9D1BD;
  --accent: #8B2A1E;
  --accent-hover: #6E1E14;
  --highlight: #F2E6C8;
  --max-w: 720px;
  --max-w-wide: 960px;
}

/* === Base === */
html{font-size:16px;-webkit-text-size-adjust:100%}
body{
  font-family:var(--sans);
  color:var(--ink);
  background:var(--paper);
  line-height:1.6;
  font-feature-settings:"kern","liga","calt";
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
a{color:var(--accent);transition:color .15s}
a:hover{color:var(--accent-hover)}
::selection{background:var(--highlight);color:var(--ink)}

/* === Layout === */
.container{
  max-width:var(--max-w-wide);
  margin:0 auto;
  padding:0 1.5rem;
}

/* === Masthead === */
.site-header{padding:1.25rem 0 0}
.site-header .container{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
}
.site-logo{
  font-family:var(--serif);
  font-size:1.65rem;
  font-weight:700;
  color:var(--ink);
  text-decoration:none;
  letter-spacing:-0.025em;
}
.site-nav{display:flex;gap:1.5rem}
.site-nav a{
  color:var(--ink-mute);
  text-decoration:none;
  font-size:0.78rem;
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:0.1em;
  transition:color .15s;
}
.site-nav a:hover{color:var(--ink)}
.masthead-rule{
  margin:0.75rem auto 0;
  max-width:var(--max-w-wide);
  padding:0 1.5rem;
}
.masthead-rule::before,.masthead-rule::after{
  content:'';
  display:block;
  border-bottom:solid var(--ink);
}
.masthead-rule::before{border-bottom-width:2px}
.masthead-rule::after{border-bottom-width:1px;margin-top:3px}

/* === Homepage articles === */
.section-heading{
  font-family:var(--sans);
  font-size:0.75rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.14em;
  color:var(--ink-mute);
  padding-top:2.25rem;
  margin:0;
}
.articles{padding:1rem 0 1rem}

.article-card{
  padding:1.5rem 0;
  border-bottom:1px solid var(--rule);
}
.article-card:first-child{padding-top:0}
.article-card:last-child{border-bottom:none}

.article-card .category{
  font-size:0.7rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.14em;
  color:var(--ink-mute);
  font-variant-numeric:lining-nums;
}
.article-card h2{
  font-family:var(--serif);
  font-size:1.5rem;
  line-height:1.25;
  margin:0.35rem 0 0.4rem;
  font-weight:600;
  letter-spacing:-0.01em;
  text-wrap:balance;
}
.article-card h2 a{color:inherit;text-decoration:none}
.article-card h2 a:hover{color:var(--accent)}
.article-card .summary{
  font-family:var(--serif);
  font-style:italic;
  color:var(--ink-soft);
  font-size:1rem;
  line-height:1.55;
  margin-bottom:0.7rem;
}
.article-meta{
  font-size:0.78rem;
  color:var(--ink-mute);
  display:flex;
  align-items:center;
  gap:0.5rem;
}
.article-meta .author{font-weight:500;color:var(--ink-soft)}
.article-meta .reading-time{
  font-size:0.72rem;
  text-transform:uppercase;
  letter-spacing:0.08em;
}
.article-meta .dot-leader{
  flex:1;
  border-bottom:1px dotted var(--rule);
  min-width:2rem;
  margin-bottom:0.15em;
}
.byline-mini{display:inline-flex;align-items:center;gap:0.4rem}

/* Lead article — first card hero treatment */
.article-card.lead h2{
  font-size:2rem;
  line-height:1.18;
  margin:0.4rem 0 0.55rem;
}
.article-card.lead .summary{
  font-size:1.1rem;
  line-height:1.5;
}
.article-card.lead{
  padding-bottom:2rem;
  margin-bottom:0.25rem;
}

/* === Single article === */
.article-full{
  max-width:var(--max-w);
  margin:0 auto;
  padding:2.5rem 0 3rem;
}
.article-header{margin-bottom:2.25rem}
.article-header .category{
  font-size:0.7rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.14em;
  color:var(--ink-mute);
}
.article-header h1{
  font-family:var(--serif);
  font-size:2.6rem;
  line-height:1.12;
  margin:0.5rem 0 0.75rem;
  font-weight:700;
  letter-spacing:-0.015em;
  text-wrap:balance;
}
.article-header .summary{
  font-family:var(--serif);
  font-style:italic;
  font-size:1.2rem;
  color:var(--ink-soft);
  line-height:1.45;
  margin-bottom:1.25rem;
}

/* Byline block */
.byline{display:flex;align-items:center;gap:0.65rem}
.byline-text{display:flex;flex-direction:column;line-height:1.3}
.byline .author{font-weight:600;color:var(--ink);font-size:0.88rem}
.byline .author-role{font-size:0.72rem;color:var(--ink-mute);letter-spacing:0.02em}
.author-avatar{border-radius:50%;display:block;flex-shrink:0;object-fit:cover}
.byline .author-avatar,.author-bio .author-avatar{
  box-shadow:0 0 0 1px var(--rule),0 0 0 4px var(--paper-deep);
}
.article-meta-row{
  display:flex;
  align-items:center;
  gap:0.5rem;
  padding-top:1rem;
  margin-top:0.25rem;
  border-top:1px solid var(--rule);
}
.article-meta-row time{font-size:0.8rem;color:var(--ink-mute)}
.article-meta-row .dot-leader{
  flex:1;
  border-bottom:1px dotted var(--rule);
  min-width:1rem;
  margin-bottom:0.15em;
}
.article-meta-row .reading-time{
  font-size:0.72rem;
  text-transform:uppercase;
  letter-spacing:0.08em;
  color:var(--ink-mute);
}

/* === Article body === */
.article-body{
  font-family:var(--serif);
  font-size:1.125rem;
  line-height:1.72;
  color:var(--ink);
  font-feature-settings:"kern","liga","calt","onum";
}

/* Paragraph indentation (print convention) — skip first paragraph */
.article-body p{margin:0}
.article-body p+p{text-indent:1.4em}

/* Lede paragraph */
.article-body>p:first-of-type{
  font-size:1.2rem;
  line-height:1.65;
}

/* Drop cap */
.article-body>p:first-of-type::first-letter{
  font-family:var(--serif);
  font-size:3.8rem;
  line-height:0.85;
  float:left;
  padding:0.35rem 0.5rem 0 0;
  margin-left:-0.04em;
  color:var(--accent);
  font-weight:700;
  font-feature-settings:"lnum";
}

/* Subheadings */
.article-body h2{
  font-family:var(--serif);
  font-size:1.45rem;
  font-weight:600;
  margin:2.5rem 0 0.75rem;
  color:var(--ink);
  text-wrap:balance;
  padding-top:1.5rem;
  border-top:1px solid var(--rule);
}

/* Inline emphasis */
.article-body strong{color:var(--ink);font-weight:650}
.article-body em{font-style:italic}

/* Blockquotes (inline citations) */
.article-body blockquote{
  margin:1.5rem 0;
  padding:0.5rem 0 0.5rem 1.25rem;
  border-left:2px solid var(--accent);
  font-style:italic;
  color:var(--ink-soft);
}

/* Pull quote (set-piece display) */
.article-body .pullquote{
  border-left:none;
  padding:1.5rem 0;
  margin:2rem 0;
  border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
  font-family:var(--serif);
  font-style:italic;
  font-size:1.35rem;
  line-height:1.4;
  color:var(--ink);
  text-indent:0;
  text-align:center;
}

/* End mark */
.article-body::after{
  content:'\25A0';
  display:block;
  text-align:center;
  color:var(--accent);
  font-size:0.65rem;
  margin-top:2rem;
  letter-spacing:0;
}

/* Lists inside article body */
.article-body ul,.article-body ol{
  margin:1rem 0 1.5rem 1.4em;
  line-height:1.7;
}
.article-body li{margin-bottom:0.3rem}
.article-body li+li{text-indent:0}
.article-body p+ul,.article-body p+ol{text-indent:0}

/* === Tags === */
.article-tags{
  margin-top:2.25rem;
  padding-top:1.25rem;
  border-top:1px solid var(--rule);
  display:flex;
  flex-wrap:wrap;
  gap:0.5rem;
  font-size:0.72rem;
  text-transform:uppercase;
  letter-spacing:0.1em;
}
.tag{
  padding:0.3rem 0.8rem;
  background:var(--paper-deep);
  border:1px solid var(--rule);
  border-radius:2px;
  color:var(--ink-mute);
}

/* === Author bio === */
.author-bio{
  display:flex;gap:1rem;align-items:flex-start;
  margin-top:2.25rem;padding:1.5rem;
  background:var(--paper-deep);
  border:1px solid var(--rule);
}
.author-bio-name{font-weight:600;margin:0;font-size:0.95rem}
.author-bio-role{font-size:0.8rem;color:var(--ink-mute);margin:0.1rem 0 0.4rem}
.author-bio-text{font-family:var(--serif);font-size:0.92rem;color:var(--ink-soft);line-height:1.6;margin:0}

/* === Static pages === */
.static-page{
  max-width:var(--max-w);
  margin:0 auto;
  padding:2.5rem 0 3rem;
}
.static-page h1{
  font-family:var(--serif);
  font-size:2rem;
  font-weight:700;
  margin-bottom:1.5rem;
  letter-spacing:-0.01em;
}
.static-page h2{
  font-size:0.85rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.1em;
  margin:2.25rem 0 0.6rem;
  color:var(--ink-soft);
}
.static-page p{
  font-family:var(--serif);
  margin-bottom:1rem;
  line-height:1.7;
  font-size:1.05rem;
}
.static-page em{color:var(--ink-mute)}
.static-page a{color:var(--accent)}

/* === Footer === */
.site-footer{
  border-top:1px solid var(--rule);
  padding:1.75rem 0;
  margin-top:3rem;
}
.footer-dingbat{
  text-align:center;
  color:var(--accent);
  font-size:1rem;
  margin-bottom:-0.5rem;
  position:relative;
  top:-2.1rem;
}
.site-footer .container{
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:0.75rem;
  color:var(--ink-mute);
  letter-spacing:0.02em;
}
.footer-nav{display:flex;gap:1.25rem}
.footer-nav a{
  color:var(--ink-mute);
  text-decoration:none;
  text-transform:uppercase;
  letter-spacing:0.1em;
  font-size:0.72rem;
  font-weight:500;
}
.footer-nav a:hover{color:var(--ink)}

/* === Responsive: Mobile === */
@media(max-width:640px){
  .site-header .container{flex-direction:column;align-items:center;gap:0.4rem}
  .site-nav{gap:0.75rem}
  .site-nav a{font-size:0.72rem}
  .article-card.lead h2{font-size:1.65rem}
  .article-header h1{font-size:1.9rem;line-height:1.18}
  .article-body{font-size:1.05rem;line-height:1.65}
  .article-body>p:first-of-type{font-size:1.1rem}
  .article-body>p:first-of-type::first-letter{font-size:3rem;padding:0.3rem 0.45rem 0 0}
  .article-body h2{font-size:1.3rem;margin:2rem 0 0.6rem;padding-top:1.25rem}
  .site-footer .container{flex-direction:column;gap:0.6rem;text-align:center}
  .author-bio{flex-direction:column;align-items:center;text-align:center;padding:1.25rem}
  .article-meta-row{flex-wrap:wrap}
}

/* === Responsive: Wide desktop === */
@media(min-width:1024px){
  .article-body{font-size:1.18rem;line-height:1.75}
  .article-body>p:first-of-type{font-size:1.25rem}
  .article-header h1{font-size:2.8rem}
  .article-card.lead h2{font-size:2.2rem}
  .container{padding:0 2rem}
  .masthead-rule{padding:0 2rem}
}