/* ============================================================================================================
   Astrowake studio site: one stylesheet for every page.
   Colours, type and motion come from the Astrowake Brand System v1 (29 September 2026).
   Rules this file keeps:
   - Dark (Void) is the default. The light companions (Paper, Ink, Slate, Tide) take over under
     prefers-color-scheme: light, and the logo swaps to its on-light colourway with them.
   - Key art: in dark mode the night scenes ARE the page (their Void edges melt into it); in light mode they sit
     in framed windows, because a night scene cannot melt into Paper. Text never sits bare on key art.
   - Solar Amber stays near 2%: the logo's sunlit edge, the key art's own glows, and the dark-mode focus ring.
   - No inline styles anywhere: the Content-Security-Policy forbids them, so every colour lives here.
   Pass history:
   S1 2026-09-29 first build.
   S2 2026-09-29 first look: phone logo was oversized; featured card had an empty gap above its link; landscape
      phones got a 16:9 picture taller than the screen; light-theme stars read as dust; contact block floated.
   S3 2026-09-29 second look: a wrapped card link left its arrow at the far edge (320 px); the tablet night band
      pushed the words to 808 px.
   S4 2026-09-29 critique round 3: full-width hero button on portrait phones; art seams at the harbor/footer and
      under the featured art; stars off the words; shorter wide-screen hero so Games shows on the first screen.
      Scrim widened after a pixel-measured contrast check of the hero words over the launch glow.
   ============================================================================================================ */

/* ---------- Fonts: latin subsets made by scripts/make-fonts.mjs (SIL Open Font License, see /fonts/OFL.txt) --- */
@font-face{font-family:"Unbounded";src:url("/fonts/unbounded-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Figtree";src:url("/fonts/figtree-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Figtree";src:url("/fonts/figtree-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Martian Mono";src:url("/fonts/martian-mono-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* Stand-ins sized to match each brand font (widths measured in Chrome on this page's own words, 2026-09-29),
   so nothing jumps when the real fonts arrive. */
@font-face{font-family:"Unbounded Fallback";src:local("Arial Black"),local("Arial-Black");font-weight:600;size-adjust:112.45%;ascent-override:88.48%;descent-override:21.79%;line-gap-override:0%}
@font-face{font-family:"Figtree Fallback";src:local("Arial"),local("ArialMT");font-weight:400;size-adjust:100.63%;ascent-override:94.41%;descent-override:24.84%;line-gap-override:0%}
@font-face{font-family:"Figtree Fallback";src:local("Arial Bold"),local("Arial-BoldMT");font-weight:600;size-adjust:94.41%;ascent-override:100.63%;descent-override:26.48%;line-gap-override:0%}
@font-face{font-family:"Martian Mono Fallback";src:local("Arial"),local("ArialMT");font-weight:500;size-adjust:115.94%;ascent-override:86.25%;descent-override:17.25%;line-gap-override:0%}

/* ---------- Tokens ---------------------------------------------------------------------------------------- */
:root{
  /* brand palette */
  --void:#0C1220;--deep:#152238;--fog:#8DA3B3;--comet:#FFF3D6;--teal:#2CC5B4;--stern:#1C8C82;--amber:#FFB23E;
  --paper:#F3F5F6;--ink:#0C1220;--slate:#4A5D6E;--tide:#0B6F66;--stern-tide:#73ABA7;
  /* roles, dark theme */
  --bg:var(--void);
  --surface:var(--deep);            /* cards */
  --line:#223049;                   /* hairlines (the brand guide's own) */
  --line-hover:#2E7E78;
  --heading:var(--comet);
  --text:#C9D5DE;                   /* reading text on dark (the brand's website mock) */
  --muted:var(--fog);
  --accent:var(--teal);
  --accent-ink:var(--void);
  --accent-hover:#58D2C4;
  --link:var(--teal);
  --focus:var(--amber);             /* the warm spark doubles as the keyboard focus ring on dark */
  /* logo colourway (on-dark) */
  --logo-arm:var(--teal);--logo-inner:var(--stern);--logo-head:var(--comet);--logo-sun:var(--amber);--logo-word:var(--comet);
  /* type */
  --display:"Unbounded","Unbounded Fallback","Arial Black",system-ui,sans-serif;
  --body:"Figtree","Figtree Fallback","Segoe UI",system-ui,-apple-system,Roboto,sans-serif;
  --mono:"Martian Mono","Martian Mono Fallback",ui-monospace,"Cascadia Mono",Menlo,Consolas,monospace;
  /* shape and motion: cards 14px, buttons 8px, tags 6px */
  --r:14px;--r-s:8px;--r-t:6px;
  --ease:cubic-bezier(.22,.9,.3,1);  /* the brand's wake curve: fast start, long settle */
  /* layout; the side gutters never shrink under a notch or rounded corner */
  --gutter:clamp(16px,4vw,48px);
  --max:1240px;
  --safe-l:max(var(--gutter),env(safe-area-inset-left,0px));
  --safe-r:max(var(--gutter),env(safe-area-inset-right,0px));
  color-scheme:dark;
}
@media (prefers-color-scheme:light){
  :root{
    --bg:var(--paper);--surface:#FFFFFF;--line:#D3DCE3;--line-hover:#6FA6A1;
    --heading:var(--ink);--text:var(--ink);--muted:var(--slate);
    --accent:var(--tide);--accent-ink:var(--paper);--accent-hover:#085A53;--link:var(--tide);--focus:var(--tide);
    --logo-arm:var(--tide);--logo-inner:var(--stern-tide);--logo-head:var(--ink);--logo-sun:var(--amber);--logo-word:var(--ink);
    color-scheme:light;
  }
}

/* ---------- Base ------------------------------------------------------------------------------------------ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;background:var(--bg);scroll-padding-top:env(safe-area-inset-top,0px)}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--bg);color:var(--text);font:400 1.0625rem/1.65 var(--body);font-kerning:normal;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
img,svg,picture{display:block;max-width:100%}
img{height:auto}
h1,h2,h3,p,ul,figure{margin:0}
ul{padding:0;list-style:none}
a{color:var(--link);text-decoration-thickness:1px;text-underline-offset:.22em}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:4px}
::selection{background:var(--accent);color:var(--accent-ink)}
.vh{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.skip{position:absolute;z-index:3;left:var(--safe-l);top:0;display:inline-flex;align-items:center;min-height:44px;padding:0 16px;
  border:1px solid var(--accent);border-radius:var(--r-s);background:var(--surface);color:var(--heading);font-weight:600;text-decoration:none;
  transform:translateY(-130%)}
.skip:focus{transform:translateY(calc(env(safe-area-inset-top,0px) + 12px))}
main:focus{outline:none}
.wrap{width:100%;max-width:calc(var(--max) + var(--safe-l) + var(--safe-r));margin-inline:auto;padding-left:var(--safe-l);padding-right:var(--safe-r)}
.section-h{font:600 clamp(1.75rem,1.2rem + 1.9vw,2.75rem)/1.1 var(--display);letter-spacing:-.02em;color:var(--heading);text-wrap:balance}
.i{width:1.125em;height:1.125em;flex:none}

/* ---------- Buttons and links ----------------------------------------------------------------------------- */
.cta{display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:0 20px 0 24px;border-radius:var(--r-s);
  background:var(--accent);color:var(--accent-ink);font:600 1.0625rem/1.2 var(--body);text-decoration:none;
  transition:background-color .2s ease,transform .16s var(--ease)}
.cta:active{transform:scale(.97)}
.cta .i{transition:transform .2s var(--ease)}
@media (hover:hover) and (pointer:fine){
  .cta:hover{background:var(--accent-hover)}
  .cta:hover .i{transform:translateY(2px)}
}

/* ---------- Hero ------------------------------------------------------------------------------------------ */
/* One grid for every size. Named lines: "full" runs edge to edge, "content" is the readable column, "split"
   divides text from art on wide screens. Phones stack name / art / words so the button lands under the thumb. */
.hero{position:relative;isolation:isolate}
.hero-grid{display:grid;
  grid-template-columns:[full-start] minmax(var(--safe-l),1fr) [content-start] minmax(0,calc(var(--max) * .5)) [split] minmax(0,calc(var(--max) * .5)) [content-end] minmax(var(--safe-r),1fr) [full-end];
  grid-template-rows:auto auto auto;
  padding-top:max(28px,calc(env(safe-area-inset-top,0px) + 20px))}
.hero-name{grid-column:content-start/content-end;grid-row:1;width:min(80%,19rem);margin-bottom:clamp(20px,5vw,36px)}
.rv{width:100%;height:auto;overflow:visible}
.rv-arm{fill:var(--logo-arm)}.rv-inner{fill:var(--logo-inner)}.rv-head{fill:var(--logo-head)}.rv-sun{fill:var(--logo-sun)}.rv-word{fill:var(--logo-word)}
.rv-rip1,.rv-rip2{fill:none;stroke:var(--logo-arm);stroke-width:2;vector-effect:non-scaling-stroke;transform-box:fill-box;transform-origin:center}
.hero-art{grid-column:full-start/full-end;grid-row:2;position:relative;height:clamp(170px,56vw,42svh);background:var(--void)}
.hero-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:68% 50%}
@media (min-width:640px){.hero-art{height:clamp(240px,40vw,42svh)}}
.hero-copy{grid-column:content-start/content-end;grid-row:3;padding-block:clamp(20px,5vw,32px) clamp(40px,9vw,72px);display:grid;justify-items:start}
.hero-tagline{font:600 clamp(2.125rem,1.3rem + 3.3vw,4.25rem)/1.04 var(--display);letter-spacing:-.025em;color:var(--heading);text-wrap:balance;max-width:12ch}
.hero-tagline .hl{color:var(--accent)}
.hero-lede{margin-top:clamp(12px,2vw,20px);max-width:32ch;font-size:clamp(1.0625rem,.98rem + .45vw,1.3125rem);line-height:1.5;color:var(--text);text-wrap:pretty}
.hero .cta{margin-top:clamp(22px,3.4vw,36px)}
@media (max-width:639px) and (orientation:portrait){.hero-copy{justify-items:stretch}.hero .cta{justify-content:center}}
/* dark phones: the band of night sky melts into the page above and below */
.hero-art{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 18%,#000 72%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 18%,#000 72%,transparent 100%)}

/* wide screens and landscape phones: words on the left, the launch fills the sky behind them */
@media (min-width:900px),(orientation:landscape) and (max-height:520px){
  .hero-grid{min-height:clamp(540px,78svh,800px);grid-template-rows:1fr auto auto 1.2fr;padding-top:0}
  .hero-name{grid-column:content-start/split;grid-row:2;width:clamp(210px,31vw,470px);margin-bottom:clamp(18px,2.6vw,40px)}
  .hero-copy{grid-column:content-start/split;grid-row:3;padding-block:0}
  .hero-art{grid-column:full-start/full-end;grid-row:1/-1;z-index:-1;height:auto;-webkit-mask-image:none;mask-image:none}
  .hero-art img{object-position:58% 60%}
  .hero-art::after{content:"";position:absolute;inset:0;
    background:linear-gradient(90deg,rgba(12,18,32,.95) 0%,rgba(12,18,32,.9) 36%,rgba(12,18,32,.55) 56%,rgba(12,18,32,0) 74%),
               linear-gradient(0deg,var(--void) 0%,rgba(12,18,32,0) 24%)}
}
/* landscape phones: everything smaller so the whole hero fits the short screen */
@media (orientation:landscape) and (max-height:520px){
  .hero-grid{min-height:100svh;grid-template-rows:1fr auto auto 1fr;
    padding-block:max(14px,env(safe-area-inset-top,0px)) max(14px,env(safe-area-inset-bottom,0px))}
  .hero-name{width:clamp(170px,30vw,260px);margin-bottom:12px}
  .hero-tagline{font-size:clamp(1.625rem,1rem + 2.6vw,2.25rem)}
  .hero-lede{margin-top:8px;font-size:.9375rem;max-width:30ch}
  .hero .cta{margin-top:14px;min-height:46px}
}

/* ---------- Games ----------------------------------------------------------------------------------------- */
.games{padding-block:clamp(40px,6vw,80px) clamp(56px,8vw,104px)}
.games .section-h{margin-bottom:clamp(20px,3vw,36px)}
.game-grid{display:grid;gap:clamp(12px,1.5vw,18px);grid-template-columns:minmax(0,1fr)}
.game{position:relative;isolation:isolate;display:flex;flex-direction:column;min-width:0;border:1px solid var(--line);border-radius:var(--r);
  background:var(--surface);transition:border-color .2s ease,transform .18s var(--ease)}
.game:active{transform:scale(.992)}
.game-body{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:clamp(20px,2.4vw,28px);flex:1 1 auto}
.game-name{font:600 clamp(1.375rem,1.1rem + .9vw,1.875rem)/1.12 var(--display);letter-spacing:-.015em;color:var(--heading);text-wrap:balance}
.game-meta{order:-1;display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font:500 .71875rem/1.4 var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.tag{display:inline-flex;align-items:center;padding:3px 8px;border:1px solid var(--muted);border-radius:var(--r-t);color:var(--heading)}
.game-desc{color:var(--text);max-width:48ch;text-wrap:pretty}
.game--pattern .game-desc{max-width:40ch}
.game-link{margin-top:auto;display:block;padding:10px 0 2px;line-height:1.4;color:var(--link);font-weight:600;text-decoration:none}
.game-link .i{display:inline-block;margin-left:6px;vertical-align:-.2em}
.game-link .i{transition:transform .2s var(--ease)}
/* the whole card is the link's hit area (Fitts); the link text stays short for screen readers */
.game-link::after{content:"";position:absolute;inset:0;z-index:1;border-radius:var(--r)}
.game-link:focus-visible{outline:none}
.game-link:focus-visible::after{outline:2px solid var(--focus);outline-offset:3px}
@media (hover:hover) and (pointer:fine){
  .game:hover{border-color:var(--line-hover)}
  .game:hover .game-link .i{transform:translate(2px,-2px)}
  .game:hover .game-link{text-decoration:underline}
}
/* featured: Squid Racing, with the wake-ribbons key art */
.game--featured .game-art{position:relative;aspect-ratio:16/9;border-radius:calc(var(--r) - 1px) calc(var(--r) - 1px) 0 0;overflow:hidden;background:var(--void)}
.game--featured .game-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% 40%}
.game--featured .game-art{-webkit-mask-image:linear-gradient(180deg,#000 55%,transparent 98%);mask-image:linear-gradient(180deg,#000 55%,transparent 98%)}
.game--featured .game-body{gap:12px;padding-top:clamp(4px,1vw,12px)}
.game--featured .game-name{font-size:clamp(2.125rem,1.2rem + 3.2vw,3.75rem);line-height:1.02;letter-spacing:-.025em}
.game--featured .game-desc{font-size:clamp(1.0625rem,1rem + .35vw,1.25rem);line-height:1.5}
/* the other three: a brand pattern, drawn through a mask so it takes the theme's colour, strongest on the right */
.game--pattern::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:var(--pat-ink);
  -webkit-mask-image:var(--pat),linear-gradient(90deg,transparent 42%,#000 100%);mask-image:var(--pat),linear-gradient(90deg,transparent 42%,#000 100%);opacity:.85;
  -webkit-mask-size:var(--pat-size),100% 100%;mask-size:var(--pat-size),100% 100%;
  -webkit-mask-repeat:repeat,no-repeat;mask-repeat:repeat,no-repeat;
  -webkit-mask-composite:source-in;mask-composite:intersect}
.game--ghost{--pat:url("/img/pattern-stars-mask.svg");--pat-size:200px 200px;--pat-ink:var(--comet)}
.game--reaches{--pat:url("/img/pattern-ripples-mask.svg");--pat-size:160px 160px;--pat-ink:var(--comet)}
.game--swi{--pat:url("/img/pattern-wakes-mask.svg");--pat-size:112px 112px;--pat-ink:var(--teal)}
@media (prefers-color-scheme:light){
  .game--ghost{--pat-ink:var(--stern-tide)}
  .game--reaches{--pat-ink:var(--slate)}
  .game--swi{--pat-ink:var(--tide)}
}
@media (min-width:640px) and (max-width:979px),(orientation:landscape) and (max-height:520px) and (max-width:979px){
  .game--featured{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)}
  .game--featured .game-art{aspect-ratio:auto;min-height:100%;border-radius:calc(var(--r) - 1px) 0 0 calc(var(--r) - 1px);
    -webkit-mask-image:linear-gradient(90deg,#000 62%,transparent);mask-image:linear-gradient(90deg,#000 62%,transparent)}
  .game--featured .game-body{padding-top:clamp(20px,2.4vw,28px)}
  .game--featured .game-name{font-size:clamp(2rem,1rem + 3vw,2.75rem)}
}
@media (min-width:980px){
  .game-grid{grid-template-columns:repeat(12,minmax(0,1fr))}
  .game--featured{grid-column:1/span 7;grid-row:1/span 3}
  .game--featured .game-art{aspect-ratio:auto;flex:1 1 auto;min-height:280px}
  .game--featured .game-body{flex:0 0 auto}
  .game--pattern{grid-column:8/span 5}
}

/* ---------- About and contact ----------------------------------------------------------------------------- */
.closing-grid{display:grid;gap:clamp(40px,6vw,64px);grid-template-columns:minmax(0,1fr);padding-bottom:clamp(40px,7vw,88px)}
.about .section-h{margin-bottom:clamp(16px,2.2vw,24px)}
.about p{max-width:34ch;font-size:clamp(1.1875rem,1.02rem + .6vw,1.5rem);line-height:1.55;color:var(--text);text-wrap:pretty}
.contact{display:grid;justify-items:start;gap:10px;align-content:end}
.contact-h{font:600 clamp(1.25rem,1.1rem + .5vw,1.5rem)/1.2 var(--display);letter-spacing:-.015em;color:var(--heading)}
.contact p{max-width:34ch;color:var(--text);text-wrap:pretty}
.mail{display:inline-flex;align-items:center;gap:10px;min-height:48px;margin-top:4px;color:var(--link);font-weight:600;font-size:clamp(1.0625rem,1rem + .35vw,1.25rem);
  text-decoration:underline;text-decoration-color:color-mix(in oklab,var(--link) 45%,transparent);overflow-wrap:anywhere}
.mail .i{width:1.25em;height:1.25em}
@media (min-width:900px){
  .closing-grid{grid-template-columns:minmax(0,7fr) minmax(0,4fr);column-gap:clamp(48px,7vw,112px);align-items:end}
  .contact{border-top:1px solid var(--line);padding-top:24px}
}
/* the harbor at dusk closes the page; in dark mode its Void sky and sea melt into the page */
.harbor-wrap{width:100%}
.harbor{position:relative;height:clamp(190px,33vw,460px);background:var(--void);
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 30%,#000 78%,transparent);mask-image:linear-gradient(180deg,transparent 0,#000 30%,#000 78%,transparent)}
.harbor img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 64%}

/* ---------- Footer ---------------------------------------------------------------------------------------- */
.foot{padding-block:18px max(22px,calc(env(safe-area-inset-bottom,0px) + 12px))}
.foot-in{display:flex;flex-wrap:wrap;align-items:center;gap:0 28px;font:500 .75rem/1.5 var(--mono);letter-spacing:.02em;color:var(--muted)}
.foot-brand{display:inline-flex;align-items:center;gap:10px;min-height:44px;margin-right:auto}
.foot-mark{width:28px;height:28px}
.foot a{display:inline-flex;align-items:center;min-height:44px;color:var(--muted);text-decoration:underline;text-decoration-color:color-mix(in oklab,currentColor 40%,transparent)}
.foot-in > p{overflow-wrap:anywhere}

/* hover changes only where a real pointer hovers (a phone tap would leave a sticky underline) */
@media (hover:hover) and (pointer:fine){
  .mail:hover{text-decoration-color:currentColor}
  .foot a:hover{color:var(--heading);text-decoration-color:currentColor}
}

/* ---------- Inner pages (privacy, not found) -------------------------------------------------------------- */
.top{padding-top:max(16px,calc(env(safe-area-inset-top,0px) + 8px))}
.top a{display:inline-flex;align-items:center;min-height:48px;border-radius:var(--r-s)}
.top img{width:168px;height:auto}
.page{padding-block:clamp(32px,7vw,88px) clamp(56px,9vw,112px)}
.page h1{font:600 clamp(2.125rem,1.3rem + 3vw,3.5rem)/1.05 var(--display);letter-spacing:-.025em;color:var(--heading);text-wrap:balance;max-width:16ch}
.prose{max-width:40rem}
.prose .lede{margin-top:clamp(16px,2.4vw,24px);font-size:clamp(1.125rem,1rem + .45vw,1.3125rem);line-height:1.55}
.prose h2{margin-top:clamp(36px,5vw,52px);margin-bottom:10px;font:600 clamp(1.25rem,1.1rem + .5vw,1.5rem)/1.25 var(--display);letter-spacing:-.015em;color:var(--heading)}
.prose p + p{margin-top:14px}
.prose ul{display:grid;gap:10px;margin-top:6px}
.prose li{display:grid;grid-template-columns:18px minmax(0,1fr);gap:10px}
.prose li::before{content:"";width:8px;height:8px;margin-top:.62em;border-radius:50%;background:var(--accent)}
.prose strong{color:var(--heading);font-weight:600}
.updated{margin-top:clamp(36px,5vw,52px);font:500 .75rem/1.5 var(--mono);letter-spacing:.02em;color:var(--muted)}
.label{font:500 .75rem/1.4 var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--muted);margin-bottom:14px}
.lost .cta{margin-top:clamp(24px,3.4vw,36px)}
.lost-sky{position:relative;height:clamp(160px,26vw,320px);margin-top:clamp(32px,6vw,72px)}
.lost-sky::before{content:"";position:absolute;inset:0;background:var(--comet);
  -webkit-mask-image:url("/img/pattern-stars-mask.svg"),linear-gradient(180deg,transparent,#000 40%,#000 60%,transparent);mask-image:url("/img/pattern-stars-mask.svg"),linear-gradient(180deg,transparent,#000 40%,#000 60%,transparent);
  -webkit-mask-size:200px 200px,100% 100%;mask-size:200px 200px,100% 100%;-webkit-mask-repeat:repeat,no-repeat;mask-repeat:repeat,no-repeat;
  -webkit-mask-composite:source-in;mask-composite:intersect}

/* ---------- Light theme: key art moves into framed windows ------------------------------------------------ */
@media (prefers-color-scheme:light){
  .hero-art{grid-column:content-start/content-end;border-radius:var(--r);overflow:hidden;-webkit-mask-image:none;mask-image:none;margin-top:4px}
  .game--featured .game-art,.harbor{-webkit-mask-image:none;mask-image:none}
  .harbor-wrap{max-width:calc(var(--max) + var(--safe-l) + var(--safe-r));margin-inline:auto;padding-left:var(--safe-l);padding-right:var(--safe-r)}
  .harbor{border-radius:var(--r);overflow:hidden}
  .foot{margin-top:clamp(12px,2vw,24px)}
  .lost-sky::before{background:var(--stern-tide)}
}
@media (prefers-color-scheme:light) and (min-width:900px),(prefers-color-scheme:light) and (orientation:landscape) and (max-height:520px){
  .hero-grid{grid-template-rows:1fr auto auto 1fr;min-height:0;padding-block:clamp(32px,6vw,80px)}
  .hero-art{grid-column:split/content-end;grid-row:1/-1;z-index:auto;align-self:center;height:auto;aspect-ratio:5/4;margin:0 0 0 clamp(24px,4vw,64px)}
  .hero-art::after{content:none}
  .hero-art img{object-position:50% 50%}
}
@media (prefers-color-scheme:light) and (orientation:landscape) and (max-height:520px){
  .hero-grid{min-height:100svh;padding-block:max(14px,env(safe-area-inset-top,0px)) max(14px,env(safe-area-inset-bottom,0px))}
  .hero-art{aspect-ratio:auto;height:calc(100svh - 48px);margin-left:20px}
}

/* ---------- Motion: the logo reveal (brand timing: travel 0-1.4 s, stern 0.25-1.6 s, sunlit edge 1.25-1.65 s,
   ripples 1.3-2.3 s and 1.55-2.55 s, name 1.35-2.05 s). Plays once per visit, pure CSS. With reduced motion
   nothing animates and the finished logo simply shows. -------------------------------------------------------- */
@media (prefers-reduced-motion:no-preference){
  .rv-move{animation:rv-travel 1.4s var(--ease) both}
  #rv-b0 .rv-draw,#rv-b1 .rv-draw{animation:rv-draw 1.4s var(--ease) both}
  #rv-s0 .rv-draw,#rv-s1 .rv-draw{animation:rv-draw 1.35s var(--ease) .25s both}
  .rv-sun{animation:rv-in .4s var(--ease) 1.25s both}
  .rv-rip1{animation:rv-rip1 1s cubic-bezier(.2,.7,.3,1) 1.3s forwards}
  .rv-rip2{animation:rv-rip2 1s cubic-bezier(.2,.7,.3,1) 1.55s forwards}
  .rv-word{animation:rv-word .7s var(--ease) 1.35s both}
}
@keyframes rv-travel{from{transform:translate(-93.86px,93.86px)}to{transform:none}}
@keyframes rv-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes rv-in{from{opacity:0}to{opacity:1}}
@keyframes rv-rip1{from{opacity:.8;transform:scale(1)}to{opacity:0;transform:scale(4.2)}}
@keyframes rv-rip2{from{opacity:.6;transform:scale(1)}to{opacity:0;transform:scale(4.2)}}
@keyframes rv-word{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .cta,.game,.game-link .i,.cta .i{transition:none}
  .cta:active,.game:active{transform:none}
}

/* ---------- High contrast and forced colours ---------------------------------------------------------------- */
@media (prefers-contrast:more){:root{--muted:var(--text);--line:var(--muted)}}
@media (forced-colors:active){
  .game,.cta{border:1px solid CanvasText}
  .game--pattern::before,.lost-sky::before{display:none}
}