/* PetFishOilGuide — "label lab" identity.
   Layout: one reading column (≈44rem) under a Supplement-Facts style masthead; data blocks
   (tables, product cards, calculator, answer box) are drawn as label panels with heavy navy rules. */
@font-face{font-family:"Archivo";src:url(/fonts/Archivo-normal-600-900.woff2) format("woff2");font-weight:600 900;font-stretch:75% 100%;font-display:swap}
@font-face{font-family:"Atkinson Hyperlegible";src:url(/fonts/AtkinsonHyperlegible-normal-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Atkinson Hyperlegible";src:url(/fonts/AtkinsonHyperlegible-normal-700.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Atkinson Hyperlegible";src:url(/fonts/AtkinsonHyperlegible-italic-400.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(/fonts/IBMPlexMono-normal-500.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(/fonts/IBMPlexMono-normal-600.woff2) format("woff2");font-weight:600;font-display:swap}

:root{
  --paper:#FBFAF7;   /* page */
  --panel:#FFFFFF;   /* label panels */
  --ink:#0E2A47;     /* navy: text, rules, header */
  --ink-2:#4A5D72;   /* secondary text */
  --hair:#D6DCE3;    /* hairlines inside panels */
  --sea:#1C6A8A;     /* links */
  --coral:#E8664A;   /* call to action */
  --coral-ink:#0E2A47;
  --foam:#E9F2F4;    /* tinted surface */
  --sand:#F4EEE3;    /* warm surface */
  --kelp:#2E7D5B;    /* positive */
  --warn-bg:#FFF4DC; --warn-rule:#C98A0B;
  --ctl:#6B7A8C;     /* form control borders, ≥3:1 */
  --on-ink:#FBFAF7;
  --mark-cut:#FBFAF7;
  --f-display:"Archivo","Arial Narrow","Helvetica Neue",Arial,sans-serif;
  --f-body:"Atkinson Hyperlegible",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Consolas,monospace;
  --rule-heavy:8px; --rule-mid:3px;
  --r:4px;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --paper:#0A1521;--panel:#0F1E2E;--ink:#E7EEF6;--ink-2:#A4B4C6;--hair:#26384C;--sea:#7CC7E3;
  --coral:#F27E63;--coral-ink:#0A1521;--foam:#12283A;--sand:#1C2530;--kelp:#6FC79F;
  --warn-bg:#2B2413;--warn-rule:#E0A93A;--ctl:#7F90A4;--on-ink:#0A1521;--mark-cut:#0A1521;color-scheme:dark}}
:root[data-theme="dark"]{
  --paper:#0A1521;--panel:#0F1E2E;--ink:#E7EEF6;--ink-2:#A4B4C6;--hair:#26384C;--sea:#7CC7E3;
  --coral:#F27E63;--coral-ink:#0A1521;--foam:#12283A;--sand:#1C2530;--kelp:#6FC79F;
  --warn-bg:#2B2413;--warn-rule:#E0A93A;--ctl:#7F90A4;--on-ink:#0A1521;--mark-cut:#0A1521;color-scheme:dark}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 1.0625rem/1.65 var(--f-body)}
a{color:var(--sea);text-decoration-thickness:1px;text-underline-offset:.18em}
a:hover{text-decoration-thickness:2px}
img{max-width:100%}
.ic{width:1.15em;height:1.15em;flex:none;vertical-align:-.2em}
.ic-lg{width:2.4rem;height:2.4rem}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap;border:0}
.skip-link{position:absolute;left:8px;top:-60px;z-index:100;background:var(--panel);color:var(--ink);border:2px solid var(--ink);border-radius:var(--r);padding:10px 14px;font-weight:700}
.skip-link:focus,.skip-link:focus-visible{top:8px}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--coral);outline-offset:2px}

/* ── masthead ─────────────────────────────────────────── */
.site-head{background:var(--paper);border-bottom:var(--rule-heavy) solid var(--ink)}
.head-inner{max-width:72rem;margin:0 auto;padding:14px 16px 6px;display:flex;flex-wrap:wrap;align-items:center;gap:6px 20px;justify-content:space-between}
.logo{display:inline-flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none}
.logo-mark{width:34px;height:34px;color:var(--ink)}
.logo-word{font:900 1.55rem/1 var(--f-display);font-stretch:78%;letter-spacing:.01em;text-transform:uppercase}
.logo-word b{font-weight:900;color:var(--paper);background:var(--coral);color:var(--coral-ink);padding:.06em .28em .02em;margin-left:.22em;border-radius:2px}
.logo-tag{margin:0;font:500 .78rem/1.2 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.main-nav{max-width:72rem;margin:0 auto;padding:4px 10px 10px;display:flex;flex-wrap:wrap;gap:4px}
.main-nav a{display:inline-flex;align-items:center;gap:7px;padding:7px 11px;border-radius:999px;color:var(--ink);text-decoration:none;font:700 .92rem/1 var(--f-display);font-stretch:88%;letter-spacing:.01em}
.main-nav a .ic{width:1.15rem;height:1.15rem;color:var(--sea)}
.main-nav a:hover{background:var(--foam)}
.main-nav a[aria-current]{background:var(--ink);color:var(--paper)}
.main-nav a[aria-current] .ic{color:var(--coral)}

/* ── reading column ───────────────────────────────────── */
.wrap{max-width:46rem;margin:0 auto;padding:0 16px 64px}
.crumbs{font:500 .78rem/1.4 var(--f-mono);letter-spacing:.03em;color:var(--ink-2);margin:18px 0 0;text-transform:uppercase}
.crumbs a{color:var(--ink-2)}
h1,h2,h3{font-family:var(--f-display);color:var(--ink);text-wrap:balance}
h1{font-weight:900;font-stretch:80%;font-size:clamp(2.05rem,5.2vw,3.15rem);line-height:1.02;letter-spacing:-.005em;margin:18px 0 12px}
h2{font-weight:800;font-stretch:85%;font-size:clamp(1.45rem,3.2vw,1.85rem);line-height:1.12;margin:44px 0 10px;padding-top:12px;border-top:var(--rule-mid) solid var(--ink)}
h3{font-weight:800;font-stretch:90%;font-size:1.2rem;line-height:1.2;margin:28px 0 8px}
p,li{max-width:65ch}
.byline{font:500 .8rem/1.5 var(--f-mono);color:var(--ink-2);margin:0 0 4px;letter-spacing:.01em}
.byline a{color:var(--ink-2)}
.disclosure{font-size:.85rem;color:var(--ink-2)}
article>.disclosure{margin:0 0 22px;padding:6px 10px;background:var(--sand);border-radius:var(--r);display:inline-block}
strong,b{font-weight:700}

/* quick answer: a facts strip */
.answer{position:relative;background:var(--panel);border:2px solid var(--ink);border-top:var(--rule-heavy) solid var(--ink);padding:30px 18px 14px;margin:18px 0 26px;font-size:1.08rem;max-width:none}
.answer::before{content:"Quick answer";position:absolute;top:6px;left:18px;font:800 .72rem/1 var(--f-display);font-stretch:90%;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.note{background:var(--warn-bg);border-left:6px solid var(--warn-rule);padding:12px 16px;border-radius:0;font-size:.97rem;max-width:none}

/* ── comparison table: a label panel ─────────────────── */
.tbl-wrap{overflow-x:auto;margin:20px 0 6px;border:2px solid var(--ink);border-top:var(--rule-heavy) solid var(--ink);background:var(--panel)}
/* data tables may break out of the 46rem reading column up to 68rem, centred on the column */
@media (min-width:900px){.tbl-wrap:has(.ptable){width:min(68rem,calc(100vw - 48px));position:relative;left:50%;transform:translateX(-50%)}}
.tbl-wrap td{font-variant-numeric:tabular-nums}
.tbl-wrap caption{caption-side:top;text-align:left;padding:10px 10px 0;font:800 .78rem/1.3 var(--f-display);font-stretch:88%;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.tbl-wrap table{border-collapse:collapse;width:100%;font-size:.93rem}
.tbl-wrap th{font:800 .74rem/1.2 var(--f-display);font-stretch:85%;letter-spacing:.08em;text-transform:uppercase;text-align:left;color:var(--ink);padding:10px 10px 8px;border-bottom:var(--rule-mid) solid var(--ink);vertical-align:bottom;white-space:nowrap}
.tbl-wrap td{padding:10px;border-bottom:1px solid var(--hair);vertical-align:middle}
.tbl-wrap tr:last-child td{border-bottom:0}
.tbl-wrap tbody tr:hover td{background:var(--foam)}
.ptable .n{text-align:right;font:500 .9rem/1.3 var(--f-mono);white-space:nowrap}
.ptable th.n{text-align:right}
.ptable .key{font-weight:600;background:color-mix(in srgb,var(--coral) 9%,transparent)}
.ptable .prod{font-weight:700;min-width:13rem}
.ptable .prod a{color:var(--ink)}
.ic-form{width:1.35rem;height:1.35rem;margin-right:8px;color:var(--sea);vertical-align:-.32em}
.src-note{font:500 .76rem/1.45 var(--f-mono);color:var(--ink-2);letter-spacing:.01em}

/* ── buy button ───────────────────────────────────────── */
.buy{display:inline-flex;align-items:center;gap:8px;min-height:44px;background:var(--coral);color:var(--coral-ink);padding:8px 14px;border-radius:var(--r);text-decoration:none;font:800 .86rem/1 var(--f-display);font-stretch:88%;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;box-shadow:inset 0 -3px 0 color-mix(in srgb,var(--ink) 25%,transparent)}
.buy:hover{filter:brightness(1.05)}
.buy .ic-arrow{width:1rem;height:1rem;transition:transform .15s}
.buy:hover .ic-arrow{transform:translateX(3px)}
.buy-na{background:var(--hair);color:var(--ink-2);box-shadow:none}

/* ── product card: Supplement Facts ───────────────────── */
.pcard{background:var(--panel);border:2px solid var(--ink);margin:26px 0;padding:0}
.pcard-head{display:flex;gap:12px;align-items:center;padding:14px 16px 12px;border-bottom:var(--rule-heavy) solid var(--ink)}
.pcard-head .ic-lg{color:var(--sea)}
.pcard h3{margin:0;font-size:1.25rem}
.pcard-tags{margin:6px 0 0;display:flex;flex-wrap:wrap;gap:6px}
.sp,.tag{display:inline-flex;align-items:center;gap:4px;font:700 .72rem/1 var(--f-display);font-stretch:90%;letter-spacing:.06em;text-transform:uppercase;padding:4px 7px;border-radius:999px}
.sp{background:var(--foam);color:var(--ink)}
.sp .ic{width:.95rem;height:.95rem}
.tag{border:1px solid var(--ink-2);color:var(--ink-2)}
.facts-big{display:grid;grid-template-columns:1fr auto;align-items:end;gap:2px 12px;padding:12px 16px;border-bottom:var(--rule-mid) solid var(--ink)}
.facts-label{font:800 .78rem/1.1 var(--f-display);font-stretch:85%;letter-spacing:.1em;text-transform:uppercase}
.facts-num{grid-row:span 2;font:600 2.2rem/1 var(--f-mono);letter-spacing:-.02em}
.facts-num small{font-size:.9rem;font-weight:500}
.facts-per{font:500 .82rem/1.2 var(--f-mono);color:var(--ink-2)}
.facts-none .facts-per{grid-column:1/-1}
.facts{display:grid;grid-template-columns:minmax(9rem,max-content) 1fr;margin:0;padding:4px 16px 8px;font-size:.93rem}
.facts dt,.facts dd{margin:0;padding:7px 0;border-bottom:1px solid var(--hair)}
.facts dt{color:var(--ink-2);padding-right:14px}
.facts dd{font-weight:700}
.facts dt:last-of-type,.facts dd:last-of-type{border-bottom:0}
.pcard-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;padding:10px 16px 14px;border-top:1px solid var(--ink)}
.pcard-foot .src-note{margin:0}

/* ── hub tiles (home) ─────────────────────────────────── */
.hubs{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,13.5rem),1fr));gap:12px;margin:22px 0;padding:0;list-style:none;max-width:none}
.hubs li{max-width:none}
.hubs a{display:flex;gap:12px;align-items:flex-start;height:100%;padding:14px;background:var(--panel);border:2px solid var(--ink);color:var(--ink);text-decoration:none}
.hubs a:hover{background:var(--foam)}
.hubs .ic{width:2rem;height:2rem;color:var(--sea);margin-top:2px}
.hubs b{display:block;font:800 1.02rem/1.15 var(--f-display);font-stretch:88%}
.hubs span{display:block;font-size:.86rem;color:var(--ink-2);margin-top:3px}

/* ── calculator: a dosing card ────────────────────────── */
.calc{background:var(--panel);border:2px solid var(--ink);border-top:var(--rule-heavy) solid var(--ink);padding:16px 18px 18px;margin:24px 0}
.calc h2{border:0;margin:0 0 12px;padding:0;font-size:1.4rem}
.calc-form{display:grid;gap:8px 16px;grid-template-columns:minmax(0,1fr);align-items:center}
@media (min-width:560px){.calc-form{grid-template-columns:minmax(9rem,max-content) minmax(0,1fr)}}
.calc-form label{display:grid;gap:6px;font:800 .78rem/1.2 var(--f-display);font-stretch:88%;letter-spacing:.08em;text-transform:uppercase}
.calc-form .row{display:flex;gap:8px}
.calc-form select{font:400 1rem/1.3 var(--f-body)}
.calc-form input,.calc-form select{font-size:1.02rem;font-family:var(--f-mono);padding:10px 12px;border:2px solid var(--ctl);border-radius:var(--r);background:var(--paper);color:var(--ink);max-width:100%;min-height:46px;width:100%}
.calc-form .row{min-width:0}
.calc-form .row input{flex:1 1 7rem;width:100%;min-width:0}
.calc-form .row select{flex:0 0 5.5rem;width:5.5rem}
.calc-form select#cp{font-family:var(--f-body)}
.calc-out{margin-top:16px;padding-top:12px;border-top:var(--rule-mid) solid var(--ink)}
.calc-out p{margin:.5em 0}
.calc-out strong{font-weight:700;font-size:1.06em}
.calc-disc{font-size:.84rem;color:var(--ink-2)}
.calc-msg{margin:0;font-size:.88rem;color:var(--ink-2)}.calc-msg:empty{display:none}
.calc-warn{background:var(--warn-bg);border-left:6px solid var(--warn-rule);color:var(--ink);padding:10px 14px;font-size:.95rem}
.calc-warn[role=alert]{font-weight:700;border-left-color:var(--coral)}

/* ── FAQ ──────────────────────────────────────────────── */
.faq{margin-top:48px}
.faq details{border-bottom:1px solid var(--hair);padding:12px 0}
.faq summary{cursor:pointer;font:800 1.05rem/1.3 var(--f-display);font-stretch:90%;list-style:none;display:flex;justify-content:space-between;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font:600 1.3rem/1 var(--f-mono);color:var(--coral)}
.faq details[open] summary::after{content:"–"}
.faq details p{margin:.6em 0 .2em}
.missing-list{padding-left:1.2em}
.missing-list li{margin:.35em 0}

/* ── footer ───────────────────────────────────────────── */
.site-foot{background:var(--ink);color:var(--on-ink);margin-top:40px;border-top:var(--rule-heavy) solid var(--coral)}
.foot-inner{max-width:46rem;margin:0 auto;padding:28px 16px 36px;display:grid;gap:14px;font-size:.88rem}
.site-foot a{color:var(--on-ink)}
.site-foot .disclosure,.site-foot .vet-note,.site-foot .copy{color:color-mix(in srgb,var(--on-ink) 82%,transparent);margin:0}
.foot-brand{display:flex;gap:12px;align-items:flex-start}
.foot-brand .logo-mark{width:36px;height:36px;color:var(--coral);--mark-cut:var(--ink);flex:none}
.foot-brand p{margin:0}
.foot-nav{display:flex;flex-wrap:wrap;gap:8px 18px;font:700 .9rem/1.2 var(--f-display);font-stretch:90%}
.copy{font-family:var(--f-mono);font-size:.78rem}

/* ── misc ─────────────────────────────────────────────── */
td,th{overflow-wrap:break-word}
.tbl-wrap th{overflow-wrap:normal}
.ptable td[data-label="Form"],.ptable td[data-label="Serving"],.ptable td[data-label="NASC seal"]{white-space:nowrap}
.ptable td[data-label="Form"]{text-transform:capitalize}
.ptable .prod{overflow-wrap:anywhere}
hr{border:0;border-top:var(--rule-mid) solid var(--ink);margin:32px 0}
blockquote{margin:16px 0;padding:4px 16px;border-left:4px solid var(--coral)}
@media (max-width:640px){
  .logo-word{font-size:1.3rem}
  .logo-tag{display:none}
  .main-nav{overflow-x:auto;flex-wrap:nowrap;padding-bottom:12px}
  .main-nav a{white-space:nowrap}
  .ptable thead{display:none}
  .ptable,.ptable tbody,.ptable tr,.ptable td{display:block}
  .ptable tr{border-bottom:var(--rule-mid) solid var(--ink);padding:10px 12px}
  .ptable tr:last-child{border-bottom:0}
  .ptable td{display:flex;justify-content:space-between;gap:12px;border:0;padding:5px 0;text-align:right}
  .ptable td::before{content:attr(data-label);font:800 .72rem/1.4 var(--f-display);font-stretch:88%;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);text-align:left}
  .ptable td.prod{display:block;text-align:left;font-size:1.02rem;padding-bottom:8px}
  .ptable td.prod::before{display:none}
  .ptable td:last-child::before{display:none}
  .ptable td:last-child{justify-content:flex-start;padding-top:8px}
  .ptable .key{background:none}
  article table:not(.ptable),main table:not(.ptable){display:block;max-width:100%;overflow-x:auto}
  .facts{grid-template-columns:1fr}
  .facts dt{border-bottom:0;padding-bottom:0}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
@media print{.site-head nav,.buy,.skip-link{display:none}.site-foot{background:none;color:#000}}
/* compact buy button and tighter cells inside comparison tables */
.ptable th.n{font-family:var(--f-display);font-weight:800;font-size:.74rem;letter-spacing:.08em}
.ptable td,.ptable th{padding-left:8px;padding-right:8px}
.ptable .buy{min-height:40px;padding:6px 10px;font-size:.74rem;line-height:1.15;white-space:normal;text-align:left;max-width:9.5rem}
.ptable .buy .ic-arrow{width:.85rem;height:.85rem}
.ptable .prod{min-width:11rem}
@media (max-width:640px){.ptable .buy{max-width:none;min-height:44px;font-size:.84rem}}
/* absolutely positioned .sr-only spans inside scrolling tables must not widen the page */
.tbl-wrap,.pcard,.calc{position:relative}
/* search fallback for products whose ASIN is not confirmed yet: same tap target, outline style */
.buy-search{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 2px var(--coral)}
.buy-search:hover{background:color-mix(in srgb,var(--coral) 14%,transparent);filter:none}