:root {
  --red: #aa1230;
  --red-dark: #771025;
  --ink: #17121b;
  --indigo: #182049;
  --blue: #164e67;
  --cream: #f5eedf;
  --paper: #fffaf0;
  --yellow: #f4bf28;
  --line: rgba(23, 18, 27, .18);
  --max: 1200px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: "Yu Gothic", "Hiragino Kaku Gothic ProN", system-ui, sans-serif;
  line-height: 1.8;
  letter-spacing: .035em;
}
body.nav-open { overflow: hidden; }
img { display: block; width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, a { -webkit-tap-highlight-color: transparent; }
.skip-link {
  position: fixed; z-index: 1000; left: 16px; top: -100px;
  padding: 10px 16px; background: #fff; color: #000;
}
.skip-link:focus { top: 16px; }
.site-header {
  position: absolute; z-index: 50; inset: 0 0 auto;
  display: grid; grid-template-columns: 100px 1fr auto; align-items: center;
  gap: 28px; max-width: var(--max); margin: auto; padding: 22px 28px;
}
.brand { width: 86px; background: #fff; border-radius: 50%; overflow: hidden; box-shadow: 0 8px 30px rgba(0,0,0,.12); }
.desktop-nav { display: flex; justify-content: center; gap: clamp(18px, 3vw, 42px); font-size: 13px; font-weight: 700; }
.desktop-nav a { padding: 12px 0; border-bottom: 2px solid transparent; }
.desktop-nav a:hover, .desktop-nav a:focus-visible { border-color: var(--red); }
.header-actions { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; }
.header-actions a { min-height: 48px; display: grid; place-items: center; padding: 0 18px; }
.phone-link { border: 1px solid var(--ink); }
.reserve-link { background: var(--red); color: #fff; }
.menu-toggle { display: none; }
.mobile-nav { position: fixed; z-index: 45; inset: 0; background: var(--indigo); color: #fff; padding: 96px 24px 32px; }
.mobile-nav nav { max-width: 520px; margin: auto; display: grid; }
.mobile-nav a { min-height: 54px; display: flex; align-items: center; border-bottom: 1px solid rgba(255,255,255,.2); font-weight: 700; }
.mobile-nav .mobile-reserve { justify-content: center; margin-top: 22px; background: var(--red); border: 0; }
.hero {
  min-height: 760px; position: relative; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(420px, .9fr);
  background: var(--cream);
}
.hero-image { height: 760px; overflow: hidden; clip-path: polygon(0 0, 92% 0, 100% 100%, 0 100%); }
.hero-image img { height: 100%; object-fit: cover; filter: saturate(.9) contrast(1.06); }
.hero-copy { align-self: center; padding: 130px clamp(32px, 5vw, 90px) 80px 38px; position: relative; z-index: 2; }
.eyebrow, .section-label { font-family: Georgia, serif; letter-spacing: .16em; font-size: 12px; font-weight: 700; }
.eyebrow { color: var(--red); }
.hero h1, h2 {
  margin: 0; font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-weight: 600; line-height: 1.35; letter-spacing: .08em;
}
.hero h1 { font-size: clamp(46px, 5vw, 68px); letter-spacing: .035em; }
.hero h1 span { display: block; white-space: nowrap; }
.hero-lead { margin: 28px 0 32px; font-size: 16px; }
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; }
.button {
  min-height: 52px; display: inline-flex; align-items: center; justify-content: center;
  gap: 12px; padding: 0 24px; font-size: 14px; font-weight: 700; transition: transform .2s, background .2s;
}
.button:hover { transform: translateY(-2px); }
.button-primary { background: var(--red); color: #fff; }
.button-ghost { border: 1px solid var(--ink); }
.hero-meta { display: grid; grid-template-columns: repeat(2, 1fr); max-width: 460px; margin: 44px 0 0; border-top: 1px solid var(--line); }
.hero-meta div { padding: 16px 12px 0 0; }
.hero-meta dt { font: 700 10px Georgia, serif; letter-spacing: .15em; color: var(--red); }
.hero-meta dd { margin: 3px 0 0; font-size: 13px; }
.hero-stamp {
  position: absolute; right: -10px; bottom: 10px; margin: 0; color: rgba(170,18,48,.09);
  font: 700 clamp(70px, 11vw, 150px) "Yu Mincho", serif; writing-mode: vertical-rl;
}
.section { max-width: var(--max); margin: auto; padding: 110px 28px; }
.section-label { display: flex; align-items: center; gap: 12px; margin-bottom: 54px; color: var(--red); }
.section-label::after { content: ""; width: 64px; height: 1px; background: currentColor; }
.section-label span { font-size: 10px; border: 1px solid currentColor; border-radius: 50%; width: 30px; height: 30px; display: grid; place-items: center; }
.section-label.light { color: #fff; }
.intro-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 80px; align-items: start; }
.kicker { color: var(--red); font-size: 13px; font-weight: 700; margin: 0 0 14px; }
.intro h2, .gallery h2, .news h2 { font-size: clamp(34px, 4.4vw, 58px); }
.intro-copy { padding-top: 16px; }
.intro-copy p { margin: 0 0 20px; }
.feature-grid { margin-top: 72px; display: grid; grid-template-columns: 1.45fr 1fr 1fr; gap: 16px; }
.feature-card { position: relative; min-height: 420px; overflow: hidden; color: #fff; }
.feature-card img { height: 100%; object-fit: cover; transition: transform .5s; }
.feature-card:hover img { transform: scale(1.035); }
.feature-card::after { content:""; position:absolute; inset:35% 0 0; background:linear-gradient(transparent, rgba(7,5,13,.8)); }
.feature-card div { position: absolute; z-index: 2; left: 24px; right: 24px; bottom: 22px; }
.feature-card span { font: 700 10px Georgia, serif; letter-spacing: .16em; }
.feature-card h3 { margin: 6px 0 0; font: 600 23px/1.55 "Yu Mincho", serif; letter-spacing: .06em; }
.menu-section { max-width: none; padding-left: max(28px, calc((100vw - var(--max))/2 + 28px)); padding-right: max(28px, calc((100vw - var(--max))/2 + 28px)); background: var(--indigo); color: #fff; }
.section-heading { max-width: var(--max); margin: auto; display: grid; grid-template-columns: 1fr 1.4fr 1fr; gap: 40px; align-items: end; }
.section-heading .section-label { margin: 0; align-self: start; }
.section-heading h2 { font-size: clamp(42px, 5vw, 66px); }
.section-heading .kicker { color: #f0c55b; }
.section-heading > p { margin: 0; font-size: 12px; opacity: .72; }
.menu-layout { max-width: var(--max); margin: 66px auto 0; display: grid; grid-template-columns: .85fr 1.15fr; gap: 70px; }
.menu-photo { position: sticky; top: 30px; align-self: start; margin: 0; }
.menu-photo img { aspect-ratio: 4/5; object-fit: cover; }
.menu-photo span { display: inline-block; margin-top: 18px; padding: 3px 10px; background: var(--yellow); color: var(--ink); font-size: 11px; font-weight: 700; }
.menu-photo h3 { display: inline-block; margin: 14px 0 0; font: 600 32px/1.4 "Yu Mincho", serif; }
.menu-photo p { float: right; margin: 28px 0 0; font: 20px Georgia, serif; }
.menu-lists { display: grid; grid-template-columns: repeat(2, 1fr); gap: 42px 38px; }
.menu-group h3 { margin: 0 0 12px; padding-bottom: 12px; color: #f0c55b; border-bottom: 2px solid #f0c55b; font: 600 19px "Yu Mincho", serif; }
.menu-group dl { margin: 0; }
.menu-group dl div { display: grid; grid-template-columns: 1fr auto; gap: 16px; padding: 13px 0; border-bottom: 1px solid rgba(255,255,255,.16); font-size: 13px; }
.menu-group dd { margin: 0; }
.menu-group dd::before { content: "¥"; margin-right: 3px; font-size: 10px; }
.drink-group { background: var(--blue); padding: 22px; margin: -22px; }
.menu-note { max-width: var(--max); margin: 72px auto 0; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.3); display: flex; justify-content: space-between; gap: 20px; align-items: center; }
.menu-note p { font: 600 20px "Yu Mincho", serif; }
.menu-note a { min-height: 48px; display: flex; align-items: center; border-bottom: 1px solid #fff; font-size: 13px; font-weight: 700; }
.gallery { display: grid; grid-template-columns: .62fr 1.38fr; gap: 60px; }
.gallery-heading { position: sticky; top: 40px; align-self: start; }
.gallery-heading .section-label { margin-bottom: 38px; }
.gallery-heading a { display: inline-block; margin-top: 28px; padding-bottom: 7px; border-bottom: 1px solid var(--ink); font-size: 12px; font-weight: 700; }
.gallery-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.gallery-grid figure { margin: 0; overflow: hidden; background: var(--cream); }
.gallery-grid img { height: 100%; object-fit: cover; transition: transform .45s; }
.gallery-grid figure:hover img { transform: scale(1.03); }
.gallery-a { grid-row: span 2; min-height: 620px; }
.gallery-b { min-height: 300px; }
.gallery-c { min-height: 300px; }
.gallery-d { grid-column: span 2; min-height: 360px; }
.gallery-e { grid-column: 2; min-height: 340px; }
.news { border-top: 1px solid var(--line); }
.news-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.instagram-card {
  min-height: 250px; padding: 36px; position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end; background: var(--red); color: #fff;
}
.instagram-card::before {
  content: ""; position: absolute; inset: -40%; opacity: .18; transform: rotate(18deg);
  background: repeating-linear-gradient(90deg, transparent 0 30px, #fff 30px 32px);
}
.instagram-card span, .instagram-card strong { position: relative; z-index: 2; }
.instagram-card > span:first-child { font: 700 11px Georgia, serif; letter-spacing: .17em; }
.instagram-card strong { margin-top: 10px; font-size: clamp(20px, 3vw, 34px); }
.instagram-arrow { position: absolute !important; right: 30px; top: 22px; font-size: 28px; }
.access { max-width: none; padding: 0; background: var(--red-dark); color: #fff; }
.access-inner { max-width: var(--max); margin: auto; padding: 105px 28px; display: grid; grid-template-columns: .65fr 1fr 1.15fr; gap: 60px; }
.access-inner .section-label { align-self: start; }
.access-title .kicker { color: #f0c55b; }
.access-title h2 { font-size: clamp(42px, 5vw, 64px); }
.access-details dl { margin: 0; }
.access-details dl > div { display: grid; grid-template-columns: 80px 1fr; gap: 20px; padding: 16px 0; border-bottom: 1px solid rgba(255,255,255,.23); font-size: 13px; }
.access-details dt { color: #f0c55b; font-weight: 700; }
.access-details dd { margin: 0; }
.access-details small { opacity: .78; }
.access-details dd a { border-bottom: 1px solid #fff; font-size: 17px; font-weight: 700; }
.access-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 28px; }
.button-light { background: #fff; color: var(--red-dark); }
.button-outline-light { border: 1px solid #fff; }
.site-footer { max-width: var(--max); margin: auto; padding: 72px 28px 94px; }
.footer-main { display: grid; grid-template-columns: 120px 1fr auto; gap: 34px; align-items: center; }
.footer-main img { width: 110px; }
.footer-main p { font-size: 13px; }
.footer-links { display: flex; gap: 26px; font-size: 12px; font-weight: 700; }
.footer-links a { min-height: 48px; display: flex; align-items: center; }
.footer-bottom { margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; font-size: 11px; }
.mobile-bottom-bar { display: none; }

@media (max-width: 900px) {
  .site-header { position: absolute; grid-template-columns: 66px 1fr 56px; padding: 16px; }
  .brand { width: 64px; }
  .desktop-nav, .header-actions { display: none; }
  .menu-toggle {
    position: fixed; z-index: 60; right: 16px; top: 16px; width: 52px; height: 52px;
    display: grid; place-content: center; gap: 5px; border: 0; background: var(--red); cursor: pointer;
  }
  .menu-toggle span { width: 24px; height: 2px; display: block; background: #fff; transition: transform .2s, opacity .2s; }
  .menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .hero { min-height: 780px; display: block; background: var(--cream); }
  .hero-image { height: 430px; clip-path: polygon(0 0, 100% 0, 100% 88%, 0 100%); }
  .hero-copy { padding: 12px 24px 90px; margin-top: -18px; }
  .hero h1 { font-size: clamp(44px, 11vw, 62px); }
  .hero-lead { margin: 18px 0 24px; }
  .hero-meta { margin-top: 28px; }
  .hero-stamp { display: none; }
  .section { padding: 82px 22px; }
  .section-label { margin-bottom: 38px; }
  .intro-grid, .news-grid { grid-template-columns: 1fr; gap: 30px; }
  .feature-grid { grid-template-columns: 1fr 1fr; margin-top: 50px; }
  .feature-large { grid-column: span 2; min-height: 480px; }
  .feature-card:not(.feature-large) { min-height: 340px; }
  .section-heading { grid-template-columns: 1fr; gap: 20px; }
  .section-heading .section-label { margin-bottom: 20px; }
  .menu-layout { grid-template-columns: 1fr; gap: 54px; }
  .menu-photo { position: relative; top: 0; max-width: 560px; }
  .gallery { grid-template-columns: 1fr; }
  .gallery-heading { position: relative; top: 0; }
  .access-inner { grid-template-columns: .7fr 1fr; }
  .access-inner .section-label { grid-column: span 2; }
  .footer-main { grid-template-columns: 90px 1fr; }
  .footer-links { grid-column: span 2; flex-wrap: wrap; }
}

@media (max-width: 560px) {
  body { padding-bottom: 64px; }
  .desktop-only { display: none; }
  .hero { min-height: 770px; }
  .hero-image { height: 390px; }
  .hero-copy { padding: 5px 20px 72px; }
  .hero h1 { font-size: clamp(42px, 11vw, 50px); }
  .hero-lead { font-size: 14px; }
  .hero-cta { display: grid; grid-template-columns: 1fr 1fr; }
  .button { min-height: 50px; padding: 0 14px; font-size: 12px; }
  .hero-meta { font-size: 11px; }
  .hero-meta div { padding-right: 8px; }
  .section { padding: 72px 18px; }
  .section-label { margin-bottom: 32px; }
  .intro h2, .gallery h2, .news h2 { font-size: 34px; }
  .feature-grid { grid-template-columns: 1fr; gap: 10px; }
  .feature-large { grid-column: auto; min-height: 420px; }
  .feature-card:not(.feature-large) { min-height: 300px; }
  .menu-section { padding-left: 18px; padding-right: 18px; }
  .section-heading h2 { font-size: 46px; }
  .menu-lists { grid-template-columns: 1fr; gap: 44px; }
  .drink-group { margin: -10px; }
  .menu-note { display: block; }
  .menu-note a { display: inline-flex; }
  .gallery { gap: 36px; }
  .gallery-grid { gap: 8px; }
  .gallery-a { min-height: 440px; }
  .gallery-b, .gallery-c { min-height: 210px; }
  .gallery-d { min-height: 240px; }
  .gallery-e { min-height: 220px; }
  .news-grid { gap: 34px; }
  .instagram-card { min-height: 210px; padding: 24px; }
  .access-inner { padding: 72px 18px; grid-template-columns: 1fr; gap: 38px; }
  .access-inner .section-label { grid-column: auto; }
  .access-details dl > div { grid-template-columns: 70px 1fr; }
  .footer-main { grid-template-columns: 76px 1fr; gap: 18px; }
  .footer-main img { width: 74px; }
  .footer-links { gap: 18px; }
  .footer-bottom { display: block; }
  .mobile-bottom-bar {
    position: fixed; z-index: 40; inset: auto 0 0; height: 64px;
    display: grid; grid-template-columns: .8fr 1.2fr; background: var(--ink); color: #fff;
  }
  .mobile-bottom-bar a { min-height: 64px; display: grid; place-items: center; font-size: 13px; font-weight: 700; }
  .mobile-bottom-bar a:last-child { background: var(--red); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }