/* ═══════════════════════════════════════════════════════════════════════
   styles.css — the handful of things Tailwind utilities don't cover:
   component shorthands, entrance animations, and lightbox chrome.

   Written as PLAIN CSS on purpose: the Tailwind Play CDN does not compile
   linked stylesheets, so `@apply` would silently do nothing here. This file
   therefore works identically whether you use the CDN or a real build.
   Palette lives in :root — change it once, and the whole site follows.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  --sand-50:#FAF8F5;  --sand-100:#F4F0EA; --sand-200:#EAE3D9; --sand-300:#DACFC0; --sand-400:#C3B5A2;
  --ink-400:#8C847C;  --ink-500:#6B645E;  --ink-600:#4C4744;  --ink-700:#35312F;
  --ink-800:#232120;  --ink-900:#171514;  --ink-950:#0F0E0D;
  --clay-50:#FBF1EC;  --clay-200:#EFC9B6; --clay-400:#D4855F; --clay-500:#C0603C;
  --clay-600:#A44D2D; --clay-700:#843C23;
  --ease: cubic-bezier(.2,.7,.3,1);
}

/* ── Base ─────────────────────────────────────────────────────────── */
body { -webkit-font-smoothing: antialiased; }
::selection { background: var(--clay-200); color: var(--ink-900); }
body.is-locked { overflow: hidden; }   /* set while lightbox/drawer is open */

.scrollbar-none { scrollbar-width: none; -ms-overflow-style: none; }
.scrollbar-none::-webkit-scrollbar { display: none; }

@media (pointer: fine) {
  ::-webkit-scrollbar { width: 11px; height: 11px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb {
    background: var(--sand-300); background-clip: content-box;
    border: 3px solid transparent; border-radius: 99px;
  }
  ::-webkit-scrollbar-thumb:hover { background: var(--sand-400); background-clip: content-box; }
  .dark ::-webkit-scrollbar-thumb { background: var(--ink-700); background-clip: content-box; }
}

/* ── Buttons & form controls ──────────────────────────────────────── */
.icon-btn, .icon-btn-dark {
  display: grid; place-items: center;
  height: 2.25rem; width: 2.25rem;
  border-radius: 9999px;
  transition: background-color .2s ease, color .2s ease;
}
.icon-btn { color: var(--ink-600); }
.icon-btn:hover { background: var(--sand-200); }
.dark .icon-btn { color: var(--sand-200); }
.dark .icon-btn:hover { background: var(--ink-800); }
.icon-btn-dark { color: var(--sand-100); }
.icon-btn-dark:hover { background: rgba(255,255,255,.15); }

.btn-primary, .btn-ghost, .btn-danger {
  display: inline-flex; align-items: center; gap: .4rem;
  border-radius: 9999px;
  padding: .5rem 1rem;
  font-size: .875rem; font-weight: 500; line-height: 1.25rem;
  white-space: nowrap;
  transition: background-color .2s ease, border-color .2s ease, transform .12s ease, opacity .2s ease;
}
.btn-primary:active, .btn-ghost:active, .btn-danger:active { transform: scale(.97); }
.btn-primary { background: var(--clay-500); color: var(--sand-50); }
.btn-primary:hover { background: var(--clay-600); }
.btn-primary:disabled { opacity: .5; pointer-events: none; }
.btn-ghost { border: 1px solid var(--sand-300); color: var(--ink-700); background: transparent; }
.btn-ghost:hover { background: var(--sand-200); }
.dark .btn-ghost { border-color: var(--ink-700); color: var(--sand-200); }
.dark .btn-ghost:hover { background: var(--ink-800); }
.btn-danger { background: #DC2626; color: #fff; }
.btn-danger:hover { background: #B91C1C; }

:where(.btn-primary, .btn-ghost, .btn-danger, .icon-btn, .icon-btn-dark):focus-visible {
  outline: 2px solid var(--clay-400); outline-offset: 2px;
}

.lbl {
  display: block; margin-bottom: .375rem;
  font-size: .75rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--ink-500);
}
.dark .lbl { color: var(--ink-400); }

.inp {
  width: 100%;
  border: 1px solid var(--sand-300); border-radius: .75rem;
  background: #fff; color: var(--ink-800);
  padding: .625rem .875rem;
  font: inherit; font-size: .9375rem;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.inp::placeholder { color: var(--ink-400); }
.inp:focus { outline: none; border-color: var(--clay-400); box-shadow: 0 0 0 3px rgba(192,96,60,.18); }
.dark .inp { border-color: var(--ink-700); background: var(--ink-950); color: var(--sand-100); }

/* Year filter pills */
.chip {
  flex: 0 0 auto;
  border: 1px solid var(--sand-300); border-radius: 9999px;
  padding: .375rem .75rem;
  font-size: .75rem; font-weight: 500; color: var(--ink-600);
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.chip:hover { background: var(--sand-200); }
.dark .chip { border-color: var(--ink-700); color: var(--ink-400); }
.dark .chip:hover { background: var(--ink-800); }
.chip[data-active="true"] {
  background: var(--clay-500); border-color: var(--clay-500); color: var(--sand-50);
}

/* ══════════════════════════════════════════════════════════════════════
   HERO PHOTO
   Swap the background by dropping a new file into assets/ and changing the
   two <img>/<source> paths in index.html. Keep it wide and landscape —
   it's cropped to fill, anchored slightly below centre so a horizon sits
   in the upper third. Update the credit line in the footer too.
   ═══════════════════════════════════════════════════════════════════ */

.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: clamp(30rem, 74vh, 44rem);
  display: flex;
  align-items: flex-end;      /* copy sits low, over the fairway */
}

.hero-img {
  position: absolute; inset: 0;
  height: 100%; width: 100%;
  object-fit: cover;
  object-position: center 58%;
  z-index: -2;
}

/* Darkens the photo enough for white text, and melts the bottom edge into
   the page so the sticky filter bar below doesn't butt against a hard line. */
.hero-scrim {
  position: absolute; inset: 0;
  z-index: -1;
  background:
    linear-gradient(to bottom,
      rgba(12, 20, 16, .58) 0%,
      rgba(12, 20, 16, .26) 26%,
      rgba(12, 20, 16, .42) 58%,
      rgba(12, 20, 16, .72) 82%,
      var(--page-bg) 100%),
    linear-gradient(to right,
      rgba(12, 20, 16, .45) 0%,
      rgba(12, 20, 16, .10) 55%,
      rgba(12, 20, 16, 0) 100%);
}

.hero-content { position: relative; width: 100%; }

/* The page colour the scrim fades into, per theme. */
:root { --page-bg: var(--sand-50); }
.dark { --page-bg: var(--ink-950); }

/* Nav sits on top of the photo on the home page, so it goes light until
   the page scrolls and the solid nav background takes over. */
body.on-home #nav:not(.is-scrolled) { color: #fff; }
body.on-home #nav:not(.is-scrolled) .icon-btn { color: rgba(255,255,255,.9); }
body.on-home #nav:not(.is-scrolled) .icon-btn:hover { background: rgba(255,255,255,.18); }
body.on-home #nav:not(.is-scrolled) #nav-context { color: rgba(255,255,255,.75); }
body.on-home #nav:not(.is-scrolled) #admin-dot { background: rgba(255,255,255,.65); }

/* ── Nav elevation once scrolled ──────────────────────────────────── */
#nav.is-scrolled {
  border-bottom: 1px solid var(--sand-200);
  background: rgba(250,248,245,.85);
  backdrop-filter: blur(12px);
}
.dark #nav.is-scrolled {
  border-bottom-color: var(--ink-800);
  background: rgba(15,14,13,.85);
}

/* ── Scroll-reveal entrance ───────────────────────────────────────── */
.reveal {
  opacity: 0; transform: translateY(14px);
  transition: opacity .7s var(--ease) var(--d, 0ms), transform .7s var(--ease) var(--d, 0ms);
  will-change: opacity, transform;
}
.reveal.is-in { opacity: 1; transform: none; }

/* ── Cards & media tiles ──────────────────────────────────────────── */
.card-media img { transition: transform .6s var(--ease); }
.card:hover .card-media img { transform: scale(1.045); }

.tile { position: relative; overflow: hidden; }
.tile img { transition: transform .5s var(--ease), opacity .4s ease; }
.tile:hover img { transform: scale(1.05); }
.tile::after {
  content: ''; position: absolute; inset: 0;
  background: rgba(23,21,20,.12); opacity: 0;
  transition: opacity .2s ease; pointer-events: none;
}
.tile:active::after { opacity: 1; }

/* Shimmer shown until a tile's source (blob URL / remote image) resolves */
.skeleton {
  background-image: linear-gradient(100deg, var(--sand-200) 30%, var(--sand-100) 50%, var(--sand-200) 70%);
  background-size: 220% 100%;
  animation: shimmer 1.4s infinite linear;
}
.dark .skeleton {
  background-image: linear-gradient(100deg, var(--ink-800) 30%, var(--ink-700) 50%, var(--ink-800) 70%);
}
@keyframes shimmer { to { background-position: -220% 0; } }

/* ── Lightbox ─────────────────────────────────────────────────────── */
#lightbox { background: rgba(15, 14, 13, .97); }
#lightbox.is-open { display: block; animation: fade .22s ease; }
#lb-stage > * { animation: zoom .28s var(--ease); }
#lb-stage img, #lb-stage video {
  max-height: 100%; max-width: 100%;
  object-fit: contain; border-radius: 6px;
  box-shadow: 0 30px 80px -20px rgba(0,0,0,.8);
}
.lb-nav {
  position: absolute; top: 50%; z-index: 10;
  display: grid; place-items: center;
  height: 2.75rem; width: 2.75rem;
  transform: translateY(-50%);
  border-radius: 9999px;
  background: rgba(255,255,255,.1); color: var(--sand-100);
  backdrop-filter: blur(6px);
  transition: background-color .2s ease, opacity .2s ease;
}
.lb-nav:hover { background: rgba(255,255,255,.2); }
.lb-nav:disabled { opacity: 0; pointer-events: none; }

.lb-thumb {
  flex: 0 0 auto; height: 56px; width: 56px;
  overflow: hidden; border-radius: 8px; opacity: .45;
  outline: 2px solid transparent; outline-offset: 2px;
  transition: opacity .2s ease, outline-color .2s ease;
}
.lb-thumb:hover { opacity: .8; }
.lb-thumb[data-active="true"] { opacity: 1; outline-color: var(--sand-100); }
.lb-thumb img { height: 100%; width: 100%; object-fit: cover; }

@keyframes fade { from { opacity: 0 } to { opacity: 1 } }
@keyframes zoom { from { opacity: 0; transform: scale(.965) } to { opacity: 1; transform: none } }

/* ── Toasts ───────────────────────────────────────────────────────── */
.toast {
  pointer-events: auto;
  border-radius: 9999px;
  background: var(--ink-900); color: var(--sand-50);
  padding: .625rem 1rem; font-size: .875rem;
  box-shadow: 0 2px 6px rgba(23,21,20,.06), 0 24px 48px -20px rgba(23,21,20,.4);
  animation: toast-in .3s var(--ease);
}
.dark .toast { background: var(--sand-100); color: var(--ink-900); }
.toast.is-out { animation: toast-out .3s ease forwards; }
@keyframes toast-in  { from { opacity: 0; transform: translateY(14px) } to { opacity: 1; transform: none } }
@keyframes toast-out { to { opacity: 0; transform: translateY(10px) } }

/* ── Respect reduced-motion ───────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
}