/* ==========================================================================
   /year — the real year, travelled sideways. (Stories + visit sheet: explore.css)
   Same tokens, type and buttons as the homepage; only the grammar changes.
   Mobile first: a native swipe through the months. Desktop (≥1024px, motion
   allowed): vertical scroll becomes sideways travel (year.js).
   ========================================================================== */

.yr-page { background: var(--page-world, var(--cream)); transition: background-color .9s var(--ease-out); }
.yr { padding-top: clamp(104px, 5.5rem + 3vw, 140px); }

/* ---- Head ---- */
.yr-head { padding-bottom: var(--s6); }
.yr-head__title { margin-top: var(--s4); max-width: 14ch; }
.yr-head__lead { margin-top: var(--s4); max-width: 52ch; }

/* ---- Month index: always shows where you are in the year ---- */
.yr-index { position: sticky; top: 80px; z-index: 5; padding-block: var(--s2); transition: top .35s var(--ease-out); }
.nav.is-hidden ~ main .yr-index { top: 10px; }
@media (min-width: 1024px) { .yr-index { top: 96px; } }
.yr-index__row {
  display: flex; gap: 6px; width: max-content; max-width: calc(100% - 2 * var(--gutter)); margin-inline: auto;
  padding: 6px; border-radius: var(--r-pill); background: rgba(255, 255, 255, .92); box-shadow: var(--sh-1);
  overflow-x: auto; scrollbar-width: none;
}
.yr-index__row::-webkit-scrollbar { display: none; }
.yr-index__m {
  position: relative; flex: none; min-width: 44px; min-height: 40px; padding: 0 10px;
  border: 0; border-radius: var(--r-pill); background: transparent; cursor: pointer;
  font: 700 .82rem/1 var(--font-body); color: var(--muted, #6B6985); letter-spacing: .02em;
  transition: background-color .3s var(--ease-out), color .3s var(--ease-out);
}
.yr-index__m.has-story { color: var(--ink); }
.yr-index__m.has-story::after { content: ""; position: absolute; left: 50%; bottom: 5px; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: var(--red); }
.yr-index__m.is-on { background: var(--ink); color: #fff; }
.yr-index__m.is-on::after { background: var(--yellow); }
.yr-index__m:focus-visible { outline: 3px solid var(--sky-ink); outline-offset: 2px; }

/* ---- The track: months in a row ---- */
.yr-travel { position: relative; }
.yr-travel .yr-track {
  list-style: none; margin: 0; padding: var(--s5) var(--gutter) var(--s7);
  display: flex; align-items: flex-start; gap: var(--s4);
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter);
  scrollbar-width: none; overscroll-behavior-x: contain;
}
.yr-track::-webkit-scrollbar { display: none; }
.yr-month { flex: none; scroll-snap-align: start; width: min(78vw, 360px); }
.yr-month__name {
  font-family: var(--font-display); font-weight: 800; font-size: clamp(2rem, 1.6rem + 2vw, 3.2rem);
  letter-spacing: -.04em; line-height: 1; color: var(--ink); margin: 0 0 var(--s4);
}

/* A month with no story yet is simply quiet. Nothing is invented to fill it. */
.yr-month--quiet {
  width: 46px; align-self: stretch; min-height: 420px; scroll-snap-align: none;
  display: flex; justify-content: center; padding-top: 6px;
  background: linear-gradient(var(--rule), var(--rule)) center 64px / 2px calc(100% - 64px) no-repeat;
}
.yr-month--quiet .yr-month__name {
  writing-mode: vertical-rl; transform: rotate(180deg);
  font-size: 1rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted, #6B6985); margin: 0; opacity: .75;
}

/* ---- An occasion: a door into its story ---- */
.yr-occ + .yr-occ { margin-top: var(--s6); }
.yr-occ__door {
  position: relative; display: block; width: 100%; padding: 0; border: 0; cursor: pointer;
  border-radius: var(--r-lg); overflow: hidden; background: var(--occ);
  box-shadow: 0 0 0 6px #fff, var(--sh-2);
  transition: translate .5s var(--ease-spring), box-shadow .5s var(--ease-out);
}
.yr-occ__door img { display: block; width: 100%; aspect-ratio: 4 / 5; height: auto; object-fit: cover; }
.yr-occ__door:focus-visible { outline: 4px solid var(--sky-ink); outline-offset: 8px; }
@media (hover: hover) { .yr-occ__door:hover { translate: 0 -6px; } }
.yr-occ__open {
  position: absolute; left: 14px; bottom: 14px; display: inline-flex; align-items: center; gap: 8px;
  padding: .55em 1em; border-radius: var(--r-pill); background: rgba(255, 255, 255, .95);
  font: 700 .85rem/1 var(--font-body); color: var(--ink); box-shadow: var(--sh-1);
}
.yr-occ__date { margin-top: var(--s5); font: 800 var(--fs-label, .78rem)/1.2 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--occ); }
.yr-occ__title { margin-top: 6px; font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); letter-spacing: -.03em; }
.yr-occ__sum { margin-top: 6px; color: var(--text-2); max-width: 36ch; }

/* ---- After the year ---- */
.yr-next { padding-bottom: var(--s9); }
.yr-next__line { max-width: 44ch; color: var(--text-2); margin-bottom: var(--s5); }

/* ---- Desktop: sideways travel. year.js sets the section height and moves the track. ---- */
@media (min-width: 1024px) {
  .yr-head { padding-bottom: var(--s4); }
  .yr-month { width: 380px; }
  .yr-track { gap: var(--s6); }
  /* The whole card always fits the screen: the photo keeps its 4:5 shape and
     its height is whatever the laptop has left after the nav, the month
     index and the words (so no heads are cut on short screens). Days in the
     same month sit side by side, never below the fold. */
  .yr--travel .yr-travel__stick { position: sticky; top: 0; height: 100svh; overflow: hidden; display: flex; align-items: flex-start; }
  .yr--travel .yr-track { overflow: visible; scroll-snap-type: none; padding-top: 136px; padding-bottom: 0; will-change: transform; }
  .yr--travel .yr-month { width: auto; display: flex; flex-wrap: wrap; align-content: flex-start; column-gap: var(--s6); }
  .yr--travel .yr-month__name { flex: 0 0 100%; }
  .yr--travel .yr-occ { --card-h: clamp(220px, 100svh - 396px, 480px); width: calc(var(--card-h) * .8); flex: none; }
  .yr--travel .yr-occ + .yr-occ { margin-top: 0; }
  .yr--travel .yr-occ__door img { aspect-ratio: 4 / 5; width: 100%; height: var(--card-h); }
  .yr--travel .yr-occ__date { margin-top: var(--s4); }
  .yr--travel .yr-occ__sum { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .yr--travel .yr-month--quiet { width: 56px; min-height: min(70svh, 640px); }
}


/* ---- Not on the calendar yet: real days still waiting for their date ---- */
.yr-shelf { padding-top: var(--s7); }
.yr-shelf__title { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem); letter-spacing: -.03em; }
.yr-shelf__lead { margin-top: 6px; color: var(--text-2); max-width: 48ch; }
.yr-shelf__row { display: grid; grid-auto-flow: column; grid-auto-columns: min(62vw, 260px); gap: var(--s5); margin-top: var(--s5); padding-bottom: var(--s3); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.yr-shelf__row::-webkit-scrollbar { display: none; }
.yr-shelf .yr-occ { scroll-snap-align: start; }
.yr-shelf .yr-occ + .yr-occ { margin-top: 0; }
.yr-shelf .yr-occ__date { color: var(--red-ink); }
@media (min-width: 900px) { .yr-shelf__row { grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); overflow: visible; } }