/* ============================================================
   Kasia Sitkowska — portfolio
   ============================================================ */

/* ---------- Reset / base ---------- */
* { box-sizing: border-box; }

/* ---------- Page transition ---------- */
@keyframes page-fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

@keyframes page-fade-out {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(-6px); }
}

main {
  animation: page-fade-in 0.35s ease both;
}

/* When a cross-document view transition is active the browser plays
   ::view-transition-new(root) for the incoming page, so suppress the
   CSS-only main animation to avoid double-firing.
   The .has-view-transition class is added by the pagereveal handler in JS
   only when the transition is actually running — this keeps the main
   fade-in intact for first-load and for browsers without cross-doc VT. */
.has-view-transition main { animation: none; }

/* JS-driven leave transition: animate main (content) only, not the header. */
body.is-leaving main {
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.25s ease, transform 0.25s ease;
  pointer-events: none;
}

/* Cross-document View Transitions API — covers Back/Forward buttons
   automatically. Browsers that don't support @view-transition will
   ignore this block and fall back to the JS-driven is-leaving approach. */
@view-transition {
  navigation: auto;
}

::view-transition-old(root) {
  animation: page-fade-out 0.26s ease both;
}

::view-transition-new(root) {
  animation: page-fade-in 0.35s ease both;
}

/* Keep the header static during cross-document view transitions. */
::view-transition-old(site-header),
::view-transition-new(site-header) {
  animation: none;
  mix-blend-mode: normal;
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none;
  }
}

html, body {
  margin: 0;
  padding: 0;
  overflow-x: clip;
}

body {
  font-family: 'Figtree', system-ui, sans-serif;
  color: #1b1916;
  background: #fff;
  min-height: 100vh;
}

/* Form/button controls don't inherit font-family by default — make the
   whole page use Figtree consistently. */
button, input, textarea, select {
  font-family: inherit;
}

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

/* Screen-reader-only content (kept out of view but announced). */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Skip-to-content link — visible only when focused. */
.skip-link {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 200;
  transform: translateY(-150%);
  background: #1b1916;
  color: #f6f2ea;
  padding: 10px 16px;
  border-radius: 6px;
  font-size: 13px;
  text-decoration: none;
  transition: transform 0.15s;
}

.skip-link:focus { transform: translateY(0); }

/* Visible keyboard focus (WCAG 2.4.7). */
:focus-visible {
  outline: 2px solid #c96442;
  outline-offset: 3px;
  border-radius: 2px;
}
.lightbox :focus-visible { outline-color: #f6f2ea; }

/* Respect users who prefer reduced motion (WCAG 2.3.3). */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

::-webkit-scrollbar { height: 9px; width: 9px; }
::-webkit-scrollbar-thumb { background: rgba(27, 25, 22, 0.16); border-radius: 5px; }
::-webkit-scrollbar-track { background: transparent; }
[data-noscrollbar]::-webkit-scrollbar { display: none; }

/* ---------- Header / nav ---------- */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 40px;
  background: #fff;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.10);
  view-transition-name: site-header;
}

.brand {
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #121212;
  padding: 0;
  white-space: nowrap;
  text-decoration: none;
}

.nav-main {
  display: flex;
  align-items: center;
  gap: 26px;
}

.nav-link {
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  /* Darkened from #6e675c to pass WCAG 1.4.3 AA (≥4.5:1) at 12px small text */
  color: #4a443c;
  padding: 4px 0;
  text-decoration: none;
  transition: color 0.15s;
  position: relative;
}

.nav-link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.22s ease;
}

.nav-link:hover::after,
.nav-link--active::after {
  transform: scaleX(1);
}

.nav-link:hover { color: #1b1916; }
.nav-link--active { color: #1b1916; font-weight: 600; }
.nav-contact { color: #c00; }
.nav-contact:hover { color: #c00; }

.hamburger {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  color: #121212;
  font-size: 24px;
  line-height: 1;
  padding: 2px 0;
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  height: 90vh;
  min-height: 600px;
  width: 100%;
  overflow: hidden;
  background: #23211d;
  border-bottom: 8px solid #222;
}

.hero-img {
  position: absolute;
  top: -10%;
  left: 0;
  width: 100%;
  height: 120%;
  object-fit: cover;
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  .hero-img {
    transform: none !important;
  }
}

.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(20, 18, 15, 0.12) 0%, rgba(20, 18, 15, 0) 34%, rgba(20, 18, 15, 0.42) 66%, rgba(20, 18, 15, 0.86) 100%);
}

.hero-caption {
  position: absolute;
  left: 40px;
  bottom: 48px;
  z-index: 3;
  pointer-events: none;
  max-width: 88%;
}

.hero-caption h1 {
  font-weight: 700;
  font-size: clamp(20px, 3vw, 38px);
  line-height: 1;
  color: #fff;
  margin: 0;
  letter-spacing: 2px;
  text-transform: uppercase;
  white-space: nowrap;
  text-shadow: 0 2px 28px rgba(0, 0, 0, 0.4);
}

.hero-sub {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.92);
  margin: 6px 0 0;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.45);
}

/* ---------- Statement ---------- */
.statement {
  max-width: 1080px;
  margin: 0 auto;
  padding: 40px 40px 44px;
  text-align: center;
}

.statement p {
  font-weight: 500;
  font-size: clamp(26px, 3.5vw, 48px);
  line-height: 1.3;
  color: #1b1916;
  margin: 0;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

/* ---------- Gallery strip ---------- */
.gallery-strip {
  position: relative;
  padding: 0 0 100px;
}

.strip-scroller {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 0 40px 36px;
  align-items: flex-end;
  /* Settle on a fully-visible photo wherever the user stops scrolling. */
  scroll-snap-type: x proximity;
  scroll-padding-left: 40px;
}

.strip-scroller::-webkit-scrollbar { display: none; }

.strip-scroller--autoplaying {
  /* Keep CSS snap from pulling the continuous animation toward each photo. */
  scroll-snap-type: none;
}

.strip-item {
  flex: 0 0 auto;
  position: relative;
  cursor: pointer;
  scroll-snap-align: start;
  width: auto;
}

.strip-item.portrait  { height: 72vh; }
.strip-item.landscape { height: 52vh; }

.strip-item-frame {
  position: absolute;
  right: 0;
  bottom: 0;
  width: calc(100% - 14px);
  height: calc(100% - 14px);
  border: 1px solid rgba(27, 25, 22, 0.3);
  pointer-events: none;
}

.strip-item img {
  position: absolute;
  left: 0;
  top: 0;
  width: calc(100% - 14px);
  height: calc(100% - 14px);
  object-fit: cover;
  transition: transform 0.38s ease;
}

.strip-item:hover img,
.strip-item:focus-visible img {
  transform: scale(1.04);
}

.strip-item-caption {
  position: absolute;
  left: 0;
  bottom: -26px;
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #6f6a5e;
  white-space: nowrap;
  transition: color 0.22s;
}

.strip-item:hover .strip-item-caption {
  color: #3a3730;
}

.strip-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid rgba(27, 25, 22, 0.16);
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  line-height: 1;
  color: #1b1916;
  z-index: 5;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.strip-arrow:hover {
  transform: translateY(-50%) scale(1.1);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.13);
  background: rgba(255, 255, 255, 1);
}

.strip-arrow-left { left: 8px; }
.strip-arrow-right { right: 8px; }

/* ---------- Full-bleed parallax ---------- */
.fullbleed {
  position: relative;
  width: 100%;
  height: 78vh;
  background: #23211d;
  overflow: hidden;
  cursor: pointer;
}

.fullbleed-img {
  position: absolute;
  left: 0;
  top: -30%;
  width: 100%;
  height: 160%;
  object-fit: cover;
  will-change: transform;
}

/* ---------- Tiles ---------- */
.tiles {
  max-width: 1440px;
  margin: 0 auto;
  padding: 44px 40px 70px;
}

.tiles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
  gap: 16px;
}

.tile {
  position: relative;
  height: 400px;
  overflow: hidden;
  background: #23211d;
  cursor: pointer;
  border: none;
  padding: 0;
  width: 100%;
  display: block;
  text-decoration: none;
  color: inherit;
}

.tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.42s ease;
}

.tile:hover img,
.tile:focus-visible img {
  transform: scale(1.06);
}

.tile-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(20, 18, 15, 0.22) 0%, rgba(20, 18, 15, 0) 34%, rgba(20, 18, 15, 0) 50%, rgba(20, 18, 15, 0.62) 100%);
  transition: background 0.35s ease;
}

.tile:hover .tile-overlay {
  background: linear-gradient(180deg, rgba(20, 18, 15, 0.32) 0%, rgba(20, 18, 15, 0) 34%, rgba(20, 18, 15, 0.08) 50%, rgba(20, 18, 15, 0.78) 100%);
}

.tile-title {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 20px;
  pointer-events: none;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.2;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #fff;
  text-align: left;
  transition: transform 0.32s ease;
}

.tile:hover .tile-title {
  transform: translateY(-4px);
}

/* ---------- About ---------- */
.about {
  background: #1b1916;
  color: #f6f2ea;
  padding: 76px 40px;
  position: relative;
  overflow: hidden;
}

.about-inner {
  max-width: 1080px;
  margin: 0 auto;
  display: flex;
  gap: 60px;
  align-items: center;
  flex-wrap: wrap;
}

.about-portrait {
  position: relative;
  flex: 0 0 248px;
  width: 248px;
  height: 248px;
}

.about-portrait-frame {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 232px;
  height: 232px;
  border: 1px solid rgba(246, 242, 234, 0.3);
}

.about-portrait img {
  position: absolute;
  left: 0;
  top: 0;
  width: 232px;
  height: 232px;
  object-fit: cover;
  transition: transform 0.38s ease;
}

.about-portrait:hover img {
  transform: scale(1.04);
}

.about-text { flex: 1 1 360px; min-width: 280px; }

.about-kicker {
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  /* Raised opacity for WCAG 1.4.3 AA contrast at 11px small text */
  color: rgba(246, 242, 234, 0.72);
  margin: 0 0 18px;
}

.about-body {
  font-weight: 400;
  font-size: clamp(15px, 1.5vw, 17px);
  line-height: 1.65;
  color: rgba(246, 242, 234, 0.9);
  margin: 0 0 30px;
  max-width: 560px;
}

.about-body .hl { color: #fff; font-weight: 600; text-decoration: none; }

/* Accent on the "gen" in nextgen. */
.gen { color: #A3FF47; }

.about-cta-label {
  font-size: 13.5px;
  letter-spacing: 0.02em;
  color: rgba(246, 242, 234, 0.65);
  margin: 0 0 12px;
}

.about-email {
  display: inline-block;
  font-size: clamp(17px, 2vw, 22px);
  font-weight: 500;
  color: #fff;
  text-decoration: none;
  border-bottom: 1px solid rgba(246, 242, 234, 0.35);
  padding-bottom: 4px;
  transition: border-color 0.15s;
}

.about-email:hover { border-color: #fff; }

/* ---------- Footer ---------- */
.site-footer {
  background: #1b1916;
  color: rgba(246, 242, 234, 0.5);
  padding: 26px 40px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  border-top: 1px solid rgba(246, 242, 234, 0.1);
  font-size: 12px;
  letter-spacing: 0.04em;
}

/* ---------- Category view ---------- */
#view-category { padding-top: 62px; min-height: 100vh; }

.cat-head {
  max-width: 1440px;
  margin: 0 auto;
  padding: 46px 40px 0;
}

.cat-back {
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #6e675c;
  padding: 0;
  transition: color 0.15s;
  text-decoration: none;
  display: inline-block;
}

.cat-back:hover { color: #1b1916; }

.cat-head h1 {
  font-family: 'Figtree', system-ui, sans-serif;
  font-weight: 600;
  font-size: 80px;
  line-height: 0.96;
  margin: 38px 0 0;
  letter-spacing: -0.015em;
  color: #1b1916;
}

.cat-gallery {
  max-width: 1440px;
  margin: 0 auto;
  padding: 50px 40px 10px;
}

.cat-row {
  display: flex;
  gap: 18px;
  margin-bottom: 40px;
}

.cat-cell {
  flex: 1 1 0;
  min-width: 0;
  cursor: pointer;
}

/* Cells in multi-photo rows stretch to the row height. Let the image frame
   fill that shared height, cropping rather than distorting shorter photos.
   Single-photo cells keep their own aspect-ratio rules. */
.cat-cell:not(.cat-cell--full) {
  display: flex;
  flex-direction: column;
}

.cat-cell-img {
  position: relative;
  padding-bottom: 14px;
  overflow: hidden;
}

.cat-cell-img--preview { isolation: isolate; }

.cat-cell-img--preview > .cat-cell-preview {
  position: absolute;
  inset: 0 auto auto 0;
  z-index: 0;
  width: calc(100% - 14px);
  height: 100%;
  object-fit: cover;
  filter: blur(10px);
  transform: scale(1.04);
  pointer-events: none;
  transition: opacity 0.24s ease;
}

.cat-cell-img--preview > .cat-cell-primary-img {
  opacity: 0;
  transition: opacity 0.24s ease, transform 0.42s ease;
}

.cat-cell-img--preview.cat-cell-img--loaded > .cat-cell-primary-img {
  opacity: 1;
}

.cat-cell-img--loaded > .cat-cell-preview { opacity: 0; }
.cat-cell-img--failed > .cat-cell-preview { filter: none; transform: none; }

/* Reserve vertical space for multi-cell thumbnails before the image loads,
   reducing CLS (Core Web Vitals). Full-width cells already use aspect-ratio
   on the img, so they are excluded via the :not selector. Portrait images
   will naturally overflow beyond min-height — that causes forward shift
   (which is less disruptive) rather than the zero→full-height jump. */
.cat-cell:not(.cat-cell--full) .cat-cell-img {
  min-height: 240px;
}

.cat-cell-img img {
  position: relative;
  z-index: 1;
  display: block;
  width: calc(100% - 14px);
  height: auto;
  transition: transform 0.42s ease;
}

.cat-cell:not(.cat-cell--full) .cat-cell-img {
  flex: 1 1 auto;
}

.cat-cell:not(.cat-cell--full) .cat-cell-img img {
  height: 100%;
  object-fit: cover;
}

.cat-cell:hover .cat-cell-img img,
.cat-cell:focus-visible .cat-cell-img img {
  transform: scale(1.05);
}

.cat-cell--full .cat-cell-img img {
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.cat-cell--full.cat-cell--natural .cat-cell-img img {
  aspect-ratio: auto;
  object-fit: contain;
}

.cat-cell--full.cat-cell--panorama .cat-cell-img img {
  aspect-ratio: 2.34 / 1;
}

.cat-cell-frame {
  position: absolute;
  left: 14px;
  top: 14px;
  right: 0;
  bottom: 0;
  border: 1px solid rgba(27, 25, 22, 0.3);
  pointer-events: none;
}

.cat-cell-caption {
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #6f6a5e;
  margin-top: 10px;
}

.about + .about,
#view-category .about { margin-top: 60px; }

/* ---------- Lightbox ---------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(22, 20, 17, 0.95);
  display: flex;
  flex-direction: column;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease;
}

.lightbox--open {
  opacity: 1;
  pointer-events: auto;
}

.lightbox[hidden] { display: none; }

.lightbox-top {
  display: flex;
  justify-content: flex-end;
  padding: 22px 28px;
}

.lightbox-close {
  background: none;
  border: none;
  cursor: pointer;
  color: rgba(246, 242, 234, 0.75);
  font-family: inherit;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 6px;
  transition: color 0.15s;
}

.lightbox-close:hover { color: #fff; }

.lightbox-stage {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 96px;
  min-height: 0;
}

/* Arrows are pinned to the viewport edges so they stay put whether the
   photo is portrait or landscape. */
.lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid rgba(246, 242, 234, 0.25);
  background: none;
  cursor: pointer;
  color: #f6f2ea;
  font-size: 22px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}

.lightbox-nav--prev { left: 24px; }
.lightbox-nav--next { right: 24px; }

.lightbox-nav:hover { background: rgba(246, 242, 234, 0.1); }

.lightbox-thumb {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: blur(18px);
  transform: scale(1.06);
  opacity: 1;
  transition: opacity 0.32s ease;
  pointer-events: none;
}

.lightbox-thumb--hidden {
  opacity: 0;
}

.lightbox-thumb[src=""] {
  display: none;
}

.lightbox-img {
  position: relative;
  z-index: 1;
  max-width: min(92vw, 1500px);
  max-height: 84vh;
  width: auto;
  height: auto;
  object-fit: contain;
  transition: opacity 0.32s ease;
}

.lightbox-img--loading {
  opacity: 0;
}

@keyframes lightbox-spin {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

.lightbox-spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 34px;
  height: 34px;
  border: 2px solid rgba(246, 242, 234, 0.18);
  border-top-color: rgba(246, 242, 234, 0.72);
  border-radius: 50%;
  animation: lightbox-spin 0.72s linear infinite;
  pointer-events: none;
}

.lightbox-spinner[hidden] { display: none; }

.lightbox-meta {
  padding: 20px 36px max(44px, calc(env(safe-area-inset-bottom) + 24px));
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  color: #f0ece4;
  max-width: 1180px;
  margin: 0 auto;
  width: 100%;
}

.lightbox-info { min-width: 0; }

/* Captions match the photo-caption style used elsewhere on the site
   (Figtree, uppercase, tracked) rather than an italic serif. */
.lightbox-place {
  font-family: 'Figtree', system-ui, sans-serif;
  font-weight: 500;
  font-size: 15px;
  line-height: 1.2;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #f0ece4;
  margin: 0;
}

.lightbox-location {
  font-family: 'Figtree', system-ui, sans-serif;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  /* Raised opacity for WCAG 1.4.3 AA contrast at 11px small text */
  color: rgba(240, 236, 228, 0.75);
  margin: 8px 0 0;
}

.lightbox-location[hidden] { display: none; }

.lightbox-counter {
  font-size: 12px;
  letter-spacing: 0.16em;
  /* Raised opacity for WCAG 1.4.3 AA contrast at 12px small text */
  color: rgba(240, 236, 228, 0.78);
  white-space: nowrap;
  margin: 0;
}

/* ---------- Microanimations ---------- */

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

/* Scroll-triggered reveal */
.reveal {
  opacity: 0;
  transform: translateY(24px);
}

.reveal.is-visible {
  animation: fadeSlideUp 0.55s ease-out forwards;
}

/* Hero caption entrance */
.hero-caption {
  opacity: 0;
}

.hero-caption.is-visible {
  animation: fadeSlideUp 0.65s ease-out 0.2s forwards;
}

/* ---------- Responsive ---------- */
@media (max-width: 768px) {
  .hamburger { display: block; }

  /* Header: name centered horizontally, hamburger pinned to the right edge. */
  .site-header { justify-content: flex-end; }
  .brand {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }

  /* Mobile menu: centered links, no dividers, even spacing. */
  .nav-main {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    background: #fff;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.10);
    padding: 24px 16px 28px;
  }

  .nav-main.nav-open { display: flex; }

  .nav-main > * {
    padding: 6px 0;
    border-top: none;
    text-align: center;
  }

  /* Consistent 16px left/right padding across the layout. */
  .site-header,
  .statement,
  .tiles,
  .cat-head,
  .cat-gallery {
    padding-left: 16px;
    padding-right: 16px;
  }

  .strip-scroller {
    padding-left: 16px;
    padding-right: 16px;
    scroll-padding-left: 16px;
  }

  /* Shorter hero so the gallery of actual work gets more room. */
  .hero { height: 60vh; min-height: 380px; }

  .hero-caption {
    left: 16px;
    right: 16px;
    max-width: none;
  }

  .cat-head h1 { font-size: 32px; }
  .cat-gallery { padding-top: 32px; }
  #view-category .about { margin-top: 24px; }

  .cat-gallery,
  .cat-row,
  .cat-cell {
    min-width: 0;
    max-width: 100%;
  }

  .cat-row {
    width: 100%;
    flex-direction: column;
  }

  .cat-cell { width: 100%; }

  /* Let multi-cell thumbnails define their own height on phones.
     The desktop CLS reserve is taller than landscape images at this width,
     which otherwise leaves empty space between the image and its frame. */
  .cat-cell:not(.cat-cell--full) .cat-cell-img {
    min-height: 0;
  }

  /* Opening category photo: as tall/prominent as the home-page tiles. */
  #view-category .cat-gallery .cat-row:first-child .cat-cell-img img {
    aspect-ratio: auto;
    height: 400px;
  }

  /* Gallery strip: portrait photos taller, landscape shorter — same
     visual hierarchy as desktop but scaled for narrow screens. */
  .strip-scroller { align-items: flex-end; }
  .strip-item.portrait  { height: 65vh; width: auto; }
  .strip-item.landscape { height: 45vh; width: auto; }
  .gallery-strip { padding-bottom: 64px; }
  /* Arrows overlap the photos on a narrow screen — swiping is natural here. */
  .strip-arrow { display: none; }

  /* Contact block + footer (every page): portrait centered, text
     left-aligned, roomier side padding, CTA on its own line with
     looser line spacing. */
  .about {
    padding: 56px 32px;
  }
  .about-inner {
    flex-direction: column;
    align-items: center; /* centers the portrait */
    gap: 32px;
  }
  .about-text { width: 100%; min-width: 0; }
  .cta-break { display: block; }
  .about-cta-label { line-height: 1.7; }
  .site-footer { padding-left: 32px; padding-right: 32px; }

  /* Lightbox: drop the desktop arrow gutter and shrink controls a touch. */
  .lightbox-top { padding: 18px 16px; }
  .lightbox-stage { padding: 0 8px; }
  .lightbox-nav { width: 42px; height: 42px; font-size: 20px; }
  .lightbox-nav--prev { left: 8px; }
  .lightbox-nav--next { right: 8px; }
  .lightbox-meta { padding: 16px 16px max(36px, calc(env(safe-area-inset-bottom) + 20px)); gap: 16px; }
}

/* ---------- Cookie banner ---------- */
#cookie-banner {
  position: fixed;
  bottom: 1.25rem;
  left: 1.25rem;
  z-index: 9999;
  background: #f5f3ef;
  color: #1b1916;
  font-size: 0.8rem;
  line-height: 1.45;
  max-width: 22rem;
  width: auto;
  border-radius: 0.625rem;
  padding: 0.75rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12), 0 8px 32px rgba(0,0,0,0.14), 0 0 0 1px rgba(0,0,0,0.06);
}

#cookie-banner[hidden] { display: none; }

#cookie-banner p {
  margin: 0;
}

.cookie-banner__actions {
  display: flex;
  gap: 0.4rem;
  flex-shrink: 0;
}

.cookie-banner__actions button {
  cursor: pointer;
  border: 1px solid rgba(27,25,22,0.35);
  border-radius: 0.4rem;
  padding: 0.35rem 0.75rem;
  font-size: 0.8rem;
  font-weight: 600;
  transition: opacity 0.15s;
  flex: 1;
}

.cookie-banner__actions button:hover { opacity: 0.82; }

#cookie-accept,
#cookie-reject {
  background: transparent;
  color: #1b1916;
}

@media (max-width: 480px) {
  #cookie-banner {
    left: 0.75rem;
    right: 0.75rem;
    max-width: none;
    width: auto;
  }
}