:root {
  --ink:#403731;
  --cream:#f6f4ef;
  --accent:#d4b99a;
  --muted:#403731;
  --line:rgba(28,30,27,.14);
  --radius:2px
}

* {
  box-sizing:border-box
}

html {
  scroll-behavior:smooth
}

body {
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased
}

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

img {
  display:block;
  max-width:100%
}

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

.eyebrow {
  font-size:.72rem;
  font-weight:750;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:#403731
}

.section-title {
  font-size:clamp(2.5rem,5vw,4.7rem);
  line-height:1.02;
  letter-spacing:-.06em;
  font-weight:650;
  margin:.55rem 0 1.4rem
}

.body-copy {
  color:#403731;
  line-height:1.85;
  font-size:1rem
}

.site-nav {
  position:absolute;
  z-index:10;
  top:0;
  left:0;
  right:0;
  padding:25px 0;
  color:#fff;
}

.nav-content {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px
}

.brand {
  font-weight:800;
  letter-spacing:.12em;
  font-size:.87rem
}

.nav-links {
  display:flex;
  gap:29px;
  align-items:center;
  font-size:.82rem;
  font-weight:600;
    color: #ffff
}

.nav-links a {
  opacity:.85;
  transition:opacity .2s
}

.nav-links a:hover {
  opacity:1
}

.nav-pill {
  padding:11px 18px;
  border:1px solid rgba(255,255,255,.45);
  border-radius:100px;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px)
}

.hero {
  min-height:0;
  height:auto;
  position:relative;
  isolation:isolate;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  color: var(--ink);
  background:#41352d url('assets/hero.png') center 20%/cover no-repeat
}

.hero::before {
  content:"";
  position:absolute;
  inset:0;
  background: rgba(209, 177, 151, 0.65);
  z-index:-1
}

.hero-inner {
  padding:130px 20px 110px;
}

.hero-logo {
  width:min(560px,78vw);
  max-height:220px;
  object-fit:contain;
  margin:0 auto 16px;
  color: #FFFFFF
}

.hero h1 {
  font-size:clamp(2.5rem,5vw,5.2rem);
  font-weight:650;
  letter-spacing:-.055em;
  margin:0 0 16px
}

.hero p {
  letter-spacing:.17em;
  text-transform:uppercase;
  font-size:.90rem;
  line-height:1.8;
  opacity:1
}

.button {
  border:1px solid var(--ink);
  padding:15px 27px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  font-size:.78rem;
  font-weight:750;
  letter-spacing:.12em;
  text-transform:uppercase;
  transition:transform .2s,background .2s,color .2s;
  cursor:pointer;
  background:transparent
}

.button:hover {
  transform:translateY(-2px);
  background:var(--ink);
  color:#fff
}

.button-light {
  border-color: rgba(64, 55, 49, 0.7);
  color: var(--ink);
  margin-top:27px
}

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

section {
  scroll-margin-top:30px
}

.section-pad {
  padding:118px 0
}

.center {
  text-align:center
}

.section-intro {
  max-width:650px;
  margin:0 auto 34px
}

.menu-banner {
  position:relative;
  height:clamp(350px,45vw,500px);
  width:100%;
  overflow:hidden;
  border-radius:var(--radius);
  display:block;
  isolation:isolate;
  background:#514237
}

.menu-slides {
  display:flex;
  position:absolute;
  inset:0;
  overflow:hidden
}

.menu-tile {
  height:100%;
  width:35%;
  position:absolute;
  background-size:cover;
  background-position:center;
  transition:transform .7s ease
}

.tile-one {
  left:0;
  width:40%;
  background-image:url('assets/menu1.jpg');
  clip-path:polygon(0 0,100% 0,78% 100%,0 100%)
}

.tile-two {
  left:26%;
  width:49%;
  background-image:url('assets/menu2.JPG');
  clip-path:polygon(23% 0,100% 0,77% 100%,0 100%)
}

.tile-three {
  right:0;
  width:39%;
  background-image:url('assets/menu3.png');
  clip-path:polygon(23% 0,100% 0,100% 100%,0 100%)
}

.menu-banner::after {
  content:"";
  inset:0;
  position:absolute;
  background:rgba(0,0,0,.46);
  z-index:1
}

.menu-banner:hover .menu-tile {
  transform:scale(1.035)
}

.menu-overlay {
  position:absolute;
  inset:0;
  z-index:2;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  color:#fff
}

.menu-overlay strong {
  font-size:clamp(4rem,11vw,8.5rem);
  font-weight:680;
  letter-spacing:.075em;
  line-height:1
}

.menu-overlay span {
  font-size:.75rem;
  letter-spacing:.23em;
  text-transform:uppercase;
  margin-top:18px
}

.about {
  background:#ebe8e0
}

.about-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  gap:clamp(55px,9vw,150px)
}

.about-copy {
  max-width:480px
}

.about-photo {
  width:min(100%,460px);
  aspect-ratio:auto;
  border-radius:0;
  object-fit:cover;
  box-shadow:0 25px 80px rgba(35,28,22,.12);
  justify-self:center
}

.contact-grid {
  display:grid;
  grid-template-columns:1fr 1.1fr;
  gap:clamp(50px,9vw,130px)
}

.contact-copy {
  max-width:420px
}

.contact-email {
  text-decoration:underline;
  text-underline-offset:5px
}

.contact-form {
  display:grid;
  gap:20px
}

.field {
  display:flex;
  flex-direction:column;
  gap:9px
}

.field label {
  font-size:.74rem;
  text-transform:uppercase;
  letter-spacing:.13em;
  font-weight:700
}

.field input,.field textarea {
  font:inherit;
  font-size:.98rem;
  background:rgba(255,255,255,.6);
  border:1px solid #d8d6cf;
  border-radius:11px;
  padding:17px 18px;
  width:100%;
  color:var(--ink);
  outline:none;
  transition:border-color .2s,box-shadow .2s
}

.field input:focus,.field textarea:focus {
  border-color:#8e816e;
  box-shadow:0 0 0 3px rgba(142,129,110,.15)
}

.field textarea {
  min-height:160px;
  resize:vertical
}

.form-row {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px
}

.form-submit {
  justify-self:start;
  background:var(--ink);
  color:#fff
}

.form-submit:hover {
  background:#403731
}

.form-note {
  font-size:.76rem;
  color:var(--muted);
  line-height:1.5
}

.footer {
  background:#c9a88d;
  color:#fff;
  padding:50px 0
}

.footer-content {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px
}

.footer-brand {
  font-weight:800;
  letter-spacing:.14em
}

.footer-small {
  font-size:.76rem;
  color:rgba(255,255,255,.58);
  margin-top:9px
}

.socials {
  display:flex;
  gap:12px
}

.social {
  display:grid;
  place-items:center;
  width:47px;
  height:47px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.32);
  transition:background .2s,transform .2s
}

.social:hover {
  background:rgba(255,255,255,.15);
  transform:translateY(-2px)
}

.social svg {
  width:21px;
  height:21px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round
}

.menu-page-header {
  background:#c9a88d;
  color:white;
  padding:160px 0 0; /* Extra space above Menu title */
  text-align:center
}

.menu-page-header h1 {
  font-size:clamp(3.5rem,8vw,7rem);
  letter-spacing:-.06em;
  margin:10px 0
}

.menu-page-header p {
  color:#d4d2c9
}

.menu-gallery {
  padding:0 0 120px;
  background: #c9a88d
}

.menu-photos {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px
}

.menu-photos img {
  width:100%;
  aspect-ratio:3/4;
  object-fit:cover;
  border-radius:12px;
  border:1px solid var(--line);
  background:#e3ddd1
}

.menu-help {
  text-align:center;
  color:var(--muted);
  font-size:.85rem;
  margin-top:30px
}

.page-nav {
  position:absolute
}

.back-link {
  display:inline-flex;
  gap:8px;
  align-items:center;
  margin-top:28px;
  color:#c4c1b8;
  font-size:.8rem;
  letter-spacing:.1em;
  text-transform:uppercase
}

@media(max-width:750px) {
  .container {
    width:min(100% - 34px,1150px)
  }

  .nav-links {
    gap:14px;
    font-size:.73rem
  }

  .nav-links a:nth-child(3) {
    display:none
  }

  .site-nav {
    padding:20px 0
  }

  .brand {
    font-size:.76rem
  }

  .nav-pill {
    padding:9px 12px
  }

  .hero {
    min-height:0;
    height:auto
  }

  .section-pad {
    padding:75px 0
  }

  .about-grid,.contact-grid {
    grid-template-columns:1fr;
    gap:38px
  }

  .about-photo {
    width:min(80%,380px)
  }

  .menu-banner {
    height:330px
  }

  .form-row {
    grid-template-columns:1fr
  }

  .footer-content {
    flex-direction:column;
    align-items:flex-start
  }

  .menu-photos {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }

  .menu-page-header {
    padding:120px 0 0
  }

}

@media(max-width:410px) {
  .nav-links {
    gap:10px
  }

  .brand {
    font-size:.68rem
  }

  .nav-links a {
    font-size:.68rem
  }

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

  .hero-logo {
    width:82vw
  }

}

/* Fixed, translucent navigation on both pages */
.site-nav, .site-nav.page-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  padding: 15px 0;
  background: rgba(20, 23, 21, .72);
  border-bottom: 1px solid rgba(255,255,255,.12);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 25px;
}

.nav-socials {
  gap: 7px;
  align-items: center;
}

.nav-socials .social {
  width: 34px;
  height: 34px;
  border-color: rgba(255,255,255,.20);
}

.nav-socials .social svg {
  width: 17px;
  height: 17px;
}

section {
  scroll-margin-top: 82px;
}

@media (max-width: 750px) {
  .site-nav, .site-nav.page-nav {
    padding: 13px 0;
  }

  .nav-actions {
    gap: 12px;
  }

  .nav-socials {
    gap: 4px;
  }

  .nav-socials .social {
    width: 31px;
    height: 31px;
  }

  .nav-socials .social svg {
    width: 16px;
    height: 16px;
  }

}

@media (max-width: 570px) {
  .nav-links a:nth-child(2) {
    display: none;
  }

}

@media (max-width: 390px) {
  .nav-links {
    display: none;
  }

}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

}

/* Typography: Futura where installed, with fast geometric sans-serif fallbacks.
   No external font download is required. */
body, button, input, textarea, select {
  font-family: Futura, "Futura PT", "Century Gothic", Avenir, "Avenir Next", Arial, sans-serif;
}

.section-title, .hero h1, .menu-page-header h1 {
  letter-spacing: -.035em;
  font-weight: 600;
}

.menu-overlay strong {
  font-weight: 600;
}

/* Replaceable image logo in the fixed header */
.site-nav .brand {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  line-height: 1;
}

.site-nav .brand-logo {
  display: block;
  width: clamp(115px, 14vw, 174px);
  height: 45px;
  object-fit: contain;
  object-position: left center;
}

@media (max-width: 750px) {
  .site-nav .brand-logo {
    width: 122px;
    height: 38px;
  }

}

@media (max-width: 410px) {
  .site-nav .brand-logo {
    width: 105px;
    height: 34px;
  }

}

/* Uniform regular-weight Futura typography across all website text. */
body, body * {
  font-weight: 400 !important;
}


/* Downtown hours and upcoming events */
.hours-events {
  background: #efede7;
}

.hours-events .section-intro {
  max-width: 900px;
  margin-bottom: 45px;
}

.hours-events .section-title {
  font-size: clamp(2.3rem, 4.4vw, 4.3rem);
}

.hours-events-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 25px;
  align-items: stretch;
}

.info-panel {
  padding: clamp(27px, 4vw, 48px);
  background: rgba(255, 255, 255, 0.62);
  border: 1px solid rgba(28, 30, 27, 0.10);
  border-radius: var(--radius);
}

.info-panel h3 {
  margin: 0 0 18px;
  font-size: clamp(1.5rem, 2.3vw, 2.2rem);
  letter-spacing: -0.025em;
}

.info-panel .body-copy {
  margin: 0 0 24px;
}

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

.hours-line span:last-child {
  text-align: right;
  color: var(--muted);
}

.info-note {
  margin: 20px 0 0;
  color: var(--muted);
  font-size: 0.83rem;
  line-height: 1.6;
}

.event-item {
  padding: 18px 0;
  border-top: 1px solid var(--line);
}

.event-item h4 {
  margin: 0 0 12px;
  font-size: 1.15rem;
}

.event-item p {
  margin: 7px 0;
  font-size: 0.94rem;
  line-height: 1.55;
}

.event-label {
  display: inline-block;
  min-width: 78px;
  color: var(--muted);
}

/* Keep all four navigation links accessible on smaller screens. */
@media (max-width: 750px) {
  .hours-events-grid {
    grid-template-columns: 1fr;
  }

  .nav-content,
  .nav-actions {
    flex-direction: column;
    gap: 8px;
  }

  .nav-links {
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 17px;
  }

  .nav-links a:nth-child(2),
  .nav-links a:nth-child(3) {
    display: inline-flex;
  }

  .nav-socials {
    display: none;
  }

  .site-nav, .site-nav.page-nav {
    padding: 9px 0;
  }

  section {
    scroll-margin-top: 145px;
  }
}

@media (max-width: 390px) {
  .nav-links {
    display: flex;
  }
}


/* =============================================================
   Modern editorial refresh
   Straight edges, quiet surfaces, spacious layout, fine details.
   These rules refine the original sections without changing markup.
   ============================================================= */

:root {
  --cream: #faf9f6;
  --ink: #403731;
  --muted: #403731;
  --line: rgba(37, 38, 33, 0.13);
}

body {
  background: var(--cream);
}

.container {
  width: min(1180px, calc(100% - 72px));
}

.section-pad {
  padding: clamp(44px, 5vw, 71px) 0;
}

.section-title {
  letter-spacing: -0.04em;
  line-height: 1.12;
}

.eyebrow {
  letter-spacing: 0.16em;
  color: var(--muted);
}

/* Warm brown translucent layer over the purple navigation base. */
.site-nav,
.site-nav.page-nav {
  background: linear-gradient(rgba(137, 91, 59, 0.35), rgba(137, 91, 59, 0.35)), #5d36b8;
  color: #ffffff;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: none;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

/* Navigation links and social media icons use white on both pages. */
.site-nav .nav-links,
.site-nav .nav-links a,
.site-nav .nav-socials .social {
  color: #ffffff;
}

.site-nav .nav-socials .social svg {
  color: #ffffff;
  stroke: currentColor;
}

.nav-links a {
  opacity: 0.87;
  transition: opacity 180ms ease;
}

.nav-pill {
  padding: 5px 0;
  border: 0;
  border-radius: 0;
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Minimal straight-edged CTAs; subtle background change on hover. */
.button {
  min-height: 48px;
  padding: 14px 25px;
  border: 1px solid var(--ink);
  border-radius: 0;
  background: transparent;
  font-size: 0.76rem;
  letter-spacing: 0.12em;
  transform: none;
  transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease;
}

.button:hover {
  transform: none;
  background: var(--ink);
  color: white;
}

.button:focus-visible,
.nav-links a:focus-visible,
.social:focus-visible,
.menu-banner:focus-visible {
  outline: 2px solid #b68d5b;
  outline-offset: 4px;
}

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

.form-submit {
  background: var(--ink);
  color: #fff;
}

.form-submit:hover {
  background: #403731;
  border-color: #403731;
}

/* Hours and events read as two editorial columns, not two cards. */
.hours-events {
  background: #F5DECB;
}

.hours-events-grid {
  gap: clamp(46px, 7vw, 110px);
}

.info-panel {
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
}

.info-panel + .info-panel {
  position: relative;
}

.info-panel + .info-panel::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(clamp(46px, 7vw, 110px) / -2);
  width: 1px;
  background: var(--line);
}

.info-panel h3 {
  margin-bottom: 20px;
}

.hours-line,
.event-item {
  border-color: var(--line);
}

/* The menu collage stays diagonal, with crisp architectural edges. */
.menu-banner {
  border-radius: 0;
}

.menu-tile {
  transition: transform 500ms ease;
}

/* The requested round About photo remains round, without a halo. */
.about {
  background: #F5DECB;
}

.about-photo {
  box-shadow: none;
}

/* Underlined inputs feel lighter than boxed rounded form fields. */
.contact-form {
  gap: 26px;
}

.field {
  gap: 10px;
}

.field label {
  letter-spacing: 0.12em;
  color: #403731;
}

.field input,
.field textarea {
  padding: 14px 0;
  border: 0;
  border-bottom: 1px solid rgba(37, 38, 33, 0.34);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transition: border-color 180ms ease;
}

.field input:focus,
.field textarea:focus {
  border-color: var(--ink);
  box-shadow: none;
}

.field textarea {
  min-height: 132px;
}

/* Social links are unframed icons instead of round outlined buttons. */
.social,
.nav-socials .social {
  width: 38px;
  height: 38px;
  border: none;
  border-radius: 0;
  background: transparent;
  transform: none;
}

.social:hover {
  background: rgba(255, 255, 255, 0.10);
  transform: none;
}

.menu-page-header {
  background: #c9a88d;
}

.menu-photos {
  gap: 16px;
}

.menu-photos img {
  border: 0;
  border-radius: 0;
}

@media (max-width: 750px) {
  .container {
    width: calc(100% - 36px);
  }

  .hours-events-grid {
    gap: 52px;
  }

  .info-panel + .info-panel::before {
    top: -26px;
    bottom: auto;
    left: 0;
    width: 100%;
    height: 1px;
  }

  .nav-socials .social {
    width: 31px;
    height: 31px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .button,
  .menu-tile,
  .nav-links a,
  .social {
    transition: none;
  }
}

/* Keep each event on one flowing line when space allows, with no dividers. */
.events-panel .event-item {
  padding: 10px 0;
  border: 0;
}

.events-panel .event-summary {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.7;
}

.events-panel .event-summary strong {
  font-weight: 600;
}

.events-panel .event-summary em {
  font-style: italic;
  color: var(--muted);
}


/* Menu page: four 4:3 landscape photos stacked vertically with a small gap. */
.menu-photos {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
}

.menu-photos img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 0;
  border-radius: 0;
}



/* Homepage section colors — October 2026 update. */
#hours-events,
#about {
  background-color: #F5DECB;
}

#menu,
#contact {
  background-color: #c9a88d;
}

/* Footer typography and social icon color — homepage and menu page. */
.footer {
  color: #403731;
}

.footer .footer-small,
.footer .footer-brand,
.footer .social {
  color: #403731;
}

/* Menu page heading and subtitle — warm dark brown. */
.menu-page-header h1,
.menu-page-header p {
  color: #403731;
}

/* Keep the first menu photo directly beneath the page heading. */
.menu-page-header p {
  margin-bottom: 0;
}

/* Shared purple with a 35% warm-brown tint, matching the navigation. */
:root {
  --purple-brown-bg: linear-gradient(
    rgba(137, 91, 59, 0.35),
    rgba(137, 91, 59, 0.35)
  ), #5d36b8;
}

/* Homepage Menu and Contact sections. */
#menu,
#contact {
  background: var(--purple-brown-bg);
  color: #ffffff;
}

#menu h1, #menu h2, #menu h3, #menu p, #menu .eyebrow,
#menu a:not(.menu-banner),
#contact h1, #contact h2, #contact h3, #contact p,
#contact .eyebrow, #contact a, #contact label,
#contact .form-note, #contact .field input,
#contact .field textarea {
  color: #ffffff;
}

#contact .field input::placeholder,
#contact .field textarea::placeholder {
  color: rgba(255, 255, 255, 0.75);
}

#contact .field input,
#contact .field textarea {
  border-color: rgba(255, 255, 255, 0.55);
}

#contact .field input:focus,
#contact .field textarea:focus {
  border-color: #ffffff;
}

/* Button contrast on the tinted background. */
#contact .form-submit {
  background: #ffffff;
  border-color: #ffffff;
  color: #403731;
}

#contact .form-submit:hover {
  background: rgba(255, 255, 255, 0.85);
  color: #403731;
}

/* The footer is used on both pages. */
.footer {
  background: var(--purple-brown-bg);
  color: #ffffff;
}

.footer .footer-brand,
.footer .footer-small,
.footer .social,
.footer a {
  color: #ffffff;
}

.footer .social svg {
  color: #ffffff;
  stroke: currentColor;
}

/* Entire Menu page, including header and gallery. */
body:has(.menu-page-header),
.menu-page-header,
.menu-gallery {
  background: var(--purple-brown-bg);
  color: #ffffff;
}

/* Ensure the tinted background is consistent, not layered twice. */
body:has(.menu-page-header) {
  background: #5d36b8;
}

.menu-page-header h1,
.menu-page-header h2,
.menu-page-header p,
.menu-page-header .eyebrow,
.menu-page-header .back-link,
.menu-gallery h1,
.menu-gallery h2,
.menu-gallery p,
.menu-gallery .menu-help {
  color: #ffffff;
}


/* Clean, solid transitions between homepage sections: no gradient fades. */
#hours-events,
#about {
  background: #F5DECB;
}

#menu,
#contact {
  background: var(--purple-brown-bg);
}

.footer {
  background: var(--purple-brown-bg);
}

/* Equal visible breathing room above MENU and below its subtitle.
   The fixed navigation covers roughly 70px at the top, so top padding
   includes that allowance. The gallery starts directly after this section. */
.menu-page-header {
  padding-top: 160px;
  padding-bottom: 90px;
}

.menu-gallery {
  padding-top: 0;
}

@media (max-width: 700px) {
  .menu-page-header {
    padding-top: 120px;
    padding-bottom: 50px;
  }
}