/* Bold editorial typography; the Earth supplies the texture and colour. */
@font-face{font-family:"Syne Display";src:url("../assets/fonts/Syne-Variable.ttf") format("truetype");font-weight:400 800;font-style:normal;font-display:swap}
:root{--header-height:clamp(64px,8.6dvh,94px);--footer-clearance:calc(72px + env(safe-area-inset-bottom,0px))}
body{font-family:Inter,"PingFang SC","Microsoft YaHei","Noto Sans CJK SC",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif}
.worlds{--hero-gutter:max(clamp(24px,5.4vw,112px),env(safe-area-inset-left,0px),env(safe-area-inset-right,0px));--scene-width:min(1900px,calc(100vw - var(--hero-gutter) * 1.5),205dvh);--word-size:calc(var(--scene-width) / 4.5);--planet-size:calc(var(--word-size) * 1.32);position:relative;height:100%;min-height:0;overflow:clip}
header{padding-left:max(clamp(24px,5.4vw,112px),env(safe-area-inset-left,0px));padding-right:max(clamp(24px,5.4vw,112px),env(safe-area-inset-right,0px));background:none}
.brand{gap:14px;font-size:20px;font-weight:600;letter-spacing:.05em}
.brand-name{display:flex;align-items:baseline;gap:10px}
.brand-mark{display:grid;place-items:center;flex:none;box-sizing:content-box;width:32px;height:32px;margin:-6px;padding:6px;border:0;border-radius:0;box-shadow:none;background:transparent;color:#edf3fa;cursor:grab;touch-action:none;user-select:none;-webkit-tap-highlight-color:transparent}
.brand-mark.dragging{cursor:grabbing}
.brand-mark:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.brand-mark svg{display:block;width:100%;height:100%;fill:currentColor;color:#edf3fa}
.nav-cta{min-height:44px;padding:8px 0;border:0;border-radius:0;color:#c2c7ce;font-size:13px;letter-spacing:.02em}
.nav-cta:hover{text-decoration:underline;text-underline-offset:5px}
.screen-viewport{position:relative;min-width:0;overflow:clip}
.screen-track{position:relative;isolation:isolate;width:100%;height:100%}
.screen{position:absolute;inset:0;width:100%;min-width:0;height:100%}
.screen[aria-hidden="true"]{pointer-events:none}
.worlds .hero{position:relative;display:block;text-align:left;overflow:clip}
.hero-email{position:absolute;z-index:7;left:var(--hero-gutter);bottom:var(--footer-clearance);display:inline-flex;align-items:center;gap:14px;min-height:44px;color:#c2c7ce;font-size:16px;font-weight:400;line-height:1.5;letter-spacing:-.02em;white-space:nowrap}
.hero-email-arrow{flex:none;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.screen-track>.stars{z-index:0;opacity:.9;-webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.62),#000 60%);mask-image:linear-gradient(180deg,rgba(0,0,0,.62),#000 60%)}
.brand-scene{position:absolute;z-index:3;left:50%;top:51%;width:var(--scene-width);height:var(--planet-size);transform:translate(-50%,-50%);display:grid;grid-template-columns:calc(var(--word-size) * 2.4) var(--planet-size) calc(var(--word-size) * .78);align-items:center}
.cosmic-word{position:relative;z-index:2;display:flex;align-items:center;height:.78em;color:#f0f0eb;font-family:"Syne Display","Arial Black",Arial,sans-serif;font-size:var(--word-size);font-weight:700;line-height:.78;letter-spacing:-.045em;user-select:none;perspective:1100px}
.cosmic-word-start{gap:0}
.cosmic-word-end{padding-left:.008em}
.word-glyph{position:relative;display:block;flex:none;width:.72em;height:.78em}
.word-glyph[data-letter="A"]{width:.73em}
.word-glyph[data-letter="I"]{width:.22em}
.word-glyph[data-letter="X"]{width:.78em}
.letter-mask{display:block;height:100%;width:calc(100% + .14em);margin-left:-.06em;padding-left:.06em;overflow:hidden}
.letter-form{position:relative;display:block;width:100%;height:100%;transform-style:preserve-3d}
.letter-face{position:relative;display:block;width:100%;height:100%;letter-spacing:normal;white-space:nowrap}
.worlds .planet-window{position:relative;z-index:3;width:100%;height:100%;min-height:0;margin:0;overflow:visible;pointer-events:none}
.worlds .planet-stage{position:absolute;inset:0;width:100%;height:100%;transform:none;pointer-events:auto;isolation:isolate}
.worlds .planet-stage:has(#planet:focus-visible)::after{content:"";position:absolute;inset:7%;border:1px solid var(--accent);border-radius:50%;pointer-events:none}
footer{padding-left:max(clamp(24px,5.4vw,112px),env(safe-area-inset-left,0px));padding-right:max(clamp(24px,5.4vw,112px),env(safe-area-inset-right,0px))}
.footer-meta{color:#7e8998}
.footer-entity{color:#929cab}

@media (max-width:980px) and (orientation:portrait){
  :root{--header-height:72px}
  .worlds{--hero-gutter:max(clamp(22px,5.4vw,42px),env(safe-area-inset-left,0px),env(safe-area-inset-right,0px))}
  .worlds .hero{display:flex;flex-direction:column;padding-top:calc(var(--header-height) + env(safe-area-inset-top,0px));padding-bottom:calc(var(--footer-clearance) + 56px)}
  .brand-scene{--planet-size:min(680px,112vw,112cqh);position:relative;left:auto;top:auto;width:100%;height:auto;min-height:0;flex:1 1 0;transform:none;display:block;container-type:size;isolation:isolate}
  .cosmic-word{position:absolute;z-index:6;font-size:min(25vw,34cqh);transform:none}
  .cosmic-word-start{left:var(--hero-gutter);top:calc(50% - var(--planet-size) * .48)}
  .cosmic-word-end{right:var(--hero-gutter);top:calc(50% + var(--planet-size) * .27);bottom:auto;font-size:min(30vw,39cqh)}
  .worlds .planet-window{position:absolute;left:50%;top:50%;width:var(--planet-size);height:var(--planet-size);transform:translate(-50%,-50%)}
}
@media (max-width:620px){
  :root{--header-height:62px;--footer-clearance:calc(76px + env(safe-area-inset-bottom,0px))}
  .brand{font-size:17px;gap:9px}
  .brand-name{gap:7px}
  .brand-mark{width:27px;height:27px;margin:-8.5px;padding:8.5px}
  .footer-meta{font-size:10px}
  .hero-email{font-size:14px;gap:12px}
}
@media (max-width:620px) and (max-height:700px) and (orientation:portrait){
  :root{--header-height:54px;--footer-clearance:calc(68px + env(safe-area-inset-bottom,0px))}
  .brand-scene{--planet-size:min(470px,102vw,106cqh)}
  footer{padding-bottom:calc(14px + env(safe-area-inset-bottom,0px))}
}
@media (orientation:landscape) and (max-height:650px){
  :root{--header-height:54px}
  .worlds{--scene-width:min(calc(100vw - var(--hero-gutter) * 2),155dvh)}
  .brand-scene{top:51%}
}
@media (orientation:landscape) and (max-height:380px){
  :root{--header-height:46px}
  .worlds{--hero-gutter:max(20px,env(safe-area-inset-left,0px),env(safe-area-inset-right,0px));--scene-width:min(calc(100vw - var(--hero-gutter) * 2),135dvh)}
  .brand-scene{top:51%}
}