@font-face {
  font-family: "Goudy MT";
  src: url("../fonts/goudy-regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Goudy MT";
  src: url("../fonts/goudy-italic.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
}

:root {
  --ink:      #14120F;
  --ink-soft: #4A453E;
  --muted:    #8C867C;
  --faint:    #B4AEA4;
  --paper:    #FFFFFF;
  --stone:    #F2F1EC;
  --gold:     #CABFA6;
  --gold-rule:#989285;
  --rule:     #E4E1DA;
  --hair:     #EFEDE7;
  --scrim:    rgba(20,18,15,.06);
  --tile:     #E9E7E1;

  --display: "Goudy MT", "Sorts Mill Goudy", Georgia, serif;
  --ui: "Avenir Next", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --gut: 4px;
  --pad: clamp(1.25rem, 4vw, 3rem);
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink:      #EFEBE3;
    --ink-soft: #BDB6AA;
    --muted:    #8A8378;
    --faint:    #6A645B;
    --paper:    #121110;
    --stone:    #191816;
    --gold:     #3E3A33;
    --gold-rule:#5F5A4E;
    --rule:     #2C2A26;
    --hair:     #232120;
    --scrim:    rgba(0,0,0,.18);
    --tile:     #221F1C;
  }
}
:root[data-theme="dark"] {
  --ink:      #EFEBE3;
  --ink-soft: #BDB6AA;
  --muted:    #8A8378;
  --faint:    #6A645B;
  --paper:    #121110;
  --stone:    #191816;
  --gold:     #3E3A33;
  --gold-rule:#5F5A4E;
  --rule:     #2C2A26;
  --hair:     #232120;
  --scrim:    rgba(0,0,0,.18);
  --tile:     #221F1C;
}
:root[data-theme="light"] {
  --ink:      #14120F;
  --ink-soft: #4A453E;
  --muted:    #8C867C;
  --faint:    #B4AEA4;
  --paper:    #FFFFFF;
  --stone:    #F2F1EC;
  --gold:     #CABFA6;
  --gold-rule:#989285;
  --rule:     #E4E1DA;
  --hair:     #EFEDE7;
  --scrim:    rgba(20,18,15,.06);
  --tile:     #E9E7E1;
}

* { box-sizing: border-box; }

/* Smooth in-page scrolling, only for visitors who haven't asked to reduce
   motion. JS drives the nav clicks; this covers any native anchor jump too. */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--ui);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

img { display: block; width: 100%; height: 100%; object-fit: cover; }

a { color: inherit; text-decoration: none; }

:focus-visible {
  outline: 1px solid var(--ink);
  outline-offset: 3px;
}

.eyebrow {
  font-family: var(--ui);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .34em;
  color: var(--muted);
}

/* ---------- header ---------- */

.masthead {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.75rem;
  padding: clamp(2rem, 5vw, 3.25rem) var(--pad) clamp(1.75rem, 4vw, 2.5rem);
}

.wordmark {
  margin: 0;
  text-align: center;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.7rem, 5vw, 2.6rem);
  line-height: 1;
  letter-spacing: .22em;
  text-indent: .22em;
  text-transform: uppercase;
}

.wordmark span {
  display: block;
  margin-top: .85rem;
  font-family: var(--ui);
  font-size: 10px;
  letter-spacing: .5em;
  text-indent: .5em;
  color: var(--faint);
}

.nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(1.25rem, 3.5vw, 2.75rem);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .3em;
  color: var(--ink-soft);
}

.nav a { position: relative; padding-bottom: 3px; }
.nav a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 1px;
  background: currentColor;
  transition: width .35s ease;
}
.nav a:hover::after, .nav a:focus-visible::after { width: 100%; }
.nav a[aria-current] { color: var(--ink); }
.nav a[aria-current]::after { width: 100%; }

/* ---------- mosaic ---------- */

.mosaic {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gut);
  padding: var(--gut);
  max-width: 1300px;
  margin-inline: auto;
}

.mosaic > * { grid-column: span 12; }
.stack { display: flex; flex-direction: column; gap: var(--gut); min-height: 0; }

/* Below the breakpoint the mosaic unstacks into a simple column,
   so each tile carries its own proportion instead of splitting one viewport. */
.m-lead  { aspect-ratio: 3 / 4; }
.stack > .tile { aspect-ratio: 3 / 2; }
.m-tall  { aspect-ratio: 4 / 5; }

/* The lead tile holds a true 3:4 vertical frame. Sizing its column `auto`
   lets the tile's height fill the band and its width follow from the ratio,
   so the crop is never squeezed by the viewport's proportions. */
@media (min-width: 860px) {
  .mosaic {
    height: 92vh;
    min-height: 640px;
    grid-template-columns: auto 1fr 1.3fr;
  }
  .m-lead  { grid-column: auto; height: 100%; }
  .m-pair  { grid-column: auto; }
  .m-tall  { grid-column: auto; aspect-ratio: auto; }
  .stack > .tile { flex: 1 1 0; min-height: 0; aspect-ratio: auto; }
}

.tile {
  position: relative;
  overflow: hidden;
  background: var(--tile);
  display: block;
}

.tile::after {
  content: "";
  position: absolute; inset: 0;
  background: var(--scrim);
  transition: background .7s ease;
  pointer-events: none;
}
.tile:hover::after, .tile:focus-visible::after { background: transparent; }

.tile img { transition: transform 1.2s cubic-bezier(.2,.6,.2,1); }
.tile:hover img { transform: scale(1.03); }

.tile-cap {
  position: absolute;
  left: clamp(1.25rem, 3vw, 2.5rem);
  bottom: clamp(1.25rem, 3vw, 2.5rem);
  z-index: 2;
  color: #fff;
  text-shadow: 0 1px 14px rgba(0,0,0,.45);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .45s ease, transform .45s ease;
}
.tile:hover .tile-cap, .tile:focus-visible .tile-cap { opacity: 1; transform: none; }
.tile-cap .eyebrow { color: rgba(255,255,255,.82); }
.tile-cap h2 {
  margin: .5rem 0 0;
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  line-height: 1.05;
}

.tile-pill {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  opacity: 0;
  transition: opacity .45s ease;
}
.tile:hover .tile-pill, .tile:focus-visible .tile-pill { opacity: 1; }
.tile-pill span {
  background: rgba(255,255,255,.92);
  color: #14120F;
  padding: .6rem 1.1rem;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .28em;
  text-indent: .28em;
}

.tile-center {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.1rem;
  color: #fff;
  text-align: center;
  padding: 0 1.5rem;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .5s ease, transform .5s ease;
  text-shadow: 0 1px 14px rgba(0,0,0,.45);
}
.tile:hover .tile-center, .tile:focus-visible .tile-center { opacity: 1; transform: none; }
.tile-center h3 {
  margin: 0;
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.2rem, 2vw, 1.5rem);
}
.tile-center i { display: block; width: 2.5rem; height: 1px; background: #fff; }

/* ---------- services ---------- */

.services { padding: clamp(4.5rem, 10vw, 8rem) var(--pad); }
.services-inner { max-width: 76rem; margin: 0 auto; }

.section-head { margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.section-head h2 {
  margin: .9rem 0 0;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(2rem, 4.5vw, 2.9rem);
  line-height: 1.1;
  text-wrap: balance;
}
.section-head.center { text-align: center; max-width: 32rem; margin-inline: auto; }
.section-head.center h2 { font-style: italic; }

.svc-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2.5rem, 5vw, 3.5rem);
}
@media (min-width: 780px) {
  .svc-grid { grid-template-columns: repeat(3, 1fr); gap: 0; }
  .svc { padding-inline: clamp(1.75rem, 3vw, 2.75rem); }
  .svc:first-child { padding-left: 0; }
  .svc:last-child { padding-right: 0; }
  .svc + .svc { border-left: 1px solid var(--rule); }
}

.svc h3 {
  margin: 0 0 1rem;
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  font-size: 1.5rem;
}
.svc p {
  margin: 0;
  color: var(--ink-soft);
  font-size: .93rem;
  line-height: 1.75;
}
.svc-meta {
  margin-top: 1.5rem !important;
  padding-top: 1.1rem;
  border-top: 1px solid var(--hair);
  color: var(--muted) !important;
  font-size: 10px !important;
  text-transform: uppercase;
  letter-spacing: .18em;
  line-height: 1.9 !important;
}

/* ---------- experience ---------- */

.experience {
  background: var(--gold);
  padding: clamp(4.5rem, 10vw, 8rem) var(--pad);
}
/* Hairlines on the gold ground get a gold-biased rule so they don't read as
   grey lines sitting on top of a warm field. */
.experience .step { border-top-color: var(--gold-rule); }

/* The gold is dark enough that the page's quiet greys lose contrast on it,
   so everything in this band sits at full ink rather than the softened greys
   used on the white and stone sections. */
.experience .eyebrow,
.experience .step::before,
.experience .step-list dt,
.experience .step-list dd { color: var(--ink); }
.exp-inner { max-width: 76rem; margin: 0 auto; }

/* An ordered list, because the steps are a real chronology —
   the numbers carry information the reader needs. */
.steps {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2.75rem, 5vw, 3.5rem);
  counter-reset: step;
}
@media (min-width: 780px) { .steps { grid-template-columns: repeat(3, 1fr); } }

.step {
  counter-increment: step;
  border-top: 1px solid var(--rule);
  padding-top: 1.6rem;
}
.step::before {
  content: counter(step, decimal-leading-zero);
  display: block;
  margin-bottom: 1.25rem;
  font-family: var(--display);
  font-size: .95rem;
  letter-spacing: .16em;
  color: var(--faint);
  font-variant-numeric: tabular-nums;
}
.step h3 {
  margin: 0 0 1.5rem;
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  font-size: 1.4rem;
}

.step-list {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
}
.step-list dt {
  margin-bottom: .4rem;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .2em;
  color: var(--muted);
}
.step-list dd {
  margin: 0;
  color: var(--ink-soft);
  font-size: .93rem;
  line-height: 1.7;
}

/* ---------- about ---------- */

.about {
  max-width: 76rem;
  margin: 0 auto;
  padding: clamp(4.5rem, 11vw, 9rem) var(--pad);
  display: grid;
  gap: clamp(3rem, 7vw, 6rem);
  align-items: center;
}
@media (min-width: 860px) { .about { grid-template-columns: 5fr 6fr; } }

.portrait-frame { position: relative; isolation: isolate; }
.portrait-frame > .shot {
  position: relative;
  z-index: 1;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--tile);
}
.portrait-frame::before {
  content: "";
  position: absolute;
  left: -1.5rem; bottom: -1.5rem;
  width: 8rem; height: 8rem;
  border-left: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  z-index: 0;
}

.about h2 {
  margin: 1rem 0 0;
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(2.4rem, 5.5vw, 3.4rem);
  line-height: 1.1;
  text-wrap: balance;
}

.prose {
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
  color: var(--ink-soft);
  font-size: .975rem;
  line-height: 1.75;
  max-width: 34em;
}
.prose p { margin: 0; }

.textlink {
  margin-top: 2.75rem;
  display: inline-flex;
  align-items: center;
  gap: .9rem;
  align-self: flex-start;
}
.textlink span {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .2em;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 3px;
}
.textlink svg { width: 16px; height: 16px; transition: transform .35s ease; }
.textlink:hover svg { transform: translateX(7px); }

/* ---------- featured work ---------- */

.work {
  background: var(--stone);
  padding: clamp(4rem, 9vw, 7rem) 0;
}
.work-inner { max-width: 88rem; margin: 0 auto; padding: 0 var(--pad); }

.work-head {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.work-head h2 {
  margin: 0 0 .4rem;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.9rem, 4vw, 2.6rem);
  line-height: 1.1;
}
.work-head p { margin: 0; color: var(--muted); font-size: .875rem; letter-spacing: .01em; }
.work-head a {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .22em;
  color: var(--muted);
  border-bottom: 1px solid transparent;
  padding-bottom: 3px;
  transition: color .3s ease, border-color .3s ease;
}
.work-head a:hover { color: var(--ink); border-color: var(--ink); }

.work-grid {
  display: grid;
  gap: clamp(1.75rem, 3.5vw, 2.5rem);
  grid-template-columns: 1fr;
}
@media (min-width: 720px) { .work-grid { grid-template-columns: repeat(3, 1fr); } }

.card .shot {
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--tile);
  margin-bottom: 1.4rem;
}
.card .shot img { transition: transform .8s cubic-bezier(.2,.6,.2,1); }
.card:hover .shot img { transform: scale(1.035); }
.card h3 {
  margin: 0 0 .5rem;
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  font-size: 1.3rem;
}
.card p { margin: 0; }

/* Session type and year, split to the card's edges — the pairing is what
   makes a card read as one shoot rather than a category. */
.card-meta {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .2em;
  color: var(--muted);
}
.card-meta span:last-child { font-variant-numeric: tabular-nums; }

/* ---------- cta ---------- */

.cta {
  padding: clamp(4.5rem, 11vw, 9rem) var(--pad);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1.5rem;
}
.cta h2 {
  margin: 0;
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(2rem, 5vw, 2.9rem);
  line-height: 1.15;
  text-wrap: balance;
  max-width: 18em;
}
.cta p {
  margin: 0;
  max-width: 30rem;
  color: var(--muted);
  line-height: 1.7;
  font-size: .95rem;
}
.button {
  margin-top: 1rem;
  background: var(--ink);
  color: var(--paper);
  padding: 1.15rem 2.75rem;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .3em;
  text-indent: .3em;
  transition: opacity .3s ease;
}
.button:hover { opacity: .82; }

/* ---------- footer ---------- */

.foot {
  border-top: 1px solid var(--hair);
  padding: clamp(3.5rem, 8vw, 5rem) var(--pad) clamp(2rem, 4vw, 3rem);
}
.foot-inner {
  max-width: 88rem;
  margin: 0 auto;
  display: grid;
  gap: clamp(2.5rem, 5vw, 3.5rem);
  grid-template-columns: 1fr;
}
@media (min-width: 720px) { .foot-inner { grid-template-columns: 2fr 1fr 1fr; } }

.foot h2 {
  margin: 0 0 1.1rem;
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.15rem;
  letter-spacing: .22em;
  text-indent: .22em;
  text-transform: uppercase;
}
.foot-blurb {
  margin: 0;
  max-width: 22rem;
  color: var(--muted);
  font-size: .875rem;
  line-height: 1.75;
}
.foot h4 {
  margin: 0 0 1.5rem;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .22em;
  font-weight: 500;
}
.foot ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: .95rem; }
.foot ul a { font-size: .8rem; letter-spacing: .04em; color: var(--muted); transition: color .3s ease; }
.foot ul a:hover { color: var(--ink); }
.socials { display: flex; gap: 1.35rem; }
.socials a { color: var(--muted); transition: color .3s ease; }
.socials a:hover { color: var(--ink); }
.socials svg { width: 19px; height: 19px; }

.colophon {
  max-width: 88rem;
  margin: clamp(3rem, 6vw, 5rem) auto 0;
  padding-top: 2rem;
  border-top: 1px solid var(--hair);
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  justify-content: space-between;
  align-items: center;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .2em;
  color: var(--faint);
}
.colophon nav { display: flex; gap: 2rem; }
.colophon a:hover { color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
}

/* ---------- theme toggle ---------- */

.theme-toggle {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: 20;
  width: 2.75rem;
  height: 2.75rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--rule);
  border-radius: 50%;
  background: var(--paper);
  color: var(--ink-soft);
  cursor: pointer;
  transition: color .3s ease, border-color .3s ease, background .3s ease;
}
.theme-toggle:hover { color: var(--ink); border-color: var(--ink); }
.theme-toggle svg { width: 18px; height: 18px; }

/* Show the icon for the theme you'd switch TO. */
.theme-toggle .i-sun { display: none; }
.theme-toggle .i-moon { display: block; }
:root[data-theme="dark"] .theme-toggle .i-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .i-moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .i-sun { display: block; }
  :root:not([data-theme="light"]) .theme-toggle .i-moon { display: none; }
}

/* ---------- session detail ---------- */

.session-head {
  max-width: 52rem;
  margin: 0 auto;
  padding: clamp(3.5rem, 8vw, 6.5rem) var(--pad) clamp(2.5rem, 5vw, 4rem);
  text-align: center;
}
.session-head h1 {
  margin: 1rem 0 0;
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(2.4rem, 6vw, 3.6rem);
  line-height: 1.1;
  text-wrap: balance;
}
.session-summary {
  margin: 1.5rem auto 0;
  max-width: 34rem;
  color: var(--ink-soft);
  font-size: 1rem;
  line-height: 1.75;
  font-weight: 300;
}
.session-meta {
  margin: 1.75rem 0 0;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .25em;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.gallery-wrap {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 var(--pad) clamp(4rem, 9vw, 7rem);
  border-top: 1px solid var(--hair);
  padding-top: clamp(2.5rem, 5vw, 3.5rem);
}

/* Masonry via CSS columns — images keep their natural ratio and flow into the
   shortest column, which is what makes a mixed portrait/landscape set read as
   one contact sheet rather than a rigid grid. */
.masonry {
  columns: 1;
  column-gap: clamp(1rem, 2vw, 1.5rem);
}
@media (min-width: 700px)  { .masonry { columns: 2; } }
@media (min-width: 1040px) { .masonry { columns: 3; } }

.masonry-item {
  break-inside: avoid;
  margin-bottom: clamp(1rem, 2vw, 1.5rem);
  overflow: hidden;
  background: var(--tile);
}
.masonry-item img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 1s cubic-bezier(.2,.6,.2,1);
}
.masonry-item:hover img { transform: scale(1.03); }

/* prev / next session */
.session-adjacent {
  max-width: 1400px;
  margin: 0 auto;
  padding: clamp(3rem, 6vw, 5rem) var(--pad);
  border-top: 1px solid var(--hair);
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: space-between;
  align-items: center;
}
.session-adjacent a {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  max-width: 20rem;
}
.session-adjacent .next { align-items: flex-end; text-align: right; margin-left: auto; }
.session-adjacent .eyebrow { color: var(--muted); }
.session-adjacent h2 {
  margin: 0;
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.4rem, 3vw, 1.9rem);
  transition: transform .35s ease;
}
.session-adjacent .prev:hover h2 { transform: translateX(6px); }
.session-adjacent .next:hover h2 { transform: translateX(-6px); }