/* The postcard year chart uses the hub's tokens; other page families are untouched. */
body.postcard-page .postcard-year { --year-bar: #8795af; --year-crowd: #4b5c7a; max-width: 920px; margin-inline: auto; }
html[data-theme="dark"] body.postcard-page .postcard-year { --year-bar: #9cacc7; --year-crowd: #c1cce0; }
body.postcard-page .postcard-year-heading { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 24px; }
body.postcard-page .postcard-year-heading h2 { margin: 10px 0 0; font-size: clamp(1.95rem, 3vw, 2.6rem); line-height: 1.14; }
body.postcard-page .postcard-year-units { flex: 0 0 auto; margin: 0; padding: 0; border: 0; min-width: 0; white-space: nowrap; }
body.postcard-page .postcard-year-units label { display: inline-block; position: relative; cursor: pointer; }
body.postcard-page .postcard-year-units label > span { display: grid; place-items: center; min-width: 44px; min-height: 44px; border-radius: 5px; color: var(--muted); font-weight: 700; }
body.postcard-page .postcard-year-units input:checked + span { background: var(--postcard-soft-blue); color: var(--blue); }
body.postcard-page .postcard-year-units input:focus-visible + span,
body.postcard-page .postcard-year-months input:focus-visible + span { outline: 3px solid var(--blue); outline-offset: 3px; }
body.postcard-page .postcard-year-legend { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 15px 24px; margin: 30px 0 22px; color: var(--muted); font-size: .875rem; }
body.postcard-page .postcard-year-series { display: flex; flex-wrap: wrap; gap: 16px 24px; }
body.postcard-page .postcard-year-series > span { display: inline-flex; align-items: center; gap: 9px; }
body.postcard-page .postcard-year-key { display: inline-block; width: 28px; border-top: 3px solid var(--coral); }
body.postcard-page .postcard-year-key--low { border-color: var(--blue); border-top-style: dashed; }
body.postcard-page .postcard-year-match { margin: 0; padding: 5px 10px; background: var(--postcard-selected); color: var(--ink); border-radius: 3px; }
body.postcard-page .postcard-year-chart { display: block; width: 100%; height: auto; overflow: visible; }
body.postcard-page .postcard-year-chart--compact { display: none; }
body.postcard-page .postcard-year-chart text { font-family: Inter, Arial, sans-serif; fill: var(--muted); }
body.postcard-page .postcard-year-axis,
body.postcard-page .postcard-year-rain-label { font-size: 15px; }
body.postcard-page .postcard-year-chart .postcard-year-axis-title { font-size: 16px; font-weight: 600; fill: var(--ink); }
body.postcard-page .postcard-year-gridline { stroke: var(--line); stroke-width: 1; }
body.postcard-page .postcard-year-line { fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
body.postcard-page .postcard-year-line--high { stroke: var(--coral); }
body.postcard-page .postcard-year-line--low { stroke: var(--blue); stroke-dasharray: 6 6; }
body.postcard-page .postcard-year-point--high { fill: var(--coral); }
body.postcard-page .postcard-year-point--low { fill: var(--blue); }
body.postcard-page .postcard-year-point.is-selected { stroke: var(--paper); stroke-width: 2.5; }
body.postcard-page .postcard-year-rain { fill: var(--year-bar); }
body.postcard-page .postcard-year-crowd { fill: var(--year-crowd); }
body.postcard-page .postcard-year-guide { stroke: var(--blue); stroke-width: 1; stroke-dasharray: 3 6; opacity: .65; pointer-events: none; }
body.postcard-page .postcard-year-months { border: 0; min-width: 0; padding: 0; margin: 12px 0 0; }
body.postcard-page .postcard-year-months legend { padding: 0; color: var(--muted); font-size: .875rem; }
body.postcard-page .postcard-year-month-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; margin: 8px 0 16px; }
body.postcard-page .postcard-year-month-choice { position: relative; min-width: 0; cursor: pointer; }
body.postcard-page .postcard-year-month-choice > span { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; min-height: 52px; border-radius: 5px; color: var(--muted); line-height: 1.3; }
body.postcard-page .postcard-year-month-choice > span > i { width: 25px; height: 5px; border: 1px solid transparent; background: transparent; }
body.postcard-page .postcard-year-month-choice.is-recommended > span > i { border-color: #745f1c; background: var(--yellow); }
body.postcard-page .postcard-year-month-choice:hover > span { background: var(--postcard-soft-blue); color: var(--blue); }
body.postcard-page .postcard-year-month-choice input:checked + span { background: var(--blue); color: var(--paper); font-weight: 700; }
body.postcard-page .postcard-year-detail { padding-top: 22px; border-top: 1px solid var(--line); }
body.postcard-page .postcard-year-detail h3 { margin: 0 0 14px; font: 400 2rem/1.2 Georgia, 'Times New Roman', serif; }
body.postcard-page .postcard-year-detail dl { display: flex; flex-wrap: wrap; gap: 9px 24px; margin: 0; }
body.postcard-page .postcard-year-detail dl > div { display: flex; gap: 7px; }
body.postcard-page .postcard-year-detail dt { color: var(--muted); }
body.postcard-page .postcard-year-detail dd { margin: 0; font-weight: 600; }
body.postcard-page .postcard-year-missing,
body.postcard-page .postcard-year-off-season { margin: 14px 0 0; font-size: .875rem; color: var(--muted); }
body.postcard-page .postcard-year-note { margin: 22px 0 0; font-size: .8125rem; color: var(--muted); }
@media (max-width: 640px) {
  body.postcard-page .postcard-year-heading { gap: 12px; }
  body.postcard-page .postcard-year-heading h2 { max-width: 12ch; }
  body.postcard-page .postcard-year-units label > span { min-width: 44px; }
  body.postcard-page .postcard-year-chart--wide { display: none; }
  body.postcard-page .postcard-year-chart--compact { display: block; }
  body.postcard-page .postcard-year-axis,
  body.postcard-page .postcard-year-rain-label { font-size: 16px; }
  body.postcard-page .postcard-year-axis-title { font-size: 16px; }
  body.postcard-page .postcard-year-legend { margin-block: 22px 20px; }
  body.postcard-page .postcard-year-series { gap: 12px 18px; }
  body.postcard-page .postcard-year-key { width: 22px; }
  body.postcard-page .postcard-year-month-grid { gap: 4px; }
  body.postcard-page .postcard-year-month-choice > span { min-height: 50px; font-size: .875rem; }
  body.postcard-page .postcard-year-detail dl { gap: 9px 18px; }
}
@media print {
  body.postcard-page .postcard-year-units,
  body.postcard-page .postcard-year-months { display: none !important; }
}