/* ==========================================================================
   Printable Calendars (calpdf.com) - site styles
   Grayscale on purpose: the site chrome matches the product, which is a
   black-and-white A4 PDF. Nothing here is a colour.
   ========================================================================== */

:root {
  --bg: #f5f6f7;
  --surface: #ffffff;
  --ink: #101114;
  --ink-soft: #54575e;
  --ink-faint: #8a8e95;
  --line: #e3e5e8;
  --line-strong: #cdd0d5;
  --brand: #131519;
  --brand-dark: #000000;
  --brand-soft: #eef0f2;
  --radius: 16px;
  --radius-sm: 10px;
  /* Display height of a card thumbnail. Its width follows the image, so this one
     number sets how big every preview appears. The widest thumbnail has an
     aspect ratio of 1.69, so 165px shows it 279px wide and it still fits inside
     the card's 342px of content. */
  --thumb-h: 165px;
  --shadow: 0 1px 2px rgba(16, 17, 20, 0.04), 0 8px 24px rgba(16, 17, 20, 0.06);
  --shadow-lg: 0 2px 4px rgba(16, 17, 20, 0.05), 0 18px 48px rgba(16, 17, 20, 0.12);
  --maxw: 1120px;
  --font: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", Consolas, monospace;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3 { line-height: 1.2; margin: 0 0 0.5em; letter-spacing: -0.02em; }
h1 { font-size: clamp(1.85rem, 4.6vw, 2.9rem); }
h2 { font-size: clamp(1.4rem, 3vw, 1.95rem); }
h3 { font-size: 1.12rem; }
p { margin: 0 0 1em; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--brand);
  color: #fff;
  padding: 10px 16px;
  z-index: 100;
}
.skip-link:focus { left: 8px; top: 8px; }

/* ---------- Header ---------- */

.site-header {
  height: 64px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}

.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  gap: 16px;
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  font-size: 1.16rem;
  color: var(--ink);
  letter-spacing: -0.03em;
  flex: 0 0 auto;
}
.logo:hover { text-decoration: none; }
.logo-mark { width: 34px; height: 34px; display: block; flex: 0 0 auto; }
.logo-text { white-space: nowrap; }
.logo-text em { font-style: normal; color: var(--ink-faint); font-weight: 700; }

.nav {
  display: flex;
  gap: 20px;
  align-items: center;
  font-size: 0.92rem;
  font-weight: 600;
}
.nav a { color: var(--ink-soft); white-space: nowrap; }
.nav a:hover { color: var(--ink); text-decoration: none; }
.nav a[aria-current="page"] { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
.nav .nav-all { display: none; }

@media (max-width: 860px) {
  .nav .nav-year { display: none; }
  .nav .nav-all { display: inline; }
}

/* ---------- Hero ---------- */

/* One treatment for every hero: the homepage and the year and month pages.
   Deliberately no rule under it, so the intro reads as part of the page rather
   than as a banner sitting on top of it. */
.hero,
.hero-inner {
  padding: 64px 0 44px;
  text-align: center;
  background:
    radial-gradient(900px 380px at 50% -140px, #e9ebee 0%, transparent 70%),
    var(--bg);
}

.hero h1,
.hero-inner h1 { margin-bottom: 0.35em; }

.hero p.lead,
.hero-inner p.lead {
  font-size: 1.12rem;
  color: var(--ink-soft);
  max-width: 640px;
  margin: 0 auto;
}

.badge {
  display: inline-block;
  background: var(--brand-soft);
  color: var(--ink);
  font-size: 0.78rem;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 18px;
  letter-spacing: 0.02em;
}

.hero-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 24px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.95rem;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease, border-color 0.12s ease;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn-primary { background: var(--brand); color: #fff; box-shadow: 0 8px 20px rgba(16, 17, 20, 0.22); }
.btn-primary:hover { background: var(--brand-dark); }
.btn-ghost { background: var(--surface); color: var(--ink); border-color: var(--line); box-shadow: var(--shadow); }
.btn-ghost:hover { border-color: var(--line-strong); }

/* ---------- Sections ---------- */

section { padding: 48px 0; }
.section-alt {
  background: var(--surface);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.section-head { text-align: center; max-width: 660px; margin: 0 auto 34px; }
.section-head h2 { margin-bottom: 0.35em; }
.section-head p { color: var(--ink-soft); margin: 0; }

/* Homepage year blocks: the heading and its note are centred, and so are the
   month links under them. */
.years { padding-top: 0; }
.year-block { padding: 40px 0; border-bottom: 1px solid var(--line); text-align: center; }
.year-block:first-child { padding-top: 12px; }
.year-block:last-child { border-bottom: 0; padding-bottom: 8px; }
.year-block h2 { margin-bottom: 0.15em; }
.year-block .year-note {
  color: var(--ink-soft);
  font-size: 0.95rem;
  margin: 0 auto 18px;
  max-width: 620px;
}

.year-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: 10px;
}

.year-links a {
  display: block;
  padding: 11px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  font-weight: 600;
  font-size: 0.92rem;
  text-align: center;
  box-shadow: var(--shadow);
  transition: transform 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}
.year-links a:hover {
  text-decoration: none;
  transform: translateY(-2px);
  border-color: var(--line-strong);
  box-shadow: var(--shadow-lg);
}
.year-links a.is-primary { background: var(--brand); color: #fff; border-color: var(--brand); }

/* ---------- Breadcrumbs ---------- */

/* Sits centred above the hero heading, so it inherits the hero's text-align
   rather than needing a rule of its own. */
.crumbs {
  font-size: 0.85rem;
  color: var(--ink-faint);
  margin: 0 0 16px;
}
.crumbs a { color: var(--ink-soft); }
.crumbs span { color: var(--ink-faint); }

/* ---------- Download cards ---------- */

.dl-group { margin-bottom: 34px; }
.dl-group:last-child { margin-bottom: 0; }

/* The group heading and its note are centred, and the cards centre with them
   when a group holds only one or two. */
.dl-group-head { margin-bottom: 16px; text-align: center; }
.dl-group-head h3 { margin: 0 0 2px; font-size: 1.06rem; }
.dl-group-head p { margin: 0 auto; max-width: 620px; font-size: 0.88rem; color: var(--ink-faint); }

/* Flexbox rather than grid, so every row centres rather than only the tracks.
   Grid places items in column order, which leaves a short last row (two cards
   under a row of three) hard against the left edge. With wrapping flex the
   whole last row centres, and a group of one or two cards sits in the middle.
   The 300px basis sets when a row has to wrap, and the 342px cap keeps cards
   the same width as they are in a full row of three. */
.dl-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
}

.dl-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Wider than the text needs, because the widest thumbnails are landscape and
     need the room at the fixed display height. */
  flex: 1 1 300px;
  max-width: 380px;
  gap: 8px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: var(--shadow);
  color: inherit;
  text-align: center;
  transition: transform 0.14s ease, box-shadow 0.14s ease, border-color 0.14s ease;
}
.dl-card:hover {
  text-decoration: none;
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
  border-color: var(--line-strong);
}

/* The thumbnail: a fixed display height with the width left to follow the
   image, so a landscape page shows wider than a portrait one. Centred in the
   card, because the widths differ from card to card. */
.dl-card .thumb {
  display: block;
  height: var(--thumb-h);
  width: auto;
  max-width: 100%;
  margin: 0 0 6px;
}
.dl-card h3 { margin: 0; font-size: 0.99rem; line-height: 1.35; }
.dl-card .meta { margin: 0; font-size: 0.82rem; color: var(--ink-faint); }
.dl-card .cta {
  margin-top: 8px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 15px;
  font-size: 0.84rem;
  font-weight: 700;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
}
.dl-card:hover .cta { background: var(--brand); border-color: var(--brand); color: #fff; }
.dl-card .cta svg { flex: 0 0 auto; }

/* ---------- Month links ---------- */

.month-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
}
.month-links a {
  display: block;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  font-weight: 600;
  font-size: 0.9rem;
  text-align: center;
  box-shadow: var(--shadow);
  transition: transform 0.12s ease, border-color 0.12s ease;
}
.month-links a:hover {
  text-decoration: none;
  transform: translateY(-2px);
  border-color: var(--line-strong);
}

/* The short list on the 404 page, so it does not run the full page width. */
.month-links-narrow { max-width: 560px; margin: 0 auto; }

/* ---------- Prev / next ---------- */

/* Three columns, the outer two equal width. With `space-between` on a flex row
   the middle link was only centred when both neighbours happened to be the same
   width, so on January and December it sat off centre. Equal `1fr` side columns
   put it exactly in the middle whatever is beside it. */
.page-nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  padding: 26px 0 0;
  margin-top: 34px;
  border-top: 1px solid var(--line);
}
.page-nav > :first-child { justify-self: start; }
.page-nav > :nth-child(2) { justify-self: center; }
.page-nav > :last-child { justify-self: end; }
.page-nav a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  font-weight: 600;
  font-size: 0.9rem;
  box-shadow: var(--shadow);
}
.page-nav a:hover { text-decoration: none; border-color: var(--line-strong); }

/* ---------- Prose / fact strip ---------- */

.prose { max-width: 760px; color: var(--ink-soft); }
.prose h2 { color: var(--ink); font-size: 1.3rem; margin-top: 0; }
.prose ul { padding-left: 20px; }
.prose li { margin-bottom: 6px; }

/* Runs the full width of the column, matching the sections around it. */
.prose-wide { max-width: none; }

/* The heading is centred while the prose under it stays left aligned. */
.prose-head-center h2 { text-align: center; }

/* Full width, with a little more air under the block above it. Used under the
   month link grid, where the links need separating from the prose. */
.prose-block {
  max-width: none;
  margin: 0;
  padding-top: 48px;
}

.facts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px;
}
.facts li {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px 18px;
  box-shadow: var(--shadow);
}
.facts .k {
  display: block;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ink-faint);
  font-weight: 700;
  margin-bottom: 4px;
}
.facts .v { font-weight: 700; font-size: 0.95rem; }

/* ---------- Footer ---------- */

.site-footer {
  border-top: 1px solid var(--line);
  background: var(--surface);
  padding: 40px 0 30px;
  margin-top: 40px;
  font-size: 0.9rem;
  color: var(--ink-soft);
}
.site-footer .cols { display: flex; justify-content: space-between; gap: 30px; flex-wrap: wrap; }
.site-footer .links { display: flex; gap: 18px; flex-wrap: wrap; }
.site-footer .links a { color: var(--ink-soft); }
.site-footer .links a:hover { color: var(--ink); }
.footer-about { margin-top: 12px; max-width: 380px; }
.site-footer .copy {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px 28px;
  flex-wrap: wrap;
  font-size: 0.82rem;
  color: var(--ink-faint);
}
.site-footer .copy a { color: inherit; text-decoration: none; }
.site-footer .copy a:hover { color: var(--ink); text-decoration: underline; }
.site-footer .legal-links { display: flex; gap: 20px; flex-wrap: wrap; }

/* ---------- Legal pages ---------- */

.legal { padding: 8px 0 20px; }
/* Full width of the column, matching the rest of the page. */
.legal-body { max-width: none; }
.legal-body h2 { font-size: 1.15rem; margin: 32px 0 10px; }
.legal-body h3 { font-size: 1rem; margin: 24px 0 8px; }
.legal-body p { color: var(--ink-soft); margin: 0 0 14px; }
.legal-body ul { color: var(--ink-soft); margin: 0 0 14px; padding-left: 22px; }
.legal-body li { margin-bottom: 8px; }
.legal-body a { color: var(--brand); text-decoration: underline; }
.legal-updated { font-size: 0.85rem; color: var(--ink-faint); }

@media (max-width: 720px) {
  .site-footer .cols {
    flex-direction: column;
    align-items: center;
    text-align: center;
    /* The columns stack on mobile: blurb on top, language switcher below.
       Bigger gap than the desktop spacing so the two blocks read as separate
       rather than as one paragraph with a link list glued to it. */
    gap: 64px;
  }
  .footer-about { margin: 12px auto 0; max-width: 480px; }
  .site-footer .links { justify-content: center; }
  .site-footer .copy { flex-direction: column; align-items: center; text-align: center; gap: 12px; }
  .site-footer .legal-links { justify-content: center; }
}

/* ---------- Responsive ---------- */

@media (max-width: 720px) {
  .hero,
  .hero-inner { padding: 44px 0 34px; }
  section { padding: 36px 0; }
  .year-block { padding: 30px 0; }
  .year-links { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  /* The side columns collapse, so the row becomes a centred stack instead. */
  .page-nav {
    grid-template-columns: 1fr;
    justify-items: center;
  }
  .page-nav > :first-child,
  .page-nav > :nth-child(2),
  .page-nav > :last-child { justify-self: center; }
}