/* ==========================================================================
   DIGITAL SPORTS DAILY — main.css
   Athletic editorial newsroom. Mobile-first. No frameworks.
   --------------------------------------------------------------------------
   1. Design tokens
   2. Reset & base
   3. Typography
   4. Layout primitives
   5. Masthead (topbar, ticker, brand, nav)
   6. Hero / lead
   7. Cards & grids
   8. Sections
   9. Single article
   10. Widgets / sidebar
   11. Footer
   12. Forms, buttons, pagination
   13. Block editor content
   14. Utilities, focus, motion, responsive
   ========================================================================== */

/* 1. TOKENS ---------------------------------------------------------------- */
:root{
  /* palette */
  --ink:        #0F1410;   /* near-black, warm green-black */
  --ink-2:      #1B231D;
  --ink-soft:   #2C342D;
  --paper:      #FAFAF8;   /* off-white, basically white */
  --surface:    #FFFFFF;
  --surface-2:  #EFEEE6;
  --line:       #E3E1D8;
  --line-2:     #D2CFC3;
  --muted:      #6A6F66;
  --muted-2:    #878C82;

  --turf:       #0A6B45;   /* brand: deep field green */
  --turf-deep:  #064F33;
  --turf-bright:#13A368;   /* interactive */
  --volt:       #2BE08C;   /* on-dark accent */
  --breaking:   #E4002B;   /* reserved: breaking + live only */

  /* type */
  --display: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
  --serif:   "Source Serif 4", Georgia, "Times New Roman", serif;
  --sans:    system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* fluid type scale */
  --fs-meta:  0.72rem;
  --fs-body:  clamp(1.0625rem, 0.99rem + 0.36vw, 1.1875rem);
  --fs-lede:  clamp(1.1875rem, 1.08rem + 0.55vw, 1.4375rem);
  --fs-h3:    clamp(1.25rem, 1.05rem + 1.0vw, 1.6rem);
  --fs-h2:    clamp(1.6rem, 1.2rem + 2.0vw, 2.4rem);
  --fs-h1:    clamp(2.1rem, 1.3rem + 4.0vw, 3.8rem);
  --fs-hero:  clamp(2.1rem, 1.35rem + 3.2vw, 3.6rem);

  /* space */
  --gap:      clamp(1.25rem, 0.9rem + 1.6vw, 2.25rem);
  --pad:      clamp(1rem, 0.6rem + 2vw, 2rem);
  --wrap:     1240px;
  --measure:  68ch;

  --radius:   3px;
  --shadow:   0 1px 2px rgba(15,20,16,.05), 0 8px 28px -16px rgba(15,20,16,.22);
  --ease:     cubic-bezier(.22,.61,.36,1);
}

/* 2. RESET & BASE ---------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--serif);
  font-size:var(--fs-body);
  line-height:1.62;
  font-feature-settings:"kern" 1,"liga" 1;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg,video{ max-width:100%; height:auto; display:block; }
a{ color:var(--turf); text-decoration:none; }
a:hover{ color:var(--turf-deep); }
hr{ border:0; border-top:1px solid var(--line); margin:2rem 0; }
::selection{ background:var(--turf); color:#fff; }

/* 3. TYPOGRAPHY ------------------------------------------------------------ */
h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:800;
  line-height:.98;
  letter-spacing:-.005em;
  text-transform:uppercase;
  margin:0 0 .5em;
  color:var(--ink);
}
h3{ font-size:var(--fs-h3); }
h2{ font-size:var(--fs-h2); }
h1{ font-size:var(--fs-h1); }
p{ margin:0 0 1.15em; }

.kicker{
  font-family:var(--display);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:.78rem;
  line-height:1;
  color:var(--turf);
  display:inline-flex;
  align-items:center;
  gap:.45em;
}
.kicker--breaking{ color:var(--breaking); }
.kicker::before{
  content:"";
  width:.5em; height:.5em;
  background:currentColor;
  transform:skewX(-12deg);     /* tiny forward slash dot — echoes the logo */
}

.eyebrow{
  font-family:var(--display);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.1em;
  font-size:.8rem;
  color:var(--muted);
}

.meta{
  font-family:var(--sans);
  font-size:var(--fs-meta);
  letter-spacing:.02em;
  color:var(--muted);
  text-transform:uppercase;
}
.meta a{ color:var(--ink-soft); font-weight:600; }
.meta a:hover{ color:var(--turf); }
.meta .dot{ opacity:.5; padding:0 .2em; }

/* 4. LAYOUT ---------------------------------------------------------------- */
.wrap{ width:min(100% - 2*var(--pad), var(--wrap)); margin-inline:auto; }
.skip-link{
  position:absolute; left:-999px; top:0; z-index:999;
  background:var(--ink); color:#fff; padding:.6rem 1rem; font-family:var(--display);
  text-transform:uppercase; letter-spacing:.05em;
}
.skip-link:focus{ left:.5rem; top:.5rem; color:#fff; }

/* 5. MASTHEAD -------------------------------------------------------------- */
.topbar{
  background:var(--ink);
  color:var(--paper);
  border-bottom:1px solid var(--turf-deep);
}
.topbar .wrap{
  display:flex; align-items:center; gap:1rem;
  min-height:38px;
}
.topbar__date{
  font-family:var(--display); font-weight:600; text-transform:uppercase;
  letter-spacing:.06em; font-size:.78rem; color:var(--volt); white-space:nowrap;
}

/* breaking ticker — broadcast lower-third */
.ticker{
  display:flex; align-items:center; gap:.75rem; flex:1; min-width:0;
  overflow:hidden;
}
.ticker__flag{
  display:inline-flex; align-items:center; gap:.4em;
  background:var(--breaking); color:#fff;
  font-family:var(--display); font-weight:800; text-transform:uppercase;
  letter-spacing:.06em; font-size:.74rem; line-height:1;
  padding:.42em .6em; white-space:nowrap; flex:none;
}
.ticker__flag .live{
  width:.5em; height:.5em; border-radius:50%; background:#fff;
  animation:pulse 1.4s var(--ease) infinite;
}
@keyframes pulse{ 0%,100%{ opacity:1; transform:scale(1);} 50%{ opacity:.35; transform:scale(.7);} }
.ticker__track{ overflow:hidden; flex:1; min-width:0; -webkit-mask-image:linear-gradient(90deg,#000 92%,transparent); mask-image:linear-gradient(90deg,#000 92%,transparent); }
.ticker__list{
  display:inline-flex; gap:2.5rem; white-space:nowrap;
  font-family:var(--sans); font-size:.8rem; color:var(--paper);
  will-change:transform; animation:tick 38s linear infinite;
}
.ticker:hover .ticker__list{ animation-play-state:paused; }
.ticker__list a{ color:var(--paper); }
.ticker__list a:hover{ color:var(--volt); }
.ticker__list .sep{ color:var(--turf-bright); }
@keyframes tick{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }

/* brand row */
.masthead{ background:var(--paper); border-bottom:2px solid var(--ink); }
.masthead .wrap{
  display:flex; align-items:center; gap:var(--gap);
  padding-block:clamp(.85rem,2.2vw,1.4rem);
}
.brand{ display:inline-flex; align-items:center; flex:none; }
.brand img,.brand svg{ display:block; height:clamp(26px,4.4vw,40px); width:auto; }
.brand--mark{ display:none; }

.primary-nav{ margin-left:auto; }
.primary-nav ul{ list-style:none; margin:0; padding:0; display:flex; gap:clamp(1rem,2vw,1.85rem); align-items:center; }
.primary-nav a{
  font-family:var(--display); font-weight:700; text-transform:uppercase;
  letter-spacing:.04em; font-size:1.02rem; color:var(--ink);
  padding:.35em 0; position:relative; display:inline-block;
}
.primary-nav a::after{           /* scoreline */
  content:""; position:absolute; left:0; right:0; bottom:-.05em; height:3px;
  background:var(--turf); transform:scaleX(0); transform-origin:left;
  transition:transform .28s var(--ease);
}
.primary-nav a:hover::after,
.primary-nav .current-menu-item > a::after,
.primary-nav .current_page_item > a::after{ transform:scaleX(1); }
.primary-nav .current-menu-item > a,
.primary-nav .current_page_item > a{ color:var(--turf-deep); }

.masthead__tools{ display:flex; align-items:center; gap:.5rem; }
.icon-btn{
  background:none; border:0; cursor:pointer; color:var(--ink);
  width:42px; height:42px; display:inline-flex; align-items:center; justify-content:center;
  border-radius:var(--radius);
}
.icon-btn:hover{ background:var(--surface-2); color:var(--turf); }
.icon-btn svg{ width:22px; height:22px; }
.nav-toggle{ display:none; }

/* sticky condensed bar */
.masthead.is-stuck{ position:sticky; top:0; z-index:90; box-shadow:var(--shadow); }

/* search drawer */
.search-drawer{
  background:var(--ink); color:#fff; max-height:0; overflow:hidden;
  transition:max-height .35s var(--ease);
}
.search-drawer.is-open{ max-height:120px; }
.search-drawer .wrap{ padding:1rem 0; }
.search-drawer form{ display:flex; gap:.5rem; }
.search-drawer input[type=search]{
  flex:1; background:transparent; border:0; border-bottom:2px solid var(--turf-bright);
  color:#fff; font-family:var(--display); font-size:1.5rem; text-transform:uppercase;
  padding:.3rem 0; letter-spacing:.02em;
}
.search-drawer input::placeholder{ color:rgba(255,255,255,.4); }
.search-drawer input:focus{ outline:none; border-color:var(--volt); }

/* 6. HERO / LEAD ----------------------------------------------------------- */
.lead{
  display:grid; gap:var(--gap); padding-block:var(--gap);
  grid-template-columns:1fr;
}
@media(min-width:900px){ .lead{ grid-template-columns:1.65fr 1fr; align-items:start; } }

.lead__main{ position:relative; }
.lead__figure{ position:relative; overflow:hidden; border-radius:var(--radius); background:var(--ink-2); }
.lead__figure img{ width:100%; aspect-ratio:16/9; object-fit:cover; transition:transform .6s var(--ease); }
.lead__main:hover .lead__figure img{ transform:scale(1.03); }
.lead__body{ padding-top:1rem; }
.lead__title{
  font-size:var(--fs-hero); margin:.25em 0 .35em;
}
.lead__title a{ color:var(--ink); }
.lead__main:hover .lead__title a{ color:var(--ink); }
.lead__standfirst{
  font-family:var(--serif); font-size:var(--fs-lede); line-height:1.45;
  color:var(--ink-soft); max-width:46ch; margin:0 0 .7rem;
}

/* latest rail */
.rail{ border-top:3px solid var(--ink); }
.rail__head{
  display:flex; align-items:baseline; justify-content:space-between;
  padding:.7rem 0; border-bottom:1px solid var(--line);
}
.rail__title{ font-family:var(--display); font-weight:800; text-transform:uppercase; font-size:1.1rem; letter-spacing:.02em; margin:0; }
.rail__list{ list-style:none; margin:0; padding:0; }
.rail__item{ padding:.85rem 0; border-bottom:1px solid var(--line); display:grid; grid-template-columns:auto 1fr; gap:.85rem; }
.rail__rank{
  font-family:var(--display); font-weight:800; font-size:1.5rem; line-height:.9;
  color:var(--turf); width:1.4ch;
}
.rail__item h4{
  font-size:1.18rem; line-height:1; margin:.05em 0 .3rem;
}
.rail__item h4 a{ color:var(--ink); }
.rail__item h4 a:hover{ color:var(--turf-deep); }

/* 6b. BROADSHEET BOARD (ALDaily-style front page) ------------------------- */
.board{
  --bgap:clamp(1.6rem,2.4vw,2.6rem);
  max-width:var(--wrap); margin:0 auto;
  padding:clamp(1rem,2vw,1.75rem) var(--pad) clamp(2rem,5vw,3.5rem);
  display:grid; grid-template-columns:1fr; gap:1.75rem;
}
@media(min-width:680px) and (max-width:999px){
  .board{ grid-template-columns:1fr 1fr; column-gap:var(--bgap); }
}
@media(min-width:1000px){
  .board{ grid-template-columns:0.82fr 1fr 1fr 1fr; column-gap:var(--bgap); }
}

/* Columns carry NO horizontal padding. Spacing comes from the grid gap;
   dividers are drawn as a hairline centred inside that gap via ::before,
   so text always sits a full half-gap away from any rule. Nothing here
   depends on nth-child, so nothing can be overridden into hugging. */
.board__col{ min-width:0; position:relative; }

@media(min-width:680px) and (max-width:999px){
  .board__col:nth-child(2n)::before{
    content:""; position:absolute; top:0; bottom:0;
    left:calc(var(--bgap) * -0.5); width:1px; background:var(--line-2);
  }
}
@media(min-width:1000px){
  .board__col--feed::before{
    content:""; position:absolute; top:0; bottom:0;
    left:calc(var(--bgap) * -0.5); width:1px; background:var(--line-2);
  }
}

/* multiple category sections stacked within one feed column */
.feed-sec + .feed-sec{ margin-top:1.6rem; }
.feed-sec .teaser:last-child{ border-bottom:0; }

/* 6c. HIGHLIGHT REEL (lazy YouTube Shorts) -------------------------------- */
.reel-section{ padding-block:clamp(1.5rem,4vw,2.5rem); }
.reel__head{ display:flex; align-items:center; gap:.85rem; margin:0 0 1rem; }
.reel__title{
  font-family:var(--display); font-weight:800; text-transform:uppercase;
  letter-spacing:.03em; color:var(--paper); margin:0;
  font-size:clamp(1.2rem,1rem + 1.1vw,1.7rem); display:flex; align-items:center; gap:.5rem;
}
.reel__title::before{ content:""; width:.5em; height:.85em; background:var(--volt); transform:skewX(-12deg); }
.reel__badge{
  font-family:var(--display); font-weight:700; text-transform:uppercase; letter-spacing:.08em;
  font-size:.72rem; color:var(--volt); border:1px solid var(--volt);
  padding:.18rem .55rem; border-radius:2px;
}
.reel__track{
  list-style:none; margin:0; padding:.25rem 0 .75rem; display:flex;
  gap:clamp(.7rem,1.6vw,1.1rem); overflow-x:auto; scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch; scrollbar-width:thin;
  scrollbar-color:var(--turf-bright) transparent;
}
.reel__track::-webkit-scrollbar{ height:8px; }
.reel__track::-webkit-scrollbar-thumb{ background:var(--ink-soft); border-radius:4px; }
.reel__item{
  flex:0 0 auto; width:clamp(150px,42vw,186px); aspect-ratio:9/16;
  scroll-snap-align:start; position:relative; overflow:hidden;
  border-radius:var(--radius); background:#000;
}
.reel__btn{
  appearance:none; -webkit-appearance:none; border:0; padding:0; margin:0;
  display:block; width:100%; height:100%; cursor:pointer; background:#000; position:relative;
}
.reel__thumb{ width:100%; height:100%; object-fit:cover; display:block; }
.reel__btn::after{
  content:""; position:absolute; inset:auto 0 0 0; height:42%;
  background:linear-gradient(to top, rgba(0,0,0,.5), transparent);
}
.reel__play{
  position:absolute; inset:0; margin:auto; width:54px; height:54px; z-index:1;
  display:grid; place-items:center; color:#fff; background:var(--turf);
  border-radius:50%; box-shadow:0 6px 20px rgba(0,0,0,.4);
  transition:transform .15s var(--ease), background .15s var(--ease);
}
.reel__play svg{ margin-left:3px; }
.reel__btn:hover .reel__play,
.reel__btn:focus-visible .reel__play{ transform:scale(1.09); background:var(--turf-bright); }
.reel__frame{ width:100%; height:100%; border:0; display:block; }
.reel__hint{
  font-family:var(--sans); font-size:.78rem; color:var(--muted-2);
  margin:.4rem 0 0; letter-spacing:.01em;
}
@media (prefers-reduced-motion: reduce){
  .reel__track{ scroll-behavior:auto; }
  .reel__play{ transition:none; }
}
.reel__placeholder{
  border:1px dashed var(--turf-bright); border-radius:var(--radius);
  padding:clamp(1.25rem,3vw,2rem); text-align:center;
}
.reel__ph-title{
  font-family:var(--display); font-weight:700; text-transform:uppercase;
  letter-spacing:.04em; color:var(--volt); font-size:1.05rem; margin:0 0 .35rem;
}
.reel__ph-text{
  font-family:var(--sans); font-size:.85rem; line-height:1.5;
  color:var(--muted-2); margin:0; max-width:60ch; margin-inline:auto;
}

/* feed columns */
.feed__head{
  font-family:var(--serif); font-style:italic; font-weight:600;
  font-size:clamp(1.35rem,1.05rem + 0.9vw,1.7rem); line-height:1.05;
  text-align:center; letter-spacing:-.01em; color:var(--turf);
  margin:0 0 1rem; padding-bottom:.55rem; border-bottom:2px solid var(--ink);
}
.feed__head a{ color:inherit; background-image:none; }
.feed__head a:hover{ color:var(--turf-deep); }

.teaser{
  font-family:var(--serif); font-size:1rem; line-height:1.5; color:var(--ink-2);
  margin:0; padding:.85rem 0; border-bottom:1px solid var(--line);
}
.board__col--feed .teaser:last-child{ border-bottom:0; }
.teaser__lead{ color:var(--ink); background-image:none; }
.teaser__lead strong{ font-weight:700; }
.teaser__lead:hover strong{ color:var(--turf-deep); }
.teaser__text{ color:var(--ink-2); }
.teaser__more{
  white-space:nowrap; color:var(--turf); font-weight:600;
  font-family:var(--display); letter-spacing:.02em; background-image:none;
}
.teaser__more::after{ content:" \00BB"; }
.teaser__more:hover{ color:var(--turf-deep); }
.teaser__flag{
  font-family:var(--display); font-weight:800; text-transform:uppercase;
  letter-spacing:.05em; font-size:.82em; color:var(--breaking); margin-right:.35em;
}
.teaser--empty{ color:var(--muted); font-style:italic; }
.teaser__stamp{
  display:block; margin-top:.3rem;
  font-family:var(--display); font-weight:600; text-transform:uppercase;
  letter-spacing:.05em; font-size:.72rem; color:var(--muted);
}

/* nota bene rail */
.nb__cta{
  display:block; text-align:center; background:var(--turf); color:#fff;
  font-family:var(--display); font-weight:700; text-transform:uppercase;
  letter-spacing:.05em; font-size:.95rem; padding:.7rem .6rem;
  border-radius:var(--radius); margin:0 0 1.25rem; background-image:none;
}
.nb__cta:hover{ background:var(--turf-deep); color:#fff; }
.nb__title{
  font-family:var(--serif); font-style:italic; font-weight:600; font-size:1.15rem;
  color:var(--ink); margin:0 0 .5rem; padding-bottom:.3rem; border-bottom:2px solid var(--ink);
}
.nb__list{ list-style:none; margin:0 0 1.4rem; padding:0; }
.nb__list li{ padding:.34rem 0; border-bottom:1px solid var(--line); font-size:.96rem; line-height:1.3; }
.nb__list li:last-child{ border-bottom:0; }
.nb__list a{ color:var(--turf); background-image:none; }
.nb__list a:hover{ color:var(--turf-deep); }
.nb__search{ display:flex; gap:.4rem; margin:0 0 1.4rem; }
.nb__search input[type="search"]{ flex:1; min-width:0; }
.nb__links{ list-style:none; margin:0; padding:0; font-family:var(--display); text-transform:uppercase; letter-spacing:.04em; font-size:.86rem; }
.nb__links li{ padding:.26rem 0; border-bottom:1px solid var(--line); }
.nb__links li:last-child{ border-bottom:0; }
.nb__links a{ color:var(--ink); background-image:none; }
.nb__links a:hover{ color:var(--turf); }

/* archive / category pages — broadsheet teaser flow (no images) */
.archive-stream{
  margin:clamp(1.25rem,3vw,2rem) 0 clamp(1.5rem,4vw,2.5rem);
  column-gap:clamp(1.75rem,3vw,2.75rem);
  column-rule:1px solid var(--line-2);
}
@media(min-width:640px){ .archive-stream{ column-count:2; } }
@media(min-width:1000px){ .archive-stream{ column-count:3; } }
.archive-stream .teaser{ break-inside:avoid; -webkit-column-break-inside:avoid; }
.archive-empty{ color:var(--muted); font-style:italic; padding:var(--gap) 0; }

/* 7. CARDS ----------------------------------------------------------------- */
.card{ position:relative; display:flex; flex-direction:column; }
.card__figure{ overflow:hidden; border-radius:var(--radius); background:var(--ink-2); margin-bottom:.7rem; }
.card__figure img{ width:100%; aspect-ratio:16/10; object-fit:cover; transition:transform .55s var(--ease); }
.card:hover .card__figure img{ transform:scale(1.04); }
.card__title{ font-size:var(--fs-h3); line-height:.98; margin:.3rem 0 .45rem; }
.card__title a{ color:var(--ink); background-image:linear-gradient(var(--turf),var(--turf)); background-size:0% 3px; background-position:0 100%; background-repeat:no-repeat; transition:background-size .3s var(--ease); padding-bottom:2px; }
.card:hover .card__title a{ background-size:100% 3px; }     /* scoreline sweep */
.card__excerpt{ font-size:.98rem; line-height:1.5; color:var(--ink-soft); margin:0 0 .55rem; }
.card--compact .card__figure{ display:none; }
.card--compact .card__title{ font-size:1.15rem; }

/* the grid */
.grid{ display:grid; gap:var(--gap); grid-template-columns:1fr; }
@media(min-width:620px){ .grid--2{ grid-template-columns:repeat(2,1fr); } }
@media(min-width:820px){ .grid--3{ grid-template-columns:repeat(3,1fr); } .grid--4{ grid-template-columns:repeat(2,1fr); } }
@media(min-width:1040px){ .grid--4{ grid-template-columns:repeat(4,1fr); } }

/* 8. SECTIONS -------------------------------------------------------------- */
.section{ padding-block:clamp(1.6rem,4vw,2.8rem); border-top:1px solid var(--line); }
.section__head{
  display:flex; align-items:center; gap:1rem; margin-bottom:var(--gap);
}
.section__title{
  font-family:var(--display); font-weight:800; text-transform:uppercase;
  font-size:clamp(1.25rem,1rem+1.4vw,1.9rem); letter-spacing:.01em; margin:0;
  display:inline-flex; align-items:center; gap:.55rem;
}
.section__title::before{ content:""; width:.55em; height:.9em; background:var(--turf); transform:skewX(-12deg); }
.section__title--breaking::before{ background:var(--breaking); }
.section__line{ flex:1; height:2px; background:var(--ink); }
.section__more{
  font-family:var(--display); font-weight:700; text-transform:uppercase; letter-spacing:.04em;
  font-size:.9rem; color:var(--turf); white-space:nowrap;
}
.section__more:hover{ color:var(--turf-deep); }
.section__more::after{ content:" →"; }

.section--dark{ background:var(--ink); color:var(--paper); border:0; }
.section--dark .section__title{ color:var(--paper); }
.section--dark .section__line{ background:var(--turf-bright); }
.section--dark .card__title a{ color:var(--paper); background-image:linear-gradient(var(--volt),var(--volt)); }
.section--dark .card__excerpt{ color:#c9ccc4; }
.section--dark .meta{ color:#9aa097; }
.section--dark .meta a{ color:#e7e8e2; }

/* 9. SINGLE ARTICLE -------------------------------------------------------- */
.progress{ position:fixed; top:0; left:0; height:3px; width:0; background:var(--turf); z-index:200; transition:width .08s linear; }

.article-hero{ padding-block:clamp(1.4rem,3vw,2.4rem) var(--gap); }
.article-hero__inner{ width:min(100% - 2*var(--pad), 860px); margin-inline:auto; text-align:left; }
.article-hero .kicker{ font-size:.9rem; }
.article-title{ font-size:var(--fs-h1); margin:.45rem 0 .6rem; }
.standfirst{
  font-family:var(--serif); font-size:var(--fs-lede); line-height:1.45;
  color:var(--ink-soft); margin:0 0 1.2rem; max-width:60ch;
}
.byline{
  display:flex; flex-wrap:wrap; align-items:center; gap:.6rem 1rem;
  padding:.85rem 0; border-top:1px solid var(--ink); border-bottom:1px solid var(--line);
}
.byline__author{ font-family:var(--display); font-weight:700; text-transform:uppercase; letter-spacing:.03em; color:var(--ink); }
.byline__author a{ color:var(--ink); }
.byline .meta{ display:inline-flex; align-items:center; gap:.4rem; }
.share{ margin-left:auto; display:flex; gap:.4rem; }
.share a{
  width:36px; height:36px; border:1px solid var(--line-2); border-radius:var(--radius);
  display:inline-flex; align-items:center; justify-content:center; color:var(--ink-soft);
}
.share a:hover{ background:var(--ink); color:#fff; border-color:var(--ink); }
.share svg{ width:17px; height:17px; }

.featured{ width:min(100% - 2*var(--pad), 1100px); margin:0 auto var(--gap); }
.featured img{ width:100%; border-radius:var(--radius); }
.featured figcaption{ font-family:var(--sans); font-size:.78rem; color:var(--muted); padding-top:.5rem; }

.article-body{ width:min(100% - 2*var(--pad), 860px); margin-inline:auto; }
.article-body > p,
.article-body > h2,
.article-body > h3,
.article-body > h4,
.article-body > h5,
.article-body > ul,
.article-body > ol,
.article-body > blockquote,
.article-body > pre,
.article-body > .page-links,
.article-body > .wp-block-quote{ max-width:var(--measure); }
.article-body > *{ margin-bottom:1.2em; }
.article-body p{ font-size:var(--fs-body); }
.article-body p:first-of-type::first-letter{
  font-family:var(--display); font-weight:800; float:left; font-size:3.4em;
  line-height:.72; padding:.06em .12em 0 0; color:var(--turf);
}
.article-body h2{ font-size:var(--fs-h2); margin-top:1.6em; }
.article-body h3{ font-size:var(--fs-h3); margin-top:1.4em; }
.article-body a{ background-image:linear-gradient(var(--turf),var(--turf)); background-size:100% 1px; background-position:0 1.15em; background-repeat:no-repeat; }
.article-body a:hover{ background-size:100% 2px; }
.article-body blockquote{
  margin:1.6em 0; padding:.2em 0 .2em 1.4rem; border-left:4px solid var(--turf);
  font-family:var(--display); font-weight:600; text-transform:none;
  font-size:clamp(1.4rem,1.1rem+1.4vw,2rem); line-height:1.05; color:var(--ink);
}
.article-body figure{ margin:1.6em 0; }
.article-body img{ border-radius:var(--radius); }
.article-body ul,.article-body ol{ padding-left:1.3em; }
.article-body li{ margin-bottom:.4em; }
.endmark{ font-family:var(--display); color:var(--turf); font-weight:800; }
.endmark::before{ content:"／／"; letter-spacing:-.1em; }

.article-foot{ width:min(100% - 2*var(--pad), 860px); margin:var(--gap) auto 0; }
.tags{ display:flex; flex-wrap:wrap; gap:.5rem; padding-top:1rem; }
.tag{
  font-family:var(--display); font-weight:600; text-transform:uppercase; letter-spacing:.03em;
  font-size:.82rem; padding:.3em .7em; border:1px solid var(--line-2); border-radius:100px; color:var(--ink-soft);
}
.tag:hover{ background:var(--ink); color:#fff; border-color:var(--ink); }

.author-box{
  display:flex; gap:1rem; align-items:flex-start; margin-top:var(--gap);
  padding:1.2rem; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
}
.author-box img{ width:64px; height:64px; border-radius:50%; flex:none; }
.author-box h4{ text-transform:none; font-family:var(--display); margin:0 0 .25rem; }
.author-box p{ font-size:.95rem; color:var(--ink-soft); margin:0; }

/* 10. SIDEBAR / WIDGETS ---------------------------------------------------- */
.with-sidebar{ display:grid; gap:var(--gap); grid-template-columns:1fr; }
@media(min-width:980px){ .with-sidebar{ grid-template-columns:minmax(0,1fr) 320px; } }
.widget{ margin-bottom:var(--gap); }
.widget-title{ font-family:var(--display); font-weight:800; text-transform:uppercase; font-size:1.1rem; letter-spacing:.02em; margin:0 0 .8rem; padding-bottom:.4rem; border-bottom:3px solid var(--ink); }
.widget ul{ list-style:none; margin:0; padding:0; }
.widget li{ padding:.5rem 0; border-bottom:1px solid var(--line); font-family:var(--sans); font-size:.95rem; }
.widget a{ color:var(--ink-soft); }
.widget a:hover{ color:var(--turf); }

/* 11. FOOTER --------------------------------------------------------------- */
.site-footer{ background:var(--ink); color:var(--paper); margin-top:clamp(2rem,6vw,4rem); }
.site-footer__top{ padding-block:clamp(2rem,5vw,3.2rem); display:grid; gap:var(--gap); grid-template-columns:1fr; }
@media(min-width:760px){ .site-footer__top{ grid-template-columns:1.4fr repeat(3,1fr); } }
.footer-brand img{ height:34px; width:auto; margin-bottom:1rem; }
.footer-brand p{ color:#b9bdb4; font-size:.95rem; max-width:34ch; }
.footer-col h4{ color:var(--volt); font-size:1rem; letter-spacing:.04em; margin-bottom:.7rem; }
.footer-col ul{ list-style:none; margin:0; padding:0; }
.footer-col li{ padding:.28rem 0; }
.footer-col a{ color:#c9ccc4; font-family:var(--sans); font-size:.92rem; }
.footer-col a:hover{ color:#fff; }
.site-footer__bottom{ border-top:1px solid var(--ink-soft); padding-block:1.2rem; display:flex; flex-wrap:wrap; gap:1rem; align-items:center; justify-content:space-between; }
.site-footer__bottom p{ margin:0; color:var(--muted-2); font-family:var(--sans); font-size:.8rem; }
.social{ display:flex; gap:.5rem; }
.social a{ width:36px; height:36px; border:1px solid var(--ink-soft); border-radius:var(--radius); display:inline-flex; align-items:center; justify-content:center; color:#c9ccc4; }
.social a:hover{ background:var(--turf); color:#fff; border-color:var(--turf); }
.social svg{ width:17px; height:17px; }

/* 12. FORMS, BUTTONS, PAGINATION ------------------------------------------ */
.btn{
  display:inline-flex; align-items:center; gap:.5em;
  font-family:var(--display); font-weight:700; text-transform:uppercase; letter-spacing:.04em;
  font-size:1rem; padding:.7em 1.2em; border-radius:var(--radius); cursor:pointer;
  background:var(--turf); color:#fff; border:2px solid var(--turf); transition:background .2s var(--ease),transform .2s var(--ease);
}
.btn:hover{ background:var(--turf-deep); border-color:var(--turf-deep); color:#fff; transform:translateY(-1px); }
.btn--ghost{ background:transparent; color:var(--ink); border-color:var(--ink); }
.btn--ghost:hover{ background:var(--ink); color:#fff; }

input,textarea,select{ font-family:var(--sans); font-size:1rem; }
.field input,.field textarea{
  width:100%; padding:.7rem .85rem; border:1px solid var(--line-2); border-radius:var(--radius);
  background:var(--surface); color:var(--ink);
}
.field input:focus,.field textarea:focus{ outline:2px solid var(--turf); outline-offset:1px; border-color:var(--turf); }

.pagination{ display:flex; gap:.4rem; flex-wrap:wrap; justify-content:center; padding:var(--gap) 0; }
.pagination .page-numbers{
  font-family:var(--display); font-weight:700; min-width:44px; height:44px; padding:0 .6rem;
  display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--line-2);
  border-radius:var(--radius); color:var(--ink);
}
.pagination .page-numbers:hover{ border-color:var(--ink); }
.pagination .current{ background:var(--ink); color:#fff; border-color:var(--ink); }

/* 13. BLOCK EDITOR CONTENT ------------------------------------------------- */
.alignwide{ width:min(100% - 2*var(--pad), 1100px); margin-inline:auto; }
.alignfull{ width:100vw; max-width:100vw; margin-left:calc(50% - 50vw); }
.wp-block-pullquote,.wp-block-quote.is-style-large{ border:0; border-top:3px solid var(--turf); border-bottom:3px solid var(--turf); padding:1.2rem 0; text-align:left; }
.wp-block-image figcaption{ font-family:var(--sans); font-size:.78rem; color:var(--muted); }
.wp-block-button__link{ border-radius:var(--radius); font-family:var(--display); text-transform:uppercase; }

/* 14. UTILITIES / FOCUS / MOTION / RESPONSIVE ----------------------------- */
.is-hidden{ display:none !important; }
:focus-visible{ outline:2px solid var(--turf); outline-offset:2px; }
.screen-reader-text{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }

/* mobile nav */
@media(max-width:860px){
  .nav-toggle{ display:inline-flex; }
  .brand--full{ display:none; }
  .brand--mark{ display:inline-flex; }
  .brand--mark img{ height:38px; }
  .primary-nav{
    position:fixed; inset:0 0 0 auto; width:min(82vw,340px); background:var(--ink);
    transform:translateX(100%); transition:transform .32s var(--ease); z-index:120;
    padding:5rem 1.6rem 2rem; overflow-y:auto;
  }
  .primary-nav.is-open{ transform:translateX(0); }
  .primary-nav ul{ flex-direction:column; align-items:flex-start; gap:.2rem; }
  .primary-nav a{ color:var(--paper); font-size:1.5rem; width:100%; padding:.6rem 0; border-bottom:1px solid var(--ink-soft); }
  .primary-nav a::after{ display:none; }
  .nav-scrim{ position:fixed; inset:0; background:rgba(15,20,16,.6); opacity:0; pointer-events:none; transition:opacity .3s; z-index:110; }
  .nav-scrim.is-open{ opacity:1; pointer-events:auto; }
  .topbar__date{ display:none; }
}
@media(min-width:861px){ .nav-scrim{ display:none; } }

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  .ticker__list{ animation:none; }
}