@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500&family=Newsreader:ital,opsz,wght@0,6..72,400;1,6..72,400&display=swap');

:root {
  --paper:#f1ede4;
  --ink:#181511;
  --faded:#776d61;
  --film:#e9e3d8;
  --gap:10px;
  --header-height:104px;
}

* { box-sizing:border-box; }
html { scroll-behavior:smooth; background:var(--film); }
body {
  margin:0;
  min-height:100vh;
  overflow-x:hidden;
  background:var(--paper);
  color:var(--ink);
  font-family:"DM Sans",Arial,sans-serif;
}
a { color:inherit; }

body::after {
  content:"";
  position:fixed;
  inset:-20%;
  z-index:100;
  pointer-events:none;
  background:url("film-grain.png") repeat;
  opacity:.026;
  mix-blend-mode:multiply;
  animation:grain-shift .55s steps(2,end) infinite;
}

.topbar {
  height:var(--header-height);
  min-height:var(--header-height);
  padding:0 clamp(18px,2.2vw,34px);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
  position:relative;
  z-index:10;
  background:var(--paper);
  border-bottom:1px solid rgba(23,21,19,.11);
}

.identity { display:flex; align-items:center; gap:clamp(14px,2vw,30px); min-width:0; }
.name {
  flex:none;
  margin:0;
  font-family:"Newsreader",Georgia,serif;
  font-size:clamp(2.2rem,4.1vw,4.5rem);
  font-weight:400;
  line-height:.9;
  letter-spacing:-.055em;
}
.identity-details { display:flex; flex-direction:column; align-items:flex-start; gap:7px; }
.origin {
  color:var(--faded);
  font-family:"Newsreader",Georgia,serif;
  font-size:clamp(.92rem,1.45vw,1.35rem);
  font-style:normal;
  line-height:1;
  white-space:nowrap;
}
.role {
  color:var(--faded);
  font-family:"Newsreader",Georgia,serif;
  font-size:clamp(.82rem,1.1vw,1rem);
  font-style:italic;
  font-weight:400;
  line-height:1;
  white-space:nowrap;
}

.top-links { display:flex; align-items:center; gap:clamp(22px,3.2vw,48px); }
.top-links a {
  position:relative;
  padding:4px 0;
  font-size:.78rem;
  font-weight:500;
  line-height:1;
  text-decoration:none;
  text-transform:uppercase;
  letter-spacing:.14em;
}
.top-links a::after {
  content:"";
  position:absolute;
  right:0;
  bottom:0;
  left:0;
  height:1px;
  background:currentColor;
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .2s ease;
}
.top-links a:hover::after,.top-links a:focus-visible::after { transform:scaleX(1); }

.gallery {
  display:grid;
  grid-template-columns:minmax(0,1fr);
  grid-template-rows:minmax(0,1fr);
  gap:var(--gap);
  padding:var(--gap);
  width:100%;
  height:calc(100svh - var(--header-height));
  margin:0;
  background:var(--film);
}
.tile {
  margin:0;
  min-width:0;
  min-height:0;
  overflow:hidden;
  position:relative;
  background:#ded6c9;
  border-radius:2px;
}
.tile::after {
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  background:
    linear-gradient(90deg,rgba(116,63,36,.08),transparent 13%,transparent 88%,rgba(45,31,22,.1)),
    radial-gradient(circle at 7% 3%,rgba(255,185,112,.08),transparent 24%);
  mix-blend-mode:screen;
}
.tile video {
  width:100%;
  height:100%;
  position:absolute;
  inset:0;
  object-fit:cover;
  transform:scale(1.005);
  filter:sepia(.12) saturate(.86) contrast(1.04) brightness(.99);
  transition:transform .7s cubic-bezier(.2,.7,.2,1),filter .45s ease;
}
.tile:hover video { transform:scale(1.022); filter:sepia(.06) saturate(.96) contrast(1.06) brightness(1); }
.tile--solo video { object-position:center 18%; }

.site-footer {
  min-height:46px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:14px 18px;
  background:var(--paper);
}
.site-footer a {
  color:var(--faded);
  font-family:"Newsreader",Georgia,serif;
  font-size:.78rem;
  letter-spacing:.08em;
  text-decoration:none;
}
.site-footer a:hover,.site-footer a:focus-visible { color:var(--ink); }

.photo-page {
  min-height:100vh;
  background:var(--paper);
}
.photo-header {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:24px;
  padding:clamp(24px,4vw,56px);
}
.photo-header h1 {
  margin:0;
  font-family:"Newsreader",Georgia,serif;
  font-size:clamp(2.5rem,6vw,6rem);
  font-weight:400;
  line-height:.88;
  letter-spacing:-.055em;
}
.photo-header a {
  color:var(--faded);
  font-size:.78rem;
  font-weight:500;
  letter-spacing:.14em;
  text-decoration:none;
  text-transform:uppercase;
}
.photo-archive {
  width:min(1180px,calc(100% - 28px));
  margin:0 auto;
  padding:0 0 clamp(42px,7vw,96px);
}
.photo-grid {
  columns:3 300px;
  column-gap:clamp(10px,1.4vw,18px);
}
.photo-card {
  margin:0 0 clamp(18px,2.4vw,30px);
  break-inside:avoid;
}
.photo-card-link {
  display:block;
  position:relative;
  overflow:hidden;
  background:#ded6c9;
  text-decoration:none;
}
.photo-archive img {
  display:block;
  width:100%;
  height:auto;
  transition:transform .45s cubic-bezier(.2,.7,.2,1),filter .35s ease;
}
.photo-card-link:hover img,.photo-card-link:focus-visible img {
  transform:scale(1.012);
  filter:contrast(1.02);
}
.photo-card-link:focus-visible {
  outline:2px solid var(--ink);
  outline-offset:3px;
}
.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

.photo-detail-page {
  min-height:100vh;
  background:var(--paper);
}
.photo-detail-header {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:20px clamp(18px,3vw,44px);
}
.photo-detail-header a,.photo-detail-nav a {
  color:var(--faded);
  font-size:.74rem;
  font-weight:500;
  letter-spacing:.13em;
  text-decoration:none;
  text-transform:uppercase;
}
.photo-detail-header a:hover,.photo-detail-header a:focus-visible,
.photo-detail-nav a:hover,.photo-detail-nav a:focus-visible { color:var(--ink); }
.photo-detail {
  width:min(1180px,calc(100% - 28px));
  margin:0 auto;
  padding:clamp(6px,2vw,22px) 0 clamp(40px,7vw,90px);
}
.photo-detail figure {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(240px,340px);
  align-items:end;
  gap:clamp(24px,5vw,74px);
  margin:0;
}
.photo-detail img {
  display:block;
  width:auto;
  max-width:100%;
  max-height:calc(100svh - 135px);
  margin:0 auto;
  object-fit:contain;
}
.photo-detail figcaption { padding:0 0 clamp(4px,5vh,54px); }
.photo-detail h1 {
  margin:0 0 12px;
  font-family:"Newsreader",Georgia,serif;
  font-size:clamp(2rem,3.6vw,4.2rem);
  font-weight:400;
  line-height:.94;
  letter-spacing:-.04em;
}
.photo-detail p {
  margin:0;
  color:var(--faded);
  font-family:"Newsreader",Georgia,serif;
  font-size:clamp(1rem,1.5vw,1.24rem);
  line-height:1.35;
}
.photo-detail-nav {
  display:flex;
  justify-content:space-between;
  margin:clamp(24px,4vw,54px) 0 0;
  padding-top:18px;
  border-top:1px solid rgba(23,21,19,.11);
}

@keyframes grain-shift {
  0% { transform:translate3d(-2%,1%,0); }
  25% { transform:translate3d(2%,-1%,0); }
  50% { transform:translate3d(1%,2%,0); }
  75% { transform:translate3d(-1%,-2%,0); }
  100% { transform:translate3d(2%,1%,0); }
}

@media (max-width:700px) {
  :root { --gap:7px; --header-height:104px; }
  .topbar { padding:11px 14px 12px; flex-direction:column; align-items:stretch; justify-content:center; gap:15px; }
  .identity { width:100%; justify-content:space-between; gap:12px; align-items:center; }
  .name { font-size:2.05rem; }
  .origin { font-size:.9rem; transform:translateY(-1px); }
  .identity-details { gap:5px; }
  .role { font-size:.78rem; }
  .top-links { width:100%; justify-content:space-between; gap:12px; }
  .top-links a { font-size:.78rem; letter-spacing:.12em; }
  .gallery { grid-template-rows:minmax(0,1fr); }
  .photo-header { align-items:center; padding:22px 14px; }
  .photo-header h1 { font-size:2.6rem; }
  .photo-archive { width:calc(100% - 14px); }
  .photo-grid { columns:1; }
  .photo-detail-header { padding:17px 14px; }
  .photo-detail { width:calc(100% - 28px); padding-top:0; }
  .photo-detail figure { grid-template-columns:1fr; gap:18px; }
  .photo-detail img { width:100%; max-height:none; }
  .photo-detail figcaption { padding:0; }
  .photo-detail h1 { margin-bottom:8px; font-size:2.25rem; }
}

@media (max-width:380px) {
  .name { font-size:1.78rem; }
  .origin { font-size:.8rem; }
}

@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  body::after { animation:none; }
  .tile video,.top-links a::after { transition:none; }
}