/* 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 kept the fall panorama at full width; T239 moved it below the copy; T240 (Hickok): "I would like the long village scene
   to be above our special village header text" — the panorama leads the hero again at the full content width. */
.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; }
/* T244 (Hickok): "make the support group pic bigger on this card, its too small." The living-room scene fills its
   wider right column of the mist band (about 550px at 1440, up from the 400px sidecar cap); the copy column narrows a little. */
/* T253 (Hickok): "the pic needs to be bigger" (again, after T244) — the art column grows to about 64% of the band and the gap tightens, so the living-room scene lands near 700px at 1440. */
@media (min-width: 821px) { .home-story .split { grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr); gap: clamp(1.25rem, 2.5vw, 2rem); } } /* desktop only: phones keep the site's single-column .split */
.home-story .pack-art--sidecar { width: 100%; max-width: none; margin-inline: 0; }
/* 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; }
/* T241 (Hickok): "please make these aligned well, pics and text." In the two gateway cards the illustration sits in a
   shared 2:1 slot spanning the card's content width, so both titles start at the same height whatever the scene's own
   ratio. T244 (Hickok): "Explore the village needs to be equal and aligned." — both scenes are now real cutouts (alpha,
   no paper plate) centered in that slot, so the pair reads as two equal cards with art, title, blurb and link in the
   same positions. */
.home-gateways .card .pack-art { width: 100%; max-width: none; margin: 0 0 20px; aspect-ratio: 8 / 5; } /* T244: 8:5 slot — the 1.8:1 businesses scene and the 3:2 hope scene land at near-equal size */
/* T253 (Hickok): "Still do not have even and aligned pictures and text" — a column-flex item keeps min-height:auto, so the taller 3:2 hope scene was overflowing the 8:5 slot and pushing its title lower than the businesses title. min-height:0 + overflow:hidden make both slots exactly 8:5, so both titles start at the same height. */
.home-gateways .card .pack-art { min-height: 0; overflow: hidden; }
.home-gateways .card .pack-art > picture, .home-gateways .card .pack-art > noscript > picture { height: 100%; aspect-ratio: auto; }
.home-gateways .card .pack-art img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: contain; object-position: center; }
.home-gateways .card h3 { margin-top: 0; }
/* T236 (Hickok): Popular guides inherits the shared .card surface, border, radius, padding, and shadow.
   T248 (Hickok): "I do not like the tiny icons next to popular guides and keep the village going as well as the line on the
   left side of the box ... Instead of links, make them box/cards like in the resource library." — the T244 tint / 4px
   accent rule / title glyph treatment is removed. Popular guides is now a heading over a grid-3 of linked a.card boxes
   (title + more-link, exactly the Resource Library pattern) and Help keep the village going is a plain shared .card. No
   village.css overrides remain on either block; both use the site .card chrome from site.css. */
.home-popular { display: block; }
.home-popular > h3 { margin-bottom: 1rem; }
.home-popular .grid-3 { margin-bottom: 1rem; }
.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; }
/* T240 (Hickok, About "How we stay independent"): "please add dividers or boxes for this text" — the three pillars are white boxes on the mist card, with a rule above the editorial-policy link. */
.trust-card .icon-tile { background: var(--white); border: 1px solid rgba(29, 44, 76, 0.18); border-radius: var(--radius-card); padding: 1.1rem 1.2rem; box-shadow: var(--shadow-card); }
.trust-card .equal-grid { gap: 1rem; margin-bottom: 1.25rem; }
.trust-card .card-actions { padding-top: 1.1rem; border-top: 1px solid rgba(29, 44, 76, 0.18); }
/* 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; }

/* T239 (Hickok): "Pictures should be large and directly below the page heading and subhead, not beside them."
   One stacked page header on every illustrated page: eyebrow → H1 → lede/meta → CTAs → large centered
   illustration → content. T240 (Hickok): "the picture is too big, I need it slightly smaller, so that it
   doesn't take up a whole page of scroll. But I do like it on its own line." Hero art is min(100%, 880px), centered,
   of the content column at its natural height (T244 (Hickok): "slightly bigger pictures and centered"; T240 had 800px on the left edge), object-fit: contain, never cropped; the copy column stays 75ch.
   Supersedes the T230/T237 sidecar and compact caps (220/260/300/383/400/440/500/540) for hero art;
   non-hero placements (home story band, gateway cards, accents) keep their own sizes below. */
.page-hero-grid, .pack-hero-grid, .page-hero--start-here .pack-hero-grid, .hub-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: clamp(20px, 2.5vw, 32px);
  max-width: var(--container);
}
.guide-hero .container, .guide-hero .pack-hero-grid { max-width: var(--container); }
.pack-hero-grid > * { min-width: 0; }
.pack-hero-copy, .page-hero-grid > :first-child { max-width: 75ch; }
.pack-hero-copy > :last-child, .page-hero-grid > :first-child > :last-child { margin-bottom: 0; } /* the grid gap alone spaces copy from art */
.page-hero .page-visual, .page-head .page-visual, .pack-hero-grid .page-visual { width: 100%; max-width: 100%; justify-self: stretch; order: 0; }
.page-hero .page-visual .village-art, .page-head .page-visual .village-art, .page-hero .page-visual .pack-art, .page-head .page-visual .pack-art { width: min(100%, 880px); max-width: none; margin: 0 auto; } /* T244 (Hickok): "I'm leaning toward slightly bigger pictures and centered" — the art is centered under the copy at 880px (up from T240's 800px; T241's shared left edge is superseded) */
.pack-art > picture, .pack-art > noscript > picture { display: block; width: 100%; aspect-ratio: var(--art-ratio); }
.pack-art img { display: block; width: 100%; height: auto; aspect-ratio: var(--art-ratio); object-fit: contain; }
.page-visual img { display: block; width: 100%; height: auto; object-fit: contain; }
.pack-art--sidecar { max-width: 400px; margin-inline: auto; }
.pack-art--accent { max-width: 300px; margin-inline: auto; }
/* 20–32px between the opening copy and the art (grid gap above); 28–44px between the art and the first content block. */
.page-hero, .page-head { padding-bottom: 0; }
.page-hero + .section, .page-head + .section, .hero + .section { padding-top: clamp(28px, 3vw, 44px); }
/* T240 (Hickok): About opens with the navy card (eyebrow, H1, story, portrait) and the seasonal village scene sits underneath it on its own line at the shared 800px hero scale. */
/* T253 (Hickok, support group): "save my seat is easily missed ... include that button lower where the description is ... a navy blue card like you had on the home page" — a navy band under "What the hour feels like" repeats the facts and the gold Save my seat button. */
.group-seat-band { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 1.5rem; margin-top: 1.25rem; padding: clamp(1.5rem, 3vw, 2.25rem); }
.group-seat-band h3 { margin: 0 0 0.35rem; font-size: 1.35rem; }
.group-seat-band p { margin: 0; color: var(--on-dark); }
.group-seat-band .eyebrow { margin-bottom: 0.5rem; }
/* T253 (Hickok, About): "put the picture UNDER 'what you'll find here'" — the seasonal scene moves below the four cards; it is now below the fold, so it lazy-loads. */
.about-scene { margin-top: clamp(20px, 2.5vw, 32px); }
.about-scene .village-art { width: min(100%, 880px); max-width: none; margin: 0 auto; } /* T244: centered under the navy card at the shared 880px scale */
/* T240 (Hickok): "On the home page, this pic is way too small." The courthouse-square scene above Stay connected grows from the 300px accent to the shared 800px page scale. */
.home-square { margin-top: clamp(28px, 3vw, 44px); }
.home-square .pack-art { width: min(100%, 900px); max-width: none; margin: 0 auto; } /* T244 (Hickok): "This pic^ bigger and centered." — 900px, centered in the section */
.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: 767px) {
  .sponsor-inquiry-form { grid-template-columns: 1fr; }
  /* T239: phones keep the same stacked order at the full content width, 16–24px around the art. */
  .page-hero-grid, .pack-hero-grid, .page-hero--start-here .pack-hero-grid, .hub-hero-grid { gap: 16px; }
  .page-hero--start-here .page-visual, .page-hero .page-visual, .page-head .page-visual { width: 100%; }
  .page-hero + .section, .page-head + .section, .hero + .section { padding-top: 20px; }
  .page-hero--start-here { padding-block: 12px 0; }
}

/* T257 (Hickok): "Make thursdays 7-8pm online first meeting october 1 2026 bigger and more
   accentuated on the home page." The meeting details under the living-room scene stop being a faint
   translucent panel and become the band's callout: white card, gold rule, and both lines scaled up
   (the time line to ~1.5rem, the first-meeting line to ~1.2rem) so they read at a glance. Copy is
   unchanged. The !important navy override at .home-story .band--navy .card p still applies. */
.home-meeting {
  margin-top: clamp(16px, 2vw, 24px);
  background: var(--white);
  border: 1px solid var(--line);
  border-left: 6px solid var(--gold);
  box-shadow: var(--shadow-card);
  padding: clamp(1.25rem, 1.1rem + 0.8vw, 1.75rem);
}
.home-meeting__when {
  margin: 0 0 0.5rem;
  font-size: clamp(1.2rem, 1.02rem + 0.75vw, 1.5rem);
  line-height: 1.3;
  text-wrap: balance;
}
.home-meeting__when strong { font-weight: 700; letter-spacing: 0.01em; }
.home-meeting__first {
  margin: 0;
  font-size: clamp(1.05rem, 0.99rem + 0.3vw, 1.2rem);
  font-weight: 600;
  line-height: 1.4;
}