@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&family=Newsreader:opsz,wght@6..72,400;6..72,500;6..72,600&display=swap');

:root { --ink:#17302c; --ink-soft:#30504b; --paper:#f5f3ee; --white:#fffcf7; --clay:#e4a77d; --moss:#778e76; --mist:#d9e1d5; --line:#cbd2ca; --muted:#64716c; --mono:"DM Mono",monospace; --sans:"DM Sans",sans-serif; --serif:"Newsreader",Georgia,serif; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; color:var(--ink); background:var(--paper); font-family:var(--sans); line-height:1.58; } img { display:block; max-width:100%; } a { color:inherit; } .skip-link { position:absolute; top:-5rem; left:1rem; z-index:10; padding:.7rem 1rem; color:var(--white); background:var(--ink); } .skip-link:focus { top:1rem; }
.site-header { position:sticky; top:0; z-index:5; display:flex; justify-content:space-between; align-items:center; gap:1.5rem; padding:1rem clamp(1.2rem,4vw,4rem); border-bottom:1px solid var(--line); background:rgba(245,243,238,.94); backdrop-filter:blur(12px); } .brand { display:flex; align-items:center; gap:.7rem; text-decoration:none; font-weight:700; white-space:nowrap; } .brand span { display:grid; place-items:center; width:2rem; height:2rem; color:var(--white); background:var(--ink); font-family:var(--mono); font-size:.72rem; letter-spacing:.02em; } nav { display:flex; flex-wrap:wrap; gap:.65rem 1.15rem; } nav a { color:var(--muted); text-decoration:none; font-size:.86rem; font-weight:600; } nav a:hover, nav a[aria-current="page"] { color:var(--ink); }
.eyebrow,.section-label,.product-score { margin:0; color:var(--ink-soft); font-family:var(--mono); font-size:.71rem; letter-spacing:.06em; text-transform:uppercase; } h1,h2,h3,p { margin-top:0; } h1,h2,h3 { font-family:var(--serif); font-weight:500; letter-spacing:0; line-height:.98; } h1 { max-width:11ch; margin-bottom:1.35rem; font-size:clamp(3.5rem,7.8vw,7.1rem); } h2 { margin-bottom:1rem; font-size:clamp(2rem,4vw,4.1rem); } h3 { font-size:1.55rem; } .intro { max-width:41rem; margin-bottom:0; color:var(--muted); font-size:clamp(1.08rem,1.6vw,1.3rem); }
.home-feature { display:grid; grid-template-columns:minmax(0,1fr) minmax(24rem,.95fr); min-height:min(670px,calc(100vh - 72px)); border-bottom:1px solid var(--line); background:var(--white); } .home-feature-copy { display:flex; flex-direction:column; justify-content:center; padding:clamp(3rem,8vw,8rem) clamp(1.3rem,6vw,7rem); } .home-feature-image { min-height:26rem; background:var(--ink); overflow:hidden; } .home-feature-image img { width:100%; height:100%; object-fit:cover; } .hero-actions { display:flex; flex-wrap:wrap; align-items:center; gap:1.4rem; margin-top:2.25rem; } .button { display:inline-flex; align-items:center; justify-content:center; gap:.6rem; min-height:3rem; padding:.8rem 1rem; border:1px solid var(--ink); text-decoration:none; font-weight:700; } .button-ink { color:var(--white); background:var(--ink); } .button:hover,.product-link:hover { transform:translateY(-1px); } .text-link { color:var(--ink); font-weight:700; text-underline-offset:.25em; }
.home-index { display:grid; grid-template-columns:.8fr 1.2fr; gap:2rem; padding:1.3rem clamp(1.3rem,6vw,7rem); border-bottom:1px solid var(--line); } .home-index p { margin:0; color:var(--muted); } .home-index div { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; } .home-index a { display:flex; flex-direction:column; gap:.4rem; text-decoration:none; font-size:.95rem; font-weight:600; } .home-index span,.product-index,.section-number { color:var(--clay); font-family:var(--mono); font-size:.72rem; }
.home-shortlist,.comparison,.article-body,.related { width:min(1180px,calc(100% - 2.4rem)); margin:0 auto; } .home-shortlist { display:grid; grid-template-columns:.72fr 1.28fr; gap:3rem; padding:clamp(4rem,8vw,7rem) 0; } .home-shortlist>div:first-child p:last-child { max-width:25rem; color:var(--muted); }
.product-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); } .product-card { display:flex; flex-direction:column; min-height:100%; padding:1.35rem; background:var(--white); } .product-card-top { display:flex; justify-content:space-between; align-items:baseline; gap:1rem; margin-bottom:2.2rem; } .product-score { color:var(--muted); } .product-card h3 { margin-bottom:1.2rem; } .product-card dl { display:grid; gap:1rem; margin:0 0 1.8rem; } .product-card dt { margin-bottom:.15rem; color:var(--muted); font-family:var(--mono); font-size:.68rem; text-transform:uppercase; } .product-card dd { margin:0; font-size:.92rem; } .product-link { display:inline-flex; gap:.3rem; margin-top:auto; color:var(--ink); font-weight:700; text-decoration:none; text-decoration:underline; text-underline-offset:.25em; }
.article-lead { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(20rem,.9fr); gap:clamp(2rem,6vw,7rem); align-items:start; width:min(1180px,calc(100% - 2.4rem)); margin:0 auto; padding:clamp(4rem,9vw,9rem) 0 clamp(3rem,5vw,5rem); } .article-lead-plain { grid-template-columns:1fr; max-width:850px; } .article-lead h1 { max-width:12ch; font-size:clamp(3rem,6.6vw,6.2rem); } .assessment { display:grid; grid-template-columns:7rem 1fr; gap:1rem; max-width:48rem; margin-top:2.2rem; padding-top:1.05rem; border-top:1px solid var(--line); } .assessment span { color:var(--clay); font-family:var(--mono); font-size:.7rem; text-transform:uppercase; } .assessment p { margin:0; font-size:.9rem; } .article-visual { margin:0; } .article-visual img { width:100%; aspect-ratio:4/3; object-fit:cover; } .article-visual figcaption { margin-top:.6rem; color:var(--muted); font-family:var(--mono); font-size:.63rem; }
.comparison { padding:0 0 clamp(4rem,8vw,7rem); } .comparison-heading,.comparison-table-heading { display:flex; align-items:baseline; justify-content:space-between; gap:2rem; margin:0 0 1.2rem; } .comparison-heading h2,.comparison-table-heading h2 { margin:0; font-size:clamp(2.2rem,4vw,4rem); } .comparison-table-heading { margin-top:4.5rem; } .table-wrap { overflow:auto; border-top:1px solid var(--ink); border-bottom:1px solid var(--ink); } table { width:100%; min-width:800px; border-collapse:collapse; } th,td { padding:1rem; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; font-size:.88rem; } th { color:var(--muted); font-family:var(--mono); font-size:.65rem; text-transform:uppercase; } td span { display:block; margin-top:.2rem; color:var(--muted); font-family:var(--mono); font-size:.65rem; } td a { font-weight:700; text-underline-offset:.2em; }
.article-body { display:grid; gap:0; max-width:880px; padding:0 0 clamp(4rem,7vw,7rem); } .article-after-products { padding-top:0; } .content-section { display:grid; grid-template-columns:4rem 1fr; gap:1rem; padding:2.4rem 0; border-top:1px solid var(--line); } .content-section h2,.buy-instead h2 { margin-bottom:.7rem; font-size:clamp(1.9rem,3.4vw,2.8rem); } .content-section p,.buy-instead p { max-width:43rem; margin-bottom:0; color:var(--muted); font-size:1.03rem; } .buy-instead { margin-top:1rem; padding:clamp(1.7rem,4vw,3rem); background:var(--mist); } .buy-instead .button { margin-top:1.5rem; }
.related { padding:clamp(3rem,6vw,5rem) 0; border-top:1px solid var(--line); } .related-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; margin-top:1rem; background:var(--line); border:1px solid var(--line); } .related-card { position:relative; min-height:12rem; padding:1.25rem; background:var(--white); text-decoration:none; } .related-card span { display:block; margin-bottom:2rem; color:var(--muted); font-family:var(--mono); font-size:.65rem; text-transform:uppercase; } .related-card strong { display:block; max-width:12ch; font-family:var(--serif); font-size:1.55rem; line-height:1.03; } .related-card i { position:absolute; right:1rem; bottom:1rem; font-style:normal; }
.site-footer { display:grid; grid-template-columns:1fr 1fr; gap:2rem; padding:3rem clamp(1.3rem,6vw,7rem); color:var(--white); background:var(--ink); } .footer-brand { color:var(--white); font-family:var(--serif); font-size:2.2rem; text-decoration:none; } .site-footer p { max-width:29rem; margin:.7rem 0 0; color:#cbd8cf; } .footer-meta { justify-self:end; } .footer-meta nav { justify-content:flex-end; margin-top:1.3rem; } .footer-meta a { color:var(--white); }
@media (max-width:900px) { .site-header { align-items:flex-start; flex-direction:column; } .home-feature,.article-lead,.home-shortlist,.home-index,.site-footer { grid-template-columns:1fr; } .home-feature { min-height:0; } .home-feature-image { min-height:23rem; } .home-index div,.product-grid,.related-grid { grid-template-columns:1fr; } .home-index div { gap:.8rem; } .home-index a { flex-direction:row; } .home-shortlist { gap:2rem; } .article-lead { padding-top:4rem; } .article-visual { max-width:36rem; } .footer-meta { justify-self:start; } .footer-meta nav { justify-content:flex-start; } }
@media (max-width:560px) { .site-header { padding:1rem; } .site-header nav { gap:.6rem .9rem; } .home-feature-copy { padding:3.2rem 1.2rem; } .home-feature-image { min-height:18rem; } .home-index,.home-shortlist,.comparison,.article-lead,.article-body,.related { width:min(100% - 2rem,1180px); } .home-index { padding:1.2rem 0; } .hero-actions { align-items:flex-start; flex-direction:column; } .button { width:100%; } .assessment { grid-template-columns:1fr; gap:.4rem; } .content-section { grid-template-columns:1fr; gap:.4rem; padding:2rem 0; } .comparison-heading,.comparison-table-heading { align-items:flex-start; flex-direction:column; gap:.5rem; } .site-footer { padding:2.5rem 1rem; } }