/* ============================================================================
   FILE: style.css  |  WEBSITE STYLES
   ============================================================================ */
:root {
  --ink:#25352e;
  --paper:#f5f0e6;
  --cream:#fffaf0;
  --peach:#ed805c;
  --yellow:#efbd54;
  --sage:#b9c99b;
  --line:#25352e33
}

* {
  box-sizing:border-box
}

html {
  scroll-behavior:smooth
}

body {
  margin:0;
  color:var(--ink);
  background:var(--paper);
  font-family:"DM Sans",Arial,sans-serif;
  overflow-x:hidden
}

.texture {
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:.15;
  z-index:10;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 150 150' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E")
}

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

.nav {
  height:82px;
  padding:0 5vw;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid var(--line);
  position:relative;
  z-index:3
}

.wordmark {
  font:700 18px "Playfair Display",serif;
  letter-spacing:-.06em
}

.wordmark span {
  font:9px "DM Mono",monospace;
  letter-spacing:.17em;
  margin-left:5px
}

.nav nav {
  display:flex;
  gap:30px;
  font:10px "DM Mono",monospace;
  text-transform:uppercase
}

.nav nav a:hover,.book-link:hover {
  opacity:.55
}

.book-link {
  font-size:11px;
  font-weight:700;
  border-bottom:1px solid;
  padding-bottom:4px
}

.book-link b {
  font-size:17px;
  margin-left:6px
}

.menu-button {
  display:none
}

.hero {
  min-height:calc(100vh - 82px);
  display:grid;
  grid-template-columns:1.05fr .95fr
}

.hero-copy {
  padding:clamp(80px,13vw,180px) 5vw 70px
}

.kicker {
  font:10px "DM Mono",monospace;
  letter-spacing:.08em;
  margin:0;
  text-transform:uppercase
}

.kicker span {
  display:inline-block;
  width:8px;
  height:8px;
  background:var(--peach);
  border-radius:50%;
  margin-right:7px
}

.hero h1,.intro h2,.section-heading h2,.booking h2 {
  font:clamp(52px,6.2vw,98px)/.92 "Playfair Display",serif;
  letter-spacing:-.08em;
  margin:28px 0
}

.hero h1 em,.intro h2 em,.section-heading h2 em,.booking h2 em {
  font-style:italic
}

.hero-text {
  max-width:400px;
  line-height:1.75;
  font-size:15px;
  margin:0 0 34px
}

.dark-button,.light-button {
  display:inline-flex;
  align-items:center;
  gap:25px;
  padding:15px 19px;
  font-size:11px;
  font-weight:700;
  transition:transform .25s
}

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

.light-button {
  background:var(--cream);
  color:var(--ink)
}

.dark-button b,.light-button b {
  font-size:18px
}

.hero-image {
  position:relative;
  background:var(--yellow);
  overflow:hidden
}

.hero-sun {
  position:absolute;
  width:65%;
  aspect-ratio:1;
  border-radius:50%;
  background:var(--peach);
  right:-15%;
  top:-15%;
  animation:sun-float 9s ease-in-out infinite
}

.hero-arch {
  position:absolute;
  width:62%;
  height:80%;
  background:var(--cream);
  border-radius:220px 220px 0 0;
  bottom:-13%;
  left:20%
}

.hero-stem {
  position:absolute;
  border-left:2px solid var(--ink);
  height:48%;
  bottom:32%;
  transform-origin:bottom
}

.stem-one {
  left:38%;
  rotate:-26deg
}

.stem-two {
  left:61%;
  height:41%;
  rotate:22deg
}

.hero-stem:after {
  content:"";
  width:47px;
  height:23px;
  background:var(--sage);
  border-radius:100% 0 100% 0;
  position:absolute;
  top:15px;
  left:-2px;
  rotate:28deg
}

.hero-plate {
  position:absolute;
  width:37%;
  aspect-ratio:1;
  border-radius:50%;
  background:var(--cream);
  bottom:15%;
  right:16%;
  box-shadow:inset 0 0 0 17px #e1d9c7,0 14px 24px #553b2540;
  display:grid;
  place-items:center;
  font-size:70px;
  color:var(--peach);
  animation:plate 7s ease-in-out infinite
}

.hero-cup {
  width:18%;
  height:17%;
  border-radius:4px 4px 44% 44%;
  background:var(--ink);
  position:absolute;
  bottom:11%;
  left:20%;
  rotate:-13deg
}

.hero-cup:after {
  content:"";
  position:absolute;
  width:42%;
  height:35%;
  border:8px solid var(--ink);
  border-left:0;
  border-radius:0 50% 50% 0;
  right:-37%;
  top:21%
}

.hero-note {
  position:absolute;
  bottom:7%;
  right:8%;
  font:9px/1.55 "DM Mono",monospace;
  letter-spacing:.1em
}

.section {
  padding:130px 5vw
}

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

.intro-grid {
  display:grid;
  grid-template-columns:1.1fr .6fr;
  gap:10vw;
  align-items:end
}

.intro h2 {
  font-size:clamp(44px,5vw,75px);
  margin:26px 0 0
}

.intro-grid>p {
  font-size:15px;
  line-height:1.8;
  margin:0
}

.section-heading {
  max-width:720px
}

.section-heading h2 {
  font-size:clamp(45px,5vw,78px)
}

.section-heading>p:last-child {
  max-width:430px;
  font-size:14px;
  line-height:1.7;
  margin:0;
  color:#4f5c54
}

.menu-section {
  background:var(--cream)
}

.menu-tabs {
  display:flex;
  gap:8px;
  margin:52px 0 25px
}

.menu-tabs button {
  font:10px "DM Mono",monospace;
  border:1px solid var(--line);
  background:none;
  padding:11px 15px;
  cursor:pointer;
  color:var(--ink)
}

.menu-tabs button.active,.menu-tabs button:hover {
  background:var(--ink);
  color:var(--cream)
}

.menu-display {
  display:grid;
  grid-template-columns:.68fr 1.32fr;
  background:var(--paper);
  border:1px solid var(--line)
}

.menu-art {
  min-height:520px;
  background:var(--sage);
  position:relative;
  overflow:hidden
}

.menu-orange {
  position:absolute;
  width:72%;
  aspect-ratio:1;
  border-radius:50%;
  background:var(--peach);
  right:-18%;
  top:-12%
}

.menu-bowl {
  width:52%;
  height:24%;
  border-radius:0 0 140px 140px;
  background:var(--cream);
  position:absolute;
  bottom:22%;
  left:21%;
  border-top:10px solid #e7d9c2;
  box-shadow:0 13px 18px #43533c32
}

.menu-bowl i {
  width:24px;
  height:12px;
  background:var(--yellow);
  position:absolute;
  border-radius:50%;
  top:-21px
}

.menu-bowl i:nth-child(1) {
  left:15%;
  rotate:20deg
}

.menu-bowl i:nth-child(2) {
  left:44%;
  background:var(--peach);
  rotate:-15deg
}

.menu-bowl i:nth-child(3) {
  right:12%;
  background:var(--ink)
}

.menu-art>span {
  position:absolute;
  bottom:8%;
  left:10%;
  font:9px/1.5 "DM Mono",monospace;
  letter-spacing:.1em
}

.menu-list {
  padding:45px 8%;
  animation:fade .3s ease
}

.menu-list.hidden {
  display:none
}

.menu-label {
  font:10px "DM Mono",monospace;
  letter-spacing:.08em;
  margin:0;
  color:#5b665e
}

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

.menu-list h3 {
  font:600 18px "Playfair Display",serif;
  margin:0 0 6px
}

.menu-list p {
  font-size:12px;
  color:#556159;
  margin:0
}

.menu-list strong {
  font:10px "DM Mono",monospace;
  white-space:nowrap;
  padding-top:4px
}

.menu-list>a {
  display:inline-block;
  border-bottom:1px solid;
  margin-top:24px;
  padding-bottom:4px;
  font-size:11px;
  font-weight:700
}

.menu-list>a b {
  font-size:16px;
  margin-left:6px
}

.quote {
  background:var(--ink);
  color:var(--cream);
  padding:115px 5vw;
  text-align:center
}

.quote p {
  font:clamp(38px,5vw,76px)/.98 "Playfair Display",serif;
  letter-spacing:-.06em;
  margin:0
}

.quote em {
  color:var(--yellow)
}

.quote span {
  display:block;
  margin-top:27px;
  font:9px "DM Mono",monospace;
  letter-spacing:.12em
}

.visit-grid {
  display:grid;
  grid-template-columns:.7fr 1.3fr;
  gap:7vw;
  margin-top:60px
}

.hours dl {
  margin:20px 0 50px;
  border-top:1px solid var(--line)
}

.hours dl div {
  padding:15px 0;
  border-bottom:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  gap:15px;
  font-size:13px
}

.hours dd {
  margin:0;
  font-weight:700
}

.address p:last-of-type {
  font:18px/1.5 "Playfair Display",serif;
  margin:15px 0
}

.address a {
  font-size:11px;
  font-weight:700;
  border-bottom:1px solid;
  padding-bottom:4px
}

.address b {
  font-size:16px;
  margin-left:5px
}

.map {
  height:425px;
  position:relative;
  background:#d9d6c4;
  overflow:hidden
}

.map iframe {
  border:0;
  width:100%;
  height:100%;
  filter:grayscale(1) contrast(.8) sepia(.2)
}

.map-pin {
  position:absolute;
  left:50%;
  top:48%;
  translate:-50% -50%;
  width:85px;
  height:85px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:var(--peach);
  color:var(--cream);
  text-align:center;
  font:8px "DM Mono",monospace;
  box-shadow:0 8px 20px #492c243d
}

.map-pin span {
  font-size:20px;
  line-height:1
}

.map-pin b {
  font-weight:400
}

.booking {
  background:var(--peach);
  padding:120px 5vw;
  text-align:center
}

.booking .kicker {
  color:#73382d
}

.booking h2 {
  font-size:clamp(45px,5.5vw,82px)
}

footer {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:27px 5vw;
  font:9px "DM Mono",monospace
}

footer p {
  margin:0
}

footer div {
  display:flex;
  gap:18px;
  text-decoration:underline
}

@keyframes sun-float {
  50% {
    translate:-15px 20px
  }

}

@keyframes plate {
  50% {
    transform:rotate(6deg) translateY(-10px)
  }

}

@keyframes fade {
  from {
    opacity:0;
    translate:0 8px
  }

  to {
    opacity:1
  }

}

.reveal {
  opacity:0;
  translate:0 20px;
  transition:.7s
}

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


/* ============================================================================
   RESPONSIVE STYLES
   ============================================================================ */
@media(max-width:750px) {
  .nav {
    height:70px;
    padding:0 6vw
  }

  .nav nav,.book-link {
    display:none
  }

  .menu-button {
    display:flex;
    flex-direction:column;
    gap:6px;
    background:none;
    border:0
  }

  .menu-button i {
    display:block;
    width:25px;
    border-top:2px solid var(--ink)
  }

  .hero {
    grid-template-columns:1fr
  }

  .hero-copy {
    padding:90px 6vw 70px
  }

  .hero-image {
    min-height:440px
  }

  .section {
    padding:85px 6vw
  }

  .intro-grid,.menu-display,.visit-grid {
    grid-template-columns:1fr
  }

  .intro-grid>p {
    margin-top:25px
  }

  .menu-art {
    min-height:330px
  }

  .menu-list {
    padding:35px 7%
  }

  .quote {
    padding:85px 6vw
  }

  .visit-grid {
    gap:40px;
    margin-top:38px
  }

  .map {
    height:340px
  }

  .booking {
    padding:90px 6vw
  }

  footer {
    padding:24px 6vw
  }

  footer p {
    display:none
  }

}


/* Editorial title motion */
.hero h1,
.intro h2,
.section-heading h2,
.booking h2,
.full-menu-heading h1,
.full-menu-column h2 {
  animation: title-breathe 7s ease-in-out infinite;
}

.hero h1 em,
.intro h2 em,
.section-heading h2 em,
.booking h2 em,
.full-menu-heading h1 em {
  display: inline-block;
  animation: title-accent 6s ease-in-out infinite;
}

@keyframes title-breathe {
  50% {
    transform: translateY(-5px);
  }

}

@keyframes title-accent {
  50% {
    transform: translateX(6px) skewX(-2deg);
  }

}


/* Full menu page */
.full-menu {
  max-width: 1360px;
  margin: 0 auto;
  padding: 115px 5vw 95px;
}

.full-menu-heading {
  max-width: 650px;
}

.full-menu-heading h1 {
  font: clamp(55px, 7vw, 100px)/.9 "Playfair Display", serif;
  letter-spacing: -.08em;
  margin: 25px 0;
}

.full-menu-heading h1 em {
  font-style: italic;
}

.full-menu-heading > p:last-child {
  max-width: 450px;
  font-size: 14px;
  line-height: 1.7;
}

.menu-note {
  display: flex;
  gap: 20px;
  justify-content: space-between;
  margin: 75px 0 26px;
  padding: 13px 0;
  border-block: 1px solid var(--line);
  font: 9px "DM Mono", monospace;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.full-menu-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 55px 6vw;
}

.full-menu-column {
  border-top: 1px solid var(--ink);
  padding-top: 17px;
}

.full-menu-column h2 {
  font: 600 clamp(29px, 3.2vw, 43px)/1 "Playfair Display", serif;
  letter-spacing: -.06em;
  margin: 0 0 9px;
}

.full-menu-column > div {
  padding: 17px 0;
  border-bottom: 1px solid var(--line);
}

.full-menu-column h3 {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin: 0 0 5px;
  font: 600 17px "Playfair Display", serif;
}

.full-menu-column h3 b {
  font: 10px "DM Mono", monospace;
  white-space: nowrap;
  padding-top: 5px;
}

.full-menu-column div p {
  color: #556159;
  font-size: 12px;
  margin: 0;
}

.menu-return {
  margin-top: 75px;
  text-align: center;
}


/* ============================================================================
   RESPONSIVE STYLES
   ============================================================================ */
@media(max-width: 750px) {
  .full-menu {
    padding: 90px 6vw 65px;
  }

  .full-menu-grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .menu-note {
    gap: 8px;
    flex-wrap: wrap;
    line-height: 1.7;
    margin-top: 50px;
  }

  .full-menu-column h3 {
    font-size: 16px;
  }

}


/* Titles remain still until deliberately hovered. */
.hero h1,
.intro h2,
.section-heading h2,
.booking h2,
.full-menu-heading h1,
.full-menu-column h2,
.hero h1 em,
.intro h2 em,
.section-heading h2 em,
.booking h2 em,
.full-menu-heading h1 em {
  animation: none;
}

.hero h1:hover,
.intro h2:hover,
.section-heading h2:hover,
.booking h2:hover,
.full-menu-heading h1:hover,
.full-menu-column h2:hover {
  animation: title-breathe 1.4s ease-in-out infinite;
}

.hero h1:hover em,
.intro h2:hover em,
.section-heading h2:hover em,
.booking h2:hover em,
.full-menu-heading h1:hover em {
  animation: title-accent 1.4s ease-in-out infinite;
}