/* ==========================================================================
   THE DAILY FUEL — Base: reset, typography, layout helpers, a11y
   ========================================================================== */

*,*::before,*::after{ box-sizing:border-box; }
*{ margin:0; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  font-family:var(--font);
  font-size:var(--fs-body);
  font-weight:var(--fw-regular);
  line-height:var(--lh-body);
  color:var(--text);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  min-height:100dvh;
  overflow-x:hidden;
}

img,svg,video{ display:block; max-width:100%; height:auto; }
img{ font-style:italic; color:var(--ink-3); } /* alt text styling if broken */
.ico{ width:1.15em; height:1.15em; flex:none; } /* base icon size; contextual rules override */
picture{ display:contents; } /* WebP wrappers don't affect layout; img sizing rules still apply */

a{ color:var(--green-600); text-decoration:none; transition:color var(--t) var(--ease); }
a:hover{ color:var(--green-800); }

button,input,select,textarea{ font:inherit; color:inherit; }
button{ cursor:pointer; background:none; border:none; }

ul[role="list"],ol[role="list"]{ list-style:none; padding:0; }

/* ---- Headings ---------------------------------------------------------- */
h1,h2,h3,h4,h5{ color:var(--green); line-height:var(--lh-tight); font-weight:var(--fw-x); letter-spacing:-0.01em; text-wrap:balance; }
h3,h4,h5{ line-height:var(--lh-snug); }
h4,h5{ font-weight:var(--fw-bold); }
.display{ font-size:var(--fs-display); line-height:var(--lh-tight); letter-spacing:-0.02em; }
h1,.h1{ font-size:var(--fs-h1); }
h2,.h2{ font-size:var(--fs-h2); }
h3,.h3{ font-size:var(--fs-h3); }
h4,.h4{ font-size:var(--fs-h4); }
p{ text-wrap:pretty; }
.lead{ font-size:var(--fs-lead); color:var(--text-muted); line-height:1.55; }
.muted{ color:var(--text-muted); }
.subtle{ color:var(--text-subtle); }
small,.text-sm{ font-size:var(--fs-sm); }
.text-xs{ font-size:var(--fs-xs); }
strong,b{ font-weight:var(--fw-bold); }
.eyebrow{
  font-size:var(--fs-xs); font-weight:var(--fw-x); letter-spacing:.14em;
  text-transform:uppercase; color:var(--green-600);
}
.on-dark, .on-dark h1,.on-dark h2,.on-dark h3,.on-dark h4{ color:var(--on-green); }
.on-dark p,.on-dark .muted{ color:var(--on-green-2); }
.on-dark .eyebrow{ color:var(--green-300); }

/* ---- Layout helpers ---------------------------------------------------- */
.container{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter); }
.container-narrow{ max-width:var(--container-narrow); }
.container-wide{ max-width:var(--container-wide); }
.section{ padding-block:var(--section-y); }
.section-sm{ padding-block:clamp(2.25rem, 1.5rem + 2.5vw, 3.5rem); }
.band{ background:var(--green); color:var(--on-green); }
.bg-alt{ background:var(--bg-alt); }
.bg-green-tint{ background:var(--green-50); }

.stack{ display:flex; flex-direction:column; }
.stack-2>*+*{ margin-top:var(--s-2);} .stack-3>*+*{ margin-top:var(--s-3);}
.stack-4>*+*{ margin-top:var(--s-4);} .stack-5>*+*{ margin-top:var(--s-5);}
.stack-6>*+*{ margin-top:var(--s-6);}
.row{ display:flex; gap:var(--s-4); align-items:center; }
.row-wrap{ flex-wrap:wrap; }
.between{ justify-content:space-between; }
.center{ justify-content:center; }
.items-start{ align-items:flex-start; }
.gap-2{gap:var(--s-2);} .gap-3{gap:var(--s-3);} .gap-4{gap:var(--s-4);} .gap-5{gap:var(--s-5);} .gap-6{gap:var(--s-6);}

.grid{ display:grid; gap:var(--s-5); }
.cols-2{ grid-template-columns:repeat(2,1fr); }
.cols-3{ grid-template-columns:repeat(3,1fr); }
.cols-4{ grid-template-columns:repeat(4,1fr); }
.grid-auto{ grid-template-columns:repeat(auto-fill,minmax(248px,1fr)); }
.grid-auto-lg{ grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); }

.section-head{ max-width:62ch; margin-bottom:var(--s-7); }
.section-head.center{ margin-inline:auto; text-align:center; }
.section-head .lead{ margin-top:var(--s-3); }

/* measure for long-form text */
.prose{ max-width:68ch; }
.prose p{ margin-top:var(--s-4); color:var(--text-muted); }
.prose h2{ margin-top:var(--s-8); font-size:var(--fs-h3); }
.prose h3{ margin-top:var(--s-6); font-size:var(--fs-h4); color:var(--green); }
.prose ul{ margin-top:var(--s-4); padding-left:1.2em; color:var(--text-muted); }
.prose li{ margin-top:var(--s-2); }
.prose li::marker{ color:var(--green-500); }

/* utilities */
.text-center{ text-align:center; } .text-right{ text-align:right; }
.flex-1{ flex:1; } .w-full{ width:100%; }
.mt-2{margin-top:var(--s-2);} .mt-3{margin-top:var(--s-3);} .mt-4{margin-top:var(--s-4);}
.mt-5{margin-top:var(--s-5);} .mt-6{margin-top:var(--s-6);} .mt-7{margin-top:var(--s-7);} .mt-8{margin-top:var(--s-8);}
.mb-0{margin-bottom:0;} .hidden{ display:none !important; }
[hidden]{ display:none !important; }
.relative{ position:relative; }
.ratio-16-9{ aspect-ratio:16/9; } .ratio-4-3{ aspect-ratio:4/3; }
.ratio-1-1{ aspect-ratio:1/1; } .ratio-3-2{ aspect-ratio:3/2; }

/* ---- Accessibility ----------------------------------------------------- */
:focus-visible{ outline:3px solid var(--ring); outline-offset:2px; border-radius:4px; }
.on-dark :focus-visible, .band :focus-visible{ outline-color:#fff; }

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.skip-link{
  position:fixed; top:8px; left:8px; z-index:var(--z-skip);
  background:var(--green); color:#fff; padding:.6rem 1rem; border-radius:var(--r-sm);
  font-weight:var(--fw-medium); transform:translateY(-150%); transition:transform var(--t);
}
.skip-link:focus{ transform:translateY(0); color:#fff; }

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

/* reveal-on-scroll (progressive; visible by default if JS/anim disabled) */
.reveal{ opacity:0; transform:translateY(16px); }
.reveal.in{ opacity:1; transform:none; transition:opacity .6s var(--ease-out), transform .6s var(--ease-out); }
@media (prefers-reduced-motion: reduce){ .reveal{ opacity:1; transform:none; } }
.no-js .reveal{ opacity:1; transform:none; }

/* responsive grid collapse */
@media (max-width: 1024px){
  .cols-4{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 760px){
  .cols-2,.cols-3,.cols-4{ grid-template-columns:1fr; }
  .grid{ gap:var(--s-4); }
}