/* =============================================================================
   WILDFRAME — STYLESHEET
   Dark, moody, editorial. Photographs are the protagonist; the chrome disappears.
   ============================================================================= */

/* =============================================================================
   PAGE TRANSITIONS — black overlay fade between pages
   The body itself starts invisible (opacity: 0) via CSS, so there's no
   flash of unstyled content. JS adds .page-loaded which fades it in.
   When leaving a page, JS adds .page-leaving which fades it back out.
   ============================================================================= */

body {
  opacity: 0;
  transition: opacity 350ms cubic-bezier(.4, 0, .2, 1);
}
body.page-loaded { opacity: 1; }
body.page-leaving { opacity: 0; }

/* When arriving from the landing page, briefly desaturate then restore color
   — feels like color "developing" into the photographs. */
html.color-reveal body {
  animation: color-reveal 1800ms cubic-bezier(.4, 0, .2, 1) both;
}
@keyframes color-reveal {
  0%   { filter: grayscale(1) brightness(0.85); }
  100% { filter: grayscale(0) brightness(1); }
}

/* JS-disabled fallback: just show the page */
html.no-js body { opacity: 1; }

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  body { transition-duration: 200ms; }
  html.color-reveal body { animation: none; }
}

/* =============================================================================
   TYPOGRAPHY (loaded from Google Fonts in HTML)
   Display: Fraunces — modern serif with personality (variable optical-size)
   Body:    Inter Tight — clean modern sans, gets out of the way
   Mono:    JetBrains Mono — tiny technical labels
   ============================================================================= */

:root {
  --bg:           #0a0a0a;
  --bg-elev:      #141414;
  --ink:          #f0ede7;
  --ink-dim:      #8a8680;
  --ink-faint:    #4a4744;
  --line:         #1f1d1a;
  --accent:       #c8893a;
  --accent-dim:   #5a3e1a;

  --font-display: 'Fraunces', 'Times New Roman', serif;
  --font-body:    'Inter Tight', -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', 'Courier New', monospace;

  --transition:   400ms cubic-bezier(.2, .7, .2, 1);
  --transition-slow: 800ms cubic-bezier(.2, .7, .2, 1);

  --max-w:        1600px;
  --gutter:       2.5rem;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { background: var(--bg); }

body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--ink);
  font-size: 16px;
  line-height: 1.6;
  font-weight: 300;
  letter-spacing: 0.01em;
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* Fraunces optical-size axis: bigger and more refined at large sizes */
.landing-title, .home-title, .gallery-page-title, .section-title,
.about-text h1, .contact h1, .shop h1, .album-name {
  font-optical-sizing: auto;
  font-variation-settings: "opsz" 144, "SOFT" 50;
}

a { color: var(--ink); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--accent); }

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

/* ---- NAVIGATION ---- */
.nav {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 1.75rem var(--gutter);
  display: flex; justify-content: space-between; align-items: center;
  background: linear-gradient(to bottom, rgba(10,10,10,0.85), rgba(10,10,10,0));
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.nav-logo {
  display: flex; align-items: center; gap: 0.75rem;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: 0.04em;
}
.nav-logo svg { height: 28px; width: 28px; }

.nav-links { display: flex; gap: 2.5rem; align-items: center; }
.nav-links a {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: 400;
  color: var(--ink-dim);
  position: relative;
}
.nav-links a:hover { color: var(--ink); }
.nav-links a.active {
  color: var(--ink);
}
.nav-links a.active::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  bottom: -8px;
  height: 1px;
  background: var(--accent);
}

.nav-toggle { display: none; background: none; border: none; color: var(--ink); cursor: pointer; padding: 0.5rem; }

/* Instagram glyph in nav — small, sits at the end of the link row */
.nav-instagram {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-dim);
  transition: color var(--transition);
}
.nav-instagram svg {
  width: 18px;
  height: 18px;
}
.nav-instagram:hover { color: var(--accent); }
.nav-instagram::after { display: none !important; }   /* no underline animation */

/* =============================================================================
   LANDING PAGE  (index.html) — viewport-only, cross-fading B&W background
   ============================================================================= */

body[data-page="landing"] {
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}
body[data-page="landing"] .footer { display: none; }

.landing-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: #000;
}
.landing-bg-layer {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: grayscale(1) brightness(0.55) contrast(1.1);
  opacity: 0;
  transition: opacity 2.5s ease-in-out;
  /* Subtle Ken Burns-style zoom for life */
  animation: landingDrift 18s ease-in-out infinite alternate;
}
.landing-bg-layer.visible { opacity: 1; }
@keyframes landingDrift {
  from { transform: scale(1.04) translate(0, 0); }
  to   { transform: scale(1.12) translate(-1.5%, -1.5%); }
}
.landing-bg-vignette {
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    /* Soft radial darkening towards edges */
    radial-gradient(ellipse 100% 80% at center 40%, transparent 0%, rgba(0,0,0,0.3) 100%),
    /* Strong bottom gradient where the text lives — guarantees legibility */
    linear-gradient(to bottom,
      rgba(0,0,0,0.35) 0%,
      rgba(0,0,0,0.15) 30%,
      rgba(0,0,0,0.55) 65%,
      rgba(0,0,0,0.85) 100%);
}

.landing-content {
  position: relative;
  z-index: 2;
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 6rem var(--gutter) 4rem;
  max-width: 900px;
  margin: 0 auto;
}
.landing-title {
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 9vw, 7.5rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.025em;
  margin: 0 0 1.5rem;
  color: var(--ink);
  /* Layered text shadow for unmatched legibility on any background */
  text-shadow:
    0 2px 4px rgba(0,0,0,0.6),
    0 8px 30px rgba(0,0,0,0.5),
    0 1px 0 rgba(0,0,0,0.4);
  opacity: 0;
  animation: fadeUp 1.4s ease 0.3s forwards;
}
.landing-title em {
  font-style: italic;
  color: var(--accent);
  font-weight: 400;
}
.landing-tagline {
  font-size: 1.15rem;
  color: rgba(240, 237, 231, 0.92);
  font-style: italic;
  max-width: 38ch;
  line-height: 1.6;
  margin: 0 0 3.5rem;
  text-shadow: 0 2px 8px rgba(0,0,0,0.7);
  opacity: 0;
  animation: fadeUp 1.4s ease 0.6s forwards;
}
.landing-cta {
  display: flex;
  gap: 2rem;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  opacity: 0;
  animation: fadeUp 1.4s ease 0.9s forwards;
}
.landing-cta-primary {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  color: var(--ink);
  border: 1px solid var(--accent);
  padding: 1.1rem 2.4rem;
  background: rgba(20,20,20,0.4);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.landing-cta-primary:hover {
  background: var(--accent);
  color: #0a0a0a;
}
.landing-cta-secondary {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  color: var(--ink-dim);
  padding: 1.1rem 0.5rem;
  border-bottom: 1px solid transparent;
}
.landing-cta-secondary:hover {
  color: var(--ink);
  border-bottom-color: var(--ink-faint);
}
.landing-credit {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 3;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  pointer-events: none;
  text-shadow: 0 1px 4px rgba(0,0,0,0.6);
}
@media (max-width: 640px) {
  .landing-title { font-size: clamp(2.5rem, 12vw, 4.5rem); }
  .landing-tagline { font-size: 1rem; }
  .landing-cta { flex-direction: column; gap: 1rem; }
  .landing-credit { bottom: 1rem; right: 1rem; font-size: 0.6rem; }
}


/* =============================================================================
   GALLERY PAGE HEADER  (gallery.html) — title + view toggle
   ============================================================================= */

.gallery-header {
  padding: 7rem var(--gutter) 0;
  max-width: var(--max-w);
  margin: 0 auto;
}
.gallery-header-inner {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}
.gallery-header-left { flex: 1; min-width: 260px; }
.gallery-page-title {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 4.5vw, 3.6rem);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1;
  margin: 0 0 0.5rem;
}
.gallery-page-tagline {
  font-size: 0.95rem;
  color: var(--ink-dim);
  font-style: italic;
  margin: 0;
}

.gallery-spectrum-bar {
  margin-top: 1rem;
  height: 2px;
  width: 100%;
  background: linear-gradient(
    90deg,
    #a23b3b 0%, #c8893a 22%, #7a5c3a 38%,
    #4a7c59 55%, #3a6ea5 75%, #888888 100%
  );
  opacity: 0.6;
}

/* Band labels: standalone header above each row of photos */
.home-band-label {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.32em;
  color: var(--band-color, var(--ink));
  padding: 1.5rem 0 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  border-top: 1px solid var(--line);
  font-weight: 400;
}
.gallery-band:first-child .home-band-label {
  border-top: none;
  padding-top: 0.5rem;
}
.home-band-label-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--band-color);
  box-shadow: 0 0 14px var(--band-color);
  flex-shrink: 0;
}
.home-band-label-count {
  color: var(--ink-faint);
  letter-spacing: 0.2em;
  margin-left: auto;
  font-size: 0.7rem;
}

@keyframes fadeUp {
  to   { opacity: 1; transform: translateY(0); }
  from { opacity: 0; transform: translateY(20px); }
}

/* ---- HOME GALLERY WRAPPER ---- */
.home-gallery-wrap {
  padding: 1rem var(--gutter) 4rem;
  max-width: var(--max-w);
  margin: 0 auto;
}

/* ---- SECTIONS ---- */
.section {
  padding: 8rem var(--gutter);
  max-width: var(--max-w);
  margin: 0 auto;
}
.section-header {
  display: grid; grid-template-columns: 1fr 2fr; gap: 4rem;
  margin-bottom: 4rem; align-items: end;
}
.section-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  color: var(--accent);
  margin-bottom: 1rem;
}
.section-title {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.02em;
}
.section-title em { font-style: italic; color: var(--ink-dim); }
.section-intro {
  font-size: 1.05rem;
  color: var(--ink-dim);
  max-width: 50ch;
  line-height: 1.7;
}

/* ---- ALBUM GRID (homepage list of color albums) ---- */
.albums {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.album-card {
  position: relative;
  aspect-ratio: 4 / 5;
  background: var(--bg-elev);
  overflow: hidden;
  cursor: pointer;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 2rem;
  transition: background var(--transition);
}
.album-card::before {
  content: ''; position: absolute; inset: 0;
  background: var(--album-color, var(--accent));
  opacity: 0.15;
  transition: opacity var(--transition);
  mix-blend-mode: screen;
}
.album-card::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at 30% 30%, var(--album-color, var(--accent)) 0%, transparent 60%);
  opacity: 0.25;
  transition: opacity var(--transition);
}
.album-card:hover::before { opacity: 0.35; }
.album-card:hover::after { opacity: 0.5; }
.album-card-content { position: relative; z-index: 1; }
.album-swatch {
  width: 60px; height: 60px;
  background: var(--album-color);
  border-radius: 50%;
  margin-bottom: 1.5rem;
  box-shadow: 0 0 60px var(--album-color);
  transition: transform var(--transition), box-shadow var(--transition);
}
.album-card:hover .album-swatch {
  transform: scale(1.1);
  box-shadow: 0 0 80px var(--album-color);
}
.album-name {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  margin-bottom: 0.5rem;
}
.album-desc {
  font-size: 0.9rem;
  color: var(--ink-dim);
  font-style: italic;
}
.album-count {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--ink-faint);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-top: 1rem;
}

/* ---- SPECTRUM VIEW (homepage continuous color flow) ---- */
.spectrum {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 2px;
}
.spectrum-tile {
  aspect-ratio: 1;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  background: var(--bg-elev);
}
.spectrum-tile img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow), filter var(--transition);
  filter: brightness(0.85);
}
.spectrum-tile:hover img { transform: scale(1.05); filter: brightness(1); }

/* =============================================================================
   404 PAGE  (404.html)
   ============================================================================= */

.not-found {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 6rem var(--gutter) 4rem;
  max-width: 700px;
  margin: 0 auto;
}
.not-found-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.4em;
  color: var(--accent);
  margin-bottom: 2rem;
}
.not-found-title {
  font-family: var(--font-display);
  font-size: clamp(3rem, 8vw, 6rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.025em;
  margin: 0 0 2rem;
}
.not-found-title em {
  font-style: italic;
  color: var(--accent);
  font-weight: 400;
}
.not-found-text {
  font-size: 1.1rem;
  color: var(--ink-dim);
  line-height: 1.7;
  margin: 0 0 3rem;
  max-width: 50ch;
}
.not-found-cta {
  display: flex;
  gap: 2rem;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
}
.not-found-link-primary {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  color: var(--ink);
  border: 1px solid var(--accent);
  padding: 1.1rem 2.4rem;
  background: rgba(20,20,20,0.4);
  transition: background var(--transition), color var(--transition);
}
.not-found-link-primary:hover {
  background: var(--accent);
  color: #0a0a0a;
}
.not-found-link-secondary {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  color: var(--ink-dim);
  padding: 1.1rem 0.5rem;
  border-bottom: 1px solid transparent;
}
.not-found-link-secondary:hover {
  color: var(--ink);
  border-bottom-color: var(--ink-faint);
}

.projects-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}
.project-card {
  display: block;
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--bg-elev);
  overflow: hidden;
  cursor: pointer;
  border: 1px solid var(--line);
  transition: border-color var(--transition);
}
.project-card:hover { border-color: var(--accent-dim); }
.project-card-image {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: brightness(0.55);
  transition: filter var(--transition), transform var(--transition-slow);
}
.project-card:hover .project-card-image {
  filter: brightness(0.75);
  transform: scale(1.03);
}
.project-card-content {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 2rem;
  z-index: 2;
}
.project-card-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  color: var(--accent);
  margin-bottom: 0.6rem;
}
.project-card-title {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0 0 0.4rem;
}
.project-card-subtitle {
  font-size: 0.9rem;
  color: var(--ink-dim);
  font-style: italic;
  margin: 0;
}

/* =============================================================================
   SINGLE PROJECT PAGE  (project.html) — title + scroll-driven panorama
   ============================================================================= */

/* Title block */
.project-header {
  padding: 9rem var(--gutter) 4rem;
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}
.project-header-inner > * { max-width: 60ch; margin-left: auto; margin-right: auto; }

.project-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.4em;
  color: var(--accent);
  margin-bottom: 1.5rem;
}
.project-title {
  font-family: var(--font-display);
  font-size: clamp(2.8rem, 6vw, 5rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.025em;
  margin: 0 0 0.75rem;
}
.project-subtitle {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-style: italic;
  color: var(--ink-dim);
  margin: 0 0 2.5rem;
}
.project-description {
  font-size: 1.05rem;
  line-height: 1.8;
  color: var(--ink);
  margin: 0 auto;
}
.project-scroll-hint {
  margin-top: 4rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ink-faint);
  animation: scrollHintBob 2.5s ease-in-out infinite;
}
@keyframes scrollHintBob {
  0%, 100% { transform: translateY(0); opacity: 0.6; }
  50%      { transform: translateY(6px); opacity: 1; }
}

/*
 * The panorama is rendered inside a TALL outer section. Inside it sits a
 * sticky inner block that fills the viewport. As the user scrolls down the
 * page, JS translates the panorama image horizontally proportional to the
 * vertical scroll progress through the section.
 *
 * Outer height is set by JS to: viewportHeight * (panoramaWidth / viewportWidth)
 * — so scrolling one viewport-height of page = panning one viewport-width
 * across the panorama (per the Medium pace setting).
 */
.project-pano {
  position: relative;
  width: 100%;
  /* JS sets the height once it knows the panorama dimensions */
}

/* Gallery-type project: just a centered masonry, like the main gallery */
.project-gallery-wrap {
  padding: 0 var(--gutter) 6rem;
  max-width: var(--max-w);
  margin: 0 auto;
}
.project-pano-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  background: #000;
  /* Center the panorama vertically within the sticky viewport */
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.project-pano-image-wrap {
  position: absolute;
  /* Vertically centered band — height 70% of viewport, top offset 15% to center */
  top: 15vh;
  left: 0;
  height: 70vh;
  /* width is set by JS from the image's actual aspect ratio after load */
  will-change: transform;
}
.project-pano-image {
  /* Fill the wrapper exactly — wrapper is sized to match image aspect */
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  user-select: none;
  -webkit-user-drag: none;
}
.project-pano-watermark {
  /* Bigger, anchored bottom-right of the visible viewport, not the image */
  position: fixed;
  bottom: 1.2rem;
  right: 1.2rem;
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-style: italic;
  color: rgba(255, 255, 255, 0.75);
  letter-spacing: 0.04em;
  text-shadow: 0 2px 8px rgba(0,0,0,0.85);
  z-index: 50;
  background: none;
}
/* Don't show the small bottom-right watermark from the wrap; the fixed one
   above handles it. */
.project-pano-image-wrap > .watermark { display: none; }

/* Loading state — shown while the panorama is downloading */
.project-pano.loading .project-pano-sticky::before {
  content: 'Loading panorama…';
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ink-dim);
  z-index: 1;
}

@media (max-width: 1024px) {
  .projects-list { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .project-header { padding-top: 6rem; padding-bottom: 2rem; }
  .project-pano-watermark { font-size: 0.8rem; bottom: 0.8rem; right: 0.8rem; }
}
   Each color band fills the full width with a flex row of photos. Photo
   heights are normalized within each row using the aspect-ratio so photos
   line up cleanly while keeping their natural proportions.
   ============================================================================= */

.gallery-bands { display: flex; flex-direction: column; gap: 2rem; }

.gallery-band { display: block; }

.gallery-band-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  /* Each photo grows/shrinks to fill the row; height target ~280px */
}

.gallery-band-row .masonry-item {
  position: relative;
  height: 280px;
  flex-grow: 1;
  /* min-width prevents tiny photos when squeezed */
  min-width: 180px;
  background: var(--bg-elev);
  overflow: hidden;
  cursor: zoom-in;
}
.gallery-band-row .masonry-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--transition-slow), filter var(--transition), opacity 600ms ease-out;
  filter: brightness(0.94);
}
/* When loaded, the band-row image's brightness should still apply, but it should
   be visible — the .has-blur fade-in rule still controls opacity */
.gallery-band-row .masonry-item:hover img {
  transform: scale(1.04);
  filter: brightness(1.06);
}
/* Each photo's flex-basis is computed by JS using its aspect ratio so
   shorter (panorama) photos get more horizontal space than taller (portrait) */

@media (max-width: 1024px) {
  .gallery-band-row .masonry-item { height: 220px; }
}
@media (max-width: 640px) {
  /* On phones, switch to a 2-column grid regardless of aspect ratio.
     This overrides the per-photo flex-basis set inline by JS. */
  .gallery-band-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 4px;
  }
  .gallery-band-row .masonry-item {
    flex-basis: auto !important;   /* override inline JS-set flex-basis */
    height: auto;
    aspect-ratio: 1 / 1;            /* square crop, looks consistent */
    min-width: 0;
  }
}

/* Legacy vertical masonry (used on per-album pages, lightbox initialization) */
.masonry {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 1rem;
}
.masonry .masonry-item {
  position: relative;
  height: 280px;
  flex-grow: 1;
  min-width: 180px;
  background: var(--bg-elev);
  overflow: hidden;
  cursor: zoom-in;
}
.masonry .masonry-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--transition-slow), filter var(--transition);
  filter: brightness(0.94);
}
.masonry .masonry-item:hover img {
  transform: scale(1.04);
  filter: brightness(1.06);
}

/* =============================================================================
   BLUR-UP IMAGE LOADING
   The wrapper holds a tiny base64 JPEG as background-image (blurred).
   The real <img> sits on top, starts invisible, fades in once loaded.
   ============================================================================= */

.masonry-item.has-blur {
  background-size: cover;
  background-position: center;
}
.masonry-item.has-blur::before {
  /* CSS-blur the background image without using actual filter on a child
     (which would create a stacking context conflict with the watermark) */
  content: '';
  position: absolute;
  inset: 0;
  background: inherit;
  background-image: inherit;
  background-size: cover;
  background-position: center;
  filter: blur(20px) saturate(1.2);
  /* Slightly oversized to hide blur edges */
  transform: scale(1.1);
  z-index: 0;
}
.masonry-item.has-blur > img {
  position: relative;
  z-index: 1;
  opacity: 0;
  transition: opacity 600ms ease-out;
}
.masonry-item.has-blur.img-loaded > img {
  opacity: 1;
}

/* Old gallery class kept for any legacy use */
.gallery { display: block; }
.gallery-item { display: none; }

/* ---- WATERMARK (overlaid on every protected image) ---- */
.watermark {
  position: absolute;
  bottom: 0.9rem; right: 1rem;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: rgba(255, 255, 255, 0.65);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-shadow: 0 1px 4px rgba(0,0,0,0.8);
  pointer-events: none;
  z-index: 2;
  user-select: none;
}

/* Invisible overlay that intercepts right-clicks and drags */
.image-shield {
  position: absolute; inset: 0;
  z-index: 3;
  background: transparent;
  cursor: zoom-in;
}

/* ---- LIGHTBOX (photo + side metadata panel) ---- */
.lightbox {
  position: fixed; inset: 0;
  background: rgba(8, 8, 8, 0.985);
  z-index: 1000;
  display: none;
  align-items: center; justify-content: center;
  padding: 4rem 5rem;
}
.lightbox.open { display: flex; animation: fadeIn 300ms ease; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.lightbox-stage {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 3rem;
  align-items: center;
  width: 100%;
  max-width: 1500px;
  height: 100%;
}

.lightbox-img-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 0;
}
/* Wrapper that hugs the image's actual dimensions, so the watermark sits
   on the photo's bottom-right and not in the surrounding dark space. */
.lightbox-photo-frame {
  position: relative;
  display: inline-block;
  max-width: 100%;
  max-height: 85vh;
  line-height: 0;
}
.lightbox img {
  max-width: 100%;
  max-height: 85vh;
  width: auto;
  height: auto;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
  box-shadow: 0 20px 80px rgba(0,0,0,0.6);
  display: block;
}
/* Bigger, photo-anchored watermark for the lightbox */
.lightbox-watermark {
  position: absolute;
  bottom: 1rem;
  right: 1.2rem;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-style: italic;
  color: rgba(255, 255, 255, 0.85);
  letter-spacing: 0.04em;
  text-shadow: 0 2px 8px rgba(0,0,0,0.85);
  pointer-events: none;
  z-index: 4;
  user-select: none;
  line-height: 1;
}

/* SIDE METADATA PANEL — labels tint to match the photo's color group */
.lightbox-side {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  padding-right: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--ink-dim);
  letter-spacing: 0.05em;
  /* This is set per-photo by JS via setProperty('--photo-color', ...) */
  --photo-color: var(--accent);
}
.lightbox-side-block { }
.lightbox-side-label {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  color: var(--photo-color);
  margin-bottom: 0.6rem;
  transition: color 400ms ease;
}
.lightbox-side-value {
  color: var(--ink);
  font-size: 0.95rem;
  line-height: 1.55;
  letter-spacing: 0;
}
.lightbox-side-value-secondary {
  color: var(--ink-dim);
  font-size: 0.78rem;
  margin-top: 0.35rem;
  line-height: 1.5;
}
.lightbox-side-divider {
  height: 1px;
  background: var(--line);
  width: 60px;
}
.lightbox-side-color-dot {
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--photo-color, var(--accent));
  margin-right: 0.6rem;
  vertical-align: middle;
  box-shadow: 0 0 12px var(--photo-color, var(--accent));
}

/* Controls: close + prev + next */
.lightbox-close, .lightbox-prev, .lightbox-next {
  position: absolute;
  background: rgba(20,20,20,0.6);
  border: 1px solid var(--ink-faint);
  color: var(--ink);
  width: 44px; height: 44px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 1.2rem;
  display: flex; align-items: center; justify-content: center;
  transition: border-color var(--transition), background var(--transition);
  z-index: 2;
}
.lightbox-close { top: 1.5rem; right: 1.5rem; }
.lightbox-prev  { top: 50%; left: 1.5rem;  transform: translateY(-50%); }
.lightbox-next  { top: 50%; right: 1.5rem; transform: translateY(-50%); }
.lightbox-close:hover, .lightbox-prev:hover, .lightbox-next:hover {
  border-color: var(--accent);
  background: rgba(40,40,40,0.85);
}

@media (max-width: 1024px) {
  .lightbox { padding: 2rem 3rem; }
  .lightbox-stage { grid-template-columns: 1fr; gap: 1.5rem; }
  .lightbox-img-wrap { min-height: auto; }
  .lightbox img { max-height: 65vh; }
  .lightbox-side {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.5rem 2.5rem;
    text-align: center;
  }
  .lightbox-side-divider { display: none; }
}
@media (max-width: 640px) {
  .lightbox { padding: 1rem; }
  .lightbox-prev, .lightbox-next { width: 36px; height: 36px; }
  .lightbox-side { font-size: 0.72rem; }
  .lightbox-side-value { font-size: 0.85rem; }
}

/* ---- ABOUT PAGE ---- */
.about {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 5rem;
  align-items: start;
}
.about-portrait {
  aspect-ratio: 4/5;
  background: #000;
  position: relative;
  overflow: hidden;
}
.about-portrait-layer {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: grayscale(1) brightness(0.7) contrast(1.1);
  opacity: 0;
  transition: opacity 2.5s ease-in-out;
  /* Subtle slow zoom for life */
  animation: portraitDrift 22s ease-in-out infinite alternate;
}
.about-portrait-layer.visible { opacity: 1; }
@keyframes portraitDrift {
  from { transform: scale(1.04) translate(0, 0); }
  to   { transform: scale(1.12) translate(-1.5%, -1.5%); }
}
/* Subtle inner shadow to anchor the photo */
.about-portrait::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to bottom, transparent 70%, rgba(0,0,0,0.35) 100%);
  z-index: 2;
}
.about-text { padding-top: 1rem; }
.about-text h1 {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 400;
  line-height: 1.05;
  margin-bottom: 2rem;
  letter-spacing: -0.02em;
}
.about-text h1 em { font-style: italic; color: var(--ink-dim); }
.about-text p {
  font-size: 1.05rem;
  line-height: 1.85;
  color: var(--ink);
  margin-bottom: 1.5rem;
  max-width: 60ch;
}
.about-text p:not(:first-of-type) { color: var(--ink-dim); }
.about-meta {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--ink-dim);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;
}
.about-meta div strong { display: block; color: var(--accent); margin-bottom: 0.4rem; font-weight: 400; }

/* ---- CONTACT PAGE ---- */
.contact {
  text-align: center;
  padding: 10rem var(--gutter);
  max-width: 700px;
  margin: 0 auto;
}
.contact h1 {
  font-family: var(--font-display);
  font-size: clamp(3rem, 7vw, 6rem);
  font-weight: 400;
  letter-spacing: -0.02em;
  margin-bottom: 2rem;
  line-height: 1;
}
.contact h1 em { font-style: italic; color: var(--ink-dim); }
.contact p {
  font-size: 1.1rem;
  color: var(--ink-dim);
  margin-bottom: 3rem;
  line-height: 1.7;
}
.contact-instagram {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  font-family: var(--font-mono);
  font-size: 1.05rem;
  color: var(--ink);
  border: 1px solid var(--accent);
  padding: 1rem 1.6rem;
  letter-spacing: 0.04em;
  background: rgba(20, 20, 20, 0.4);
  transition: background var(--transition), color var(--transition);
}
.contact-instagram:hover {
  background: var(--accent);
  color: #0a0a0a;
}
.contact-instagram-icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}
.contact-social {
  margin-top: 4rem;
  display: flex; justify-content: center; gap: 2rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

/* ---- SHOP PAGE ---- */
.shop {
  text-align: center;
  padding: 10rem var(--gutter) 8rem;
  max-width: 800px;
  margin: 0 auto;
}
.shop-icon {
  width: 80px; height: 80px;
  margin: 0 auto 3rem;
  border: 1px solid var(--accent);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--accent);
  font-family: var(--font-display);
  font-size: 1.5rem;
}
.shop h1 {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 6vw, 5rem);
  font-weight: 400;
  margin-bottom: 2rem;
  line-height: 1.05;
  letter-spacing: -0.02em;
}
.shop h1 em { font-style: italic; color: var(--ink-dim); }
.shop p {
  font-size: 1.1rem;
  color: var(--ink-dim);
  line-height: 1.8;
  max-width: 55ch;
  margin: 0 auto 3rem;
}

/* ---- FOOTER ---- */
.footer {
  margin-top: 8rem;
  padding: 4rem var(--gutter) 2rem;
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 2rem;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-faint);
  max-width: var(--max-w);
  margin-left: auto;
  margin-right: auto;
}
.footer-center { text-align: center; }
.footer-right { text-align: right; }
.footer a { color: var(--ink-faint); }
.footer a:hover { color: var(--ink); }

/* ---- EMPTY STATE ---- */
.empty-state {
  text-align: center;
  padding: 5rem 2rem;
  border: 1px dashed var(--line);
  color: var(--ink-dim);
  font-style: italic;
  font-size: 0.95rem;
}
.empty-state code {
  font-family: var(--font-mono);
  background: var(--bg-elev);
  padding: 0.2rem 0.5rem;
  font-size: 0.85rem;
  color: var(--accent);
  font-style: normal;
  border-radius: 2px;
}

/* ---- RESPONSIVE ---- */
@media (max-width: 1024px) {
  .albums { grid-template-columns: repeat(2, 1fr); }
  .section-header { grid-template-columns: 1fr; gap: 1.5rem; }
  .gallery { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
  .about { grid-template-columns: 1fr; gap: 2.5rem; }
  .footer { grid-template-columns: 1fr; text-align: center; }
  .footer-right { text-align: center; }
}
@media (max-width: 640px) {
  :root { --gutter: 1rem; }

  /* Bigger nav for thumb-friendly tap targets — Apple HIG recommends 44pt min */
  .nav {
    padding: 1.1rem var(--gutter);
  }
  .nav-logo {
    font-size: 1.35rem;             /* slightly bigger than the 1.5rem desktop */
    gap: 0.6rem;
  }
  .nav-logo svg { height: 32px; width: 32px; }   /* up from 28px */
  .nav-toggle {
    font-size: 1.6rem;
    padding: 0.6rem 0.4rem;
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .nav-links {
    display: none; position: fixed; top: 68px; left: 0; right: 0;
    background: var(--bg-elev); flex-direction: column; gap: 0; padding: 0.75rem 0;
    border-top: 1px solid var(--line);
  }
  .nav-links.open { display: flex; }
  .nav-links a {
    padding: 1.1rem var(--gutter);
    width: 100%;
    font-size: 0.95rem;
  }

  .albums { grid-template-columns: 1fr; }
  .section { padding: 4rem var(--gutter); }
  .gallery { grid-template-columns: repeat(2, 1fr); gap: 4px; }
  .about-meta { grid-template-columns: 1fr; }

  /* Gallery page: reduce padding for edge-to-edge feel on phones */
  .home-gallery-wrap { padding: 0.5rem var(--gutter) 3rem; }
  .gallery-header { padding-left: var(--gutter); padding-right: var(--gutter); }

  /* Mobile dropdown: Instagram link still works, shows as full-row tap area */
  .nav-instagram {
    width: 100%;
    padding: 1.1rem var(--gutter);
    justify-content: flex-start;
  }
  .nav-instagram svg { width: 22px; height: 22px; }
}

/* Disable user selection on protected images */
.protected, .protected img { user-select: none; -webkit-user-select: none; -webkit-user-drag: none; -webkit-touch-callout: none; }