/*
Theme Name: Motorwatts
Theme URI: https://motorwatts.example
Author: Motorwatts
Author URI: https://motorwatts.example
Description: A modern, energy-focused news theme built for Formula E journalism. Race reports, standings, and technical analysis, with an instrument-panel inspired data language and a signature "charge bar" element. Ships with custom post types for driver standings and the race calendar, a headline ticker, and a view-count powered trending sidebar.
Version: 1.1.0
Requires at least: 6.4
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: motorwatts
*/

/* ============ TOKENS ============ */
:root{
  --ink:#0A0E14;
  --ink-2:#0D1219;
  --panel:#141B27;
  --panel-2:#1A2130;
  --line:#242D3D;
  --line-soft:#1C2431;
  --white:#F5F7FA;
  --grey:#8B93A7;
  --grey-dim:#5C6579;
  --volt:#C6FF3D;
  --volt-dim:#8FBD1E;
  --circuit:#5B8CFF;
  --circuit-dim:#3D5FB0;
  --red:#FF5C5C;

  --f-display:'Space Grotesk', sans-serif;
  --f-body:'Inter', sans-serif;
  --f-mono:'JetBrains Mono', monospace;
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:var(--ink);
  color:var(--white);
  font-family:var(--f-body);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;height:auto;}
ul{list-style:none;}
button{font-family:inherit;}

:focus-visible{
  outline:2px solid var(--volt);
  outline-offset:3px;
}

.screen-reader-text{
  position:absolute !important;
  clip:rect(1px,1px,1px,1px);
  width:1px;height:1px;
  overflow:hidden;
  word-wrap:normal !important;
}

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

.wrap{
  max-width:1280px;
  margin:0 auto;
  padding:0 32px;
}

.eyebrow{
  font-family:var(--f-mono);
  font-size:11px;
  font-weight:600;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--grey);
}

.grid-bg{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background-image:
    linear-gradient(var(--line-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
  background-size:64px 64px;
  opacity:0.35;
  -webkit-mask-image:linear-gradient(to bottom, black, transparent 70%);
  mask-image:linear-gradient(to bottom, black, transparent 70%);
}

/* ============ CHARGE BAR (signature element) ============ */
.charge-bar{
  --pct:60%;
  position:relative;
  height:3px;
  width:100%;
  background:var(--line);
  overflow:hidden;
  border-radius:2px;
}
.charge-bar::after{
  content:'';
  position:absolute;
  left:0;top:0;bottom:0;
  width:var(--pct);
  background:linear-gradient(90deg, var(--circuit), var(--volt));
  border-radius:2px;
  transition:width 1.1s cubic-bezier(.16,.84,.44,1);
}
.charge-bar.full{--pct:100%;}
.charge-bar.mid{--pct:62%;}
.charge-bar.low{--pct:34%;}
.charge-bar[data-animate]::after{width:0;}

/* ============ HEADER ============ */
header.site-header{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(10,14,20,0.86);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line-soft);
}
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:18px 32px;
  gap:24px;
}
.logo{
  color:var(--white);
  display:flex;
  align-items:center;
  gap:10px;
  font-family:var(--f-display);
  font-weight:700;
  font-size:21px;
  letter-spacing:-0.01em;
  white-space:nowrap;
}
.logo-bolt{
  width:18px;height:18px;
  color:var(--volt);
  flex-shrink:0;
}
.logo b{color:var(--volt);font-weight:700;}
.custom-logo-link img{max-height:36px;width:auto;}

.main-nav{
  display:flex;
  align-items:center;
  gap:36px;
}
.main-nav ul{display:flex;align-items:center;gap:36px;}
.main-nav a{
  font-size:14px;
  font-weight:500;
  color:var(--grey);
  transition:color .18s ease;
  position:relative;
}
.main-nav a:hover{color:var(--white);}
.main-nav .current-menu-item > a,
.main-nav .current-menu-parent > a{color:var(--white);}
.main-nav .current-menu-item > a::after,
.main-nav .current-menu-parent > a::after{
  content:'';
  position:absolute;
  left:0;right:0;bottom:-19px;
  height:2px;
  background:var(--volt);
}

.header-actions{
  display:flex;
  align-items:center;
  gap:10px;
  position:relative;
}
.icon-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  width:38px;height:38px;
  border-radius:9px;
  border:1px solid var(--line);
  background:var(--panel);
  color:var(--grey);
  cursor:pointer;
  transition:color .18s ease, border-color .18s ease;
  flex-shrink:0;
}
.icon-btn:hover{color:var(--volt);border-color:rgba(198,255,61,0.35);}

.search-flyout{
  position:absolute;
  top:calc(100% + 10px);
  right:0;
  width:320px;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:12px;
  padding:14px;
  box-shadow:0 20px 40px rgba(0,0,0,0.4);
  opacity:0;
  visibility:hidden;
  transform:translateY(-6px);
  transition:opacity .18s ease, transform .18s ease, visibility .18s;
  z-index:60;
}
.search-flyout.is-active{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}
.mw-search-form{display:flex;gap:8px;}
.mw-search-field{
  flex:1;
  background:var(--ink);
  border:1px solid var(--line);
  border-radius:8px;
  padding:10px 12px;
  color:var(--white);
  font-family:var(--f-body);
  font-size:13.5px;
}
.mw-search-field:focus{outline:none;border-color:var(--circuit);}
.mw-search-submit{
  display:flex;align-items:center;justify-content:center;
  width:38px;height:38px;
  border-radius:8px;
  border:none;
  background:var(--volt);
  color:var(--ink);
  cursor:pointer;
  flex-shrink:0;
}

.nav-toggle{display:none;}

/* ============ SEASON SNAPSHOT STRIP ============ */
.snapshot-strip{
  border-bottom:1px solid var(--line-soft);
  background:linear-gradient(180deg, rgba(91,140,255,0.05), transparent);
  position:relative;
  z-index:1;
}
.snapshot-inner{
  display:flex;
  align-items:center;
  gap:0;
  padding:14px 32px;
  overflow-x:auto;
  scrollbar-width:none;
}
.snapshot-inner::-webkit-scrollbar{display:none;}
.snapshot-item{
  display:flex;
  flex-direction:column;
  gap:3px;
  padding:0 28px;
  border-right:1px solid var(--line-soft);
  white-space:nowrap;
}
.snapshot-item:first-child{padding-left:0;}
.snapshot-item:last-child{border-right:none;}
.snapshot-label{
  font-family:var(--f-mono);
  font-size:10px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--grey-dim);
}
.snapshot-value{
  font-family:var(--f-mono);
  font-size:14px;
  font-weight:600;
  color:var(--white);
}
.snapshot-value.volt{color:var(--volt);}
.snapshot-value.circuit-c{color:var(--circuit);}

/* ============ HERO ============ */
.hero{
  position:relative;
  z-index:1;
  padding:56px 0 64px;
  border-bottom:1px solid var(--line-soft);
}
.hero-grid{
  display:grid;
  grid-template-columns:1.15fr 0.85fr;
  gap:56px;
  align-items:start;
}
.hero-tag{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-bottom:20px;
}
.hero-tag .dot{
  width:6px;height:6px;
  border-radius:50%;
  background:var(--red);
  animation:pulse-dot 1.8s ease-out infinite;
  flex-shrink:0;
}
@keyframes pulse-dot{
  0%{box-shadow:0 0 0 0 rgba(255,92,92,0.55);}
  70%{box-shadow:0 0 0 8px rgba(255,92,92,0);}
  100%{box-shadow:0 0 0 0 rgba(255,92,92,0);}
}
.hero h1{
  color:var(--white);
  font-family:var(--f-display);
  font-size:clamp(34px, 4.6vw, 58px);
  line-height:1.03;
  font-weight:700;
  letter-spacing:-0.02em;
  margin-bottom:20px;
}
.hero h1 a{transition:color .15s ease;}
.hero h1 a:hover{color:var(--volt);}
.hero-standfirst{
  font-size:17px;
  line-height:1.6;
  color:var(--grey);
  max-width:52ch;
  margin-bottom:28px;
}
.hero-meta{
  display:flex;
  align-items:center;
  gap:16px;
  margin-bottom:22px;
  font-size:13px;
  color:var(--grey-dim);
  flex-wrap:wrap;
}
.byline-avatar{
  width:26px;height:26px;
  border-radius:50%;
  background:linear-gradient(135deg, var(--circuit), var(--volt));
  flex-shrink:0;
  overflow:hidden;
}
.byline-avatar img{width:100%;height:100%;object-fit:cover;}
.hero .charge-bar{max-width:340px;margin-bottom:10px;}
.charge-caption{
  font-family:var(--f-mono);
  font-size:11px;
  color:var(--grey-dim);
  letter-spacing:0.04em;
}

.hero-media{
  position:relative;
  border-radius:18px;
  overflow:hidden;
  aspect-ratio:4/5;
  background:var(--panel);
  border:1px solid var(--line);
}
.hero-media img{
  width:100%;height:100%;
  object-fit:cover;
}
.hero-media::after{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, transparent 40%, rgba(10,14,20,0.92) 100%);
}
.hero-media-cap{
  position:absolute;
  left:20px;right:20px;bottom:18px;
  z-index:2;
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
}
.hero-media-cap .name{
  color:var(--white);
  font-family:var(--f-display);
  font-weight:600;
  font-size:16px;
}
.hero-media-cap .role{
  font-family:var(--f-mono);
  font-size:11px;
  color:var(--grey);
}

/* ============ SECTION HEADER ============ */
.section{
  position:relative;
  z-index:1;
  padding:64px 0;
  border-bottom:1px solid var(--line-soft);
}
.section-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  margin-bottom:32px;
  gap:24px;
}
.section-title{
  color:var(--white);
  font-family:var(--f-display);
  font-size:28px;
  font-weight:700;
  letter-spacing:-0.01em;
}
.section-link{
  font-family:var(--f-mono);
  font-size:12px;
  font-weight:600;
  color:var(--circuit);
  letter-spacing:0.04em;
  white-space:nowrap;
  display:flex;
  align-items:center;
  gap:6px;
  transition:gap .18s ease;
}
.section-link:hover{gap:10px;}

/* ============ STORY GRID / CARD ============ */
.story-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:28px;
}
.story-grid.cols-2{grid-template-columns:repeat(2, 1fr);}
.story-card{
  display:flex;
  flex-direction:column;
  border-radius:14px;
  overflow:hidden;
  background:var(--panel);
  border:1px solid var(--line);
  transition:transform .22s ease, border-color .22s ease;
}
.story-card:hover{
  transform:translateY(-3px);
  border-color:rgba(91,140,255,0.4);
}
.story-thumb{
  aspect-ratio:16/10;
  overflow:hidden;
  position:relative;
  background:var(--panel-2);
}
.story-thumb img{
  width:100%;height:100%;
  object-fit:cover;
  transition:transform .5s ease;
}
.story-card:hover .story-thumb img{transform:scale(1.045);}
.no-thumb{
  width:100%;height:100%;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg, var(--panel-2), var(--ink-2));
}
.no-thumb svg{width:28px;height:28px;color:var(--line);}
.story-cat{
  position:absolute;
  top:12px;left:12px;
  font-family:var(--f-mono);
  font-size:10px;
  font-weight:700;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--ink);
  background:var(--volt);
  padding:5px 9px;
  border-radius:5px;
  z-index:2;
}
.story-body{
  padding:18px 20px 20px;
  display:flex;
  flex-direction:column;
  gap:12px;
  flex:1;
}
.story-body h3{
  color:var(--white);
  font-family:var(--f-display);
  font-size:18px;
  font-weight:600;
  line-height:1.3;
  letter-spacing:-0.005em;
}
.story-body h3 a:hover{color:var(--volt);}
.story-excerpt{
  font-size:13.5px;
  color:var(--grey);
  line-height:1.55;
  flex:1;
}
.story-foot{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-top:4px;
}
.story-foot-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-family:var(--f-mono);
  font-size:10.5px;
  color:var(--grey-dim);
  letter-spacing:0.03em;
}

/* ============ STANDINGS LEDGER ============ */
.standings-wrap{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:16px;
  overflow:hidden;
}
.standings-head-row{
  display:grid;
  grid-template-columns:52px 1fr 100px 100px 90px;
  padding:16px 24px;
  border-bottom:1px solid var(--line);
  font-family:var(--f-mono);
  font-size:10.5px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--grey-dim);
}
.standings-row{
  display:grid;
  grid-template-columns:52px 1fr 100px 100px 90px;
  align-items:center;
  padding:16px 24px;
  border-bottom:1px solid var(--line-soft);
  transition:background .15s ease;
}
.standings-row:last-child{border-bottom:none;}
.standings-row:hover{background:rgba(91,140,255,0.05);}
.standings-row.p1{background:rgba(198,255,61,0.045);}
.pos{
  font-family:var(--f-mono);
  font-weight:700;
  font-size:16px;
  color:var(--grey-dim);
}
.standings-row.p1 .pos{color:var(--volt);}
.driver-cell{
  display:flex;
  align-items:center;
  gap:12px;
}
.team-swatch{
  width:4px;height:32px;
  border-radius:2px;
  flex-shrink:0;
}
.driver-name{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  color:var(--white);
  font-family:var(--f-display);
  font-weight:600;
  font-size:15px;
}
.driver-team{
  font-size:12px;
  color:var(--grey-dim);
}
.standings-row .num-cell{
  color:var(--white);
  font-family:var(--f-mono);
  font-size:14px;
  font-weight:600;
  text-align:right;
  padding-right:8px;
}
.pts{color:var(--white);font-size:16px;}
.delta-up{color:var(--volt);}
.delta-down{color:var(--red);}
.delta-flat{color:var(--grey-dim);}

/* ============ CHAMPIONSHIP WREATHS ============ */
.wreath{
  display:inline-flex;
  align-items:center;
  gap:4px;
  font-family:var(--f-mono);
  font-size:9.5px;
  font-weight:700;
  padding:2px 5px;
  border-radius:4px;
  margin-left:8px;
  border:1px solid;
}
.wreath svg{width:10px;height:10px;}
.wreath-silver{
  color:#C0C0C0;
  border-color:rgba(192,192,192,0.3);
  background:rgba(192,192,192,0.05);
}
.wreath-gold{
  color:#FFD700;
  border-color:rgba(255,215,0,0.3);
  background:rgba(255,215,0,0.05);
}

/* ============ HEADLINES TICKER ============ */
.ticker-section{
  padding:0;
  border-bottom:1px solid var(--line-soft);
  background:var(--panel);
  overflow:hidden;
  position:relative;
  z-index:1;
}
.ticker-inner{
  display:flex;
  align-items:center;
  gap:0;
}
.ticker-label{
  flex-shrink:0;
  display:flex;
  align-items:center;
  gap:8px;
  padding:13px 24px;
  background:var(--volt);
  color:var(--ink);
  font-family:var(--f-mono);
  font-size:11px;
  font-weight:700;
  letter-spacing:0.08em;
  white-space:nowrap;
  z-index:2;
}
.ticker-track{
  display:flex;
  gap:48px;
  white-space:nowrap;
  animation:ticker-scroll 32s linear infinite;
  padding:13px 0;
  font-family:var(--f-mono);
  font-size:13px;
  color:var(--grey);
}
.ticker-track a{transition:color .15s ease;}
.ticker-track a:hover{color:var(--volt);}
.ticker-track span.cat{color:var(--circuit);}
@keyframes ticker-scroll{
  0%{transform:translateX(0);}
  100%{transform:translateX(-50%);}
}

/* ============ TWO-COL: LATEST + SIDEBAR ============ */
.split-grid{
  display:grid;
  grid-template-columns:1fr 340px;
  gap:48px;
}
.list-story{
  display:grid;
  grid-template-columns:150px 1fr;
  gap:20px;
  padding:20px 0;
  border-bottom:1px solid var(--line-soft);
}
.list-story:first-child{padding-top:0;}
.list-story:last-child{border-bottom:none;}
.list-thumb{
  aspect-ratio:4/3;
  border-radius:10px;
  overflow:hidden;
  background:var(--panel-2);
}
.list-thumb img{width:100%;height:100%;object-fit:cover;}
.list-body h4{
  color:var(--white);
  font-family:var(--f-display);
  font-size:17px;
  font-weight:600;
  line-height:1.35;
  margin-bottom:8px;
}
.list-body h4 a:hover{color:var(--volt);}
.list-body p{
  font-size:13px;
  color:var(--grey);
  line-height:1.55;
  margin-bottom:10px;
}
.list-meta{
  display:flex;
  gap:14px;
  align-items:center;
  font-family:var(--f-mono);
  font-size:10.5px;
  color:var(--grey-dim);
  flex-wrap:wrap;
}

.side-panel{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:14px;
  padding:24px;
  height:fit-content;
  position:sticky;
  top:100px;
}
.side-title{
  color:var(--white);
  font-family:var(--f-display);
  font-size:15px;
  font-weight:700;
  margin-bottom:18px;
  display:flex;
  align-items:center;
  gap:8px;
}
.side-title::before{
  content:'';
  width:3px;height:14px;
  background:var(--volt);
  border-radius:2px;
}
.side-item{
  display:flex;
  gap:14px;
  padding:14px 0;
  border-bottom:1px solid var(--line-soft);
}
.side-item:last-child{border-bottom:none;padding-bottom:0;}
.side-rank{
  font-family:var(--f-mono);
  font-size:20px;
  font-weight:700;
  color:var(--line);
  flex-shrink:0;
  width:24px;
}
.side-item h5{
  color:var(--white);
  font-size:13.5px;
  font-weight:600;
  line-height:1.4;
  margin-bottom:4px;
}
.side-item h5 a:hover{color:var(--volt);}
.side-item span{
  font-family:var(--f-mono);
  font-size:10.5px;
  color:var(--grey-dim);
}

.track-widget{
  margin-top:24px;
  padding-top:24px;
  border-top:1px solid var(--line-soft);
}
.track-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:9px 0;
  font-size:12.5px;
}
.track-row .k{color:var(--grey-dim);font-family:var(--f-mono);font-size:10.5px;letter-spacing:0.05em;text-transform:uppercase;}
.track-row .v{font-family:var(--f-mono);font-weight:600;color:var(--white);}

.widget{margin-top:24px;padding-top:24px;border-top:1px solid var(--line-soft);}
.widget:first-child{margin-top:0;padding-top:0;border-top:none;}
.widget ul{display:flex;flex-direction:column;gap:10px;}
.widget a{font-size:13px;color:var(--grey);}
.widget a:hover{color:var(--volt);}

/* ============ MEMORIAL ============ */
.memorial-section{
  position:relative;
  z-index:1;
  padding:40px 0;
  text-align:center;
  border-bottom:1px solid var(--line-soft);
  background:rgba(10,14,20,0.4);
}
.memorial-section p{
  font-family:var(--f-mono);
  font-size:13.5px;
  color:var(--grey-dim);
  letter-spacing:0.04em;
  margin:0;
}

/* ============ FOOTER ============ */
footer.site-footer{
  position:relative;
  z-index:1;
  padding:56px 0 32px;
}
.footer-grid{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1fr;
  gap:40px;
  padding-bottom:40px;
  border-bottom:1px solid var(--line-soft);
}
.footer-brand .logo{margin-bottom:14px;}
.footer-brand p{
  color:var(--grey-dim);
  font-size:13px;
  line-height:1.6;
  max-width:32ch;
}
.footer-col h6{
  font-family:var(--f-mono);
  font-size:11px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--grey-dim);
  margin-bottom:16px;
}
.footer-col ul{display:flex;flex-direction:column;gap:12px;}
.footer-col a{
  display:block;
  font-size:13.5px;
  color:var(--grey);
  transition:color .15s ease;
}
.footer-col a:hover{color:var(--volt);}
.footer-bottom{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding-top:24px;
  font-family:var(--f-mono);
  font-size:11px;
  color:var(--grey-dim);
  flex-wrap:wrap;
  gap:10px;
}

/* ============ FOOTER TAGS CSS ============ */
.footer-col .tagcloud{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.footer-col .tagcloud a{
  font-family:var(--f-mono);
  font-size:11px !important; /* Force override WP inline defaults */
  color:var(--grey);
  border:1px solid var(--line);
  padding:6px 12px;
  border-radius:100px;
  transition:color .15s ease, border-color .15s ease;
  line-height:1;
}
.footer-col .tagcloud a:hover{
  color:var(--volt);
  border-color:rgba(198,255,61,0.35);
}

/* ============ SINGLE ARTICLE ============ */
.article-header{
  padding:48px 0 36px;
  border-bottom:1px solid var(--line-soft);
}
.article-header h1{
  color:var(--white);
  font-family:var(--f-display);
  font-size:clamp(30px,4.4vw,48px);
  font-weight:700;
  line-height:1.08;
  letter-spacing:-0.02em;
  margin:16px 0 20px;
  max-width:26ch;
}
.article-standfirst{
  font-size:16px;
  color:var(--grey);
  max-width:60ch;
  line-height:1.6;
  margin-bottom:22px;
}
.article-hero-media{
  border-radius:16px;
  overflow:hidden;
  aspect-ratio:16/8;
  margin:36px 0;
  border:1px solid var(--line);
  background:var(--panel);
}
.article-hero-media img{width:100%;height:100%;object-fit:cover;}
.article-body-wrap{padding:48px 0;}
.entry-content{
  max-width:70ch;
  font-size:16.5px;
  line-height:1.75;
  color:var(--white);
}
.entry-content > *:first-child{margin-top:0;}
.entry-content p{margin-bottom:22px;}
.entry-content h2{
  color:var(--white);
  font-family:var(--f-display);
  font-size:26px;
  font-weight:700;
  margin:40px 0 18px;
  letter-spacing:-0.01em;
}
.entry-content h3{
  color:var(--white);
  font-family:var(--f-display);
  font-size:21px;
  font-weight:600;
  margin:32px 0 14px;
}
.entry-content a{color:var(--circuit);text-decoration:underline;text-underline-offset:3px;}
.entry-content a:hover{color:var(--volt);}
.entry-content ul,.entry-content ol{margin:0 0 22px 22px;}
.entry-content li{margin-bottom:8px;color:var(--white);}
.entry-content blockquote{
  border-left:3px solid var(--volt);
  padding:4px 0 4px 22px;
  margin:28px 0;
  font-family:var(--f-display);
  font-size:19px;
  font-weight:500;
  color:var(--white);
  line-height:1.5;
}
.entry-content img{border-radius:12px;margin:28px 0;}
.entry-content figcaption{
  font-family:var(--f-mono);
  font-size:11.5px;
  color:var(--grey-dim);
  margin-top:-16px;
  margin-bottom:28px;
}
.entry-content code{
  color:var(--white);
  font-family:var(--f-mono);
  background:var(--panel-2);
  padding:2px 6px;
  border-radius:4px;
  font-size:0.9em;
}
.entry-content hr{border:none;border-top:1px solid var(--line);margin:36px 0;}

.article-tags{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:36px;
  padding-top:28px;
  border-top:1px solid var(--line-soft);
  max-width:70ch;
}
.article-tags a{
  font-family:var(--f-mono);
  font-size:11px;
  color:var(--grey);
  border:1px solid var(--line);
  padding:6px 12px;
  border-radius:100px;
}
.article-tags a:hover{color:var(--volt);border-color:rgba(198,255,61,0.35);}

.author-box{
  display:flex;
  gap:16px;
  align-items:flex-start;
  max-width:70ch;
  margin-top:36px;
  padding:24px;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:14px;
}
.author-box .byline-avatar{width:48px;height:48px;flex-shrink:0;}
.author-box h6{
  color:var(--white);font-family:var(--f-display);font-size:15px;margin-bottom:6px;}
.author-box p{font-size:13px;color:var(--grey);line-height:1.6;}

.related-wrap{margin-top:56px;max-width:70ch;}

/* ============ ARCHIVE / SEARCH HEADERS ============ */
.archive-header{
  padding:48px 0 32px;
  border-bottom:1px solid var(--line-soft);
}
.archive-header .eyebrow{margin-bottom:12px;display:block;}
.archive-header h1{
  color:var(--white);
  font-family:var(--f-display);
  font-size:clamp(28px,4vw,42px);
  font-weight:700;
  letter-spacing:-0.015em;
}
.archive-header .archive-desc{
  color:var(--grey);
  margin-top:12px;
  max-width:60ch;
  font-size:15px;
}

/* ============ PAGINATION ============ */
.pagination,
.nav-links{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:40px;
  flex-wrap:wrap;
}
.pagination .page-numbers,
.nav-links .page-numbers{
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:38px;
  height:38px;
  padding:0 10px;
  border-radius:8px;
  border:1px solid var(--line);
  font-family:var(--f-mono);
  font-size:13px;
  color:var(--grey);
  background:var(--panel);
  transition:border-color .15s ease, color .15s ease;
}
.pagination .page-numbers:hover,
.nav-links .page-numbers:hover{color:var(--white);border-color:var(--circuit);}
.pagination .page-numbers.current,
.nav-links .page-numbers.current{
  background:var(--volt);
  color:var(--ink);
  border-color:var(--volt);
  font-weight:700;
}
.pagination .page-numbers.dots,
.nav-links .page-numbers.dots{border:none;background:none;}

/* ============ COMMENTS ============ */
.comments-wrap{max-width:70ch;margin-top:56px;padding-top:40px;border-top:1px solid var(--line-soft);}
.comments-title{
  color:var(--white);font-family:var(--f-display);font-size:22px;font-weight:700;margin-bottom:28px;}
.comment-list{list-style:none;}
.comment-list ul.children{list-style:none;margin-left:36px;margin-top:20px;}
.comment-body{
  display:flex;
  gap:14px;
  padding:20px 0;
  border-bottom:1px solid var(--line-soft);
}
.comment-avatar{width:38px;height:38px;border-radius:50%;flex-shrink:0;overflow:hidden;}
.comment-avatar img{width:100%;height:100%;object-fit:cover;}
.comment-meta{display:flex;align-items:baseline;gap:10px;margin-bottom:6px;flex-wrap:wrap;}
.comment-author{
  color:var(--white);font-family:var(--f-display);font-weight:600;font-size:14px;}
.comment-date{font-family:var(--f-mono);font-size:11px;color:var(--grey-dim);}
.comment-text p{font-size:14px;color:var(--grey);line-height:1.6;margin-bottom:8px;}
.comment-reply-link{
  font-family:var(--f-mono);
  font-size:10.5px;
  color:var(--circuit);
  letter-spacing:0.04em;
  text-transform:uppercase;
}
.comment-reply-link:hover{color:var(--volt);}
.comment-awaiting-moderation{
  font-family:var(--f-mono);
  font-size:11px;
  color:var(--volt);
  display:block;
  margin-bottom:8px;
}

.comment-respond{margin-top:36px;}
.comment-reply-title{
  color:var(--white);font-family:var(--f-display);font-size:18px;font-weight:700;margin-bottom:18px;}
.comment-form p{margin-bottom:14px;}
.comment-form label{
  display:block;
  font-family:var(--f-mono);
  font-size:11px;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--grey-dim);
  margin-bottom:8px;
}
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea{
  width:100%;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:9px;
  padding:12px 14px;
  color:var(--white);
  font-family:var(--f-body);
  font-size:14px;
}
.comment-form textarea{min-height:120px;resize:vertical;}
.comment-form input:focus,
.comment-form textarea:focus{outline:none;border-color:var(--circuit);}
.comment-form .form-submit input{
  width:auto;
  background:var(--volt);
  color:var(--ink);
  border:none;
  font-weight:700;
  cursor:pointer;
  padding:13px 24px;
}

/* ============ 404 ============ */
.error-404-wrap{
  padding:100px 0;
  text-align:center;
}
.error-404-wrap .code{
  font-family:var(--f-mono);
  font-size:14px;
  color:var(--grey-dim);
  letter-spacing:0.1em;
  margin-bottom:18px;
}
.error-404-wrap h1{
  color:var(--white);
  font-family:var(--f-display);
  font-size:clamp(32px,5vw,52px);
  font-weight:700;
  margin-bottom:16px;
}
.error-404-wrap p{color:var(--grey);max-width:44ch;margin:0 auto 32px;}
.error-404-wrap .charge-bar{max-width:280px;margin:0 auto 40px;}
.error-404-wrap .mw-search-form{max-width:420px;margin:0 auto;}

/* ============ CALENDAR PAGE ============ */
.calendar-list{display:flex;flex-direction:column;gap:14px;}
.calendar-row{
  display:grid;
  grid-template-columns:90px 1fr auto;
  align-items:center;
  gap:20px;
  padding:20px 24px;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:12px;
}
.calendar-row.is-next{border-color:rgba(198,255,61,0.4);background:rgba(198,255,61,0.045);}
.calendar-date{font-family:var(--f-mono);text-align:center;}
.calendar-date .d{font-size:22px;font-weight:700;color:var(--white);line-height:1;}
.calendar-date .m{font-size:11px;color:var(--grey-dim);text-transform:uppercase;letter-spacing:0.06em;}
.calendar-info h4{
  color:var(--white);font-family:var(--f-display);font-size:17px;font-weight:600;margin-bottom:4px;}
.calendar-info span{font-family:var(--f-mono);font-size:11.5px;color:var(--grey-dim);}
.calendar-status{
  font-family:var(--f-mono);
  font-size:10px;
  font-weight:700;
  letter-spacing:0.08em;
  text-transform:uppercase;
  padding:6px 12px;
  border-radius:100px;
  white-space:nowrap;
}
.calendar-status.next{background:var(--volt);color:var(--ink);}
.calendar-status.upcoming{background:var(--panel-2);color:var(--grey);border:1px solid var(--line);}
.calendar-status.done{background:transparent;color:var(--grey-dim);border:1px solid var(--line);}

/* ============ PAGE (generic) ============ */
.page-content-wrap{padding:56px 0;max-width:70ch;}
.page-content-wrap h1{
  color:var(--white);
  font-family:var(--f-display);
  font-size:clamp(28px,4vw,42px);
  font-weight:700;
  margin-bottom:24px;
  letter-spacing:-0.015em;
}

/* ============ STANDINGS TABS ============ */
.standings-tabs{
  display:flex;
  gap:4px;
  margin-bottom:28px;
  border-bottom:1px solid var(--line);
  flex-wrap:wrap;
}
.tab-btn{
  background:none;
  border:none;
  padding:12px 20px;
  font-family:var(--f-mono);
  font-size:12.5px;
  font-weight:600;
  letter-spacing:0.04em;
  text-transform:uppercase;
  color:var(--grey-dim);
  cursor:pointer;
  border-bottom:2px solid transparent;
  margin-bottom:-1px;
  transition:color .15s ease, border-color .15s ease;
}
.tab-btn:hover{color:var(--white);}
.tab-btn.is-active{color:var(--volt);border-bottom-color:var(--volt);}

/* ============ SESSION LIST (race weekend schedule) ============ */
.session-list{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin-top:14px;
  padding-top:14px;
  border-top:1px solid var(--line-soft);
}
.session-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-family:var(--f-mono);
  font-size:11.5px;
  color:var(--grey-dim);
  padding:2px 0;
}
.session-row .session-label{color:var(--grey);}
.session-row .session-time{color:var(--white);font-weight:600;}
.session-row.is-next-session{color:var(--volt);}
.session-row.is-next-session .session-label,
.session-row.is-next-session .session-time{color:var(--volt);}

/* ============ COUNTDOWN WIDGET ============ */
.countdown-widget{
  background:var(--panel);
  border:1px solid rgba(198,255,61,0.35);
  border-radius:14px;
  padding:22px 24px;
  background-image:radial-gradient(ellipse 80% 100% at 50% 0%, rgba(198,255,61,0.07), transparent);
}
.countdown-label{
  font-family:var(--f-mono);
  font-size:10.5px;
  font-weight:700;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--volt);
  margin-bottom:6px;
}
.countdown-session{
  font-family:var(--f-display);
  font-size:16px;
  font-weight:600;
  color:var(--white);
  margin-bottom:16px;
}
.countdown-clock{
  display:flex;
  gap:16px;
}
.countdown-unit{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2px;
  flex:1;
}
.countdown-num{
  font-family:var(--f-mono);
  font-size:26px;
  font-weight:700;
  color:var(--white);
  line-height:1;
}
.countdown-caption{
  font-family:var(--f-mono);
  font-size:9.5px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--grey-dim);
}
.countdown-done-message{
  font-family:var(--f-mono);
  font-size:12.5px;
  color:var(--grey);
}
.countdown-widget.is-compact{padding:18px 20px;}
.countdown-widget.is-compact .countdown-session{font-size:14px;margin-bottom:14px;}
.countdown-widget.is-compact .countdown-num{font-size:21px;}
.countdown-widget.is-compact .countdown-clock{gap:10px;}

/* ============ RESPONSIVE ============ */
@media (max-width:980px){
  .hero-grid{grid-template-columns:1fr;}
  .hero-media{aspect-ratio:16/9;}
  .story-grid{grid-template-columns:1fr 1fr;}
  .split-grid{grid-template-columns:1fr;}
  .side-panel{position:static;}
  .footer-grid{grid-template-columns:1fr 1fr;}
  .calendar-row{grid-template-columns:70px 1fr;}
  .calendar-status{grid-column:1/-1;justify-self:start;}
}

@media (max-width:720px){
  .wrap{padding:0 20px;}
  .header-inner{padding:14px 20px;}
  .main-nav{
    display:none;
    position:fixed;
    top:64px;left:0;right:0;
    background:var(--ink-2);
    border-bottom:1px solid var(--line);
    flex-direction:column;
    align-items:flex-start;
    gap:0;
    padding:8px 20px 16px;
    z-index:49;
    max-height:calc(100vh - 64px);
    overflow-y:auto;
  }
  .main-nav.is-open{display:flex;}
  .main-nav ul{flex-direction:column;align-items:flex-start;gap:0;width:100%;}
  .main-nav a{padding:12px 0;width:100%;border-bottom:1px solid var(--line-soft);display:block;}
  .main-nav .current-menu-item > a::after{display:none;}
  .nav-toggle{
    display:flex;
    align-items:center;
    justify-content:center;
    width:36px;height:36px;
    background:none;
    border:1px solid var(--line);
    border-radius:8px;
    color:var(--white);
    cursor:pointer;
  }
  .search-flyout{width:calc(100vw - 40px);right:-4px;}
  .snapshot-inner{padding:12px 20px;}
  .snapshot-item{padding:0 18px;}
  .story-grid{grid-template-columns:1fr;}
  .story-grid.cols-2{grid-template-columns:1fr;}
  .list-story{grid-template-columns:110px 1fr;gap:14px;}
  .footer-grid{grid-template-columns:1fr;gap:32px;}
  .footer-bottom{flex-direction:column;gap:10px;align-items:flex-start;}
  .section-head{flex-direction:column;align-items:flex-start;gap:10px;}
  .standings-head-row,.standings-row{grid-template-columns:36px 1fr 70px;}
  .standings-head-row span:nth-child(4),.standings-head-row span:nth-child(5),
  .standings-row .num-cell:nth-of-type(2),.standings-row .num-cell:nth-of-type(3){display:none;}
  .comment-list ul.children{margin-left:16px;}
  .countdown-clock{gap:8px;}
  .countdown-num{font-size:20px;}
  .calendar-info .session-list{gap:4px;}
  .session-row{font-size:10.5px;flex-wrap:wrap;}
}