/*
Theme Name: Cricket Capture
Theme URI: https://cricketcapture.com/
Author: Cricket Capture
Description: A news-first cricket portal theme with a broadcast-style live score bug, Match Centre, fantasy rails, rankings and points tables. Live scores pull from a configurable data feed (set your provider + API key in Appearance > Customize > Cricket Data). Built for editorial speed and SEO.
Version: 0.1.0
Requires at least: 6.4
Tested up to: 7.0
Requires PHP: 7.4
Text Domain: cricket-capture
*/

/* ============================================================
   CRICKET CAPTURE — design system
   Concept: broadcast chrome (dark, data-dense) around
   editorial content (light, readable). Boldness spent on the
   live score bug; everything else kept quiet.
   ============================================================ */
:root{
  /* palette */
  --ink:#0C1A2B;        /* night-match dark chrome */
  --ink-2:#12263B;      /* raised dark surface */
  --ink-3:#1D3B5A;      /* dark hover / deep accent */
  --ink-line:#22384F;   /* border on dark */
  --cherry:#E0322B;     /* red ball = live + primary accent */
  --cherry-dk:#B8241E;
  --paper:#F5F6F8;      /* editorial background */
  --card:#FFFFFF;
  --text:#16202E;       /* body text */
  --steel:#7C8A99;      /* secondary text */
  --line:#E1E5EA;       /* light hairline */
  --turf:#0FA968;       /* LIVE / positive indicator ONLY */

  /* type */
  --display:'Archivo',system-ui,-apple-system,sans-serif;
  --serif:'Newsreader',Georgia,'Times New Roman',serif;
  --data:'Barlow Semi Condensed',system-ui,sans-serif;

  --wrap:1220px;
  --gutter:22px;
  --radius:3px;         /* sharp, broadcast-graphic feel */
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--serif);
  color:var(--text);
  background:var(--paper);
  line-height:1.5;
  font-size:17px;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}

/* ---- eyebrow / labels (data voice) ---- */
.eyebrow{
  font-family:var(--data);
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.13em;
  font-size:12.5px;
  color:var(--cherry);
}
.eyebrow--muted{color:var(--steel)}

/* ============================================================
   1 · DARK CHROME — masthead
   ============================================================ */
.chrome{background:var(--ink);color:#fff}
.masthead{
  display:flex;align-items:center;gap:20px;
  height:64px;
}
.burger{
  display:none;background:none;border:0;color:#fff;cursor:pointer;
  padding:8px;margin-left:-8px;
}
.burger span{display:block;width:22px;height:2px;background:#fff;margin:4px 0}
.logo{display:flex;align-items:center;gap:11px;margin-right:auto}
.logo__mark{
  width:34px;height:34px;border-radius:50%;
  background:
    radial-gradient(circle at 32% 30%, #ff6b63 0 12%, transparent 13%),
    var(--cherry);
  position:relative;flex:none;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.12);
}
/* seam of the cricket ball */
.logo__mark::after{
  content:"";position:absolute;inset:0;border-radius:50%;
  background:
    linear-gradient(90deg,transparent 48.4%,rgba(0,0,0,.28) 48.4%,rgba(0,0,0,.28) 51.6%,transparent 51.6%);
  transform:rotate(24deg);
}
.logo__type{font-family:var(--display);font-weight:900;font-size:20px;letter-spacing:-.02em;line-height:1}
.logo__type b{color:var(--cherry)}
.masthead__tools{display:flex;align-items:center;gap:6px}
.iconbtn{
  background:none;border:0;color:#cfd8e2;cursor:pointer;
  width:38px;height:38px;border-radius:var(--radius);
  display:grid;place-items:center;font-family:var(--data);font-weight:600;
}
.iconbtn:hover{background:var(--ink-2);color:#fff}
.iconbtn svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2}

/* ============================================================
   2 · SIGNATURE — broadcast live score bug
   ============================================================ */
.bug{
  background:linear-gradient(180deg,#0e2033,#0a1826);
  border-top:1px solid var(--ink-line);
  border-bottom:2px solid var(--cherry);
}
.bug__inner{
  display:flex;align-items:stretch;gap:0;
  overflow-x:auto;scrollbar-width:none;
}
.bug__inner::-webkit-scrollbar{display:none}
.bug__label{
  flex:none;display:flex;align-items:center;gap:8px;
  padding:0 18px 0 0;margin-right:4px;
  border-right:1px solid var(--ink-line);
  color:#fff;font-family:var(--data);font-weight:700;
  text-transform:uppercase;letter-spacing:.1em;font-size:12px;
}
.livedot{
  width:8px;height:8px;border-radius:50%;background:var(--turf);
  box-shadow:0 0 0 0 rgba(15,169,104,.6);
  animation:pulse 1.8s infinite;
}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(15,169,104,.55)}
  70%{box-shadow:0 0 0 7px rgba(15,169,104,0)}
  100%{box-shadow:0 0 0 0 rgba(15,169,104,0)}
}
.match{
  flex:none;display:flex;flex-direction:column;justify-content:center;
  gap:3px;padding:9px 18px;min-width:186px;
  border-right:1px solid var(--ink-line);
  color:#e7eef5;transition:background .15s;cursor:pointer;
}
.match:hover{background:var(--ink-2)}
.match__meta{
  font-family:var(--data);font-size:11px;letter-spacing:.06em;
  text-transform:uppercase;color:#7f93a6;display:flex;gap:6px;align-items:center;
}
.tag-live{color:var(--turf);font-weight:700}
.match__row{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.team{display:flex;align-items:center;gap:7px;font-family:var(--display);font-weight:700;font-size:14px}
.team .chip{width:9px;height:9px;border-radius:2px;flex:none}
.team.dim{opacity:.55;font-weight:600}
.score{font-family:var(--data);font-weight:700;font-size:15.5px;font-variant-numeric:tabular-nums;letter-spacing:.01em}
.score small{font-weight:500;color:#8ea1b2;font-size:12px}
.match__note{font-family:var(--data);font-size:11.5px;color:#9db0c2}
.bug__more{
  flex:none;display:flex;align-items:center;padding:0 16px;
  font-family:var(--data);font-weight:600;font-size:12px;letter-spacing:.06em;
  text-transform:uppercase;color:#9db0c2;
}
.bug__more:hover{color:#fff}

/* ============================================================
   3 · NAV
   ============================================================ */
.nav{background:var(--ink-2);border-bottom:1px solid var(--ink-line)}
.nav__inner{display:flex;align-items:center;gap:2px;overflow-x:auto;scrollbar-width:none}
.nav__inner::-webkit-scrollbar{display:none}
.nav a{
  flex:none;font-family:var(--data);font-weight:600;font-size:13.5px;
  letter-spacing:.05em;text-transform:uppercase;color:#c3cfdb;
  padding:12px 15px;border-bottom:2px solid transparent;white-space:nowrap;
}
.nav a:hover{color:#fff}
.nav a.on{color:#fff;border-bottom-color:var(--cherry)}
.nav a.ipl{color:#ffd7a1}

/* ============================================================
   4 · EDITORIAL ZONE
   ============================================================ */
main{padding:30px 0 46px}
.grid{
  display:grid;grid-template-columns:1fr 340px;gap:34px;align-items:start;
}

/* section heading */
.shead{display:flex;align-items:center;gap:12px;margin:0 0 16px}
.shead h2{font-family:var(--display);font-weight:800;font-size:15px;text-transform:uppercase;letter-spacing:.04em}
.shead .rule{height:2px;background:var(--ink);flex:1;opacity:.12}
.shead a.more{font-family:var(--data);font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--cherry)}

/* --- lead story --- */
.lead{margin-bottom:34px}
.lead__img{
  aspect-ratio:16/8.4;border-radius:var(--radius);overflow:hidden;
  background:linear-gradient(135deg,#1d3b56,#0c1a2b);position:relative;margin-bottom:16px;
}
.lead__img::after{
  content:"";position:absolute;inset:0;
  background:
    repeating-linear-gradient(115deg,rgba(255,255,255,.03) 0 2px,transparent 2px 26px),
    radial-gradient(circle at 78% 22%,rgba(224,50,43,.34),transparent 46%);
}
.imgtag{
  position:absolute;left:0;bottom:0;z-index:2;
  background:var(--cherry);color:#fff;font-family:var(--data);font-weight:700;
  text-transform:uppercase;letter-spacing:.08em;font-size:11.5px;padding:6px 11px;
}
.lead h1{
  font-family:var(--display);font-weight:800;line-height:1.03;letter-spacing:-.015em;
  font-size:clamp(1.9rem,3.4vw,2.9rem);margin:12px 0 10px;
}
.lead h1 a:hover{color:var(--cherry)}
.lead .dek{font-family:var(--serif);font-size:1.14rem;color:#38434f;line-height:1.55;max-width:60ch}
.byline{
  margin-top:14px;font-family:var(--data);font-size:12.5px;letter-spacing:.04em;
  text-transform:uppercase;color:var(--steel);display:flex;gap:10px;align-items:center;
}
.byline b{color:var(--text)}
.byline .dot{width:3px;height:3px;border-radius:50%;background:var(--steel)}

/* --- news grid --- */
.cards{display:grid;grid-template-columns:1fr 1fr;gap:26px 24px}
.card__img{
  aspect-ratio:16/10;border-radius:var(--radius);overflow:hidden;margin-bottom:11px;
  background:linear-gradient(135deg,#20415e,#0e2233);position:relative;
}
.card__img.g2{background:linear-gradient(135deg,#3a2140,#160c1c)}
.card__img.g3{background:linear-gradient(135deg,#173f38,#0a1c19)}
.card__img.g4{background:linear-gradient(135deg,#3d2a17,#1c130a)}
.card__img::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 74% 26%,rgba(255,255,255,.08),transparent 50%)}
.card .eyebrow{margin-bottom:7px;display:block}
.card h3{font-family:var(--display);font-weight:700;font-size:1.18rem;line-height:1.15;letter-spacing:-.01em}
.card h3 a:hover{color:var(--cherry)}
.card p{font-family:var(--serif);color:#48535f;font-size:.98rem;margin-top:7px;line-height:1.5}
.card .byline{margin-top:10px}

/* --- fantasy rail --- */
.fantasy{
  margin:40px 0;padding:24px;border-radius:var(--radius);
  background:var(--ink);color:#fff;position:relative;overflow:hidden;
}
.fantasy::after{
  content:"";position:absolute;right:-40px;top:-40px;width:220px;height:220px;
  background:radial-gradient(circle,rgba(224,50,43,.4),transparent 68%);
}
.fantasy__head{display:flex;align-items:center;gap:10px;margin-bottom:18px;position:relative;z-index:1}
.fantasy__head .pill{
  font-family:var(--data);font-weight:700;text-transform:uppercase;letter-spacing:.08em;
  font-size:11px;background:var(--cherry);color:#fff;padding:5px 9px;border-radius:2px;
}
.fantasy__head h2{font-family:var(--display);font-weight:800;font-size:16px;text-transform:uppercase;letter-spacing:.03em}
.fcards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;position:relative;z-index:1}
.fcard{border:1px solid var(--ink-line);border-radius:var(--radius);padding:15px}
.fcard .match__meta{color:#8ba0b3;margin-bottom:9px}
.fcard h4{font-family:var(--display);font-weight:700;font-size:1.02rem;line-height:1.2;margin-bottom:6px}
.fcard span{font-family:var(--serif);font-size:.9rem;color:#a9bacb}

/* ============================================================
   5 · SIDEBAR
   ============================================================ */
.side > *+*{margin-top:26px}
.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.panel__head{
  background:var(--ink);color:#fff;padding:12px 15px;
  font-family:var(--display);font-weight:800;font-size:13px;text-transform:uppercase;letter-spacing:.05em;
  display:flex;align-items:center;justify-content:space-between;
}
.panel__head .tabs{display:flex;gap:12px}
.panel__head .tabs b{color:var(--cherry);cursor:pointer}
.panel__head .tabs span{color:#7f93a6;cursor:pointer;font-weight:600}

/* featured match spotlight */
.spot{padding:0}
.spot__top{
  background:linear-gradient(180deg,#12263b,#0c1a2b);color:#fff;padding:15px 16px 16px;
}
.spot__series{font-family:var(--data);font-size:11.5px;letter-spacing:.07em;text-transform:uppercase;color:#8ba0b3;margin-bottom:12px;display:flex;justify-content:space-between}
.spot__team{display:flex;align-items:center;justify-content:space-between;padding:7px 0}
.spot__team .team{font-size:16px}
.spot__team .score{font-size:19px}
.spot__team+.spot__team{border-top:1px solid var(--ink-line)}
.spot__status{
  background:rgba(15,169,104,.12);color:#4fd6a0;border-top:1px solid var(--ink-line);
  font-family:var(--data);font-weight:600;font-size:12.5px;padding:10px 16px;text-align:center;letter-spacing:.03em;
}
.spot__cta{
  display:block;text-align:center;background:var(--cherry);color:#fff;
  font-family:var(--data);font-weight:700;text-transform:uppercase;letter-spacing:.08em;
  font-size:12.5px;padding:12px;
}
.spot__cta:hover{background:var(--cherry-dk)}

/* rankings / table rows */
.rows{padding:6px 0}
.row{
  display:grid;grid-template-columns:26px 1fr auto;gap:10px;align-items:center;
  padding:9px 15px;font-size:.94rem;
}
.row+.row{border-top:1px solid var(--line)}
.row .pos{font-family:var(--data);font-weight:700;color:var(--steel);font-size:14px;text-align:center}
.row .who{font-family:var(--display);font-weight:600;font-size:.96rem;display:flex;align-items:center;gap:8px}
.row .who .chip{width:9px;height:9px;border-radius:2px;flex:none}
.row .who small{font-family:var(--data);font-weight:500;color:var(--steel);font-size:12px}
.row .val{font-family:var(--data);font-weight:700;font-variant-numeric:tabular-nums}
.row.top .pos{color:var(--cherry)}
.panel__foot{
  padding:11px 15px;text-align:center;border-top:1px solid var(--line);
  font-family:var(--data);font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--cherry);
}

/* most read list */
.mostread{counter-reset:mr}
.mr{display:flex;gap:13px;padding:12px 15px;align-items:flex-start}
.mr+.mr{border-top:1px solid var(--line)}
.mr::before{
  counter-increment:mr;content:counter(mr);
  font-family:var(--display);font-weight:800;font-size:22px;color:var(--line);flex:none;line-height:.9;width:24px;
}
.mr h5{font-family:var(--display);font-weight:600;font-size:.98rem;line-height:1.22}
.mr:hover h5{color:var(--cherry)}

/* ============================================================
   6 · FOOTER
   ============================================================ */
.foot{background:var(--ink);color:#9db0c2;margin-top:10px;padding:40px 0 26px}
.foot__grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:30px;margin-bottom:30px}
.foot h6{font-family:var(--display);font-weight:800;color:#fff;text-transform:uppercase;letter-spacing:.05em;font-size:12px;margin-bottom:13px}
.foot a{display:block;font-family:var(--data);font-size:14px;padding:5px 0;color:#9db0c2}
.foot a:hover{color:#fff}
.foot__brand p{font-family:var(--serif);font-size:.95rem;color:#8ba0b3;margin-top:12px;max-width:34ch}
.foot__bar{border-top:1px solid var(--ink-line);padding-top:20px;display:flex;justify-content:space-between;font-family:var(--data);font-size:12.5px;letter-spacing:.03em;color:#6f8499;flex-wrap:wrap;gap:10px}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:960px){
  .grid{grid-template-columns:1fr;gap:40px}
  .fcards{grid-template-columns:1fr}
  .foot__grid{grid-template-columns:1fr 1fr}
}
@media(max-width:620px){
  body{font-size:16px}
  .burger{display:block}
  .nav{display:none}
  .cards{grid-template-columns:1fr;gap:24px}
  .foot__grid{grid-template-columns:1fr}
  .lead .dek{font-size:1.06rem}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}
:focus-visible{outline:3px solid var(--cherry);outline-offset:2px;border-radius:2px}

/* ============================================================
   ADDITIONS — article, match centre, comments, states, a11y
   (Homepage system is above; these extend it in the same voice.)
   ============================================================ */

/* ---- a11y utilities ---- */
.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:10px;left:10px;width:auto;height:auto;clip:auto;z-index:100;
  background:var(--cherry);color:#fff;padding:10px 16px;border-radius:var(--radius);
  font-family:var(--data);font-weight:700;
}

/* ---- mobile nav open + search bar ---- */
@media(max-width:620px){
  .nav.is-open{display:block}
  .nav.is-open .nav__inner{flex-direction:column;align-items:stretch}
  .nav.is-open .nav a{padding:13px 20px;border-bottom:1px solid var(--ink-line)}
}
.cc-searchbar{
  background:var(--ink-2);border-top:1px solid var(--ink-line);
  max-height:0;overflow:hidden;transition:max-height .25s ease;
}
.cc-searchbar.is-open{max-height:90px}
.cc-searchbar form{display:flex;gap:8px;padding:14px 0}
.cc-searchbar input{
  flex:1;background:var(--ink);border:1px solid var(--ink-line);color:#fff;
  border-radius:var(--radius);padding:11px 14px;font-family:var(--serif);font-size:15px;
}
.cc-searchbar input::placeholder{color:#6f8499}
.cc-searchbar button{
  background:var(--cherry);color:#fff;border:0;border-radius:var(--radius);cursor:pointer;
  font-family:var(--data);font-weight:700;text-transform:uppercase;letter-spacing:.06em;padding:0 20px;font-size:13px;
}

/* ============================================================
   ARTICLE
   ============================================================ */
.article__head{background:var(--ink);color:#fff;padding:30px 0 26px}
.article__head-inner{max-width:820px}
.article__head .eyebrow{display:inline-block;margin-bottom:14px}
.article__head h1{
  font-family:var(--display);font-weight:800;letter-spacing:-.015em;line-height:1.06;
  font-size:clamp(1.8rem,3.6vw,2.9rem);
}
.article__dek{
  font-family:var(--serif);font-size:1.2rem;color:#b9c6d3;line-height:1.5;margin-top:14px;max-width:62ch;
}
.article__meta{
  margin-top:18px;font-family:var(--data);font-size:12.5px;letter-spacing:.05em;text-transform:uppercase;
  color:#8ba0b3;display:flex;align-items:center;gap:10px;
}
.article__meta .a-author{color:#fff;font-weight:600}
.article__meta .dot{width:3px;height:3px;border-radius:50%;background:#5f7387}

.article__hero{margin:0 0 6px;background:var(--ink)}
.article__hero img{width:100%;display:block}
.article__hero .wrap{padding-top:0;padding-bottom:0}

.grid--article{grid-template-columns:minmax(0,1fr) 320px;padding-top:34px}

/* prose — the reading experience */
.prose{max-width:none;font-family:var(--serif);font-size:1.16rem;line-height:1.72;color:#25313d}
.prose > *+*{margin-top:1.15em}
.prose p{margin:0 0 1.15em}
.prose h2{font-family:var(--display);font-weight:800;font-size:1.55rem;line-height:1.15;letter-spacing:-.01em;margin:1.9em 0 .55em;color:var(--text)}
.prose h3{font-family:var(--display);font-weight:700;font-size:1.24rem;margin:1.6em 0 .5em;color:var(--text)}
.prose a{color:var(--cherry);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
.prose a:hover{text-decoration-thickness:2px}
.prose ul,.prose ol{padding-left:1.3em;margin:0 0 1.15em}
.prose li{margin:.35em 0}
.prose blockquote{
  border-left:3px solid var(--cherry);margin:1.6em 0;padding:.2em 0 .2em 22px;
  font-size:1.32rem;line-height:1.4;color:var(--text);font-style:italic;
}
.prose blockquote p{margin:0}
.prose img,.prose figure{border-radius:var(--radius);margin:1.6em 0}
.prose figcaption{font-family:var(--data);font-size:13px;color:var(--steel);margin-top:8px;text-align:center}
.prose code{font-family:ui-monospace,Menlo,monospace;background:#eef1f4;padding:2px 6px;border-radius:3px;font-size:.9em}
.prose hr{border:0;border-top:1px solid var(--line);margin:2em 0}
.prose strong{color:var(--text)}

.tags{margin-top:34px;padding-top:20px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:8px}
.tags a{
  font-family:var(--data);font-weight:600;font-size:12.5px;text-transform:uppercase;letter-spacing:.05em;
  background:#eef1f4;color:#43505c;padding:6px 12px;border-radius:var(--radius);
}
.tags a:hover{background:var(--ink);color:#fff}
.pagelinks{margin-top:24px;font-family:var(--data);font-weight:600;color:var(--steel)}

/* ============================================================
   MATCH CENTRE
   ============================================================ */
.mc-hero{background:linear-gradient(180deg,#12263b,#0a1826);color:#fff;padding:26px 0 24px;border-bottom:2px solid var(--cherry)}
.mc-hero__series{
  display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
  font-family:var(--data);font-size:13px;letter-spacing:.05em;text-transform:uppercase;color:#8ba0b3;margin-bottom:20px;
}
.mc-hero__status{display:inline-flex;align-items:center;gap:8px;font-weight:700;color:#9db0c2}
.mc-hero__status.is-live{color:var(--turf)}
.mc-hero__teams{display:flex;flex-wrap:wrap;gap:14px}
.mc-team{
  flex:1 1 260px;display:flex;align-items:center;gap:14px;
  background:rgba(255,255,255,.04);border:1px solid var(--ink-line);border-radius:var(--radius);padding:16px 18px;
}
.mc-team__badge{
  width:52px;height:52px;flex:none;border-radius:var(--radius);display:grid;place-items:center;
  font-family:var(--display);font-weight:800;font-size:15px;color:#fff;letter-spacing:.02em;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.15);
}
.mc-team__name{font-family:var(--display);font-weight:700;font-size:1.1rem;flex:1;line-height:1.15}
.mc-team__score{font-family:var(--data);font-weight:700;font-size:1.7rem;font-variant-numeric:tabular-nums;white-space:nowrap}
.mc-team__score small{font-size:1rem;color:#8ba0b3;font-weight:500}
.mc-hero__note{
  margin-top:16px;display:inline-block;background:rgba(15,169,104,.12);color:#4fd6a0;
  font-family:var(--data);font-weight:600;font-size:13.5px;padding:9px 16px;border-radius:var(--radius);
}

.mc-tabs-bar{background:var(--ink-2);border-bottom:1px solid var(--ink-line);position:sticky;top:0;z-index:20}
.mc-tabs{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none}
.mc-tabs::-webkit-scrollbar{display:none}
.mc-tab{
  flex:none;background:none;border:0;cursor:pointer;color:#c3cfdb;
  font-family:var(--data);font-weight:600;font-size:14px;letter-spacing:.05em;text-transform:uppercase;
  padding:14px 18px;border-bottom:2px solid transparent;white-space:nowrap;
}
.mc-tab:hover{color:#fff}
.mc-tab.on{color:#fff;border-bottom-color:var(--cherry)}

.mc-panel{padding-top:30px}
.mc-empty{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:38px 30px;text-align:center;
}
.mc-empty .eyebrow{display:inline-block;margin-bottom:12px}
.mc-empty h3{font-family:var(--display);font-weight:700;font-size:1.4rem;line-height:1.2;max-width:32ch;margin:0 auto 10px}
.mc-empty p{font-family:var(--serif);color:#55616d;max-width:52ch;margin:0 auto;line-height:1.55}
.mc-info{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.mc-info__row{display:flex;justify-content:space-between;gap:16px;padding:15px 20px;font-size:1rem}
.mc-info__row+.mc-info__row{border-top:1px solid var(--line)}
.mc-info__row span{font-family:var(--data);text-transform:uppercase;letter-spacing:.05em;font-size:13px;color:var(--steel)}
.mc-info__row b{font-family:var(--display);font-weight:600;text-align:right}

/* ============================================================
   COMMENTS + PAGINATION
   ============================================================ */
.comments{margin-top:44px}
.commentlist{list-style:none;padding:0;margin:0 0 30px}
.commentlist li{margin:0 0 18px}
.commentlist .comment-body{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px}
.commentlist .children{list-style:none;margin:16px 0 0 26px;padding:0}
.comment-author{font-family:var(--display);font-weight:700;font-size:.98rem;display:flex;align-items:center;gap:10px}
.comment-author .avatar{border-radius:50%}
.comment-metadata{font-family:var(--data);font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--steel);margin:4px 0 8px}
.comment-content{font-family:var(--serif);color:#2c3742;line-height:1.6}
.comment-respond{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:22px}
.comment-form label{display:block;font-family:var(--data);font-weight:600;text-transform:uppercase;letter-spacing:.05em;font-size:12.5px;color:var(--steel);margin:12px 0 6px}
.comment-form input[type=text],.comment-form input[type=email],.comment-form input[type=url],.comment-form textarea{
  width:100%;border:1px solid var(--line);border-radius:var(--radius);padding:11px 13px;
  font-family:var(--serif);font-size:1rem;background:#fff;color:var(--text);
}
.comment-form textarea{min-height:130px;resize:vertical}
.btn-submit,.comment-form input[type=submit]{
  background:var(--cherry);color:#fff;border:0;border-radius:var(--radius);cursor:pointer;margin-top:14px;
  font-family:var(--data);font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:13.5px;padding:12px 24px;
}
.btn-submit:hover,.comment-form input[type=submit]:hover{background:var(--cherry-dk)}

.pagination,.comments-pagination{margin-top:30px}
.page-numbers{
  display:inline-block;font-family:var(--data);font-weight:600;padding:9px 14px;margin:0 3px 3px 0;
  border:1px solid var(--line);border-radius:var(--radius);color:var(--text);background:#fff;
}
.page-numbers.current{background:var(--ink);color:#fff;border-color:var(--ink)}
a.page-numbers:hover{border-color:var(--cherry);color:var(--cherry)}

/* ============================================================
   DARK MODE (data-mode="dark" flips the editorial zone)
   Chrome is already dark; here we darken paper/cards/text.
   ============================================================ */
html[data-mode="dark"]{
  --paper:#0a1520;
  --card:#0f1e2c;
  --text:#e7eef5;
  --steel:#8397a8;
  --line:#1c3145;
}
html[data-mode="dark"] body{color:var(--text)}
html[data-mode="dark"] .lead .dek,
html[data-mode="dark"] .card p,
html[data-mode="dark"] .prose{color:#b9c6d3}
html[data-mode="dark"] .prose h2,
html[data-mode="dark"] .prose h3,
html[data-mode="dark"] .prose strong,
html[data-mode="dark"] .mc-info__row b{color:#eef4f9}
html[data-mode="dark"] .shead .rule{background:#fff;opacity:.14}
html[data-mode="dark"] .tags a,html[data-mode="dark"] .prose code{background:#16283a;color:#c3cfdb}
html[data-mode="dark"] .mc-empty p,html[data-mode="dark"] .comment-content{color:#aebccb}
html[data-mode="dark"] .comment-form input,html[data-mode="dark"] .comment-form textarea{background:#0a1520;color:var(--text)}
html[data-mode="dark"] .page-numbers{background:#0f1e2c}

/* respect users who prefer dark at the OS level, if no explicit choice */
@media(prefers-color-scheme:dark){
  html:not([data-mode="light"]):not([data-mode="dark"]){
    --paper:#0a1520;--card:#0f1e2c;--text:#e7eef5;--steel:#8397a8;--line:#1c3145;
  }
}

/* ---- wp_nav_menu list normalisation (menus output <ul><li>) ---- */
.nav__inner{list-style:none;margin:0;padding:0}
.nav__inner li{display:flex}
.nav__inner li a{flex:none}
.foot__menu ul,.foot__menu li{list-style:none;margin:0;padding:0}
.menu-item a{display:block}