@font-face { font-family:"FV Ribbon"; src:url("fonts/BebasNeue-Regular.ttf") format("truetype"); font-display:swap; }
@font-face { font-family:"FV Brush"; src:url("fonts/Allura-Regular.ttf") format("truetype"); font-display:swap; }
:root {
  --paper:#fcf8ed; --ink:#18304a; --navy:#113b69; --green:#4f7d3a;
  --pink:#d94970; --teal:#1e9b9b; --gold:#e99b1b; --purple:#76559b;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font:17px/1.55 Arial,sans-serif; }
.sitebar { height:62px; padding:0 4vw; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid #afbea3; text-transform:uppercase; letter-spacing:.13em; font-size:.68rem; }
.wordmark { font:700 1.12rem Georgia,serif; text-transform:none; letter-spacing:0; color:var(--navy); text-decoration:none; }
.hero { min-height:690px; margin:18px; position:relative; border:2px solid var(--green); border-radius:20px; overflow:hidden; background:#eaf1e9; }
.hero img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hero::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(252,248,237,.98),rgba(252,248,237,.9) 34%,rgba(252,248,237,.15) 65%); }
.hero-panel { position:relative; z-index:1; width:min(580px,48%); padding:8rem 5vw; }
.kicker,.type { text-transform:uppercase; letter-spacing:.14em; font-weight:800; font-size:.72rem; }
.kicker { color:var(--green); }
h1,h2,h3 { font-family:Georgia,serif; line-height:1.02; }
h1 { display:flex; flex-direction:column; align-items:flex-start; font:400 clamp(6.6rem,12vw,11rem)/.67 "FV Brush","Brush Script MT",cursive; margin:.12em 0 .22em; color:var(--navy); }
h1 span,h1 em { display:block; }
h1 em { margin-left:.35em; font-style:normal; font-weight:400; color:var(--pink); }
.hero-panel>p:not(.kicker) { max-width:430px; font:1.15rem/1.6 Georgia,serif; }
.mini-legend { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:2rem; }
.mini-legend span { padding:.45rem .7rem; border:1px solid #98aa8d; border-radius:999px; background:#fffdf6; font-size:.7rem; font-weight:700; }
.chapter-intro { max-width:1240px; margin:7rem auto 3rem; padding:0 5vw; display:grid; grid-template-columns:1.1fr .9fr; gap:6vw; align-items:end; }
.chapter-intro h2,.more-stops h2 { font-size:clamp(2.5rem,4.5vw,4.6rem); margin:.25em 0; }
.chapter-intro>p { font:1.25rem/1.7 Georgia,serif; }
.ribbon { --ribbon:var(--green); position:relative; z-index:1; display:inline-block; margin-left:1rem; padding:.5rem 1.8rem .38rem; background:var(--ribbon); color:white; font:400 1.28rem/1 "FV Ribbon","DIN Condensed",Impact,sans-serif; text-transform:uppercase; letter-spacing:.17em; filter:drop-shadow(0 3px 0 rgba(17,59,105,.14)); }
.ribbon::before,.ribbon::after { content:""; position:absolute; z-index:-1; top:.45rem; width:1.35rem; height:100%; background:color-mix(in srgb,var(--ribbon),white 12%); }
.ribbon::before { left:-1.05rem; clip-path:polygon(0 10%,100% 0,82% 50%,100% 100%,0 88%,28% 50%); }
.ribbon::after { right:-1.05rem; clip-path:polygon(0 0,100% 10%,72% 50%,100% 88%,0 100%,18% 50%); }
.ribbon.teal-ribbon { --ribbon:var(--teal); }
.restaurant-grid { max-width:1240px; margin:auto; padding:0 5vw; display:grid; grid-template-columns:repeat(2,1fr); gap:1.4rem; }
.restaurant { position:relative; min-height:410px; padding:2rem 2.2rem 2.1rem; border:1.5px solid currentColor; border-radius:18px; background:#fffdf7; overflow:hidden; }
.restaurant::after { content:""; position:absolute; left:0; right:0; bottom:0; height:9px; background:currentColor; }
.restaurant.pink { --accent:var(--pink); color:var(--pink); } .restaurant.teal { --accent:var(--teal); color:var(--teal); } .restaurant.purple { --accent:var(--purple); color:var(--purple); } .restaurant.green { --accent:var(--green); color:var(--green); } .restaurant.gold { --accent:var(--gold); color:var(--gold); background:#fffdf7; }
.restaurant .icon { display:grid; place-items:center; width:64px; height:64px; border:4px solid #fffdf7; outline:2px solid var(--accent); border-radius:50%; background:var(--accent); box-shadow:0 4px 0 color-mix(in srgb,var(--accent),black 12%); }
.restaurant .icon img,.round img { width:34px; height:34px; display:block; }
.restaurant .number { position:absolute; right:1.8rem; top:1.4rem; font:700 3.5rem Georgia,serif; opacity:.13; }
.restaurant h3 { font-size:2rem; margin:.2em 0; color:var(--navy); }
.restaurant .type { margin:1.4rem 0 0; font:400 1rem/1 "FV Ribbon","DIN Condensed",Impact,sans-serif; letter-spacing:.12em; }
.restaurant>p:not(.type) { color:var(--ink); }
.tip { display:grid; grid-template-columns:100px 1fr; gap:1rem; margin-top:1.5rem; padding-top:1rem; border-top:1px dashed currentColor; }
.tip strong { text-transform:uppercase; letter-spacing:.1em; font-size:.68rem; }
.tip span { color:var(--ink); font-size:.88rem; }
.actions { margin-top:1.1rem; font-size:.7rem; text-transform:uppercase; letter-spacing:.14em; font-weight:700; }
.actions a { color:var(--accent); text-decoration:none; }
.actions a:hover { text-decoration:underline; text-underline-offset:3px; }
.actions .sep { margin:0 .6rem; opacity:.35; color:var(--ink); font-weight:400; }
.more-stops { max-width:1240px; margin:8rem auto; padding:0 5vw; }
.teal-ribbon { --ribbon:var(--teal); }
.more-heading { max-width:840px; }
.stop-grid { margin-top:3rem; display:grid; grid-template-columns:repeat(2,1fr); gap:1rem; }
.stop-grid article { display:flex; gap:1.2rem; align-items:center; padding:1.2rem; border:1px solid #cbd3c4; border-radius:15px; background:#fffdf7; }
.stop-grid h3 { margin:0; color:var(--navy); font-size:1.35rem; }
.stop-grid p { margin:.25rem 0 0; font-size:.88rem; }
.round { flex:0 0 48px; height:48px; border-radius:50%; display:grid; place-items:center; color:white; font-weight:800; }
.blue { background:var(--navy); } .pink-bg { background:var(--pink); } .gold { background:var(--gold); } .green-bg { background:var(--green); }
.morning-art { position:relative; margin:2rem 0 0; border:1.5px solid var(--teal); border-radius:18px; overflow:hidden; background:white; }
.morning-art img { display:block; width:100%; max-height:520px; object-fit:cover; }
.morning-art figcaption { position:absolute; left:1.2rem; bottom:1.2rem; max-width:360px; padding:.65rem .9rem; border-radius:10px; background:#fffdf4e8; font:italic .9rem Georgia,serif; color:var(--navy); }
footer { padding:2rem 5vw; background:var(--navy); color:white; display:flex; justify-content:space-between; text-transform:uppercase; letter-spacing:.12em; font-size:.68rem; }
@media(max-width:800px) {
  .sitebar span { display:none; }
  .hero { min-height:760px; }
  .hero::after { background:linear-gradient(180deg,rgba(252,248,237,.96),rgba(252,248,237,.72) 58%,rgba(252,248,237,.08)); }
  .hero-panel { width:100%; padding:4.5rem 8vw; }
  .chapter-intro,.restaurant-grid,.stop-grid { grid-template-columns:1fr; }
  .chapter-intro { margin-top:5rem; gap:1rem; }
  .restaurant { min-height:0; }
  h1 { font-size:4.7rem; }
  .morning-art figcaption { position:static; display:block; max-width:none; margin:0; border-radius:0; }
  footer { display:block; }
  footer span { display:block; margin:.35rem 0; }
}