:root {
      --bg: #0b0b0b;
      --ink: #f5f5f2;
      --muted: rgba(245,245,242,.56);
      --black: #0a0a0a;
      --hairline: rgba(255,255,255,.14);
      --page-x: clamp(18px,3vw,54px);
      --radius-lg: clamp(16px,1.4vw,26px);
      --ease-out: cubic-bezier(.16,1,.3,1);
      --ease-soft: cubic-bezier(.22,.75,.18,1);
      --font: -apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Helvetica Neue",Helvetica,Arial,"Segoe UI",sans-serif;
    }

    * { box-sizing: border-box; }
    html {
      width: 100%;
      max-width: 100%;
      background: var(--bg);
      scroll-behavior: smooth;
      overflow-x: clip;
    }
    body {
      margin: 0;
      min-width: 320px;
      background: var(--bg);
      color: var(--ink);
      font-family: var(--font);
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
      width: 100%;
      max-width: 100%;
      overflow-x: clip;
    }
    body.is-locked { overflow: hidden; }
    a,button { font: inherit; }
    a { color: inherit; text-decoration: none; }
    button { border: 0; }
    img {
      display: block;
      max-width: 100%;
      -webkit-user-drag: none;
      user-select: none;
    }

    /* ===================== DESKTOP MENU ===================== */
    .desktop-menu-wrap {
      position: fixed;
      z-index: 120;
      right: calc(22px + env(safe-area-inset-right));
      bottom: calc(22px + env(safe-area-inset-bottom));
    }
    .desktop-menu {
      display: flex;
      align-items: center;
      gap: 2px;
      padding: 5px;
      border: 1px solid rgba(10,10,10,.08);
      border-radius: 15px;
      background: #fff;
      box-shadow: 0 10px 30px rgba(0,0,0,.14), 0 1px 2px rgba(0,0,0,.06);
    }
    .desktop-menu a {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 38px;
      padding: 0 13px;
      border-radius: 10px;
      color: #111;
      font-size: 13px;
      font-weight: 630;
      letter-spacing: -.022em;
      transition: color 180ms ease, background-color 180ms ease, transform 220ms var(--ease-soft);
    }
    .desktop-menu a:hover {
      background: #f0f0ed;
      transform: translateY(-1px);
    }
    .desktop-menu a[aria-current="page"] {
      color: #fff;
      background: #0a0a0a;
    }

    /* ===================== MOBILE MENU ===================== */
    .mobile-nav {
      display: none;
      position: fixed;
      z-index: 130;
      right: calc(14px + env(safe-area-inset-right));
      bottom: calc(14px + env(safe-area-inset-bottom));
    }
    .mobile-menu-panel {
      position: absolute;
      right: 0;
      bottom: 56px;
      width: min(310px,calc(100vw - 28px));
      padding: 7px;
      border: 1px solid rgba(10,10,10,.08);
      border-radius: 18px;
      background: #fff;
      box-shadow: 0 20px 48px rgba(0,0,0,.25), 0 1px 2px rgba(0,0,0,.06);
      opacity: 0;
      visibility: hidden;
      transform: translateY(10px) scale(.985);
      transform-origin: right bottom;
      transition: opacity 180ms ease, visibility 180ms, transform 260ms var(--ease-out);
    }
    .mobile-menu-panel nav { display: grid; gap: 3px; }
    .mobile-menu-panel a {
      display: flex;
      align-items: center;
      justify-content: space-between;
      min-height: 48px;
      padding: 0 14px;
      border-radius: 12px;
      color: #111;
      font-size: 15px;
      font-weight: 640;
      letter-spacing: -.025em;
      -webkit-tap-highlight-color: transparent;
      transition: background-color 160ms ease,color 160ms ease,transform 160ms var(--ease-soft);
    }
    .mobile-menu-panel a .arrow {
      opacity: .34;
      transform: translate(-3px,3px);
      transition: opacity 160ms ease, transform 180ms var(--ease-out);
    }
    .mobile-menu-panel a:active,
    .mobile-menu-panel a.is-selected,
    .mobile-menu-panel a[aria-current="page"] {
      color: #fff;
      background: #0a0a0a;
      transform: scale(.985);
    }
    .mobile-menu-panel a:active .arrow,
    .mobile-menu-panel a.is-selected .arrow,
    .mobile-menu-panel a[aria-current="page"] .arrow {
      opacity: 1;
      transform: translate(0,0);
    }
    .hamburger-button {
      position: relative;
      width: 48px;
      height: 48px;
      padding: 0;
      background: transparent;
      color: #fff;
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
    }
    .hamburger-line {
      position: absolute;
      left: 50%;
      width: 28px;
      height: 2px;
      border-radius: 999px;
      background: currentColor;
      transform: translateX(-50%);
      box-shadow: 0 1px 4px rgba(0,0,0,.48),0 0 10px rgba(0,0,0,.18);
      transition: top 270ms var(--ease-out),transform 270ms var(--ease-out),opacity 160ms ease;
    }
    .hamburger-line:nth-child(1) { top: 15px; }
    .hamburger-line:nth-child(2) { top: 23px; }
    .hamburger-line:nth-child(3) { top: 31px; }
    .mobile-nav.is-open .mobile-menu-panel {
      opacity: 1; visibility: visible; transform: translateY(0) scale(1);
    }
    .mobile-nav.is-open .hamburger-line:nth-child(1) {
      top: 23px; transform: translateX(-50%) rotate(45deg);
    }
    .mobile-nav.is-open .hamburger-line:nth-child(2) { opacity: 0; }
    .mobile-nav.is-open .hamburger-line:nth-child(3) {
      top: 23px; transform: translateX(-50%) rotate(-45deg);
    }

    /* ===================== INTRO ===================== */
    .gallery-header {
      position: relative;
      min-height: auto;
      display: flex;
      align-items: center;
      justify-content: center;
      padding:
        clamp(108px, 9vw, 150px)
        var(--page-x)
        clamp(28px, 3vw, 44px);
      overflow: hidden;
      isolation: isolate;
      text-align: center;
    }

    /* Tek bir editorial rule: görsel gürültü yaratmadan sayfayı çerçeveler. */
    .gallery-header::before {
      content: "";
      position: absolute;
      left: var(--page-x);
      right: var(--page-x);
      top: clamp(78px, 8vw, 112px);
      height: 1px;
      background: var(--hairline);
      transform: scaleX(0);
      transform-origin: center center;
      animation: rule-in 1200ms var(--ease-out) 120ms forwards;
    }

    .gallery-intro {
      position: relative;
      z-index: 2;
      width: min(1120px, 100%);
      margin-inline: auto;
    }

    .eyebrow {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex-wrap: wrap;
      gap: 8px 14px;
      width: auto;
      margin: 0 0 clamp(28px, 3.2vw, 46px);
      color: var(--muted);
      font-size: 11px;
      font-weight: 650;
      letter-spacing: .085em;
      text-transform: uppercase;
      opacity: 0;
      transform: translateY(10px);
      animation: control-in 650ms var(--ease-out) 250ms forwards;
    }

    .eyebrow span + span::before {
      content: "—";
      margin-right: 14px;
      color: rgba(245,245,242,.28);
    }

    .gallery-title {
      width: min(1040px, 100%);
      margin: 0 auto;
      max-width: none;
      font-size: clamp(46px, 6.7vw, 112px);
      font-weight: 650;
      line-height: .92;
      letter-spacing: -.064em;
      text-wrap: balance;
      text-align: center;
    }

    .gallery-title-line {
      display: block;
      overflow: hidden;
      padding-bottom: .075em;
    }

    .gallery-title-line > span {
      display: block;
      opacity: 0;
      transform: translate3d(0, 112%, 0);
      animation: title-reveal 1050ms var(--ease-out) forwards;
      will-change: transform, opacity;
    }

    .gallery-title-line:nth-child(1) > span {
      animation-delay: 180ms;
    }

    .gallery-title-line:nth-child(2) > span {
      animation-delay: 320ms;
    }

    .gallery-title-line--indent {
      padding-left: 0;
    }

    .gallery-note-row {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: clamp(22px, 2.6vw, 34px);
      width: min(760px, 100%);
      margin: clamp(30px, 3.4vw, 50px) auto 0;
    }

    .gallery-note {
      width: min(620px, 100%);
      margin: 0 auto;
      color: var(--muted);
      font-size: clamp(15px, 1.2vw, 18px);
      line-height: 1.52;
      letter-spacing: -.025em;
      text-align: center;
      opacity: 0;
      transform: translateY(14px);
      animation: note-in 760ms var(--ease-out) 620ms forwards;
    }

    .scroll-cue {
      flex: 0 0 auto;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      padding-bottom: 2px;
      color: rgba(245,245,242,.42);
      font-size: 10px;
      font-weight: 650;
      letter-spacing: .09em;
      text-transform: uppercase;
      opacity: 0;
      animation: control-in 650ms var(--ease-out) 800ms forwards;
    }

    .scroll-cue-line {
      position: relative;
      display: block;
      width: 52px;
      height: 1px;
      overflow: hidden;
      background: rgba(255,255,255,.16);
    }

    .scroll-cue-line i {
      position: absolute;
      inset: 0;
      display: block;
      background: rgba(255,255,255,.78);
      transform: translateX(-110%);
      animation: cue-scan 2200ms var(--ease-out) 1100ms infinite;
    }

    /* ===================== GALLERY SEQUENCE ===================== */
    .sequence {
      width: min(100%, 1920px);
      margin-inline: auto;
      padding: 0 var(--page-x) clamp(120px,14vw,220px);
    }
    .chapter {
      position: relative;
      padding-top: clamp(44px,6vw,90px);
      margin-top: clamp(76px,10vw,150px);
    }
    .chapter:first-child {
      margin-top: 0;
      padding-top: clamp(14px, 1.8vw, 28px);
    }
    .chapter-head {
      display: flex;
      align-items: center;
      gap: 16px;
      margin-bottom: clamp(22px,3vw,38px);
      color: var(--muted);
      font-size: 11px;
      font-weight: 650;
      letter-spacing: .09em;
      text-transform: uppercase;
    }
    .chapter-head::after {
      content: "";
      height: 1px;
      flex: 1;
      background: var(--hairline);
    }
    .layout {
      display: grid;
      gap: clamp(14px,1.6vw,26px);
    }
    .layout + .layout { margin-top: clamp(14px,1.6vw,26px); }
    .layout--hero { grid-template-columns: 1fr; }
    .layout--split {
      grid-template-columns: minmax(0,.72fr) minmax(0,1.28fr);
      align-items: end;
    }
    .layout--split-reverse {
      grid-template-columns: minmax(0,1.28fr) minmax(0,.72fr);
      align-items: start;
    }
    .layout--triptych {
      grid-template-columns: repeat(3,minmax(0,1fr));
      align-items: start;
    }
    .layout--quad {
      grid-template-columns: repeat(12,minmax(0,1fr));
      align-items: start;
    }
    .layout--quad > :nth-child(1) { grid-column: 1 / span 7; }
    .layout--quad > :nth-child(2) { grid-column: 8 / span 5; margin-top: 10vw; }
    .layout--quad > :nth-child(3) { grid-column: 2 / span 4; margin-top: 3vw; }
    .layout--quad > :nth-child(4) { grid-column: 6 / span 7; margin-top: 7vw; }

    .frame {
      position: relative;
      overflow: hidden;
      border-radius: var(--radius-lg);
      background: #171717;
      cursor: zoom-in;
      clip-path: inset(7% 0 7% 0 round var(--radius-lg));
      opacity: 0;
      transform: translateY(34px);
      transition:
        clip-path 950ms var(--ease-out),
        opacity 760ms ease,
        transform 950ms var(--ease-out);
    }
    .frame.is-visible {
      clip-path: inset(0 0 0 0 round var(--radius-lg));
      opacity: 1;
      transform: translateY(0);
    }
    .frame::after {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      border-radius: inherit;
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
    }
    .frame img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transform: translate3d(0,var(--media-y,0px),0) scale(1.035);
      filter: saturate(.92) contrast(.98);
      transition: transform 800ms var(--ease-out), filter 500ms ease;
      will-change: transform;
    }
    .frame:hover img {
      transform: translate3d(0,var(--media-y,0px),0) scale(1.055);
      filter: saturate(1) contrast(1);
    }
    .frame--wide { aspect-ratio: 16/9; }
    .frame--cinema { aspect-ratio: 2.15/1; }
    .frame--portrait { aspect-ratio: 4/5.65; }
    /* ===================== LIGHTBOX ===================== */
    .lightbox {
      position: fixed;
      inset: 0;
      z-index: 500;
      display: grid;
      grid-template-rows: auto 1fr auto;
      background: rgba(5,5,5,.985);
      color: #fff;
      opacity: 0;
      visibility: hidden;
      transition: opacity 220ms ease,visibility 220ms;
    }
    .lightbox.is-open { opacity: 1; visibility: visible; }
    .lightbox-top,
    .lightbox-bottom {
      position: relative;
      z-index: 2;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
      padding: max(16px,env(safe-area-inset-top)) max(18px,env(safe-area-inset-right)) 14px max(18px,env(safe-area-inset-left));
    }
    .lightbox-bottom {
      justify-content: center;
      padding: 14px max(18px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left));
      color: rgba(255,255,255,.62);
      font-size: 12px;
    }
    .lightbox-counter {
      font-size: 12px;
      font-weight: 680;
      letter-spacing: .08em;
    }
    .lightbox-close {
      position: relative;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 48px;
      height: 48px;
      padding: 0;
      color: #fff;
      background: transparent;
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
    }
    .lightbox-close::before,
    .lightbox-close::after {
      content: "";
      position: absolute;
      width: 22px;
      height: 2px;
      border-radius: 99px;
      background: currentColor;
      filter: drop-shadow(0 1px 3px rgba(0,0,0,.5));
    }
    .lightbox-close::before { transform: rotate(45deg); }
    .lightbox-close::after { transform: rotate(-45deg); }
    .lightbox-stage {
      position: relative;
      min-height: 0;
      display: grid;
      place-items: center;
      padding: 8px clamp(18px,5vw,84px);
      touch-action: pan-y;
      overflow: hidden;
    }
    .lightbox-image {
      position: relative;
      z-index: 1;
      max-width: 100%;
      max-height: 100%;
      width: auto;
      height: auto;
      object-fit: contain;
      opacity: 0;
      transform: scale(.985);
      transition: opacity 250ms ease, transform 420ms var(--ease-out);
    }
    .lightbox-image.is-ready { opacity: 1; transform: scale(1); }
    .lightbox-nav {
      position: absolute;
      z-index: 4;
      top: 50%;
      width: 52px;
      height: 72px;
      padding: 0;
      color: #fff;
      background: transparent;
      cursor: pointer;
      transform: translateY(-50%);
      -webkit-tap-highlight-color: transparent;
      transition: transform 180ms var(--ease-soft), opacity 180ms ease;
    }
    .lightbox-nav:hover {
      transform: translateY(-50%) scale(1.06);
    }
    .lightbox-prev { left: 8px; }
    .lightbox-next { right: 8px; }
    .lightbox-nav::before {
      content: "";
      position: absolute;
      left: 50%;
      top: 50%;
      width: 10px;
      height: 10px;
      border-left: 2.3px solid currentColor;
      border-bottom: 2.3px solid currentColor;
      filter: drop-shadow(0 1px 3px rgba(0,0,0,.55));
    }
    .lightbox-prev::before { transform: translate(-35%,-50%) rotate(45deg); }
    .lightbox-next::before { transform: translate(-65%,-50%) rotate(225deg); }

    /* ===================== ANIMATIONS ===================== */
    @keyframes title-reveal {
      from {
        opacity: 0;
        transform: translate3d(0,112%,0);
      }
      to {
        opacity: 1;
        transform: translate3d(0,0,0);
      }
    }

    @keyframes note-in {
      from {
        opacity: 0;
        transform: translateY(14px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    @keyframes control-in {
      from { opacity: 0; transform: translateY(14px); }
      to { opacity: 1; transform: translateY(0); }
    }

    @keyframes rule-in {
      from { transform: scaleX(0); }
      to { transform: scaleX(1); }
    }

    @keyframes cue-scan {
      0% { transform: translateX(-110%); }
      45%, 100% { transform: translateX(110%); }
    }

    /* ===================== TABLET ===================== */
    @media (max-width: 980px) {
      .layout--quad > :nth-child(1) { grid-column: 1 / span 8; }
      .layout--quad > :nth-child(2) { grid-column: 9 / span 4; }
      .layout--quad > :nth-child(3) { grid-column: 1 / span 5; }
      .layout--quad > :nth-child(4) { grid-column: 6 / span 7; }
    }

    /* ===================== MOBILE ===================== */
    @media (max-width: 820px) {
      :root {
        --page-x: clamp(14px, 4.25vw, 20px);
        --radius-lg: 17px;
      }

      .desktop-menu-wrap {
        display: none;
      }

      .mobile-nav {
        display: block;
        right: calc(clamp(18px, 5vw, 24px) + env(safe-area-inset-right));
        bottom: calc(clamp(18px, 5vw, 24px) + env(safe-area-inset-bottom));
      }


      .gallery-header {
        min-height: auto;
        align-items: center;
        justify-content: center;
        padding:
          max(92px, calc(68px + env(safe-area-inset-top)))
          var(--page-x)
          24px;
        text-align: center;
      }

      .gallery-header::before {
        top: max(70px, calc(52px + env(safe-area-inset-top)));
      }

      .gallery-intro {
        width: min(100%, 620px);
        margin-inline: auto;
      }

      .eyebrow {
        display: inline-flex;
        justify-content: center;
        flex-wrap: wrap;
        gap: 7px 10px;
        max-width: 100%;
        margin-bottom: clamp(22px, 6vw, 30px);
        font-size: 9.5px;
        line-height: 1.35;
        text-align: center;
      }

      .eyebrow span + span::before {
        margin-right: 10px;
      }

      .gallery-title {
        width: min(100%, 600px);
        margin-inline: auto;
        font-size: clamp(39px, 12vw, 62px);
        line-height: .95;
        letter-spacing: -.055em;
        text-align: center;
      }

      .gallery-title-line--indent {
        padding-left: 0;
      }

      .gallery-note-row {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: min(100%, 520px);
        margin: clamp(22px, 6vw, 30px) auto 0;
        gap: 20px;
      }

      .gallery-note {
        width: min(100%, 500px);
        margin-inline: auto;
        font-size: clamp(14px, 3.75vw, 16px);
        line-height: 1.52;
        text-align: center;
      }

      .scroll-cue {
        justify-content: center;
        margin-top: 0;
      }

      .scroll-cue-line {
        width: 38px;
      }

      /*
        Panel viewport dışına asla taşmaz.
        320px cihazda dahi kenarlarda kullanılabilir boşluk bırakır.
      */
      .mobile-menu-panel {
        width: min(310px, calc(100vw - 32px - env(safe-area-inset-left) - env(safe-area-inset-right)));
        max-height: min(70svh, 430px);
        overflow-y: auto;
        overscroll-behavior: contain;
      }


      .chapter {
        width: 100%;
        margin-top: clamp(68px, 18vw, 96px);
        padding-top: 28px;
      }

      .chapter:first-child {
        margin-top: 0;
        padding-top: 12px;
      }

      .chapter-head {
        margin-bottom: 16px;
      }

      /*
        Mobil-first yeniden kompozisyon:
        Masaüstü grid'i küçültülmez. Tüm layout'lar tek kolon olur
        ve item'lar container merkezine hizalanır.
      */
      .layout,
      .layout--hero,
      .layout--split,
      .layout--split-reverse,
      .layout--triptych,
      .layout--quad {
        grid-template-columns: minmax(0, 1fr);
        width: 100%;
        gap: 12px;
        justify-items: center;
        align-items: start;
      }

      .layout--quad > :nth-child(1),
      .layout--quad > :nth-child(2),
      .layout--quad > :nth-child(3),
      .layout--quad > :nth-child(4) {
        grid-column: 1;
        margin-top: 0;
      }

      /*
        1920x1080 ve benzeri yatay kareler:
        container genişliğinin tamamını kullanır.
      */
      .frame--cinema,
      .frame--wide {
        width: 100%;
        max-width: 100%;
        aspect-ratio: 16 / 9;
        justify-self: center;
      }

      /*
        1080x1920 ve benzeri dikey kareler:
        sabit bir kenara yaslanmak yerine fiziksel olarak ortalanır.
        Geniş telefon/tabletlerde gereksiz büyümesi de engellenir.
      */
      .frame--portrait {
        width: min(100%, 410px);
        max-width: 100%;
        aspect-ratio: 9 / 16;
        justify-self: center;
        margin-inline: auto;
      }

      .frame img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        transform: scale(1.012);
      }

      /*
        Touch ekranlarda hover davranışı kritik UX değildir;
        fotoğraf sabit kalır, lightbox tap ile açılır.
      */
      .frame:hover img {
        transform: scale(1.012);
      }

      .lightbox-stage {
        padding-inline: 10px;
      }

      .lightbox-image {
        max-width: calc(100vw - 20px);
        max-height: calc(100svh - 126px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
      }

      .lightbox-nav {
        display: block;
        width: 48px;
        height: 80px;
      }

      .lightbox-prev {
        left: max(2px, env(safe-area-inset-left));
      }

      .lightbox-next {
        right: max(2px, env(safe-area-inset-right));
      }

      .lightbox-bottom span:last-child {
        display: none;
      }
    }

    @media (max-width: 520px) {
      .gallery-title {
        font-size: clamp(36px, 11.4vw, 50px);
      }

      .gallery-note {
        line-height: 1.5;
      }

      .chapter-head {
        font-size: 10px;
      }

      .frame--portrait {
        width: min(100%, 360px);
      }

      .mobile-menu-panel a {
        min-height: 50px;
      }
    }

    /* 320–380 px sınıfı telefonlar */
    @media (max-width: 380px) {
      :root {
        --page-x: 12px;
      }

      .gallery-header {
        min-height: auto;
      }

      .gallery-title {
        font-size: clamp(34px, 10.9vw, 44px);
      }

      .gallery-title-line--indent {
        padding-left: 0;
      }

      .gallery-note {
        font-size: 14px;
      }

      .frame--portrait {
        width: min(100%, 334px);
      }

      .mobile-nav {
        right: calc(16px + env(safe-area-inset-right));
        bottom: calc(16px + env(safe-area-inset-bottom));
      }

      .mobile-menu-panel {
        width: calc(100vw - 24px - env(safe-area-inset-left) - env(safe-area-inset-right));
      }
    }

    /* Tablet / küçük laptop: daha dengeli spacing */
    @media (min-width: 821px) and (max-width: 1180px) {
      :root {
        --page-x: clamp(24px, 3vw, 36px);
      }

      .desktop-menu a {
        padding-inline: 10px;
      }

      .gallery-title {
        font-size: clamp(72px, 9vw, 108px);
      }
    }

    /* Telefon yataya çevrilirse lightbox yeniden sığar */
    @media (max-width: 820px) and (orientation: landscape) {
      .lightbox-top,
      .lightbox-bottom {
        padding-top: 8px;
        padding-bottom: 8px;
      }

      .lightbox-image {
        max-height: calc(100svh - 86px);
      }

      .lightbox-nav {
        height: 64px;
      }
    }


    .hamburger-button,
    .lightbox-close,
    .lightbox-nav,
    .mobile-menu-panel a,
    .desktop-menu a {
      touch-action: manipulation;
    }

    @media (max-width: 820px) {
      .gallery-title,
      .gallery-note,
      .eyebrow {
        overflow-wrap: normal;
        word-break: normal;
      }
    }

    /* ===================== REDUCED MOTION ===================== */
    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
      .frame,
      .gallery-title-line > span,
      .gallery-note,
      .eyebrow,
      .scroll-cue {
        transition-duration: 220ms !important;
        animation-duration: 420ms !important;
      }

      .scroll-cue-line i {
        animation: none !important;
      }
      .frame img { transform: none !important; }
      .lightbox-image { transition-duration: 180ms; }
    }

    @media (hover: hover) and (pointer: fine) {
      .frame:hover img {
        transform: translate3d(0,var(--media-y,0px),0) scale(1.055);
        filter: saturate(1) contrast(1);
      }

      .mobile-menu-panel a:hover {
        background: #f0f0ed;
      }

      .mobile-menu-panel a:hover .arrow {
        opacity: .9;
        transform: translate(0,0);
      }

      .mobile-menu-panel a[aria-current="page"]:hover,
      .mobile-menu-panel a.is-selected:hover {
        color: #fff;
        background: #0a0a0a;
      }
    }

    :focus-visible {
      outline: 3px solid #fff;
      outline-offset: 4px;
    }
    .desktop-menu :focus-visible,
    .mobile-menu-panel :focus-visible,
    .lightbox-close:focus-visible,
    .lightbox-nav:focus-visible {
      outline-color: #111;
    }