@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display&family=Karla:wght@300;400;500;600;700&display=swap');
:root { --steam:#F3EDE4; --chili:#C43C2B; --steel:#8A8680; --night:#1A1714; --pickle:#7A9A4A; --ink:#211D19; --muted:#706A63; --line:#D9D0C5; }
* { box-sizing:border-box; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--steam); color:var(--ink); font-family:Karla,system-ui,sans-serif; line-height:1.5; }
a { color:inherit; text-decoration:none; }
img { display:block; width:100%; object-fit:cover; }
.site-shell { max-width:1440px; margin:0 auto; padding:0 28px; }
.site-header { border-bottom:1px solid var(--line); background:rgba(243,237,228,.96); position:sticky; top:0; z-index:10; }
.header-row { min-height:86px; display:flex; align-items:center; gap:28px; }
.brand { font-family:'DM Serif Display',Georgia,serif; font-size:2rem; letter-spacing:-.03em; white-space:nowrap; }
.brand small { display:block; font:600 .68rem Karla,sans-serif; letter-spacing:.13em; text-transform:uppercase; color:var(--chili); }
.site-nav { display:flex; gap:20px; font-weight:600; font-size:.95rem; }
.site-nav a:hover, .site-nav a:focus { color:var(--chili); }
.search-form { margin-left:auto; display:flex; min-width:340px; border:1px solid var(--ink); background:#fffaf5; }
.search-form input { flex:1; border:0; padding:11px 13px; background:transparent; font:inherit; min-width:0; }
.search-form button { border:0; background:var(--night); color:#fff; padding:0 15px; font:600 .85rem Karla,sans-serif; cursor:pointer; }
.page-section { padding:72px 0; }
.page-intro { max-width:760px; padding:70px 0 26px; }
.eyebrow { color:var(--chili); font-size:.75rem; letter-spacing:.15em; text-transform:uppercase; font-weight:700; }
h1,h2,h3 { font-family:'DM Serif Display',Georgia,serif; font-weight:400; line-height:1.05; letter-spacing:-.035em; margin:0; }
h1 { font-size:clamp(3rem,7vw,6.4rem); }
h2 { font-size:clamp(2.2rem,4vw,4rem); }
h3 { font-size:1.7rem; }
.lede { color:var(--muted); font-size:1.12rem; max-width:620px; }
.wayfinding { background:var(--night); color:#fff; padding:26px; display:flex; align-items:center; justify-content:space-between; gap:20px; margin-top:28px; }
.wayfinding strong { color:#F4C76B; font-size:1.08rem; }
.filter-row { display:flex; flex-wrap:wrap; gap:10px; margin-top:15px; }
.filter-link { border:1px solid rgba(255,255,255,.35); padding:8px 12px; color:#fff; font-size:.9rem; }
.filter-link:hover { background:var(--chili); border-color:var(--chili); }
.filter-link.active { background:var(--chili); border-color:var(--chili); }
.list-empty { padding:44px 0 10px; color:var(--muted); }
.list-empty .text-link { margin-top:0; margin-left:4px; }
.mosaic { display:grid; grid-template-columns:1.3fr .85fr .85fr; grid-auto-rows:230px; gap:14px; margin-top:32px; }
.mosaic-card { position:relative; overflow:hidden; background:var(--steel); min-height:220px; }
.mosaic-card.featured { grid-row:span 2; }
.mosaic-card.tall { grid-row:span 2; }
.mosaic-card img { height:100%; transition:transform .35s ease; }
.mosaic-card:hover img { transform:scale(1.04); }
.mosaic-card::after { content:''; position:absolute; inset:35% 0 0; background:linear-gradient(transparent,rgba(0,0,0,.75)); }
.mosaic-copy { position:absolute; left:20px; right:20px; bottom:18px; color:#fff; z-index:1; }
.mosaic-copy h3 { font-size:clamp(1.3rem,2.6vw,2.4rem); }
.mosaic-copy p { margin:.35rem 0 0; font-size:.9rem; opacity:.88; }
.event-grid, .venue-grid, .neighborhood-grid, .guide-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:28px; }
.card { background:#fffaf5; border:1px solid var(--line); overflow:hidden; }
.card img { aspect-ratio:1.45; }
.card-body { padding:20px; }
.card-meta { color:var(--chili); font-size:.78rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }
.card h3 { margin:.5rem 0 .45rem; }
.card p { color:var(--muted); margin:.2rem 0 0; }
.text-link { color:var(--chili); font-weight:700; display:inline-block; margin-top:16px; }
.text-link:hover { text-decoration:underline; }
.split { display:grid; grid-template-columns:1.1fr .9fr; gap:48px; align-items:start; }
.detail-cover { max-height:620px; }
.detail-body { font-size:1.12rem; color:#4e4942; }
.detail-body p { margin:0 0 1em; }
.list-stack { display:grid; gap:0; margin-top:30px; border-top:1px solid var(--line); }
.list-row { display:grid; grid-template-columns:150px 1fr auto; gap:20px; align-items:center; padding:18px 0; border-bottom:1px solid var(--line); }
.list-row img { width:150px; height:100px; }
.list-row h3 { font-size:1.65rem; }
.list-row .date { color:var(--chili); font-weight:700; font-size:.92rem; }
.site-footer { margin-top:60px; background:var(--night); color:#fff; }
.footer-row { padding:38px 0; display:flex; justify-content:space-between; gap:30px; align-items:end; }
.footer-row p { color:#c8c0b6; margin:.4rem 0 0; }
.footer-links { display:flex; gap:18px; color:#f4c76b; font-weight:600; }
@media (max-width:900px) { .header-row { flex-wrap:wrap; padding:16px 0; gap:14px; } .search-form { order:3; width:100%; margin-left:0; } .mosaic { grid-template-columns:1fr 1fr; } .mosaic-card.featured { grid-column:span 2; grid-row:span 2; } .event-grid,.venue-grid,.neighborhood-grid,.guide-grid { grid-template-columns:repeat(2,1fr); } .split { grid-template-columns:1fr; } }
@media (max-width:600px) { .site-shell { padding:0 18px; } .site-nav { gap:12px; font-size:.85rem; } .brand { font-size:1.7rem; } .page-section { padding:50px 0; } .mosaic,.event-grid,.venue-grid,.neighborhood-grid,.guide-grid { grid-template-columns:1fr; } .mosaic-card.featured { grid-column:auto; } .list-row { grid-template-columns:92px 1fr; } .list-row img { width:92px; height:78px; } .list-row .date { grid-column:2; } .footer-row { display:block; } .footer-links { margin-top:22px; flex-wrap:wrap; } }