:root {
  --ink:#172019;
  --paper:#f4f1e8;
  --lime:#d8ef46;
  --orange:#dc603c;
  --cream:#fffdf6;
  --line:rgba(23,32,25,.2)
}
* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth
}
body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"Noto Sans JP",sans-serif;
  font-size:16px;
  line-height:1.8
}
a {
  color:inherit;
  text-decoration:none
}
.site-header {
  height:92px;
  padding:0 4vw;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid var(--line);
  position:absolute;
  z-index:10;
  width:100%;
  color:white
}
.brand {
  display:flex;
  flex-direction:column;
  line-height:1
}
.brand-main {
  font:600 1.45rem/1 "DM Sans";
  letter-spacing:.14em
}
.brand-sub {
  font:500 .62rem/1.8 "DM Sans";
  letter-spacing:.32em
}
.site-header nav {
  display:flex;
  gap:2.2rem;
  align-items:center;
  font:500 .78rem "DM Sans";
  letter-spacing:.12em
}
.site-header nav a:hover {
  opacity:.65
}
.reserve-small {
  border:1px solid currentColor;
  padding:.9rem 1.25rem
}
.menu-toggle {
  display:none;
  background:none;
  border:0;
  color:inherit
}
.hero {
  height:min(920px,100vh);
  min-height:680px;
  position:relative;
  background:#1e281f;
  color:white;
  overflow:hidden
}
.hero-image {
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,rgba(12,20,14,.82) 0%,rgba(12,20,14,.43) 48%,rgba(12,20,14,.08) 100%),url('https://images.unsplash.com/photo-1414235077428-338989a2e8c0?auto=format&fit=crop&w=2200&q=85') center/cover
}
.hero-copy {
  position:absolute;
  left:8vw;
  top:50%;
  transform:translateY(-43%);
  max-width:750px
}
.eyebrow {
  font:600 .75rem "DM Sans";
  letter-spacing:.24em;
  margin:0 0 1.2rem
}
.hero h1,.section-pad h2,.menu-lead h2 {
  font:500 clamp(3rem,6.4vw,6.9rem)/1.12 "Noto Sans JP";
  letter-spacing:-.055em;
  margin:0
}
.hero h1 em {
  font-family:"Playfair Display",serif;
  font-weight:600
}
.hero-copy>p:last-of-type {
  margin-top:2rem;
  font-size:1.05rem
}
.circle-link {
  margin-top:2rem;
  width:86px;
  height:86px;
  border:1px solid rgba(255,255,255,.6);
  border-radius:50%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  font:.65rem "DM Sans";
  letter-spacing:.15em
}
.circle-link b {
  font-size:1rem
}
.hours-card {
  position:absolute;
  right:4vw;
  bottom:0;
  background:var(--lime);
  color:var(--ink);
  width:280px;
  padding:1.7rem 2rem
}
.hours-card span,.hours-card small {
  display:block;
  font:.66rem "DM Sans";
  letter-spacing:.16em
}
.hours-card strong {
  font:500 1.55rem "DM Sans";
  display:block;
  margin:.25rem 0
}
.section-pad {
  padding:9rem 8vw
}
.section-number {
  font:500 .75rem "DM Sans";
  padding-bottom:1rem;
  border-bottom:1px solid var(--line);
  margin-bottom:3rem
}
.about {
  display:grid;
  grid-template-columns:.8fr 1.5fr 1fr;
  gap:5vw
}
.about h2,.menu-lead h2,.news h2,.access h2 {
  font-size:clamp(2.3rem,4.5vw,4.8rem)
}
.about-copy {
  padding-top:4.5rem
}
.about-copy p {
  margin:0 0:1.5rem
}
.menu-section {
  background:var(--ink);
  color:white;
  padding-bottom:7rem
}
.menu-lead {
  display:grid;
  grid-template-columns:1.5fr .7fr;
  gap:10vw;
  align-items:end
}
.menu-lead .section-number {
  border-color:rgba(255,255,255,.25)
}
.menu-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr)
}
.menu-card {
  aspect-ratio:4/5;
  position:relative;
  padding:2.2rem;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  background-size:cover;
  background-position:center;
  overflow:hidden
}
.menu-card:before {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.15),rgba(0,0,0,.74))
}
.menu-card>* {
  position:relative
}
.menu-card>span {
  font:500 .75rem "DM Sans"
}
.menu-card h3 {
  font:600 clamp(2rem,4vw,4rem) "DM Sans";
  letter-spacing:.04em;
  margin:0
}
.menu-card p {
  max-width:330px
}
.pasta {
  background-image:url('https://images.unsplash.com/photo-1473093295043-cdd812d0e601?auto=format&fit=crop&w=1200&q=85')
}
.sweets {
  background-image:url('https://images.unsplash.com/photo-1551024601-bec78aea704b?auto=format&fit=crop&w=1200&q=85')
}
.dinner {
  background-image:url('https://images.unsplash.com/photo-1559339352-11d035aa65de?auto=format&fit=crop&w=1200&q=85')
}
.center {
  text-align:center;
  margin-top:4rem
}
.text-link {
  font:600 .8rem "DM Sans";
  letter-spacing:.14em;
  border-bottom:1px solid;
  padding-bottom:.6rem
}
.text-link span,.button span {
  margin-left:1.2rem
}
.news {
  display:grid;
  grid-template-columns:1fr 1.35fr;
  gap:8vw;
  align-items:center
}
.news-heading>p:last-child {
  max-width:480px
}
.insta-panel {
  min-height:460px;
  background:var(--lime);
  padding:4rem;
  display:grid;
  grid-template-columns:.7fr 1.2fr;
  align-items:center
}
.insta-mark {
  font:italic 600 11rem "Playfair Display";
  opacity:.8
}
.insta-panel span {
  font:600 .75rem "DM Sans";
  letter-spacing:.15em
}
.insta-panel h3 {
  font-size:clamp(1.7rem,3vw,3rem);
  line-height:1.4;
  margin:1rem 0 2.5rem
}
.button {
  display:inline-flex;
  align-items:center;
  padding:1.1rem 1.5rem;
  font:600 .75rem "DM Sans";
  letter-spacing:.14em
}
.button.dark {
  background:var(--ink);
  color:white
}
.button.light {
  background:var(--paper);
  color:var(--ink)
}
.access {
  display:grid;
  grid-template-columns:1fr 1fr;
  background:#e9e4d6
}
.access-copy dl {
  margin:3rem 0
}
.access-copy dl div {
  display:grid;
  grid-template-columns:120px 1fr;
  border-top:1px solid var(--line);
  padding:1.2rem 0
}
.access-copy dt {
  font:600 .7rem "DM Sans";
  letter-spacing:.14em
}
.access-copy dd {
  margin:0
}
.access-copy small {
  font-size:.8rem
}
.access-visual {
  background:var(--orange);
  position:relative;
  min-height:750px;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center
}
.access-visual span {
  background:var(--ink);
  color:white;
  border-radius:50%;
  width:150px;
  height:150px;
  display:grid;
  place-items:center;
  font:600 .8rem "DM Sans";
  letter-spacing:.13em;
  z-index:2
}
.access-visual b {
  position:absolute;
  bottom:3rem;
  right:3rem;
  font:500 .7rem/1.8 "DM Sans";
  letter-spacing:.16em
}
.map-lines {
  position:absolute;
  inset:-20%;
  background:repeating-linear-gradient(27deg,transparent 0 76px,rgba(23,32,25,.22) 77px 79px),repeating-linear-gradient(112deg,transparent 0 125px,rgba(23,32,25,.18) 126px 128px);
  transform:rotate(-9deg)
}
.reserve {
  text-align:center;
  background:var(--ink);
  color:white
}
.reserve h2 {
  margin-bottom:3rem
}
.reserve .button {
  background:var(--lime)
}
footer {
  padding:3rem 4vw;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:end
}
footer div {
  display:flex;
  gap:2rem;
  font:600 .72rem "DM Sans";
  letter-spacing:.12em
}
footer small {
  text-align:right;
  font:.65rem "DM Sans";
  letter-spacing:.1em
}
@media(max-width:800px) {
  .site-header {
    height:74px
  }
  .site-header nav {
    display:none;
    position:absolute;
    left:0;
    right:0;
    top:74px;
    background:var(--ink);
    padding:2rem 6vw;
    flex-direction:column;
    align-items:flex-start
  }
  .site-header nav.open {
    display:flex
  }
  .menu-toggle {
    display:block;
    font:600 .72rem "DM Sans";
    letter-spacing:.15em
  }
  .hero {
    min-height:720px
  }
  .hero-copy {
    left:6vw;
    right:6vw
  }
  .hero h1 {
    font-size:clamp(2.7rem,12vw,4.2rem)
  }
  .hours-card {
    right:0;
    width:240px
  }
  .section-pad {
    padding:6rem 6vw
  }
  .about,.news,.access,.menu-lead {
    grid-template-columns:1fr
  }
  .about {
    gap:1.5rem
  }
  .about-copy {
    padding-top:0
  }
  .menu-grid {
    grid-template-columns:1fr
  }
  .menu-card {
    aspect-ratio:5/4
  }
  .news {
    gap:2rem
  }
  .insta-panel {
    min-height:380px;
    padding:2.2rem;
    grid-template-columns:1fr
  }
  .insta-mark {
    font-size:6rem;
    line-height:1
  }
  .access-visual {
    min-height:450px
  }
  .access-copy dl div {
    grid-template-columns:95px 1fr
  }
  .reserve h2 {
    font-size:2.4rem
  }
  footer {
    grid-template-columns:1fr;
    gap:2rem
  }
  footer small {
    text-align:left
  }
}
footer .powered-by {
  grid-column: 1 / -1;
  width: 100%;
  margin: 32px 0 0;
  text-align: center;
  font-size: 11px;
  letter-spacing: 0.08em;
  opacity: 0.6;
}

footer .powered-by a {
  color: inherit;
  text-decoration: none;
}

footer .powered-by a:hover {
  opacity: 0.7;
}