/* Midnight Lacquer locations gateway: cinematic hierarchy, tactile ink, brass signals, and ceremonial expansion. */
      :root {
        --ink: #090908;
        --ink-soft: #151310;
        --paper: #f2ebdd;
        --brass: #b9975b;
        --brass-pale: #d7be8b;
        --ember: #c63d2f;
        --white: #fffdf8;
        --display: "Bodoni Moda", Georgia, serif;
        --body: "Manrope", Arial, sans-serif;
        --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
        --ease-cinematic: cubic-bezier(0.77, 0, 0.175, 1);
      }

      *, *::before, *::after { box-sizing: border-box; }

      html {
        scroll-behavior: smooth;
        background: var(--ink);
      }

      body {
        margin: 0;
        overflow-x: hidden;
        background:
          radial-gradient(circle at 72% 16%, rgba(185, 151, 91, 0.08), transparent 28%),
          var(--ink);
        color: var(--paper);
        font-family: var(--body);
        line-height: 1.6;
      }

      body::before {
        position: fixed;
        z-index: 99;
        inset: 0;
        content: "";
        pointer-events: none;
        opacity: 0.035;
        background-image: url("../assets/images/lacquer-grain.svg");
        mix-blend-mode: soft-light;
      }

      a { color: inherit; text-decoration: none; }
      button, a { -webkit-tap-highlight-color: transparent; }
      img, video { display: block; max-width: 100%; }

      :focus-visible {
        outline: 2px solid var(--brass-pale);
        outline-offset: 4px;
      }

      .skip-link {
        position: fixed;
        z-index: 999;
        top: 14px;
        left: 14px;
        padding: 10px 15px;
        background: var(--paper);
        color: var(--ink);
        transform: translateY(-150%);
        transition: transform 180ms var(--ease-out);
      }

      .skip-link:focus { transform: translateY(0); }

      .opening {
        position: fixed;
        z-index: 300;
        inset: 0;
        display: grid;
        place-items: center;
        overflow: hidden;
        pointer-events: none;
        animation: openingGone 1.5s 1.45s forwards;
      }

      .opening::before,
      .opening::after {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 50.2%;
        content: "";
        background: var(--ink);
        transition: transform 1.05s var(--ease-cinematic);
        animation: curtainLeft 1.15s 0.86s forwards;
      }

      .opening::before { left: 0; }
      .opening::after { right: 0; animation-name: curtainRight; }

      .opening__mon {
        position: relative;
        z-index: 2;
        width: 268px;
        object-fit: contain;
        animation: monFade 700ms 0.62s var(--ease-out) forwards;
      }

      @keyframes curtainLeft { to { transform: translateX(-101%); } }
      @keyframes curtainRight { to { transform: translateX(101%); } }
      @keyframes monFade { to { opacity: 0; transform: scale(0.96); } }
      @keyframes openingGone { to { visibility: hidden; } }

      .cursor,
      .cursor-dot {
        position: fixed;
        z-index: 500;
        top: 0;
        left: 0;
        border-radius: 50%;
        pointer-events: none;
        transform: translate(-50%, -50%);
      }

      .cursor {
        width: 42px;
        height: 42px;
        border: 1px solid rgba(215, 190, 139, 0.55);
        transition: width 180ms var(--ease-out), height 180ms var(--ease-out), background 180ms var(--ease-out), border-color 180ms var(--ease-out);
      }

      .cursor-dot {
        width: 4px;
        height: 4px;
        background: var(--ember);
      }

      .cursor.is-large {
        width: 78px;
        height: 78px;
        border-color: rgba(242, 235, 221, 0.8);
        background: rgba(198, 61, 47, 0.1);
      }

      .site-shell {
        min-height: 100svh;
        display: grid;
        grid-template-rows: auto auto minmax(560px, 1fr) auto;
      }

      .site-header {
        position: relative;
        z-index: 30;
        display: flex;
        align-items: center;
        justify-content: space-between;
        min-height: 86px;
        padding: 0 clamp(22px, 3.2vw, 58px);
        border-bottom: 1px solid rgba(185, 151, 91, 0.18);
      }

      .brand {
        display: inline-flex;
        align-items: center;
        gap: 14px;
        line-height: 1;
      }

      .brand__mark {
        width: 250px;
        object-fit: contain;
        filter: drop-shadow(0 0 12px rgba(198, 61, 47, 0.18));
      }

      .brand__word {
        position: relative;
        display: inline-flex;
        align-items: baseline;
        font-family: var(--display);
        font-size: 1.55rem;
        font-weight: 500;
        letter-spacing: 0.075em;
      }

      .brand__tail {
        position: relative;
        margin-left: 0.025em;
        font-style: italic;
        letter-spacing: 0.015em;
        transform: skewX(-4deg);
      }

      .brand__tail::after {
        position: absolute;
        right: -6px;
        bottom: -2px;
        width: 19px;
        height: 3px;
        content: "";
        background: var(--ember);
        clip-path: polygon(0 35%, 100% 0, 72% 100%, 0 72%);
        transform: rotate(-48deg);
        transform-origin: right;
      }

      .header-meta {
        display: flex;
        align-items: center;
        gap: clamp(18px, 3vw, 48px);
      }

      .header-kicker {
        color: rgba(242, 235, 221, 0.5);
        font-size: 0.62rem;
        font-weight: 600;
        letter-spacing: 0.18em;
        text-transform: uppercase;
      }

      .story-link {
        display: inline-flex;
        align-items: center;
        gap: 12px;
        min-height: 42px;
        padding: 0 18px;
        border: 1px solid rgba(242, 235, 221, 0.34);
        font-size: 0.62rem;
        font-weight: 700;
        letter-spacing: 0.15em;
        text-transform: uppercase;
        transition: border-color 180ms var(--ease-out), background 180ms var(--ease-out), color 180ms var(--ease-out), transform 140ms var(--ease-out);
      }

      .story-link:hover {
        border-color: var(--paper);
        background: var(--paper);
        color: var(--ink);
      }

      .story-link:active { transform: scale(0.97); }

      .intro {
        position: relative;
        z-index: 2;
        display: grid;
        grid-template-columns: minmax(0, 1.25fr) minmax(290px, 0.75fr);
        align-items: end;
        gap: clamp(34px, 8vw, 140px);
        padding: clamp(25px, 1vw, 104px) clamp(22px, 3.2vw, 56px) clamp(44px, 5vw, 5px);
        overflow: hidden;
        background:
          linear-gradient(112deg, transparent 0 46%, rgba(185, 151, 91, 0.025) 46% 46.12%, transparent 46.12% 100%),
          radial-gradient(ellipse at 74% 30%, rgba(185, 151, 91, 0.055), transparent 32%);
      }

      .intro::before {
        position: absolute;
        z-index: -1;
        top: -42%;
        right: 4%;
        width: min(29vw, 430px);
        aspect-ratio: 1;
        border: 1px solid rgba(185, 151, 91, 0.12);
        content: "";
        transform: rotate(45deg);
      }

      .intro::after {
        position: absolute;
        z-index: -1;
        right: -40px;
        bottom: -76px;
        width: min(28vw, 400px);
        height: min(28vw, 400px);
        content: "";
        background: url('../assets/images/fushimi-mon-icon.png') center / contain no-repeat;
        opacity: 0.04;
        filter: grayscale(1) contrast(1.4);
      }

      .eyebrow {
        display: flex;
        align-items: center;
        gap: 15px;
        margin: 0 0 22px;
        color: var(--brass-pale);
        font-size: 0.65rem;
        font-weight: 600;
        letter-spacing: 0.2em;
        text-transform: uppercase;
      }

      .eyebrow::before {
        width: 42px;
        height: 1px;
        content: "";
        background: currentColor;
      }

      h1 {
        max-width: 980px;
        margin: 0;
        font-family: var(--display);
        font-size: clamp(4.2rem, 8.5vw, 9.8rem);
        font-weight: 400;
        letter-spacing: -0.06em;
        line-height: 0.79;
      }

      h1 em {
        color: var(--brass-pale);
        font-weight: 400;
      }

      .intro-copy {
        margin: 0 0 4px;
        padding-top: 26px;
        border-top: 1px solid rgba(185, 151, 91, 0.36);
        color: rgba(242, 235, 221, 0.62);
        font-size: clamp(0.88rem, 1.05vw, 1rem);
      }

      .intro-copy strong {
        display: block;
        margin-bottom: 10px;
        color: var(--paper);
        font-family: var(--display);
        font-size: 1.45rem;
        font-weight: 400;
      }

      .destination-deck {
        position: relative;
        display: flex;
        min-height: 610px;
        overflow: hidden;
        border-top: 1px solid rgba(185, 151, 91, 0.24);
        border-bottom: 1px solid rgba(185, 151, 91, 0.24);
        background:
          repeating-linear-gradient(90deg, transparent 0 8.32%, rgba(255, 255, 255, 0.012) 8.32% 8.39%),
          linear-gradient(180deg, #100e0c, var(--ink));
      }

      .destination-deck::before {
        position: absolute;
        z-index: 10;
        top: 0;
        right: 0;
        left: 0;
        height: 1px;
        content: "";
        background: var(--ember);
        transform: scaleX(0);
        transform-origin: left;
        animation: railDraw 1.1s 1.6s var(--ease-cinematic) forwards;
      }

      @keyframes railDraw { to { transform: scaleX(1); } }

      .destination {
        position: relative;
        flex: 1 1 24%;
        min-width: 0;
        overflow: hidden;
        border-right: 1px solid rgba(242, 235, 221, 0.16);
        isolation: isolate;
        opacity: 0;
        transform: translateY(24px);
        animation: panelEnter 800ms var(--ease-out) forwards;
        transition: flex 720ms var(--ease-cinematic), filter 300ms var(--ease-out);
      }

.destination {
  flex: 1 1 25%;
}

.destination:nth-child(1),
.destination:nth-child(2),
.destination:nth-child(3),
.destination:nth-child(4) {
  flex-basis: 25%;
}

.destination:nth-child(4) {
  border-right: 0;
}


      @keyframes panelEnter { to { opacity: 1; transform: translateY(0); } }

      .destination-deck:has(.destination:hover) .destination,
      .destination-deck:has(.destination:focus-visible) .destination {
        flex-grow: 0.76;
        filter: saturate(0.74) brightness(0.72);
      }

      .destination-deck .destination:hover,
      .destination-deck .destination:focus-visible {
        flex-grow: 2.15;
        filter: none;
      }

      .destination__media {
        position: absolute;
        z-index: -2;
        inset: 0;
      }

      .destination__media img,
      .destination__media video {
        width: 100%;
        height: 116%;
        object-fit: cover;
        object-position: center top;
        filter: saturate(0.74) brightness(0.72) contrast(1.1);
        transform: scale(1.035);
        transition: transform 1s var(--ease-cinematic), filter 400ms var(--ease-out);
      }

      .destination__media video {
        pointer-events: none;
      }

      .destination:nth-child(1) .destination__media :is(img, video) { object-position: center; }
      .destination:nth-child(2) .destination__media :is(img, video) { object-position: 52% center; }
      .destination:nth-child(3) .destination__media :is(img, video) { object-position: 47% center; }
      .destination:nth-child(4) .destination__media :is(img, video) { object-position: 58% center; }

      .media-loader {
        position: absolute;
        z-index: 3;
        right: 24px;
        bottom: 24px;
        left: 24px;
        display: grid;
        grid-template-columns: 54px auto;
        align-items: center;
        gap: 12px;
        color: rgba(242, 235, 221, 0.66);
        font-size: 0.52rem;
        font-weight: 700;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        opacity: 1;
        transition: opacity 300ms var(--ease-out);
      }

      .media-loader__track {
        position: relative;
        height: 1px;
        overflow: hidden;
        background: rgba(242, 235, 221, 0.24);
      }

      .media-loader__track::after {
        position: absolute;
        inset: 0;
        content: "";
        background: var(--ember);
        transform: translateX(-105%) scaleX(0.45);
        transform-origin: left;
        animation: filmProgress 1.15s var(--ease-in-out, ease-in-out) infinite;
      }

      .destination__media.is-ready .media-loader {
        opacity: 0;
        pointer-events: none;
      }

      @keyframes filmProgress {
        50% { transform: translateX(75%) scaleX(0.58); }
        100% { transform: translateX(220%) scaleX(0.38); }
      }

      .destination::before {
        position: absolute;
        z-index: -1;
        inset: 0;
        content: "";
        background:
          linear-gradient(180deg, rgba(3, 3, 2, 0.1), rgba(3, 3, 2, 0.13) 40%, rgba(3, 3, 2, 0.9) 72%, #030302 86%),
          linear-gradient(90deg, rgba(3, 3, 2, 0.34), transparent 55%);
        transition: background 420ms var(--ease-out);
      }

      .destination::after {
        position: absolute;
        z-index: 2;
        top: 13%;
        right: 12px;
        bottom: 13%;
        width: 1px;
        content: "";
        background: var(--ember);
        opacity: 0.5;
        transform: scaleY(0.18);
        transform-origin: top;
        transition: opacity 240ms var(--ease-out), transform 680ms var(--ease-cinematic);
      }

      .destination:hover .destination__media :is(img, video),
      .destination:focus-visible .destination__media :is(img, video) {
        filter: saturate(0.98) brightness(0.88) contrast(1.04);
        transform: scale(1.105);
      }

      .destination:hover::before,
      .destination:focus-visible::before {
        background:
          linear-gradient(180deg, rgba(198, 61, 47, 0.12), rgba(3, 3, 2, 0.08) 40%, rgba(3, 3, 2, 0.88) 72%, #030302 86%),
          linear-gradient(90deg, rgba(3, 3, 2, 0.32), transparent 58%);
      }

      .destination:hover::after,
      .destination:focus-visible::after {
        opacity: 1;
        transform: scaleY(1);
      }

      .destination__index,
      .destination__borough,
      .destination__action {
        font-size: 1rem;
        font-weight: 700;
        letter-spacing: 0.18em;
        text-transform: uppercase;
      }

      .destination__index {
        position: absolute;
        top: 26px;
        left: 26px;
        display: flex;
        align-items: center;
        gap: 12px;
        color: rgba(242, 235, 221, 0.68);
      }

      .destination__index::after {
        width: 34px;
        height: 1px;
        content: "";
        background: var(--brass);
      }

      .destination__arrow {
        position: absolute;
        top: 22px;
        right: 22px;
        display: grid;
        place-items: center;
        width: 42px;
        height: 42px;
        border: 1px solid rgba(242, 235, 221, 0.42);
        border-radius: 50%;
        font-size: 1rem;
        transition: background 200ms var(--ease-out), color 200ms var(--ease-out), transform 280ms var(--ease-out), border-color 200ms var(--ease-out);
      }

      .destination:hover .destination__arrow,
      .destination:focus-visible .destination__arrow {
        border-color: var(--paper);
        background: var(--paper);
        color: var(--ink);
        transform: rotate(45deg);
      }

      .destination__content {
        position: absolute;
        right: clamp(22px, 2vw, 38px);
        bottom: clamp(26px, 3vw, 50px);
        left: clamp(22px, 2vw, 38px);
      }

      .destination__borough {
        margin: 0 0 10px;
        color: var(--brass-pale);
      }

      .destination h2 {
        margin: 0;
        font-family: var(--display);
        font-size: clamp(2.45rem, 3.5vw, 5.8rem);
        font-weight: 400;
        letter-spacing: -0.055em;
        line-height: 0.86;
        transition: transform 500ms var(--ease-out);
      }

      .destination h2 em {
        display: block;
        color: var(--paper);
        font-weight: 400;
      }

      .destination:hover h2,
      .destination:focus-visible h2 { transform: translateY(-6px); }

      .destination__details {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 20px;
        align-items: end;
        max-height: 0;
        margin-top: 0;
        overflow: hidden;
        opacity: 0;
        transform: translateY(14px);
        transition: max-height 500ms var(--ease-cinematic), margin 500ms var(--ease-cinematic), opacity 260ms var(--ease-out), transform 500ms var(--ease-out);
      }

      .destination:hover .destination__details,
      .destination:focus-visible .destination__details {
        max-height: 130px;
        margin-top: 28px;
        opacity: 1;
        transform: translateY(0);
      }

      .destination address {
        color: rgba(242, 235, 221, 0.72);
        font-size: 1.1rem;
        font-style: normal;
        line-height: 1.1;
      }

      .destination__action {
        display: flex;
        align-items: center;
        gap: 12px;
        padding-bottom: 5px;
        border-bottom: 1px solid var(--ember);
        white-space: nowrap;
      }




      .site-footer {
        display: grid;
        grid-template-columns: auto 1fr auto;
        align-items: center;
        gap: 28px;
        min-height: 76px;
        padding: 0 clamp(22px, 3.2vw, 58px);
        color: rgba(242, 235, 221, 0.4);
        font-size: 0.58rem;
        font-weight: 600;
        letter-spacing: 0.15em;
        text-transform: uppercase;
      }

      .footer-line {
        height: 1px;
        background: linear-gradient(to right, rgba(185, 151, 91, 0.48), rgba(185, 151, 91, 0.06));
      }

      .location-count { color: var(--brass-pale); }

      @media (max-width: 1120px) {
        .site-shell { grid-template-rows: auto auto auto auto; }
        .destination-deck {
          display: grid;
          grid-template-columns: 1fr;
          gap: 16px;
          padding: 16px 0 70px;
        }
        .destination,
        .destination-deck:has(.destination:hover) .destination,
        .destination-deck:has(.destination:focus-visible) .destination,
        .destination-deck .destination:hover,
        .destination-deck .destination:focus-visible {
          width: 92%;
          min-height: 590px;
          border: 1px solid rgba(242, 235, 221, 0.16);
          flex: none;
          filter: none;
        }
        .destination:nth-child(1) { width: 95%; min-height: 650px; justify-self: start; }
        .destination:nth-child(2) { width: 86%; min-height: 560px; justify-self: end; }
        .destination:nth-child(3) { width: 92%; min-height: 620px; justify-self: start; }
        .destination:nth-child(4) { width: 84%; min-height: 540px; justify-self: end; }
        .destination__details { max-height: 130px; margin-top: 24px; opacity: 1; transform: none; }
      }

      @media (max-width: 760px) {
        .cursor, .cursor-dot { display: none; }
        .site-header { min-height: 74px; padding-inline: 16px; }
        .brand__mark { width: 250px; }
        .brand__word { font-size: 1.2rem; }
        .header-kicker { display: none; }
        .story-link { padding: 0 12px; }
        .story-link span:first-child { display: none; }
        .intro {
          grid-template-columns: 1fr;
          gap: 32px;
          padding: 32px 16px 46px;
        }
        h1 { font-size: clamp(4rem, 20vw, 6.3rem); line-height: 0.83; }
        .intro-copy { max-width: 440px; }
        .destination-deck { grid-template-columns: 1fr; }
        .destination,
        .destination-deck:has(.destination:hover) .destination,
        .destination-deck:has(.destination:focus-visible) .destination,
        .destination-deck .destination:hover,
        .destination-deck .destination:focus-visible {
          min-height: 580px;
        }
        .destination:nth-child(1) { width: 96%; min-height: 620px; }
        .destination:nth-child(2) { width: 90%; min-height: 560px; }
        .destination:nth-child(3) { width: 94%; min-height: 600px; }
        .destination:nth-child(4) { width: 88%; min-height: 540px; }
        .destination h2 { font-size: clamp(3.3rem, 15vw, 5rem); }
        .destination__details { grid-template-columns: 1fr; gap: 18px; }
        .destination__action { width: max-content; }
        .site-footer { grid-template-columns: auto 1fr; gap: 18px; min-height: 88px; }
        .site-footer span:last-child { display: none; }
      }

      @media (max-width: 420px) {
        .destination,
        .destination-deck:has(.destination:hover) .destination,
        .destination-deck:has(.destination:focus-visible) .destination,
        .destination-deck .destination:hover,
        .destination-deck .destination:focus-visible { min-height: 540px; }
        .destination:nth-child(1) { min-height: 590px; }
        .destination:nth-child(2) { min-height: 530px; }
        .destination:nth-child(3) { min-height: 565px; }
        .destination:nth-child(4) { min-height: 510px; }
        .destination__arrow { width: 38px; height: 38px; }
      }

      @media (pointer: coarse) {
        .cursor, .cursor-dot { display: none; }
      }

      @media (prefers-reduced-motion: reduce) {
        html { scroll-behavior: auto; }
        *, *::before, *::after {
          animation-duration: 0.01ms !important;
          animation-iteration-count: 1 !important;
          transition-duration: 0.01ms !important;
          scroll-behavior: auto !important;
        }
        .opening { display: none; }
        .destination { opacity: 1; transform: none; }
        .media-loader { display: none; }
      }




.destination {
  position: relative;
}

.destination-arrow {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  left: auto;
  z-index: 5;

  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  border: 1px solid rgba(247, 241, 225, 0.55);
  border-radius: 50%;
  color: #f7f1e1;
}

.destination-arrow svg {
  width: 1.1rem;
  height: 1.1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (max-width: 700px) {
  .destination-arrow {
    top: 1.25rem;
    right: 1.25rem;
    left: auto;
  }
}