/* ═══ THE SCENE ═══ 27 Oct 2026. Below the horizon, under her fresco
   sky (which stays exactly as it is): Doré's engraved sea in place of the
   drawn lake, plank bridge and boat, with his celestial pilot crossing
   to the lit door; above, Riccioli's engraved moon. The lit door at the
   horizon stays. All plates are public domain (Wikimedia Commons) and
   live in shared/images/engravings/ as ink-only stencils. Scoped by
   html[data-scene="dore"][data-palette="dusk"], set by the script.
   Deleting this file, its <link> and its <script> restores the page. ═══ */

/* the drawn scene rests while a plate is showing */
html[data-scene]:not([data-scene="original"]) .scene .water,
html[data-scene]:not([data-scene="original"]) .scene .deck,
html[data-scene]:not([data-scene="original"]) .scene .rails,
html[data-scene]:not([data-scene="original"]) .scene .boat { display:none; }

/* the plate: printed in the page ink, below the horizon, under the door */
.scene-plate {
  position:absolute; left:0; right:0; top:61vh; bottom:0; pointer-events:none;
  display:none; background:color-mix(in oklab, var(--ink) 58%, transparent);
}
html[data-scene]:not([data-scene="original"]) .scene-plate { display:block; }

/* a quiet credit in the corner, like a plate's caption */
.scene-credit {
  position:fixed; left:1.1rem; bottom:.9rem; z-index:5; max-width:min(26rem, 60vw);
  font-family:var(--quote); font-style:italic; font-size:.82rem; line-height:1.35;
  color:var(--dim); pointer-events:none; display:none;
  transition:opacity .6s ease;
}
/* the caption belongs to the opening view; it steps aside once you walk */
.scene-credit.is-away { opacity:0; }
html[data-scene]:not([data-scene="original"]) .scene-credit { display:block; }

/* ═══ DORÉ, ALIVE ═══ one printed plate under the fresco, moved and
   lit, never redrawn or doubled.
   · The ink is a deep violet by day and pale lilac by night, the
     fresco's own family, so sky and sea read as one artwork.
   · The sea is a single crisp layer of Doré's waves, rolling in a slow
     swell, with light passing over the engraved crests.
   · The celestial pilot is a traced two-ink cut-out from Doré's
     Purgatorio. Its silhouette is cut out of the moving sea and follows
     it (--sil-*), so no waves slide behind its robes.
   · It keeps near the shore while the visitor reads, crosses the open
     water on an arc as the door comes into view, settles into the
     doorway and passes through it into the light (placed by the script,
     eased frame by frame).
   · Tonight's moon lays a path of lit lines under it, as bright as the
     real phase (--moon-lit), fading as the moon leaves view. ═══ */
html[data-scene="dore"] {
  --engr:color-mix(in oklab, #43375F var(--day-pct, 100%), #DDD5F3);
  --engr-light:color-mix(in oklab, #FFFFFF var(--day-pct, 100%), #FFF8E8);
}
.scene-figure, .scene-glade { display:none; position:absolute; pointer-events:none; }
html[data-scene="dore"] .scene-figure, html[data-scene="dore"] .scene-glade { display:block; }

/* the sea: one layer, calm under the hero's words, cut away behind the pilot */
html[data-scene="dore"] .scene-plate {
  left:-4%; right:-4%; background:none;
  -webkit-mask-image:linear-gradient(180deg, transparent 0%, rgba(0,0,0,.3) 14%, #000 46%);
          mask-image:linear-gradient(180deg, transparent 0%, rgba(0,0,0,.3) 14%, #000 46%);
}
html[data-scene="dore"] .scene-plate::before,
html[data-scene="dore"] .scene-plate::after { content:''; position:absolute; inset:0; }
html[data-scene="dore"] .scene-plate::before {
  background:color-mix(in oklab, var(--engr) 44%, transparent);
  -webkit-mask:
    url('/shared/images/engravings/scene/dore-waves-full-1861.svg') center top / cover no-repeat,
    url('/shared/images/engravings/scene/dore-pilot-shape-1868.svg') var(--sil-pos, -999px -999px) / var(--sil-size, 0 0) no-repeat;
  -webkit-mask-composite:source-out;
          mask:
    url('/shared/images/engravings/scene/dore-waves-full-1861.svg') center top / cover no-repeat,
    url('/shared/images/engravings/scene/dore-pilot-shape-1868.svg') var(--sil-pos, -999px -999px) / var(--sil-size, 0 0) no-repeat;
          mask-composite:subtract;
}
/* Doré's foam: the crests in warm white, with light slowly crossing them */
html[data-scene="dore"] .scene-plate::after {
  background:var(--engr-light);
  -webkit-mask:
    linear-gradient(100deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,.5) 38%, #000 50%, rgba(0,0,0,.5) 62%, rgba(0,0,0,.5) 100%) 0 0 / 260% 100% no-repeat,
    url('/shared/images/engravings/scene/dore-crests-1861.svg') center top / cover no-repeat,
    url('/shared/images/engravings/scene/dore-pilot-shape-1868.svg') var(--sil-pos, -999px -999px) / var(--sil-size, 0 0) no-repeat;
  -webkit-mask-composite:source-in, source-out;
          mask:
    linear-gradient(100deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,.5) 38%, #000 50%, rgba(0,0,0,.5) 62%, rgba(0,0,0,.5) 100%) 0 0 / 260% 100% no-repeat,
    url('/shared/images/engravings/scene/dore-crests-1861.svg') center top / cover no-repeat,
    url('/shared/images/engravings/scene/dore-pilot-shape-1868.svg') var(--sil-pos, -999px -999px) / var(--sil-size, 0 0) no-repeat;
          mask-composite:intersect, subtract;
  animation:sheen 18s ease-in-out infinite alternate;
}
@keyframes sheen {
  from { -webkit-mask-position:100% 0, center top, var(--sil-pos, -999px -999px); mask-position:100% 0, center top, var(--sil-pos, -999px -999px); }
  to   { -webkit-mask-position:0% 0, center top, var(--sil-pos, -999px -999px);   mask-position:0% 0, center top, var(--sil-pos, -999px -999px); }
}

/* the moon's path: his lines, lit, under the moon */
html[data-scene="dore"] .scene-glade {
  left:-4%; right:-4%; top:61vh; bottom:0;
  opacity:calc(var(--moon-lit, 0) * var(--moon-vis, 1) * (.45 + var(--night, 0) * .45));
  -webkit-mask-image:linear-gradient(180deg, transparent 0%, #000 22%, #000 72%, transparent 100%);
          mask-image:linear-gradient(180deg, transparent 0%, #000 22%, #000 72%, transparent 100%);
}
html[data-scene="dore"] .scene-glade::before,
html[data-scene="dore"] .scene-glade::after { content:''; position:absolute; inset:0; }
html[data-scene="dore"] .scene-glade::before {
  background:var(--engr-light);
  -webkit-mask:
    radial-gradient(ellipse 7% 100% at var(--glade-x, 86%) 0%, #000 18%, transparent 100%),
    url('/shared/images/engravings/scene/dore-waves-full-1861.svg') center top / cover no-repeat;
  -webkit-mask-composite:source-in;
          mask:
    radial-gradient(ellipse 7% 100% at var(--glade-x, 86%) 0%, #000 18%, transparent 100%),
    url('/shared/images/engravings/scene/dore-waves-full-1861.svg') center top / cover no-repeat;
          mask-composite:intersect;
}
html[data-scene="dore"] .scene-glade::after {
  background:radial-gradient(ellipse 5% 90% at var(--glade-x, 86%) 0%,
    color-mix(in srgb, var(--engr-light) 32%, transparent), transparent 100%);
}

/* the celestial pilot (Purgatorio, Canto II): the angel who carries
   souls across at dawn to the shore where their healing begins: the
   angel and the souls in its care, traced from the 1871 Berlin scan
   (the faint figures at the back left out), mirrored so it leads. A
   two-ink cut-out traced from the plate (no background, a feathered
   edge): Doré's darks in the palette's ink, his brightest lights in warm
   white, the mid-tones left open so the sea and sky show through. It
   glides on the outer box and breathes on the inner one; its wings may
   rise past the horizon into the fresco. */
html[data-scene="dore"] .scene-figure {
  --ch:min(48vh, 90vw); --cw:calc(var(--ch) * .6733);
  left:0; top:0; width:var(--cw); height:var(--ch);
  /* placed every frame by the script: an arc across the water, into the doorway, through it */
  transform-origin:50% 90%; will-change:transform;
}
/* inside the group's silhouette, whatever stands behind it (the door's
   posts and wheel, the far water) is blurred away before the figures are
   printed over it: thin lines vanish, the colours and the door's glow stay,
   so the figures read as solid without a pasted-on ground */
.scene-figure .fig-veil { position:absolute; inset:0;
  -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
  -webkit-mask:url('/shared/images/engravings/scene/dore-pilot-shape-1868.svg') center / contain no-repeat;
          mask:url('/shared/images/engravings/scene/dore-pilot-shape-1868.svg') center / contain no-repeat; }
.scene-figure i { position:absolute; inset:0; transform-origin:50% 90%;
  animation:pilot-glide 7s ease-in-out infinite;
  /* the boat settles into the sea: its keel dissolves into Doré's water */
  -webkit-mask-image:linear-gradient(180deg, #000 0%, #000 86%, rgba(0,0,0,.6) 93%, transparent 100%);
          mask-image:linear-gradient(180deg, #000 0%, #000 86%, rgba(0,0,0,.6) 93%, transparent 100%); }
/* facing the door it is crossing toward */
.scene-figure i::before, .scene-figure i::after { content:''; position:absolute; inset:0; transform:scaleX(-1); }
/* passing through the door, the violet ink goes first and the figure turns to light */
.scene-figure i::before {
  background:var(--engr-light);
  /* backlit by the door as it nears: the highlights give way to silhouette */
  opacity:calc(.9 * (1 - var(--near, 0) * .8));
  filter:brightness(calc(1 + var(--through, 0) * .25));
  -webkit-mask:url('/shared/images/engravings/scene/dore-pilot-light-1868.svg') center / contain no-repeat;
          mask:url('/shared/images/engravings/scene/dore-pilot-light-1868.svg') center / contain no-repeat;
}
.scene-figure i::after {
  background:var(--engr);
  opacity:calc(1 - var(--through, 0) * 1.6);
  -webkit-mask:url('/shared/images/engravings/scene/dore-pilot-dark-1868.svg') center / contain no-repeat;
          mask:url('/shared/images/engravings/scene/dore-pilot-dark-1868.svg') center / contain no-repeat;
}
/* its reflection on the water: the same plate mirrored under the waterline,
   broken into ripple lines that drift, fading with depth */
.scene-figure b { position:absolute; left:0; right:0; top:88%; height:100%;
  opacity:calc(.42 * (1 - var(--through, 0)));
  -webkit-mask:
    linear-gradient(180deg, rgba(0,0,0,.9) 0%, rgba(0,0,0,.35) 18%, transparent 42%),
    repeating-linear-gradient(180deg, #000 0 2px, transparent 2px 5px) 0 0 / 100% 10px;
  -webkit-mask-composite:source-in;
          mask:
    linear-gradient(180deg, rgba(0,0,0,.9) 0%, rgba(0,0,0,.35) 18%, transparent 42%),
    repeating-linear-gradient(180deg, #000 0 2px, transparent 2px 5px) 0 0 / 100% 10px;
          mask-composite:intersect;
  animation:ripple 3.2s linear infinite;
}
.scene-figure b::after {
  content:''; position:absolute; inset:0; transform:scale(-1, -1);
  background:color-mix(in oklab, var(--engr) 75%, transparent);
  -webkit-mask:url('/shared/images/engravings/scene/dore-pilot-dark-1868.svg') center / contain no-repeat;
          mask:url('/shared/images/engravings/scene/dore-pilot-dark-1868.svg') center / contain no-repeat;
}
@keyframes ripple {
  from { -webkit-mask-position:0 0, 0 0; mask-position:0 0, 0 0; }
  to   { -webkit-mask-position:0 0, 0 10px; mask-position:0 0, 0 10px; }
}
@keyframes pilot-glide {
  0%, 100% { transform:translateY(0) rotate(-.4deg); }
  50%      { transform:translateY(-1.1%) rotate(.4deg); }
}

@media (prefers-reduced-motion:reduce) {
  html[data-scene="dore"] .scene-plate::after, .scene-figure i, .scene-figure b { animation:none; }
}

/* ═══ GILDED DUSK ═══ the fresco and the lavender identity stay; the
   palette re-inks Doré's sea and the pilot and lays light over the lower
   sky and the water: a silvery pale gold at the horizon, deeper in the
   near sea, the way a real dusk moves from violet overhead to light
   below. The tone layer sits under the door's light, so the door stays
   pure. ═══ */
.scene-tone { position:absolute; inset:0; pointer-events:none; display:none; }
html[data-scene="dore"][data-palette]:not([data-palette="lavender"]) .scene-tone {
  display:block; opacity:calc(1 - var(--night, 0) * .45);
}

/* 1 · gilded dusk: sepia ink, a silvery pale-gold light at the horizon,
   cool taupe depths. Depth the way a painter builds distance: the far sea
   pale in the light, the near sea deeper and richer; foam silver-gilt
   where the light catches it, cream close in; and the sky stepping from
   violet through pearl into pale gold. */
html[data-palette="dusk"] {
  --engr:color-mix(in oklab, #3E3329 var(--day-pct, 100%), #E8E0CF);
  --engr-light:color-mix(in oklab, #FFFCEF var(--day-pct, 100%), #FBF6E6);
  --gild:color-mix(in oklab, #FFF6CF var(--day-pct, 100%), #F4EED8);
}
html[data-palette="dusk"] .scene-plate::before {
  background:linear-gradient(180deg,
    color-mix(in oklab, var(--engr) 24%, transparent) 0%,
    color-mix(in oklab, var(--engr) 46%, transparent) 42%,
    color-mix(in oklab, var(--engr) 78%, transparent) 100%);
}
html[data-palette="dusk"] .scene-plate::after {
  background:linear-gradient(180deg, var(--gild) 0%, var(--gild) 18%,
    var(--engr-light) 55%, var(--engr-light) 100%);
}
html[data-palette="dusk"] .scene-tone { background:
  /* a bright, silvery pale-gold light low on the horizon */
  radial-gradient(64% 18vh at 50% 64vh, rgba(255,248,214,.62), rgba(250,244,212,.2) 55%, transparent 80%),
  /* a thin burn right on the waterline */
  linear-gradient(180deg, transparent 0, transparent 60vh, rgba(255,253,236,.5) 63.5vh, transparent 69vh),
  /* violet, a faint pearl, pale gold, then the deep water in cool taupe */
  linear-gradient(180deg, transparent 0, transparent 30vh, rgba(226,218,232,.12) 46vh,
    rgba(244,236,200,.24) 58vh, rgba(240,232,196,.26) 66vh,
    rgba(112,102,96,.24) 80vh, rgba(62,54,52,.42) 100vh); }

/* the caption sits on the deepest water in Gilded dusk: lift it to cream */
html[data-palette="dusk"] .scene-credit {
  color:color-mix(in oklab, #FBF2E2 calc(var(--day-k, 1) * 100%), var(--dim));
  text-shadow:0 1px 10px rgba(50,36,28,.55);
}

/* ═══ THE SEA MOVES, AND THE PILOT RIDES IT ═══
   · Doré's sea rolls: a tuned version of the site's own water filter
     (#dore-swell, added by the script) bends his engraved lines in long,
     slow horizontal swells, so the water moves without doubling a line.
   · The pilot rides the tide: an irregular rise and fall with a little
     roll and pitch, on the swell's own slow beat.
   · A band of Doré's waves washes across the boat's waterline in front of
     the hull (.scene-fore, placed by the script), moving with the same
     swell, so the boat sits in the water instead of on it.
   · The reflection ripples with the water. */
html[data-scene="dore"] .scene-plate { filter:url(#dore-swell); }
.scene-figure i { animation:pilot-tide 7.4s ease-in-out infinite; }
@keyframes pilot-tide {
  0%   { transform:translate(0, 0)       rotate(-1.1deg); }
  22%  { transform:translate(.5%, -1.8%) rotate(.1deg); }
  48%  { transform:translate(.2%, -.5%)  rotate(1.2deg); }
  74%  { transform:translate(-.4%, 1.1%) rotate(-.3deg); }
  100% { transform:translate(0, 0)       rotate(-1.1deg); }
}
.scene-figure b { filter:url(#dore-swell-fine); }

.scene-fore { display:none; position:absolute; left:0; top:0; pointer-events:none; filter:url(#dore-swell); }
html[data-scene="dore"] .scene-fore { display:block; }
.scene-fore::before, .scene-fore::after { content:''; position:absolute; inset:0;
  -webkit-mask:
    url('/shared/images/engravings/scene/dore-waves-full-1861.svg') var(--fore-pos, 0 0) / var(--fore-size, 100% auto) no-repeat,
    radial-gradient(ellipse 50% 50% at 50% 55%, #000 35%, transparent 100%);
  -webkit-mask-composite:source-in;
          mask:
    url('/shared/images/engravings/scene/dore-waves-full-1861.svg') var(--fore-pos, 0 0) / var(--fore-size, 100% auto) no-repeat,
    radial-gradient(ellipse 50% 50% at 50% 55%, #000 35%, transparent 100%);
          mask-composite:intersect; }
.scene-fore::before { background:color-mix(in oklab, var(--engr) 62%, transparent); }
.scene-fore::after {
  background:var(--engr-light); opacity:.8;
  -webkit-mask:
    url('/shared/images/engravings/scene/dore-crests-1861.svg') var(--fore-pos, 0 0) / var(--fore-size, 100% auto) no-repeat,
    radial-gradient(ellipse 50% 50% at 50% 55%, #000 35%, transparent 100%);
  -webkit-mask-composite:source-in;
          mask:
    url('/shared/images/engravings/scene/dore-crests-1861.svg') var(--fore-pos, 0 0) / var(--fore-size, 100% auto) no-repeat,
    radial-gradient(ellipse 50% 50% at 50% 55%, #000 35%, transparent 100%);
          mask-composite:intersect; }

@media (prefers-reduced-motion:reduce) {
  html[data-scene="dore"] .scene-plate, .scene-fore, .scene-figure b { filter:none; }
}

/* ═══ TONIGHT'S MOON ═══ Riccioli's engraved moon from Doppelmayr's
   Tabula Selenographica (Nuremberg, 1707), printed in soft ink on a pale
   disc. The phase is drawn true: the script builds the terminator as a
   curved shadow from the real elongation, and the dark limb keeps a faint
   earthshine so the engraving shows through. It is a button: it opens a
   small lunar card with tonight's phase, sign and dignity, the light, and
   the next full and new moons. */
html[data-scene="dore"] .shore-moon {
  width:clamp(5.2rem, 8.4vw, 7.4rem); pointer-events:auto; cursor:pointer;
  background:radial-gradient(circle at 40% 36%, #FFFDF6 0%, #F4EFE1 55%, #DED6C2 100%);
  transition:transform .5s cubic-bezier(.2,.7,.3,1), filter .5s ease;
}
html[data-scene="dore"] .shore-moon::before {
  background:color-mix(in oklab, #5B5266 62%, transparent);
  -webkit-mask:url('/shared/images/engravings/doppelmayr-moon-1707.svg') center / cover no-repeat;
          mask:url('/shared/images/engravings/doppelmayr-moon-1707.svg') center / cover no-repeat;
}
html[data-scene="dore"] .shore-moon .shore-moon-shade {
  inset:0; transform:scaleX(var(--wane-x, 1)); filter:blur(1.2px);
  background:#251D33; opacity:.8;
  -webkit-mask:var(--phase-mask) center / 100% 100% no-repeat;
          mask:var(--phase-mask) center / 100% 100% no-repeat;
}
html[data-scene="dore"] .shore-moon:hover,
html[data-scene="dore"] .shore-moon:focus-visible { transform:scale(1.06); filter:brightness(1.06); }
html[data-scene="dore"] .shore-moon:focus-visible { outline:2px solid var(--engr-light, #fff); outline-offset:6px; }

/* the lunar card */
.moon-card {
  position:fixed; z-index:70; width:min(19rem, calc(100vw - 2rem));
  padding:1.3rem 1.3rem 1.1rem; border-radius:14px;
  background:color-mix(in oklab, #FBF7EE 94%, transparent);
  color:#2E2833; box-shadow:0 24px 60px -18px rgba(30,22,40,.45), 0 0 0 1px rgba(60,48,72,.08);
  opacity:0; transform:translateY(8px) scale(.98); pointer-events:none;
  transition:opacity .35s ease, transform .35s cubic-bezier(.2,.7,.3,1);
  backdrop-filter:blur(6px);
}
.moon-card.is-open { opacity:1; transform:none; pointer-events:auto; }
.moon-card h3 { font-family:var(--display); font-weight:400; font-kerning:none;
  font-size:1.45rem; line-height:1.1; margin:0 0 .9rem; }
.moon-card .mc-disc { position:relative; width:11.5rem; aspect-ratio:1; margin:0 auto 1rem;
  border-radius:50%; overflow:hidden;
  background:radial-gradient(circle at 40% 36%, #FFFDF6 0%, #F4EFE1 55%, #DED6C2 100%);
  box-shadow:0 0 40px 6px rgba(255,244,214,.45), inset -8px -10px 26px rgba(90,80,70,.22); }
.moon-card .mc-disc::before { content:''; position:absolute; inset:0;
  background:color-mix(in oklab, #4E4559 72%, transparent);
  -webkit-mask:url('/shared/images/engravings/doppelmayr-moon-1707.svg') center / cover no-repeat;
          mask:url('/shared/images/engravings/doppelmayr-moon-1707.svg') center / cover no-repeat; }
.moon-card .mc-disc i { position:absolute; inset:0; transform:scaleX(var(--wane-x, 1)); filter:blur(1.5px);
  background:#251D33; opacity:.72;
  -webkit-mask:var(--phase-mask) center / 100% 100% no-repeat;
          mask:var(--phase-mask) center / 100% 100% no-repeat; }
.moon-card dl { margin:0; display:grid; grid-template-columns:auto 1fr; gap:.45rem .9rem; }
.moon-card dt { font-family:var(--caps); font-size:var(--caps-xxs, .6rem); letter-spacing:.2em;
  text-transform:uppercase; color:#7A6F84; padding-top:.2rem; }
.moon-card dd { margin:0; font-size:.95rem; line-height:1.4; }
.moon-card .mc-note { margin:.9rem 0 0; font-family:var(--quote); font-style:italic; font-size:.95rem; line-height:1.4; }
.moon-card .mc-credit { margin:.8rem 0 0; font-family:var(--quote); font-style:italic; font-size:.78rem; color:#857A8E; }
.moon-card .mc-close { position:absolute; top:.6rem; right:.7rem; border:0; background:none; cursor:pointer;
  font-size:1.3rem; line-height:1; color:#7A6F84; padding:.3rem; }
@media (prefers-reduced-motion:reduce) { .moon-card, html[data-scene="dore"] .shore-moon { transition:none; } }
/* a day moon, but one whose engraving still reads */
html[data-scene="dore"][data-sect][data-sect] .shore-moon { opacity:calc(.78 + var(--night, 0) * .22); }
@media (max-width:680px) {
  html[data-scene="dore"] .shore-moon { width:3.8rem; }
}

/* the fresco ceiling, a fifth quieter over the home page's scene (her call,
   27 Oct): .37 → .296 by day, .34 → .272 by night, same crossfade */
html[data-scene="dore"] body::before { opacity:calc(.296 * (1 - var(--night)) * (1 - var(--night))); }
html[data-scene="dore"] body::after  { opacity:calc(.272 * var(--night) * var(--night)); }

/* the lit door keeps its own clock: its glow, wheel, rays, posts, arch,
   keystone, threshold and light curtain read --door-lit (set by the script
   from the arrival vista) in place of the whole page's progress, so the
   door is fully lit as soon as its vista is in view; and the vista is
   shorter now the door station is gone (112vh → 70vh) */
html[data-scene="dore"] .farlight, html[data-scene="dore"] .doorwheel,
html[data-scene="dore"] .door-rays, html[data-scene="dore"] .jamb,
html[data-scene="dore"] .lintel, html[data-scene="dore"] .keystone,
html[data-scene="dore"] .threshold-line, html[data-scene="dore"] .door-veil { --lit:var(--door-lit, 0); }
html[data-scene="dore"] .station.station--vista { min-height:70vh; }

/* the hour you arrived in: one quiet line under the sky's line in the hero */
#shore .planet-hour { font-size:1.02rem; margin:.85rem auto 0; max-width:32rem; }
#shore .planet-hour .ph-glyph { font-style:normal; font-size:.95em; opacity:.85; }

/* ═══ THE SOUND OF THE SEA ═══ opt-in only: a small round button, bottom
   left. Nothing plays until it is pressed. */
.sea-sound { position:fixed; left:1.1rem; bottom:1.1rem; z-index:40;
  width:2.6rem; height:2.6rem; border-radius:50%; cursor:pointer; padding:0;
  display:grid; place-items:center;
  border:1px solid color-mix(in srgb, var(--engr, #43375F) 28%, transparent);
  background:color-mix(in srgb, var(--engr-light, #FFFCEF) 82%, transparent);
  color:var(--engr, #43375F); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  box-shadow:0 8px 22px -12px rgba(30,20,10,.45); transition:transform .3s ease, background .3s ease; }
.sea-sound:hover { transform:translateY(-2px); }
.sea-sound svg { width:1.15rem; height:1.15rem; fill:none; stroke:currentColor; stroke-width:1.4; stroke-linecap:round; }
.sea-sound .ss-on { display:none; }
.sea-sound[aria-pressed="true"] .ss-on { display:block; }
.sea-sound[aria-pressed="true"] .ss-off { display:none; }
.sea-sound[aria-pressed="true"] { background:var(--engr, #43375F); color:var(--engr-light, #FFFCEF); }
.sea-sound:focus-visible { outline:2px solid var(--engr, #43375F); outline-offset:3px; }
/* the opening credit makes room for it */
html[data-scene="dore"] .scene-credit { left:4.6rem; }
@media (max-width:680px) { .sea-sound { left:.8rem; bottom:1rem; } html[data-scene="dore"] .scene-credit { left:4rem; } }