/* Alden Day gallery — warm minimal, mobile-first. No external fonts/CDNs. */
:root { --bg: #0d0d0f; --ink: #f5efe6; --ink-dim: #b9b1a5; --accent: #f5a524;
  --card: #16151a; --line: #26242b; --r: 18px; --t: 200ms; }
:root, * { box-sizing: border-box; }
html { color-scheme: dark; }
body { margin: 0; background: var(--bg); color: var(--ink);
  font: 16px/1.5 -apple-system, "system-ui", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-text-size-adjust: 100%; }
* { scrollbar-width: thin; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
img, video { display: block; max-width: 100%; }
.accent { color: var(--accent); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

/* ---- Masthead ---- */
.masthead { padding: max(28px, env(safe-area-inset-top)) 20px 18px; max-width: 1200px; margin: 0 auto; }
.mast-top { display: flex; justify-content: flex-start; margin-bottom: 4px; }
.login { font-size: 13px; color: var(--ink-dim); text-decoration: none;
  border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px;
  transition: border-color var(--t), color var(--t); }
.login:hover { color: var(--accent); border-color: var(--accent); }
.masthead h1 { margin: 0; font-size: clamp(34px, 8vw, 56px); letter-spacing: -.02em; }
.tagline { margin: 8px 0 0; color: var(--ink-dim); max-width: 46ch; }
.counters { display: flex; gap: 24px; margin-top: 14px; }
.stat { display: flex; flex-direction: column; }
.stat .num { font-size: 32px; font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; }
.stat .lbl { font-size: 12px; color: var(--ink-dim); }

/* ---- Spotlight removed (timeline feed is the hero) ---- */

/* ---- Calendar timeline ---- */
.cal { max-width: 1200px; margin: 18px auto 0; padding: 0 20px; }
.cal-top { display: flex; align-items: center; gap: 14px; margin-bottom: 8px; }
.cal-label { font-size: 13px; color: var(--ink); font-weight: 600; min-width: 110px; }
.cal-nav button { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line);
  background: var(--card); color: var(--ink-dim); font-size: 14px; line-height: 1; }
/* month/"All time" pills inside the nav must not inherit the 30px circle */
.cal-nav .cal-all { width: auto; height: auto; border-radius: 999px; padding: 4px 12px; font-size: 12px; }
.cal-nav .cal-all.on { color: var(--accent); border-color: var(--accent); opacity: 1; }
.cal-nav button[disabled] { opacity: .3; }
.cal-nav button:not([disabled]):hover { color: var(--accent); border-color: var(--accent); }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-wd { font-size: 10px; color: var(--ink-dim); text-align: center; padding: 2px 0; }
.cal-cell { position: relative; aspect-ratio: 1; border-radius: 8px; border: 1px solid transparent;
  background: rgba(255,255,255,.03); font-size: 11px; color: var(--ink-dim);
  display: flex; align-items: flex-end; justify-content: flex-end; padding: 3px; }
.cal-cell.blank { background: none; }
.cal-cell.has { cursor: pointer; color: var(--ink); background: rgba(245,165,36,.16);
  border-color: rgba(245,165,36,.35); }
.cal-cell.has:hover { background: rgba(245,165,36,.3); }
.cal-cell.on { background: var(--accent); color: #201503; font-weight: 700; }
.cal-cell .dot { position: absolute; top: 4px; left: 50%; transform: translateX(-50%);
  width: 4px; height: 4px; border-radius: 50%; background: var(--accent); }
.cal-all { margin-left: auto; font-size: 12px; color: var(--ink-dim); border: 1px solid var(--line);
  border-radius: 999px; padding: 4px 12px; }
.cal-all:hover { color: var(--accent); border-color: var(--accent); }

/* ---- Feed (CSS-columns masonry, inside era sections) ---- */
main { max-width: 1200px; margin: 0 auto; padding: 6px 20px 30px; }
.feed { columns: 1; column-gap: 26px; }
@media (min-width: 640px) { .feed { columns: 2; } }
@media (min-width: 1020px) { .feed { columns: 3; } }

/* ---- Timeline eras ---- */
#feed.feed { columns: auto; column-gap: 0; }  /* outer wrapper stacks era sections */
.era { margin: 0 0 8px; content-visibility: auto; contain-intrinsic-size: auto 200px; }
.era-head { padding: 30px 2px 14px; }
.era-year { font-size: clamp(30px, 6vw, 46px); font-weight: 800; letter-spacing: -.02em;
  line-height: 1.05; color: var(--ink); }
.era-season { margin-top: 2px; font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--accent); opacity: .9; }
@media (prefers-reduced-motion: no-preference) {
  .era { animation: era-in .45s ease both; }
  @keyframes era-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
}
/* older eras recede: denser, dimmer, flatter */
.era.dense .era-year { font-size: clamp(22px, 4vw, 30px); opacity: .55; }
.era.dense .era-season { opacity: .5; }
.era.dense .era-head { padding: 22px 2px 10px; }
.era.dense .feed { column-gap: 20px; }
@media (min-width: 640px) { .era.dense .feed { columns: 3; } }
@media (min-width: 1020px) { .era.dense .feed { columns: 4; } }
.era.dense .card { border-radius: 10px; margin-bottom: 24px; }
.era.dense .card:hover { transform: none; box-shadow: 0 6px 16px rgba(0,0,0,.35); }
.era.dense .card .meta { padding: 7px 9px 9px; }
.era.dense .card .cap { font-size: 12.5px; color: var(--ink-dim); }
.era.dense .badge-play { width: 38px; height: 38px; font-size: 15px; }
/* age tiers on cards: older media fades back slightly */
.card.age-2 .thumb-wrap img { opacity: .92; }
.card.age-3 .thumb-wrap img { opacity: .84; filter: saturate(.82); }
.card { break-inside: avoid; margin: 0 0 34px; border-radius: var(--r); overflow: hidden;
  background: var(--card); border: 1px solid var(--line); cursor: zoom-in;
  transition: transform var(--t), box-shadow var(--t); display: block; width: 100%; text-align: left; }
.card:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(0,0,0,.45); }
.card:focus-visible, .cal-cell:focus-visible, .cal-nav button:focus-visible, .lb button:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px; }
.thumb-wrap { position: relative; background: #101013; }
.thumb-wrap img { width: 100%; height: auto; }
.badge-play { position: absolute; inset: 0; margin: auto; width: 54px; height: 54px; border-radius: 50%;
  background: rgba(13,13,15,.72); border: 1px solid rgba(245,165,36,.8); color: var(--accent);
  display: flex; align-items: center; justify-content: center; font-size: 20px; padding-left: 4px; }
.badge-new { position: absolute; left: 8px; top: 8px; padding: 3px 9px; border-radius: 999px;
  font-size: 11px; font-weight: 700; letter-spacing: .06em; background: var(--accent); color: #201503;
  animation: pulse 2.2s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .55; } }
.card .meta { padding: 10px 12px 12px; }
.card .date { font-size: 12px; color: var(--ink-dim); }
.card .cap { margin: 4px 0 0; font-size: 14px; color: var(--ink); }
.empty { text-align: center; color: var(--ink-dim); padding: 60px 0; }

/* ---- Footer ---- */
.foot { max-width: 1200px; margin: 0 auto; padding: 10px 20px max(24px, env(safe-area-inset-bottom));
  color: var(--ink-dim); font-size: 12px; }
.foot p { margin: 8px 0; }

/* ---- Lightbox ---- */
.lightbox { position: fixed; inset: 0; z-index: 50; background: rgba(8,8,10,.96);
  display: flex; flex-direction: column; align-items: center; justify-content: center; }
.lightbox[hidden] { display: none; }
.lb-stage { max-width: 100vw; max-height: 82vh; display: flex; align-items: center; justify-content: center;
  padding: 56px 8px 0; touch-action: pan-y; }
.lb-stage img, .lb-stage video { max-width: 96vw; max-height: 78vh; width: auto; height: auto;
  border-radius: 12px; background: #000; }
.lb-meta { text-align: center; padding: 12px 16px 20px; max-width: 70ch; }
.lb-caption { margin: 0; }
.lb-date { margin: 4px 0 0; font-size: 12px; color: var(--ink-dim); }
.lb-close { position: absolute; top: max(12px, env(safe-area-inset-top)); right: 14px; width: 44px; height: 44px;
  border-radius: 50%; background: rgba(255,255,255,.08); font-size: 16px; z-index: 2; }
.lb-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 64px;
  border-radius: 14px; background: rgba(255,255,255,.06); font-size: 30px; color: var(--ink); z-index: 2; }
.lb-prev { left: 8px; } .lb-next { right: 8px; }
.lb-nav:hover, .lb-close:hover { background: rgba(245,165,36,.25); color: var(--accent); }
@media (max-width: 639px) { .lb-nav { display: none; } } /* swipe instead on phones */

/* ---- Scroll timeline spine (pure graphic, no copy) ---- */
.spine { position: fixed; z-index: 30; top: 96px; bottom: 96px; left: 10px;
  width: 20px; pointer-events: none; }
.spine[hidden] { display: none; }
.spine-line { position: absolute; left: 9px; top: 0; bottom: 0; width: 2px;
  border-radius: 2px; background: var(--line); }
.spine-fill { position: absolute; left: 9px; top: 0; width: 2px; height: 0;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--accent), rgba(245, 165, 36, .25)); }
.spine-eye { position: absolute; left: 5px; top: 0; width: 10px; height: 10px;
  margin-top: -5px; border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 0 4px rgba(245, 165, 36, .18), 0 0 14px rgba(245, 165, 36, .6); }
.spine-nodes { position: absolute; inset: 0; }
.spine-node { position: absolute; left: 3px; top: 0; width: 14px; height: 14px;
  margin-top: -7px; padding: 0; border-radius: 50%; pointer-events: auto;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  background: #232129; border: 2px solid var(--line); opacity: .8;
  transition: transform var(--t), background var(--t), border-color var(--t), opacity var(--t); }
.spine-node.past { background: rgba(245, 165, 36, .5); border-color: rgba(245, 165, 36, .6); opacity: .85; }
.spine-node.on { background: var(--accent); border-color: var(--accent); opacity: 1;
  transform: scale(1.55); box-shadow: 0 0 12px rgba(245, 165, 36, .7); }
.spine-node .sn-year { position: absolute; right: 24px; top: 50%; transform: translateY(-50%);
  font-size: 11px; font-weight: 700; letter-spacing: .06em; color: var(--ink-dim);
  opacity: 0; transition: opacity var(--t), color var(--t); pointer-events: none; }
.spine-node.on .sn-year { opacity: 1; color: var(--accent); }
.spine-node.past .sn-year { opacity: .55; }
@media (min-width: 640px) {
  .spine { left: max(14px, calc((100vw - 1200px) / 2 - 40px)); width: 28px; }
  .spine-line, .spine-fill { left: 13px; }
  .spine-eye { left: 9px; }
  .spine-node { left: 7px; }
}
/* year labels only fit once the spine clears the 1200px content column */
@media (min-width: 640px) and (max-width: 1359px) {
  .spine-node .sn-year { display: none; }
}
@media (max-width: 639px) {
  /* phone: rail lives in the 20px edge gutter as a pure graphic —
     tiny dot + fill only, no year text (era bands already say the year),
     so the 390px feed stays clean and nothing overlaps. */
  .spine { top: 84px; bottom: 84px; left: 3px; width: 14px; }
  .spine-line, .spine-fill { left: 5px; }
  .spine-eye { left: 2px; width: 8px; height: 8px; margin-top: -4px; }
  .spine-node { left: 0; width: 10px; height: 10px; margin-top: -5px; border-width: 2px; }
  .spine-node.on { transform: scale(1.4); }
  .spine-node .sn-year { display: none; }
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  .badge-new { animation: none; }
  .card { transition: none; }
  .card:hover { transform: none; }
  .spine-node { transition: none; }
  .spine-node .sn-year { transition: none; }
}

/* A quieter frame for the real photographs. */
:root{--bg:#f7f4ee;--ink:#282a24;--ink-dim:#73766a;--accent:#a84b32;--card:#fffdf8;--line:#dfdfd2;--r:14px}
html{color-scheme:light}.masthead{padding-top:28px;padding-bottom:24px}.mast-top{justify-content:space-between;align-items:center;margin-bottom:35px}
.fun-link{font-size:13px;text-decoration:none;color:var(--ink-dim)}.masthead h1{font:400 clamp(52px,10vw,100px)/1.1 Georgia,serif;letter-spacing:-4px}
.masthead .accent{color:var(--ink)}.counters{gap:25px;margin-top:20px}.stat{flex-direction:row;align-items:baseline;gap:6px}.stat .num{font-size:15px;color:var(--ink);font-weight:550}.stat .lbl{font-size:12px}
.cal{border-top:1px solid var(--line);padding-top:18px}.collection-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:26px 0 0;padding-bottom:18px;border-bottom:1px solid var(--line)}
.collection-label{font:italic 18px Georgia,serif;color:var(--ink-dim)}.media-filters{display:flex;background:#eaeade;border-radius:999px;padding:4px;gap:2px}
.media-filters button{padding:8px 15px;border-radius:999px;font-size:12px;min-height:36px}.media-filters button[aria-pressed=true]{background:var(--surface);box-shadow:0 1px 3px #0001;color:var(--ink)}
.era-year{font:400 29px Georgia,serif;letter-spacing:-1px}.era-season{font-size:10px;letter-spacing:2px}.era-head{padding-top:30px}.card{box-shadow:none;border:1px solid var(--line);background:var(--surface)}
.card:hover{transform:none}.thumb-wrap{position:relative;overflow:hidden}.thumb-wrap img,.feed-video{width:100%;height:auto;display:block}
.feed-video{max-height:720px;min-height:240px;object-fit:contain;background:#e8e8dd;aspect-ratio:4/5}
.feed-video-controls{position:absolute;left:12px;right:12px;bottom:12px;display:flex;justify-content:space-between;gap:8px}
.feed-video-controls button{border-radius:999px;padding:9px 13px;background:#20241ed9;color:white;font-size:12px;min-height:40px;backdrop-filter:blur(8px)}
.badge-new{background:var(--surface);color:var(--accent);font-size:9px;letter-spacing:1px}.lightbox{background:#171914f5;color:#fff}.lightbox .lb-date{color:#ccc}
@media(max-width:639px){.masthead h1{letter-spacing:-2px}.mast-top{margin-bottom:28px}.collection-toolbar{align-items:flex-start;flex-direction:column;gap:14px}.media-filters{width:100%}.media-filters button{flex:1}.era-year{font-size:25px}}