/* A sun-warmed, matte coastal palette with the Coffee Theatre brand type. */
@font-face {
  font-family: 'Montserrat';
  src: url('assets/montserrat-variable.ttf') format('truetype');
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --cream: #fff3d7;
  --paper: #f4c449;
  --brown: #00585d;
  --muted: #00585d;
  --terra: #bd3e25;
  --line: rgb(0 88 93 / 25%);
  --green: #00585d;
  --sans: 'Montserrat', Arial, sans-serif;
  --sun: #f4c449;
}

body { font-weight: 450; }
h1, h2 {
  font-family: var(--sans);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -.055em;
  line-height: 1.06;
}
h1 em, h2 em {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.42em;
  line-height: .94;
  letter-spacing: -.045em;
  text-transform: none;
}
h2 { font-size: clamp(31px, 3.65vw, 49px); }
.eyebrow { font-weight: 750; letter-spacing: 1.8px; }
.button {
  --button-fill: rgb(0 88 93 / 8%);
  justify-content: center;
  gap: 9px;
  padding: 12px 16px;
  min-height: 42px;
  color: var(--brown);
  font-weight: 700;
  border-width: 1px;
  border-radius: 8px;
  border-color: rgb(0 88 93 / 28%);
  box-shadow: inset 0 1px 0 rgb(255 243 215 / 28%), 0 4px 12px rgb(0 88 93 / 10%);
  -webkit-backdrop-filter: blur(12px) saturate(125%);
  backdrop-filter: blur(12px) saturate(125%);
}
.button-small { gap: 8px; padding: 10px 14px; min-height: 40px; }
.button-light { gap: 9px; padding: 11px 15px; }
.action-icon { display: block; flex: 0 0 16px; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.button:hover { --button-fill: rgb(189 62 37 / 14%); border-color: rgb(189 62 37 / 45%); }
.button, .button:hover { background: linear-gradient(135deg, rgb(255 243 215 / 18%), transparent 58%), var(--button-fill); }
.text-link { gap: 12px; font-weight: 700; border-bottom-width: 2px; }
.site-header { border-bottom: 2px solid var(--brown); }
.brand { gap: 18px; }
.brand img { flex-shrink: 0; }
.brand > span {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  font-family: var(--sans);
  font-size: 17px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -.35px;
  line-height: 1.2;
  white-space: nowrap;
}
.brand small { margin-top: 0; font-weight: 600; letter-spacing: 2.5px; line-height: 1.25; }
.nav-toggle { flex-shrink: 0; border-radius: 8px; }
.nav-wrap nav > a:not(.button) { font-weight: 650; }
.nav-wrap .button { --button-fill: rgb(189 62 37 / 10%); border-color: rgb(189 62 37 / 32%); }
.nav-wrap .button:hover { --button-fill: rgb(189 62 37 / 18%); border-color: rgb(189 62 37 / 50%); }
.hero h1 {
  font-size: clamp(38px, 4.8vw, 68px);
  line-height: 1.08;
  white-space: normal;
  margin-bottom: 29px;
}
.hero h1 em { font-size: 1.48em; }
.hero-intro { font-weight: 500; }
.hero-footnote p { font-weight: 550; }
.hero-photo { border-radius: 170px 8px 8px 8px; object-position: 50% 48%; }
.little-sun { color: var(--terra); font-size: 30px; }
.photo-caption, .menu-image-wrap > span, .kitchen-grid figcaption {
  background: linear-gradient(135deg, rgb(255 243 215 / 12%), transparent 65%), rgb(255 243 215 / 54%);
  border: 1px solid rgb(255 243 215 / 42%);
  border-radius: 7px;
  box-shadow: inset 0 1px 0 rgb(255 243 215 / 38%), 0 5px 16px rgb(0 88 93 / 12%);
  -webkit-backdrop-filter: blur(20px) saturate(130%);
  backdrop-filter: blur(20px) saturate(130%);
  font-weight: 800;
  color: var(--brown);
}
.coastal-strip { background: var(--terra); color: var(--cream); border-color: var(--terra); }
.coastal-strip .container { font-weight: 750; letter-spacing: 1.35px; }
.coastal-strip i { color: var(--sun); }
.story-photo-wrap:before { border: 2px solid var(--terra); border-radius: 8px; }
.story-photo-wrap img, .menu-image-wrap img { border-radius: 8px; }
.story-photo-wrap img { height: auto; aspect-ratio: 16 / 9; }
.story-copy h2 { font-size: clamp(30px, 3.6vw, 49px); }
.photo-note { color: var(--terra); font-size: 28px; }
.story-copy .story-signoff { color: var(--terra) !important; font-size: 28px !important; }
.menu-section { background: var(--green); color: var(--cream); border-color: var(--green); }
.menu-section h2 em, .menu-section .eyebrow { color: var(--sun); }
.menu-section .text-link:hover { color: var(--sun); }
.menu-section .button {
  --button-fill: rgb(255 243 215 / 10%);
  color: var(--cream);
  border-color: rgb(255 243 215 / 48%);
  background: linear-gradient(135deg, rgb(255 243 215 / 4%), transparent 58%), var(--button-fill);
}
.menu-section .button:hover { --button-fill: rgb(255 243 215 / 16%); border-color: rgb(255 243 215 / 70%); }
.menu-section :focus-visible { outline-color: var(--sun); }
.menu-tabs { border-bottom: 1px solid rgb(255 243 215 / 35%); scrollbar-color: rgb(255 243 215 / 35%) transparent; }
.menu-tabs button { color: var(--cream); font-weight: 650; }
.menu-tabs button[aria-selected=true] { font-weight: 850; }
.menu-tabs button[aria-selected=true] { color: var(--sun); }
.menu-tabs button[aria-selected=true]:after { height: 3px; bottom: -1px; background: var(--sun); }
.menu-image-wrap > span { background: linear-gradient(135deg, rgb(255 243 215 / 12%), transparent 65%), rgb(255 243 215 / 54%); }
.menu-intro { font-size: 30px; color: var(--cream); }
.menu-item { border-bottom-color: rgb(255 243 215 / 25%); }
.menu-item h3 { font-family: var(--sans); font-size: 18px; font-weight: 750; letter-spacing: -.55px; line-height: 1.3; }
.menu-item p { color: var(--cream); font-weight: 500; }
.menu-price { color: var(--sun); font-weight: 750; }
.menu-note { color: var(--cream); font-weight: 500; }
.kitchen-gallery { margin-top: 76px; padding-top: 56px; border-top: 1px solid rgb(255 243 215 / 25%); }
.kitchen-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; margin-bottom: 32px; }
.kitchen-heading h2 { font-size: clamp(31px, 3.65vw, 49px); }
.kitchen-heading > p { max-width: 315px; font-size: 13px; line-height: 1.8; }
.kitchen-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.kitchen-grid figure { position: relative; margin: 0; }
.kitchen-grid img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 8px; }
.kitchen-grid figcaption { position: absolute; left: 12px; bottom: 12px; max-width: calc(100% - 24px); padding: 8px 11px; font-size: 10px; line-height: 1.4; }
.express-copy h2 { font-size: clamp(30px, 3.6vw, 49px); }
.express-photo img { border-radius: 8px 120px 8px 8px; }
.express-label { font-weight: 650; }
.express-label b { font-weight: 850; }
.visit-heading h2 { font-size: clamp(36px, 5vw, 69px); }
.visit-heading h2 em { color: var(--sun); }
.visit-heading > .eyebrow, .visit-heading > p:last-child { opacity: 1; }
.visit-grid { border-top-color: rgb(255 243 215 / 35%); }
.visit-number { color: var(--sun); font-weight: 750; }
.visit-grid h3 { font-family: var(--sans); font-weight: 750; font-size: 26px; letter-spacing: -.8px; }
.visit-location > p, .visit-contact > a:not(.button), .visit-contact > p { color: var(--cream); }
.visit-contact { border-color: rgb(255 243 215 / 35%); }
.visit-section .text-link:hover { color: var(--sun); }
.visit-section .button-light { --button-fill: rgb(255 243 215 / 10%); border-color: rgb(255 243 215 / 48%); color: var(--cream); }
.visit-section .button-light:hover { --button-fill: rgb(255 243 215 / 16%); border-color: rgb(255 243 215 / 70%); }
.visit-section .button-light { background: linear-gradient(135deg, rgb(255 243 215 / 4%), transparent 58%), var(--button-fill); }
.instagram-section { border-bottom: 4px solid var(--terra); }
.instagram-section h2 { font-size: clamp(28px, 2.8vw, 38px); }
.site-footer { border-top: 0; }
.footer-brand { font-family: var(--sans); font-size: 23px; font-weight: 850; text-transform: uppercase; letter-spacing: -.9px; }
.footer-brand span { font-weight: 650; letter-spacing: 1.5px; }
.footer-links { font-weight: 650; }
.footer-bottom { border-color: var(--brown); }
.dialog-heading h2 { font-size: 32px; }
dialog {
  background: linear-gradient(135deg, rgb(255 243 215 / 14%), transparent 60%), rgb(255 243 215 / 64%);
  border: 1px solid rgb(255 243 215 / 65%);
  border-radius: 14px;
  box-shadow: inset 0 1px 0 rgb(255 243 215 / 80%), 0 20px 70px rgb(0 88 93 / 24%);
  -webkit-backdrop-filter: blur(24px) saturate(125%);
  backdrop-filter: blur(24px) saturate(125%);
  scrollbar-width: thin;
  scrollbar-color: rgb(0 88 93 / 40%) transparent;
}
dialog::backdrop { background: rgb(0 88 93 / 28%); backdrop-filter: blur(4px); }
.sheet-button, .dialog-close {
  border-radius: 7px;
  background: linear-gradient(135deg, rgb(255 243 215 / 16%), transparent 65%), rgb(255 243 215 / 14%);
  box-shadow: inset 0 1px 0 rgb(255 243 215 / 65%);
}
.sheet-button { font-weight: 650; border-color: rgb(0 88 93 / 35%); }
.sheet-button.active { background: linear-gradient(135deg, rgb(255 243 215 / 16%), transparent 65%), rgb(0 88 93 / 18%); color: var(--brown); border-color: rgb(0 88 93 / 65%); font-weight: 800; }
.dialog-close:hover { background: rgb(255 243 215 / 30%); }
#menu-sheet { border-radius: 7px; }
.sheet-note { color: var(--brown); }
.menu-text-page h1 { font-size: clamp(38px, 5.4vw, 64px); }
.menu-text-page h2 { font-size: 38px; color: var(--terra); }
.menu-text-page h3 { font-family: var(--sans); font-size: 24px; font-weight: 750; letter-spacing: -.65px; }
.menu-text-page dt { font-weight: 650; }
.menu-text-page .menu-text-price { font-weight: 700; }

@media (max-width: 1100px) {
  .brand > span { font-size: 15px; }
  .brand { gap: 16px; }
  .nav-wrap nav { gap: 25px; }
  .hero h1 { font-size: clamp(38px, 4.8vw, 53px); }
  .hero-actions { gap: 18px; }
  .hero-actions .button { font-size: 11px; gap: 9px; }
  .hero-actions .text-link { font-size: 11px; gap: 10px; }
}
@media (max-width: 850px) {
  .brand > span { font-size: 13px; }
  .nav-wrap nav { gap: 19px; }
  .nav-wrap nav > a:not(.button) { font-size: 11px; }
  .brand small { font-size: 7px; }
  .hero h1 { font-size: 38px; }
  .story-copy h2, .express-copy h2 { font-size: 31px; }
  .menu-item h3 { font-size: 16px; }
  .menu-intro { font-size: 27px; }
  .kitchen-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
  .visit-contact { border-top-color: rgb(255 243 215 / 35%); }
}
@media (max-width: 760px) {
  .brand { gap: 12px; }
  .brand > span { gap: 7px; }
  .brand > span { font-size: 14px; }
  .brand small { margin-top: 0; font-size: 6px; letter-spacing: 2px; }
  .nav-wrap nav {
    top: 82px;
    border-bottom: 1px solid rgb(0 88 93 / 25%);
    border-radius: 0 0 10px 10px;
    background: rgb(255 243 215 / 64%);
    box-shadow: 0 8px 20px rgb(0 88 93 / 10%);
    -webkit-backdrop-filter: blur(24px) saturate(125%);
    backdrop-filter: blur(24px) saturate(125%);
  }
  .nav-wrap nav > a:not(.button) { font-size: 16px; }
  .hero h1 { font-size: clamp(33px, 9.5vw, 61px); line-height: 1.08; margin-bottom: 25px; }
  .hero h1 em { font-size: 1.48em; }
  .hero-photo { border-radius: 105px 8px 8px 8px; }
  .express-photo img { border-radius: 8px 90px 8px 8px; }
  .hero-intro { font-size: 12px; }
  .hero-actions { gap: 19px; }
  .hero-actions .button { font-size: 11px; gap: 8px; padding: 11px 14px; }
  .hero-actions .text-link { font-size: 10px; gap: 8px; }
  .eyebrow { font-size: 8px; letter-spacing: 1.3px; }
  .coastal-strip .container { font-size: 8px; letter-spacing: .8px; }
  .story-copy h2, .section-heading h2, .express-copy h2 { font-size: clamp(32px, 7.8vw, 45px); }
  .photo-note { font-size: 26px; }
  .story-copy .story-signoff { font-size: 27px !important; }
  .menu-tabs { gap: 20px; }
  .menu-tabs button { font-size: 10px; }
  .menu-item h3 { font-size: 17px; }
  .menu-intro { font-size: 29px; }
  .kitchen-gallery { margin-top: 48px; padding-top: 38px; }
  .kitchen-heading { align-items: flex-start; flex-direction: column; gap: 22px; margin-bottom: 26px; }
  .kitchen-heading h2 { font-size: clamp(32px, 7.8vw, 45px); }
  .kitchen-heading > p { max-width: 340px; font-size: 12px; }
  .visit-heading h2 { font-size: clamp(36px, 9vw, 52px); }
  .visit-grid h3 { font-size: 25px; }
  .visit-location + .visit-location { border-color: rgb(255 243 215 / 35%); }
  .instagram-section h2 { font-size: 28px; }
  .footer-brand { font-size: 22px; }
  .dialog-heading h2 { font-size: 26px; }
  .menu-text-page h1 { font-size: 39px; }
  .menu-text-page h2 { font-size: 32px; }
  .menu-text-page h3 { font-size: 23px; }
}
@media (max-width: 520px) {
  .kitchen-grid { grid-template-columns: 1fr; gap: 20px; }
  .kitchen-grid figcaption { font-size: 11px; }
}
@media (max-width: 370px) {
  .brand > span { font-size: 12px; }
  .hero h1 { font-size: 32px; }
  .hero-actions { gap: 13px; }
  .hero-actions .button { padding-inline: 12px; gap: 8px; }
  .hero-actions .text-link { font-size: 9px; gap: 8px; }
  .menu-tabs { gap: 17px; }
}