/* Portsmouth Square Garage — shared styles
   Mural-forward warm palette. Provisional hues; sample exact values from the mural. */
:root{
  --red:        #B5232A;   /* Chinatown vermilion */
  --red-deep:   #7E1418;   /* lacquer red */
  --gold:       #C68A2E;   /* imperial gold (darkened for contrast) */
  --gold-soft:  #E7C97F;
  --jade:       #2F6E5E;
  --ink:        #241D19;   /* warm near-black text */
  --ink-soft:   #564C43;
  --paper:      #FBF5EA;   /* warm off-white background */
  --paper-2:    #F4EAD8;
  --line:       #E3D6BF;
  --white:      #fffdf8;
  --radius: 14px;
  --shadow: 0 10px 30px rgba(60,30,10,.10);
  --wrap: 1120px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *{transition:none !important; animation:none !important}
}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:"Inter",system-ui,-apple-system,sans-serif;
  font-size:19px; line-height:1.65; -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:"Fraunces",Georgia,serif; font-weight:500; line-height:1.14; letter-spacing:-.01em; margin:0}
a{color:var(--red)}

/* CJK fallbacks. Inter and Fraunces carry no Chinese glyphs, so the Chinese pages
   were falling through to a generic sans. Latin still renders in Inter/Fraunces;
   only the Chinese characters reach these faces. Traditional pages prefer the TC
   cuts, Simplified pages the SC cuts, because the same codepoint is drawn
   differently in each (e.g. 骨, 直, 曾). */
:lang(zh-Hant) body, html[lang="zh-Hant"] body{
  font-family:"Inter",system-ui,-apple-system,"PingFang TC","Hiragino Sans CNS","Microsoft JhengHei","Noto Sans CJK TC","Noto Sans TC",sans-serif;
}
:lang(zh-Hans) body, html[lang="zh-Hans"] body{
  font-family:"Inter",system-ui,-apple-system,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans CJK SC","Noto Sans SC",sans-serif;
}
html[lang="zh-Hant"] h1,html[lang="zh-Hant"] h2,html[lang="zh-Hant"] h3{
  font-family:"Fraunces",Georgia,"Songti TC","Noto Serif CJK TC",serif; letter-spacing:0;
}
html[lang="zh-Hans"] h1,html[lang="zh-Hans"] h2,html[lang="zh-Hans"] h3{
  font-family:"Fraunces",Georgia,"Songti SC","Noto Serif CJK SC",serif; letter-spacing:0;
}
/* Chinese text needs a little more leading than Latin at the same size. */
html[lang^="zh"] body{line-height:1.8}
/* height:auto lets the width/height attributes on each <img> reserve the right box
   before the image loads (no layout shift) without locking the rendered height.
   Rules below that set an explicit height or aspect-ratio still win on specificity. */
img{max-width:100%; height:auto; display:block}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 24px}
.eyebrow{font-size:14px; letter-spacing:.16em; text-transform:uppercase; font-weight:600; color:var(--red); margin:0}

/* Accessibility helpers */
.skip{position:absolute; left:-9999px; top:auto; background:var(--red); color:#fff; padding:10px 16px; border-radius:0 0 8px 0; z-index:100}
.skip:focus{left:0; top:0}
/* Focus ring. --gold only reaches 2.73:1 on --paper, below the 3:1 that WCAG 2.1
   SC 1.4.11 requires of a focus indicator. No single hue clears 3:1 against both the
   cream surfaces and the near-black ones, so light surfaces get the dark ring and
   dark surfaces get the pale one. Ratios: red-deep/paper 9.67:1, gold-soft/ink 10.32:1,
   gold-soft/red 4.03:1. */
a:focus-visible,button:focus-visible,.btn:focus-visible,summary:focus-visible{outline:3px solid var(--red-deep); outline-offset:2px}
.hero a:focus-visible,.hero button:focus-visible,.hero .btn:focus-visible,
.community a:focus-visible,.community .btn:focus-visible,
.cta-strip a:focus-visible,.cta-strip .btn:focus-visible,
footer a:focus-visible,footer button:focus-visible{outline-color:var(--gold-soft)}
.visually-hidden{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)}

/* Buttons */
.btn{display:inline-block; background:var(--red); color:var(--white); text-decoration:none;
  font-weight:600; font-size:17px; padding:11px 20px; border-radius:999px; border:1px solid var(--red);
  transition:background .15s,transform .15s; cursor:pointer}
.btn:hover{background:var(--red-deep); transform:translateY(-1px)}
.btn.ghost{background:transparent; color:var(--red)}
.btn.ghost:hover{background:var(--red); color:var(--white)}

/* ---------- Nav ---------- */
header.nav{position:sticky; top:0; z-index:20; background:var(--white);
  border-bottom:1px solid var(--line)}
.nav-in{display:flex; align-items:center; gap:20px; height:74px}
.brand{display:flex; align-items:center; gap:12px; font-family:"Fraunces",serif; font-weight:600; font-size:18px; text-decoration:none; letter-spacing:-.01em; color:var(--ink)}
.brand img{height:42px; width:auto}
.brand span{max-width:180px; line-height:1.05}
nav.links{margin-left:auto; display:flex; gap:28px; align-items:center}
nav.links a{text-decoration:none; font-weight:500; font-size:16.5px; color:var(--ink)}
nav.links a:hover,nav.links a[aria-current="page"]{color:var(--red)}
nav.links a[aria-current="page"]{font-weight:600; text-decoration:underline; text-underline-offset:6px; text-decoration-color:var(--red); text-decoration-thickness:2px}
.menu-toggle{display:none; background:var(--white); border:1px solid var(--line); border-radius:10px; font-size:20px; cursor:pointer}

/* Language switcher (always visible, incl. mobile) */
.lang-switch{display:flex; gap:2px; align-items:center; border:1px solid var(--line); border-radius:999px; padding:3px; background:var(--paper); margin-left:14px}
/* min-height 24px: WCAG 2.2 SC 2.5.8 (Target Size, Minimum) at level AA. These were
   sitting right on the threshold, which is hard for anyone with a tremor. */
.lang-switch a{font-size:14px; font-weight:600; text-decoration:none; color:var(--ink-soft); padding:6px 12px; border-radius:999px; line-height:1.1; min-height:24px; display:inline-flex; align-items:center; white-space:nowrap}
.lang-switch a[aria-current="page"]{background:var(--red); color:#fff}
.lang-switch a:hover:not([aria-current]){color:var(--red)}

/* Dropdown submenus */
.has-sub{position:relative; display:flex; align-items:center}
.has-sub > a{display:inline-flex; align-items:center; gap:5px}
.submenu{position:absolute; top:100%; left:0; min-width:220px; background:var(--white); border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow); padding:8px; display:none; flex-direction:column; z-index:30}
.has-sub:hover > .submenu, .has-sub:focus-within > .submenu{display:flex}
.submenu a{padding:9px 12px; border-radius:8px; font-size:16px; color:var(--ink); white-space:nowrap; font-weight:500}
.submenu a:hover,.submenu a[aria-current="page"]{background:var(--paper-2); color:var(--red)}

/* ---------- Home hero ---------- */
.hero{position:relative; overflow:hidden; background:var(--ink)}
.hero img.mural{width:100%; height:100%; object-fit:cover; object-position:center; position:absolute; inset:0; opacity:.92}
@media(max-width:760px){ .hero-in{min-height:min(66vh,460px)} }
/* Rose Chung, 2026-08-13, reading the draft on her phone: "seems too dark on the left…
   any chance of lightening the upper left corner? Or just fade the entire image as
   background." This is both. The scrim used to be a single left-to-right ramp starting
   at 93% ink, which blacked out the whole left half of the mural, corner included, where
   there is no text to protect. It is now an even 18% wash over the photo, plus a soft
   pool of shade attached to the copy block below. The upper-left corner goes from 93%
   ink to 18%; the text still sits on about 72%.
   The old ramp was also failing WCAG, which is easy to miss because the failure is at
   the *light* end: it had faded to roughly 30% by the right-hand end of a line, so at
   phone widths, where the copy runs nearly edge to edge, the last words of the eyebrow
   and the lede landed on the bright part of the mural at 2.1:1. Worst case is now
   5.27:1 (the 13px gold eyebrow). See the note in CONTEXT.md for how that was measured. */
.hero-scrim{position:absolute; inset:0; background:rgba(16,9,7,.18)}
/* padding-block, not the `72px 0` shorthand: the shorthand reset .wrap's 24px side
   padding, so on any viewport narrower than --wrap the hero text ran flush to the
   screen edge. Desktop hid it because .wrap's auto margins supplied the gap. */
.hero-in{position:relative; z-index:2; min-height:min(74vh,560px); display:flex; align-items:center; padding-top:72px; padding-bottom:72px}
.hero-copy{position:relative; max-width:600px; color:#fdf4e3; text-shadow:0 2px 18px rgba(0,0,0,.6)}
/* The shade is attached to the copy block, so it follows the words at every width
   instead of covering a fixed share of the picture. A blurred block rather than a
   gradient: it holds one even tone straight across the copy and feathers out on all four
   sides, which no single gradient can do without being much darker at one end than the
   other. Old browsers without filter support fall back to a hard-edged rounded panel —
   plainer, still legible. */
.hero-copy::before{content:""; position:absolute; z-index:-1; inset:-56px -70px -50px -70px;
  border-radius:40px; background:rgba(16,9,7,.66); filter:blur(34px)}
.hero-copy .eyebrow{color:var(--gold-soft); font-size:19px; letter-spacing:.12em; line-height:1.5}
.hero h1{font-size:clamp(36px,5.6vw,62px); color:#fff; margin:.5rem 0 .9rem; font-weight:500}
.hero h1 em{font-style:normal; color:var(--gold-soft)}
.hero p.lede{font-size:21px; color:#f0e3cf; max-width:520px; margin:0 0 28px}
.hero-cta{display:flex; gap:14px; flex-wrap:wrap}
.hero-cta .btn.ghost{color:#fff; border-color:rgba(255,255,255,.75)}
.hero-cta .btn.ghost:hover{background:#fff; color:var(--red-deep); border-color:#fff}
/* The credit sits over the mural photo, so its contrast depended on whatever pixels
   were behind it and could not be guaranteed. An 80% ink scrim puts a known floor
   under it: worst case (over the brightest part of the mural) white lands near 9.8:1. */
.credit{position:absolute; z-index:2; right:16px; bottom:12px; font-size:11.5px; color:#fff;
  background:rgba(16,9,7,.8); padding:3px 9px; border-radius:6px}

/* ---------- Interior page hero ---------- */
.page-hero{background:var(--red-deep); color:#fbe6cf; padding:56px 0 48px}
.page-hero .crumbs{font-size:14.5px; color:var(--gold-soft); margin-bottom:14px}
.page-hero .crumbs a{color:var(--gold-soft); text-decoration:none}
.page-hero .crumbs a:hover{text-decoration:underline}
.page-hero h1{color:#fff; font-size:clamp(30px,4.4vw,48px); margin:0 0 12px; max-width:20ch}
.page-hero p{color:#f4e0c5; font-size:21px; max-width:60ch; margin:0}
.page-hero p a{color:#fff; text-decoration:underline; text-underline-offset:2px; font-weight:600}
.page-hero p a:hover{color:var(--gold-soft)}

/* ---------- Quick facts strip ---------- */
.facts{background:var(--red-deep); color:#f7e9cf}
.facts-in{display:grid; grid-template-columns:repeat(4,1fr)}
.fact{padding:20px 24px; text-align:center; border-left:1px solid rgba(255,255,255,.16)}
.fact:first-child{border-left:0}
.fact b{display:block; font-family:"Fraunces",serif; font-size:23px; color:#fff; font-weight:600}
.fact small{font-size:13.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--gold-soft)}

/* ---------- Sections ---------- */
section{padding:80px 0}
main > section:first-child{padding-top:64px}
.sec-head{max-width:660px; margin-bottom:40px}
.sec-head h2{font-size:clamp(28px,3.6vw,40px); margin:.4rem 0}
.sec-head p{color:var(--ink-soft); font-size:20px; margin:0}
.lead{font-size:22px; color:var(--ink); max-width:70ch}
.prose{max-width:70ch}
.prose p{color:var(--ink-soft); margin:0 0 18px}
.prose h2{font-size:clamp(24px,3vw,32px); margin:40px 0 14px}
.prose h3{font-size:20px; margin:28px 0 8px}

/* Cards */
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
.cards.two{grid-template-columns:repeat(2,1fr)}
.card{background:var(--white); border:1px solid var(--line); border-radius:var(--radius); padding:28px; box-shadow:var(--shadow)}
.card .ic{width:44px; height:44px; border-radius:10px; background:var(--paper-2); display:grid; place-items:center; font-size:22px; margin-bottom:14px}
.card h3{font-size:21px; margin-bottom:8px}
.card ul{margin:10px 0 0; padding:0; list-style:none}
.card li{padding:6px 0; border-top:1px dashed var(--line); display:flex; justify-content:space-between; gap:12px; font-size:17.5px}
.card li:first-child{border-top:0}
.card li span{color:var(--ink-soft)}
.card a.more{display:inline-block; margin-top:16px; font-weight:600; color:var(--red); text-decoration:none; font-size:16px}
.card a.more:hover{text-decoration:underline}

/* Rate tables */
.rate-table{width:100%; border-collapse:collapse; background:var(--white); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow)}
.rate-table caption{text-align:left; font-family:"Fraunces",serif; font-size:22px; padding:0 0 14px; color:var(--ink)}
.rate-table th,.rate-table td{text-align:left; padding:14px 18px; border-top:1px solid var(--line); font-size:17.5px}
.rate-table thead th{background:var(--paper-2); border-top:0; font-size:13px; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-soft)}
.rate-table td.price{font-weight:600; font-family:"Fraunces",serif; color:var(--red); white-space:nowrap}
.rate-table tbody tr:hover{background:var(--paper)}
.table-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch}

/* Band */
.band{background:var(--paper-2)}
.band-in{display:grid; grid-template-columns:1.1fr .9fr; gap:56px; align-items:center}
/* Tag text is --ink, not #fff: white on --gold measured 2.97:1, under the 4.5:1 that
   WCAG 1.4.3 requires of 13px bold text. --ink on --gold is 5.59:1. */
.band .tag{display:inline-block; background:var(--gold); color:var(--ink); font-weight:600; font-size:13px; padding:5px 12px; border-radius:999px; margin-bottom:14px}
.band h2{font-size:clamp(26px,3.4vw,36px); margin-bottom:14px}
.band p{color:var(--ink-soft); margin:0 0 10px}
.merchant-chips{display:flex; flex-wrap:wrap; gap:8px; margin-top:6px}

/* Participating merchants — filterable directory */
.merchant-filter{display:flex; flex-wrap:wrap; gap:8px; margin:0 0 22px}
.mf-btn{background:var(--white); border:1px solid var(--line); border-radius:999px; padding:8px 16px; font-family:inherit; font-size:15.5px; font-weight:600; color:var(--ink-soft); cursor:pointer; transition:all .15s}
.mf-btn:hover{border-color:var(--red); color:var(--red)}
.mf-btn.is-active{background:var(--red); border-color:var(--red); color:#fff}
.mf-btn .count{opacity:.7; font-weight:500}
.merchant-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:12px}
.merchant{display:block; background:var(--white); border:1px solid var(--line); border-radius:12px; padding:14px 16px; text-decoration:none; color:var(--ink); box-shadow:0 1px 3px rgba(60,30,10,.05); transition:transform .12s, box-shadow .12s, border-color .12s}
a.merchant:hover{transform:translateY(-2px); box-shadow:var(--shadow); border-color:var(--red)}
.merchant .m-name{font-weight:600; font-size:17.5px; color:var(--ink); line-height:1.3}
.merchant .m-cn{color:var(--ink-soft); font-weight:500; font-size:15.5px; margin-left:5px}
.merchant .m-meta{display:block; color:var(--ink-soft); font-size:14.5px; margin-top:5px}
a.merchant .m-name::after{content:"↗"; color:var(--red); font-size:11px; font-weight:700; margin-left:5px; vertical-align:1px}
a.merchant:hover .m-name{color:var(--red)}
.merchant.no-link{cursor:default}
.merchant[hidden]{display:none}
.merchant-empty{color:var(--ink-soft); font-size:17px; padding:8px 0}
.near-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:12px}
@media(max-width:820px){.near-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.near-grid{grid-template-columns:1fr}}
.near{background:var(--white); border:1px solid var(--line); border-radius:var(--radius); padding:24px 22px; box-shadow:0 1px 3px rgba(60,30,10,.05); transition:transform .14s ease, box-shadow .14s ease, border-color .14s ease}
.near:hover{transform:translateY(-3px); box-shadow:0 8px 22px rgba(60,30,10,.10); border-color:var(--gold)}
.near-ic{font-size:28px; display:block; margin-bottom:12px}
.near h3{font-family:Fraunces,serif; font-size:20px; margin:0 0 6px}
.near p{color:var(--ink-soft); font-size:16.5px; margin:0; line-height:1.55}
.chip{background:var(--white); border:1px solid var(--line); border-radius:999px; padding:6px 14px; font-size:14.5px; color:var(--ink-soft); text-decoration:none; display:inline-block; transition:transform .12s, border-color .12s, color .12s, box-shadow .12s}
a.chip{cursor:pointer}
a.chip:hover{border-color:var(--red); color:var(--red); transform:scale(1.09); box-shadow:var(--shadow)}
a.chip::after{content:" ↗"; font-size:10px; color:var(--ink-soft); font-weight:600}
a.chip:hover::after{color:var(--red)}

/* Community */
.community{background:var(--red); color:#fdf3e0}
/* --gold-soft on --red is only 4.03:1, under 4.5:1 for this 13px bold eyebrow.
   #FBEFD4 keeps the warm cream tone and reaches 5.68:1. The hero eyebrow can stay
   --gold-soft because it sits on the near-black scrim, not on red. */
.community .eyebrow{color:#FBEFD4}
.community h2{color:#fff; font-size:clamp(28px,3.8vw,44px); max-width:16ch; margin:.4rem 0 16px}
.community p{color:#f4e6cf; max-width:56ch; font-size:20px}
.mgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px 14px; margin-top:36px}
.mgrid figure{margin:0}
.mgrid img{border-radius:12px; aspect-ratio:4/3; object-fit:cover; box-shadow:0 8px 24px rgba(0,0,0,.25); width:100%; display:block}
.give-row{display:flex; gap:32px; flex-wrap:wrap; margin-top:40px; padding-top:32px; border-top:1px solid rgba(255,255,255,.2)}
.give{flex:1; min-width:220px}
.give h3{color:#fff; font-size:20px; margin-bottom:6px}
.give p{font-size:17.5px; margin:0}

/* History / split */
.split{display:grid; grid-template-columns:.9fr 1.1fr; gap:56px; align-items:center}
.split.reverse{grid-template-columns:1.1fr .9fr}
.split img{border-radius:var(--radius); box-shadow:var(--shadow); border:6px solid var(--white)}
.split .est{font-family:"Fraunces",serif; font-size:15px; color:var(--red); font-weight:600; letter-spacing:.04em}
.split h2{font-size:clamp(26px,3.4vw,38px); margin:.4rem 0 16px}
.split p{color:var(--ink-soft); margin:0 0 14px}

/* Timeline */
.timeline{border-left:2px solid var(--line); margin:30px 0 0; padding-left:28px; max-width:70ch}
.timeline li{list-style:none; position:relative; padding:0 0 30px}
.timeline li::before{content:""; position:absolute; left:-36px; top:4px; width:14px; height:14px; border-radius:50%; background:var(--red); border:3px solid var(--paper)}
.timeline .yr{font-family:"Fraunces",serif; color:var(--red); font-weight:600; font-size:20px}
.timeline p{margin:4px 0 0; color:var(--ink-soft)}

/* FAQ accordion. Native <details> keeps answers in the HTML for search and screen readers. */
.faq{max-width:80ch}
.faq details{border:1px solid var(--line); border-radius:12px; background:var(--white); margin-bottom:12px; box-shadow:0 1px 3px rgba(60,30,10,.05); transition:box-shadow .15s}
.faq details[open]{box-shadow:var(--shadow)}
.faq summary{list-style:none; cursor:pointer; padding:18px 22px; font-family:"Fraunces",Georgia,serif; font-size:20px; font-weight:500; color:var(--ink); display:flex; justify-content:space-between; align-items:center; gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; font-size:26px; line-height:1; color:var(--red); font-family:"Inter",sans-serif; flex:none}
.faq details[open] summary::after{content:"–"}
.faq summary:hover{color:var(--red)}
.faq summary:focus-visible{outline:3px solid var(--gold); outline-offset:-2px; border-radius:12px}
.faq .a{padding:2px 22px 20px; color:var(--ink-soft)}
.faq .a p{margin:0}

/* Contact / info grid */
.info-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:22px}
.info-card{background:var(--white); border:1px solid var(--line); border-radius:var(--radius); padding:26px; box-shadow:var(--shadow)}
.info-card h3{font-size:19px; margin-bottom:8px}
.info-card p{margin:0 0 6px; color:var(--ink-soft); font-size:17.5px}
.info-card a{color:var(--red); text-decoration:none}
.info-card p a{text-decoration:underline; text-underline-offset:3px}
.info-card a:hover{text-decoration:underline}
/* The OpenStreetMap iframe was replaced by a self-hosted image plus real links.
   An iframe sent every visitor's IP to a third party before they did anything. */
.map-card{margin:0}
.map-card img{width:100%; border-radius:var(--radius); box-shadow:var(--shadow); background:var(--paper-2)}
.map-card figcaption{color:var(--ink-soft); font-size:14.5px; margin-top:10px; line-height:1.5}
.map-card .map-links{display:flex; gap:12px; flex-wrap:wrap; margin:16px 0 0}

/* CTA strip */
.cta-strip{background:var(--ink); color:#f4e6cf; text-align:center}
.cta-strip h2{color:#fff; font-size:clamp(26px,3.4vw,38px); margin:0 0 12px}
.cta-strip p{color:#d9cbb8; max-width:52ch; margin:0 auto 24px}

/* Footer */
footer{background:var(--ink); color:#d9cbb8; padding:64px 0 40px; font-size:17px}
.foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px}
/* Footer column headings are h2, not h4: jumping h2 to h4 is a heading-order violation
   on pages whose deepest heading is h2. Size is set here, not by the tag. */
footer h2{font-family:"Fraunces",serif; color:#fff; font-size:16px; margin:0 0 14px; font-weight:600; line-height:1.4; letter-spacing:normal}
footer nav a,footer .col a{color:#d9cbb8; text-decoration:none; display:block; padding:4px 0}
footer a:hover{color:var(--gold-soft)}
.foot-brand{display:flex; align-items:center; gap:12px; margin-bottom:14px}
.foot-brand img{height:46px; background:#fff; border-radius:8px; padding:4px}
.foot-tagline{font-family:"Fraunces",serif; color:var(--gold-soft); font-size:16.5px; margin:14px 0 4px; line-height:1.45}
.foot-note{color:#a1937f; font-size:14.5px; max-width:34ch; line-height:1.6}
.foot-bottom{margin-top:44px; padding-top:22px; border-top:1px solid rgba(255,255,255,.12); display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; color:#a1937f; font-size:14.5px}

/* Numbered steps */
.steps{counter-reset:step; list-style:none; padding:0; margin:20px 0 0; max-width:62ch}
.steps li{counter-increment:step; position:relative; padding:0 0 18px 48px; min-height:34px}
.steps li::before{content:counter(step); position:absolute; left:0; top:0; width:32px; height:32px; border-radius:50%; background:var(--red); color:#fff; font-weight:700; display:grid; place-items:center; font-size:15px}
.steps li b{display:block; margin-bottom:2px}
.steps li span{color:var(--ink-soft); font-size:17.5px}

/* People / profile grid */
.profile-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:24px}
.profile{text-align:center}
.profile img{width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:14px; box-shadow:var(--shadow); background:var(--paper-2)}
.profile h3{font-size:19px; margin:14px 0 2px; font-family:"Fraunces",serif}
.profile p{margin:0; color:var(--red); font-size:15.5px; font-weight:600}
.profile p.org{color:var(--ink-soft); font-weight:400; margin-top:2px}

/* People roster with bios */
.people{display:grid; gap:30px; max-width:840px}
.person{display:grid; grid-template-columns:130px 1fr; gap:26px; align-items:start}
.person img{width:130px; height:130px; object-fit:cover; border-radius:14px; box-shadow:var(--shadow); background:var(--paper-2)}
.person h3{font-size:20px; margin:0}
.person .role{color:var(--red); font-weight:600; font-size:15.5px; margin:3px 0 10px}
.person p{margin:0; color:var(--ink-soft); font-size:17.5px; line-height:1.6}
.person p+p{margin-top:10px}
@media(max-width:640px){ .person{grid-template-columns:84px 1fr; gap:16px} .person img{width:84px; height:84px} }

/* Community highlight cards (clickable, image-topped) */
.highlight-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:22px}
.highlight{display:flex; flex-direction:column; background:var(--white); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; text-decoration:none; color:var(--ink); box-shadow:var(--shadow); transition:transform .15s, box-shadow .15s}
.highlight:hover{transform:translateY(-3px); box-shadow:0 16px 40px rgba(60,30,10,.16)}
.highlight img{width:100%; aspect-ratio:16/10; object-fit:cover; background:var(--paper-2)}
.highlight .hl-body{padding:20px 22px; display:flex; flex-direction:column; flex:1}
.highlight h3{font-size:20px; margin:0 0 8px}
.highlight p{color:var(--ink-soft); font-size:17px; margin:0 0 14px; flex:1}
.highlight .more{color:var(--red); font-weight:600; font-size:15.5px}
.highlight:hover .more{text-decoration:underline}

/* Photo gallery */
.gallery{display:grid; grid-template-columns:repeat(3,1fr); gap:22px 14px}
.gallery figure{margin:0}
.gallery img{width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:12px; box-shadow:var(--shadow); display:block}
.gallery.tall img{aspect-ratio:3/4}
/* Visible caption under every gallery photo (2026-09-13). Same text a screen reader gets. */
.gallery figcaption,.mgrid figcaption,figure.cap figcaption{font-family:Inter,system-ui,-apple-system,sans-serif; font-weight:400; color:var(--ink-soft); font-size:14px; line-height:1.45; margin-top:8px; text-align:left}
figure.cap{margin:0}
figure.cap img{display:block; width:100%; height:auto; border:6px solid var(--white); border-radius:var(--radius); box-shadow:var(--shadow)}
.mgrid figure.cap img{border:0; border-radius:12px}
.community .mgrid figcaption{color:rgba(255,255,255,.88)}
figure.cap + .gallery{margin-top:26px}

/* Closure notices, English + Chinese side by side */
.notices{display:grid; grid-template-columns:1fr 1fr; gap:18px; align-items:start}
.notices img{width:100%; height:auto; display:block; border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow)}

/* Google reviews badge */
.reviews-badge{display:inline-flex; align-items:center; gap:10px; background:var(--white); border:1px solid var(--line); border-radius:999px; padding:9px 18px; text-decoration:none; color:var(--ink); box-shadow:var(--shadow); font-size:14.5px; line-height:1.2}
.reviews-badge .stars{color:#E8A200; letter-spacing:2px; font-size:15px; flex:none}
.reviews-badge:hover{border-color:var(--red)}
.reviews-badge strong{color:var(--red)}

/* Project / update notice banner */
.notice{background:var(--gold-soft); border-bottom:1px solid var(--line)}
/* padding-block for the same reason as .hero-in: this is a .wrap child, and the
   `12px 0` shorthand would strip its 24px side padding on narrow screens. */
.notice-in{display:flex; align-items:center; gap:8px 16px; padding-top:12px; padding-bottom:12px; flex-wrap:wrap; justify-content:center; text-align:center; font-size:15px; color:var(--ink)}
.notice-in .pill{background:var(--red-deep); color:#fff; font-size:12px; font-weight:600; padding:3px 10px; border-radius:999px; text-transform:uppercase; letter-spacing:.05em}
.notice-in a{color:var(--red-deep); font-weight:600; text-decoration:underline}

/* Update log (project page) */
.updates{max-width:75ch; margin:0}
.updates .entry{border-left:3px solid var(--gold); padding:2px 0 22px 22px; position:relative}
.updates .entry::before{content:""; position:absolute; left:-8px; top:6px; width:13px; height:13px; border-radius:50%; background:var(--red); border:3px solid var(--paper)}
.updates .date{font-family:"Fraunces",serif; color:var(--red); font-weight:600; font-size:16px}
.updates h3{font-size:20px; margin:2px 0 6px}
.updates p{margin:0; color:var(--ink-soft)}

/* Utilities */
.center{text-align:center}
.mt0{margin-top:0}

/* ---------- Responsive ---------- */
@media(max-width:900px){
  .band-in,.split,.split.reverse{grid-template-columns:1fr; gap:32px}
  .foot-grid{grid-template-columns:1fr 1fr; gap:32px}
  .facts-in{grid-template-columns:1fr 1fr}
  .fact:nth-child(3){border-left:0}
  .info-grid{grid-template-columns:1fr}
}
@media(max-width:760px){
  .notices{grid-template-columns:1fr; gap:22px}
  /* The closed menu was only moved off-screen with a transform, so its links stayed in
     the tab order. A keyboard or screen-reader user tabbed into an invisible menu.
     visibility:hidden takes them out; the delayed transition lets the slide-up finish
     before it applies, so the animation still reads. */
  nav.links{position:fixed; inset:74px 0 auto 0; flex-direction:column; background:var(--paper);
    padding:18px 24px 28px; gap:6px; border-bottom:1px solid var(--line); align-items:stretch;
    transform:translateY(-140%); visibility:hidden;
    transition:transform .25s, visibility 0s .25s; box-shadow:var(--shadow)}
  nav.links.open{transform:translateY(0); visibility:visible; transition:transform .25s, visibility 0s}
  nav.links a{padding:12px 0; font-size:19px; border-bottom:1px solid var(--line)}
  nav.links .btn{text-align:center; margin-top:8px}
  .menu-toggle{display:inline-grid; place-items:center; width:44px; height:44px}
  .lang-switch{margin-left:auto; order:0}
  .has-sub{flex-direction:column; align-items:stretch}
  .submenu{position:static; display:flex; border:0; box-shadow:none; padding:0 0 6px 16px; background:transparent; border-radius:0; min-width:0}
  .submenu a{padding:10px 0; font-size:16.5px}
  .cards,.cards.two,.mgrid{grid-template-columns:1fr}
  .profile-grid,.gallery{grid-template-columns:1fr 1fr}
  section{padding:60px 0}
}
@media(max-width:480px){
  .facts-in{grid-template-columns:1fr 1fr}
  .fact{padding:16px 10px}
  .fact b{font-size:19px}
}