:root{
  --ink:#10151F; --surface:#1A2130; --line:#262E40; --moonlight:#E6E1D3; --haze:#8E96A6;
  --fire:#C07A5A; --earth:#8E9B7A; --air:#C8B68A; --water:#7C9FA6;
  --serif:'Newsreader', 'Frank Ruhl Libre', Georgia, serif;
  --sans:'Hanken Grotesk', 'Heebo', system-ui, sans-serif;
  --ease-out:cubic-bezier(0.16,1,0.3,1);
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{background:var(--ink);color-scheme:dark}
body{margin:0;background:var(--ink);color:var(--moonlight);font-family:var(--sans);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}
::selection{background:#C8B68A;color:#10151F}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--air);outline-offset:3px;border-radius:4px}
.num{font-variant-numeric:tabular-nums}

.sky{position:fixed;inset:0;z-index:0;pointer-events:none}
.grain{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:0.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:220px 220px}
.page{position:relative;z-index:1;min-height:100dvh;display:grid;grid-template-rows:auto 1fr auto;grid-template-columns:minmax(0,1fr);padding-inline:clamp(20px,4vw,56px)}
/* grid items default to min-width:auto, so one wide table inside main can widen the whole page */
.page > *{min-width:0}
main{min-width:0}

/* three columns of their own, so the menu sits on the middle of the header on
   every page: it must not shift when the city button is missing (the reading
   pages have no city) or when the city name is longer */
header{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:24px;padding-block:22px}
.mark{grid-column:1;grid-row:1;justify-self:start}
header > nav{grid-column:2;grid-row:1;justify-self:center}
.menub{grid-column:2;grid-row:1;justify-self:end}
.place{grid-column:3;grid-row:1;justify-self:end}
.mark{font-family:var(--serif);font-weight:400;font-size:24px;letter-spacing:-0.01em;display:flex;align-items:center;gap:10px}
.mark svg{flex:none}
nav{display:flex;gap:28px;font-size:14px;color:var(--haze)}
nav a{position:relative;padding-block:6px;transition:color 150ms var(--ease-out)}
nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--moonlight);transform:scaleX(0);transform-origin:left;transition:transform 200ms var(--ease-out)}
nav a:hover{color:var(--moonlight)}
/* the page you are on keeps the underline lit, so the menu always answers where am I */
nav a[aria-current]{color:var(--moonlight)}
nav a[aria-current]::after{transform:scaleX(1);background:var(--air)}
.menupanel a[aria-current]{color:var(--air)}
.menupanel a[aria-current]::before{content:"";position:absolute;left:-14px;top:50%;width:6px;height:1px;background:var(--air)}
.menupanel a{position:relative}
nav a:hover::after{transform:scaleX(1)}
.place{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--haze);border:1px solid var(--line);border-radius:999px;padding:7px 14px 7px 11px;background:transparent;font-family:inherit;cursor:pointer;transition:border-color 150ms var(--ease-out),color 150ms var(--ease-out)}
.place:hover{border-color:#3A4458;color:var(--moonlight)}

/* the side columns carry the same weight, so the Moon sits on the true centre of the screen */
.hero{display:grid;grid-template-columns:minmax(320px,1fr) minmax(420px,620px) minmax(320px,1fr);align-items:center;gap:clamp(16px,3vw,48px)}
.left{align-self:center}
h1{font-family:var(--serif);font-weight:300;font-size:clamp(52px,5.2vw,80px);line-height:0.98;letter-spacing:-0.025em;margin:0;text-wrap:balance}
h1 .line{display:block;white-space:nowrap}
.sign{display:inline-block;color:var(--water);transition:color 300ms var(--ease-out)}
.when{margin:18px 0 0;font-size:16px;color:var(--haze)}
.facts{display:flex;flex-wrap:wrap;gap:0;margin:30px 0 0;padding:0;list-style:none;border-top:1px solid var(--line)}
.facts li{flex:1 1 50%;padding:16px 0 14px;border-bottom:1px solid var(--line)}
.facts li:nth-child(odd){padding-right:16px}
.k{display:block;font-size:14px;color:var(--haze)}
.v{display:block;font-size:20px;font-weight:500;margin-top:2px}
.ingress{margin:18px 0 0;font-size:16px;color:var(--haze)}
.ingress b{color:var(--moonlight);font-weight:500}

.stage{position:relative;aspect-ratio:1/1;width:100%;max-width:640px;justify-self:center}
#moon{width:100%;height:100%;display:block;cursor:grab;touch-action:pan-y}
#moon:active{cursor:grabbing}
.ring{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
#ringDot{transform-box:fill-box;transform-origin:center;transition:transform 150ms var(--ease-out)}
.ring-base{transition:stroke 150ms var(--ease-out)}
.stage.ring-hover #ringDot{transform:scale(1.4)}
.stage.ring-hover .ring-base{stroke:#3A4458}
.stage.ring-drag #ringDot{transform:scale(1.7)}
.stage.ring-drag .ring-base{stroke:#4A5468}
.signbar{position:relative;height:2px;background:var(--line);margin:22px 0 0;max-width:340px}
.sb-fill{position:absolute;inset:0;transform-origin:left;transform:scaleX(0);background:var(--water)}
.sb-tick{position:absolute;top:-3px;width:1px;height:8px;background:#3A4458}
.next .row > div{position:relative}
.bar{display:block;height:1px;background:var(--line);margin-top:8px;position:relative;overflow:hidden}
.bar i{position:absolute;inset:0;background:var(--moonlight);opacity:0.6;transform-origin:left;transform:scaleX(0)}
.tick{transform-origin:50% 50%}


.right{display:flex;flex-direction:column;gap:22px;align-self:center}
.day{border-top:1px solid var(--line);padding-top:18px}
.day .n{font-family:var(--serif);font-weight:300;font-size:64px;line-height:1;letter-spacing:-0.02em}
.day .n sup{font-size:0.38em;vertical-align:0.95em;margin-left:2px;letter-spacing:0}
.day .sym{font-family:var(--serif);font-size:26px;line-height:1.2;margin-top:8px}
.day .src{font-size:14px;color:var(--haze);margin-top:6px}
.day a.more{display:inline-flex;align-items:center;gap:8px;margin-top:14px;font-size:14px;color:var(--moonlight)}
.more .arr{display:inline-block;transition:transform 150ms var(--ease-out)}
.more:hover .arr{transform:translateX(4px)}
.next{border-top:1px solid var(--line);padding-top:16px;display:grid;gap:14px}
.next .row{display:grid;grid-template-columns:34px 1fr;gap:12px;align-items:center}
.next .t{font-size:16px}
.next .d{font-size:14px;color:var(--haze)}

.time{padding-block:18px 26px}
.scrub{position:relative;height:68px;user-select:none;touch-action:pan-y;cursor:ew-resize}
.track{position:absolute;left:0;right:0;top:30px;height:1px;background:var(--line)}
.tick{position:absolute;top:24px;width:1px;height:13px;background:#323B50}
.tick.major{height:13px;background:#4A5468}
.tlabel{position:absolute;top:44px;transform:translateX(-50%);font-size:12px;color:var(--haze);white-space:nowrap}
.pmark{position:absolute;top:22px;width:16px;height:16px;transform:translateX(-50%);border-radius:50%}
.pmark.full{background:var(--moonlight)}
.pmark.new{border:1px solid var(--moonlight);background:var(--ink)}
.handle{position:absolute;top:0;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:6px;pointer-events:none}
.handle .cap{font-size:12px;font-weight:500;color:var(--ink);background:var(--moonlight);border-radius:999px;padding:2px 10px;white-space:nowrap}
.handle .stem{width:2px;height:24px;background:var(--moonlight);border-radius:2px;transition:transform 120ms var(--ease-out)}
.scrub:hover .stem{transform:scaleY(1.2)}
.timebar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:6px;font-size:13px;color:var(--haze)}
.now{font-family:inherit;font-size:13px;color:var(--moonlight);background:transparent;border:1px solid var(--line);border-radius:999px;padding:5px 14px;cursor:pointer;transition:border-color 150ms var(--ease-out),opacity 200ms var(--ease-out),transform 200ms var(--ease-out)}
.now:hover{border-color:#3A4458}
.now[aria-hidden="true"]{opacity:0;transform:translateY(6px);pointer-events:none}
.tbtns{display:flex;gap:8px;align-items:center}
.now:active,.place:active,.go:active{transform:scale(0.97)}
header{position:relative}
/* the browser keeps vertical panning over the Moon and the time line: without
   this a finger on the Moon cannot scroll the page at all */
canvas,.stage,.scrub,.ring-hit{touch-action:pan-y}
.time{position:relative}
.pop{position:absolute;z-index:5;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:14px;box-shadow:0 18px 40px rgba(4,7,14,0.45),0 2px 8px rgba(4,7,14,0.3)}
.pop[hidden]{display:none}
.pop label{display:block;font-size:13px;color:var(--haze);margin-bottom:6px}
.pop input{width:100%;font:inherit;font-size:16px;color:var(--moonlight);background:var(--ink);border:1px solid var(--line);border-radius:10px;padding:10px 12px;color-scheme:dark;transition:border-color 150ms var(--ease-out)}
.pop input:focus{outline:none;border-color:var(--air)}
.citypop{right:0;top:64px;width:min(320px, calc(100vw - 32px))}
.cityres{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:2px}
.cityres button{width:100%;text-align:left;font:inherit;font-size:15px;color:var(--moonlight);background:transparent;border:0;border-radius:8px;padding:9px 10px;cursor:pointer;display:flex;justify-content:space-between;gap:12px;transition:background 120ms var(--ease-out)}
.cityres button:hover,.cityres button:focus-visible{background:#232B3C}
.cityres .cc{color:var(--haze);font-size:13px}
.locate{width:100%;display:flex;align-items:center;gap:10px;font:inherit;font-size:15px;color:var(--moonlight);background:transparent;border:1px solid var(--line);border-radius:10px;padding:10px 12px;cursor:pointer;transition:border-color 150ms var(--ease-out),transform 100ms var(--ease-out)}
.locate:hover{border-color:#3A4458}
.locate:active{transform:scale(0.98)}
.locate.busy svg{animation:spin 900ms linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.locmsg{font-size:13px;color:var(--haze);margin:6px 0 12px;min-height:0}
.locmsg:empty{margin:0 0 12px}
.cityempty{font-size:13px;color:var(--haze);padding:8px 10px}
.datepop{right:0;bottom:118px;width:340px}
.datepop{width:372px;max-width:calc(100vw - 32px)}
.calhead{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px}
.navb{width:34px;height:34px;display:grid;place-items:center;color:var(--haze);background:transparent;border:1px solid var(--line);border-radius:999px;cursor:pointer;transition:color 150ms var(--ease-out),border-color 150ms var(--ease-out),transform 100ms var(--ease-out)}
.navb:hover{color:var(--moonlight);border-color:#3A4458}
.navb:active{transform:scale(0.92)}
.calTitle{font-family:var(--serif);font-size:20px;font-weight:400;color:var(--moonlight);background:transparent;border:0;padding:4px 10px;border-radius:8px;cursor:pointer;transition:background 150ms var(--ease-out);border:1px solid var(--line);border-radius:999px;padding:5px 14px}
.calTitle:hover{background:#232B3C}
.calwrap{position:relative;overflow:hidden}
.caldow{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:4px}
.caldow span{text-align:center;font-size:11px;color:var(--haze)}
.calgrid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.cell{position:relative;aspect-ratio:1/1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font:inherit;font-size:13px;color:var(--moonlight);background:transparent;border:0;border-radius:10px;cursor:pointer;transition:background 140ms var(--ease-out),color 140ms var(--ease-out)}
.cell:hover{background:#232B3C}
.cell.out{color:#4A5468}
.cell.out .disc{opacity:0.35}
.cell.today{box-shadow:inset 0 0 0 1px #3A4458}
.cell.sel{background:var(--moonlight);color:var(--ink)}
.cell.sel .disc circle{fill:#C9C4B6}
.cell.sel .disc path{fill:var(--ink)}
.disc{display:block}
.yeargrid{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}
.ycell{font:inherit;font-size:14px;color:var(--moonlight);background:transparent;border:0;border-radius:10px;padding:12px 0;cursor:pointer;transition:background 140ms var(--ease-out)}
.ycell:hover{background:#232B3C}
.ycell.sel{background:var(--moonlight);color:var(--ink)}
.timerow{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px}
.timerow label{margin:0}
.clock{display:flex;align-items:center;gap:2px;border:1px solid var(--line);border-radius:10px;padding:4px 8px;transition:border-color 150ms var(--ease-out)}
.clock:focus-within{border-color:var(--air)}
.clock .seg{width:38px;padding:6px 0;text-align:center;font:inherit;font-size:17px;font-variant-numeric:tabular-nums;color:var(--moonlight);background:transparent;border:0}
.clock .seg:focus{outline:none;background:#232B3C;border-radius:6px}
.colon{color:var(--haze);font-size:17px}
.chips{display:flex;gap:6px;margin-top:10px}
.chip{flex:1;font:inherit;font-size:13px;color:var(--haze);background:transparent;border:1px solid var(--line);border-radius:999px;padding:7px 4px;cursor:pointer;transition:color 150ms var(--ease-out),border-color 150ms var(--ease-out),transform 100ms var(--ease-out)}
.chip:hover{color:var(--moonlight);border-color:#3A4458}
.chip:active{transform:scale(0.96)}
.datepop .err{font-size:13px;color:#E0967A;margin:8px 0 0;min-height:18px}
.go{margin-top:6px;width:100%;font:inherit;font-size:15px;font-weight:500;color:var(--ink);background:var(--moonlight);border:0;border-radius:999px;padding:11px 16px;cursor:pointer;transition:background 150ms var(--ease-out),transform 100ms var(--ease-out)}
.go:hover{background:#F3EEE2}
.datebtn{display:inline-flex;align-items:center;gap:8px}

.menub{display:none;align-items:center;gap:9px;font-family:inherit;font-size:14px;color:var(--haze);background:transparent;border:1px solid var(--line);border-radius:999px;padding:8px 15px;cursor:pointer;transition:border-color 150ms var(--ease-out),color 150ms var(--ease-out)}
.menub:hover{border-color:#3A4458;color:var(--moonlight)}
.menub:active{transform:scale(0.97)}
.menub .bars{display:flex;flex-direction:column;justify-content:center;gap:5px;width:15px;height:11px}
.menub .bars i{display:block;height:1px;background:currentColor;transition:transform 240ms var(--ease-out)}
.menub[aria-expanded="true"] .bars i:first-child{transform:translateY(3px) rotate(45deg)}
.menub[aria-expanded="true"] .bars i:last-child{transform:translateY(-3px) rotate(-45deg)}
.menupanel{position:absolute;left:0;right:0;top:calc(100% - 4px);z-index:20;background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:6px 22px 18px;box-shadow:0 24px 54px rgba(4,7,14,0.55),0 2px 10px rgba(4,7,14,0.35)}
.menupanel[hidden]{display:none}
.menupanel nav{display:block;gap:0}
.menupanel a{display:block;font-family:var(--serif);font-weight:300;font-size:26px;letter-spacing:-0.015em;color:var(--moonlight);padding:15px 0 14px;border-bottom:1px solid var(--line)}
.menupanel nav a::after{display:none}
.menupanel .mfoot{display:flex;flex-wrap:wrap;gap:10px 22px;padding-top:16px}
.menupanel .mfoot a{font-family:var(--sans);font-size:15px;color:var(--haze);padding:0;border-bottom:0}
.sitefoot{max-width:1240px;width:100%;margin:44px auto 0;display:flex;flex-wrap:wrap;align-items:baseline;gap:12px 32px;border-top:1px solid var(--line);padding:22px 0 30px;font-size:14px;color:var(--haze)}
.sitefoot .c{font-family:var(--serif);font-size:18px;color:var(--moonlight)}
.sitefoot nav{display:flex;gap:22px;font-size:14px}
.sitefoot .dis{margin-left:auto;max-width:52ch;line-height:1.6;text-align:right}

@media (max-width:1180px){
  /* the reading order Anna asked for: the name, then the city, then the menu,
     and the menu keeps the last column on every page so it never moves */
  header{grid-template-columns:minmax(0,1fr) auto auto}
  .place{grid-column:2;grid-row:1;justify-self:end}
  .menub{display:inline-flex;grid-column:3;grid-row:1;justify-self:end}
  .hero{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"stage stage" "left right";row-gap:8px}
  .stage{grid-area:stage;max-width:520px}
  .left{grid-area:left}.right{grid-area:right}
  nav{display:none}
}
@media (max-width:900px){
  .sitefoot{gap:14px 24px}
  .sitefoot .dis{margin-left:0;text-align:left;flex:1 1 100%;max-width:none}
}
@media (max-width:767px){
  html{overflow-x:hidden}
  /* the three pieces of the header have to share 343 pixels: the name keeps its
     place, and a long city name is cut rather than pushing anything over */
  header{gap:8px}
  .place #cityName{display:inline-block;max-width:64px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom}
  .menub{min-height:44px;padding:8px 12px}
  .menub .mtxt{display:none}
  .menupanel{padding-inline:18px}
  .menupanel a{font-size:23px;padding:13px 0 12px}
  .page{padding-inline:16px}
  .hero{display:flex;flex-direction:column;align-items:stretch;gap:0}
    .left{display:contents}
  h1{order:1;font-size:clamp(40px,11.5vw,56px)}
  .signbar{order:2;max-width:none}
  .stage{order:3;max-width:100%;margin:14px 0 2px}
  .hero > section.time{order:4;margin-top:6px}
  .when{order:5;margin-top:14px}
  .facts{order:6;margin-top:18px}
  .ingress{order:7}
  .right{order:8;margin-top:22px;gap:18px}
  .day .n{font-size:52px}
  .time{padding-block:22px 18px}
  .timebar{flex-direction:column;align-items:flex-start;gap:10px}
  .tbtns{width:100%}
  .now{flex:1;min-height:44px;display:inline-flex;align-items:center;justify-content:center}
  .place{min-height:44px}
  .chip{min-height:44px}
  header{gap:12px}
  .mark{font-size:17px;gap:6px;white-space:nowrap}
  .mark svg{width:22px;height:22px}
  .mark svg{width:22px;height:22px}
  .tlabel:nth-of-type(odd){display:none}
  .pop{max-width:calc(100vw - 32px)}
  .citypop{right:0;left:auto;width:min(320px, calc(100vw - 32px))}
  .datepop{width:min(360px, calc(100vw - 32px));right:0;bottom:auto;top:auto;margin-top:8px;position:fixed;left:16px;right:16px;bottom:16px}
  .cell{border-radius:8px}
}
@media (prefers-reduced-motion: reduce){*,*::before,*::after{transition:none!important}}