:root {
  --ink: #171717;
  --paper: #f2eee6;
  --cream: #ded3c1;
  --accent: #e6522c;
  --wine: #551f25;
  --line: rgba(23,23,23,.18);
  --max: 1200px
}

* {
  box-sizing: border-box
}

html {
  scroll-behavior: smooth
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Noto Sans JP",Arial,sans-serif;
  line-height: 1.65
}

a {
  color: inherit;
  text-decoration: none
}

h1,h2,h3,p {
  margin-top: 0
}

.site-header {
  height: 86px;
  padding: 0 5vw;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: absolute;
  z-index: 20;
  width: 100%;
  color: #fff;
  border-bottom: 1px solid rgba(255,255,255,.22)
}

.brand {
  display: flex;
  gap: 12px;
  align-items: center
}

.brand-mark {
  border: 1px solid currentColor;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: "Noto Serif JP"
}

.brand-copy {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
  letter-spacing: .14em
}

.brand-copy small {
  font-size: 9px;
  margin-top: 5px
}

.nav {
  display: flex;
  align-items: center;
  gap: 30px;
  font-size: 13px
}

.nav a {
  opacity: .86
}

.nav a:hover {
  opacity: 1
}

.nav-cta {
  border: 1px solid rgba(255,255,255,.65);
  padding: 10px 18px;
  border-radius: 999px
}

.menu-button {
  display: none;
  background: none;
  border: 0
}

.hero {
  min-height: 100vh;
  padding: 160px 8vw 80px;
  position: relative;
  overflow: hidden;
  color: white;
  background: linear-gradient(90deg,rgba(8,7,7,.92) 0%,rgba(12,9,7,.72) 42%,rgba(12,8,5,.16) 72%,rgba(8,6,4,.12) 100%),url('assets/hero-whisky.jpg') center right/cover no-repeat
}

.hero:after {
  content: "";
  position: absolute;
  right: -10vw;
  bottom: -16vw;
  width: 58vw;
  height: 58vw;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 50%;
  box-shadow: 0 0 0 5vw rgba(255,255,255,.025),0 0 0 10vw rgba(255,255,255,.02)
}

.hero-noise {
  position: absolute;
  inset: 0;
  opacity: .12;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E")
}

.hero-content {
  max-width: 940px;
  position: relative;
  z-index: 2
}

.eyebrow {
  font-size: 11px;
  letter-spacing: .24em;
  font-weight: 600;
  margin-bottom: 25px
}

.hero h1,.section h2,.atmosphere h2,.contact h2 {
  font-family: "Noto Serif JP",serif;
  font-size: clamp(48px,7.6vw,112px);
  line-height: .98;
  letter-spacing: -.04em;
  font-weight: 600
}

.hero h1 em,.menu-heading em {
  font-weight: 600;
  color: var(--accent)
}

.hero-lead {
  max-width: 620px;
  font-size: 18px;
  color: rgba(255,255,255,.72);
  margin: 35px 0
}

.hero-actions,.contact-actions {
  display: flex;
  gap: 28px;
  align-items: center
}

.button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height: 52px;
  padding: 0 28px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .04em
}

.button-primary {
  background: var(--accent);
  color: #fff
}

.button-dark {
  background: var(--ink);
  color: #fff
}

.text-link {
  font-size: 13px;
  border-bottom: 1px solid currentColor;
  padding-bottom: 5px
}

.hero-card {
  position: absolute;
  right: 7vw;
  bottom: 75px;
  z-index: 3;
  border: 1px solid rgba(255,255,255,.3);
  padding: 25px 30px;
  min-width: 290px;
  background: rgba(255,255,255,.06);
  backdrop-filter: blur(12px)
}

.hero-card span,.hero-card small {
  display: block;
  font-size: 10px;
  letter-spacing: .15em;
  color: rgba(255,255,255,.6)
}

.hero-card strong {
  display: block;
  font-family: "Noto Serif JP";
  font-size: 22px;
  margin: 7px 0
}

.hero-scroll {
  position: absolute;
  left: 3vw;
  bottom: 80px;
  z-index: 3;
  font-size: 9px;
  letter-spacing: .25em;
  transform: rotate(-90deg);
  transform-origin: left
}

.hero-scroll span {
  display: inline-block;
  width: 70px;
  border-top: 1px solid white;
  margin: 0 10px 3px
}

.section {
  max-width: var(--max);
  margin: auto;
  padding: 130px 40px;
  position: relative
}

.section-number {
  font-size: 11px;
  letter-spacing: .18em;
  border-top: 1px solid var(--line);
  padding-top: 15px;
  margin-bottom: 70px
}

.intro {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  column-gap: 80px
}

.intro .section-number,.intro .feature-grid {
  grid-column: 1/-1
}

.intro-copy h2,.menu-heading h2,.events-heading h2,.access-copy h2 {
  font-size: clamp(43px,6vw,78px)
}

.intro-body {
  padding-top: 45px;
  font-size: 16px;
  color: #514e49
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 22px;
  margin-top: 90px
}

.feature-card {
  border-top: 1px solid var(--ink);
  padding-top: 25px
}

.feature-card span {
  font-size: 11px;
  color: var(--accent)
}

.feature-card h3 {
  font-family: "Noto Serif JP";
  font-size: 28px;
  margin: 28px 0 10px
}

.feature-card p {
  color: #66615a
}

.quote-band {
  overflow: hidden;
  background: var(--accent);
  color: #fff;
  padding: 18px 0;
  white-space: nowrap
}

.quote-band p {
  margin: 0;
  font-size: 12px;
  letter-spacing: .25em;
  animation: marquee 24s linear infinite
}

@keyframes marquee {
  to {
    transform: translateX(-50%)
  }

}

.menu-section {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 70px
}

.menu-section .section-number,.menu-note {
  grid-column: 1/-1
}

.menu-heading {
  position: sticky;
  top: 80px;
  align-self: start
}

.menu-list article {
  display: flex;
  justify-content: space-between;
  gap: 25px;
  padding: 24px 0;
  border-bottom: 1px solid var(--line)
}

.menu-list h3 {
  font-family: "Noto Serif JP";
  font-size: 28px;
  margin-bottom: 4px
}

.menu-list p,.menu-list strong {
  font-size: 13px;
  color: #69645d
}

.menu-note {
  font-size: 11px;
  color: #888078
}

.atmosphere {
  min-height: 800px;
  background: var(--wine);
  color: #fff;
  display: grid;
  grid-template-columns: 1.1fr .9fr
}

.atmosphere-visual {
  min-height: 700px;
  background: linear-gradient(rgba(15,8,10,.15),rgba(15,8,10,.25)),url('assets/bar-abstract.svg') center/cover;
  display: grid;
  place-items: center
}

.neon-sign {
  font-family: "Noto Serif JP";
  font-style: italic;
  font-size: clamp(50px,7vw,105px);
  line-height: .84;
  text-align: center;
  color: #ffe8d9;
  text-shadow: 0 0 8px #ff8a62,0 0 28px #e6522c,0 0 80px #e6522c;
  transform: rotate(-4deg)
}

.atmosphere-copy {
  padding: 110px 8vw;
  align-self: center
}

.atmosphere-copy h2 {
  font-size: clamp(48px,6vw,82px)
}

.atmosphere-copy p:last-child {
  color: rgba(255,255,255,.68);
  max-width: 520px
}

.events-heading {
  max-width: 750px
}

.event-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 18px;
  margin-top: 65px
}

.event-card {
  min-height: 330px;
  border: 1px solid var(--line);
  padding: 35px;
  display: flex;
  flex-direction: column;
  transition: .25s
}

.event-card:hover {
  background: var(--ink);
  color: #fff;
  transform: translateY(-5px)
}

.event-card>p {
  font-size: 10px;
  letter-spacing: .2em;
  color: var(--accent)
}

.event-card h3 {
  font-family: "Noto Serif JP";
  font-size: 34px;
  line-height: 1.15;
  margin-top: 45px
}

.event-card span {
  font-size: 13px;
  color: #78716a
}

.event-card small {
  margin-top: auto
}

.access {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: 80px
}

.access .section-number {
  grid-column: 1/-1
}

.address {
  margin: 40px 0
}

.access dl>div {
  display: grid;
  grid-template-columns: 120px 1fr;
  border-top: 1px solid var(--line);
  padding: 16px 0;
  font-size: 13px
}

.access dt {
  font-weight: 600
}

.access dd {
  margin: 0;
  color: #6d665f
}

.map-card {
  min-height: 620px;
  background: #d7c9b4;
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center
}

.map-grid {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(23,23,23,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(23,23,23,.08) 1px,transparent 1px);
  background-size: 48px 48px
}

.map-road {
  position: absolute;
  background: #efe9dd;
  border: 1px solid rgba(23,23,23,.12)
}

.road-a {
  width: 130%;
  height: 45px;
  transform: rotate(25deg)
}

.road-b {
  height: 130%;
  width: 54px;
  transform: rotate(12deg)
}

.road-c {
  width: 120%;
  height: 28px;
  transform: rotate(-30deg)
}

.map-pin {
  z-index: 2;
  width: 82px;
  height: 82px;
  background: var(--accent);
  border-radius: 50% 50% 50% 8px;
  transform: rotate(-45deg);
  display: grid;
  place-items: center;
  box-shadow: 0 20px 40px rgba(0,0,0,.18)
}

.map-pin span {
  color: white;
  font-family: "Noto Serif JP";
  font-size: 30px;
  transform: rotate(45deg)
}

.map-card p {
  position: absolute;
  bottom: 25px;
  left: 25px;
  right: 25px;
  font-size: 11px;
  background: rgba(242,238,230,.85);
  padding: 10px
}

.map-card-image {
  display: block;
  background: #201e1a
}

.map-card-image>a {
  position: relative;
  display: block;
  width: 100%;
  height: 100%
}

.map-card-image img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 620px;
  object-fit: cover;
  object-position: center
}

.map-open-label {
  position: absolute;
  right: 22px;
  bottom: 22px;
  padding: 11px 15px;
  background: rgba(17,17,15,.9);
  color: #f1eadc;
  font-size: 11px;
  letter-spacing: .08em;
  box-shadow: 0 8px 25px rgba(0,0,0,.2)
}

.map-card-image>a:hover .map-open-label {
  background: #b7924f;
  color: #17130c
}

@media(max-width:820px) {
  .map-card-image img {
    min-height: 450px
  }
}

.access-phone {
  font-weight: 500;
  letter-spacing: .04em
}

.access-phone:hover {
  color: #d0b270
}

.light {
  color: white
}

footer {
  background: var(--ink);
  color: white;
  border-top: 1px solid rgba(255,255,255,.13);
  padding: 35px 5vw;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px
}

footer div {
  display: flex;
  flex-direction: column;
  letter-spacing: .12em
}

footer p {
  margin: 0;
  color: rgba(255,255,255,.55)
}

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .75s,transform .75s
}

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

@media(max-width:820px) {
  .site-header {
    height: 70px
  }

  .menu-button {
    display: block;
    position: relative;
    z-index: 4;
    width: 38px;
    height: 38px
  }

  .menu-button span {
    display: block;
    border-top: 1px solid white;
    margin: 8px
  }

  .nav {
    display: none;
    position: absolute;
    top: 70px;
    left: 0;
    right: 0;
    background: #171717;
    padding: 25px 5vw;
    flex-direction: column;
    align-items: flex-start
  }

  .nav.open {
    display: flex
  }

  .hero {
    padding: 130px 7vw 150px
  }

  .hero-card {
    left: 7vw;
    right: 7vw;
    bottom: 35px
  }

  .hero-scroll {
    display: none
  }

  .section {
    padding: 90px 24px
  }

  .intro,.menu-section,.access,.atmosphere {
    grid-template-columns: 1fr
  }

  .intro-body {
    padding-top: 0
  }

  .feature-grid,.event-grid {
    grid-template-columns: 1fr
  }

  .menu-heading {
    position: static
  }

  .atmosphere-visual {
    min-height: 500px
  }

  .map-card {
    min-height: 450px
  }

  .hero-actions,.contact-actions {
    align-items: flex-start;
    flex-direction: column
  }

  .access {
    gap: 35px
  }

  footer {
    gap: 20px;
    align-items: flex-start;
    flex-direction: column
  }

}

.hero-content {
  max-width: 760px
}

.hero h1 {
  font-size: clamp(48px,6.5vw,94px);
  line-height: 1.18;
  letter-spacing: -.03em
}

.hero h1 em {
  font-style: normal;
  color: #e6b75c
}

.hero-lead {
  font-size: 17px;
  line-height: 2
}

.button-primary {
  background: #c99532
}

.quote-band {
  background: #b9862d
}

.hero:after {
  display: none
}

@media(max-width:820px) {
  .hero {
    background-position: 62% center
  }

  .hero:before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,rgba(7,6,5,.78),rgba(7,6,5,.5) 60%,rgba(7,6,5,.82))
  }

  .hero-content,.hero-card {
    position: relative
  }

  .hero-card {
    position: absolute
  }

}

/* Refined luxury palette */
:root {
  --ink: #151411;
  --paper: #f4f0e7;
  --cream: #d9cfbd;
  --accent: #b7924f;
  --wine: #2d171a;
  --line: rgba(45,38,27,.18)
}

body {
  background: linear-gradient(180deg,#f7f3eb 0%,var(--paper) 38%,#eee8dc 100%);
  color: var(--ink)
}

.site-header {
  border-bottom-color: rgba(220,195,145,.28)
}

.brand-mark {
  border-color: rgba(214,190,142,.75);
  color: #e1c88f
}

.nav-cta {
  border-color: rgba(214,190,142,.65);
  color: #f1dfb4
}

.hero {
  background: linear-gradient(90deg,rgba(10,9,8,.96) 0%,rgba(18,14,10,.86) 43%,rgba(28,18,10,.34) 73%,rgba(12,9,7,.2) 100%),url('assets/hero-whisky.jpg') center right/cover no-repeat
}

.hero h1 em,.menu-heading em {
  color: #d4b16d
}

.hero-lead {
  color: rgba(246,239,225,.74)
}

.button-primary {
  background: linear-gradient(135deg,#c2a05e,#9d7636);
  color: #fffaf0;
  box-shadow: 0 10px 30px rgba(48,31,8,.2)
}

.button-primary:hover {
  background: linear-gradient(135deg,#cfaf6d,#aa8241)
}

.hero-card {
  border-color: rgba(220,195,145,.38);
  background: rgba(24,18,12,.34);
  box-shadow: 0 18px 50px rgba(0,0,0,.22)
}

.feature-card span,.event-card>p {
  color: #9b783b
}

.quote-band {
  background: #9a7639;
  color: #fff8ea;
  border-top: 1px solid #c3a66c;
  border-bottom: 1px solid #765523
}

.atmosphere {
  background: linear-gradient(135deg,#241315 0%,var(--wine) 55%,#3a1d20 100%)
}

.atmosphere-visual {
  background: linear-gradient(rgba(18,9,10,.38),rgba(18,9,10,.5)),url('assets/bar-abstract.svg') center/cover
}

.neon-sign {
  color: #f9e6bd;
  text-shadow: 0 0 8px #d8b46b,0 0 28px #a97838,0 0 80px #70431f
}

.event-card {
  background: rgba(255,255,255,.18)
}

.event-card:hover {
  background: #1c1a16;
  border-color: #8f713e
}

.map-card {
  background: #cec1aa;
  border: 1px solid rgba(104,79,39,.25);
  box-shadow: 0 22px 60px rgba(45,35,20,.14)
}

.map-pin {
  background: linear-gradient(135deg,#c1a05f,#89652f)
}

.map-card p {
  background: rgba(247,243,235,.9)
}

footer {
  background: #11110f
}

.button-dark {
  background: #1b1915;
  border: 1px solid #8f713e
}

@media(max-width:820px) {
  .hero:before {
    background: linear-gradient(180deg,rgba(9,8,7,.86),rgba(16,12,8,.58) 58%,rgba(8,7,6,.9))
  }

}

/* Dark luxury base */
:root {
  --ink: #f1eadc;
  --paper: #171613;
  --cream: #29261f;
  --line: rgba(224,202,157,.16)
}

body {
  background: linear-gradient(180deg,#1b1916 0%,#121210 52%,#1a1714 100%);
  color: var(--ink)
}

.intro-body,.feature-card p,.menu-list p,.menu-list strong,.menu-note,.event-card span,.access dd {
  color: #aaa294
}

.feature-card {
  border-top-color: rgba(224,202,157,.28)
}

.section-number,.menu-list article,.access dl>div {
  border-color: var(--line)
}

.event-card {
  background: rgba(255,255,255,.025);
  border-color: var(--line)
}

.event-card:hover {
  background: #242019
}

.map-card {
  background: #2d2922;
  border-color: rgba(193,160,95,.32)
}

.map-grid {
  background-image: linear-gradient(rgba(226,207,170,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(226,207,170,.07) 1px,transparent 1px)
}

.map-road {
  background: #454035;
  border-color: rgba(225,204,163,.12)
}

.map-card p {
  background: rgba(20,19,16,.88);
  color: #c8c0b1
}

.button-dark {
  background: #b7924f;
  color: #17130c;
  border-color: #d0b270
}

.media-showcase {
  max-width: 1320px
}

.media-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 50px;
  margin-bottom: 60px
}

.media-heading .eyebrow {
  margin-bottom: 12px
}

.media-heading h2 {
  max-width: 780px;
  margin-bottom: 0;
  font-family: "Noto Serif JP",serif;
  font-size: clamp(43px,6vw,78px);
  line-height: 1.05;
  letter-spacing: -.04em
}

.media-video {
  width: min(100%,520px);
  margin-inline: auto;
  overflow: hidden;
  border: 1px solid rgba(224,202,157,.22);
  background: #080807;
  box-shadow: 0 28px 70px rgba(0,0,0,.24)
}

.media-video video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 9 / 16;
  margin: auto;
  background: #080807;
  object-fit: cover
}

.media-photo-grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 18px;
  margin-top: 18px
}

.media-photo {
  position: relative;
  aspect-ratio: 3 / 4;
  margin: 0;
  overflow: hidden;
  background: #24211c
}

.media-photo:after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(224,202,157,.16);
  background: linear-gradient(180deg,transparent 70%,rgba(7,6,5,.16))
}

.media-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s ease,filter .6s ease
}

.media-photo:hover img {
  transform: scale(1.025);
  filter: brightness(1.04)
}

@media(max-width:820px) {
  .media-heading {
    display: block;
    margin-bottom: 35px
  }

  .media-heading .eyebrow {
    margin-bottom: 24px
  }

  .media-photo-grid {
    grid-template-columns: 1fr;
    gap: 14px;
    margin-top: 14px
  }

  .media-photo {
    aspect-ratio: 4 / 5
  }
}

.language-switcher {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-left: auto;
  margin-right: 28px;
  font-size: 11px;
  letter-spacing: .08em;
  color: rgba(255,255,255,.42)
}

.language-switcher button {
  padding: 6px 2px;
  border: 0;
  border-bottom: 1px solid transparent;
  background: transparent;
  color: rgba(255,255,255,.52);
  font: inherit;
  cursor: pointer;
  transition: color .2s,border-color .2s
}

.language-switcher button:hover,
.language-switcher button[aria-pressed="true"] {
  color: #e1c88f;
  border-bottom-color: #b7924f
}

[data-lang-content][hidden] {
  display: none
}

@media(max-width:820px) {
  .language-switcher {
    order: 2;
    margin-left: auto;
    margin-right: 12px
  }

  .menu-button {
    order: 3
  }

  .site-header .nav {
    order: 4;
    z-index: 3
  }
}