:root {
  color-scheme: light;
  --ink: #15332e;
  --muted: #657872;
  --paper: #f5f3ec;
  --card: #fffef9;
  --line: #d9ded8;
  --forest: #0b4b3f;
  --mint: #bce4d3;
  --sun: #f3c767;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); }
a { color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }

.site-header, main, footer { width: min(1120px, calc(100% - 40px)); margin-inline: auto; }
.site-header { min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 850; text-decoration: none; letter-spacing: -.02em; }
.brand span { display: grid; place-items: center; width: 29px; height: 29px; border-radius: 9px; color: white; background: var(--forest); }
nav { display: flex; gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: 999px; background: #ffffff8f; }
nav a { padding: 8px 14px; border-radius: 999px; color: var(--muted); font-size: 14px; font-weight: 750; text-decoration: none; }
nav a[aria-current="page"] { color: white; background: var(--forest); }

.hero { position: relative; overflow: hidden; padding: clamp(48px, 8vw, 96px); border-radius: 30px; color: white; background: var(--forest); }
.hero::after { position: absolute; right: -110px; bottom: -150px; width: 420px; height: 420px; border: 76px solid #ffffff12; border-radius: 50%; content: ""; }
.eyebrow { margin: 0 0 16px; color: #76b9a3; font-size: 12px; font-weight: 850; letter-spacing: .15em; }
.hero .eyebrow { color: var(--mint); }
h1, h2, h3, p { text-wrap: pretty; }
h1 { position: relative; z-index: 1; max-width: 760px; margin: 0; font-size: clamp(44px, 7vw, 78px); line-height: .98; letter-spacing: -.06em; }
.lede { position: relative; z-index: 1; max-width: 680px; margin: 28px 0 0; color: #d6e8e2; font-size: clamp(17px, 2vw, 21px); line-height: 1.6; }
.hero-actions { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.primary, .secondary { display: inline-flex; min-height: 48px; align-items: center; justify-content: center; padding: 0 20px; border: 0; border-radius: 999px; font: inherit; font-size: 14px; font-weight: 820; text-decoration: none; cursor: pointer; }
.primary { color: var(--forest); background: var(--sun); }
.secondary { color: white; border: 1px solid #ffffff45; background: transparent; }
.primary:hover, .secondary:hover { transform: translateY(-1px); }
.next-card { position: relative; z-index: 1; display: inline-flex; flex-direction: column; gap: 5px; margin-top: 42px; padding-left: 15px; border-left: 2px solid var(--sun); }
.next-card span { color: #a9c8be; font-size: 12px; font-weight: 750; letter-spacing: .04em; text-transform: uppercase; }
.next-card strong { font-size: 16px; }

.summary { display: grid; grid-template-columns: repeat(4, 1fr); margin: 22px 0 90px; border: 1px solid var(--line); border-radius: 20px; background: #ffffff80; }
.summary article { display: flex; min-height: 116px; flex-direction: column; justify-content: center; padding: 24px; border-right: 1px solid var(--line); }
.summary article:last-child { border-right: 0; }
.summary strong { font-size: 31px; letter-spacing: -.04em; }
.summary span { margin-top: 4px; color: var(--muted); font-size: 13px; }

.content-section { margin: 90px 0; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 32px; margin-bottom: 28px; }
h2 { margin: 0; font-size: clamp(31px, 5vw, 50px); line-height: 1.05; letter-spacing: -.045em; }
.legend { display: flex; flex-wrap: wrap; gap: 14px; color: var(--muted); font-size: 12px; }
.legend span { display: flex; align-items: center; gap: 7px; }
.legend i { width: 9px; height: 9px; border-radius: 50%; background: var(--forest); }
.legend i.common { background: var(--sun); }
.holiday-list { overflow: hidden; border: 1px solid var(--line); border-radius: 22px; background: var(--card); }
.holiday { display: grid; grid-template-columns: 64px 1fr auto; align-items: center; gap: 20px; min-height: 96px; padding: 15px 22px; border-bottom: 1px solid var(--line); }
.holiday:last-child { border-bottom: 0; }
.holiday time { display: grid; place-items: center; align-content: center; width: 58px; height: 62px; border-radius: 13px; color: white; background: var(--forest); }
.holiday time b { font-size: 23px; line-height: 1; }
.holiday time span { margin-top: 5px; font-size: 10px; font-weight: 850; letter-spacing: .08em; }
.holiday h3 { margin: 0; font-size: 18px; letter-spacing: -.02em; }
.holiday p { margin: 5px 0 0; color: var(--muted); font-size: 13px; }
.holiday .tag { padding: 6px 10px; border-radius: 999px; color: var(--forest); background: var(--mint); font-size: 11px; font-weight: 800; }
.holiday.common-day time { color: var(--ink); background: var(--sun); }
.holiday.common-day .tag { background: #f9e8bd; }
.holiday.is-past { opacity: .58; }

.tip-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 30px; }
.tip-grid article { min-height: 220px; padding: 30px; border: 1px solid var(--line); border-radius: 20px; background: var(--card); }
.tip-grid span { display: inline-block; padding: 6px 9px; border-radius: 999px; color: var(--forest); background: var(--mint); font-size: 11px; font-weight: 850; }
.tip-grid h3 { margin: 42px 0 10px; font-size: 24px; letter-spacing: -.03em; }
.tip-grid p, .notes > p { color: var(--muted); line-height: 1.7; }
.notes { max-width: 820px; padding: clamp(26px, 5vw, 52px); border: 1px solid var(--line); border-radius: 24px; background: var(--card); }
.notes h2 { font-size: clamp(30px, 5vw, 44px); }
.notes .source-note { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 13px; }
.notes a, footer a { color: var(--forest); font-weight: 750; }

.year-cta { display: flex; align-items: center; justify-content: space-between; gap: 28px; margin: 100px 0 50px; padding: 42px; border-radius: 24px; color: white; background: #183e36; }
.year-cta .eyebrow { color: var(--mint); }
.year-cta h2 { font-size: clamp(28px, 4vw, 42px); }
footer { display: flex; justify-content: space-between; gap: 30px; padding-block: 26px 44px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; }

@media (max-width: 760px) {
  .site-header, main, footer { width: min(100% - 24px, 1120px); }
  .hero { padding: 42px 24px; border-radius: 22px; }
  .summary { grid-template-columns: repeat(2, 1fr); margin-bottom: 70px; }
  .summary article:nth-child(2) { border-right: 0; }
  .summary article:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .section-heading, .year-cta, footer { align-items: flex-start; flex-direction: column; }
  .holiday { grid-template-columns: 54px 1fr; gap: 14px; padding: 13px; }
  .holiday time { width: 52px; height: 56px; }
  .holiday .tag { grid-column: 2; justify-self: start; margin-top: -6px; }
  .tip-grid { grid-template-columns: 1fr; }
  .tip-grid article { min-height: auto; }
  .tip-grid h3 { margin-top: 28px; }
  .year-cta { padding: 30px 24px; }
}

@media print {
  .site-header, .hero-actions, .next-card, .year-cta, footer { display: none; }
  body { background: white; }
  main { width: 100%; }
  .hero { padding: 20px 0; color: var(--ink); background: white; }
  .hero .eyebrow, .lede { color: var(--muted); }
  .summary, .content-section { margin: 20px 0; }
  .holiday { break-inside: avoid; min-height: 72px; }
  .tips, .notes { display: none; }
}