:root {
  --bg-cream: #f7efdd;
  --bg-sun: #e7b76d;
  --card: rgba(255, 250, 240, 0.88);
  --ink: #1f1a17;
  --muted: #6a5d53;
  --forest: #214f44;
  --pepper: #b6452c;
  --gold: #d58d2a;
  --line: rgba(33, 79, 68, 0.18);
  --shadow: 0 24px 60px rgba(90, 48, 18, 0.18);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  font-family: "Manrope", sans-serif;
  background:
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.55), transparent 28%),
    radial-gradient(circle at bottom right, rgba(182, 69, 44, 0.18), transparent 34%),
    linear-gradient(135deg, #f5ecd9 0%, #efcf99 55%, #d7a464 100%);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.12) 1px, transparent 1px);
  background-size: 28px 28px;
  opacity: 0.35;
}

.shell {
  width: min(1180px, calc(100vw - 2rem));
  margin: 0 auto;
  padding: 2rem 0 3rem;
}

.status-bar {
  padding: 0.95rem 1.15rem;
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.status-bar > div {
  padding: 0.7rem 0.95rem;
  min-width: 140px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.48);
}

.card {
  position: relative;
  background: var(--card);
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 24px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(12px);
}

.hero {
  padding: 1.75rem;
  overflow: hidden;
}

.hero::after {
  content: "";
  position: absolute;
  width: 240px;
  height: 240px;
  right: -40px;
  top: -80px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(213, 141, 42, 0.36), rgba(213, 141, 42, 0));
}

.eyebrow {
  margin: 0 0 0.4rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 0.78rem;
  color: var(--forest);
  font-weight: 700;
}

h1,
h2 {
  font-family: "Fraunces", serif;
  margin: 0;
  line-height: 0.95;
}

h1 {
  max-width: 12ch;
  font-size: clamp(2.4rem, 6vw, 4.8rem);
}

h2 {
  font-size: clamp(1.7rem, 3.2vw, 2.6rem);
}

.lede,
.muted,
#foodPrompt,
#selectionLabel,
#resultBody p,
li {
  color: var(--muted);
}

.stats {
  display: flex;
  gap: 1rem;
  margin-top: 1.25rem;
  flex-wrap: wrap;
}

.stats div {
  padding: 0.9rem 1rem;
  min-width: 140px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.48);
}

.label {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}

.content-grid {
  display: grid;
  grid-template-columns: minmax(300px, 430px) minmax(0, 1fr);
  gap: 1.25rem;
  margin-top: 0.9rem;
}

.food-card,
.map-card,
.result-card {
  padding: 1.15rem;
}

.food-frame {
  overflow: hidden;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.8);
  background: linear-gradient(180deg, rgba(255, 247, 233, 0.9), rgba(230, 213, 178, 0.65));
}

#foodImage {
  width: 100%;
  display: block;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.food-copy {
  margin-top: 1rem;
}

#map {
  min-height: 440px;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(33, 79, 68, 0.2);
}

.map-actions {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
  margin-top: 1rem;
  flex-wrap: wrap;
}

.button-row {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

button {
  appearance: none;
  border: 0;
  border-radius: 999px;
  padding: 0.95rem 1.25rem;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  color: white;
  background: linear-gradient(135deg, var(--pepper), #87301e);
  transition: transform 160ms ease, opacity 160ms ease;
}

button:hover:not(:disabled) {
  transform: translateY(-1px);
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

button.ghost {
  color: var(--forest);
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.72);
}

.result-card {
  margin-top: 1.25rem;
}

.result-grid,
.summary-grid {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}

.result-pill {
  padding: 0.85rem 0.95rem;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.56);
}

.result-pill strong {
  display: block;
  color: var(--ink);
}

.summary-list {
  margin: 1rem 0 0;
  padding-left: 1.1rem;
}

.summary-list li + li {
  margin-top: 0.55rem;
}

.leaflet-container {
  font-family: "Manrope", sans-serif;
}

@media (max-width: 880px) {
  .content-grid {
    grid-template-columns: 1fr;
  }

  #map {
    min-height: 360px;
  }
}

/* A Taste of Place — field-guide edition */
@font-face{font-family:Manrope;src:url('/static/fonts/manrope-normal-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Manrope;src:url('/static/fonts/manrope-normal-700.woff2') format('woff2');font-weight:600 900;font-display:swap}
@font-face{font-family:Fraunces;src:url('/static/fonts/fraunces-italic-500.woff2') format('woff2');font-style:italic;font-weight:500;font-display:swap}
:root{--bg-cream:#f7f3e8;--ink:#303b2b;--muted:#65705d;--forest:#4c5e32;--pepper:#bb482a;--line:#9ca483;--card:#fffdf3;--shadow:4px 4px 0 #d4d7b5}body{background:var(--bg-cream)}body::before{display:none}.taste-header{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:24px 4%;border-bottom:1.5px solid var(--ink);background:#e4e9ad}.taste-header a{color:var(--ink);text-decoration:none;font-size:10px}.taste-header .taste-brand{font-size:21px;font-weight:700;letter-spacing:-.055em}.taste-header>span{font-size:9px;letter-spacing:.12em}.shell{width:min(1360px,92%);padding:46px 0 24px}.taste-intro{display:grid;grid-template-columns:1.4fr 1fr;gap:10%;align-items:center;margin-bottom:38px}.taste-intro h1{font:700 clamp(35px,3.6vw,57px)/1.06 Manrope,system-ui,sans-serif;letter-spacing:-.06em;max-width:none}.taste-intro em{font-family:Fraunces,Georgia,serif;font-weight:500;color:var(--pepper)}.taste-intro .eyebrow{font-size:9px;letter-spacing:.12em;margin-bottom:17px}.taste-intro>div>p:not(.eyebrow){font-size:13px;line-height:1.85;color:var(--muted);max-width:350px}.how-to{margin-top:20px;font-size:11px;max-width:380px}.how-to summary{cursor:pointer;list-style:none;border-bottom:1px solid var(--line);padding:10px 0;font-weight:700;display:flex;justify-content:space-between}.how-to summary::-webkit-details-marker{display:none}.how-to p{line-height:1.8;color:var(--muted)}.card{border:1.5px solid var(--line);border-radius:4px;background:var(--card);box-shadow:var(--shadow);backdrop-filter:none}.status-bar{box-shadow:none;border:0;border-top:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink);background:none;border-radius:0;align-items:center;padding:14px 0;gap:28px}.status-bar>div{display:flex;align-items:center;gap:14px;background:none;border:0;padding:0;min-width:130px}.status-bar .label{font-size:8px;letter-spacing:.1em;margin:0}.status-bar strong{font-size:17px}.restart-button{margin-left:auto;background:none;color:var(--pepper);padding:8px 0;border-radius:0;font-size:10px;min-height:36px}.content-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:25px;margin-top:25px}.food-card{padding:0;overflow:hidden;display:flex;flex-direction:column;background:#e5e9ba}.food-frame{border:0;border-radius:0;background:#dad9bc;min-height:320px;flex:1}.food-frame img{aspect-ratio:auto;height:100%;max-height:390px;min-height:320px;object-fit:cover}.food-copy{margin:0;padding:25px 29px 28px;border-top:1.5px solid var(--line)}.food-copy .eyebrow{font-size:9px;letter-spacing:.12em;margin-bottom:12px}.food-copy h2{font:700 clamp(32px,3.6vw,50px)/1.02 Manrope,system-ui,sans-serif;letter-spacing:-.05em;color:var(--pepper)}#foodPrompt{font-size:12px;line-height:1.8;margin-bottom:0;max-width:440px}.map-card{padding:0;overflow:hidden;background:#fffdf3;display:flex;flex-direction:column}.map-heading{padding:17px 20px;display:flex;justify-content:space-between;font-size:9px;letter-spacing:.1em;border-bottom:1.5px solid var(--line);background:#eef0d1}.map-heading>span:last-child{font-size:16px;line-height:1}#map{min-height:360px;flex:1;border:0;border-bottom:1.5px solid var(--line);border-radius:0}.leaflet-tile-pane{filter:saturate(.55)}.map-actions{margin:0;padding:21px 24px;gap:14px}#selectionLabel{font-size:11px;line-height:1.7;margin:0;max-width:330px}.button-row{gap:10px}button{border:1.5px solid var(--pepper);background:var(--pepper);border-radius:28px;padding:12px 20px;font-size:11px;min-height:42px}button.ghost{background:#eef0d1;border-color:var(--forest)}button:focus-visible,a:focus-visible,summary:focus-visible{outline:2px solid var(--pepper);outline-offset:4px}.result-card{margin-top:28px;padding:22px 26px}.result-card>.eyebrow{font-size:9px;margin-bottom:17px}#resultBody>p{font-size:12px}.result-pill{border-radius:2px;background:#f1f1de;border:1px solid #c6cbb1;padding:15px}.result-pill .label{font-size:8px}.result-pill strong{font-size:12px;line-height:1.7}.summary-list{font-size:12px;line-height:1.8}.taste-footer{display:flex;justify-content:space-between;gap:20px;border-top:1px solid var(--line);margin-top:38px;padding-top:20px;font-size:9px;color:var(--muted)}.taste-footer a{color:var(--forest)}[hidden]{display:none!important}
@media(max-width:760px){.taste-header{padding:19px 5%}.taste-header>span{display:none}.taste-header .taste-brand{font-size:19px}.taste-header>a:last-child{font-size:8px}.shell{width:90%;padding-top:32px}.taste-intro{grid-template-columns:1fr;gap:15px;margin-bottom:28px}.taste-intro h1{font-size:38px}.taste-intro>div>p:not(.eyebrow){max-width:none;font-size:12px}.how-to{margin-top:5px;max-width:none}.status-bar{gap:15px}.status-bar>div{min-width:85px;gap:8px}.status-bar strong{font-size:15px}.restart-button{font-size:9px}.content-grid{grid-template-columns:1fr;gap:24px}.food-frame,.food-frame img{min-height:240px;height:260px}.food-copy{padding:23px}.food-copy h2{font-size:37px}#map{min-height:370px}.map-actions{padding:20px}.result-card{padding:20px}.taste-footer{font-size:8px}}
@media(prefers-reduced-motion:reduce){button{transition:none}}