/* ============================================================
   meghnaphoto.com — main.css
   Typeface: Bebas Neue (display) + Inter (body)
   Palette: #F5F5F3 bg · #1A1A1A text · #6B6B6B secondary · #E0E0DD border
   ============================================================ */

/* ── Custom Properties ─────────────────────────────────────── */
:root {
  --bg:          #F5F5F3;
  --surface:     #FFFFFF;
  --text:        #1A1A1A;
  --muted:       #6B6B6B;
  --border:      #E0E0DD;
  --dark-bg:     #1A1A1A;
  --dark-text:   #F5F5F3;
  --accent:      #1A1A1A;    /* same as text in default; only visible in forest */
  --font-display: 'Inter', sans-serif;
  --font-body:    'Inter', sans-serif;
  --nav-h:        72px;
  --gutter:       clamp(1.5rem, 4vw, 4rem);
}

/* Optional theme: forest — dark olive green with cream text and orange accent */
[data-theme="forest"] {
  --bg:          #3D4B31;
  --surface:     #4A5A3D;
  --text:        #FBE9D4;
  --muted:       #C4B29A;
  --border:      rgba(251, 233, 212, 0.18);
  --dark-bg:     #2A3421;
  --dark-text:   #FBE9D4;
  --accent:      #D88744;
}
[data-theme="forest"] body { color-scheme: dark; }

/* ── Reset ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: var(--font-body); }

/* ── Accessibility ─────────────────────────────────────────── */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--text);
  color: var(--bg);
  padding: 8px 16px;
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  z-index: 9999;
}
.skip-link:focus { left: 0; }

/* ── Image Placeholders ────────────────────────────────────── */
.img-ph {
  background: var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  width: 100%;
}
.img-ph--tall   { height: 480px; }
.img-ph--wide   { height: 280px; }
.img-ph--sq     { height: 360px; }
.img-ph--hero   { height: 100vh; }
.img-ph--about  { height: 70vh; min-height: 500px; }
.img-ph--press  { height: 280px; max-width: 240px; }
.img-ph--mid    { height: 400px; }

/* ── Navigation ────────────────────────────────────────────── */
/* Home icon + text links top-left. Hamburger appears top-right on mobile. */
.site-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 1.25rem var(--gutter);
  transition: background 0.35s ease;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 1.25rem;
}
.site-nav.scrolled {
  background: var(--bg);
}

.nav-home {
  display: inline-flex;
  align-items: center;
  color: var(--text);
  transition: opacity 0.2s;
  line-height: 0;
}
.nav-home:hover { opacity: 0.55; }
.nav-home svg { display: block; width: 16px; height: 16px; }

.nav-links {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  list-style: none;
}
.nav-links a {
  font-size: 0.8rem;
  color: var(--text);
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease;
}
.nav-links a:hover,
.nav-links a[aria-current="page"] {
  border-bottom-color: var(--accent);
}

.nav-hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  background: none;
  border: none;
  padding: 4px;
  margin-left: auto;   /* desktop: pushed right of nav-links */
}
.nav-hamburger span {
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--text);
  transition: all 0.3s ease;
}

/* Vertical text on right edge — persistent contact/handle mark */
.vert-text {
  position: fixed;
  top: 1.35rem;
  right: 1.35rem;
  writing-mode: vertical-rl;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  color: var(--text);
  z-index: 90;
  white-space: nowrap;
  transition: color 0.2s ease;
}
.vert-text:hover { color: var(--muted); }

/* ── Mobile Nav Overlay ────────────────────────────────────── */
.nav-overlay {
  position: fixed;
  inset: 0;
  background: var(--bg);
  z-index: 200;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--gutter);
  transform: translateX(100%);
  transition: transform 0.45s cubic-bezier(0.77, 0, 0.175, 1);
}
.nav-overlay.open { transform: translateX(0); }

.nav-overlay-close {
  position: absolute;
  top: 1.5rem;
  right: var(--gutter);
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text);
  font-size: 1.6rem;
  line-height: 1;
}

.nav-overlay-links { list-style: none; }
.nav-overlay-links li { margin-bottom: 0.5rem; }
.nav-overlay-links a {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  color: var(--text);
  line-height: 1.1;
  display: block;
  letter-spacing: -0.02em;
  transition: opacity 0.2s;
}
.nav-overlay-links a:hover { opacity: 0.4; }

/* ── Hero ───────────────────────────────────────────────────── */
.hero {
  position: relative;
  height: 100vh;
  min-height: 600px;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
}
.hero-bg {
  position: absolute;
  inset: -8%;
  will-change: transform;
}
.hero-bg img,
.hero-bg .img-ph { width: 100%; height: 100%; object-fit: cover; }
.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.1) 50%, transparent 100%);
}
.hero-content {
  position: relative;
  z-index: 1;
  padding: var(--gutter);
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
  color: var(--dark-text);
}
.hero-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  opacity: 0;
  transform: translateY(20px);
}
.hero-name.visible {
  animation: slideUpFade 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.hero-tagline {
  margin-top: 0.6rem;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  opacity: 0;
}
.hero-tagline.visible {
  animation: fadeIn 0.6s ease forwards 0.5s;
}

@keyframes slideUpFade {
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  to { opacity: 1; }
}

/* ── Scroll Reveals ─────────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.75s ease, transform 0.75s ease;
}
.reveal.visible { opacity: 1; transform: none; }

.stagger > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.stagger.visible > *:nth-child(1) { opacity: 1; transform: none; transition-delay: 0ms; }
.stagger.visible > *:nth-child(2) { opacity: 1; transform: none; transition-delay: 100ms; }
.stagger.visible > *:nth-child(3) { opacity: 1; transform: none; transition-delay: 200ms; }
.stagger.visible > *:nth-child(4) { opacity: 1; transform: none; transition-delay: 300ms; }
.stagger.visible > *:nth-child(5) { opacity: 1; transform: none; transition-delay: 400ms; }
.stagger.visible > *:nth-child(6) { opacity: 1; transform: none; transition-delay: 500ms; }

/* ── Section Spacing ────────────────────────────────────────── */
.section { padding: clamp(4rem, 8vw, 8rem) var(--gutter); }
.section-sm { padding: clamp(2rem, 4vw, 4rem) var(--gutter); }

.section-label {
  font-size: 0.65rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 1.5rem;
  display: block;
}

.page-rule {
  border: none;
  border-top: 1px solid var(--border);
  margin: 0 var(--gutter);
}

/* ── Page Header (non-home) ─────────────────────────────────── */
.page-header {
  padding: calc(var(--nav-h) + 4rem) var(--gutter) 1rem;
}
.page-header h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
}
.page-header h1 small {
  display: inline;
  font-size: inherit;
}

/* ── Pull Quote ─────────────────────────────────────────────── */
.pull-quote {
  display: grid;
  grid-template-columns: 55% 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
  padding: clamp(4rem, 8vw, 8rem) var(--gutter);
}
.pull-quote-img { overflow: hidden; }
.pull-quote-text blockquote {
  font-size: clamp(0.95rem, 1.3vw, 1.15rem);
  line-height: 1.65;
  font-style: italic;
}
.pull-quote-text cite {
  display: block;
  margin-top: 1.25rem;
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  color: var(--muted);
  font-style: normal;
}

/* ── Home hero — two large photos, natural aspect, no crop ────── */
.home-hero {
  position: relative;
  display: flex;
  align-items: stretch;
  gap: 1.25vw;
  padding: 5vh var(--gutter);
  box-sizing: border-box;
}
.hero-photo {
  display: block;
  overflow: hidden;
  cursor: zoom-in;
  position: relative;
}
.hero-photo img,
.hero-photo .img-ph {
  width: 100%;
  height: 80vh;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: opacity 0.35s ease;
}
.hero-photo:hover img,
.hero-photo:hover .img-ph { opacity: 0.9; }

/* Asymmetric widths + vertical offsets. Heights = natural (no crop). */
.hero-photo--left {
  flex: 0 0 43%;
  align-self: flex-start;
  margin-top: 8vh;
}
.hero-photo--right {
  flex: 0 0 54%;
  align-self: flex-end;
}

/* Small identity line below the hero */
.home-identity {
  padding: 3rem var(--gutter) 0;
  max-width: 640px;
  font-size: 0.9rem;
  color: var(--muted);
  line-height: 1.7;
}


/* ── Genre Subpage — intro + scenes ───────────────────────────── */
.genre-intro {
  padding: 2rem var(--gutter) 12px;
  max-width: 600px;
  font-size: 0.9rem;
  line-height: 1.75;
  color: var(--muted);
}

/* Back-to-portfolio link on subpages */
.genre-back {
  padding: 1rem var(--gutter) 2rem;
  font-size: 0.78rem;
}
.genre-back a {
  border-bottom: 1px solid var(--text);
  padding-bottom: 2px;
}

/* ── Portfolio Scenes ────────────────────────────────────────── */
/* Each scene = one composition: 1 or 2 prints in a field of space */
.portfolio-scenes { padding: 0 0 6rem; }

.scene {
  min-height: 45vh;
  display: flex;
  align-items: center;
  padding: 4rem var(--gutter);
  position: relative;
}
.scene[data-hidden="true"] { display: none; }

/* Direct children get scene positioning — supports .s-img OR .tile-link */
.scene > * { flex-shrink: 0; }

/* Image wrapper — never crops, image capped at 600px tall */
.s-img { overflow: hidden; cursor: pointer; display: flex; justify-content: center; }
.s-img img, .s-img .img-ph {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 600px;
  display: block;
  transition: opacity 0.35s ease;
}
.s-img:hover img, .s-img:hover .img-ph { opacity: 0.8; }

/* Tile link — wraps s-img + caption; used on portfolio index */
.tile-link { display: block; color: inherit; text-decoration: none; }
.tile-link .s-img { margin-bottom: 0.85rem; }
.tile-link:hover .s-img img, .tile-link:hover .s-img .img-ph { opacity: 0.85; }
.tile-caption {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 0.85rem;
}
.tile-caption .tile-name { color: var(--text); }
.tile-caption .tile-count {
  font-size: 0.7rem;
  color: var(--muted);
  letter-spacing: 0.08em;
}

/* Feature: prominent centered layout. First scene on subpages. */
.scene--feature {
  justify-content: center;
  padding: 4rem var(--gutter);
  min-height: auto;
}
.scene--feature > * { width: 72%; }

/* Pair: medium left + larger right, staggered (left image higher) */
.scene--pair { gap: 2vw; }
.scene--pair > *:first-child { width: 42%; margin-top: -6vh; }
.scene--pair > *:last-child  { width: 55%; margin-top:  6vh; }

/* Pair-right: larger left + smaller right (right image higher) */
.scene--pair-r { gap: 2vw; justify-content: flex-end; }
.scene--pair-r > *:first-child { width: 55%; margin-top:  5vh; }
.scene--pair-r > *:last-child  { width: 35%; margin-top: -6vh; }

/* Solo scenes — all centered. Width variants add visual variety. */
.scene--left,
.scene--right,
.scene--offset { justify-content: center; }
.scene--left > *,
.scene--right > *,
.scene--offset > * {
  width: auto;
  max-width: 60%;
  margin: 0;
  transform: none;
}

/* ── Split gallery (portfolio subpages, desktop) ─────────────── */
/* One photo per row, alternating right / left. No padding, no height cap. */
.scene--split-right,
.scene--split-left {
  min-height: 0;
  padding: 0;
  align-items: flex-start;
}

.scene--split-right { justify-content: flex-end; }
.scene--split-left  { justify-content: flex-start; }

/* Width set on .s-img directly — two-class specificity beats base rules.
   18px gutter on each inner edge = 36px total gap between columns. */
.scene--split-right .s-img {
  display: block;
  width: calc(50vw - 18px);
  max-width: none;
  margin: 0;
}
.scene--split-left .s-img {
  display: block;
  width: calc(50vw - 200px - 18px);
  max-width: none;
  margin-left: 200px;
  margin-right: 0;
}

.scene--split-right .s-img img,
.scene--split-left .s-img img {
  width: 100%;
  height: auto;
  max-height: none;
}

/* ── Site logo (fixed bottom-left on all pages) ─────────────── */
/* mix-blend-mode: difference makes the logo auto-invert:
   dark text on light bg, near-white on dark bg (strip-dark, etc.) */
.nav-logo {
  display: none; /* shown only on mobile via @media override */
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 0.88;
  color: var(--text);
  text-decoration: none;
}
/* Explicitly keep nav-logo hidden at all non-mobile widths */
@media (min-width: 641px) {
  .nav-logo { display: none !important; }
}

.gallery-logo {
  position: fixed;
  bottom: 2rem;
  left: var(--gutter);
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 0.9;
  color: white;
  mix-blend-mode: difference;
  text-decoration: none;
  z-index: 10;
}

/* ── Portfolio Filter Bar ───────────────────────────────────── */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 2.5rem var(--gutter) 0;
}
.filter-btn {
  font-size: 0.78rem;
  padding: 0.35rem 0;
  background: transparent;
  border: none;
  border-bottom: 1px solid transparent;
  cursor: pointer;
  color: var(--muted);
  font-family: var(--font-body);
  transition: color 0.2s, border-color 0.2s;
}
.filter-btn:hover,
.filter-btn.active {
  color: var(--text);
  border-bottom-color: var(--text);
}

.filter-bar { gap: 1.5rem; }

.filter-desc {
  max-width: 520px;
  font-size: 0.85rem;
  line-height: 1.75;
  color: var(--muted);
  padding: 1.5rem var(--gutter);
  min-height: 5rem;
}

/* ── Dark Strip (HIRE ME) ───────────────────────────────────── */
.strip-dark {
  background: var(--dark-bg);
  color: var(--dark-text);
  padding: clamp(3rem, 6vw, 5rem) var(--gutter);
}
.strip-dark .strip-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin-bottom: 0.75rem;
}
.strip-dark .strip-sub {
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  color: rgba(245, 245, 243, 0.55);
  margin-bottom: 1.75rem;
}

.btn-outline-light {
  display: inline-block;
  color: var(--dark-text);
  font-size: 0.78rem;
  padding-bottom: 2px;
  border-bottom: 1px solid rgba(245, 245, 243, 0.5);
  transition: border-color 0.2s, color 0.2s;
}
.btn-outline-light:hover { border-color: var(--dark-text); }
.btn-outline-light:hover {
  background: var(--dark-text);
  color: var(--dark-bg);
}

/* ── Short Bio ──────────────────────────────────────────────── */
.short-bio { max-width: 600px; }
.short-bio p {
  font-size: 0.97rem;
  line-height: 1.8;
  color: var(--muted);
}

.see-all {
  margin-top: 2rem;
  padding-bottom: 0.5rem;
}
.see-all a {
  font-size: 0.78rem;
  border-bottom: 1px solid var(--accent);
  padding-bottom: 2px;
  transition: opacity 0.2s;
}
.see-all a:hover { opacity: 0.5; }

/* ── About Page ─────────────────────────────────────────────── */
.about-hero {
  position: relative;
  margin-top: var(--nav-h);
  padding: 3rem 0 0 var(--gutter);
}
.about-hero .about-hero-img {
  width: 38%;
  max-width: 480px;
  margin-left: auto;
  margin-right: 0;
  overflow: hidden;
}
.about-hero img,
.about-hero .img-ph { width: 100%; height: auto; display: block; }
.about-hero-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  color: var(--text);
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-align: left;
  padding: 1.5rem var(--gutter) 0;
}

.about-body {
  display: grid;
  grid-template-columns: 50% 1fr;
  padding: clamp(4rem, 7vw, 7rem) var(--gutter);
  gap: 4rem;
}
.about-text p {
  font-size: 0.92rem;
  line-height: 1.8;
  margin-bottom: 1.5rem;
  color: var(--text);
}
.about-text p:last-child { margin-bottom: 0; }
.about-text h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.25rem;
  letter-spacing: -0.01em;
  margin: 2.5rem 0 0.75rem;
  line-height: 1.1;
}

.about-second-img { margin: 0 var(--gutter) clamp(4rem, 7vw, 7rem); overflow: hidden; }
.about-second-img img,
.about-second-img .img-ph { width: 100%; }

/* ── Press Page ─────────────────────────────────────────────── */
.press-list { padding: 3rem var(--gutter); }
.press-entry {
  border-top: 1px solid var(--border);
  padding: 3rem 0;
  display: grid;
  grid-template-columns: minmax(180px, 28%) 1fr;
  gap: 3rem;
  align-items: start;
}

.press-meta {}
.press-meta .press-year {
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  display: block;
  margin-bottom: 0.5rem;
}
.press-meta .press-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(0.95rem, 1.4vw, 1.2rem);
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.press-body { font-size: 0.87rem; line-height: 1.75; color: var(--muted); }
.press-body p { margin-bottom: 1rem; }
.press-body a {
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.press-image { margin-top: 1.5rem; overflow: hidden; }
.press-image img,
.press-image .img-ph { width: 100%; }

/* ── Contact Page ───────────────────────────────────────────── */
.contact-header {
  padding: calc(var(--nav-h) + 4rem) var(--gutter) 0;
}
.contact-header h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
}
.contact-avail {
  margin-top: 1rem;
  font-size: 0.85rem;
  color: var(--muted);
  line-height: 1.75;
}

.contact-form-wrap { padding: 4rem var(--gutter) 0; max-width: 640px; }

.form-field { margin-bottom: 2.25rem; }
.form-field label {
  display: block;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.6rem;
}
.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border);
  padding: 0.45rem 0;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--text);
  outline: none;
  transition: border-color 0.2s;
  border-radius: 0;
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus { border-color: var(--text); }
.form-field select {
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236B6B6B' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.25rem center;
  padding-right: 1.5rem;
}
.form-field textarea { resize: vertical; min-height: 120px; }

.btn-submit {
  background: transparent;
  color: var(--text);
  border: none;
  border-bottom: 1px solid var(--text);
  padding: 0.4rem 0;
  font-family: var(--font-body);
  font-size: 0.85rem;
  cursor: pointer;
  transition: opacity 0.2s;
}
.btn-submit:hover { opacity: 0.55; }

.form-success {
  display: none;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  line-height: 1.1;
  padding: 3rem 0;
  letter-spacing: -0.02em;
}

.contact-links {
  padding: 2.5rem var(--gutter) 4rem;
  display: flex;
  gap: 1.5rem;
  font-size: 0.78rem;
  color: var(--muted);
}
.contact-links a {
  border-bottom: 1px solid var(--muted);
  padding-bottom: 1px;
  transition: color 0.2s, border-color 0.2s;
}
.contact-links a:hover { color: var(--text); border-color: var(--text); }

/* ── Footer ─────────────────────────────────────────────────── */
/* Brand mark bottom-left is the site's visual signature. */
.site-footer {
  background: var(--bg);
  padding: 3rem var(--gutter) 2rem;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  gap: 2rem;
}
.brand-mark {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.5rem, 2.5vw, 2.15rem);
  letter-spacing: -0.025em;
  line-height: 0.92;
  color: var(--text);
}
.brand-mark a { color: inherit; }
.footer-meta {
  display: flex;
  gap: 1.25rem;
  align-items: center;
  font-size: 0.7rem;
  color: var(--muted);
}
.footer-meta a {
  color: var(--muted);
  padding-bottom: 1px;
  border-bottom: 1px solid transparent;
  transition: color 0.2s, border-color 0.2s;
}
.footer-meta a:hover { color: var(--text); border-bottom-color: var(--text); }

/* Theme toggle — small dot in the footer meta */
.theme-toggle {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin-left: 0.5rem;
}
.theme-toggle:focus-visible { outline: 1px solid var(--text); outline-offset: 2px; }
.theme-dot {
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--text);
  transition: background 0.25s ease, transform 0.2s ease;
}
.theme-toggle:hover .theme-dot { transform: scale(1.2); }
[data-theme="forest"] .theme-dot { background: var(--accent); }

/* ── Utilities ──────────────────────────────────────────────── */
.text-link {
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: opacity 0.2s;
}
.text-link:hover { opacity: 0.55; }

/* ── Portfolio prev/next nav ─────────────────────────────────── */
.genre-nav {
  display: flex;
  align-items: center;
  gap: 2rem;
  padding: 0.5rem var(--gutter) 3rem calc(var(--gutter) + 212px);
  font-size: 0.78rem;
  flex-wrap: wrap;
}
.genre-nav a {
  border-bottom: 1px solid var(--border);
  padding-bottom: 2px;
  transition: border-color 0.2s;
  white-space: nowrap;
}
.genre-nav a:hover { border-bottom-color: var(--text); }
.genre-nav-next { margin-left: auto; }
.genre-nav-all { color: var(--muted); }

/* ── Page follow-up nav ──────────────────────────────────────── */
.followup-nav {
  display: flex;
  gap: 2rem;
  padding: 2rem var(--gutter) 3rem calc(var(--gutter) + 212px);
  flex-wrap: wrap;
  border-top: 1px solid var(--border);
  margin-top: 2rem;
}
.followup-nav a {
  font-size: 0.78rem;
  border-bottom: 1px solid var(--text);
  padding-bottom: 2px;
  transition: opacity 0.2s;
}
.followup-nav a:hover { opacity: 0.55; }

/* ── Logo column — reserve left margin for fixed logo ────────── */
/* The fixed logo sits at left: var(--gutter). All text content
   starts 6rem further right so the logo zone is always clear.
   Full-bleed and image-only sections are exempt.                 */
.page-header,
.about-hero-name,
.about-body,
.genre-intro,
.genre-back,
.press-list,
.section,
.section-sm,
.home-identity,
.strip-dark,
.contact-form-wrap { padding-left: calc(var(--gutter) + 212px); }
.page-rule         { margin-left:  calc(var(--gutter) + 212px); }

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .pull-quote { gap: 2.5rem; }
  .press-entry { grid-template-columns: 1fr; gap: 1.5rem; }
  .about-body { grid-template-columns: 1fr; }

  /* Scenes: reduce breathing room on tablet */
  .scene { min-height: 35vh; padding: 3rem var(--gutter); }
  .scene--pair > *:first-child { width: 46%; }
  .scene--pair > *:last-child  { width: 50%; }
  .scene--pair-r > *:first-child { width: 55%; }
  .scene--pair-r > *:last-child  { width: 40%; }
  /* Solo scenes: keep centered, wider max-width on tablet */
  .scene--left > *,
  .scene--right > *,
  .scene--offset > * { max-width: 72%; transform: none; }
  .scene--feature > * { width: 85%; }

  /* Split scenes: shrink offset on tablet */
  .scene--split-right,
  .scene--split-left { min-height: 0; padding: 0; }
  .scene--split-left .s-img { width: calc(50vw - 120px - 18px); margin-left: 120px; }
  .gallery-logo { left: var(--gutter); }
}

@media (max-width: 640px) {
  .nav-links { display: none; }
  .nav-home { display: none; }
  .nav-hamburger { display: flex; margin-left: auto; order: 0; } /* right side, logo takes left */
  .vert-text { display: none; }
  .pull-quote { grid-template-columns: 1fr; }
  .site-footer { flex-direction: column; align-items: flex-start; gap: 1.5rem; }
  .contact-links { flex-direction: column; gap: 1rem; }

  /* Home hero: stack vertically, natural aspect */
  .home-hero {
    flex-direction: column;
    min-height: 0;
    gap: 1rem;
    padding: 5rem var(--gutter) 0;
  }
  .hero-photo--left,
  .hero-photo--right {
    flex: 0 0 auto;
    width: 100%;
    align-self: stretch;
    margin: 0;
  }
  .hero-photo img,
  .hero-photo .img-ph { max-height: 70vh; }

  /* Scenes: simple stacked mobile layout — everything full width, centered,
     no staggers, no offsets. Override the higher-specificity desktop rules. */
  .scene,
  .scene--pair,
  .scene--pair-r,
  .scene--feature,
  .scene--left,
  .scene--right,
  .scene--offset {
    flex-direction: column;
    min-height: auto;
    padding: 2rem var(--gutter);
    gap: 1.25rem;
    align-items: center;
    justify-content: flex-start;
  }

  /* All scene children — same width, centered, no per-child stagger or offset */
  .scene > *,
  .scene--pair > *:first-child,
  .scene--pair > *:last-child,
  .scene--pair-r > *:first-child,
  .scene--pair-r > *:last-child,
  .scene--left > *,
  .scene--right > *,
  .scene--offset > *,
  .scene--feature > * {
    width: 90%;
    max-width: none;
    margin: 0;
    transform: none;
  }

  /* Split scenes on mobile: collapse to single centered photo, no padding */
  .scene--split-right,
  .scene--split-left {
    flex-direction: column;
    padding: 0;
    align-items: center;
    justify-content: flex-start;
  }
  .scene--split-right .s-img,
  .scene--split-left .s-img { width: 100%; max-width: none; margin: 0; }

  /* Portfolio scenes: flex column with 12px gap between photos */
  .portfolio-scenes {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  /* Logo: use in-nav element on mobile; hide the fixed one */
  .nav-logo { display: flex; align-items: center; }
  .gallery-logo { display: none; }

  /* About hero photo: full-right flush on mobile */
  .about-hero .about-hero-img {
    width: 65%;
    max-width: none;
    margin-left: auto;
    margin-right: 0;
  }

  /* Logo visible on mobile now — revert left padding to normal gutter */
  .page-header,
  .about-hero-name,
  .about-body,
  .genre-intro,
  .genre-back,
  .press-list,
  .section,
  .section-sm,
  .home-identity,
  .strip-dark,
  .contact-form-wrap { padding-left: var(--gutter); }
  .page-rule         { margin-left:  var(--gutter); }
}