@import url('https://fonts.googleapis.com/css2?family=Yellowtail&family=Special+Elite&family=Libre+Franklin:wght@400;500;600;700&display=swap');

:root{
  --paper: #f6efe0;
  --paper-alt: #efe2c4;
  --paper-dark: #e7d8b3;
  --red: #b5342a;
  --red-deep: #8a241c;
  --ink: #241a12;
  --ink-soft: #4a3d2e;
  --basil: #4a6741;
  --gold: #b5842a;
  --line: rgba(36,26,18,0.18);

  --font-script: "Yellowtail", cursive;
  --font-display: "Special Elite", "Courier New", monospace;
  --font-body: "Libre Franklin", -apple-system, "Helvetica Neue", Arial, sans-serif;

  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 40px;
  --space-2xl: 64px;
  --space-3xl: 100px;
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{ animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body{
  margin:0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
::selection{ background: var(--red); color:#fff; }
:focus-visible{ outline: 2px solid var(--red); outline-offset: 3px; }

.container{ max-width: 1080px; margin:0 auto; padding: 0 24px; }
@media (min-width: 900px){ .container{ padding: 0 40px; } }

h1,h2,h3,h4{
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.15;
  margin:0;
  text-wrap: balance;
  color: var(--ink);
}

p{ margin:0; }

.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-family: var(--font-display);
  font-size: 12px; letter-spacing:0.12em; text-transform:uppercase;
  color: var(--red);
  margin-bottom: var(--space-md);
  border-bottom: 1px dashed var(--red);
  padding-bottom: 4px;
}

.lede{ font-size: 1.02rem; color: var(--ink-soft); max-width: 54ch; line-height:1.7; }

/* ==========================================================================
   Paper + gingham texture
   ========================================================================== */
.grain{
  position: fixed; inset:0; z-index: 90; pointer-events:none;
  opacity: 0.05; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.gingham{
  background-image:
    repeating-linear-gradient(0deg, rgba(181,52,42,0.14) 0 18px, transparent 18px 36px),
    repeating-linear-gradient(90deg, rgba(181,52,42,0.14) 0 18px, transparent 18px 36px);
  background-color: var(--paper);
}

/* Stamp button — rotated rubber-stamp look */
.stamp-btn{
  display:inline-flex; align-items:center; gap:10px;
  background: transparent;
  color: var(--red);
  border: 2px solid var(--red);
  border-radius: 3px;
  padding: 14px 28px;
  font-family: var(--font-display);
  font-size: 13px; letter-spacing:0.06em; text-transform:uppercase;
  transform: rotate(-1.5deg);
  cursor:pointer;
  transition: transform 200ms ease, background 200ms ease, color 200ms ease;
}
.stamp-btn:hover{ transform: rotate(0deg) translateY(-2px); background: var(--red); color:#fff; }
.stamp-btn.is-solid{ background: var(--red); color:#fff; }
.stamp-btn.is-solid:hover{ background: var(--red-deep); }

.btn-row{ display:flex; flex-wrap:wrap; gap: var(--space-md); align-items:center; }

/* ==========================================================================
   Nav
   ========================================================================== */
.site-nav{
  position: sticky; top:0; z-index:50;
  background: var(--paper);
  border-bottom: 2px solid var(--ink);
}
.site-nav .container{ display:flex; align-items:center; justify-content:space-between; height:76px; }
.brand .word{ font-family: var(--font-script); font-size:30px; color: var(--red); }
.nav-links{ display:none; align-items:center; gap: var(--space-xl); }
@media (min-width: 820px){ .nav-links{ display:flex; } }
.nav-links a{ font-family: var(--font-display); font-size:12.5px; letter-spacing:0.05em; text-transform:uppercase; color: var(--ink-soft); transition: color 200ms ease; }
.nav-links a:hover{ color: var(--red); }
.nav-cta{ display:none; }
@media (min-width:820px){ .nav-cta{ display:inline-flex; } }
.nav-toggle{
  display:flex; align-items:center; justify-content:center;
  width:42px; height:42px; border:2px solid var(--ink); border-radius:2px; background:transparent; color:var(--ink); cursor:pointer;
}
@media (min-width:820px){ .nav-toggle{ display:none; } }
.mobile-menu{
  position:fixed; inset:0; background: var(--paper); z-index:60;
  display:flex; flex-direction:column; justify-content:center; gap: var(--space-xl); padding: var(--space-2xl) 24px;
  transform: translateX(100%); transition: transform 300ms ease;
}
.mobile-menu.is-open{ transform: translateX(0); }
.mobile-menu a{ font-family: var(--font-display); font-size:26px; color: var(--ink); text-transform:uppercase; }
.mobile-menu .close{ position:absolute; top:24px; right:24px; width:42px; height:42px; border:2px solid var(--ink); border-radius:2px; display:flex; align-items:center; justify-content:center; cursor:pointer; background:none; color:var(--ink); }

/* ==========================================================================
   Hero — paper placemat with gingham band + script wordmark
   ========================================================================== */
.hero{ position:relative; overflow:hidden; }
.hero-band{ padding: var(--space-3xl) 0 var(--space-2xl); text-align:center; }
.hero .badge{
  display:inline-flex; align-items:center; justify-content:center;
  width:108px; height:108px; border-radius:50%;
  border: 2px dashed var(--red);
  font-family: var(--font-display); font-size:9.5px; letter-spacing:0.03em; text-transform:uppercase; color: var(--red);
  transform: rotate(-8deg);
  margin-bottom: var(--space-lg);
  text-align:center; line-height:1.5;
  padding: 0 10px;
}
.hero h1{
  font-family: var(--font-script);
  font-weight:400;
  font-size: clamp(4rem, 11vw, 8rem);
  color: var(--red);
  line-height:0.9;
}
.hero .tagline{
  font-family: var(--font-display);
  font-size: clamp(0.95rem, 1.6vw, 1.15rem);
  letter-spacing:0.04em;
  color: var(--ink-soft);
  margin-top: var(--space-md);
}
.hero .btn-row{ margin-top: var(--space-xl); justify-content:center; }

/* ==========================================================================
   Sections
   ========================================================================== */
section{ padding: var(--space-2xl) 0; }
.section-lg{ padding: var(--space-3xl) 0; }
.section-band{ background: var(--paper-alt); border-top:2px solid var(--ink); border-bottom:2px solid var(--ink); }
.section-head{ max-width:680px; margin: 0 auto var(--space-2xl); text-align:center; }
.section-head h2{ font-size: clamp(1.7rem, 3vw, 2.4rem); margin-top:8px; }

.reveal{ opacity:1; }

/* ==========================================================================
   Menu card — printed-menu list with dot leaders
   ========================================================================== */
.menu-card{
  max-width: 680px; margin: 0 auto;
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 4px;
  padding: var(--space-2xl);
  box-shadow: 8px 8px 0 var(--red);
}
.menu-item{ display:flex; align-items:baseline; gap:10px; padding: 16px 0; border-bottom: 1px dashed var(--line); }
.menu-item:last-child{ border-bottom:none; }
.menu-item .name{ font-family: var(--font-display); font-size:16.5px; color: var(--ink); white-space:nowrap; }
.menu-item .leader{ flex:1; border-bottom: 2px dotted var(--line); transform: translateY(-4px); }
.menu-item .price{ font-family: var(--font-display); font-size:16.5px; color: var(--red); white-space:nowrap; }
.menu-item .desc{ display:block; width:100%; font-size:13.5px; color: var(--ink-soft); margin-top:4px; }

/* ==========================================================================
   Story split — torn paper photo-corner frame
   ========================================================================== */
.story{ display:grid; grid-template-columns:1fr; gap: var(--space-2xl); align-items:center; }
@media (min-width:960px){ .story{ grid-template-columns: 0.85fr 1.15fr; } }
.story-art{
  position:relative; background: var(--paper); border: 2px solid var(--ink);
  padding: var(--space-lg); transform: rotate(-2deg);
  box-shadow: 6px 6px 0 rgba(36,26,18,0.12);
}
.story-art svg{ width:100%; height:auto; display:block; }
.story-art .cap{ font-family: var(--font-display); font-size:12px; text-align:center; margin-top:10px; color: var(--ink-soft); }

/* ==========================================================================
   Hours / location
   ========================================================================== */
.hours-grid{ display:grid; grid-template-columns:1fr; gap: var(--space-2xl); }
@media (min-width:900px){ .hours-grid{ grid-template-columns: 1fr 1fr; } }
.hours-list .row{ display:flex; align-items:center; justify-content:space-between; gap:12px; font-family: var(--font-display); font-size:14px; padding: 14px 0; border-top:1px dashed var(--line); }
.hours-list .row:last-child{ border-bottom:1px dashed var(--line); }
.hours-list .row .t{ color: var(--red); }

.stamp-card{
  border: 2px solid var(--ink); padding: var(--space-2xl); border-radius:2px;
  transform: rotate(1deg); background: var(--paper);
  box-shadow: 6px 6px 0 rgba(36,26,18,0.1);
}

/* ==========================================================================
   CTA band
   ========================================================================== */
.cta-band{ text-align:center; padding: var(--space-3xl) 0; }
.cta-band h2{ font-size: clamp(2rem,4.2vw,3rem); }
.cta-band .lede{ margin: var(--space-md) auto var(--space-xl); }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer{ border-top: 2px solid var(--ink); padding: var(--space-2xl) 0; }
.footer-row{ display:flex; flex-wrap:wrap; gap: var(--space-lg); justify-content:space-between; align-items:center; }
.footer-row .brand .word{ font-size:22px; }
.footer-links{ display:flex; gap: var(--space-lg); font-family: var(--font-display); font-size:11.5px; letter-spacing:0.05em; text-transform:uppercase; color: var(--ink-soft); }
.footer-note{ margin-top: var(--space-lg); padding-top: var(--space-lg); border-top:1px dashed var(--line); font-size:12.5px; color: var(--ink-soft); }

.text-center{ text-align:center; }
.mt-lg{ margin-top: var(--space-lg); }

/* ==========================================================================
   Page hero — smaller gingham band for interior pages
   ========================================================================== */
.page-hero{ text-align:center; padding: var(--space-2xl) 0 var(--space-xl); }
.page-hero .eyebrow{ justify-content:center; }
.page-hero h1{
  font-family: var(--font-script);
  font-weight:400;
  font-size: clamp(3rem, 7vw, 5rem);
  color: var(--red);
  line-height:0.95;
}
.page-hero .lede{ margin: var(--space-md) auto 0; text-align:center; }

/* Active nav link */
.nav-links a[aria-current="page"],
.mobile-menu a[aria-current="page"]{ color: var(--red); }

/* ==========================================================================
   Menu categories (multi-section menu page)
   ========================================================================== */
.menu-category{ margin-bottom: var(--space-2xl); }
.menu-category:last-child{ margin-bottom:0; }
.menu-category h3{
  font-family: var(--font-display); font-size:14px; letter-spacing:0.1em; text-transform:uppercase;
  color: var(--red); margin-bottom: var(--space-md);
  padding-bottom: 8px; border-bottom: 2px solid var(--ink);
}

/* ==========================================================================
   Staff / team stamp cards
   ========================================================================== */
.team-grid{ display:grid; grid-template-columns:1fr; gap: var(--space-lg); }
@media (min-width:720px){ .team-grid{ grid-template-columns: repeat(3,1fr); } }
.team-card{ text-align:center; }
.team-avatar{
  width:96px; height:96px; margin: 0 auto var(--space-md);
  border-radius:50%; border: 2px dashed var(--red);
  display:flex; align-items:center; justify-content:center;
  font-family: var(--font-script); font-size:34px; color: var(--red);
  transform: rotate(-3deg);
}
.team-card h4{ font-size:18px; }
.team-card .role{ font-family: var(--font-display); font-size:11px; letter-spacing:0.06em; text-transform:uppercase; color: var(--ink-soft); margin-top:4px; }
.team-card p.bio{ font-size:13.5px; color: var(--ink-soft); margin-top:8px; line-height:1.6; }

/* ==========================================================================
   Reservation form
   ========================================================================== */
.form-card{
  background: var(--paper); border: 2px solid var(--ink); border-radius:4px;
  padding: var(--space-2xl); box-shadow: 8px 8px 0 var(--red);
  display:flex; flex-direction:column; gap: var(--space-md);
}
.field{ display:flex; flex-direction:column; gap:6px; }
.field label{ font-family: var(--font-display); font-size:11.5px; letter-spacing:0.06em; text-transform:uppercase; color: var(--ink-soft); }
.input, textarea.input, select.input{
  background: var(--paper-alt);
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 13px 14px;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 15.5px;
  transition: border-color 200ms ease;
  width:100%;
}
.input:focus{ border-color: var(--red); outline:none; }
textarea.input{ resize: vertical; min-height: 110px; }
.field-row{ display:grid; grid-template-columns: 1fr; gap: var(--space-md); }
@media (min-width:560px){ .field-row{ grid-template-columns: 1fr 1fr; } }
.hp-field{ position:absolute; left:-9999px; }
.form-note{ font-size:12.5px; color: var(--ink-soft); }

/* Map placeholder */
.map-box{
  aspect-ratio: 4/3;
  border: 2px solid var(--ink);
  background:
    repeating-linear-gradient(45deg, rgba(181,52,42,0.06) 0 10px, transparent 10px 20px),
    var(--paper-alt);
  display:flex; align-items:center; justify-content:center;
  font-family: var(--font-display); font-size:12px; letter-spacing:0.06em; text-transform:uppercase; color: var(--ink-soft);
}

/* Contact info rows */
.contact-info .row{ display:flex; gap: var(--space-md); padding: var(--space-md) 0; border-bottom:1px dashed var(--line); }
.contact-info .row:first-child{ padding-top:0; }
.contact-info .label{ font-family: var(--font-display); font-size:10.5px; letter-spacing:0.06em; text-transform:uppercase; color: var(--ink-soft); }
.contact-info .value{ font-size:15.5px; margin-top:2px; }