/* Sui: ink, warm silver and muted brass. Layers: scene 0-3, content 5,
   hero 10, navigation 20, grain 30, native dialog in the top layer. */
:root {
  color-scheme:dark;
  --ink:#0b0c0a;
  --surface:#141612;
  --paper:#ece9df;
  --muted:#a7aaa0;
  --gold:#b8a17b;
  --line:rgb(236 233 223 / 16%);
  --serif:"Shippori Mincho B1","Hiragino Mincho ProN","Yu Mincho",serif;
  --sans:"Zen Kaku Gothic New","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
  --display:"Bodoni Moda",Georgia,serif;
  --ease:cubic-bezier(.22,1,.36,1);
  --gutter:clamp(28px,6vw,112px)
}

* {
  box-sizing:border-box
}

html {
  scroll-behavior:smooth;
  scroll-padding-top:110px
}

body {
  margin:0;
  background:var(--ink);
  color:var(--paper);
  font:15px/1.9 var(--sans);
  -webkit-font-smoothing:antialiased
}

body::after {
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:30;
  opacity:.025;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='.7' filter='url(%23n)'/%3E%3C/svg%3E")
}

[hidden] {
  display:none!important
}

::selection {
  background:var(--gold);
  color:var(--ink)
}

a {
  color:inherit;
  text-underline-offset:6px
}

button,summary,a {
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation
}

button {
  font:inherit;
  cursor:pointer
}

img {
  display:block;
  width:auto;
  max-width:100%;
  height:auto
}

p,h1,h2,h3,figure,dl,dd {
  margin:0
}

a:focus-visible,button:focus-visible,summary:focus-visible {
  outline:2px solid var(--gold);
  outline-offset:7px
}

main:focus,section:focus {
  outline:none
}

.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap
}

.skip-link {
  position:fixed;
  top:8px;
  left:8px;
  z-index:40;
  background:var(--paper);
  color:var(--ink);
  padding:12px 20px;
  transform:translateY(-150%)
}

.skip-link:focus {
  transform:none
}

.display {
  font:400 clamp(76px,8.2vw,132px)/1.12 var(--display);
  letter-spacing:-.055em
}

.display em {
  font-weight:400
}

.section-label {
  font:11px/1.6 var(--sans);
  letter-spacing:.19em;
  color:var(--gold);
  margin-bottom:32px
}

.section-label>span {
  display:inline-block;
  margin-right:40px;
  font-size:12px;
  letter-spacing:0
}

.lead {
  font-size:15px;
  line-height:2.2;
  letter-spacing:.05em;
  color:#c2c5ba;
  max-width:42em
}

.small-copy,.note {
  font-size:12px;
  line-height:2.1;
  letter-spacing:.03em;
  color:var(--muted)
}

.note {
  margin-top:24px
}

.page-section {
  max-width:1540px;
  margin:auto;
  padding:140px var(--gutter);
  position:relative;
  scroll-margin-top:30px
}

h2:not(.display) {
  font:400 clamp(30px,3.1vw,48px)/1.7 var(--serif);
  letter-spacing:.08em;
  margin-bottom:32px
}

h3 {
  font:400 23px/1.8 var(--serif);
  letter-spacing:.06em
}

header {
  position:fixed;
  inset:24px 40px auto;
  z-index:20;
  height:66px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px
}

header::before {
  content:"";
  position:absolute;
  inset:-5px -18px;
  z-index:-1;
  background:rgb(11 12 10 / 78%);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  opacity:0;
  transition:opacity .5s var(--ease)
}

header.over-content::before {
  opacity:1
}

.brand {
  display:flex;
  align-items:center;
  gap:18px;
  text-decoration:none;
  z-index:2;
  position:relative
}

.brand img {
  width:42px;
  height:46px;
  object-fit:contain
}

.brand span {
  font-size:10px;
  line-height:1.65;
  letter-spacing:.19em
}

.brand small {
  font-size:8px;
  letter-spacing:.22em;
  color:var(--muted)
}

.header-actions {
  display:flex;
  align-items:center;
  gap:44px;
  position:relative;
  z-index:2
}

.header-reserve {
  display:flex;
  align-items:center;
  gap:26px;
  font-size:12px;
  text-decoration:none;
  transition:color .35s var(--ease)
}

.header-reserve span {
  color:var(--gold);
  font-size:23px
}

.header-reserve:hover {
  color:var(--gold)
}

#menu-toggle {
  display:flex;
  align-items:center;
  gap:20px;
  background:none;
  color:var(--paper);
  border:0;
  min-height:48px;
  padding:0 0 0 10px
}

.menu-toggle-label {
  font-size:10px;
  letter-spacing:.16em
}

.menu-toggle-icon {
  display:block;
  width:32px;
  height:20px;
  position:relative
}

.menu-toggle-icon i {
  position:absolute;
  left:0;
  top:5px;
  width:32px;
  height:1px;
  background:var(--paper);
  transition:transform .5s var(--ease),top .5s var(--ease)
}

.menu-toggle-icon i:last-child {
  top:14px;
  width:24px;
  left:auto;
  right:0
}

.menu-open .menu-toggle-icon i {
  top:10px;
  transform:rotate(45deg)
}

.menu-open .menu-toggle-icon i:last-child {
  width:32px;
  transform:rotate(-45deg)
}

.menu-open .header-reserve {
  visibility:hidden
}

.menu-open {
  overflow:hidden
}

#main-nav {
  position:fixed;
  inset:0;
  padding:130px max(100px,17vw) 60px;
  background:rgb(11 12 10 / 99%);
  display:grid;
  align-content:center;
  grid-template-columns:1fr;
  gap:4px;
  overflow:auto;
  transition:opacity .45s var(--ease),visibility .45s;
  z-index:1
}

#main-nav>a {
  display:flex;
  align-items:center;
  gap:30px;
  width:max-content;
  max-width:100%;
  font:400 clamp(40px,6.5vw,94px)/1.25 var(--display);
  letter-spacing:-.04em;
  text-decoration:none;
  transition:color .4s var(--ease),transform .8s var(--ease),opacity .8s var(--ease)
}

#main-nav>a:hover,#main-nav>a[aria-current] {
  color:var(--gold);
  transform:translateX(12px)
}

#main-nav>a.nav-reserve {
  font:14px var(--sans);
  letter-spacing:.1em;
  border-bottom:1px solid var(--line);
  margin:28px 0 0;
  padding:0 0 14px
}

.nav-meta {
  position:absolute;
  right:9vw;
  bottom:70px;
  display:flex;
  flex-direction:column;
  gap:35px;
  color:var(--muted);
  font-size:12px;
  line-height:2.2
}

.nav-meta>p:first-child {
  font:18px var(--serif);
  letter-spacing:.12em
}

.js #main-nav[data-open="false"] {
  opacity:0;
  visibility:hidden;
  pointer-events:none
}

.js #main-nav[data-open="false"]>a {
  transform:translateY(22px);
  opacity:0
}

.js #main-nav[data-open="true"]>a {
  transition-delay:.08s
}

.js #main-nav[data-open="true"]>a:nth-of-type(2) {
  transition-delay:.12s
}

.js #main-nav[data-open="true"]>a:nth-of-type(3) {
  transition-delay:.16s
}

.js #main-nav[data-open="true"]>a:nth-of-type(4) {
  transition-delay:.2s
}

.nav-visual {
  display:none
}

@media(min-width:1101px) {
  .js .nav-visual {
    display:block;
    position:absolute;
    inset:0 0 0 43%;
    z-index:-1;
    overflow:hidden;
    pointer-events:none
  }

  .nav-visual img {
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    opacity:0;
    transform:scale(1.065);
    filter:saturate(.8) brightness(.76);
    transition:opacity .7s var(--ease),transform 1.5s var(--ease)
  }

  .nav-visual img.is-active {
    opacity:1;
    transform:scale(1)
  }

  .nav-visual::after {
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(90deg,var(--ink),rgb(11 12 10 / 22%) 58%),linear-gradient(0deg,var(--ink),transparent 65%);
    pointer-events:none
  }

  .nav-meta {
    max-width:26em
  }
}

.text-link {
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:48px;
  min-height:64px;
  min-width:230px;
  border-bottom:1px solid var(--line);
  text-decoration:none;
  font-size:13px;
  letter-spacing:.06em;
  position:relative;
  transition:color .4s var(--ease),border-color .4s var(--ease)
}

.text-link::after {
  content:"";
  position:absolute;
  inset:auto 0 -1px;
  height:1px;
  background:var(--gold);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .6s var(--ease)
}

.text-link:hover::after,.text-link:focus-visible::after {
  transform:scaleX(1)
}

.link-arrow {
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  flex-shrink:0;
  border:1px solid var(--line);
  border-radius:50%;
  color:var(--gold);
  font-size:20px;
  line-height:1;
  transition:transform .5s var(--ease),background .4s var(--ease),color .4s var(--ease)
}

.text-link:hover {
  color:var(--gold);
  border-color:var(--gold)
}

.text-link:hover .link-arrow {
  transform:translate(2px,-2px);
  background:var(--gold);
  color:var(--ink)
}

.round-link,.booking-ring {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  aspect-ratio:1;
  width:132px;
  flex-shrink:0;
  border:1px solid rgb(236 233 223 / 35%);
  border-radius:50%;
  text-decoration:none;
  transition:background .5s var(--ease),color .5s var(--ease),transform .5s var(--ease)
}

.round-link>span:first-child,.booking-ring>span:first-child {
  font-size:11px;
  letter-spacing:.04em
}

.round-link>span:last-child,.booking-ring>span:last-child {
  font:38px/1 var(--sans);
  color:var(--gold);
  transition:transform .5s var(--ease)
}

.round-link:hover,.booking-ring:hover {
  background:var(--paper);
  color:var(--ink);
  transform:scale(1.03)
}

.round-link:hover>span:last-child,.booking-ring:hover>span:last-child {
  transform:translate(3px,-3px);
  color:var(--ink)
}

.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:25px;
  min-height:50px;
  padding:12px 28px;
  background:var(--paper);
  border:1px solid var(--paper);
  color:var(--ink);
  font-size:12px;
  letter-spacing:.1em;
  text-decoration:none;
  transition:background .4s var(--ease),transform .4s var(--ease)
}

.button:hover {
  background:var(--gold);
  border-color:var(--gold)
}

.button:active {
  transform:scale(.98)
}

.button.secondary {
  background:rgb(11 12 10 / 25%);
  color:var(--paper);
  border-color:rgb(236 233 223 / 35%)
}

.button.secondary:hover {
  background:var(--paper);
  color:var(--ink)
}

#stage,#vignette,#grain,#hero-ui {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100svh
}

#stage {
  z-index:0;
  overflow:hidden
}

#stage picture,#stage .poster {
  width:100%;
  height:100%;
  display:block;
  object-fit:cover
}

#stage canvas {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  opacity:0;
  transition:opacity 1.2s var(--ease);
  filter:saturate(.82) contrast(1.05)
}

#stage.ready canvas {
  opacity:1
}

#vignette {
  z-index:1;
  pointer-events:none;
  background:radial-gradient(ellipse 85% 85% at 50% 45%,transparent 25%,rgb(0 0 0 / 40%) 85%,rgb(0 0 0 / 70%) 100%)
}

#veil {
  position:fixed;
  inset:0;
  z-index:2;
  background:var(--ink);
  opacity:0;
  pointer-events:none
}

#grain {
  z-index:3;
  pointer-events:none
}

.scene-active #stage,.scene-active #vignette,.scene-active #grain,.scene-active #hero-ui {
  position:fixed
}

#hero-ui {
  z-index:10;
  pointer-events:none
}

.scene-active #hero-ui {
  opacity:0
}

.hero-frame {
  display:none
}

.tate {
  position:absolute;
  top:27%;
  right:7vw;
  writing-mode:vertical-rl;
  text-orientation:upright;
  font:400 clamp(22px,2vw,30px)/1.9 var(--serif);
  letter-spacing:.33em;
  text-shadow:0 1px 20px #000
}

.hero-mark {
  position:absolute;
  left:7vw;
  bottom:9svh
}

.hero-mark .en {
  font-size:9px;
  letter-spacing:.3em;
  color:var(--gold);
  margin-bottom:18px
}

.hero-mark h1 {
  width:clamp(110px,10vw,154px)
}

.hero-mark h1 img {
  width:100%;
  filter:brightness(.95)
}

.hero-actions {
  display:flex;
  gap:12px;
  margin-top:28px;
  pointer-events:auto
}

.motion-toggle {
  position:absolute;
  top:124px;
  left:7vw;
  border:0;
  border-bottom:1px solid rgb(236 233 223 / 23%);
  background:none;
  color:var(--muted);
  padding:8px 0;
  min-height:36px;
  font-size:10px;
  letter-spacing:.06em;
  pointer-events:auto
}

.motion-toggle:hover {
  color:var(--paper)
}

.scene-status {
  position:absolute;
  top:172px;
  left:7vw;
  right:7vw;
  max-width:350px;
  font-size:11px;
  color:var(--muted)
}

.scroll-cue {
  position:absolute;
  right:7vw;
  bottom:9svh;
  font-size:9px;
  letter-spacing:.2em;
  color:var(--muted)
}

.scroll-cue span {
  display:block;
  font-size:26px;
  line-height:1.4;
  color:var(--gold);
  text-align:right;
  margin-top:12px
}

#scroll-space {
  height:100svh;
  position:relative;
  z-index:4;
  pointer-events:none
}

.scene-active #scroll-space {
  height:260svh
}

main {
  position:relative;
  z-index:5;
  background:var(--ink);
  overflow:clip
}

.photograph {
  min-width:0
}

.photograph>a {
  display:block;
  position:relative;
  overflow:hidden;
  background:#1a1d17;
  cursor:zoom-in
}

.photograph img {
  width:100%;
  height:auto;
  filter:saturate(.85) contrast(1.035) brightness(.98);
  transition:transform 1.3s var(--ease)
}

.photograph a:hover img {
  transform:scale(1.045)
}

.photograph a::after {
  content:"↗";
  position:absolute;
  bottom:22px;
  right:22px;
  width:44px;
  height:44px;
  border:1px solid rgb(236 233 223 / 45%);
  border-radius:50%;
  display:grid;
  place-items:center;
  font:24px var(--sans);
  background:rgb(11 12 10 / 40%);
  color:var(--paper);
  opacity:0;
  transform:translateY(8px);
  transition:opacity .5s var(--ease),transform .5s var(--ease)
}

.photograph a:hover::after,.photograph a:focus-visible::after {
  opacity:1;
  transform:none
}

.photograph figcaption {
  font-size:11px;
  line-height:1.8;
  letter-spacing:.07em;
  color:var(--muted);
  padding-top:15px;
  display:flex;
  align-items:center;
  gap:12px
}

.photograph figcaption::before {
  content:"";
  display:block;
  width:28px;
  height:1px;
  background:var(--gold);
  opacity:.5
}

.reveal {
  opacity:0;
  transform:translateY(38px);
  transition:opacity 1.1s var(--ease),transform 1.1s var(--ease)
}

.reveal.in {
  opacity:1;
  transform:none
}

.photograph.reveal:not(.in) img {
  transform:scale(1.065)
}

.cinematic {
  position:relative;
  min-height:780px;
  height:95svh;
  max-height:1100px;
  isolation:isolate;
  overflow:hidden
}

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

.cinematic-media .photograph,.cinematic-media a,.cinematic-media img {
  width:100%;
  height:100%;
  object-fit:cover
}

.cinematic-media img {
  object-position:65% 50%;
  filter:saturate(.85) contrast(1.035) brightness(.94)
}

.cinematic-media figcaption {
  display:none
}

.cinematic-media a::after {
  display:none
}

.cinematic::after {
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:linear-gradient(90deg,rgb(5 8 5 / 78%),rgb(5 8 5 / 36%) 34%,transparent 72%),linear-gradient(0deg,rgb(5 8 5 / 82%),transparent 65%)
}

.intro-copy {
  padding:100px 0 0 9vw;
  pointer-events:none
}

.intro-copy h2:not(.display) {
  display:flex;
  flex-direction:row-reverse;
  align-items:flex-start;
  gap:.22em;
  width:max-content;
  font-size:clamp(52px,5.1vw,80px);
  line-height:1.35;
  letter-spacing:.13em;
  margin-bottom:32px
}

.intro-copy h2>span {
  writing-mode:vertical-rl;
  text-orientation:upright;
  white-space:nowrap
}

.intro-copy h2>span:last-child {
  margin-top:.6em
}

.intro-copy .lead {
  color:var(--paper);
  font-size:14px
}

.cinematic-bottom {
  position:absolute;
  bottom:65px;
  left:9vw;
  right:8vw;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:40px
}

.cinematic-bottom .display {
  font-size:clamp(58px,7vw,112px);
  letter-spacing:-.05em
}

.chapter-heading {
  position:relative;
  margin-bottom:70px
}

.chapter-heading .display {
  max-width:700px
}

.chapter-caption {
  margin-top:28px;
  font:16px/1.9 var(--serif);
  letter-spacing:.08em;
  color:var(--muted)
}

.space-composition {
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  align-items:start
}

.space-composition>.wide {
  grid-column:1/10;
  grid-row:1
}

.space-composition>.wide img {
  aspect-ratio:1.42;
  object-fit:cover
}

.space-composition>.detail {
  grid-column:9/13;
  grid-row:1;
  margin-top:32%;
  border:12px solid var(--ink);
  border-right:0
}

.space-composition>.detail img {
  aspect-ratio:.68;
  object-fit:cover
}

.section-bottom {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:40px;
  padding-top:50px
}

.home-menu {
  display:grid;
  grid-template-columns:1.08fr 1fr;
  gap:10%;
  padding:120px var(--gutter) 155px;
  background:var(--surface);
  align-items:center
}

.menu-composition {
  position:relative;
  margin:30px 0 100px
}

.menu-composition>.menu-drinks img {
  aspect-ratio:.88;
  object-fit:cover
}

.menu-composition>.menu-food {
  position:absolute;
  right:-12%;
  bottom:-110px;
  width:54%;
  border:12px solid var(--surface)
}

.menu-composition>.menu-food img {
  aspect-ratio:1;
  object-fit:cover
}

.menu-composition>.menu-food figcaption {
  font-size:10px
}

.home-menu-copy .display {
  font-size:clamp(76px,8.8vw,144px);
  margin-bottom:38px
}

.home-menu-copy h3 {
  margin-bottom:23px
}

.home-menu-copy .text-link {
  margin-top:27px
}

.home-vip {
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:8%;
  align-items:end;
  padding-top:170px;
  padding-bottom:170px
}

.home-vip .display {
  font-size:clamp(75px,9vw,145px)
}

.vip-preview-copy {
  padding-bottom:7px
}

.vip-preview-copy h2:not(.display) {
  font-size:30px
}

.vip-preview-copy .text-link {
  margin-top:28px
}

.visit-strip {
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:8%;
  align-items:center;
  border-top:1px solid var(--line)
}

.visit-strip .display {
  font-size:clamp(72px,8vw,128px)
}

.visit-hours {
  margin-top:32px;
  font-size:24px;
  font-variant-numeric:tabular-nums;
  letter-spacing:.03em
}

.visit-hours small {
  display:block;
  font-size:12px;
  margin-top:6px;
  color:var(--muted)
}

.visit-strip .text-link {
  margin-top:22px
}

.campaign-link {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
  padding:30px var(--gutter);
  background:#1c2019;
  text-decoration:none;
  position:relative;
  border-bottom:1px solid var(--line)
}

.campaign-link .section-label {
  margin:0;
  font-size:10px;
  min-width:170px
}

.campaign-link .campaign-copy {
  margin-right:auto;
  font-size:14px;
  letter-spacing:.05em
}

.campaign-link .campaign-copy small {
  display:block;
  color:var(--muted);
  font-size:11px;
  margin-top:3px
}

.campaign-link .campaign-arrow {
  font-size:26px;
  color:var(--gold);
  transition:transform .5s var(--ease)
}

a.campaign-link:hover .campaign-arrow {
  transform:translate(4px,-4px)
}

.campaign-link.pending .campaign-copy {
  font-size:13px
}

.page-scene {
  position:relative;
  height:92svh;
  min-height:670px;
  max-height:1100px;
  isolation:isolate
}

.page-scene-media {
  position:absolute;
  inset:0;
  z-index:-2
}

.page-scene-media .photograph,.page-scene-media a,.page-scene-media img {
  width:100%;
  height:100%;
  object-fit:cover
}

.page-scene-media img {
  object-position:center 60%;
  filter:saturate(.62) brightness(.8)
}

.page-scene-media figcaption {
  position:absolute;
  right:var(--gutter);
  bottom:42px;
  color:#d0d2c8
}

.page-scene-media a::after {
  display:none
}

.page-scene::after {
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:linear-gradient(90deg,rgb(4 7 4 / 60%),transparent 75%),linear-gradient(0deg,rgb(4 7 4 / 65%),transparent 65%)
}

.page-scene-copy {
  position:absolute;
  left:7vw;
  bottom:110px;
  pointer-events:none
}

.page-scene-copy .display {
  font-size:clamp(105px,14vw,220px);
  margin-bottom:28px;
  letter-spacing:-.055em
}

.page-scene-copy h1 {
  font:400 24px/1.8 var(--serif);
  letter-spacing:.12em
}

.scene-scroll {
  position:absolute;
  left:7vw;
  bottom:43px;
  display:flex;
  gap:35px;
  align-items:center;
  text-decoration:none;
  font-size:9px;
  letter-spacing:.18em
}

.scene-scroll span {
  font-size:23px;
  color:var(--gold)
}

.space-story {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12%;
  padding-top:140px;
  padding-bottom:110px
}

.space-story .lead+.lead {
  margin-top:30px
}

.gallery-section {
  padding-top:30px
}

.gallery-heading {
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:35px;
  margin-bottom:65px
}

.gallery-heading .display {
  font-size:clamp(65px,7.3vw,110px)
}

.venue-gallery {
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:95px 65px;
  counter-reset:photo;
  align-items:start
}

.venue-gallery>.photograph {
  grid-column:span 7;
  counter-increment:photo
}

.venue-gallery>.photograph figcaption::before {
  content:"0" counter(photo);
  width:auto;
  height:auto;
  background:none;
  font:12px var(--display);
  color:var(--gold)
}

.venue-gallery>.photograph:nth-child(2) {
  grid-column:span 5;
  margin-top:180px
}

.venue-gallery>.photograph:nth-child(3) {
  grid-column:span 5;
  margin-top:-20px
}

.venue-gallery>.photograph:nth-child(4) {
  grid-column:span 7;
  margin-top:70px
}

.venue-gallery>.photograph:nth-child(5) {
  grid-column:2/12
}

.venue-gallery>.photograph:nth-child(n+6) {
  grid-column:span 6
}

.venue-gallery>.photograph:nth-child(7) {
  margin-top:130px
}

.gallery-landscape img {
  aspect-ratio:4/3;
  object-fit:cover
}

.gallery-portrait img {
  aspect-ratio:3/4;
  object-fit:cover
}

.gallery-square img {
  aspect-ratio:1;
  object-fit:cover
}

.page-next {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:60px;
  border-top:1px solid var(--line);
  padding-block:110px
}

.page-next .display {
  font-size:clamp(60px,7.2vw,110px)
}

.editorial-opening {
  display:grid;
  grid-template-columns:1fr 1fr;
  min-height:820px;
  max-width:1740px;
  margin:auto;
  padding:126px 0 90px var(--gutter);
  gap:7%;
  align-items:center
}

.editorial-title {
  padding-top:10px
}

.breadcrumb {
  display:flex;
  gap:16px;
  align-items:center;
  font-size:9px;
  letter-spacing:.1em;
  color:var(--muted);
  margin-bottom:55px
}

.breadcrumb a {
  text-decoration:none;
  padding-block:5px
}

.breadcrumb a:hover {
  color:var(--gold)
}

.editorial-title .section-label {
  margin-bottom:22px
}

.editorial-title .display {
  font-size:clamp(85px,9vw,155px);
  margin-bottom:36px
}

.editorial-title h1 {
  font:400 clamp(21px,2.1vw,30px)/1.8 var(--serif);
  letter-spacing:.08em;
  margin-bottom:21px
}

.editorial-title .lead {
  font-size:14px
}

.editorial-title .text-link {
  margin-top:20px
}

.opening-media {
  position:relative;
  margin-right:0;
  max-width:760px
}

.opening-media img {
  height:clamp(570px,75svh,820px);
  object-fit:cover
}

.opening-media .photograph figcaption {
  font-size:10px
}

.opening-links {
  display:flex;
  gap:28px;
  flex-wrap:wrap;
  margin-top:35px
}

.opening-links a {
  display:flex;
  gap:22px;
  align-items:center;
  min-height:42px;
  text-decoration:none;
  font-size:12px;
  border-bottom:1px solid var(--line)
}

.opening-links a span {
  color:var(--gold)
}

.image-disclaimer {
  margin-top:12px;
  font-size:10px;
  line-height:1.9;
  color:var(--muted)
}

.vip-opening .opening-media {
  max-width:530px;
  margin-left:20px
}

.vip-opening .opening-media img {
  aspect-ratio:.7
}

.vip-opening .editorial-title .display {
  font-size:clamp(76px,8.2vw,138px)
}

.access-opening .opening-media img {
  aspect-ratio:.85;
  object-position:53% center
}

.access-opening .editorial-title .display {
  font-size:clamp(80px,8.8vw,144px)
}

.menu-pricing {
  max-width:1330px;
  padding-top:110px
}

.pricing-heading {
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:80px;
  align-items:end;
  margin-bottom:45px
}

.pricing-heading h2:not(.display) {
  font-size:32px;
  margin:0
}

.pricing-heading .lead {
  font-size:13px
}

.shisha-price {
  border-block:1px solid var(--line);
  padding:40px 0;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:40px
}

.shisha-price>p:first-child {
  font:20px var(--serif);
  letter-spacing:.06em
}

.shisha-price small {
  display:block;
  font:11px/2 var(--sans);
  color:var(--muted);
  letter-spacing:.04em;
  margin-top:12px
}

.shisha-price .display {
  font-size:92px;
  white-space:nowrap
}

.shisha-price .display small {
  display:inline;
  margin-left:18px
}

.regular-pricing>div {
  padding-bottom:28px
}

.regular-pricing>summary {
  font-size:13px;
  padding:27px 40px 27px 0
}

.regular-pricing {
  border-bottom:1px solid var(--line)
}

details {
  min-width:0
}

summary {
  cursor:pointer;
  position:relative;
  list-style:none
}

summary::-webkit-details-marker {
  display:none
}

summary::after {
  content:"+";
  position:absolute;
  right:0;
  top:22px;
  color:var(--gold);
  font:25px var(--sans)
}

details[open]>summary::after {
  content:"−"
}

.pricing-scroll {
  overflow-x:auto
}

.price-table {
  width:100%;
  border-collapse:collapse;
  font-size:13px;
  line-height:1.8;
  margin-top:30px
}

.price-table th {
  color:var(--muted);
  font-size:11px;
  font-weight:400;
  padding:15px 0 22px;
  border-bottom:1px solid var(--line);
  text-align:left
}

.price-table td {
  padding:21px 0;
  border-bottom:1px solid rgb(236 233 223 / 7%)
}

.price-table th:not(:first-child),.price-table td:not(:first-child) {
  text-align:right;
  white-space:nowrap;
  padding-left:20px
}

.price-table td:not(:first-child) {
  font-variant-numeric:tabular-nums;
  color:var(--paper)
}

.food-story {
  display:grid;
  grid-template-columns:.65fr 1.5fr;
  gap:7%;
  padding:100px var(--gutter) 120px;
  background:var(--surface)
}

.food-story-heading .display {
  font-size:clamp(62px,6.2vw,100px);
  margin-bottom:30px
}

.food-photos {
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:26px;
  align-items:start
}

.food-photos .food-large {
  margin-top:10px
}

.food-photos .food-large img {
  aspect-ratio:.7;
  object-fit:cover
}

.food-photos .food-small:nth-child(2) {
  margin-top:130px
}

.food-photos .food-small:nth-child(3) {
  margin-top:55px
}

.food-photos .food-small img {
  aspect-ratio:.83;
  object-fit:cover
}

.food-photos figcaption {
  font-size:10px;
  display:block;
  letter-spacing:.02em
}

.food-photos figcaption::before {
  display:none
}

.catalogue-heading {
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:40px;
  margin-bottom:65px
}

.catalogue-heading .display {
  font-size:clamp(68px,7.7vw,118px)
}

.menu-categories {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0 85px;
  align-items:start
}

.menu-category {
  border-top:1px solid var(--line)
}

.menu-category>summary {
  display:flex;
  gap:28px;
  align-items:center;
  padding:28px 35px 28px 0;
  font-size:15px;
  letter-spacing:.03em
}

.category-number {
  font:12px var(--display);
  color:var(--gold)
}

.menu-category summary::after {
  top:22px
}

.menu-category dl {
  padding-bottom:27px
}

.menu-item {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:20px;
  padding:11px 0;
  font-size:13px;
  line-height:1.9
}

.menu-item dt {
  overflow-wrap:anywhere
}

.menu-item dd {
  color:var(--gold);
  font:19px/1.65 var(--display);
  letter-spacing:.01em;
  font-variant-numeric:tabular-nums;
  white-space:nowrap
}

.sold-out {
  display:block;
  font-size:11px;
  color:var(--muted)
}

.vip-amenities {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12%;
  border-top:1px solid var(--line)
}

.vip-amenities .lead {
  font-size:14px
}

.amenity-list {
  counter-reset:amenity
}

.amenity-list>p:not(.note) {
  counter-increment:amenity;
  border-bottom:1px solid var(--line);
  padding:22px 0;
  font:21px/1.8 var(--serif);
  display:flex;
  gap:28px;
  align-items:center
}

.amenity-list>p:not(.note)::before {
  content:"0" counter(amenity);
  font:12px var(--display);
  color:var(--gold)
}

.vip-rates {
  padding-top:20px;
  max-width:1330px
}

.vip-rate-list>div {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:30px;
  padding:28px 0;
  border-bottom:1px solid var(--line)
}

.vip-rate-list dt {
  font-size:14px;
  line-height:2
}

.vip-rate-list dd {
  font:54px/1.2 var(--display);
  letter-spacing:-.03em;
  color:var(--paper);
  white-space:nowrap
}

.vip-rate-list small {
  font:11px var(--sans);
  letter-spacing:.03em;
  color:var(--muted);
  margin-left:20px
}

.vip-rates .text-link {
  margin-top:35px
}

.access-details {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10%;
  padding-top:80px
}

.access-details h2:not(.display) {
  font-size:32px
}

.info-row {
  display:grid;
  grid-template-columns:100px minmax(0,1fr);
  gap:25px;
  padding:25px 0;
  border-bottom:1px solid var(--line);
  font-size:14px;
  line-height:2.1
}

.info-row:first-child {
  padding-top:0
}

.info-row dt {
  color:var(--muted);
  font-size:11px;
  letter-spacing:.06em
}

.info-row dd small {
  display:block;
  font-size:11px;
  color:var(--muted);
  margin-top:10px
}

.info-row a {
  text-decoration:none
}

.info-row a:hover {
  color:var(--gold)
}

.arrival-section {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:11%;
  align-items:center;
  padding-top:30px
}

.arrival-photo {
  width:80%;
  position:relative
}

.arrival-photo img {
  aspect-ratio:1;
  object-fit:cover
}

.arrival-section h2:not(.display) {
  font-size:30px
}

.arrival-section .lead {
  font-size:14px
}

.arrival-section .text-link {
  margin-top:25px
}

.reservation-section {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px 10%;
  border-top:1px solid var(--line);
  align-items:center
}

.reservation-section .display {
  font-size:clamp(78px,8vw,130px);
  margin-bottom:30px
}

.reservation-section .lead {
  font-size:13px
}

.reservation .section-label {
  margin-bottom:25px
}

.reservation-phone {
  display:flex;
  justify-content:space-between;
  gap:20px;
  font:38px/1.4 var(--display);
  letter-spacing:-.02em;
  text-decoration:none;
  border-bottom:1px solid var(--line);
  padding-bottom:25px;
  white-space:nowrap
}

.reservation-phone span {
  font:26px var(--sans);
  color:var(--gold)
}

.reservation-instagram {
  display:flex;
  justify-content:space-between;
  padding:24px 0;
  border-bottom:1px solid var(--line);
  text-decoration:none;
  font-size:13px
}

.reservation-instagram>span:last-child {
  color:var(--gold);
  font-size:22px
}

.reservation a:hover {
  color:var(--gold)
}

.visiting-note {
  grid-column:1/-1;
  border-top:1px solid var(--line);
  padding-top:28px;
  color:var(--muted);
  font-size:11px;
  line-height:2
}

.site-footer {
  position:relative;
  z-index:5;
  background:#10120f;
  border-top:1px solid var(--line);
  padding:110px var(--gutter) 0;
  overflow:hidden
}

.footer-invitation {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:60px;
  max-width:1320px;
  margin:0 auto 100px
}

.footer-invitation .display {
  font-size:clamp(90px,10vw,160px)
}

.booking-ring {
  width:174px
}

.footer-top {
  display:grid;
  grid-template-columns:.6fr 1fr 1fr;
  gap:70px;
  max-width:1320px;
  margin:auto;
  padding-bottom:60px;
  align-items:start
}

.footer-brand {
  display:block;
  width:75px
}

.footer-brand img {
  width:75px;
  height:auto
}

.footer-store {
  font-size:12px;
  line-height:2.2;
  color:var(--muted)
}

.footer-store p+p {
  margin-top:15px
}

.footer-store>a {
  display:inline-block;
  text-decoration:none;
  margin-top:18px;
  font-size:17px;
  color:var(--paper)
}

.footer-nav {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:6px 35px;
  align-items:start
}

.footer-nav a {
  display:block;
  font-size:11px;
  text-decoration:none;
  min-height:38px;
  line-height:2
}

.site-footer a:hover {
  color:var(--gold)
}

.footer-bottom {
  display:flex;
  align-items:center;
  gap:35px;
  max-width:1320px;
  margin:auto;
  border-top:1px solid var(--line);
  padding-top:28px;
  font-size:10px;
  line-height:1.9;
  color:var(--muted)
}

.footer-bottom p {
  margin-right:auto
}

.footer-bottom a {
  text-decoration:none;
  display:flex;
  align-items:center;
  min-height:44px
}

.footer-wordmark {
  font:400 30vw/.95 var(--display);
  letter-spacing:-.08em;
  margin:50px 0 -3.5vw -1vw;
  color:#373e31;
  pointer-events:none
}

.gallery-open {
  overflow:hidden
}

.gallery-viewer {
  position:fixed;
  inset:0;
  width:100%;
  height:100dvh;
  max-width:none;
  max-height:none;
  border:0;
  margin:0;
  padding:28px 44px;
  background:rgb(11 12 10 / 99%);
  color:var(--paper)
}

.gallery-viewer::backdrop {
  background:rgb(0 0 0 / 95%)
}

.gallery-shell {
  max-width:1600px;
  height:100%;
  margin:auto;
  display:flex;
  align-items:center;
  flex-direction:column
}

.gallery-toolbar {
  display:flex;
  width:100%;
  align-items:center;
  justify-content:space-between;
  gap:25px;
  padding-bottom:25px
}

.gallery-toolbar p {
  font:italic 25px var(--display);
  letter-spacing:-.02em;
  color:var(--muted)
}

.gallery-viewer button {
  background:none;
  border:0;
  border-bottom:1px solid var(--line);
  color:var(--paper);
  padding:10px 8px;
  min-height:44px;
  font-size:12px;
  transition:color .4s var(--ease)
}

.gallery-viewer button:hover {
  color:var(--gold)
}

#gallery-image {
  height:0;
  min-height:0;
  flex:1;
  width:100%;
  object-fit:contain
}

#gallery-error {
  margin:auto;
  font-size:14px;
  line-height:2
}

.gallery-bottom {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
  width:100%;
  padding-top:22px
}

#gallery-caption {
  font-size:12px;
  text-align:center;
  line-height:1.9
}

@media(min-width:768px) and (prefers-reduced-motion:no-preference) {
  @supports(animation-timeline:view()) {
    .home-intro {
      animation:venue-arrival linear both;
      animation-timeline:view();
      animation-range:entry 0% entry 100%;
      transform-origin:center bottom
    }

    @keyframes venue-arrival {
      from {transform:scale(.94)}
      to {transform:scale(1)}
    }

    .cinematic-media img,.page-scene-media img {
      animation:photo-drift linear both;
      animation-timeline:view();
      animation-range:entry 0% exit 100%
    }

    @keyframes photo-drift {
      from {
        transform:scale(1.09) translateY(-2%)
      }

      to {
        transform:scale(1.09) translateY(2%)
      }

    }

  }

}

@media(max-width:1100px) {
  :root {
    --gutter:44px
  }

  .page-section {
    padding-block:110px
  }

  .header-actions {
    gap:30px
  }

  .brand span {
    font-size:9px
  }

  .nav-meta {
    right:7vw;
    bottom:50px
  }

  .home-menu {
    gap:8%;
    padding-block:100px 140px
  }

  .home-menu-copy .display {
    font-size:96px
  }

  .chapter-caption {
    font-size:15px
  }

  .venue-gallery {
    gap:70px 35px
  }

  .editorial-opening {
    gap:5%;
    min-height:760px;
    padding-top:140px
  }

  .editorial-title .display {
    font-size:98px
  }

  .editorial-title h1 {
    font-size:23px
  }

  .opening-media {
    margin-right:28px
  }

  .vip-opening .editorial-title .display {
    font-size:90px
  }

  .access-opening .editorial-title .display {
    font-size:94px
  }

  .food-story {
    grid-template-columns:.7fr 1.4fr;
    gap:4%;
    padding-block:80px
  }

  .food-story-heading .display {
    font-size:68px
  }

  .food-photos {
    gap:15px
  }

  .food-photos .food-small:nth-child(2) {
    margin-top:90px
  }

  .menu-categories {
    gap:0 45px
  }

  .reservation-phone {
    font-size:32px
  }

  .footer-top {
    gap:40px
  }

}

@media(max-width:767px) {
  :root {
    --gutter:26px
  }

  html {
    scroll-padding-top:90px
  }

  body {
    font-size:14px
  }

  header {
    inset:14px 22px auto;
    height:52px;
    gap:15px
  }

  header::before {
    inset:-5px -10px
  }

  .brand {
    gap:12px
  }

  .brand img {
    width:32px;
    height:38px
  }

  .brand span {
    font-size:8px;
    letter-spacing:.14em
  }

  .brand small {
    font-size:7px
  }

  .header-actions {
    gap:12px
  }

  .header-reserve {
    font-size:10px;
    gap:8px
  }

  .header-reserve span {
    font-size:18px
  }

  .menu-toggle-label {
    display:none
  }

  #menu-toggle {
    padding-left:8px;
    min-width:40px
  }

  .menu-toggle-icon {
    width:25px
  }

  .menu-toggle-icon i {
    width:25px
  }

  .menu-toggle-icon i:last-child {
    width:18px
  }

  .menu-open .menu-toggle-icon i:last-child {
    width:25px
  }

  #main-nav {
    padding:100px 38px 140px;
    align-content:center;
    gap:10px
  }

  #main-nav>a {
    font-size:52px;
    gap:20px
  }

  #main-nav>a::before {
    font-size:9px
  }

  #main-nav>a.nav-reserve {
    margin:24px 0 0;
    font-size:13px
  }

  .nav-meta {
    position:static;
    margin:35px 0 0;
    gap:10px;
    font-size:10px
  }

  .nav-meta>p:first-child {
    font-size:14px
  }

  .nav-meta>p:last-child {
    font-size:9px
  }

  .page-section {
    padding-block:80px
  }

  .section-label {
    font-size:9px;
    letter-spacing:.15em;
    margin-bottom:23px
  }

  .section-label>span {
    margin-right:25px;
    font-size:10px
  }

  .lead {
    font-size:13px;
    line-height:2.15;
    letter-spacing:.04em
  }

  .small-copy,.note {
    font-size:11px;
    line-height:2
  }

  .display {
    font-size:74px;
    line-height:1.12;
    letter-spacing:-.06em
  }

  h2:not(.display) {
    font-size:28px;
    line-height:1.75;
    margin-bottom:23px
  }

  .text-link {
    font-size:12px;
    min-height:60px;
    min-width:210px;
    gap:30px
  }

  .link-arrow {
    width:30px;
    height:30px;
    font-size:18px
  }

  .round-link {
    width:108px;
    gap:6px
  }

  .round-link>span:first-child {
    font-size:9px
  }

  .round-link>span:last-child {
    font-size:30px
  }

  .hero-mark {
    left:28px;
    bottom:50px
  }

  .hero-mark .en {
    font-size:8px;
    margin-bottom:15px
  }

  .hero-mark h1 {
    width:109px
  }

  .hero-actions {
    margin-top:22px;
    gap:10px
  }

  .hero-actions .button {
    font-size:11px;
    min-height:46px;
    padding:10px 22px
  }

  .tate {
    right:24px;
    top:25%;
    font-size:22px;
    letter-spacing:.25em
  }

  .motion-toggle {
    top:90px;
    left:28px;
    font-size:9px
  }

  .scene-status {
    top:136px;
    left:28px;
    font-size:10px
  }

  .scroll-cue {
    right:24px;
    bottom:52px;
    writing-mode:vertical-rl;
    font-size:8px
  }

  .scroll-cue span {
    font-size:19px;
    text-align:center;
    margin-top:14px
  }

  .scene-active #scroll-space {
    height:210svh
  }

  .photograph figcaption {
    font-size:10px;
    gap:15px;
    padding-top:11px
  }

  .photograph figcaption::before {
    width:20px
  }

  .photograph a::after {
    bottom:14px;
    right:14px;
    width:34px;
    height:34px;
    font-size:20px
  }

  .cinematic {
    height:92svh;
    min-height:680px;
    max-height:850px
  }

  .cinematic-media img {
    object-position:64% center
  }

  .cinematic::after {
    background:linear-gradient(90deg,rgb(4 7 4 / 62%),rgb(4 7 4 / 8%)),linear-gradient(0deg,rgb(4 7 4 / 73%),transparent 70%)
  }

  .intro-copy {
    padding:74px 28px 0
  }

  .intro-copy h2:not(.display) {
    font-size:clamp(42px,13.4vw,56px);
    line-height:1.35;
    letter-spacing:.13em;
    margin-bottom:28px
  }

  .intro-copy .lead {
    font-size:12px
  }

  .cinematic-bottom {
    left:28px;
    right:26px;
    bottom:40px;
    align-items:flex-end;
    gap:20px
  }

  .cinematic-bottom .display {
    font-size:44px;
    max-width:185px;
    line-height:1.12
  }

  .cinematic-bottom .display em {
    display:block
  }

  .cinematic-bottom .round-link {
    width:92px
  }

  .chapter-heading {
    margin-bottom:40px
  }

  .chapter-heading .display {
    font-size:clamp(64px,20.8vw,75px)
  }

  .chapter-caption {
    position:static;
    font-size:13px;
    margin-top:25px
  }

  .space-composition>.wide {
    grid-column:1/-1
  }

  .space-composition>.wide img {
    aspect-ratio:1.12
  }

  .space-composition>.detail {
    grid-column:7/-1;
    grid-row:2;
    margin-top:-26%;
    margin-right:-8px;
    border-width:8px;
    border-right:0
  }

  .space-composition>.detail img {
    aspect-ratio:.73
  }

  .space-composition>.detail figcaption {
    font-size:9px;
    letter-spacing:0
  }

  .space-composition>.detail figcaption::before {
    display:none
  }

  .section-bottom {
    flex-direction:column;
    align-items:flex-start;
    gap:22px;
    padding-top:28px
  }

  .home-menu {
    grid-template-columns:1fr;
    padding:80px var(--gutter) 100px;
    gap:75px
  }

  .home-menu-copy {
    grid-row:1
  }

  .home-menu-copy .display {
    font-size:clamp(72px,23.6vw,85px);
    margin-bottom:28px
  }

  .home-menu-copy h3 {
    font-size:21px;
    margin-bottom:18px
  }

  .home-menu-copy .text-link {
    margin-top:22px
  }

  .menu-composition {
    margin:0 35px 85px 0
  }

  .menu-composition>.menu-drinks img {
    aspect-ratio:.95
  }

  .menu-composition>.menu-food {
    bottom:-95px;
    right:-35px;
    width:58%;
    border-width:8px
  }

  .home-vip {
    grid-template-columns:1fr;
    gap:45px
  }

  .home-vip .display {
    font-size:clamp(68px,22.2vw,80px)
  }

  .vip-preview-copy h2:not(.display) {
    font-size:25px
  }

  .vip-preview-copy .text-link {
    margin-top:20px
  }

  .visit-strip {
    grid-template-columns:1fr;
    gap:40px
  }

  .visit-strip .display {
    font-size:clamp(68px,22.2vw,80px)
  }

  .visit-hours {
    font-size:21px;
    margin-top:25px
  }

  .visit-hours small {
    font-size:11px
  }

  .campaign-link {
    gap:16px;
    padding:23px 26px;
    flex-wrap:wrap
  }

  .campaign-link .section-label {
    font-size:9px;
    flex-basis:100%;
    min-width:0
  }

  .campaign-link .campaign-copy {
    font-size:12px;
    flex:1
  }

  .campaign-link .campaign-copy small {
    font-size:10px
  }

  .campaign-link .campaign-arrow {
    font-size:23px
  }

  .campaign-link.pending .campaign-copy {
    font-size:11px
  }

  .page-scene {
    height:86svh;
    min-height:630px
  }

  .page-scene-media img {
    object-position:56% center
  }

  .page-scene-media figcaption {
    bottom:27px;
    right:26px;
    font-size:9px
  }

  .page-scene-copy {
    left:28px;
    right:28px;
    bottom:125px
  }

  .page-scene-copy .display {
    font-size:94px;
    margin-bottom:26px;
    max-width:300px
  }

  .page-scene-copy .display em {
    display:block
  }

  .page-scene-copy h1 {
    font-size:17px;
    line-height:1.9;
    letter-spacing:.06em;
    max-width:270px
  }

  .scene-scroll {
    left:28px;
    bottom:56px;
    font-size:8px;
    gap:24px
  }

  .space-story {
    grid-template-columns:1fr;
    gap:22px
  }

  .space-story .lead+.lead {
    margin-top:22px
  }

  .gallery-section {
    padding-top:12px
  }

  .gallery-heading {
    display:block;
    margin-bottom:37px
  }

  .gallery-heading .display {
    font-size:66px;
    margin-bottom:20px
  }

  .gallery-heading .small-copy {
    font-size:10px
  }

  .venue-gallery {
    grid-template-columns:1fr;
    gap:45px
  }

  .venue-gallery>.photograph:nth-child(n) {
    grid-column:1;
    margin:0
  }

  .venue-gallery>.photograph:nth-child(2) {
    width:82%;
    justify-self:end
  }

  .venue-gallery>.photograph:nth-child(3) {
    width:86%
  }

  .venue-gallery>.photograph:nth-child(5) {
    margin-inline:-26px;
    width:calc(100% + 52px)
  }

  .venue-gallery>.photograph:nth-child(5) figcaption {
    padding-left:26px
  }

  .venue-gallery>.photograph:nth-child(6) {
    width:88%;
    justify-self:end
  }

  .venue-gallery>.photograph:nth-child(7) {
    width:88%
  }

  .page-next {
    gap:20px;
    padding-block:70px;
    align-items:flex-end
  }

  .page-next .display {
    font-size:50px
  }

  .page-next .section-label {
    font-size:8px;
    max-width:160px
  }

  .page-next .round-link {
    width:92px
  }

  .editorial-opening {
    grid-template-columns:1fr;
    min-height:0;
    padding:107px 26px 70px;
    gap:45px
  }

  .editorial-title {
    padding:0
  }

  .breadcrumb {
    margin-bottom:35px;
    font-size:8px
  }

  .editorial-title .section-label {
    margin-bottom:23px
  }

  .editorial-title .display {
    font-size:clamp(75px,24.7vw,89px);
    line-height:1.12;
    margin-bottom:30px
  }

  .editorial-title h1 {
    font-size:20px;
    letter-spacing:.04em;
    margin-bottom:17px
  }

  .editorial-title .lead {
    font-size:12px
  }

  .opening-media {
    margin-right:18px;
    margin-left:25px
  }

  .opening-media img {
    height:auto;
    aspect-ratio:.95
  }

  .opening-links {
    gap:25px;
    margin-top:24px
  }

  .opening-links a {
    font-size:11px;
    gap:18px
  }

  .vip-opening .editorial-title .display {
    font-size:clamp(66px,21.65vw,78px)
  }

  .vip-opening .opening-media {
    margin-left:0;
    margin-right:48px
  }

  .vip-opening .opening-media img {
    aspect-ratio:.74
  }

  .access-opening .editorial-title .display {
    font-size:clamp(70px,23.3vw,84px)
  }

  .access-opening .opening-media {
    margin-left:34px;
    margin-right:18px
  }

  .access-opening .opening-media img {
    aspect-ratio:.9
  }

  .image-disclaimer {
    font-size:9px;
    margin-top:9px
  }

  .menu-pricing {
    padding-top:75px
  }

  .pricing-heading {
    grid-template-columns:1fr;
    gap:18px;
    margin-bottom:30px
  }

  .pricing-heading h2:not(.display) {
    font-size:25px
  }

  .pricing-heading .lead {
    font-size:12px
  }

  .shisha-price {
    display:block;
    padding-block:28px
  }

  .shisha-price>p:first-child {
    font-size:17px
  }

  .shisha-price .display {
    font-size:clamp(64px,20.5vw,74px);
    margin-top:26px
  }

  .shisha-price small {
    font-size:10px;
    margin-top:8px
  }

  .shisha-price .display small {
    margin-left:12px
  }

  .regular-pricing>summary {
    font-size:12px;
    padding-block:23px
  }

  .regular-pricing summary::after {
    top:18px
  }

  .price-table {
    font-size:10px;
    line-height:1.8
  }

  .price-table th {
    font-size:9px
  }

  .price-table th:not(:first-child),.price-table td:not(:first-child) {
    padding-left:10px
  }

  .price-table td {
    padding-block:18px
  }

  .food-story {
    grid-template-columns:1fr;
    gap:38px;
    padding:75px 26px 85px
  }

  .food-story-heading .display {
    font-size:75px;
    margin-bottom:23px
  }

  .food-story-heading .lead {
    font-size:12px
  }

  .food-photos {
    grid-template-columns:1fr 1fr;
    gap:26px 18px
  }

  .food-photos .food-large {
    grid-column:1/-1;
    width:80%;
    margin-top:0
  }

  .food-photos .food-large img {
    aspect-ratio:1
  }

  .food-photos .food-small:nth-child(2) {
    margin-top:0
  }

  .food-photos .food-small:nth-child(3) {
    margin-top:55px
  }

  .food-photos figcaption {
    font-size:9px
  }

  .catalogue-heading {
    display:block;
    margin-bottom:40px
  }

  .catalogue-heading .display {
    font-size:77px
  }

  .catalogue-heading .small-copy {
    margin-top:22px;
    font-size:10px
  }

  .menu-categories {
    grid-template-columns:1fr;
    gap:0
  }

  .menu-category>summary {
    font-size:14px;
    padding-block:25px;
    gap:23px
  }

  .menu-category summary::after {
    top:20px
  }

  .menu-item {
    font-size:12px;
    padding-block:10px
  }

  .menu-item dd {
    font-size:18px
  }

  .vip-amenities {
    grid-template-columns:1fr;
    gap:35px
  }

  .vip-amenities .lead {
    font-size:12px
  }

  .amenity-list>p:not(.note) {
    font-size:18px;
    padding-block:21px;
    gap:23px
  }

  .vip-rates {
    padding-top:20px
  }

  .vip-rate-list>div {
    padding-block:23px;
    gap:20px
  }

  .vip-rate-list dt {
    font-size:12px
  }

  .vip-rate-list dd {
    font-size:38px
  }

  .vip-rate-list small {
    font-size:10px;
    margin-left:12px
  }

  .access-details {
    grid-template-columns:1fr;
    gap:38px;
    padding-top:5px
  }

  .access-details h2:not(.display) {
    font-size:26px
  }

  .info-row {
    grid-template-columns:69px minmax(0,1fr);
    gap:22px;
    font-size:12px;
    padding-block:23px
  }

  .info-row dt {
    font-size:10px
  }

  .info-row dd small {
    font-size:10px
  }

  .arrival-section {
    grid-template-columns:1fr;
    gap:40px;
    padding-top:5px
  }

  .arrival-photo {
    width:80%
  }

  .arrival-section h2:not(.display) {
    font-size:24px
  }

  .arrival-section .lead {
    font-size:12px
  }

  .arrival-section .text-link {
    margin-top:18px
  }

  .reservation-section {
    grid-template-columns:1fr;
    gap:45px
  }

  .reservation-section .display {
    font-size:84px
  }

  .reservation-section .lead {
    font-size:12px
  }

  .reservation-phone {
    font-size:33px;
    padding-bottom:23px
  }

  .reservation-instagram {
    font-size:12px
  }

  .visiting-note {
    font-size:10px;
    margin-top:0
  }

  .site-footer {
    padding:75px 26px 0
  }

  .footer-invitation {
    align-items:flex-end;
    gap:15px;
    margin-bottom:65px
  }

  .footer-invitation .section-label {
    font-size:8px;
    margin-bottom:24px
  }

  .footer-invitation .display {
    font-size:clamp(45px,15vw,60px);
    line-height:1.08
  }

  .booking-ring {
    width:96px;
    gap:4px;
    margin-bottom:8px
  }

  .booking-ring>span:first-child {
    font-size:8px;
    max-width:66px;
    text-align:center;
    line-height:1.8
  }

  .booking-ring>span:last-child {
    font-size:28px
  }

  .footer-top {
    grid-template-columns:64px 1fr;
    gap:28px;
    padding-bottom:32px
  }

  .footer-brand,.footer-brand img {
    width:54px
  }

  .footer-store {
    font-size:10px;
    line-height:2.1
  }

  .footer-store>a {
    font-size:15px;
    margin-top:15px
  }

  .footer-nav {
    grid-column:1/-1;
    gap:2px 25px
  }

  .footer-nav a {
    font-size:10px;
    min-height:36px
  }

  .footer-bottom {
    font-size:9px;
    gap:12px 22px;
    flex-wrap:wrap;
    padding-top:18px
  }

  .footer-bottom p {
    order:3;
    width:100%;
    font-size:8px
  }

  .footer-wordmark {
    font-size:37vw;
    margin-top:35px;
    margin-left:-1vw;
    margin-bottom:-4vw
  }

  .gallery-viewer {
    padding:20px
  }

  .gallery-toolbar {
    padding-bottom:20px
  }

  .gallery-toolbar p {
    font-size:20px
  }

  .gallery-viewer button {
    font-size:10px
  }

  .gallery-bottom {
    flex-wrap:wrap;
    gap:12px;
    padding-top:16px
  }

  #gallery-caption {
    order:-1;
    flex-basis:100%;
    font-size:10px
  }

  .gallery-bottom button {
    font-size:11px
  }

}

@media(max-height:820px) and (min-width:768px) {
  .editorial-opening {
    min-height:100svh;
    padding-block:110px 72px
  }

  .editorial-title .display,.vip-opening .editorial-title .display,.access-opening .editorial-title .display {
    font-size:clamp(76px,8.1vw,116px);
    margin-bottom:24px
  }

  .breadcrumb {
    margin-bottom:28px
  }

  .editorial-title .section-label {
    margin-bottom:14px
  }

  .editorial-title h1 {
    font-size:24px;
    margin-bottom:16px
  }

  .editorial-title .lead {
    font-size:13px
  }

  .opening-links {
    margin-top:22px
  }

  .opening-media img {
    height:max(460px,calc(100svh - 180px))
  }

  .intro-copy {
    padding-top:88px
  }

  .intro-copy h2:not(.display) {
    font-size:clamp(52px,4.5vw,72px)
  }
}

@media(max-height:680px) and (min-width:768px) {
  .editorial-opening {
    padding-top:100px
  }

  .editorial-title .display,.vip-opening .editorial-title .display,.access-opening .editorial-title .display {
    font-size:clamp(70px,7.2vw,98px)
  }

  .breadcrumb {
    margin-bottom:20px
  }

  .opening-media img {
    height:max(400px,calc(100svh - 170px))
  }

  .hero-mark {
    bottom:35px
  }

  .hero-mark h1 {
    width:100px
  }

  .hero-mark .en {
    margin-bottom:10px
  }

  .hero-actions {
    margin-top:17px
  }

  .tate {
    top:25%;
    font-size:23px
  }

  .scroll-cue {
    bottom:40px
  }

  #main-nav {
    padding-block:100px 35px
  }

  #main-nav>a {
    font-size:60px
  }

  .nav-meta {
    bottom:35px
  }

}

html:not(.js) header {
  position:absolute
}

html:not(.js) #main-nav {
  position:static;
  padding:0;
  background:none;
  display:flex;
  flex-wrap:wrap;
  gap:20px
}

html:not(.js) #main-nav>a {
  font:10px var(--sans);
  letter-spacing:.05em
}

html:not(.js) #main-nav>a::before,html:not(.js) .nav-meta,html:not(.js) .header-actions {
  display:none
}

html:not(.js) #main-nav>a.nav-reserve {
  margin:0;
  padding:0;
  border:0
}

@media(max-width:767px) {
  html:not(.js) header {
    position:relative;
    inset:auto;
    margin:20px 26px;
    height:auto;
    display:block
  }

  html:not(.js) #main-nav {
    margin-top:22px;
    gap:15px
  }

  html:not(.js) body:not(.page-home) .editorial-opening {
    padding-top:35px
  }

  html:not(.js) .page-scene {
    margin-top:30px
  }

}

.availability {
  position:relative;
  z-index:1;
  width:calc(100% - 112px);
  max-width:1488px;
  margin:80px auto 40px;
  padding:38px 0 27px;
  border-top:1px solid #b8a17b66;
  border-bottom:1px solid #b8a17b33;
  display:grid;
  grid-template-columns:1fr 1.15fr;
  gap:28px 64px;
}
.availability-heading h2 {margin:12px 0 10px;font-size:27px;letter-spacing:.08em}
.availability-summary {color:var(--muted);font-size:12px;line-height:1.9;max-width:32em}
.availability-seats {display:grid;grid-template-columns:1fr 1fr;gap:32px;align-self:center;margin:0}
.availability-seats>div {min-width:0;border-left:1px solid #b8a17b33;padding-left:28px}
.availability-seats dt {font-size:14px;letter-spacing:.08em}
.availability-seats dt span {display:block;font-family:var(--sans);color:var(--muted);font-size:9px;letter-spacing:.15em;margin-top:7px}
.availability-seats dd {margin:18px 0 0;font-size:16px;letter-spacing:.04em;white-space:nowrap;display:flex;align-items:center;gap:10px}
.availability-seats dd::before {content:"";width:6px;height:6px;background:#797d72;border-radius:50%;flex-shrink:0}
.availability-seats dd[data-status="AVAILABLE"] {color:#d3dcc4}
.availability-seats dd[data-status="AVAILABLE"]::before {background:#afc294;box-shadow:0 0 12px #afc29444}
.availability-seats dd[data-status="UNAVAILABLE"]::before {background:var(--gold)}
.availability-bottom {grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:16px 32px;flex-wrap:wrap}
.availability-time {font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}
.availability-phone {font-size:12px;letter-spacing:.06em;border-bottom:1px solid #b8a17b66;padding-bottom:5px}
.availability-phone span {margin-left:24px;color:var(--gold)}
.availability-note {flex-basis:100%;font-size:11px;line-height:1.9;color:var(--muted);margin:0;max-width:64em}
.page-access .availability {margin-top:0;margin-bottom:0}
@media(max-width:1023px) {
  .availability {width:calc(100% - 64px);gap:28px 36px}
  .availability-seats {gap:20px}
  .availability-seats>div {padding-left:20px}
  .availability-seats dd {font-size:14px}
}
@media(max-width:767px) {
  .availability {width:calc(100% - 44px);margin:48px auto 0;padding:28px 0;grid-template-columns:1fr;gap:25px}
  .availability-heading h2 {font-size:24px}
  .availability-seats {gap:16px}
  .availability-seats>div {padding-left:16px}
  .availability-seats dd {font-size:13px;letter-spacing:0;gap:7px;margin-top:14px}
  .availability-seats dt {font-size:13px}
  .availability-seats dt span {font-size:8px}
  .availability-bottom {gap:15px}
  .availability-time {font-size:10px}
  .availability-note {font-size:10px}
  .availability-phone {font-size:11px}
  .availability-phone span {margin-left:12px}
}

@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }

  *,*::before,*::after {
    transition-duration:.01ms!important;
    animation-duration:.01ms!important;
    animation-iteration-count:1!important
  }

  .reveal {
    opacity:1;
    transform:none
  }

}