:root {
    --dark: #000;
    --flash: #fff;
    --wall-hot: #f2f3f3;
    --wall: #dfe0e1;
    --wall-edge: #c3c5c7;
    --stamp: #ffa126;
    --stamp-glow: #ff5a00;
    --gutter: clamp(16px, 3.2vw, 48px);
    --viewfinder: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 36 36'%3E%3Cg fill='none' stroke='%23000' stroke-width='4' stroke-opacity='.5'%3E%3Cpath d='M2 11V2h9M25 2h9v9M34 25v9h-9M11 34H2v-9'/%3E%3C/g%3E%3Cg fill='none' stroke='%23fff' stroke-width='2'%3E%3Cpath d='M2 11V2h9M25 2h9v9M34 25v9h-9M11 34H2v-9'/%3E%3C/g%3E%3Ccircle cx='18' cy='18' r='1.6' fill='%23fff'/%3E%3C/svg%3E") 18 18, crosshair;
  }

  * { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body {
    margin: 0;
    background: var(--dark);
    color: var(--flash);
    font-family: "Mona Sans", system-ui, sans-serif;
    font-variation-settings: "wdth" 100;
    font-weight: 430;
    font-size: 17px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
  }
  img { display: block; max-width: 100%; }
  a { color: inherit; }
  button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
  :focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
  .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

  /* ---------- Date stamp (the orange LED imprint of a point-and-shoot) ---------- */
  .stamp {
    display: inline-block;
    line-height: 0;
    color: var(--stamp);
    filter: drop-shadow(0 0 1px var(--stamp-glow)) drop-shadow(0 0 5px rgba(255, 90, 0, .55)) blur(.2px);
  }
  .stamp svg { height: 1em; width: auto; overflow: visible; }

  /* ---------- Header ---------- */
  .bar {
    position: fixed; inset: 0 0 auto 0; z-index: 20;
    display: flex; justify-content: space-between; align-items: baseline; gap: 24px;
    padding: 18px var(--gutter);
    mix-blend-mode: difference;
    color: #fff;
    pointer-events: none;
    transition: transform .3s ease;
  }
  .bar.tucked { transform: translateY(-100%); }
  .bar a { pointer-events: auto; text-decoration: none; }
  .wordmark { font-weight: 760; font-variation-settings: "wdth" 112; font-size: 15px; letter-spacing: .01em; }
  .bar nav { display: flex; gap: clamp(14px, 2.4vw, 32px); font-size: 15px; font-weight: 560; }
  .bar nav a:hover { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 2px; }

  /* ---------- Hero: the dark room ---------- */
  .hero {
    position: relative;
    height: 100vh; height: 100svh; min-height: 560px;
    overflow: hidden;
    background: var(--dark);
    cursor: var(--viewfinder);
    -webkit-user-select: none; user-select: none;
    touch-action: manipulation;
  }
  .shot {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    filter: brightness(0);
  }
  .falloff {
    position: absolute; inset: 0; pointer-events: none;
    background:
      radial-gradient(ellipse 72% 68% at 50% 42%, transparent 0%, rgba(0,0,0,.18) 52%, rgba(0,0,0,.82) 100%),
      linear-gradient(to top, rgba(0,0,0,.86) 0%, rgba(0,0,0,.35) 30%, transparent 48%);
  }
  .burst { position: absolute; inset: 0; background: var(--flash); opacity: 0; pointer-events: none; z-index: 5; }

  .hero-text {
    position: absolute; inset: auto var(--gutter) clamp(14px, 2.2vw, 30px);
    z-index: 3;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 18px 32px;
    pointer-events: none;
  }
  .lede { margin: 0; max-width: 30ch; font-size: clamp(16px, 1.35vw, 20px); line-height: 1.35; font-weight: 520; }
  .next-shot {
    pointer-events: auto;
    display: inline-flex; align-items: center; gap: 10px;
    margin-top: 14px;
    font-size: 14px; font-weight: 600;
    color: rgba(255,255,255,.72);
  }
  .next-shot:hover { color: #fff; }
  .next-shot svg { width: 16px; height: 16px; flex: none; }
  .next-shot .count { font-variant-numeric: tabular-nums; color: rgba(255,255,255,.5); font-weight: 500; }

  .caption { text-align: right; justify-self: end; }
  .caption .stamp { font-size: clamp(22px, 2.2vw, 32px); margin-top: 12px; }
  .caption-title { margin: 0; font-weight: 760; font-variation-settings: "wdth" 112; font-size: 16px; }
  .caption-kind { margin: 0; font-size: 14px; color: rgba(255,255,255,.72); }

  .name {
    grid-column: 1 / -1;
    margin: 4px 0 0;
    font-weight: 900;
    font-variation-settings: "wdth" 125;
    text-transform: uppercase;
    line-height: .8;
    letter-spacing: -.015em;
    white-space: nowrap;
    font-size: 120px; /* fitted to width by script */
  }
  .name span { display: inline; }

  /* ---------- The wall: flash-lit, where the work hangs ---------- */
  .wall {
    position: relative;
    isolation: isolate;
    overflow: clip;
    background: var(--wall-edge);
    color: #000;
  }
  /* The flash falloff stays centred on whatever part of the wall you're looking at. */
  .wall::before {
    content: "";
    position: sticky; top: 0;
    display: block; height: 100vh; margin-bottom: -100vh;
    background: radial-gradient(ellipse 70% 62% at 50% 46%, var(--wall-hot) 0%, var(--wall) 46%, var(--wall-edge) 100%);
    z-index: -1;
  }
  .wall-inner { padding: clamp(96px, 11vw, 150px) var(--gutter) clamp(60px, 8vw, 120px); }
  .filters {
    display: flex; flex-wrap: wrap; gap: 4px clamp(14px, 2vw, 30px);
    margin: 0 0 clamp(48px, 7vw, 96px);
    font-size: clamp(26px, 3.4vw, 50px);
    font-weight: 800;
    font-variation-settings: "wdth" 112;
    line-height: 1.08;
    letter-spacing: -.01em;
  }
  .filters button { color: rgba(0,0,0,.28); transition: color .15s; }
  .filters button:hover { color: rgba(0,0,0,.6); }
  .filters button[aria-pressed="true"] { color: #000; }
  .filters sup { font-size: .36em; font-weight: 600; margin-left: .15em; vertical-align: .95em; font-variant-numeric: tabular-nums; }

  .project { margin: 0 0 clamp(64px, 9vw, 130px); }
  .project[hidden] { display: none; }
  .project-head {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 34ch);
    gap: 8px 40px; align-items: end;
    margin-bottom: 22px;
  }
  .project-head h3 {
    margin: 0;
    font-size: clamp(30px, 3.6vw, 54px);
    font-weight: 820;
    font-variation-settings: "wdth" 118;
    line-height: .95;
    letter-spacing: -.015em;
  }
  .project-head p { margin: 0; font-size: 15px; line-height: 1.45; }
  .project-head .meta { color: rgba(0,0,0,.55); }

  .rows { display: flex; flex-direction: column; gap: var(--g); --g: clamp(14px, 1.8vw, 26px); }
  .row { display: flex; gap: var(--g); }
  .print {
    position: relative; flex: none;
    background: #111;
    filter: drop-shadow(7px 9px 3px rgba(0,0,0,.42));
    transition: filter .25s ease, transform .25s ease;
    cursor: zoom-in;
  }
  .print img { width: 100%; height: 100%; object-fit: cover; }
  .print .stamp { position: absolute; right: 5%; bottom: 6%; font-size: clamp(11px, 1vw, 15px); }
  .print:hover, .print:focus-visible {
    filter: drop-shadow(13px 17px 5px rgba(0,0,0,.5));
    transform: translate(-3px, -4px);
  }
  .print.pop img { animation: pop .32s ease-out; }
  @keyframes pop {
    0% { filter: brightness(1.9) contrast(.8); }
    100% { filter: brightness(1) contrast(1); }
  }
  .note { margin: 22px 0 0; max-width: 58ch; font-size: 15px; color: rgba(0,0,0,.62); }

  /* ---------- About: back in the dark ---------- */
  .about {
    background: var(--dark);
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(28px, 5vw, 80px);
    padding: clamp(80px, 11vw, 160px) var(--gutter);
    align-items: start;
  }
  .about-photo { position: relative; aspect-ratio: 2 / 3; background: #111; }
  .about-photo img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.1); }
  .about-photo .stamp { position: absolute; right: 6%; bottom: 5%; font-size: 16px; }
  .about h2 {
    margin: 0 0 32px;
    font-size: clamp(34px, 4.6vw, 72px);
    font-weight: 820;
    font-variation-settings: "wdth" 112;
    line-height: 1;
    letter-spacing: -.015em;
    max-width: 16ch;
  }
  .about-copy > p { max-width: 54ch; margin: 0 0 18px; color: rgba(255,255,255,.82); font-size: 18px; }
  .about-lists { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-top: 44px; }
  .about-lists h3 { margin: 0 0 12px; font-size: 15px; font-weight: 700; color: rgba(255,255,255,.55); }
  .about-lists ul { list-style: none; margin: 0; padding: 0; font-size: 17px; line-height: 1.7; }

  /* ---------- Book: the last flash ---------- */
  .book {
    background: var(--flash); color: #000;
    padding: clamp(80px, 12vw, 170px) var(--gutter) clamp(28px, 3vw, 40px);
  }
  .book h2 {
    margin: 0 0 clamp(28px, 4vw, 52px);
    font-size: clamp(54px, 11vw, 190px);
    font-weight: 900;
    font-variation-settings: "wdth" 125;
    line-height: .82;
    letter-spacing: -.02em;
    text-transform: uppercase;
  }
  .book-mail { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px 24px; }
  .book-mail a {
    font-size: clamp(22px, 3.6vw, 56px);
    font-weight: 700;
    font-variation-settings: "wdth" 108;
    text-decoration: underline; text-decoration-thickness: .08em; text-underline-offset: .14em;
    overflow-wrap: anywhere;
  }
  .copy {
    font-size: 15px; font-weight: 700;
    border: 2px solid #000; padding: 9px 16px;
  }
  .copy:hover { background: #000; color: #fff; }
  .book p { margin: 22px 0 0; font-size: 18px; max-width: 50ch; }
  .book-foot {
    display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px;
    margin-top: clamp(80px, 12vw, 160px);
    font-size: 14px; color: rgba(0,0,0,.6);
  }

  /* ---------- Lightbox ---------- */
  .lightbox {
    width: 100vw; height: 100vh; height: 100dvh; max-width: none; max-height: none;
    margin: 0; padding: 0; border: 0;
    background: #000; color: #fff;
    overflow: hidden;
  }
  .lightbox::backdrop { background: #000; }
  .lb-stage { position: absolute; inset: 0 0 92px; display: grid; place-items: center; padding: 56px var(--gutter) 0; }
  .lb-frame { position: relative; max-width: 100%; max-height: 100%; }
  .lb-img { max-width: 100%; max-height: calc(100dvh - 160px); width: auto; height: auto; }
  .lb-frame .stamp { position: absolute; right: 4%; bottom: 5%; font-size: clamp(14px, 1.5vw, 22px); }
  .lb-burst { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; }
  .lb-bar {
    position: absolute; inset: auto 0 0; height: 92px;
    display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 24px;
    padding: 0 var(--gutter);
  }
  .lb-cap { margin: 0; font-size: 15px; color: rgba(255,255,255,.78); min-width: 0; }
  .lb-cap strong { color: #fff; font-weight: 760; margin-right: 10px; }
  .lb-count { font-variant-numeric: tabular-nums; font-size: 14px; color: rgba(255,255,255,.6); }
  .lb-nav { display: flex; gap: 8px; }
  .lb-nav button { font-size: 14px; font-weight: 700; padding: 10px 14px; border: 1.5px solid rgba(255,255,255,.4); }
  .lb-nav button:hover { border-color: #fff; }
  .lb-close { position: absolute; top: 16px; right: var(--gutter); font-size: 14px; font-weight: 700; padding: 8px 0; z-index: 2; }

  /* ---------- Small screens ---------- */
  @media (max-width: 760px) {
    body { font-size: 16px; }
    .bar { padding-top: 14px; }
    .bar nav { gap: 14px; font-size: 14px; }
    .wordmark { font-size: 14px; }
    .hero-text { grid-template-columns: minmax(0, 1fr); }
    .wordmark { display: none; }
    .bar { justify-content: flex-end; }
    .caption { text-align: left; justify-self: start; order: -1; }
    .name { white-space: normal; }
    .name span { display: block; }
    .project-head { grid-template-columns: 1fr; }
    .about { grid-template-columns: 1fr; }
    .about-photo { max-width: 360px; }
    .about-lists { grid-template-columns: 1fr; gap: 24px; }
    .lb-bar { grid-template-columns: 1fr auto; height: auto; padding-block: 14px; }
    .lb-count { display: none; }
    .lb-stage { inset: 0 0 120px; }
  }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .shot { filter: none; transition: opacity .3s; }
    .print, .print:hover { transition: none; transform: none; }
    .print.pop img { animation: none; }
  }
/* Flash: the working portfolio. Full frames and a quiet interface. */
[hidden]{display:none!important}
html{scroll-padding-top:90px}
.skip{position:fixed;top:-80px;left:16px;z-index:60;background:white;color:black;padding:12px}.skip:focus{top:12px}
.bar{z-index:20;background:#000;color:#fff;mix-blend-mode:normal;padding:18px var(--gutter);align-items:center;pointer-events:auto}
.bar nav a[aria-current=page]{text-decoration:underline;text-underline-offset:6px}
.hero{cursor:default;min-height:820px;height:100svh}
.shot{inset:100px auto auto 35%;width:30%;height:calc(100% - 385px);object-fit:contain;filter:none}
.companion{position:absolute;top:130px;width:26%;height:calc(100% - 440px);object-fit:contain}
.companion-left{left:4%}.companion-right{right:4%;top:165px}
.caption-kind{max-width:30ch}.name{line-height:.85}.next-shot{padding:10px 0;margin-top:4px;min-height:44px;text-decoration:underline;text-underline-offset:5px}
.page-heading{padding:145px var(--gutter) 60px}.page-heading h1{font-size:clamp(42px,7.5vw,112px);line-height:.98;letter-spacing:-.04em;font-weight:850;margin:0 0 24px;max-width:16ch}.page-heading p{max-width:52ch;color:#ccc;margin:0;font-size:20px}
.wall-inner{padding-top:70px}.work-intro{display:flex;align-items:baseline;justify-content:space-between;gap:25px;margin-bottom:35px}.work-intro h2{font-size:20px;font-weight:600;margin:0}.work-intro a{font-size:16px;text-underline-offset:5px}
.filters{font-size:clamp(24px,3.3vw,48px);gap:16px 32px;margin-bottom:70px}.filters a{text-decoration:none;color:#606060}.filters a:hover,.filters a[aria-current=page]{color:#000}.filters sup{font-size:14px;vertical-align:super;margin-left:6px}
.project-head{margin-bottom:30px}.project-head h3{font-size:clamp(27px,3.4vw,50px)}.project-head .category-label{font-size:14px;color:#555;margin-bottom:10px}.project-head .gallery-link{display:inline-block;margin-top:12px;font-size:16px;text-underline-offset:4px}.project-head p{font-size:16px}.print img{object-fit:contain}.print:hover img{filter:none}
.about-photo{margin:0;background:transparent;aspect-ratio:auto}.about-photo img{height:auto;filter:none;object-fit:contain}.about-photo figcaption{font-size:14px;color:#aaa;margin-top:14px}.about{padding-top:90px}.about-lists h3{font-size:16px}.text-link{display:inline-block;margin-top:34px;text-underline-offset:5px}
.book h2{font-size:clamp(54px,9vw,146px);line-height:.94}.book-link{font-size:clamp(24px,4vw,50px);font-weight:650;text-underline-offset:8px}.book-foot{margin-top:90px}
.film-section{padding:0 var(--gutter) 100px}.film-empty{padding:55px 0;border-top:1px solid #555;max-width:1000px}.film-empty h2{font-size:clamp(28px,4vw,54px);font-weight:600;letter-spacing:-.025em;margin:0 0 15px}.film-empty p{font-size:18px;max-width:52ch;color:#bbb}.film-card{display:grid;grid-template-columns:1fr 1fr;gap:40px;padding:45px 0;border-top:1px solid #555}.film-card img{max-height:500px;object-fit:contain}.film-card h2{font-size:42px;line-height:1.1}.film-card a{text-underline-offset:6px}
.contact-content{padding:0 var(--gutter) 100px;max-width:1100px}.contact-intro{font-size:26px}.contact-email{font-size:clamp(24px,4vw,52px);overflow-wrap:anywhere;text-underline-offset:8px}.contact-pending{color:#bbb;font-size:18px}.inquiry{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:50px}.inquiry label{display:flex;flex-direction:column;gap:10px;font-size:16px}.inquiry input,.inquiry select,.inquiry textarea{width:100%;font:inherit;color:#fff;background:#171717;border:1px solid #777;border-radius:0;padding:14px}.wide{grid-column:1/-1}.solid{padding:14px 24px;background:#fff;color:#000;font-weight:650}.form-note{font-size:14px;color:#bbb;max-width:50ch}
.lb-close{min-width:60px;min-height:44px;font-size:16px}.lb-nav button{min-height:44px}.lb-bar{height:110px}.lb-stage{bottom:110px}.lb-img{max-height:calc(100dvh - 185px)}.lb-cap strong{display:block}.lightbox{overscroll-behavior:contain}.dialog-open{overflow:hidden}
@media(max-width:760px){.bar{display:block;padding-top:12px;padding-bottom:12px}.wordmark{display:block;font-size:14px;margin-bottom:8px}.bar nav{justify-content:space-between;gap:12px;font-size:14px}.hero{min-height:880px}.companion{display:none}.shot{top:112px;left:8%;width:84%;height:calc(100% - 420px)}.hero-text{gap:16px}.hero-text .lede{font-size:16px;max-width:30ch}.hero-text .caption-kind{font-size:14px}.name{line-height:.87}.hero-text .next-shot{font-size:14px}.page-heading{padding-top:140px}.page-heading p{font-size:18px}.wall-inner{padding-top:40px}.work-intro{align-items:start}.work-intro a{max-width:12ch;text-align:right}.filters{gap:14px 22px;line-height:1.1}.project{margin-bottom:70px}.about{padding-top:55px}.about-photo{max-width:100%;width:100%}.about-photo img{max-height:65vh;width:100%}.about-lists{grid-template-columns:1fr 1fr}.film-card{grid-template-columns:1fr}.inquiry{grid-template-columns:1fr}.lb-bar{grid-template-columns:1fr;gap:8px;height:150px;align-content:center}.lb-nav{justify-content:space-between}.lb-count{display:block;position:absolute;right:var(--gutter);top:12px}.lb-cap{padding-right:50px;font-size:13px}.lb-cap strong{font-size:15px}.lb-stage{bottom:150px;padding-top:65px}.lb-img{max-height:calc(100dvh - 225px)}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}
.biography p{max-width:54ch;font-size:18px;color:#ddd;margin:0 0 18px}
@media(max-width:760px){.book h2{font-size:clamp(38px,10.8vw,60px)}}