/* Cosmic Whale style book: shared tokens and base for cosmicwhale.cc and every subdomain.
   Day: shallow water, the envoy's shadow passes over. Night: the envoy is a constellation.
   A subdomain overrides --branch-day and --branch-night and nothing else. */

/* Gloock + Spectral, self-hosted (SIL OFL), latin + latin-ext. Paths are relative to this file,
   so branches that load it cross-origin get the fonts too (served with Access-Control-Allow-Origin). */
@font-face{font-family:"Gloock"; font-style:normal; font-weight:400; font-display:swap; src:url(fonts/gloock-400-latin-ext.woff2) format("woff2"); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Gloock"; font-style:normal; font-weight:400; font-display:swap; src:url(fonts/gloock-400-latin.woff2) format("woff2"); 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:"Spectral"; font-style:italic; font-weight:400; font-display:swap; src:url(fonts/spectral-400-italic-latin-ext.woff2) format("woff2"); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Spectral"; font-style:italic; font-weight:400; font-display:swap; src:url(fonts/spectral-400-italic-latin.woff2) format("woff2"); 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:"Spectral"; font-style:normal; font-weight:400; font-display:swap; src:url(fonts/spectral-400-latin-ext.woff2) format("woff2"); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Spectral"; font-style:normal; font-weight:400; font-display:swap; src:url(fonts/spectral-400-latin.woff2) format("woff2"); 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:"Spectral"; font-style:normal; font-weight:600; font-display:swap; src:url(fonts/spectral-600-latin-ext.woff2) format("woff2"); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Spectral"; font-style:normal; font-weight:600; font-display:swap; src:url(fonts/spectral-600-latin.woff2) format("woff2"); 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}

:root{
  /* day */
  --ground:#BFE9E2;      /* sunlit shallows */
  --light:#F2FFFB;       /* caustic light, star light */
  --ink:#13204F;         /* deep-water navy, all reading text */
  --ink-soft:#33457A;    /* secondary text, still AA on --ground */
  --shade:#26358A;       /* the envoy's shadow */
  --signal:#FFD23F;      /* the heart-star; brand constant, never overridden */
  /* per-subdomain accent: links, focus, rules, the song line.
     A subdomain sets this pair and nothing else. Day value needs 3:1 on --ground day, night value 3:1 on --ground night. */
  --branch-day:#A86A00;  /* main site: the heart-star by daylight, amber */
  --branch-night:#FFD23F;/* main site: the heart-star itself */
  --branch:var(--branch-day);
  --day:1; --night:0;    /* numeric switches for opacity math */

  --font-display:"Gloock", Georgia, serif;
  --font-body:"Spectral", Georgia, serif;
  /* type scale, perfect fourth from 1.15rem body */
  --step-0:1.15rem; --step-1:1.53rem; --step-2:2.04rem; --step-3:clamp(2rem,4.5vw,3.2rem); --step-4:clamp(3rem,9.5vw,8.5rem);
  --gutter:clamp(16px,5vw,72px);
  --fade:.8s;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#070A1F; --light:#F6F0D6; --ink:#F6F0D6; --ink-soft:#B9B6CF;
    --shade:#0D1233; --branch:var(--branch-night); --day:0; --night:1; color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --ground:#070A1F; --light:#F6F0D6; --ink:#F6F0D6; --ink-soft:#B9B6CF;
  --shade:#0D1233; --branch:var(--branch-night); --day:0; --night:1; color-scheme:dark;
}

*{box-sizing:border-box}
html{background:var(--ground)}
body{
  margin:0; background:var(--ground); color:var(--ink);
  font:400 var(--step-0)/1.7 var(--font-body);
  overflow-x:hidden; transition:background-color var(--fade), color var(--fade);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:var(--font-display); font-weight:400; letter-spacing:-.015em; text-wrap:balance}
p{text-wrap:pretty}
a{color:inherit; text-decoration:underline 2px var(--branch); text-underline-offset:4px}
a:hover{text-decoration-thickness:4px}
:focus-visible{outline:2px solid var(--ink); outline-offset:3px; box-shadow:0 0 0 6px var(--branch); border-radius:2px}

/* show text for one time of day only */
.night-only{display:none}
:root[data-theme="dark"] .day-only{display:none}
:root[data-theme="dark"] .night-only{display:inline}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .day-only{display:none}
  :root:not([data-theme="light"]) .night-only{display:inline}
}

/* the water and the sky, fixed behind everything */
.caustics,.stars{position:fixed; inset:0; width:100%; height:100%; pointer-events:none; transition:opacity var(--fade)}
.caustics{opacity:calc(var(--day) * .9); mix-blend-mode:screen}
.stars{opacity:var(--night)}

/* top bar: wordmark left, the time-of-day link right */
.top{position:relative; z-index:3; display:flex; justify-content:space-between; align-items:baseline; gap:16px; padding:20px clamp(16px,4vw,48px)}
.top .mark{font-family:var(--font-display); font-size:1.15rem; text-decoration:none}
.wait{
  font:italic 400 1.05rem var(--font-body); color:var(--ink); background:none; border:0; padding:4px 0; cursor:pointer;
  text-decoration:underline 2px var(--branch); text-underline-offset:5px;
}
.wait:hover{text-decoration-thickness:4px}

footer.notice{position:relative; z-index:2; text-align:center; padding:24px 16px 56px; color:var(--ink-soft); font-style:italic}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none !important; transition:none !important}
}