@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:wght@500;600;700&display=swap');

:root {
  --espresso: #2b1d16;
  --coffee: #5a3827;
  --coffee2: #7a4b32;

  --cream: #f7f0e6;
  --cream2: #fffaf3;

  --tan: #ead8c5;

  --line: rgba(43, 29, 22, .14);

  --muted: #75675e;

  --white: #fffdf9;

  --olive: #69715a;

  --shadow: 0 25px 65px rgba(50, 32, 22, .11);

  --radius: 22px;
}


* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}


html {
  scroll-behavior: smooth;
}


body {
  font-family: "DM Sans", sans-serif;
  color: var(--espresso);
  background: var(--cream2);
  line-height: 1.65;
  overflow-x: hidden;
}


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


.container {
  width: min(1160px, calc(100% - 48px));
  margin: auto;
}


h1,
h2,
h3 {
  font-family: "Playfair Display", serif;
  line-height: 1.04;
  font-weight: 600;
}


h1 {
  font-size: clamp(3.6rem, 7vw, 7rem);
  letter-spacing: -.055em;
}


h2 {
  font-size: clamp(2.8rem, 5vw, 4.7rem);
  letter-spacing: -.045em;
}


h1 em,
h2 em {
  font-style: normal;
  color: var(--coffee2);
}


p {
  color: var(--muted);
}


.eyebrow {
  font-size: .7rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--coffee2);
  margin-bottom: 15px;
}


/* =========================
   HEADER
========================= */


.site-header {
  position: sticky;
  top: 0;
  z-index: 100;

  background: rgba(43, 29, 22, .97);

  color: var(--white);

  border-bottom: 1px solid rgba(255, 255, 255, .08);
}


.navbar {
  min-height: 78px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 30px;
}


.brand {
  display: flex;
  flex-direction: column;

  line-height: .9;

  letter-spacing: .13em;

  font-size: .9rem;
}


.brand strong {
  font-size: .86rem;
  font-weight: 500;

  letter-spacing: .3em;

  margin-top: 7px;

  color: #d9b898;
}


.nav-links {
  display: flex;
  align-items: center;

  gap: 29px;

  font-size: .86rem;
  font-weight: 600;
}


.nav-links a:not(.nav-cta) {
  opacity: .9;
  transition: .2s;
}


.nav-links a:not(.nav-cta):hover {
  color: #d9b898;
}


.nav-cta {
  border: 1px solid #cfa987;

  padding: 11px 18px;

  border-radius: 999px;
}


.nav-cta:hover {
  background: #cfa987;
  color: var(--espresso);
}


.menu-toggle {
  display: none;

  border: 0;
  background: none;

  width: 44px;
  height: 44px;

  cursor: pointer;
}


.menu-toggle span {
  display: block;

  width: 22px;
  height: 2px;

  background: #fff;

  margin: 5px auto;
}


/* =========================
   HERO
========================= */


.hero {
  display: grid;

  grid-template-columns: 47% 53%;

  min-height: 650px;

  background: var(--cream);
}


.hero-copy {
  display: flex;
  align-items: center;
}


.hero-copy-inner {
  padding: 90px 45px 90px 0;
}


.hero-lead {
  max-width: 520px;

  font-size: 1.06rem;

  margin: 25px 0 28px;
}


.hero-actions {
  display: flex;

  gap: 12px;

  flex-wrap: wrap;
}


.button {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  gap: 10px;

  padding: 13px 21px;

  border-radius: 999px;

  font-size: .87rem;
  font-weight: 700;

  transition: .25s;
}


.button:hover {
  transform: translateY(-3px);
}


.button-dark {
  background: var(--coffee);

  color: #fff;
}


.button-dark:hover {
  background: var(--espresso);
}


.button-outline {
  border: 1px solid var(--coffee);

  color: var(--coffee);
}


.button-outline:hover {
  background: var(--coffee);

  color: #fff;
}


.concept-note {
  font-size: .75rem;

  margin-top: 27px;
}


.concept-note strong {
  color: var(--espresso);
}


/* =========================
   HERO VISUAL
========================= */


.hero-visual {
  min-height: 650px;

  position: relative;

  overflow: hidden;

  background: #65432f;
}


.cafe-photo {
  position: absolute;

  inset: 0;

  background:
    radial-gradient(
      circle at 73% 30%,
      rgba(241, 188, 109, .55),
      transparent 11%
    ),
    linear-gradient(
      125deg,
      #79523a 0%,
      #4b2f21 48%,
      #251a15 100%
    );
}


.hero-photo:before {
  content: "";

  position: absolute;

  inset: 0;

  background:
    linear-gradient(
      90deg,
      rgba(38, 25, 19, .05),
      rgba(38, 25, 19, .3)
    ),
    repeating-linear-gradient(
      90deg,
      transparent 0 125px,
      rgba(255, 225, 194, .06) 126px 128px
    );
}


.cafe-window {
  position: absolute;

  width: 52%;
  height: 55%;

  right: 0;
  top: 17%;

  border: 2px solid rgba(255, 238, 217, .18);

  background:
    linear-gradient(
      135deg,
      rgba(217, 231, 205, .12),
      rgba(118, 83, 53, .04)
    );
}


.lamp {
  position: absolute;

  width: 3px;
  height: 145px;

  background: rgba(247, 218, 184, .4);

  top: 0;
}


.lamp:after {
  content: "";

  position: absolute;

  bottom: -18px;
  left: -25px;

  width: 53px;
  height: 25px;

  border-radius: 50% 50% 8px 8px;

  background: #1f1612;

  box-shadow:
    0 0 35px 14px rgba(236, 169, 89, .16);
}


.lamp-one {
  left: 68%;
}


.lamp-two {
  left: 83%;

  height: 105px;
}


.counter {
  position: absolute;

  left: 0;
  right: 0;

  bottom: 0;

  height: 29%;

  background:
    linear-gradient(
      #9b6a45,
      #70462f
    );

  box-shadow:
    0 -15px 40px rgba(20, 10, 5, .2);
}


.coffee-machine {
  position: absolute;

  right: 12%;
  bottom: 23%;

  width: 155px;
  height: 105px;

  border-radius: 10px;

  background:
    linear-gradient(
      135deg,
      #8f8a7f,
      #332a25
    );

  box-shadow:
    0 15px 35px rgba(0, 0, 0, .28);
}


.coffee-machine:before {
  content: "";

  position: absolute;

  left: 20px;
  right: 20px;

  top: 22px;

  height: 20px;

  border-radius: 5px;

  background: #1c1714;
}


.coffee-machine:after {
  content: "";

  position: absolute;

  width: 60px;
  height: 5px;

  background: #c8b09a;

  left: 48px;
  bottom: 20px;
}


.plant {
  position: absolute;

  bottom: 25%;
  left: 9%;

  width: 35px;
  height: 145px;

  border-radius: 50%;

  background: #3e573a;

  transform: rotate(13deg);
}


.plant:after {
  content: "";

  position: absolute;

  width: 85px;
  height: 85px;

  border-radius: 70% 0 70% 0;

  background: #536e49;

  left: -30px;
  top: -25px;

  transform: rotate(-28deg);
}


.table {
  position: absolute;

  width: 220px;
  height: 35px;

  border-radius: 50%;

  background: #8b5a3d;

  left: 12%;
  bottom: 18%;
}


.chair {
  position: absolute;

  width: 90px;
  height: 115px;

  border-radius: 35px 35px 10px 10px;

  background: #493027;

  left: 25%;
  bottom: 8%;
}


.photo-overlay {
  position: absolute;

  left: 42px;
  right: 42px;
  bottom: 38px;

  display: flex;

  justify-content: space-between;

  gap: 20px;

  color: #fff;

  font-size: .75rem;

  font-weight: 700;

  letter-spacing: .08em;

  text-transform: uppercase;

  z-index: 3;
}


.photo-overlay span:first-child {
  border-bottom: 1px solid rgba(255, 255, 255, .5);

  padding-bottom: 7px;
}


/* =========================
   SECTIONS
========================= */


.section {
  padding: 110px 0;
}


.centered {
  text-align: center;
}


.section-title {
  margin-bottom: 48px;
}


.section-title > p:last-child {
  margin-top: 10px;
}


/* =========================
   MENU
========================= */


.menu {
  background: var(--cream2);
}


.menu-grid {
  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 18px;
}


.menu-feature {
  display: grid;

  grid-template-columns: 1fr 1.05fr;

  min-height: 225px;

  border: 1px solid var(--line);

  border-radius: var(--radius);

  overflow: hidden;

  background: #fff;

  transition: .3s;
}


.menu-feature:hover {
  transform: translateY(-6px);

  box-shadow: var(--shadow);
}


.menu-art {
  position: relative;

  overflow: hidden;

  background: var(--tan);
}


.coffee-art {
  background:
    linear-gradient(
      145deg,
      #c19a78,
      #7a4b32
    );
}


.mini-cup {
  position: absolute;

  width: 78px;
  height: 57px;

  left: 50%;
  top: 50%;

  transform:
    translate(-50%, -50%);

  border: 4px solid #fff1df;

  border-radius: 8px 8px 25px 25px;

  background: #f2d4b9;
}


.mini-cup:before {
  content: "";

  position: absolute;

  left: 8px;
  right: 8px;

  top: 6px;

  height: 14px;

  border-radius: 50%;

  background: #65422e;
}


.mini-cup:after {
  content: "";

  position: absolute;

  width: 25px;
  height: 28px;

  border: 4px solid #fff1df;

  border-left: 0;

  border-radius: 0 20px 20px 0;

  right: -28px;
  top: 8px;
}


.breakfast-art {
  background: #d7c4a8;
}


.plate {
  position: absolute;

  width: 135px;
  height: 75px;

  border-radius: 50%;

  background: #f7f0e6;

  left: 50%;
  top: 52%;

  transform:
    translate(-50%, -50%);

  box-shadow:
    0 5px 0 rgba(58, 35, 22, .12);
}


.toast {
  position: absolute;

  width: 55px;
  height: 45px;

  border-radius: 8px;

  background: #c99562;

  border: 3px solid #855b3e;
}


.toast-one {
  left: 31%;
  top: 42%;

  transform: rotate(-18deg);
}


.toast-two {
  left: 48%;
  top: 45%;

  transform: rotate(15deg);
}


.leaf {
  position: absolute;

  width: 24px;
  height: 44px;

  border-radius: 100% 0;

  background: #657054;

  right: 24%;
  bottom: 25%;

  transform: rotate(35deg);
}


.dessert-art {
  background: #b98668;
}


.cake-plate {
  position: absolute;

  width: 135px;
  height: 18px;

  border-radius: 50%;

  background: #f5e7d6;

  left: 50%;
  bottom: 30%;

  transform: translateX(-50%);
}


.cake {
  position: absolute;

  width: 88px;
  height: 65px;

  left: 50%;
  bottom: 35%;

  transform: translateX(-50%);

  background: #6b3d2a;

  border-radius: 10px 10px 5px 5px;

  box-shadow:
    inset 0 -14px rgba(46, 25, 18, .25);
}


.cake:before {
  content: "";

  position: absolute;

  left: 0;
  right: 0;

  top: -7px;

  height: 18px;

  border-radius: 50%;

  background: #dfc4a6;
}


.menu-feature-copy {
  padding: 22px;
}


.menu-feature-copy .eyebrow {
  font-size: .62rem;

  margin-bottom: 10px;
}


.menu-feature-copy h3 {
  font-size: 1.35rem;
}


.menu-feature-copy p:not(.eyebrow) {
  font-size: .78rem;

  margin: 10px 0 16px;
}


.menu-feature-copy a {
  font-size: .77rem;

  font-weight: 700;

  color: var(--coffee2);
}


.menu-list {
  margin-top: 55px;

  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);

  display: grid;

  grid-template-columns: .7fr 1.3fr;

  gap: 60px;

  padding: 42px 0;
}


.menu-list-head h3 {
  font-size: 1.9rem;
}


.menu-items {
  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 0 35px;
}


.menu-items div {
  display: flex;

  justify-content: space-between;

  gap: 20px;

  padding: 13px 0;

  border-bottom: 1px solid var(--line);

  font-size: .88rem;
}


.menu-items b {
  font-weight: 700;

  color: var(--coffee2);
}


/* =========================
   ABOUT
========================= */


.about {
  background: var(--cream);
}


.about-grid {
  display: grid;

  grid-template-columns: .9fr 1.1fr;

  gap: 90px;

  align-items: center;
}


.about-art {
  display: grid;

  place-items: center;
}


.about-card {
  width: min(390px, 100%);
  height: 390px;

  border-radius: 50%;

  background: #dfc4aa;

  display: flex;

  flex-direction: column;

  align-items: center;
  justify-content: center;

  text-align: center;

  box-shadow: var(--shadow);

  transform: rotate(-4deg);

  position: relative;
}


.about-card:before {
  content: "";

  position: absolute;

  inset: 22px;

  border: 1px solid rgba(90, 56, 39, .25);

  border-radius: 50%;
}


.about-card span {
  font-size: .8rem;

  letter-spacing: .16em;

  text-transform: uppercase;
}


.about-card strong {
  font: 600 2.5rem "Playfair Display";

  margin-top: 8px;
}


.about-card i {
  font-style: normal;

  color: var(--coffee2);

  font-size: 1.4rem;

  margin-top: 20px;
}


.about-copy > p:not(.eyebrow) {
  max-width: 600px;

  margin-top: 20px;
}


.text-link {
  display: inline-block;

  margin-top: 25px;

  border-bottom: 1px solid var(--coffee2);

  font-weight: 700;

  color: var(--coffee2);

  padding-bottom: 3px;
}


/* =========================
   REVIEWS
========================= */


.reviews {
  background: var(--espresso);

  color: #fff;
}


.reviews-box {
  display: grid;

  grid-template-columns: .55fr 1.45fr;

  gap: 70px;

  align-items: center;
}


.reviews h2 {
  color: #fff;
}


.reviews-heading .eyebrow {
  color: #d5ae8d;
}


.review-disclaimer {
  font-size: .72rem;

  color: rgba(255, 255, 255, .52);

  margin-top: 18px;
}


.review-grid {
  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 0;
}


.review-card {
  padding: 12px 25px;

  text-align: center;

  border-left: 1px solid rgba(255, 255, 255, .18);
}


.review-card:first-child {
  border-left: 0;
}


.stars {
  color: #e7c39e;

  letter-spacing: 4px;

  font-size: .8rem;
}


.review-card p {
  color: rgba(255, 255, 255, .83);

  font: 1rem/1.55 "Playfair Display";

  margin: 17px 0;
}


.review-card strong {
  font-size: .75rem;

  letter-spacing: .08em;

  color: #d5ae8d;
}


/* =========================
   SOCIAL
========================= */


.social {
  background: #eee1d2;
}


.social-box {
  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 60px;

  align-items: center;
}


.social-box > div:first-child p:not(.eyebrow) {
  max-width: 480px;

  margin-top: 16px;
}


.social-links {
  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 14px;
}


.social-links a {
  background: var(--cream2);

  border: 1px solid var(--line);

  border-radius: 18px;

  padding: 25px;

  display: grid;

  grid-template-columns: auto 1fr;

  column-gap: 14px;

  align-items: center;

  transition: .25s;
}


.social-links a:hover {
  transform: translateY(-5px);

  box-shadow: var(--shadow);
}


.social-icon {
  grid-row: span 2;

  font-size: 2rem;

  color: var(--coffee2);
}


.social-links strong {
  font-size: .9rem;
}


.social-links small {
  color: var(--muted);

  font-size: .72rem;

  margin-top: 2px;
}


/* =========================
   VISIT
========================= */


.visit {
  background: var(--coffee);

  color: #fff;
}


.visit-grid {
  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 80px;

  align-items: center;
}


.visit h2 {
  color: #fff;
}


.visit h2 em {
  color: #e1b995;
}


.visit-copy > p:not(.eyebrow) {
  color: rgba(255, 255, 255, .72);

  margin: 20px 0 25px;
}


.visit .button-light {
  border-color: #e0b997;

  color: #fff;
}


.visit .button-light:hover {
  background: #fff;

  color: var(--coffee);
}


.hours {
  border-left: 1px solid rgba(255, 255, 255, .2);

  padding-left: 45px;
}


.hours h3 {
  font-size: 1.6rem;

  margin-bottom: 18px;
}


.hours div {
  display: flex;

  justify-content: space-between;

  gap: 20px;

  padding: 13px 0;

  border-bottom: 1px solid rgba(255, 255, 255, .17);

  font-size: .85rem;
}


.hours b {
  font-weight: 600;

  color: #e1b995;
}


/* =========================
   FOOTER
========================= */


.footer {
  background: #211711;

  color: #fff;

  padding: 45px 0 22px;
}


.footer-top {
  display: grid;

  grid-template-columns: 1.4fr .6fr 1fr;

  gap: 40px;

  align-items: center;
}


.footer-brand {
  font-weight: 700;

  letter-spacing: .13em;

  font-size: .9rem;
}


.footer-brand span {
  color: #d5ae8d;
}


.footer p {
  color: rgba(255, 255, 255, .52);

  font-size: .76rem;

  margin-top: 8px;
}


.footer-links {
  display: flex;

  gap: 20px;

  font-size: .78rem;

  color: rgba(255, 255, 255, .72);
}


.footer-links a:hover {
  color: #d5ae8d;
}


.back-nizzy {
  justify-self: end;

  color: #d5ae8d;

  font-size: .78rem;

  font-weight: 700;
}


.footer-bottom {
  margin-top: 38px;

  padding-top: 18px;

  border-top: 1px solid rgba(255, 255, 255, .1);

  display: flex;

  justify-content: space-between;

  gap: 20px;

  color: rgba(255, 255, 255, .35);

  font-size: .68rem;
}


/* =========================
   ANIMATIONS
========================= */


.reveal {
  opacity: 0;

  transform: translateY(22px);

  transition:
    opacity .65s ease,
    transform .65s ease;
}


.reveal.visible {
  opacity: 1;

  transform: translateY(0);
}


.delay-1 {
  transition-delay: .1s;
}


.delay-2 {
  transition-delay: .18s;
}


/* =========================
   TABLET
========================= */


@media (max-width: 1050px) {

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


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


  .menu-feature {
    grid-template-columns: .7fr 1.3fr;
  }


  .reviews-box {
    grid-template-columns: 1fr;

    gap: 40px;
  }


  .review-grid {
    max-width: 800px;
  }

}


/* =========================
   MOBILE NAV
========================= */


@media (max-width: 820px) {

  .menu-toggle {
    display: block;
  }


  .nav-links {

    position: absolute;

    left: 15px;
    right: 15px;

    top: 72px;

    display: flex;

    flex-direction: column;

    align-items: stretch;

    gap: 2px;

    padding: 14px;

    background: rgba(43, 29, 22, .99);

    border: 1px solid rgba(255, 255, 255, .1);

    border-radius: 18px;

    opacity: 0;

    visibility: hidden;

    transform: translateY(-8px);

    transition: .25s;
  }


  .nav-links.open {
    opacity: 1;

    visibility: visible;

    transform: translateY(0);
  }


  .nav-links a {
    padding: 11px 12px;
  }


  .nav-cta {
    text-align: center;
  }


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


  .hero-copy-inner {
    padding: 80px 0 60px;
  }


  .hero-visual {
    min-height: 470px;
  }


  .about-grid,
  .social-box,
  .visit-grid {

    grid-template-columns: 1fr;

    gap: 50px;
  }


  .about-card {
    height: 320px;
  }


  .hours {

    border-left: 0;

    border-top: 1px solid rgba(255, 255, 255, .2);

    padding: 30px 0 0;
  }


  .footer-top {
    grid-template-columns: 1fr;

    gap: 22px;
  }


  .back-nizzy {
    justify-self: start;
  }

}


/* =========================
   SMALL MOBILE
========================= */


@media (max-width: 600px) {

  .container {
    width: calc(100% - 30px);
  }


  .section {
    padding: 80px 0;
  }


  h1 {
    font-size: clamp(3.2rem, 15vw, 5rem);
  }


  .hero-visual {
    min-height: 390px;
  }


  .photo-overlay {

    left: 20px;
    right: 20px;
    bottom: 22px;

    flex-direction: column;

    gap: 8px;
  }


  .menu-feature {
    grid-template-columns: 1fr;
  }


  .menu-art {
    min-height: 170px;
  }


  .menu-list {

    grid-template-columns: 1fr;

    gap: 25px;
  }


  .menu-items {
    grid-template-columns: 1fr;
  }


  .review-grid {
    grid-template-columns: 1fr;
  }


  .review-card {

    border-left: 0;

    border-top: 1px solid rgba(255, 255, 255, .18);

    padding: 25px 5px;
  }


  .review-card:first-child {
    border-top: 0;
  }


  .social-links {
    grid-template-columns: 1fr;
  }


  .footer-bottom {
    flex-direction: column;
  }

}


/* =========================
   REDUCED MOTION
========================= */


@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {

    scroll-behavior: auto !important;

    transition-duration: .01ms !important;
  }

}