/* Fall Flavor Trail — Downtown Harvest Days.
 *
 * The campaign art turns out to use the Downtown Ventura palette almost exactly
 * (#482E29 = sand-900, #677437 = olive-600, #D7A52F ≈ gold-400, #E0CCAB = sand-300),
 * so only the poster's orange is new. Everything else maps to existing tokens.
 */
:root{--h-orange:#EA632E;--h-orange-700:#C44A1C}

/* ---------- hero ---------- */
.ft-hero{position:relative;background:var(--sand-900);color:var(--sand-300);overflow:hidden}
.ft-hero-in{display:grid;grid-template-columns:1.35fr .65fr;gap:30px;align-items:center;padding-block:clamp(34px,6vw,64px)}
.ft-kicker{display:block;font:700 10px/1.4 var(--font-mono);letter-spacing:.22em;color:var(--olive-300)}
.ft-title{margin:12px 0 0;font:900 clamp(40px,8vw,92px)/0.88 var(--font-display);letter-spacing:-.025em;text-transform:uppercase;color:var(--sand-300)}
.ft-title::after{content:"";display:block;width:clamp(90px,18vw,190px);height:7px;margin-top:14px;background:var(--h-orange)}
.ft-when{margin:16px 0 0;font:700 12px/1.5 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--gold-400)}
.ft-when i{font-style:normal;color:var(--olive-300)}
.ft-lede{max-width:62ch;margin:14px 0 0;font:400 12px/1.95 var(--font-mono);color:var(--sand-200)}
.ft-cta{display:inline-flex;align-items:center;gap:9px;margin-top:24px;padding:14px 24px;border-radius:999px;background:var(--h-orange);color:var(--sand-50);font:700 11px/1 var(--font-mono);letter-spacing:.14em;text-transform:uppercase}
.ft-cta:hover{background:var(--gold-400);color:var(--sand-900)}
.ft-cta--light{background:var(--sand-300);color:var(--sand-900)}
.ft-cta--light:hover{background:var(--h-orange);color:var(--sand-50)}

/* the poster's date stamp */
.ft-hero-art{display:flex;justify-content:center}
.ft-stamp{display:flex;flex-direction:column;align-items:center;justify-content:center;width:clamp(150px,20vw,210px);aspect-ratio:1;border-radius:50%;background:var(--h-orange);color:var(--sand-50);text-align:center;transform:rotate(-8deg)}
.ft-stamp b{font:700 12px/1 var(--font-mono);letter-spacing:.2em;text-transform:uppercase}
.ft-stamp i{font:900 clamp(26px,3.4vw,38px)/1.1 var(--font-display);font-style:normal}
.ft-stamp em{font:700 11px/1.4 var(--font-mono);font-style:normal;letter-spacing:.2em}
.ft-trailline{height:14px;background:repeating-linear-gradient(90deg,var(--sand-300) 0 26px,transparent 26px 46px)}

/* ---------- headings ---------- */
.ft-h2{font:900 clamp(26px,3.6vw,40px)/0.98 var(--font-display);letter-spacing:-.02em;text-transform:uppercase;color:var(--ink);margin:0 0 20px}
.ft-dot{color:var(--h-orange)}

/* ---------- how it works ---------- */
.ft-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.ft-step{position:relative;display:flex;flex-direction:column;gap:8px;padding:26px 22px 24px;background:var(--card);border:1px solid var(--card-line);border-top:5px solid var(--line)}
.ft-step span.ft-step-n{position:absolute;top:2px;right:14px;font:900 clamp(52px,6.5vw,78px)/1 var(--font-display);opacity:.2}
.ft-step b{font:800 clamp(16px,2vw,19px)/1.2 var(--font-display);text-transform:uppercase;color:var(--ink)}
.ft-step span{font:400 11px/1.8 var(--font-mono);color:var(--body)}
.ft-step--olive{border-top-color:var(--olive-600)}
.ft-step--olive span.ft-step-n{color:var(--olive-600)}
.ft-step--orange{border-top-color:var(--h-orange)}
.ft-step--orange span.ft-step-n{color:var(--h-orange)}
.ft-step--gold{border-top-color:var(--gold-400)}
.ft-step--gold span.ft-step-n{color:var(--gold-400)}
.ft-steps-note{margin:18px 0 0;font:500 11px/1.8 var(--font-mono);color:var(--mut)}

/* ---------- notice ---------- */
.ft-notice{display:flex;flex-direction:column;gap:5px;padding:18px 22px;margin-bottom:22px;background:var(--gold-100);border-left:5px solid var(--gold-400);color:var(--sand-900)}
[data-mode="dark"] .ft-notice{background:var(--olive-900);border-left-color:var(--gold-400);color:var(--sand-200)}
.ft-notice b{font:800 15px/1.3 var(--font-display);text-transform:uppercase}
.ft-notice span{font:400 11px/1.8 var(--font-mono)}

/* ---------- category nav ---------- */
.ft-jump{position:sticky;top:0;z-index:20;display:flex;gap:10px;flex-wrap:wrap;padding:12px 0;margin-bottom:8px;background:var(--pg)}
.ft-chip{display:inline-flex;align-items:center;gap:9px;padding:10px 16px;border-radius:999px;border:1.5px solid var(--line);font:700 10.5px/1 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink)}
.ft-chip i{font-style:normal;opacity:.6}
.ft-chip-ico{display:flex;width:15px;height:15px}
.ft-chip-ico svg{width:100%;height:100%;fill:currentColor}
.ft-chip--orange:hover,.ft-chip--orange.on{background:var(--h-orange);border-color:var(--h-orange);color:var(--sand-50)}
.ft-chip--olive:hover,.ft-chip--olive.on{background:var(--olive-600);border-color:var(--olive-600);color:var(--sand-50)}
.ft-chip--gold:hover,.ft-chip--gold.on{background:var(--gold-400);border-color:var(--gold-400);color:var(--sand-900)}

/* ---------- category blocks ---------- */
.ft-cat{scroll-margin-top:80px;margin-top:34px}
.ft-cat-head{display:flex;align-items:center;gap:16px;padding:18px 22px;color:var(--sand-50)}
.ft-cat-head h3{margin:0;color:inherit;font:900 clamp(19px,2.6vw,26px)/1 var(--font-display);text-transform:uppercase;letter-spacing:-.01em}
.ft-cat-head>div>span{display:block;margin-top:4px;font:400 10.5px/1.6 var(--font-mono);opacity:.85}
.ft-cat-ico{display:flex;width:30px;height:30px;flex:none}
.ft-cat-ico svg{width:100%;height:100%;fill:currentColor}
.ft-cat-n{margin-left:auto;font:700 10px/1.4 var(--font-mono);letter-spacing:.14em;white-space:nowrap;opacity:.9}
.ft-cat-head--orange{background:var(--h-orange)}
.ft-cat-head--olive{background:var(--olive-600)}
.ft-cat-head--gold{background:var(--gold-400);color:var(--sand-900)}

/* ---------- stop cards ---------- */
.stops{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:18px}
.stop{display:flex;flex-direction:column;gap:9px;padding:20px 20px 18px;background:var(--card);border:1px solid var(--card-line)}
.stop--pending{border-style:dashed;background:transparent}
.stop-head h3{margin:0;font:800 clamp(16px,1.9vw,19px)/1.2 var(--font-display);text-transform:uppercase;color:var(--ink)}
.stop-head h3 a{color:inherit}
.stop-head h3 a:hover{color:var(--h-orange)}
.stop-addr{display:block;margin-top:5px;font:400 9.5px/1.5 var(--font-mono);letter-spacing:.06em;color:var(--mut)}
.stop-offer{margin:0;font:700 12px/1.6 var(--font-mono);color:var(--olive-600)}
[data-mode="dark"] .stop-offer{color:var(--olive-300)}
.stop-offer--pending{color:var(--mut);font-weight:500;font-style:italic}
.stop-desc{margin:0;font:400 11px/1.8 var(--font-mono);color:var(--body)}
.stop-items{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:7px}
.stop-items li{position:relative;padding-left:16px;font:400 10.5px/1.7 var(--font-mono);color:var(--body)}
.stop-items li::before{content:"";position:absolute;left:0;top:8px;width:7px;height:7px;border-radius:50%;background:var(--h-orange)}
.stop-note{margin:0;font:400 10px/1.6 var(--font-mono);font-style:italic;color:var(--mut)}
.stop-foot{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:auto;padding-top:12px}
.tag--when{border-color:var(--olive-600);color:var(--olive-600)}
[data-mode="dark"] .tag--when{border-color:var(--olive-300);color:var(--olive-300)}
.tag--mention{border-color:var(--gold-400);color:var(--sand-700)}
[data-mode="dark"] .tag--mention{color:var(--gold-300)}
.stop-link{font:600 9.5px/1.4 var(--font-mono);letter-spacing:.08em;color:var(--link)}
.stop-link:hover{color:var(--hot)}

/* ---------- harvest days ---------- */
.ft-harvest{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:clamp(26px,4vw,44px);background:var(--sand-900);color:var(--sand-300)}
.ft-harvest h2{margin:0;font:900 clamp(24px,3.4vw,38px)/1 var(--font-display);text-transform:uppercase;letter-spacing:-.02em;color:var(--gold-400)}
.ft-harvest p{max-width:68ch;margin:0;font:400 11.5px/1.9 var(--font-mono);color:var(--sand-200)}

@media (max-width:1000px){
 .ft-hero-in{grid-template-columns:1fr}
 .ft-hero-art{justify-content:flex-start;margin-top:6px}
 .ft-steps{grid-template-columns:1fr}
 .stops{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
 .stops{grid-template-columns:1fr}
 .ft-jump{gap:7px;padding:10px 0;overflow-x:auto;flex-wrap:nowrap}
 .ft-chip{white-space:nowrap}
 .ft-cat-head{flex-wrap:wrap;gap:10px}
 .ft-cat-n{margin-left:0;width:100%}
}