/* asterie.app landing (final). Dark-only. Tokens = ASTERIE-DESIGN-SYSTEM.md §3 (current palette). No framework.
   Breakpoints: mobile <=600, tablet 601-1023, desktop >=1024 (designed at 375 / 768 / 1440). */
@font-face{font-family:Pix;src:url(../fonts/PixelifySans-SemiBold.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:Pop;src:url(../fonts/Poppins-Regular.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Pop;src:url(../fonts/Poppins-Medium.woff2) format("woff2");font-weight:500;font-display:swap}
:root{
 --night:#271826;--wall:#3A2338;--deep:#1C1019;--sky:#1D1A38;--sky2:#252148;
 --skytop:#100E24; /* web only: top band of the loop's sky */
 --band1:#1C1019;--band2:#16142E;--band3:#121028;--band4:#100E24; /* the night deepening, section by section */
 --dawn1:#1E1B3A;--dawn2:#2E2350;--dawn3:#3A2338;--dawn4:#4A2E3E;
 --amber:#F0B860;--honey:#F7D27A;--core:#FFEFC6;--frame:#E3A04F;--pink:#E8A6A8;--parch:#F7E2BC;
 --cream:#F3E4D4;--warm:#FBE7C4;--muted:#C7A89C;--ink:#2E1C2A;--cocoa:#6B4436}
*{box-sizing:border-box;margin:0;padding:0}
html{overflow-x:clip;background:var(--skytop)}
body{background:var(--skytop);color:var(--cream);font-family:Pop,system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:clip}
h1,h2,.pix{font-family:Pix,system-ui,sans-serif;font-weight:600;font-variant-ligatures:none;font-feature-settings:"liga" 0,"clig" 0;overflow-wrap:break-word}
a{color:inherit;text-decoration:none}
a:focus-visible{outline:2px solid var(--honey);outline-offset:4px}
img{image-rendering:pixelated}

/* wordmark: art, 62x21 at 1x, whole-number scales only */
.wm{display:block;width:310px;height:105px;image-rendering:pixelated}

/* "Coming soon to the App Store" — OUR pixel chip, not Apple's badge (no Apple logo). Not a link.
   At launch, replace .soon with Apple's unmodified "Download on the App Store" badge (56px high desktop, 48 mobile). */
.soon{display:inline-flex;align-items:center;gap:12px;min-height:56px;max-width:100%;padding:8px 20px 8px 16px;background:var(--deep);color:var(--warm);
 outline:2px solid var(--muted);outline-offset:-2px;opacity:.6;cursor:default;pointer-events:none;
 clip-path:polygon(0 4px,4px 4px,4px 0,calc(100% - 4px) 0,calc(100% - 4px) 4px,100% 4px,100% calc(100% - 4px),calc(100% - 4px) calc(100% - 4px),calc(100% - 4px) 100%,4px 100%,4px calc(100% - 4px),0 calc(100% - 4px))}
.soon img{width:20px;height:20px;flex:none}
.soon span{display:flex;flex-direction:column;line-height:1.1;text-align:left}
.soon small{font-size:12px;font-weight:500;color:var(--muted);margin-bottom:3px}
.soon b{font-family:Pix;font-weight:600;font-size:21px;font-variant-ligatures:none}

/* chips */
.chip{display:inline-block;white-space:nowrap;font-family:Pix;font-weight:600;font-size:13px;line-height:1;padding:4px 7px}
.chip.plus{background:var(--ink);color:var(--honey);box-shadow:0 0 0 2px var(--honey)}
.chip.free{background:var(--deep);color:var(--cream);box-shadow:0 0 0 2px var(--muted)}

/* ---------- hero ---------- */
.hero{position:relative;min-height:880px;padding:132px 64px 330px 120px;background:var(--skytop);overflow:hidden}
.hero .ext{height:124px;bottom:auto}
/* HERO SLOT: see HANDOFF.md "Swap the hero". Art is 240x126 at x6 = 1440x756, bottom-anchored. */
.hero-art{position:absolute;left:50%;bottom:0;width:1440px;height:756px;transform:translateX(-50%);z-index:1}
.hero-art img,.hero-art video{position:absolute;inset:0;width:100%;height:100%;display:block;image-rendering:pixelated}
.hero-art video{z-index:1}
/* Fade the art box into the page sky so no rectangle edge shows (top: Milky Way cut-off; sides: sky only,
   masked off above the horizon so the ground isn't tinted). Static overlays, so reduced motion is unaffected. */
.hero-art::before,.hero-art::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none}
.hero-art::before{background:linear-gradient(to bottom,var(--skytop) 0,rgba(16,14,36,.85) 8%,rgba(16,14,36,.45) 18%,rgba(16,14,36,0) 32%)}
.hero-art::after{background:linear-gradient(to right,var(--skytop) 0,rgba(16,14,36,0) 7%,rgba(16,14,36,0) 93%,var(--skytop) 100%);
 -webkit-mask-image:linear-gradient(to bottom,#000 35%,transparent 60%);mask-image:linear-gradient(to bottom,#000 35%,transparent 60%)}
.hero .copy{position:relative;z-index:3;max-width:820px}
.hero h1{font-size:56px;line-height:1.15;color:var(--warm);margin:30px 0 16px;text-shadow:0 4px 0 var(--deep)}
.hero .sub{font-size:18px;line-height:1.6;max-width:460px;margin-bottom:34px;text-shadow:0 2px 0 var(--deep),0 0 12px var(--skytop)}

/* ---------- night bands ---------- */
.band,.close{position:relative;overflow:hidden;text-align:center}
.band{padding:104px 24px 0}
.band>.c,.close>.c{position:relative;z-index:3}
.b1{background:var(--band1)}.b2{background:var(--band2)}.b3{background:var(--band3)}.b4{background:var(--band4);padding-bottom:104px}
.time{display:inline-flex;align-items:center;gap:8px;font-family:Pix;font-weight:600;font-size:15px;color:var(--honey);margin-bottom:18px;letter-spacing:.04em}
.time img{width:20px;height:20px}
.band h2,.close h2{font-size:40px;line-height:1.2;color:var(--warm);margin:0 auto 14px;max-width:760px}
.band p{font-size:18px;line-height:1.6;color:var(--muted);margin:0 auto 52px;max-width:560px}
.phone{position:relative;width:340px;height:520px;margin:0 auto;overflow:hidden;padding:10px 10px 0;background:#120a10;border-radius:50px 50px 0 0;
 box-shadow:0 0 0 2px #4a3140,0 30px 70px rgba(0,0,0,.5)}
.phone img{display:block;width:100%;height:auto;border-radius:40px 40px 0 0;image-rendering:auto}
.phone.low img{margin-top:-220px;border-radius:0}
.pair{display:flex;gap:40px;justify-content:center}.pair .phone{margin:0}
.rooms{display:grid;grid-template-columns:repeat(3,262px);gap:28px 24px;justify-content:center;margin:0 auto}
.rooms img{display:block;width:262px;height:300px}
.rooms figcaption{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px 10px;margin-top:12px;font-size:14px;color:var(--cream)}

/* ---------- first light ---------- */
.close{min-height:440px;padding:96px 24px 150px;
 background:linear-gradient(var(--band4) 0 120px,var(--dawn1) 120px 200px,var(--dawn2) 200px 280px,var(--dawn3) 280px 350px,var(--dawn4) 350px)}
.close h2{margin-bottom:28px;text-shadow:0 4px 0 var(--deep)}
/* Home links to /prompts/ and /blog/ (SEO kit section 9): a slim row on the dawn band right above the footer,
   clear of the closing scene's sprites. Rendered only when PUBLISH_POSTS is true. */
.more{display:flex;flex-wrap:wrap;gap:10px 32px;padding:30px 64px 0;background:var(--dawn4);font-size:15px;line-height:1.5}
.more a{color:var(--honey);text-decoration:underline;text-underline-offset:4px;text-decoration-color:rgba(247,210,122,.5)}
.more a:hover,.more a:focus-visible{text-decoration-color:currentColor}
@media (max-width:1023px){.more{padding:28px 40px 0}}
@media (max-width:600px){.more{flex-direction:column;padding:26px 24px 0;font-size:14px}}
.hills{position:absolute;left:0;right:0;bottom:0;height:112px;z-index:1;background:url(../img/hills-dawn2.png) repeat-x 50% 0/960px 112px;image-rendering:pixelated}

/* ---------- footer ---------- */
.foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:14px 28px;padding:36px 64px;font-size:14px;background:var(--dawn4);color:var(--cream)}
.foot nav{display:flex;flex-wrap:wrap;gap:12px 28px}.foot nav a{color:var(--warm)}

/* ---------- pixel stars (stars.js) ---------- */
.stars{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.stars i{position:absolute;display:block}
.stars i.tw{animation:tw 3.2s steps(1) infinite}

/* ---------- sprites: one sheet (img/sprites.png), per-sprite offsets in sprites.css ----------
   Inline vars per instance: --x/--y desktop+tablet position (px; x from the section's center, y from its top, or bottom with .bt),
   --s scale (whole numbers); --X/--Y/--ms mobile. No --X = desktop/tablet only (.dk). */
.sp{--cx:var(--x);--cy:var(--y);--cs:var(--s,4);position:absolute;z-index:2;pointer-events:none;
 left:calc(50% + var(--cx) * 1px);top:calc(var(--cy) * 1px);width:calc(var(--fw) * var(--cs) * 1px);height:calc(var(--fh) * var(--cs) * 1px);
 background:url(../img/sprites.png) no-repeat;image-rendering:pixelated;
 background-size:calc(var(--aw) * var(--cs) * 1px) calc(var(--ah) * var(--cs) * 1px);
 background-position:calc(var(--ax) * var(--cs) * -1px) calc(var(--ay) * var(--cs) * -1px)}
.sp.bt{top:auto;bottom:calc(var(--cy) * 1px)}
.sp.back{z-index:1}.sp.front{z-index:4}
.sp.mo,.sp.tb{display:none} /* mobile-only / tablet-only sprites */
@keyframes fr{to{background-position:calc((var(--ax) + var(--fw) * var(--nf)) * var(--cs) * -1px) calc(var(--ay) * var(--cs) * -1px)}}
@keyframes bob{to{transform:translateY(calc(-1px * var(--cs)))}}
@keyframes drift{to{transform:translateX(calc(var(--dx) * 1px))}}
@keyframes rise{0%{transform:translateY(0);opacity:0}12%{opacity:1}75%{opacity:1}100%{transform:translateY(calc(var(--cry) * 1px));opacity:0}}
@keyframes ffly{0%,100%{transform:translate(0,0)}25%{transform:translate(8px,-12px)}50%{transform:translate(20px,-4px)}75%{transform:translate(4px,8px)}}
@keyframes shoot{0%{transform:translate(0,0);opacity:0}2%{opacity:1}11%{transform:translate(336px,120px);opacity:0}100%{transform:translate(336px,120px);opacity:0}}
@keyframes glow{50%{opacity:.55}}
@keyframes blink{50%{opacity:.25}}
@keyframes tw{50%{opacity:.2}}
.sp{--cry:var(--ry)}
.rise{opacity:0}

/* ---------- wide screens: stretch the hero art edge to edge ---------- */
@media (min-width:1441px){
 .hero{min-height:calc(124px + 52.5vw)}
 .hero-art{width:100vw;height:52.5vw}
}
/* ---------- tablet ---------- */
@media (max-width:1023px){
 .hero{padding:104px 48px 330px}
 .hero h1{font-size:44px;max-width:620px}
 .wm{width:248px;height:84px}
 .band{padding:88px 32px 0}
 .b4{padding-bottom:88px}
 .pair{gap:24px}.pair .phone{width:300px;height:480px}
 .rooms{grid-template-columns:repeat(2,262px)}
 .foot{padding:32px 40px}
 .sp.nt{display:none}.sp.tb{display:block}
}
/* ---------- mobile ---------- */
@media (max-width:600px){
 .hero{min-height:760px;padding:64px 24px 360px;text-align:center}
 .hero .ext{height:400px}
 .hero-art{width:720px;height:378px;left:-200px;transform:none} /* x3; keeps the cottage and path in frame */
 .hero .copy{display:flex;flex-direction:column;align-items:center;margin:0 auto}
 .hero h1{font-size:32px;margin:22px 0 12px}
 .hero .sub{font-size:15px;max-width:320px;margin-bottom:24px}
 .soon{min-height:52px;padding:7px 16px 7px 14px}.soon b{font-size:19px}
 .band{padding:64px 24px 0}
 .band h2,.close h2{font-size:28px}
 .band p{font-size:15px;margin-bottom:32px}
 .phone{width:260px;height:400px;padding:7px 7px 0;border-radius:38px 38px 0 0}
 .phone img{border-radius:32px 32px 0 0}
 .phone.low img{margin-top:-166px}
 .pair .phone+.phone{display:none}
 .pair .phone{width:260px;height:400px}
 .rooms{grid-template-columns:repeat(2,131px);gap:20px 24px}
 .rooms img{width:131px;height:150px}
 .rooms figcaption{font-size:12px;gap:6px}
 .chip{font-size:11px;padding:3px 5px}
 .b4{padding-bottom:64px}
 .close{min-height:360px;padding:64px 24px 120px;background:linear-gradient(var(--band4) 0 100px,var(--dawn1) 100px 160px,var(--dawn2) 160px 220px,var(--dawn3) 220px 280px,var(--dawn4) 280px)}
 .hills{height:56px;background-size:480px 56px}
 .foot{flex-direction:column;align-items:flex-start;padding:28px 24px;font-size:13px}
 .sp{--cx:var(--X);--cy:var(--Y);--cs:var(--ms,2);--cry:var(--mry,var(--ry))}
 .sp.nt{display:block}.sp.dk,.sp.tb{display:none}.sp.mo{display:block}
 @keyframes ffly{0%,100%{transform:translate(0,0)}25%{transform:translate(4px,-6px)}50%{transform:translate(10px,-2px)}75%{transform:translate(2px,4px)}}
}
/* ---------- Reduce Motion: a still night. Poster only, no sprite motion, no rising stars ---------- */
@media (prefers-reduced-motion:reduce){
 *,*::before,*::after{animation:none !important;transition:none !important}
 .hero-art video{display:none}
 .sp.rise,.sp.shoot{display:none}
}