/* ─────────────────────────────────────────────────────────────
   Muna Haykır — Mona Lisa Photography
   One stylesheet for every page. Ported from the three duplicated
   <style> blocks in collection1/{index,koleksiyon1,hakkinda}.html.

   Where the three copies disagreed (nav padding, footer padding,
   body layout, placeholder type sizes) the rule is scoped — by
   body class for page-level differences, by ancestor for
   component-level ones — so nothing was dropped.
   ───────────────────────────────────────────────────────────── */

/* ─── FONTS — self-hosted, SIL Open Font License ───
   Cormorant Garamond and Karla, static instances cut from the
   upstream variable fonts and subset to latin + latin-ext (Turkish
   diacritics included). Licences in /fonts/OFL-*.txt. */

@font-face {
  font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 300;
  font-display: swap; src: url('/fonts/cormorant-garamond-300.woff2') format('woff2');
}
@font-face {
  font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 400;
  font-display: swap; src: url('/fonts/cormorant-garamond-400.woff2') format('woff2');
}
/* No roman 500: the only weight-500 rules are .about__label (Karla) and
   .lightbox__story-name (Cormorant *italic*), so the face would never be
   selected and the file would ship for nothing. */
@font-face {
  font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 300;
  font-display: swap; src: url('/fonts/cormorant-garamond-300-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 400;
  font-display: swap; src: url('/fonts/cormorant-garamond-400-italic.woff2') format('woff2');
}
/* italic 500 is genuinely used by .lightbox__story-name */
@font-face {
  font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 500;
  font-display: swap; src: url('/fonts/cormorant-garamond-500-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Karla'; font-style: normal; font-weight: 300;
  font-display: swap; src: url('/fonts/karla-300.woff2') format('woff2');
}
@font-face {
  font-family: 'Karla'; font-style: normal; font-weight: 400;
  font-display: swap; src: url('/fonts/karla-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Karla'; font-style: normal; font-weight: 500;
  font-display: swap; src: url('/fonts/karla-500.woff2') format('woff2');
}

:root {
  --color-bg: #f5f5f5;
  --color-text: #1a1a1a;
  --color-text-light: #4a4a4a;   /* was #6b6b6b */
  /* was #aaaaaa = 2.13:1 on #f5f5f5. The brief's #767676 is the AA value
     for pure white (4.54:1) and only reaches 4.17:1 on this page's
     #f5f5f5, so it is darkened by seven units to clear 4.5:1 for real. */
  --color-text-lighter: #6f6f6f; /* 4.61:1 on #f5f5f5 */
  --color-border: #e8e8e8;
  --color-placeholder-bg: #faf9f7;  /* the awaiting-photo card */
  --logo-text: #1a1a1a;          /* was rgba(255,255,255,0.88) = 1.05:1 */
  --story-bg: #0b0b0b;
  /* The original rgba(255,255,255,0.42) was 4.06:1 -- below AA, at 0.82rem,
     italic, in a 260px measure. Task 6 answered with #d4d4d4 (13.28:1), which
     over-corrected: the story competes with the photograph. Ruled 2026-08-11:
     keep the size and the italic, mute the colour. #8e8e8e is 6.01:1 on
     #0b0b0b -- recessive, and still comfortably past the 4.5:1 floor. */
  --story-text: #8e8e8e;         /* 6.01:1 on --story-bg */

  --font-heading: 'Cormorant Garamond', Georgia, serif;
  --font-body: 'Karla', Helvetica, Arial, sans-serif;
  --max-width: 1200px;
  --max-width-narrow: 1000px;    /* the about page's own measure */
  --spacing-section: 120px;

  /* Spacing rhythm — replaces the uniform 48px gap */
  --gap-tight: 24px;    /* within a row */
  --gap-row: 64px;      /* between grid rows */
  --gap-feature: 96px;  /* around a full-bleed featured image */
  --gap-quote: 120px;   /* around a pull quote */
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
  font-family: var(--font-body); font-weight: 300;
  color: var(--color-text); background: var(--color-bg);
  line-height: 1.7; -webkit-font-smoothing: antialiased;
}
/* the collection page's marquees run wider than the viewport */
.page-collection { overflow-x: hidden; }
/* short pages keep the footer at the bottom */
.page-about, .page-404 { min-height: 100vh; display: flex; flex-direction: column; }
/* `height: auto` is load-bearing, not tidiness. Every <img> now carries
   width/height attributes so the page cannot reflow as the photographs
   arrive, and those attributes map to *presentational hints* for the width
   and height properties. A hint loses to any author rule, but the rules
   below only ever set `width`, so without this the hinted `height: 2368px`
   would win and every `aspect-ratio` in this file would be ignored. Rules
   that genuinely want a height (.hero__img, .scroll-item img) are class
   selectors and still beat it. */
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }

/* ─── NAV ─── */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  padding: 24px 40px;
  display: flex; justify-content: space-between; align-items: center;
  background: rgba(245,245,245,0.92);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease;
  box-shadow: 0 1px 0 var(--color-border);
}
.page-collection .nav { padding: 20px 40px; }
/* the gallery page hides the nav over the hero and reveals it on scroll */
.page-index .nav { transform: translateY(-100%); }
.page-index .nav.visible { transform: translateY(0); }
/* On the gallery the wordmark is the page's h1 (it has no other heading).
   The reset zeroes margin and padding but not font-size, and a UA 2em h1
   would make that one nav bar 20px taller than every other page's. */
.nav h1 { font-size: inherit; line-height: inherit; font-weight: inherit; }
.nav__logo {
  font-family: var(--font-heading);
  font-size: 1.25rem; font-weight: 400;
  letter-spacing: 0.08em; text-transform: uppercase;
  cursor: pointer;
  color: var(--logo-text);
}
.nav__links { display: flex; gap: 32px; list-style: none; }
.nav__links a {
  font-size: 0.78rem; font-weight: 400;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--color-text-light);
  transition: color 0.3s ease;
  position: relative;
}
.nav__links a::after {
  content: ''; position: absolute; bottom: -4px; left: 0;
  width: 0; height: 1px; background: var(--color-text);
  transition: width 0.3s ease;
}
.nav__links a:hover { color: var(--color-text); }
.nav__links a:hover::after { width: 100%; }
.nav__links a.active { color: var(--color-text); }
.nav__links a.active::after { width: 100%; }

/* ─── HERO ─── */
.hero {
  position: relative; width: 100%; height: 100vh;
  overflow: hidden; background: #111;
}
.hero__img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 38%;
  opacity: 0;
  animation: heroFade 3s ease 0.5s forwards;
}
.hero__scroll {
  position: absolute; bottom: 40px; right: 48px;
  font-size: 0.62rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: rgba(255,255,255,0.25);
  opacity: 0; animation: fadeUp 1s ease 2.8s forwards;
  writing-mode: vertical-rl;
  display: flex; align-items: center; gap: 12px;
}
.hero__scroll::before {
  content: ''; display: block;
  width: 1px; height: 40px;
  background: rgba(255,255,255,0.18);
  animation: scrollLine 2.6s ease-in-out infinite;
}

/* The hero photograph is captioned like every other one. It sits on the
   gallery's measure, not the hero's full bleed, so the name lines up with the
   labels further down the page; the label's own 10px top margin is the gap. */
.hero-caption {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 8px 40px 0;
}

@keyframes heroFade { from { opacity: 0; transform: scale(1.03); } to { opacity: 1; transform: scale(1); } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes scrollLine { 0%, 100% { opacity: 0.18; } 50% { opacity: 0.65; } }

/* ─── GALLERY ─── */
.gallery-section {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 80px 40px var(--spacing-section);
}
.gallery { display: grid; gap: var(--gap-row); }

/* A featured image and a pull quote each want more air than a plain
   row. The grid already supplies --gap-row between siblings, so the
   extra is the difference: 64 + 32 + ... = 96, 64 + 56 = 120. */
.gallery-featured {
  width: 100%;
  margin: calc(var(--gap-feature) - var(--gap-row)) 0;
}
.gallery-featured img {
  width: 100%; aspect-ratio: 16 / 10;
  object-fit: cover; cursor: pointer;
  transition: opacity 0.35s ease;
}
.gallery-featured img:hover { opacity: 0.9; }

/* Featured portrait — centered, controlled width */
.gallery-featured--narrow {
  max-width: 52%;
  margin-inline: auto;
}
.gallery-featured--narrow img {
  aspect-ratio: auto;
}

.gallery-pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-tight); }
.gallery-three { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--gap-tight); }
.gallery-four { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: var(--gap-tight); align-items: start; }

/* Weighted pair — landscape left 2fr, portrait right 1fr */
.gallery-pair--weighted { grid-template-columns: 2fr 1fr; align-items: start; }

.gallery-item { overflow: hidden; }
.gallery-item img {
  width: 100%; aspect-ratio: 4 / 5;
  object-fit: cover; cursor: pointer;
  transition: opacity 0.35s ease;
}
.gallery-item img:hover { opacity: 0.9; }
.gallery-item--landscape img { aspect-ratio: 3 / 2; }
.gallery-item--square img { aspect-ratio: 1 / 1; }
.gallery-item--focus-top img { object-position: center 25%; }
/* No crop — natural ratio */
.gallery-item--natural img { aspect-ratio: auto; }
/* Gökhöyükte Leylekler: the nest sits in the right third of the frame, so a
   vertical crop centred on the middle would cut the storks in half. */
.gallery-item--focus-right img { object-position: 100% 50%; }
/* Kuş Bakışı Bisikletçi: the cyclist rides through the far left of a 2350x1585
   frame (x = 165-400px, about 7-17% of the width). A square window keeps 1585
   of those 2350 pixels, so centred it starts at x=382 and the cyclist is
   outside it entirely. Pinned to the left edge he sits 10-25% in. */
.gallery-item--focus-left img { object-position: 0% 50%; }

/* ─── PHOTO TRIGGER — the image is a button, for keyboard reach ─── */
.photo-trigger {
  display: block; width: 100%;
  background: none; border: none; padding: 0;
  font: inherit; color: inherit; cursor: pointer;
}
/* The hero's photograph is a button like every other one, and the button is
   now what stands between the 100vh frame and `.hero__img { height: 100% }`.
   Without this the image falls back to its natural height and the frame
   shows a band of its own background below it. */
.hero .photo-trigger { height: 100%; }

/* ─── PLACEHOLDER CARD ─── */
.gallery-placeholder { overflow: hidden; }
.placeholder-inner {
  width: 100%; aspect-ratio: 4 / 5;
  background: var(--color-placeholder-bg);
  border: 1px dashed #d8d4ce;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 8px;
}
.gallery-featured .placeholder-inner { aspect-ratio: 16 / 10; }
.gallery-item--square .placeholder-inner { aspect-ratio: 1 / 1; }
.gallery-item--landscape .placeholder-inner { aspect-ratio: 3 / 2; }
.placeholder-tag {
  font-size: 0.56rem; letter-spacing: 0.24em;
  text-transform: uppercase; color: var(--color-text-lighter);
}
.placeholder-title {
  font-family: var(--font-heading);
  font-style: italic; font-size: 0.95rem; color: var(--color-text-lighter);
  text-align: center; padding: 0 20px; line-height: 1.4;
}
/* ─── PHOTO LABEL ─── */
.photo-label {
  margin-top: 10px;
  font-family: var(--font-heading);
  font-style: italic; font-weight: 300;
  font-size: 0.88rem; color: var(--color-text-light);
  letter-spacing: 0.02em; line-height: 1.4;
}
.photo-label__sep { margin: 0 5px; color: var(--color-border); }
.photo-label__year { color: var(--color-text-lighter); }
.photo-label__loc { color: var(--color-text-lighter); }

/* ─── INLINE QUOTE (between photos) ─── */
.gallery-quote {
  padding: calc(var(--gap-quote) - var(--gap-row)) 0;
  text-align: center;
  max-width: 680px;
  margin: 0 auto;
}
.gallery-quote__text {
  font-family: var(--font-heading);
  font-style: italic; font-weight: 300;
  font-size: clamp(1.15rem, 2.2vw, 1.55rem);
  color: var(--color-text);
  line-height: 1.85;
  letter-spacing: 0.01em;
}
.gallery-quote__source {
  margin-top: 14px;
  font-size: 0.6rem; font-weight: 400;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--color-text-lighter);
}

/* ─── SONRAKİ KOLEKSİYON TEASER ─── */
.teaser {
  padding: 0 40px 40px;
  text-align: center;
  max-width: var(--max-width);
  margin: 0 auto;
}
.teaser__line {
  width: 48px; height: 1px;
  background: var(--color-border);
  margin: 0 auto 24px;
}
.teaser__text {
  font-family: var(--font-heading);
  font-style: italic; font-weight: 300;
  font-size: 0.95rem;
  color: var(--color-text-lighter);
  letter-spacing: 0.03em;
}

/* ─── PAGE HEADER — compact, to fit the streams in the viewport ─── */
.page-header {
  padding: 68px 40px 10px;
  text-align: center;
}
.page-header__title {
  font-family: var(--font-heading);
  font-size: clamp(1.2rem, 2.5vw, 1.6rem);
  font-weight: 300; letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text);
  margin-bottom: 3px;
}
.page-header__author {
  font-family: var(--font-heading);
  font-style: italic; font-weight: 300;
  font-size: 0.92rem;
  color: var(--color-text-light);
  margin-bottom: 4px;
}
.page-header__meta {
  font-size: 0.62rem; font-weight: 400;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--color-text-lighter);
}
.page-header__meta span {
  margin: 0 6px;
  color: var(--color-border);
}

/* ─── SCROLL STREAMS — sized to all fit in the viewport ─── */
.streams {
  padding: 6px 0 0;
  /* calc: 100vh minus nav(~56px) minus header(~110px) minus footer(~44px) */
  height: calc(100vh - 156px);
  display: flex; flex-direction: column;
  gap: 5px;
}

.scroll-strip {
  position: relative;
  width: 100%;
  overflow: hidden;
  flex: 1;
}
.scroll-strip--mid { flex: 1.6; }

.scroll-track {
  display: flex;
  gap: 12px;
  width: max-content;
  height: 100%;
}
.scroll-track:hover { animation-play-state: paused !important; }

.scroll-strip--top .scroll-track    { animation: scrollRight 160s linear infinite reverse; }
.scroll-strip--mid .scroll-track    { animation: scrollRight 120s linear infinite; }
.scroll-strip--bottom .scroll-track { animation: scrollRight 145s linear infinite reverse; }

.scroll-item {
  flex-shrink: 0;
  overflow: hidden;
  position: relative;
  cursor: pointer;
  height: 100%;
}
.scroll-item img {
  height: 100%;
  width: auto;
  object-fit: cover;
}

/* ─── HOVER: black tint + story preview ─── */
.scroll-item__overlay {
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, 0.72);
  display: flex; flex-direction: column;
  justify-content: flex-end;
  padding: 14px 14px 10px;
  opacity: 0;
  transition: opacity 0.35s ease;
}
.scroll-item:hover .scroll-item__overlay { opacity: 1; }

.scroll-item__name {
  font-family: var(--font-heading);
  font-style: italic; font-weight: 400;
  font-size: 0.82rem;
  color: rgba(255,255,255,0.92);
  line-height: 1.3;
  margin-bottom: 3px;
}
.scroll-item__meta {
  font-size: 0.52rem; letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
  margin-bottom: 6px;
}
.scroll-item__preview {
  font-family: var(--font-heading);
  font-style: italic; font-weight: 300;
  font-size: 0.68rem;
  color: rgba(255,255,255,0.48);
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.scroll-strip--top .scroll-item__preview,
.scroll-strip--bottom .scroll-item__preview {
  -webkit-line-clamp: 2;
  font-size: 0.62rem;
}
.scroll-strip--top .scroll-item__name,
.scroll-strip--bottom .scroll-item__name {
  font-size: 0.74rem;
}

/* Stream placeholders carry their own frame, so the gallery card
   styling above is undone rather than doubled. */
.scroll-item--placeholder {
  display: flex; align-items: center; justify-content: center;
  background: var(--color-placeholder-bg);
  border: 1px dashed #d8d4ce;
  min-width: 160px;
  cursor: default;
}
.scroll-strip--mid .scroll-item--placeholder { min-width: 220px; }
.scroll-item--placeholder .placeholder-inner {
  width: auto; aspect-ratio: auto;
  background: none; border: 0;
  display: block;
  text-align: center; padding: 10px;
}
.scroll-item--placeholder .placeholder-tag {
  font-size: 0.48rem; letter-spacing: 0.22em;
  margin-bottom: 3px;
}
.scroll-item--placeholder .placeholder-title {
  font-size: 0.74rem; padding: 0;
}
.scroll-strip--top .placeholder-title,
.scroll-strip--bottom .placeholder-title {
  font-size: 0.66rem;
}

@keyframes scrollRight {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ─── ABOUT ─── */
.about {
  max-width: var(--max-width-narrow);
  margin: 0 auto;
  padding: 160px 40px 80px;
  flex: 1;
}
.about__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
}

.about__portrait,
.about__portrait-placeholder {
  opacity: 0; transform: translateY(20px);
  animation: fadeIn 1s ease 0.3s forwards;
}
.about__portrait-placeholder {
  width: 100%;
  aspect-ratio: 3 / 4;
  background: var(--color-placeholder-bg);
  border: 1px dashed #d8d4ce;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 8px;
}
.about__portrait-tag {
  font-size: 0.56rem; letter-spacing: 0.24em;
  text-transform: uppercase; color: var(--color-text-lighter);
}
.about__portrait-title {
  font-family: var(--font-heading);
  font-style: italic; font-size: 1rem;
  color: var(--color-text-lighter); text-align: center;
  padding: 0 20px; line-height: 1.4;
}
.about__portrait-caption {
  margin-top: 12px;
  font-family: var(--font-heading);
  font-style: italic; font-size: 0.78rem;
  color: var(--color-text-lighter);
  line-height: 1.5;
}

.about__content {
  padding-top: 8px;
  opacity: 0; transform: translateY(20px);
  animation: fadeIn 1s ease 0.5s forwards;
}
.about__label {
  font-size: 0.65rem; font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--color-text-lighter);
  margin-bottom: 24px; display: block;
}
.about__name {
  font-family: var(--font-heading);
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-weight: 300; line-height: 1.15;
  margin-bottom: 14px;
}

/* Instagram link */
.about__instagram {
  display: inline-block;
  font-size: 0.72rem; font-weight: 400;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--color-text-lighter);
  transition: color 0.3s ease;
  position: relative;
  width: fit-content;
  margin-bottom: 40px;
}
.about__instagram::after {
  content: ''; position: absolute; bottom: -3px; left: 0;
  width: 0; height: 1px; background: var(--color-text);
  transition: width 0.3s ease;
}
.about__instagram:hover { color: var(--color-text); }
.about__instagram:hover::after { width: 100%; }

/* ─── QUOTES ─── */
.about__quotes { list-style: none; }
.about__quote {
  font-family: var(--font-heading);
  font-style: italic; font-weight: 300;
  font-size: 1.02rem;
  color: var(--color-text-light);
  line-height: 2;
  padding: 20px 0;
  border-bottom: 1px solid var(--color-border);
}
.about__quote:first-child { border-top: 1px solid var(--color-border); }
.about__quote-source {
  display: block;
  font-family: var(--font-body);
  font-style: normal; font-weight: 300;
  font-size: 0.65rem;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--color-text-lighter);
  margin-top: 8px;
}

/* ─── FOOTER ─── */
.footer-section {
  border-top: 1px solid var(--color-border);
  padding: 72px 40px;
  text-align: center;
}
.page-collection .footer-section { padding: 14px 40px; }
.page-about .footer-section,
.page-404 .footer-section { padding: 48px 40px; }
.footer__contact {
  font-family: var(--font-heading);
  font-style: italic; font-weight: 300;
  font-size: 0.92rem;
  color: var(--color-text-light);
  margin-bottom: 16px;
}
.footer__copy {
  font-family: var(--font-heading);
  font-style: italic; font-size: 0.88rem;
  color: var(--color-text-lighter);
  letter-spacing: 0.03em;
}
.page-collection .footer__copy,
.page-about .footer__copy,
.page-404 .footer__copy { font-size: 0.82rem; letter-spacing: normal; }
.footer__rights {
  margin-top: 10px;
  font-size: 0.7rem; color: var(--color-text-lighter);
  line-height: 1.7;
}

/* ─── FADE IN — staggered ─── */
.fade-in {
  opacity: 0; transform: translateY(22px);
  transition: opacity 0.9s ease, transform 0.9s ease;
}
.fade-in.visible { opacity: 1; transform: translateY(0); }

/* ─── LIGHTBOX — fixed-position story panel ─── */
.lightbox {
  position: fixed; inset: 0; z-index: 1000;
  background: var(--story-bg);
  opacity: 0; visibility: hidden;
  /* visibility flips at the END of the fade out, and at the START of the fade
     in (below). Transitioning it symmetrically -- as this did -- left the
     panel computed `hidden` for the first frame after it opened, and a hidden
     element cannot take focus: the dialog and its close button were both
     unfocusable in exactly the frames a keyboard user is in. */
  transition: opacity 0.45s ease, visibility 0s linear 0.45s;
}
.lightbox.active {
  opacity: 1; visibility: visible;
  transition: opacity 0.45s ease, visibility 0s;
}

.lightbox__img-wrap {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  right: 400px;                 /* tracks .lightbox__story width */
  display: flex; align-items: center; justify-content: center;
  padding: 32px 24px;
}
.lightbox__img-wrap img {
  max-width: 100%; max-height: 88vh;
  object-fit: contain;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease;
}
.lightbox__img-wrap img.slide-out-left  { transform: translateX(-60px); opacity: 0; }
.lightbox__img-wrap img.slide-out-right { transform: translateX(60px); opacity: 0; }
.lightbox__img-wrap img.slide-in-left   { transform: translateX(60px); opacity: 0; transition: none; }
.lightbox__img-wrap img.slide-in-right  { transform: translateX(-60px); opacity: 0; transition: none; }
.lightbox__img-wrap img.slide-settle    { transform: translateX(0); opacity: 1; transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease; }

.lightbox__close {
  position: absolute; top: 28px; right: 36px;
  font-size: 1.4rem; color: rgba(255,255,255,0.28);
  cursor: pointer; transition: color 0.3s ease;
  background: none; border: none; font-weight: 300;
  z-index: 10; line-height: 1;
}
.lightbox__close:hover { color: rgba(255,255,255,0.8); }

.lightbox__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: none; border: none;
  color: rgba(255,255,255,0.18); font-size: 1.8rem;
  cursor: pointer; padding: 24px 20px;
  transition: color 0.3s ease; z-index: 10;
}
.lightbox__nav:hover { color: rgba(255,255,255,0.7); }
.lightbox__nav--prev { left: 12px; }
.lightbox__nav--next { right: 412px; }   /* story width + 12px */

/* Story panel — FIXED position, always the same spot.
   The text is bottom-aligned to the photograph: `--lb-story-bottom` is the
   distance from the bottom of the panel to the bottom edge of the displayed
   image, measured by app.js after every paint and on resize, because only
   the runtime knows how tall a `max-height: 88vh` contained image ended up.
   Falling back to 0 puts the text on the floor of the panel, which is where
   it belongs if the script never runs. */
.lightbox__story {
  position: absolute;
  right: 0; top: 0; bottom: 0;
  width: 400px;                 /* was 340px — 260px of measure was ~35 chars */
  padding: 0 44px var(--lb-story-bottom, 0px);   /* was 40px */
  display: flex; flex-direction: column;
  justify-content: flex-end;
}

.lightbox__story-name {
  font-family: var(--font-heading);
  font-style: italic; font-weight: 500;
  font-size: 1.15rem; color: rgba(255,255,255,0.92);
  line-height: 1.3; margin-bottom: 5px;
  flex-shrink: 0;
}
.lightbox__story-meta {
  font-size: 0.64rem; font-weight: 400;
  color: rgba(255,255,255,0.85);
  letter-spacing: 0.14em; text-transform: uppercase;
  margin-bottom: 14px;
  flex-shrink: 0;
}
.lightbox__story-divider {
  width: 18px; height: 1px;
  background: rgba(255,255,255,0.15);
  margin-bottom: 14px;
  flex-shrink: 0;
}
.lightbox__story-text-wrap {
  /* shrink to the text, scroll only when the panel cannot hold it -- with
     `flex: 1` the wrap always filled the panel and the bottom alignment
     above would have had nothing to push against */
  flex: 0 1 auto; overflow-y: auto; min-height: 0;
  max-height: none;             /* was 42vh — the longest story letterboxed */
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.1) transparent;
}
.lightbox__story-text-wrap::-webkit-scrollbar { width: 3px; }
.lightbox__story-text-wrap::-webkit-scrollbar-track { background: transparent; }
.lightbox__story-text-wrap::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 2px; }
.lightbox__story-text {
  font-family: var(--font-heading);
  font-style: italic;              /* Muna's, and the site's, voice */
  font-weight: 300;
  font-size: 1rem;                 /* was 0.82rem — the readability fix stands */
  line-height: 1.75;               /* was 1.95 */
  color: var(--story-text);
}

/* ─── RESPONSIVE ─── */
@media (max-width: 1100px) {
  .lightbox__img-wrap { right: 0; bottom: 45%; padding: 24px; }
  .lightbox__img-wrap img { max-height: 48vh; }
  .lightbox__story {
    width: 100%; top: auto; bottom: 0;
    height: 45%;
    padding: 20px 32px 28px;
    text-align: center;
    justify-content: flex-start;
    overflow-y: auto;
  }
  .lightbox__story-divider { margin: 0 auto 12px; }
  .lightbox__nav--next { right: 12px; }
  .gallery-featured--narrow { max-width: 70%; }
}
@media (max-width: 900px) {
  :root { --spacing-section: 72px; }
  .nav { padding: 16px 24px; }
  .page-collection .nav { padding: 14px 24px; }
  .nav__links { gap: 18px; }
  .gallery-section { padding-left: 24px; padding-right: 24px; }
  .hero-caption { padding-left: 24px; padding-right: 24px; }
  .gallery-three { grid-template-columns: 1fr 1fr; }
  .gallery-four { grid-template-columns: 1fr 1fr; }
  .gallery-pair--weighted { grid-template-columns: 1.5fr 1fr; }
  .hero__scroll { right: 28px; }
  .gallery-featured--narrow { max-width: 80%; }
  .page-header { padding: 60px 24px 8px; }
  .streams { height: calc(100vh - 130px); }
  .about { padding: 120px 24px 64px; }
  .about__inner { grid-template-columns: 1fr; gap: 40px; }
  .about__portrait-placeholder { aspect-ratio: 3 / 2; }
}
@media (max-width: 600px) {
  .nav__logo { font-size: 1rem; }
  .nav__links a { font-size: 0.68rem; }
  .nav__links { gap: 14px; }
  .gallery-pair { grid-template-columns: 1fr; }
  .gallery-pair--weighted { grid-template-columns: 1fr; }
  .gallery-three { grid-template-columns: 1fr; }
  .gallery-four { grid-template-columns: 1fr 1fr; }
  .lightbox__nav { display: none; }
  .footer-section { padding: 52px 24px; }
  .page-collection .footer-section { padding: 28px 24px; }
  .page-about .footer-section,
  .page-404 .footer-section { padding: 36px 24px; }
  .gallery-section { padding-top: 48px; }
  .gallery-featured--narrow { max-width: 100%; }
  .scroll-item__preview { display: none; }
  .page-header { padding: 56px 16px 6px; }
  .streams { height: calc(100vh - 110px); }
}

/* A 3:2 master forced into 100vh crops the subject out on a tall
   phone viewport; give it a shorter frame instead. */
@media (max-aspect-ratio: 3/4) {
  .hero { height: 72vh; }
}

/* ─── REDUCED MOTION ───
   Matters most for the three infinite marquees on the collection
   page, which otherwise never stop moving. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .scroll-track { animation: none !important; }
}