/* MM Zeitgeist — the whole stylesheet. No build step, no framework.
   Classes are grouped by where they're used. Year pages are written by hand,
   so everything under "Year pages" is meant to be mixed and matched freely.
   See README.md for what each class does. */

/* ---------- Tokens ---------- */

:root {
  --bg: #f2f4ff;
  --surface: #ffffff;
  --ink: #1b1d2a;
  --ink-soft: #545872;
  --ink-faint: #8b90ab;
  --rule: rgba(27, 29, 42, 0.12);
  --rule-strong: rgba(27, 29, 42, 0.24);
  --accent: #4b4fa8;

  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --measure: 34rem;   /* readable line length for prose */
  --page: 46rem;      /* overall content width */
  --radius: 10px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #12131c;
    --surface: #1b1d28;
    --ink: #e8e9f2;
    --ink-soft: #a6aac2;
    --ink-faint: #6e7289;
    --rule: rgba(232, 233, 242, 0.14);
    --rule-strong: rgba(232, 233, 242, 0.28);
    --accent: #a9aef0;
  }
}

/* ---------- Base ---------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--accent); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 3px;
}

/* Page wrapper. Every page opens with <div class="wrap">. */
.wrap {
  max-width: var(--page);
  margin: 0 auto;
  padding: 4rem 1.5rem 5rem;
}

/* ---------- Index: header ---------- */

.site-head {
  margin-bottom: 3.5rem;
}

.site-title {
  font-family: var(--serif);
  font-size: 2.1rem;
  font-weight: 400;
  letter-spacing: 0.01em;
  margin: 0;
}

.site-sub {
  font-family: var(--serif);
  font-style: italic;
  color: var(--ink-soft);
  margin: 0.4rem 0 0;
}

/* ---------- Index: the timeline ---------- */

/* The vertical spine. One .entry per year, oldest first. */
.timeline {
  list-style: none;
  margin: 0;
  padding: 0 0 0 1.75rem;
  border-left: 1px solid var(--rule);
}

.entry + .entry { margin-top: 0.5rem; }

.entry a {
  position: relative;
  display: flex;
  gap: 1.25rem;
  align-items: center;
  padding: 1rem 1rem 1rem 0;
  color: inherit;
  text-decoration: none;
  border-radius: var(--radius);
  transition: background 160ms ease, transform 160ms ease;
}

/* The dot sitting on the spine. */
.entry a::before {
  content: "";
  position: absolute;
  left: -2.25rem;
  top: 50%;
  width: 9px;
  height: 9px;
  margin-top: -4.5px;
  border-radius: 50%;
  background: var(--bg);
  border: 1px solid var(--rule-strong);
  transition: background 160ms ease, border-color 160ms ease;
}

.entry a:hover {
  background: var(--surface);
  transform: translateX(2px);
}

.entry a:hover::before {
  background: var(--accent);
  border-color: var(--accent);
}

.entry img {
  width: 92px;
  height: 92px;
  object-fit: cover;
  border-radius: var(--radius);
  flex-shrink: 0;
}

.entry-year {
  font-family: var(--serif);
  font-size: 0.9rem;
  color: var(--ink-faint);
  letter-spacing: 0.06em;
}

.entry-title {
  font-size: 1.15rem;
  margin: 0.1rem 0 0;
  font-weight: 500;
}

.entry a:hover .entry-title { color: var(--accent); }

.entry-note {
  color: var(--ink-soft);
  font-size: 0.95rem;
  margin: 0.15rem 0 0;
}

/* ---------- Year pages ---------- */

/* Back to the index. Put it at the top of every year page. */
.back {
  display: inline-block;
  margin-bottom: 2.5rem;
  color: var(--ink-soft);
  text-decoration: none;
  font-size: 0.95rem;
}

.back:hover { color: var(--accent); }

.page-year {
  font-family: var(--serif);
  font-size: 0.95rem;
  color: var(--ink-faint);
  letter-spacing: 0.08em;
  margin: 0;
}

.page-title {
  font-family: var(--serif);
  font-size: 2.3rem;
  font-weight: 400;
  line-height: 1.2;
  margin: 0.3rem 0 0.6rem;
}

.page-note {
  color: var(--ink-soft);
  font-size: 1.05rem;
  margin: 0 0 2.5rem;
}

/* Full-width feature image. */
.hero {
  width: 100%;
  border-radius: var(--radius);
  margin-bottom: 2.5rem;
}

/* Body copy, held to a readable width. */
.prose {
  max-width: var(--measure);
}

.prose p { margin: 0 0 1.15rem; }

/* Set-apart line — a note, a lyric, something she said. */
.quote {
  font-family: var(--serif);
  font-size: 1.25rem;
  font-style: italic;
  color: var(--ink-soft);
  border-left: 2px solid var(--rule-strong);
  border-radius: 0;
  margin: 2.5rem 0;
  padding: 0.2rem 0 0.2rem 1.5rem;
}

/* Photo grid. Add class="photos" and lightbox.js makes them clickable. */
.photos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 0.75rem;
  margin: 2.5rem 0;
}

.photos img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--radius);
  cursor: zoom-in;
  transition: opacity 160ms ease;
}

.photos img:hover { opacity: 0.85; }

/* Link out to wherever the gift itself lives. */
.out {
  display: inline-block;
  margin-top: 1rem;
  padding: 0.6rem 1.25rem;
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  color: var(--ink);
  text-decoration: none;
  font-size: 0.95rem;
  transition: border-color 160ms ease, color 160ms ease;
}

.out:hover { border-color: var(--accent); color: var(--accent); }

.foot {
  margin-top: 4rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
  border-radius: 0;
  color: var(--ink-faint);
  font-size: 0.9rem;
}

/* ---------- Lightbox (assets/lightbox.js) ---------- */

/* display: flex must stay scoped to [open], or it would override the browser's
   own `dialog:not([open]) { display: none }` and leave the overlay on screen
   after it's closed. The margin/max-* resets undo the browser's dialog defaults,
   which otherwise stop inset: 0 from filling the viewport. */
.lb {
  position: fixed;
  inset: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  padding: 2rem;
  border: 0;
  background: transparent;
  z-index: 10;
  cursor: zoom-out;
}

.lb[open] {
  display: flex;
  align-items: center;
  justify-content: center;
}

.lb img {
  max-width: 100%;
  max-height: 100%;
  border-radius: var(--radius);
}

.lb::backdrop { background: rgba(10, 11, 18, 0.92); }

/* ---------- Small screens ---------- */

@media (max-width: 34rem) {
  body { font-size: 16px; }
  .wrap { padding: 2.5rem 1.15rem 3.5rem; }
  .site-title { font-size: 1.75rem; }
  .page-title { font-size: 1.8rem; }
  .timeline { padding-left: 1.35rem; }
  .entry a { gap: 0.9rem; padding: 0.85rem 0.5rem 0.85rem 0; }
  .entry a::before { left: -1.85rem; }
  .entry img { width: 68px; height: 68px; }
  .entry-title { font-size: 1.05rem; }
  .photos { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
}

/* ---------- Motion ---------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .entry a:hover { transform: none; }
}