/*
 * serie · buysalviaextract.net
 * 1 Concept: a dilution series on a lab bench. Seven glass vials from pale to deep; one slider moves the light along them.
 * 2 Type: Google Sans Flex (text; headings and big numbers on its width axis at 125%) + Google Sans Code (labels, ticks, table heads), self-hosted woff2, latin + latin-ext.
 * 3 Palette: bench #eef0e9, sheet #fbfbf7, ink #1a1f14, moss text #4a5a16, caution #9c3f1a; series t0 #eef0d6 → t6 #2c3510.
 * 4 Layout signature: range-slider explorer on the home (vial rack + range + swapping spec card with fold bar and product);
 *   articles open with a vial strip (each menu page one vial) and a sticky contents rail beside a single text column.
 * 5 Detail: fold bars, X small leaf squares folding into one product square, and product cards on a plate tinted by strength.
 */

@font-face{font-family:"Google Sans Flex";font-style:normal;font-weight:400 700;font-stretch:100% 125%;font-display:swap;src:url(fonts/google-sans-flex-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Google Sans Flex";font-style:normal;font-weight:400 700;font-stretch:100% 125%;font-display:swap;src:url(fonts/google-sans-flex-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Google Sans Code";font-style:normal;font-weight:400 600;font-display:swap;src:url(fonts/google-sans-code-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Google Sans Code";font-style:normal;font-weight:400 600;font-display:swap;src:url(fonts/google-sans-code-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
:root{
  --bench:#eef0e9;--sheet:#fbfbf7;--ink:#1a1f14;--mute:#4d5547;--rule:#d5d9cd;--moss:#4a5a16;--warn:#9c3f1a;
  --t0:#eef0d6;--t1:#dfe5b0;--t2:#c8d27a;--t3:#a7b545;--t4:#7f8f27;--t5:#56661b;--t6:#2c3510;
  --wide:"Google Sans Flex",system-ui,sans-serif;
  --text:"Google Sans Flex",system-ui,sans-serif;
  --code:"Google Sans Code",ui-monospace,monospace;
  --ease:cubic-bezier(.32,.72,0,1);
}
.t0{--tint:var(--t0)}.t1{--tint:var(--t1)}.t2{--tint:var(--t2)}.t3{--tint:var(--t3)}.t4{--tint:var(--t4)}.t5{--tint:var(--t5)}.t6{--tint:var(--t6)}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bench);color:var(--ink);font:400 1.0625rem/1.65 var(--text);-webkit-font-smoothing:antialiased;overflow-x:clip}
img{max-width:100%;height:auto;display:block}
a{color:var(--moss);text-underline-offset:.18em;text-decoration-thickness:1px}
a:hover{color:var(--ink)}
:focus-visible{outline:3px solid var(--t4);outline-offset:3px;border-radius:4px}
.wrap{width:min(1200px,100% - 2.5rem);margin-inline:auto}
.skip{position:absolute;left:-999px;top:0;background:var(--ink);color:#fff;padding:.6rem 1rem;z-index:20}
.skip:focus{left:1rem;top:1rem}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.js .nojs-only{display:none}
html:not(.js) .js-only{display:none}
h1,h2,h3{font-family:var(--wide);font-weight:600;line-height:1.12;letter-spacing:-.01em;margin:0}
.kicker{font:600 .72rem/1.3 var(--wide);letter-spacing:.12em;text-transform:uppercase;color:var(--mute);margin:0 0 1rem}

/* header */
.top{background:var(--sheet);border-bottom:1px solid var(--rule);position:sticky;top:0;z-index:10}
.top-row{display:flex;align-items:center;gap:1.5rem;min-height:4rem}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--ink);margin-right:auto}
.brand img{width:2.5rem;height:2.5rem}
.brand-name{font:700 .95rem/1 var(--wide);letter-spacing:.01em}
.primary{display:none;gap:.15rem}
.primary a,.menu nav a{display:inline-flex;align-items:center;gap:.45rem;padding:.45rem .7rem;border-radius:999px;color:var(--ink);text-decoration:none;font-size:.9rem;font-weight:500}
.primary a:hover{background:var(--bench)}
.primary a[aria-current]{background:var(--ink);color:#fff}
.dot{width:.55rem;height:.55rem;border-radius:50%;background:var(--tint);box-shadow:inset 0 0 0 1px rgba(26,31,20,.25)}
.menu summary{cursor:pointer;list-style:none;font:600 .85rem/1 var(--wide);padding:.6rem .9rem;border:1px solid var(--rule);border-radius:999px}
.menu summary::-webkit-details-marker{display:none}
.menu nav{position:absolute;right:1.25rem;top:3.6rem;background:var(--sheet);border:1px solid var(--rule);border-radius:14px;padding:.5rem;display:grid;min-width:13rem;box-shadow:0 20px 40px -24px rgba(26,31,20,.5)}
@media(min-width:1000px){.primary{display:flex}.menu{display:none}}

/* home intro */
.intro{display:grid;gap:1.5rem;padding:2.5rem 0 1rem}
.intro h1{font-size:clamp(2rem,5.2vw,3.5rem);font-weight:650;max-width:16ch}
.lead{font-size:1.15rem;color:var(--mute);max-width:52ch;margin:1.1rem 0 0}
.intro-photo{margin:0;border-radius:18px;overflow:hidden;aspect-ratio:3/2;background:var(--t0)}
.intro-photo img{width:100%;height:100%;object-fit:cover}
@media(min-width:900px){.intro{grid-template-columns:5fr 6fr;align-items:center;padding:3.5rem 0 1.5rem;gap:3rem}}

/* bench explorer */
.bench{padding:1.5rem 0 3rem}
.bench>.wrap{background:var(--sheet);border:1px solid var(--rule);border-radius:24px;padding:clamp(1.25rem,3vw,2.5rem)}
.bench-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:.5rem 2rem;margin-bottom:1.5rem}
.bench-head h2{font-size:clamp(1.25rem,2.4vw,1.6rem)}
.bench-hint{margin:0;color:var(--mute);font-size:.92rem}
.rack{--at:1;position:relative;display:grid;grid-template-columns:repeat(7,1fr);gap:.25rem;align-items:end;padding:1rem .25rem 0;border-bottom:3px solid var(--ink)}
.rack-vial{position:relative;z-index:1;display:grid;justify-items:center;gap:.35rem;text-decoration:none;color:var(--mute);padding:.4rem 0 .6rem;transition:transform .5s var(--ease)}
.rack-vial .vial{width:min(64px,100%);height:auto;transition:transform .5s var(--ease)}
.rack-vial:hover .vial{transform:translateY(-4px)}
.rack-label{font:600 .8rem/1 var(--wide);letter-spacing:.04em}
.rack-vial[aria-current] .vial{transform:translateY(-10px)}
.rack-vial[aria-current] .rack-label{color:var(--ink)}
.rack-light{position:absolute;z-index:0;bottom:0;top:0;left:calc((100% - .5rem) / 7 * var(--at) + .25rem);width:calc((100% - .5rem) / 7);background:linear-gradient(#fff0,#fff 70%);border-radius:14px 14px 0 0;box-shadow:inset 0 0 0 1px var(--rule);transition:left .55s var(--ease)}
html:not(.js) .rack-light{display:none}
.vial-cap{fill:var(--ink)}
.vial-glass{fill:#fff;stroke:var(--ink);stroke-width:2.2}
.vial-liquid{fill:var(--tint)}
.vial-shine{stroke:#fff;stroke-width:3;stroke-linecap:round;opacity:.7}

.slider{margin:1.4rem 0 .5rem;padding:0 calc(100% / 14 - 11px)}
.slider input{--fill:16.6%;width:100%;-webkit-appearance:none;appearance:none;height:28px;background:transparent;cursor:pointer;margin:0}
.slider input::-webkit-slider-runnable-track{height:6px;border-radius:6px;background:linear-gradient(90deg,var(--ink) var(--fill),var(--rule) var(--fill))}
.slider input::-moz-range-track{height:6px;border-radius:6px;background:var(--rule)}
.slider input::-moz-range-progress{height:6px;border-radius:6px;background:var(--ink)}
.slider input::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;margin-top:-9px;border-radius:50%;background:#fff;border:3px solid var(--ink);box-shadow:0 4px 10px -4px rgba(26,31,20,.6)}
.slider input::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:#fff;border:3px solid var(--ink)}
.ticks{list-style:none;margin:.3rem -1rem 0;padding:0;display:flex;justify-content:space-between}
.ticks li{width:2.75rem;text-align:center}
.ticks a{font:500 .74rem/1 var(--wide);color:var(--mute);text-decoration:none;display:inline-block;padding:.35rem .1rem;border-top:2px solid var(--rule)}
.ticks a:hover{color:var(--ink);border-color:var(--ink)}

.specs{display:grid;gap:1.25rem;margin-top:1.5rem}
.js .spec{display:none}
.js .spec.is-on{display:grid;animation:rise .45s var(--ease)}
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.spec{display:grid;gap:1.5rem;border-top:1px solid var(--rule);padding-top:1.5rem;scroll-margin-top:5rem}
.spec-x{margin:0;font:700 clamp(3.5rem,9vw,6rem)/.9 var(--wide);letter-spacing:-.03em;display:flex;align-items:baseline;gap:.05em}
.spec-x span{color:var(--ink)}
.spec-x::after{content:"";width:.5em;height:.5em;border-radius:50%;background:var(--tint);margin-left:.15em;box-shadow:inset 0 0 0 2px rgba(26,31,20,.2);align-self:center}
.spec-title{font-size:1.05rem;margin:1rem 0 .4rem}
.spec-main p{max-width:58ch;margin:.4rem 0}
.spec-fold{margin:1rem 0;padding:1rem;border-radius:14px;background:var(--bench)}
.foldbar{width:100%;max-width:300px;height:auto;display:block}
.leafsq{fill:var(--t3)}
.prodsq{fill:var(--tint);stroke:var(--ink);stroke-width:1.5}
.foldarrow{fill:none;stroke:var(--ink);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.spec-fold-cap{font:500 .78rem/1.3 var(--wide);color:var(--mute);margin:.6rem 0 0!important}
.spec-nums{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;margin:1rem 0}
.spec-nums div{border-left:3px solid var(--tint,var(--t3));padding:.1rem 0 .1rem .7rem}
.spec .spec-nums div{border-color:var(--ink)}
.spec-nums dt{font-size:.75rem;color:var(--mute);text-transform:uppercase;letter-spacing:.08em}
.spec-nums dd{margin:0;font:650 1.15rem/1.3 var(--wide)}
.spec-shop span{font:600 .72rem/1 var(--wide);text-transform:uppercase;letter-spacing:.1em;background:var(--ink);color:#fff;padding:.25rem .5rem;border-radius:4px;margin-right:.35rem;vertical-align:.1em}
.spec-caution{color:var(--warn);font-weight:500;padding-left:1.4rem;position:relative}
.spec-caution::before{content:"";position:absolute;left:0;top:.45em;width:.7rem;height:.7rem;border:2px solid var(--warn);border-radius:50%}
.spec-more a{font-weight:600}
.spec-card{display:grid;gap:.4rem;text-decoration:none;color:var(--ink);background:var(--bench);border-radius:18px;padding:1rem;border:1px solid var(--rule);transition:transform .4s var(--ease)}
.spec-card:hover{transform:translateY(-3px)}
.spec-card img{border-radius:12px;background:#fff;aspect-ratio:1;object-fit:contain;width:100%}
.bench-note{margin:1.5rem 0 0;font-size:.85rem;color:var(--mute)}
@media(min-width:820px){.spec{grid-template-columns:1fr 300px;align-items:start}}

/* buttons, product cards */
.btn{display:inline-flex;justify-content:center;align-items:center;gap:.5rem;background:var(--ink);color:#fff;border-radius:999px;padding:.7rem 1.1rem;font:600 .85rem/1.1 var(--wide);letter-spacing:.01em;margin-top:.4rem}
.btn::after{content:"";width:.45rem;height:.45rem;border-top:2px solid currentColor;border-right:2px solid currentColor;transform:rotate(45deg)}
a:hover .btn{background:var(--t5)}
.pc-name{font-weight:600;line-height:1.3}
.pc-meta{display:flex;justify-content:space-between;gap:.5rem;font-size:.9rem;color:var(--mute)}
.pc-price{font:650 1rem/1.3 var(--wide);color:var(--ink)}
.products{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:1rem;margin:1.75rem 0}
.product-feature{margin:1.75rem 0}
.pcard{display:grid;grid-template-rows:auto 1fr;text-decoration:none;color:var(--ink);background:var(--sheet);border:1px solid var(--rule);border-radius:18px;overflow:hidden;transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.pcard:hover{transform:translateY(-3px);box-shadow:0 18px 30px -24px rgba(26,31,20,.55)}
.pcard-plate{display:block;background:var(--tint);padding:1rem}
.pcard-plate img{border-radius:10px;background:#fff;aspect-ratio:1;object-fit:contain;width:100%}
.pcard-body{display:flex;flex-direction:column;gap:.35rem;padding:.9rem 1rem 1rem}
.pcard-body .btn{margin-top:auto;align-self:flex-start}
.pcard-x{font:700 .72rem/1 var(--wide);letter-spacing:.08em;color:var(--mute)}
@media(min-width:620px){
  .pcard-wide{grid-template-columns:180px 1fr;grid-template-rows:none}
  .pcard-wide .pcard-body{padding:1.5rem;justify-content:center}
  .pcard-wide .pc-name{font:650 1.3rem/1.25 var(--wide)}
}

/* home body */
.home-body{padding:1rem 0 4rem}
.home-body .prose{max-width:46rem;margin-inline:auto}

/* article pages */
.page-head{background:var(--sheet);border-bottom:1px solid var(--rule);padding:1.75rem 0 2.5rem}
.page-head h1{font-size:clamp(1.75rem,4.2vw,3rem);max-width:22ch}
.page-head .lead{max-width:60ch}
.stamp{font-size:.82rem;color:var(--mute);margin:1rem 0 0}
.strip{list-style:none;margin:0 0 2rem;padding:0;display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.strip li a{display:block;height:2.6rem;border-radius:0 0 10px 10px;background:var(--tint);border:1.5px solid var(--ink);border-top:none;position:relative;text-decoration:none;color:var(--ink)}
.strip li.t4 a,.strip li.t5 a,.strip li.t6 a{color:#fff}
.strip li a span{position:absolute;left:.5rem;bottom:.35rem;font:600 .68rem/1 var(--wide);letter-spacing:.04em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;right:.3rem}
.strip li.is-here a{height:3.6rem;box-shadow:0 0 0 3px var(--sheet),0 0 0 5px var(--ink)}
@media(max-width:560px){.strip li a span{display:none}.strip li a{height:1.6rem}.strip li.is-here a{height:2.4rem}}
.page-body{padding:2.5rem 0 4rem;display:grid;gap:2rem}
.page-body .prose{min-width:0;max-width:46rem}
.toc{background:var(--sheet);border:1px solid var(--rule);border-radius:16px;padding:1rem 1.1rem}
.toc summary{cursor:pointer;font:600 .75rem/1.2 var(--wide);letter-spacing:.1em;text-transform:uppercase}
.toc ol{margin:.75rem 0 0;padding:0;list-style:none;counter-reset:t;display:grid;gap:.15rem}
.toc li{counter-increment:t;display:flex;gap:.6rem;font-size:.9rem;line-height:1.35}
.toc li::before{content:counter(t,decimal-leading-zero);font:600 .72rem/1.7 var(--wide);color:var(--mute)}
.toc a{text-decoration:none;color:var(--ink);padding:.15rem 0}
.toc a:hover{color:var(--moss);text-decoration:underline}
@media(min-width:1000px){
  .page-body.has-toc{grid-template-columns:15rem minmax(0,46rem);gap:4rem}
  .rail{position:sticky;top:5.5rem;align-self:start;max-height:calc(100vh - 7rem);overflow:auto}
}

/* prose */
.prose>:first-child{margin-top:0}
.prose p,.prose ul,.prose ol{margin:0 0 1.1rem}
.prose ul,.prose ol{padding-left:1.25rem}
.prose li{margin:.3rem 0}
.prose li::marker{color:var(--t5)}
.prose h2{font-size:clamp(1.3rem,2.6vw,1.65rem);margin:3rem 0 1rem;padding-top:1rem;border-top:3px solid var(--ink);scroll-margin-top:5.5rem}
.prose h3{font-size:1.15rem;margin:2.2rem 0 .6rem;scroll-margin-top:5.5rem}
.prose strong{font-weight:650}
.prose blockquote{margin:1.5rem 0;padding:1rem 1.25rem;background:var(--sheet);border-left:4px solid var(--t4);border-radius:0 12px 12px 0}
.prose blockquote p:last-child{margin:0}
.prose figure{margin:1.75rem 0}
.prose figure img{border-radius:16px}
.prose hr{border:0;border-top:1px solid var(--rule);margin:2.5rem 0}
.table{overflow-x:auto;margin:1.5rem 0;border:1px solid var(--rule);border-radius:14px;background:var(--sheet)}
.prose table{border-collapse:collapse;width:100%;font-size:.9rem}
.prose th{font:600 .72rem/1.3 var(--wide);letter-spacing:.06em;text-transform:uppercase;text-align:left;padding:.75rem .85rem;border-bottom:2px solid var(--ink);vertical-align:bottom}
.prose td{padding:.65rem .85rem;border-top:1px solid var(--rule);vertical-align:top}
.prose tbody tr:first-child td{border-top:0}

/* diagrams */
.diagram{background:var(--sheet);border:1px solid var(--rule);border-radius:18px;padding:1.25rem}
.diagram figcaption{font-size:.82rem;color:var(--mute);margin-top:1rem;line-height:1.5}
.dg-rows,.lab-bars{display:grid;gap:.6rem}
.dg-row{display:grid;grid-template-columns:7.5rem 2.5rem 1fr 5.5rem;align-items:center;gap:.6rem;font-size:.85rem}
.dg-row.is-mid{font-weight:600}
.dg-x{font:600 .8rem/1 var(--wide);color:var(--mute)}
.dg-bar{display:block;height:14px;background:var(--bench);border-radius:7px;overflow:hidden}
.dg-fill{display:block;height:100%;width:var(--w);background:var(--t4);border-radius:7px}
.is-mid .dg-fill{background:var(--ink)}
.dg-out,.lab-val{text-align:right}
.dg-out b{font:650 1.05rem/1 var(--wide)}
.lab-seller{font:600 .7rem/1 var(--wide)!important;text-transform:uppercase;letter-spacing:.1em;color:var(--mute);margin:.6rem 0 0!important}
.lab-row{display:grid;grid-template-columns:3rem 1fr 3.5rem;gap:.6rem;align-items:center;font-size:.85rem}
.lab-label{font:600 .8rem/1 var(--wide)}
@media(max-width:520px){.dg-row{grid-template-columns:1fr 4rem;row-gap:.3rem}.dg-x{display:none}.dg-bar{grid-column:1/-1;grid-row:2}}

/* footer */
.foot{background:var(--ink);color:#e9ece2;padding:3rem 0}
.foot a{color:#fff}
.foot-grid{display:grid;gap:2rem}
.foot-pub{display:flex;gap:1rem;align-items:center}
.foot-pub img{width:84px;height:auto;flex:none;background:var(--t0);border-radius:50%;padding:.4rem}
.foot-pub p,.foot-disc{margin:0;font-size:.9rem;max-width:52ch}
.foot-disc{color:#c9cfbf}
.foot-nav{display:flex;flex-wrap:wrap;gap:.4rem 1rem;font-size:.85rem}
@media(min-width:900px){.foot-grid{grid-template-columns:1.3fr 1fr}.foot-nav{grid-column:1/-1;border-top:1px solid #3a4230;padding-top:1.25rem}}

@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}
.prose figure img[src*="mascot"]{max-width:220px}
/* type roles */
h1,h2,h3,.brand-name,.spec-x,.spec-nums dd,.pc-price,.dg-out b,.pcard-wide .pc-name,.btn{font-stretch:125%}
.kicker,.rack-label,.ticks a,.spec-fold-cap,.spec-shop span,.pcard-x,.prose th,.toc summary,.toc li::before,.strip li a span,.lab-seller,.lab-label,.dg-x,.menu summary,.spec-nums dt{font-family:var(--code);font-stretch:normal}
.spec-x{letter-spacing:-.04em}