/* ==========================================================================
   Sherman Oaks 100 — Phone layout (October 2026)
   --------------------------------------------------------------------------
   Every page links this file last, with media="(max-width: 699px)", so it
   applies only on phones. Tablets and desktops download it at low priority
   and never use it, and the desktop design cannot change because of it.
   Keep 699px in sync with the media attribute on each page's <link>.

   Rules for this file (WCAG 2.1 AA):
   - Restyle; do not remove. Every word, link and photo credit that shows on
     desktop shows on a phone, in the same reading order (1.3.2).
   - No horizontal page scroll at 320 px (1.4.10). Sideways rows are limited
     to swipeable lists whose items are links or buttons, so keyboard focus
     scrolls them into view.
   - No fixed heights on text, so wider letter/line spacing never clips (1.4.12).
   - Small text on cream keeps --accent-text (at least 4.6:1). Touch targets
     are at least 24 px (2.5.8), and main actions are at least 44 px.
   ========================================================================== */

:root {
  --header-h: 56px;
  --m-gutter: 1rem;
  --m-section: 2.5rem;
}

/* --------------------------------------------------------------------------
   Base: touch feedback, no hover lift, no fixed background (janky on iOS)
   -------------------------------------------------------------------------- */
body {
  background-attachment: scroll;
  -webkit-tap-highlight-color: rgba(38, 90, 71, .14);
}
.container { padding-inline: var(--m-gutter); }
.section { padding: var(--m-section) 0; }
.card:hover, .event-card:hover, .btn:hover { transform: none; }

/* Section intros read left-aligned: long centered lines are hard to track. */
.section-head { text-align: left; max-width: none; margin: 0 0 1.5rem; }
.section-head__sub { margin: 0; font-size: 1rem; line-height: 1.55; }
.section h3.section-head__title { font-size: clamp(1.7rem, 8vw, 2rem); }
.eyebrow--center { justify-content: flex-start; }
.eyebrow--center::after { display: none; }
.section-note { margin: 1rem 0 0; text-align: left; }
.section-action { justify-content: stretch; margin-top: 1.25rem; }
.section-action .btn { flex: 1 1 100%; }

/* --------------------------------------------------------------------------
   Header: lighter section tabs instead of bordered chips
   -------------------------------------------------------------------------- */
.site-header { background: rgba(255, 253, 248, .96); }
.nav { gap: .35rem; }
.brand__mark { width: 44px; height: auto; }
.nav__menu, .nav--open .nav__menu { gap: .1rem; padding: .25rem 28px .25rem 2px; }
.nav__menu a, .nav--open .nav__menu a {
  min-height: 40px; padding: .4rem .8rem; border: 0; background: transparent;
  color: var(--ink-700); font-size: .9rem; font-weight: 600;
}
.nav__menu a:hover { background: rgba(38, 90, 71, .08); }
.nav__menu a[aria-current="location"] { background: var(--primary); color: #fff; }

/* --------------------------------------------------------------------------
   Analytics banner: same wording, about half the height
   -------------------------------------------------------------------------- */
.consent { padding: .8rem 0 calc(.8rem + env(safe-area-inset-bottom, 0px)); }
.consent__inner { display: grid; gap: .65rem; }
/* The title runs into the first line of the text (it still labels the region). */
.consent__inner > div:first-child { font-size: .875rem; line-height: 1.45; }
.consent__title { display: inline; margin: 0 .35em 0 0; font-size: .9rem; }
.consent__text { display: inline; font-size: inherit; line-height: inherit; }
.consent__actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: .5rem; }
.consent__btn, .consent__close { min-height: 44px; padding: .5rem .75rem; font-size: .9rem; }

/* --------------------------------------------------------------------------
   Welcome: the seal becomes a badge resting on the 1928 horizon
   -------------------------------------------------------------------------- */
.hero--centennial { padding-top: 1.75rem; }
.hero--centennial .eyebrow { font-size: .75rem; letter-spacing: .1em; gap: .4rem; }
.hero--centennial .eyebrow::before { width: 14px; }
.hero--centennial .hero__title { font-size: clamp(2.2rem, 10.5vw, 2.75rem); margin-bottom: 1rem; }
.hero--centennial .hero__sub { margin-bottom: 1.25rem; }
.hero--centennial .hero__inner { gap: 0; }
.hero__cta { gap: .6rem; }
.hero__cta .btn { min-height: 48px; }
.hero__map-link { margin-top: .5rem; }
/* gap restores the space before the hero link's arrow, which flex layout collapses. */
.hero__map-link a, .then-now__links a { display: inline-flex; align-items: center; gap: .3em; min-height: 40px; }
.hero__seal-wrap { position: relative; z-index: 2; margin: 1.5rem 0 -58px; }
.hero--centennial .hero__seal { max-width: 124px; filter: drop-shadow(0 8px 14px rgba(20, 50, 42, .2)); }
.hero-horizon { margin-top: 0; }
.hero-horizon img { height: 160px; }
/* The caption carries the photo credit, so it wraps to two lines here: keep it off the screen edge. */
.hero-horizon figcaption { right: var(--m-gutter); bottom: .6rem; max-width: calc(100% - 2 * var(--m-gutter)); border-radius: var(--r-sm); font-size: .72rem; line-height: 1.4; }

/* --------------------------------------------------------------------------
   About
   -------------------------------------------------------------------------- */
.story-intro { gap: .75rem; }
.year-mark { justify-content: flex-start; gap: .5rem; font-size: 2.3rem; }
.year-mark span { font-size: 1rem; }
.lede { font-size: 1.2rem; }
.story-intro__actions .btn { flex: 1 1 100%; }

/* --------------------------------------------------------------------------
   Events: the date tile sits beside the title only, and the details run the
   full card width. The body wrapper is a plain div with no role, so
   display: contents changes the layout without changing what is announced.
   -------------------------------------------------------------------------- */
.event-grid { gap: .75rem; }
.event-card {
  grid-template-columns: 60px minmax(0, 1fr); column-gap: .9rem; row-gap: 0;
  align-items: start; padding: 1rem; border-radius: var(--r-md);
}
.event-card__body { display: contents; }
.event-card__date { grid-row: 1 / span 2; min-height: 66px; padding: .45rem .2rem; border-radius: 10px; }
.event-card__date::before { inset: 3px; border-radius: 7px; }
.event-card__date strong, .event-card--dated .event-card__date strong { font-size: 1.55rem; }
.event-card__date span, .event-card--dated .event-card__date span {
  font-size: .7rem; letter-spacing: .08em; white-space: normal; line-height: 1.2; margin-top: .2rem;
}
.event-card__tag { grid-column: 2; justify-self: start; letter-spacing: .1em; line-height: 1.4; }
.event-card__title { grid-column: 2; margin: .35rem 0 0; font-size: 1.28rem; line-height: 1.2; }
.event-card__meta, .event-card__cta { grid-column: 1 / -1; }
.event-card__meta { margin: .75rem 0 0; font-size: .95rem; line-height: 1.5; }
.event-card__meta + .event-card__meta { margin-top: .3rem; }
.event-card__cta { justify-self: start; display: inline-flex; align-items: center; min-height: 44px; margin-top: .15rem; }

/* --------------------------------------------------------------------------
   History
   -------------------------------------------------------------------------- */
.then-now__body h3 { font-size: 1.55rem; }
.then-now__place { margin-bottom: .4rem; }
.tn-step { justify-content: space-between; gap: .5rem; }
.tn-step__btn { flex: 1 1 0; }
.tn-step__count { flex: none; }
.tn-next { min-height: 40px; }

.archive__head h3 { font-size: 1.5rem; }

/* Archive: a swipeable row with every caption and credit showing. */
.archive { margin-top: 2.5rem; }
.archive-grid {
  display: flex; gap: .85rem; overflow-x: auto; margin-inline: calc(var(--m-gutter) * -1);
  /* Vertical padding leaves room for the 3 px focus ring and its offset. */
  padding: .5rem var(--m-gutter) .9rem; scroll-snap-type: x mandatory; scroll-padding-inline: var(--m-gutter);
  overscroll-behavior-x: contain; scrollbar-width: thin;
}
/* Each slide is narrower than the screen so the next photo peeks in.
   position: relative keeps screen-reader-only link notes inside the row. */
.archive-photo { position: relative; flex: 0 0 78%; scroll-snap-align: start; }
.archive-photo--wide { flex-basis: 88%; }
.archive-photo .photo-caption { display: block; font-size: .85rem; }
.archive-photo h4 { margin-top: .6rem; font-size: 1.05rem; }
.archive-note { margin-top: 1rem; font-size: .85rem; }

/* --------------------------------------------------------------------------
   Map: the map runs edge to edge for more room to pan
   -------------------------------------------------------------------------- */
.map-layout { margin-inline: calc(var(--m-gutter) * -1); border-inline: 0; border-radius: 0; box-shadow: none; }
.map-contribute { margin-top: 1.5rem; padding: 1.25rem; border-radius: var(--r-md); }
.map-contribute h3 { font-size: 1.35rem; }

/* --------------------------------------------------------------------------
   Stories
   -------------------------------------------------------------------------- */
.memory-invitation { padding: 1.25rem; border-radius: var(--r-md); }
.memory-invitation h3 { font-size: 1.45rem; }
.memory-feature { margin-top: 1.25rem; }

/* --------------------------------------------------------------------------
   Support
   -------------------------------------------------------------------------- */
/* An underline instead of a bottom border, so a link that wraps doesn't get
   a box-wide rule under it. */
.card a.card__link {
  display: inline-block; padding-block: .3rem; border-bottom: 0;
  text-decoration: underline; text-underline-offset: 3px;
}
.committee h3, .working-committees h3, .support-contact h3 { font-size: 1.45rem; }

/* Sponsorship: tighter panels; each level's price sits beside its name and
   benefits (still read name, benefits, price). Actions are full width. */
.support-cta { gap: 1rem; padding: 1.1rem 1rem; }
.support-cta h3 { font-size: 1.3rem; }
.support-cta .btn, .support-contact .btn { width: 100%; min-height: 48px; }
.support-block { margin-top: 2rem; }
.support-block__head { padding: .7rem 1rem; margin-bottom: .9rem; }
.support-block__head h2, .support-block__head h3 { font-size: .95rem; letter-spacing: .1em; }
.support-block__head p { font-size: .85rem; }
.packages, .support-events { gap: .75rem; }
.package, .support-event { padding: 1rem; }
.package__name { font-size: .95rem; letter-spacing: .1em; }
.package__head .package__price { font-size: 1.6rem; }
.package p { font-size: .95rem; line-height: 1.55; }
.package__link { display: inline-flex; align-items: center; min-height: 44px; margin-top: .25rem; }
.support-event h3, .support-event h4 { font-size: 1.3rem; }
.levels li { grid-template-columns: minmax(0, 1fr) auto; column-gap: .75rem; }
.level__name { grid-column: 1; grid-row: 1; }
.level__desc { grid-column: 1; grid-row: 2; }
.level__price { grid-column: 2; grid-row: 1 / span 2; align-self: start; }
.support-fineprint { margin-top: 1.75rem; }
.support-contact { gap: 1.25rem; margin-top: 1.75rem; padding: 1.5rem 1.25rem; border-radius: var(--r-md); }
.support-contact p { margin-bottom: 1.1rem; }
.support-contact__list a { font-size: .9rem; }
.support-contact h2 { font-size: 1.45rem; }
.support-page-nav { gap: .5rem; margin-top: 1.25rem; }
.support-page-nav a { flex: 1 1 100%; }
.support-page .levels li { grid-template-columns: minmax(0, 1fr) auto; }
.support-page .support-event { padding: 1rem; }
.support-source, .support-circle { padding: 1.1rem; }
.support-comparison h2 { font-size: 1.5rem; }
.support-option__more { width: 100%; }

/* Legacy ideas and partner types are information, not actions: a divided
   list instead of stacked boxes. */
.legacy { margin-top: 2.5rem; }
.legacy .grid, .partners .grid { gap: 0; border-top: 1px solid var(--border-strong); }
.legacy .card, .partners .card {
  padding: 1rem 0; gap: .2rem; border: 0; border-bottom: 1px solid var(--border-strong);
  border-radius: 0; background: none; box-shadow: none;
}
.legacy .card__title, .partners .card__title, .card h4.card__title { font-size: 1.25rem; }

/* --------------------------------------------------------------------------
   Get involved
   -------------------------------------------------------------------------- */
.involve-grid { gap: .75rem; }
.involve-grid .card { padding: 1.25rem; }
.involve-card .btn { width: 100%; margin-top: .75rem; }
.partners { margin-top: 2.5rem; }
.partners > h3 { text-align: left; font-size: 1.45rem; margin-bottom: 1rem; }

.committee { margin-top: 2.5rem; padding: 1.25rem; border-radius: var(--r-md); }
.committee__label { margin: 1.4rem 0 .7rem; }
.committee__list { gap: .7rem; }
.member { gap: .1rem; }
.committee__chairs { gap: .6rem; }
.committee__chairs .member { padding: .8rem 1rem; }
.committee__chairs .member__name { font-size: 1.15rem; }
.member__name { font-size: 1.05rem; }
.committee__thanks { margin-top: 1.4rem; }
.committee__thanks .committee__label { margin-top: 1.2rem; }

/* Working committees: the eight names wrap as tags instead of a long list. */
.working-committees { gap: 1.25rem; padding: 1.5rem 1.25rem; border-radius: var(--r-md); }
.working-committees p { margin-bottom: 1.1rem; }
.working-committees__list { display: flex; flex-wrap: wrap; gap: .5rem; }
.working-committees__list li {
  gap: .45rem; padding: .45rem .8rem; border: 0; border-radius: var(--r-full);
  background: rgba(254, 252, 246, .1); font-size: .875rem; line-height: 1.3;
}
.working-committees__list li::before { width: 6px; height: 6px; }

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */
.faq { gap: .5rem; }
.faq__item summary { min-height: 52px; padding: .8rem 1rem; font-size: 1.05rem; line-height: 1.3; }
.faq__body { padding: 0 1rem 1rem; }

/* --------------------------------------------------------------------------
   Contact: topics in two columns
   -------------------------------------------------------------------------- */
.contact-address { font-size: clamp(1.25rem, 6.4vw, 1.6rem); }
.contact-panel .email-cta__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; margin-top: 1.25rem; }
.contact-panel .email-cta__grid .btn { width: auto; min-height: 48px; padding: .55rem .7rem; font-size: .9rem; }
.contact-panel .email-cta__grid .btn:last-child:nth-child(odd) { grid-column: 1 / -1; }

/* --------------------------------------------------------------------------
   Footer: no empty band above it, link groups side by side
   -------------------------------------------------------------------------- */
.site-footer { margin-top: 0; padding: 2.5rem 0 calc(1.25rem + env(safe-area-inset-bottom, 0px)); }
.site-footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 1rem; padding-bottom: 1.5rem; }
.site-footer__brand, .site-footer__top > div:last-child { grid-column: 1 / -1; }
/* styles.css hides the header's brand name below 700 px to make room for
   the section tabs; the footer has room, so its name stays visible. */
.site-footer__brand .brand__text { display: flex; }
.site-footer__brand p { max-width: none; margin-bottom: 0; }
.site-footer .site-footer__heading { margin-bottom: .35rem; }
.site-footer ul { gap: 0; }
.site-footer ul a, .site-footer__legal a { min-height: 40px; }
.site-footer ul li.subtle { padding-top: .5rem; }
.site-footer__bottom { flex-direction: column; gap: .25rem; padding-top: 1rem; }
.site-footer__bottom p { margin: 0; }
.site-footer__legal { gap: 0 1.25rem; }

/* --------------------------------------------------------------------------
   Policy pages and 404
   -------------------------------------------------------------------------- */
.page-header { padding: 2rem 0 1.5rem; }
.legal-meta { padding: 1rem; margin-bottom: 1.5rem; }
.prose h2 { margin-top: 2.25rem; }
/* The decorative "404" (aria-hidden) must not widen the page when readers
   increase letter spacing (WCAG 1.4.12); it is clipped, never the content. */
.lost__big { overflow-x: clip; }

/* Text directory stays in the same reading order as the interactive map. */
.map-directory__list { grid-template-columns: minmax(0, 1fr); }