@font-face{font-family:Geist;src:url(/fonts/geist.woff2) format('woff2');font-weight:100 900;font-display:swap}
@font-face{font-family:Mono;src:url(/fonts/geist-mono.woff2) format('woff2');font-weight:100 900;font-display:swap}
@font-face{font-family:Instrument;src:url(/fonts/instrument-serif-italic.woff2) format('woff2');font-style:italic;font-display:swap}
:root{--bg:#111311;--text:#edece4;--muted:#a9afa5;--line:#343a33;--accent:#e4b77f;--paper:#e8e9df;--ink:#222920;--brass-ink:#b3701f;--pad:clamp(24px,5vw,88px);--header:92px;color-scheme:dark}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:100px}
body{margin:0;background:var(--bg);color:var(--text);font-family:Geist,Arial,sans-serif;font-weight:400;line-height:1.6}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer}
a,button{-webkit-tap-highlight-color:transparent}
button:disabled{cursor:default}
button[hidden],div[hidden],[hidden]{display:none!important}
a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:5px}
::selection{background:#e4b77f;color:#111311}
.wrap{max-width:1536px;padding-inline:var(--pad);margin-inline:auto}
.mono,.eyebrow{font-family:Mono,monospace;font-size:11px;letter-spacing:.1em}
.eyebrow{font-size:11px;line-height:1.7;letter-spacing:.13em;color:var(--accent);margin:0 0 26px}
.header{position:sticky;top:0;z-index:50;height:var(--header);display:flex;align-items:center;justify-content:space-between;padding:0 var(--pad);background:var(--bg);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:13px;font-size:14px;font-weight:500;letter-spacing:.17em;min-height:44px}
.brand-mark{display:block;flex:none;color:var(--text)}
.icon{display:block;width:18px;height:18px;flex:none}
.arrow-down{transform:rotate(90deg)}
.brand small{display:block;font:8px Mono,monospace;letter-spacing:.33em;color:var(--muted);margin-top:1px}
.header nav{display:flex;gap:36px;align-items:center}
.header nav a{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;font-size:13px;color:#c7cbc2}
.header nav a:hover{color:var(--accent)}
.header .nav-contact{border:1px solid #5c6358;padding:0 19px;border-radius:3px;color:var(--text);gap:28px}
.skip{position:fixed;left:20px;top:-90px;background:var(--accent);color:var(--ink);padding:12px 20px;z-index:100}
.skip:focus{top:12px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.indicator{display:inline-block;width:6px;height:6px;background:var(--accent);border-radius:50%;margin-right:9px}
.button{display:inline-flex;justify-content:space-between;align-items:center;gap:30px;min-height:50px;padding:12px 22px;border-radius:3px;font-size:13px;font-weight:500;transition:background .2s,box-shadow .2s}
.primary{background:var(--accent);color:#222319;box-shadow:inset 0 1px #f9d9a8,0 6px 14px #0003}
.primary:hover{background:#f2c995;box-shadow:inset 0 1px #fff0ca,0 8px 20px #0005}
.text-link{display:inline-flex;align-items:center;min-height:44px;gap:20px;font-size:13px;border-bottom:1px solid #555c50}
.text-link:hover{color:var(--accent)}
/* A small apo-ring: the mark's body at aphelion, used as a glyph. */
.apo-glyph,.orbit-glyph{position:relative;display:inline-block;flex:none;border-radius:50%;border:1px solid currentColor}
.apo-glyph{width:13px;height:13px;color:#9b8a68}
.apo-glyph::after,.orbit-glyph::after{content:'';position:absolute;border-radius:50%;background:var(--accent)}
.apo-glyph::after{inset:3px}
.orbit-glyph{width:11px;height:11px;color:currentColor}
.orbit-glyph::after{inset:2.5px}

/* Hero: the orrery fills the first screen; the copy sits in the space the system leaves free.
   --safe-* (fractions of the stage) tell the renderer where the system may sit; the poster uses the same box. */
.hero{position:relative;isolation:isolate;display:flex;flex-direction:column;justify-content:center;min-height:clamp(640px,calc(100svh - var(--header)),960px);overflow:hidden}
.hero-copy{position:relative;z-index:2;width:100%;padding-block:40px 136px;pointer-events:none;transition:opacity .5s .15s,visibility 0s}
.hero-copy>*{max-width:34rem;pointer-events:auto}
.hero h1{font-size:clamp(58px,6.2vw,96px);font-weight:400;line-height:1.02;letter-spacing:-.065em;margin:0 0 30px}
.hero h1 em{font:italic 1.13em/.8 Instrument,Georgia,serif;color:var(--accent);letter-spacing:-.04em}
.lede{font-size:17px;color:#b8beb3;line-height:1.7;margin:0 0 32px}
.actions{display:flex;align-items:center;gap:26px}
.sculpture{position:absolute;inset:0;margin:0;z-index:0;--safe-l:.39;--safe-r:.015;--safe-t:.045;--safe-b:.15}
.poster{position:absolute;left:calc(var(--safe-l)*100%);top:calc(var(--safe-t)*100%);width:calc((1 - var(--safe-l) - var(--safe-r))*100%);height:calc((1 - var(--safe-t) - var(--safe-b))*100%);object-fit:contain}
#orbital{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity .7s}
.sculpture.ready #orbital{opacity:1}
.sculpture.ready .poster{visibility:hidden;transition:visibility 0s .8s}
.hero-foot{position:absolute;z-index:2;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:space-between;gap:24px;padding-block:16px 24px;pointer-events:none}
.hero-foot::before{content:'';position:absolute;top:0;left:var(--pad);right:var(--pad);border-top:1px solid #2f342d}
.hero-foot>*{pointer-events:auto}
.system-note{display:flex;align-items:baseline;gap:20px;margin:0;font-size:12.5px;line-height:1.5;color:var(--muted)}
.system-note .mono{font-size:9.5px;letter-spacing:.14em;color:#bec2b7;white-space:nowrap}
.system-hint{display:none}
.hero.orrery-live .system-hint{display:inline}
.hint-touch{display:none}
@media(hover:none){.hint-fine{display:none}.hint-touch{display:inline}}
#motion{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:44px;padding:5px 12px;background:#111311b3;border:1px solid #4e5547;border-radius:3px;font-size:11px;white-space:nowrap;transition:border-color .2s,background .2s}
#motion:hover:not(:disabled){background:#252b22;border-color:#8a927f}
#motion:disabled{color:#b7beae}
.motion-icon{width:16px;height:16px}
.play-symbol{display:none}
#motion[data-paused="true"] .play-symbol{display:block}
#motion[data-paused="true"] .pause-symbol{display:none}
/* Orrery HUD: crisp type over the WebGL scene, positioned from its projection. */
.orrery-hud{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1;overflow:visible;color:#c9ae84;opacity:0;transition:opacity .6s}
.sculpture.ready .orrery-hud{opacity:1}
.orrery-hud text{font-family:Mono,monospace;font-size:8.5px;letter-spacing:.16em;fill:currentColor;paint-order:stroke;stroke:#111311;stroke-width:3px;stroke-linejoin:round}
.orrery-hud .hud-sub,.orrery-hud .hud-num{font-size:7px;letter-spacing:.14em;fill:#948a78}
.orrery-hud .hud-leader,.orrery-hud .hud-reticle{fill:none;stroke:currentColor;stroke-width:.75;vector-effect:non-scaling-stroke}
.orrery-hud .hud-leader{opacity:.75}
.orrery-hud .hud-apsis{fill:none;stroke:currentColor;stroke-width:.75;stroke-dasharray:1.5 5;opacity:.42;vector-effect:non-scaling-stroke}
.hud-tag{transition:opacity .3s}
/* Focus: the copy steps aside and the world's panel takes its place. */
.hero.focused .hero-copy{opacity:0;visibility:hidden;transition:opacity .3s,visibility 0s .3s}
.orrery-card{position:absolute;z-index:3;left:max(var(--pad),calc((100% - 1536px)/2 + var(--pad)));top:47%;width:min(400px,calc(35% - var(--pad)));opacity:0;visibility:hidden;transform:translateY(calc(-50% + 12px));transition:opacity .4s,transform .5s cubic-bezier(.2,.7,.2,1),visibility 0s .5s}
.orrery-card.open{opacity:1;visibility:visible;transform:translateY(-50%);transition:opacity .45s,transform .6s cubic-bezier(.2,.7,.2,1)}
.orrery-card::before{content:'';position:absolute;z-index:-1;inset:-90px -120px;background:radial-gradient(closest-side,#111311f2 55%,#11131100);pointer-events:none}
.orrery-card-meta{display:flex;justify-content:space-between;gap:14px;margin:0 0 22px;padding-bottom:12px;border-bottom:1px solid #3a3f37;font:10px/1.6 Mono,monospace;letter-spacing:.12em;color:var(--accent)}
.orrery-card-meta [data-card="orbit"]{color:#9aa293;letter-spacing:.06em}
.orrery-card-name{margin:0 0 18px;font-size:clamp(40px,4.3vw,64px);font-weight:400;letter-spacing:-.055em;line-height:1.02}
.orrery-card-text{margin:0 0 28px;font-size:16px;line-height:1.65;color:#b8beb3;max-width:32ch}
.orrery-card-actions{display:flex;align-items:center;gap:30px}
.orrery-back{display:inline-flex;align-items:center;gap:.3em;min-height:44px;padding:0 2px;background:none;border:0;font-size:13px;color:#a9afa5}
.orrery-back:hover{color:var(--accent)}

.principles{display:flex;align-items:center;justify-content:space-between;gap:20px;border-block:1px solid var(--line);padding-block:24px;font-size:12px;color:var(--muted)}
.principles strong{font-weight:400;color:var(--text)}
.principles p{font:10px Mono,monospace;letter-spacing:.1em}

/* The collection: nine worlds, numbered from the sun outward. */
.collection{padding-block:96px 108px}
.section-top{display:flex;justify-content:space-between;align-items:center;gap:28px}
.section-top .eyebrow{margin:0}
.collection-note{margin:0;color:var(--muted);font-size:13px;line-height:1.6;text-align:right}
.collection h2{font-size:clamp(36px,4vw,58px);font-weight:400;line-height:1.13;letter-spacing:-.045em;margin:28px 0 22px}
.collection h2 span{color:#a9afa5}
.elements-key{display:flex;flex-wrap:wrap;gap:6px 28px;margin:0 0 40px;font:10px/1.6 Mono,monospace;letter-spacing:.08em;color:#98a091}
.elements-key b{font-weight:500;color:var(--accent);margin-right:7px;letter-spacing:0}
.worlds{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.world{position:relative;display:grid;grid-template-columns:96px minmax(180px,.85fr) minmax(240px,1.4fr) 176px;gap:0 32px;align-items:center;min-height:132px;padding:16px 10px;border-bottom:1px solid var(--line);scroll-margin-top:16px;transition:background .25s}
.world-portrait{display:block;width:96px;height:96px;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.world-head{min-width:0}
.world-meta{display:flex;align-items:baseline;gap:14px;margin:0 0 6px;font:10.5px/1.5 Mono,monospace;letter-spacing:.08em}
.world-no{color:var(--accent)}
.world-elements{color:#8f978a;white-space:nowrap}
.world-name{margin:0;font-size:26px;font-weight:450;letter-spacing:-.035em;line-height:1.2;transition:color .2s}
.world-text{margin:0;max-width:48ch;font-size:15px;line-height:1.65;color:#b2b9ad}
.world-actions{display:flex;flex-direction:column;align-items:flex-end;gap:0}
.destination{display:inline-flex;align-items:center;gap:16px;min-height:44px;font-size:12.5px;color:#d8ddd2;white-space:nowrap}
.destination::after{content:'';position:absolute;inset:0}
.destination .arrow{color:var(--accent);transition:transform .2s}
.orbit-button{position:relative;z-index:1;display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0;background:none;border:0;font-size:12px;color:#9aa293;white-space:nowrap;transition:color .2s}
.orbit-button:hover{color:var(--accent)}
.world:focus-within{background:#171b17}
@media(hover:hover){
.world:hover{background:#171b17}
.world:hover .world-portrait{transform:scale(1.07) rotate(-4deg)}
.world:hover .world-name{color:var(--accent)}
.world:hover .destination .arrow{transform:translate(2px,-2px)}
}

/* The studio: the mark drawn as the orbit it is. */
.studio{position:relative;background:var(--paper);color:var(--ink);padding-block:100px}
.anchor-alias{position:absolute;top:0}
.studio-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:64px;align-items:center}
.studio .eyebrow{color:#526143;margin-bottom:10px}
.apsis{margin:0}
.apsis-art{display:block;width:100%;max-width:620px;height:auto;overflow:visible}
.apsis-orbit{fill:none;stroke:var(--ink);stroke-width:1.3}
.apsis-axis{fill:none;stroke:#6f7867;stroke-width:1;stroke-dasharray:2 5}
.apsis-wedge{fill:var(--brass-ink);fill-opacity:.14}
.apsis-ticks circle{fill:var(--ink);fill-opacity:.62}
.apsis-cross{fill:none;stroke:#7d8673;stroke-width:1}
.apsis-sun{fill:var(--brass-ink)}
.apsis-sun-glow{fill:#e1a04a;fill-opacity:.2}
.apsis-ring{fill:none;stroke:var(--brass-ink);stroke-width:2}
.apsis-body{fill:var(--ink)}
.apsis-sweep{fill:var(--brass-ink);fill-opacity:.26}
.apsis-labels text{font-family:Mono,monospace;font-size:9.5px;letter-spacing:.14em;fill:var(--ink)}
.apsis-labels .apsis-sub{font-size:9px;letter-spacing:.06em;fill:#5b6253}
.apsis figcaption{margin:22px 0 0;max-width:50ch;font-size:13.5px;line-height:1.6;color:#4f5748}
.apsis figcaption .mono{margin-right:10px;font-size:10px;letter-spacing:.14em;color:var(--ink)}
.apsis-play{margin-top:14px;padding:0;gap:14px;background:none;border:0;border-bottom:1px solid #8a927f;border-radius:0;color:var(--ink)}
.apsis-play:hover{color:#6d4a14}
.apsis-play:disabled{opacity:.55}
.studio h2,.contact h2{font-size:clamp(36px,4vw,58px);font-weight:400;line-height:1.13;letter-spacing:-.045em}
.studio h2{margin:0 0 32px}
.studio h2 em,.contact h2 em{font:italic 1.12em/.9 Instrument,Georgia,serif;letter-spacing:-.02em}
.studio p:not(.eyebrow):not(.mono){font-size:16px;color:#4f5748;max-width:53ch}
.studio .text-link{margin-top:14px;border-bottom-color:#8a927f}
.studio .text-link:hover{color:#536840}
.studio-coordinate{font-size:9px;color:#5b694e;margin:36px 0 0}

.contact{position:relative;isolation:isolate;display:grid;grid-template-columns:1.2fr 1fr;gap:22px;padding-block:112px 90px}
.horizon{position:absolute;z-index:-1;left:0;right:0;top:34px;width:100%;height:150px;overflow:visible}
.horizon path{fill:none;stroke:#3a4036;stroke-width:1}
.contact .eyebrow{grid-column:1/-1;margin-bottom:0}
.contact h2{font-size:clamp(48px,5vw,70px);margin:0}
.contact h2 em{color:var(--accent)}
.contact>div{padding-top:0}
.contact p:not(.eyebrow){color:var(--muted);font-size:16px;margin:4px 0 26px}
.email{display:block;font-size:12px;overflow-wrap:anywhere;color:var(--muted);min-height:44px;padding-top:18px}
.email:hover{color:var(--accent)}
.footer{border-top:1px solid var(--line);display:flex;gap:20px;justify-content:space-between;align-items:center;flex-wrap:wrap;padding-block:24px;color:var(--muted);font-size:11px}
.footer nav{display:flex;gap:24px}
.footer a{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px}
.location{font:9px Mono,monospace;color:#a5af99;letter-spacing:.08em}

@media(min-width:1500px){
.hero-copy>*{max-width:36rem}
}
@media(min-width:1600px){.sculpture{--safe-l:.43}}
@media(min-width:2200px){.sculpture{--safe-l:.45}}
@media(max-width:1366px){.sculpture{--safe-l:.41}}
@media(max-width:1180px){
.sculpture{--safe-l:.465}
.hero-copy>*{max-width:25rem}
.hero h1{font-size:clamp(52px,6vw,72px)}
.world{grid-template-columns:84px minmax(150px,.8fr) minmax(200px,1.3fr) 168px;gap:0 24px}
.world-portrait{width:84px;height:84px}
}
@media(max-width:1050px){
.eyebrow{font-size:9px}
.actions{gap:14px;flex-wrap:wrap}
.principles{gap:12px}
.principles p{font-size:8px}
.world{grid-template-columns:72px minmax(0,1fr) 164px;grid-template-areas:"img head act" "img text act";gap:4px 22px;padding-block:18px}
.world-portrait{grid-area:img;width:72px;height:72px}
.world-head{grid-area:head}
.world-text{grid-area:text;font-size:14px}
.world-actions{grid-area:act}
.world-name{font-size:23px}
.studio-grid{grid-template-columns:1fr 1fr;gap:44px}
}
/* Narrow screens: copy first, then the system at full width, then its caption. */
@media(max-width:860px){
.hero{display:block;min-height:0;overflow:visible}
.hero-copy{padding-block:34px 8px;pointer-events:auto}
.hero-copy>*{max-width:none}
.sculpture{position:relative;inset:auto;height:clamp(300px,86vw,560px);--safe-l:.015;--safe-r:.015;--safe-t:.08;--safe-b:.03}
.hero-foot{position:relative;padding-block:14px 26px}
.system-note{display:block}
.system-note .mono{display:block;margin-bottom:4px}
.hero.focused .hero-copy{opacity:1;visibility:visible}
.orrery-card{left:var(--pad);right:var(--pad);top:auto;bottom:10px;width:auto;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:12px;padding:10px 14px 0;background:#111311eb;border:1px solid #3b4139;border-radius:3px;transform:translateY(8px)}
.orrery-card.open{transform:none}
.orrery-card-meta{grid-column:1/-1;margin:0;padding:0;border:0}
.orrery-card-name{margin:0;font-size:21px;letter-spacing:-.035em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.orrery-card-text{display:none}
.orrery-card-actions{gap:16px}
.orrery-card .text-link{font-size:12px;gap:12px}
.orrery-back-long{display:none}
.orrery-card::before{display:none}
.studio-grid{grid-template-columns:1fr;gap:34px}
.apsis-art{max-width:560px}
}
@media(max-width:760px){
:root{--header:76px}
html{scroll-padding-top:90px}
.header nav{gap:18px}
.header nav a{font-size:12px}
.header .nav-contact{padding:0 12px;gap:10px}
.brand{font-size:12px;gap:8px}
.brand-mark{width:28px;height:28px}
.hero-copy{padding-top:22px}
.hero h1{font-size:66px;margin-bottom:20px}
.hero .eyebrow{font-size:9px;margin-bottom:25px}
.lede{font-size:15px;margin-bottom:26px}
.actions{gap:18px;flex-wrap:nowrap}
.actions .text-link{font-size:12px;gap:10px}
.button{font-size:12px;gap:18px;padding-inline:18px}
.orrery-hud text{font-size:7.5px}
.orrery-hud .hud-sub{display:none}
.principles{padding-block:22px;display:grid;grid-template-columns:1fr 1fr}
.principles>span:first-child{grid-column:1/-1;font-size:12px}
.principles .apo-glyph{display:none}
.principles p{font-size:8px;margin:0}
.principles p:last-child{display:none}
.collection{padding-block:58px 66px}
.section-top{align-items:start;gap:20px}
.collection-note{font-size:11px}
.collection h2{font-size:36px;margin:26px 0 18px}
.elements-key{gap:4px 18px;margin-bottom:26px;font-size:9px}
.world{grid-template-columns:60px minmax(0,1fr);grid-template-areas:"img head" "text text" "act act";gap:12px 16px;min-height:0;padding:20px 0}
.world-portrait{width:60px;height:60px}
.world-name{font-size:23px}
.world-text{font-size:14px;max-width:none}
.world-actions{flex-direction:row;justify-content:space-between;align-items:center}
.world:hover .world-portrait{transform:none}
.studio{padding-block:60px}
.studio h2{font-size:38px}
.studio p:not(.eyebrow):not(.mono){font-size:15px}
.contact{grid-template-columns:1fr;padding-block:76px 60px;gap:26px}
.horizon{top:22px;height:90px}
.contact h2{font-size:55px}
.contact>div{padding:0}
.footer{gap:10px;padding-block:24px}
.footer p{margin:0}
.footer nav{gap:23px}
.footer .location{width:100%}
}
@media(max-width:430px){
.header nav{gap:15px}
.header .nav-contact{display:none}
.hero h1{font-size:61px}
.hero .eyebrow{font-size:8px;letter-spacing:.07em}
.hero .actions{gap:14px}
.hero .button{padding-inline:14px;gap:15px}
.hero .text-link{font-size:11px}
}
@media(max-width:360px){
.hero h1{font-size:55px}
.hero .actions{flex-wrap:wrap;gap:8px 20px}
.header nav{gap:12px}
.lede{font-size:14px}
.collection h2{font-size:31px}
.collection-note{display:none}
.world-name{font-size:21px}
.world-text{font-size:13px}
.world-elements{letter-spacing:.02em}
}
@media(max-width:560px){
.apsis-labels text{font-size:19px;letter-spacing:.1em}
.apsis-labels .apsis-sub{display:none}
}
@media(prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
*,*::before,*::after{transition:none!important;animation:none!important}
.world:hover .world-portrait{transform:none}
}