/* Homepage experience, scoped to preserve the rest of the site's design system. */
/* The hero takes the header's edges rather than the page margins: headline
   and visualization run out to the window's own margin (--page-gutter, 7vw
   on a wide screen), the same edge the bar keeps at rest. */
.sculpture-hero{--hero-x:var(--page-gutter)}
/* The copy column is cut to the copy: wide enough for the longest headline
   line (the English one, about 7.9 times the type size) and no wider, so it
   leaves no empty band at the third. The visualization takes the rest. */
.sculpture-hero.hero.field{padding:144px var(--hero-x) 85px;grid-template-columns:minmax(0,clamp(360px,31vw,460px)) minmax(0,1fr);column-gap:clamp(40px,6vw,96px);align-content:center;min-height:900px;min-height:max(850px,100svh);background:#101211;isolation:isolate}
/* Both columns run the same height on one grid: the two small labels share a
   line at the top (AFFECTIVE DESIGN LAB beside 01 / Emotion orbits), and the
   affiliation drops to the footnote's line at the bottom. */
.sculpture-hero.hero.field .hcopy{align-self:stretch;display:flex;flex-direction:column;align-items:flex-start;padding:0}
.sculpture-hero.hero.field .sc-affiliation{margin-top:auto}
/* the topline centers its text in a 43px row; this puts the eyebrow on it */
.sculpture-hero.hero.field .sc-eyebrow{padding-top:7px}
.sc-eyebrow{font:11px var(--mono);letter-spacing:.13em;color:#a5b8af;margin:0 0 32px}
.sculpture-hero.hero.field h1{font-size:clamp(35px,3.8vw,54px);line-height:1.27;letter-spacing:-.055em;font-weight:400}
.sculpture-hero.hero.field h1 em{font-style:normal;color:#e2ca80}
.sc-intro{font-size:16px;line-height:1.9;color:#b8beb9;margin:28px 0}
.sc-link{display:inline-flex;gap:56px;border-bottom:1px solid #8d987a;padding:12px 0;color:#f1eeea;font-size:14px}
.sc-link:hover{color:#e2ca80}.sc-affiliation{font-size:12px;line-height:1.9;color:#a3ada6;margin:52px 0 0}
.sc-experience{min-width:0;align-self:stretch}
.sc-topline{display:flex;align-items:center;justify-content:space-between;padding-bottom:14px;border-bottom:1px solid #3b443d;color:#a5b8af;font:10px var(--mono);letter-spacing:.07em;min-height:43px}
.sc-experience button{font-family:inherit;cursor:pointer;background:none;color:#bac4bd;border:0}
.sc-stage{position:relative;height:clamp(360px,min(42vw,calc(100svh - 340px)),640px);overflow:hidden;touch-action:pan-y;cursor:grab;background:radial-gradient(ellipse at 50% 52%,#29332c 0%,#171e19 35%,#101211 70%)}
.sc-stage:active{cursor:grabbing}
.sculpture-hero.hero.field #sc-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:1;opacity:0;transition:opacity .4s}
.sc-experience[data-ready=true] #sc-canvas{opacity:1!important}
/* without WebGL: the same disc as rings and a core, flat and still */
.sc-fallback{position:absolute;inset:12% 10%;display:grid;place-items:center;opacity:.9;perspective:700px}
.sc-fallback div{height:100%;aspect-ratio:1;border-radius:50%;transform:rotateX(66deg) rotateZ(-8deg);background:radial-gradient(circle,#ffe2a0 0 2%,#ffc95c55 4%,transparent 9%),repeating-radial-gradient(circle,transparent 0 13px,#6fb3a633 14px 15px);box-shadow:0 0 80px #ffc60014}
.sc-experience[data-ready=true] .sc-fallback{display:none}
.sc-stage-note{position:absolute;bottom:16px;left:0;z-index:2;display:flex;align-items:center;gap:8px;font-size:11px;color:#aebbb1;pointer-events:none}
.sc-status-dot{width:5px;height:5px;background:#d7cd98;border-radius:50%}
.sc-coordinate{position:absolute;right:0;bottom:13px;color:#aebbb1;font:10px/1.8 var(--mono);z-index:2;pointer-events:none}
/* The current mood, set large over the orbits: the one thing on the stage
   that says what the motion means. It fades between moods. */
.sc-mood{position:absolute;top:18px;left:0;z-index:2;pointer-events:none;
  font-family:var(--serif);font-size:clamp(28px,2.7vw,40px);line-height:1;letter-spacing:-.02em;
  color:#f1eeea;transition:opacity .26s ease,transform .26s ease}
.sc-mood.out{opacity:0;transform:translateY(4px)}
/* The controls step back: one quiet row under the stage. The mood names
   double as the cycle's progress, the current one lit; the sliders wait
   behind Adjust. */
.sc-controls{display:grid;grid-template-columns:1fr auto;align-items:center;gap:6px 18px;
  border-top:1px solid #262d28;padding-top:10px}
.sc-moods{display:flex;flex-wrap:wrap;gap:0 13px}
.sc-moods button,.sc-actions button{min-height:24px;padding:2px 0;font-size:11px;color:#8f9a92;
  transition:color .3s ease}
.sc-moods button[aria-pressed=true]{color:#e2ca80}
.sc-moods button:hover,.sc-actions button:hover{color:#dfe3dc}
.sc-actions{display:flex;gap:14px}
.sc-actions button{font-family:var(--mono)!important;font-size:10px;letter-spacing:.06em}
.sc-actions button[aria-pressed=true],.sc-actions button[aria-expanded=true]{color:#c9c2a0}
.sc-actions button:disabled{opacity:.5;cursor:default}
.sc-sliders{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:4px}
.sc-sliders label>span{display:flex;justify-content:space-between;gap:6px;font-size:10px;color:#9aa49c}.sc-sliders small{font-size:10px;color:#8f9a92}
.sc-sliders input{display:block;width:100%;height:24px;margin:4px 0 0;accent-color:#a9a58a;cursor:pointer}
.sc-footnote{color:#a8b1a9;font-size:10px;line-height:1.8;margin:15px 0 0;word-break:keep-all}
.sc-bottom{position:absolute!important;bottom:26px;left:var(--hero-x);right:var(--hero-x);display:flex;justify-content:space-between;align-items:center;color:#a4b0a6;border-top:1px solid #3b443d;padding-top:19px;font:10px var(--mono);letter-spacing:.06em}
.sc-bottom a{font-family:inherit;color:#c4cec6}
.sc-experience button:focus-visible,.sc-sliders input:focus-visible,.sc-link:focus-visible,.sc-bottom a:focus-visible{outline:2px solid #e2ca80;outline-offset:5px}
.sc-instrument{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center;padding:80px 0!important}
.sc-instrument .sc-eyebrow{color:var(--mid)}
.sc-instrument h2{font-family:var(--serif);font-size:32px;line-height:1.5;word-break:keep-all}
.sc-instrument p{color:var(--mid);font-size:14px;line-height:1.8}
.sc-instrument .hface{display:flex;flex-direction:column;align-items:center;min-width:0}
.sc-instrument .facepad{--pad:min(300px,27vw)}
.sc-instrument .note{text-align:center;font-size:11px;margin-top:32px}
.sc-instrument .hlabel{font-size:12px;margin-bottom:22px}
[hidden]{display:none!important}
@media(max-width:1100px){.sculpture-hero.hero.field{column-gap:4vw}.sculpture-hero.hero.field h1{font-size:clamp(34px,4.1vw,47px)}.sc-sliders{gap:15px}.sc-sliders label>span{flex-wrap:wrap}}
@media(max-width:560px){.sc-controls{grid-template-columns:1fr}.sc-actions{justify-content:flex-start}}
@media(max-width:760px){.sculpture-hero.hero.field{display:flex;flex-direction:column;align-items:stretch;padding:120px var(--hero-x) 85px;gap:45px;min-height:0}.sculpture-hero.hero.field .hcopy{align-self:stretch;padding:0}.sculpture-hero.hero.field h1{font-size:clamp(33px,7.5vw,49px);line-height:1.25}.sc-eyebrow{font-size:9px;margin-bottom:24px}.sc-intro{font-size:14px;margin:23px 0 12px}.sc-affiliation{margin:22px 0 0;font-size:10px}.sc-link{font-size:13px;gap:42px}.sc-experience{width:100%;align-self:stretch}.sc-stage{height:440px;margin-inline:calc(-1 * var(--hero-x))}.sc-mood,.sc-stage-note{left:var(--hero-x)}.sc-coordinate{right:var(--hero-x)}.sc-topline{font-size:9px}.sc-bottom{font-size:8px}.sc-bottom a{font-size:10px}.sc-footnote{font-size:10px}.sc-instrument{grid-template-columns:1fr;gap:32px;padding:48px 0!important}.sc-instrument .facepad{--pad:min(300px,73vw)}.sc-instrument h2{font-size:28px}}
@media(max-width:370px){.sc-stage{height:360px}.sc-bottom>span{font-size:7px}}
@media(prefers-reduced-motion:reduce){.sculpture-hero *{scroll-behavior:auto!important;transition:none!important}}

@media(max-width:400px){.sc-instrument .facelegend li{transform:rotate(var(--a)) translateX(min(140px,31vw)) rotate(calc(var(--a) * -1))}}