@import "tailwindcss";
@font-face { font-family: Hanken; src: url('/fonts/hanken-grotesk-variable.woff2'); font-weight: 100 900; }
@font-face { font-family: Fraunces; src: url('/fonts/fraunces-variable.woff2'); font-weight: 300 800; }
:root { --ink:#18211f; --muted:#64706b; --paper:#f5f3ed; --white:#fffefb; --sage:#dce7df; --green:#295646; --line:#d5ddd6; --orange:#c66b3d; }
* { box-sizing:border-box; } body { margin:0; background:var(--paper); color:var(--ink); font-family:Hanken, sans-serif; } a { color:inherit; text-decoration:none; } .site-header { height:76px; padding:0 5vw; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); background:rgba(245,243,237,.94); position:sticky; top:0; z-index:5; } .brand { display:flex; align-items:center; gap:10px; font-weight:700; letter-spacing:-.03em; font-size:1.18rem; } .brand-mark { display:grid; place-items:center; width:31px; height:31px; border-radius:50%; background:var(--green); color:#fff; font-family:Fraunces; font-size:1.25rem; } nav { display:flex; gap:26px; align-items:center; font-size:.92rem; color:#3d4944; } nav a:hover, .footer-links a:hover { color:var(--orange); } .nav-menu { position:relative; } .nav-menu summary { cursor:pointer; list-style:none; display:flex; align-items:center; gap:5px; } .nav-menu summary::-webkit-details-marker { display:none; } .nav-menu summary span { color:var(--orange); font-size:1rem; } .nav-menu-panel { position:absolute; right:0; top:30px; width:230px; padding:12px; display:grid; gap:3px; background:var(--white); border:1px solid var(--line); box-shadow:0 12px 28px rgba(24,33,31,.1); } .nav-menu-panel.category-panel { width:360px; max-height:70vh; overflow:auto; } .nav-menu-panel a { padding:9px 10px; font-size:.84rem; } .nav-menu-panel a:hover { background:var(--sage); color:var(--green); } .category-menu-item { border-bottom:1px solid var(--line); padding:8px 0; } .category-menu-item:last-child { border-bottom:0; } .category-menu-item summary { padding:5px 8px; font-weight:650; } .category-menu-item > div { display:grid; grid-template-columns:1fr 1fr; gap:2px; padding:4px 0 8px 12px; } .category-menu-item > div a { font-size:.78rem; padding:7px 8px; } .nav-panel-label { padding:7px 10px 9px; color:var(--green); font-size:.72rem; text-transform:uppercase; letter-spacing:.1em; } .header-cta { border:1px solid var(--ink); padding:10px 15px; font-size:.86rem; } .header-cta span { color:var(--orange); margin-left:7px; }
.container { width:min(1160px,90vw); margin:auto; } .hero { padding:clamp(70px,11vw,150px) 0 95px; display:grid; grid-template-columns:1.15fr .85fr; gap:8vw; align-items:end; } .kicker { text-transform:uppercase; letter-spacing:.14em; font-size:.72rem; font-weight:700; color:var(--orange); } h1,h2,h3 { margin:0; letter-spacing:-.055em; line-height:.98; } h1 { font-family:Fraunces,serif; font-weight:500; font-size:clamp(4rem,8vw,8.6rem); max-width:760px; } h2 { font-family:Fraunces,serif; font-size:clamp(2.4rem,4vw,4.6rem); font-weight:500; } h3 { font-size:1.35rem; letter-spacing:-.03em; } .hero-copy { font-size:1.1rem; line-height:1.6; color:var(--muted); max-width:410px; } .hero-note { border-top:1px solid var(--ink); padding-top:15px; margin-top:35px; font-size:.82rem; display:flex; justify-content:space-between; } .hero-note b { font-size:1.7rem; color:var(--green); }
.section { padding:90px 0; } .section-head { display:flex; justify-content:space-between; align-items:end; gap:30px; margin-bottom:35px; } .section-head p { max-width:350px; color:var(--muted); line-height:1.55; } .link-arrow { color:var(--orange); font-weight:700; font-size:.9rem; } .grid { display:grid; gap:16px; } .grid-3 { grid-template-columns:repeat(3,1fr); } .grid-4 { grid-template-columns:repeat(4,1fr); } .card { background:var(--white); border:1px solid var(--line); padding:26px; min-height:220px; display:flex; flex-direction:column; justify-content:space-between; } .card:hover { border-color:var(--green); transform:translateY(-2px); transition:.2s ease; } .card p { color:var(--muted); line-height:1.5; margin:10px 0 0; } .card-meta { display:flex; justify-content:space-between; color:var(--muted); font-size:.75rem; text-transform:uppercase; letter-spacing:.08em; } .lab-topic-grid .card { min-height:210px; } .lab-topic-grid .card h3 { margin-top:20px; } .lab-topic-grid .card p { max-width:260px; }
 .feature-band p { color:#c7d6cb; max-width:500px; line-height:1.6; } .feature-band .link-arrow { color:#f2af78; } .number { font-family:Fraunces; font-size:2.8rem; color:#9fbaa8; }
.page-hero { padding:90px 0 60px; border-bottom:1px solid var(--line); } .page-hero h1 { font-size:clamp(3.4rem,7vw,7rem); max-width:900px; } .page-hero p { max-width:570px; color:var(--muted); font-size:1.08rem; line-height:1.6; margin:25px 0 0; } .article { max-width:800px; margin:0 auto; padding:75px 0; } .article h2 { font-size:2.4rem; margin:45px 0 18px; } .article p,.article li { font-size:1.08rem; line-height:1.8; color:#43504a; } .article ul { padding-left:20px; }
.site-footer { padding:60px 5vw 25px; background:#1d2925; color:#e4e9df; display:grid; grid-template-columns:1fr 1fr; gap:55px; } .site-footer .brand { color:#fff; } .site-footer p { color:#aab7ad; } .footer-links { display:flex; gap:90px; } .footer-links div { display:flex; flex-direction:column; gap:10px; font-size:.9rem; } .footer-links strong { color:#fff; margin-bottom:8px; } .footer-links a { color:#aab7ad; } .footer-bottom { grid-column:1/-1; padding-top:20px; border-top:1px solid #425149; display:flex; justify-content:space-between; color:#93a198; font-size:.78rem; }
.skip-link { position:fixed; left:16px; top:-60px; z-index:20; background:var(--green); color:#fff; padding:10px 14px; } .skip-link:focus { top:16px; } .nav-toggle,.nav-toggle-label { display:none; } nav a { position:relative; } nav a.list-active { color:var(--green); font-weight:700; } nav a.list-active::after { content:""; position:absolute; left:0; right:0; bottom:-9px; height:2px; background:var(--orange); } :focus-visible { outline:3px solid #e2a066; outline-offset:3px; }
 .section-head-side { display:flex; flex-direction:column; align-items:flex-start; gap:16px; } .guide-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; } .guide-card { background:var(--white); border:1px solid var(--line); padding:26px; min-height:260px; display:flex; flex-direction:column; justify-content:space-between; } .guide-card:hover { border-color:var(--green); transform:translateY(-2px); transition:.2s ease; } .content-card { min-height:240px; } .news-empty{border-top:1px solid var(--green);border-bottom:1px solid var(--line);padding:24px 0;max-width:760px}.news-empty strong{font-size:1.2rem}.news-empty p{color:var(--muted);line-height:1.6;max-width:620px;margin:10px 0 16px}
 .journal-card { padding:24px; min-height:190px; border-top:1px solid var(--green); display:flex; flex-direction:column; justify-content:space-between; } .journal-card:hover { background:var(--white); } .feature-layout { display:grid; grid-template-columns:1fr 1fr; gap:8vw; align-items:end; } .pillar-hero { padding:82px 0 58px; border-bottom:1px solid var(--line); } .pillar-hero h1 { font-size:clamp(3.3rem,7vw,7rem); max-width:980px; margin-top:18px; } .pillar-hero > p { max-width:670px; color:var(--muted); font-size:1.18rem; line-height:1.65; margin:26px 0 0; } .pillar-meta { display:flex; gap:28px; margin-top:36px; padding-top:14px; border-top:1px solid var(--line); color:var(--muted); text-transform:uppercase; letter-spacing:.08em; font-size:.7rem; } .pillar-layout { display:grid; grid-template-columns:210px minmax(0,760px); gap:75px; padding-top:65px; } .toc { position:sticky; top:100px; align-self:start; display:flex; flex-direction:column; gap:13px; font-size:.86rem; } .toc strong { margin-bottom:8px; color:var(--green); } .toc a { color:var(--muted); } .toc a:hover { color:var(--orange); } .pillar-content section { margin-bottom:88px; scroll-margin-top:100px; } .pillar-content h2 { font-size:3rem; margin:12px 0 28px; } .intro-callout { background:var(--sage); padding:25px 28px; margin-bottom:80px !important; } .intro-callout p { margin:8px 0 0; color:#405a4d; line-height:1.65; } .standard-list { border-top:1px solid var(--line); } .standard-list > div { display:grid; grid-template-columns:48px 1fr; gap:16px; padding:22px 0; border-bottom:1px solid var(--line); } .standard-list span { color:var(--orange); font-family:Fraunces; font-size:1.5rem; } .standard-list h3 { font-size:1.15rem; } .standard-list p { grid-column:2; margin:7px 0 0; color:var(--muted); line-height:1.55; } .recommendation-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; } .recommendation-card { background:var(--white); border:1px solid var(--line); padding:21px; min-height:240px; display:flex; flex-direction:column; } .recommendation-card h3 { margin-top:26px; font-size:1.15rem; } .recommendation-card p { color:var(--muted); line-height:1.5; font-size:.92rem; flex:1; } .recommendation-label { color:var(--orange); font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.1em; } .faq-list { border-top:1px solid var(--line); } details { border-bottom:1px solid var(--line); padding:18px 0; } summary { cursor:pointer; list-style:none; display:flex; justify-content:space-between; font-weight:650; } summary::-webkit-details-marker { display:none; } summary span { color:var(--orange); font-size:1.4rem; } details p { color:var(--muted); line-height:1.6; max-width:650px; margin:13px 0 0; } .related-links { display:grid; grid-template-columns:1fr 1fr; gap:12px; } .related-links a { border-top:1px solid var(--green); padding:18px 0; display:flex; flex-direction:column; gap:12px; } .related-links span { color:var(--orange); font-size:.72rem; text-transform:uppercase; letter-spacing:.1em; } .related-links strong { font-size:1.1rem; }
.review-hero,.article-hero { padding:82px 0 55px; border-bottom:1px solid var(--line); } .review-hero h1,.article-hero h1 { font-family:Fraunces,serif; font-size:clamp(3.2rem,7vw,7rem); font-weight:500; max-width:950px; margin-top:18px; } .review-hero > p,.article-hero > p { max-width:700px; color:var(--muted); font-size:1.15rem; line-height:1.65; margin:24px 0 0; } .review-status,.article-meta { display:flex; flex-wrap:wrap; gap:28px; border-top:1px solid var(--line); margin-top:34px; padding-top:14px; color:var(--muted); font-size:.75rem; text-transform:uppercase; letter-spacing:.08em; } .review-status span { display:flex; flex-direction:column; gap:5px; } .review-status b { color:var(--green); font-size:.68rem; } .review-layout { display:grid; grid-template-columns:190px minmax(0,800px); gap:75px; padding-top:65px; } .review-sidebar { position:sticky; top:100px; align-self:start; display:flex; flex-direction:column; gap:13px; font-size:.86rem; } .review-sidebar strong { color:var(--green); margin-bottom:8px; } .review-sidebar a { color:var(--muted); } .review-content section { margin-bottom:80px; scroll-margin-top:100px; } .review-content h2,.article-readable h2 { font-family:Fraunces,serif; font-size:3rem; font-weight:500; margin:12px 0 24px; } .review-callout { background:var(--sage); padding:28px; } .review-callout p,.review-next p { color:#405a4d; line-height:1.65; max-width:680px; } .status-pill,.evidence-tag { display:inline-block; margin-top:14px; padding:7px 10px; font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; border:1px solid #b9cbbd; color:var(--green); } .test-list,.score-table { border-top:1px solid var(--line); } .test-list > div,.score-row { display:grid; grid-template-columns:50px 1fr; gap:18px; padding:20px 0; border-bottom:1px solid var(--line); } .test-list span { color:var(--orange); font-family:Fraunces; font-size:1.5rem; } .test-list p { margin:0; color:#43504a; line-height:1.55; } .score-row { grid-template-columns:1fr 80px; } .score-row p { margin:6px 0 0; color:var(--muted); line-height:1.5; font-size:.9rem; } .score-row > b { color:var(--orange); text-align:right; white-space:nowrap; } .evidence-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; } .evidence-grid > div { background:var(--white); border:1px solid var(--line); padding:20px; min-height:190px; } .evidence-grid p { color:var(--muted); line-height:1.5; font-size:.9rem; } .evidence-pending { color:#816443; border-color:#d6c3a6; } .dimension-list,.video-list{border-top:1px solid var(--line);margin-top:24px}.dimension-list details,.video-list details{border-bottom:1px solid var(--line);padding:18px 0}.dimension-list summary,.video-list summary{cursor:pointer;display:flex;justify-content:space-between;font-weight:650}.dimension-list summary span,.video-list summary span{color:var(--orange);font-size:1.3rem}.dimension-list p,.video-list p{margin:10px 0 0;color:var(--muted);line-height:1.55}.video-frame{display:block;width:100%;aspect-ratio:16/9;border:0;margin-top:16px}.feedback-record p{max-width:760px}.feedback-record .link-arrow{display:inline-block;margin-top:12px}

.product-spotlight{display:grid;grid-template-columns:220px 1fr;gap:26px;border:1px solid var(--line);background:var(--white);padding:18px;margin:0 auto 55px;max-width:800px}.product-spotlight-media img{width:100%;aspect-ratio:1;object-fit:cover}.product-spotlight-copy h3{font-family:Fraunces,serif;font-size:2rem;font-weight:500;margin:10px 0}.product-spotlight-copy p{color:#43504a;line-height:1.55}.product-source{font-size:.78rem;color:var(--muted)!important}.product-links{display:flex;flex-wrap:wrap;gap:14px;margin:18px 0}.product-links span{font-size:.82rem;color:var(--muted)}.product-spotlight-copy small{display:block;color:var(--muted);line-height:1.45}
.compare-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.compare-card{border:1px solid var(--line);background:var(--white);padding:24px;min-height:290px}.compare-card h2{font-size:2rem;margin:22px 0}.compare-card p{color:var(--muted);line-height:1.55}.test-record{padding-top:70px}.test-record section{margin-bottom:72px}.test-record h2{font-family:Fraunces,serif;font-size:2.8rem;font-weight:500;margin:12px 0 22px}.test-record p{color:#43504a;line-height:1.65;max-width:780px}.store-list{display:grid;gap:12px}.store-list>div{border-top:1px solid var(--line);padding:22px 0}.store-list p{color:var(--muted);line-height:1.55;margin:8px 0}.affiliate-note{margin-top:22px;padding:18px 20px;background:var(--sage);color:#405a4d;line-height:1.55;font-size:.9rem}


 .article-notice { background:var(--sage); padding:22px 26px; margin-bottom:55px; } .article-notice p { margin:7px 0 0; color:#405a4d; line-height:1.6; } .article-body > h2 { margin-top:12px; } .howto-step { display:grid; grid-template-columns:50px 1fr; gap:18px; padding:22px 0; border-top:1px solid var(--line); } .step-number { color:var(--orange); font-family:Fraunces; font-size:1.5rem; } .howto-step h3 { font-size:1.25rem; } .howto-step p { margin:8px 0 0; } .article-faq,.article-related { margin-top:72px; } .article-related { border-top:1px solid var(--green); padding-top:25px; } .article-related .link-arrow { display:block; margin-top:14px; } 
 .research-card{background:var(--white);border:1px solid var(--line);padding:24px;display:flex;flex-direction:column;gap:16px}.research-card:hover{border-color:var(--green)}.research-card-head,.research-card-main,.research-links{display:flex;justify-content:space-between;gap:16px;align-items:flex-start}.research-status,.research-category{color:var(--muted);font-size:.72rem;text-transform:uppercase;letter-spacing:.08em}.research-card-main h3{margin:9px 0;font-size:1.35rem}.research-card-main p{color:var(--muted);line-height:1.55;margin:0}.research-price{display:flex;flex-direction:column;align-items:flex-end;gap:6px;white-space:nowrap}.research-price strong{font-family:Fraunces,serif;font-size:1.45rem;font-weight:500}.research-price span{color:var(--muted);font-size:.75rem}.research-details{border-top:1px solid var(--line);padding-top:12px}.research-details summary{font-size:.88rem}.research-detail-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:12px}.research-detail-grid>div{background:var(--paper);padding:14px}.research-detail-grid strong{font-size:.78rem;color:var(--green)}.research-detail-grid p{color:var(--muted);line-height:1.45;font-size:.82rem;margin:7px 0 0}.research-links{flex-wrap:wrap;justify-content:flex-start}.research-links span{color:var(--muted);font-size:.8rem}
 .product-row { display:grid; grid-template-columns:1fr 150px; gap:24px; padding:22px 0; border-bottom:1px solid var(--line); } .product-row h3 { margin-top:7px; font-size:1.2rem; } .product-row p { color:var(--muted); line-height:1.5; margin:7px 0 0; } .product-tier { color:var(--orange); font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.1em; } .product-fact { display:flex; flex-direction:column; align-items:flex-end; gap:7px; } .product-fact strong { font-family:Fraunces; font-size:1.5rem; font-weight:500; } .product-fact span { color:var(--muted); font-size:.78rem; } 
@media (max-width:700px) {
  .site-header { height:64px; padding:0 5vw; }
  .site-header nav { display:none; position:absolute; left:0; right:0; top:64px; background:var(--paper); border-bottom:1px solid var(--line); padding:18px 5vw; flex-direction:column; gap:16px; align-items:stretch; }
  .nav-menu-panel.category-panel { width:auto; max-height:none; overflow:visible; }
  .category-menu-item > div { grid-template-columns:1fr; }
  .nav-toggle-label { display:flex; width:32px; height:32px; flex-direction:column; justify-content:center; gap:5px; cursor:pointer; margin-left:auto; margin-right:12px; }
  .nav-toggle-label span { display:block; width:22px; height:2px; background:var(--ink); }
  .nav-toggle:checked ~ nav { display:flex; }
  .nav-toggle:checked + .nav-toggle-label span:nth-child(2) { opacity:0; }
  .nav-toggle:checked + .nav-toggle-label span:first-child { transform:translateY(7px) rotate(45deg); }
  .nav-toggle:checked + .nav-toggle-label span:last-child { transform:translateY(-7px) rotate(-45deg); }
  .nav-toggle:checked ~ nav a.list-active::after { display:none; }
  .header-cta { padding:8px 10px; font-size:.78rem; }
  .hero { grid-template-columns:1fr; padding:75px 0 65px; gap:27px; }
  h1 { font-size:clamp(3.7rem,17vw,6rem); }
  .hero-mobile-copy { display:block; font-size:1rem; line-height:1.5; color:var(--muted); max-width:290px; margin:24px 0 0; }
  .hero-copy { font-size:1rem; }
  .hero-note { margin-top:24px; }
  .grid-3,.grid-4,.guide-grid,.recommendation-grid,.compare-grid { grid-template-columns:1fr; } .product-spotlight{grid-template-columns:1fr}.product-spotlight-media{max-width:240px}

  .guide-card { min-height:220px; }
  .section { padding:65px 0; }
  .section-head { display:block; }
  .section-head p { margin-top:18px; }
  .section-head-side { margin-top:18px; }
  .feature-layout { grid-template-columns:1fr; gap:24px; }
  .pillar-hero { padding:60px 0 42px; }
  .pillar-hero h1 { font-size:clamp(3.1rem,15vw,5rem); }
  .pillar-hero > p { font-size:1rem; }
  .pillar-meta { display:block; line-height:1.8; }
  .pillar-layout { display:block; padding-top:38px; }
  .toc { position:static; display:grid; grid-template-columns:1fr 1fr; background:var(--sage); padding:18px; margin-bottom:55px; gap:10px 18px; }
  .toc strong { grid-column:1/-1; }
  .pillar-content section { margin-bottom:64px; }
  .pillar-content h2 { font-size:2.5rem; }
  .standard-list > div { grid-template-columns:35px 1fr; gap:10px; }
  .related-links { grid-template-columns:1fr; }
  .product-row { grid-template-columns:1fr; gap:10px; }
  .product-fact { align-items:flex-start; flex-direction:row; gap:12px; }
  .site-footer { grid-template-columns:1fr; }
  .footer-links { gap:45px; }
  .footer-bottom { display:block; }
  .footer-bottom span { display:block; margin-top:8px; }
}