/*
 * Amplify Asia Pacific — Brand Design System & Tokens
 * Extracted from Amplify 2026 Overview v04 per EXT v2 §1 and PRD §5.1
 */

/* Self-hosted brand fonts (§5.4, CHN-01): Latin subsets, OFL licensed, font-display: swap */
@font-face {
  font-family: "League Spartan";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/league-spartan-latin-700-normal.6d5160b371d7.woff2") format("woff2");
}
@font-face {
  font-family: "League Spartan";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../fonts/league-spartan-latin-800-normal.7baa32d8ca16.woff2") format("woff2");
}
@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/figtree-latin-400-normal.7bfd10a3def3.woff2") format("woff2");
}
@font-face {
  font-family: "Figtree";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/figtree-latin-400-italic.5b322d9b8f64.woff2") format("woff2");
}
@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/figtree-latin-600-normal.4376f5953b85.woff2") format("woff2");
}
@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/figtree-latin-700-normal.70aaa6879de5.woff2") format("woff2");
}
/* Thai (plan D6): a Thai-only subset of Noto Sans Thai, OFL licensed. unicode-range means only pages
   with Thai text download it; the CJK languages use system fonts through the :lang() rules below. */
@font-face {
  font-family: "Noto Sans Thai";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/noto-sans-thai-thai-400-normal.d0d6e11abaf7.woff2") format("woff2");
  unicode-range: U+0E00-0E7F;
}
@font-face {
  font-family: "Noto Sans Thai";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/noto-sans-thai-thai-700-normal.600a18e78ec3.woff2") format("woff2");
  unicode-range: U+0E00-0E7F;
}

:root {
  /* Brand Core */
  --color-ink: #231F20;
  --color-cream: #F4F1E9;
  --color-white: #FFFFFF;
  --color-ink-muted: #5C5752;
  --color-coral-deep: #B4432A;
  --color-error: #A01C1C;
  --color-hairline: rgba(35, 31, 32, 0.12);

  /* Aura Pastels (Strictly Decorative Backgrounds / Badges with Dark Text) */
  --color-blush: #FFD0E0;
  --color-mauve: #C6A4BF;
  --color-apricot: #EAA86B;
  --color-coral: #F7866A;
  --color-periwinkle: #8F9CDF;
  --color-mint: #ABE2D3;
  --color-sky: #CFE1F4;

  /* Closing-slide gradient (OV-19) */
  --gradient-closing: linear-gradient(90deg, #FFD0E0 0%, rgb(198 164 191 / .55) 50%, rgb(234 168 107 / .55) 100%);

  /* Typography */
  --font-heading: "League Spartan", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-body: "Figtree", "Noto Sans TC", "Noto Sans SC", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* One radius everywhere: the rounded photo frame on OV-19 (EXT §1.4) */
  --radius: 10px;
}

/* Base Styles */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-family: var(--font-body);
  font-size: 100%;
  color: var(--color-ink);
  background-color: var(--color-cream);
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  font-size: 1.0625rem;
  background-color: var(--color-cream);
  position: relative;
}

img, svg {
  max-width: 100%;
}

/* Accessibility: Focus visible outline (A11Y-03) */
:focus-visible {
  outline: 2px solid var(--color-coral-deep);
  outline-offset: 2px;
}

/* Skip link (A11Y-03) */
.skip-link {
  position: absolute;
  top: -9999px;
  left: 1rem;
  background: var(--color-ink);
  color: var(--color-cream);
  padding: 0.75rem 1.25rem;
  z-index: 9999;
  text-decoration: none;
  font-weight: 600;
  border-radius: var(--radius);
}
.skip-link:focus {
  top: 1rem;
  color: var(--color-cream);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Typography Scale (EXT §1.3)
   H1: League Spartan Bold, ALL CAPS, tight tracking.
   H2/H3: Figtree Bold, sentence case (the deck's TT Commons Pro kicker style). */
h1, h2, h3, h4, h5, h6 {
  color: var(--color-ink);
  margin-bottom: 0.75rem;
}

h1, .display {
  font-family: var(--font-heading);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 1.02;
  font-size: clamp(2.125rem, 6vw, 2.625rem);
  overflow-wrap: break-word;
}

.display-xl {
  font-size: clamp(2.5rem, 8vw, 4.5rem);
}

.tagline .tagline-line {
  display: block;
}

h2, h3, h4, h5, h6 {
  font-family: var(--font-body);
  font-weight: 700;
  line-height: 1.25;
}

h2 { font-size: clamp(1.375rem, 3vw, 1.5rem); }
h3 { font-size: 1.1875rem; }
h4 { font-size: 1.0625rem; }

p {
  margin-bottom: 1rem;
  color: var(--color-ink);
}

strong { font-weight: 700; }
em { font-style: italic; }

.text-muted,
.muted {
  color: var(--color-ink-muted);
}

.small {
  font-size: 0.875rem;
}

.lead {
  font-size: 1.25rem;
  line-height: 1.5;
  color: var(--color-ink);
  margin-bottom: 1.5rem;
}

a {
  color: var(--color-coral-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.15s ease;
}
a:hover {
  color: var(--color-ink);
}

/* Long-form copy */
.prose > * + * {
  margin-top: 1rem;
}
.prose p { margin-bottom: 0; }
.prose h2 { margin-top: 2.5rem; }
.prose h3 { margin-top: 1.75rem; }
.prose ul,
.prose ol,
.list {
  padding-left: 1.25rem;
  line-height: 1.6;
}
.prose li + li,
.list li + li {
  margin-top: 0.35rem;
}

blockquote,
.quote {
  border-left: 3px solid var(--color-ink);
  padding: 0.25rem 0 0.25rem 1.25rem;
  font-size: 1.1875rem;
  line-height: 1.5;
}
.quote cite {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.875rem;
  font-style: normal;
  color: var(--color-ink-muted);
}

/* Eyebrow / kicker (EXT §3.1) */
.eyebrow {
  display: inline-block;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.9375rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-ink);
  margin-bottom: 1rem;
}

/* ==========================================================================
   Aura bursts (EXT §1.1, A11Y-07, A11Y-08)
   The deck's colour comes from real blob layers, not circles: 2–4 per slide,
   at full opacity, pushed into the corners and bleeding off the edges.
   These are those exact layers from the .pptx (static/img/aura/*.webp), placed
   per section. Each composition below is copied from a slide ([OV-n]).
   Decorative only: CSS backgrounds inside an aria-hidden wrapper.
   Contrast: the most saturated blob centre (coral #E49D9B) still gives ink
   text 5.6:1, so body copy stays AA wherever a blob lands.
   ========================================================================== */
.section,
.aura-host {
  position: relative;
  isolation: isolate;
}
.section > .container,
.aura-host > .container {
  position: relative;
  z-index: 1;
}

.aura {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  /* Soft top and bottom edges, so a burst never ends in a hard line at a section seam */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 4rem, #000 calc(100% - 4rem), transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 4rem, #000 calc(100% - 4rem), transparent 100%);
}
.aura > span {
  position: absolute;
  display: block;
  width: var(--w, clamp(300px, 50%, 820px));
  aspect-ratio: var(--ar, 1);
  background: var(--blob) center / 100% 100% no-repeat;
  opacity: var(--o, 1);
  /* --pull shrinks how far a blob hangs off its corner (1 = as on the slide) */
  transform: translate(calc(var(--tx, 0%) * var(--pull, 1)), calc(var(--ty, 0%) * var(--pull, 1))) rotate(var(--r, 0deg)) scaleX(var(--fx, 1));
}

/* Grain, as in the deck: only on the blob itself, never on the cream */
@supports ((-webkit-mask-image: url("")) or (mask-image: url(""))) {
  .aura > span {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .14 0 0 0 0 .12 0 0 0 0 .12 0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"), var(--blob);
    background-size: 180px 180px, 100% 100%;
    background-repeat: repeat, no-repeat;
    -webkit-mask: var(--blob) center / 100% 100% no-repeat;
            mask: var(--blob) center / 100% 100% no-repeat;
  }
}

/* Page-level bursts for pages without a hero section (forms, directory, members) */
.aura-page {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: min(100vh, 56rem);
  z-index: 0;
  pointer-events: none;
}

/* The blob layers, named by their dominant colours */
.b-blush      { --blob: url("../img/aura/blush.503cb8c77eb2.webp");      --ar: 1; }
.b-rainbow    { --blob: url("../img/aura/rainbow.2d393c3c8517.webp");    --ar: 1.036; }
.b-periwinkle { --blob: url("../img/aura/periwinkle.0da1471653e2.webp"); --ar: 0.835; }
.b-sky        { --blob: url("../img/aura/sky.56afb09d03c7.webp");        --ar: 1; }
.b-spectrum   { --blob: url("../img/aura/spectrum.bd154109d3b2.webp");   --ar: 0.85; }
.b-blue       { --blob: url("../img/aura/blue.9fa5975b244d.webp");       --ar: 1.12; }
.b-violet     { --blob: url("../img/aura/violet.a4b4988a87ed.webp");     --ar: 0.91; }
.b-coral      { --blob: url("../img/aura/coral.e044c9106cf3.webp");      --ar: 0.967; }
.b-streak     { --blob: url("../img/aura/streak.24c147121365.webp");     --ar: 1.6; }

/* Anchors: each blob sits on a corner and is pushed off it by a share of its own size,
   so the composition holds at any section height and any screen width. */
.at-tl { top: 0; left: 0; }
.at-tr { top: 0; right: 0; }
.at-bl { bottom: 0; left: 0; }
.at-br { bottom: 0; right: 0; }
.at-ml { top: 50%; left: 0; }
.at-mr { top: 50%; right: 0; }

/* [OV-1] Cover: rainbow blob top-left, blush glow top-right */
.aura--cover .b-rainbow { --w: clamp(340px, 62%, 1100px); --tx: -38%; --ty: -30%; --o: .85; }
.aura--cover .b-blush   { --w: clamp(320px, 58%, 1000px); --tx: 32%;  --ty: -40%; }
.aura--cover .b-coral   { --w: clamp(260px, 34%, 620px);  --tx: 30%;  --ty: 35%; --r: 12deg; --o: .7; }

/* [OV-8 to OV-15] The standard content slide: blush top-left, coral top-right, streak bottom-left */
.aura--corner .b-blush  { --w: clamp(260px, 36%, 640px);  --tx: -40%; --ty: -38%; }
.aura--corner .b-coral  { --w: clamp(300px, 44%, 780px);  --tx: 38%;  --ty: -36%; --r: -37deg; }
.aura--corner .b-streak { --w: clamp(320px, 52%, 900px);  --tx: -42%; --ty: 38%;  --r: 19deg; --o: .9; }

/* [OV-6, OV-18] Blush from the left, coral down the right edge */
.aura--side .b-blush { --w: clamp(300px, 48%, 820px); --tx: -48%; --ty: -45%; }
.aura--side .b-coral { --w: clamp(300px, 46%, 800px); --tx: 45%;  --ty: -50%; --r: 7deg; --o: .85; }

/* [OV-2, OV-4] Periwinkle top-left, sky on the right */
.aura--cool .b-periwinkle { --w: clamp(280px, 40%, 700px); --tx: -35%; --ty: -30%; --r: 25deg; }
.aura--cool .b-sky        { --w: clamp(300px, 52%, 900px); --tx: 38%;  --ty: -25%; }
.aura--cool .b-blush      { --w: clamp(260px, 34%, 600px); --tx: -30%; --ty: 40%; }

/* [OV-3, OV-13] Spectrum blob top-left, blue bottom-right */
.aura--spectrum .b-spectrum { --w: clamp(300px, 42%, 760px); --tx: -42%; --ty: -40%; --r: 23deg; }
.aura--spectrum .b-blue     { --w: clamp(300px, 44%, 780px); --tx: 32%;  --ty: 30%;  --r: 13deg; }
.aura--spectrum .b-blush    { --w: clamp(240px, 30%, 520px); --tx: 20%;  --ty: -45%; }

/* [OV-5] Violet sweep across the upper right */
.aura--violet .b-violet { --w: clamp(300px, 46%, 800px); --tx: 22%;  --ty: -30%; --r: 106deg; --o: .75; }
.aura--violet .b-blush  { --w: clamp(260px, 34%, 600px); --tx: -40%; --ty: 30%; }

@media (max-width: 767px) {
  /* On a phone the blobs are close to screen width, so pull them in from the corners
     or most of the colour ends up off-screen. */
  .aura > span { --pull: .4; }
  .aura--corner .b-streak,
  .aura--cover .b-coral { display: none; }
}

/* ==========================================================================
   Community photos (EXT §1.4 imagery, A11Y-02, PRD Principle 1)
   The deck's treatment is baked into the file: softened, then set at 30% over
   cream. The veil adds cream behind the text column so the text side is at
   least 80% cream (A11Y-02). Photos can be switched off site-wide with
   SHOW_COMMUNITY_PHOTOS=false until consent is confirmed (see
   static/img/photos/README.md).
   ========================================================================== */
.section-hero {
  padding-top: 4.5rem;
  padding-bottom: 5rem;
}
.photo-bg {
  position: absolute;
  inset: 0 0 auto 0;
  height: min(100%, 44rem);
  z-index: 0;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 60%, transparent 100%);
}
.photo-bg img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
}
.photo-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    rgba(244, 241, 233, .34) 0%,
    rgba(244, 241, 233, .30) 55%,
    rgba(244, 241, 233, .08) 85%);
}
.center .photo-bg::after,
.photo-bg--even::after {
  background: rgba(244, 241, 233, .30);
}
@media (max-width: 767px) {
  .photo-bg { height: min(100%, 34rem); }
  .photo-bg::after { background: rgba(244, 241, 233, .34); }
}

/* [OV-19] The rounded, semi-transparent white frame around one photo */
.photo-frame {
  margin: 0;
  padding: clamp(0.75rem, 3vw, 2rem);
  background: rgba(255, 255, 255, 0.4);
  border-radius: var(--radius);
}
.photo-frame img {
  display: block;
  width: 100%;
  height: auto;
}
.photo-frame figcaption {
  margin-top: 0.75rem;
  font-size: 0.875rem;
  color: var(--color-ink-muted);
}

/* [OV-19] Closing layout: framed photo beside the invitation */
.closing-grid {
  display: grid;
  gap: 2.5rem;
  align-items: center;
}
@media (min-width: 900px) {
  .closing-grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 4rem;
  }
}

.site-header,
main,
.site-footer {
  position: relative;
  z-index: 1;
}

/* Cream Scrim for Text over Photos (A11Y-02) */
.cream-scrim {
  background-color: rgba(244, 241, 233, 0.88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Layout Utilities */
.container {
  width: 100%;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

.content-narrow {
  max-width: 800px;
}

.section {
  padding: 3.5rem 0;
}
.section-tight {
  padding: 2.5rem 0;
}
.section-band {
  background-color: rgba(255, 255, 255, 0.55);
  border-top: 1px solid var(--color-hairline);
  border-bottom: 1px solid var(--color-hairline);
}
.section-closing {
  background: var(--gradient-closing);
}

.stack > * + * {
  margin-top: 1.25rem;
}

.grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}

.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}

.center {
  text-align: center;
}
.center .cluster {
  justify-content: center;
}

.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.mt-lg { margin-top: 2.5rem; }

/* Buttons (Touch target ≥ 44x44px A11Y-06) */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
  padding: 0.7rem 1.4rem;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.2;
  text-decoration: none;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
  border: 2px solid transparent;
}

.btn-primary {
  background-color: var(--color-ink);
  color: var(--color-cream);
}
.btn-primary:hover {
  background-color: #000000;
  color: #FFFFFF;
}

.btn-secondary {
  background-color: transparent;
  color: var(--color-ink);
  border-color: var(--color-ink);
}
.btn-secondary:hover {
  background-color: var(--color-ink);
  color: var(--color-cream);
}

.btn-sm {
  padding: 0.5rem 1rem;
  font-size: 0.9375rem;
}

.btn-block {
  width: 100%;
}

.btn-link {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--color-coral-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  min-height: 44px;
}

/* Cards: flat, translucent white or hairline, no shadows (EXT §1.4) */
.card {
  background: var(--color-white);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius);
  padding: 1.5rem;
}
.card-quiet {
  background: rgba(255, 255, 255, 0.45);
}
.card > :last-child {
  margin-bottom: 0;
}
.card-accent {
  border-top: 4px solid var(--card-accent, var(--color-blush));
}
.accent-blush { --card-accent: var(--color-blush); }
.accent-periwinkle { --card-accent: var(--color-periwinkle); }
.accent-apricot { --card-accent: var(--color-apricot); }
.accent-mauve { --card-accent: var(--color-mauve); }
.accent-mint { --card-accent: var(--color-mint); }
.accent-ink { --card-accent: var(--color-ink); }

.notice {
  border-left: 4px solid var(--color-coral-deep);
}

/* Badges */
.badge {
  display: inline-block;
  padding: 0.2rem 0.6rem;
  border-radius: var(--radius);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  background-color: var(--color-cream);
  color: var(--color-ink);
  border: 1px solid rgba(35, 31, 32, 0.15);
}

.badge-founding {
  background-color: var(--color-blush);
}

.badge-members {
  background-color: var(--color-sky);
}

.badge-alert {
  background-color: #F7D4D4;
  color: var(--color-error);
}

/* Navigation Bar */
.site-header {
  background-color: var(--color-cream);
  border-bottom: 1px solid var(--color-hairline);
  position: sticky;
  top: 0;
  z-index: 100;
}

.nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  height: 72px;
}

/* Logo: official 2026 lockup, inlined as SVG with fill: currentColor.
   Clear space ≈ monogram height; never recolour to a pastel (EXT §1.2). */
.brand-logo {
  color: var(--color-ink);
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  text-decoration: none;
  flex-shrink: 0;
}
.brand-logo:hover {
  color: var(--color-ink);
}
.brand-logo-svg {
  display: block;
  height: 32px;
  width: auto;
}

.hero-logo-svg {
  display: block;
  height: 104px;
  width: auto;
  margin: 0 auto 2rem auto;
  color: var(--color-ink);
}

.footer-logo {
  margin-bottom: 1rem;
}
.footer-logo-svg {
  display: block;
  height: 36px;
  width: auto;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  list-style: none;
}

.nav-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1rem;
  color: var(--color-ink);
  text-decoration: none;
}
.nav-link:hover,
.nav-link[aria-current="page"] {
  color: var(--color-coral-deep);
}
.nav-link[aria-current="page"] {
  text-decoration: underline;
  text-underline-offset: 6px;
}

.menu-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 44px;
  min-width: 44px;
  padding: 0.5rem 0.9rem;
  background: transparent;
  color: var(--color-ink);
  border: 2px solid var(--color-ink);
  border-radius: var(--radius);
  font: 700 0.9375rem var(--font-body);
  cursor: pointer;
}

/* Breadcrumbs */
.breadcrumb {
  margin-bottom: 2rem;
  font-size: 0.9375rem;
  color: var(--color-ink-muted);
}
.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  list-style: none;
}
.breadcrumb li + li::before {
  content: "›";
  margin-right: 0.35rem;
}

/* Forms: every text-like control is styled, whether or not it carries a class */
.form-group {
  margin-bottom: 1.25rem;
}

.form-label,
.form-group > label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.35rem;
  color: var(--color-ink);
}

.form-hint {
  font-size: 0.9375rem;
  color: var(--color-ink-muted);
  margin-top: 0.25rem;
}

.form-input, .form-select, .form-textarea,
main input[type="text"], main input[type="email"], main input[type="password"],
main input[type="url"], main input[type="search"], main input[type="tel"],
main input[type="number"], main select, main textarea {
  width: 100%;
  min-height: 48px;
  padding: 0.7rem 0.8rem;
  font-family: var(--font-body);
  font-size: 1rem;
  border: 1px solid rgba(35, 31, 32, 0.35);
  border-radius: var(--radius);
  background-color: var(--color-white);
  color: var(--color-ink);
  transition: border-color 0.15s ease;
}
main textarea {
  min-height: 7rem;
  resize: vertical;
}
.form-input:focus, .form-select:focus, .form-textarea:focus,
main input:focus, main select:focus, main textarea:focus {
  border-color: var(--color-coral-deep);
  outline: 2px solid var(--color-coral-deep);
  outline-offset: 0;
}

main input[type="checkbox"],
main input[type="radio"] {
  width: 22px;
  height: 22px;
  margin-top: 0.1rem;
  flex-shrink: 0;
  accent-color: var(--color-ink);
}

.form-grid {
  display: grid;
  gap: 0 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
}

.form-grid > .form-group {
  display: flex;
  flex-direction: column;
}

.form-grid > .form-group > .form-input,
.form-grid > .form-group > .form-select,
.form-grid > .form-group > .form-textarea,
.form-grid > .form-group > input,
.form-grid > .form-group > select,
.form-grid > .form-group > textarea {
  margin-top: auto;
}

.check-row {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  padding: 1rem;
  margin-top: 1rem;
  background-color: var(--color-cream);
  border-radius: var(--radius);
  font-size: 0.9375rem;
}
.check-row label {
  cursor: pointer;
}

.form-error {
  color: var(--color-error);
  font-size: 0.9375rem;
  margin-top: 0.25rem;
  font-weight: 600;
}

.alert {
  padding: 1rem 1.25rem;
  border-radius: var(--radius);
  border: 1px solid var(--color-ink);
  background-color: var(--color-blush);
  margin-bottom: 1rem;
}
.alert-error {
  background-color: #F7D4D4;
  border-color: var(--color-error);
  color: var(--color-error);
}

/* Alpine: hide until initialised, so no-JS visitors never see dead controls */
[x-cloak] {
  display: none !important;
}

/* Tabs (Join form path selector) */
.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 2rem;
}

/* People (Leadership & Stewardship, OV-16) */
.people {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr));
  list-style: none;
}
.person {
  text-align: center;
}
.person-monogram {
  width: 88px;
  height: 88px;
  margin: 0 auto 0.75rem auto;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-blush);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.75rem;
  color: var(--color-ink);
}
.person-photo {
  display: block;
  width: 128px;
  height: 128px;
  margin: 0 auto 0.75rem auto;
  border-radius: 50%;
  object-fit: cover;
  background: var(--color-blush);
}
.person-name {
  font-weight: 700;
  margin-bottom: 0.15rem;
}
.person-role {
  font-size: 0.9375rem;
  color: var(--color-ink-muted);
  margin-bottom: 0;
}

/* Timeline (past gatherings archive) */
.timeline {
  list-style: none;
  border-left: 2px solid var(--color-ink);
  margin-left: 0.5rem;
}
.timeline li {
  position: relative;
  padding: 0 0 1.75rem 1.5rem;
}
.timeline li::before {
  content: "";
  position: absolute;
  left: -8px;
  top: 0.35rem;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--color-cream);
  border: 2px solid var(--color-ink);
}
.timeline .when {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.25rem;
  display: block;
}

/* Lists of rows (forum, directory) */
.rows {
  list-style: none;
}
.rows > li {
  padding: 1.25rem 0;
  border-top: 1px solid var(--color-hairline);
}
.rows > li:first-child {
  border-top: 0;
}
.row-meta {
  font-size: 0.875rem;
  color: var(--color-ink-muted);
}

.post-body {
  white-space: pre-line;
  line-height: 1.6;
}

/* Footer */
.site-footer {
  background-color: var(--color-ink);
  color: var(--color-cream);
  padding: 4rem 0 2rem 0;
  margin-top: auto;
}
.site-footer p {
  color: rgba(244, 241, 233, 0.85);
}
.site-footer h2 {
  color: var(--color-cream);
  font-size: 1.0625rem;
}
.site-footer ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.site-footer a {
  color: var(--color-blush);
}
.site-footer a:hover {
  color: #FFFFFF;
}
.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 2.5rem;
  margin-bottom: 3rem;
}
.footer-base {
  border-top: 1px solid rgba(244, 241, 233, 0.15);
  padding-top: 1.5rem;
  font-size: 0.875rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}
.footer-base p {
  color: rgba(244, 241, 233, 0.7);
  margin-bottom: 0;
}

/* Respect Reduced Motion (A11Y-07) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Mobile Responsiveness (MOB-01) */
@media (max-width: 1023px) {
  .menu-toggle {
    display: inline-flex;
  }
  .nav-links {
    display: none;
  }
  #primary-nav.is-open .nav-links {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.25rem;
    position: absolute;
    top: 72px;
    left: 0;
    width: 100%;
    background-color: var(--color-cream);
    padding: 1rem 1.25rem 1.5rem;
    border-bottom: 1px solid var(--color-hairline);
  }
  #primary-nav.is-open .nav-links .btn {
    margin-top: 0.5rem;
  }
}

/* Without JavaScript the menu can't open, so show the links inline instead (MOB-03) */
.no-js .menu-toggle {
  display: none;
}
.no-js .nav-bar {
  height: auto;
  flex-wrap: wrap;
  padding: 0.75rem 1.25rem;
}
.no-js .nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1rem;
}

@media (min-width: 768px) {
  .section {
    padding: 4.5rem 0;
  }
  .card {
    padding: 2rem;
  }
}

/* Announcement bar above the header (call for proposals, events/dates.py) */
.announce-bar {
  position: relative;
  z-index: 2;
  background-color: var(--color-blush);
  border-bottom: 1px solid var(--color-hairline);
  font-size: 0.9375rem;
}
.announce-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.25rem 1rem;
  padding-top: 0.6rem;
  padding-bottom: 0.6rem;
  text-align: center;
}
.announce-bar p {
  margin: 0;
}
.announce-bar a {
  color: var(--color-ink);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Radio and checkbox groups (event registration, proposals) */
fieldset.choice-group {
  border: 0;
  padding: 0;
  margin: 0 0 1.5rem 0;
  min-width: 0;
}
.choice-group legend {
  padding: 0;
}
.choice-group .check-row {
  margin-top: 0.5rem;
}
.form-section {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-hairline);
}
.form-section > h2 {
  font-size: 1.375rem;
}

/* Key facts: label beside value, stacked on phones */
.facts {
  display: grid;
  grid-template-columns: minmax(0, 11rem) minmax(0, 1fr);
  gap: 0.75rem 1.5rem;
  margin: 0;
}
.facts dt {
  font-weight: 700;
}
.facts dd {
  margin: 0;
}
@media (max-width: 560px) {
  .facts {
    grid-template-columns: 1fr;
    gap: 0.1rem;
  }
  .facts dd {
    margin-bottom: 0.75rem;
  }
}

/* Event cards (events index) */
.event-list {
  display: grid;
  gap: 1.5rem;
}
.event-meta {
  font-size: 0.9375rem;
  color: var(--color-ink-muted);
}

/* Language menu: links in a <details>, works without JavaScript (IMPLEMENTATION_PLAN.md D4) */
.lang-item { position: relative; }
.lang-menu summary {
  cursor: pointer;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.75rem;
  min-height: 36px;
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-cream);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(244, 241, 233, 0.2);
  border-radius: var(--radius);
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.lang-menu summary:hover,
.lang-menu[open] summary {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(244, 241, 233, 0.4);
  color: #FFFFFF;
}
.lang-menu summary::-webkit-details-marker { display: none; }
.lang-menu summary::after { content: "▾"; font-size: 0.8em; margin-left: 0.2rem; }
.lang-menu ul {
  list-style: none;
  margin: 0;
  padding: 0.5rem 0;
  background: var(--color-white, #fff);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  position: absolute;
  right: 0;
  bottom: calc(100% + 0.5rem);
  min-width: 11rem;
  z-index: 110;
}
.lang-menu a {
  display: block;
  min-height: 40px;
  padding: 0.5rem 1rem;
  color: var(--color-ink) !important;
  text-decoration: none;
  font-size: 0.9375rem;
}
.lang-menu a:hover,
.lang-menu a[aria-current="true"] {
  color: var(--color-coral-deep) !important;
  background: rgba(180, 67, 42, 0.06);
}
.lang-menu a[aria-current="true"] { font-weight: 700; }
.translation-notice { margin: 1rem 0 0; padding: 0.75rem 1rem; background: var(--color-white); border-left: 4px solid var(--color-coral-deep); border-radius: var(--radius); }

/* Typography per language (IMPLEMENTATION_PLAN.md WS7.5, D6): system CJK fonts, never a web font.
   --font-lang also lets headings keep League Spartan first, falling back to the language's stack.
   Scoped to pages whose own language isn't English, so English pages (and the Chinese names on them)
   look exactly as before. Drop the :root:not(:lang(en)) prefix to style inline CJK on English pages too.
   Rules test an element's own language (em:lang(zh)), so English sections on a Chinese page keep theirs. */
:root:not(:lang(en)) :lang(zh-Hant) { --font-lang: "PingFang TC","Hiragino Sans TC","Microsoft JhengHei","Noto Sans TC"; font-family: var(--font-lang),var(--font-body); }
:root:not(:lang(en)) :lang(zh-Hans) { --font-lang: "PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC"; font-family: var(--font-lang),var(--font-body); }
:root:not(:lang(en)) :lang(ja)      { --font-lang: "Hiragino Sans","Yu Gothic UI","Meiryo","Noto Sans JP"; font-family: var(--font-lang),var(--font-body); line-break: strict; }
:root:not(:lang(en)) :lang(ko)      { --font-lang: "Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR"; font-family: var(--font-lang),var(--font-body); word-break: keep-all; }
:root:not(:lang(en)) :lang(th)      { --font-lang: "Noto Sans Thai"; font-family: var(--font-lang),var(--font-body); line-height: 1.9; }
:root:not(:lang(en)) :is(:lang(zh),:lang(ja),:lang(ko)) { letter-spacing: 0; line-height: 1.8; }
:root:not(:lang(en)) :is(em,i):is(:lang(zh),:lang(ja)) { font-style: normal; font-weight: 600; }
:root:not(:lang(en)) :is(.tagline,.eyebrow):is(:lang(zh),:lang(ja),:lang(ko),:lang(th)) { text-transform: none; letter-spacing: 0; }
:root:not(:lang(en)) :is(h1,h2,h3,h4,h5,h6,.display,.eyebrow,.when,.person-name):is(:lang(zh),:lang(ja),:lang(ko),:lang(th)) { font-family: "League Spartan",var(--font-lang),sans-serif; line-height: 1.25; }
:root:not(:lang(en)) :is(.tagline, .tagline .tagline-line):is(:lang(zh),:lang(ja),:lang(ko),:lang(th)) { line-height: 1.15; hanging-punctuation: last; }
:root:not(:lang(en)) .tagline:is(:lang(zh)) .tagline-line { white-space: nowrap; }
:root:not(:lang(en)) .tagline:is(:lang(zh)) .tagline-line:nth-child(1),
:root:not(:lang(en)) .tagline:is(:lang(zh)) .tagline-line:nth-child(2) { display: inline; }
:root:not(:lang(en)) .tagline:is(:lang(zh)) .tagline-line:nth-child(3) { display: block; }

/* Global hidden enforcement (HTML5 hidden attribute must always hide) */
[hidden] { display: none !important; }

/* Language suggestion on the English home page (D4): static/js/lang-suggest.js */
.lang-suggest { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; align-items: center; justify-content: center; padding: 0.6rem 1rem; background: var(--color-cream); border-bottom: 1px solid var(--color-hairline); }
.lang-suggest[hidden],
.lang-suggest:empty { display: none !important; }
.lang-suggest button { min-height: 44px; min-width: 44px; background: transparent; border: 0; font: inherit; cursor: pointer; text-decoration: underline; }