/* Site stylesheet. Source of truth for tokens: ../DESIGN.md.
   Copied verbatim into dist/site.css by scripts/build.ts. */
:root {
  --font-display: Georgia, "Iowan Old Style", "Times New Roman", serif;
  --font-ui: -apple-system, "Helvetica Neue", Arial, sans-serif;
  --bg: #faf9f7;
  --text: #1a1a1a;
  --muted: #6b6b6b;
  --sp-1: 8px;
  --sp-2: 16px;
  --sp-3: 24px;
  --sp-4: 32px;
  --sp-5: 48px;
  --sp-6: 64px;
  --sp-7: 96px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
/* Without this, a strong horizontal trackpad swipe on the Gallery Index
   can get read by the browser as a back/forward-navigation gesture
   candidate, which swallows the first several wheel events while it
   decides - exactly the "first few swipes don't do anything" symptom. */
html { overscroll-behavior-x: none; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
}
img {
  display: block;
  max-width: 100%;
  filter: saturate(0.88) contrast(0.96);
}
a { color: inherit; text-decoration: none; }

/* Header for the Gallery Page's vertical stream: a full-width bar fixed
   to the top of the viewport, holding the "All Galleries" back link
   (left corner). No background - sits directly on the photo. The
   Gallery Index had a matching wordmark here; removed per request. */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  padding: var(--sp-3) var(--sp-4);
}
.site-header .back-link {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.75);
}
.site-header .back-link:hover { color: #fff; }
@media (max-width: 720px) {
  .site-header { padding: var(--sp-2) var(--sp-3); }
}

/* Gallery Index: a full-bleed blurred backdrop (the latest Gallery's
   cover Photo) behind a centered carousel of Gallery cards - see
   wayfinder ticket 010. Supersedes the full-viewport horizontal stream
   from ticket 009 (still on that commit in history; no throwaway branch
   was cut for it). */
.index-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: #0a0a0a;
}
.index-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.88) contrast(0.96) blur(28px) brightness(0.55);
  /* Scales past the viewport so the blur's soft edge never shows. */
  transform: scale(1.15);
}

.carousel {
  position: fixed;
  inset: 0;
  z-index: 1;
}
.carousel-track {
  position: relative;
  width: 100%;
  height: 100%;
  /* Hidden until immersive.js sets each card's initial transform, so
     there's no flash of all four stacked untransformed at top-left. */
  visibility: hidden;
}
.carousel-card {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 85vw;
  height: 85vh;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45);
  transition: transform 0.45s ease, opacity 0.45s ease;
}
.carousel-card .photo-frame {
  position: absolute;
  inset: 0;
}
.carousel-card .photo-frame img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}
@media (max-width: 720px) {
  .carousel-card { border-radius: 8px; }
}

.index-title {
  position: absolute;
  left: 0;
  bottom: 0;
  display: flex;
  justify-content: flex-start;
  max-width: 100%;
  padding: var(--sp-4);
  text-align: left;
}
.index-title h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 40px;
  color: rgba(255, 255, 255, 0.8);
  margin: 0;
  text-shadow: 0 2px 32px rgba(0, 0, 0, 0.65), 0 1px 4px rgba(0, 0, 0, 0.5);
}
@media (max-width: 720px) {
  .index-title { padding: var(--sp-2); }
  .index-title h1 { font-size: 18px; }
}

/* Gallery Page — full-viewport immersive photo stream
   (.stream/.slide/.slide-content, driven by immersive.js). One
   viewport-height slide per Photo, scroll-snapped, crossfading into the
   next as the visitor scrolls or presses an arrow key. Title/description
   overlaid on the first Photo only (.cover). Decided via a 4-variant
   prototype (Variant A won) — see wayfinder ticket 007 and the throwaway
   `prototype/immersive-gallery` branch for the two rejected directions.
   The Gallery Index used to share this (ticket 009) but now has its own
   carousel, styled above. */
.stream {
  position: fixed;
  inset: 0;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  scrollbar-width: none;
  background: #0a0a0a;
}
.stream::-webkit-scrollbar { display: none; }

.slide {
  position: relative;
  height: 100vh;
  scroll-snap-align: start;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.slide-content {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.slide-content img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
}
.cover {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: var(--sp-6) var(--sp-4) var(--sp-5);
  text-align: center;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
  pointer-events: none;
}
.cover h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 36px;
  color: #fff;
  margin: 0 0 var(--sp-2);
}
.cover p {
  max-width: 620px;
  margin: 0 auto;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.6;
  font-size: 14px;
}
@media (max-width: 720px) {
  .cover h1 { font-size: 26px; }
  .cover { padding: var(--sp-4) var(--sp-3); }
}

/* Prev/next affordance, injected by immersive.js. Gallery Page: stacked
   bottom-right (vertical stream). Gallery Index: split to the left/right
   screen edges, vertically centered (`.scroll-nav-horizontal`, steps the
   carousel - see wayfinder ticket 010). The `display: contents` wrapper
   opts out of its own box so each arrow can be positioned independently
   by side. */
.scroll-nav {
  position: fixed;
  right: var(--sp-3);
  bottom: var(--sp-3);
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}
.scroll-nav-horizontal { display: contents; }
.scroll-nav-horizontal .scroll-prev,
.scroll-nav-horizontal .scroll-next {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
}
.scroll-nav-horizontal .scroll-prev { left: var(--sp-3); }
.scroll-nav-horizontal .scroll-next { right: var(--sp-3); }
.scroll-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.75);
  font-size: 18px;
  cursor: pointer;
  z-index: 60;
  transition: background 0.15s ease, color 0.15s ease;
}
.scroll-arrow:hover { background: rgba(255, 255, 255, 0.22); color: #fff; }
.scroll-arrow:disabled {
  color: rgba(255, 255, 255, 0.3);
  cursor: default;
}
.scroll-arrow:disabled:hover { background: rgba(255, 255, 255, 0.12); }

/* Call-to-action nudge before the visitor has navigated at all (removed
   by immersive.js on first interaction): a gentle scale pulse on the
   forward arrow, hinting there's more to see. */
.scroll-next.pulse { animation: scroll-nav-pulse 2.2s ease-in-out infinite; }
@keyframes scroll-nav-pulse {
  0%, 30%, 100% { transform: scale(1); }
  15% { transform: scale(1.18); }
}
@media (prefers-reduced-motion: reduce) {
  .scroll-next.pulse { animation: none; }
}
@media (max-width: 720px) {
  .scroll-nav { right: var(--sp-2); bottom: var(--sp-2); }
  .scroll-arrow { width: 36px; height: 36px; font-size: 16px; }
  .scroll-nav-horizontal .scroll-prev { left: var(--sp-2); }
  .scroll-nav-horizontal .scroll-next { right: var(--sp-2); }
}

/* Dot indicator (Gallery Index only - injected by immersive.js):
   bottom-center, one dot per Gallery, current one highlighted, click to
   jump. See wayfinder ticket 010. */
.index-dots {
  position: fixed;
  left: 50%;
  bottom: var(--sp-3);
  transform: translateX(-50%);
  z-index: 60;
  display: flex;
  gap: var(--sp-2);
}
.index-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}
.index-dot:hover { background: rgba(255, 255, 255, 0.6); }
.index-dot.active {
  background: rgba(255, 255, 255, 0.9);
  transform: scale(1.25);
}
@media (max-width: 720px) {
  .index-dots { bottom: var(--sp-2); gap: var(--sp-1); }
}