/* T213 editorial layout. Outfit remains reserved for the T212 wordmark. */
:root {
  --font-display: Georgia, 'Times New Roman', serif;
  --radius-card: 14px;
  --radius-band: 18px;
  --shadow-card: 0 1px 3px rgb(29 44 76 / 6%);
  --shadow-lift: 0 3px 10px rgb(29 44 76 / 10%);
  --village-section-space: clamp(40px, 5.5vw, 80px);
}
.hero-site-title, .footer-brand, .brand { font-family: 'Outfit', sans-serif; }
h1, h2, h3 { text-wrap: balance; }
h1 { letter-spacing: -.025em; }
.section { padding-block: var(--village-section-space); }
.section--tight { padding-block: clamp(32px, 4vw, 64px); }
p { text-wrap: pretty; }
.lede, .hero-copy > p, .section-head p { max-width: 70ch; }
.prose { max-width: 75ch; }
.header-cta { background: transparent; color: var(--navy); box-shadow: none; border-color: var(--line); }
.village-art, seasonal-artwork { display: block; width: 100%; margin: 0; }
.village-art img, seasonal-artwork img { display: block; width: 100%; height: auto; object-fit: contain; }
seasonal-artwork { aspect-ratio: var(--art-ratio); }
.village-art--divider { margin: 24px auto; max-width: 760px; }
.village-art--accent { max-width: 260px; margin: 16px 0 0; }
.village-art--footer { max-width: var(--container); margin: 0 auto; }
.village-art--footer img { max-height: 210px; object-fit: contain; }
.page-hero-grid { grid-template-columns: 1fr; gap: 20px; }
.page-hero-grid > :first-child { max-width: 75ch; }
.page-visual { width: 100%; max-width: 100%; justify-self: stretch; }
.page-visual img { width: 100%; max-width: none; }
.page-visual .village-art { max-width: 440px; margin-inline: auto; }
.page-visual .village-art--square { max-width: 350px; }
.page-visual .village-art--map { max-width: 540px; }
.page-hero { padding-block: 40px 24px; }
/* T226 (Hickok): the Village Hall subheader stays on one line on phones. Below ~441px the size follows the viewport so the sentence fits without clipping; wider screens keep the normal lede size. */
body[data-village-page='village-hall'] .page-hero .lede { white-space: nowrap; text-wrap: nowrap; letter-spacing: -0.02em; font-size: min(1.2rem, calc((100vw - 40px) / 19.9)); }
.hero-grid { grid-template-columns: 1fr; gap: 0; }
.hero-copy { max-width: none; }
.hero-copy .lede { max-width: 70ch; }
/* T223 (Hickok): the fall panorama leads the home page, directly under the header and above the site title. */
.hero { padding-block: 12px 0; }
.hero-art { width: 100%; max-width: none; margin: 0; }
.hero-art img { width: 100%; }
.hero-site-title { font-size: clamp(2.4rem, 5.2vw, 4.5rem); }
.hero-meta { margin-top: 20px; }
.hero-art .village-art { margin-top: 0; }
.task-shortcuts { position: relative; }
.task-shortcuts-q { font: 700 clamp(1.7rem, 3vw, 2.25rem)/1.2 var(--font-display); }
/* T231 (Hickok): every white box is the same size. grid-auto-rows: 1fr keeps every row equal, and the labels are sized (0.95rem, 16px side padding) so all nine sit on one line across the full-width 3x3 grid from about 1120px up and in the single column on 390px phones; where a label still has to wrap (narrow tablets, 375px-and-under phones), it wraps evenly and the boxes stay equal. */
.task-shortcuts ul { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 12px; }
.task-shortcuts a { min-height: 64px; padding: 14px 16px; border: 1px solid var(--line); border-left: 4px solid var(--gold); border-radius: var(--radius-card); background: var(--white); align-items: center; font-size: 0.95rem; line-height: 1.5; text-wrap: balance; }
/* T231 (Hickok): the crossroads scene sits above "What do you need today?" on every screen (no left column beside the boxes on desktop) and stays substantial per T226: full content width on phones, centered and capped at 640px on larger screens. */
.home-decision { display: block; }
.quick-path-art { width: 100%; max-width: 640px; margin: 0 auto 24px; }
.home-doors-heading { margin-bottom: 24px; }
.home-story .band { box-shadow: none; }
.home-story .page-visual { align-self: center; }
.home-story .band--navy { background: var(--mist-soft); color: var(--navy); }
.home-story .band--navy p, .home-story .band--navy h2 { color: var(--navy); }
.home-story .band-grid { align-items: center; }
/* T232 (Hickok): the two "Explore the village" gateways (Village Businesses, Wall of Hope) are boxed white cards like the rest of the site (.card's line border, radius, soft shadow, and padding on a white surface) instead of borderless blocks with only a bottom rule, so they read as two distinct cards on the cream section. The flex column keeps both boxes the same height in the desktop row with the "Meet the businesses" / "Visit the hope wall" links aligned along the bottom. Art, titles, blurbs, and links are unchanged. Popular guides uses the shared card style below per T236. */
.home-gateways .card { display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-card); box-shadow: var(--shadow-card); }
.home-gateways .card .more-link { margin-top: auto; padding-top: 0.75rem; align-self: flex-start; }
.home-gateways .village-art { margin-bottom: 20px; }
.home-popular { display: block; max-width: 75ch; }
/* T236 (Hickok): Popular guides inherits the shared .card surface, border, radius, padding, and shadow. */
.community-card { box-shadow: none; align-items: start; }
.community-card-icon { background: transparent; border: 0; border-radius: 0; width: 80px; height: auto; }
.community-card:nth-child(2n) .community-card-icon { background: transparent; }
.community-card-icon img { width: 80px; height: auto; }
.icon-tile { box-shadow: none; background: transparent; border-width: 0 0 1px; border-radius: 0; }
/* T226 (Hickok): the support-group welcome tiles are white cards like About's "What you'll find here"; their h2.h3 titles keep h3 sizing inside a card. */
.card h2.h3 { font-size: 1.22rem; line-height: 1.3; margin: 0 0 0.4em; }
.guide-at-glance { border-left: 4px solid var(--gold); box-shadow: none; }
.guide-section { scroll-margin-top: calc(var(--osv-header-h) + 24px); }
.guide-art-break { margin-block: 24px; }
.page-toc { max-width: 75ch; }
.village-contribution h3 { font-size: 2.5rem; }
body[data-village-page='crisis'] *, body[data-village-page='crisis'] { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
@media (max-width: 767px) {
  .hero { padding-top: 8px; }
  .hero-meta { display: grid; gap: 8px; }
  .hero-site-title { font-size: clamp(2rem, 8.3vw, 3.1rem); }
  .hero-art { margin-top: 0; }
  .page-hero-grid, .page-hero--start-here .page-hero-grid { grid-template-columns: 1fr; }
  .page-hero--start-here .page-visual { display: block; }
  .page-visual .village-art--square { max-width: 260px; }
  .task-shortcuts ul { grid-template-columns: 1fr; }
  .task-shortcuts a { min-height: 56px; }
  .village-art--divider { margin-block: 16px; }
  .community-card-icon { width: 64px; }
  .community-card-icon img { width: 64px; }
  .community-card p, .community-card-copy { min-width: 0; }
  .village-art--footer img { max-height: none; }
}
@media (forced-colors: active) {
  .task-shortcuts a, .card, .btn { border: 1px solid ButtonText; }
  :focus-visible { outline: 3px solid Highlight; }
}
@media print {
  .village-art, seasonal-artwork, .community-card-icon { display: none; }
}
.page-visual { order: 0; }
.page-visual img { aspect-ratio: auto; }
.community-card-icon { aspect-ratio: auto; flex-basis: auto; }
.hub-hero-art { background: transparent; border: 0; }
.hub-hero-art .village-art { width: 100%; }
.review-icon .lucide { display: inline-block; vertical-align: -.15em; }
.home-story .band--navy .card p, .home-story .band--navy .card strong { color: var(--navy) !important; }
.guide-content p, .guide-content li { max-width: 75ch; }
#events-preview .event-tags .pill ~ .pill { display: none; }
.home-story .band--navy .eyebrow { color: var(--gold-dark); }
.mc-day.mc-other { opacity: 1; background: var(--cream); }
.mc-day.mc-other .mc-num { color: var(--muted); }
.hero-copy { padding-top: clamp(20px, 2.5vw, 32px); padding-bottom: 20px; }

/* Approved pack owns its sidecar dimensions, including the Start Here hero. */
.pack-hero-grid,
.page-hero--start-here .pack-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(350px, 400px);
  align-items: center;
  gap: 28px;
  max-width: var(--container);
}
.pack-hero-grid--library { grid-template-columns: minmax(0, 1fr) minmax(420px, 500px); }
.pack-hero-grid--guide { grid-template-columns: minmax(0, 1fr) 260px; }
.guide-hero .pack-hero-grid { max-width: var(--container); }
.pack-hero-grid > * { min-width: 0; }
.pack-hero-grid .page-visual { width: 100%; max-width: 100%; }
.pack-art--sidecar { max-width: 400px; margin-inline: auto; }
.page-visual .pack-art { max-width: 400px; }
.page-visual .pack-art--library { max-width: 500px; }
.page-visual .pack-art--guide { max-width: 260px; }
.page-visual .pack-art--accent, .pack-art--accent { max-width: 300px; margin-inline: auto; }
.pack-art > picture, .pack-art > noscript > picture { display: block; width: 100%; aspect-ratio: var(--art-ratio); }
.pack-art img { width: 100%; height: 100%; aspect-ratio: var(--art-ratio); object-fit: contain; }
.sponsor-inquiry-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.sponsor-inquiry-form > * { min-width: 0; }
.sponsor-inquiry-form .form-trust-row, .sponsor-fit, .sponsor-inquiry-form .form-status { grid-column: 1 / -1; }
.sponsor-fit { display: flex; gap: .6rem; align-items: start; }
.sponsor-fit input { width: auto; flex: 0 0 auto; }
@media (max-width: 1023px) {
  .pack-hero-grid, .page-hero--start-here .pack-hero-grid { grid-template-columns: 1fr; }
  .pack-hero-grid .page-visual { justify-self: center; }
}
@media (max-width: 767px) {
  .sponsor-inquiry-form { grid-template-columns: 1fr; }
  .pack-hero-grid, .page-hero--start-here .pack-hero-grid { grid-template-columns: 1fr; gap: 12px; }
  .pack-hero-grid .page-visual, .page-hero--start-here .pack-hero-grid .page-visual { width: 260px; max-width: 100%; justify-self: center; }
  .pack-hero-grid .pack-art { height: 160px; aspect-ratio: auto; }
  .pack-hero-grid .pack-art > picture, .pack-hero-grid .pack-art > noscript > picture { height: 160px; aspect-ratio: auto; }
  .pack-hero-grid .pack-art img { height: 160px; }
  .page-hero--start-here { padding-block: 12px 0; }
  .page-hero--start-here + .section { padding-top: 12px; }
}