/* ─────────────────────────────────────────────────────────────
   Field Frames — a quiet gallery that lets the photographs carry
   the color. Cormorant Garamond display + IBM Plex Mono labels,
   one accent (lichen). Sitewide type runs small; content column
   caps at 1200px while the hero backdrop runs full-bleed.
   ───────────────────────────────────────────────────────────── */

:root {
  --ink:        #15140f;
  --ink-soft:   #1d1b15;
  --paper:      #e9e5d9;
  --paper-soft: #d6d1c4;   /* hero subtitle / captions */
  --paper-dim:  #9c988b;   /* secondary / mono labels */
  --lichen:     #93a382;   /* lone accent: coastal scrub */
  --hair:       rgba(233, 229, 217, 0.12);

  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --display: "Cormorant Garamond", Georgia, serif;

  --gap: 10px;
  --edge: clamp(16px, 4vw, 48px);
  --max: 1200px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

@keyframes ff-blink { 0%, 55% { opacity: 1; } 56%, 100% { opacity: 0; } }

/* ── Image protection (best effort) ─────────────────────────── */
.frame img,
.folder-card img,
.lb-img {
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
  pointer-events: none;
}
.frame,
.folder-card {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

/* ── Sitewide content column ────────────────────────────────── */
.wrap { max-width: var(--max); margin: 0 auto; }

/* ── Landing hero (full-bleed backdrop, capped inner content) ── */
.hero {
  position: relative;
  height: 100vh;
  height: 100svh;        /* exclude mobile browser chrome so bottom content + arrow stay visible */
  min-height: 560px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.hero[hidden] { display: none; }
.hero-bg {
  position: absolute;
  inset: -48px;
  background-color: var(--ink-soft);
  background-size: cover;
  background-position: center;
  filter: blur(8px);
  transform: scale(1.06);
}
.hero-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(21, 20, 15, 0.42) 0%,
    rgba(21, 20, 15, 0.30) 38%,
    rgba(21, 20, 15, 0.82) 100%);
}
.hero-top {
  position: relative;
  max-width: var(--max);
  width: 100%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1em;
  padding: clamp(20px, 4vw, 40px) var(--edge);
}
.hero-wordmark {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(0.77rem, 1.4vw, 0.98rem);
  letter-spacing: -0.01em;
}
.hero-coord {
  font-size: 0.462rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #c9c4b6;
}
.hero-content {
  position: relative;
  flex: 1;
  max-width: var(--max);
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0 var(--edge) clamp(48px, 10vh, 110px);
}
.hero-row {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: clamp(24px, 5vw, 80px);
}
.hero-text { display: flex; flex-direction: column; gap: clamp(14px, 2vw, 22px); }
.hero-title {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(2.1rem, 6.3vw, 4.9rem);
  line-height: 1;
  letter-spacing: -0.01em;
  margin: 0;
  max-width: 15ch;
  text-wrap: balance;
}
.hero-sub {
  margin: 0;
  font-size: clamp(0.546rem, 0.98vw, 0.644rem);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--paper-soft);
  max-width: 44ch;
}
/* Slim vertical down-arrow that matches the height of the title+subtitle */
.hero-arrow {
  align-self: stretch;
  flex: none;
  background: none;
  border: none;
  padding: 0;
  margin: 0 4px 6px;
  cursor: pointer;
  color: var(--paper-soft);
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: color 0.25s ease;
}
.hero-arrow:hover { color: var(--lichen); }
.hero-arrow-line { flex: 1; width: 1.5px; min-height: 32px; background: currentColor; }
.hero-arrow-head {
  width: 13px;
  height: 13px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  margin-top: -8px;
}
.hero-arrow:focus-visible { outline: 2px solid var(--lichen); outline-offset: 3px; }

/* ── Compact masthead (folder view) ─────────────────────────── */
.topbar {
  max-width: var(--max);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1em;
  padding: clamp(20px, 4vw, 40px) var(--edge);
}
.topbar[hidden] { display: none; }
.topbar-left { display: flex; align-items: center; gap: clamp(14px, 2vw, 22px); }
.topbar-wordmark {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(0.77rem, 1.4vw, 0.98rem);
  letter-spacing: -0.01em;
}
.topbar-coord {
  font-size: 0.462rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--paper-dim);
}
.back {
  background: none;
  border: 1px solid var(--hair);
  color: var(--paper-dim);
  font-family: var(--mono);
  font-size: 0.462rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 7px 12px;
  border-radius: 2px;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.back:hover { border-color: var(--lichen); color: var(--lichen); }
.back:focus-visible { outline: 2px solid var(--lichen); outline-offset: 2px; }

/* ── Main + folder header ───────────────────────────────────── */
main { padding: clamp(20px, 4vw, 40px) var(--edge) 0; }

/* On the index, the folder grid fills its own viewport-height panel so it
   reads as a seamless second screen below the full-bleed hero. A gentle
   proximity snap clicks between the two without fighting free scrolling. */
html { scroll-behavior: smooth; }
body.index-mode main {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
html:has(body.index-mode) { scroll-snap-type: y proximity; }
html:has(body.index-mode) .hero,
html:has(body.index-mode) main { scroll-snap-align: start; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html:has(body.index-mode) { scroll-snap-type: none; }
}

.folders-meta {
  margin: 0 0 clamp(16px, 3vw, 26px);
  font-size: 0.462rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--paper-dim);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em 0.9em;
}
.folders-meta[hidden] { display: none; }
.folders-meta .accent { color: var(--lichen); }
.folders-meta .sep { color: var(--hair); }

.folder-head { margin: 0 0 clamp(18px, 3vw, 30px); max-width: 60ch; }
.folder-head[hidden] { display: none; }
.folder-title {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(1.274rem, 3.094vw, 2.002rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
  margin: 0;
}
.folder-caption {
  margin: 0.7em 0 0;
  color: var(--paper-soft);
  font-size: 0.783rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.55;
}
.folder-caption[hidden] { display: none; }

/* On phones the folder header reads better with a larger title and a
   quieter, smaller caption. */
@media (max-width: 640px) {
  .folder-title { font-size: clamp(1.85rem, 8vw, 2.4rem); line-height: 1.02; }
  .folder-caption { font-size: 0.64rem; letter-spacing: 0.1em; }
}

/* ── Folder index (square cover cards) ──────────────────────── */
.gallery--folders {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap);
}
@media (max-width: 1000px) {
  .gallery--folders { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 680px) {
  .gallery--folders { grid-template-columns: repeat(2, 1fr); }
}
.folder-card {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  background: var(--ink-soft);
  overflow: hidden;
  text-decoration: none;
  line-height: 0;
}
.folder-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
}
.folder-card img.loaded { opacity: 1; }
.folder-new {
  position: absolute;
  top: 12px;
  right: 14px;
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--lichen);
  line-height: 1;
  animation: ff-blink 1.1s steps(1, end) infinite;
}
.folder-label {
  position: absolute;
  inset: auto 0 0 0;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.8em;
  padding: 14px 14px 12px;
  line-height: 1.3;
}
.folder-name {
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--paper-dim);
}
.folder-count {
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--paper-dim);
  flex: none;
}
@media (prefers-reduced-motion: no-preference) {
  .folder-card img { transition: opacity 0.6s ease, transform 0.5s ease; }
  .folder-card:hover img { transform: scale(1.03); }
  .folder-name { transition: color 0.2s ease; }
  .folder-card:hover .folder-name { color: var(--paper); }
}
.folder-card:focus-visible { outline: 2px solid var(--lichen); outline-offset: 2px; }

/* ── Folder view (fixed-column grid, top-aligned, natural aspect) ──
   A regular 1‑2‑3 grid (row-major), not masonry: 4 columns max, dropping
   to 3 then 2 (the mobile minimum). Photos keep their aspect ratio and
   align to the top of each row — no cropping. */
.gallery--frames {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap);
  align-items: start;
}
@media (max-width: 1000px) {
  .gallery--frames { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 680px) {
  .gallery--frames { grid-template-columns: repeat(2, 1fr); }
}
.frame {
  position: relative;
  display: block;
  background: var(--ink-soft);
  cursor: zoom-in;
  overflow: hidden;
  line-height: 0;
}
.frame img {
  display: block;
  width: 100%;
  height: auto;       /* full aspect ratio — never cropped */
  opacity: 0;
}
.frame img.loaded { opacity: 1; }
.frame .idx {
  position: absolute;
  top: 8px;
  left: 9px;
  font-size: 0.434rem;
  letter-spacing: 0.12em;
  color: var(--paper);
  background: rgba(21, 20, 15, 0.55);
  padding: 2px 6px;
  border-radius: 2px;
  opacity: 0;
  pointer-events: none;
  line-height: 1.4;
}
@media (prefers-reduced-motion: no-preference) {
  .frame img { transition: opacity 0.6s ease, transform 0.5s ease; }
  .frame .idx { transition: opacity 0.25s ease; }
  .frame:hover img { transform: scale(1.03); }
}
.frame:hover .idx,
.frame:focus-visible .idx { opacity: 1; }
.frame:focus-visible { outline: 2px solid var(--lichen); outline-offset: 2px; }

/* ── Status ─────────────────────────────────────────────────── */
.status {
  padding: clamp(40px, 12vh, 120px) var(--edge);
  text-align: center;
  color: var(--paper-dim);
  font-size: 0.546rem;
  letter-spacing: 0.1em;
}
.status[hidden] { display: none; }
.status-line { margin: 0.4em 0; }
.status .hint { color: var(--lichen); }

/* ── Colophon ───────────────────────────────────────────────── */
.colophon {
  margin-top: clamp(48px, 8vw, 96px);
  padding: 24px var(--edge) 40px;
  border-top: 1px solid var(--hair);
  color: var(--paper-dim);
  font-size: 0.462rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  display: flex;
  flex-wrap: wrap;
  gap: 0.9em;
}
.colophon .sep { color: var(--hair); }

/* ── Lightbox (full screen, contained image, caption row) ───── */
.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(12, 11, 8, 0.96);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 50;
  padding: clamp(10px, 2vw, 28px);
}
.lightbox.open { display: flex; }
.lb-stage {
  margin: 0;
  max-width: 100%;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(12px, 1.6vw, 18px);
}
.lb-img {
  display: block;
  max-width: 94vw;
  max-height: 80vh;
  width: auto;
  height: auto;          /* element shrink-wraps the photo — no crop */
  object-fit: contain;
  background: var(--ink-soft);
}
/* Caption row — width is synced to the photo's rendered width in JS. */
.lb-bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1.5em;
  font-size: 0.476rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.4;
}
.lb-settings,
.lb-camera {
  color: #c9c4b6;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lb-settings { justify-self: start; }
.lb-camera { justify-self: end; text-align: right; }
.lb-nav-group { justify-self: center; display: flex; align-items: center; gap: 1.4em; }
.lb-meta { color: var(--paper-dim); white-space: nowrap; }
.lb-meta .accent { color: var(--lichen); }
.lb-meta .place { color: var(--paper); }
.lb-arrow {
  background: none;
  border: none;
  padding: 2px 4px;
  color: var(--paper-dim);
  font-family: var(--mono);
  font-size: 0.85rem;
  line-height: 1;
  cursor: pointer;
  transition: color 0.2s ease;
}
.lb-arrow:hover { color: var(--lichen); }
.lb-arrow:focus-visible,
.lb-close:focus-visible { outline: 2px solid var(--lichen); outline-offset: 2px; }
.lb-close {
  position: absolute;
  top: clamp(12px, 3vw, 28px);
  right: clamp(12px, 3vw, 28px);
  background: none;
  border: 1px solid var(--hair);
  color: var(--paper);
  font-family: var(--mono);
  font-size: 0.462rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 6px 11px;
  border-radius: 2px;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.lb-close:hover { border-color: var(--lichen); color: var(--lichen); }

/* Mobile: stack settings + camera under the photo, then arrows + breadcrumb. */
@media (max-width: 640px) {
  .lb-img { max-height: 56vh; }
  .lb-bar {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: auto !important;   /* override the JS width sync */
    font-size: 0.62rem;
    text-align: center;
  }
  .lb-settings, .lb-camera {
    justify-self: auto;
    text-align: center;
    white-space: normal;
    overflow: visible;
  }
  .lb-settings { order: 1; }
  .lb-camera { order: 2; }
  .lb-nav-group { order: 3; margin-top: 6px; gap: 1.6em; }
  .lb-arrow { font-size: 1rem; padding: 4px 8px; }
}