:root {
  --ink: #000;
  --paper: #fff;
  --muted: #555;
  --pad: clamp(20px, 5vw, 48px);
  --gap: clamp(10px, 1.2vw, 16px);
  --serif: "Sorts Mill Goudy", "Goudy Old Style", Garamond, Georgia, serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--paper); color: var(--ink);
  font-family: var(--serif); font-size: 17px; line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
body.no-scroll { overflow: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* ---------- Header ---------- */
.site-header {
  position: relative; z-index: 30;
  display: flex; justify-content: space-between; align-items: center;
  padding: 24px var(--pad) 20px;
}
.site-name {
  position: relative; z-index: 2;
  font-size: 22px; text-decoration: none; line-height: 1;
}
.menu-toggle {
  position: relative; z-index: 2;
  width: 26px; height: 20px; background: none; border: 0; cursor: pointer; color: var(--ink);
}
.menu-toggle span {
  position: absolute; left: 0; width: 100%; height: 1.5px; background: currentColor;
  transition: transform .3s ease, top .3s ease;
}
.menu-toggle span:nth-child(1) { top: 5px; }
.menu-toggle span:nth-child(2) { top: 14px; }
.menu-open .menu-toggle span:nth-child(1) { top: 9px; transform: rotate(45deg); }
.menu-open .menu-toggle span:nth-child(2) { top: 9px; transform: rotate(-45deg); }

/* Phones: full-screen menu */
.menu {
  position: fixed; inset: 0; z-index: 1; background: var(--paper);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility .35s;
}
.menu-open .menu { opacity: 1; visibility: visible; }
.menu ul { list-style: none; text-align: center; }
.menu a { display: inline-block; text-decoration: none; font-size: 36px; line-height: 1.4; }
.menu a:hover, .menu a[aria-current="page"] { opacity: .5; }

/* Tablet + desktop: links in a row next to the name, no hamburger */
@media (min-width: 768px) {
  .site-header { justify-content: space-between; align-items: baseline; padding: 36px var(--pad) 28px; }
  .site-name { font-size: 24px; }
  .menu-toggle { display: none; }
  .menu { position: static; opacity: 1; visibility: visible; background: none; display: block; transition: none; }
  .menu ul { display: flex; gap: 26px; }
  .menu a { font-size: 17px; line-height: 1; }
  .menu a:hover { opacity: .5; }
  .menu a[aria-current="page"] { opacity: 1; text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
}

/* ---------- Films grid (home) ---------- */
main { padding: 0 var(--pad) calc(var(--pad) * 1.5); }
.films { display: grid; grid-template-columns: 1fr; gap: var(--gap); }
@media (min-width: 600px)  { .films { grid-template-columns: 1fr 1fr; } }

.film {
  position: relative; display: block; width: 100%; padding: 0; border: 0;
  background: #e8e8e8; cursor: pointer; overflow: hidden;
  aspect-ratio: 4 / 5; font: inherit; color: #fff;
}
/* Still shape
   phone   (<600px)                 4:5 vertical, one per row
   tablet  (600px+, or any touch)   4:3, two per row
   desktop (1024px+ with a mouse)   16:9, two per row */
@media (min-width: 600px) { .film { aspect-ratio: 4 / 3; } }
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) { .film { aspect-ratio: 16 / 9; } }
.film img {
  width: 100%; height: 100%; object-fit: cover;
  transition: filter .45s ease, transform .6s ease;
}
.film-title {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  padding: 1em; text-align: center;
  font-size: clamp(22px, 2.2vw, 28px); line-height: 1.15;
  background: rgba(0,0,0,.25); opacity: 0; transition: opacity .45s ease;
  text-shadow: 0 1px 12px rgba(0,0,0,.4);
}
.film:hover img, .film:focus-visible img, .film.is-peek img { filter: blur(12px); transform: scale(1.08); }
.film:hover .film-title, .film:focus-visible .film-title, .film.is-peek .film-title { opacity: 1; }

/* ---------- Photographs ---------- */
.photos { display: grid; grid-template-columns: 1fr; gap: var(--gap); }
/* Photos: phone one per row, tablet two, desktop three */
@media (min-width: 600px) { .photos { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) { .photos { grid-template-columns: repeat(3, 1fr); } }
.photos img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; background: #e8e8e8; }

/* ---------- About ---------- */
.about {
  max-width: 1100px; margin: 0 auto;
  display: grid; gap: clamp(28px, 5vw, 64px); align-items: start;
}
@media (min-width: 820px) { .about { grid-template-columns: 1fr 1.1fr; } }
.about img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; background: #e8e8e8; }
.about-text { max-width: 36em; }
.about-text h1 { font-weight: 400; font-size: clamp(28px, 3.5vw, 38px); line-height: 1.1; margin-bottom: .6em; }
.about-text p { margin-bottom: 1.1em; font-size: 17px; line-height: 1.65; }
.contact { margin-top: 2em; }
.contact a { text-underline-offset: 3px; }

/* ---------- Video lightbox ---------- */
.lightbox {
  position: fixed; inset: 0; z-index: 50; background: rgba(0,0,0,.94);
  display: flex; align-items: center; justify-content: center; padding: var(--pad);
  opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility .3s;
}
.lightbox.open { opacity: 1; visibility: visible; }
.lightbox-inner { width: min(1200px, 100%); }
.lightbox-frame { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; }
.lightbox-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.lightbox-caption { color: #fff; margin-top: 14px; font-size: 20px; }
.lightbox-close {
  position: absolute; top: 20px; right: var(--pad);
  width: 40px; height: 40px; background: none; border: 0; cursor: pointer; color: #fff;
}
.lightbox-close::before, .lightbox-close::after {
  content: ""; position: absolute; left: 6px; top: 19px; width: 28px; height: 2px; background: currentColor;
}
.lightbox-close::before { transform: rotate(45deg); }
.lightbox-close::after { transform: rotate(-45deg); }

footer { padding: 0 var(--pad) 32px; font-size: 14px; color: var(--muted); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
}