:root {
  --ink:#1e2522; --muted:#59615d; --paper:#f3f4f0; --white:#fff;
  --pine:#164a3b; --wine:#8e3d3c; --amber:#d7aa3e; --line:#c9d0cb;
  --soft:#e5eee8; --max:1120px;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:84px; }
body { margin:0; background:var(--paper); color:var(--ink); font:17px/1.62 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; letter-spacing:0; }
a { color:var(--pine); text-underline-offset:3px; }
a:focus-visible, summary:focus-visible { outline:3px solid var(--wine); outline-offset:3px; }
.skip-link { position:absolute; left:-9999px; top:8px; background:#fff; padding:10px; z-index:20; }
.skip-link:focus { left:8px; }
.inner, article>section { width:min(calc(100% - 40px),var(--max)); margin-inline:auto; }
.site-head { position:sticky; top:0; z-index:10; background:#132820; color:#fff; border-bottom:4px solid var(--amber); }
.site-head .inner { min-height:66px; display:flex; align-items:center; justify-content:space-between; gap:18px; }
.brand { color:#fff; text-decoration:none; font:700 30px Georgia,serif; }
.site-head nav { display:flex; gap:18px; flex-wrap:wrap; }
.site-head nav a { color:#fff; font-size:14px; font-weight:700; text-decoration:none; }
.first-screen { width:100%; background:#fff; border-bottom:1px solid var(--line); padding:32px 0 38px; }
.hero-grid { width:min(calc(100% - 40px),var(--max)); margin:auto; display:grid; grid-template-columns:minmax(0,1.05fr) minmax(420px,.95fr); gap:34px; align-items:center; }
.eyebrow,.lane { color:var(--wine); font-size:13px; font-weight:800; text-transform:uppercase; }
h1,h2,h3 { font-family:Georgia,serif; line-height:1.16; letter-spacing:0; }
h1 { font-size:54px; margin:7px 0 14px; max-width:15ch; }
h2 { font-size:34px; margin:0 0 18px; }
h3 { font-size:24px; margin:8px 0 10px; }
.dek { font-size:20px; max-width:57ch; }
.meta { color:var(--muted); font-size:14px; }
.hero-figure { margin:0; }
.hero-figure img { display:block; width:100%; height:auto; aspect-ratio:3/2; object-fit:cover; border:1px solid var(--line); }
.hero-figure figcaption { font-size:13px; color:var(--muted); margin-top:7px; }
.bottom-line { border-left:5px solid var(--amber); padding:1px 0 1px 18px; margin:18px 0; }
.bottom-line strong { display:block; }
.start-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.start-grid a,.warning { display:block; background:var(--soft); padding:9px 11px; text-decoration:none; font-weight:700; }
.warning { background:#f6e6e2; border-left:4px solid var(--wine); margin-top:10px; font-weight:500; }
article>section { padding-block:54px; border-bottom:1px solid var(--line); }
.definition-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
details { background:#fff; border:1px solid var(--line); padding:15px; }
summary { font-weight:800; cursor:pointer; }
details p { font-size:15px; margin:.65em 0; }
.table-wrap { overflow-x:auto; background:#fff; border:1px solid var(--line); }
table { width:100%; border-collapse:collapse; min-width:760px; }
caption { text-align:left; padding:14px; font-weight:800; }
th,td { text-align:left; vertical-align:top; padding:13px; border-top:1px solid var(--line); }
thead { background:#183c31; color:#fff; }
tbody th { color:var(--pine); }
.recommendations { display:grid; gap:22px; }
.recommendation { background:#fff; border:1px solid var(--line); border-left:6px solid var(--pine); padding:24px; }
.pros-cons { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.pros-cons>div { background:var(--soft); padding:13px; }
.pros-cons>div:last-child { background:#f4e8e4; }
.utility { background:#173b31; color:#fff!important; width:100%!important; padding-inline:max(20px,calc((100% - var(--max))/2)); }
.utility h2 { color:#fff; }
.utility-grid,.steps { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.utility-grid>div,.steps>div { background:#fff; color:var(--ink); padding:16px; }
.source-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; padding-left:20px; }
.site-foot { background:#132820; color:#fff; padding:34px 0; }
.site-foot .inner { display:flex; justify-content:space-between; gap:24px; }
.details-wrap table { font-size:14px; }
@media(max-width:800px) {
  body { font-size:16px; }
  .site-head { position:relative; }
  .site-head nav { display:none; }
  .hero-grid { grid-template-columns:1fr; gap:18px; }
  .hero-copy { display:contents; }
  .hero-figure { grid-row:1; }
  .hero-figure img { max-height:228px; }
  .definition-grid,.utility-grid,.steps,.pros-cons,.source-list { grid-template-columns:1fr; }
  .site-foot .inner { display:block; }
  h1 { font-size:40px; }
  .inner,article>section { width:min(calc(100% - 28px),var(--max)); }
}
@media(max-width:520px) {
  .first-screen { padding-top:20px; }
  .start-grid { grid-template-columns:1fr; }
  article>section { padding-block:40px; }
  h2 { font-size:29px; }
  .recommendation { padding:18px; }
  .details-wrap { overflow:visible; border:0; background:transparent; }
  .details-wrap caption { display:block; width:100%; padding:0 0 12px; }
  .details-wrap table,.details-wrap tbody,.details-wrap tr,.details-wrap th,.details-wrap td { display:block; min-width:0; width:100%; }
  .details-wrap thead { position:absolute; left:-9999px; }
  .details-wrap tr { background:#fff; border:1px solid var(--line); margin-bottom:16px; padding:12px; }
  .details-wrap td,.details-wrap th { display:grid; grid-template-columns:minmax(108px,38%) minmax(0,1fr); gap:10px; border-top:1px solid var(--line); padding:9px 4px; overflow-wrap:anywhere; }
  .details-wrap [data-product-detail]:before { font-weight:800; color:var(--muted); }
  .details-wrap [data-product-detail="product"]:before { content:"Product"; }
  .details-wrap [data-product-detail="size-weight"]:before { content:"Size / weight"; }
  .details-wrap [data-product-detail="materials"]:before { content:"Construction"; }
  .details-wrap [data-product-detail="manufacturing-origin"]:before { content:"Manufacturing origin"; }
  .details-wrap [data-product-detail="brand"]:before { content:"Brand"; }
  .details-wrap [data-product-detail="warranty"]:before { content:"Warranty / support"; }
}
