/*
 * Theme "explorable" · salviaoutofbodyexperience.com
 * 1. Concept: an explorable explanation (interactive science essay) about dissociation: the reader switches receptors,
 *    picks substances on a time axis and drags body and awareness apart. Figures live inline in the text.
 * 2. Type: Piazzolla (text and titles, optical sizes, real italic) + Space Grotesk (figure labels, controls, captions).
 * 3. Palette: paper #f6f5f0, sheet #ffffff, ink #1a1c23, graphite #5b5e68, kappa cerulean #1d66b0,
 *    5-HT2A coral #b8402f, awareness lilac #8a7fd8 (graphics only).
 * 4. Layout signature: one essay column with § marks in the left gutter, margin notes in a right column,
 *    numbered interactive figures ("Fig. n") that break into the margin, chapter contents as a ruled list.
 * 5. Finishing detail: every control is a native input styled as an instrument (segmented switch, stepped dose
 *    track, strength stairs); products are measured specimen plates with crop marks.
 */
@font-face{font-family:"Piazzolla";font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/piazzolla-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122, U+2212}
@font-face{font-family:"Piazzolla";font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/piazzolla-latin-ext.woff2) format("woff2");unicode-range:U+0100-024F, U+0259, U+1E00-1EFF, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Piazzolla";font-style:italic;font-weight:400 700;font-display:swap;src:url(fonts/piazzolla-italic-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122, U+2212}
@font-face{font-family:"Piazzolla";font-style:italic;font-weight:400 700;font-display:swap;src:url(fonts/piazzolla-italic-latin-ext.woff2) format("woff2");unicode-range:U+0100-024F, U+0259, U+1E00-1EFF, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Space Grotesk";font-style:normal;font-weight:400 600;font-display:swap;src:url(fonts/spacegrotesk-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122, U+2212}
@font-face{font-family:"Space Grotesk";font-style:normal;font-weight:400 600;font-display:swap;src:url(fonts/spacegrotesk-latin-ext.woff2) format("woff2");unicode-range:U+0100-024F, U+0259, U+1E00-1EFF, U+2C60-2C7F, U+A720-A7FF}

:root {
  --paper:#f6f5f0;--sheet:#fff;--ink:#1a1c23;--graphite:#5b5e68;--rule:#dcdad2;--rule-2:#c9c6bc;
  --k:#1d66b0;--k-tint:#e7eef7;--s:#b8402f;--s-fill:#d0533e;--s-tint:#f7e8e3;--aware:#8a7fd8;
  --ket:#6f63c9;--dxm:#8a6a1f;--serif:"Piazzolla", Georgia, serif;--sans:"Space Grotesk", system-ui, sans-serif;
  --text:40rem;--margin:14.5rem;--gap:2.75rem;--gutter:4.5rem;
}
*, *::before, *::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:4.5rem}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--paper);color:var(--ink);font:400 1.125rem/1.66 var(--serif);font-optical-sizing:auto;text-rendering:optimizeLegibility}
img{max-width:100%;height:auto}
a{color:var(--k);text-decoration-thickness:1px;text-underline-offset:.18em}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:2px solid var(--k);outline-offset:3px;border-radius:2px}
.skip{position:absolute;left:-999px;top:.5rem;background:var(--ink);color:#fff;padding:.5rem .8rem;z-index:30}
.skip:focus{left:.5rem}
.progress{position:fixed;inset:0 0 auto;height:2px;z-index:25;pointer-events:none}
.progress span{display:block;height:100%;width:100%;background:var(--k);transform-origin:0 50%;transform:scaleX(var(--p, 0))}

/* masthead */
.mast{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:1.5rem;padding:.7rem clamp(1rem, 4vw, 2.5rem);background:rgba(246, 245, 240, .94);border-bottom:1px solid var(--rule);font-family:var(--sans)}
.brand{display:flex;align-items:center;gap:.6rem;color:var(--ink);text-decoration:none;font-weight:600;letter-spacing:-.01em;margin-right:auto}
.brand img{width:30px;height:auto}
.mast-nav{display:none;gap:1.2rem;font-size:.9rem}
.mast-nav a, .menu a{color:var(--graphite);text-decoration:none}
.mast-nav a span, .menu a span{color:var(--k);margin-right:.3rem;font-variant-numeric:tabular-nums}
.mast-nav a[aria-current], .mast-nav a:hover{color:var(--ink);box-shadow:0 2px 0 var(--k)}
.menu summary{cursor:pointer;list-style:none;font-size:.9rem;padding:.35rem .8rem;border:1px solid var(--rule-2);border-radius:99px}
.menu summary::-webkit-details-marker{display:none}
.menu nav{position:absolute;right:1rem;top:3.2rem;background:var(--sheet);border:1px solid var(--rule);border-radius:8px;padding:.6rem 1rem;box-shadow:0 10px 30px rgba(26, 28, 35, .1)}
.menu ol{list-style:none;margin:0;padding:0}
.menu li a{display:block;padding:.45rem 0}
.menu a[aria-current]{color:var(--ink);font-weight:600}
@media (min-width:1000px){.mast-nav{display:flex} .menu{display:none}}

/* opener (home) and chapter head */
main{padding:0 clamp(1rem, 4vw, 2.5rem)}
.kicker{font:500 .78rem/1.4 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--graphite);margin:0 0 1rem}
h1{font-family:var(--serif);font-weight:600;font-size:clamp(2.3rem, 6vw, 4.4rem);line-height:1.02;letter-spacing:-.025em;margin:0 0 1.2rem;font-variation-settings:"opsz" 30}
.opener{max-width:76rem;margin:0 auto;padding:clamp(2rem, 6vw, 4.5rem) 0 2.5rem;display:grid;gap:2rem}
.lede p{font-size:1.28rem;line-height:1.55;margin:0 0 1rem;max-width:34rem}
.figlist{font:.86rem/1.6 var(--sans);color:var(--graphite);max-width:34rem}
.figlist a{color:var(--ink)}
.fig-hero{margin:0}
.fig-hero img{display:block;width:100%;border:1px solid var(--rule);border-radius:6px;background:var(--paper)}
.opener-product{border-top:2px solid var(--ink);padding-top:.8rem}
.op-k{font:500 .75rem/1.3 var(--sans);text-transform:uppercase;letter-spacing:.08em;color:var(--s);margin:0 0 .6rem}
.opener-product .plate{grid-template-columns:6.5rem 1fr;grid-template-rows:none;align-items:center}
.op-link{display:inline-block;margin-top:.6rem;font:500 .9rem var(--sans)}
@media (min-width:900px) {
  .opener{grid-template-columns:minmax(0, 1fr) minmax(0, 1.08fr);grid-template-areas:"text fig" "text product";column-gap:3.5rem;align-items:start}
  .opener-text{grid-area:text} .fig-hero{grid-area:fig} .opener-product{grid-area:product}
}
.chapter-head{max-width:calc(var(--text) + var(--margin) + var(--gap));margin:0 auto;padding:clamp(2rem, 6vw, 4.5rem) 0 1rem}
.chapter-head h1{max-width:46rem;font-size:clamp(2rem, 5vw, 3.4rem)}
.dek{font-size:1.25rem;line-height:1.5;color:#33363f;max-width:var(--text);margin:0 0 1.5rem;font-style:italic}
.toc{max-width:var(--text);border-top:1px solid var(--rule-2);border-bottom:1px solid var(--rule-2);padding:.8rem 0;font-family:var(--sans);font-size:.9rem}
.toc p{margin:0 0 .4rem;color:var(--graphite);font-size:.75rem;text-transform:uppercase;letter-spacing:.08em}
.toc ol{margin:0;padding-left:1.3rem;columns:2 16rem;column-gap:2rem}
.toc li{break-inside:avoid;margin:.15rem 0}
.toc a{color:var(--ink);text-decoration:none}
.toc a:hover{color:var(--k)}

/* essay column */
.essay{max-width:var(--text);margin:0 auto;padding-bottom:3rem;counter-reset:sec}
.essay > *{max-width:var(--text)}
.essay p, .essay li{hyphens:manual}
.essay h2{position:relative;font-weight:600;font-size:clamp(1.5rem, 3vw, 1.95rem);line-height:1.18;letter-spacing:-.015em;margin:3.2rem 0 1rem;font-variation-settings:"opsz" 24}
.essay h2::before{counter-increment:sec;content:"§" counter(sec);display:block;font:500 .8rem/1 var(--sans);color:var(--k);letter-spacing:.06em;margin-bottom:.5rem}
.essay h3{font-size:1.22rem;margin:2.2rem 0 .6rem}
.essay ul, .essay ol{padding-left:1.3rem}
.essay li{margin:.35rem 0}
.essay li::marker{color:var(--k)}
.essay strong{font-weight:650}
.essay em{font-style:italic}
.essay figure:not(.fig) img{border-radius:6px;border:1px solid var(--rule)}
.essay > figure:not(.fig){margin:2rem 0}
.essay hr{border:0;border-top:1px solid var(--rule-2);margin:2.5rem 0}

/* margin notes */
.note{font:.88rem/1.55 var(--sans);color:#33363f;border-left:2px solid var(--k);padding:.2rem 0 .2rem .9rem;margin:1.5rem 0}
.note p{margin:0 0 .4rem}
.note strong{color:var(--ink);font-weight:600}
@media (min-width:1180px) {
  .essay{max-width:calc(var(--text) + var(--margin) + var(--gap));padding-right:calc(var(--margin) + var(--gap))}
  .essay h2::before{position:absolute;left:calc(-1 * var(--gutter));top:.55rem;width:3.5rem;text-align:right;font-size:.95rem;margin:0}
  .note{float:right;clear:right;width:var(--margin);margin:.3rem calc(-1 * (var(--margin) + var(--gap))) 1rem 0}
  .essay > .fig, .essay > .wide, .essay > .products, .essay > .product-feature{clear:right;max-width:none;margin-right:calc(-1 * (var(--margin) + var(--gap)))}
}

/* tables */
.table{overflow-x:auto;margin:2rem 0;border-top:2px solid var(--ink)}
table{width:100%;border-collapse:collapse;font:.9rem/1.45 var(--sans)}
th, td{text-align:left;vertical-align:top;padding:.65rem .7rem .65rem 0;border-bottom:1px solid var(--rule)}
th{font-weight:600;font-size:.78rem;text-transform:uppercase;letter-spacing:.05em;color:var(--graphite)}
td:first-child{font-weight:500}
.table + p{font:.82rem/1.5 var(--sans);color:var(--graphite)}

/* figures */
.fig{position:relative;margin:2.5rem 0;padding:clamp(1rem, 2.5vw, 1.6rem);background:var(--sheet);border:1px solid var(--rule);border-radius:8px}
.fig input[type=radio], .fig input[type=checkbox]{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.fig figcaption{font:.84rem/1.5 var(--sans);color:var(--graphite);margin-top:1rem;padding-top:.8rem;border-top:1px solid var(--rule)}
.fig-no{color:var(--k);font-weight:600;letter-spacing:.04em;margin-right:.3rem}
.fig figcaption strong{color:var(--ink);font-weight:600}
.fig-hero{padding:0;background:none;border:0}
.fig-hero figcaption{border:0;padding-top:.2rem}
.fig-controls{display:flex;flex-wrap:wrap;gap:.8rem 1.4rem;align-items:center;margin-bottom:1rem;font-family:var(--sans)}
.seg{display:inline-flex;flex-wrap:wrap;border:1px solid var(--rule-2);border-radius:99px;padding:3px;margin:0;background:var(--paper)}
.seg legend{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.seg label{cursor:pointer;padding:.4rem .95rem;border-radius:99px;font-size:.9rem;font-weight:500;color:var(--graphite);display:inline-flex;align-items:center;gap:.45rem;transition:background .25s, color .25s}
.dot{width:.6rem;height:.6rem;border-radius:50%;display:inline-block;background:var(--k)}
.dot-s, .dot-psi{background:var(--s-fill)} .dot-ket{background:var(--ket)} .dot-dxm{background:var(--dxm)}
.seg input:checked + label, .seg-wide input:checked + label{background:var(--ink);color:#fff}
.fig:has(input:focus-visible) .fig-controls{outline:2px solid var(--k);outline-offset:6px;border-radius:8px}
.toggle{cursor:pointer;display:inline-flex;align-items:center;gap:.6rem;font-size:.9rem;font-weight:500}
.knob{width:2.3rem;height:1.3rem;border-radius:99px;background:var(--rule-2);position:relative;transition:background .25s}
.knob::after{content:"";position:absolute;top:3px;left:3px;width:calc(1.3rem - 6px);height:calc(1.3rem - 6px);border-radius:50%;background:#fff;transition:transform .25s}
.rc-b:checked + .toggle .knob{background:var(--ink)}
.rc-b:checked + .toggle .knob::after{transform:translateX(1rem)}
.fig-stage{display:grid;gap:1rem 1.6rem;align-items:center}
.fig-stage svg{width:100%;height:auto;display:block;overflow:visible}
@media (min-width:760px){.fig-stage{grid-template-columns:minmax(0, 1.55fr) minmax(0, 1fr)}}
.rc-head{font:600 .8rem/1.3 var(--sans);text-transform:uppercase;letter-spacing:.06em;margin:0 0 .5rem;color:var(--k)}
.rc-notes p, .bd-notes p, .tc-notes p{font-size:1rem;line-height:1.55;margin:0 0 .6rem}
.rc-fx{font:500 .88rem/1.45 var(--sans) !important;border-top:1px dashed var(--rule-2);padding-top:.5rem}
.svg-label, .tick, .rl{font:500 13px var(--sans);fill:var(--graphite)}
.rl{font-size:14px;fill:var(--ink)}
.tick{text-anchor:middle;font-size:12px}

/* fig:receptor */
.fig-receptor{--rc:var(--k)}
.lipids circle{fill:#e9e6dc;stroke:#c9c6bc;stroke-width:1}
.lipids path{stroke:#d4d1c7;stroke-width:1.4;fill:none}
.helices rect{fill:var(--rc);opacity:.9;transition:fill .45s}
.pocket{fill:none;stroke:var(--rc);stroke-width:2;stroke-dasharray:4 4;transition:stroke .45s}
.ligand path{fill:var(--rc);stroke:#fff;stroke-width:1.5}
.ligand{transition:transform .7s cubic-bezier(.3, 1.3, .5, 1), opacity .35s}
.lig-k{transform:translate(274px, 70px)}
.lig-s{transform:translate(282px, 74px);opacity:0}
.ghost-k{opacity:0;transition:opacity .4s}
.ghost-k path{fill:none;stroke:var(--k);stroke-width:2}
.ghost-k .cross{stroke:var(--s);stroke-width:2.5}
.ghost-k-label{opacity:0;transition:opacity .4s;fill:var(--s)}
.blocker{fill:var(--graphite);opacity:0;transform:translateY(-30px);transition:opacity .3s, transform .5s}
.signal path{fill:none;stroke:var(--rc);stroke-width:2.5;stroke-linecap:round;animation:pulse 2.4s ease-out infinite}
.signal path:nth-child(2){animation-delay:.4s} .signal path:nth-child(3){animation-delay:.8s}
@keyframes pulse{0%{opacity:0} 30%{opacity:.9} 100%{opacity:0}}
.fig-receptor:has(.rc-s:checked){--rc:var(--s-fill)}
.fig-receptor:has(.rc-s:checked) .rc-head{color:var(--s)}
.fig-receptor:has(.rc-s:checked) .lig-k{opacity:0}
.fig-receptor:has(.rc-s:checked) .lig-s{opacity:1}
.fig-receptor:has(.rc-s:checked) .ghost-k, .fig-receptor:has(.rc-s:checked) .ghost-k-label{opacity:1}
.fig-receptor:has(.rc-b:checked) .blocker{opacity:1;transform:none}
.fig-receptor:has(.rc-b:checked) .lig-k{transform:translate(274px, 16px)}
.fig-receptor:has(.rc-b:checked) .lig-s{transform:translate(282px, 22px)}
.fig-receptor:has(.rc-b:checked) .signal{opacity:0}
@supports selector(:has(*)) {
  .fig .rc-note, .fig .bd-note, .fig .tc-note, .fig .ld-panel{display:none}
  .fig-receptor:not(:has(.rc-s:checked)):not(:has(.rc-b:checked)) .n-k,
  .fig-receptor:not(:has(.rc-s:checked)):has(.rc-b:checked) .n-kb,
  .fig-receptor:has(.rc-s:checked):not(:has(.rc-b:checked)) .n-s,
  .fig-receptor:has(.rc-s:checked):has(.rc-b:checked) .n-sb{display:block;animation:fadein .4s ease both}
  .fig-body:has(.bd-0:checked) .n0, .fig-body:has(.bd-1:checked) .n1, .fig-body:has(.bd-2:checked) .n2, .fig-body:has(.bd-3:checked) .n3{display:block;animation:fadein .4s ease both}
  .fig-time:has(.tc-sal:checked) .n-sal, .fig-time:has(.tc-ket:checked) .n-ket, .fig-time:has(.tc-dxm:checked) .n-dxm, .fig-time:has(.tc-psi:checked) .n-psi{display:block;animation:fadein .4s ease both}
  .fig-ladder:has(.ld-0:checked) .p0, .fig-ladder:has(.ld-1:checked) .p1, .fig-ladder:has(.ld-2:checked) .p2, .fig-ladder:has(.ld-3:checked) .p3, .fig-ladder:has(.ld-4:checked) .p4, .fig-ladder:has(.ld-5:checked) .p5{display:grid;animation:fadein .4s ease both}
}
@keyframes fadein{from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:none}}

/* fig:body and awareness */
.fig-body{--sep:1;--halo:0;--room:.12;--bodyop:.35;--aw:1;--pos:3}
.fig-body:has(.bd-0:checked){--sep:0;--halo:0;--room:1;--bodyop:1;--aw:0;--pos:0}
.fig-body:has(.bd-1:checked){--sep:0;--halo:.45;--room:.7;--bodyop:1;--aw:0;--pos:1}
.fig-body:has(.bd-2:checked){--sep:0;--halo:.9;--room:.4;--bodyop:1;--aw:0;--pos:2}
.track{position:relative;display:grid;grid-template-columns:repeat(4, 1fr);width:min(100%, 30rem);border-bottom:2px solid var(--ink);padding-bottom:1.1rem;touch-action:none;cursor:pointer}
.track label{text-align:center;font-size:.88rem;font-weight:500;color:var(--graphite);padding:.3rem 0;cursor:pointer;position:relative}
.track label::after{content:"";position:absolute;left:50%;bottom:-1.2rem;width:1px;height:.55rem;background:var(--ink)}
.thumb{position:absolute;bottom:-.62rem;left:calc((var(--pos) + .5) * 25%);width:1.2rem;height:1.2rem;margin-left:-.6rem;border-radius:50%;background:var(--sheet);border:3px solid var(--k);transition:left .45s cubic-bezier(.3, 1.2, .5, 1);pointer-events:none}
.track input:checked + label{color:var(--ink);font-weight:600}
.bd-svg path, .bd-svg line{fill:none;stroke-linecap:round;stroke-linejoin:round}
.room path{stroke:var(--rule-2);stroke-width:2;opacity:var(--room);transition:opacity .6s}
.chair path{stroke:var(--graphite);stroke-width:3;opacity:calc(.35 + var(--room) * .65);transition:opacity .6s}
.body path{stroke:var(--ink);stroke-width:15;opacity:var(--bodyop);transition:opacity .6s}
.body circle{fill:var(--ink);opacity:var(--bodyop);transition:opacity .6s}
.halo circle{fill:none;stroke:var(--k);stroke-width:2;stroke-dasharray:3 7;opacity:var(--halo);transition:opacity .6s;transform-origin:196px 170px;animation:breathe 3s ease-in-out infinite}
.halo circle + circle{animation-delay:.6s}
@keyframes breathe{50%{transform:scale(1.06)}}
.aware{opacity:var(--aw);transform:translate(calc(var(--sep) * 150px), calc(var(--sep) * -52px));transition:transform .9s cubic-bezier(.3, 1.1, .4, 1), opacity .6s}
.aware path{stroke:var(--aware);stroke-width:15;opacity:.55}
.aware circle{fill:var(--aware);opacity:.55}
.aware .rim path{stroke:var(--sheet);stroke-width:9;opacity:1}
.aware .rim circle{fill:var(--sheet);opacity:1}
.bd-meter{margin:.8rem 0 0;display:grid;gap:.5rem;font:.82rem/1.3 var(--sans)}
.bd-meter div{display:grid;grid-template-columns:10.5rem 1fr;align-items:center;gap:.6rem}
.bd-meter dt{color:var(--graphite)}
.bd-meter dd{margin:0;position:relative;padding-left:.2rem;text-transform:capitalize;font-weight:500}
.bd-meter dd::before{content:"";display:block;height:.45rem;border-radius:99px;margin-bottom:.2rem;background:linear-gradient(90deg, var(--k) var(--lv), var(--rule) 0)}
.lv-baseline{--lv:50%} .lv-higher{--lv:70%} .lv-highest{--lv:88%} .lv-lower{--lv:34%} .lv-low{--lv:18%} .lv-lost{--lv:3%}

/* fig:time course */
.fig-time .row{opacity:.25;transition:opacity .4s}
.fig-time .bar{fill:var(--k)} .fig-time .bar.fade{opacity:.35}
.r-ket .bar{fill:var(--ket)} .r-dxm .bar{fill:var(--dxm)} .r-psi .bar{fill:var(--s-fill)}
.fig-time .onset{stroke:var(--ket);stroke-width:2;stroke-dasharray:2 5}
.fig-time .mark{stroke:var(--ink);stroke-width:2}
.fig-time .grid{stroke:var(--rule);stroke-width:1}
.fig-time:has(.tc-sal:checked) .r-sal, .fig-time:has(.tc-ket:checked) .r-ket, .fig-time:has(.tc-dxm:checked) .r-dxm, .fig-time:has(.tc-psi:checked) .r-psi{opacity:1}
.seg-wide label{cursor:pointer}
@media (min-width:760px){.fig-time .fig-stage{grid-template-columns:minmax(0, 1.8fr) minmax(0, 1fr)}}

/* fig:ladder */
.fig-ladder{background:var(--ink);color:#eceae3;border-color:var(--ink)}
.fig-ladder figcaption{color:#b9b8b1;border-color:#3a3d47}
.fig-ladder figcaption strong{color:#fff} .fig-ladder figcaption a{color:#a9c8ef} .fig-ladder .fig-no{color:#a9c8ef}
.ld-kicker{font:600 .78rem/1.3 var(--sans);text-transform:uppercase;letter-spacing:.08em;color:#f0a597;margin:0 0 .4rem}
.ld-lede{margin:0 0 1.4rem;font-size:1.15rem;max-width:34rem}
.ld-stairs{display:grid;grid-template-columns:repeat(6, 1fr);align-items:end;gap:.35rem;border-bottom:1px solid #555963;margin-bottom:1.4rem}
.ld-stairs label{cursor:pointer;display:flex;flex-direction:column;justify-content:flex-end;gap:.2rem;height:calc(2.6rem + var(--h) * .11rem);padding:.5rem;border:1px solid #555963;border-bottom:0;border-radius:6px 6px 0 0;font-family:var(--sans);transition:background .3s, color .3s, height .4s}
.st-x{font-weight:600;font-size:1.05rem}
.st-l{font-size:.7rem;color:#a5a49d;line-height:1.2}
.ld-stairs label:hover{background:#2a2d36}
.ld-stairs input:checked + label{background:#eceae3;color:var(--ink)}
.ld-stairs input:checked + label .st-l{color:var(--graphite)}
.ld-panel{display:grid;gap:1.2rem;align-items:center;margin-bottom:1rem}
@media (min-width:760px){.ld-panel{grid-template-columns:minmax(0, 1fr) minmax(0, 1.1fr)}}
.ld-panel .rc-head{color:#a9c8ef}
.ld-text p{margin:0 0 .9rem}
.cta{display:inline-block;font:600 .95rem/1 var(--sans);background:#eceae3;color:var(--ink);text-decoration:none;padding:.85rem 1.2rem;border-radius:99px}
.cta:hover{background:#fff}
.cta::after{content:" \2192"}
.fig-ladder .plate{color:var(--ink)}

/* specimen plates (products) */
.products{display:grid;grid-template-columns:repeat(auto-fill, minmax(9.5rem,1fr));gap:1rem;margin:2rem 0}
.product-feature{margin:1.6rem 0}
.plate{position:relative;display:grid;grid-template-rows:auto 1fr;background:var(--sheet);border:1px solid var(--rule);border-radius:6px;color:var(--ink);text-decoration:none;font-family:var(--sans);transition:border-color .25s, transform .25s}
.plate:hover{border-color:var(--k);transform:translateY(-2px)}
.plate-img{position:relative;display:block;margin:.7rem;background:#f1f0eb;border-radius:3px;aspect-ratio:1}
.plate-img::before, .plate-img::after{content:"";position:absolute;width:.8rem;height:.8rem;border:0 solid var(--k);z-index:1}
.plate-img::before{top:-.35rem;left:-.35rem;border-top-width:1.5px;border-left-width:1.5px}
.plate-img::after{bottom:-.35rem;right:-.35rem;border-bottom-width:1.5px;border-right-width:1.5px}
.plate-img img{display:block;width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;padding:6%}
.plate-body{display:flex;flex-direction:column;gap:.3rem;padding:.2rem .9rem .9rem}
.plate-shop{font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;color:var(--graphite)}
.plate-name{font:600 1.05rem/1.25 var(--serif)}
.plate-foot{margin-top:auto;display:flex;justify-content:space-between;align-items:baseline;gap:.5rem;padding-top:.5rem;border-top:1px solid var(--rule);font-size:.9rem}
.plate-price{font-weight:600;font-variant-numeric:tabular-nums}
.plate-go{color:var(--k);font-weight:500}
.plate-go::after{content:" \2192"}
.plate-feature{grid-template-columns:minmax(7rem, 11rem) 1fr;grid-template-rows:none;align-items:center}
.plate-feature .plate-name{font-size:1.25rem}

/* chapters */
.chapters{max-width:calc(var(--text) + var(--margin) + var(--gap));margin:0 auto 4rem;border-top:2px solid var(--ink)}
.ch-title{font:600 .82rem/1 var(--sans);text-transform:uppercase;letter-spacing:.08em;margin:1rem 0 .5rem;color:var(--graphite)}
.chapters ol{list-style:none;margin:0;padding:0}
.chapters a{display:grid;grid-template-columns:3rem 1fr;gap:.2rem 1rem;padding:1.1rem 0;border-bottom:1px solid var(--rule);color:var(--ink);text-decoration:none}
.ch-no{font:500 1rem var(--sans);color:var(--k);grid-row:span 2;padding-top:.2rem}
.ch-name{font-size:1.25rem;font-weight:600;line-height:1.25}
.ch-d{font:.88rem/1.5 var(--sans);color:var(--graphite)}
.chapters a:hover .ch-name{color:var(--k)}
@media (min-width:900px){.chapters a{grid-template-columns:4rem minmax(0, 1fr) minmax(0, 1.1fr)} .ch-no{grid-row:auto}}

/* footer */
.foot{border-top:1px solid var(--rule-2);padding:2.5rem clamp(1rem, 4vw, 2.5rem) 3rem;font:.9rem/1.6 var(--sans);color:#3a3d46;background:#efede6}
.foot > *{max-width:62rem;margin-left:auto;margin-right:auto}
.foot-pub{display:flex;gap:1.2rem;align-items:center}
.foot-pub img{width:5rem;flex:none}
.foot-pub p{margin:0}
.disclaimer{color:var(--graphite);font-size:.84rem;margin-top:1.2rem}
.foot-nav{display:flex;flex-wrap:wrap;gap:.4rem 1.2rem;margin-top:1rem;font-size:.84rem}
.foot-nav a{color:var(--ink)}

@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after{animation:none !important;transition:none !important}
}
@media (max-width:520px) {
  body{font-size:1.06rem}
  .ld-stairs{gap:.2rem} .ld-stairs label{padding:.35rem .25rem} .st-l{display:none}
  .plate-feature{grid-template-columns:6.5rem 1fr}
  .bd-meter div{grid-template-columns:1fr;gap:.1rem}
}
.n-ket .rc-head{color:var(--ket)} .n-dxm .rc-head{color:var(--dxm)} .n-psi .rc-head{color:var(--s)}
td:first-child{min-width:7.5rem}
@media (max-width:640px) {
  .tc-svg .rl{font-size:26px} .tc-svg .tick{font-size:22px} .tc-svg .t-2,.tc-svg .t-5,.tc-svg .t-10,.tc-svg .t-120{display:none}
  .rc-svg .svg-label{font-size:22px}
  .seg label{padding:.35rem .7rem;font-size:.85rem}
}
main{min-height:62vh}.essay figure img[src*="mascot"]{max-width:13rem;border:0}
.table table{min-width:38rem}td:first-child{min-width:6.5rem}
@media(min-width:700px){.products{grid-template-columns:repeat(auto-fill,minmax(12.5rem,1fr))}}
.plate-foot{flex-wrap:wrap}.plate-go{white-space:nowrap}