@font-face{
  font-family:"Archivo";
  src:url("/fonts/archivo-normal-latin.woff2") format("woff2");
  font-weight:400 800;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Source Serif 4";
  src:url("/fonts/source-serif-4-normal-latin.woff2") format("woff2");
  font-weight:400 600;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root{
  --ink-950:#0d1214; --ink-900:#151d20; --ink-600:#4f5b61; --ink-500:#67747a;
  --paper-000:#ffffff; --paper-100:#f3f6f6; --paper-200:#e7ebec; --paper-300:#d5dcde;
  --petrol-600:#0b5b62; --petrol-700:#073f46; --petrol-300:#5cb8c0;
  --green-700:#146a45; --red-700:#9e2020;

  --background:var(--paper-200);
  --sheet:var(--paper-000);
  --muted:var(--paper-100);
  --foreground:var(--ink-950);
  --muted-foreground:var(--ink-600);
  --rule:var(--ink-950);
  --hairline:var(--paper-300);
  --primary:var(--petrol-600);
  --primary-hover:var(--petrol-700);
  --primary-foreground:#ffffff;
  --link:var(--petrol-700);
  --good:var(--green-700);
  --warn:var(--red-700);
  --ring:var(--petrol-600);
  --footer-bg:var(--ink-950);
  --footer-fg:#95a2a6;
  --footer-strong:#f2f6f6;
  --footer-link:#c6d0d3;

  --display:"Archivo",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --text:"Source Serif 4",Georgia,"Times New Roman",serif;
  --radius:2px;
  --sheet-w:800px;
  --gutter:52px;
}

@media (prefers-color-scheme:dark){
  :root{
    --background:#0b0f10;
    --sheet:#151c1e;
    --muted:#1c2426;
    --foreground:#e8eeee;
    --muted-foreground:#9aa7ab;
    --rule:#e8eeee;
    --hairline:#2d383b;
    --primary:#0f6f78;
    --primary-hover:#0b585f;
    --link:var(--petrol-300);
    --good:#4cc08a;
    --warn:#e8817f;
    --ring:var(--petrol-300);
    --footer-bg:#070a0b;
    --footer-fg:#8e9a9e;
    --footer-strong:#e8eeee;
    --footer-link:#b9c4c7;
  }
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;min-height:100vh;display:flex;flex-direction:column;
  background:var(--background);
  color:var(--foreground);
  font:400 19px/1.62 var(--text);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{color:var(--link);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{text-decoration-color:var(--primary)}
:focus-visible{outline:2px solid var(--ring);outline-offset:3px}

.skip{position:absolute;left:-9999px;top:0}
.skip:focus{left:0;z-index:10;background:var(--rule);color:var(--background);padding:10px 16px;font:700 13px var(--display)}

.wrap{max-width:var(--sheet-w);margin:0 auto;padding:0 var(--gutter)}

/* ---- masthead ---- */
header.site{
  background:var(--sheet);
  border-top:6px solid var(--rule);
  border-bottom:2px solid var(--rule);
}
header.site .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--foreground)}
.brand .mark{width:23px;height:23px;flex:none;display:block}
.brand .name{font:800 15px/1 var(--display);letter-spacing:.1em;text-transform:uppercase}
nav.site{display:flex;gap:20px}
nav.site a{
  color:var(--muted-foreground);text-decoration:none;
  font:600 12px/1 var(--display);letter-spacing:.1em;text-transform:uppercase;
  padding:6px 0;border-bottom:2px solid transparent;
}
nav.site a:hover{color:var(--foreground)}
nav.site a[aria-current="page"]{color:var(--foreground);border-bottom-color:var(--primary)}

/* ---- sheet ---- */
main.wrap{
  flex:1 1 auto;width:100%;min-width:0;
  background:var(--sheet);
  border-left:1px solid var(--hairline);
  border-right:1px solid var(--hairline);
  padding:52px var(--gutter) 72px;
}

h1{
  font:800 clamp(34px,2.1rem + 1.4vw,46px)/1.08 var(--display);
  letter-spacing:-.022em;margin:0 0 14px;
}
h2{font:700 25px/1.2 var(--display);letter-spacing:-.014em;margin:0 0 12px}
h3{font:700 18px/1.3 var(--display);letter-spacing:-.005em;margin:30px 0 6px}
main.wrap>h2{
  margin-top:60px;padding-top:18px;border-top:2px solid var(--rule);
}
main.wrap>.panel+h2,main.wrap>.notes+h2,main.wrap>.contents+h2,main.wrap>.tbl+h2,main.wrap>.verdict+h2{
  border-top:0;padding-top:0;margin-top:46px;
}
p{margin:0 0 18px}
ul,ol{margin:0 0 18px;padding-left:22px}
li{margin:9px 0}
li::marker{color:var(--muted-foreground)}
strong{font-weight:600}

.dek{font:400 21px/1.45 var(--text);color:var(--muted-foreground);margin:0 0 20px}
.byline{
  font:700 11px/1 var(--display);letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted-foreground);margin:0 0 34px;padding-bottom:14px;
  border-bottom:1px solid var(--hairline);
}
.lead{font-size:21px;line-height:1.55}
.note{font:400 14px/1.5 var(--text);color:var(--muted-foreground)}

/* ---- the panel: the supplement-label motif ---- */
.panel{
  border-top:6px solid var(--rule);
  border-bottom:3px solid var(--rule);
  margin:32px 0 44px;
}
.panel-h{
  font:800 12px/1 var(--display);letter-spacing:.16em;text-transform:uppercase;
  margin:0;padding:13px 0 11px;border-bottom:1px solid var(--rule);
}
.panel dl{margin:0;padding:0}
.panel dl>div{
  display:flex;gap:20px;align-items:baseline;justify-content:space-between;
  padding:11px 0;border-bottom:1px solid var(--hairline);
}
.panel dl>div:last-child{border-bottom:0}
.panel dt{font:400 17px/1.4 var(--text);color:var(--muted-foreground);margin:0}
.panel dd{
  margin:0;text-align:right;
  font:700 17px/1.4 var(--display);font-variant-numeric:tabular-nums;
}

.notes{border-top:6px solid var(--rule);border-bottom:3px solid var(--rule);margin:32px 0 44px;padding:0}
.notes dl{margin:0;padding:0}
.notes dl>div{padding:16px 0;border-bottom:1px solid var(--hairline)}
.notes dl>div:last-child{border-bottom:0}
.notes dt{font:800 11px/1 var(--display);letter-spacing:.16em;text-transform:uppercase;margin:0 0 7px}
.notes dd{margin:0;font-size:17px;line-height:1.55;color:var(--muted-foreground)}

.contents{border-top:6px solid var(--rule);border-bottom:3px solid var(--rule);margin:32px 0 44px}
.contents li{list-style:none;margin:0;padding:17px 0;border-bottom:1px solid var(--hairline)}
.contents li:last-child{border-bottom:0}
.contents ul{margin:0;padding:0}
.contents a{
  display:inline-block;font:700 19px/1.25 var(--display);letter-spacing:-.012em;
  color:var(--link);text-decoration:none;margin-bottom:5px;
}
.contents a:hover{text-decoration:underline;text-decoration-thickness:2px}
.contents p{margin:0;font-size:17px;line-height:1.5;color:var(--muted-foreground)}

/* ---- verdict ---- */
.verdict{
  background:var(--muted);
  border-top:6px solid var(--rule);border-bottom:3px solid var(--rule);
  padding:22px 26px 26px;margin:32px 0;
}
.verdict h2{
  font:800 12px/1 var(--display);letter-spacing:.16em;text-transform:uppercase;
  margin:0 0 16px;padding-bottom:11px;border-bottom:1px solid var(--rule);
}
.verdict p{font-size:18px;line-height:1.58}
.verdict p:last-of-type{margin-bottom:22px}

/* ---- tables ---- */
.tbl{overflow-x:auto;margin:26px 0 34px;-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse;border-top:6px solid var(--rule);font-size:17px}
th{
  font:800 11px/1.3 var(--display);letter-spacing:.13em;text-transform:uppercase;
  color:var(--foreground);text-align:left;padding:12px 16px 10px 0;
  border-bottom:2px solid var(--rule);white-space:nowrap;
}
td{padding:13px 16px 13px 0;border-bottom:1px solid var(--hairline);vertical-align:baseline}
th:last-child,td:last-child{padding-right:0}
tr:last-child td{border-bottom:3px solid var(--rule)}
td.num{font:700 17px/1.4 var(--display);font-variant-numeric:tabular-nums;white-space:nowrap}
.tag{
  display:inline-block;margin-left:8px;vertical-align:1px;
  font:800 10px/1 var(--display);letter-spacing:.1em;text-transform:uppercase;
  color:var(--good);border:1px solid currentColor;border-radius:var(--radius);padding:4px 6px;
}

/* ---- calls to action ---- */
.btn{
  display:inline-block;background:var(--primary);color:var(--primary-foreground);
  text-decoration:none;border-radius:var(--radius);
  font:700 14px/1.3 var(--display);letter-spacing:.07em;text-transform:uppercase;
  padding:16px 28px;transition:background .15s ease;
}
.btn:hover{background:var(--primary-hover)}
.cta{display:block;margin:26px 0}
.btn.sub{
  background:transparent;color:var(--foreground);
  box-shadow:inset 0 0 0 2px var(--rule);font-size:13px;padding:13px 22px;
}
.btn.sub:hover{background:var(--muted)}

/* ---- disclosure, faq, related ---- */
.disc{
  background:var(--muted);border-left:3px solid var(--primary);
  padding:16px 20px;margin:36px 0 0;
  font:400 15px/1.55 var(--text);color:var(--muted-foreground);
}
.faq h2{margin-top:60px;padding-top:18px;border-top:2px solid var(--rule)}
.faq h3{margin-bottom:4px}
.related{border-top:2px solid var(--rule);margin-top:40px;padding-top:18px}
.related a{
  display:block;padding:11px 0;border-bottom:1px solid var(--hairline);
  font:700 16px/1.35 var(--display);color:var(--foreground);text-decoration:none;
}
.related a:last-child{border-bottom:0}
.related a:hover{color:var(--primary)}
.related a::after{content:" →";color:var(--primary)}

/* ---- footer ---- */
footer.site{
  flex:none;
  background:var(--footer-bg);color:var(--footer-fg);
  padding:34px 0 38px;
  font:400 15px/1.6 var(--text);
}
footer.site .brandline{
  font:800 12px/1 var(--display);letter-spacing:.16em;text-transform:uppercase;
  color:var(--footer-strong);margin:0 0 9px;
}
footer.site p{margin:0 0 6px}
footer.site a{color:var(--footer-link)}
footer.site a:hover{color:#fff}

@media (max-width:840px){
  :root{--gutter:22px}
  body{font-size:18px}
  main.wrap{border-left:0;border-right:0;padding:34px var(--gutter) 52px}
  h1{letter-spacing:-.018em}
  h2{font-size:22px}
  .dek,.lead{font-size:19px}
  header.site .wrap{flex-wrap:wrap;padding-top:12px;padding-bottom:12px;gap:10px}
  nav.site{gap:16px;width:100%}
  .verdict{padding:20px 18px 22px}
  .btn{display:block;text-align:center;padding:16px 20px}
  .panel dl>div{gap:12px}
  .panel dt,.panel dd{font-size:16px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}