.demo-page { background: #f4eddd; }
.demo-page .brand-mark { color: #7e3025; background: #e9c477; box-shadow: inset 0 0 0 1px rgba(126,48,37,.2); }
.demo-header nav { display: flex; gap: 22px; }
.demo-header nav a { color: var(--ink); font-size: 13px; text-decoration: none; }
.demo-header nav a:hover { color: var(--red); }
.demo-main { width: min(1180px, calc(100% - 40px)); }
.plan-hero { position: relative; min-height: 560px; padding: 110px 34% 90px 0; border-top: 1px solid var(--line); }
.plan-hero h1 { max-width: 760px; }
.plan-hero > p:not(.eyebrow) { max-width: 620px; color: var(--muted); font-size: 18px; line-height: 1.9; }
.plan-actions { display: flex; flex-wrap: wrap; gap: 24px; align-items: center; }
.plan-actions > a:last-child { color: var(--ink); font-weight: 700; text-underline-offset: 5px; }
.visit-note { margin-top: 42px; padding-left: 18px; border-left: 2px solid var(--green); font-size: 14px !important; }
.people-section, .featured-section, .participation-section { padding: 90px 0; border-top: 1px solid var(--line); }
.people-section .neighborhood-stories { position: relative; inset: auto; height: 650px; margin-top: 20px; transform: none; }
.subsection-heading { display: flex; justify-content: space-between; gap: 40px; align-items: end; margin: 80px 0 25px; }
.subsection-heading h3 { margin: 0; font-family: "STKaiti", "KaiTi", serif; font-size: 38px; }
.subsection-heading > p { max-width: 390px; margin: 0; color: var(--muted); line-height: 1.8; }
.demo-hero { position: relative; min-height: 650px; padding: 95px 50% 80px 0; border-top: 1px solid var(--line); overflow: hidden; }
.demo-hero h1 { margin-bottom: 28px; }
.demo-hero > p:not(.eyebrow) { max-width: 560px; color: var(--muted); font-size: 18px; line-height: 1.9; }
.demo-primary { display: inline-flex; gap: 60px; align-items: center; margin-top: 20px; padding: 16px 20px; border-radius: 999px; color: #fff; background: var(--ink); text-decoration: none; font-weight: 700; }
.demo-primary:hover { background: var(--red); }
.demo-stamp { position: absolute; z-index: 3; right: 1%; bottom: 38px; padding: 15px; border: 2px solid var(--red-dark); border-radius: 50%; color: var(--red-dark); background: #f4eddd; font-size: 11px; line-height: 1.35; text-align: center; transform: rotate(-8deg); }
.demo-stamp strong { font-size: 13px; }
.neighborhood-stories { position: absolute; inset: 35px 0 38px 54%; overflow: hidden; border-radius: 30px 30px 90px 30px; color: #fff9ec; background: #34251c; box-shadow: 18px 18px 0 rgba(226,113,48,.78); transform: rotate(1deg); }
.story-slides, .story-slide { position: absolute; inset: 0; }
.story-slide { visibility: hidden; margin: 0; opacity: 0; transform: translateX(5%); transition: opacity .65s ease, transform .75s ease, visibility .75s; }
.story-slide.is-active { visibility: visible; opacity: 1; transform: translateX(0); z-index: 1; }
.story-slide::after { position: absolute; inset: 0; content: ""; background: linear-gradient(180deg, rgba(25,15,10,.08) 28%, rgba(31,19,12,.9) 100%); pointer-events: none; }
.story-slide img { width: 100%; height: 100%; object-fit: cover; object-position: center; transform: scale(1.015); transition: transform 6.5s ease-out; }
.story-slide.is-active img { transform: scale(1.055); }
.story-slide:nth-child(2) img { object-position: 54% center; }
.story-slide figcaption { position: absolute; z-index: 2; right: 28px; bottom: 86px; left: 28px; display: grid; gap: 7px; max-width: 470px; text-shadow: 0 2px 16px rgba(24,13,8,.4); }
.story-kicker { color: #f2c56e; font-size: 11px; font-weight: 800; letter-spacing: .14em; }
.story-slide figcaption strong { font-family: "STKaiti", "KaiTi", serif; font-size: clamp(25px, 2.3vw, 37px); line-height: 1.14; }
.story-copy { max-width: 430px; font-size: 12px; line-height: 1.65; opacity: .92; }
.story-carousel-bar { position: absolute; z-index: 4; right: 26px; bottom: 24px; left: 28px; display: flex; align-items: center; gap: 14px; }
.story-carousel-actions { display: flex; gap: 7px; }
.story-arrow { display: grid; width: 34px; height: 34px; padding: 0; border: 1px solid rgba(255,249,236,.62); border-radius: 50%; color: #fff9ec; background: rgba(34,20,13,.38); place-items: center; cursor: pointer; }
.story-arrow:hover, .story-arrow:focus-visible { color: #2a1a12; background: #f4c66d; outline: none; }
.story-pagination { display: flex; gap: 7px; align-items: center; }
.story-dot { width: 7px; height: 7px; padding: 0; border: 0; border-radius: 999px; background: rgba(255,249,236,.45); cursor: pointer; transition: width .25s ease, background .25s ease; }
.story-dot.is-active { width: 25px; background: #f4c66d; }
.story-dot:focus-visible { outline: 2px solid #fff9ec; outline-offset: 3px; }
.story-page { margin-left: auto; font-family: Georgia, serif; font-size: 11px; letter-spacing: .08em; }
.story-page strong { color: #f4c66d; font-size: 18px; }
.story-demo-label { position: absolute; z-index: 4; top: 16px; right: 18px; margin: 0; padding: 5px 9px; border-radius: 999px; color: rgba(255,249,236,.9); background: rgba(40,23,14,.56); font-size: 9px; letter-spacing: .05em; backdrop-filter: blur(6px); }
.demo-section-heading { display: flex; justify-content: space-between; gap: 30px; align-items: end; margin-bottom: 42px; }
.demo-section-heading h2, .demo-boundary h2 { margin: 0; font-family: "STKaiti", "KaiTi", serif; font-size: clamp(38px, 5vw, 60px); }
.demo-section-heading > p { max-width: 340px; margin: 0; color: var(--muted); font-size: 14px; line-height: 1.6; text-align: right; }
.featured-grid { display: grid; gap: 30px; }
.featured-card { display: grid; grid-template-columns: minmax(280px, .8fr) minmax(0, 1.2fr); min-height: 490px; overflow: hidden; border: 1px solid var(--ink); background: var(--surface); }
.food-poster { position: relative; min-height: 470px; margin: 0; overflow: hidden; color: #fff5dc; background: #2f2019; font-family: "STKaiti", "KaiTi", serif; text-align: center; }
.food-poster::after { position: absolute; inset: 0; content: ""; background: linear-gradient(180deg, transparent 52%, rgba(31,19,12,.78) 100%); pointer-events: none; }
.food-poster img { width: 100%; height: 100%; min-height: 470px; object-fit: cover; object-position: center; transition: transform .5s ease; }
.featured-card:hover .food-poster img { transform: scale(1.025); }
.food-poster figcaption { position: absolute; z-index: 2; right: 26px; bottom: 22px; left: 26px; display: flex; align-items: end; justify-content: space-between; gap: 20px; }
.food-caption { padding: 4px 10px; color: #fff5dc; background: rgba(153,49,31,.82); font-size: clamp(34px, 4vw, 54px); font-weight: 700; transform: rotate(-2deg); }
.food-poster small { font-family: inherit; font-size: 13px; letter-spacing: .12em; }
.featured-content { display: flex; flex-direction: column; justify-content: center; padding: clamp(30px, 5vw, 70px); }
.shop-meta { display: flex; justify-content: space-between; gap: 20px; padding-bottom: 16px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 12px; }
.featured-content h3 { margin: 28px 0 8px; font-family: "STKaiti", "KaiTi", serif; font-size: clamp(34px, 4vw, 52px); }
.category-line { color: var(--red); font-size: 13px; }
.screening-reason { margin: 18px 0 24px; color: var(--muted); line-height: 1.8; }
.shop-facts { margin: 0; }
.shop-facts div { display: grid; grid-template-columns: 52px 1fr; gap: 10px; padding: 9px 0; border-top: 1px solid var(--line); }
.shop-facts dt { color: var(--muted); font-size: 12px; }
.shop-facts dd { margin: 0; font-size: 13px; line-height: 1.55; }
.map-link { align-self: flex-start; margin-top: 26px; padding-bottom: 5px; border-bottom: 1px solid var(--ink); color: var(--ink); text-decoration: none; font-weight: 700; }
.card-links { display: flex; flex-wrap: wrap; gap: 16px 22px; align-items: center; margin-top: 26px; }
.card-links .map-link { margin-top: 0; }
.story-link { padding: 11px 15px; border-radius: 999px; color: #fffaf0; background: var(--red); text-decoration: none; font-weight: 700; }
.story-link:hover { background: var(--red-dark); }
.backup-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--ink); border-left: 1px solid var(--ink); }
.backup-card { min-height: 300px; padding: 24px; border-right: 1px solid var(--ink); border-bottom: 1px solid var(--ink); background: rgba(255,250,240,.5); }
.backup-number { color: var(--orange); font-family: Georgia, serif; font-size: 14px; }
.backup-location { margin: 42px 0 10px; color: var(--muted); font-size: 12px; }
.backup-card h3 { min-height: 64px; margin-bottom: 10px; font-family: "STKaiti", "KaiTi", serif; font-size: 26px; line-height: 1.2; }
.backup-card > p:not(.backup-location):not(.category-line) { color: var(--muted); font-size: 13px; line-height: 1.7; }
.backup-card a { display: inline-block; margin-top: 12px; color: var(--red-dark); font-size: 13px; }
.participation-section { display: grid; gap: 42px; }
.participation-heading { max-width: 780px; }
.participation-heading h2 { margin: 0; font-family: "STKaiti", "KaiTi", serif; font-size: clamp(40px, 5vw, 62px); }
.participation-heading > p:last-child { max-width: 620px; color: var(--muted); font-size: 16px; line-height: 1.85; }
.participation-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.participation-card { display: grid; min-height: 300px; padding: 34px; border: 1px solid var(--ink); border-radius: 26px; color: var(--ink); background: rgba(255,250,240,.56); text-align: left; cursor: pointer; transition: transform .2s ease, border-color .2s ease, background .2s ease; }
.participation-card:hover, .participation-card:focus-visible, .participation-card.is-selected { border-color: var(--red); background: #fffaf0; outline: none; transform: translateY(-3px); }
.participation-card > span { color: var(--red); font-size: 12px; font-weight: 800; letter-spacing: .12em; }
.participation-card > strong { max-width: 420px; margin-top: 28px; font-family: "STKaiti", "KaiTi", serif; font-size: clamp(28px, 3vw, 40px); line-height: 1.2; }
.participation-card > small { max-width: 460px; margin-top: 18px; color: var(--muted); font-size: 13px; line-height: 1.75; }
.participation-card > b { align-self: end; margin-top: 30px; color: var(--red-dark); font-size: 14px; }
#recommendForm { scroll-margin-top: 24px; display: grid; grid-template-columns: 1fr 1fr; gap: 18px; padding: 34px; border: 1px solid var(--ink); border-radius: 26px; background: #fffaf0; }
#recommendForm[hidden] { display: none; }
.recommend-form-heading { position: relative; grid-column: 1 / -1; padding-right: 80px; }
.recommend-form-heading p { margin: 0 0 8px; color: var(--red); font-size: 11px; font-weight: 800; letter-spacing: .12em; }
.recommend-form-heading h3 { margin: 0 0 16px; font-family: "STKaiti", "KaiTi", serif; font-size: 34px; }
.recommend-form-heading button { position: absolute; top: 0; right: 0; min-height: auto !important; padding: 8px 12px; border: 1px solid var(--line) !important; border-radius: 999px !important; color: var(--muted) !important; background: transparent !important; }
#recommendForm label { display: grid; gap: 8px; color: var(--muted); font-size: 12px; }
#recommendForm label:nth-of-type(2) { grid-column: 1 / -1; }
.story-honeypot { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
#recommendForm input { min-height: 50px; }
#recommendForm > button[type="submit"] { min-height: 50px; border: 0; border-radius: 14px; color: #fff; background: var(--red-dark); font-weight: 800; cursor: pointer; }
.recommend-privacy { align-self: center; margin: 0; color: var(--muted); font-size: 11px; line-height: 1.6; }
#recommendStatus { grid-column: 1 / -1; margin: 0; color: var(--green); font-size: 12px; }
.demo-boundary { display: grid; grid-template-columns: .35fr 1fr 1fr; gap: 40px; align-items: start; padding: 100px 0; border-top: 1px solid var(--line); }
.demo-boundary > p:last-child { color: var(--muted); font-size: 16px; line-height: 1.9; }
.demo-empty { grid-column: 1 / -1; padding: 50px; border: 1px dashed var(--line); text-align: center; }
.demo-empty p { margin: 8px 0 0; color: var(--muted); }
@media (prefers-reduced-motion: reduce) { .story-slide, .story-slide img { transition: none; } }
@media (max-width: 900px) { .plan-hero { padding-right: 10%; } .people-section .neighborhood-stories { height: 500px; } .featured-card { grid-template-columns: 1fr; } .backup-grid { grid-template-columns: repeat(2, 1fr); } .participation-choices { grid-template-columns: 1fr; } .demo-boundary { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .demo-main { width: min(100% - 24px, 1180px); } .demo-header nav a:not(:last-child) { display: none; } .plan-hero { min-height: auto; padding: 58px 0 70px; } .plan-actions { align-items: flex-start; flex-direction: column; } .people-section .neighborhood-stories { height: 430px; border-radius: 24px 24px 62px 24px; box-shadow: 10px 10px 0 rgba(226,113,48,.72); } .story-slide figcaption { right: 20px; bottom: 80px; left: 20px; } .story-copy { font-size: 11px; } .story-carousel-bar { right: 20px; left: 20px; } .demo-section-heading, .subsection-heading { align-items: start; flex-direction: column; } .demo-section-heading > p { text-align: left; } .food-poster { min-height: 300px; } .backup-grid, #recommendForm { grid-template-columns: 1fr; } #recommendForm label:nth-of-type(2), .recommend-form-heading, #recommendStatus { grid-column: auto; } .participation-card { min-height: 260px; padding: 28px; } }