/* ============================================================
   KOZY — sensory system · science.html (ink) + about.html (sand)
   Loaded after sensory.css (+ sand.css on about).
   ============================================================ */

/* ---------- shared ---------- */
.page-hero{min-height:88svh;display:flex;flex-direction:column;justify-content:flex-end;padding:8rem var(--gutter) clamp(2.5rem,6vh,4.5rem);max-width:1280px;margin:0 auto;width:100%}
.page-hero h1{font-size:clamp(2.7rem,6.2vw,6.4rem);max-width:15ch}
.page-hero h1 em{font-variation-settings:"opsz" 144,"SOFT" 60}
.page-hero .lede{margin-top:1.8rem;max-width:44ch}
.page-hero .cap{display:block;margin-top:2.2rem}
section.plain h2{max-width:16ch}
.two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,5vw,6rem);align-items:center}
.two .copy{max-width:52ch}
.grain-svg{width:100%;height:auto}
.line-art text{font-family:var(--body);font-size:12px;letter-spacing:.12em;fill:var(--ivory-70);stroke:none}
.line-art text.soft{fill:var(--ivory-45);opacity:1}
.paradox .body-art{max-width:960px}
.rows{margin-top:clamp(2.5rem,5vh,4rem);max-width:64ch}
.rows>div{display:grid;grid-template-columns:3.2rem 1fr;gap:1rem;padding:1.4rem 0;border-top:1px solid var(--ivory-18)}
.rows>div:last-child{border-bottom:1px solid var(--ivory-18)}
.rows i{font-family:var(--display);font-style:normal;font-weight:300;font-size:1.4rem;color:var(--amber);font-variation-settings:"opsz" 40}
.rows b{display:block;font-family:var(--display);font-weight:300;font-size:clamp(1.25rem,1.7vw,1.55rem);line-height:1.2;margin-bottom:.45rem;font-variation-settings:"opsz" 48}
.rows p{color:var(--ivory-70);max-width:48ch}
.numline{margin-top:clamp(2rem,4vh,3rem);font-size:13px;letter-spacing:.06em;color:var(--ivory-70);line-height:1.9;max-width:64ch}
.cta-row{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:2.2rem}
@media (max-width:900px){.two{grid-template-columns:1fr}.page-hero{min-height:0;padding-top:7rem}}

/* ---------- SCIENCE · the spectrum band (the page's own artwork) ---------- */
.spectrum{position:relative;height:clamp(84px,14vh,150px);margin-top:clamp(2.5rem,6vh,4.5rem);overflow:hidden;isolation:isolate;
  --spec:linear-gradient(90deg,#4A3F63 0%,#5b4364 12%,#6E4458 22%,#8c4150 32%,#B03E48 42%,#C4574E 52%,#D98C52 60%,#8a5a3f 72%,#3a2f33 86%,#1E1D28 100%);
  background-image:var(--spec)}
.spectrum::before{content:"";position:absolute;inset:0;background-image:var(--spec);background-position:2% 0;background-size:104% 100%;opacity:0;animation:breathe 8s ease-in-out infinite}
.spectrum::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.26;mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");background-size:300px 300px}
.spectrum .lab{position:absolute;bottom:.9rem;font-size:11.5px;letter-spacing:.12em;color:var(--ivory);z-index:1;text-shadow:0 1px 8px rgba(22,21,31,.6)}
.spectrum .lab.l{left:1rem}.spectrum .lab.r{right:1rem;text-align:right;color:var(--ivory-70)}
.spectrum .tick{position:absolute;left:62%;top:0;bottom:0;width:1px;background:rgba(244,240,233,.35);z-index:1}
.spectrum .tick::after{content:"where the eye stops";position:absolute;top:.8rem;left:.7rem;font-size:11px;letter-spacing:.12em;color:var(--ivory-70);white-space:nowrap}
.spectrum.small{height:clamp(40px,7vh,70px);margin-top:clamp(3rem,7vh,5rem)}
.spectrum.small .lab,.spectrum.small .tick::after{display:none}
@media (max-width:700px){.spectrum .tick::after{display:none}.spectrum .lab.r{max-width:50%}}

/* paradox */
.paradox{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,4vw,4rem);align-items:start;margin-top:clamp(3rem,7vh,5rem)}
.paradox .body-art{grid-column:1/-1;max-width:900px;margin:clamp(1rem,3vh,2rem) auto 0}
.paradox .side b{display:block;font-family:var(--display);font-weight:300;font-size:clamp(1.3rem,1.8vw,1.7rem);line-height:1.2;margin-bottom:.8rem;font-variation-settings:"opsz" 48}
.paradox .side b i{font-style:normal;color:var(--ivory-45);margin-right:.4em}
.paradox .side.warm b i{color:var(--amber)}
.paradox .side p{color:var(--ivory-70);font-size:15.5px}
.paradox .body-art{width:100%;height:auto}
.heatflow{animation:flow 6s linear infinite}
.heatflow.slow{animation-duration:9s}
@keyframes flow{to{stroke-dashoffset:-96}}
.para-close{margin-top:clamp(3rem,6vh,4.5rem);font-family:var(--display);font-weight:300;font-size:clamp(1.5rem,2.6vw,2.2rem);line-height:1.35;max-width:30ch;font-variation-settings:"opsz" 60}
.para-close em{color:var(--amber)}
@media (max-width:900px){.paradox{grid-template-columns:1fr}}

/* reach etching */
.reach{margin-top:clamp(3rem,7vh,5rem)}
.reach svg{width:100%;height:auto}
.reach .cap{display:block;margin-top:1rem;max-width:64ch;line-height:1.7}
.reach-svg text.heat-t{fill:var(--amber);opacity:.95}
@media (max-width:700px){.reach-svg text{font-size:17px}.reach-svg .mob-hide{display:none}}

/* ondol */
.ondol-wrap{position:relative}
.ondol-stage{--base:.12;--zoom:900%;--drift:20%;margin-top:clamp(3rem,7vh,5rem);padding:clamp(2rem,6vw,5rem);min-height:52vh;display:flex;flex-direction:column;justify-content:space-between;gap:2rem}
.ondol-stage .trace{position:absolute;inset:0;z-index:1;pointer-events:none}
.ondol-stage .ondol-svg{width:min(880px,100%);margin:0 auto;z-index:2;position:relative}
.ondol-stage .cap{z-index:2;color:var(--ivory-70)}
.ondol-svg .lab{cursor:pointer;pointer-events:all;transition:fill .6s ease}
.ondol-svg .lab:hover,.ondol-svg .lab.on{fill:var(--amber)}
.ondol-svg .part{transition:stroke 1.5s ease,opacity 1.5s ease}
.ondol-svg .part.lit,.ondol-svg .part.lit *{stroke:var(--amber)}
.ondol-parts{margin-top:clamp(2.5rem,5vh,4rem)}
.ondol-parts>div{cursor:default}
.ondol-parts>div.on b{color:var(--amber)}
.ondol-parts b{transition:color 1.5s ease}
.ondol-close{margin-top:clamp(2.5rem,5vh,4rem);font-family:var(--display);font-weight:300;font-size:clamp(1.3rem,2vw,1.7rem);line-height:1.4;max-width:34ch;font-variation-settings:"opsz" 48}
.ondol-close::before{content:"“";color:var(--amber)}
.ondol-close::after{content:"”";color:var(--amber)}
.sci .wm .glyph{top:14%;transform:none;font-size:clamp(11rem,22vw,20rem);opacity:.06;white-space:nowrap}

/* questions (shared with pdp) */
.qs{max-width:720px}
.qs details{border-top:1px solid var(--ivory-18)}
.qs details:last-child{border-bottom:1px solid var(--ivory-18)}
.qs summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding:1.2rem 0;font-family:var(--display);font-weight:300;font-size:clamp(1.15rem,1.6vw,1.35rem);font-variation-settings:"opsz" 40}
.qs summary::-webkit-details-marker{display:none}
.qs summary::after{content:"+";color:var(--amber);font-family:var(--body);font-weight:300;transition:transform var(--ui)}
.qs details[open] summary::after{transform:rotate(45deg)}
.qs details p{color:var(--ivory-70);padding:0 0 1.4rem;max-width:56ch}

/* science finale (ink, no gradient) */
.sci-finale{padding:clamp(6rem,14vh,11rem) 0 clamp(4rem,8vh,6rem);text-align:center}
.sci-finale h2{margin:0 auto;max-width:14ch}
.sci-finale .lede{margin:1.6rem auto 0;max-width:40ch}
.sci-finale .cta-row{justify-content:center}
.sci-finale .cap{display:block;margin-top:1.4rem}

/* ---------- ABOUT (on sand) ---------- */
.sand .page-hero h1{max-width:11ch}
.cities{display:flex;flex-wrap:wrap;gap:1rem 3rem;margin-top:clamp(2rem,5vh,3.5rem);border-top:1px solid var(--ivory-18);padding-top:1.4rem}
.cities div{font-size:13px;letter-spacing:.06em;color:var(--ivory-70)}
.cities b{display:block;font-family:var(--display);font-weight:300;font-size:clamp(1.8rem,3vw,2.6rem);letter-spacing:0;color:var(--ivory);font-variation-settings:"opsz" 72;line-height:1.1;margin-top:.3rem;font-variant-numeric:tabular-nums}
.cities .cap{display:block;margin-top:.5rem}
.sand .ph{overflow:hidden;background:var(--sand)}
.sand .ph img{width:100%;height:100%;object-fit:cover;display:block}
.sand .ph.wide{aspect-ratio:4/3}
.founders{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,6rem);margin-top:clamp(3rem,7vh,5rem)}
.founder .portrait{aspect-ratio:4/5;background:var(--sand);position:relative;overflow:hidden;display:flex;align-items:flex-end;padding:1.2rem}
.founder .portrait img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.founder .portrait .cap{position:relative;color:var(--ivory-45)}
.founder h3{margin-top:1.6rem}
.founder .role{display:block;margin:.4rem 0 1.1rem}
.founder blockquote{font-family:var(--display);font-weight:300;font-size:clamp(1.1rem,1.45vw,1.3rem);line-height:1.45;font-variation-settings:"opsz" 40;max-width:40ch}
.founder blockquote p+p{margin-top:.9rem}
.founder .tags{display:block;margin-top:1.1rem}
.letter{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(2rem,5vw,6rem);align-items:start}
.letter .text p{font-family:var(--display);font-weight:300;font-size:clamp(1.15rem,1.6vw,1.45rem);line-height:1.5;max-width:44ch;font-variation-settings:"opsz" 40}
.letter .text p+p{margin-top:1.3rem}
.letter .text p.rv{transition-delay:var(--d,0s)}
.letter .sig{margin-top:2rem;font-family:var(--display);font-style:italic;font-size:1.3rem;font-variation-settings:"opsz" 40}
.letter .sig .cap{display:block;margin-top:.4rem;font-style:normal}
.letter .swan{position:sticky;top:7rem}
.letter .swan svg{width:100%;height:auto}
.letter .swan .cap{display:block;margin-top:.8rem}
.sand .line-art{stroke:var(--ivory);opacity:.85}
.sand .line-art .heat{stroke:var(--coral)}
.sand .line-art .soft{opacity:.4}
.proof-text{margin-top:1.6rem;max-width:60ch}
.proof-text p+p{margin-top:1rem}
.sand .rows i{color:var(--coral)}
.sand .qs summary::after{color:var(--coral)}
.about-finale{padding:clamp(6rem,14vh,11rem) 0 clamp(4rem,8vh,6rem);text-align:center;position:relative;isolation:isolate;background:linear-gradient(to bottom,rgba(216,201,178,0),rgba(216,201,178,.85))}
.about-finale::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(112deg,rgba(74,54,38,0) 40%,rgba(74,54,38,.22) 100%)}
.about-finale h2{margin:0 auto;max-width:12ch}
.about-finale .lede{margin:1.6rem auto 0;max-width:40ch}
.about-finale .cta-row{justify-content:center}
.about-finale .cap{display:block;margin-top:1.6rem}
@media (max-width:900px){.founders{grid-template-columns:1fr}.letter{grid-template-columns:1fr}.letter .swan{position:static;max-width:320px}}
@media (prefers-reduced-motion:reduce){.heatflow{animation:none}.spectrum::before{animation:none}.letter .text p.rv{transition-delay:0s}}

/* ---------- PARTNERS (on sand) ---------- */
.hero-band{position:relative;background:transparent;margin:clamp(2.5rem,6vh,4.5rem) auto 0;max-width:1280px}
.hero-band img{width:100%;aspect-ratio:21/9;object-fit:cover;display:block;background:var(--sand)}
.hero-band .cap{display:block;margin:.8rem 0 0;color:var(--ivory-45)}
.intent{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(2rem,5vw,6rem);align-items:start}
.intent .text p{font-family:var(--display);font-weight:300;font-size:clamp(1.15rem,1.6vw,1.45rem);line-height:1.5;max-width:46ch;font-variation-settings:"opsz" 40}
.intent .text p+p{margin-top:1.3rem}
.intent .text p.rv{transition-delay:var(--d,0s)}
.intent .sig{margin-top:1.8rem;font-family:var(--display);font-style:italic;font-size:1.3rem;font-variation-settings:"opsz" 40}
.intent .sig .cap{display:block;margin-top:.4rem;font-style:normal}
.intent .ph{aspect-ratio:4/5;align-self:center}
.win3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.5rem,3vw,3rem);margin-top:clamp(2.5rem,5vh,4rem)}
.win3 div{border-top:1px solid var(--ivory-18);padding-top:1.2rem}
.win3 b{display:block;font-family:var(--display);font-weight:300;font-size:clamp(1.5rem,2.2vw,2rem);line-height:1.15;margin-bottom:.7rem;font-variation-settings:"opsz" 60}
.win3 b em{color:var(--coral);font-style:italic}
.win3 p{color:var(--ivory-70);font-size:15.5px;max-width:34ch}
.door .ww{margin-top:1rem;display:grid;gap:.5rem}
.door .ww span{display:block;font-size:14.5px;line-height:1.5;color:var(--ivory-70);max-width:44ch}
.door .ww span b{font-family:var(--body);font-weight:500;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ivory-45);display:block;margin-bottom:.15rem}
.doors-more{margin-top:1.6rem;color:var(--ivory-70);max-width:56ch;font-size:15.5px}
.mattress{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,5vw,6rem);align-items:center}
.mattress .ph{aspect-ratio:4/3}
.mattress .pullq{margin-top:1.6rem;font-family:var(--display);font-weight:300;font-size:clamp(1.3rem,2vw,1.7rem);line-height:1.4;max-width:30ch;font-variation-settings:"opsz" 48}
.mattress .pullq em{color:var(--coral)}
.ways{display:grid;grid-template-columns:repeat(3,1fr);gap:0 clamp(1.5rem,3vw,3rem);margin-top:clamp(2.5rem,5vh,4rem)}
.ways div{border-top:1px solid var(--ivory-18);padding:1.1rem 0 1.3rem}
.ways b{display:block;font-family:var(--display);font-weight:300;font-size:1.25rem;margin-bottom:.35rem;font-variation-settings:"opsz" 40}
.ways p{color:var(--ivory-70);font-size:14.5px;max-width:30ch}
.proofline{margin-top:clamp(2rem,4vh,3rem);font-size:13px;letter-spacing:.06em;color:var(--ivory-70);line-height:1.9;max-width:70ch}
.quotes{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,3vw,3rem);margin-top:clamp(2rem,4vh,3rem)}
.quotes blockquote{font-family:var(--display);font-weight:300;font-size:clamp(1.1rem,1.5vw,1.35rem);line-height:1.45;font-variation-settings:"opsz" 40;border-top:1px solid var(--ivory-18);padding-top:1.2rem;max-width:40ch}
.quotes blockquote::before{content:"“";color:var(--coral)}
.quotes cite{display:block;font-style:normal;margin-top:.9rem}
.partner-form{max-width:820px}
.partner-form .form{grid-template-columns:1fr 1fr;margin-top:clamp(2rem,4vh,3rem)}
.partner-form .form .full{grid-column:1/-1}
.partner-form .form label{color:var(--ivory-45)}
.partner-form .form input,.partner-form .form select,.partner-form .form textarea{color:var(--ivory);background:rgba(255,255,255,.3);border-color:var(--ivory-18)}
.partner-form .form input:focus,.partner-form .form textarea:focus,.partner-form .form select:focus{border-color:var(--ivory-70)}
.partner-form .form select option{color:var(--ivory)}
.partner-form .cap{display:block;margin-top:.9rem;line-height:1.6;max-width:52ch}
@media (max-width:900px){.intent{grid-template-columns:1fr}.intent .ph{position:static;max-width:420px}.win3{grid-template-columns:1fr}.mattress{grid-template-columns:1fr}.ways{grid-template-columns:1fr}.quotes{grid-template-columns:1fr}.partner-form .form{grid-template-columns:1fr}.hero-band{aspect-ratio:4/3}}
@media (prefers-reduced-motion:reduce){.intent .text p.rv{transition-delay:0s}}

/* they pay for the extra bag */
.carry-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1rem,2vw,1.6rem)}
.carry-grid figure{aspect-ratio:4/5;overflow:hidden;background:var(--sand);position:relative}
.carry-grid figure img{width:100%;height:100%;object-fit:cover;display:block}
.carry-grid figure .cap{position:absolute;left:.9rem;bottom:.8rem;color:var(--ink);text-shadow:0 1px 10px rgba(74,54,38,.6)}
.carry-grid figure.placeholder .cap{color:var(--ivory-45);text-shadow:none}
.carry-grid figure:nth-child(2){margin-top:2.4rem}
.carry-grid figure:nth-child(3){margin-top:-2.4rem}
@media (max-width:900px){.carry-grid figure:nth-child(2),.carry-grid figure:nth-child(3){margin-top:0}}

/* about — photos with a caption on them, and the 2022 moment */
.sand .ph.tall{aspect-ratio:4/5}
.sand .ph{position:relative}
.sand .ph .cap.onph{position:absolute;left:1rem;bottom:.9rem;color:var(--ink);text-shadow:0 1px 10px rgba(74,54,38,.6)}
.then{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:clamp(2rem,5vw,6rem);align-items:end;margin-top:clamp(4rem,9vh,7rem);border-top:1px solid var(--ivory-18);padding-top:clamp(2.5rem,5vh,4rem)}
.then .copy{max-width:52ch}
.then .copy em{color:var(--ivory)}
@media (max-width:900px){.then{grid-template-columns:1fr}.then .ph{max-width:420px}}

/* strip of small photos — people carrying it */
.strip{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(.6rem,1.2vw,1rem);margin-top:clamp(2rem,4vh,3rem)}
.strip figure{position:relative;aspect-ratio:1;overflow:hidden;background:var(--sand)}
.strip figure img{width:100%;height:100%;object-fit:cover;display:block}
.strip figure .cap{display:block;margin-top:.5rem;font-size:11.5px;position:static}
.strip figure{aspect-ratio:auto}
.strip figure img{aspect-ratio:1}
.carry-two{align-items:start}
.carry-two .strip{grid-template-columns:repeat(3,1fr);margin-top:0}
@media (max-width:900px){.strip{grid-template-columns:repeat(3,1fr)}.carry-two .strip{grid-template-columns:repeat(3,1fr);margin-top:1.5rem}}

/* swan — one line, drawn on reveal; calm above, paddling below */
.swan-svg .swan-line{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 3.4s cubic-bezier(.4,0,.2,1) .2s}
.swan.in .swan-svg .swan-line{stroke-dashoffset:0}
.swan-svg .eye{fill:var(--ivory);stroke:none;opacity:0;transition:opacity .8s ease 3.2s}
.swan.in .swan-svg .eye{opacity:.9}
.swan-svg .under{opacity:0;transition:opacity 1.2s ease 3s}
.swan.in .swan-svg .under{opacity:1}
.swan-svg .float,.swan-svg .ripples,.swan-svg .leg{transform-box:view-box}
.swan.in .swan-svg .float{animation:swan-bob 5.5s ease-in-out infinite alternate}
.swan.in .swan-svg .ripples{animation:swan-drift 7s ease-in-out infinite alternate}
.swan.in .swan-svg .leg{animation:swan-paddle .85s cubic-bezier(.45,0,.55,1) infinite alternate}
.swan.in .swan-svg .leg.b{animation-direction:alternate-reverse}
@keyframes swan-bob{from{transform:translateY(0)}to{transform:translateY(-2.5px)}}
@keyframes swan-drift{from{transform:translateX(-3px)}to{transform:translateX(3px)}}
@keyframes swan-paddle{from{transform:rotate(-16deg)}to{transform:rotate(16deg)}}
@media (prefers-reduced-motion:reduce){.swan-svg .swan-line{stroke-dashoffset:0;transition:none}.swan-svg .eye,.swan-svg .under{opacity:1;transition:none}.swan.in .swan-svg .float,.swan.in .swan-svg .ripples,.swan.in .swan-svg .leg{animation:none}}