/* ==========================================================================
   Drive Thru Deals - articles
   Shared chrome only: tokens, masthead, footer, and the base reading column.
   Each article is free to add its own structural CSS in a <style> block -
   the pieces are deliberately not built to one template.
   ========================================================================== */

:root{
  --navy-900:#000B22;
  --navy-850:#00102E;
  --navy-800:#00163A;
  --navy-700:#001E46;
  --navy-600:#00295F;
  --line:rgba(255,255,255,.10);
  --line-2:rgba(255,255,255,.18);
  --white:#FAFAFA;
  --muted:#9FB3D0;
  --faint:#6F86A8;
  --lime:#64DC3C;
  --lime-ink:#0B3F00;
  --blue:#0078FA;
  --disp:'Outfit',system-ui,-apple-system,sans-serif;
  --body:'Inter',system-ui,-apple-system,sans-serif;
  --gut:20px;
  --ease:cubic-bezier(.16,1,.3,1);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; overflow-x:clip; scroll-behavior:smooth}
body{
  margin:0; background:var(--navy-900); color:var(--white);
  font-family:var(--body); font-size:17px; line-height:1.68;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
a{color:var(--lime); text-underline-offset:3px}
::selection{background:var(--lime); color:var(--lime-ink)}

/* ---------- masthead ---------- */
.mast{
  position:sticky; top:0; z-index:40;
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding:11px var(--gut);
  padding-top:calc(11px + env(safe-area-inset-top));
  background:rgba(0,11,34,.86);
  backdrop-filter:saturate(160%) blur(16px);
  -webkit-backdrop-filter:saturate(160%) blur(16px);
  border-bottom:1px solid var(--line);
}
.mast img{width:124px; height:auto}
.mast nav{display:flex; gap:18px; align-items:center}
.mast nav a{
  font-size:13.5px; font-weight:500; color:var(--muted);
  text-decoration:none; transition:color .2s;
}
.mast nav a:hover{color:var(--white)}
.mast .cta{
  display:none; background:var(--lime); color:var(--lime-ink);
  padding:8px 17px; border-radius:999px; font-weight:600; font-size:13.5px;
}
@media (min-width:640px){ .mast .cta{display:inline-block} }

/* ---------- reading column ---------- */
.wrap{max-width:720px; margin:0 auto; padding:0 var(--gut)}
.wrap--wide{max-width:1080px}

.crumb{
  font-size:12.5px; color:var(--faint); padding:26px 0 0;
  display:flex; gap:8px; flex-wrap:wrap; align-items:center;
}
.crumb a{color:var(--faint); text-decoration:none}
.crumb a:hover{color:var(--muted)}

.kicker{
  font-size:11.5px; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:var(--lime); margin:30px 0 14px;
}

h1{
  font-family:var(--disp); font-weight:800; letter-spacing:-.035em;
  line-height:1.05; font-size:clamp(31px,6.4vw,50px); margin:0 0 18px;
}
h2{
  font-family:var(--disp); font-weight:700; letter-spacing:-.025em;
  line-height:1.15; font-size:clamp(23px,4.4vw,31px); margin:46px 0 14px;
}
h3{
  font-family:var(--disp); font-weight:600; letter-spacing:-.015em;
  line-height:1.25; font-size:19px; margin:30px 0 10px;
}

.standfirst{
  font-size:clamp(17px,2.6vw,20px); line-height:1.6; color:var(--muted);
  margin:0 0 26px;
}
.byline{
  display:flex; flex-wrap:wrap; gap:6px 14px; align-items:center;
  font-size:12.5px; color:var(--faint);
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  padding:13px 0; margin:0 0 34px;
}

p{margin:0 0 20px}
.body > ul, .body > ol{margin:0 0 22px; padding-left:22px}
.body li{margin-bottom:9px}
strong{color:var(--white); font-weight:600}
hr{border:0; border-top:1px solid var(--line); margin:40px 0}

blockquote{
  margin:28px 0; padding:2px 0 2px 20px;
  border-left:3px solid var(--lime);
  font-size:19px; line-height:1.55; color:var(--white);
}
blockquote p:last-child{margin-bottom:0}

/* a plain, readable table - articles that need a different one override it */
table{width:100%; border-collapse:collapse; margin:26px 0; font-size:15px}
th,td{text-align:left; padding:11px 12px; border-bottom:1px solid var(--line); vertical-align:top}
th{
  font-family:var(--disp); font-weight:600; font-size:13px;
  letter-spacing:.02em; color:var(--white);
  border-bottom-color:var(--line-2);
}
td{color:var(--muted)}
.num{font-variant-numeric:tabular-nums; white-space:nowrap}

/* ---------- editorial notes ---------- */
.note{
  background:var(--navy-800); border:1px solid var(--line);
  border-radius:16px; padding:19px 20px; margin:30px 0;
  font-size:15px; line-height:1.6; color:var(--muted);
}
.note b{color:var(--white)}
.note :last-child{margin-bottom:0}

.plain{
  border-left:3px solid var(--line-2); padding-left:18px;
  margin:30px 0; font-size:15px; color:var(--faint);
}

/* ---------- foot of article ---------- */
.endnote{
  margin:48px 0 0; padding:22px 0 0; border-top:1px solid var(--line);
  font-size:13px; line-height:1.6; color:var(--faint);
}
.more{margin:44px 0 0}
.more h2{font-size:21px; margin:0 0 16px}
.more ul{list-style:none; margin:0; padding:0}
.more li{border-top:1px solid var(--line)}
.more li:last-child{border-bottom:1px solid var(--line)}
.more a{
  display:block; padding:15px 0; color:var(--white);
  text-decoration:none; font-family:var(--disp); font-weight:600;
  font-size:16.5px; letter-spacing:-.01em; line-height:1.3;
}
.more a span{
  display:block; font-family:var(--body); font-weight:400;
  font-size:13.5px; color:var(--faint); margin-top:4px; letter-spacing:0;
}
.more a:hover{color:var(--lime)}

/* ---------- footer ---------- */
.foot{
  margin-top:64px; padding:30px var(--gut) calc(34px + env(safe-area-inset-bottom));
  border-top:1px solid var(--line); background:var(--navy-850);
}
.foot .in{max-width:720px; margin:0 auto}
.foot .links{display:flex; flex-wrap:wrap; gap:9px 20px; margin-bottom:18px}
.foot .links a{font-size:13.5px; color:var(--muted); text-decoration:none}
.foot .links a:hover{color:var(--white)}
.foot p{font-size:11.5px; line-height:1.6; color:var(--faint); margin:0}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition-duration:.01ms !important}
}