/* About study: graphite, soft lilac and electric citron. Mobile first. */
.about-experiment{--citron:#d8ff62;--lilac:#c5b7f0;max-width:none;padding:128px 14px 150px}
.intro-marquee{overflow:hidden;margin:0 -14px 24px;mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
.intro-track{display:flex;width:max-content;animation:about-title-loop 32s linear infinite;align-items:center}
.about-experiment .intro-track h1,.intro-copy{flex:none;white-space:nowrap;font-size:clamp(42px,8vw,112px);font-weight:300;letter-spacing:-.065em;line-height:1.1;margin:0;padding:10px 38px 16px 0;max-width:none}
.intro-track br{display:none}.intro-track strong{font-weight:700}.intro-track h1::after,.intro-copy::after{content:'✳';color:var(--citron);display:inline-block;margin-left:38px;font-weight:400}
.intro-marquee:hover .intro-track,.intro-marquee:focus .intro-track{animation-play-state:paused}
.about-experiment .bio-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-items:start;max-width:1384px;margin-inline:auto}
.about-experiment .bio-tile{grid-column:1/-1;grid-row:auto;border-radius:24px;box-shadow:none;letter-spacing:-.04em}
.about-experiment .bio-portrait{height:440px;min-height:0;position:relative;padding:0;isolation:isolate;background:#222;transform:perspective(850px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));transition:transform .25s ease-out}
.about-experiment .bio-portrait img{object-position:50% 35%;transition:scale .7s ease}
.bio-portrait figcaption{position:absolute;bottom:14px;left:14px;right:14px;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 16px;border:1px solid #ffffff50;border-radius:999px;background:#1116;backdrop-filter:blur(14px);color:#fff;font-size:9px;font-weight:500;letter-spacing:.08em}
.bio-portrait figcaption span:last-child{font-size:24px;line-height:1}
.about-experiment .bio-years{position:relative;min-height:210px;background:var(--citron);color:#151810;padding:24px;display:flex;flex-direction:column;overflow:hidden}
.about-experiment .bio-years p{font-size:16px;font-weight:500;line-height:1.2;letter-spacing:-.03em;z-index:1}
.about-experiment .bio-years span{font-size:112px;font-weight:700;line-height:.95;margin:14px 0 0;z-index:1}
.orbit-object{position:absolute;right:28px;top:45px;width:130px;height:130px;perspective:500px;transform-style:preserve-3d;animation:orbit-drift 12s ease-in-out infinite alternate;pointer-events:none}
.orbit-object i{position:absolute;inset:0;border:11px solid #303e1d;border-top-color:#f7ffe3;border-left-color:#91ae4f;border-radius:50%;box-shadow:inset 3px 3px 7px #0005,4px 8px 12px #52642055;transform:rotateY(55deg) rotateX(25deg)}
.orbit-object i:nth-child(2){transform:rotateY(-55deg) rotateX(25deg)}.orbit-object i:nth-child(3){transform:rotateX(65deg)}
.about-experiment .bio-independent,.about-experiment .bio-story{padding:24px;background:#19191c;color:#f3f1eb;border:1px solid #ffffff19;font-size:23px;line-height:1.3}
.about-experiment .bio-story{background:var(--lilac);color:#211a30}
.about-experiment details summary{display:flex;align-items:center;justify-content:space-between;gap:16px;list-style:none;cursor:pointer;min-height:28px;padding:0;background:none;border:0;color:inherit}
.about-experiment details summary::-webkit-details-marker{display:none}
.section-number{font-size:10px;font-weight:500;letter-spacing:.12em;line-height:1.4}
.section-toggle{font-size:26px;font-weight:300;transition:transform .3s}
.about-experiment details[open] .section-toggle{transform:rotate(45deg)}
.about-experiment details p{margin-top:24px;animation:about-section-in .35s ease both}
.about-experiment .bio-independent strong{color:var(--citron)}
.about-experiment .bio-tools{background:#1c1c20;color:#f3f1eb;padding:26px 24px;border:1px solid #ffffff19;align-self:stretch}
.about-experiment .bio-tools h2{font-size:32px;font-weight:500;margin:20px 0 24px}
.about-experiment .bio-tool-icons{padding:14px 0}.about-experiment .tool-marquee-group{gap:28px;padding-right:28px}
.about-experiment .bio-together{background:var(--citron);color:#171a10;min-height:180px;padding:28px;font-size:32px;font-weight:700;line-height:1.06;display:block;position:relative;padding-right:65px;transition:background .25s,transform .25s}
.about-experiment .bio-together::after{content:'↗';position:absolute;right:26px;bottom:24px;font-size:48px;font-weight:300;transition:transform .25s}
.about-experiment :is(summary,a):focus-visible{outline:2px solid var(--citron);outline-offset:5px}
@media(hover:hover) and (pointer:fine){.bio-portrait:hover img{scale:1.035}.about-experiment .bio-together:hover{background:#e5ff9d;transform:translateY(-3px)}.about-experiment .bio-together:hover::after{transform:translate(4px,-4px)}}
@media(min-width:700px){.about-experiment{padding:120px 28px 150px}.intro-marquee{margin-inline:-28px;margin-bottom:32px}.about-experiment .bio-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.about-experiment .bio-tile{grid-column:span 1}.about-experiment .bio-portrait{grid-row:span 2;height:580px}.about-experiment .bio-years{min-height:230px}.about-experiment .bio-story{grid-column:1/-1}.about-experiment .bio-independent{min-height:330px}.about-experiment .bio-tools,.about-experiment .bio-together{min-height:240px}}
@media(min-width:1100px){.about-experiment{padding-top:125px}.about-experiment .bio-grid{grid-template-columns:1.05fr 1fr 1fr;gap:22px}.about-experiment .bio-portrait{grid-row:span 2;height:620px}.about-experiment .bio-years{min-height:280px}.about-experiment .bio-independent{min-height:280px}.about-experiment .bio-story{grid-column:2/4;min-height:318px;font-size:28px;padding:32px}.about-experiment .bio-tools{grid-column:1/2}.about-experiment .bio-together{grid-column:2/4;font-size:46px;padding:32px;min-height:240px}.orbit-object{right:20px;width:112px;height:112px}}
@keyframes about-title-loop{to{transform:translateX(-50%)}}
@keyframes orbit-drift{from{transform:rotate(-18deg) rotateY(-18deg)}to{transform:rotate(28deg) rotateY(28deg)}}
@keyframes about-section-in{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.intro-track,.orbit-object,.about-experiment details p{animation:none}.intro-marquee{overflow-x:auto;mask-image:none}.intro-copy{display:none}.about-experiment .bio-portrait,.about-experiment .bio-together,.section-toggle{transition:none;transform:none}}
/* Embedded signature: the same live model, anchored to the experience card. */
.about-experiment .bio-years{overflow:visible;isolation:isolate}
.about-experiment .bio-years #stage{position:absolute;inset:auto;top:-30px;right:-12px;left:auto;bottom:auto;width:58%;height:calc(100% + 50px);z-index:2;transform:none;transition:none;pointer-events:none}
.about-experiment .bio-years #stage canvas{width:100%;height:100%}
.about-experiment .bio-years #status span{font-size:10px;line-height:1.3;letter-spacing:0;margin:0}
.about-experiment .bio-years p,.about-experiment .bio-years .experience-value{max-width:48%}
.about-experiment .intro-marquee{mask-image:none}
.about-experiment .intro-marquee:hover .intro-track,.about-experiment .intro-marquee:focus .intro-track{animation-play-state:running}
.about-experiment .bio-independent,.about-experiment .bio-story{font-size:clamp(21px,2vw,28px);line-height:1.35;font-weight:400}
.about-experiment .bio-together{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:28px;font-size:clamp(30px,3.4vw,46px);line-height:1.1;font-weight:500}
.about-experiment .bio-together::after{display:none}
.about-experiment .together-icon{width:44px;height:44px;object-fit:contain;flex:none;filter:brightness(0)}
.about-experiment .bio-tool-icons .tool-marquee-group img{width:44px;height:44px}
@media(min-width:1100px){.about-experiment .bio-together{padding:32px}}
.about-experiment .bio-years #stage{top:-48px;height:calc(100% + 70px)}
@font-face{font-family:'Gotham Pro';src:url('./assets/fonts/GothamPro-BoldItalic.otf') format('opentype');font-weight:700;font-style:italic;font-display:swap}
.about-experiment .bio-together{flex-direction:column;align-items:stretch;justify-content:center;gap:26px;min-height:240px}
.about-experiment .together-label{font-weight:700;font-style:italic}
.about-experiment .bio-together:hover{transform:none;background:var(--citron)}
.contact-slide{position:relative;height:70px;border-radius:999px;border:1px solid #18200f26;background:#2028111a;box-shadow:inset 0 2px 8px #16210b18;max-width:440px;width:100%;padding:5px;isolation:isolate}
.contact-handle{position:absolute;left:5px;top:5px;width:58px;height:58px;display:grid;place-items:center;border-radius:50%;background:#171a10;color:white;box-shadow:0 4px 12px #13200735,inset 0 1px 0 #ffffff30;transform:translateX(var(--slide-x,0px));transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .2s;touch-action:pan-y;user-select:none;-webkit-user-select:none;z-index:2;cursor:grab}
.contact-handle img{width:38px;height:38px;pointer-events:none}
.contact-slide.is-dragging .contact-handle{transition:none;cursor:grabbing;box-shadow:0 6px 18px #13200755}
.slide-hint{position:absolute;inset:0 16px 0 76px;display:flex;align-items:center;justify-content:center;gap:12px;font-size:12px;font-style:normal;font-weight:500;letter-spacing:-.02em;pointer-events:none;opacity:calc(1 - var(--slide-progress,0));transition:opacity .2s}
.slide-hint span{font-size:24px;animation:contact-nudge 2.5s ease-in-out infinite}
.about-experiment .contact-handle:focus-visible{outline:2px solid #171a10;outline-offset:3px}
@keyframes contact-nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(5px)}}
@media(prefers-reduced-motion:reduce){.slide-hint span{animation:none}.contact-handle,.slide-hint{transition:none}}
/* One edge-to-edge marquee, with equal breathing room around the mobile title. */
@media(max-width:700px) and (orientation:portrait){
 .about-experiment{padding-top:calc(112px + env(safe-area-inset-top))}
 .about-experiment .intro-marquee{margin-bottom:32px}
 .about-experiment .intro-track h1,.about-experiment .intro-copy{font-size:clamp(60px,16vw,96px);padding-top:8px;padding-bottom:8px}
}
/* Palette trial: ice blue, peach and midnight ink. */
.about-experiment{--citron:#a9d9ff;--lilac:#f1bda5}
.about-experiment .bio-tile{--card-glow:rgba(123,185,244,.24);box-shadow:0 12px 26px -18px var(--card-glow),0 24px 38px -30px var(--card-glow)}
.about-experiment .bio-story{--card-glow:rgba(241,160,129,.35);color:#30211f}
.about-experiment .bio-years,.about-experiment .bio-together{color:#142332;--card-glow:rgba(136,201,255,.42)}
.about-experiment .bio-independent,.about-experiment .bio-tools{background:#161c24}
.about-experiment .contact-slide{background:#14233214;border-color:#14233226;box-shadow:inset 0 2px 8px #14233218}
.about-experiment .contact-handle{background:#142332}
@media(hover:hover) and (pointer:fine){.about-experiment .bio-tile:hover{box-shadow:0 14px 30px -14px var(--card-glow),0 26px 44px -24px var(--card-glow)}}
@media(min-width:701px) and (pointer:fine){.about-experiment .bio-years #stage{top:-95px;height:calc(100% + 110px)}}
@font-face{font-family:'Gotham Pro';src:url('./assets/fonts/GothamPro-BlackItalic.otf') format('opentype');font-weight:900;font-style:italic;font-display:swap}
.about-experiment .together-label{font-weight:900;font-style:italic}
/* Same green pointer halo as the gallery, visible outside the cards only. */
.about-experiment .bio-tile,.about-experiment .bio-tile:hover{position:relative;isolation:isolate;overflow:visible;box-shadow:none}
.about-experiment .bio-portrait img{border-radius:inherit}
@media(hover:hover) and (pointer:fine){
 .about-experiment .bio-tile::before{content:'';position:absolute;inset:-180px;border-radius:inherit;z-index:-2;pointer-events:none;background:radial-gradient(circle 160px at calc(var(--box-glow-x,50%) + 180px) calc(var(--box-glow-y,50%) + 180px),rgba(111,244,156,.75),rgba(111,244,156,.25) 45%,transparent 75%);filter:blur(22px);opacity:0;transition:opacity .4s ease}
 .about-experiment .bio-tile::after{content:'';display:block;position:absolute;inset:0;z-index:-1;border-radius:inherit;background:inherit;pointer-events:none;transform:none}
 .about-experiment .bio-tile.box-glowing::before{opacity:1}
}
@media(prefers-reduced-motion:reduce){.about-experiment .bio-tile::before{transition:none}}
/* Palette trial: warm cream, coral and deep plum. */
.about-experiment{--citron:#f3e5cb;--lilac:#ec8b79}
.about-experiment .bio-years,.about-experiment .bio-together{color:#30202c}
.about-experiment .bio-independent,.about-experiment .bio-tools{background:#261f2b;color:#f7f0e8}
.about-experiment .bio-story{color:#351e27}
.about-experiment .contact-slide{background:#30202c12;border-color:#30202c28;box-shadow:inset 0 2px 8px #30202c18}
.about-experiment .contact-handle{background:#30202c}
.about-experiment .contact-handle:focus-visible{outline-color:#30202c}
/* Violet leads the palette; mint remains a small accent. */
.about-experiment{--citron:#c8bced;--lilac:#d9cef4}
.about-experiment .bio-years,.about-experiment .bio-together{color:#302641}
.about-experiment .bio-independent,.about-experiment .bio-tools{background:#30213f;color:#f5f1fa}
.about-experiment .bio-independent strong{color:#bfe8d4}
.about-experiment .bio-story{color:#302641}
.about-experiment .contact-slide{background:#30264112;border-color:#30264128;box-shadow:inset 0 2px 8px #30264118}
.about-experiment .contact-handle{background:#302641}
.about-experiment .contact-handle:focus-visible{outline-color:#302641}
.about-experiment .bio-years p{font-size:clamp(22px,2.1vw,30px);font-weight:700;line-height:1.15;max-width:62%}
/* Equal desktop columns and matching first-row cards, sized by their content. */
@media(min-width:1100px){
 .about-experiment .bio-grid{grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch}
 .about-experiment .bio-years,.about-experiment .bio-independent{align-self:stretch;min-height:280px}
 .about-experiment .bio-portrait{height:100%;min-height:620px}
}

/* Reference palette: citrus, purple, deep purple, graphite, white and black. */
.about-experiment{--citron:#d3fc72;--lilac:#342066}
.about-experiment .bio-years{background:#553199;color:#fff}
.about-experiment .bio-independent{background:#1e1b26;color:#fff}
.about-experiment .bio-independent strong{color:#d3fc72}
.about-experiment .bio-story,.about-experiment .bio-tools{background:#342066;color:#fff}
.about-experiment .bio-together{background:#d3fc72;color:#1e1b26;flex-direction:row;align-items:center;justify-content:space-between;gap:20px;cursor:pointer;text-decoration:none;transition:background .25s ease}
.about-experiment .bio-together .together-label{font-weight:900;font-style:italic}
.about-experiment .contact-icon{display:grid;place-items:center;flex:none;width:64px;height:64px;border-radius:50%;background:#1e1b26;transition:transform .25s ease}
.about-experiment .contact-icon img{width:40px;height:40px;object-fit:contain}
.about-experiment .bio-together:focus-visible{outline:3px solid #fff;outline-offset:6px}
@media(hover:hover) and (pointer:fine){.about-experiment .bio-together:hover{background:#defe99}.about-experiment .bio-together:hover .contact-icon{transform:translate(3px,-3px) rotate(-8deg)}}
@media(max-width:699px){.about-experiment .bio-together{min-height:160px;padding:24px}.about-experiment .contact-icon{width:56px;height:56px}.about-experiment .contact-icon img{width:36px;height:36px}}
@media(prefers-reduced-motion:reduce){.about-experiment .bio-together,.about-experiment .contact-icon{transition:none}.about-experiment .bio-together:hover .contact-icon{transform:none}}

/* Translucent panels on the original dark background. */
.about-page{background:#000}
.about-experiment{position:relative;z-index:1}
.about-experiment .bio-tile:not(.bio-portrait){border:1px solid #ffffff24;background-image:linear-gradient(135deg,#ffffff0b,transparent 55%);box-shadow:inset 0 1px 0 #ffffff12}
.about-experiment .bio-tile:not(.bio-portrait)::after{background:transparent}
.about-experiment .bio-years{background-color:#553199a3}
.about-experiment .bio-independent{background-color:#1e1b26b3}
.about-experiment .bio-story,.about-experiment .bio-tools{background-color:#34206699}
.about-experiment .bio-together{background-color:#d3fc72e0}
@media(hover:hover) and (pointer:fine){.about-experiment .bio-together:hover{background-color:#defe99eb;background-image:linear-gradient(135deg,#ffffff14,transparent 55%)}}
@media(max-width:699px){
 .about-experiment .bio-portrait{height:clamp(250px,76vw,320px);min-height:0}
 .about-experiment .bio-portrait img{object-position:50% 30%}
 .about-experiment .bio-together{min-height:100px;padding:20px 22px;gap:14px;font-size:clamp(24px,6.8vw,30px)}
 .about-experiment .contact-icon{width:48px;height:48px}
 .about-experiment .contact-icon img{width:32px;height:32px}
}

/* Permanent text sections and a halo below, never above, the card surfaces. */
.about-experiment .section-heading{display:flex;align-items:center;min-height:28px}
.about-experiment :is(.bio-independent,.bio-story) p{margin-top:24px}
.about-experiment .bio-tile::before,.about-experiment .bio-tile::after{display:none}
.about-card-halo{position:fixed;left:0;top:0;width:400px;height:400px;transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;z-index:0;background:radial-gradient(circle,rgba(111,244,156,.65),rgba(111,244,156,.2) 40%,transparent 70%);filter:blur(22px);opacity:0;transition:opacity .35s ease}
.about-card-halo.is-active{opacity:1}
@media(prefers-reduced-motion:reduce){.about-card-halo{transition:none}}

@media(max-width:700px) and (orientation:portrait){.about-experiment .bio-together{border-radius:999px}}

.about-experiment .bio-independent strong,.about-experiment .bio-story strong{color:#d8c7f5}

/* Compact experience layout only while the mobile model selector is off. */
@media(max-width:700px) and (orientation:portrait){
 html:has(.model-toggle[aria-pressed="false"]) .about-experiment .bio-years{flex-direction:row;align-items:center;justify-content:space-between;gap:20px;min-height:132px}
 html:has(.model-toggle[aria-pressed="false"]) .about-experiment .bio-years p{flex:1;max-width:none}
 html:has(.model-toggle[aria-pressed="false"]) .about-experiment .bio-years .experience-value{flex:none;max-width:none;margin:0;font-size:88px;line-height:.95}
}