:root{--bg:#081316;--paper:#e8f0e8;--accent:#c5eee1;--glow:#4e7d78;--warm:#ba895c;--art-hue:0deg;--art-saturation:1;--art-brightness:1;--gutter:clamp(1.25rem,4.2vw,5rem)}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--bg);color:var(--paper)}
body{font-family:Arial,Helvetica,sans-serif;-webkit-font-smoothing:antialiased}
::selection{background:var(--accent);color:var(--bg)}
button{font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
button:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.hero{height:100svh;min-height:440px;position:relative;overflow:hidden;isolation:isolate}
#light-field{position:absolute;inset:0;width:100%;height:100%;z-index:-1;opacity:.72;pointer-events:none}
.hero-glow{position:absolute;inset:0;z-index:-2;background:radial-gradient(ellipse at 58% 36%,color-mix(in srgb,var(--glow) 37%,transparent),transparent 50%),radial-gradient(ellipse at 80% 61%,color-mix(in srgb,var(--warm) 15%,transparent),transparent 37%);transition:background 1.2s}
.hero-grid{position:absolute;inset:6.5rem var(--gutter) 6.5rem;z-index:-1;border-right:1px solid #ffffff09;border-left:1px solid #ffffff09;background:linear-gradient(90deg,transparent calc(50% - .5px),#ffffff06 50%,transparent calc(50% + .5px));pointer-events:none}
.brand-mark{position:absolute;top:2.15rem;left:var(--gutter);font-size:2rem;line-height:1;color:var(--accent);z-index:5;transition:color 1.2s;user-select:none}
.sculpture{position:absolute;width:min(66vw,83svh);height:min(66vw,83svh);right:12%;top:1.5%;margin:0;z-index:3;pointer-events:none;perspective:1200px}
.sculpture-motion{width:100%;height:100%;will-change:transform;transform:translate3d(0,0,0)}
.sculpture img{width:100%;height:100%;object-fit:contain;display:block;filter:hue-rotate(var(--art-hue)) saturate(var(--art-saturation)) brightness(var(--art-brightness));transition:filter 1.2s;-webkit-user-drag:none;user-select:none}
.hero-name{position:absolute;left:var(--gutter);right:var(--gutter);bottom:5.5rem;z-index:2;pointer-events:none}
.hero-name h1{font-family:Georgia,'Times New Roman',serif;font-size:clamp(7rem,24vw,30rem);line-height:1;letter-spacing:-.06em;font-weight:400;margin:0;color:var(--paper)}
.art-controls{position:absolute;right:var(--gutter);bottom:2rem;z-index:6;display:flex;gap:.9rem;align-items:center;padding:.25rem .4rem;border:1px solid #ffffff15;border-radius:4rem;background:#08131670;backdrop-filter:blur(10px)}
.light-controls{display:flex;gap:.05rem}
.light-choice,.motion-toggle{display:grid;place-items:center;width:44px;height:44px;background:transparent;border:0;border-radius:50%;padding:0;transition:background .25s}
.light-choice:hover,.motion-toggle:hover{background:#ffffff0c}
.swatch{display:block;width:17px;height:17px;border-radius:50%;box-shadow:inset 0 0 2px #ffffff40;position:relative;transition:transform .3s}
.light-choice.is-active .swatch::after{content:"";position:absolute;inset:-5px;border:1px solid var(--accent);border-radius:50%}
.light-choice:hover .swatch{transform:scale(1.1)}
.swatch-dawn{background:linear-gradient(130deg,#f9d5a3,#669b9c)}
.swatch-blue{background:linear-gradient(130deg,#cae9ff,#346bd5)}
.swatch-ember{background:linear-gradient(130deg,#ffb378,#b83d20)}
.control-separator{height:17px;width:1px;background:#ffffff24}
.motion-toggle svg{fill:none;stroke:var(--accent);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.play-icon{display:none}
.motion-paused .play-icon{display:block}
.motion-paused .pause-icon{display:none}
.motion-paused .sculpture-motion{will-change:auto}
@media(min-width:1700px){.sculpture{right:16%}.hero-name h1{font-size:23vw}}
@media(max-width:900px){.sculpture{width:min(85vw,76svh);height:min(85vw,76svh);right:4%;top:10%}.hero-name{bottom:6.5rem}.hero-name h1{font-size:27vw}}
@media(max-width:650px){.hero{min-height:540px}.hero-grid{inset:5rem var(--gutter) 6rem}.brand-mark{top:1.6rem;font-size:1.8rem}.sculpture{width:107vw;height:107vw;right:-4vw;top:14%}.hero-name{bottom:7rem}.hero-name h1{font-size:31vw}.art-controls{right:var(--gutter);bottom:1.65rem}.light-choice,.motion-toggle{width:44px;height:44px}}
@media(max-width:650px) and (min-height:850px){.sculpture{top:17%}}
@media(max-height:560px) and (min-width:651px){.hero{min-height:350px}.hero-grid{inset:4rem var(--gutter) 5rem}.brand-mark{top:1.5rem}.sculpture{height:91svh;width:91svh;top:-5%;right:12%}.hero-name{bottom:3.5rem}.hero-name h1{font-size:23vw}.art-controls{bottom:1rem}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.sculpture-motion{will-change:auto}}