/* YAARA / BioSnow. Original foil study, existing clinic shell. */
@font-face{font-family:BS Fira;src:url('./FiraGO-Light.woff2') format('woff2');font-weight:300;font-display:swap}
body{--bs-metal:linear-gradient(110deg,#755224 2%,#b6894b 19%,#edd2a1 28%,#9a7136 40%,#69451d 55%,#d9b578 67%,#f2d8a4 72%,#9b723c 86%,#755224 100%);--bs-display:'BS Fira',Heebo,sans-serif;background:#faf7f2}
.biosnow-post{padding-top:68px;overflow:clip;outline:0}
.bs-skip{position:fixed;top:8px;right:20px;z-index:100;background:var(--ink);color:var(--bg);padding:12px 22px;transform:translateY(-150%)}
.bs-skip:focus{transform:none}
.bs-metal{color:#94703c;background:var(--bs-metal);background-size:150% 100%;background-position:15% 50%;background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.bs-story{position:relative}
.bs-stage{width:100%;max-width:1800px;margin-inline:auto;display:grid;grid-template-columns:1fr 1.13fr;column-gap:4%;padding:64px 7% 80px;align-items:center;position:relative}
.bs-opening{grid-column:1;grid-row:1;position:relative;z-index:2;max-width:580px}
.bs-opening h1{font-family:var(--bs-display);font-weight:300;margin:0;line-height:1.13}
.bs-name{display:block;font-size:clamp(84px,8.8vw,142px);line-height:1.18;letter-spacing:-.06em;width:fit-content;margin-inline-start:auto;padding-inline:4px}
.bs-title-lines{display:block;font-size:clamp(42px,4.4vw,70px);line-height:1.16;padding-block:5px 10px}
.bs-deck{max-width:26em;color:var(--ink-2);font-size:19px;line-height:1.85;margin:30px 0 18px}
.bs-jump{display:inline-flex;gap:25px;align-items:center;font-size:16px;color:var(--honey-deep);text-decoration:none;min-height:48px}
.bs-arrow{border:1px solid #b28b5270;border-radius:50%;width:46px;height:46px;display:grid;place-items:center;font-size:24px;transition:transform .4s ease}
.bs-jump:hover .bs-arrow{transform:translateY(4px)}
.bs-art{grid-column:2;grid-row:1;position:relative;height:620px;min-width:0;direction:ltr;pointer-events:none}
.bs-foil-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:1;transition:opacity .4s ease}
.bs-art canvas{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity .4s ease}
.bs-webgl .bs-art canvas{opacity:1}
.bs-webgl .bs-foil-poster{opacity:0}
.bs-foil-shadow{position:absolute;bottom:9%;left:25%;width:52%;height:5%;background:radial-gradient(ellipse,#66563e24,transparent 68%);filter:blur(10px);z-index:-1}
.bs-result{grid-column:1;grid-row:2;padding-block:70px;max-width:540px}
.bs-result h2{font-family:var(--bs-display);font-weight:300;margin:0;line-height:1.18}
.bs-ratio{display:block;font-size:clamp(120px,14vw,210px);letter-spacing:-.07em;line-height:1.1;width:fit-content;margin-inline-start:auto;padding-inline:8px}
.bs-ratio>span{font-size:.57em;font-weight:300;margin-left:.05em;vertical-align:12%}
.bs-result-line{display:block;font-size:clamp(33px,3.25vw,52px);padding-top:10px}
.bs-result>p{font-size:17px;line-height:1.9;color:var(--ink-2);margin-top:26px}
.bs-plot{grid-column:2;grid-row:2;min-width:0;margin:0;padding-inline:12px;scroll-margin-top:108px}
.bs-plot-row+.bs-plot-row{margin-top:50px}
.bs-plot-label{display:flex;align-items:baseline;justify-content:space-between;gap:10px;font-size:18px;margin-bottom:15px;line-height:1.5}
.bs-plot-label>[lang=en]{font-size:18px;letter-spacing:-.025em}
.bs-measure{font-family:var(--bs-display);font-size:42px;line-height:1;white-space:nowrap;font-weight:300;letter-spacing:-.04em;color:var(--ink)}
.bs-measure small{font:400 14px/1 var(--f);color:var(--ink-2);letter-spacing:0}
.bs-track{height:42px;border-bottom:1px solid #b29a7830;position:relative}
.bs-graph-bar{height:100%;position:relative;box-shadow:0 10px 14px -12px #75522466}
.bs-bio-bar{width:23.2558139535%;background:linear-gradient(150deg,#b28b52,#f5dbad 22%,#a67b3d 44%,#e5c389 69%,#8c642b)}
.bs-kojic-bar{width:100%;background:linear-gradient(160deg,#a79982,#dfd5c2 25%,#b4a894 55%,#e8decf 79%,#ac9d84)}
.bs-plot figcaption{font-size:15px;line-height:1.75;color:var(--ink-2);margin-top:26px;max-width:32em}
.bs-scroll-line{display:none}
.bs-motion .bs-story{height:205svh}
.bs-motion .bs-stage{position:sticky;top:68px;height:calc(100svh - 68px);min-height:550px;padding:0;display:block;--intro:1;--result:0;--progress:0}
.bs-motion .bs-opening,.bs-motion .bs-result{position:absolute;right:7%;top:50%;width:40%;transform:translateY(-50%);padding:0}
.bs-motion .bs-opening{opacity:var(--intro);transform:translateY(calc(-50% - (1 - var(--intro)) * 18px))}
.bs-motion .bs-result{opacity:var(--result);transform:translateY(calc(-50% + (1 - var(--result)) * 18px));pointer-events:none}
.bs-motion .bs-art{position:absolute;left:0;top:0;width:58%;height:100%;z-index:1}
.bs-motion .bs-plot{position:absolute;left:7%;top:52%;width:39%;padding:0;transform:translateY(-50%);z-index:2;opacity:var(--labels,0);pointer-events:none}
.bs-motion.bs-webgl .bs-graph-bar{background:transparent;box-shadow:none}
.bs-motion .bs-foil-shadow{opacity:var(--intro)}
.bs-motion .bs-scroll-line{display:block;position:absolute;bottom:25px;right:7%;left:7%;height:1px;background:#b28b5226;overflow:hidden}
.bs-scroll-line>span{position:absolute;right:0;top:0;bottom:0;background:#b28b52;width:calc(var(--progress) * 100%)}
.bs-motion .bs-foil-poster{opacity:var(--intro)}
.bs-motion.bs-webgl .bs-foil-poster{opacity:0}
.bs-editorial{display:grid;grid-template-columns:1fr 1.15fr;gap:8%;padding-block:110px 85px;border-top:1px solid var(--line);align-items:start}
.bs-lead{font:300 clamp(29px,3vw,45px)/1.42 var(--bs-display);color:var(--honey-deep);margin:0;max-width:12em}
.bs-prose{min-width:0;max-width:620px}
.bs-prose>p{font-size:18px;line-height:1.95;color:var(--ink-2);margin:0 0 25px}
.bs-source-details{border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-top:40px}
.bs-source-details summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:20px;cursor:pointer;padding-block:24px;color:var(--ink);font-size:17px;min-height:72px}
.bs-source-details summary::-webkit-details-marker{display:none}
.bs-source-details summary>span{font-family:var(--bs-display);font-size:30px;line-height:1;color:var(--honey-deep);transition:transform .4s ease}
.bs-source-details[open] summary>span{transform:rotate(45deg)}
.bs-source-content{padding-bottom:30px}
.bs-source-content img{width:100%;height:auto;display:block;margin:0 0 22px}
.bs-source-content p{font-size:16px;line-height:1.85;color:var(--ink-2);overflow-wrap:anywhere;margin:18px 0}
.bs-text-link{display:inline-flex;align-items:center;gap:22px;min-height:48px;font-size:16px;color:var(--honey-deep);text-decoration:none}
.bs-text-link>span{font-size:24px;line-height:1;font-weight:300}
.bs-next{padding-block:10px 90px}
.bs-next-story{border-top:1px solid var(--line);padding-top:50px;display:grid;grid-template-columns:200px 1fr auto;gap:45px;align-items:center;color:var(--ink);text-decoration:none}
.bs-next-image{height:215px;overflow:hidden}
.bs-next-image img{width:100%;height:100%;object-fit:cover;object-position:50% 38%;transition:transform .8s ease}
.bs-next-story:hover img{transform:scale(1.04)}
.bs-next-copy>span{font-size:16px;color:var(--ink-2)}
.bs-next-copy>p{font:300 clamp(34px,3.6vw,56px)/1.19 var(--bs-display);margin:12px 0 0;width:fit-content}
.bs-next-arrow{font:300 58px/1 var(--bs-display);color:var(--honey-deep);transition:transform .4s ease}
.bs-next-story:hover .bs-next-arrow{transform:translateX(-6px)}
.bs-back{margin-top:35px}
body :focus-visible{outline:2px solid #94703c;outline-offset:6px}


.bs-index-intro{padding-block:30px 50px}
.bs-index-card{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:50px;text-decoration:none;color:var(--ink);padding-block:30px 70px}
.bs-index-card h2{font:300 58px/1.15 var(--bs-display);color:var(--honey-deep)}
.bs-index-card p{font-size:18px;color:var(--ink-2)}
.bs-index-art{height:410px;background:url('./foil-poster.png') center/contain no-repeat}
.bs-index-art span{display:none}
@media(min-width:1800px){.bs-motion .bs-opening,.bs-motion .bs-result{right:8%}.bs-motion .bs-art{width:57%}.bs-motion .bs-plot{left:8%;width:39%}}
@media(max-width:1100px) and (min-width:1001px){.bs-stage{padding-inline:5%;gap:3%}.bs-name{font-size:9vw}.bs-title-lines{font-size:4.8vw}.bs-deck{font-size:17px}.bs-motion .bs-opening,.bs-motion .bs-result{right:5%;width:43%}.bs-motion .bs-art{left:-3%;width:59%}.bs-motion .bs-plot{left:5%;width:41%}.bs-measure{font-size:34px}.bs-plot-label,.bs-plot-label>[lang=en]{font-size:16px}.bs-result>p{font-size:15px}.bs-editorial{gap:6%;padding-block:85px 65px}}
@media(max-width:1000px){
 .biosnow-post{padding-top:64px}
 
 
 
 
 
 .bs-stage{display:flex;flex-direction:column;padding:38px 24px 48px;gap:0;align-items:stretch}.bs-opening{max-width:none}
 .bs-name{font-size:clamp(68px,18vw,116px);line-height:1.12}.bs-title-lines{font-size:clamp(32px,8.5vw,54px);line-height:1.12;padding-bottom:7px}
 .bs-deck{font-size:16px;line-height:1.75;max-width:29em;margin:17px 0 12px}.bs-jump{font-size:15px;gap:18px}.bs-arrow{width:36px;height:36px;font-size:21px}
 .bs-art{height:390px;margin-inline:-24px}.bs-result{padding:40px 0 35px}.bs-ratio{font-size:125px;line-height:1}.bs-result-line{font-size:34px;padding-top:12px}.bs-result>p{font-size:15px;line-height:1.75;margin-top:17px}
 .bs-plot{padding:0}.bs-plot-label,.bs-plot-label>[lang=en]{font-size:16px}.bs-measure{font-size:35px}.bs-measure small{font-size:12px}.bs-track{height:34px}.bs-plot-row+.bs-plot-row{margin-top:33px}.bs-plot figcaption{font-size:14px;line-height:1.7;margin-top:22px}
 .bs-motion .bs-story{height:190svh}.bs-motion .bs-stage{top:64px;height:calc(100svh - 64px);min-height:610px}
 .bs-motion .bs-opening,.bs-motion .bs-result{top:29px;right:24px;width:calc(100% - 48px);transform:none;max-width:none}.bs-motion .bs-opening{transform:translateY(calc((1 - var(--intro)) * -15px))}.bs-motion .bs-result{transform:translateY(calc((1 - var(--result)) * 15px))}
 .bs-motion .bs-art{top:310px;left:0;width:100%;height:calc(100% - 320px);min-height:285px;margin:0}.bs-motion .bs-plot{left:24px;top:55%;width:calc(100% - 48px);transform:none}.bs-motion .bs-scroll-line{left:24px;right:24px;bottom:16px}
 .bs-editorial{display:block;padding-block:65px 50px}.bs-lead{font-size:33px;line-height:1.35;max-width:17em;margin:0 0 34px}.bs-prose>p{font-size:17px;line-height:1.9;margin-bottom:24px}
 .bs-source-details{margin-top:30px}.bs-source-details summary{font-size:16px}.bs-next{padding-block:0 50px}.bs-next-story{padding-top:28px;grid-template-columns:105px 1fr 25px;gap:18px}.bs-next-image{height:150px}.bs-next-copy>span{font-size:14px}.bs-next-copy>p{font-size:30px}.bs-next-arrow{font-size:32px}.bs-back{margin-top:25px}
 .bs-index-card{grid-template-columns:1fr;gap:10px;padding-block:0 45px}.bs-index-card h2{font-size:42px}.bs-index-art{height:300px;grid-row:1}
}
@media(max-width:1000px) and (max-height:740px){.bs-motion .bs-opening,.bs-motion .bs-result{top:22px}.bs-motion .bs-stage{min-height:0}.bs-motion .bs-name{font-size:68px}.bs-motion .bs-title-lines{font-size:32px}.bs-motion .bs-deck{font-size:15px;line-height:1.65;max-width:28em;margin:13px 0 5px}.bs-motion .bs-art{top:260px;height:calc(100% - 265px);min-height:0}.bs-motion .bs-plot{top:51%}.bs-motion .bs-ratio{font-size:100px}.bs-motion .bs-result-line{font-size:29px}.bs-motion .bs-result>p{font-size:14px;margin-top:12px}.bs-motion .bs-plot-row+.bs-plot-row{margin-top:20px}.bs-motion .bs-plot figcaption{font-size:14px;margin-top:14px;line-height:1.55}.bs-motion .bs-track{height:28px}}
@media(max-width:360px){.bs-stage{padding-inline:20px}.bs-title-lines{font-size:31px}.bs-deck{font-size:15px}.bs-motion .bs-opening,.bs-motion .bs-result{right:20px;width:calc(100% - 40px)}.bs-motion .bs-plot{left:20px;width:calc(100% - 40px)}.bs-measure{font-size:30px}.bs-plot-label,.bs-plot-label>[lang=en]{font-size:14px}.bs-next-story{grid-template-columns:86px 1fr 20px;gap:14px}.bs-next-copy>p{font-size:26px}.bs-lead{font-size:30px}}
@media(prefers-reduced-motion:reduce){body *{scroll-behavior:auto!important;animation:none!important;transition:none!important}}

@media(min-width:761px) and (max-width:1100px){
 
 
 
 
 
}
@media(min-width:601px) and (max-width:1000px){
 .bs-motion .bs-opening,.bs-motion .bs-result{right:7%;width:86%}
 .bs-motion .bs-name{font-size:100px}
 .bs-motion .bs-title-lines{font-size:49px}
 .bs-motion .bs-deck{font-size:17px;max-width:32em}
 .bs-motion .bs-art{top:375px;height:calc(100% - 385px);min-height:0}
 .bs-motion .bs-plot{left:7%;width:86%}
}
