/* Theme tokens: keep the typography consistent; let the photographs set the mood. */
:root {
  --header-h: 68px; --footer-h: 44px; --gap: 26px; --ease: cubic-bezier(.22,.61,.36,1); --theme-speed: .65s;
  --bg: #292b2a; --surface: #343735; --chrome: #3c403d; --fg: #eeece7; --muted: #b9b9b1;
  --accent: #a5ad98; --border: #484c49; --shadow: rgba(0,0,0,.5); --radius: 0;
  --font-body: Arial, Helvetica, sans-serif;
  --font-heading: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
}
body[data-theme="landscapes"] { --bg: #292724; --surface: #34322e; --chrome: #3b3934; --fg: #eee9df; --muted: #b7aa98; --accent: #a5ad91; --border: #48443d; --shadow: rgba(0,0,0,.6); }
body[data-theme="portraiture"] { --bg: #393532; --surface: #45403b; --chrome: #4b4540; --fg: #eee7df; --muted: #c0b4a8; --accent: #c4a88d; --border: #5b5149; --shadow: rgba(0,0,0,.55); }
body[data-theme="architecture"] { --bg: #292b2b; --surface: #343737; --chrome: #414544; --fg: #efefeb; --muted: #bbc0bd; --accent: #efefeb; --border: #494e4c; --shadow: rgba(0,0,0,.7); }
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scrollbar-gutter: stable; }
html:has(body[data-theme="home"]) { scrollbar-color: transparent transparent; }
html:has(body[data-theme="home"])::-webkit-scrollbar-thumb,
html:has(body[data-theme="home"])::-webkit-scrollbar-track { background: transparent; }
body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--font-body); line-height: 1.65; -webkit-font-smoothing: antialiased; transition: background-color var(--theme-speed), color var(--theme-speed); }
body.no-scroll { overflow: hidden; }
a { color: inherit; }
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }
h1, h2 { font-family: var(--font-heading); font-weight: 400; letter-spacing: -.045em; line-height: 1.06; margin: 0; }
em { font-weight: 400; }
.eyebrow { font-size: .66rem; letter-spacing: .19em; text-transform: uppercase; color: var(--muted); margin: 0 0 1.2rem; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; }
.skip-link { position: fixed; left: 1rem; top: -100px; padding: .6rem 1rem; background: var(--fg); color: var(--bg); z-index: 200; }
.skip-link:focus { top: 1rem; }
main { min-height: calc(100svh - var(--header-h) - var(--footer-h)); padding-bottom: var(--footer-h); }
body:not([data-theme="home"]) main { min-height: calc(100svh - var(--header-h)); padding-bottom: 0; }
/* Sticky navigation */
.site-header { position: sticky; top: 0; z-index: 50; min-height: var(--header-h); display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 0 clamp(1.25rem,4.5vw,5rem); background: var(--chrome); backdrop-filter: blur(16px); border-bottom: 1px solid var(--border); transition: background-color var(--theme-speed), border-color var(--theme-speed); }
body[data-theme="home"] .site-header {
  position: absolute;
  inset: 0 0 auto;
  width: 100%;
  justify-content: flex-end;
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-color: transparent;
}
body[data-theme="home"] .logo { display: none; }
body[data-theme="home"] .nav a { color: rgba(255,255,255,.78); }
body[data-theme="home"] .nav a:hover,
body[data-theme="home"] .nav a.is-active { color: #fff; }
.logo { text-decoration: none; font-family: var(--font-heading); font-size: 1.45rem; letter-spacing: -.04em; line-height: 1.1; }
.logo span { display: block; font: .55rem var(--font-body); text-transform: uppercase; letter-spacing: .24em; color: var(--muted); margin-top: .55rem; }
.nav { display: flex; align-items: center; gap: clamp(1.2rem,2.5vw,2.7rem); }
.nav a { position: relative; padding: .6rem 0; text-decoration: none; color: var(--muted); font-size: .76rem; transition: color .25s; }
.nav a:hover, .nav a.is-active { color: var(--fg); }
.nav a::after { content: ''; position: absolute; bottom: .15rem; left: 0; width: 100%; height: 1px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease); }
.nav a:hover::after, .nav a.is-active::after { transform: scaleX(1); }
/* Routes: one restrained opacity fade; views never overlap or move. */
.view { display: none; opacity: 0; transition: opacity .18s ease; }
.view.is-active { display: block; position: relative; z-index: 1; opacity: 1; }
.view.is-active.is-fading-out,
.view.is-active.is-fading-in { opacity: 0; pointer-events: none; }
.page { max-width: 1680px; margin: auto; padding: clamp(3rem,7vw,7rem) clamp(1.25rem,4.5vw,5rem) 6rem; }
.view[data-view="landscapes"] .page,
.view[data-view="portraiture"] .page,
.view[data-view="architecture"] .page,
.view[data-view="about"] .page { padding-top: clamp(2rem,4vw,4rem); }
.page-head { position: relative; padding-bottom: 2rem; margin-bottom: 2.6rem; border-bottom: 1px solid var(--border); }
.page-head h1 { font-size: clamp(3.2rem,7vw,7rem); }
.lede { max-width: 32rem; color: var(--muted); font-size: .9rem; margin: 1.5rem 0 0; }
.collection-count { position: absolute; right: 0; bottom: 2rem; font-size: .65rem; color: var(--muted); letter-spacing: .1em; text-transform: uppercase; }
/* Full-height image canvas, with slow crossfades and quiet slide controls. */
.hero { position: relative; min-height: 570px; height: calc(100svh - var(--footer-h)); overflow: hidden; display: grid; place-items: center; text-align: center; color: #fff; background: #353d32; }
.hero__slides, .slide { position: absolute; inset: 0; }
.slide { opacity: 0; transition: opacity 2.6s ease-in-out; }
.slide.is-active { opacity: 1; }
.slide img { width: 100%; height: 100%; object-fit: cover; transform: none; transition: none; pointer-events: none; user-select: none; }
.hero__shade { position: absolute; inset: 0; background: linear-gradient(180deg,rgba(8,18,15,.1),rgba(8,18,15,.35) 50%,rgba(8,18,15,.62)); pointer-events: none; }
.hero__content { position: relative; padding: 1rem 1.25rem; }
.hero__title { font-size: clamp(4.5rem,9vw,10rem); letter-spacing: -.045em; line-height: .95; text-shadow: 0 2px 40px rgba(0,0,0,.12); }
.hero__sub { font-family: var(--font-heading); font-size: clamp(1rem,2vw,1.4rem); letter-spacing: .12em; margin: 1rem 0 0; }
.hero__bottom { position: absolute; bottom: clamp(3rem,7vh,4.5rem); left: 50%; transform: translateX(-50%) scale(.9); display: flex; align-items: center; justify-content: center; gap: 1.4rem; }
.hero__note { font-size: .58rem; letter-spacing: .13em; text-transform: uppercase; }
.hero__controls { display: flex; flex-direction: column; align-items: center; gap: .1rem; }
.hero__dots { display: flex; align-items: center; justify-content: center; gap: .85rem; }
.hero__dot { padding: 0; width: clamp(38px,5vw,64px); height: 40px; background: transparent; border: 0; cursor: pointer; }
.hero__dot::after { content: ''; display: block; height: 3px; background: #ffffff60; transition: background .3s; }
.hero__dot[aria-pressed="true"]::after { background: white; }
.hero__pause { color: white; background: transparent; border: 0; font-size: .68rem; letter-spacing: .08em; padding: .2rem .6rem; min-width: 0; cursor: pointer; }
.hero :focus-visible { outline-color: white; }
/* Masonry keeps every photograph's original proportions. */
.gallery { column-count: 3; column-gap: var(--gap); }
.tile { position: relative; display: block; width: 100%; margin: 0 0 var(--gap); padding: 0; border: 0; background: var(--surface); cursor: zoom-in; break-inside: avoid; transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.tile img { width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity .7s; pointer-events: none; user-select: none; -webkit-touch-callout: none; }
.tile.is-loaded img { opacity: 1; }
.tile__caption { position: absolute; left: 0; right: 0; bottom: 0; padding: 2.5rem 1.25rem 1rem; background: linear-gradient(transparent,#0009); color: white; font-size: .7rem; text-align: left; letter-spacing: .05em; opacity: 0; transition: opacity .3s; z-index: 3; pointer-events: none; }
@media (hover:hover) { .tile:hover { transform: scale(1.05); box-shadow: 0 20px 48px -15px var(--shadow); z-index: 5; } .tile:hover .tile__caption { opacity: 1; } }
.tile:focus-visible .tile__caption { opacity: 1; }
.tile.is-error { display: grid; place-items: center; min-height: 180px; }
.tile.is-error .tile__caption { opacity: 1; }
.gallery-empty { color: var(--muted); }
.shield { position: absolute; inset: 0; z-index: 2; background: transparent; }
/* Dedicated About page: edit the biography and gear in index.html. */
.about-layout { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(3rem,9vw,9rem); padding-top: 1rem; }
.portrait-placeholder { width: min(100%, 440px); aspect-ratio: 4 / 5; display: grid; place-items: center; border: 1px solid var(--border); background: var(--surface); color: var(--muted); }
.portrait-placeholder span { border: 1px solid currentColor; padding: .65rem 1rem; font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; }
.text-link { font-size: .75rem; text-decoration: none; border-bottom: 1px solid var(--border); padding-bottom: .5rem; }
.text-link span { margin-left: 1.5rem; }
.about-bio > p { margin: 0 0 1.5rem; color: var(--muted); font-size: 1rem; line-height: 1.9; max-width: 36rem; }
.about-details { display: grid; grid-template-columns: 1fr; gap: 1rem; border-top: 1px solid var(--border); padding-top: 1.5rem; margin-top: 3rem; }
.plain-list { list-style: none; margin: 0; padding: 0; font-size: .8rem; }
.plain-list a { text-decoration-thickness: 1px; text-underline-offset: 5px; }
/* Home-only footer: a small floating note to balance the top-right navigation. */
.site-footer { display: none; position: fixed; z-index: 50; inset: auto 0 0; height: var(--footer-h); align-items: center; padding: 0 clamp(1.25rem,4.5vw,5rem); pointer-events: none; }
body[data-theme="home"] .site-footer { display: flex; background: transparent; border: 0; -webkit-backdrop-filter: none; backdrop-filter: none; }
body.no-scroll .site-footer { display: none; }
.footer__inner { width: 100%; max-width: 1520px; margin: auto; }
.footer__legal { margin: 0; font-size: .65rem; color: rgba(255,255,255,.82); text-shadow: 0 1px 8px rgba(0,0,0,.55); }
.footer__legal span { margin-left: .6rem; }
.footer__legal span::before { content: '·'; margin-right: .6rem; }

/* Photo viewer */
.lightbox {
  position: fixed; inset: 0;
  z-index: 100;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  background: #0a0a0a;
  opacity: 0;
  transition: opacity .35s var(--ease);
}
.lightbox[hidden] { display: none; }
.lightbox.is-open { opacity: 1; }

/* ---- photo area ---- */
.lightbox__stage {
  position: relative;
  min-height: 0;
  background: #0a0a0a;
}
.lightbox__frame {
  position: absolute;
  inset: clamp(1rem, 4vw, 3.5rem) clamp(1rem, 4vw, 3.5rem) 4rem;
  overflow: hidden;
  touch-action: none;
}
.lightbox__frame.is-zoomed { cursor: grab; }
.lightbox__frame.is-zoomed:active { cursor: grabbing; }
.lightbox__frame.is-panning img { transition: opacity .5s var(--ease); }
.lightbox__frame img {
  width: 100%; height: 100%;
  object-fit: contain;            /* full photo, never cropped */
  opacity: 0;
  transform: scale(.985);
  transition: opacity .5s var(--ease), transform .6s var(--ease);
  pointer-events: none;
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none;
}
.lightbox__frame img.is-ready { opacity: 1; transform: none; }

/* Tiny spinner shown while the full-res image downloads */
.lb-loader {
  position: absolute; top: 50%; left: 50%;
  width: 26px; height: 26px; margin: -13px 0 0 -13px;
  border: 2px solid rgba(255,255,255,.2);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin .8s linear infinite;
  opacity: 0;
  transition: opacity .3s;
  pointer-events: none;
}
.lightbox__stage.is-loading .lb-loader { opacity: 1; }
@keyframes spin { to { transform: rotate(360deg); } }

.lb-btn {
  position: absolute; top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 48px; height: 64px;
  border: 0; background: transparent;
  color: rgba(255,255,255,.7);
  font-size: 2.6rem; line-height: 1;
  cursor: pointer;
  transition: color .25s, transform .25s var(--ease);
}
.lb-btn:hover { color: #fff; }
.lb-prev { left: .25rem; }
.lb-next { right: .25rem; }
.lb-prev:hover { transform: translateY(-50%) translateX(-3px); }
.lb-next:hover { transform: translateY(-50%) translateX(3px); }

.zoom-controls {
  position: absolute;
  z-index: 6;
  left: 50%;
  bottom: .5rem;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: .65rem;
  width: min(340px, calc(100% - 5.5rem));
  min-height: 42px;
  padding: .45rem .8rem;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 999px;
  color: rgba(255,255,255,.9);
  background: rgba(35,37,36,.54);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  backdrop-filter: blur(18px) saturate(150%);
  box-shadow: 0 6px 20px rgba(0,0,0,.2), inset 0 1px rgba(255,255,255,.12);
}
.zoom-controls label, .zoom-controls output {
  min-width: 2.5rem;
  font-size: .65rem;
  letter-spacing: .04em;
}
.zoom-controls label { text-align: left; }
.zoom-controls output { text-align: right; font-variant-numeric: tabular-nums; }
.zoom-controls input {
  flex: 1;
  min-width: 0;
  height: 24px;
  margin: 0;
  appearance: none;
  background: transparent;
  cursor: pointer;
  touch-action: pan-y;
  --zoom-progress: 0%;
}
.zoom-controls input::-webkit-slider-runnable-track {
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(to right, rgba(255,255,255,.9) var(--zoom-progress), rgba(255,255,255,.32) var(--zoom-progress));
}
.zoom-controls input::-moz-range-track { height: 3px; border-radius: 999px; background: rgba(255,255,255,.32); }
.zoom-controls input::-moz-range-progress { height: 3px; border-radius: 999px; background: rgba(255,255,255,.9); }
.zoom-controls input::-webkit-slider-thumb {
  appearance: none;
  width: 13px;
  height: 13px;
  margin-top: -5px;
  border: 1px solid rgba(255,255,255,.85);
  border-radius: 50%;
  background: rgba(255,255,255,.96);
  box-shadow: 0 1px 5px rgba(0,0,0,.35);
}
.zoom-controls input::-moz-range-thumb { width: 13px; height: 13px; border: 1px solid rgba(255,255,255,.85); border-radius: 50%; background: rgba(255,255,255,.96); box-shadow: 0 1px 5px rgba(0,0,0,.35); }
.zoom-controls input:disabled { opacity: .4; cursor: default; }

/* ---- metadata panel (uses the active theme colours) ---- */
.lightbox__panel {
  position: relative;
  overflow-y: auto;
  padding: 4.5rem 2rem calc(2rem + var(--footer-h));
  background: var(--surface);
  color: var(--fg);
  border-left: 1px solid var(--border);
}
.lightbox__panel h2 { font-size: 1.8rem; }
.lb-desc { color: var(--muted); font-size: .95rem; margin: 1rem 0 0; }

.lb-close {
  position: absolute; top: 1rem; right: 1.2rem;
  width: 40px; height: 40px;
  border: 0; background: transparent;
  font-size: 2rem; line-height: 1;
  cursor: pointer;
  color: var(--muted);
  transition: color .25s, transform .3s var(--ease);
}
.lb-close:hover { color: var(--fg); transform: rotate(90deg); }

.meta { margin: 2rem 0 0; border-top: 1px solid var(--border); }
.meta div {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: .85rem 0;
  border-bottom: 1px solid var(--border);
}
.meta dt {
  font-size: .7rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--muted);
  padding-top: .15rem;
}
.meta dd { margin: 0; text-align: right; font-size: .95rem; }

.lb-count { margin: 1.5rem 0 0; font-size: .75rem; letter-spacing: .2em; color: var(--muted); }



/* Lightbox and mobile layouts */
.lb-error { position: absolute; inset: 35% 1rem auto; text-align: center; color: #ddd; font-size: .85rem; }
@media (min-width:1100px) { .page-head .lede { position: absolute; right: 0; bottom: 5rem; max-width: 22rem; } }
@media (max-width:900px) {
  .gallery { column-count: 2; }
  .lightbox { grid-template-columns: 1fr; grid-template-rows: minmax(0,1fr) auto; }
  .lightbox__panel { max-height: 42svh; padding: 1.3rem 1.4rem calc(1.6rem + var(--footer-h)); border-left: 0; border-top: 1px solid var(--border); }
  .lightbox__panel h2 { font-size: 1.5rem; padding-right: 2.5rem; }
  .lb-close { top: .6rem; right: .6rem; }
  .meta { margin-top: 1.2rem; }
  .meta div { padding: .55rem 0; }
  .about-layout { gap: 3rem; }
}
@media (max-width:640px) {
  :root { --header-h: 76px; --footer-h: 46px; --gap: 16px; }
  .site-header { flex-direction: column; justify-content: center; gap: .25rem; padding: .45rem 1rem; }
  .logo { font-size: 1.1rem; }
  .logo span { display: inline; margin: 0 0 0 .4em; font-size: .48rem; }
  .nav { gap: clamp(.65rem,3.4vw,1.3rem); }
  .nav a { font-size: .65rem; min-height: 28px; }
  .hero { min-height: 530px; }
  .hero__title { font-size: clamp(3.6rem,14vw,5.5rem); }
  .hero__bottom { bottom: 3rem; }
  .page { padding-top: 3rem; padding-bottom: 4rem; }
  .page-head { padding-bottom: 3.5rem; }
  .collection-count { left: 0; right: auto; bottom: 1rem; }
  .gallery { column-count: 1; }
  .about-layout { grid-template-columns: 1fr; gap: 3rem; }
  .about-details { grid-template-columns: 1fr; gap: 1.5rem; }
  .footer__legal { font-size: .55rem; white-space: nowrap; }
  .lb-btn { width: 40px; font-size: 2.2rem; }
  .lightbox__frame { inset: 1rem 1rem 3.5rem; }
  .zoom-controls { bottom: .3rem; width: min(270px, calc(100% - 4rem)); }
}
@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  html { scroll-behavior: auto; }
  .slide img { transform: none; }
}