/* Downtown Harvest Days — the printed poster's family: brown ground, pill panels in
 * orange / gold / olive / cream, heavy caps, mono small type, no shadows.
 *
 * The poster's palette is the site's (the banner ground is --sand-900, its gold
 * --gold-400), so the --hd-* names point at site tokens and the banner sits on the
 * hero without a seam. Two literals: --hd-orange-700 for orange type on the light
 * page ground, --hd-ink the one brown that clears AA on the orange panel. */
:root{--hd-brown:var(--sand-900);--hd-orange:#EA632E;--hd-orange-700:#c44a1c;--hd-gold:var(--gold-400);--hd-olive:var(--olive-700);--hd-cream:var(--sand-200);--hd-ink:#2a1a16}
/* The darker orange that clears AA on the light ground falls to 3.2:1 on the dark card; the poster orange is 4.6:1 there. */
[data-mode="dark"]{--hd-orange-700:var(--hd-orange)}

/* ---------- headings ---------- */
.hd-h2{margin:0;font:900 clamp(28px,4vw,48px)/.95 var(--font-display);letter-spacing:-.02em;text-transform:uppercase;color:var(--ink)}
.hd-h3{margin:0 0 14px;font:900 clamp(20px,2.6vw,28px)/1 var(--font-display);letter-spacing:-.01em;text-transform:uppercase;color:var(--ink)}
.hd-dot{color:var(--hd-orange)}
.hd-tagline{margin:10px 0 0;font:700 12px/1.5 var(--font-mono);letter-spacing:.14em;text-transform:uppercase}

/* ---------- hero: the banner and the headline; a drawn fallback gets the date stamp hung off its edge ---------- */
.hd-hero{background:var(--hd-brown);color:var(--hd-cream);--hd-badge:clamp(120px,15vw,200px);--hd-hang:clamp(8px,1vw,12px)}
.hd-hero__in{padding-block:clamp(22px,4vw,44px) clamp(44px,6vw,72px)}
.hd-hero__art{position:relative}
.hd-banner{width:100%;height:auto;border-radius:28px}
.hd-trio{display:flex;align-items:flex-end;justify-content:center;gap:5%;padding:clamp(20px,4vw,48px) 0 0}
.hd-trio img{height:clamp(110px,22vw,300px);width:auto}
.hd-trio img:nth-child(2){height:clamp(150px,30vw,400px)}
.hd-badge{position:absolute;left:20%;bottom:calc(var(--hd-hang) - var(--hd-badge));display:flex;flex-wrap:wrap;align-content:center;justify-content:center;column-gap:.3em;width:var(--hd-badge);aspect-ratio:1;padding:calc(var(--hd-badge) * .14);border-radius:50%;background:var(--hd-cream);color:var(--hd-brown);text-align:center;font:900 clamp(15px,2vw,25px)/1.1 var(--font-display);letter-spacing:-.01em;text-transform:uppercase;transform:rotate(-8deg)}
.hd-badge span{white-space:nowrap}
.hd-hero__tx{padding-top:clamp(18px,2.6vw,28px)}
.hd-hero--badge .hd-hero__tx{margin-left:calc(20% + var(--hd-badge) + clamp(24px,3vw,40px))}
.hd-kicker{display:block;margin-bottom:10px;font:700 11px/1.4 var(--font-mono);letter-spacing:.22em;text-transform:uppercase;color:var(--hd-gold)}
.hd-title{margin:0;font:900 clamp(36px,6vw,72px)/.9 var(--font-display);letter-spacing:-.025em;text-transform:uppercase;color:var(--hd-cream);text-wrap:balance}
.hd-lede{max-width:62ch;margin:18px 0 0;font:400 12px/1.95 var(--font-mono);color:var(--sand-300)}

/* ---------- intro: a cream copy panel on the same brown, so hero, intro and experiences read as one poster ---------- */
.hd-intro-sec{background:var(--hd-brown);padding-bottom:clamp(8px,1.5vw,16px)}
.hd-intro{max-width:calc(72ch + 2 * clamp(24px,4vw,48px));margin-inline:auto;padding:clamp(24px,4vw,48px);border-radius:28px;background:var(--hd-cream);color:var(--hd-brown);font:400 13px/2 var(--font-mono)}
.hd-intro .art{max-width:none;padding-top:0}
.hd-intro .art p{font-size:13px;line-height:2}
.hd-intro .art p:last-child{margin-bottom:0}

/* ---------- experiences: four panels on the brown ground, art on a brown plate ---------- */
.hd-exp{padding-block:clamp(40px,6vw,64px) clamp(48px,7vw,80px);background:var(--hd-brown);color:var(--hd-cream)}
.hd-exp .hd-h2{color:var(--hd-cream)}
.hd-panel{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(18px,3vw,36px);margin-top:clamp(18px,2.6vw,28px);padding:clamp(14px,2vw,22px);border-radius:28px;background:var(--hd-bg);color:var(--hd-fg)}
.hd-panel--flip{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}
.hd-panel--flip .hd-panel__art{order:2}
.hd-panel:not(:has(.hd-panel__art)){grid-template-columns:1fr}
/* The panel's accent colours the text side only: the apple is orange and the scarecrow's hat gold. */
.hd-panel__art{display:flex;align-items:center;justify-content:center;min-height:240px;padding:clamp(24px,4vw,48px);border-radius:20px;background:var(--hd-brown)}
.hd-panel__art img{max-width:100%;max-height:clamp(220px,36vw,460px);width:auto;height:auto}
.hd-panel__tx{padding:clamp(8px,2vw,24px) clamp(6px,2vw,24px)}
.hd-panel__tx h3{margin:0;font:900 clamp(28px,3.8vw,44px)/.95 var(--font-display);letter-spacing:-.02em;text-transform:uppercase;color:inherit}
.hd-partnerline{margin:6px 0 0;font:400 10.5px/1.6 var(--font-mono)}
.hd-panel .art{padding-top:14px}
.hd-panel .art p:last-child{margin-bottom:0}
.hd-panel .art h3{color:inherit}
/* The site's red link is unreadable on orange and olive; prose links take the panel's ink and an underline. */
.hd-panel .art a,.hd-panel .art a:hover{color:inherit;text-decoration:underline}
.hd-panel .pull{background:var(--hd-brown);color:var(--hd-cream)}
.hd-list{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:6px 20px}
.hd-list li{position:relative;padding-left:16px;font:400 11px/1.7 var(--font-mono)}
.hd-list li::before{content:"";position:absolute;left:0;top:8px;width:7px;height:7px;border-radius:50%;background:currentColor}
.hd-cta{display:inline-flex;align-items:center;margin-top:22px;padding:14px 24px;border-radius:999px;background:var(--hd-cta-bg);color:var(--hd-cta-fg);font:700 11px/1 var(--font-mono);letter-spacing:.14em;text-transform:uppercase}
.hd-cta:hover{background:var(--hd-cta-hover-bg);color:var(--hd-cta-hover-fg)}
.hd-panel--orange{--hd-bg:var(--hd-orange);--hd-fg:var(--hd-ink);--hd-cta-bg:var(--hd-cream);--hd-cta-fg:var(--hd-brown);--hd-cta-hover-bg:var(--hd-gold);--hd-cta-hover-fg:var(--hd-brown)}
.hd-panel--gold{--hd-bg:var(--hd-gold);--hd-fg:var(--hd-brown);--hd-cta-bg:var(--hd-brown);--hd-cta-fg:var(--hd-gold);--hd-cta-hover-bg:var(--hd-cream);--hd-cta-hover-fg:var(--hd-brown)}
.hd-panel--olive{--hd-bg:var(--hd-olive);--hd-fg:var(--hd-cream);--hd-cta-bg:var(--hd-cream);--hd-cta-fg:var(--hd-brown);--hd-cta-hover-bg:var(--hd-gold);--hd-cta-hover-fg:var(--hd-brown)}
.hd-panel--cream{--hd-bg:var(--hd-cream);--hd-fg:var(--hd-brown);--hd-cta-bg:var(--hd-brown);--hd-cta-fg:var(--hd-cream);--hd-cta-hover-bg:var(--hd-orange);--hd-cta-hover-fg:var(--hd-ink)}

/* ---------- weekend calendar: one card per day, the numeral first ---------- */
.hd-cal .hd-tagline{color:var(--kick)}
.hd-cal__lede{max-width:62ch;margin:10px 0 0;font:400 12px/1.9 var(--font-mono);color:var(--body)}
.hd-days{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:14px}
.hd-day{display:grid;grid-template-columns:clamp(84px,12vw,140px) 1fr;gap:clamp(14px,3vw,32px);padding:clamp(18px,3vw,30px);border-radius:24px;background:var(--card);color:var(--body)}
.hd-day:hover{color:var(--body)}
.hd-day--past{opacity:.8}
.hd-day__date{display:flex;flex-direction:column;gap:6px}
.hd-day__date b{font:900 clamp(44px,6vw,72px)/1 var(--font-display);letter-spacing:-.03em;color:var(--hd-orange-700)}
.hd-day__date span{font:700 10px/1.4 var(--font-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--body)}
.hd-day__tx{display:flex;flex-direction:column;gap:8px;min-width:0}
.hd-day__title{font:900 clamp(20px,2.6vw,28px)/1.05 var(--font-display);letter-spacing:-.01em;text-transform:uppercase;color:var(--ink)}
.hd-day:hover .hd-day__title{color:var(--hd-orange-700)}
.hd-day__meta{font:700 10.5px/1.5 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--body)}
.hd-day__ex{max-width:64ch;font:400 12px/1.8 var(--font-mono)}
.hd-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.hd-chips i{padding:6px 11px;border-radius:999px;border:1.5px solid var(--line);font:700 10px/1.3 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;font-style:normal;color:var(--ink)}
.hd-also{margin-top:28px;padding:22px 26px;border-radius:24px;border:1.5px solid var(--line)}
.hd-also h3{margin:0 0 8px;font:900 18px/1.1 var(--font-display);text-transform:uppercase;color:var(--ink)}
.hd-also p{margin:0;font:400 12px/1.8 var(--font-mono);color:var(--body)}
.hd-also p+p{margin-top:8px}
.hd-also b{color:var(--ink)}

/* ---------- plan your visit: a gold panel ---------- */
.hd-plan__card{margin-top:22px;padding:clamp(26px,4vw,48px);border-radius:28px;background:var(--hd-gold);color:var(--hd-brown)}
.hd-plan__card h3{margin:0;font:900 clamp(26px,3.6vw,40px)/.95 var(--font-display);letter-spacing:-.02em;text-transform:uppercase;color:inherit}
.hd-plan__card p{max-width:68ch;margin:14px 0 0;font:400 12px/1.9 var(--font-mono)}
.hd-plan__card .hd-facts{font:700 11px/1.7 var(--font-mono);letter-spacing:.14em;text-transform:uppercase}
.hd-buttons{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
/* The site's button variants, recoloured for the gold ground. */
.hd-plan__card .btn-red{background:var(--hd-brown);color:var(--hd-cream)}
.hd-plan__card .btn-navy,.hd-plan__card .btn-sand{background:var(--hd-cream);color:var(--hd-brown)}
.hd-plan__card .btn-ghost{border:1.5px solid var(--hd-brown);color:var(--hd-brown)}
.hd-plan__card .pill:hover{background:var(--hd-cream);color:var(--hd-brown)}
.hd-plan__card .btn-navy:hover,.hd-plan__card .btn-sand:hover{background:var(--hd-brown);color:var(--hd-cream)}
[data-mode="dark"] .hd-plan__card{background:var(--card);color:var(--ink)}
[data-mode="dark"] .hd-plan__card p{color:var(--body)}
[data-mode="dark"] .hd-plan__card .btn-red{background:var(--hd-gold);color:var(--hd-brown)}
[data-mode="dark"] .hd-plan__card .btn-navy,[data-mode="dark"] .hd-plan__card .btn-sand{background:var(--sand-200);color:var(--navy-800)}
[data-mode="dark"] .hd-plan__card .btn-ghost{border-color:var(--sand-200);color:var(--sand-200)}
[data-mode="dark"] .hd-plan__card .pill:hover{background:var(--hd-gold);color:var(--hd-brown)}

/* ---------- getting downtown ---------- */
.hd-getting p{max-width:68ch;margin:0;font:400 12px/1.9 var(--font-mono);color:var(--body)}
.hd-link{display:inline-block;margin-top:12px;font:700 11px/1.5 var(--font-mono);letter-spacing:.14em;text-transform:uppercase}

/* ---------- partners: cream tiles ---------- */
.hd-partners__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
.hd-partner{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:150px;padding:26px 22px;border-radius:24px;background:var(--hd-cream);color:var(--hd-brown);text-align:center}
.hd-partner b{font:900 clamp(18px,2vw,22px)/1.05 var(--font-display);letter-spacing:-.01em;text-transform:uppercase}
.hd-partner span{font:700 10px/1.5 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--sand-700)}
.hd-partner__logo{max-width:200px;max-height:64px;width:auto}
a.hd-partner:hover{background:var(--hd-gold);color:var(--hd-brown)}
[data-mode="dark"] .hd-partner{background:var(--card);color:var(--ink)}
[data-mode="dark"] .hd-partner span{color:var(--mut)}

/* ---------- focus: the site's gold ring vanishes on gold and cream, so the warm panels take a brown one ---------- */
.hd-panel--gold :focus-visible,.hd-panel--cream :focus-visible,.hd-panel--orange :focus-visible,.hd-plan__card :focus-visible,.hd-intro :focus-visible,a.hd-partner:focus-visible{outline-color:var(--hd-brown)}
.hd-day:focus-visible{outline-color:var(--hd-orange-700)}
[data-mode="dark"] .hd-plan__card :focus-visible,[data-mode="dark"] .hd-intro :focus-visible,[data-mode="dark"] a.hd-partner:focus-visible{outline-color:var(--gold-400)}

@media (min-width:601px){
 .hd-list{grid-template-columns:1fr 1fr}
}
/* Panels stack at 1000px, not 760: between the two a side column is too narrow for the two-column list. */
@media (max-width:1000px){
 .hd-panel,.hd-panel--flip{grid-template-columns:1fr}
 .hd-panel--flip .hd-panel__art{order:0}
 .hd-panel__art{min-height:0;padding:clamp(22px,4vw,36px)}
 .hd-panel__art img{max-width:min(60%,300px);max-height:300px}
}
@media (max-width:760px){
 .hd-hero--badge .hd-hero__tx{margin-left:0;padding-top:calc(var(--hd-badge) - var(--hd-hang) + 18px)}
 .hd-panel__art img{max-width:260px;max-height:260px}
 .hd-day{grid-template-columns:64px 1fr;gap:14px}
}