/* Geometric living masthead. Colours are written by header.js from the real sky. */
.geo-masthead {
  --geo-ink: #f3ecdf;
  --geo-meta: rgba(243, 236, 223, .72);
  --geo-glass: rgba(10, 18, 28, .28);
  position: relative;
  height: clamp(250px, 29vw, 370px);
  padding: 0;
  overflow: hidden;
  text-align: left;
  background: #1c2a3b;
  border-bottom: 0;
  isolation: isolate;
}
.geo-canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
  z-index: 0;
  touch-action: pan-y;
}
.geo-masthead .geo-title {
  position: absolute;
  left: 50%; top: 21%;
  transform: translateX(-50%);
  margin: 0; padding: 0;
  z-index: 1;
  font-family: var(--serif-display, 'Playfair Display', Georgia, serif);
  font-size: var(--geo-fit, clamp(56px, 10.6vw, 136px));   /* --geo-fit: header.js shrinks it if the font renders wider */
  font-weight: 900;
  letter-spacing: -0.025em;
  line-height: 1;
  white-space: nowrap;
  color: var(--geo-ink);
  transition: color 2s linear;
  pointer-events: none;             /* the canvas hears the pointer; the link still does */
}
.geo-masthead .geo-title a { color: inherit; text-decoration: none; pointer-events: auto; }
.geo-masthead .geo-title a:focus-visible { outline: 2px solid currentColor; outline-offset: 6px; }
.geo-baseline { display: inline-block; width: 0; height: 0; vertical-align: baseline; }

.geo-meta {
  position: absolute; left: 18px; bottom: 12px; right: 190px;
  z-index: 2;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px;
  font-family: var(--sans, system-ui, sans-serif);
  font-size: 9.5px; line-height: 1.5;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--geo-meta);
  transition: color 2s linear;
  pointer-events: none;
}
.geo-meta > * { margin: 0; padding: 0; font: inherit; color: inherit; letter-spacing: inherit; font-style: normal; text-transform: inherit; }
.geo-meta a { color: inherit; pointer-events: auto; text-decoration: none; }
.geo-meta a:hover { color: var(--geo-meta-ink); text-decoration: underline; }
.geo-meta .credo-dot { margin: 0 6px; }
.geo-masthead .masthead-tagline { text-transform: none; letter-spacing: .02em; font-size: 10.5px; }

.geo-tools {
  position: absolute; right: 12px; bottom: 9px; z-index: 2;
  display: flex; gap: 6px; align-items: center;
}
.geo-tools button {
  font: 500 10px/1 var(--sans, system-ui, sans-serif);
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--geo-meta);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 6px 9px;
  cursor: pointer;
  transition: color .3s, border-color .3s, background .3s;
}
.geo-tools button:hover, .geo-tools button[aria-expanded="true"] { color: var(--geo-meta-ink); border-color: currentColor; }
.geo-tools button:focus-visible { outline: 2px solid var(--geo-meta-ink); outline-offset: 2px; }
.geo-pause { width: 26px; height: 26px; padding: 0 !important; display: grid; place-items: center; }
.geo-pause svg { width: 10px; height: 10px; fill: currentColor; }
.geo-pause .i-play, .geo-pause[aria-pressed="true"] .i-pause { display: none; }
.geo-pause[aria-pressed="true"] .i-play { display: inline; }

.geo-masthead .theme-toggle {
  z-index: 3;
  color: var(--geo-top-ink, var(--geo-ink));
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}
.geo-masthead .theme-toggle:hover { border-color: currentColor; background: transparent; }

.geo-panel {
  position: absolute; right: 12px; bottom: 44px; z-index: 4;
  width: min(330px, calc(100% - 24px));
  max-height: calc(100% - 64px); overflow: auto;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--geo-glass);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
  color: #f3ecdf;
  font: 12px/1.45 var(--sans, system-ui, sans-serif);
}
.geo-panel h2 { font: 600 10px/1.2 var(--sans, system-ui, sans-serif); letter-spacing: .14em; text-transform: uppercase; margin: 0 0 8px; opacity: .8; }
.geo-panel ul { list-style: none; margin: 0 0 10px; padding: 0; }
/* a row: name (a link) and the numbers on one line, what it is in plain words under them */
.geo-panel li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 10px; padding: 4px 0 5px; border-top: 1px solid color-mix(in srgb, currentColor 14%, transparent); }
.geo-panel .geo-n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.geo-panel .geo-v { opacity: .72; white-space: nowrap; font-variant-numeric: tabular-nums; font-size: 11px; }
.geo-panel li small { grid-column: 1 / -1; opacity: .66; font-size: 10.5px; line-height: 1.35; }
.geo-panel li small b { font-weight: 600; color: #fffbe8; }
.geo-panel a { color: inherit; text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); text-underline-offset: 2px; }
.geo-panel a:hover { text-decoration-color: currentColor; }
.geo-panel a:focus-visible { outline: 2px solid currentColor; outline-offset: 1px; border-radius: 2px; }
.geo-panel button.geo-row { all: unset; cursor: pointer; display: contents; }
.geo-panel p { margin: 6px 0 0; opacity: .72; font-size: 11px; }

.geo-tip {
  position: absolute; z-index: 5; pointer-events: none;
  transform: translate(-50%, calc(-100% - 10px));
  padding: 4px 8px; border-radius: 6px;
  background: var(--geo-glass);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  color: #f3ecdf;
  font: 11px/1.35 var(--sans, system-ui, sans-serif);
  white-space: nowrap;
}
.geo-tip.geo-tip-below { transform: translate(-50%, 14px); }
.geo-tip.geo-tip-pinned { pointer-events: auto; }
.geo-tip-link { display: block; margin-top: 3px; color: inherit; font-weight: 600; font-size: 10.5px; text-decoration: underline; text-underline-offset: 2px; }
.geo-tip:not(.geo-tip-pinned) .geo-tip-link { opacity: .7; text-decoration: none; }
.geo-tip b { font-weight: 600; }
.geo-tip small { display: block; opacity: .75; font-size: 10px; }

@media (max-width: 640px) {
  /* phones: the word fills ~90% of the width (Playfair's wordmark is ~4.84em wide) and stands on a
     horizon a little above the middle; the site stylesheet forces 36px with !important, hence ours */
  .geo-masthead { height: calc(150px + 26vw); }
  .geo-masthead .geo-title { top: calc(47% - 0.827 * var(--geo-fit, min(18.6vw, 88px))); font-size: var(--geo-fit, min(18.6vw, 88px)) !important; letter-spacing: -0.025em; }
  .geo-meta { left: 12px; right: 12px; bottom: 42px; gap: 0 10px; font-size: 8.5px; letter-spacing: .12em; }
  .geo-masthead .masthead-tagline { display: none; }
  .geo-tools { left: 6px; right: 6px; bottom: 6px; justify-content: space-between; }
  .geo-tools button { padding: 8px 9px; }            /* finger-sized targets, same small type */
  .geo-pause { width: 34px; height: 34px; }
  .geo-panel { right: 8px; left: 8px; width: auto; bottom: 44px; max-height: calc(100% - 56px); }
  .geo-tip { white-space: normal; max-width: min(260px, calc(100% - 16px)); width: max-content; }
}
@media (prefers-reduced-motion: reduce) {
  .geo-masthead .geo-title, .geo-meta { transition: none; }
}

/* Look up: the header opens into the whole sky */
.geo-masthead { transition: height .6s cubic-bezier(.3,.7,.2,1); }
.geo-masthead.geo-looking-up { height: min(82vh, 680px); }
.geo-masthead .geo-title, .geo-meta { transition: color 2s linear, opacity .5s ease; }
.geo-looking-up .geo-title { opacity: 0; }
.geo-looking-up .geo-title a { pointer-events: none; }
.geo-looking-up .geo-meta { opacity: .55; }

/* meteor shower notice */
.geo-notice {
  position: absolute; left: 14px; top: 12px; z-index: 3;
  display: flex; align-items: center; gap: 2px;
  max-width: calc(100% - 80px);
  border-radius: 999px;
  background: var(--geo-glass);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  color: #f3ecdf;
  font: 11px/1.3 var(--sans, system-ui, sans-serif);
  animation: geo-in .8s cubic-bezier(.2,.8,.2,1) both;
}
.geo-notice button { all: unset; cursor: pointer; padding: 6px 4px 6px 12px; }
.geo-notice button:focus-visible { outline: 2px solid #f3ecdf; border-radius: 999px; }
.geo-notice .geo-notice-x { padding: 6px 12px 6px 6px; opacity: .7; font-size: 14px; line-height: 1; }
.geo-notice b { font-weight: 600; }
/* small geometric marks for what the notice is about */
.geo-ico { display: inline-block; margin: 0 7px 2px 0; vertical-align: middle; }
.geo-ico-meteor { width: 14px; height: 1.5px; margin-bottom: 3px; background: linear-gradient(90deg, transparent, currentColor); transform: rotate(-28deg); }
.geo-ico-moon { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.geo-ico-eclipse { width: 9px; height: 9px; border-radius: 50%; background: radial-gradient(circle at 70% 38%, transparent 3.4px, #c8744a 3.9px); }
.geo-ico-iss { width: 14px; height: 2px; margin-bottom: 3px; background: radial-gradient(circle at 12px 1px, currentColor 1.6px, transparent 2px), repeating-linear-gradient(90deg, currentColor 0 2px, transparent 2px 4px); -webkit-mask: linear-gradient(90deg, transparent, #000 70%); mask: linear-gradient(90deg, transparent, #000 70%); transform: rotate(-14deg); }
.geo-ico-sun { width: 10px; height: 6px; border-radius: 10px 10px 0 0; background: currentColor; box-shadow: 0 1.5px 0 -0.5px currentColor; margin-bottom: 4px; }
@keyframes geo-in { from { opacity: 0; transform: translateY(-6px); } }
@media (max-width: 640px) {
  .geo-notice { top: 8px; left: 8px; max-width: calc(100% - 62px); font-size: 10px; }
  .geo-notice-more { display: none; }
  .geo-notice button { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
@media (prefers-reduced-motion: reduce) {
  .geo-masthead { transition: none; }
  .geo-notice { animation: none; }
}
@media (max-width: 640px) {
  /* look up on a phone: the header grows to hold the whole dome across the width, plus notice and tools */
  .geo-masthead.geo-looking-up { height: min(calc(100vw + 150px), 88vh); }
}