/* ═══════════════════════════════════════════════════════════════════
   THE SEVEN SISTERS, AS A STAR CHART
   The wheel kept its mechanism, drag, glide, arrows, the door at the
   top, the medallion reading the star under it. What changed is what
   it is made of. It was a glowing amethyst disc with gold sparks and
   a glass hub. It is now a chart plate: a paper disc with hairline
   rings and degree ticks in umber, the seven stars as her own star in
   lavender, the names in small umber capitals, and at the hub a
   cartouche with a double rule instead of glass. Behind the words in
   the hub sits the real Pleiades, plotted from their positions in the
   sky; the sister at the door lights up there too. Night re-inks the
   plate in plum and bone.
   ═══════════════════════════════════════════════════════════════ */
:root { --wh-ink:#6B5E48; --wh-paper:#F2EEE6; --wh-paper-2:#E9E3D7; --wh-lav:#9998D0; --wh-lav-deep:#6F6DAE; }
html[data-sect] {
  --d-wh-ink:#6B5E48; --n-wh-ink:#C9C3B4;
  --d-wh-paper:#F2EEE6; --n-wh-paper:#211C19;
  --d-wh-paper-2:#E9E3D7; --n-wh-paper-2:#191512;
  --d-wh-lav:#9998D0; --n-wh-lav:#B4B2E0;
  --d-wh-lav-deep:#6F6DAE; --n-wh-lav-deep:#C9C6EE;
}
html[data-sect] {
  --wh-ink:color-mix(in oklab, color-mix(in oklab, #000 var(--lean-dark), var(--d-wh-ink)) var(--type-pct), color-mix(in oklab, #FFF var(--lean-light), var(--n-wh-ink)));
  --wh-paper:color-mix(in oklab, var(--d-wh-paper) var(--day-pct), var(--n-wh-paper));
  --wh-paper-2:color-mix(in oklab, var(--d-wh-paper-2) var(--day-pct), var(--n-wh-paper-2));
  --wh-lav:color-mix(in oklab, var(--d-wh-lav) var(--day-pct), var(--n-wh-lav));
  --wh-lav-deep:color-mix(in oklab, color-mix(in oklab, #000 var(--lean-dark), var(--d-wh-lav-deep)) var(--type-pct), color-mix(in oklab, #FFF var(--lean-light), var(--n-wh-lav-deep)));
}

/* the plate */
.orrery::before {
  background:radial-gradient(closest-side, var(--wh-paper) 0%, var(--wh-paper-2) 64%, color-mix(in srgb, var(--wh-paper-2) 55%, transparent) 90%, transparent 100%);
  box-shadow:0 24px 60px -30px rgba(60,50,30,.35); }
html[data-sect="nocturnal"] .orrery::before {
  background:radial-gradient(closest-side, var(--wh-paper) 0%, var(--wh-paper-2) 64%, color-mix(in srgb, var(--wh-paper-2) 55%, transparent) 90%, transparent 100%);
  box-shadow:0 24px 60px -30px rgba(0,0,0,.6); }
.orrery-ring .or-line { stroke:color-mix(in srgb, var(--wh-ink) 55%, transparent); stroke-width:.28; }
.orrery-ring .or-ticks { stroke:color-mix(in srgb, var(--wh-ink) 50%, transparent); stroke-width:.3; }
.orrery-ring .or-ticks--gold { stroke:var(--wh-lav); stroke-width:.6; }
html[data-sect="nocturnal"] .orrery-ring .or-line,
html[data-sect="nocturnal"] .orrery-ring .or-ticks { stroke:color-mix(in srgb, var(--wh-ink) 55%, transparent); }
html[data-sect="nocturnal"] .orrery-ring .or-ticks--gold { stroke:var(--wh-lav); }

/* the door, in one hairline, with a lavender light */
.orrery-door svg { filter:none; }
.orrery-door path { stroke:var(--wh-ink); stroke-width:1.3; }
.orrery-door .od-light { fill:var(--wh-lav); opacity:1; }

/* each star is her star */
.ostar-spark { width:14px; height:14px; border-radius:0; background:var(--wh-lav); box-shadow:none;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-10 -10 20 20'%3E%3Cpath d='M0,-10 C1.4,-4.2 4.2,-1.4 10,0 C4.2,1.4 1.4,4.2 0,10 C-1.4,4.2 -4.2,1.4 -10,0 C-4.2,-1.4 -1.4,-4.2 0,-10 Z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-10 -10 20 20'%3E%3Cpath d='M0,-10 C1.4,-4.2 4.2,-1.4 10,0 C4.2,1.4 1.4,4.2 0,10 C-1.4,4.2 -4.2,1.4 -10,0 C-4.2,-1.4 -1.4,-4.2 0,-10 Z'/%3E%3C/svg%3E") center/contain no-repeat;
  transition:transform .5s cubic-bezier(.2,.7,.3,1), background-color .4s ease; }
.ostar-spark::before, .ostar-spark::after { display:none; }
.ostar.is-door .ostar-spark { transform:scale(1.7) rotate(45deg); background:var(--wh-lav-deep); box-shadow:none; }
.ostar:hover .ostar-spark { transform:scale(1.25); }
.ostar.is-door:hover .ostar-spark { transform:scale(1.8) rotate(45deg); }
.ostar .s-name { color:var(--wh-ink); opacity:.75; letter-spacing:.26em; }
.ostar.is-door .s-name { color:var(--wh-lav-deep); opacity:1; }
html[data-sect="nocturnal"] .ostar .s-name { color:var(--wh-ink); opacity:.8; }
html[data-sect="nocturnal"] .ostar.is-door .s-name { color:var(--wh-lav-deep); opacity:1; }
.ostar:focus-visible { outline-color:var(--wh-lav); }
/* the whisper on hover */
.ostar-chip { background:var(--wh-paper); border:1px solid color-mix(in srgb, var(--wh-ink) 45%, transparent); border-radius:8px;
  box-shadow:0 10px 24px -12px rgba(60,50,30,.35); }
.ostar-chip .s-title { color:var(--ink); }

/* the hub: a cartouche, double ruled, no glass */
.orrery-plate { background:var(--wh-paper); border:1px solid color-mix(in srgb, var(--wh-ink) 50%, transparent);
  box-shadow:inset 0 0 0 5px var(--wh-paper), inset 0 0 0 6px color-mix(in srgb, var(--wh-ink) 40%, transparent),
    0 18px 40px -24px rgba(60,50,30,.35);
  -webkit-backdrop-filter:none; backdrop-filter:none; overflow:hidden; }
html[data-sect="nocturnal"] .orrery-plate { box-shadow:inset 0 0 0 5px var(--wh-paper), inset 0 0 0 6px color-mix(in srgb, var(--wh-ink) 40%, transparent), 0 18px 40px -24px rgba(0,0,0,.6); }
.op-fade { position:relative; z-index:1; }
.op-sister { color:var(--wh-lav-deep); letter-spacing:.3em; }
.op-title { color:var(--ink); }
.op-line { color:var(--dim); }
.op-go { color:#EDE8DF; background:var(--wh-lav-deep); border:1px solid transparent; box-shadow:none; }
.op-go:hover { box-shadow:none; background:var(--wh-lav); color:#1E1D22; }
html[data-sect="nocturnal"] .op-go { color:#1E1D22; }

/* the real Pleiades behind the words, the sister at the door lit */
.op-sky { position:absolute; inset:0; z-index:0; pointer-events:none; }
.op-sky svg { width:100%; height:100%; display:block; }
.op-sky .ps { fill:var(--wh-ink); opacity:.22; transform-box:fill-box; transform-origin:center;
  transition:opacity .5s ease, fill .5s ease, transform .6s cubic-bezier(.2,.7,.3,1); }
.op-sky .ps.on { fill:var(--wh-lav); opacity:1; transform:scale(1.9); }
.op-sky .ps-line { fill:none; stroke:var(--wh-ink); stroke-width:.4; opacity:.18; stroke-dasharray:2 2; }
@media (max-width:680px) { .op-sky { display:none; } }

/* arrows and the line of instruction */
.orrery-nav { border:1px solid color-mix(in srgb, var(--wh-ink) 50%, transparent); background:var(--wh-paper); color:var(--wh-ink); }
.orrery-nav:hover { border-color:var(--wh-lav-deep); color:var(--wh-lav-deep); }
html[data-sect="nocturnal"] .orrery-nav { border-color:color-mix(in srgb, var(--wh-ink) 50%, transparent); background:var(--wh-paper); color:var(--wh-ink); }
html[data-sect="nocturnal"] .orrery-nav:hover { border-color:var(--wh-lav-deep); color:var(--wh-lav-deep); }
.orrery-hint { font-family:var(--quote); font-style:italic; font-size:.95rem; letter-spacing:0; text-transform:none; color:var(--dim); }

/* ═══ THE INSTRUMENT ═══ a fixed zodiac dial outside the turning
   rete, her four angles at the cardinal points, tonight's Sun and
   Moon set on it; an icon for every sister; the cluster as controls. */
.orrery-zodiac { position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; }
.orrery-zodiac .oz-ring { fill:none; stroke:color-mix(in srgb, var(--wh-ink) 40%, transparent); stroke-width:.22; }
.orrery-zodiac .oz-cusp { stroke:color-mix(in srgb, var(--wh-ink) 45%, transparent); stroke-width:.3; }
.orrery-zodiac .oz-glyph { font-size:3.1px; fill:var(--wh-ink); text-anchor:middle; dominant-baseline:central; opacity:.8;
  font-family:'Apple Symbols','Segoe UI Symbol','Noto Sans Symbols',serif; }
.orrery-zodiac .oz-angle { font-family:var(--caps); font-size:1.9px; letter-spacing:.3em; text-transform:uppercase;
  fill:var(--wh-ink); text-anchor:middle; dominant-baseline:central; opacity:.7; }
.orrery-zodiac .oz-body { font-size:3.4px; text-anchor:middle; dominant-baseline:central; fill:var(--wh-lav-deep);
  font-family:'Apple Symbols','Segoe UI Symbol','Noto Sans Symbols',serif; paint-order:stroke; stroke:var(--wh-paper); stroke-width:1.2px; }
.orrery-zodiac .oz-moon { fill:var(--wh-ink); }
/* icons: hairline, umber */
.wi, .op-icon { width:1.35rem; height:1.35rem; fill:none; stroke:var(--wh-ink); stroke-width:1.1; stroke-linecap:round; stroke-linejoin:round; color:var(--wh-ink); }
.op-icon { width:1.7rem; height:1.7rem; margin-bottom:.1rem; stroke:var(--wh-lav-deep); color:var(--wh-lav-deep); }
.ostar-chip { display:flex; align-items:center; gap:.5rem; }
.ostar-chip .wi { flex:none; width:1.1rem; height:1.1rem; }
.op-count { font-family:var(--quote); font-style:italic; font-size:.78rem; color:var(--dim); letter-spacing:.08em; }
/* the lit sister beats once on arrival */
@keyframes ps-beat { 0% { transform:scale(1.9); } 45% { transform:scale(2.6); } 100% { transform:scale(1.9); } }
.op-sky .ps.on.beat { animation:ps-beat .7s cubic-bezier(.2,.7,.3,1) 1; }
.op-sky .ps:hover { opacity:.7; }
@media (max-width:680px) { .orrery-zodiac .oz-angle { display:none; } }

/* ═══ ROUND TWO: AIR ═══ nothing touches anything. The paper widens
   to carry the dial, the fine tick ring and the outer rete line go,
   the arrows step clear of the angle words, the counter leaves the
   cluster, and the icon gets a small lilac badge. */
.orrery::before { inset:-16%; }
.orrery-ring .or-ticks:not(.or-ticks--gold) { display:none; }
.orrery-ring .or-line:first-child { display:none; }
.orrery-ring .or-line { stroke-width:.34; }
.orrery-ring .or-ticks--gold { stroke-width:.5; }
.orrery-zodiac .oz-ring { stroke-width:.26; opacity:.9; }
.orrery-zodiac .oz-glyph { font-size:2.9px; opacity:.72; }
.orrery-zodiac .oz-cusp { stroke-width:.26; opacity:.8; }
.orrery-zodiac .oz-angle { font-size:1.75px; letter-spacing:.34em; opacity:.6; }
.orrery-zodiac .oz-body { font-size:4.2px; stroke-width:1.6px; }
.orrery-nav--prev { left:max(0px, calc(50% - var(--wheel) / 2 - 8.6rem)); }
.orrery-nav--next { right:max(0px, calc(50% - var(--wheel) / 2 - 8.6rem)); }
.orrery-nav { width:2.3rem; height:2.3rem; }
/* the dial needs room above, but the hub and arrows are placed from the
   stage's padding edge, so the room comes from margin, never padding */
.orrery-stage { padding-top:0; margin-top:3.6rem; }
.ostar .s-name { font-size:.42rem; letter-spacing:.22em; }
.ostar-spark { width:12px; height:12px; }
/* the hub: quieter cluster, counter at the foot, icon in a badge */
.op-sky .ps { opacity:.16; }
.op-sky .ps.on { opacity:1; }
.op-sky .ps-line { opacity:.12; }
.op-count { order:9; margin-top:.55rem; font-size:.74rem; opacity:.85; }
.op-icon { width:2.3rem; height:2.3rem; padding:.45rem; border-radius:50%; background:color-mix(in srgb, var(--wh-lav) 22%, transparent); stroke-width:1.2; margin-bottom:.2rem; }
.op-sister { font-size:.5rem; }
.op-title { font-size:clamp(1.05rem, 2.6vw, 1.36rem); }
.op-go { padding:.6rem 1.05rem; }
.orrery-hint { margin-top:2.4rem; }
@media (min-width:681px) { .orrery-plate { width:calc(var(--wheel) * .58); } }
.ostar .s-name { top:calc(100% - 14px); }
@media (max-width:680px) { .ostar .s-name { top:calc(100% - 16px); } }
/* the angle words hang a tenth of the wheel below its box; the hint waits for them */
.orrery-hint { margin-top:calc(var(--wheel) * .13 + 1rem); }
@media (max-width:680px) { .orrery-hint { margin-top:1.2rem; } }

/* ═══ ROUND THREE: LIFE ═══ small, soft, true to the metaphors. */
/* the stars twinkle, each on her own clock */
@keyframes twinkle { 0%,100% { opacity:.85; transform:scale(1); } 50% { opacity:1; transform:scale(1.18) rotate(8deg); } }
.ostar:not(.is-door) .ostar-spark { animation:twinkle 4.6s ease-in-out infinite; }
.ostar:nth-child(odd) .ostar-spark { animation-duration:5.4s; animation-delay:-1.3s; }
.ostar:nth-child(3n) .ostar-spark { animation-duration:6.2s; animation-delay:-2.7s; }
.ostar:nth-child(4n) .ostar-spark { animation-delay:-3.9s; }
.ostar:hover .ostar-spark, .ostar.hint .ostar-spark { animation:none; transform:scale(1.45) rotate(45deg); background:var(--wh-lav-deep); }
.ostar:hover .s-name, .ostar.hint .s-name { opacity:1; color:var(--wh-lav-deep); transform:translateX(-50%) translateY(2px); }
.ostar .s-name { transition:opacity .4s ease, color .4s ease, transform .4s ease; }
/* the door's light breathes; on arrival it flares and a star drifts up */
@keyframes breathe { 0%,100% { opacity:.75; } 50% { opacity:1; } }
.orrery-door .od-light { animation:breathe 3.4s ease-in-out infinite; transform-box:fill-box; transform-origin:center; transition:transform .5s ease; }
.orrery-door.flare .od-light { animation:none; transform:scale(1.5); opacity:1; }
.orrery-door { overflow:visible; }
@keyframes sparkle-up { 0% { opacity:0; transform:translate(-50%, 0) scale(.4) rotate(0deg); } 25% { opacity:1; } 100% { opacity:0; transform:translate(-50%, -2.6rem) scale(1) rotate(60deg); } }
.door-sparkle { position:absolute; left:50%; top:.1rem; width:.7rem; height:.7rem; background:var(--wh-lav);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-10 -10 20 20'%3E%3Cpath d='M0,-10 C1.4,-4.2 4.2,-1.4 10,0 C4.2,1.4 1.4,4.2 0,10 C-1.4,4.2 -4.2,1.4 -10,0 C-4.2,-1.4 -1.4,-4.2 0,-10 Z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-10 -10 20 20'%3E%3Cpath d='M0,-10 C1.4,-4.2 4.2,-1.4 10,0 C4.2,1.4 1.4,4.2 0,10 C-1.4,4.2 -4.2,1.4 -10,0 C-4.2,-1.4 -1.4,-4.2 0,-10 Z'/%3E%3C/svg%3E") center/contain no-repeat;
  animation:sparkle-up 1.1s cubic-bezier(.2,.7,.3,1) forwards; pointer-events:none; }
/* the sky sets itself: the bodies glide from the Aries point */
.orrery-zodiac .oz-orbit { transform-origin:50px 50px; transition:transform 1.8s cubic-bezier(.2,.8,.2,1); }
.orrery-zodiac .oz-body { transition:transform 1.8s cubic-bezier(.2,.8,.2,1); }
/* the thread between rim and cluster */
.orrery-thread { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:4; opacity:0; transition:opacity .25s ease; }
.orrery-thread.on { opacity:1; }
.orrery-thread line { stroke:var(--wh-lav-deep); stroke-width:1; stroke-linecap:round; stroke-dasharray:3 3; transition:stroke-dashoffset .55s cubic-bezier(.2,.7,.3,1); }
.op-sky .ps.hint { opacity:.9; fill:var(--wh-lav-deep); transform:scale(1.6); }
/* the cluster whispers */
.op-whisper { position:absolute; left:50%; top:9%; transform:translateX(-50%) translateY(3px); white-space:nowrap; max-width:90%;
  overflow:hidden; text-overflow:ellipsis; font-family:var(--quote); font-style:italic; font-size:.78rem; color:var(--wh-lav-deep);
  opacity:0; transition:opacity .25s ease, transform .25s ease; pointer-events:none; z-index:2; }
.op-whisper.on { opacity:1; transform:translateX(-50%) translateY(0); }
/* the swap is inkier; the icon pops */
.op-fade { transition:opacity .34s ease, transform .34s ease, filter .34s ease; }
.orrery-plate.is-swapping .op-fade { opacity:0; transform:translateY(6px); filter:blur(2px); }
@keyframes pop { 0% { transform:scale(.7); } 60% { transform:scale(1.12); } 100% { transform:scale(1); } }
.op-icon.pop { animation:pop .5s cubic-bezier(.2,.7,.3,1) 1; }
/* arrows nudge their way */
.orrery-nav { transition:border-color .25s ease, color .25s ease, transform .25s ease; }
.orrery-nav--prev:hover { transform:translateY(-50%) translateX(-3px); }
.orrery-nav--next:hover { transform:translateY(-50%) translateX(3px); }
.orrery-nav:active { transform:translateY(-50%) scale(.94); }
@media (prefers-reduced-motion:reduce) {
  .ostar .ostar-spark, .orrery-door .od-light, .op-icon.pop, .door-sparkle { animation:none; }
  .orrery-zodiac .oz-orbit, .orrery-zodiac .oz-body, .orrery-thread line { transition:none; }
}

/* a star you are hovering rises above the hub so its chip is never cut */
.ostar:hover, .ostar:focus-visible, .ostar.hint { z-index:7; }
.ostar-chip { z-index:8; }

/* the lit sister in the cluster sits behind the words; she stays soft there */
.op-sky .ps.on { opacity:.55; transform:scale(1.6); }
.op-sky .ps.on.beat { animation-name:ps-beat-soft; }
@keyframes ps-beat-soft { 0% { transform:scale(1.6); } 45% { transform:scale(2.2); } 100% { transform:scale(1.6); } }
/* on a phone the names must be readable and the hub a real card again */
@media (max-width:680px) {
  .ostar .s-name { font-size:.5rem; letter-spacing:.16em; }
  .orrery-zodiac .oz-glyph { font-size:3.4px; }
}

/* ═══ ROUND FOUR: FIRST USE ═══ */
/* 6. the open button is the point of the wheel; the sister's name is already on the rim */
.op-sister { display:none; }
.op-go { font-size:.62rem; letter-spacing:.22em; padding:.85rem 1.35rem; margin-top:.5rem; }
.op-icon { margin-bottom:.35rem; }
/* 7. the star under the door wears a soft wash so "open" is visible, not implied */
.ostar.is-door .s-name { background:color-mix(in srgb, var(--wh-lav) 26%, transparent); padding:.18rem .5rem; border-radius:999px; }
/* 8. the phone nudge: curved arrow, two words, gone after the first touch */
.spin-nudge { display:none; }
@media (max-width:680px) {
  .spin-nudge { display:flex; align-items:center; gap:.45rem; margin:.4rem auto 0; color:var(--wh-lav-deep);
    font-family:var(--quote); font-style:italic; font-size:.95rem; transition:opacity .5s ease, transform .5s ease; }
  .spin-nudge svg { width:2.2rem; height:1.25rem; fill:none; stroke:currentColor; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round;
    animation:nudge-wiggle 2.6s ease-in-out infinite; transform-origin:center; }
  .orrery-stage.touched .spin-nudge { opacity:0; transform:translateY(4px); pointer-events:none; }
  .orrery-hint { display:none; }
}
@keyframes nudge-wiggle { 0%,100% { transform:rotate(-6deg); } 50% { transform:rotate(8deg); } }
/* 9. the counter in handwriting */
.op-count { font-size:.8rem; letter-spacing:.02em; }
/* 10. below 480px only the open star keeps her name */
@media (max-width:480px) {
  .ostar:not(.is-door) .s-name { display:none; }
  .ostar.is-door .s-name { font-size:.56rem; }
}
@media (prefers-reduced-motion:reduce) { .spin-nudge svg { animation:none; } }