/* Live orrery hero (#orrery). Owner: orrery agent.
   Layers: poster (CSS, first paint) → WebGL stage → shade → planet labels → copy / console / meta.
   Framing: JS reads the .orrery-window box and --orrery-sun-x / --orrery-sun-y / --orrery-fit to place the Sun,
   and writes --sx / --sy / --rn back so the poster lines up with the live scene. */
.orrery-hero{
  --orrery-sun-x:.62;--orrery-sun-y:.5;--orrery-fit:3;--orrery-el-min:40;
  --sx:62%;--sy:50%;--rn:min(35vw,560px);--tilt:.66;--pdy:.1;
  --o-ink:#ecf1f0;--o-soft:#adb8c4;--o-meta:#939fab;--o-glass:#070b1352;--o-glass-line:#c5edff33;
  position:relative;isolation:isolate;overflow:hidden;min-height:max(720px,calc(100svh - 86px));
  display:grid;grid-template-columns:minmax(0,min(600px,46%)) minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto auto;column-gap:40px;
  padding-inline:max(var(--layout-gutter,clamp(20px,4vw,64px)),calc((100% - 1600px)/2));
  background:#03060c;color:var(--o-ink);font-family:var(--body,"Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif)}
.orrery-hero *{box-sizing:border-box}

/* ── poster: paints instantly, stays as the WebGL fallback ── */
.orrery-poster{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;
  background:radial-gradient(ellipse 60% 45% at var(--sx) var(--sy),#1a1510 0%,#0b0c10 38%,transparent 70%),
    radial-gradient(ellipse 90% 60% at 80% 10%,#0c1424 0%,transparent 60%),#03060c;transition:opacity 1.6s var(--ease,ease)}
.orrery-poster-stars{position:absolute;inset:-2px;
  background-image:radial-gradient(1px 1px at 12% 18%,#e6eefacc,transparent),radial-gradient(1px 1px at 27% 71%,#ffe9c8aa,transparent),radial-gradient(1.4px 1.4px at 44% 36%,#fff,transparent),radial-gradient(1px 1px at 58% 84%,#cfe3ffaa,transparent),radial-gradient(1px 1px at 69% 13%,#fff4dcbb,transparent),radial-gradient(1.2px 1.2px at 83% 58%,#dbe8ffdd,transparent),radial-gradient(1px 1px at 92% 29%,#ffd9b0aa,transparent),radial-gradient(1px 1px at 6% 52%,#cfe0ff99,transparent),radial-gradient(1px 1px at 36% 8%,#ffffffaa,transparent),radial-gradient(1px 1px at 77% 92%,#ffe7c499,transparent);
  background-size:397px 331px,541px 463px,719px 587px,463px 397px,613px 509px,829px 677px,353px 419px,487px 569px,659px 433px,577px 641px;opacity:.8}
.orrery-poster-orbit{position:absolute;left:var(--sx);top:var(--sy);width:calc(var(--rn) * 2 * var(--o));height:calc(var(--rn) * 2 * var(--o) * var(--tilt));
  transform:translate(-50%,calc(-50% + var(--rn) * var(--o) * var(--pdy)));border:1px solid #b9d3e62b;border-radius:50%}
.orrery-poster-sun{position:absolute;left:var(--sx);top:var(--sy);width:calc(var(--rn) * .9);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(circle,#fff 0 2.6%,#fff6e2 3.6%,#ffd48f 5.2%,#ffb65c55 9%,#f0913022 20%,#e0802008 38%,transparent 60%)}
.orrery-hero[data-state=live] .orrery-poster{opacity:0}

/* ── WebGL stage ── */
.orrery-stage{position:absolute;inset:0;z-index:1;touch-action:pan-y;cursor:grab;-webkit-user-select:none;user-select:none}
.orrery-stage.is-dragging{cursor:grabbing}
.orrery-stage canvas{display:block;width:100%;height:100%;opacity:0;transition:opacity 1.6s var(--ease,ease)}
.orrery-hero[data-state=live] .orrery-stage canvas{opacity:1}
.orrery-shade{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(90deg,#03060cf2 0%,#03060cc4 22%,#03060c55 42%,#03060c00 60%),
    linear-gradient(0deg,#070b13 0%,#070b1300 20%,#070b1300 84%,#03060caa 100%),
    radial-gradient(ellipse 78% 92% at var(--sx) var(--sy),#03060c00 58%,#03060c66 86%,#03060caa 100%)}
.orrery-window{grid-column:1 / -1;grid-row:2 / 4;pointer-events:none;min-height:0}

/* ── planet labels (positioned every frame by solar-orrery.js) ── */
.orrery-labels{position:absolute;inset:0;z-index:3;pointer-events:none;visibility:hidden}
.orrery-hero[data-state=live] .orrery-labels{visibility:visible}
.orrery-label{position:absolute;left:0;top:0;width:44px;height:44px;margin:-22px 0 0 -22px;padding:0;border:0;background:none;color:inherit;font:inherit;cursor:pointer;pointer-events:auto;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;will-change:transform}
.orrery-label[data-hidden]{visibility:hidden;pointer-events:none}
.orrery-label-ring{position:absolute;left:50%;top:50%;width:calc(var(--r,4px) * 2 + 14px);height:calc(var(--r,4px) * 2 + 14px);transform:translate(-50%,-50%) scale(.72);
  border:1px solid color-mix(in srgb,var(--c,#8ed8ff) 60%,#ffffff);border-radius:50%;opacity:0;transition:opacity .3s,transform .45s var(--ease,ease);box-shadow:0 0 18px color-mix(in srgb,var(--c,#8ed8ff) 40%,transparent)}
.orrery-label-text{position:absolute;top:50%;display:flex;align-items:baseline;gap:7px;white-space:nowrap;padding:3px 0;line-height:1;
  text-shadow:0 0 4px #03060c,0 0 12px #03060c,0 1px 10px #02040b;transition:opacity .25s .16s,color .25s}
.orrery-label-text::before{content:"";position:absolute;top:50%;width:10px;height:1px;background:color-mix(in srgb,var(--c,#fff) 55%,#ffffff55);opacity:.7}
.orrery-label[data-side=right] .orrery-label-text{left:calc(22px + var(--r,4px) + 16px);transform:translateY(-50%)}
.orrery-label[data-side=right] .orrery-label-text::before{right:calc(100% + 4px)}
.orrery-label[data-side=left] .orrery-label-text{right:calc(22px + var(--r,4px) + 16px);transform:translateY(-50%);flex-direction:row-reverse}
.orrery-label[data-side=left] .orrery-label-text::before{left:calc(100% + 4px)}
.orrery-label[data-side=below] .orrery-label-text{left:50%;top:calc(22px + var(--r,4px) + 10px);transform:translateX(-50%)}
.orrery-label[data-side=above] .orrery-label-text{left:50%;top:auto;bottom:calc(22px + var(--r,4px) + 10px);transform:translateX(-50%)}
.orrery-label[data-key=sun][data-side=above] .orrery-label-text{bottom:calc(22px + var(--r,4px) + 14px)}
.orrery-label[data-key=sun][data-side=right] .orrery-label-text{left:calc(22px + var(--r,4px) + 14px)}
.orrery-label[data-key=sun][data-side=left] .orrery-label-text{right:calc(22px + var(--r,4px) + 14px)}
.orrery-label[data-side=below] .orrery-label-text::before,.orrery-label[data-side=above] .orrery-label-text::before,.orrery-label[data-side^=c] .orrery-label-text::before{display:none}
/* callouts: text offset from the planet, joined by a hairline leader */
.orrery-label[data-side^=c] .orrery-label-text{left:calc(22px + var(--dx,40px));top:calc(22px + var(--dy,-24px));transform:translateY(-50%)}
.orrery-label[data-side^=c][data-flip] .orrery-label-text{left:auto;right:calc(22px - var(--dx,-40px));flex-direction:row-reverse}
.orrery-label-leader{position:absolute;left:22px;top:22px;width:var(--ll,0);height:1px;transform-origin:0 50%;transform:rotate(var(--la,0rad)) translateX(var(--l0,6px));
  background:linear-gradient(90deg,color-mix(in srgb,var(--c,#fff) 70%,#fff),#ffffff66);opacity:0;pointer-events:none;transition:opacity .25s .16s}
.orrery-label[data-side^=c] .orrery-label-leader{opacity:.5}
.orrery-label-text b{font:600 12px/1 var(--body,sans-serif);letter-spacing:.06em;color:#e8eef0}
.orrery-label-text small{font:400 9px/1 var(--mono,monospace);letter-spacing:.14em;color:#a3b1bf}
.orrery-label-text .orrery-here{position:absolute;left:0;bottom:calc(100% + 1px);font:400 9px/1 var(--mono,monospace);letter-spacing:.14em;color:var(--lime,#d9f56c);text-shadow:0 0 6px #03060c,0 0 12px #03060c}
.orrery-label[data-side=left] .orrery-here,.orrery-label[data-flip] .orrery-here{left:auto;right:0}
.orrery-label[data-side=above] .orrery-here,.orrery-label[data-side=below] .orrery-here{left:50%;transform:translateX(-50%)}
.orrery-label[data-muted] .orrery-label-text,.orrery-label[data-swapping] .orrery-label-text,
.orrery-label[data-muted] .orrery-label-leader,.orrery-label[data-swapping] .orrery-label-leader{opacity:0}
/* fade out at once, fade in a beat later: a label arriving in a spot never cross-fades with the one leaving it */
.orrery-label[data-muted] .orrery-label-text,.orrery-label[data-muted] .orrery-label-leader{transition:opacity .2s,color .25s}
.orrery-label[data-swapping] .orrery-label-text,.orrery-label[data-swapping] .orrery-label-leader{transition:opacity .15s,color .25s}
.orrery-label[data-key=sun] .orrery-label-text b{color:#f8dfae}
.orrery-label[data-key=earth] .orrery-label-text b{color:#f4f8f6}
.orrery-label:hover .orrery-label-ring,.orrery-label:focus-visible .orrery-label-ring,.orrery-label[data-active] .orrery-label-ring{opacity:1;transform:translate(-50%,-50%) scale(1)}
.orrery-label:hover .orrery-label-text,.orrery-label:focus-visible .orrery-label-text,.orrery-label[data-active] .orrery-label-text{opacity:1;transition-delay:0s}
.orrery-label:hover .orrery-label-text b,.orrery-label:focus-visible .orrery-label-text b{color:#fff}
.orrery-label:hover .orrery-label-text small,.orrery-label:focus-visible .orrery-label-text small{color:var(--blue,#8ed8ff)}
.orrery-label:hover .orrery-label-text .orrery-here,.orrery-label:focus-visible .orrery-label-text .orrery-here{color:var(--lime,#d9f56c)}
.orrery-label:focus-visible{outline:none}
/* intro ping (once, motion on): marks today's real position of every body as the live scene fades in */
.orrery-hero[data-intro] .orrery-label-ring{animation:orrery-ping 1.9s calc(.9s + var(--i,0) * 110ms) cubic-bezier(.2,.7,.2,1) both}
@keyframes orrery-ping{0%{opacity:0;transform:translate(-50%,-50%) scale(.45)}22%{opacity:.85}100%{opacity:0;transform:translate(-50%,-50%) scale(2.1)}}
.orrery-label:focus-visible .orrery-label-ring{border:2px solid var(--lime,#d9f56c);box-shadow:0 0 0 4px #d9f56c26}

.orrery-gc{position:absolute;left:0;top:0;z-index:3;display:flex;align-items:center;gap:10px;color:#d3dce5;text-decoration:none;will-change:transform;opacity:.9;transition:opacity .4s}
.orrery-hero:not([data-state=live]) .orrery-gc,.orrery-gc[data-hidden]{visibility:hidden;opacity:0;pointer-events:none}
.orrery-gc i{position:relative;width:15px;height:15px;margin:-7.5px 0 0 -7.5px;align-self:flex-start;border:1px solid #d6c8ff99;border-radius:50%;flex:none}
.orrery-gc i::before,.orrery-gc i::after{content:"";position:absolute;background:#d6c8ffaa}
.orrery-gc i::before{left:50%;top:-6px;bottom:-6px;width:1px}.orrery-gc i::after{top:50%;left:-6px;right:-6px;height:1px}
.orrery-gc span{display:flex;flex-direction:column;gap:4px;margin-top:-9px;font-size:10px;letter-spacing:.06em;line-height:1.3;white-space:nowrap;text-shadow:0 0 4px #03060c,0 1px 10px #02040b}
.orrery-gc::before{content:"";position:absolute;inset:-14px -6px}   /* ≥44px tall hit area around the two-line marker */
.orrery-gc em{font-style:normal}
.orrery-gc small{font:400 9px/1 var(--mono,monospace);letter-spacing:.14em;color:#a9b6c6}
.orrery-gc b{font-weight:700;color:var(--violet,#bca5ff);margin-left:6px;font-size:10px}
.orrery-gc[data-edge] i,.orrery-gc[data-behind] i{border-style:dashed;opacity:.6;transform:scale(.8)}
.orrery-gc:hover,.orrery-gc:focus-visible{opacity:1;color:#fff}
.orrery-gc:focus-visible{outline:2px solid var(--lime,#d9f56c);outline-offset:4px}
.orrery-tip{position:absolute;left:0;top:0;z-index:6;pointer-events:none;min-width:168px;padding:10px 13px 11px;border:1px solid #c5edff40;border-radius:3px;background:#050a14d9;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);font:400 9.5px/1.75 var(--mono,monospace);letter-spacing:.1em;color:#b9c8d4;box-shadow:0 10px 40px #0009;will-change:transform}
.orrery-tip strong{display:block;font:600 13px/1.3 var(--body,sans-serif);letter-spacing:.04em;color:#fff;margin-bottom:5px}
.orrery-tip strong small{font:400 9px var(--mono,monospace);letter-spacing:.14em;color:var(--blue,#8ed8ff);margin-left:8px}
.orrery-tip em{font-style:normal;color:#ecf1f0}
.orrery-tip span{display:block;margin-top:6px;padding-top:6px;border-top:1px solid #ffffff17;font-size:9px;color:#93a1b0}
.orrery-tip[hidden]{display:none}

/* ── copy ── */
.orrery-top-meta,.orrery-bottom-meta{grid-column:1 / -1;position:relative;z-index:4;display:flex;align-items:center;justify-content:space-between;gap:24px;
  font:400 9px/1.6 var(--mono,monospace);letter-spacing:.12em;color:var(--o-meta);text-transform:uppercase}
.orrery-top-meta{grid-row:1;padding-top:26px}
.orrery-bottom-meta{grid-row:4;padding:20px 0 22px;border-top:1px solid var(--line,#ffffff24);margin-top:18px}
.orrery-bottom-meta a{color:var(--o-ink);display:inline-flex;gap:12px;align-items:center;text-decoration:none;padding-block:11px;margin-block:-11px}
.orrery-bottom-meta a span{color:var(--lime,#d9f56c);font-size:14px;animation:orrery-nudge 2s ease-in-out infinite}
.orrery-dot{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--lime,#d9f56c);box-shadow:0 0 9px #d9f56c70;margin-right:10px;vertical-align:1px;animation:orrery-pulse 2.8s ease-in-out infinite}
.orrery-copy{grid-column:1;grid-row:2;align-self:center;position:relative;z-index:4;padding-block:34px 28px;pointer-events:none;max-width:600px}
.orrery-copy>*{pointer-events:auto}
.orrery-kicker{display:inline-flex;align-items:center;gap:14px;font:400 10px/1 var(--mono,monospace);letter-spacing:.18em;color:#b1cadd;animation:orrery-enter .9s .15s var(--ease,ease) both}
.orrery-kicker b{font-weight:400;color:var(--lime,#d9f56c);font-size:11px}
.orrery-kicker::after{content:"";width:46px;height:1px;background:linear-gradient(90deg,#b1cadd88,transparent)}
.orrery-display{margin:26px 0 0;font:700 clamp(62px,6.4vw,112px)/.9 var(--display,"Chakra Petch",sans-serif);letter-spacing:-.052em;color:var(--o-ink);text-transform:uppercase}
.orrery-display>span{display:block;animation:orrery-headline 1.2s var(--ease,ease) both}
.orrery-display>span+span{animation-delay:.1s}
.orrery-display i{font-style:normal;color:var(--lime,#d9f56c)}
.orrery-copy h1{margin:30px 0 0;font:700 clamp(22px,2.15vw,36px)/1.55 var(--body,sans-serif);letter-spacing:-.02em;color:#f2f5f4;text-shadow:0 3px 40px #02040bee;animation:orrery-enter .9s .3s var(--ease,ease) both}
.orrery-lede{margin:18px 0 0;font-size:clamp(13px,1vw,15px);line-height:2.15;color:var(--o-soft);text-shadow:0 2px 12px #02040b;animation:orrery-enter .9s .4s var(--ease,ease) both}
.orrery-actions{display:flex;align-items:center;flex-wrap:wrap;gap:14px 26px;margin-top:32px;animation:orrery-enter .9s .5s var(--ease,ease) both}
.orrery-cta{text-decoration:none}
.orrery-cta>span{transition:transform .3s var(--ease,ease)}
.orrery-cta:hover>span{transform:translateY(3px)}
.orrery-cta:focus-visible{outline:2px solid var(--lime,#d9f56c);outline-offset:6px}
.orrery-hint{font:400 9px/1.8 var(--mono,monospace);letter-spacing:.08em;color:#8a97a6;white-space:nowrap}

/* ── time console ── */
.orrery-console{grid-column:2;grid-row:3;justify-self:end;align-self:end;position:relative;z-index:4;display:flex;align-items:center;gap:18px;
  padding:7px 7px 7px 20px;border:1px solid var(--o-glass-line);border-radius:40px;background:var(--o-glass);backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);
  box-shadow:0 12px 50px #0007,inset 0 1px 0 #ffffff0d}
.orrery-readout{display:grid;grid-template-columns:auto auto;grid-template-rows:auto auto;column-gap:10px;align-items:baseline;min-width:158px}
.orrery-readout>span{grid-column:1 / -1;font:400 9px/1 var(--mono,monospace);letter-spacing:.14em;color:#8e9baa;margin-bottom:5px;white-space:nowrap}
.orrery-hero[data-still] .orrery-readout>span,.orrery-hero[data-sim=paused] .orrery-readout>span{color:#f5cb79}
/* state dot: lime = today's real sky / simulating (pulses while the clock runs), gold = paused or stepped by hand */
.orrery-readout>span::before{content:"";display:inline-block;width:5px;height:5px;margin-right:8px;border-radius:50%;vertical-align:1px;background:var(--lime,#d9f56c);box-shadow:0 0 9px #d9f56c70}
.orrery-hero[data-sim=running] .orrery-readout>span::before{animation:orrery-pulse 1.4s ease-in-out infinite}
.orrery-hero[data-still] .orrery-readout>span::before,.orrery-hero[data-sim=paused] .orrery-readout>span::before{background:#f5cb79;box-shadow:none}
.orrery-readout output{font:600 19px/1 var(--display,"Chakra Petch",sans-serif);font-variant-numeric:tabular-nums;letter-spacing:.045em;color:#fff}
.orrery-readout b{font:400 9px/1 var(--mono,monospace);letter-spacing:.12em;color:var(--lime,#d9f56c);white-space:nowrap}
.orrery-readout b[data-away]{color:#f5cb79}
.orrery-controls{display:flex;align-items:center;gap:10px}
.orrery-transport{display:flex;gap:4px}
.orrery-console button{font:inherit;color:#e6f3fa;background:#ffffff08;border:1px solid #ffffff1f;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:background .25s,border-color .25s,color .25s,transform .25s var(--ease,ease)}
.orrery-console button:hover{background:#8ed8ff1f;border-color:#bfeaff80}
.orrery-console button:focus-visible{outline:2px solid var(--lime,#d9f56c);outline-offset:3px}
.orrery-console button:disabled{opacity:.35;cursor:not-allowed}
.orrery-transport button{width:40px;height:40px;border-radius:50%;font-size:17px;line-height:1;display:grid;place-items:center;padding:0}
.orrery-transport button[data-orrery=play]{width:46px;height:46px;font-size:13px;background:#ecf1f0;color:#08101a;border-color:#ecf1f0}
.orrery-transport button[data-orrery=play]:hover{background:#fff;box-shadow:0 0 24px #8ed8ff40}
.orrery-speed{display:flex;align-items:center;gap:2px;padding:3px;border:1px solid #ffffff17;border-radius:30px;background:#00000026}
.orrery-speed>span{font:400 9px var(--mono,monospace);letter-spacing:.06em;color:#8e9baa;padding:0 6px 0 9px;white-space:nowrap}
.orrery-speed button{border-color:transparent;background:none;border-radius:30px;min-height:34px;padding:0 12px;font-size:11px;color:#aab8c4;white-space:nowrap}
.orrery-speed button[aria-pressed=true]{background:#8ed8ff26;border-color:#8ed8ff66;color:#fff}
.orrery-today{min-height:40px;border-radius:30px;padding:0 16px;font-size:11px;display:inline-flex;align-items:center;gap:9px;white-space:nowrap}
.orrery-today span{color:var(--lime,#d9f56c);font-size:14px}
.orrery-note{grid-column:1;grid-row:3;align-self:end;position:relative;z-index:4;margin:0;max-width:540px;font-size:10.5px;line-height:1.85;color:#8f9dab;text-shadow:0 1px 8px #02040b;text-wrap:pretty}
.orrery-note span{display:block;color:#8a97a6}
.orrery-note b{font-weight:400}
.orrery-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;margin:-1px}

/* ── WebGL unavailable: poster + a plain list of planet buttons ── */
.orrery-hero[data-state=fallback] .orrery-labels{visibility:visible;position:relative;inset:auto;grid-column:2;grid-row:3;align-self:end;justify-self:end;max-width:760px;display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end;pointer-events:auto}
.orrery-hero[data-state=fallback] .orrery-label{position:relative;width:auto;height:auto;min-height:44px;margin:0;padding:0 16px;border:1px solid #ffffff26;border-radius:30px;background:#070b1366;transform:none!important}
.orrery-hero[data-state=fallback] .orrery-label-text{position:static;transform:none;opacity:1!important}
.orrery-hero[data-state=fallback] .orrery-label-text::before,.orrery-hero[data-state=fallback] .orrery-label-ring,.orrery-hero[data-state=fallback] .orrery-label-leader,.orrery-hero[data-state=fallback] .orrery-here{display:none}
.orrery-hero[data-state=fallback] .orrery-console{display:none}

@keyframes orrery-headline{from{opacity:0;transform:translateY(40px);filter:blur(5px)}to{opacity:1;transform:none;filter:blur(0)}}
@keyframes orrery-enter{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes orrery-nudge{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}
@keyframes orrery-pulse{0%,100%{opacity:1}50%{opacity:.45}}

@media(min-width:1900px){
  .orrery-hero{grid-template-columns:minmax(0,min(720px,44%)) minmax(0,1fr)}
  .orrery-top-meta,.orrery-bottom-meta{font-size:10px}
  .orrery-copy{max-width:720px}
  .orrery-copy h1{font-size:40px}
  .orrery-lede{font-size:16px}
  .orrery-label-text b{font-size:14px}.orrery-label-text small{font-size:9.5px}
  .orrery-note{font-size:11.5px;max-width:640px}
}
@media(min-width:2400px){
  /* The rail stays 1600px like the header; only the full-bleed scene grows. */
  .orrery-display{font-size:124px}
  .orrery-copy h1{font-size:44px}.orrery-lede{font-size:17px}.orrery-kicker{font-size:11px}
  .orrery-top-meta,.orrery-bottom-meta{font-size:10.5px}
  .orrery-label-text b{font-size:15px}.orrery-label-text small,.orrery-label-text .orrery-here{font-size:10px}
  .orrery-gc span{font-size:12px}.orrery-gc small{font-size:9.5px}
  .orrery-note{font-size:12.5px;max-width:700px}
}
/* Narrow desktops / landscape tablets: the ~740px console no longer fits beside the note — give the note its own row. */
@media(min-width:901px) and (max-width:1400px) and (min-aspect-ratio:1/1){
  .orrery-hero{grid-template-rows:auto minmax(0,1fr) auto auto auto}
  .orrery-console{grid-column:1 / -1}
  .orrery-note{grid-column:1 / -1;grid-row:4;margin-top:14px;max-width:none}
  .orrery-bottom-meta{grid-row:5}
}
.orrery-hero[data-compact]{grid-template-rows:auto minmax(0,1fr) auto auto auto}
.orrery-hero[data-compact] .orrery-console{grid-column:1 / -1}
.orrery-hero[data-compact] .orrery-note{grid-column:1 / -1;grid-row:4;margin-top:14px;max-width:none}
.orrery-hero[data-compact] .orrery-bottom-meta{grid-row:5}
/* Small laptops / landscape tablets: keep copy and system side by side */
@media(min-width:901px) and (max-width:1100px) and (min-aspect-ratio:1/1){
  .orrery-hero{grid-template-columns:minmax(0,min(420px,42%)) minmax(0,1fr);column-gap:28px}
  .orrery-display{font-size:clamp(50px,6vw,68px)}
  .orrery-copy h1{font-size:22px;margin-top:22px}
  .orrery-lede{font-size:13px;line-height:2}
  .orrery-actions{margin-top:24px}
}
/* Phones / portrait: copy on top, system in its own window below */
@media(max-width:900px),(max-aspect-ratio:1/1){
  .orrery-hero{--orrery-sun-x:.5;--orrery-sun-y:.5;--orrery-fit:4;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto minmax(clamp(300px,62vw,560px),1fr) auto auto auto;min-height:calc(100svh - 73px)}
  .orrery-copy{grid-column:1;grid-row:2;align-self:start;padding-block:30px 0;max-width:680px}
  .orrery-window{grid-row:3}
  .orrery-console{grid-column:1;grid-row:4;justify-self:center;margin-top:6px}
  .orrery-note{grid-column:1;grid-row:5;margin-top:16px;max-width:none;text-align:center}
  .orrery-bottom-meta{grid-row:6}
  .orrery-shade{background:linear-gradient(180deg,#03060cf0 0%,#03060cb0 26%,#03060c00 44%,#03060c00 72%,#070b13d9 86%,#070b13 100%)}
  .orrery-hero[data-state=fallback] .orrery-labels{grid-column:1;grid-row:4;justify-self:center;justify-content:center}
  .orrery-hero[data-compact]{grid-template-rows:auto auto minmax(clamp(300px,62vw,560px),1fr) auto auto auto}
  .orrery-hero[data-compact] .orrery-note{grid-row:5}
  .orrery-hero[data-compact] .orrery-bottom-meta{grid-row:6}
}
@media(max-width:800px){
  .orrery-hero{min-height:calc(100svh - 73px);grid-template-rows:auto auto minmax(clamp(260px,72vw,420px),1fr) auto auto auto}
  .orrery-window{margin-top:-48px}
  .orrery-top-meta{padding-top:18px;font-size:8px}
  .orrery-top-meta>span:last-child{display:none}
  .orrery-bottom-meta{font-size:8px;gap:14px}
  .orrery-bottom-meta>span:last-child,.orrery-lt{display:none}
  .orrery-copy{padding-top:24px}
  .orrery-kicker{font-size:9px;gap:10px}
  .orrery-display{margin-top:18px;font-size:clamp(46px,13vw,78px);line-height:.92}
  .orrery-copy h1{margin-top:18px;font-size:clamp(20px,5.6vw,28px);line-height:1.5}
  .orrery-lede{margin-top:10px;font-size:13px;line-height:2}
  .orrery-actions{margin-top:20px;gap:10px 18px}
  .orrery-hint{display:none}
  .orrery-console{flex-direction:column;align-items:stretch;gap:10px;padding:12px;border-radius:22px;width:100%;max-width:520px}
  .orrery-readout{grid-template-columns:auto 1fr auto;padding:0 6px;min-width:0}
  .orrery-readout>span{grid-column:auto;grid-row:1;margin:0;align-self:center;font-size:8px;letter-spacing:.12em}
  .orrery-readout output{grid-row:1;justify-self:center;font-size:18px}
  .orrery-readout b{grid-row:1;justify-self:end;font-size:8px}
  .orrery-controls{flex-wrap:wrap;justify-content:space-between;gap:8px}
  .orrery-transport{order:1}
  .orrery-today{order:2}
  .orrery-speed{order:3;flex:1 1 100%;justify-content:space-between}
  .orrery-speed>span{padding:0 2px 0 6px;font-size:8px}
  .orrery-speed button{padding:0 9px;min-width:44px;min-height:44px;font-size:11px}
  .orrery-transport button{width:44px;height:44px}
  .orrery-transport button[data-orrery=play]{width:48px;height:48px}
  .orrery-today{min-height:44px;flex:1 1 auto;justify-content:center}
  .orrery-note{font-size:10px;text-align:left}
  .orrery-note-br{display:none}   /* wide screens: the honesty label on its own line; phones: one flowing paragraph */
  .orrery-label-text b{font-size:11px}.orrery-label-text small,.orrery-label-text .orrery-here{font-size:8px;letter-spacing:.12em}
  .orrery-gc small{font-size:8px}.orrery-gc span{font-size:9.5px}
  .orrery-tip{font-size:9px}.orrery-tip span,.orrery-tip strong small{font-size:8px}
}
@media(max-width:420px){
  .orrery-speed button{padding:0 7px;font-size:10.5px}
  /* the mode label may shrink (ellipsis) before the date or the offset ever overflow */
  .orrery-readout{grid-template-columns:minmax(0,max-content) minmax(max-content,1fr) max-content;column-gap:8px;padding:0 2px}
  .orrery-readout>span{font-size:8px;letter-spacing:.07em;min-width:0;overflow:hidden;text-overflow:ellipsis}
  .orrery-readout>span::before{margin-right:6px}
  .orrery-readout output{font-size:17px;letter-spacing:.03em}
  .orrery-readout b{letter-spacing:.08em}
}
/* Short landscape phones (844×390, 932×430 …): copy and system side by side as on the desktop, sized to the screen.
   The system window fills the first screen under the top meta; the time console docks under it, the note beside it. */
@media (orientation:landscape) and (max-height:540px){
  .orrery-hero,.orrery-hero[data-compact]{--orrery-sun-x:.62;--orrery-sun-y:.5;--orrery-fit:3;--orrery-el-min:34;   /* a very short frame: a little lower, so the system isn't tiny */
    grid-template-columns:minmax(0,42%) minmax(0,1fr);column-gap:24px;
    grid-template-rows:auto minmax(max(210px,calc(100svh - var(--header-h,56px) - 58px)),1fr) auto auto;
    min-height:calc(100svh - var(--header-h,56px))}
  .orrery-top-meta{padding-top:12px}
  .orrery-window{grid-column:1 / -1;grid-row:2;margin-top:0}
  .orrery-copy{grid-column:1;grid-row:2;align-self:center;padding-block:6px 10px;max-width:none}
  .orrery-display,.orrery-hint{display:none}
  .orrery-kicker{font-size:9px;gap:10px}
  .orrery-copy h1{margin-top:14px;font-size:clamp(17px,2.5vw,22px);line-height:1.5}
  .orrery-lede{margin-top:8px;font-size:12px;line-height:1.85}
  .orrery-actions{margin-top:16px}
  .orrery-shade{background:linear-gradient(90deg,#03060cf2 0%,#03060cc4 24%,#03060c55 42%,#03060c00 58%),
    linear-gradient(0deg,#070b13 0%,#070b1300 20%,#070b1300 84%,#03060caa 100%),
    radial-gradient(ellipse 78% 92% at var(--sx) var(--sy),#03060c00 58%,#03060c66 86%,#03060caa 100%)}
  .orrery-hero .orrery-console,.orrery-hero[data-compact] .orrery-console{grid-column:2;grid-row:3;justify-self:center;align-self:start;margin-top:10px;
    flex-direction:column;align-items:stretch;gap:8px;padding:10px 12px;border-radius:22px;width:100%;max-width:470px}
  .orrery-readout{grid-template-columns:auto 1fr auto;padding:0 6px;min-width:0}
  .orrery-readout>span{grid-column:auto;grid-row:1;margin:0;align-self:center;font-size:8px;letter-spacing:.12em}
  .orrery-readout output{grid-row:1;justify-self:center;font-size:17px}
  .orrery-readout b{grid-row:1;justify-self:end;font-size:8px}
  .orrery-controls{flex-wrap:wrap;justify-content:space-between;gap:8px}
  .orrery-transport{order:1}
  .orrery-today{order:2;flex:1 1 auto;justify-content:center;min-height:44px}
  .orrery-speed{order:3;flex:1 1 100%;justify-content:space-between}
  .orrery-speed button{min-width:44px;min-height:44px}
  .orrery-transport button{width:44px;height:44px}
  .orrery-transport button[data-orrery=play]{width:48px;height:48px}
  .orrery-hero .orrery-note,.orrery-hero[data-compact] .orrery-note{grid-column:1;grid-row:3;align-self:center;margin-top:10px;max-width:none;text-align:left}
  .orrery-note-br{display:none}
  .orrery-hero .orrery-bottom-meta,.orrery-hero[data-compact] .orrery-bottom-meta{grid-row:4;padding:14px 0 16px;margin-top:16px}
  .orrery-hero[data-state=fallback] .orrery-labels{grid-column:2;grid-row:3;justify-self:center;justify-content:center}
}
@media(pointer:coarse){.orrery-transport button{width:44px;height:44px}.orrery-speed button{min-width:44px;min-height:44px}.orrery-today{min-height:44px}}