/* Sunfarers: a working home, surrounded by an unsettled sky. */
:root { color-scheme: dark; --ink:#f0e5d4; --muted:#bdb1bd; --gold:#e1be83; --purple:#c3a2e8; --ground:#110e17; --line:#bda0bc30; --signup-reserve:0px; }
* { box-sizing:border-box }
html { scroll-behavior:smooth; scroll-padding-top:110px }
body { margin:0; color:var(--ink); background:var(--ground); font:400 19px/1.65 'Alegreya Sans',sans-serif; -webkit-font-smoothing:antialiased }
button,input,select { font:inherit }
a { color:inherit; text-underline-offset:5px }
button,a { -webkit-tap-highlight-color:transparent }
button { cursor:pointer }
a:focus-visible,button:focus-visible,input:focus-visible { outline:2px solid var(--gold); outline-offset:5px }
[hidden] { display:none!important }
img { display:block; width:100%; height:auto }
h1,h2,h3,p,figure { margin:0 }
h1,h2,h3 { font-family:'Tektur',sans-serif; font-weight:500; line-height:1.12 }
h2 { font-size:clamp(32px,3.7vw,58px); letter-spacing:-.04em }
h3 { font-size:21px; line-height:1.35; letter-spacing:-.02em }
p { color:var(--muted) }
em { font-style:normal; color:var(--gold) }
.skip-link { position:fixed; top:-100px; left:20px; padding:12px; background:var(--ground); z-index:200 }
.skip-link:focus { top:12px }
.site-header { position:sticky; top:0; z-index:80; min-height:84px; padding:16px clamp(22px,3.4vw,64px); display:flex; align-items:center; gap:32px; background:#110e17f5; border-bottom:1px solid var(--line) }
.brand { display:inline-flex; align-items:center; gap:14px; font:900 24px/1 'Tektur',sans-serif; letter-spacing:.05em; text-decoration:none; color:var(--ink) }
.brand-sun { height:10px; width:10px; border-radius:50%; background:var(--gold); box-shadow:0 0 20px #e1be8350 }
.site-header nav { display:flex; justify-content:center; gap:clamp(18px,2.3vw,38px); margin-left:auto }
.site-header nav a { font-size:17px; color:var(--muted); text-decoration:none; padding:8px 0 }
.site-header nav a:hover { color:var(--ink) }
.home-page .header-newsletter { border-radius:4px 18px 4px 18px; font:500 16px 'Alegreya Sans',sans-serif; background:none; padding:10px 16px }
.page-shell { margin-right:var(--signup-reserve); padding-inline:clamp(22px,4.3vw,84px); }
.page-shell > * { max-width:1320px; margin-inline:auto }
.eyebrow { color:var(--gold); font:500 13px/1.5 'Barlow Condensed',sans-serif; text-transform:uppercase; letter-spacing:.16em; margin-bottom:22px }
.opening { padding-top:64px; position:relative }
.opening::before { content:''; position:absolute; z-index:-1; inset:0 -5vw auto; height:800px; pointer-events:none; background:radial-gradient(ellipse at 75% 30%,#8b4a3830,transparent 65%) }
.opening h1 { color:var(--gold); font-size:clamp(60px,9.2vw,132px); font-weight:900; letter-spacing:-.015em; line-height:1 }
.brandline { margin-top:16px; font-size:20px; letter-spacing:.1em }
.opening-grid { display:grid; grid-template-columns:.85fr 1.15fr; gap:36px; align-items:center; margin-top:46px }
.opening-copy h2 { font-size:clamp(29px,2.9vw,44px); line-height:1.2 }
.opening-copy > p:not(.development-note) { margin-top:25px; max-width:39ch; font-size:21px }
.actions { display:flex; align-items:center; flex-wrap:wrap; gap:24px; margin-top:30px }
.button { min-height:50px; display:inline-flex; align-items:center; justify-content:center; gap:28px; padding:13px 23px; border:1px solid var(--gold); border-radius:3px 24px 3px 24px; color:#251b22; background:var(--gold); font:600 18px 'Alegreya Sans',sans-serif; text-decoration:none }
.button:hover { background:#efcf9a }
.text-link { display:inline-flex; align-items:center; gap:16px; color:var(--gold); font-size:18px; text-decoration:none; border-bottom:1px solid #e1be8355; padding-block:6px; width:fit-content }
.text-link:hover { color:#fff0d5; border-color:currentColor }
.development-note { margin-top:26px; font-size:14px; color:#a79aa7 }
.development-note > span { display:inline-block; width:6px; height:6px; margin:0 6px 2px 0; background:#b3bd92; border-radius:50% }
.game-photo { min-width:0 }
.image-open { padding:0; border:0; background:transparent; position:relative; display:block; width:100%; overflow:hidden; color:var(--ink); border-radius:3px }
.image-open img { transition:transform .5s ease }
.image-open:hover img { transform:scale(1.025) }
.enlarge { position:absolute; right:14px; bottom:14px; display:grid; place-items:center; width:35px; height:35px; background:#110e17c0; border:1px solid #e4c3db60; border-radius:50%; opacity:0; transition:opacity .2s }
.image-open:hover .enlarge,.image-open:focus-visible .enlarge { opacity:1 }
.game-photo figcaption { display:flex; justify-content:space-between; gap:14px; color:#c6b7bc; font-size:14px; padding-top:12px }
.game-photo figcaption > span { color:#9f929f; font-size:12px; white-space:nowrap }
.opening-photo .image-open { border-radius:85px 6px 85px 6px; border:1px solid #ad8d8050; box-shadow:0 25px 65px #0004 }
.opening-photo img { aspect-ratio:1.05; object-fit:cover; object-position:80% center }
.opening-photo figcaption { display:block }
.opening-photo figcaption span { display:block; margin-top:3px }
.chapter-cue { display:flex; align-items:center; justify-content:space-between; padding:32px 0; margin-top:58px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); font:400 15px 'Barlow Condensed',sans-serif; letter-spacing:.12em; text-transform:uppercase; text-decoration:none; color:#b0a0ae }
.story-section { padding-block:110px }
.section-intro { display:grid; grid-template-columns:1fr 1fr; column-gap:60px; align-items:end; margin-bottom:40px }
.section-intro .eyebrow { grid-column:1/-1 }
.section-intro > p:last-child { max-width:44ch; font-size:21px }
.wide-photo .image-open { border-radius:70px 5px 5px 5px; border:1px solid #bd967e35 }
.ship-principles { display:grid; grid-template-columns:1fr 1fr; column-gap:55px; row-gap:20px; padding-top:30px }
.ship-principles h3 { color:#e3c9aa; margin-bottom:12px }
.ship-principles p { max-width:45ch }
.crew-section { padding:85px 0 100px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); position:relative }
.crew-section::before { content:''; position:absolute; z-index:-1; inset:0 -4vw; background:radial-gradient(ellipse at 10% 40%,#975c2930,transparent 70%); pointer-events:none }
.crew-heading { max-width:850px; margin-bottom:40px }
.crew-heading h2 { color:#f0d8b9 }
.crew-grid { display:grid; grid-template-columns:1fr 1fr; gap:60px }
.crew-copy p { margin-bottom:22px }
.lead { font-size:25px; line-height:1.5; color:var(--ink) }
.crew-connections { display:grid; gap:28px }
.crew-connections article { display:flex; gap:20px }
.crew-connections article > span { color:var(--gold); font-size:28px }
.crew-connections h3 { margin-bottom:10px }
.work-stories { display:grid; grid-template-columns:1fr 1fr; gap:35px }
.work-stories h3 { font-size:26px; margin:28px 0 16px }
.work-stories p { margin-bottom:18px }
.work-stories figcaption { display:block }
.work-stories figcaption span { display:none }
.work-stories .image-open { border-radius:4px 4px 50px 4px }
.work-stories img { aspect-ratio:1.32; object-fit:cover }
.danger { display:grid; grid-template-columns:.7fr 1.3fr; gap:50px; align-items:center; padding-top:0 }
.danger h2 { margin-bottom:25px }
.danger p:not(.eyebrow) { margin-bottom:22px }
.danger .image-open { border-radius:5px 60px 5px 5px }
.danger figcaption { display:block }
.danger figcaption span { display:none }
.listening-section { padding:90px 0; position:relative; border-top:1px solid #886b993b }
.listening-section::before { content:''; position:absolute; z-index:-1; inset:0 -4vw; background:radial-gradient(ellipse at 70% 50%,#55287850,transparent 70%) }
.listening-intro { max-width:700px; margin-bottom:36px }
.listening-intro .eyebrow { color:var(--purple) }
.listening-intro h2 { font-size:clamp(48px,6vw,84px); color:#dfc8f1; margin-bottom:25px }
.listening-intro > p:last-child { max-width:52ch; font-size:22px }
.listening-scene { position:relative; overflow:hidden; isolation:isolate; border-radius:100px 6px 100px 6px; min-height:510px; background:#130b21; border:1px solid #9572b555 }
.listening-scene > img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover }
.listening-scene::after { content:''; position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(#110e1780,transparent 45%,#110e17d9) }
.surge-space { opacity:0; transition:opacity 2s ease }
.listening-active .surge-space { opacity:1 }
.scene-readout { position:absolute; top:46px; left:45px; right:35px; z-index:2; max-width:440px }
.scene-readout .eyebrow { color:#d9c2ec; font-size:12px }
.scene-readout p { color:#f4e9ff; font-size:24px; line-height:1.4; text-shadow:0 2px 12px #000 }
.listening-scene .button { position:absolute; bottom:32px; left:40px; z-index:3; background:#dfc8f1; border-color:#dfc8f1 }
.surge-waves { position:absolute; inset:0; z-index:1; pointer-events:none; opacity:0; transition:opacity 1.5s }
.listening-active .surge-waves { opacity:.65 }
.surge-waves i { position:absolute; left:50%; top:50%; width:35%; aspect-ratio:1; border:1px solid #e7c8ff90; border-radius:50%; box-shadow:0 0 20px #ba75ff30,inset 0 0 20px #ba75ff20; transform:translate(-50%,-50%) scale(.5); animation:surge-wave 9s linear infinite; animation-play-state:paused }
.surge-waves i:nth-child(2) { animation-delay:-3s }
.surge-waves i:nth-child(3) { animation-delay:-6s }
.listening-active.in-view .surge-waves i { animation-play-state:running }
@keyframes surge-wave { from { transform:translate(-50%,-50%) scale(.25); opacity:0 } 20% { opacity:.8 } to { transform:translate(-50%,-50%) scale(4.5); opacity:0 } }
.listening-aftermath { padding-top:22px; display:grid; gap:8px }
.listening-aftermath > p { color:#dcc5ea; font-size:21px }
.listening-aftermath > span { color:#a497ad; font-size:13px }
.listening-aftermath .text-link { margin-top:12px; color:var(--purple) }
.world-invitation { display:grid; grid-template-columns:.55fr 1fr; align-items:center; gap:70px }
.world-invitation p:not(.eyebrow) { margin-top:25px; max-width:45ch }
.quiet-link { color:var(--muted); border-color:var(--line) }
.small-note { font-size:14px; color:#b0a0b3; margin-top:18px }
.orbital-mark { position:relative; aspect-ratio:1; border:1px solid #c39cc52b; border-radius:50%; transform:rotate(-25deg) scaleY(.75) }
.orbital-mark::before,.orbital-mark::after { content:''; position:absolute; inset:15%; border:1px solid #c39cc547; border-radius:50% }
.orbital-mark::after { inset:32% }
.orbital-mark span { position:absolute; left:43%; top:43%; width:14%; height:14%; border-radius:50%; background:var(--gold); box-shadow:0 0 50px #e1be8355 }
.orbital-mark i,.orbital-mark b { position:absolute; top:21%; left:21%; height:9px; width:9px; border-radius:50%; background:#c3a2e8 }
.orbital-mark b { top:67%; left:77%; width:6px; height:6px; background:var(--gold) }
.updates-section { padding:90px 0 65px; border-top:1px solid var(--line); background:radial-gradient(ellipse at 10% 0,#62433230,transparent 65%) }
.updates-section > p:not(.eyebrow) { max-width:48ch; margin-top:25px; font-size:21px }
.inline-signup { max-width:650px; margin-top:35px }
.inline-fields { display:grid; grid-template-columns:1fr auto; gap:12px }
.inline-fields .newsletter-input { border-radius:4px; font-size:18px; min-height:52px }
.inline-fields .newsletter-button { border-radius:4px 20px 4px 20px; padding-inline:25px; font-size:18px }
.updates-section #updates-privacy { font-size:14px; margin-top:12px }
.development-facts { display:grid; grid-template-columns:1fr 1fr; gap:50px; padding-top:50px; margin-top:50px; border-top:1px solid var(--line) }
.development-facts h3 { font-size:18px; margin-bottom:12px }
.development-facts p { font-size:17px; max-width:44ch }
.development-facts a { color:var(--gold) }
.site-footer { display:flex; flex-wrap:wrap; gap:22px; align-items:center; border-top:1px solid var(--line); padding:30px 0 45px }
.site-footer .brand { font-size:19px }
.site-footer p { font-size:15px }
.site-footer > a:last-child { margin-left:auto; font-size:15px; color:var(--muted) }
#screenshot-viewer { max-width:95vw; width:1400px; max-height:95dvh; padding:50px 15px 15px; border:1px solid #99839f66; border-radius:10px; color:var(--ink); background:#110e17; overflow:auto }
#screenshot-viewer::backdrop { background:#08060be8 }
#screenshot-viewer img { max-height:78dvh; object-fit:contain }
#screenshot-viewer p { font-size:16px; margin-top:12px; text-align:center }
.viewer-close { position:absolute; top:2px; right:8px; width:44px; height:44px; border:0; background:transparent; color:var(--ink); font-size:30px }
@media(min-width:1100px) { html.newsletter-open { --signup-reserve:350px } .home-page .newsletter-window { width:310px; right:20px; bottom:24px; padding:24px; border-radius:30px 6px 6px 6px; box-shadow:0 20px 60px #0006 } }
@media(max-width:1199px) and (min-width:1100px) { .opening-grid { grid-template-columns:1fr } .opening-photo img { aspect-ratio:1.7 } .opening-copy { max-width:600px } }
@media(max-width:1099px) { .page-shell { padding-inline:5vw } .site-header { gap:22px } .brand { font-size:21px } .site-header nav { gap:20px } .opening h1 { font-size:11vw } .opening-grid { gap:28px } .section-intro { gap:30px } }
@media(max-width:760px) {
    html { scroll-padding-top:132px; scroll-padding-bottom:var(--newsletter-height,0px) }
    .site-header { padding:14px 5vw 10px; min-height:104px; flex-wrap:wrap; gap:10px 18px }
    .site-header .brand { font-size:21px }
    .site-header .header-newsletter { margin:0 0 0 auto; padding:8px 12px; min-height:40px; font-size:15px }
    .site-header nav { order:3; width:100%; justify-content:space-between; margin:0; gap:12px }
    .site-header nav a { font-size:15px; padding:5px 0 }
    .page-shell { padding-inline:6vw; padding-bottom:var(--newsletter-height,0px) }
    .opening { padding-top:42px }
    .opening h1 { font-size:12vw }
    .opening .eyebrow { font-size:11px; letter-spacing:.12em; margin-bottom:20px }
    .brandline { font-size:16px; margin-top:12px }
    .opening-grid { grid-template-columns:1fr; margin-top:32px; gap:35px }
    .opening-copy h2 { font-size:32px }
    .opening-copy > p:not(.development-note) { font-size:20px; margin-top:20px }
    .opening-photo img { aspect-ratio:1.35; object-position:75% center }
    .opening-photo .image-open { border-radius:50px 5px 50px 5px }
    .actions { gap:20px; margin-top:24px }
    .button { padding:12px 19px; gap:20px }
    .chapter-cue { margin-top:35px; padding-block:24px }
    .story-section { padding-block:65px }
    .section-intro { display:block; margin-bottom:28px }
    .section-intro > p:last-child { margin-top:22px; font-size:20px }
    .ship-principles,.crew-grid,.work-stories,.development-facts { grid-template-columns:1fr; gap:28px }
    .crew-heading h2 { font-size:36px }
    .crew-heading h2 br { display:none }
    .crew-heading { margin-bottom:28px }
    .crew-grid { gap:35px }
    .crew-connections { gap:25px }
    .work-stories { gap:45px }
    .danger { display:flex; flex-direction:column; align-items:stretch; gap:28px; padding-top:0 }
    .game-photo figcaption { display:block; font-size:13px }
    .game-photo figcaption span { display:block; margin-top:4px }
    .listening-section { padding-block:65px }
    .listening-intro h2 { font-size:52px }
    .listening-intro > p:last-child { font-size:20px }
    .listening-scene { min-height:440px; border-radius:60px 5px 60px 5px }
    .scene-readout { top:30px; left:25px; right:22px }
    .scene-readout p { font-size:22px }
    .listening-scene .button { left:22px; bottom:25px; font-size:17px }
    .world-invitation { grid-template-columns:1fr; gap:25px }
    .orbital-mark { width:160px; margin-bottom:0 }
    .updates-section { padding-top:65px }
    .inline-fields { grid-template-columns:1fr }
    .development-facts { padding-top:30px; margin-top:35px }
    .site-footer { gap:18px }
    .site-footer p { width:100%; order:3 }
    .site-footer > a:last-child { font-size:14px }
    .home-page .newsletter-window { width:calc(100vw - 24px); max-width:420px; bottom:12px; right:12px; padding:18px; gap:10px; border-radius:25px 5px 5px 5px; max-height:47dvh }
    .home-page .newsletter-kicker { display:none }
    .home-page .newsletter-copy h2 { font-size:18px; margin-bottom:5px }
    .home-page .newsletter-copy > p:last-child { font-size:15px; max-width:31ch }
    .home-page .newsletter-window .newsletter-fields { grid-template-columns:1fr auto; gap:8px }
    .home-page .newsletter-window .newsletter-button { padding:8px 12px; font-size:15px }
    .home-page .newsletter-window .newsletter-input { font-size:16px; padding:8px }
    .home-page .newsletter-window .newsletter-form label { font-size:14px }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto } *,*::before,*::after { animation:none!important; transition:none!important } .listening-active .surge-waves i:first-child { transform:translate(-50%,-50%) scale(2); opacity:.35 } }