:root{color-scheme:dark;--gold:#f5db77;--cream:#f9f1d7;--ink:#071411;--reveal:1;--word-reveal:1;--px:0;--py:0;--sheen:20%;--breathe:1}
*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0}body{background:var(--ink);color:var(--cream);font-family:"Helvetica Neue",Arial,sans-serif;overflow:hidden;-webkit-font-smoothing:antialiased}button{-webkit-tap-highlight-color:transparent}.experience{height:100svh;min-height:300px;position:relative;overflow:hidden;isolation:isolate;background:#071411}.atmosphere,.solar-aura,.horizon,.vignette,#energy{position:absolute;inset:0;pointer-events:none}.atmosphere{background:radial-gradient(ellipse at 50% 40%,#183c29 0%,#0d211a 35%,#071411 66%,#050c0a 100%)}.solar-aura{inset:-15%;background:radial-gradient(ellipse at 50% 42%,#cfaf4320,transparent 36%);transform:translate(calc(var(--px)*-10px),calc(var(--py)*-10px)) scale(var(--breathe));will-change:transform}.horizon{top:43%;bottom:auto;height:1px;background:linear-gradient(90deg,transparent,#c9b26308 22%,#dbc77740 50%,#c9b26308 78%,transparent);box-shadow:0 0 42px 4px #d3c56b0a}#energy{width:100%;height:100%;z-index:1}.vignette{z-index:2;background:radial-gradient(ellipse at 50% 45%,transparent 35%,#020a0552 100%)}
.frame-top,.frame-bottom{position:absolute;z-index:5;left:max(42px,env(safe-area-inset-left));right:max(42px,env(safe-area-inset-right));display:flex;justify-content:space-between;align-items:center}.frame-top{top:max(34px,env(safe-area-inset-top))}.brand-signature{display:flex;gap:12px;align-items:center;font-size:9px;line-height:1.65;letter-spacing:2.2px;color:#d6dcca}.brand-signature b{font-weight:400;color:#809185;letter-spacing:3px}.brand-dot{width:7px;height:7px;background:var(--gold);border-radius:50%;box-shadow:0 0 17px #f9dc7166}.edition{font-size:8px;letter-spacing:2px;color:#97a695;display:flex;gap:18px;align-items:center}.edition i{height:1px;width:32px;background:#71816d}.edition span:last-child{color:#e3d8ad}.side-label{position:absolute;z-index:3;top:47%;font-size:8px;letter-spacing:3px;color:#758577;writing-mode:vertical-rl}.side-label.left{left:43px;transform:rotate(180deg)}.side-label.right{right:43px}
.identity{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;padding-bottom:20px;z-index:3;pointer-events:none;transform:translate(calc(var(--px)*8px),calc(var(--py)*6px));will-change:transform}.emblem-stage{height:clamp(170px,41svh,420px);aspect-ratio:1024/1715;position:relative;transform:perspective(900px) rotateY(calc(var(--px)*9deg)) rotateX(calc(var(--py)*-6deg));will-change:transform;margin-bottom:clamp(22px,4.5svh,48px)}.emblem,.emblem-depth,.emblem-shadow{position:absolute;inset:0;-webkit-mask:url('./assets/southern-solar-mark.png') center/contain no-repeat;mask:url('./assets/southern-solar-mark.png') center/contain no-repeat}.emblem{background:linear-gradient(123deg,#aa761e 0%,#e2b647 19%,#ffef99 36%,#f7dc72 45%,#b18a30 67%,#fae07e 82%,#fff2ac 100%);opacity:calc(.07 + var(--reveal)*.93);filter:brightness(calc(.95 + var(--reveal)*.08));transform:translateY(calc((1 - var(--reveal))*7px)) scale(calc(.96 + var(--reveal)*.04));will-change:opacity,transform}.emblem-depth{background:#977326;opacity:calc(var(--reveal)*.7);transform:translate(2px,3px)}.emblem-shadow{background:#f6cf5d;filter:blur(25px);opacity:calc(var(--reveal)*.11);transform:scale(1.06);-webkit-mask:none;mask:none;border-radius:50%}.emblem-shine{position:absolute;inset:-30%;background:linear-gradient(112deg,transparent 32%,#fff8d700 41%,#fff9d9b3 49%,#fff9d91a 56%,transparent 64%);transform:translateX(var(--sheen));mix-blend-mode:screen}.wordmark{text-align:center;opacity:calc(.32 + var(--word-reveal)*.68);transform:translateY(calc((1 - var(--word-reveal))*12px));will-change:opacity,transform}.wordmark h1{font-size:clamp(48px,7.4vw,108px);font-weight:500;letter-spacing:.18em;line-height:.9;margin:0 0 22px .18em;display:flex;gap:.015em;color:#f2e9c9}.wordmark h1 span{display:inline-block}.wordmark h1 span:nth-child(1),.wordmark h1 span:nth-child(5){transform:translateY(calc((1 - var(--word-reveal))*5px))}.wordmark p{margin:0;font-size:clamp(8px,.74vw,11px);font-weight:400;letter-spacing:.4em;color:#b7b99c;padding-left:.4em}.frame-bottom{bottom:max(33px,env(safe-area-inset-bottom))}.caption{display:flex;align-items:center;gap:14px}.caption-line{height:30px;width:1px;background:linear-gradient(#e6cd71,#e6cd7111)}.caption strong{display:block;font-size:9px;letter-spacing:2.4px;font-weight:400;color:#ddd9b7}.caption small{display:block;margin-top:8px;font-size:7px;letter-spacing:1.8px;color:#7e8d7c}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}[hidden]{display:none!important}
@media(min-width:1700px){.emblem-stage{height:44svh;max-height:540px}.wordmark h1{font-size:120px}}
@media(max-width:650px){.frame-top,.frame-bottom{left:max(23px,env(safe-area-inset-left));right:max(23px,env(safe-area-inset-right))}.frame-top{top:max(26px,env(safe-area-inset-top))}.brand-signature{font-size:8px;letter-spacing:1.6px;gap:10px}.edition span:first-child,.edition i{display:none}.edition{font-size:8px;letter-spacing:1.6px}.side-label{display:none}.identity{padding-bottom:20px}.emblem-stage{height:36svh;max-height:330px;margin-bottom:38px}.wordmark h1{font-size:clamp(48px,13vw,78px);margin-bottom:18px}.wordmark p{font-size:7px;letter-spacing:.32em}.frame-bottom{bottom:max(27px,env(safe-area-inset-bottom))}.caption{gap:10px}.caption strong{font-size:7px;letter-spacing:1.6px}.caption small{font-size:6px;letter-spacing:1px;margin-top:6px}}
@media(max-height:550px) and (min-width:651px){.emblem-stage{height:39svh;min-height:110px;margin-bottom:18px}.wordmark h1{font-size:50px;margin-bottom:14px}.frame-top{top:20px}.frame-bottom{bottom:18px}.identity{padding-bottom:0}.side-label{display:none}}
@media(prefers-reduced-motion:reduce){.identity,.emblem-stage,.solar-aura{transform:none}}

/* The interactive field remains transparent to buttons and assistive technology. */
#interaction{position:absolute;inset:0;width:100%;height:100%;z-index:4;pointer-events:none}.emblem::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at var(--light-x,50%) var(--light-y,50%),#fff8d3b3,transparent 65%);opacity:var(--hover,0);mix-blend-mode:screen}.touch-hint{display:none}
@media(pointer:coarse){.mouse-hint{display:none}.touch-hint{display:inline}}
@media(prefers-reduced-motion:reduce){#interaction{display:none}.caption small{visibility:hidden}}

.experience{user-select:none;-webkit-user-select:none}.motion-toggle{position:absolute;z-index:10;top:12px;left:50%;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);border:0}.motion-toggle:focus-visible{clip-path:none;transform:translateX(-50%);width:auto;height:auto;padding:10px 18px;border:1px solid #f5db77;border-radius:6px;background:#071411;color:#f5db77;outline:2px solid #fff3bd;outline-offset:3px;cursor:pointer}
@media(hover:hover) and (pointer:fine){body[data-sun-cursor="true"] .experience{cursor:none}body[data-sun-cursor="true"] .motion-toggle{cursor:pointer}}
body[data-paused="true"] #interaction{visibility:hidden}
@media(prefers-reduced-motion:reduce){.experience{cursor:auto!important}}