:root { color-scheme: dark; --pad: clamp(22px, 3vw, 52px); }
    * { box-sizing: border-box; }
    html, body { margin: 0; width: 100%; min-height: 100%; background: #0a0a0a; }
    body { font-family: Arial, Helvetica, sans-serif; color: white; letter-spacing: .08em; }
    .gallery { position: relative; width: 100%; height: 100vh; height: 100svh; background: #0a0a0a; overflow: hidden; }
    .slide { position: absolute; inset: 0; overflow: hidden; opacity: 0; visibility: hidden; transition: opacity .75s ease, visibility .75s; }
    .slide.active { opacity: 1; visibility: visible; z-index: 1; }
    .slide img { position: relative; z-index: 1; display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
    .slide[data-project="once-upon-a-time-in-dallas"] img { object-position: center center; }
    .slide[data-project="romona-keveza"] img { object-fit: cover; object-position: center 65%; }
    .slide[data-project="erykah-badu-for-burberry"] img { object-fit: cover; object-position: center 26%; transform: scale(1.18); transform-origin: center 26%; }
    .slide[data-project="erykah-badu-4"] img { object-fit: cover; object-position: center 82%; }
    .slide[data-project="badu-merch-shoot-2020"] img { object-fit: cover; object-position: center 17%; }
    .slide[data-project="vogue-an-ethiopian-eritrean-bride"] img { object-fit: cover; object-position: center 18%; }
    .slide[data-project="leon-bridges"] img { object-fit: cover; object-position: center 42%; }
    .slide[data-project="cowboys"] img { object-fit: cover; object-position: center 40%; }
    .slide[data-project="larry-hagman"] img { object-fit: cover; object-position: center 38%; transform: none; }
    .slide[data-project="gay-rodeo"] img { object-fit: cover; object-position: center 30%; }
    .slide[data-project="cheer"] img { object-fit: cover; object-position: center 35%; }
    .slide[data-project="transgender-kids-with-jill-broussard"] img { object-fit: cover; object-position: center 37%; }
    .slide[data-project="1820-2"] img { object-fit: cover; object-position: center 39%; }
    .slide[data-project="coleshumake"] img { object-fit: cover; object-position: center bottom; transform: scale(1.20); transform-origin: center bottom; }
    .slide[data-project="chasing-the-horizon"] img { object-fit: cover; object-position: center 43%; }
    .slide::after { content: ""; position: absolute; z-index: 2; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.26), transparent 24%, transparent 62%, rgba(0,0,0,.48)); pointer-events: none; }
    .brand, .nav, .caption, .controls, .arrow, .counter { position: absolute; z-index: 5; }
    .brand { top: 26px; left: var(--pad); color: white; font-size: 19px; font-weight: 700; letter-spacing: .16em; text-decoration: none; }
    .nav { top: 27px; right: var(--pad); display: flex; gap: 26px; align-items: center; font-size: 12px; font-weight: 700; letter-spacing: .16em; }
    .nav a { color: white; text-decoration: none; }
    .nav a:focus-visible { outline: 2px solid white; outline-offset: 5px; }
    .caption { left: var(--pad); bottom: 38px; max-width: min(760px, 70vw); text-transform: uppercase; }
    .caption h1 { margin: 0 0 9px; font-size: clamp(18px, 2vw, 34px); line-height: 1.05; letter-spacing: .075em; }
    .caption a { color: white; font-size: 12px; font-weight: 700; text-decoration: none; border-bottom: 1px solid white; padding-bottom: 4px; }
    .controls { right: var(--pad); bottom: 42px; display: flex; gap: 11px; align-items: center; max-width: 35vw; overflow: hidden; }
    .dot { width: 8px; height: 8px; flex: 0 0 auto; padding: 0; border-radius: 50%; border: 1px solid white; background: transparent; cursor: pointer; opacity: .9; }
    .dot.active { background: white; }
    .arrow { top: 50%; translate: 0 -50%; width: 68px; height: 140px; border: 0; background: transparent; color: white; font: 300 42px/1 Arial, sans-serif; cursor: pointer; opacity: .72; transition: opacity .2s; }
    .arrow:hover { opacity: 1; }
    .arrow.prev { left: 0; }
    .arrow.next { right: 0; }
    .counter { right: var(--pad); top: 76px; font-size: 10px; font-weight: 700; letter-spacing: .16em; }
    .preview-note { position: absolute; z-index: 6; top: 72px; left: var(--pad); padding: 7px 9px; background: rgba(0,0,0,.42); font-size: 9px; letter-spacing: .13em; text-transform: uppercase; }
    body.admin-bar .brand { top: 58px; }
    body.admin-bar .nav { top: 59px; }
    body.admin-bar .counter { top: 108px; }
    body.admin-bar .preview-note { top: 104px; }
    .scroll-cue { position: absolute; z-index: 6; left: 50%; bottom: 22px; translate: -50% 0; color: white; border: 0; background: none; font: 700 9px/1 Arial, sans-serif; letter-spacing: .18em; text-decoration: none; text-transform: uppercase; opacity: .9; }
    .scroll-cue::after { content: "↓"; display: block; margin-top: 7px; font-size: 17px; font-weight: 400; }
    .portfolio { padding: 0; background: #000; color: #111; }
    .portfolio-header { display: none; }
    .portfolio-header h2 { margin: 0; font-size: 14px; letter-spacing: .18em; text-transform: uppercase; }
    .portfolio-header span { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: #777; }
    .portfolio-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
    .portfolio-card { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; background: #e9e9e9; color: white; text-decoration: none; }
    .portfolio-card img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .65s cubic-bezier(.2,.7,.2,1); }
    .portfolio-card[data-project="the-eagles"] img { object-position: center top; }
    .portfolio-card[data-project="1820-2"] img { object-position: center 56%; }
    .portfolio-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 58%, rgba(0,0,0,.7)); opacity: .72; transition: opacity .25s; }
    .portfolio-card h3 { position: absolute; z-index: 2; left: 22px; right: 22px; bottom: 19px; margin: 0; font-size: 13px; line-height: 1.25; letter-spacing: .11em; text-transform: uppercase; }
    .portfolio-card:hover img { transform: scale(1.025); }
    .portfolio-card:hover::after { opacity: .9; }
    @media (max-width: 720px) {
      .brand { font-size: 13px; top: 20px; max-width: 42vw; }
      .nav { top: 21px; font-size: 9px; gap: 9px; }
      .preview-note { top: 55px; }
      body.admin-bar .brand { top: 66px; }
      body.admin-bar .nav { top: 67px; }
      body.admin-bar .preview-note { top: 101px; }
      .caption { bottom: 64px; max-width: calc(100vw - (var(--pad) * 2)); }
      .caption h1 { font-size: 19px; line-height: 1.15; }
      .controls { left: var(--pad); right: auto; bottom: 24px; max-width: calc(100vw - (var(--pad) * 2)); gap: 8px; }
      .dot { width: 6px; height: 6px; }
      .counter { display: none; }
      .arrow { width: 46px; }
      .scroll-cue { display: none; }
      .portfolio { padding-top: 0; }
      .portfolio-grid { grid-template-columns: 1fr; gap: 0; }
      .portfolio-card { aspect-ratio: 4 / 5; }
    }
    @media (prefers-reduced-motion: reduce) { .slide { transition: none; } }