@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,600;1,600&display=swap");
:root { --ink:#17231d; --muted:#758078; --cream:#f6f4ed; --paper:#fffefa; --green:#245c42; --deep:#183c2b; --line:#e4e6de; --orange:#e8794f; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--cream); font-family:"DM Sans",sans-serif; }
button,input { font:inherit; }
button { cursor:pointer; }
button:focus-visible,input:focus-visible { outline:3px solid #e8794f66; outline-offset:3px; }
.chips button,.map-toolbar button,.truck-card button,.retry-button,.clear-button,.locate-button { transition:transform .2s ease, color .2s ease, background-color .2s ease, border-color .2s ease, box-shadow .2s ease; }
.chips button:hover,.map-toolbar button:hover,.truck-card button:hover,.retry-button:hover { transform:translateY(-2px); }
.chips button:active,.map-toolbar button:active,.truck-card button:active,.retry-button:active,.clear-button:active,.locate-button:active { transform:translateY(1px) scale(.97); }
a { color:inherit; }
.topbar { height:76px; display:flex; align-items:center; justify-content:space-between; padding:0 clamp(24px,6vw,96px); border-bottom:1px solid var(--line); background:var(--paper); }
.brand { display:flex; align-items:center; gap:11px; color:var(--ink); text-decoration:none; font-size:15px; font-weight:700; letter-spacing:-.04em; }
.brand i { color:var(--orange); font-family:Georgia,serif; font-weight:400; }
.brand-mark { display:grid; place-items:center; width:31px; height:31px; border-radius:50%; color:#fff; background:var(--green); font-family:Georgia,serif; font-size:19px; }
.topbar-meta { display:flex; align-items:center; gap:8px; color:var(--muted); font-size:12px; }
.live-dot { width:7px; height:7px; border-radius:50%; background:#4d9d72; box-shadow:0 0 0 4px #4d9d7220; }
.intro { display:flex; justify-content:space-between; max-width:1370px; margin:auto; padding:clamp(64px,9vw,130px) clamp(24px,7vw,112px) 90px; }
.intro-copy { max-width:620px; }
.eyebrow { margin:0 0 16px; color:var(--orange); font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; }
h1 { margin:0; color:var(--ink); font-size:clamp(55px,7vw,102px); letter-spacing:-.085em; line-height:.9; }
h1 em { color:var(--green); font-family:"Playfair Display",Georgia,serif; font-weight:600; letter-spacing:-.06em; }
.lead { max-width:450px; margin:34px 0 43px; color:var(--muted); font-size:16px; line-height:1.7; }
.search-box { max-width:500px; }
.search-box label { display:block; margin-bottom:10px; font-size:11px; font-weight:700; letter-spacing:.01em; }
.search-row { display:flex; align-items:center; gap:10px; padding:0 0 12px; border-bottom:1px solid var(--ink); }
.search-icon { color:var(--orange); font-size:25px; line-height:1; transform:rotate(-20deg); }
#search { width:100%; min-width:0; border:0; outline:0; color:var(--ink); background:transparent; font-size:15px; }
#search::placeholder { color:#a5ada6; }
.clear-button,.locate-button { border:0; background:transparent; }
.clear-button { color:var(--muted); font-size:24px; line-height:1; }
.locate-button { color:var(--green); font-size:25px; line-height:1; }
.locate-button.is-loading { animation:pulse 1s infinite; }
.chips { display:flex; flex-wrap:wrap; gap:8px; margin-top:17px; }
.chips button { padding:7px 12px; border:1px solid #d5dbd2; border-radius:99px; color:var(--green); background:transparent; font-size:11px; transition:.2s; }
.chips button:hover { border-color:var(--green); background:#e9f0e9; box-shadow:0 5px 12px #245c4218; }
.intro-aside { display:flex; align-items:flex-start; gap:35px; padding-top:12px; }
.stamp { display:grid; place-items:center; width:76px; height:76px; border:1px solid #bdc9bc; border-radius:50%; color:var(--green); font-family:Georgia,serif; font-size:17px; line-height:.76; text-align:center; transform:rotate(8deg); }
.stamp b { color:var(--orange); font-size:10px; font-style:italic; font-weight:400; }
.intro-stat { display:flex; flex-direction:column; gap:5px; }
.intro-stat strong { color:var(--ink); font-size:31px; letter-spacing:-.08em; }
.intro-stat span { color:var(--muted); font-size:11px; line-height:1.3; }
.explorer { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(340px,.75fr); width:calc(100% - 48px); max-width:1280px; min-height:480px; margin-right:auto; margin-bottom:72px; margin-left:auto; overflow:hidden; border:1px solid var(--line); border-radius:8px; background:var(--paper); box-shadow:0 18px 50px #26352c0d; }
.map-panel { position:relative; min-height:480px; border-right:1px solid var(--line); }
#map { width:100%; height:100%; min-height:480px; }
.map-toolbar { position:absolute; z-index:500; right:20px; bottom:20px; left:20px; display:flex; justify-content:space-between; align-items:center; pointer-events:none; }
.map-label,.map-toolbar button { padding:9px 12px; border:1px solid #e4e6de; border-radius:4px; color:var(--muted); background:#fffefaee; box-shadow:0 2px 10px #26352c18; font-size:11px; }
.map-toolbar button { pointer-events:auto; color:var(--green); border:0; }
.legend-dot { display:inline-block; width:8px; height:8px; margin-right:6px; border-radius:50%; background:var(--orange); }
.results-panel { padding:58px clamp(25px,4vw,60px); background:var(--paper); }
.results-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; }
h2 { margin:0; font-size:31px; letter-spacing:-.07em; }
.result-status { margin-top:8px; color:var(--green); font-size:11px; font-weight:700; }
.results-meta { display:flex; justify-content:space-between; gap:10px; margin:14px 0 5px; color:var(--muted); font-size:11px; }
.results-meta button { padding:0; border:0; color:var(--green); background:none; font-size:11px; text-decoration:underline; }
.results { max-height:510px; overflow:auto; padding-right:8px; }
.truck-card { padding:19px 0; border-top:1px solid var(--line); animation:card-in .35s ease both; }
.card-topline { display:flex; justify-content:space-between; color:#a2aaa3; font-size:10px; font-weight:700; letter-spacing:.08em; }
.distance { color:var(--orange); letter-spacing:0; }
.truck-card h3 { margin:10px 0 7px; font-size:16px; letter-spacing:-.03em; }
.food-items { display:-webkit-box; margin:0; overflow:hidden; color:var(--muted); font-size:12px; line-height:1.5; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
.card-footer { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:14px; }
.address { overflow:hidden; color:#9aa39c; font-size:11px; text-overflow:ellipsis; white-space:nowrap; }
.truck-card button,.retry-button { border:0; color:var(--green); background:none; font-size:11px; font-weight:700; white-space:nowrap; }
.truck-card button span { color:var(--orange); font-size:16px; }
.empty-state,.loading-state { padding:60px 5px; color:var(--muted); text-align:center; }
.empty-icon { display:grid; place-items:center; width:38px; height:38px; margin:0 auto 15px; border-radius:50%; color:var(--orange); background:#fdf0e9; font-size:22px; }
.empty-state h3 { margin:0 0 7px; color:var(--ink); font-size:15px; }
.empty-state p { margin:0 auto 17px; max-width:240px; font-size:12px; line-height:1.5; }
.loader { display:block; width:25px; height:25px; margin:0 auto 17px; border:2px solid #dce5dc; border-top-color:var(--green); border-radius:50%; animation:spin .8s linear infinite; }
footer { display:flex; justify-content:space-between; gap:20px; padding:24px clamp(24px,6vw,96px); color:var(--muted); background:var(--paper); font-size:11px; }
footer p { margin:0; } footer strong { color:var(--ink); } footer a { color:var(--green); font-weight:700; }
@keyframes spin { to { transform:rotate(360deg); } } @keyframes pulse { 50% { opacity:.35; } }
@keyframes card-in { from { opacity:0; transform:translateY(7px); } to { opacity:1; transform:translateY(0); } }
@media (max-width:900px) { .intro { padding-bottom:60px; } .intro-aside { display:none; } .explorer { grid-template-columns:1fr; width:calc(100% - 40px); } .map-panel,#map { min-height:440px; } .map-panel { border-right:0; border-bottom:1px solid var(--line); } .results-panel { padding:42px 7vw; } .results { max-height:none; display:grid; grid-template-columns:repeat(2,1fr); gap:0 30px; } }
@media (max-width:600px) { .topbar { height:65px; padding:0 20px; } .topbar-meta { display:none; } .intro { padding:62px 24px 52px; } .lead { margin:27px 0 35px; font-size:14px; } .explorer { display:block; width:calc(100% - 28px); margin-bottom:40px; border-radius:6px; } .map-panel,#map { min-height:360px; } .results-panel { padding:38px 24px; } .results { display:block; } footer { flex-direction:column; padding:22px 24px; } }