:root{--ink:#18201d;--muted:#58605d;--paper:#f6f7f4;--panel:#fff;--line:#ccd2ce;--red:#a63f32;--green:#17624b;--yellow:#f0bf3f;--max:1120px}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;line-height:1.58}
a{color:#135c46;text-underline-offset:3px}
a:focus-visible,summary:focus-visible{outline:3px solid var(--yellow);outline-offset:3px}
.skip{position:absolute;left:-999px}
.skip:focus{left:12px;top:12px;background:#fff;padding:10px;z-index:10}
header{background:#101815;color:#fff}
.brand{max-width:var(--max);margin:auto;padding:14px 24px;font-weight:900;letter-spacing:0}
.brand span{color:var(--yellow)}
main{width:100%;max-width:var(--max);min-width:0;margin:auto}
.first{padding:30px 24px 24px;display:grid;grid-template-columns:1.05fr .95fr;gap:28px;align-items:center;min-width:0}
.eyebrow{color:#9b3e2f;font-weight:800;margin:0 0 8px}
.first h1{font-family:Georgia,serif;font-size:clamp(2rem,4vw,3.55rem);line-height:1.04;margin:0 0 14px;letter-spacing:0}
.first p{margin:.5rem 0}
.quick{border-left:4px solid var(--yellow);padding-left:14px}
.hero{margin:0;min-width:0}
.hero img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border:1px solid #55605c}
.hero figcaption{font-size:.78rem;color:#46514d;margin-top:5px}
.jump{display:inline-block;background:var(--yellow);color:#17201d;font-weight:800;text-decoration:none;padding:10px 14px;margin-top:8px;border-radius:4px}
section{padding:40px 24px;scroll-margin-top:58px;min-width:0}
section:nth-of-type(even){background:#edf1ed}
h2{font-family:Georgia,serif;font-size:2rem;line-height:1.15;margin:0 0 12px}
h3{font-size:1.25rem;margin:0 0 8px}
.lede{font-size:1.1rem}
.lane-grid,.definitions,.recs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.lane,details,.rec,.utility{background:var(--panel);border:1px solid var(--line);border-top:4px solid var(--green);padding:18px;border-radius:6px;min-width:0}
details summary{font-weight:800;cursor:pointer}
details p{font-size:.94rem}
details strong{color:var(--green)}
.comparison-wrap,.details-wrap{width:100%;max-width:100%;overflow-x:auto;border:1px solid var(--line);background:#fff}
table{width:100%;border-collapse:collapse;min-width:790px}
caption{text-align:left;font-weight:700;padding:12px;background:#e0e8e3}
th,td{text-align:left;vertical-align:top;padding:12px;border-bottom:1px solid var(--line)}
th{background:#253c34;color:#fff}
.badge{display:inline-block;background:#e3efe8;color:#164d3b;font-weight:800;padding:3px 8px;border-radius:3px}
.rec:nth-child(2n){border-top-color:var(--red)}
.source-list li{margin:.65rem 0;overflow-wrap:anywhere}
.source-note{color:var(--muted);font-size:.92rem}
.meta{color:var(--muted);font-size:.9rem}
footer{background:#101815;color:#dce4df;padding:28px 24px}
footer p{max-width:var(--max);margin:auto}
@media(max-width:760px){
  .first{grid-template-columns:1fr;padding:18px 18px 24px}
  .first h1{font-size:2.15rem}
  .hero{order:-1}
  .hero img{max-height:210px}
  .lane-grid,.definitions,.recs{grid-template-columns:1fr}
  section{padding:34px 18px}
  h2{font-size:1.7rem}
  .details-wrap table{min-width:0}
  .details-wrap thead{display:none}
  .details-wrap tr{display:block;padding:10px;border-bottom:8px solid var(--paper)}
  .details-wrap td{display:grid;grid-template-columns:minmax(112px,40%) minmax(0,1fr);gap:10px;border:0;padding:7px 10px;overflow-wrap:anywhere}
  .details-wrap td:before{content:attr(data-label);font-weight:800;color:#17624b}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}