/*
Theme Name: Digital Sports Daily
Theme URI: https://digitalsportsdaily.com
Author: Travis
Author URI: https://digitalsportsdaily.com
Description: A world-class editorial WordPress theme for long-form sports journalism.
Version: 1.2.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: digital-sports-daily
Tags: blog, news, magazine, one-column, two-columns, right-sidebar, left-sidebar, custom-background, custom-header, custom-menu, featured-images, threaded-comments, translation-ready
*/

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;0,800;0,900;1,400;1,600;1,700&family=Source+Serif+4:ital,opsz,wght@0,8..60,300;0,8..60,400;0,8..60,500;0,8..60,600;1,8..60,300;1,8..60,400;1,8..60,500&family=Inter:wght@400;500;600;700&display=swap');

/* ================================================================
   TOKENS
   ================================================================ */
:root {
  --ink:        #0f0f0f;
  --ink-2:      #2a2a2a;
  --ink-3:      #5a5a5a;
  --ink-4:      #909090;
  --paper:      #faf9f7;
  --paper-2:    #f3f0eb;
  --paper-3:    #e8e4de;
  --rule:       #d6d1ca;
  --rule-2:     #ebe7e1;
  --accent:     #c0392b;
  --accent-dk:  #9b2d22;
  --accent-bg:  #fdf2f1;
  --link:       #1b3d6e;
  --link-dk:    #0f2540;
  --white:      #ffffff;

  --serif:  'Playfair Display', Georgia, 'Times New Roman', serif;
  --body:   'Source Serif 4', Georgia, 'Times New Roman', serif;
  --sans:   'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  --t-xs:   0.72rem;
  --t-sm:   0.85rem;
  --t-base: 1rem;
  --t-md:   1.125rem;
  --t-lg:   1.3rem;
  --t-xl:   1.5rem;
  --t-2xl:  1.75rem;
  --t-3xl:  2.1rem;
  --t-4xl:  2.5rem;
  --t-5xl:  3.25rem;

  --s1: .25rem;  --s2: .5rem;  --s3: .75rem; --s4: 1rem;
  --s5: 1.25rem; --s6: 1.5rem; --s8: 2rem;   --s10: 2.5rem;
  --s12: 3rem;   --s16: 4rem;  --s20: 5rem;  --s24: 6rem;

  --content: 700px;
  --wide:    1100px;
  --max:     1320px;
  --sidebar: 285px;
  --gutter:  clamp(1.25rem, 4vw, 2.5rem);

  --lh-tight:   1.12;
  --lh-snug:    1.28;
  --lh-relaxed: 1.72;
  --lh-loose:   1.9;

  --ls-tight:  -0.025em;
  --ls-snug:   -0.012em;
  --ls-wide:    0.05em;
  --ls-wider:   0.09em;
  --ls-widest:  0.16em;

  --ease: cubic-bezier(.4,0,.2,1);
  --fast: 140ms;
  --mid:  260ms;
  --slow: 420ms;

  --z-sticky:  100;
  --z-drop:    200;
  --z-top:     400;
}

/* ================================================================
   RESET
   ================================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--body);
  font-size: var(--t-base);
  line-height: var(--lh-relaxed);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1, "liga" 1, "onum" 1;
}
img, video { max-width: 100%; height: auto; display: block; }
a          { color: inherit; text-decoration: none; }
ul, ol     { list-style: none; }
button     { cursor: pointer; border: none; background: none; font: inherit; }
input, textarea, select { font: inherit; }
::selection { background: rgba(192,57,43,.14); }

/* ================================================================
   ACCESSIBILITY
   ================================================================ */
.screen-reader-text {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.screen-reader-text:focus {
  position: fixed; top: var(--s4); left: var(--s4);
  width: auto; height: auto; clip: auto;
  padding: var(--s3) var(--s6);
  background: var(--ink); color: var(--white);
  font-family: var(--sans); font-size: var(--t-sm); font-weight: 600;
  z-index: var(--z-top);
}
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ================================================================
   LAYOUT
   ================================================================ */
.container {
  width: 100%; max-width: var(--max);
  margin-inline: auto; padding-inline: var(--gutter);
}
.site-layout { display: grid; grid-template-columns: 1fr; gap: 3rem; align-items: start; }
.site-layout--right-sidebar { grid-template-columns: 1fr var(--sidebar); }
.site-layout--left-sidebar  { grid-template-columns: var(--sidebar) 1fr; }
@media (max-width: 1060px) {
  .site-layout--right-sidebar,
  .site-layout--left-sidebar { grid-template-columns: 1fr; }
}

/* ================================================================
   MASTHEAD
   ================================================================ */
.site-masthead {
  background: var(--paper);
  border-bottom: 3px solid var(--ink);
}

/* Topbar */
.masthead__topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding-block: var(--s2);
  border-bottom: 1px solid var(--rule);
  font-family: var(--sans); font-size: .68rem; font-weight: 500;
  letter-spacing: var(--ls-widest); text-transform: uppercase; color: var(--ink-4);
}
.masthead__topbar-date { display: flex; align-items: center; gap: var(--s3); }
.masthead__topbar-links { display: flex; gap: var(--s5); }
.masthead__topbar-links a { color: var(--ink-4); transition: color var(--fast) var(--ease); }
.masthead__topbar-links a:hover { color: var(--accent); }

/* Nameplate — FIXED: clean hairlines above & below the block, nothing through the text */
.masthead__nameplate {
  text-align: center;
  padding-top: var(--s8);
  padding-bottom: var(--s6);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  margin-top: var(--s4);
}

.site-title {
  font-family: var(--serif);
  font-size: clamp(2.6rem, 7.5vw, 5.75rem);
  font-weight: 900;
  letter-spacing: -.035em;
  line-height: 1;
  color: var(--ink);
  display: block;
}
.site-title a { color: inherit; transition: opacity var(--fast) var(--ease); }
.site-title a:hover { opacity: .72; }

.site-tagline {
  display: block; margin-top: var(--s3);
  font-family: var(--sans); font-size: .65rem; font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase; color: var(--ink-4);
}

/* Primary nav */
.masthead__nav-wrap { border-top: 1px solid var(--rule); }
.primary-nav { display: flex; align-items: center; justify-content: center; list-style: none; }
.primary-nav > li { position: relative; }
.primary-nav > li > a {
  display: block; padding: var(--s3) var(--s5);
  font-family: var(--sans); font-size: .7rem; font-weight: 700;
  letter-spacing: var(--ls-widest); text-transform: uppercase;
  color: var(--ink-2); white-space: nowrap;
  transition: color var(--fast) var(--ease);
  position: relative;
}
.primary-nav > li > a::after {
  content: ''; position: absolute;
  bottom: 0; left: var(--s5); right: var(--s5);
  height: 2px; background: var(--accent);
  transform: scaleX(0); transform-origin: center;
  transition: transform var(--mid) var(--ease);
}
.primary-nav > li > a:hover { color: var(--accent); }
.primary-nav > li > a:hover::after { transform: scaleX(1); }
.primary-nav > li.current-menu-item > a,
.primary-nav > li.current-menu-ancestor > a { color: var(--accent); }
.primary-nav > li.current-menu-item > a::after,
.primary-nav > li.current-menu-ancestor > a::after { transform: scaleX(1); }

/* Dropdowns */
.primary-nav .sub-menu {
  position: absolute; top: 100%; left: 0; min-width: 200px;
  background: var(--white);
  border: 1px solid var(--rule); border-top: 2px solid var(--accent);
  box-shadow: 0 8px 32px rgba(0,0,0,.12);
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity var(--mid) var(--ease), visibility var(--mid) var(--ease), transform var(--mid) var(--ease);
  z-index: var(--z-drop); list-style: none;
}
.primary-nav > li:hover > .sub-menu,
.primary-nav > li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.primary-nav .sub-menu a {
  display: block; padding: var(--s3) var(--s5);
  font-family: var(--sans); font-size: var(--t-sm); color: var(--ink-2);
  border-bottom: 1px solid var(--rule-2);
  transition: background var(--fast), color var(--fast);
}
.primary-nav .sub-menu li:last-child a { border-bottom: none; }
.primary-nav .sub-menu a:hover { background: var(--accent-bg); color: var(--accent); }

/* Mobile */
.nav-toggle {
  display: none; align-items: center; gap: var(--s2);
  padding: var(--s2) var(--s3);
  font-family: var(--sans); font-size: var(--t-sm); font-weight: 600; color: var(--ink);
}
@media (max-width: 768px) {
  .nav-toggle { display: flex; }
  .primary-nav { display: none; flex-direction: column; align-items: flex-start; border-top: 1px solid var(--rule); padding-block: var(--s3); }
  .primary-nav.is-open { display: flex; }
  .primary-nav > li { width: 100%; }
  .primary-nav > li > a { padding: var(--s3) var(--gutter); }
  .primary-nav > li > a::after { display: none; }
  .primary-nav .sub-menu { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: none; border-left: 3px solid var(--accent); margin-left: var(--gutter); display: none; }
  .primary-nav > li.is-open .sub-menu { display: block; }
  .masthead__nameplate { border-top: none; }
}

/* ================================================================
   STICKY NAV
   ================================================================ */
.sticky-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-sticky);
  background: var(--white); border-bottom: 2px solid var(--ink);
  display: flex; align-items: center; justify-content: space-between;
  padding-inline: var(--gutter); padding-block: var(--s3);
  transform: translateY(-110%);
  transition: transform var(--slow) var(--ease);
  box-shadow: 0 2px 20px rgba(0,0,0,.1);
}
.sticky-nav.is-visible { transform: translateY(0); }
.sticky-nav__logo { font-family: var(--serif); font-size: var(--t-2xl); font-weight: 800; letter-spacing: -.025em; color: var(--ink); }
.sticky-nav__menu { display: flex; gap: var(--s5); list-style: none; }
.sticky-nav__menu a { font-family: var(--sans); font-size: .7rem; font-weight: 700; letter-spacing: var(--ls-widest); text-transform: uppercase; color: var(--ink-3); transition: color var(--fast); }
.sticky-nav__menu a:hover { color: var(--accent); }
@media (max-width: 768px) { .sticky-nav__menu { display: none; } }

/* ================================================================
   READING PROGRESS
   ================================================================ */
.reading-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0%;
  background: var(--accent); z-index: var(--z-top); transition: width 80ms linear;
}

/* ================================================================
   BREAKING BAR
   ================================================================ */
.breaking-bar { background: var(--accent); color: var(--white); display: flex; align-items: center; height: 36px; overflow: hidden; }
.breaking-bar__label { flex-shrink: 0; background: var(--ink); height: 100%; display: flex; align-items: center; padding-inline: var(--s5); font-family: var(--sans); font-size: .62rem; font-weight: 800; letter-spacing: var(--ls-widest); text-transform: uppercase; }
.breaking-bar__ticker { flex: 1; overflow: hidden; }
.breaking-bar__track { display: flex; gap: var(--s12); white-space: nowrap; animation: ticker 35s linear infinite; }
.breaking-bar__track:hover { animation-play-state: paused; }
.breaking-bar__item { font-family: var(--sans); font-size: var(--t-sm); font-weight: 500; }
.breaking-bar__item a { color: inherit; border-bottom: 1px solid rgba(255,255,255,.35); transition: border-color var(--fast); }
.breaking-bar__item a:hover { border-color: var(--white); }
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ================================================================
   SECTION HEADERS
   ================================================================ */
.section-rule { display: flex; align-items: center; gap: var(--s4); margin-block: var(--s10); }
.section-rule__label { font-family: var(--sans); font-size: .66rem; font-weight: 800; letter-spacing: var(--ls-widest); text-transform: uppercase; background: var(--ink); color: var(--white); padding: var(--s1) var(--s3); white-space: nowrap; }
.section-rule__line { flex: 1; height: 1px; background: var(--rule); }
.section-header { border-top: 3px solid var(--ink); padding-top: var(--s4); margin-bottom: var(--s8); }
.section-header__title { font-family: var(--sans); font-size: .66rem; font-weight: 800; letter-spacing: var(--ls-widest); text-transform: uppercase; color: var(--ink); }

/* ================================================================
   HERO
   ================================================================ */
.hero { margin-block: var(--s10) var(--s8); }
.hero--bleed { position: relative; min-height: 68vh; display: flex; align-items: flex-end; overflow: hidden; margin-block: 0; }
.hero--bleed .hero__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(.48) saturate(.85); }
.hero--bleed .hero__content { position: relative; z-index: 2; padding: var(--s16) var(--gutter) var(--s12); max-width: 800px; }
.hero--bleed .hero__category { color: var(--accent); }
.hero--bleed .hero__title    { color: var(--white); }
.hero--bleed .hero__excerpt  { color: rgba(255,255,255,.8); }
.hero--bleed .hero__meta     { color: rgba(255,255,255,.58); }
.hero__inner { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s10); align-items: center; }
@media (max-width: 768px) { .hero__inner { grid-template-columns: 1fr; } }
.hero__category { font-family: var(--sans); font-size: .68rem; font-weight: 800; letter-spacing: var(--ls-widest); text-transform: uppercase; color: var(--accent); display: block; margin-bottom: var(--s4); }
.hero__title { font-family: var(--serif); font-size: clamp(2rem,5vw,3.8rem); font-weight: 800; line-height: var(--lh-tight); letter-spacing: var(--ls-tight); color: var(--ink); margin-bottom: var(--s5); }
.hero__excerpt { font-family: var(--body); font-size: var(--t-lg); line-height: var(--lh-relaxed); color: var(--ink-3); margin-bottom: var(--s6); }
.hero__meta { display: flex; align-items: center; gap: var(--s3); font-family: var(--sans); font-size: var(--t-sm); color: var(--ink-4); }
.hero__meta-divider { width: 3px; height: 3px; border-radius: 50%; background: var(--rule); }
.hero__image-wrap { overflow: hidden; aspect-ratio: 4/3; }
.hero__image-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--slow) var(--ease); }
.hero__image-wrap:hover img { transform: scale(1.03); }

/* ================================================================
   CARDS
   ================================================================ */
.card { position: relative; }
.card__image-wrap { overflow: hidden; margin-bottom: var(--s4); }
.card__image-wrap img { width: 100%; aspect-ratio: 16/9; object-fit: cover; transition: transform var(--slow) var(--ease); }
.card:hover .card__image-wrap img { transform: scale(1.04); }
.card__category { font-family: var(--sans); font-size: .68rem; font-weight: 700; letter-spacing: var(--ls-widest); text-transform: uppercase; color: var(--accent); display: block; margin-bottom: var(--s2); }
.card__title { font-family: var(--serif); font-weight: 700; line-height: var(--lh-snug); letter-spacing: var(--ls-snug); color: var(--ink); margin-bottom: var(--s3); transition: color var(--fast); }
.card:hover .card__title { color: var(--accent); }
.card__excerpt { font-family: var(--body); font-size: var(--t-sm); line-height: var(--lh-relaxed); color: var(--ink-3); margin-bottom: var(--s3); }
.card__meta { display: flex; align-items: center; gap: var(--s3); font-family: var(--sans); font-size: var(--t-xs); color: var(--ink-4); }
.card__meta-dot { width: 2px; height: 2px; border-radius: 50%; background: var(--rule); }
.card--large  .card__title { font-size: var(--t-4xl); }
.card--medium .card__title { font-size: var(--t-3xl); }
.card--small  .card__title { font-size: var(--t-xl); }
.card--tiny   .card__title { font-size: var(--t-md); font-weight: 600; }
.card--horizontal { display: grid; grid-template-columns: 150px 1fr; gap: var(--s5); align-items: start; }
.card--horizontal .card__image-wrap { margin-bottom: 0; aspect-ratio: 3/2; }
.card--horizontal .card__image-wrap img { aspect-ratio: 3/2; }
.card--text-only { padding-bottom: var(--s5); border-bottom: 1px solid var(--rule); }
.card--text-only:last-child { border-bottom: none; }
.card--featured { border-left: 3px solid var(--accent); padding-left: var(--s5); }
.posts-list { display: flex; flex-direction: column; }
.posts-list .card--horizontal { padding-block: 1.75rem; border-bottom: 1px solid var(--rule); }
.posts-list .card--horizontal:first-child { border-top: 1px solid var(--rule); }
.grid-3col { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--s8); }
.grid-4col { display: grid; grid-template-columns: repeat(4,1fr); gap: var(--s6); }
@media (max-width: 1060px) { .grid-3col { grid-template-columns: repeat(2,1fr); } .grid-4col { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 640px)  { .grid-3col, .grid-4col { grid-template-columns: 1fr; } }

/* ================================================================
   SINGLE ARTICLE
   ================================================================ */

/* Header */
.article-header {
  max-width: var(--content);
  margin-inline: auto;
  margin-bottom: var(--s10);
}

.article__kicker {
  display: block;
  font-family: var(--sans);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--s4);
}

.article__title {
  font-family: var(--serif);
  font-size: clamp(2rem, 4.5vw, 3.4rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.028em;
  color: var(--ink);
  margin-bottom: var(--s6);
}

/* Deck — only renders when a manual excerpt exists.
   No borders bleed through when empty. */
.article__deck {
  font-family: var(--body);
  font-size: var(--t-lg);
  font-weight: 300;
  font-style: italic;
  line-height: var(--lh-relaxed);
  color: var(--ink-2);
  padding-block: var(--s5);
  margin-bottom: var(--s6);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

/* Byline */
.article__byline {
  display: flex;
  align-items: center;
  gap: var(--s4);
  padding-bottom: var(--s6);
  border-bottom: 2px solid var(--ink);
}

/* Avatar — only shown when we have a verified real photo */
.byline__avatar {
  width: 42px; height: 42px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}
.byline__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

.byline__info { flex: 1; min-width: 0; }

.byline__name {
  display: block;
  font-family: var(--sans);
  font-size: var(--t-sm);
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 2px;
}
.byline__name a { border-bottom: 1px solid transparent; transition: color var(--fast), border-color var(--fast); }
.byline__name a:hover { color: var(--accent); border-color: var(--accent); }

.byline__meta {
  font-family: var(--sans);
  font-size: var(--t-xs);
  color: var(--ink-4);
  display: flex;
  align-items: center;
  gap: var(--s2);
  flex-wrap: wrap;
}
.byline__meta .sep { color: var(--rule); }

/* Share buttons */
.byline__share { display: flex; gap: var(--s2); flex-shrink: 0; margin-left: auto; }

.share-btn {
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px;
  border: 1px solid var(--rule);
  border-radius: 50%;
  color: var(--ink-3);
  transition: background var(--fast), border-color var(--fast), color var(--fast);
}
.share-btn:hover { background: var(--ink); border-color: var(--ink); color: var(--white); }

/* Hero image */
.article__hero-image { max-width: var(--wide); margin-inline: auto; margin-bottom: var(--s4); }
.article__hero-image img { width: 100%; max-height: 580px; object-fit: cover; }
.article__hero-caption { font-family: var(--sans); font-size: var(--t-xs); color: var(--ink-4); font-style: italic; text-align: right; margin-top: var(--s2); max-width: var(--wide); margin-inline: auto; padding-inline: var(--gutter); }

/* Article body — the reading experience */
.article__body {
  max-width: var(--content);
  margin-inline: auto;
  font-family: var(--body);
  font-size: 1.14rem;
  line-height: 1.88;
  color: var(--ink-2);
}
.article__body p { margin-bottom: var(--s6); }

/* Drop cap */
.article__body > p:first-of-type::first-letter {
  font-family: var(--serif);
  font-size: 5.2em;
  font-weight: 900;
  float: left;
  line-height: .78;
  padding-right: .06em;
  padding-top: .06em;
  color: var(--ink);
}

/* Headings in body */
.article__body h2 {
  font-family: var(--serif); font-size: var(--t-4xl);
  font-weight: 700; line-height: var(--lh-snug); letter-spacing: var(--ls-snug);
  color: var(--ink); margin-top: var(--s16); margin-bottom: var(--s5);
  padding-top: var(--s8); border-top: 1px solid var(--rule);
}
.article__body h3 {
  font-family: var(--serif); font-size: var(--t-3xl);
  font-weight: 700; line-height: var(--lh-snug);
  color: var(--ink); margin-top: var(--s12); margin-bottom: var(--s4);
}
.article__body h4 {
  font-family: var(--sans); font-size: var(--t-sm);
  font-weight: 700; letter-spacing: var(--ls-wider); text-transform: uppercase;
  color: var(--ink); margin-top: var(--s10); margin-bottom: var(--s3);
}

/* Links */
.article__body a { color: var(--link); border-bottom: 1px solid var(--link); transition: color var(--fast), border-color var(--fast); }
.article__body a:hover { color: var(--link-dk); border-color: var(--link-dk); }

/* Blockquote / pull quote */
.article__body blockquote {
  font-family: var(--serif); font-size: var(--t-3xl);
  font-style: italic; font-weight: 500; line-height: 1.25;
  color: var(--ink);
  border-top: 2px solid var(--accent); border-bottom: 2px solid var(--accent);
  padding-block: var(--s8); margin-block: var(--s12);
  text-align: center;
}
.article__body blockquote cite {
  display: block; font-family: var(--sans); font-size: var(--t-xs);
  font-style: normal; font-weight: 700; letter-spacing: var(--ls-widest);
  text-transform: uppercase; color: var(--ink-4); margin-top: var(--s4);
}

/* Lists */
.article__body ul, .article__body ol { margin-bottom: var(--s6); padding-left: var(--s6); }
.article__body ul { list-style: none; }
.article__body ol { list-style: decimal; }
.article__body ul li { position: relative; padding-left: var(--s4); margin-bottom: var(--s2); }
.article__body ul li::before { content: '\2014'; position: absolute; left: 0; color: var(--accent); font-weight: 700; }
.article__body ol li { margin-bottom: var(--s2); padding-left: var(--s2); }
.article__body strong { font-weight: 600; color: var(--ink); }
.article__body em     { font-style: italic; }

/* Figures */
.article__body figure { margin-block: var(--s10); }
.article__body figure.alignwide { max-width: calc(var(--content) + 280px); margin-inline: -140px; }
.article__body figure.alignfull { max-width: 100vw; margin-inline: calc(50% - 50vw); }
@media (max-width: 1060px) {
  .article__body figure.alignwide,
  .article__body figure.alignfull { margin-inline: 0; max-width: 100%; }
}
.article__body figcaption { font-family: var(--sans); font-size: var(--t-xs); color: var(--ink-4); font-style: italic; text-align: center; margin-top: var(--s3); }

/* HR */
.article__body hr { border: none; text-align: center; margin-block: var(--s12); color: var(--ink-4); }
.article__body hr::after { content: '* * *'; font-family: var(--serif); font-size: var(--t-xl); letter-spacing: .6em; }

/* Code */
.article__body code { font-family: 'SF Mono','Fira Code','Cascadia Code',monospace; font-size: .875em; background: var(--paper-3); padding: .15em .4em; border-radius: 3px; color: var(--accent); }
.article__body pre { background: var(--ink); color: var(--paper); padding: var(--s6); overflow-x: auto; font-size: var(--t-sm); line-height: 1.6; margin-block: var(--s8); }
.article__body pre code { background: none; padding: 0; color: inherit; font-size: inherit; }

/* Tables */
.article__body table { width: 100%; border-collapse: collapse; margin-block: var(--s8); font-family: var(--sans); font-size: var(--t-sm); }
.article__body th { font-weight: 700; text-align: left; padding: var(--s3) var(--s4); border-bottom: 2px solid var(--ink); font-size: var(--t-xs); letter-spacing: var(--ls-wider); text-transform: uppercase; }
.article__body td { padding: var(--s3) var(--s4); border-bottom: 1px solid var(--rule); }
.article__body tr:hover td { background: var(--paper-2); }

/* Article footer */
.article__footer {
  max-width: var(--content);
  margin-inline: auto;
  margin-top: var(--s16);
  padding-top: var(--s8);
  border-top: 2px solid var(--ink);
}

/* Tags */
.article__tags { display: flex; flex-wrap: wrap; gap: var(--s2); margin-bottom: var(--s8); }
.article__tag {
  font-family: var(--sans); font-size: var(--t-xs); font-weight: 600;
  letter-spacing: var(--ls-wide); text-transform: uppercase;
  color: var(--ink-3); border: 1px solid var(--rule);
  padding: var(--s1) var(--s3);
  transition: background var(--fast), color var(--fast), border-color var(--fast);
}
.article__tag:hover { background: var(--ink); color: var(--white); border-color: var(--ink); }

/* Author bio */
.author-bio {
  display: grid; grid-template-columns: 80px 1fr; gap: var(--s6);
  padding: var(--s8); background: var(--paper-2);
  border: 1px solid var(--rule); margin-bottom: var(--s8);
}
.author-bio__avatar { width: 80px; height: 80px; border-radius: 50%; overflow: hidden; }
.author-bio__avatar img { width: 100%; height: 100%; object-fit: cover; }
.author-bio__label { font-family: var(--sans); font-size: var(--t-xs); font-weight: 700; letter-spacing: var(--ls-widest); text-transform: uppercase; color: var(--accent); display: block; margin-bottom: var(--s2); }
.author-bio__name { font-family: var(--serif); font-size: var(--t-lg); font-weight: 700; color: var(--ink); margin-bottom: var(--s3); }
.author-bio__name a { border-bottom: 1px solid var(--rule); transition: color var(--fast), border-color var(--fast); }
.author-bio__name a:hover { color: var(--accent); border-color: var(--accent); }
.author-bio__text { font-family: var(--body); font-size: var(--t-sm); line-height: var(--lh-relaxed); color: var(--ink-3); }

/* Share footer */
.article__share-footer {
  display: flex; align-items: center; justify-content: space-between;
  border-top: 1px solid var(--rule); padding-top: var(--s5);
}
.article__share-label {
  font-family: var(--sans); font-size: var(--t-xs); font-weight: 700;
  letter-spacing: var(--ls-widest); text-transform: uppercase; color: var(--ink-3);
}

/* Post navigation */
.post-nav {
  max-width: var(--content); margin-inline: auto; margin-top: var(--s10);
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--s5);
  border-top: 2px solid var(--ink); padding-top: var(--s6);
}
.post-nav__prev { text-align: left; }
.post-nav__next { text-align: right; }
.post-nav__label {
  display: block; font-family: var(--sans); font-size: var(--t-xs);
  font-weight: 700; letter-spacing: var(--ls-widest); text-transform: uppercase;
  color: var(--ink-4); margin-bottom: var(--s2);
}
.post-nav__title {
  font-family: var(--serif); font-size: var(--t-lg); font-weight: 700;
  line-height: var(--lh-snug); color: var(--ink);
  transition: color var(--fast);
}
.post-nav__title:hover { color: var(--accent); }

/* Related articles */
.related-articles {
  max-width: var(--content); margin-inline: auto; margin-top: var(--s16);
  padding-top: var(--s8); border-top: 2px solid var(--ink);
}
.related-articles__title {
  font-family: var(--sans); font-size: var(--t-xs); font-weight: 700;
  letter-spacing: var(--ls-widest); text-transform: uppercase;
  color: var(--ink); margin-bottom: var(--s6);
}
.related-articles__grid { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--s6); }
@media (max-width: 640px) { .related-articles__grid { grid-template-columns: 1fr; } }

/* ================================================================
   ARCHIVE
   ================================================================ */
.archive-header { margin-bottom: var(--s10); padding-bottom: var(--s6); border-bottom: 3px solid var(--ink); }
.archive-title { font-family: var(--serif); font-size: var(--t-5xl); font-weight: 800; line-height: var(--lh-tight); letter-spacing: var(--ls-tight); color: var(--ink); }
.archive-description { font-family: var(--body); font-size: var(--t-md); color: var(--ink-3); margin-top: var(--s4); line-height: var(--lh-relaxed); }

/* ================================================================
   SIDEBAR
   ================================================================ */
.sidebar { position: sticky; top: calc(var(--s8) + 60px); }
.widget { margin-bottom: var(--s10); }
.widget__title {
  font-family: var(--sans); font-size: var(--t-xs); font-weight: 700;
  letter-spacing: var(--ls-widest); text-transform: uppercase; color: var(--ink);
  margin-bottom: var(--s5); padding-bottom: var(--s3); border-bottom: 2px solid var(--ink);
}

/* Popular widget */
.widget-popular ol { list-style: none; counter-reset: popular; }
.widget-popular li {
  counter-increment: popular;
  display: grid; grid-template-columns: 2rem 1fr;
  gap: var(--s3); align-items: start;
  padding-bottom: var(--s4); border-bottom: 1px solid var(--rule-2); margin-bottom: var(--s4);
}
.widget-popular li:last-child { border-bottom: none; }
.widget-popular li::before { content: counter(popular); font-family: var(--serif); font-size: var(--t-2xl); font-weight: 900; color: var(--rule); line-height: 1; }
.widget-popular a { font-family: var(--body); font-size: var(--t-sm); font-weight: 500; line-height: var(--lh-snug); color: var(--ink-2); transition: color var(--fast); }
.widget-popular a:hover { color: var(--accent); }

/* Categories */
.widget-categories li { border-bottom: 1px solid var(--rule-2); }
.widget-categories a { display: flex; justify-content: space-between; align-items: center; padding-block: var(--s3); font-family: var(--sans); font-size: var(--t-sm); font-weight: 500; color: var(--ink-3); transition: color var(--fast); }
.widget-categories a:hover { color: var(--accent); }
.widget-categories .count { font-size: var(--t-xs); color: var(--ink-4); font-weight: 400; }

/* Newsletter widget */
.widget-newsletter { background: var(--ink); padding: var(--s6); color: var(--white); }
.widget-newsletter .widget__title { color: var(--white); border-bottom-color: rgba(255,255,255,.2); }
.widget-newsletter p { font-family: var(--body); font-size: var(--t-sm); line-height: var(--lh-relaxed); color: rgba(255,255,255,.7); margin-bottom: var(--s5); }
.newsletter-form { display: flex; flex-direction: column; gap: var(--s3); }
.newsletter-form input[type="email"] { width: 100%; padding: var(--s3) var(--s4); background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); color: var(--white); font-family: var(--sans); font-size: var(--t-sm); outline: none; transition: border-color var(--fast); }
.newsletter-form input[type="email"]::placeholder { color: rgba(255,255,255,.4); }
.newsletter-form input[type="email"]:focus { border-color: var(--accent); }
.newsletter-form button { width: 100%; padding: var(--s3) var(--s4); background: var(--accent); color: var(--white); font-family: var(--sans); font-size: var(--t-xs); font-weight: 700; letter-spacing: var(--ls-wider); text-transform: uppercase; cursor: pointer; border: none; transition: background var(--fast); }
.newsletter-form button:hover { background: var(--accent-dk); }

/* ================================================================
   PAGINATION
   ================================================================ */
.pagination { display: flex; align-items: center; justify-content: center; gap: var(--s2); margin-top: var(--s16); font-family: var(--sans); font-size: var(--t-sm); }
.pagination a, .pagination .current { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid var(--rule); font-weight: 500; color: var(--ink-3); transition: all var(--fast); }
.pagination a:hover { border-color: var(--ink); color: var(--ink); }
.pagination .current { background: var(--ink); color: var(--white); border-color: var(--ink); }
.pagination .prev, .pagination .next { width: auto; padding-inline: var(--s4); font-weight: 600; letter-spacing: var(--ls-wide); text-transform: uppercase; font-size: var(--t-xs); }

/* ================================================================
   COMMENTS
   ================================================================ */
.comments-wrap { max-width: var(--content); margin-inline: auto; margin-top: var(--s16); }
.comments-title { font-family: var(--serif); font-size: var(--t-3xl); font-weight: 700; color: var(--ink); margin-bottom: var(--s8); padding-bottom: var(--s4); border-bottom: 2px solid var(--ink); }
.comment { padding-block: var(--s6); border-bottom: 1px solid var(--rule-2); }
.comment-meta { display: flex; align-items: center; gap: var(--s3); margin-bottom: var(--s4); }
.comment-author-avatar { width: 40px; height: 40px; border-radius: 50%; overflow: hidden; }
.comment-author-name { font-family: var(--sans); font-size: var(--t-sm); font-weight: 600; color: var(--ink); }
.comment-date { font-family: var(--sans); font-size: var(--t-xs); color: var(--ink-4); margin-top: var(--s1); }
.comment-content { font-family: var(--body); font-size: var(--t-sm); line-height: var(--lh-relaxed); color: var(--ink-3); }
.comment-form { margin-top: var(--s12); }
.form-field { margin-bottom: var(--s5); }
.form-field label { display: block; font-family: var(--sans); font-size: var(--t-xs); font-weight: 700; letter-spacing: var(--ls-wider); text-transform: uppercase; color: var(--ink-3); margin-bottom: var(--s2); }
.form-field input, .form-field textarea { width: 100%; padding: var(--s3) var(--s4); border: 1px solid var(--rule); background: var(--white); font-family: var(--body); font-size: var(--t-base); color: var(--ink); outline: none; transition: border-color var(--fast); }
.form-field input:focus, .form-field textarea:focus { border-color: var(--ink); }
.form-field textarea { min-height: 160px; resize: vertical; }
.submit-btn { display: inline-flex; align-items: center; gap: var(--s3); padding: var(--s4) var(--s8); background: var(--ink); color: var(--white); font-family: var(--sans); font-size: var(--t-xs); font-weight: 700; letter-spacing: var(--ls-wider); text-transform: uppercase; border: none; cursor: pointer; transition: background var(--fast); }
.submit-btn:hover { background: var(--accent); }

/* Search form */
.search-form { display: flex; border: 2px solid var(--ink); }
.search-form input { flex: 1; padding: var(--s3) var(--s4); border: none; background: var(--white); font-family: var(--body); font-size: var(--t-base); color: var(--ink); outline: none; }
.search-form button { padding: var(--s3) var(--s5); background: var(--ink); color: var(--white); font-family: var(--sans); font-size: var(--t-xs); font-weight: 700; letter-spacing: var(--ls-wider); text-transform: uppercase; border: none; cursor: pointer; transition: background var(--fast); }
.search-form button:hover { background: var(--accent); }

/* ================================================================
   404
   ================================================================ */
.error-404 { text-align: center; padding-block: var(--s24); }
.error-404__code { font-family: var(--serif); font-size: var(--t-5xl); font-weight: 900; color: var(--rule); line-height: 1; display: block; font-size: 8rem; }
.error-404__title { font-family: var(--serif); font-size: var(--t-3xl); font-weight: 700; color: var(--ink); margin-block: var(--s6); }
.error-404__text { font-family: var(--body); font-size: var(--t-md); color: var(--ink-3); margin-bottom: var(--s10); }

/* ================================================================
   FOOTER
   ================================================================ */
.site-footer { background: var(--ink); color: var(--white); margin-top: var(--s24); }
.footer__top { padding-block: var(--s16); border-bottom: 1px solid rgba(255,255,255,.1); }
.footer__grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--s10); }
@media (max-width: 1060px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px)  { .footer__grid { grid-template-columns: 1fr; } }
.footer__brand-title { font-family: var(--serif); font-size: var(--t-3xl); font-weight: 800; letter-spacing: var(--ls-tight); color: var(--white); margin-bottom: var(--s4); }
.footer__brand-desc { font-family: var(--body); font-size: var(--t-sm); line-height: var(--lh-relaxed); color: rgba(255,255,255,.55); margin-bottom: var(--s6); }
.footer__social { display: flex; gap: var(--s3); }
.footer__social-link { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 1px solid rgba(255,255,255,.2); color: rgba(255,255,255,.55); font-size: var(--t-sm); transition: all var(--fast); }
.footer__social-link:hover { background: var(--accent); border-color: var(--accent); color: var(--white); }
.footer__col-title { font-family: var(--sans); font-size: var(--t-xs); font-weight: 700; letter-spacing: var(--ls-widest); text-transform: uppercase; color: var(--white); margin-bottom: var(--s5); }
.footer__links { list-style: none; display: flex; flex-direction: column; gap: var(--s3); }
.footer__links a { font-family: var(--sans); font-size: var(--t-sm); color: rgba(255,255,255,.55); transition: color var(--fast); }
.footer__links a:hover { color: var(--white); }
.footer__bottom { padding-block: var(--s5); display: flex; align-items: center; justify-content: space-between; gap: var(--s5); flex-wrap: wrap; }
.footer__copyright { font-family: var(--sans); font-size: var(--t-xs); color: rgba(255,255,255,.35); letter-spacing: var(--ls-wide); }
.footer__legal { display: flex; gap: var(--s5); list-style: none; }
.footer__legal a { font-family: var(--sans); font-size: var(--t-xs); color: rgba(255,255,255,.35); transition: color var(--fast); }
.footer__legal a:hover { color: var(--white); }

/* ================================================================
   UTILITY
   ================================================================ */
.js-reveal { opacity: 0; transform: translateY(18px); transition: opacity var(--slow) var(--ease), transform var(--slow) var(--ease); }
.js-reveal.is-revealed { opacity: 1; transform: translateY(0); }

/* ================================================================
   PRINT
   ================================================================ */
@media print {
  .site-masthead, .sticky-nav, .reading-progress, .breaking-bar,
  .sidebar, .site-footer, .related-articles, .comments-wrap,
  nav, .byline__share, .article__tags { display: none; }
  body { font-size: 12pt; color: #000; background: #fff; }
  .article__body { max-width: 100%; font-size: 11pt; }
  .article__title { font-size: 24pt; }
}