/* Wattle & Crumb — café concept. Warm cream, espresso, terracotta. */
:root {
  --cream: #F4ECDF;
  --cream-2: #EADDC8;
  --paper: #FBF6EE;
  --espresso: #3A2A1F;
  --cocoa: #6B4E3A;
  --terra: #B0592F;
  --terra-ink: #9A4A24;
  --olive: #7A7A4E;
  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans: "DM Sans", system-ui, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--cream); color: var(--espresso); font: 400 17px/1.65 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { margin: 0; font-family: var(--serif); font-weight: 400; letter-spacing: -0.02em; line-height: 1.04; }
em { font-style: italic; color: var(--terra-ink); }
p { margin: 0 0 1em; }
:focus-visible { outline: 2px solid var(--terra); outline-offset: 3px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.wrap { max-width: 1240px; margin: 0 auto; padding: 0 clamp(1.25rem, 4vw, 3rem); }

.strip { display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap; padding: .55rem 1rem; background: var(--espresso); color: var(--cream-2); font-size: 13px; letter-spacing: .02em; }
.strip__sep { color: var(--terra); }

.hdr { position: sticky; top: 0; z-index: 50; background: rgba(244, 236, 223, .92); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(58, 42, 31, .1); }
.hdr__in { display: flex; align-items: center; justify-content: space-between; height: 78px; }
.brand { font-family: var(--serif); font-size: 1.6rem; letter-spacing: -0.02em; }
.brand em { color: var(--terra); }
.brand--sm { font-size: 1.25rem; }
.hdr__nav { display: flex; align-items: center; gap: 2rem; font-size: 15px; font-weight: 500; }
.hdr__nav a:not(.pill):hover { color: var(--terra-ink); }
.pill { padding: .6rem 1.2rem; border: 1px solid var(--espresso); border-radius: 999px; transition: background .25s, color .25s; }
.pill:hover { background: var(--espresso); color: var(--cream); }
.burger { display: none; width: 44px; height: 44px; border: 1px solid rgba(58,42,31,.3); border-radius: 50%; background: none; position: relative; cursor: pointer; }
.burger i { position: absolute; left: 13px; right: 13px; height: 1.5px; background: var(--espresso); }
.burger i:nth-of-type(1) { top: 17px; } .burger i:nth-of-type(2) { top: 25px; }

.kicker { font-size: 12px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--terra-ink); margin-bottom: 1.4rem; }
.kicker--light { color: #E3B48F; }

.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: .8rem 1.6rem; border-radius: 999px; font-weight: 500; font-size: 15px; transition: transform .25s, background .25s, color .25s; }
.btn:hover { transform: translateY(-2px); }
.btn--dark { background: var(--espresso); color: var(--cream); }
.btn--dark:hover { background: var(--terra-ink); }
.btn--line { border: 1px solid var(--espresso); }
.btn--line:hover { background: var(--espresso); color: var(--cream); }
.btn--cream { background: var(--cream); color: var(--espresso); }
.btn--ghostlight { border: 1px solid rgba(244,236,223,.45); color: var(--cream); }
.btn--ghostlight:hover { background: rgba(244,236,223,.1); }

/* Hero */
.hero { padding: clamp(3rem, 7vw, 6rem) 0 clamp(4rem, 8vw, 7rem); }
.hero__in { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.hero h1 { font-size: clamp(3rem, 1.4rem + 6vw, 7rem); line-height: .95; letter-spacing: -0.035em; margin-bottom: 1.8rem; }
.hero h1 em { display: block; }
.hero__lead { font-size: 1.15rem; max-width: 30rem; color: var(--cocoa); margin-bottom: 2.2rem; }
.hero__btns { display: flex; gap: .8rem; flex-wrap: wrap; }
.hero__art { position: relative; aspect-ratio: 1 / 1.05; }

/* Placeholder "photography" built from CSS gradients */
.photo { position: relative; border-radius: 22px; overflow: hidden; background: var(--cream-2); }
.photo--coffee {
  position: absolute; inset: 0 0 12% 14%;
  background:
    radial-gradient(circle at 54% 46%, #E8C9A0 0 9%, #C08A5B 9.5% 14%, #7A4A2B 14.5% 21%, #4B2E1E 21.5% 25%, transparent 25.5%),
    radial-gradient(circle at 54% 46%, #F7F1E7 0 33%, #E2D6C4 33.5% 35%, transparent 35.5%),
    radial-gradient(ellipse 18% 9% at 78% 50%, transparent 55%, #F7F1E7 58% 72%, transparent 75%),
    radial-gradient(circle at 20% 85%, rgba(176, 89, 47, .25), transparent 40%),
    linear-gradient(135deg, #8F6B4F 0%, #6E4F3A 60%, #5A3F2E 100%);
}
.photo--loaf {
  position: absolute; left: 0; bottom: 0; width: 44%; aspect-ratio: 1; border: 8px solid var(--cream);
  background:
    radial-gradient(ellipse 60% 26% at 50% 50%, transparent 0 38%, rgba(255,255,255,.35) 40% 42%, transparent 44%),
    radial-gradient(ellipse 70% 44% at 50% 52%, #C48A52 0 55%, #9A6234 70%, transparent 72%),
    linear-gradient(160deg, #E9DBC4, #D8C3A3);
}
.stamp {
  position: absolute; right: -10px; top: -14px; width: 120px; height: 120px; border-radius: 50%;
  background: var(--terra); color: var(--cream); display: grid; place-items: center; text-align: center;
  font: italic 400 1.05rem/1.05 var(--serif); transform: rotate(-10deg);
}

.pillars { border-top: 1px solid rgba(58,42,31,.14); border-bottom: 1px solid rgba(58,42,31,.14); background: var(--paper); }
.pillars__in { display: grid; grid-template-columns: repeat(3, 1fr); }
.pillars__in > div { padding: 2.5rem 2rem 2.5rem 0; }
.pillars__in > div + div { padding-left: 2rem; border-left: 1px solid rgba(58,42,31,.14); }
.pillars span { font: italic 400 1rem var(--serif); color: var(--terra-ink); }
.pillars h2 { font-size: 1.6rem; margin: .5rem 0 .6rem; }
.pillars p { margin: 0; color: var(--cocoa); font-size: 15px; }

.sec-head { text-align: center; max-width: 46rem; margin: 0 auto clamp(2.5rem, 5vw, 4rem); }
.sec-head h2 { font-size: clamp(2.2rem, 1.4rem + 3vw, 4rem); }

.menu { padding: clamp(5rem, 9vw, 8rem) 0; }
.menu__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.25rem, 3vw, 2.5rem); }
.menu__card { background: var(--paper); border-radius: 24px; padding: clamp(1.75rem, 4vw, 3rem); border: 1px solid rgba(58,42,31,.08); }
.menu__card h3 { font-size: 1.8rem; margin-bottom: 1.5rem; padding-bottom: 1rem; border-bottom: 1px solid rgba(58,42,31,.15); }
.items li { display: flex; align-items: baseline; gap: .6rem; padding: .7rem 0; font-size: 16px; }
.items { list-style: none; margin: 0; padding: 0; }
.items small { color: var(--olive); font-size: 13px; margin-left: .3rem; }
.items i { flex: 1; border-bottom: 1.5px dotted rgba(58,42,31,.3); transform: translateY(-4px); min-width: 1.5rem; }
.items b { font-weight: 600; font-variant-numeric: tabular-nums; }
.menu__note { text-align: center; margin-top: 2rem; font-size: 14px; color: var(--cocoa); }

.gallery { padding-bottom: clamp(5rem, 9vw, 8rem); }
.gallery__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; grid-template-rows: 260px 260px; gap: 1rem; }
.g1 { grid-row: span 2; }
.g4 { grid-column: span 2; }
.photo--table { background: radial-gradient(circle at 70% 30%, rgba(255,240,210,.7), transparent 45%), linear-gradient(180deg, #CDB496 0 55%, #8A6A4E 55% 60%, #A9876A 60%); }
.photo--pastry { background: radial-gradient(ellipse 22% 14% at 30% 40%, #D49A5A 60%, transparent 62%), radial-gradient(ellipse 22% 14% at 68% 55%, #C9874A 60%, transparent 62%), radial-gradient(ellipse 22% 14% at 40% 72%, #DCA766 60%, transparent 62%), linear-gradient(135deg, #3F3F3B, #2E2D2A); }
.photo--latte { background: radial-gradient(circle at 50% 50%, #F1E3CE 0 10%, #C49A6C 10.5% 26%, #F3E6D3 26.5% 30%, transparent 30.5%), linear-gradient(135deg, #B0592F, #8D4422); }
.photo--flour { background: radial-gradient(ellipse 40% 30% at 35% 55%, rgba(255,255,255,.85), transparent 70%), radial-gradient(circle at 75% 45%, #C9A27A 0 9%, transparent 9.5%), linear-gradient(160deg, #6B4E3A, #4E3729); }

.story { padding: clamp(5rem, 9vw, 8rem) 0; background: var(--paper); }
.story__in { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: end; }
.story h2 { font-size: clamp(2rem, 1.3rem + 2.6vw, 3.6rem); }
.story p { color: var(--cocoa); font-size: 1.05rem; }

.visit { background: var(--espresso); color: var(--cream); padding: clamp(5rem, 9vw, 8rem) 0; }
.visit__in { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(2.5rem, 6vw, 6rem); align-items: center; }
.visit h2 { font-size: clamp(2.2rem, 1.4rem + 3vw, 4rem); margin-bottom: 1.75rem; }
.visit h2 em { color: #E3B48F; }
.visit__addr { font-size: 1.1rem; margin-bottom: 2rem; }
.visit__addr span { font-size: 13px; color: #C2AE98; }
.hours { background: rgba(244,236,223,.06); border: 1px solid rgba(244,236,223,.16); border-radius: 24px; padding: clamp(1.75rem, 4vw, 2.75rem); }
.hours h3 { font-size: 1.6rem; margin-bottom: 1.25rem; }
.hours dl { margin: 0 0 1.25rem; }
.hours dl div { display: flex; justify-content: space-between; gap: 1rem; padding: .85rem 0; border-bottom: 1px solid rgba(244,236,223,.14); }
.hours dt { color: #D9C8B4; }
.hours dd { margin: 0; font-weight: 500; font-variant-numeric: tabular-nums; }
.hours p { margin: 0; font-size: 14px; color: #C2AE98; }

.foot { background: #2C2018; color: #C2AE98; padding: 2rem 0; font-size: 14px; }
.foot__in { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.foot .brand { color: var(--cream); }
.foot a { text-decoration: underline; text-underline-offset: 3px; color: var(--cream); }

@media (max-width: 900px) {
  .hero__in, .story__in, .visit__in { grid-template-columns: 1fr; }
  .hero__art { max-width: 520px; width: 100%; }
  .menu__grid { grid-template-columns: 1fr; }
  .pillars__in { grid-template-columns: 1fr; }
  .pillars__in > div, .pillars__in > div + div { padding: 1.75rem 0; border-left: 0; border-bottom: 1px solid rgba(58,42,31,.14); }
  .pillars__in > div:last-child { border-bottom: 0; }
  .gallery__grid { grid-template-columns: 1fr 1fr; grid-template-rows: 220px 180px 180px; }
  .g1 { grid-row: auto; grid-column: span 2; }
  .g4 { grid-column: span 2; }
}
@media (max-width: 720px) {
  .burger { display: block; }
  .hdr__nav { position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; background: var(--cream); padding: .5rem 1.25rem 1.25rem; border-bottom: 1px solid rgba(58,42,31,.12); display: none; }
  .hdr__nav.is-open { display: flex; }
  .hdr__nav a { padding: .9rem 0; border-bottom: 1px solid rgba(58,42,31,.1); }
  .hdr__nav .pill { margin-top: 1rem; text-align: center; border-bottom: 1px solid var(--espresso); }
  .stamp { width: 92px; height: 92px; font-size: .9rem; right: 0; }
  .hero__btns .btn { flex: 1 1 auto; }
}