/*
 * lupa · trufas-alucinogenas.com
 * 1 Concept: a truffle under the magnifying glass. One macro of a cut sclerotium is the interface:
 *   zoom, pan, numbered hotspots that open fact panels; every page is a "magnification" of that image.
 * 2 Type: Castoro (titles, real italic) + Ysabeau Office (text and UI), self-hosted woff2.
 * 3 Palette: glass #eceff0, sheet #ffffff, ink #1c1a17, umber #6e4a2c, lens teal #0a6b7a, stage #141312.
 * 4 Layout signature: zoomable image explorer with hotspot legend, before/after sliders, round lens
 *   crops of the macro as page cards and article headers, numbered focus list beside the text.
 * 5 Detail: everything numbered is a hotspot disc (nav, TOC, h2), and product photos get a loupe.
 */
@font-face{font-family:"Castoro";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/castoro-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:"Castoro";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/castoro-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Castoro";font-style:italic;font-weight:400;font-display:swap;src:url(fonts/castoro-italic-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:"Castoro";font-style:italic;font-weight:400;font-display:swap;src:url(fonts/castoro-italic-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Ysabeau Office";font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/ysabeau-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:"Ysabeau Office";font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/ysabeau-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Ysabeau Office";font-style:italic;font-weight:400;font-display:swap;src:url(fonts/ysabeau-italic-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:"Ysabeau Office";font-style:italic;font-weight:400;font-display:swap;src:url(fonts/ysabeau-italic-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  --glass:#eceff0;--sheet:#fff;--ink:#1c1a17;--mute:#57524b;--line:#d3d8da;
  --umber:#6e4a2c;--teal:#0a6b7a;--teal-soft:#d9eaec;--stage:#141312;
  --serif:"Castoro",Georgia,serif;--sans:"Ysabeau Office","Segoe UI",system-ui,sans-serif;
  --wrap:min(1360px,100% - 2.5rem);--r:14px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:5.5rem}
body{margin:0;background:var(--glass);color:var(--ink);font:400 1.0625rem/1.62 var(--sans);font-feature-settings:"lnum" 1}
img{max-width:100%;height:auto;display:block}
a{color:var(--teal);text-decoration-thickness:1px;text-underline-offset:.18em}
a:hover{color:var(--umber)}
:focus-visible{outline:3px solid var(--teal);outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:-999px;top:0;background:var(--ink);color:#fff;padding:.6rem 1rem;z-index:50}
.skip:focus{left:1rem;top:1rem}
h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:1.12;letter-spacing:-.01em;margin:0}
.kicker{font-size:.78rem;font-weight:650;letter-spacing:.14em;text-transform:uppercase;color:var(--umber);margin:0 0 .6rem}
.section-title{font-size:clamp(1.6rem,3.2vw,2.3rem)}
.textlink{font-weight:650}

/* disc: the hotspot number used everywhere */
.nav-n,.focus-n,.legend-n,.lens-n,.spot span{display:inline-grid;place-items:center;border-radius:50%;font:700 .74rem/1 var(--sans);font-variant-numeric:tabular-nums}

/* bar */
.bar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:1rem;padding:.55rem max(1.25rem,calc((100% - 1360px)/2));background:rgba(255,255,255,.96);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:.6rem;color:var(--ink);text-decoration:none;font:400 1.3rem/1 var(--serif);white-space:nowrap}
.brand img{width:38px;height:auto}
.brand i{color:var(--umber)}
.nav{display:none;margin-left:auto}
.nav ol,.menu ol,.foot-nav ol{list-style:none;margin:0;padding:0}
.nav ol{display:flex;gap:.15rem}
.nav a{display:flex;align-items:center;gap:.4rem;padding:.45rem .55rem;border-radius:999px;color:var(--ink);text-decoration:none;font-size:.93rem;font-weight:550}
.nav a:hover{background:var(--glass)}
.nav a[aria-current]{background:var(--ink);color:#fff}
.nav-n{width:1.35rem;height:1.35rem;border:1.5px solid currentColor;font-size:.66rem}
.bar-shop{display:none;margin-left:.4rem;padding:.5rem .9rem;border-radius:999px;background:var(--teal);color:#fff;text-decoration:none;font-weight:650;font-size:.9rem;white-space:nowrap}
.bar-shop:hover{background:var(--umber);color:#fff}
.menu{margin-left:auto;position:relative}
.menu summary{list-style:none;display:flex;align-items:center;gap:.5rem;cursor:pointer;padding:.45rem .75rem;border:1.5px solid var(--ink);border-radius:999px;font-weight:650;font-size:.92rem}
.menu summary::-webkit-details-marker{display:none}
.menu-lens{width:15px;height:15px;border:2px solid currentColor;border-radius:50%;position:relative}
.menu-lens::after{content:"";position:absolute;width:7px;height:2px;background:currentColor;right:-6px;bottom:-3px;transform:rotate(45deg)}
.menu nav{position:absolute;right:0;top:calc(100% + .5rem);background:var(--sheet);border:1px solid var(--line);border-radius:var(--r);padding:.5rem;min-width:15rem;box-shadow:0 18px 40px -20px rgba(28,26,23,.45)}
.menu a{display:flex;gap:.6rem;align-items:center;padding:.55rem .6rem;color:var(--ink);text-decoration:none;border-radius:8px}
.menu a[aria-current]{background:var(--teal-soft)}
@media (min-width:1180px){.nav,.bar-shop{display:flex}.menu{display:none}}

/* explorer */
.explorer{width:var(--wrap);margin:0 auto;padding:clamp(1.4rem,4vw,2.6rem) 0 1rem}
.explorer-head{max-width:56rem;margin-bottom:1.3rem}
.explorer h1{font-size:clamp(2.3rem,6.2vw,4.6rem)}
.explorer h1::first-line{color:var(--ink)}
.lede{font-size:1.1rem;color:var(--mute);max-width:44rem;margin:.8rem 0 0}
.explorer-grid{display:grid;gap:1.2rem}
@media (min-width:1000px){.explorer-grid{grid-template-columns:minmax(0,1fr) 22rem;align-items:start}}
.stage{margin:0}
.viewport{position:relative;aspect-ratio:3/2;overflow:hidden;border-radius:var(--r);background:var(--stage);touch-action:pan-y;user-select:none;-webkit-user-select:none}
.viewport.zoomed{cursor:grab;touch-action:none}
.viewport.dragging{cursor:grabbing}
.canvas{position:absolute;inset:0;transform-origin:0 0;will-change:transform}
.canvas img{width:100%;height:100%;object-fit:cover;pointer-events:none}
.js .canvas.anim{transition:transform .45s cubic-bezier(.3,.7,.1,1)}
.spot{position:absolute;width:2.6rem;height:2.6rem;margin:-1.3rem 0 0 -1.3rem;display:grid;place-items:center;text-decoration:none;transform:scale(calc(1/var(--z,1)));transform-origin:50% 50%}
.spot span{width:1.9rem;height:1.9rem;background:var(--teal);color:#fff;border:2px solid #fff;font-size:.85rem;box-shadow:0 2px 10px rgba(0,0,0,.45)}
.spot::before{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid rgba(255,255,255,.75)}
.spot.is-on span{background:#fff;color:var(--teal);border-color:var(--teal)}
.spot.is-on::before{border-color:#fff;inset:-5px}
@media (prefers-reduced-motion:no-preference){.spot::before{animation:ping 2.6s ease-out infinite}.spot:nth-of-type(2)::before{animation-delay:.5s}.spot:nth-of-type(3)::before{animation-delay:1s}.spot:nth-of-type(4)::before{animation-delay:1.5s}.spot:nth-of-type(5)::before{animation-delay:2s}}
@keyframes ping{0%{transform:scale(.8);opacity:.9}70%,100%{transform:scale(1.5);opacity:0}}
.reticle{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .3s}
.reticle::before,.reticle::after{content:"";position:absolute;background:rgba(255,255,255,.5)}
.reticle::before{left:50%;top:calc(50% - 14px);width:1px;height:28px}
.reticle::after{top:50%;left:calc(50% - 14px);height:1px;width:28px}
.zoomed .reticle{opacity:1}
.tools{display:none}
.js .tools{display:flex;align-items:center;gap:.35rem;margin-top:.7rem}
.tools button{font:700 1.15rem/1 var(--sans);width:2.6rem;height:2.6rem;border-radius:50%;border:1.5px solid var(--ink);background:var(--sheet);color:var(--ink);cursor:pointer}
.tools button:hover{background:var(--ink);color:#fff}
.tools .tools-reset{width:auto;padding:0 1rem;border-radius:999px;font-size:.88rem;margin-left:.4rem}
.zoom-read{min-width:3.4rem;text-align:center;font:400 1.15rem/1 var(--serif);font-variant-numeric:tabular-nums}
.stage figcaption{font-size:.85rem;color:var(--mute);margin-top:.6rem}
.legend{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.legend-item{background:var(--sheet);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.legend-btn{all:unset;box-sizing:border-box;display:flex;gap:.7rem;align-items:center;width:100%;padding:.75rem .9rem;cursor:pointer;font:400 1.12rem/1.2 var(--serif)}
.legend-btn:focus-visible{outline:3px solid var(--teal);outline-offset:-3px}
.legend-n{flex:none;width:1.8rem;height:1.8rem;background:var(--teal);color:#fff;font-size:.8rem}
.legend-body{padding:0 1rem 1rem 3.4rem;font-size:.97rem}
.legend-body p{margin:0 0 .6rem}
.legend-fact{font:400 1.45rem/1.1 var(--serif);color:var(--umber)}
.legend-more{font-weight:650}
.js .legend-item:not(.is-on) .legend-body{display:none}
.js .legend-item.is-on{border-color:var(--teal);box-shadow:0 0 0 1px var(--teal)}
.js .legend-item:not(.is-on) .legend-n{background:var(--sheet);color:var(--teal);border:1.5px solid var(--teal)}

/* feature */
.feature{width:var(--wrap);margin:clamp(2.5rem,6vw,4.5rem) auto;display:grid;gap:clamp(1.5rem,4vw,3.5rem);align-items:center;background:var(--sheet);border-radius:calc(var(--r)*1.6);padding:clamp(1.2rem,4vw,3rem)}
@media (min-width:860px){.feature{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}}
.feature-img{position:relative;aspect-ratio:1;border-radius:50%;background:var(--glass);overflow:hidden;max-width:30rem;width:100%;margin:0 auto;box-shadow:inset 0 0 0 10px var(--sheet),inset 0 0 0 11px var(--line)}
.feature-img img{width:100%;height:100%;object-fit:contain;padding:12%;mix-blend-mode:multiply}
.feature h2{font-size:clamp(1.8rem,3.6vw,2.7rem);margin-bottom:.8rem}
.specs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:10px;overflow:hidden;margin:1.2rem 0}
.specs div{background:var(--sheet);padding:.6rem .8rem}
.specs dt{font-size:.75rem;text-transform:uppercase;letter-spacing:.1em;color:var(--mute);font-weight:650}
.specs dd{margin:0;font:400 1.15rem/1.3 var(--serif)}
.buy{display:flex;flex-wrap:wrap;align-items:center;gap:1rem}
.buy-price{font:400 2rem/1 var(--serif)}
.btn{display:inline-block;padding:.85rem 1.4rem;border-radius:999px;background:var(--teal);color:#fff;text-decoration:none;font-weight:700}
.btn:hover{background:var(--umber);color:#fff}
.fine{font-size:.85rem;color:var(--mute);margin-top:1rem}

/* loupe */
[data-loupe]{position:relative}
.loupe{position:absolute;left:0;top:0;width:150px;height:150px;border-radius:50%;pointer-events:none;opacity:0;background-repeat:no-repeat;background-color:#fff;border:3px solid var(--sheet);box-shadow:0 0 0 1.5px var(--teal),0 18px 36px -12px rgba(28,26,23,.55);transition:opacity .2s;z-index:3}
.loupe-on .loupe{opacity:1}
.loupe-on{cursor:zoom-in}

/* compare */
.compare{width:var(--wrap);margin:0 auto clamp(2.5rem,6vw,4.5rem)}
.compare-grid{display:grid;gap:1.5rem;margin-top:1.2rem}
@media (min-width:900px){.compare-grid{grid-template-columns:1.5fr 1fr}}
.cmp{margin:0}
.cmp-frame{position:relative;overflow:hidden;border-radius:var(--r);background:var(--stage);display:grid;grid-template-columns:1fr 1fr;gap:2px}
.cmp-frame img{width:100%;height:100%;object-fit:cover;aspect-ratio:3/2}
.cmp-packs .cmp-frame{background:var(--sheet)}
.cmp-packs .cmp-frame img{aspect-ratio:1;object-fit:contain;padding:8%;mix-blend-mode:multiply}
.cmp-b img{height:100%}
.cmp-tag{position:absolute;bottom:.7rem;padding:.3rem .65rem;border-radius:999px;background:rgba(20,19,18,.82);color:#fff;font-size:.8rem;font-weight:650;z-index:2}
.cmp-tag-a{left:.7rem}.cmp-tag-b{right:.7rem}
.cmp-packs .cmp-tag{background:var(--ink)}
.cmp-handle,.cmp-range{display:none}
.js .cmp-frame{display:block}
.js .cmp-b{position:absolute;inset:0;clip-path:inset(0 0 0 var(--pos,50%))}
.js .cmp-handle{display:block;position:absolute;top:0;bottom:0;left:var(--pos,50%);width:2px;margin-left:-1px;background:#fff;z-index:2;pointer-events:none}
.js .cmp-handle::after{content:"";position:absolute;top:50%;left:50%;width:2.6rem;height:2.6rem;margin:-1.3rem 0 0 -1.3rem;border-radius:50%;background:var(--teal);border:2px solid #fff;box-shadow:0 2px 12px rgba(0,0,0,.4)}
.js .cmp-packs .cmp-handle{background:var(--teal)}
.js .cmp-range{display:block;position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;z-index:3}
.js .cmp-range:focus-visible+.cmp-handle,.js .cmp-frame:focus-within .cmp-handle::after{outline:3px solid var(--sheet);outline-offset:2px}
.cmp figcaption{font-size:.95rem;color:var(--mute);margin-top:.7rem;max-width:44rem}
.cmp figcaption strong{color:var(--ink);font-weight:650}
.cmp-buy{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;margin-top:.7rem}
.cmp-buy a{display:flex;justify-content:space-between;gap:.5rem;padding:.6rem .8rem;border:1px solid var(--line);border-radius:10px;background:var(--sheet);color:var(--ink);text-decoration:none;font-weight:650}
.cmp-buy a:hover{border-color:var(--teal)}
.cmp-buy b{font:400 1.05rem/1.3 var(--serif)}

/* ladder */
.ladder{width:var(--wrap);margin:0 auto clamp(2.5rem,6vw,4.5rem)}
.ladder-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:.6rem 2rem}
.ladder-row{list-style:none;margin:1.2rem 0 0;padding:0 0 .6rem;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(10.5rem,1fr);gap:.7rem;overflow-x:auto;scroll-snap-type:x mandatory}
.ladder-row li{scroll-snap-align:start}
.ladder-row a{display:flex;flex-direction:column;gap:.35rem;height:100%;padding:.9rem;border-radius:var(--r);background:var(--sheet);border:1px solid var(--line);color:var(--ink);text-decoration:none}
.ladder-row a:hover{border-color:var(--teal)}
.lad-meter{display:flex;gap:3px}
.lad-meter i{flex:1;height:5px;border-radius:3px;background:var(--line)}
.lad-meter i.on{background:var(--umber)}
.lad-level{font-size:.75rem;text-transform:uppercase;letter-spacing:.1em;font-weight:700;color:var(--umber)}
.ladder-row img{aspect-ratio:1;object-fit:contain;margin:.3rem 0}
.lad-name{font:400 1.02rem/1.25 var(--serif)}
.lad-meta{margin-top:auto;font-size:.85rem;color:var(--mute)}
.lad-meta b{color:var(--ink);font-weight:700}

/* intro + prose */
.intro{width:var(--wrap);margin:0 auto clamp(2.5rem,6vw,4.5rem)}
.intro .prose{background:var(--sheet);border-radius:calc(var(--r)*1.6);padding:clamp(1.3rem,4vw,3rem) clamp(1.2rem,5vw,4rem)}
.prose{max-width:72ch}
.intro .prose{max-width:none}
.intro .prose>*{max-width:70ch}
.intro .prose>.products{max-width:none}
.prose p,.prose ul,.prose ol{margin:0 0 1.05rem}
.prose ul,.prose ol{padding-left:1.25rem}
.prose li{margin-bottom:.4rem}
.prose li::marker{color:var(--teal)}
.prose strong{font-weight:700}
.prose h2{font-size:clamp(1.5rem,2.8vw,2rem);margin:2.4rem 0 .9rem;display:flex;gap:.75rem;align-items:baseline}
.sheet-body{counter-reset:h2}
.sheet-body h2::before{counter-increment:h2;content:counter(h2);flex:none;display:inline-grid;place-items:center;width:2rem;height:2rem;border-radius:50%;background:var(--teal);color:#fff;font:700 .85rem/1 var(--sans);transform:translateY(-.2rem)}
.prose h3{font-size:1.3rem;margin:1.8rem 0 .6rem}
.prose blockquote{margin:1.4rem 0;padding:.2rem 0 .2rem 1.2rem;border-left:3px solid var(--umber);color:var(--mute)}
.prose figure{margin:1.6rem 0}
.prose img{border-radius:var(--r)}
.prose hr{border:0;border-top:1px solid var(--line);margin:2rem 0}
.table{overflow-x:auto;margin:1.4rem 0;border:1px solid var(--line);border-radius:10px;background:var(--sheet)}
.prose table{border-collapse:collapse;width:100%;font-size:.95rem;line-height:1.45}
.prose th{text-align:left;font-weight:700;font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;color:var(--teal);border-bottom:2px solid var(--teal);padding:.7rem .8rem;white-space:nowrap}
.prose td{padding:.65rem .8rem;border-top:1px solid var(--line);vertical-align:top}
.prose tr:first-child td{border-top:0}

/* product cards */
.products{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,12.5rem),1fr));gap:.9rem;margin:1.6rem 0 2rem}
.product-feature{margin:1.6rem 0 2rem}
.pc{display:flex;flex-direction:column;background:var(--sheet);border:1px solid var(--line);border-radius:var(--r);padding:1rem;color:var(--ink);text-decoration:none;height:100%}
.pc:hover{border-color:var(--teal);color:var(--ink)}
.pc-img{display:block;aspect-ratio:1;border-radius:50%;background:var(--glass);overflow:hidden;box-shadow:inset 0 0 0 6px var(--sheet),inset 0 0 0 7px var(--line)}
.pc-img img{width:100%;height:100%;object-fit:contain;padding:14%;mix-blend-mode:multiply}
.pc-body{display:flex;flex-direction:column;gap:.35rem;margin-top:.8rem;flex:1}
.pc-name{font:400 1.06rem/1.25 var(--serif)}
.pc-meta{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:.1rem .6rem;margin-top:auto;font-size:.85rem;color:var(--mute)}
.pc-meta>span{white-space:nowrap}
.pc .loupe{width:110px;height:110px}
.pc-price{font-weight:700;color:var(--ink);font-size:1rem}
.pc-cta{margin-top:.5rem;text-align:center;padding:.5rem;border-radius:999px;border:1.5px solid var(--teal);color:var(--teal);font-weight:700;font-size:.9rem}
.pc:hover .pc-cta{background:var(--teal);color:#fff}
.pc-single{flex-direction:row;gap:1.2rem;align-items:center}
.pc-single .pc-img{flex:0 0 min(42%,14rem)}
.pc-single .pc-body{margin-top:0}
.pc-single .pc-name{font-size:1.35rem}
.pc-single .pc-cta{align-self:flex-start;padding:.6rem 1.2rem}

/* lenses */
.lenses{width:var(--wrap);margin:0 auto clamp(3rem,7vw,5rem)}
.lens-grid{list-style:none;margin:1.4rem 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,15rem),1fr));gap:1.2rem 1rem}
.lens-grid a{position:relative;display:grid;gap:.3rem;color:var(--ink);text-decoration:none}
.crop{display:block;aspect-ratio:1;border-radius:50%;background-color:var(--stage);background-repeat:no-repeat;box-shadow:inset 0 0 0 7px var(--sheet),0 0 0 1px var(--line);position:relative;width:min(100%,12rem)}
.lens-grid .crop{margin-bottom:.5rem;transition:box-shadow .2s}
.lens-grid a:hover .crop{box-shadow:inset 0 0 0 7px var(--sheet),0 0 0 3px var(--teal)}
.crop-z{position:absolute;right:-.2rem;bottom:.6rem;padding:.2rem .5rem;border-radius:999px;background:var(--ink);color:#fff;font:400 .9rem/1.2 var(--serif)}
.lens-n{position:absolute;left:0;top:0;width:2rem;height:2rem;background:var(--teal);color:#fff;border:2px solid var(--sheet)}
.lens-k{display:block;font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--umber)}
.lens-t{display:block;font:400 1.12rem/1.25 var(--serif)}
.lens-grid a:hover .lens-t{color:var(--teal)}

/* article */
.sheet{width:var(--wrap);margin:0 auto}
.sheet-head{display:grid;gap:1.5rem;align-items:center;padding:clamp(1.6rem,5vw,3.2rem) 0 clamp(1.4rem,3vw,2rem);border-bottom:1px solid var(--line)}
@media (min-width:860px){.sheet-head{grid-template-columns:minmax(0,1fr) 15rem}}
.crumbs{font-size:.88rem;color:var(--mute);margin:0 0 .8rem}
.crumbs a{color:var(--mute)}
.sheet h1{font-size:clamp(2rem,4.8vw,3.4rem);max-width:22ch}
.sheet-meta{font-size:.88rem;color:var(--mute);margin:.9rem 0 0}
.sheet-lens{position:relative;justify-self:center;width:min(15rem,60vw)}
.crop-lg{width:100%;box-shadow:inset 0 0 0 9px var(--sheet),0 0 0 1px var(--line),0 24px 50px -30px rgba(28,26,23,.6)}
.sheet-lens::after{content:"";position:absolute;inset:-12px;border-radius:50%;border:1px dashed var(--teal);opacity:.6}
.sheet-lens-z{position:absolute;right:0;bottom:.8rem;padding:.25rem .65rem;border-radius:999px;background:var(--teal);color:#fff;font:400 1.05rem/1.2 var(--serif)}
.sheet-main{display:grid;grid-template-columns:minmax(0,1fr);gap:1.5rem;padding:clamp(1.4rem,4vw,2.6rem) 0}
@media (min-width:1000px){.sheet-main.has-toc{grid-template-columns:15rem minmax(0,72ch);gap:clamp(2rem,5vw,4.5rem)}}
.focus{align-self:start;background:var(--sheet);border:1px solid var(--line);border-radius:var(--r);padding:1rem}
@media (min-width:1000px){.focus{position:sticky;top:5.5rem}}
.focus-k{font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--umber);margin:0 0 .6rem}
.focus ol{list-style:none;margin:0;padding:0;display:grid;gap:.15rem}
.focus a{display:flex;gap:.55rem;align-items:flex-start;padding:.35rem .3rem;border-radius:8px;color:var(--ink);text-decoration:none;font-size:.9rem;line-height:1.3}
.focus a:hover,.focus a.is-on{background:var(--teal-soft)}
.focus-n{flex:none;width:1.4rem;height:1.4rem;border:1.5px solid var(--teal);color:var(--teal);font-size:.68rem}
.focus a.is-on .focus-n{background:var(--teal);color:#fff}
.sheet-body>p:first-child{font-size:1.16rem;line-height:1.55}
.onward{border-top:1px solid var(--line);padding:2rem 0 3.5rem}
.onward ul{list-style:none;margin:1.2rem 0 0;padding:0;display:grid;gap:1rem}
@media (min-width:760px){.onward ul{grid-template-columns:1fr 1fr}}
.onward a{display:grid;grid-template-columns:6.5rem 1fr;gap:1.1rem;align-items:center;padding:1rem;background:var(--sheet);border:1px solid var(--line);border-radius:var(--r);color:var(--ink);text-decoration:none}
.onward a:hover{border-color:var(--teal)}
.onward .crop{width:6.5rem;box-shadow:inset 0 0 0 4px var(--sheet),0 0 0 1px var(--line)}

/* footer */
.foot{background:var(--stage);color:#e9e6e1;margin-top:2rem}
.foot-inner{width:var(--wrap);margin:0 auto;padding:2.6rem 0 2rem;display:grid;gap:1.6rem}
@media (min-width:900px){.foot-inner{grid-template-columns:1.2fr 1fr}}
.foot a{color:#9fd6de}
.foot a:hover{color:#fff}
.foot-pub{display:flex;gap:1rem;align-items:center}
.foot-pub img{flex:none;width:84px;background:#f3f1ec;border-radius:50%;padding:6px}
.foot-pub p{margin:0;font-size:.95rem}
.foot-nav ol{display:flex;flex-wrap:wrap;gap:.3rem 1.1rem;font-size:.93rem}
.foot-disc{grid-column:1/-1;margin:0;padding-top:1.2rem;border-top:1px solid #3a3733;font-size:.85rem;color:#bdb7ae}

@media (max-width:640px){
  body{font-size:1.02rem}
  .spot{width:2.2rem;height:2.2rem;margin:-1.1rem 0 0 -1.1rem}
  .spot span{width:1.6rem;height:1.6rem;font-size:.75rem}
  .pc-single{flex-direction:column;align-items:stretch}
  .pc-single .pc-img{flex:none;width:70%;margin:0 auto}
  .pc-single .pc-cta{align-self:stretch}
  .cmp-buy{grid-template-columns:1fr}
  .products{grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem}
  .pc{padding:.7rem}
  .pc-name{font-size:.98rem}
  .pc-cta{font-size:.84rem}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}
main{min-height:62vh}
.prose img[src*="mascot"]{width:200px;background:var(--sheet);border-radius:50%;padding:12px}
.sheet-main>*,.explorer-grid>*{min-width:0}