/* ═══════════════════════════════════════════════════════════════════
   PALETTE STUDY
   The soft palette from the brand study laid over the live page, by
   overriding its colour tokens and nothing else. Linked on every page
   since 16 Oct 2026, just before sky-clock.css; the hero and study rules
   in it only match on the home page.

   The purple is her star, #9998D0, and it is the only purple. Around
   it the colours from her painting: lilac, sage, rose, umber, bone.
   Nothing here is saturated. The press layers from the earlier rounds
   (sepia wash, aurora) argue with a muted palette, so they rest while
   this is on, and the masthead ceiling becomes the three ink print,
   stone in the shadows, lilac in the half tones, bone in the light.
   ═══════════════════════════════════════════════════════════════ */
/* The home page's day is this soft palette, its night the live site's own panel combo:
   warm near black cards, soft hairlines, bone type, the lilac button. These are the pairs
   the sky clock blends (sky-clock.css); the number --night decides how much of each. */
html[data-sect] {
  --d-ink:#2A2733; --d-body-ink:#4F4A52; --d-dim:#6F6A66;
  --d-accent:#9998D0; --d-accent-text:#6F6DAE; --d-accent-ink:#1E1D22; --d-glow:#B9B4E6;
  --d-panel:rgba(237,232,223,.86); --d-panel-line:#D6CFC3; --d-hair:#D6CFC3;
  --d-door:#6B5E48; --d-door-text:#6B5E48; --d-door-light:#D4C3A8; --d-door-ink:#EDE8DF;
  --d-plank:#A89A7E; --d-plank-2:#9C8E73; --d-plank-gap:#7D7159;
  --d-rail:#8E9478; --d-star:#9998D0; --d-gate-plaster:#EDE8DF;
  --d-shard:#B4B2E0; --d-shard-mid:#EEEBF8; --d-shard-body:#9998D0;
  /* the rooms of the other pages, and the workshop pages' vellum bands, in the same inks */
  --d-room-a:#F0EDF4; --d-room-b:#E6E2EA; --d-room-c:#D6D0E2; --d-vellum:#E9E4EC;
  /* the sky pairs are the two breathing loops below */
  --d-sky-a:var(--day-a); --d-sky-b:var(--day-b); --d-sky-c:var(--day-c);
  --n-sky-a:var(--nite-a); --n-sky-b:var(--nite-b); --n-sky-c:var(--nite-c);
  --d-lilac:#9998D0; --d-sage:#9DA58F; --d-rose:#D4A6B6; --d-umber:#6B5E48; --d-bone:#EDE8DF;
  --n-lilac:#B4B2E0; --n-sage:#8E9478; --n-rose:#C9A0B0; --n-umber:#B8AA98; --n-bone:#EDE8DF;
  --lilac:color-mix(in oklab, var(--d-lilac) var(--day-pct), var(--n-lilac));
  --sage:color-mix(in oklab, var(--d-sage) var(--day-pct), var(--n-sage));
  --rose:color-mix(in oklab, var(--d-rose) var(--day-pct), var(--n-rose));
  --umber:color-mix(in oklab, var(--d-umber) var(--day-pct), var(--n-umber));
  --bone:color-mix(in oklab, var(--d-bone) var(--day-pct), var(--n-bone));
}
/* two skies breathe at once, each on its own slow loop; the clock decides which one shows.
   Day: a dusty violet that deepens and returns over 44 seconds, with the hero type switching
   at its parity points. Night: deep purple to onyx and back over 52 seconds. */
@property --nite-a { syntax:'<color>'; inherits:true; initial-value:#0C0A0F; }
@property --nite-b { syntax:'<color>'; inherits:true; initial-value:#131110; }
@property --nite-c { syntax:'<color>'; inherits:true; initial-value:#1C1917; }
html { animation:day-breathe 44s linear infinite alternate, night-breathe 52s ease-in-out infinite alternate; }
@keyframes night-breathe {
  from { --nite-a:#2A2736; --nite-b:#34303F; --nite-c:#3B3847; }
  to   { --nite-a:#0C0A0F; --nite-b:#131110; --nite-c:#1C1917; }
}
@media (prefers-reduced-motion:reduce) { html { animation:none; --deep:.5;
  --nite-a:#1C1A26; --nite-b:#221F29; --nite-c:#2A2730; } }
/* the earlier colour layers rest while the palette is being judged */
.press-sepia, .press-bloom { display:none; }
/* the masthead ceiling, printed in the three inks */
/* the masthead ceiling, printed in the three inks, on every page: the lilac print by day,
   the night print at night, each fading against the other as the number moves */
body { position:relative; }
body::before {
  content:''; position:absolute; left:0; right:0; top:0; z-index:6;
  aspect-ratio:1400/933; pointer-events:none;
  background:url('/shared/images/ceiling-lilac.webp') top center / 100% auto no-repeat;
  opacity:calc(.37 * (1 - var(--night)) * (1 - var(--night))); filter:none;
  -webkit-mask-image:linear-gradient(180deg, #000 0%, #000 34%, transparent 80%);
          mask-image:linear-gradient(180deg, #000 0%, #000 34%, transparent 80%);
}
/* away from the home page there is no sky to hold the copy, so the print keeps to the
   masthead band, lighter, and is gone before the hero copy begins */
body:not(:has(.scene .water))::before, body:not(:has(.scene .water))::after {
  -webkit-mask-image:linear-gradient(180deg, #000 0%, #000 12%, transparent 46%);
          mask-image:linear-gradient(180deg, #000 0%, #000 12%, transparent 46%);
}
body:not(:has(.scene .water))::before { opacity:calc(.26 * (1 - var(--night)) * (1 - var(--night))); }
body:not(:has(.scene .water))::after { opacity:calc(.22 * var(--night) * var(--night)); }
body::after {
  content:''; position:absolute; left:0; right:0; top:0; z-index:6;
  aspect-ratio:1400/933; pointer-events:none;
  background:url('/shared/images/ceiling-night.webp') top center / 100% auto no-repeat;
  opacity:calc(.34 * var(--night) * var(--night));
  -webkit-mask-image:linear-gradient(180deg, #000 0%, #000 34%, transparent 80%);
          mask-image:linear-gradient(180deg, #000 0%, #000 34%, transparent 80%);
}


/* ═══ THE DAY SKY LIVES IN VIOLETS ═══
   The page's eon sky by day faded between sand cream and pink peach.
   Every colour in it is a violet now: a dusty violet base that breathes
   deeper on a slow loop, a noon that lifts to pale lavender grey, a
   dusk that sinks to iris. Two blooms drift through it for depth. The
   dunes under it keep their own sand; the sky alone changes. */
/* the hero's type breathes with the sky, always one step deeper than what is behind it */
/* the hero type crosses on the sky's own clock, exactly where the band behind it passes the
   text's midpoint: lavender and ink while the sky is pale, white and off white once it is deep.
   The crossing is quick so nothing sits in the middle where it would match the sky. */
@property --deep { syntax:'<number>'; inherits:true; initial-value:0; }
@keyframes day-breathe { from { --deep:0; } to { --deep:1; } }
/* How deep the loop may go depends on the sun: --noon is 1 with the sun high (set by
   sky-clock.js), 0 near sunrise and sunset. At midday the sky only breathes to a soft
   lavender; the deep violet belongs to the hours nearer dawn and dusk. --dd is the depth
   actually reached, and everything below reads it. */
html { --amp:calc(1 - 0.62 * var(--noon, 0));
       --dd:calc(var(--deep) * var(--amp));
       --day-a:color-mix(in srgb, #DDD8EB calc((1 - var(--dd)) * 100%), #5B5190);
       --day-b:color-mix(in srgb, #E2DEEF calc((1 - var(--dd)) * 100%), #7B6FAC);
       --day-c:color-mix(in srgb, #EBE8F2 calc((1 - var(--dd)) * 100%), #A69CC8);
       /* each piece of type switches as a hard step at its own parity point, the depth at
          which the sky's brightness sits halfway between the type's two colours */
       --mast-em:color-mix(in srgb, #9998D0 calc(clamp(0, (0.19 - var(--dd)) * 500, 1) * 100%), #F1EFFA);
       --hero-em:color-mix(in srgb, #9998D0 calc(clamp(0, (0.281 - var(--dd)) * 500, 1) * 100%), #EFECFA);
       --nav-ink:color-mix(in srgb, #2A2733 calc(clamp(0, (0.661 - var(--dd)) * 500, 1) * 100%), #FFFFFF);
       --hero-cap:color-mix(in srgb, #4F4890 calc(clamp(0, (0.721 - var(--dd)) * 500, 1) * 100%), #FFFFFF);
       --hero-lede:color-mix(in srgb, #4F4A52 calc(clamp(0, (0.821 - var(--dd)) * 500, 1) * 100%), #ECE9F6); }
/* Each hero colour is the day loop's value until the type step, then its night value.
   The night value is white while the sky is still crossing (lilac and bone are mid tones
   and would sink into a half dark sky) and settles to the night's lilac and bone once the
   sky is properly dark, past eight tenths. */
html { --em-night:color-mix(in oklab, #EFECFA calc(clamp(0, (0.85 - var(--night)) * 4, 1) * 100%), #A899FF);
       --lede-night:color-mix(in oklab, #ECE9F6 calc(clamp(0, (0.85 - var(--night)) * 4, 1) * 100%), #C9BFB2);
       /* the italic and Saya: lavender is a mid tone, so once the crossing starts they go to
          ink, and cross to white with the rest of the sky type, then settle to the night lilac */
       --em-mid:color-mix(in oklab, color-mix(in oklab, #000 var(--lean-dark), var(--d-ink)) var(--sky-type-pct), var(--em-night));
       --sky-ink:color-mix(in oklab, color-mix(in oklab, #000 var(--lean-dark), var(--d-ink)) var(--sky-type-pct), color-mix(in oklab, #FFF var(--lean-light), var(--n-ink))); }
#shore h1 { color:var(--sky-ink); }
#shore h1 em.plain { color:color-mix(in oklab, var(--hero-em) var(--em-pct), var(--em-mid)); }
/* the loop's caps and lede lean toward black inside the band only while the loop is pale
   (when it is deep they are already white, and must not be pulled back) */
html { --cap-lean:calc((1 - var(--day-k)) * (1 - var(--dd)) * 100%);
       --cap-day:color-mix(in oklab, #000 var(--cap-lean), var(--hero-cap));
       --lede-day:color-mix(in oklab, #000 var(--cap-lean), var(--hero-lede)); }
#shore .kicker { color:color-mix(in oklab, var(--cap-day) var(--sky-type-pct), var(--em-night)); opacity:1; }
#shore .skyline, #shore .skyline b, #shore .shore-cue, #shore .shore-skip a {
  color:color-mix(in oklab, var(--cap-day) var(--sky-type-pct), var(--lede-night)); opacity:1; }
#shore .lede { color:color-mix(in oklab, var(--lede-day) var(--sky-type-pct), var(--lede-night)); }
/* the menu: ink while the sky is pale, white from the moment it deepens past the point
   where ink stops reading (on the loop's own clock, like the caps), white into the night */
.topbar nav a { color:color-mix(in oklab, color-mix(in oklab, #000 var(--cap-lean), var(--nav-ink)) var(--sky-type-pct), #FFFFFF); }
.topbar nav a:hover { color:color-mix(in oklab, var(--accent-text) var(--sky-type-pct), var(--glow)); }
/* the page's noon and dusk layers ran on a clock of their own; with the type timed to the sky they rest, so one clock drives everything */
/* depth: two blooms that drift through the sky on unrelated clocks */
.sky::before { content:''; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:calc(1 - var(--night));
  background:
    radial-gradient(62% 48% at 28% 22%, rgba(104,92,160,.42), transparent 70%),
    radial-gradient(52% 44% at 74% 58%, rgba(214,206,232,.55), transparent 72%),
    radial-gradient(40% 36% at 55% 12%, rgba(140,128,190,.3), transparent 70%);
  background-size:140% 140%, 150% 150%, 130% 130%;
  animation:sky-bloom 70s ease-in-out infinite alternate; mix-blend-mode:normal; }
@keyframes sky-bloom {
  from { background-position:0% 0%, 100% 100%, 50% 0%; }
  to   { background-position:100% 40%, 0% 30%, 20% 100%; }
}
/* the dunes keep their own sand; only the sky changes */
/* the evening at the door: violet deepening, no orange, no pink */
.sunset { background:linear-gradient(180deg,
    rgba(96,84,150,.5) 0%,
    rgba(120,108,172,.46) 24%,
    rgba(154,149,208,.42) 44%,
    rgba(190,184,220,.4) 57%,
    rgba(214,210,230,.3) 66%,
    rgba(158,150,190,.2) 80%,
    rgba(96,88,130,.24) 100%); }
/* the lantern lights follow */
@media (prefers-reduced-motion:reduce) { .sky::before { animation:none; } }

/* Saya in the masthead follows the italic: lavender, then ink, then white, then the night lilac */
.topbar .wordmark em { color:color-mix(in oklab, var(--mast-em) var(--em-pct), var(--em-mid)); }