/* Will I See: night-sky palette, one aurora-green accent, editorial serif + data mono. */

:root {
  --bg: #060a12;
  --bg-2: #0a101d;
  --panel: #0e1626;
  --panel-2: #121c30;
  --line: #1b2740;
  --line-2: #2a3a5a;
  --text: #e9eef7;
  --muted: #a3b0c8;
  --dim: #6c7a95;
  --green: #5ef2a8;
  --green-2: #2fd88a;
  --amber: #ffc65c;
  --orange: #ff9b6a;
  --slate: #8494b3;
  --serif: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  --sans: Inter, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
  --r: 14px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 17px/1.62 var(--sans); -webkit-font-smoothing: antialiased; }
img, svg { display: block; max-width: 100%; }
a { color: var(--green); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: #9cf8cb; }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; line-height: 1.05; letter-spacing: -.01em; margin: 0 0 .5em; }
h1 { font-size: clamp(2.6rem, 6.2vw, 5rem); }
h2 { font-size: clamp(2rem, 4vw, 3.1rem); }
h3 { font-size: 1.55rem; line-height: 1.15; }
p { margin: 0 0 1em; }
.wrap { width: min(1180px, 100% - 40px); margin-inline: auto; }
.narrow { width: min(760px, 100% - 40px); margin-inline: auto; }
.muted { color: var(--muted); }
.mono { font-family: var(--mono); }
.skip { position: absolute; left: -999px; top: 8px; background: var(--green); color: #04110a; padding: 8px 14px; border-radius: 8px; z-index: 100; }
.skip:focus { left: 8px; }
:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; border-radius: 6px; }

/* ── Header + mobile menu (fade overlay, burger → X, staggered links) ───────── */
.site-head { position: sticky; top: 0; z-index: 50; }
.site-head::before { content: ""; position: absolute; inset: 0; background: rgba(6, 10, 18, .82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); z-index: -1; transition: opacity .35s var(--ease); }
/* home: the header floats over the hero photo with no background until the page scrolls (app.js adds .scrolled) */
.home .site-head { position: fixed; top: 0; left: 0; right: 0; }
.home .site-head:not(.scrolled)::before { opacity: 0; }
.home .site-head:not(.scrolled) .brand, .home .site-head:not(.scrolled) .links > a { text-shadow: 0 1px 10px rgba(0, 0, 0, .55); }
.home .site-head:not(.scrolled) .links > a { color: rgba(233, 238, 247, .9); }
.home .site-head:not(.scrolled) .burger { background: rgba(6, 10, 18, .35); border-color: rgba(233, 238, 247, .25); }
.nav { display: flex; align-items: center; gap: 28px; height: 68px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; font: 400 1.6rem/1 var(--serif); }
.brand:hover { color: var(--text); }
.logo-mark { width: 30px; height: 30px; color: var(--green); }
.links { display: flex; gap: 6px; margin-left: auto; align-items: center; }
.links > a { color: var(--muted); text-decoration: none; font-size: .95rem; font-weight: 500; padding: 8px 12px; border-radius: 999px; transition: color .2s, background .2s; }
.links > a:hover { color: var(--text); background: rgba(255, 255, 255, .05); }
.links > a[aria-current="page"] { color: var(--text); background: rgba(94, 242, 168, .1); }
.burger { display: none; position: relative; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line-2); background: rgba(255, 255, 255, .04); color: var(--text); cursor: pointer; align-items: center; justify-content: center; margin-left: auto; }
.burger span { position: absolute; width: 18px; height: 1.8px; border-radius: 2px; background: currentColor; transition: transform .35s var(--ease); }
.burger span:first-child { transform: translateY(-4px); }
.burger span:last-child { transform: translateY(4px); }
.burger[aria-expanded="true"] { border-color: rgba(94, 242, 168, .55); background: rgba(94, 242, 168, .1); }
.burger[aria-expanded="true"] span:first-child { transform: rotate(45deg); }
.burger[aria-expanded="true"] span:last-child { transform: rotate(-45deg); }
.menu-extra { display: none; }
/* the header's one action button ("Book a tour"); phones show "Tours" next to the burger */
.nav-cta { margin-left: 6px; padding: 10px 18px; font-size: .92rem; white-space: nowrap; box-shadow: 0 6px 22px rgba(94, 242, 168, .18); }
.nav-cta:hover { transform: translateY(-1px); }
.nav-cta[aria-current="page"] { box-shadow: none; }
.cta-short { display: none; }
@media (max-width: 860px) {
  .nav-cta { margin-left: auto; padding: 10px 16px; }
  .nav-cta + .burger { margin-left: 10px; }
}
@media (max-width: 520px) {
  .nav { gap: 12px; }
  .brand span { white-space: nowrap; }
  .cta-long { display: none; }
  .cta-short { display: inline; }
  .nav-cta { padding: 10px 15px; }
}
@media (max-width: 360px) {
  .brand { font-size: 1.4rem; gap: 8px; }
  .logo-mark { width: 26px; height: 26px; }
  .nav-cta { padding: 9px 13px; font-size: .88rem; }
  .nav-cta + .burger { margin-left: 8px; }
}
@media (max-width: 860px) {
  .burger { display: inline-flex; }
  .links { position: fixed; inset: 0; z-index: -1; height: 100vh; height: 100dvh; margin: 0; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 0; padding: 96px 24px 32px; overflow-y: auto; background: var(--bg); opacity: 0; visibility: hidden; transition: opacity .35s, visibility .35s; }
  .links.open { opacity: 1; visibility: visible; }
  .links > a { padding: 18px 0; border-radius: 0; border-bottom: 1px solid var(--line); color: var(--text); font: 400 clamp(1.9rem, 8vw, 2.4rem)/1.1 var(--serif); background: none !important; opacity: 0; transform: translateY(18px); transition: opacity .5s, transform .5s var(--ease); }
  .links.open > a { opacity: 1; transform: none; }
  .links.open > a:nth-child(1) { transition-delay: .06s; } .links.open > a:nth-child(2) { transition-delay: .11s; }
  .links.open > a:nth-child(3) { transition-delay: .16s; } .links.open > a:nth-child(4) { transition-delay: .21s; }
  .links.open > a:nth-child(5) { transition-delay: .26s; } .links.open > a:nth-child(6) { transition-delay: .31s; }
  .links > a[aria-current="page"] { color: var(--green); }
  .menu-extra { display: block; margin-top: auto; padding-top: 36px; color: var(--muted); opacity: 0; transform: translateY(18px); transition: opacity .5s .3s, transform .5s .3s; }
  .links.open .menu-extra { opacity: 1; transform: none; }
  body.menu-open { overflow: hidden; }
}

/* ── Sections ───────────────────────────────────────────────────────────────── */
.sec { padding: 104px 0; }
.sec.alt { background: var(--bg-2); border-block: 1px solid var(--line); }
.sec-head { max-width: 720px; margin-bottom: 44px; }
.sec-head p { color: var(--muted); font-size: 1.08rem; }
.sub-h { margin: 56px 0 18px; }
.sec-head + .sub-h, .sub-h:first-child { margin-top: 0; }
@media (max-width: 700px) { .sec { padding: 72px 0; } .sec-head { margin-bottom: 30px; } .sub-h { margin-top: 44px; } }

/* "see more" link under a block */
.more { display: inline-flex; align-items: center; gap: 8px; margin-top: 26px; font-weight: 500; font-size: .98rem; color: var(--green); text-decoration: none; }
.more::after { content: "→"; transition: transform .25s var(--ease); }
.more:hover { color: #9cf8cb; }
.more:hover::after { transform: translateX(4px); }

.btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 22px; border-radius: 999px; border: 1px solid transparent; font: 600 .98rem/1 var(--sans); text-decoration: none; cursor: pointer; transition: background .2s, border-color .2s, color .2s, transform .2s; }
.btn-primary { background: var(--green); color: #03110a; }
.btn-primary:hover { background: #8ff7c4; color: #03110a; }
.btn-ghost { border-color: var(--line-2); color: var(--text); background: rgba(255, 255, 255, .03); }
.btn-ghost:hover { border-color: var(--green); color: var(--text); }

/* ── Hero ───────────────────────────────────────────────────────────────────── */
/* no overflow: hidden here, or the search suggestions get cut off at the hero's bottom edge;
   z-index keeps the open list above the next section */
.hero { position: relative; z-index: 2; min-height: min(100vh, 920px); display: flex; align-items: flex-end; isolation: isolate; }
.hero picture, .hero picture img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.hero picture img { object-position: 72% 62%; }
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(6, 10, 18, .55) 0%, rgba(6, 10, 18, 0) 30%, rgba(6, 10, 18, .2) 55%, var(--bg) 100%), linear-gradient(90deg, rgba(6, 10, 18, .75) 0%, rgba(6, 10, 18, .1) 60%); }
.hero-in { padding: 140px 0 84px; }
.hero h1 { max-width: 13ch; margin-bottom: .35em; }
.hero h1 em { font-style: italic; color: var(--green); }
.hero .lede { max-width: 560px; font-size: 1.15rem; color: #d3dbea; }
.hero-credit { position: absolute; right: 16px; bottom: 12px; font: 400 .72rem var(--mono); color: rgba(233, 238, 247, .45); }

/* place finder */
.finder { position: relative; display: flex; gap: 10px; flex-wrap: wrap; max-width: 620px; margin-top: 28px; }
.finder-box { position: relative; flex: 1 1 300px; }
.finder input { width: 100%; height: 56px; padding: 0 20px 0 48px; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(10, 16, 29, .88); color: var(--text); font: 500 1.02rem var(--sans); }
.finder input::placeholder { color: var(--dim); }
.finder input:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 4px rgba(94, 242, 168, .15); }
.finder-box svg { position: absolute; left: 18px; top: 50%; translate: 0 -50%; width: 18px; height: 18px; color: var(--dim); pointer-events: none; }
.finder .btn { height: 56px; }
.finder-list { position: absolute; left: 0; right: 0; top: 62px; z-index: 20; margin: 0; padding: 6px; list-style: none; background: var(--panel); border: 1px solid var(--line-2); border-radius: 16px; box-shadow: 0 24px 60px rgba(0, 0, 0, .5); max-height: 340px; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
.finder-list::-webkit-scrollbar { width: 8px; }
.finder-list::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 8px; border: 2px solid var(--panel); }
.finder-list::-webkit-scrollbar-track { background: transparent; }
.finder-list[hidden] { display: none; }
.finder-list a { display: flex; justify-content: space-between; gap: 12px; padding: 11px 14px; border-radius: 10px; color: var(--text); text-decoration: none; }
.finder-list a span { color: var(--dim); font-size: .9rem; }
.finder-list a:hover, .finder-list a.on { background: rgba(94, 242, 168, .1); }
/* tonight's chance in six popular places: one row on desktop, a 2-column grid on phones (nothing scrolls off) */
.quick { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.quick a { display: inline-flex; gap: 9px; align-items: center; padding: 8px 14px 8px 12px; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(10, 16, 29, .72); color: var(--text); text-decoration: none; font-size: .92rem; transition: border-color .2s, transform .2s; }
.quick a:hover { border-color: var(--v, var(--green)); transform: translateY(-2px); color: var(--text); }
.quick b { font: 500 .82rem var(--mono); color: var(--v, var(--muted)); }
@media (max-width: 700px) {
  .hero { min-height: 0; }
  .hero-in { padding: 112px 0 52px; }
  .hero picture img { object-position: 88% 70%; }
  .quick { display: grid; grid-template-columns: 1fr 1fr; }
  .quick a { justify-content: flex-start; min-width: 0; padding: 9px 12px; border-radius: 12px; }
  .quick .q-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .finder .btn { flex: 1 1 100%; justify-content: center; }
}

/* ── Verdict colours ────────────────────────────────────────────────────────── */
[data-verdict="yes"] { --v: var(--green); }
[data-verdict="maybe"] { --v: var(--amber); }
[data-verdict="unlikely"] { --v: var(--orange); }
[data-verdict="no"] { --v: var(--slate); }
[data-verdict="bright"] { --v: #c7b98d; }
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--v, var(--dim)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--v, var(--dim)) 22%, transparent); }

/* ── Answer card (place page) ───────────────────────────────────────────────── */
.place-hero { padding: 64px 0 40px; background: radial-gradient(900px 420px at 80% -10%, rgba(94, 242, 168, .09), transparent 70%), var(--bg); }
.crumbs { font: 400 .8rem var(--mono); color: var(--dim); margin-bottom: 22px; }
.crumbs a { color: var(--muted); text-decoration: none; }
.place-hero h1 { font-size: clamp(2.2rem, 5vw, 3.9rem); max-width: 20ch; }
.answer { position: relative; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 0; margin-top: 30px; border: 1px solid var(--line-2); border-radius: 22px; background: var(--panel); overflow: hidden; }
.answer-main { padding: 34px 36px; border-right: 1px solid var(--line); }
.answer-label { font: 500 .78rem var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--dim); margin-bottom: 10px; }
.answer-verdict { font: 400 clamp(3rem, 7vw, 5.4rem)/.95 var(--serif); color: var(--v, var(--text)); margin: 0 0 16px; }
.answer-reason { color: #d3dbea; font-size: 1.08rem; max-width: 52ch; }
.answer-meta { display: flex; gap: 18px; flex-wrap: wrap; font: 400 .8rem var(--mono); color: var(--dim); }
.answer-side { display: grid; grid-template-rows: auto 1fr; }
.answer-chance { padding: 30px 32px; border-bottom: 1px solid var(--line); }
.answer-chance b { display: block; font: 500 clamp(2.6rem, 5vw, 3.6rem)/1 var(--mono); color: var(--v, var(--text)); letter-spacing: -.03em; }
.answer-chance span { color: var(--muted); font-size: .92rem; }
.facts { display: grid; grid-template-columns: 1fr 1fr; }
.fact { padding: 20px 32px; border-bottom: 1px solid var(--line); }
.fact:nth-child(odd) { border-right: 1px solid var(--line); }
.fact b { display: block; font: 500 1.35rem/1.2 var(--mono); }
.fact span { font-size: .84rem; color: var(--muted); }
@media (max-width: 860px) {
  .answer { grid-template-columns: 1fr; }
  .answer-main { border-right: 0; border-bottom: 1px solid var(--line); padding: 26px 22px; }
  .answer-chance { padding: 22px; }
  .fact { padding: 16px 22px; }
}

/* ── Night chart: one column per dark hour ──────────────────────────────────── */
.night { margin-top: 26px; border: 1px solid var(--line); border-radius: 18px; background: var(--bg-2); padding: 22px 22px 16px; }
.night-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.night-head h2 { font-size: 1.6rem; margin: 0; }
.night-legend { display: flex; gap: 16px; flex-wrap: wrap; font: 400 .76rem var(--mono); color: var(--dim); }
.night-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.night-scroll { overflow-x: auto; padding-bottom: 6px; }
.night-grid { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(46px, 1fr); gap: 4px; min-width: max-content; }
.hr { display: grid; grid-template-rows: 20px 120px 22px 22px 22px; gap: 6px; text-align: center; font: 400 .74rem var(--mono); color: var(--muted); border-radius: 10px; padding: 6px 2px; }
.hr-head { display: none; }
.hr.past { opacity: .38; }
.hr.best { background: rgba(94, 242, 168, .08); outline: 1px solid rgba(94, 242, 168, .35); }
.hr-bar { position: relative; border-radius: 6px; background: rgba(255, 255, 255, .03); overflow: hidden; }
.hr-bar i { position: absolute; left: 0; right: 0; bottom: 0; height: var(--s); border-radius: 6px; background: linear-gradient(180deg, var(--green), rgba(47, 216, 138, .35)); }
.hr-bar em { position: absolute; left: 0; right: 0; top: 4px; font-style: normal; color: var(--text); }
.hr-bar .pc { display: none; }
.hr-cloud { border-radius: 5px; background: rgba(169, 186, 214, var(--c, 0)); color: var(--text); line-height: 22px; }
.hr-kp, .hr-moon { line-height: 22px; }
.night-rows { display: grid; grid-template-rows: 20px 120px 22px 22px 22px; gap: 6px; padding: 6px 8px 6px 0; font: 400 .72rem var(--mono); color: var(--dim); text-align: right; }
.night-wrap { display: grid; grid-template-columns: auto 1fr; }
.night-note { font-size: .86rem; color: var(--dim); margin: 12px 0 0; }
.loading { color: var(--dim); font: 400 .9rem var(--mono); padding: 30px 0; }
/* phones: the hours run down the page as rows, so nothing is cut off at the right edge */
@media (max-width: 700px) {
  .night { padding: 18px 14px 14px; }
  .night-head { margin-bottom: 10px; }
  .night-legend { display: none; }
  .night-wrap { display: block; }
  .night-rows { display: none; }
  .night-scroll { overflow: visible; padding: 0; }
  .night-grid { display: grid; grid-auto-flow: row; grid-auto-columns: auto; min-width: 0; gap: 3px; }
  .hr, .hr-head { grid-template-rows: none; grid-template-columns: 38px minmax(0, 1fr) 44px 34px 22px; gap: 8px; align-items: center; padding: 5px 6px; text-align: right; }
  .hr-head { display: grid; font: 500 .66rem var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--dim); padding-bottom: 8px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
  .hr-head > :nth-child(2) { text-align: left; }
  .hr-t { text-align: left; color: var(--text); }
  .hr-bar { height: 24px; }
  .hr-bar i { top: 0; right: auto; height: auto; width: var(--s); border-radius: 6px; background: linear-gradient(90deg, rgba(47, 216, 138, .45), var(--green)); }
  .hr-bar em { top: 0; left: 8px; right: auto; line-height: 24px; text-align: left; text-shadow: 0 1px 2px rgba(0, 0, 0, .6); }
  .hr-bar .pc { display: inline; }
  .hr-cloud { line-height: 24px; text-align: center; }
  .hr-moon { text-align: center; }
}

/* ── Boarding pass (trip odds) ──────────────────────────────────────────────── */
.pass { --notch: 14px; position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 260px; border-radius: 20px; background: #f3efe6; color: #141a26; overflow: hidden; box-shadow: 0 30px 80px rgba(0, 0, 0, .45); }
.pass-main { padding: 28px 32px 26px; }
.pass-top { display: flex; justify-content: space-between; align-items: center; font: 500 .74rem var(--mono); letter-spacing: .12em; text-transform: uppercase; color: #59606e; padding-bottom: 16px; border-bottom: 1px dashed #c9c2b3; margin-bottom: 20px; }
.pass-top b { color: #141a26; }
.pass-fields { display: grid; grid-template-columns: 1.3fr 1fr .7fr; gap: 18px; }
.pass label, .pass .lbl { display: block; font: 500 .7rem var(--mono); letter-spacing: .12em; text-transform: uppercase; color: #6b7280; margin-bottom: 6px; }
.pass select, .pass input { width: 100%; height: 46px; padding: 0 12px; border-radius: 10px; border: 1px solid #d6cfbf; background: #fbf8f2; color: #141a26; font: 500 1rem var(--sans); }
.pass select:focus, .pass input:focus { outline: 2px solid #1f8f5f; outline-offset: 1px; }
.pass-note { margin: 16px 0 0; font-size: .86rem; color: #5b6270; }
/* odds for 1–7 nights in the chosen week: fills the pass and doubles as the nights picker */
.pass-nights { margin-top: 22px; padding-top: 18px; border-top: 1px dashed #c9c2b3; }
.pn-row { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)) auto; gap: 8px; align-items: end; }
.pn { display: grid; grid-template-rows: 18px 64px 20px; gap: 4px; padding: 6px 2px 4px; border: 1px solid transparent; border-radius: 10px; background: none; cursor: pointer; text-align: center; font: inherit; color: #141a26; transition: background .2s, border-color .2s; }
.pn:hover { background: rgba(20, 26, 38, .05); }
.pn.on { background: #fbf8f2; border-color: #d6cfbf; }
.pn b { font: 500 .74rem var(--mono); color: #3b4252; }
.pn-bar { position: relative; display: block; border-radius: 5px; background: rgba(20, 26, 38, .06); overflow: hidden; }
.pn-bar i { position: absolute; left: 0; right: 0; bottom: 0; border-radius: 5px; background: #8fc9aa; transition: height .4s var(--ease); }
.pn.on .pn-bar i { background: #0f6b45; }
.pn.on b { color: #0f6b45; font-weight: 600; }
.pn-n { font: 500 .78rem var(--mono); color: #6b7280; }
.pn-cap { align-self: end; padding-bottom: 6px; font: 500 .68rem var(--mono); letter-spacing: .1em; text-transform: uppercase; color: #6b7280; }
.hide-s { white-space: nowrap; }
.pass-top b { white-space: nowrap; }
.pass-wrap { margin-top: 48px; }
.pass-extra { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; margin-top: 44px; }
.pass-extra h3 { margin-bottom: 12px; }
@media (max-width: 860px) { .pass-extra { grid-template-columns: 1fr; gap: 36px; } }
.pass-stub { position: relative; padding: 26px 28px; border-left: 2px dashed #c9c2b3; display: flex; flex-direction: column; justify-content: space-between; background: #ebe5d8; }
.pass-stub::before, .pass-stub::after { content: ""; position: absolute; left: calc(var(--notch) * -1 - 1px); width: calc(var(--notch) * 2); height: calc(var(--notch) * 2); border-radius: 50%; background: var(--pass-bg, var(--bg)); }
.pass-stub::before { top: calc(var(--notch) * -1); }
.pass-stub::after { bottom: calc(var(--notch) * -1); }
.sec.alt .pass-stub::before, .sec.alt .pass-stub::after { background: var(--bg-2); }
.pass-odds { font: 500 clamp(3.4rem, 6vw, 4.6rem)/1 var(--mono); letter-spacing: -.04em; color: #0f6b45; }
.pass-odds small { font-size: .45em; letter-spacing: 0; }
.pass-what { font-size: .88rem; color: #4b5260; margin: 8px 0 18px; }
.barcode { height: 38px; background: repeating-linear-gradient(90deg, #141a26 0 2px, transparent 2px 4px, #141a26 4px 5px, transparent 5px 8px, #141a26 8px 11px, transparent 11px 12px); opacity: .85; border-radius: 2px; }
@media (max-width: 760px) {
  .pass { grid-template-columns: 1fr; }
  .pass-main { padding: 22px 18px; }
  .pass-top .hide-s { display: none; }
  .pass-fields { grid-template-columns: 1fr 1fr; gap: 14px; }
  .pass-fields > :first-child { grid-column: 1 / -1; }
  .pn-row { gap: 4px; grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .pn { grid-template-rows: 16px 54px 18px; padding: 4px 0; }
  .pn b { font-size: .64rem; }
  .pn-cap { grid-column: 1 / -1; justify-self: center; padding: 0; }
  .pass-stub { border-left: 0; border-top: 2px dashed #c9c2b3; }
  .pass-stub::before, .pass-stub::after { top: calc(var(--notch) * -1 - 1px); left: auto; bottom: auto; }
  .pass-stub::before { left: calc(var(--notch) * -1); }
  .pass-stub::after { right: calc(var(--notch) * -1); }
}

/* ── Polar map ──────────────────────────────────────────────────────────────── */
.map-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.map { position: relative; aspect-ratio: 1; max-width: 640px; width: 100%; margin-inline: auto; }
.map svg { width: 100%; height: 100%; overflow: visible; }
.map .sea { fill: #070e1c; stroke: var(--line-2); stroke-width: 2; }
.map .land { fill: #1c2b49; stroke: #34486f; stroke-width: 1.2; stroke-linejoin: round; }
.map .grat { fill: none; stroke: rgba(163, 176, 200, .14); stroke-width: 1.2; stroke-dasharray: 3 7; }
.map .grat-label { fill: var(--dim); font: 400 15px var(--mono); }
.map .oval { fill: none; stroke: var(--green); stroke-width: 5; stroke-linejoin: round; filter: url(#glow); opacity: .95; }
.map .oval-band { fill: rgba(94, 242, 168, .07); fill-rule: evenodd; }
.map .pin circle { fill: var(--v, var(--dim)); stroke: #070e1c; stroke-width: 3; transition: r .2s; }
.map .pin:hover circle, .map .pin:focus circle { r: 12; }
.map .pin:focus { outline: none; }
.map .labels text { fill: var(--text); font: 500 21px var(--sans); paint-order: stroke; stroke: #070e1c; stroke-width: 6px; stroke-linejoin: round; pointer-events: none; transition: opacity .2s; }
.map .labels text.hover { opacity: 0; }
.map .labels text.on { opacity: 1; fill: var(--green); }
@media (max-width: 700px) {
  .map .labels text { font-size: 30px; stroke-width: 8px; }
  .map .labels text.wide { opacity: 0; }
  .map .labels text.wide.on { opacity: 1; }
  .map .grat-label { display: none; }
}
/* 3D globe (WebGL) over the flat map; the SVG stays as the no-WebGL fallback */
.map.has-globe > svg { display: none; }
.globe { position: absolute; inset: 0; touch-action: pan-y; cursor: grab; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
.globe[hidden] { display: none; }
.globe.dragging { cursor: grabbing; }
.globe canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.globe-pins { position: absolute; inset: 0; pointer-events: none; }
.gpin { position: absolute; left: 0; top: 0; width: 0; height: 0; pointer-events: auto; color: var(--text); text-decoration: none; will-change: transform; }
.gpin i { position: absolute; left: -5px; top: -5px; width: 10px; height: 10px; border-radius: 50%; background: var(--v, var(--dim)); box-shadow: 0 0 0 2px #070e1c, 0 0 12px color-mix(in srgb, var(--v, transparent) 70%, transparent); transform: scale(var(--s, 1)); transition: transform .2s var(--ease); }
.gpin i::after { content: ""; position: absolute; inset: -8px; border-radius: 50%; }
.gpin span { position: absolute; left: 10px; top: -10px; font: 500 .82rem/20px var(--sans); white-space: nowrap; color: var(--text); text-shadow: 0 0 4px #050a14, 0 0 4px #050a14, 0 1px 2px #000; opacity: 0; transition: opacity .2s; pointer-events: none; }
.gpin.left span { left: auto; right: 10px; }
.gpin.lbl { z-index: 2; }
.gpin.lbl span, .gpin:hover span, .gpin:focus-visible span { opacity: 1; }
.gpin.lbl.nolbl:not(:hover) span { opacity: 0; }
.gpin:hover, .gpin:focus-visible { z-index: 3; color: var(--text); }
.gpin:hover i, .gpin:focus-visible i { transform: scale(calc(var(--s, 1) * 1.5)); }
.gpin:hover span { color: var(--v, var(--green)); }
.gpin:focus-visible { outline: none; }
/* place highlighted from the "Best bets tonight" list: bigger dot, pulsing ring, name always on */
.gpin.hl { z-index: 4; }
.gpin.hl i { transform: scale(calc(var(--s, 1) * 1.6)); }
.gpin.hl i::before { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--v, var(--green)); animation: gpulse 1.4s var(--ease) infinite; }
.gpin.hl span, .gpin.lbl.nolbl.hl span { opacity: 1; color: var(--v, var(--green)); font-weight: 600; }
@keyframes gpulse { from { transform: scale(.7); opacity: 1; } to { transform: scale(2.4); opacity: 0; } }
.best-list li a.hl { background: rgba(255, 255, 255, .04); padding-left: 10px; }
@media (prefers-reduced-motion: reduce) { .gpin.hl i::before { animation: none; transform: scale(1.6); } }
.globe-hint { position: absolute; left: 50%; bottom: 0; translate: -50% 0; margin: 0; padding: 5px 12px; border-radius: 999px; background: rgba(10, 16, 29, .7); border: 1px solid var(--line); font: 400 .72rem var(--mono); color: var(--muted); white-space: nowrap; pointer-events: none; transition: opacity .4s; }
.globe.used .globe-hint { opacity: 0; }
@media (max-width: 700px) {
  .gpin i { left: -4px; top: -4px; width: 8px; height: 8px; box-shadow: 0 0 0 1.5px #070e1c, 0 0 8px color-mix(in srgb, var(--v, transparent) 70%, transparent); }
  .gpin span { font-size: .74rem; left: 8px; }
  .gpin.left span { right: 8px; }
  .gpin.wide span { opacity: 0; }
  .gpin.wide:hover span { opacity: 1; }
}

.kp-now { display: flex; align-items: baseline; gap: 14px; margin-bottom: 18px; }
.kp-now b { font: 500 3.2rem/1 var(--mono); color: var(--green); }
.legend { display: flex; flex-wrap: wrap; gap: 10px 18px; font-size: .9rem; color: var(--muted); margin: 18px 0 26px; }
.legend span { display: inline-flex; align-items: center; gap: 8px; }
.best-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.best-list li a { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; padding: 14px 4px; border-bottom: 1px solid var(--line); color: var(--text); text-decoration: none; transition: background .2s, padding .2s; }
.best-list li a:hover { background: rgba(255, 255, 255, .03); padding-left: 10px; }
.best-list small { color: var(--dim); }
.best-list b { font: 500 .95rem var(--mono); color: var(--v, var(--muted)); }
.best-list.plain li a { grid-template-columns: 1fr auto; }
.best-list.plain b { color: var(--green); }
.best-list .empty { padding: 14px 4px; color: var(--muted); border-bottom: 1px solid var(--line); }
@media (max-width: 900px) { .map-grid { grid-template-columns: 1fr; gap: 36px; } }

/* ── Cards, tables, charts ──────────────────────────────────────────────────── */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 18px; }
.card { position: relative; padding: 26px; border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); transition: transform .3s var(--ease), border-color .3s; }
.card:hover { transform: translateY(-4px); border-color: var(--line-2); }
.card h3 { margin-bottom: .4em; }
.card p:last-child { margin-bottom: 0; }
.card .big { font: 500 2.4rem/1 var(--mono); color: var(--green); margin-bottom: 10px; }
a.card { color: var(--text); text-decoration: none; display: block; }
a.card:hover { color: var(--text); border-color: rgba(94, 242, 168, .45); }
a.card.place-card { display: flex; flex-direction: column; gap: 4px; }
.place-card .row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.place-card h3 { margin: 0; }
.place-card .row h3 { margin: 0; }
.place-card small { display: block; color: var(--dim); font-size: .84rem; line-height: 1.45; }
.place-card .rank { font: 500 .78rem var(--mono); color: var(--dim); }
.place-card .odds { font: 500 1.5rem var(--mono); color: var(--green); }
.place-card .odds small { display: inline; font-size: .8rem; color: var(--dim); margin-left: 2px; }
.meter { height: 4px; border-radius: 4px; background: rgba(255, 255, 255, .06); overflow: hidden; margin: 10px 0 10px; }
.meter i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, rgba(47, 216, 138, .5), var(--green)); transform-origin: left; transition: transform 1s var(--ease); }
.js .rv:not(.in) .meter i { transform: scaleX(0); }

/* tables: on phones the first column sticks and a fade shows there is more to the right */
.tbl { position: relative; }
.tbl::before, .tbl::after { content: ""; position: absolute; top: 1px; bottom: 1px; width: 34px; pointer-events: none; opacity: 0; transition: opacity .25s; z-index: 3; }
.tbl::after { right: 1px; border-radius: 0 var(--r) var(--r) 0; background: linear-gradient(270deg, rgba(6, 10, 18, .9), transparent); }
.tbl::before { left: 1px; border-radius: var(--r) 0 0 var(--r); background: linear-gradient(90deg, rgba(6, 10, 18, .6), transparent); }
.tbl.more-r::after { opacity: 1; }
.table-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
table.data { width: 100%; border-collapse: collapse; font-size: .95rem; }
table.data th, table.data td { padding: 12px 14px; text-align: right; border-bottom: 1px solid var(--line); white-space: nowrap; }
table.data tbody tr:last-child td { border-bottom: 0; }
table.data th:first-child, table.data td:first-child { text-align: left; }
table.data thead th { font: 500 .72rem var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--dim); background: var(--panel-2); }
table.data td { font-family: var(--mono); }
table.data td:first-child { font-family: var(--sans); }
table.data td a { color: var(--text); text-decoration: none; }
table.data td a:hover { color: var(--green); }
table.data tbody tr:hover { background: rgba(255, 255, 255, .025); }
table.data .sub { color: var(--dim); font-size: .88em; margin-left: 4px; }
table.data .n { display: inline-block; min-width: 1.9em; font: 500 .8rem var(--mono); color: var(--dim); }
td.heat { background: rgba(94, 242, 168, calc(.05 + var(--h) * .42)); color: var(--text); }
td.na { color: var(--dim); }
td .pc { opacity: .7; }
@media (max-width: 700px) {
  table.data { font-size: .86rem; }
  table.data th, table.data td { padding: 11px 8px; }
  table.data thead th { white-space: normal; font-size: .62rem; letter-spacing: .05em; vertical-align: bottom; line-height: 1.3; }
  table.data th:first-child, table.data td:first-child { position: sticky; left: 0; z-index: 2; background: var(--panel); padding-left: 12px; box-shadow: 1px 0 0 var(--line); }
  table.data thead th:first-child { background: var(--panel-2); }
  table.data .sub { display: block; margin: 1px 0 0; font-size: .76rem; }
  table.data .n { min-width: 1.6em; }
  table.data.rank .n { display: none; }
  table.data .opt, table.data .edge { display: none; }
  table.data.hm td, table.data.hm th { padding-inline: 5px; text-align: center; }
  table.data.hm td:first-child, table.data.hm th:first-child { text-align: left; padding-left: 12px; white-space: normal; min-width: 92px; }
  table.data.hm .pc { display: none; }
}

/* week-by-week chart (HTML so the text stays readable at any width) */
.wk { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 10px; }
.wk-y { display: flex; flex-direction: column; justify-content: space-between; height: 220px; font: 400 .7rem var(--mono); color: var(--dim); text-align: right; }
.wk-y span { line-height: 0; }
.wk-bars { position: relative; display: flex; align-items: flex-end; gap: 3px; height: 220px; border-bottom: 1px solid var(--line-2); background: repeating-linear-gradient(180deg, rgba(163, 176, 200, .1) 0 1px, transparent 1px 25%); }
.wk-bars i { position: relative; flex: 1 1 0; min-width: 0; height: var(--v); min-height: 2px; border-radius: 3px 3px 1px 1px; background: rgba(94, 242, 168, .42); transition: background .2s; }
.wk-bars i.top { background: var(--green); }
.wk-bars i.na { height: 0; min-height: 0; background: none; }
.wk-bars i:hover { background: #9cf8cb; }
.wk-bars i b { position: absolute; bottom: calc(100% + 6px); left: 50%; translate: -50% 0; padding: 3px 8px; border-radius: 6px; background: var(--panel-2); border: 1px solid var(--line-2); font: 500 .72rem var(--mono); color: var(--text); white-space: nowrap; display: none; pointer-events: none; z-index: 2; }
.wk-bars i:hover b { display: block; }
.wk-bars i:first-child b { left: 0; translate: 0 0; }
.wk-bars i:last-child b { left: auto; right: 0; translate: 0 0; }
.wk-x { position: relative; height: 26px; }
.wk-x span { position: absolute; top: 8px; font: 400 .72rem var(--mono); color: var(--dim); }
@media (max-width: 700px) {
  .wk { grid-template-columns: 30px minmax(0, 1fr); gap: 6px; }
  .wk-y, .wk-bars { height: 170px; }
  .wk-y { font-size: .62rem; }
  .wk-bars { gap: 1.5px; }
  .wk-x span { font-size: .62rem; }
}

.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: start; }
.split.stretch { align-items: stretch; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; gap: 32px; } }
.photo-panel { position: relative; margin: 0; border-radius: 20px; overflow: hidden; border: 1px solid var(--line); }
.photo-panel img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; }
.split.stretch .photo-panel img { aspect-ratio: auto; min-height: 360px; }
.photo-panel figcaption { position: absolute; left: 16px; right: 16px; bottom: 16px; padding: 16px 18px; border-radius: 14px; background: rgba(6, 10, 18, .78); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, .08); color: var(--muted); font-size: .92rem; }
.photo-panel figcaption b { display: block; font: 500 1.9rem/1.1 var(--mono); color: var(--green); margin-bottom: 4px; }
@media (max-width: 900px) { .split.stretch .photo-panel img { aspect-ratio: 4 / 3; min-height: 0; } }

/* rare places: every good night by year */
.seen { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin-top: 22px; align-items: start; }
.seen-y { padding: 16px 16px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); transition: border-color .3s, transform .3s var(--ease); }
.seen-y:hover { border-color: var(--line-2); transform: translateY(-3px); }
.seen-y.none { opacity: .55; }
.seen-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.seen-top b { font: 500 1.05rem var(--mono); }
.seen-top span { font-size: .82rem; color: var(--muted); }
.seen-y .meter { margin: 10px 0 8px; }
.seen-y ul { list-style: none; margin: 0; padding: 0; font-size: .86rem; }
.seen-y li { display: flex; justify-content: space-between; gap: 6px; padding: 3px 0; }
.seen-y li small, .seen-list small { font: 400 .74rem var(--mono); color: var(--dim); }
.seen-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px 24px; }
.seen-list li { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--line); }

/* storm-alert sign-up (place pages); hidden until the Worker turns alerts on */
.alert-box { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 18px 32px; align-items: center; margin-top: 22px; padding: 26px 28px; border: 1px solid rgba(94, 242, 168, .28); border-radius: 18px; background: radial-gradient(520px 200px at 0% 0%, rgba(94, 242, 168, .12), transparent 70%), var(--panel); }
.alert-box[hidden] { display: none; }
.alert-box h2 { font-size: clamp(1.45rem, 2.4vw, 1.8rem); margin: 0 0 .35em; }
.alert-box .ab-text p { margin: 0; color: var(--muted); font-size: .95rem; }
.ab-fields { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto; gap: 10px; }
.ab-fields input, .ab-fields select { height: 50px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--line-2); background: rgba(6, 10, 18, .6); color: var(--text); font: 500 .98rem var(--sans); min-width: 0; }
.ab-fields input:focus, .ab-fields select:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px rgba(94, 242, 168, .15); }
.ab-fields .btn { height: 50px; justify-content: center; }
.ab-fields .btn:disabled { opacity: .6; cursor: wait; }
.ab-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.ab-msg { grid-column: 1 / -1; margin: 0; min-height: 0; font-size: .95rem; }
.ab-msg:empty { display: none; }
.ab-msg.ok { color: var(--green); }
.ab-msg.err { color: var(--orange); }
.ab-fine { grid-column: 1 / -1; margin: -6px 0 0; font-size: .8rem; color: var(--dim); }
.alert-box.done .ab-fields { opacity: .5; }
@media (max-width: 860px) {
  .alert-box { grid-template-columns: 1fr; padding: 22px 18px; }
  .ab-fields { grid-template-columns: 1fr 1fr; }
  .ab-fields input[type="email"] { grid-column: 1 / -1; }
}
.alerts-page .btn { margin-top: 10px; }
.alerts-page [data-alert-msg] { margin-top: 12px; color: var(--orange); }

/* aurora tours */
.tour-panel { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 40px; align-items: center; padding: 44px 48px; border: 1px solid var(--line-2); border-radius: 22px; background: radial-gradient(600px 260px at 0% 0%, rgba(94, 242, 168, .1), transparent 70%), var(--panel); }
.tour-panel h2 { font-size: clamp(1.9rem, 3.4vw, 2.6rem); }
.tour-panel p { color: var(--muted); margin: 0; max-width: 52ch; }
.tour-panel .tours { margin: 0; justify-content: flex-end; }
@media (max-width: 860px) {
  .tour-panel { grid-template-columns: 1fr; gap: 24px; padding: 28px 22px; }
  .tour-panel .tours { justify-content: flex-start; }
  .tour-panel .btn { flex: 1 1 auto; justify-content: center; }
}

.steps { counter-reset: s; display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.split .steps { grid-template-columns: 1fr; }
.steps .card::before { counter-increment: s; content: counter(s, decimal-leading-zero); display: block; font: 500 .8rem var(--mono); color: var(--green); margin-bottom: 14px; }

.prose { font-size: 1.04rem; }
.prose h2 { margin-top: 1.6em; font-size: clamp(1.8rem, 3.4vw, 2.5rem); }
.prose h3 { margin-top: 1.4em; }
.prose ul, .prose ol { padding-left: 1.2em; }
.prose li { margin-bottom: .4em; }
.prose .table-scroll { margin: 1.4em 0; }
.callout { border-left: 3px solid var(--green); background: var(--panel); padding: 18px 22px; border-radius: 0 12px 12px 0; margin: 1.4em 0; }

.tours { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }

/* ── Tour bar under the answer card (place + month pages; #tours = header button target) ── */
.tour-strip { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px 28px; align-items: center; margin-top: 18px; padding: 22px 26px; border: 1px solid rgba(94, 242, 168, .35); border-radius: 18px; background: radial-gradient(520px 200px at 0% 0%, rgba(94, 242, 168, .13), transparent 70%), var(--panel); scroll-margin-top: 96px; transition: border-color .3s, transform .3s var(--ease); }
.tour-strip:hover { border-color: rgba(94, 242, 168, .6); }
.tour-strip:target { animation: ts-flash 1.6s var(--ease); }
@keyframes ts-flash { 0%, 40% { box-shadow: 0 0 0 4px rgba(94, 242, 168, .35); } 100% { box-shadow: 0 0 0 0 rgba(94, 242, 168, 0); } }
.ts-text b { display: block; font: 400 1.55rem/1.15 var(--serif); margin-bottom: 4px; }
.ts-text span { color: var(--muted); font-size: .96rem; }
.ts-btns { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }
.tour-strip .aff-note { grid-column: 1 / -1; margin: -4px 0 0; }
@media (max-width: 760px) {
  .tour-strip { grid-template-columns: 1fr; padding: 20px; }
  .ts-btns { justify-content: stretch; }
  .ts-btns .btn { flex: 1 1 auto; justify-content: center; }
}

/* ── Tour links on the trip-odds pass (light card, so dark buttons) ── */
.pass-tours { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 16px; padding-top: 16px; border-top: 1px dashed #d6cfbf; font-size: .92rem; color: #3b4250; }
.pass-tours[hidden] { display: none; }
.pt-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.pass-tours .btn { padding: 10px 16px; font-size: .9rem; }
.btn-dark { background: #141a26; color: #f3efe6; }
.btn-dark:hover { background: #1f8f5f; color: #fff; }
.btn-line { border-color: #c9c2b3; color: #141a26; background: transparent; }
.btn-line:hover { border-color: #141a26; color: #141a26; }

/* ── Tours hub (/tours/) ── */
.tour-tips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 34px; }
.tour-tips > div { padding: 18px 20px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); transition: border-color .3s, transform .3s var(--ease); }
.tour-tips > div:hover { border-color: var(--line-2); transform: translateY(-3px); }
.tour-tips b { display: block; margin-bottom: 4px; }
.tour-tips span { color: var(--muted); font-size: .92rem; }
.tour-cards { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); } /* 3 across on desktop: 21 = 7 full rows */
.tour-card { display: flex; flex-direction: column; gap: 4px; }
.tour-card h3 { margin: 6px 0 0; }
.tour-card h3 a { color: var(--text); text-decoration: none; }
.tour-card h3 a:hover { color: var(--green); }
.tour-card small { color: var(--dim); font-size: .84rem; }
.tc-btns { display: flex; gap: 8px; margin-top: 14px; }
.tc-btns .btn { flex: 1 1 0; justify-content: center; padding: 11px 12px; font-size: .9rem; }
.tc-more { margin-top: 12px; font-size: .86rem; }
@media (max-width: 760px) { .tour-tips { grid-template-columns: 1fr; } }
.aff-note { font: 400 .74rem var(--mono); color: var(--dim); margin-left: 6px; }

/* ── Month switch, Kp bars, alternatives ────────────────────────────────────── */
.month-switch { display: flex; flex-wrap: wrap; gap: 8px; margin: 28px 0 22px; }
.month-switch button { padding: 9px 16px; border-radius: 999px; border: 1px solid var(--line-2); background: transparent; color: var(--muted); font: 500 .92rem var(--sans); cursor: pointer; transition: border-color .2s, color .2s, background .2s; }
.month-switch button:hover { border-color: var(--green); color: var(--text); }
.month-switch button[aria-pressed="true"] { background: var(--green); border-color: var(--green); color: #03110a; }
/* month pages: the switch is links, each with its 4-night odds */
.month-switch a { padding: 8px 15px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--muted); font: 500 .92rem var(--sans); text-decoration: none; transition: border-color .2s, color .2s, background .2s, transform .2s var(--ease); }
.month-switch a b { font: 500 .8rem var(--mono); margin-left: 4px; color: var(--dim); }
.month-switch a:hover { border-color: var(--green); color: var(--text); transform: translateY(-2px); }
.month-switch a[aria-current="page"] { background: var(--green); border-color: var(--green); color: #03110a; }
.month-switch a[aria-current="page"] b { color: #03110a; }

/* ── Month pages ─────────────────────────────────────────────────────────────── */
.answer.mo .answer-verdict { color: var(--green); }
.answer-chance b small { font-size: .42em; color: var(--muted); letter-spacing: 0; }
.live-chip { display: inline-flex; align-items: center; gap: 9px; padding: 6px 14px; border: 1px solid var(--line-2); border-radius: 999px; color: var(--text); font: 400 .82rem var(--sans); text-decoration: none; transition: border-color .2s, transform .2s var(--ease); }
.live-chip b { font: 500 .82rem var(--mono); color: var(--v, var(--muted)); }
.live-chip:hover { border-color: var(--v, var(--green)); transform: translateY(-2px); }
.stays { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; }
.stay { padding: 16px 14px 8px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); transition: border-color .3s, transform .3s var(--ease); }
.stay:hover { border-color: var(--line-2); transform: translateY(-3px); }
.stay.pick { border-color: rgba(94, 242, 168, .55); }
.stay b { display: block; font: 500 1.45rem/1.1 var(--mono); color: var(--green); }
.stay span { font-size: .84rem; color: var(--muted); }
.wkrows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); max-width: 720px; }
.wkrows li { display: grid; grid-template-columns: 9.5em minmax(0, 1fr) 3.4em; gap: 14px; align-items: center; padding: 11px 4px; border-bottom: 1px solid var(--line); font-size: .92rem; transition: background .2s, padding .2s; }
.wkrows li:hover { background: rgba(255, 255, 255, .03); padding-left: 10px; }
.wkrows .meter { margin: 0; }
.wkrows b { font: 500 .95rem var(--mono); color: var(--green); text-align: right; }
@media (max-width: 760px) {
  .stays { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
  .stay { padding: 12px 10px 6px; }
  .stay b { font-size: 1.2rem; }
  .wkrows li { grid-template-columns: 8.2em minmax(0, 1fr) 3em; gap: 10px; font-size: .86rem; }
}
/* Kp page: three headline numbers + one card per day */
.kp-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 30px; border: 1px solid var(--line-2); border-radius: 18px; background: var(--panel); overflow: hidden; }
.kp-stats > div { padding: 22px 26px; border-right: 1px solid var(--line); }
.kp-stats > div:last-child { border-right: 0; }
.kp-stats b { display: block; font: 500 2.6rem/1 var(--mono); color: var(--green); margin-bottom: 10px; }
.kp-stats span { display: block; font-size: .86rem; color: var(--muted); line-height: 1.45; }
.kp-days { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; margin-top: 26px; }
.kd { padding: 16px 14px 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--bg-2); }
.kd.is-today { border-color: rgba(94, 242, 168, .4); }
.kd-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 12px; }
.kd-head b { font-weight: 600; }
.kd-head span { font-size: .84rem; color: var(--dim); }
.kd-head em { margin-left: auto; font: 500 .78rem var(--mono); font-style: normal; color: var(--green); }
.kd-head em.storm { color: var(--amber); }
.kd-bars { position: relative; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 4px; height: 150px; }
.kd-bars::after { content: ""; position: absolute; left: 0; right: 0; bottom: calc(32px + (100% - 32px) * 5 / 9); border-top: 1px dashed rgba(255, 198, 92, .55); pointer-events: none; }
.kd-b { grid-row: 1; display: grid; grid-template-rows: minmax(0, 1fr) 16px 16px; text-align: center; font: 400 .64rem var(--mono); color: var(--dim); }
.kd-b > i { align-self: end; display: block; border-radius: 4px 4px 1px 1px; background: var(--green); }
.kd-b.pred > i { background: repeating-linear-gradient(135deg, rgba(94, 242, 168, .75) 0 3px, rgba(94, 242, 168, .3) 3px 6px); }
.kd-b.storm > i { background: var(--amber); }
.kd-b.now > i { box-shadow: 0 0 0 2px var(--text); }
.kd-b span { color: var(--text); line-height: 16px; }
.kd-b small { line-height: 16px; }
@media (max-width: 700px) {
  .kp-stats { grid-template-columns: 1fr 1fr; }
  .kp-stats > div { padding: 18px; }
  .kp-stats > div:nth-child(2) { border-right: 0; }
  .kp-stats > div:last-child { grid-column: 1 / -1; border-top: 1px solid var(--line); }
  .kp-stats b { font-size: 2.1rem; }
  .kd-bars { height: 124px; }
}

/* ── FAQ: one open at a time, smooth height ─────────────────────────────────── */
.faq { max-width: 820px; margin-inline: auto; }
.faq .sec-head { text-align: center; margin-inline: auto; }
.qa { border-bottom: 1px solid var(--line); }
.qa .q { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 22px 4px; background: none; border: 0; color: var(--text); font: 400 1.4rem/1.25 var(--serif); text-align: left; cursor: pointer; }
.qa .q::after { content: "+"; flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line-2); font: 400 1.2rem/1 var(--sans); color: var(--green); transition: transform .35s var(--ease), background .3s; }
.qa.open .q::after { transform: rotate(45deg); background: rgba(94, 242, 168, .1); }
.qa .a { overflow: hidden; color: var(--muted); }
.faqjs .qa .a { max-height: 0; transition: max-height .45s var(--ease); }
.qa .a > div { padding: 0 4px 24px; }

/* ── Footer ─────────────────────────────────────────────────────────────────── */
.site-foot { border-top: 1px solid var(--line); background: #04070d; padding: 72px 0 28px; color: var(--muted); font-size: .94rem; }
.foot-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.3fr; gap: 36px; }
.foot-grid h2 { font: 500 .74rem var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--dim); margin-bottom: 14px; }
.foot-grid a:not(.brand) { display: block; color: var(--muted); text-decoration: none; padding: 4px 0; }
.foot-grid a:not(.brand):hover { color: var(--text); }
.foot-note { margin-top: 16px; max-width: 34ch; }
.credits { font-size: .86rem; }
.foot-base { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 48px; padding-top: 22px; border-top: 1px solid var(--line); font: 400 .78rem var(--mono); color: var(--dim); }
.foot-base a { color: var(--muted); text-decoration: none; }
.foot-base a:hover { color: var(--text); }
@media (max-width: 860px) { .foot-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .foot-grid { grid-template-columns: 1fr; } }

/* ── Reveal on scroll (class sits on wrappers so card hovers still work) ───── */
.js .rv { opacity: 0; transform: translateY(22px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.js .rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .rv { opacity: 1; transform: none; transition: none; }
  * { transition-duration: .01ms !important; }
}

/* ── Mobile fixes 2026-11-04 ─────────────────────────────────────────────────
   Tables that don't fit a phone become stacked cards (app.js adds .tstack only when the table
   would scroll sideways), so nothing reads as cut off. */
.tbl.tstack::before, .tbl.tstack::after { display: none; }
.tstack .table-scroll { overflow: visible; border: 0; background: none; border-radius: 0; }
.tstack table { min-width: 0; width: 100%; }
.tstack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.tstack tbody, .tstack tr { display: block; }
.tstack tr { background: var(--panel); border: 1px solid var(--line-2); border-radius: 12px; padding: 4px 16px; margin-bottom: 10px; }
.tstack table.data td, .tstack table.data tbody th { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 8px 0; border: 0; border-top: 1px dashed var(--line-2); text-align: right; white-space: normal; }
.tstack table.data td::before, .tstack table.data tbody th::before { content: attr(data-label); flex: none; max-width: 60%; text-align: left; font: 500 .7rem/1.5 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.tstack table.data tr > :first-child { display: block; border-top: 0; padding-top: 11px; font-weight: 600; text-align: left; }
.tstack table.data tr > :first-child::before, .tstack table.data td[data-label=""]::before, .tstack table.data td:not([data-label])::before { content: none; }
.tstack table.data tr > :first-child { position: static; border-right: 0; box-shadow: none; background: none; }

/* ── Solar eclipse 2027 (/eclipse-2027/) ──────────────────────────────────────
   Totality = amber (the corona), partial = slate; the site's green stays for "clear sky". */
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ecl-hero { background: radial-gradient(900px 420px at 80% -10%, rgba(255, 198, 92, .1), transparent 70%), var(--bg); }
.ecl-hero .lede { max-width: 62ch; font-size: 1.12rem; margin-top: 4px; }
.ecl-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 30px; border: 1px solid var(--line-2); border-radius: 18px; background: var(--panel); overflow: hidden; }
.ecl-facts div { padding: 20px 24px; border-right: 1px solid var(--line); }
.ecl-facts div:last-child { border-right: 0; }
.ecl-facts b { display: block; font: 500 1.5rem/1.2 var(--mono); color: var(--amber); }
.ecl-facts span { font-size: .86rem; color: var(--muted); }
@media (max-width: 860px) {
  .ecl-facts { grid-template-columns: 1fr 1fr; }
  .ecl-facts div:nth-child(2) { border-right: 0; }
  .ecl-facts div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .ecl-facts div { padding: 16px 18px; }
  .ecl-facts b { font-size: 1.2rem; }
}

.ecl-answer.total { --v: var(--amber); }
.ecl-answer.near { --v: var(--orange); }
.ecl-answer.partial { --v: var(--slate); }
.ecl-answer .answer-verdict { color: var(--v); }
.ecl-answer .answer-chance b { color: var(--green); }
.ecl-answer .answer-reason b { color: var(--text); font-weight: 600; }

/* checker + overview map */
.ecl-check-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 48px; align-items: start; }
.ecl-check .finder { margin-top: 18px; }
.ecl-result { margin-top: 22px; padding: 24px 26px; border: 1px solid var(--line-2); border-radius: 18px; background: var(--panel); min-height: 150px; }
.er-hint { color: var(--muted); margin: 0; }
.er-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-bottom: 6px; }
.er-head b { font: 400 1.7rem/1.1 var(--serif); }
.er-head span { font: 400 .78rem var(--mono); color: var(--dim); }
.er-verdict { font: 400 clamp(1.7rem, 3.4vw, 2.3rem)/1.1 var(--serif); margin: 0 0 14px; }
.er-verdict.total { color: var(--amber); }
.er-verdict.near { color: var(--orange); }
.er-verdict.partial, .er-verdict.none { color: var(--slate); }
.er-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin: 0; border-top: 1px solid var(--line); }
.er-facts div { padding: 10px 0; border-bottom: 1px solid var(--line); }
.er-facts div:nth-child(odd) { padding-right: 14px; }
.er-facts dt { font: 500 .7rem var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--dim); }
.er-facts dd { margin: 2px 0 0; font: 500 1rem var(--mono); }
.er-facts small { color: var(--dim); font-size: .78rem; }
.er-note { font-size: .84rem; color: var(--dim); margin: 12px 0 0; }
.ecl-result .more { margin-top: 14px; }
.finder-list .empty { padding: 11px 14px; color: var(--muted); }
@media (max-width: 900px) { .ecl-check-grid { grid-template-columns: 1fr; gap: 32px; } }
@media (max-width: 420px) { .ecl-result { padding: 20px 18px; } .er-facts { grid-template-columns: 1fr; } .er-facts div:nth-child(odd) { padding-right: 0; } }

/* maps */
.emap-wrap { margin: 0; }
.emap { width: 100%; height: auto; border: 1px solid var(--line-2); border-radius: 18px; background: #081120; }
svg[data-emap] { cursor: crosshair; }
.emap .sea { fill: #081120; }
.emap .land { fill: #172238; stroke: #2a3a5a; stroke-width: .8; stroke-linejoin: round; }
.emap .border { fill: none; stroke: #3a4a6a; stroke-width: .8; stroke-dasharray: 3 3; }
.emap .band { fill: rgba(255, 198, 92, .26); }
.emap .edge { fill: none; stroke: var(--amber); stroke-width: 1.6; }
.emap .cl { fill: none; stroke: var(--amber); stroke-width: 1.2; stroke-dasharray: 7 6; opacity: .85; }
.emap .cov { fill: none; stroke: #8494b3; stroke-width: 1.1; stroke-dasharray: 2 5; stroke-linecap: round; opacity: .8; }
.emap .cov-l { font: 500 15px var(--mono); fill: #a3b0c8; paint-order: stroke; stroke: #081120; stroke-width: 4px; }
.emap .tdot circle { fill: #0e1626; stroke: #8494b3; stroke-width: 2; transition: fill .2s; }
.emap .tdot.in circle { fill: var(--amber); stroke: #081120; stroke-width: 1.5; }
.emap .tdot.me circle { fill: var(--green); stroke: #04110a; stroke-width: 2.5; }
.emap .tdot:hover circle, .emap .tdot:focus-visible circle { fill: var(--green); }
.emap .tlbl { font: 500 17px var(--sans); fill: #e9eef7; paint-order: stroke; stroke: #081120; stroke-width: 5px; stroke-linejoin: round; pointer-events: none; }
.emap .tlbl.me { font-weight: 600; fill: var(--green); font-size: 21px; }
.emap .emark circle:first-child { fill: none; stroke: var(--green); stroke-width: 3; }
.emap .emark circle:last-child { fill: var(--green); }
.emap .emark[hidden] { display: none; }
.emap-wrap figcaption { font-size: .84rem; color: var(--dim); margin-top: 10px; }
@media (max-width: 700px) {
  .emap { border-radius: 14px; }
  .emap .tlbl { font-size: 26px; stroke-width: 6px; }
  .emap .tlbl.me { font-size: 30px; }
  .emap .cov-l { font-size: 22px; }
  .emap .tdot circle { stroke-width: 2.5; }
  .emap .tlbl.sm { display: none; }
}

/* minute-by-minute timeline */
.ecl-time { list-style: none; margin: 22px 0 0; padding: 0; border-left: 2px solid var(--line-2); }
.ecl-time li { position: relative; display: grid; grid-template-columns: 7.2em 1fr; gap: 2px 16px; padding: 12px 0 12px 22px; }
.ecl-time li::before { content: ""; position: absolute; left: -7px; top: 19px; width: 12px; height: 12px; border-radius: 50%; background: var(--panel); border: 2px solid var(--slate); }
.ecl-time li.key::before { background: var(--amber); border-color: var(--amber); box-shadow: 0 0 14px rgba(255, 198, 92, .6); }
.ecl-time b { font: 500 1.05rem var(--mono); }
.ecl-time li.key b { color: var(--amber); }
.ecl-time span { font-weight: 600; }
.ecl-time small { grid-column: 2; color: var(--muted); font-size: .88rem; }
@media (max-width: 420px) { .ecl-time li { grid-template-columns: 1fr; } .ecl-time small { grid-column: 1; } }

/* 2 August, year by year */
.ystrip { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--n, 25), minmax(0, 1fr)); gap: 6px; max-width: 980px; }
.ystrip li { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.ystrip b { font: 400 .7rem var(--mono); color: var(--dim); }
.ystrip i { display: block; width: 100%; aspect-ratio: 1; border-radius: 50%; max-width: 30px; }
.ystrip .clear i, .ystrip-key .clear i { background: radial-gradient(circle at 50% 50%, #ffe39a 0 34%, var(--amber) 35% 46%, rgba(255, 198, 92, .2) 47%); }
.ystrip .part i, .ystrip-key .part i { background: radial-gradient(circle at 38% 40%, #ffe39a 0 22%, transparent 23%), radial-gradient(circle at 62% 62%, #a9bad6 0 40%, rgba(169, 186, 214, .25) 41%); }
.ystrip .cloud i, .ystrip-key .cloud i { background: radial-gradient(circle, #7f8ea9 0 46%, rgba(127, 142, 169, .25) 47%); }
.ystrip .na i { background: var(--line); }
.ystrip-key { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 16px; font-size: .86rem; color: var(--muted); }
.ystrip-key span { display: inline-flex; align-items: center; gap: 8px; }
.ystrip-key i { display: inline-block; width: 16px; height: 16px; border-radius: 50%; }
@media (max-width: 900px) { .ystrip { grid-template-columns: repeat(10, minmax(0, 1fr)); row-gap: 14px; } }
@media (max-width: 380px) { .ystrip { gap: 4px; } }

.ecl-card .odds { color: var(--amber); font-size: 1.3rem; }
.ecl-partials { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; }
.ecl-partials a { display: flex; justify-content: space-between; gap: 10px; padding: 11px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); color: var(--text); text-decoration: none; transition: border-color .2s, transform .2s var(--ease); }
.ecl-partials a:hover { border-color: var(--line-2); transform: translateY(-2px); }
.ecl-partials b { font: 500 .9rem var(--mono); color: var(--slate); }

.ecl-safe { margin-top: 40px; padding: 30px 32px; border: 1px solid rgba(255, 198, 92, .35); border-radius: 20px; background: radial-gradient(520px 200px at 0% 0%, rgba(255, 198, 92, .08), transparent 70%), var(--panel); }
.ecl-safe h2 { font-size: clamp(1.7rem, 3vw, 2.2rem); }
.safe-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.safe-grid b { display: block; margin-bottom: 6px; color: var(--amber); }
.safe-grid p { color: var(--muted); margin: 0; font-size: .96rem; }
@media (max-width: 760px) { .ecl-safe { padding: 24px 20px; } .safe-grid { grid-template-columns: 1fr; gap: 16px; } }
.ecl-method { margin-top: 28px; color: var(--muted); font-size: .94rem; }
.ecl-method b { color: var(--text); }
.ecl-stay .tours { justify-content: flex-end; }
.ecl-more { padding: 40px 0; }
.ecl-more p { margin: 0; }
.ecl-more .more { margin-top: 0; }

/* home page teaser */
.ecl-teaser { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 40px; align-items: center; padding: 40px 44px; border: 1px solid rgba(255, 198, 92, .35); border-radius: 22px; background: radial-gradient(600px 260px at 100% 0%, rgba(255, 198, 92, .12), transparent 70%), var(--panel); }
.ecl-teaser h2 { font-size: clamp(1.9rem, 3.4vw, 2.6rem); }
.ecl-teaser p { color: var(--muted); margin: 0; }
.ecl-teaser .ecl-facts { margin: 0; grid-template-columns: 1fr 1fr; }
.ecl-teaser .ecl-facts div:nth-child(2) { border-right: 0; }
.ecl-teaser .ecl-facts div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
@media (max-width: 860px) { .ecl-teaser { grid-template-columns: 1fr; gap: 24px; padding: 28px 22px; } }
.ecl-teaser { color: inherit; text-decoration: none; transition: border-color .3s, transform .3s var(--ease); }
.ecl-teaser:hover { color: inherit; border-color: rgba(255, 198, 92, .6); transform: translateY(-3px); }
.ecl-teaser .more { margin-top: 18px; }
.ecl-card.near .odds { color: var(--orange); }
.ecl-card.partial .odds { color: var(--slate); }
.emap .coast { fill: none; stroke: #4a5f86; stroke-width: 1; stroke-linejoin: round; }
.emap.big .tlbl { font-size: 22px; }
.emap.big .tlbl.me { font-size: 26px; }
@media (max-width: 700px) { .emap.big .tlbl { font-size: 30px; stroke-width: 7px; } .emap.big .tlbl.me { font-size: 34px; } }

/* six nav links: keep them on one line between the phone menu (≤860) and wide screens */
.links > a, .brand span { white-space: nowrap; }
@media (min-width: 861px) and (max-width: 1060px) {
  .nav { gap: 14px; }
  .links { gap: 2px; }
  .links > a { padding: 8px 9px; font-size: .9rem; }
  .links > a[href="/how-it-works/"] { display: none; }
}
.emap .river { fill: none; stroke: #4f86c2; stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.ystrip .na i, .ystrip-key .na i { background: none; border: 1.5px dashed var(--line-2); box-sizing: border-box; }
.ecl-card .odds { white-space: nowrap; }
.tc-hotel { display: block; }
.tc-hotel + .tc-more { margin-top: 6px; }

/* ── 2026-11-05: Will I See for every sky event ─────────────────────────────── */
/* header: section links + the "Will I see…?" chooser (replaces "Book a tour") */
.chooser { position: relative; margin-left: 6px; }
.chooser .nav-cta { margin-left: 0; gap: 8px; }
.chooser .chev { width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .25s var(--ease); }
.chooser .nav-cta[aria-expanded="true"] .chev { transform: translateY(1px) rotate(-135deg); }
.chooser-panel { position: absolute; right: 0; top: calc(100% + 12px); width: 370px; padding: 10px; background: var(--panel); border: 1px solid var(--line-2); border-radius: 18px; box-shadow: 0 28px 70px rgba(0, 0, 0, .55); z-index: 60; }
.chooser-panel[hidden] { display: none; }
.ch-lbl { margin: 4px 10px 8px; font: 500 .72rem var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
.ch-item { display: grid; grid-template-columns: 40px 1fr; gap: 12px; align-items: center; padding: 10px; border-radius: 12px; color: var(--text); text-decoration: none; transition: background .2s; }
a.ch-item:hover, a.ch-item[aria-current="page"] { background: rgba(94, 242, 168, .08); color: var(--text); }
.ch-item b { display: block; font: 400 1.25rem/1.15 var(--serif); }
.ch-item small { display: block; color: var(--muted); font-size: .84rem; margin-top: 2px; }
.ch-ico { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--bg-2); border: 1px solid var(--line); color: var(--green); }
.ch-ico svg { width: 22px; height: 22px; }
.ch-ico.ecl, .ch-ico.all { color: var(--amber); }
.ch-item.soon { opacity: .5; }
.ch-foot { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 8px 0 0; padding: 12px 10px 4px; border-top: 1px solid var(--line); font-size: .86rem; color: var(--dim); }
.ch-foot a { color: var(--green); text-decoration: none; }
.ch-foot a:hover { text-decoration: underline; }
.menu-extra .me-lbl { font: 500 .72rem var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--dim); margin: 0 0 6px; }
.menu-extra a { display: block; padding: 8px 0; color: var(--green); font-size: 1.05rem; text-decoration: none; }
@media (max-width: 860px) {
  .chooser { margin-left: auto; }
  .chooser + .burger { margin-left: 10px; }
  .chooser-panel { position: fixed; left: 16px; right: 16px; top: 74px; width: auto; max-height: calc(100dvh - 90px); overflow-y: auto; }
}
@media (max-width: 360px) { .chooser + .burger { margin-left: 8px; } }
@media (min-width: 861px) and (max-width: 1060px) { .links > a[href="/how-it-works/"] { display: inline; } .links > a:nth-of-type(5) { display: none; } }

/* the all-events home */
.hub-hero { padding: 64px 0 56px; background: radial-gradient(1000px 480px at 15% -10%, rgba(94, 242, 168, .08), transparent 70%), radial-gradient(900px 480px at 95% 0%, rgba(255, 198, 92, .08), transparent 70%), var(--bg); }
.hub-hero h1 { font-size: clamp(3rem, 8vw, 6.2rem); margin-bottom: .2em; }
.hub-hero .lede { max-width: 58ch; font-size: 1.15rem; color: #d3dbea; }
.ev-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 34px; }
.ev { position: relative; display: flex; align-items: flex-end; min-height: 470px; border-radius: 24px; overflow: hidden; border: 1px solid var(--line-2); color: var(--text); text-decoration: none; isolation: isolate; transition: transform .35s var(--ease), border-color .35s; }
.ev:hover { transform: translateY(-4px); color: var(--text); border-color: rgba(94, 242, 168, .45); }
.ev-ecl:hover { border-color: rgba(255, 198, 92, .5); }
.ev picture, .ev picture img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.ev::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(6, 10, 18, .05) 20%, rgba(6, 10, 18, .88) 72%, rgba(6, 10, 18, .96)); }
.ev-ecl { background: radial-gradient(520px 420px at 70% 28%, #13213d, #070c17 70%); }
.ev-ecl .ecl-art { position: absolute; top: 34px; right: 40px; width: 210px; z-index: -1; }
.ev-in { padding: 30px 32px 32px; max-width: 520px; }
.ev-tag { display: inline-block; font: 500 .74rem var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--green); margin-bottom: 10px; }
.ev-ecl .ev-tag { color: var(--amber); }
.ev h2 { font-size: clamp(2rem, 3.4vw, 2.8rem); margin-bottom: .3em; }
.ev p { color: #d3dbea; margin-bottom: 16px; }
.ev-live { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 18px; padding: 6px 12px; border-radius: 999px; background: rgba(6, 10, 18, .6); border: 1px solid var(--line-2); font-size: .88rem; }
.ev-live .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--v, var(--slate)); }
.ev-live.ecl .dot { background: var(--amber); }
.ev-live b { font-weight: 600; }
.ev .btn { display: flex; width: max-content; }
.ev-next { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
.ev-next a, .ev-next .soon { display: block; padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); color: var(--text); text-decoration: none; transition: border-color .2s, transform .2s var(--ease); }
.ev-next a:hover { border-color: rgba(255, 198, 92, .45); transform: translateY(-2px); color: var(--text); }
.ev-next b { display: block; font: 500 .95rem var(--mono); color: var(--amber); }
.ev-next span span, .ev-next a span { display: block; color: var(--muted); font-size: .86rem; margin-top: 2px; }
.ev-next .soon { opacity: .55; }
.ev-next .soon b { color: var(--slate); }
@media (max-width: 860px) {
  .hub-hero { padding: 40px 0 44px; }
  .ev-grid { grid-template-columns: 1fr; }
  .ev { min-height: 420px; }
  .ev-in { padding: 24px 22px 26px; }
  .ev-ecl .ecl-art { width: 170px; top: 26px; right: 22px; }
  .ev-next { grid-template-columns: 1fr 1fr; }
}

/* a total eclipse drawn in CSS: corona glow, streamers, the Moon, the last bead of sunlight */
.ecl-art { position: relative; aspect-ratio: 1; width: 200px; }
.ecl-art i { position: absolute; border-radius: 50%; }
.ecl-art .corona { inset: 0; background: radial-gradient(circle, rgba(255, 239, 200, .95) 0 30%, rgba(255, 214, 140, .55) 33%, rgba(255, 198, 92, .18) 48%, transparent 70%); filter: blur(1px); animation: corona 6s ease-in-out infinite; }
.ecl-art .streamers { inset: 6%; background: repeating-conic-gradient(from 10deg, rgba(255, 236, 190, .28) 0 3deg, transparent 3deg 17deg); -webkit-mask: radial-gradient(circle, transparent 30%, #000 32%, transparent 70%); mask: radial-gradient(circle, transparent 30%, #000 32%, transparent 70%); }
.ecl-art .moon { inset: 31%; background: #04060c; box-shadow: 0 0 0 1px rgba(255, 230, 170, .35); }
.ecl-art .bead { width: 7%; height: 7%; top: 31%; left: 61%; background: #fff7df; box-shadow: 0 0 12px 5px rgba(255, 240, 200, .9), 0 0 30px 10px rgba(255, 214, 140, .45); }
@keyframes corona { 50% { transform: scale(1.04); opacity: .9; } }
@media (prefers-reduced-motion: reduce) { .ecl-art .corona { animation: none; } }

.check-card { position: relative; padding: 32px; border: 1px solid rgba(255, 198, 92, .3); border-radius: 22px; background: radial-gradient(420px 260px at 90% 0%, rgba(255, 198, 92, .1), transparent 70%), var(--panel); overflow: hidden; transition: transform .3s var(--ease), border-color .3s; }
.check-card:hover { transform: translateY(-3px); border-color: rgba(255, 198, 92, .55); }
.check-card .ecl-art { width: 120px; margin-bottom: 14px; }
.check-card h2 { font-size: clamp(1.9rem, 3.2vw, 2.5rem); }
.check-card .btn { margin-top: 6px; }
.check-card .more { margin-left: 18px; }

.trip-cards { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.trip-card .tc-tag { font: 500 .72rem var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--green); }
.trip-card.ecl .tc-tag { color: var(--amber); }
.trip-card h3 { margin: 8px 0 6px; }
.trip-card h3 a { color: var(--text); text-decoration: none; }
.trip-card h3 a:hover { color: var(--green); }
.trip-card .tc-stat { color: var(--muted); margin: 0; font-size: .95rem; }
.trip-card .tc-stat b { color: var(--text); font-weight: 600; }
.trip-card.ecl .meter i { background: linear-gradient(90deg, rgba(47, 216, 138, .5), var(--green)); }

/* /solar-eclipse/: every eclipse to 2030 */
.ev-rows { display: grid; gap: 10px; }
.ev-row { display: grid; grid-template-columns: 240px minmax(0, 1fr) auto; gap: 8px 28px; align-items: center; padding: 20px 24px; border: 1px solid var(--line); border-radius: 16px; background: var(--panel); transition: border-color .2s, transform .2s var(--ease); }
.ev-row:hover { border-color: var(--line-2); transform: translateY(-2px); }
.ev-row.live { border-color: rgba(255, 198, 92, .5); background: radial-gradient(500px 200px at 0% 0%, rgba(255, 198, 92, .09), transparent 70%), var(--panel); }
.ev-row.past { opacity: .55; }
.er-date b { display: block; font: 400 1.35rem/1.2 var(--serif); }
.er-type { display: inline-block; margin-top: 4px; font: 500 .74rem var(--mono); letter-spacing: .04em; color: var(--slate); }
.er-type.total { color: var(--amber); }
.er-type.annular { color: var(--orange); }
.er-where p { margin: 0 0 2px; }
.er-where p.muted { font-size: .9rem; }
.er-soon { font: 500 .78rem var(--mono); color: var(--dim); white-space: nowrap; }
@media (max-width: 760px) {
  .ev-row { grid-template-columns: 1fr; padding: 18px; }
  .er-go .btn { width: 100%; justify-content: center; }
}
.check-card { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
.check-card .more { margin-left: 0; }
.check-card .btn + .more { margin-top: 14px; }

/* ── 2026-11-05 (late): photo-led eclipse hub ─────────────────────────────────── */
.ecl-photo { background: #000; min-height: min(100vh, 900px); }
.ecl-photo picture img { object-position: 70% 50%; }
.ecl-photo::after { background: linear-gradient(180deg, rgba(0, 0, 0, .45) 0%, rgba(0, 0, 0, 0) 26%, rgba(0, 0, 0, 0) 60%, var(--bg) 100%), linear-gradient(90deg, rgba(0, 0, 0, .82) 0%, rgba(0, 0, 0, .35) 46%, rgba(0, 0, 0, 0) 66%); }
.ecl-photo .crumbs { margin-bottom: 18px; }
.ecl-photo .crumbs a { color: rgba(233, 238, 247, .75); }
.ecl-photo .ev-tag { color: var(--amber); }
.ecl-photo h1 { max-width: 12ch; }
.ecl-photo .finder input:focus { border-color: var(--amber); box-shadow: 0 0 0 4px rgba(255, 198, 92, .16); }
.ecl-quick { max-width: 640px; }
.ecl-quick .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--slate); flex: none; }
.ecl-quick .dot.tot { background: var(--amber); box-shadow: 0 0 8px rgba(255, 198, 92, .7); }
.ecl-quick a:hover { border-color: var(--amber); }
.ecl-quick b { color: var(--amber); }
@media (max-width: 860px) {
  .ecl-photo picture img { object-position: 74% 30%; }
  .ecl-photo::after { background: linear-gradient(180deg, rgba(0, 0, 0, .35) 0%, rgba(0, 0, 0, 0) 22%, rgba(0, 0, 0, .55) 50%, var(--bg) 100%); }
}
.ecl-factbar { position: relative; z-index: 3; margin-top: -34px; }
.ecl-factbar .ecl-facts { margin-top: 0; background: rgba(14, 22, 38, .92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 24px 60px rgba(0, 0, 0, .45); }
.ecl-facts div { transition: background .25s; }
.ecl-facts div:hover { background: rgba(255, 198, 92, .05); }

/* the moving shadow */
.emap .shadow .umb { fill: #02040a; fill-opacity: .9; stroke: #ffe39a; stroke-width: 2.5; filter: drop-shadow(0 0 10px rgba(255, 214, 140, .8)); }
.shadow-ctl { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; margin-top: 14px; padding: 12px 14px; border: 1px solid var(--line-2); border-radius: 16px; background: var(--panel); }
.shadow-ctl.on { border-color: rgba(255, 198, 92, .45); }
.sc-play { padding: 11px 18px; gap: 10px; background: var(--amber); color: #1a1204; }
.sc-play:hover { background: #ffd98c; color: #1a1204; }
.sc-ico { width: 0; height: 0; border-left: 10px solid currentColor; border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
.sc-play[aria-pressed="true"] .sc-ico { width: 10px; height: 12px; border: 0; border-left: 3.5px solid currentColor; border-right: 3.5px solid currentColor; }
.sc-range { width: 100%; accent-color: var(--amber); }
.sc-read { text-align: right; line-height: 1.25; }
.sc-time { display: block; font: 500 1rem var(--mono); color: var(--amber); }
.sc-where { font-size: .82rem; color: var(--muted); }
@media (max-width: 600px) {
  .shadow-ctl { grid-template-columns: 1fr auto; }
  .sc-range { grid-column: 1 / -1; grid-row: 2; }
}

/* booking panel with the diamond ring */
.ring-panel { position: relative; overflow: hidden; isolation: isolate; background: #000; border-color: rgba(255, 198, 92, .35); }
.ring-panel::before { content: ""; position: absolute; inset: 0; z-index: -1; background: url("/assets/img/eclipse-ring-1280.webp") right -60px center / auto 150% no-repeat; opacity: .9; }
.ring-panel::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, #000 30%, rgba(0, 0, 0, .55) 62%, rgba(0, 0, 0, .25)); }
.ring-panel .tours { justify-content: flex-start; }
@media (max-width: 860px) { .ring-panel::before { background-position: right -120px top -40px; background-size: auto 110%; opacity: .55; } .ring-panel::after { background: linear-gradient(180deg, rgba(0, 0, 0, .3), #000 60%); } }

/* ── 2026-11-05 (late): three-panel home + meteor showers ───────────────────── */
:root { --ice: #8fd6ff; }

/* home: three full-height photo panels; the hovered one widens */
.tri-hero { position: relative; isolation: isolate; background: #000; }
.tri-title { position: absolute; left: 0; right: 0; top: 0; z-index: 3; padding-top: 112px; pointer-events: none; }
.tri-title h1 { font-size: clamp(3.2rem, 8vw, 6.6rem); margin: 0 0 .15em; text-shadow: 0 2px 30px rgba(0, 0, 0, .55); }
.tri-title .lede { max-width: 46ch; font-size: 1.15rem; color: #e1e7f2; text-shadow: 0 1px 14px rgba(0, 0, 0, .7); }
.tri { display: flex; height: min(100vh, 940px); min-height: 680px; }
.tri-p { position: relative; flex: 1 1 0; display: flex; align-items: flex-end; overflow: hidden; color: var(--text); text-decoration: none; isolation: isolate; transition: flex-grow .7s var(--ease); border-right: 1px solid rgba(255, 255, 255, .06); }
.tri-p:last-child { border-right: 0; }
.tri-p picture, .tri-p img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 1.2s var(--ease); }
.tri-nl img { object-position: 72% 60%; }
.tri-ecl img { object-position: 70% 46%; }
.tri-met img { object-position: 40% 40%; }
.tri-p::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, .05) 34%, rgba(0, 0, 0, .1) 50%, rgba(4, 7, 13, .92) 86%); transition: background .5s; }
.tri-p:hover { flex-grow: 1.45; color: var(--text); }
.tri-p:hover img { transform: scale(1.04); }
.tri-in { padding: 0 34px 40px; max-width: 460px; }
.tri-in h2 { font-size: clamp(2rem, 3vw, 2.7rem); margin-bottom: .25em; }
.tri-in p { color: #d8dfec; margin-bottom: 14px; }
.tri-ecl .ev-tag { color: var(--amber); }
.tri-met .ev-tag { color: var(--ice); }
.ev-live.met .dot { background: var(--ice); }
.tri-go { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--green); }
.tri-go::after { content: "→"; transition: transform .25s var(--ease); }
.tri-ecl .tri-go { color: var(--amber); }
.tri-met .tri-go { color: var(--ice); }
.tri-p:hover .tri-go::after { transform: translateX(5px); }
.tri-hero .hero-credit { z-index: 4; }
@media (max-width: 860px) {
  .tri-title { position: relative; padding: 104px 0 26px; background: radial-gradient(500px 300px at 20% 0%, rgba(94, 242, 168, .1), transparent 70%), var(--bg); }
  .tri { flex-direction: column; height: auto; min-height: 0; }
  .tri-p { min-height: 380px; border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, .06); }
  .tri-p:hover { flex-grow: 1; }
  .tri-in { padding: 0 22px 28px; }
}

/* the sky calendar: a wrapping grid (never scrolls sideways on phones) */
.sky-cal { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.sky-cal a { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 14px; align-items: center; padding: 14px 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--panel); color: var(--text); text-decoration: none; transition: transform .25s var(--ease), border-color .25s; }
.sky-cal a:hover { transform: translateY(-3px); color: var(--text); border-color: var(--line-2); }
.sc-date { display: grid; place-items: center; height: 64px; border-radius: 12px; background: var(--bg-2); border: 1px solid var(--line); text-align: center; line-height: 1.1; }
.sc-date b { display: block; font: 500 .92rem var(--mono); }
.sc-date small { display: block; font: 400 .7rem var(--mono); color: var(--dim); margin-top: 3px; }
.sc-txt b { display: block; font: 400 1.25rem/1.15 var(--serif); }
.sc-txt small { display: block; color: var(--muted); font-size: .84rem; margin-top: 3px; }
.sc-met .sc-date { border-color: rgba(143, 214, 255, .35); }
.sc-met .sc-date b { color: var(--ice); }
.sc-ecl .sc-date, .sc-ecl2 .sc-date { border-color: rgba(255, 198, 92, .4); }
.sc-ecl .sc-date b, .sc-ecl2 .sc-date b { color: var(--amber); }
.sc-ecl a { border-color: rgba(255, 198, 92, .35); background: radial-gradient(300px 120px at 0% 0%, rgba(255, 198, 92, .08), transparent 70%), var(--panel); }

.check-card.photo { position: relative; overflow: hidden; isolation: isolate; color: var(--text); text-decoration: none; justify-content: flex-end; min-height: 380px; background: #000; }
.check-card.photo::before { content: ""; position: absolute; inset: 0; z-index: -2; background: url("/assets/img/eclipse-corona-1280.webp") 72% 40% / cover no-repeat; transition: transform 1s var(--ease); }
.check-card.photo::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0, 0, 0, .05), rgba(0, 0, 0, .85) 70%); }
.check-card.photo:hover::before { transform: scale(1.04); }
.check-card.photo p { color: #d8dfec; }
.trip-card.met .tc-tag { color: var(--ice); }

/* meteor pages */
.met-hero { background: #02050c; }
.met-hero picture img { object-position: 45% 40%; }
.met-sky { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
.met-shower { min-height: min(86vh, 760px); background: radial-gradient(1200px 700px at 72% 18%, #10203f 0%, #070d1c 45%, #02050c 80%); }
.met-shower::after { background: linear-gradient(180deg, transparent 60%, var(--bg) 100%), linear-gradient(90deg, rgba(2, 5, 12, .65), transparent 60%); }
.met-hero .ev-tag { color: var(--ice); }
.met-hero h1 { max-width: 13ch; }
.met-quick .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ice); }
.met-finder input:focus { border-color: var(--ice); box-shadow: 0 0 0 4px rgba(143, 214, 255, .16); }

.met-next { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 28px; align-items: stretch; }
.met-feature { padding: 34px; border: 1px solid rgba(143, 214, 255, .3); border-radius: 22px; background: radial-gradient(520px 260px at 0% 0%, rgba(143, 214, 255, .1), transparent 70%), var(--panel); }
.met-feature .ev-tag { color: var(--ice); }
.met-feature h2 { font-size: clamp(1.9rem, 3.2vw, 2.6rem); }
.met-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin: 20px 0 24px; border-top: 1px solid var(--line); }
.met-stats div { padding: 14px 0; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 4px; }
.met-stats div:nth-child(odd) { padding-right: 16px; }
.met-stats b { font: 500 1.8rem/1 var(--mono); color: var(--ice); }
.met-stats span { font-size: .86rem; color: var(--muted); }
.moon-ico { width: 28px; height: 28px; flex: none; }
.met-calc { padding: 30px; border: 1px solid var(--line-2); border-radius: 22px; background: var(--panel); }
.met-ctl { display: grid; gap: 12px; margin: 10px 0 16px; }
.met-ctl label { display: grid; gap: 6px; font: 500 .72rem var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--dim); }
.met-ctl select { height: 46px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--bg-2); color: var(--text); font: 500 .98rem var(--sans); text-transform: none; letter-spacing: 0; }
.sky-pick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.sky-pick button { padding: 10px 8px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--bg-2); color: var(--muted); font: 500 .84rem var(--sans); cursor: pointer; transition: border-color .2s, color .2s, background .2s; }
.sky-pick button[aria-checked="true"] { border-color: var(--ice); color: var(--text); background: rgba(143, 214, 255, .1); }
.met-result { padding: 20px 22px; border: 1px solid var(--line); border-radius: 16px; background: var(--bg-2); min-height: 150px; }
.er-verdict.met { color: var(--ice); }
@media (max-width: 900px) { .met-next { grid-template-columns: 1fr; } .met-feature, .met-calc { padding: 24px 20px; } }
@media (max-width: 420px) { .sky-pick { grid-template-columns: 1fr; } }

.met-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.met-card { display: flex; flex-direction: column; gap: 4px; color: var(--text); text-decoration: none; }
.met-card:hover { color: var(--text); }
.mc-top { display: flex; justify-content: space-between; align-items: center; }
.mc-date { font: 500 .8rem var(--mono); color: var(--ice); }
.met-card h3 { margin: 6px 0 2px; }
.mc-v { display: inline-block; width: max-content; padding: 3px 10px; border-radius: 999px; font: 500 .76rem var(--mono); background: rgba(255, 255, 255, .06); color: var(--muted); }
.met-card.great .mc-v { background: rgba(94, 242, 168, .14); color: var(--green); }
.met-card.good .mc-v { background: rgba(143, 214, 255, .12); color: var(--ice); }
.met-card.moon .mc-v { background: rgba(255, 198, 92, .12); color: var(--amber); }
.mc-rates { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 10px 0 4px; font-size: .84rem; color: var(--muted); }
.mc-rates b { font: 500 1rem var(--mono); color: var(--text); }
.met-card small { color: var(--dim); font-size: .82rem; }

.stay-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.stay-card { display: flex; flex-direction: column; gap: 6px; }
.stay-card .tc-tag { font: 500 .72rem var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ice); }
.stay-card h3 { margin: 2px 0; }
.stay-card p { color: var(--muted); font-size: .92rem; flex: 1; }
.stay-card .btn { justify-content: center; }

.met-answer-wrap { position: relative; z-index: 3; margin-top: -120px; padding-bottom: 20px; }
.met-answer { box-shadow: 0 30px 70px rgba(0, 0, 0, .5); }
.met-answer .answer-verdict { color: var(--ice); }
.met-answer.great .answer-verdict { color: var(--green); }
.met-answer.moon .answer-verdict { color: var(--amber); }
.met-answer .answer-chance b { color: var(--ice); }
.met-answer .answer-reason b { color: var(--text); }
.met-strip { border-color: rgba(143, 214, 255, .35); background: radial-gradient(520px 200px at 0% 0%, rgba(143, 214, 255, .12), transparent 70%), var(--panel); }
.met-facts dl { margin: 0; display: grid; gap: 0; }
.met-facts dl div { display: grid; grid-template-columns: 7.5em 1fr; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.met-facts dt { font: 500 .72rem var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--dim); padding-top: 3px; }
.met-facts dd { margin: 0; }
@media (max-width: 860px) { .met-answer-wrap { margin-top: -60px; } }
.met-shower .hero-in { padding-bottom: 170px; }
.met-answer-wrap { margin-top: -96px; }
.radiant { position: absolute; z-index: 0; display: inline-flex; align-items: center; gap: 10px; font: 500 .74rem var(--mono); letter-spacing: .08em; text-transform: uppercase; color: rgba(143, 214, 255, .75); transform: translate(-14px, -50%); pointer-events: none; }
.radiant i { width: 28px; height: 28px; border-radius: 50%; background: radial-gradient(circle, rgba(220, 240, 255, .95) 0 12%, rgba(143, 214, 255, .35) 30%, transparent 70%); }
@media (max-width: 860px) { .radiant { display: none; } .met-shower .hero-in { padding-bottom: 110px; } .met-answer-wrap { margin-top: -50px; } }
.sc-date b { font-size: .98rem; }
.sc-date small { text-transform: none; }
.split > *, .met-next > *, .met-ctl > * { min-width: 0; }
.met-ctl select { width: 100%; max-width: 100%; }
@media (max-width: 900px) { .met-next { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 380px) { .met-feature h2 { font-size: 1.7rem; } .met-stats { grid-template-columns: 1fr; } .met-stats div:nth-child(odd) { padding-right: 0; } }

/* shadow animation: the readout gets its own row so the slider never moves; whole-path map ends */
.shadow-ctl { grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; row-gap: 10px; }
.sc-read { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: baseline; gap: 16px; text-align: left; min-height: 1.5em; }
.sc-time { display: inline; font-variant-numeric: tabular-nums; min-width: 6.5ch; }
.sc-where { flex: 1; min-width: 0; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .9rem; color: var(--text); }
.sc-play { min-width: 112px; justify-content: center; }
@media (max-width: 600px) { .shadow-ctl { grid-template-columns: auto minmax(0, 1fr); } .sc-range { grid-column: auto; grid-row: auto; } }
.emap .band-edge { fill: none; stroke: var(--amber); stroke-width: 1.6; stroke-linejoin: round; }
.emap .edge { display: none; }
.emap .ends text { font: 600 22px var(--sans); fill: var(--amber); paint-order: stroke; stroke: #081120; stroke-width: 5px; }
.emap .ends text.sub { font: 500 17px var(--mono); fill: #c7d0e0; }
#journey .emap { border-radius: 20px; }
#journey .shadow-ctl { max-width: 760px; margin-left: auto; margin-right: auto; }

/* ══ 2026-11-05 (night 2): video heroes, calmer home, new About, easier reading ══════════ */

/* readability: brighter secondary text, bigger small print, fewer tiny caps */
:root { --muted: #bcc6d8; --dim: #8e9bb4; }
.sec-head p { font-size: 1.1rem; }
.crumbs { font-size: .84rem; color: var(--muted); }
.answer-label { font-size: .82rem; letter-spacing: .06em; color: var(--muted); }
.answer-reason { font-size: 1.12rem; line-height: 1.6; }
.fact span, .answer-chance span { font-size: .92rem; color: var(--muted); }
.night-note { font-size: .93rem; color: var(--muted); line-height: 1.6; }
.place-card small, .card small { font-size: .9rem; color: var(--muted); }
table.data thead th { font-size: .76rem; color: var(--muted); }
table.data { font-size: 1rem; }
.ev-tag { font-size: .8rem; }
.aff-note { font-size: .8rem; color: var(--dim); }
.callout { font-size: 1rem; line-height: 1.65; }
.er-facts dt { font-size: .74rem; color: var(--muted); }

/* video heroes */
.vhero { background: #000; }
.vhero .bg-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.vhero::after { background: linear-gradient(90deg, rgba(4, 7, 13, .9) 0%, rgba(4, 7, 13, .62) 38%, rgba(4, 7, 13, .12) 70%), linear-gradient(180deg, rgba(4, 7, 13, .55) 0%, transparent 22%, transparent 62%, var(--bg) 100%); }
.vhero h1, .vhero .lede { text-shadow: 0 2px 24px rgba(0, 0, 0, .65); }
.vhero .lede { color: #e6ebf4; }
.vh-eclipse .bg-video { left: auto; right: 0; width: 70%; object-position: 50% 50%; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 34%); mask-image: linear-gradient(90deg, transparent 0%, #000 34%); }
.vh-eclipse::after { background: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, .55) 34%, transparent 60%), linear-gradient(180deg, rgba(0, 0, 0, .45) 0%, transparent 22%, transparent 64%, var(--bg) 100%); }
.vh-meteors::after { background: linear-gradient(90deg, rgba(3, 6, 12, .94) 0%, rgba(3, 6, 12, .74) 42%, rgba(3, 6, 12, .25) 72%), linear-gradient(180deg, rgba(3, 6, 12, .6) 0%, transparent 24%, transparent 58%, var(--bg) 100%); }
.met-shower.vhero { background: #000; }
@media (max-width: 860px) {
  .vhero::after { background: linear-gradient(180deg, rgba(4, 7, 13, .55) 0%, rgba(4, 7, 13, .35) 30%, rgba(4, 7, 13, .8) 62%, var(--bg) 100%); }
  .vh-eclipse .bg-video { width: 100%; height: 58%; -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent); mask-image: linear-gradient(180deg, #000 55%, transparent); }
  .vh-eclipse::after { background: linear-gradient(180deg, rgba(0, 0, 0, .4) 0%, transparent 30%, rgba(0, 0, 0, .7) 58%, var(--bg) 100%); }
  .vh-meteors::after { background: linear-gradient(180deg, rgba(3, 6, 12, .6) 0%, rgba(3, 6, 12, .55) 35%, rgba(3, 6, 12, .9) 65%, var(--bg) 100%); }
}

/* home: one video, three clear choices */
.home-hero { position: relative; isolation: isolate; min-height: min(100vh, 920px); display: flex; align-items: center; background: #000; overflow: hidden; }
.home-hero .bg-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.home-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(1100px 600px at 28% 55%, rgba(4, 7, 13, .78), rgba(4, 7, 13, .35) 70%), linear-gradient(180deg, rgba(4, 7, 13, .5) 0%, transparent 25%, transparent 70%, var(--bg) 100%); }
.hh-in { padding: 130px 0 90px; }
.hh-now { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 22px; padding: 7px 14px; border-radius: 999px; background: rgba(4, 7, 13, .5); border: 1px solid rgba(255, 255, 255, .14); font: 500 .82rem var(--mono); letter-spacing: .06em; text-transform: uppercase; color: #dfe6f2; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.hh-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 10px var(--green); animation: hh-pulse 2s ease-in-out infinite; }
@keyframes hh-pulse { 50% { opacity: .35; } }
.home-hero h1 { font-size: clamp(3.6rem, 9vw, 7.6rem); line-height: .95; margin: 0 0 .25em; text-shadow: 0 3px 30px rgba(0, 0, 0, .6); }
.home-hero .lede { max-width: 40ch; font-size: clamp(1.1rem, 1.6vw, 1.3rem); color: #e6ebf4; text-shadow: 0 1px 16px rgba(0, 0, 0, .7); }
.hh-pick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; max-width: 940px; margin-top: 36px; }
.hh-opt { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 20px 22px 20px; border-radius: 18px; background: rgba(8, 13, 24, .62); border: 1px solid rgba(255, 255, 255, .16); color: var(--text); text-decoration: none; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: transform .3s var(--ease), border-color .3s, background .3s; }
.hh-opt::after { content: "→"; position: absolute; right: 20px; top: 20px; font-size: 1.2rem; color: var(--c, var(--green)); transition: transform .3s var(--ease); }
.hh-opt:hover { transform: translateY(-4px); color: var(--text); border-color: var(--c, var(--green)); background: rgba(8, 13, 24, .78); }
.hh-opt:hover::after { transform: translateX(4px); }
.hh-opt b { font: 400 1.7rem/1.1 var(--serif); padding-right: 24px; }
.hh-opt span { font-size: .95rem; color: #cdd5e3; }
.hh-opt em { font-style: normal; font-weight: 600; color: var(--c, var(--green)); }
.hh-opt.nl { --c: var(--green); }
.hh-opt.ecl { --c: var(--amber); }
.hh-opt.met { --c: var(--ice); }
@media (max-width: 860px) {
  .home-hero { align-items: flex-end; min-height: 92vh; }
  .hh-in { padding: 110px 0 40px; }
  .hh-pick { grid-template-columns: 1fr; gap: 10px; margin-top: 26px; }
  .hh-opt { padding: 16px 18px; }
  .hh-opt b { font-size: 1.45rem; }
}

/* home: "Coming up" as a clean list */
.up-wrap { max-width: 920px; }
.up-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-2); }
.up-list a { display: grid; grid-template-columns: 96px minmax(0, 1fr) 24px; gap: 18px; align-items: center; padding: 20px 6px; border-bottom: 1px solid var(--line-2); color: var(--text); text-decoration: none; transition: background .2s, padding .25s var(--ease); }
.up-list a::after { content: "→"; color: var(--dim); transition: transform .25s var(--ease), color .2s; }
.up-list a:hover { background: rgba(255, 255, 255, .03); padding-left: 14px; color: var(--text); }
.up-list a:hover::after { transform: translateX(4px); color: var(--text); }
.up-list time { font: 500 1.05rem var(--mono); color: var(--ice); }
.up-list .ecl time { color: var(--amber); }
.ul-txt { display: grid; gap: 2px; min-width: 0; }
.ul-what { font: 500 .76rem var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.up-list b { font: 400 1.55rem/1.15 var(--serif); }
.ul-sub { color: var(--muted); font-size: .98rem; }
@media (max-width: 560px) { .up-list a { grid-template-columns: 70px minmax(0, 1fr) 16px; gap: 12px; } .up-list time { font-size: .92rem; } .up-list b { font-size: 1.3rem; } }

.proof { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px; }
.proof b { display: block; font: 400 clamp(2.4rem, 4.4vw, 3.4rem)/1 var(--serif); color: var(--green); margin-bottom: 12px; }
.proof span { color: var(--muted); font-size: 1.02rem; line-height: 1.6; }
@media (max-width: 760px) { .proof { grid-template-columns: 1fr; gap: 28px; } }

/* About */
.vh-about { min-height: min(72vh, 680px); }
.about-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.about-card { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 30px 28px 26px; border: 1px solid var(--line-2); border-radius: 20px; background: var(--panel); color: var(--text); text-decoration: none; overflow: hidden; transition: transform .3s var(--ease), border-color .3s; }
.about-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--c, var(--green)); }
.about-card:hover { transform: translateY(-4px); color: var(--text); border-color: var(--c, var(--green)); }
.about-card.nl { --c: var(--green); } .about-card.ecl { --c: var(--amber); } .about-card.met { --c: var(--ice); }
.ac-k { font: 500 .8rem var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--c, var(--green)); }
.about-card b { font: 400 2.6rem/1 var(--serif); }
.about-card p { color: var(--muted); margin: 4px 0 8px; flex: 1; }
.about-card .more { margin-top: 0; color: var(--c, var(--green)); }
.src-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 28px; }
.src-list li { display: grid; gap: 2px; padding: 16px 0; border-bottom: 1px solid var(--line-2); }
.src-list b { font: 400 1.35rem/1.2 var(--serif); }
.src-list span { color: var(--muted); }
.about-two { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 48px; align-items: start; }
.about-two p { color: #d3dbea; font-size: 1.06rem; line-height: 1.7; }
.partner-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.partner-chips span { padding: 7px 14px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--panel); font-size: .9rem; color: var(--muted); }
.who-card { padding: 32px; border: 1px solid var(--line-2); border-radius: 22px; background: radial-gradient(500px 240px at 100% 0%, rgba(94, 242, 168, .08), transparent 70%), var(--panel); }
.who-card h2 { font-size: clamp(1.9rem, 3vw, 2.4rem); margin-top: 8px; }
.who-card .btn { margin-top: 8px; }
@media (max-width: 860px) { .about-cols { grid-template-columns: 1fr; } .src-list { grid-template-columns: 1fr; } .about-two { grid-template-columns: 1fr; gap: 32px; } .who-card { padding: 24px 20px; } }
.src-list li { align-content: start; }
.vh-eclipse .hero-credit { bottom: 46px; }
@media (max-width: 860px) {
  .hero-credit { left: 16px; right: 16px; bottom: 8px; text-align: right; font-size: .62rem; line-height: 1.4; }
  .hh-in { padding-bottom: 64px; }
  .vh-eclipse .hero-credit { bottom: 42px; }
}
.met-shower .hero-credit { top: 84px; bottom: auto; }
@media (max-width: 560px) {
  .sc-read { flex-direction: column; align-items: flex-start; gap: 3px; min-height: 3.7rem; }
  .sc-where { text-align: left; white-space: normal; line-height: 1.3; }
}
@media (max-width: 400px) { table.data thead th { font-size: .68rem; letter-spacing: .02em; } }