/* ==========================================================================
   BEL-AIR public site — stylesheet (cinematic photography direction, Mockup 02)
   A dark cinema for the barangay's own photographs. Light, not drawings,
   carries the colour: glows that bleed from the pictures, warm type,
   one ribbon. Sections: base · utilities · progress · nav · hero ·
   meet · glance · live · wipe · map · business · green · experience · film ·
   day · community · services · news · after dark · cta · footer · dialogs ·
   cursor · responsive
   ========================================================================== */

/* ---------- base ------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; background: var(--night); }
body { margin: 0; background: var(--night); color: var(--ink); font-family: var(--font-ui); font-size: var(--t-base); line-height: var(--lh-body); -webkit-font-smoothing: antialiased; overflow-x: clip; }
body.is-locked { overflow: hidden; }
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4, p, figure, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: var(--blue-light); text-decoration-thickness: 1px; text-underline-offset: .18em; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible, [data-focus-moved]:focus { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 3px; }
::selection { background: var(--gold); color: var(--night); }
.skip { position: fixed; top: 0; left: 50%; transform: translate(-50%, -140%); background: var(--gold); color: var(--night); padding: .75rem 1.25rem; z-index: 200; font-weight: 700; transition: transform var(--d-micro) var(--ease-premium); }
.skip:focus { transform: translate(-50%, .75rem); }

/* ---------- utilities --------------------------------------------------- */
.wrap { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; position: relative; }
.section { padding-block: var(--s-section); position: relative; }
.measure { max-width: var(--measure); }
.eyebrow { font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--ink-3); display: inline-flex; align-items: center; gap: .75rem; }
.eyebrow::before { content: ""; width: 2rem; height: 2px; border-radius: 2px; background: var(--grad-ribbon); }
.eyebrow--plain::before { display: none; }
.display { font-family: var(--font-display); font-weight: 400; line-height: 1.02; letter-spacing: -0.01em; }
.display em { font-style: italic; color: var(--gold); }
.eyebrow + .display { margin-top: .6rem; }
.display + .lede, .display + p.measure, .display + .reveal.measure { margin-top: 1.1rem; }
.t-2xl { font-size: var(--t-2xl); }
.t-3xl { font-size: var(--t-3xl); line-height: .98; letter-spacing: -0.02em; }
.t-xl { font-size: var(--t-xl); }
.lede { font-size: var(--t-lg); color: var(--ink-2); line-height: 1.55; }
.muted { color: var(--ink-3); }
.note { font-family: var(--font-mono); font-size: var(--t-sm); color: var(--ink-3); letter-spacing: .02em; }
.btn { display: inline-flex; align-items: center; gap: .6rem; min-height: 3rem; padding: .7rem 1.4rem; border: 1px solid var(--line-strong); border-radius: var(--r-ui); color: var(--ink); font-weight: 700; font-size: 1rem; text-decoration: none; line-height: 1; white-space: nowrap; transition: background-color var(--d-micro), color var(--d-micro), border-color var(--d-micro), transform var(--d-micro) var(--ease-premium); }
.btn:hover { background: var(--ink); color: var(--night); border-color: var(--ink); transform: translateY(-1px); }
.btn--primary { background: var(--blue); border-color: var(--blue); color: var(--on-blue); }
.btn--primary:hover { background: var(--blue-ink); border-color: var(--blue-ink); color: var(--on-blue); }
.btn--gold { background: var(--gold); border-color: var(--gold); color: var(--night); }
.btn--gold:hover { background: var(--ink); border-color: var(--ink); color: var(--night); }
.link-arrow { display: inline-flex; align-items: center; gap: .5rem; font-weight: 700; text-decoration: none; color: var(--ink); min-height: 2.75rem; }
.link-arrow::after { content: "→"; transition: transform var(--d-micro) var(--ease-premium); }
.link-arrow:hover { color: var(--gold); }
.link-arrow:hover::after { transform: translateX(4px); }
.photo { position: relative; overflow: hidden; border-radius: var(--r-photo); background: var(--panel); margin: 0; }
.photo img { width: 100%; height: 100%; object-fit: cover; }
.photo figcaption { position: absolute; inset: auto 0 0 0; padding: 2.75rem 1.1rem 1rem; font-family: var(--font-mono); font-size: var(--t-sm); line-height: 1.35; letter-spacing: .02em; color: var(--white); background: linear-gradient(transparent, rgba(7, 11, 20, .76) 46%, rgba(7, 11, 20, .92)); }
.photo--3x2 { aspect-ratio: 3 / 2; } .photo--4x3 { aspect-ratio: 4 / 3; } .photo--3x4 { aspect-ratio: 3 / 4; } .photo--1x1 { aspect-ratio: 1; } .photo--16x9 { aspect-ratio: 16 / 9; } .photo--4x5 { aspect-ratio: 4 / 5; }
.placeholder { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 1.25rem; background: linear-gradient(160deg, var(--panel), var(--panel-2)); color: var(--ink-2); }
.placeholder svg { width: 2.5rem; height: 2.5rem; margin: 0 auto .75rem; color: var(--gold); }
.placeholder .ph-label { font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: .12em; text-transform: uppercase; color: var(--ink); }
.placeholder .ph-brief { font-size: var(--t-sm); color: var(--ink-2); max-width: 28ch; margin-top: .25rem; }
.glass { background: var(--glass); border: 1px solid var(--glass-line); border-radius: var(--r-photo); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.glow { position: absolute; border-radius: 50%; pointer-events: none; mix-blend-mode: screen; }
.glow--gold { background: radial-gradient(circle, rgba(255, 210, 63, .32), rgba(255, 210, 63, 0) 62%); }
.glow--teal { background: radial-gradient(circle, rgba(43, 179, 163, .3), rgba(43, 179, 163, 0) 62%); }
.glow--leaf { background: radial-gradient(circle, rgba(127, 209, 127, .26), rgba(127, 209, 127, 0) 62%); }
.glow--sky { background: radial-gradient(circle, rgba(111, 182, 240, .26), rgba(111, 182, 240, 0) 62%); }
.glow--rose { background: radial-gradient(circle, rgba(240, 138, 123, .22), rgba(240, 138, 123, 0) 62%); }
.ico { width: 1.5rem; height: 1.5rem; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- scroll progress ribbon ------------------------------------- */
.progress { position: fixed; left: 0; top: 0; right: 0; height: 3px; z-index: 60; pointer-events: none; }
.progress::after { content: ""; position: absolute; inset: 0; background: var(--grad-ribbon); transform-origin: left; transform: scaleX(var(--progress, 0)); }

/* ---------- nav --------------------------------------------------------- */
.nav { position: fixed; inset: 0 0 auto 0; z-index: var(--z-nav); transition: background-color var(--d-micro), border-color var(--d-micro); border-bottom: 1px solid transparent; }
.nav__inner { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; display: flex; align-items: center; gap: 1.5rem; min-height: 4.75rem; }
.nav::before { content: ""; position: absolute; inset: 0 0 -2.5rem 0; z-index: -1; pointer-events: none; background: linear-gradient(180deg, rgba(7, 11, 20, .86), rgba(7, 11, 20, .6) 62%, transparent); transition: opacity var(--d-micro); }
.nav.is-compact::before { opacity: 0; }
.nav.is-compact { background: rgba(7, 11, 20, .9); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-color: var(--line); }
.nav.is-compact .nav__inner { min-height: 3.75rem; }
/* ---------- urgent alert strip (FR-NEWS-003/004): under the bar on every page while an alert is in force -------
   Seal blue like the Emergency button (white on blue 8.6:1), the level on yellow; --alert-h (set by shell.js) moves
   the page headers down by the strip's height. */
.alert-strip { background: var(--blue); color: var(--on-blue); border-top: 1px solid rgba(255, 255, 255, .25); }
.alert-strip__inner { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; display: flex; flex-wrap: wrap; align-items: center; gap: .35rem 1rem; padding: .35rem 0; }
.alert-strip__level { flex: none; padding: .3rem .65rem; border-radius: 999px; background: var(--yellow); color: var(--night); font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: .08em; text-transform: uppercase; font-weight: 700; }
.alert-strip__link { flex: 1 1 auto; min-width: 0; min-height: 2.75rem; display: flex; flex-wrap: wrap; align-items: center; column-gap: .3rem; color: var(--on-blue); text-decoration: none; font-size: var(--t-sm); line-height: 1.35; }
.alert-strip__link b { font-weight: 700; }
.alert-strip__go { margin-left: .6rem; font-weight: 700; white-space: nowrap; }
.alert-strip__go-text { text-decoration: underline; text-underline-offset: .2em; }
.alert-strip__link:hover .alert-strip__go-text { text-decoration-thickness: 2px; }
.alert-strip__until--short { display: none; }
.alert-strip__close { flex: none; width: 2.75rem; height: 2.75rem; display: grid; place-items: center; margin-left: auto; border: 1px solid rgba(255, 255, 255, .55); border-radius: var(--r-ui); color: var(--on-blue); font-size: 1.25rem; }
.alert-strip__close:hover { background: var(--on-blue); color: var(--blue); }
.alert-strip :focus-visible { outline-color: var(--yellow); }
/* the maintenance banner (NW-4): the same strip with a sentence instead of a link, and no close button */
.alert-strip__text { flex: 1 1 auto; min-width: 0; min-height: 2.75rem; display: flex; align-items: center; margin: 0; font-size: var(--t-sm); line-height: 1.35; }
@media (max-width: 600px) {
  /* phones: one compact row: the level, a short line that is the link, close (the detail is one tap away) */
  .alert-strip__inner { flex-wrap: nowrap; gap: .6rem; padding: .25rem 0; }
  .alert-strip__type, .alert-strip__until, .alert-strip__go-text { display: none; }
  .alert-strip__until--short { display: inline; }
  .alert-strip__go { margin-left: .2rem; }
}
.brand { display: inline-flex; align-items: center; gap: .75rem; text-decoration: none; color: var(--ink); font-family: var(--font-display); font-size: 1.35rem; letter-spacing: .02em; min-height: 2.75rem; }
.brand { min-width: 2.75rem; } /* when only the seal shows, the link still keeps a 44 px target */
.brand img { width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--white); }
.brand > span, .brand small { white-space: nowrap; }
.brand small { display: block; font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.nav__primary { margin-left: auto; display: flex; gap: .25rem; }
.nav__primary > li { position: relative; }
.nav__primary > li.has-mega { position: static; } /* the mega panel spans the bar, as before it moved next to its button */
.nav__primary > li > a, .nav__primary > li > button { display: inline-flex; align-items: center; gap: .35rem; min-height: 2.75rem; padding: 0 .8rem; text-decoration: none; color: var(--ink); font-weight: 600; font-size: 1rem; position: relative; }
.nav__primary > li > a::after, .nav__primary > li > button::after { content: ""; position: absolute; left: .8rem; right: .8rem; bottom: .5rem; height: 2px; border-radius: 2px; background: var(--grad-ribbon); transform: scaleX(0); transform-origin: left; transition: transform var(--d-micro) var(--ease-premium); }
.nav__primary > li > a:hover::after, .nav__primary > li > button:hover::after, .nav__primary > li > button[aria-expanded="true"]::after { transform: scaleX(1); }
.nav__utils { display: flex; gap: .5rem; align-items: center; }
.util { display: inline-flex; align-items: center; gap: .5rem; min-height: 2.75rem; padding: 0 .9rem; border: 1px solid var(--line-strong); border-radius: var(--r-ui); font-size: 1rem; font-weight: 700; color: var(--ink); transition: background-color var(--d-micro), border-color var(--d-micro); }
.util:hover { background: var(--panel); border-color: var(--ink); }
.util kbd { font-family: var(--font-mono); font-size: var(--t-xs); color: var(--ink-3); border: 1px solid var(--line); padding: .05rem .3rem; border-radius: 2px; }
.util--emergency { border-color: var(--blue-light); color: var(--blue-light); }
.util--emergency:hover { background: var(--blue); color: var(--on-blue); border-color: var(--blue); }
.util--emergency .dot { width: .5rem; height: .5rem; border-radius: 50%; background: var(--blue-light); }
html.motion .util--emergency .dot { animation: pulse 2.6s infinite; }
.util--emergency:hover .dot { background: var(--yellow); }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(143, 176, 255, .45); } 70% { box-shadow: 0 0 0 7px rgba(143, 176, 255, 0); } 100% { box-shadow: 0 0 0 0 rgba(143, 176, 255, 0); } }
.burger { display: none; flex: none; width: 2.75rem; height: 2.75rem; place-items: center; border: 1px solid var(--line-strong); border-radius: var(--r-ui); }
.burger span { display: block; width: 1.1rem; height: 2px; background: var(--ink); box-shadow: 0 -6px 0 var(--ink), 0 6px 0 var(--ink); }
.mega { position: absolute; left: 0; right: 0; top: 100%; background: rgba(12, 18, 32, .96); backdrop-filter: blur(12px); border-bottom: var(--hairline); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity var(--d-micro) var(--ease-premium), transform var(--d-micro) var(--ease-premium), visibility var(--d-micro); }
.mega.is-open { opacity: 1; visibility: visible; transform: none; }
.mega__inner { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; display: grid; grid-template-columns: 1.1fr .9fr 1fr; gap: 3rem; padding: 2.25rem 0 2.5rem; }
.mega__head { font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--ink-3); margin-bottom: 1rem; font-weight: 500; }
.mega ul li a { display: flex; align-items: baseline; gap: .75rem; min-height: 2.5rem; padding: .35rem 0; text-decoration: none; color: var(--ink); font-size: 1.2rem; font-family: var(--font-display); border-bottom: var(--hairline); }
.mega ul li a span { font-family: var(--font-mono); font-size: var(--t-sm); color: var(--ink-3); margin-left: auto; }
.mega ul li a:hover { color: var(--gold); }
.mega__feature { position: relative; text-decoration: none; color: var(--white); }
.mega__feature .photo { aspect-ratio: 16 / 10; }
.mega__feature .photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(7, 11, 20, .75)); }
.mega__feature .cap { position: absolute; left: 1.25rem; right: 1.25rem; bottom: 1.25rem; }
.mega__feature .cap small { display: block; font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: .14em; text-transform: uppercase; margin-bottom: .35rem; }
.mega__feature .cap strong { font-family: var(--font-display); font-weight: 400; font-size: 1.7rem; line-height: 1.1; }
/* a modal <dialog>: the page behind is inert while it is open */
.mobile-menu { position: fixed; inset: 0; width: 100%; height: 100%; max-height: none; margin: 0; z-index: calc(var(--z-nav) + 1); background: var(--night); display: none; flex-direction: column; padding: 1rem var(--gutter) 2rem; overflow-y: auto; }
.mobile-menu[open] { display: flex; }
.mobile-menu::backdrop { background: var(--night); }
.mobile-menu__top { display: flex; align-items: center; justify-content: space-between; min-height: 3.5rem; }
.mobile-menu__close { width: 2.75rem; height: 2.75rem; display: grid; place-items: center; border: 1px solid var(--line-strong); border-radius: var(--r-ui); font-size: 1.25rem; }
.mobile-menu__quick { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin: 1rem 0 1.5rem; }
.mobile-menu__quick a, .mobile-menu__quick button { display: flex; flex-direction: column; gap: .2rem; padding: 1rem; border: 1px solid var(--line-strong); border-radius: var(--r-ui); text-decoration: none; color: var(--ink); font-weight: 700; min-height: 4.25rem; text-align: left; background: var(--panel); }
.mobile-menu__quick small { font-family: var(--font-mono); font-size: var(--t-sm); color: var(--ink-3); font-weight: 400; }
.mobile-menu__quick .is-emergency { border-color: var(--blue-light); color: var(--blue-light); }
.mobile-menu nav a { display: flex; justify-content: space-between; align-items: center; padding: 1rem 0; border-bottom: var(--hairline); font-family: var(--font-display); font-size: 1.9rem; text-decoration: none; color: var(--ink); }
.mobile-menu nav a::after { content: "→"; font-family: var(--font-ui); font-size: 1rem; color: var(--ink-3); }
.mobile-bar { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-nav); background: rgba(7, 11, 20, .92); backdrop-filter: blur(12px); border-top: var(--hairline); grid-template-columns: repeat(4, 1fr); }
.mobile-bar a, .mobile-bar button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .2rem; min-height: 3.75rem; font-size: 1rem; font-weight: 700; color: var(--ink); text-decoration: none; }
.mobile-bar svg { width: 1.25rem; height: 1.25rem; }
.mobile-bar .is-emergency { color: var(--blue-light); }
.help { position: fixed; right: 1.5rem; bottom: 1.5rem; z-index: var(--z-nav); display: inline-flex; align-items: center; gap: .7rem; min-height: 3.25rem; padding: 0 1.25rem 0 1rem; background: var(--gold); color: var(--night); border-radius: var(--r-ui); font-weight: 700; transition: transform var(--d-micro) var(--ease-premium), background-color var(--d-micro); box-shadow: 0 12px 30px -12px rgba(255, 210, 63, .5); }
.help:hover { transform: translateY(-2px); background: var(--ink); }
.help .ring { width: .6rem; height: .6rem; border-radius: 50%; background: var(--blue); }

/* Type set straight on a photograph never uses the faintest ink. */
.hero, .glance, .green, .day, .afterdark, .cta { --ink-3: var(--ink-2); }

/* ---------- 01 hero: a sequence of four frames -------------------------- */
.hero { position: relative; min-height: 100svh; display: grid; align-content: end; padding: calc(clamp(7rem, 15vh, 11rem) + var(--alert-h, 0px)) 0 clamp(3.5rem, 8vh, 6rem); overflow: hidden; isolation: isolate; background: var(--night); }
.hero__frames { position: absolute; inset: 0; z-index: -3; }
.hero__frames img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.8s var(--ease-soft); will-change: opacity, transform; transform: scale(1.04); }
.hero__frames img.is-on { opacity: 1; }
.hero__scrim { position: absolute; inset: 0; z-index: -2; background: linear-gradient(180deg, rgba(7, 11, 20, .5) 0%, rgba(7, 11, 20, .16) 30%, rgba(7, 11, 20, .62) 54%, rgba(7, 11, 20, .86) 80%, var(--night) 100%); }
.hero .eyebrow, .hero__index, .hero__scroll, .day__clock { color: var(--ink); text-shadow: 0 1px 2px rgba(7, 11, 20, .9), 0 0 20px rgba(7, 11, 20, .75); }
.hero .glow { z-index: -1; }
.hero .glow--gold { width: 70vw; height: 70vw; left: -22vw; bottom: -36vw; }
.hero .glow--teal { width: 50vw; height: 50vw; right: -14vw; top: -18vw; }
.hero__copy { position: relative; }
.hero__title { font-family: var(--font-display); font-weight: 400; font-size: var(--t-hero); line-height: .86; letter-spacing: -0.035em; margin: .4rem 0 1rem -0.03em; color: var(--ink); text-shadow: 0 2px 40px rgba(7, 11, 20, .5); }
.hero__title span { display: inline-block; clip-path: inset(0 0 100% 0); animation: titlein 1.1s var(--ease-premium) .2s both; }
@keyframes titlein { from { clip-path: inset(0 0 100% 0); transform: translateY(.1em); } to { clip-path: inset(-5% 0 -10% 0); transform: none; } }
.hero__line { font-family: var(--font-display); font-size: var(--t-xl); line-height: 1.15; max-width: 30rem; color: var(--ink); }
.hero__line em { font-style: italic; color: var(--gold); }
.hero__ctas { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem; }
.hero__index { position: absolute; right: var(--gutter); top: calc(clamp(7.5rem, 16vh, 12rem) + var(--alert-h, 0px)); text-align: right; background: var(--glass); border: 1px solid var(--glass-line); border-radius: var(--r-photo); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); padding: .9rem 1.1rem; text-shadow: none; font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: .1em; text-transform: uppercase; line-height: 1.8; }
.hero__index b { display: block; font-family: var(--font-display); font-size: var(--t-2xl); letter-spacing: 0; text-transform: none; color: var(--ink); line-height: 1; margin-bottom: .35rem; font-weight: 400; }
.hero__index .t { display: block; max-width: 18rem; margin-left: auto; transition: opacity .5s; }
.hero__dots { position: absolute; right: var(--gutter); bottom: clamp(3.5rem, 8vh, 6rem); display: flex; align-items: center; gap: .75rem; }
.hero__dotset { display: flex; gap: .5rem; }
.hero__dotset button { width: 2.75rem; height: 2.75rem; display: grid; place-items: center; }
/* Pause motion (WCAG 2.2.2): one saved setting for the slideshow, the drifting photographs and the film strip */
.hero__pause { display: inline-flex; align-items: center; gap: .55rem; min-height: 2.75rem; padding: 0 .9rem; border: 1px solid var(--line-strong); border-radius: var(--r-ui); background: var(--glass); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: .12em; text-transform: uppercase; color: var(--ink); }
.hero__pause:hover { border-color: var(--gold); }
.hero__pause-ico { width: .7rem; height: .8rem; border-left: 3px solid currentColor; border-right: 3px solid currentColor; }
[data-motion-toggle][aria-pressed="true"] .hero__pause-ico { width: 0; height: 0; border-style: solid; border-width: .42rem 0 .42rem .7rem; border-color: transparent transparent transparent currentColor; }
.hero__dotset button::before { content: ""; width: 2rem; height: 2px; background: rgba(243, 239, 230, .35); border-radius: 2px; transition: background-color var(--d-micro), transform var(--d-micro); }
.hero__dotset button[aria-pressed="true"]::before { background: var(--gold); transform: scaleY(2); }
.hero__scroll { position: absolute; left: 50%; bottom: 1.5rem; transform: translateX(-50%); font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: .14em; text-transform: uppercase; text-decoration: none; display: flex; flex-direction: column; align-items: center; gap: .5rem; min-height: 2.75rem; }
.hero__scroll::after { content: ""; width: 2px; height: 2.25rem; border-radius: 2px; background: var(--ink); animation: drop 2.4s var(--ease-soft) infinite; transform-origin: top; }
@keyframes drop { 0% { transform: scaleY(0); transform-origin: top; } 45% { transform: scaleY(1); transform-origin: top; } 55% { transform: scaleY(1); transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

/* ---------- 02 meet (words with living thumbnails) --------------------- */
.meet { background: var(--night); overflow: clip; }
.meet .glow--leaf { width: 46vw; height: 46vw; left: -18vw; top: 10%; }
.meet .grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.meet__words { font-family: var(--font-display); font-size: var(--t-3xl); line-height: .98; letter-spacing: -0.02em; }
.meet__words .lead { font-size: .5em; font-family: var(--font-mono); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--ink-3); display: block; margin-bottom: 1rem; font-weight: 500; }
.meet__words li { display: flex; align-items: center; gap: 1.5rem; padding: .3em 0; border-bottom: var(--hairline); }
.meet__words li em { font-style: italic; color: var(--gold); }
.meet__words li .thumb { width: 9rem; aspect-ratio: 3 / 2; flex: none; margin-left: auto; border-radius: var(--r-photo); overflow: hidden; opacity: .72; transition: opacity .5s, transform .6s var(--ease-premium); background: var(--panel); }
.meet__words li .thumb img { width: 100%; height: 100%; object-fit: cover; }
.meet__words li:hover .thumb, .meet__words li:focus-within .thumb { opacity: 1; transform: scale(1.04) rotate(-1deg); }
.meet__copy p + p { margin-top: 1rem; }
.meet__copy .tagline { margin-top: 2rem; padding-top: 1.25rem; border-top: var(--hairline); font-family: var(--font-display); font-style: italic; color: var(--ink-2); font-size: var(--t-lg); }
.meet__copy .tagline small { display: block; font-style: normal; font-family: var(--font-mono); font-size: var(--t-xs); color: var(--ink-3); letter-spacing: .08em; margin-top: .4rem; text-transform: uppercase; }

/* ---------- 03 glance (numbers over the night panorama) ---------------- */
.glance { position: relative; overflow: hidden; background: var(--night-2); }
.glance__pano { position: absolute; inset: 0; }
.glance__pano img { width: 110%; max-width: none; height: 100%; object-fit: cover; opacity: .5; }
.glance__pano::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, var(--night) 0%, rgba(12, 18, 32, .62) 35%, rgba(12, 18, 32, .68) 75%, var(--night) 100%); }
.glance .wrap { position: relative; }
.glance__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1rem 3rem; margin-bottom: 2.5rem; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.stat { padding: 1.5rem 1.5rem 1.4rem; }
.stat__n { font-family: var(--font-display); font-size: var(--t-3xl); line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; display: flex; align-items: baseline; gap: .15em; color: var(--ink); }
.stat__n small { font-size: .38em; font-family: var(--font-ui); font-weight: 700; letter-spacing: 0; color: var(--ink-2); }
.stat__l { margin-top: .5rem; font-weight: 700; }
.stat__s { margin-top: .3rem; font-family: var(--font-mono); font-size: var(--t-sm); color: var(--ink-3); }

/* ---------- 04 live (three panels that open) ---------------------------- */
.live { background: var(--night); overflow: clip; }
.live .glow--sky { width: 44vw; height: 44vw; right: -16vw; top: -10%; }
.live__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2rem 4rem; align-items: end; margin-bottom: 2.5rem; }
.live__head .display { margin-top: 1rem; }
.micro { margin-top: 1.25rem; }
.micro li { padding: .8rem 0; border-top: var(--hairline); font-family: var(--font-display); font-size: var(--t-lg); display: flex; align-items: center; gap: .9rem; }
.micro li::before { content: ""; width: .55rem; height: .55rem; border-radius: 50%; background: var(--grad-ribbon); flex: none; }
.micro li:last-child { border-bottom: var(--hairline); }
.panels { display: flex; gap: .75rem; height: clamp(26rem, 72vh, 42rem); }
.panel { position: relative; flex: 1; min-width: 0; overflow: hidden; border-radius: var(--r-photo); text-align: left; color: var(--ink); background: var(--panel); transition: flex 1s var(--ease-premium); }
.panel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease-soft), filter 1s; filter: saturate(.85) brightness(.85); }
.panel.is-open { flex: 2.4; }
.panel__btn { position: absolute; inset: 0; z-index: 1; border-radius: inherit; cursor: pointer; }
.panel__btn:focus-visible { outline-offset: -5px; } /* inside the panel, which clips its edges */
.panel.is-open img { filter: none; }
.panel__n { position: absolute; top: 1.25rem; left: 1.25rem; padding: .2rem .55rem; border-radius: var(--r-ui); background: rgba(7, 11, 20, .78); font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: .12em; color: var(--white); }
.panel__cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 3.5rem 1.5rem 1.4rem; background: linear-gradient(transparent, rgba(7, 11, 20, .8) 2.5rem, rgba(7, 11, 20, .92)); } /* dense from just above the title, however many lines it wraps to */
.panel__cap h3 { font-family: var(--font-display); font-size: var(--t-xl); line-height: 1.05; font-weight: 400; white-space: nowrap; }
.panel__cap p { color: var(--ink-2); font-size: var(--t-sm); max-width: 38ch; margin-top: .5rem; opacity: 0; max-height: 0; overflow: hidden; transition: opacity .6s .2s, max-height .8s var(--ease-premium); }
.panel.is-open .panel__cap p { opacity: 1; max-height: 11rem; }

/* ---------- 05 wipe: two villages, one barangay ------------------------- */
.wipe { position: relative; background: var(--night); }
.wipe__head { text-align: center; padding: var(--s-section) 0 2.5rem; }
.wipe__stage { height: 200vh; position: relative; }
.wipe__sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.wipe__a, .wipe__b { position: absolute; inset: 0; }
.wipe__a img, .wipe__b img { width: 100%; height: 100%; object-fit: cover; }
.wipe__b { clip-path: inset(0 0 0 calc((1 - var(--p, 0)) * 100%)); }
.wipe__seam { position: absolute; top: 0; bottom: 0; left: calc((1 - var(--p, 0)) * 100%); width: 2px; margin-left: -1px; background: var(--gold); box-shadow: 0 0 28px rgba(255, 210, 63, .9); }
.wipe__cap { position: absolute; left: var(--gutter); right: calc(var(--gutter) + 10.5rem); bottom: 2.25rem; display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: .14em; text-transform: uppercase; color: var(--white); text-shadow: 0 1px 2px rgba(7, 11, 20, .9), 0 0 20px rgba(7, 11, 20, .75); z-index: 1; }
.wipe__cap strong { display: block; font-family: var(--font-display); font-size: var(--t-xl); letter-spacing: 0; text-transform: none; font-weight: 400; }
/* each name sits on glass so it holds 7:1 over either photograph; the one being wiped away dims its ink only (to 82 %, still ≥ 7:1), never the glass */
.wipe__cap .a, .wipe__cap .b { background: var(--glass); border: 1px solid var(--glass-line); border-radius: var(--r-ui); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); padding: .6rem .9rem; text-shadow: none; }
.wipe__cap .a { color: rgb(255 253 248 / calc(1 - var(--p, 0) * .18)); } .wipe__cap .b { color: rgb(255 253 248 / calc(.82 + var(--p, 0) * .18)); text-align: right; }
.wipe__sticky::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7, 11, 20, .25), transparent 30%, transparent 58%, rgba(7, 11, 20, .84)); pointer-events: none; }

/* ---------- 06 neighbourhoods (line map) -------------------------------- */
.hoods { background: var(--night-2); overflow: clip; }
.hoods .grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, .8fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; margin-top: 2.5rem; }
.map { padding: 1.25rem; }
/* Map labels hold 14 px on screen (area names 20 px) at any map width: site.js sets --k = 800 / drawn width.
   A map drawn under 660 px wide keeps the area names and the hall, and drops the street names. */
.map__legend { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; margin-top: 1rem; }
.map__legend span { display: inline-flex; align-items: center; gap: .5rem; }
.map__legend i { width: .9rem; height: .9rem; border-radius: 3px; display: inline-block; border: 1px solid var(--line-strong); }
.hoodpanel { position: sticky; top: 6rem; padding: 1.5rem; }
.hoodpanel .photo { aspect-ratio: 4 / 3; margin: 1.25rem 0; }
.hoodpanel h3 { font-family: var(--font-display); font-size: var(--t-2xl); line-height: 1.02; margin-top: .5rem; }
.hoodpanel dl { display: grid; grid-template-columns: auto 1fr; gap: .4rem 1.25rem; margin-top: 1.25rem; font-size: var(--t-sm); }
.hoodpanel dt { font-family: var(--font-mono); font-size: var(--t-xs); color: var(--ink-3); letter-spacing: .06em; text-transform: uppercase; padding-top: .15rem; }
.hoodpanel .fade { transition: opacity var(--d-micro); }
.hoodpanel.is-switching .fade { opacity: 0; }
.hoods__list { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.5rem; }
.hoods__list button { min-height: 2.75rem; padding: 0 1rem; border: 1px solid var(--line-strong); border-radius: var(--r-ui); font-size: 1rem; font-weight: 600; }
.hoods__list button[aria-pressed="true"] { background: var(--gold); color: var(--night); border-color: var(--gold); }

/* ---------- 07 business ------------------------------------------------- */
.business { background: var(--night); overflow: clip; }
.business .glow--sky { width: 52vw; height: 52vw; left: -20vw; bottom: -20%; }
.business .grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(2rem, 5vw, 6rem); align-items: center; }
.business__visual { position: relative; padding-bottom: 3rem; }
.business__visual .photo--main { aspect-ratio: 4 / 5; }
.business__visual .photo--main figcaption { padding-top: 2.75rem; background: linear-gradient(transparent, rgba(7, 11, 20, .82) 2.25rem, rgba(7, 11, 20, .92)); } /* dense from just above the caption, however many lines it wraps to */
.business__visual .photo--inset { position: absolute; right: -6%; bottom: 0; width: 52%; aspect-ratio: 3 / 2; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .8); border: 1px solid var(--glass-line); }
.facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin: 2rem 0; }
.fact { padding: 1.1rem 1.25rem; }
.fact b { display: block; font-family: var(--font-display); font-size: var(--t-2xl); line-height: 1; letter-spacing: -0.02em; font-weight: 400; }
.fact span { display: block; font-size: var(--t-sm); color: var(--ink-2); margin-top: .35rem; }
.inline-list { display: flex; flex-wrap: wrap; gap: .5rem .9rem; font-size: var(--t-sm); color: var(--ink-2); margin-top: 1rem; }
.inline-list li::before { content: "·"; margin-right: .9rem; color: var(--ink-3); }
.inline-list li:first-child::before { display: none; }
.flow { counter-reset: step; display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; margin-top: 2.5rem; padding-top: 1.5rem; border-top: var(--hairline); }
.flow li { counter-increment: step; font-size: var(--t-sm); position: relative; padding-top: 2rem; }
.flow li::before { content: "0" counter(step); position: absolute; top: 0; left: 0; font-family: var(--font-mono); font-size: var(--t-xs); color: var(--gold); }
.flow li::after { content: ""; position: absolute; top: .55rem; left: 1.75rem; right: .5rem; height: 1px; background: var(--line-strong); }
.flow li:last-child::after { display: none; }
.flow b { display: block; font-weight: 700; }
.business__links { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; margin-top: 2rem; }

/* ---------- 08 green (a canopy you scroll into) ------------------------- */
.green { position: relative; overflow: clip; isolation: isolate; }
.green__bg { position: absolute; inset: -12% 0; z-index: -2; }
.green__bg img { width: 100%; height: 100%; object-fit: cover; opacity: .5; }
.green::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, var(--night) 0%, rgba(7, 11, 20, .7) 30%, rgba(7, 11, 20, .7) 70%, var(--night) 100%); }
.green__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2rem; align-items: end; margin-bottom: 3rem; }
.green__strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; align-items: start; }
.green__strip .col:nth-child(2) { margin-top: 5rem; }
.green__strip .col:nth-child(3) { margin-top: 2.5rem; }
.green__strip .photo { aspect-ratio: 3 / 4; }
.green__strip .cap { margin-top: .75rem; display: flex; justify-content: space-between; gap: 1rem; font-size: var(--t-sm); color: var(--ink-2); }
.green__strip .cap span { font-family: var(--font-mono); font-size: var(--t-sm); color: var(--ink-3); white-space: nowrap; }
.green__places { margin-top: 3rem; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; border-top: var(--hairline); padding-top: 1.5rem; }
.green__places li b { display: block; font-family: var(--font-display); font-size: var(--t-lg); }
.green__places li span { font-size: var(--t-sm); color: var(--ink-2); }

/* ---------- 09 experience ----------------------------------------------- */
.exp-section { background: var(--night); overflow: clip; }
.exp-section .glow--rose { width: 40vw; height: 40vw; right: -12vw; top: 20%; }
.exp__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 1rem 3rem; margin-bottom: 3rem; }
.exp__grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 1.25rem; }
.exp { position: relative; text-decoration: none; color: var(--ink); display: block; }
.exp .photo { margin-bottom: .85rem; }
.exp h3 { font-family: var(--font-display); font-size: var(--t-xl); line-height: 1.1; }
.exp .eyebrow { margin-bottom: .4rem; }
.exp p { color: var(--ink-2); font-size: var(--t-sm); margin-top: .35rem; max-width: 36ch; }
.exp--1 { grid-column: 1 / 8; grid-row: 1 / 3; } .exp--2 { grid-column: 8 / 13; grid-row: 1; } .exp--3 { grid-column: 8 / 13; grid-row: 2; }
.exp--4 { grid-column: 1 / 5; grid-row: 3; } .exp--5 { grid-column: 5 / 9; grid-row: 3; margin-top: 3rem; } .exp--6 { grid-column: 9 / 13; grid-row: 3; }

/* ---------- 10 film strip gallery -------------------------------------- */
.gallery { background: var(--night-2); color: var(--ink); overflow: clip; position: relative; }
.gallery .glow--teal { width: 50vw; height: 50vw; left: 30%; top: -30%; }
.gallery__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1.5rem 3rem; margin-bottom: 2rem; }
.gallery__head .display { font-size: var(--t-3xl); }
.chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.chips button { min-height: 2.75rem; padding: 0 1rem; border: 1px solid var(--line-strong); border-radius: var(--r-ui); color: var(--ink); font-size: 1rem; font-weight: 600; transition: background-color var(--d-micro), border-color var(--d-micro), color var(--d-micro); }
.chips button:hover { border-color: var(--ink); }
.chips button[aria-pressed="true"] { background: var(--gold); border-color: var(--gold); color: var(--night); }
.film { position: relative; padding: 1.25rem 0; }
.film::before, .film::after { content: ""; position: absolute; left: calc(-1 * var(--gutter)); right: calc(-1 * var(--gutter)); height: .9rem; background: repeating-linear-gradient(90deg, transparent 0 .9rem, rgba(243, 239, 230, .18) .9rem 1.6rem, transparent 1.6rem 2.5rem); opacity: .7; }
.film::before { top: 0; } .film::after { bottom: 0; }
.rail { display: flex; gap: 1.25rem; overflow-x: auto; scroll-snap-type: x proximity; scroll-padding-inline: var(--gutter); padding: .5rem var(--gutter) .75rem; margin: 0 calc(-1 * var(--gutter)); scrollbar-width: none; cursor: grab; }
.rail::-webkit-scrollbar { display: none; }
.rail.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.rail.is-dragging .photo img { pointer-events: none; }
.rail figure { flex: 0 0 auto; scroll-snap-align: start; margin: 0; width: min(78vw, 34rem); }
.rail figure.tall { width: min(60vw, 20rem); }
.rail figure.tall .photo { aspect-ratio: 3 / 4; } .rail figure:not(.tall) .photo { aspect-ratio: 3 / 2; }
.rail figure button { display: block; width: 100%; text-align: left; color: inherit; }
.rail figure .meta { display: flex; justify-content: space-between; gap: 1rem; margin-top: .65rem; font-size: var(--t-sm); color: var(--ink-2); }
.rail figure .meta span { font-family: var(--font-mono); font-size: var(--t-xs); color: var(--ink-3); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.rail figure.is-hidden { display: none; }
.gallery__hint { margin-top: 1rem; display: flex; justify-content: space-between; align-items: center; gap: 1rem; color: var(--ink-3); }
.nav-arrows { display: flex; gap: .5rem; }
.nav-arrows button { width: 2.75rem; height: 2.75rem; border: 1px solid var(--line-strong); border-radius: 50%; color: var(--ink); display: grid; place-items: center; }
.nav-arrows button:hover { background: var(--ink); color: var(--night); }

/* ---------- 11 a day in Bel-Air (photographs change as you scroll) ------ */
.day { position: relative; isolation: isolate; background: var(--night); }
.day__scene { position: sticky; top: 0; height: 100vh; z-index: 0; overflow: hidden; }
.day__frames img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.2s var(--ease-soft); transform: scale(1.03); }
.day__frames img.is-on { opacity: 1; }
.day__scene::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7, 11, 20, .62), rgba(7, 11, 20, .4) 40%, rgba(7, 11, 20, .5) 100%); }
.day__clock { position: absolute; right: var(--gutter); top: calc(6rem + var(--alert-h, 0px)); z-index: 1; text-align: right; background: var(--glass); border: 1px solid var(--glass-line); border-radius: var(--r-photo); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); padding: .9rem 1.1rem; text-shadow: none; font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: .14em; text-transform: uppercase; }
.day__clock b { display: block; font-family: var(--font-display); font-size: var(--t-3xl); letter-spacing: -0.02em; color: var(--ink); line-height: 1; font-variant-numeric: tabular-nums; font-weight: 400; }
.day__moments { position: relative; z-index: 1; margin-top: -100vh; padding: 20vh 0 20vh; }
.day__head { max-width: 40rem; margin-bottom: 24vh; }
.day__head .display { margin-top: 1rem; }
.moments { display: grid; gap: 46vh; }
.moment { max-width: 30rem; padding: 1.5rem 1.75rem; }
.moment:nth-child(even) { margin-left: auto; }
.moment__time { font-family: var(--font-display); font-size: var(--t-2xl); line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.moment__time small { display: block; font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); margin-top: .5rem; }
.moment__cap { font-family: var(--font-display); font-size: var(--t-xl); line-height: 1.15; margin-top: 1rem; }
.moment__cap p { font-family: var(--font-ui); font-size: var(--t-base); color: var(--ink-2); margin-top: .6rem; }

/* ---------- 12 community ------------------------------------------------ */
.community { background: var(--night); position: relative; overflow: clip; }
.community .glow--gold { width: 46vw; height: 46vw; right: -16vw; top: 0; }
.community .grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 6rem); align-items: start; }
.community .display { margin: 1rem 0 1.5rem; }
.community__feature { position: relative; }
.community__feature .photo { aspect-ratio: 4 / 5; }
.community__feature .photo--small { position: absolute; width: 44%; right: -8%; bottom: 10%; aspect-ratio: 3 / 2; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .9); border: 1px solid var(--glass-line); }
.programs { margin-top: 2rem; border-top: 2px solid; border-image: var(--grad-ribbon) 1; }
.programs li { display: grid; grid-template-columns: 2.5rem 1fr; gap: 1rem; align-items: start; padding: 1.1rem 0; border-bottom: var(--hairline); }
.programs .n { font-family: var(--font-mono); font-size: var(--t-xs); color: var(--gold); padding-top: .5rem; }
.programs h3 { font-family: var(--font-display); font-size: var(--t-xl); line-height: 1.1; }
.programs p { color: var(--ink-2); font-size: var(--t-sm); margin-top: .35rem; max-width: 52ch; }
.programs p .note { display: block; margin-top: .25rem; }
.community__people { margin-top: 4rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; align-items: end; }
.community__people .photo { aspect-ratio: 3 / 2; }
.community__people .cap { margin-top: .6rem; display: flex; justify-content: space-between; gap: 1rem; font-size: var(--t-sm); color: var(--ink-2); }
.community__people .cap span { font-family: var(--font-mono); font-size: var(--t-sm); color: var(--ink-3); white-space: nowrap; }
.community__people .quote { align-self: center; padding: 0 1rem; font-family: var(--font-display); font-size: var(--t-xl); font-style: italic; color: var(--ink-2); }
.community__people .quote small { display: block; font-style: normal; font-family: var(--font-mono); font-size: var(--t-xs); color: var(--ink-3); margin-top: .75rem; letter-spacing: .08em; text-transform: uppercase; }

/* ---------- 13 services band ------------------------------------------- */
.services { background: var(--night-2); border-top: var(--hairline); border-bottom: var(--hairline); }
.services .grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: clamp(2rem, 5vw, 6rem); align-items: center; }
.services .display { margin: 1rem 0 1rem; }
.search-fake { display: flex; align-items: center; gap: .8rem; width: 100%; min-height: 3.5rem; padding: 0 1rem; border: 1px solid var(--line-strong); border-radius: var(--r-ui); background: var(--panel); color: var(--ink-3); text-align: left; font-size: 1.0625rem; }
.search-fake svg { width: 1.25rem; height: 1.25rem; color: var(--ink); }
.search-fake kbd { margin-left: auto; font-family: var(--font-mono); font-size: var(--t-sm); border: 1px solid var(--line); padding: .1rem .35rem; border-radius: 2px; }
.popular { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
.popular a, .popular button { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 .9rem; border: 1px solid var(--line-strong); border-radius: var(--r-ui); font-size: 1rem; font-weight: 600; color: var(--ink); text-decoration: none; }
.popular a:hover, .popular button:hover { border-color: var(--ink); }
.svcs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.svc { display: grid; grid-template-columns: 3rem 1fr; gap: 1rem; align-items: center; padding: 1.1rem 1.1rem; text-decoration: none; color: var(--ink); transition: border-color var(--d-micro), transform var(--d-micro) var(--ease-premium); }
.svc:hover { border-color: var(--gold); transform: translateY(-2px); }
.svc .ico { width: 2.25rem; height: 2.25rem; color: var(--gold); }
.svc b { display: block; font-weight: 700; }
.svc small { display: block; color: var(--ink-3); font-size: var(--t-sm); }

/* ---------- 14 news ----------------------------------------------------- */
.news { background: var(--night); }
.news__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1.5rem 3rem; margin-bottom: 2.5rem; }
.news__grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(2rem, 4vw, 4rem); }
.story { display: block; text-decoration: none; color: var(--ink); }
.story .photo { margin-bottom: 1rem; }
.story__meta { display: flex; gap: 1rem; font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin-bottom: .5rem; }
.story__meta .cat { color: var(--gold); }
.story h3 { font-family: var(--font-display); line-height: 1.08; }
.story--feature h3 { font-size: var(--t-2xl); }
.story--feature p { margin-top: .75rem; color: var(--ink-2); max-width: 56ch; }
.story--small { display: grid; grid-template-columns: 7.5rem 1fr; gap: 1.25rem; align-items: start; padding: 1.25rem 0; border-top: var(--hairline); }
.story--small .photo { aspect-ratio: 1; margin: 0; }
.story--small h3 { font-size: var(--t-lg); }
.story--small p { font-size: var(--t-sm); color: var(--ink-2); margin-top: .35rem; }
/* a small story without a photograph: its words take the whole row, not the thumbnail's column (UX-03: in the
   7.5rem column the summary ran to ten lines and the homepage went 0.28 screen over at 1366 px) */
.story--small > div:only-child { grid-column: 1 / -1; }
.story.is-hidden { display: none; }
.events { margin-top: 2rem; border-top: 2px solid; border-image: var(--grad-ribbon) 1; }
.events__title { display: flex; justify-content: space-between; align-items: baseline; padding: 1rem 0 .5rem; }
.events li { display: grid; grid-template-columns: 5.5rem 1fr auto; gap: 1rem; align-items: center; padding: .9rem 0; border-top: var(--hairline); }
.events .d { font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); line-height: 1.4; }
.events .d b { display: block; font-family: var(--font-display); font-size: 1.4rem; font-weight: 400; letter-spacing: 0; color: var(--ink); text-transform: none; }
.events h4 { font-weight: 700; font-size: var(--t-base); }
.events h4 small { display: block; font-weight: 400; color: var(--ink-3); font-size: var(--t-sm); }
.badge { display: inline-flex; align-items: center; gap: .4rem; font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: .06em; text-transform: uppercase; padding: .35rem .6rem; border: 1px solid var(--line-strong); border-radius: var(--r-ui); white-space: nowrap; }
.badge--open { background: var(--gold); border-color: var(--gold); color: var(--night); }

/* ---------- 15 after dark ----------------------------------------------- */
.afterdark { position: relative; overflow: hidden; color: var(--ink); min-height: 86vh; display: grid; align-items: end; isolation: isolate; }
.afterdark__bg { position: absolute; inset: 0; z-index: -2; }
.afterdark__bg img { width: 100%; height: 100%; object-fit: cover; }
.afterdark::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(7, 11, 20, .94) 0%, rgba(7, 11, 20, .88) 50%, rgba(7, 11, 20, .3) 75%, rgba(7, 11, 20, .15) 100%), linear-gradient(180deg, var(--night), transparent 25%, transparent 80%, var(--night)); } /* dense under the text column so it holds 7:1 whatever the photograph; the right third stays open */
.afterdark .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2rem; align-items: end; padding-bottom: var(--s-section); padding-top: var(--s-section); }
.afterdark .photo { aspect-ratio: 3 / 2; box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .9); border: 1px solid var(--glass-line); }

/* ---------- 16 cta ------------------------------------------------------ */
.cta { position: relative; min-height: 84vh; display: grid; place-items: center; text-align: center; color: var(--ink); isolation: isolate; overflow: hidden; }
.cta img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.cta::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, var(--night), rgba(7, 11, 20, .74) 30%, rgba(7, 11, 20, .84)); z-index: -1; }
.cta .display { font-size: var(--t-3xl); }
.cta .lines { margin-top: 1rem; font-family: var(--font-display); font-size: var(--t-xl); font-style: italic; color: var(--ink-2); }
.cta .ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; margin-top: 2rem; }
.cta .eyebrow { justify-content: center; color: var(--ink); }

/* ---------- footer ------------------------------------------------------ */
.footer { background: var(--night); color: var(--ink); position: relative; overflow: hidden; border-top: var(--hairline); }
.footer a { color: var(--ink); }
.footer a:hover { color: var(--gold); }
.footer__strip { height: clamp(7rem, 14vw, 12rem); position: relative; }
.footer__strip img { width: 100%; height: 100%; object-fit: cover; opacity: .55; -webkit-mask-image: linear-gradient(180deg, transparent, #000 40%, #000 70%, transparent); mask-image: linear-gradient(180deg, transparent, #000 40%, #000 70%, transparent); }
.footer__grid { display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); gap: 2.5rem 2rem; padding: 3rem 0 2.5rem; }
.footer h3 { font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--ink-3); margin-bottom: 1rem; font-weight: 500; }
.footer ul li { padding: 0; }
.footer ul li a { text-decoration: none; min-height: 2.75rem; padding: .3rem 0; display: inline-flex; align-items: center; }
.footer ul li a:hover { text-decoration: underline; }
.footer__hall address { font-style: normal; line-height: 1.6; }
.footer__hall address b { display: block; font-family: var(--font-display); font-size: var(--t-xl); font-weight: 400; margin-bottom: .5rem; }
.footer__hall a { text-decoration: none; }
/* the phone numbers and email are links: underlined so they don't read as address text (WCAG 1.4.1), and 44 px tall to tap */
.footer__hall address a { text-decoration: underline; text-underline-offset: .18em; display: inline-flex; align-items: center; min-height: 2.75rem; }
.footer__hall .btn { margin-top: 1.25rem; }
.footer__em li { display: grid; grid-template-columns: 1fr auto; align-items: start; gap: .25rem 1rem; padding: .45rem 0; border-bottom: var(--hairline); }
.footer__em li a { font-family: var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; min-width: 2.75rem; justify-content: flex-end; }
.footer__bottom { border-top: var(--hairline); padding: 1.75rem 0 5.5rem; display: flex; flex-wrap: wrap; gap: 1.5rem 3rem; align-items: center; justify-content: space-between; font-size: var(--t-sm); }
.footer__bottom .seal { display: flex; align-items: center; gap: 1rem; }
.footer__bottom .seal img { width: 3rem; height: 3rem; border-radius: 50%; background: var(--white); }
.footer__bottom .seal em { display: block; font-family: var(--font-display); font-style: italic; color: var(--ink-2); max-width: 44ch; }
.footer__bottom .footer__disclaimer { display: block; margin-top: .5rem; font-size: var(--t-xs); color: var(--ink-2); max-width: 60ch; }
.footer__bottom .social { display: flex; gap: 1.25rem; }
.footer__bottom .social a { text-decoration: none; font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: .1em; text-transform: uppercase; min-height: 2.75rem; display: inline-flex; align-items: center; white-space: nowrap; }

/* ---------- dialogs ----------------------------------------------------- */
dialog { border: 0; padding: 0; background: transparent; color: var(--ink); max-width: none; max-height: none; }
dialog::backdrop { background: rgba(7, 11, 20, .72); backdrop-filter: blur(6px); }
.finder { --top: 10vh; width: min(100% - 2rem, 44rem); margin: var(--top) auto 0; max-height: calc(100dvh - var(--top) - 1rem); overflow-y: auto; background: var(--panel); border: 1px solid var(--glass-line); border-radius: var(--r-photo); box-shadow: 0 40px 100px -30px rgba(0, 0, 0, .9); }
.finder__head { padding: 1.5rem 1.5rem 0; display: flex; justify-content: space-between; align-items: start; gap: 1rem; }
.finder__head h2 { font-family: var(--font-display); font-size: var(--t-xl); line-height: 1.1; }
.finder__head p { color: var(--ink-3); font-size: var(--t-sm); margin-top: .25rem; }
.x { width: 2.75rem; height: 2.75rem; display: grid; place-items: center; border: 1px solid var(--line-strong); border-radius: var(--r-ui); font-size: 1.1rem; }
.finder__search { margin: 1.25rem 1.5rem 0; position: relative; }
.finder__search input { width: 100%; min-height: 3.25rem; padding: 0 1rem 0 2.75rem; border: 1px solid var(--line-strong); border-radius: var(--r-ui); background: var(--night-2); font: inherit; font-size: 1.0625rem; color: var(--ink); transition: box-shadow var(--d-micro); }
.finder__search input::placeholder { color: var(--ink-3); opacity: 1; }
.finder__search input:focus { border-color: var(--gold); } /* the 3 px gold ring comes from :focus-visible, as on every control */
.finder__search svg { position: absolute; left: .9rem; top: 50%; transform: translateY(-50%); width: 1.25rem; height: 1.25rem; color: var(--ink-3); }
.finder__list { max-height: min(52vh, 30rem); overflow-y: auto; padding: 1rem .75rem; }
.finder__group { font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--ink-3); padding: .75rem .75rem .35rem; }
.finder__item { display: grid; grid-template-columns: 2rem 1fr auto; align-items: center; gap: .75rem; width: 100%; padding: .65rem .75rem; border-radius: var(--r-ui); text-align: left; text-decoration: none; color: var(--ink); min-height: 3rem; }
.finder__item .ico { width: 1.5rem; height: 1.5rem; color: var(--gold); }
.finder__item b { font-weight: 700; display: block; } .finder__item small { display: block; color: var(--ink-3); font-size: var(--t-sm); }
.finder__item .k { font-family: var(--font-mono); font-size: var(--t-sm); color: var(--ink-3); }
.finder__item:hover, .finder__item.is-active { background: var(--panel-2); }
.finder__item.is-hidden { display: none; }
.finder__empty { padding: 1.5rem .75rem; color: var(--ink-3); }
.finder__foot { padding: .75rem 1.5rem; border-top: var(--hairline); display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: var(--t-sm); color: var(--ink-3); }
.finder__foot kbd { border: 1px solid var(--line); padding: 0 .3rem; border-radius: 2px; }
/* both windows scroll when the page is zoomed (WCAG 1.4.10): never taller than the screen below their top margin */
.emergency { --top: 10vh; width: min(100% - 2rem, 34rem); margin: var(--top) auto 0; max-height: calc(100dvh - var(--top) - 1rem); overflow-y: auto; background: var(--panel); border: 1px solid var(--glass-line); border-radius: var(--r-photo); border-top: 6px solid var(--blue); box-shadow: 0 40px 100px -30px rgba(0, 0, 0, .9); }
.emergency__inner { padding: 1.5rem; }
.emergency__head { display: flex; justify-content: space-between; align-items: start; gap: 1rem; }
.emergency__head h2 { font-family: var(--font-display); font-size: var(--t-2xl); line-height: 1; }
.emergency__head p { color: var(--ink-2); margin-top: .5rem; }
.emergency__911 { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.25rem; padding: 1.25rem; background: var(--blue); color: var(--on-blue); text-decoration: none; border-radius: var(--r-ui); }
.emergency__911 b { font-family: var(--font-display); font-size: 3rem; line-height: 1; font-weight: 400; }
.emergency__911 span { font-size: var(--t-sm); max-width: 20ch; text-align: right; }
.emergency__911:hover { background: var(--blue-ink); color: var(--on-blue); }
.emergency ul { margin-top: 1rem; }
.emergency ul li { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .85rem 0; border-top: var(--hairline); }
.emergency ul li a { font-family: var(--font-mono); text-decoration: none; font-weight: 700; min-height: 2.75rem; display: inline-flex; align-items: center; white-space: nowrap; color: var(--ink); }
.emergency ul li small { display: block; color: var(--ink-3); font-size: var(--t-sm); }
.lightbox { width: 100vw; height: 100vh; max-width: 100vw; max-height: 100vh; margin: 0; background: rgba(7, 11, 20, .97); color: var(--ink); display: none; }
.lightbox[open] { display: grid; grid-template-rows: auto 1fr auto; }
.lightbox__bar { display: flex; justify-content: space-between; align-items: center; padding: 1rem var(--gutter); font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.lightbox__bar button { width: 2.75rem; height: 2.75rem; border: 1px solid var(--line-strong); border-radius: 50%; color: var(--ink); display: grid; place-items: center; }
.lightbox__stage { display: grid; place-items: center; padding: 0 var(--gutter); min-height: 0; }
.lightbox__stage img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; border-radius: var(--r-photo); animation: lbin .45s var(--ease-premium); }
@keyframes lbin { from { transform: scale(.96); opacity: 0; } to { transform: none; opacity: 1; } }
.lightbox__foot { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1rem var(--gutter) 1.5rem; }
.lightbox__foot p { font-size: var(--t-sm); color: var(--ink-2); }

/* ---------- cursor label (desktop, media only) ------------------------- */
.cursor { position: fixed; left: 0; top: 0; z-index: var(--z-cursor); pointer-events: none; padding: .45rem .7rem; border-radius: var(--r-ui); background: var(--gold); color: var(--night); font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: .1em; text-transform: uppercase; opacity: 0; transform: translate(14px, 14px) scale(.9); transition: opacity var(--d-micro), transform var(--d-micro) var(--ease-premium); }
.cursor.is-on { opacity: 1; transform: translate(14px, 14px) scale(1); }

/* ---------- responsive -------------------------------------------------- */
@media (max-width: 1100px) {
  .mega__inner { grid-template-columns: 1fr 1fr; } .mega__feature { grid-column: 1 / -1; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .flow { grid-template-columns: repeat(3, 1fr); row-gap: 1.75rem; }
  .green__places { grid-template-columns: repeat(2, 1fr); }
  .footer__grid { grid-template-columns: 1fr 1fr 1fr; } .footer__hall { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .nav__primary, .mega { display: none; }
  .util kbd, .util--services .label { display: none; }
  .burger { display: grid; }
  .meet .grid, .live__head, .business .grid, .community .grid, .news__grid, .hoods .grid, .green__head, .services .grid, .afterdark .wrap { grid-template-columns: 1fr; }
  /* one column: the text runs over the open side of the photograph, so it sits on glass like the stat cards */
  .afterdark .wrap > div:first-child { background: var(--glass); border: 1px solid var(--glass-line); border-radius: var(--r-photo); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); padding: 1.5rem; }
  .meet__words li .thumb { width: 5.5rem; }
  .panels { flex-direction: column; height: auto; }
  .panel { flex: none; height: 12rem; transition: height .8s var(--ease-premium); }
  .panel.is-open { flex: none; height: 22rem; }
  .wipe__stage { height: 160vh; }
  .hoodpanel { position: static; }
  .business__visual { margin-bottom: 1rem; }
  .green__strip { grid-template-columns: repeat(2, 1fr); }
  .green__strip .col:nth-child(2), .green__strip .col:nth-child(3) { margin-top: 0; }
  .green__strip .col:nth-child(3) { grid-column: 1 / -1; } .green__strip .col:nth-child(3) .photo { aspect-ratio: 3 / 2; }
  .exp__grid { grid-template-columns: repeat(6, 1fr); }
  .exp--1 { grid-column: 1 / -1; grid-row: auto; } .exp--2, .exp--3 { grid-column: span 3; grid-row: auto; } .exp--4, .exp--5, .exp--6 { grid-column: span 2; grid-row: auto; margin-top: 0; }
  .moments { gap: 34vh; } .moment, .moment:nth-child(even) { margin-left: 0; max-width: none; }
  .day__clock { top: calc(5rem + var(--alert-h, 0px)); }
  .community__feature .photo--small { display: none; }
  .community__people { grid-template-columns: 1fr 1fr; } .community__people .quote { grid-column: 1 / -1; padding: 1rem 0; }
  .svcs { grid-template-columns: 1fr; }
  .story--small { grid-template-columns: 6rem 1fr; }
  .mobile-bar { display: grid; } .help { display: none; } body { padding-bottom: 3.75rem; }
  .hero__index { display: none; }
  .hero__dots { left: var(--gutter); right: auto; bottom: 4.25rem; gap: .5rem; } .hero__scroll { display: none; } /* above the floating Message us button */
  /* the hero ends where the fixed bottom bar begins, so the photo controls show; its buttons end above that row */
  .hero { min-height: calc(100svh - 3.75rem); padding-bottom: 8.5rem; }
  /* small screens and large text push the hero copy up the photo, where the shade was thinnest: hold it from a quarter down */
  .hero__scrim { background: linear-gradient(180deg, rgba(7, 11, 20, .5) 0%, rgba(7, 11, 20, .4) 20%, rgba(7, 11, 20, .78) 38%, rgba(7, 11, 20, .88) 75%, var(--night) 100%); }
  /* phones: the button keeps its 44 px and its spoken name, the words go (the menu has the full "Pause motion" button) */
  .hero__pause { width: 2.75rem; padding: 0; justify-content: center; } .hero__pause-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .footer__bottom { padding-bottom: 2rem; }
}
@media (max-width: 600px) {
  .stats { grid-template-columns: 1fr; gap: .75rem; }
  .flow { grid-template-columns: 1fr 1fr; }
  .facts { grid-template-columns: 1fr 1fr; gap: .75rem; }
  .business__visual .photo--inset { position: static; width: 100%; margin-top: .75rem; }
  .business__visual { padding-bottom: 0; }
  .green__places { grid-template-columns: 1fr; }
  .exp--2, .exp--3, .exp--4, .exp--5, .exp--6 { grid-column: 1 / -1; }
  .community__people { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .events li { grid-template-columns: 1fr; gap: .35rem; }
  .story--small { grid-template-columns: 5.5rem minmax(0, 1fr); gap: 1rem; } .story--small .story__meta { flex-wrap: wrap; gap: .2rem .75rem; } /* a thumbnail row on phones, so the homepage stays short */
  .hero__line { font-size: 1.35rem; }
  .finder, .emergency { --top: 4vh; }
  .util--services { display: none; } .nav__inner { gap: .75rem; } .brand { font-size: 1.15rem; gap: .5rem; } .brand img { width: 2rem; height: 2rem; }
  .meet__words li .thumb { display: none; }
  .panel__cap h3 { white-space: normal; }
}

/* ---------- the bar ---------------------------------------------------------
   Type in the bar is 16 px and it carries the text size control, so it gives up its extras before
   anything is squeezed: the shortcut hint, the strapline, the word "Search", then the links move into
   the menu button; on phones the text size control moves into the menu, and the smallest screens keep
   only the seal. The control is the last thing in the bar so that it stays under the pointer when the
   text changes size. Widths are for a 16 px root; js/public/prefs-head.js rescales them with the text size. */
.nav__utils { margin-left: auto; }
@media (max-width: 1560px) { .util kbd { display: none; } .nav__inner { gap: 1rem; } .nav__primary > li > a, .nav__primary > li > button { padding: 0 .55rem; } .nav__primary > li > a::after, .nav__primary > li > button::after { left: .55rem; right: .55rem; } }
@media (max-width: 1420px) { .nav .brand small { display: none; } }
@media (min-width: 1265px) and (max-width: 1330px) { .util--services .label { display: none; } }
@media (max-width: 1264px) { .nav__primary, .mega, .nav__inner > nav { display: none; } .burger { display: grid; } }
/* up to 760 px the Services button joins the Menu too: from 641 px (and a 768–834 px tablet at A+ / A++) it pushed the
   text-size group past the edge (scan A-1, UX-92) */
@media (max-width: 760px) { .util--services { display: none; } }
@media (max-width: 520px) { .nav .textsize { display: none; } }
@media (max-width: 600px) { .nav__inner { gap: .75rem; } }
@media (max-width: 345px) { .nav__inner { gap: .4rem; } .nav .brand { gap: .4rem; font-size: 1rem; } .util { padding: 0 .6rem; } .util--emergency .dot { display: none; } }
@media (max-width: 318px) { .nav .brand > span { display: none; } }

/* ---------- text size control (js/public/prefs-head.js) -------------------
   A, A+ and A++ set the root size to 100, 112.5 or 125 % of the reader's browser size; type, spacing and
   controls are in rem and follow. Display type (--u in tokens.css) and the map labels stay as they are. */
html[data-text="1"] { font-size: 112.5%; --ts: 1.125; }
html[data-text="2"] { font-size: 125%; --ts: 1.25; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.textsize { display: inline-flex; flex: none; border: 1px solid var(--line-strong); border-radius: var(--r-ui); }
.textsize button { min-width: 2.75rem; min-height: 2.75rem; padding: 0 .5rem; font-size: 1rem; font-weight: 700; color: var(--ink); transition: background-color var(--d-micro), color var(--d-micro); }
.textsize button + button { border-left: 1px solid var(--line-strong); }
.textsize button:hover { background: var(--panel); }
.textsize button[aria-pressed="true"] { background: var(--gold); color: var(--night); }
.mobile-menu__text { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: .75rem; font-weight: 700; }
.mobile-menu__text .textsize button { min-width: 3.25rem; min-height: 3rem; }
.motion-toggle { display: inline-flex; align-items: center; gap: .55rem; white-space: nowrap; min-height: 3rem; padding: 0 1rem; border: 1px solid var(--line-strong); border-radius: var(--r-ui); font-weight: 700; color: var(--ink); }
.motion-toggle[aria-pressed="true"], .hero__pause[aria-pressed="true"] { border-color: var(--gold); }
/* what must still fit when the text is large or the screen is small */
.mobile-bar a, .mobile-bar button { font-size: clamp(16px, 4.2vw, 1rem); }
.footer__hall address { overflow-wrap: anywhere; }
.footer__em li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .1rem 1rem; }
@media (max-width: 600px) { .btn { white-space: normal; line-height: 1.2; } }
.brand { flex: none; }
.grid > * { min-width: 0; }
.footer__bottom .social { flex-wrap: wrap; row-gap: 0; }
@media (min-width: 601px) and (max-width: 1100px) { .events li { grid-template-columns: 5.5rem 1fr; } .events li .badge { grid-column: 2; justify-self: start; } }
@media (max-width: 345px) { .footer__grid { grid-template-columns: 1fr; } }
.photo figcaption { overflow-wrap: anywhere; }
.green__strip .col { min-width: 0; }
.green__strip .cap, .community__people .cap { flex-wrap: wrap; column-gap: 1rem; row-gap: 0; }
@media (max-width: 600px) { .green__strip .cap span, .community__people .cap span { white-space: normal; } }
.panel__cap h3 { white-space: normal; }
@media (max-width: 1100px) { .meet__words li .thumb { width: 5.5rem; } }
/* on phones the two wipe captions stack, clear of the tab bar and the chat button */
@media (max-width: 900px) { .wipe__cap { right: var(--gutter); bottom: 8.5rem; flex-direction: column; gap: .6rem; } .wipe__cap .b { align-self: flex-end; } }
@media (max-width: 330px) { .search-fake kbd { display: none; } }