/* Shared visual system from the approved month prototype. */
body.page-month, body.page-landing, body.page-year { background:#f6f3ed; color:#17253c; }
[hidden] { display:none!important; }
:focus-visible { outline:3px solid #b37417; outline-offset:3px; }
.page-month main, .page-landing main, .page-year main { max-width:none; padding:0; }
.page-content, .page-content--month, .page-content--landing, .full-moon-guide__inner, .site-header__inner, .site-footer__inner, .calendar-inner { max-width:1120px; box-sizing:border-box; margin-inline:auto; padding-inline:28px; }
.page-content { padding-block:30px; }
/* One H1 scale for landing, month and year (docs/ui_system.md §3). */
.hero h1, .page-month .month-opening h1, .page-year .year-opening h1 { margin:0; font:500 clamp(28px,3.4vw,40px)/1.15 var(--font-ui); letter-spacing:-.03em; }
.page-landing .page-content--landing:first-child { padding-block:22px; }
.page-landing .landing-opening .hero { margin:0; }
.page-landing .landing-opening .city-picker { margin:14px 0 0; }
.site-header { background:#111e30; }
.city-picker { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:15px; border-left:3px solid #c99b4b; padding:8px 0 8px 20px; margin:24px 0; }
.city-picker__current { display:grid; gap:5px; }
.city-picker__current span { font-size:12px; color:#586578; }
.city-picker__open, .city-picker footer button { border:1px solid #bac4d0; border-radius:7px; padding:12px 18px; background:#fffdf9; color:#17253c; font:inherit; cursor:pointer; min-height:44px; }
.city-picker__panel { width:100%; }
.city-picker header { display:flex; align-items:center; justify-content:space-between; }
.city-dialog { width:min(570px,calc(100% - 28px)); max-height:90dvh; border:0; border-radius:15px; padding:24px; background:#fffdf9; color:#17253c; box-sizing:border-box; }
.city-dialog::backdrop, .moon-dialog::backdrop { background:#071321b8; }
.city-dialog header { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.city-dialog h2 { font:500 24px/1.2 var(--font-ui); margin:0; }
.city-dialog p { font-size:14px; color:#586578; }
.dialog-close { font:400 30px/1 var(--font-ui); width:44px; height:44px; border:0; border-radius:6px; background:transparent; color:inherit; cursor:pointer; flex-shrink:0; }
.city-picker__search { display:grid; gap:6px; font-size:13px; }
.city-picker__search input { width:100%; min-height:46px; border:1px solid #bbc5cf; padding:10px 12px; border-radius:8px; font:inherit; box-sizing:border-box; }
.city-picker__options { margin:15px 0; max-height:48dvh; overflow:auto; overscroll-behavior:contain; }
.city-choice { display:flex; gap:12px; align-items:center; border:1px solid #dedbd5; border-radius:8px; padding:13px 10px; margin:7px 0; cursor:pointer; }
.city-choice:has(input:checked) { border-color:#ac7925; background:#faf0da; }
.city-choice input { accent-color:#886019; }
.city-choice strong, .city-choice small { display:block; }
.city-choice small { color:#586578; margin-top:3px; }
.city-choice__clock { margin-left:auto; text-align:right; font-size:11px; color:#586578; }
.city-dialog footer { border-top:1px solid #dedbd5; padding-top:16px; text-align:right; }
.city-dialog footer button { background:#172b43; color:white; border:0; padding:12px 20px; border-radius:7px; font:inherit; cursor:pointer; }
.moon-grid-section { --cal-bg:#000; --cal-ink:#edf2f8; --cal-muted:#a4afbc; --cal-cell:#080e14; --cal-line:#29343f; background:var(--cal-bg); color:var(--cal-ink); width:100%; max-width:none; margin:0; padding:36px 0 42px; border:0; border-radius:0; box-shadow:none; }
.moon-grid-section[data-moon-view="simple"] { --cal-bg:#f1ede5; --cal-ink:#17253c; --cal-muted:#586578; --cal-cell:#fffdf9; --cal-line:#d7d4ce; }
.moon-grid-section__bar { margin-bottom:22px; align-items:center; }
.moon-grid-section__bar h2 { color:var(--cal-ink); font:500 26px/1.2 var(--font-ui); letter-spacing:-.02em; }
.moon-view-switch { display:none; border:1px solid var(--cal-line); background:var(--cal-cell); border-radius:9px; padding:5px; gap:4px; }
.is-enhanced .moon-view-switch { display:flex; }
.moon-view-switch__button { color:var(--cal-muted); background:transparent; border-radius:5px; font-size:13px; min-height:44px; padding:10px 15px; }
.moon-view-switch__button.is-active { background:#f4ca80; color:#2e2517; }
.month-phase-summary { margin:0 0 26px; }
.month-phase-summary > h2 { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
.month-phase-summary__list { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:12px; padding:0; }
.month-phase-summary__item { display:flex; gap:12px; align-items:center; padding:17px; background:var(--cal-cell); border:1px solid var(--cal-line); border-radius:9px; box-shadow:none; color:var(--cal-ink); }
.month-phase-summary__visual { width:36px; flex:0 0 36px; }
.month-phase-summary__visual svg { display:block; width:36px; height:36px; }
.month-phase-summary__visual svg circle { stroke:#82909c; stroke-width:.6; }
.month-phase-summary__body { min-width:0; }
.month-phase-summary__name { color:var(--cal-muted); font-size:12px; }
.month-phase-summary__date { color:var(--cal-ink); font-size:15px; line-height:1.4; }
.month-phase-summary__time { color:var(--cal-muted); font-size:12px; }
.moon-grid { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:0; border:1px solid var(--cal-line); border-radius:8px; overflow:hidden; background:var(--cal-line); }
.moon-grid .dow { background:var(--cal-cell); color:var(--cal-muted); text-align:center; padding:10px 0; font-size:12px; border:0; }
.moon-grid .moon-cell { position:relative; display:flex; align-items:center; justify-content:flex-start; flex-direction:column; min-width:0; min-height:166px; box-sizing:border-box; border:0; border-top:1px solid var(--cal-line); border-right:1px solid var(--cal-line); border-radius:0; background:var(--cal-bg); padding:30px 6px 23px; }
.moon-grid .moon-cell:nth-child(7n) { border-right:0; }
.moon-grid .moon-cell.empty { background:var(--cal-cell); }
.moon-grid .moon-cell.has-phase, .moon-grid .moon-cell.today { background:var(--cal-cell); box-shadow:none; }
.moon-grid .moon-cell.has-phase--full-moon { background:#231d10; }
.moon-grid .day-num { position:absolute; top:8px; left:9px; color:var(--cal-muted); font:400 13px/1.2 var(--font-ui); padding:0; }
.moon-grid .has-phase .day-num { color:#dde7f4; font-weight:600; }
.moon-grid .has-phase--full-moon .day-num { color:#211a10; background:#f4ca80; border-radius:3px; padding:2px 5px; top:6px; left:6px; }
.moon-grid .today .day-num { outline:1px solid #bfcedf; outline-offset:3px; border-radius:1px; }
.moon-grid .daily-moon-visual { display:block; width:84px; height:84px; margin:0 auto; }
.daily-moon-visual a, .daily-moon-visual img { display:block; width:100%; height:100%; }
.daily-moon-visual img { mix-blend-mode:screen; }
.moon-grid .daily-moon-illumination { position:absolute; bottom:6px; right:7px; font:400 10px/1.2 var(--font-ui); color:#9aa5b2; margin:0; }
.moon-grid .moon-cell .phase-visual { display:none; }
.moon-grid .phase-label { color:#dbe3ef; font-size:11px; line-height:1.4; text-align:center; margin-top:5px; }
.moon-grid .phase-label time { display:block; color:#aebcd0; font-size:10px; }
.moon-grid-section[data-moon-view="simple"] .daily-moon-visual, .moon-grid-section[data-moon-view="simple"] .daily-moon-illumination { display:none; }
.moon-grid-section[data-moon-view="simple"] .moon-cell .phase-visual { display:block; margin:10px auto 0; }
.moon-grid-section[data-moon-view="simple"] .has-phase--full-moon { background:#f8edcf; }
.moon-grid-section[data-moon-view="simple"] .has-phase .day-num, .moon-grid-section[data-moon-view="simple"] .phase-label, .moon-grid-section[data-moon-view="simple"] .phase-label time { color:#17253c; }
.calendar-caption { color:var(--cal-muted); font-size:12px; line-height:1.6; margin:18px 0 0; }
.calendar-caption + .calendar-caption { margin-top:5px; }
.calendar-caption span { display:block; }
.moon-dialog { position:fixed; background:#000; color:#e6edf6; border:1px solid #354354; border-radius:14px; width:min(560px,calc(100% - 28px)); max-height:90dvh; padding:25px; box-sizing:border-box; text-align:center; }
.moon-dialog .dialog-close { position:absolute; top:6px; right:6px; }
.moon-dialog h2 { font:500 23px/1.3 var(--font-ui); margin:20px 20px 8px; color:inherit; }
.moon-dialog img { display:block; width:min(100%,380px); height:auto; margin:auto; }
.moon-dialog__phase { min-height:20px; font-size:13px; color:#f4ca80; }
.moon-dialog__percent { font-size:18px; margin:5px; }
.moon-dialog__credit { font-size:11px; color:#aab5c4; }
.moon-dialog nav { display:flex; justify-content:space-between; }
.moon-dialog nav button { min-width:48px; min-height:44px; font-size:22px; border:1px solid #354354; border-radius:7px; color:inherit; background:#142438; cursor:pointer; }
.moon-dialog nav button:disabled { opacity:.3; cursor:default; }
.full-moon-guide { margin:0; }
.full-moon-guide__hero { background:radial-gradient(ellipse at 78% 30%,#576a8240,transparent 48%),linear-gradient(115deg,#142438,#20344b); color:#f8f8fb; }
.full-moon-guide__header h2 { font-family:var(--font-ui); color:white; }
.full-moon-guide__answer { color:#d9e1ee; }
.full-moon-guide__disc { background:transparent; border:0; box-shadow:none; }
.full-moon-guide__disc img { display:block; width:100%; height:auto; mix-blend-mode:screen; }
.full-moon-guide__portrait { isolation:isolate; }
.full-moon-guide__portrait figcaption { color:#c4cedd; font-size:11px; }
.full-moon-guide__advice { background:#fae5ba; color:#44311a; border:0; }
.full-moon-guide__advice h3 { color:#3f2e16; }
.full-moon-guide__details { background:#fffdf9; }
.full-moon-guide__event--rise { background:#fbf1df; color:#60431f; }
.full-moon-guide__event--set { background:#edf1f9; color:#374d71; }
.full-moon-guide__peak { background:#f0f3f8; color:#374d71; }
.page-content:has(.phase-notes-section) { padding-block:38px; }
@media(max-width:760px) {
 .page-content, .full-moon-guide__inner, .site-header__inner, .calendar-inner { padding-inline:24px; }
 .month-phase-summary__list { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .moon-grid-section__bar { align-items:flex-start; gap:16px; flex-direction:column; }
 .moon-grid .moon-cell { min-height:145px; padding-inline:2px; }
 .moon-grid .daily-moon-visual { width:62px; height:62px; }
 .month-phase-summary__item { padding:13px 10px; gap:8px; }
}
@media(max-width:540px) {
 .page-content, .full-moon-guide__inner, .site-header__inner, .calendar-inner { padding-inline:20px; }
 .moon-grid-section { padding-block:28px; }
 .moon-grid-section__bar h2 { font-size:22px; }
 .moon-grid .moon-cell { min-height:105px; padding-top:29px; }
 .moon-grid .daily-moon-visual { width:40px; height:40px; }
 .moon-grid .phase-label { display:none; }
 .moon-grid-section[data-moon-view="simple"] .phase-label { display:block; font-size:9px; overflow-wrap:anywhere; }
 .moon-grid-section[data-moon-view="simple"] .phase-label time { display:none; }
 .moon-grid .day-num { font-size:11px; left:6px; }
 .moon-grid .dow { font-size:10px; }
 .moon-grid .daily-moon-illumination { font-size:9px; right:3px; }
 .month-phase-summary__date { font-size:13px; }
 .month-phase-summary__name, .month-phase-summary__time { font-size:11px; }
 .month-phase-summary__visual, .month-phase-summary__visual svg { width:28px; height:28px; flex-basis:28px; }
 .city-dialog { padding:18px; }
 .city-choice__clock { max-width:110px; }
}
@media(max-width:350px) { .page-content, .full-moon-guide__inner, .site-header__inner, .calendar-inner { padding-inline:16px; } .moon-grid .daily-moon-visual { width:34px; height:34px; } }
@media(prefers-reduced-motion:reduce) { *, *::before, *::after { scroll-behavior:auto!important; transition:none!important; } }
.full-moon-guide__portrait { isolation:auto; mix-blend-mode:screen; }
.full-moon-guide__intro { grid-template-columns:minmax(0,1fr) 280px; }
.full-moon-guide__disc { width:260px; }
.full-moon-guide__header { display:contents; }
.full-moon-guide__kicker, .full-moon-guide__header h2 { grid-column:1; margin:0; }
.full-moon-guide__intro { gap:12px 32px; }
.full-moon-guide__answer { grid-column:1; margin:10px 0 0; }
.full-moon-guide__portrait { grid-column:2; grid-row:1 / 4; }
.today-phase-card__visual { background:#000; border-radius:50%; width:230px; height:auto; padding:12px; }
.today-phase-card__visual img { display:block; width:100%; height:auto; }
.today-phase-card__visual small { display:block; color:#aab7c8; background:#172b43; border-radius:4px; font-size:10px; padding:7px; text-align:center; }
@media(max-width:540px) {
 .full-moon-guide__intro { grid-template-columns:minmax(0,1fr) 112px; gap:10px 18px; padding-block:25px; }
 .full-moon-guide__portrait { order:0; grid-column:2; grid-row:1 / 3; width:112px; align-self:center; }
 .full-moon-guide__disc { width:112px; }
 .full-moon-guide__header h2 { font-size:28px; }
 .full-moon-guide__answer { grid-column:1 / -1; }
 .full-moon-guide__kicker { font-size:10px; align-self:end; }
 .full-moon-guide__portrait figcaption { font-size:9px; }
 .full-moon-guide__night-heading h3 { font-size:20px; }
}
.calendar-month-nav { display:flex; gap:22px; flex-wrap:wrap; margin-bottom:22px; }
.calendar-month-nav a { color:var(--cal-muted); font-size:13px; text-decoration:none; }
.calendar-month-nav a:hover { color:var(--cal-ink); text-decoration:underline; }
.phase-notes-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.phase-note { background:#fffdf9; border:1px solid #dedbd5; border-radius:9px; padding:20px; }
.phase-note h3 { font:500 17px/1.4 var(--font-ui); }
.city-times-details { border-block:1px solid #dedbd5; padding-block:15px; }
.city-times-details summary { cursor:pointer; font:500 15px/1.5 var(--font-ui); min-height:30px; }
.city-times-details[open] summary { margin-bottom:20px; }
.times-section h2 { font:500 21px/1.3 var(--font-ui); }
.page-year .year-grid { gap:22px; }
.page-year .year-month-card { background:#fffdf9; border-color:#dedbd5; border-radius:12px; }
.page-year .year-month-card h2 { font-family:var(--font-ui); }
@media(max-width:540px) { .phase-notes-list { grid-template-columns:1fr; } }
/* Reset legacy square-cell sizing: aspect-ratio must not widen a 7-column track. */
.moon-grid .moon-cell { aspect-ratio:auto; width:100%; }
.moon-grid .daily-moon-visual { flex:none; padding:0; }
.month-phase-summary { border:0; padding:0; }
.month-phase-summary__name { font-family:var(--font-ui); }
.full-moon-guide__events .full-moon-guide__event--rise { background:#fbf1df; }
.full-moon-guide__events .full-moon-guide__event--set { background:#edf1f9; }
.moon-grid[data-moon-view="simple"] .moon-cell:not(.has-phase) { background:var(--cal-cell); border-color:var(--cal-line); }
.moon-grid { background:var(--cal-bg); }
.today-centerpiece { background:#070c12; color:#e6edf6; margin:0; }
.today-phase-card { border:0; border-radius:0; background:transparent; padding:10px 0 26px; grid-template-columns:minmax(0,1fr) 300px; gap:40px; align-items:center; }
.today-phase-card__visual { display:block; background:transparent; border-radius:0; width:100%; max-width:300px; height:auto; padding:0; margin:auto; mix-blend-mode:screen; }
.today-phase-card__visual img { width:100%; height:auto; }
.today-phase-card__visual small { background:transparent; color:#aab7c8; font-size:10px; margin-top:6px; }
.today-phase-card__body h2 { font-family:var(--font-ui); font-size:32px; color:#fff; }
.today-phase-card__stats, .today-centerpiece .eyebrow { color:#f4ca80; }
.today-centerpiece .meta { color:#adb9c9; }
.today-centerpiece .today-insight { color:#dbe3ef; }
.today-next-event { display:flex; align-items:baseline; flex-wrap:wrap; gap:7px 12px; margin:18px 0 0; padding-top:14px; border-top:1px solid #29394c; }
.today-next-event__label { color:#acb9cc; font-size:11px; font-weight:500; letter-spacing:.06em; text-transform:uppercase; white-space:nowrap; }
.today-next-event p { display:flex; align-items:baseline; flex-wrap:wrap; gap:6px 10px; margin:0; color:#ecf1f7; }
.today-next-event strong { color:#f4ca80; font-weight:600; }
.today-next-event__when { color:#c9d4e2; font-size:13px; }
.today-next-event .full-moon-countdown { color:#acb9cc; font-size:13px; white-space:nowrap; }
.today-next-event__when a, .page-year .year-story a { color:inherit; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; }
.today-next-event__when a:hover, .page-year .year-story a:hover { color:#f4ca80; }
.today-visibility .moon-night { border-top:1px solid #dde0db; border-bottom:1px solid #dde0db; }
@media(max-width:540px) { .today-next-event { display:grid; gap:6px; } .today-next-event p { display:grid; gap:4px; } }
@media(max-width:760px) { .today-phase-card { grid-template-columns:1fr; gap:24px; } .today-phase-card__visual { max-width:230px; } }
/* One column: today's Moon sits right under its name and illumination, and the
   next phase closes the card, so the photo never reads as the next phase. */
@media(max-width:760px) {
  .today-phase-card { row-gap:0; }
  .today-phase-card__body { display:contents; }
  .today-phase-card__body > * { order:2; }
  .today-phase-card__body > .eyebrow, .today-phase-card__body > h2, .today-phase-card__stats { order:0; }
  .today-phase-card__visual { order:1; margin:12px auto 4px; }
}
.moon-grid-section__bar { display:flex; justify-content:space-between; gap:20px; }
.moon-grid-section__bar h2 { margin:0; }
.moon-view-switch__button { border:0; font-family:var(--font-ui); cursor:pointer; }
.moon-grid .today { outline:2px solid #7fb2e6; outline-offset:-2px; }
.calendar-caption a { color:inherit; text-underline-offset:3px; }
.page-legal { background:#f6f3ed; }
.page-legal main { max-width:1120px; padding-inline:28px; box-sizing:border-box; }
.city-picker__panel > summary { cursor:pointer; min-height:44px; padding-top:12px; }
@media print {
 .city-picker, .moon-view-switch, .calendar-month-nav, .moon-dialog, .city-dialog { display:none!important; }
 .moon-grid-section { --cal-bg:#fff; --cal-ink:#000; --cal-muted:#444; --cal-cell:#fff; --cal-line:#aaa; }
 .moon-grid .daily-moon-visual { display:none; }
 .moon-grid .moon-cell .phase-visual { display:block; }
 .moon-grid .moon-cell { min-height:65px; }
 .moon-grid .daily-moon-illumination { color:#444; }
 .today-centerpiece { background:white; color:black; }
 .today-phase-card__visual { display:none; }
 .today-phase-card__body h2, .today-centerpiece .meta, .today-centerpiece .today-insight { color:black; }
}
.calendar-inner > .moon-view-switch { width:max-content; max-width:100%; box-sizing:border-box; margin-bottom:24px; }
.month-phase-summary__item--full_moon { background:#231d10; border-color:#70592d; }
.month-phase-summary__item--full_moon .month-phase-summary__date { color:#f4ca80; }
.moon-grid-section[data-moon-view="simple"] .month-phase-summary__item--full_moon { background:#fff4d9; border-color:#c7b278; }
.moon-grid-section[data-moon-view="simple"] .month-phase-summary__item--full_moon .month-phase-summary__date { color:#60431f; }
/* Global picker: short suggested lists, ranked search and a stable action bar. */
.city-picker__native { display:grid; gap:8px; }
.city-picker__native select { max-width:100%; min-height:44px; font:inherit; padding:10px; }
.city-dialog { max-height:92dvh; overflow:hidden; padding:0; }
.city-dialog form { display:flex; flex-direction:column; max-height:92dvh; padding:22px; box-sizing:border-box; }
.city-dialog header, .city-dialog form > p, .city-picker__search, .city-dialog footer { flex-shrink:0; }
.city-dialog .city-picker__options { min-height:60px; max-height:none; flex:1 1 auto; overflow-y:auto; margin:0; padding:4px; }
.city-dialog .city-choice { width:100%; box-sizing:border-box; text-align:left; font:inherit; color:inherit; background:#fffdf9; }
.city-dialog .city-choice[aria-pressed="true"] { border-color:#ac7925; background:#faf0da; }
.city-choice mark { background:#f4e5bd; color:inherit; }
.city-choice__alias { font-style:italic; }
.city-dialog .city-picker__group { font:500 11px/1.4 var(--font-ui); letter-spacing:.05em; text-transform:uppercase; color:#586578; margin:15px 0 8px; }
.city-dialog .city-picker__status { margin:9px 0 4px; font-size:12px; min-height:18px; }
.city-picker__more { flex-shrink:0; background:transparent; color:#344f70; border:0; min-height:44px; cursor:pointer; font:inherit; }
.city-dialog footer { display:flex; align-items:center; justify-content:space-between; gap:12px; background:#fffdf9; padding-top:14px; margin-top:8px; }
.city-picker__selection { font-size:12px; line-height:1.4; }
.city-dialog footer button { flex-shrink:0; }
.city-picker__search input { font-size:16px; }
@media(max-width:540px) { .city-dialog form { padding:18px; } .city-choice__clock { white-space:nowrap; font-size:10px; } .city-picker__selection { max-width:45%; } .city-dialog footer button { padding:12px; font-size:13px; } }
@media(max-height:600px) {
 .city-dialog form { padding:14px; }
 .city-dialog form > p:not(.city-picker__status) { display:none; }
 .city-dialog .city-picker__options { min-height:0; }
}

/* Keep the viewed month attached to its calendar, not only to the page hero. */
.page-month .page-content--month:first-child { padding-block:14px; }
.page-month .hero { margin-bottom:12px; }
.page-month .city-picker { margin:14px 0 0; }
.calendar-context { position:sticky; top:55px; z-index:5; background:var(--cal-bg); padding-block:12px; border-bottom:1px solid var(--cal-line); }
.calendar-context__city { color:var(--cal-muted); font-size:12px; line-height:1.4; margin:5px 0 0; }
@media print { .calendar-context { position:static; } }

@media(max-width:640px) { .calendar-context { top:49px; } }

/* Compact opening: tool title and one explanatory sentence, then the dated calendar. */
.month-opening__intro { color:#586578; font-size:14px; line-height:1.5; margin:7px 0 0; max-width:620px; }
.page-month .month-opening .city-picker { border:0; padding:0; gap:14px; }
.month-opening .city-picker__open { padding:9px 14px; }
.page-month .page-content--month:first-child .breadcrumb { margin-bottom:14px; }
/* Desktop opening: title and location share one row. */
@media(min-width:900px) {
 .month-opening { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:28px; }
 .page-month .month-opening .hero { margin:0; }
 .page-month .month-opening .city-picker { margin:0; gap:20px; flex-wrap:nowrap; }
 .month-opening .city-picker__current { max-width:260px; overflow-wrap:anywhere; }
 .month-opening .city-picker__open { white-space:nowrap; }
 .month-opening .city-picker:has(.city-picker__panel[open]) { flex-wrap:wrap; max-width:420px; }
 .landing-opening { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:28px; }
 .page-landing .landing-opening .city-picker { margin:0; min-width:355px; flex-wrap:nowrap; }
 .landing-opening .city-picker__current { max-width:220px; overflow-wrap:anywhere; }
 .landing-opening .city-picker__open { white-space:nowrap; }
 .landing-opening .city-picker:has(.city-picker__panel[open]) { flex-wrap:wrap; max-width:420px; }
}
/* A single sliding thumb makes the two choices read as one control. */
.calendar-context .moon-view-switch { position:relative; isolation:isolate; flex:0 0 auto; border-radius:999px; padding:4px; gap:0; }
.calendar-context .moon-view-switch::before { content:""; position:absolute; z-index:-1; top:4px; bottom:4px; left:4px; width:calc(50% - 4px); border-radius:999px; background:#f4ca80; box-shadow:0 1px 4px #0003; transition:transform 160ms ease; }
.moon-grid-section[data-moon-view="simple"] .moon-view-switch::before { transform:translateX(100%); }
.calendar-context .moon-view-switch__button { flex:1 1 0; width:115px; padding:9px 12px; border-radius:999px; line-height:1.25; }
.calendar-context .moon-view-switch__button.is-active { background:transparent; color:#2e2517; }
@media(max-width:760px) {
 .calendar-context { flex-direction:row; align-items:center; gap:12px; }
 .calendar-context h2 { font-size:20px; }
 .calendar-context .moon-view-switch__button { width:79px; padding:7px 5px; font-size:11px; }
}
@media(max-width:350px) {
 .calendar-context h2 { font-size:17px; }
 .calendar-context .moon-view-switch__button { width:70px; }
}
@media(prefers-reduced-motion:reduce) { .calendar-context .moon-view-switch::before { transition:none; } }

/* K7g: the yearly page is an index first, with one local-calendar story. */
.page-year .year-opening { background:#f6f3ed; }
.page-year .year-opening .breadcrumb { margin-bottom:14px; }
.page-year .year-opening__layout { display:grid; gap:18px; }
.page-year .year-opening__controls { display:grid; gap:10px; }
.page-year .year-opening .city-picker { margin:0; border:0; padding:0; gap:12px; }
.page-year .year-opening .city-picker__open { padding:9px 14px; }
.page-year .year-calendar__context { display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.page-year .year-nav { display:flex; flex-wrap:wrap; gap:16px; font-size:14px; }
.page-year .year-nav a { color:#344f70; text-decoration:none; font-weight:600; }
.page-year .year-nav a:hover { color:#9a6515; text-decoration:underline; }
.page-year .year-story { background:#111e30; color:#f4f1eb; padding:36px 0 40px; }
.page-year .year-story .page-content { padding-block:0; }
.page-year .year-story__eyebrow { color:#b8c6d7; margin:0 0 8px; font:600 11px/1.3 var(--font-ui); letter-spacing:.1em; text-transform:uppercase; }
.page-year .year-story h2 { max-width:760px; margin:0; color:#fff; font:500 clamp(26px,4vw,42px)/1.12 var(--font-ui); letter-spacing:-.03em; }
.page-year .year-story p:last-child { max-width:680px; margin:12px 0 0; color:#d7e0ea; font-size:16px; line-height:1.55; }
.page-year .year-calendar { background:#f6f3ed; padding:0 0 42px; }
.page-year .year-calendar .page-content { padding-top:0; }
.page-year .year-calendar__context { position:sticky; z-index:5; top:55px; margin:0 -1px 22px; padding:14px 1px 11px; background:#f6f3ed; border-bottom:1px solid #d8d4cd; }
.page-year .year-calendar__context h2 { margin:0; color:#46576b; font:600 15px/1.35 var(--font-ui); }
.page-year .year-grid { gap:22px; }
.page-year .year-month-card { min-width:0; padding:17px; border-color:#dedbd5; border-radius:12px; background:#fffdf9; }
.page-year .year-card-header { margin:0 0 12px; font-family:var(--font-ui); }
.page-year .year-card-header a { display:inline-flex; align-items:center; gap:5px; }
.page-year .year-card__arrow { color:#9a6515; font-size:.9em; transition:transform 140ms ease; }
.page-year .year-card-header a:hover .year-card__arrow { transform:translateX(3px); }
.page-year .year-mini-grid { gap:2px; margin-bottom:13px; }
.page-year .year-mini-cell { min-width:0; color:#687687; }
.page-year .year-mini-cell.has-phase { border-color:#c99b4b; background:#fbf0d7; }
.page-year .year-phases-list { display:grid; gap:3px; margin:0; padding:0; list-style:none; color:#596779; font-size:12px; line-height:1.4; }
.page-year .year-phases-list li { min-width:0; margin:0; overflow-wrap:anywhere; }
.page-year .year-phases-list strong { color:#263950; font-weight:600; }
.page-year .year-phases-list time { white-space:nowrap; }
.page-year .year-ending { padding-top:8px; }
@media(min-width:900px) {
 .page-year .year-opening__layout { grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:28px; }
 .page-year .year-opening__controls { justify-items:end; }
 .page-year .year-opening .city-picker { min-width:355px; flex-wrap:nowrap; }
 .page-year .year-opening .city-picker__current { max-width:220px; overflow-wrap:anywhere; }
 .page-year .year-opening .city-picker__open { white-space:nowrap; }
 .page-year .year-opening .city-picker:has(.city-picker__panel[open]) { flex-wrap:wrap; max-width:420px; }
}
@media(max-width:760px) { .page-year .year-calendar__context { top:49px; } }
@media(max-width:420px) {
 .page-year .year-month-card { padding:12px 9px; }
 .page-year .year-mini-grid { gap:1px; }
 .page-year .year-mini-cell .day-number { font-size:10px; }
 .page-year .year-mini-cell .phase-visual svg { width:13px; height:13px; }
 .page-year .year-phases-list { font-size:11px; }
}
@media(prefers-reduced-motion:reduce) { .page-year .year-card__arrow { transition:none; } }
@media print {
 .page-year .year-story { padding:0; background:#fff !important; color:#000 !important; }
 .page-year .year-story h2, .page-year .year-story p:last-child, .page-year .year-story__eyebrow { color:#000 !important; }
 .page-year .year-calendar__context { position:static; background:#fff; }
 .page-year .year-nav { display:none; }
}

/* Cycle details: secondary numbers below today's visibility chart. */
.today-cycle { padding:22px 0 26px; }
.today-cycle__list { display:flex; flex-wrap:wrap; gap:8px 36px; margin:0; }
.today-cycle__list dt { color:var(--text-secondary); font-size:.85rem; }
.today-cycle__list dd { margin:2px 0 0; font-size:.95rem; }

/* Heading scale and eyebrows shared by landing, month and year (docs/ui_system.md §3). */
.faq-section h2, .phase-notes-section h2, .times-section h2, .upcoming-timeline__heading { margin:0 0 14px; color:#17253c; font:500 26px/1.25 var(--font-ui); letter-spacing:-.02em; }
.eyebrow, .today-cycle h2, .full-moon-guide__kicker, .page-year .year-story__eyebrow { margin:0 0 8px; font:600 11px/1.3 var(--font-ui); letter-spacing:.1em; text-transform:uppercase; }
.today-cycle h2 { margin-bottom:10px; color:var(--text-secondary); }
@media(max-width:540px) { .faq-section h2, .phase-notes-section h2, .times-section h2, .upcoming-timeline__heading { font-size:22px; } }

/* "Where next" links: same cards on landing, month and year (docs/ui_system.md §7). */
.landing-actions { grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); }
.landing-action-link--back .landing-action-link__arrow { order:-1; }
.landing-action-link--back:hover .landing-action-link__arrow { transform:translateX(-4px); }