/* Public site — hand-written CSS, no build step.
   Design tokens follow the approved UI/UX handoff (IMA magenta #9C1458, lamp gold #F2B705, laurel green #2E8B3A, Inter). Brand colours can be overridden from admin via /branding.css. */
@layer reset, tokens, base, layout, components, pages, utilities, refine;

@font-face {
  font-family: "Inter";
  src: url("../../vendor/inter/inter-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  body, h1, h2, h3, h4, p, ul, ol, figure, dl, dd, blockquote { margin: 0; }
  ul[class], ol[class], nav ul, .ticker ul { list-style: none; padding: 0; margin: 0; }
  img, svg, iframe { display: block; max-width: 100%; }
  img { height: auto; }
  button, input, select, textarea { font: inherit; color: inherit; }
  table { border-collapse: collapse; }
}

@layer tokens {
  :root {
    --brand: #7b1e45; --accent: #c8962e; --brand-strong: #5f1735; --laurel: #2f7a47; --laurel-soft: #e8f2ea;
    --brand-ink: #ffffff; --accent-ink: #8a6418;
    --ink: #1d1b20; --ink-2: #3f3b44; --muted: #67626b;
    --bg: #ffffff; --surface: #ffffff; --surface-2: #f7f5f2; --line: #e6e1da;
    --brand-soft: #f5e9ee; --accent-soft: #f8eed8;
    --success: #16a34a; --success-soft: #e8f7ee; --warning: #f59e0b; --danger: #dc2626; --danger-soft: #fdecec; --info-soft: #f1eff3;
    --radius: 14px; --radius-sm: 10px; --radius-lg: 18px;
    --shadow: 0 1px 2px rgb(29 27 32 / .05), 0 6px 20px rgb(29 27 32 / .06);
    --shadow-lg: 0 18px 44px rgb(29 27 32 / .14);
    --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Noto Sans Telugu", sans-serif;
    --container: 1220px;
    --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --space-8: 4.5rem;
    --fs-body: clamp(.95rem, .92rem + .15vw, 1.0625rem);
    --fs-small: .875rem; --fs-xs: .8rem;
    --fs-h1: clamp(2rem, 1.45rem + 2.4vw, 3.15rem);
    --fs-h2: clamp(1.5rem, 1.25rem + 1vw, 2.05rem);
    --fs-h3: clamp(1.05rem, 1rem + .25vw, 1.2rem);
    --focus: 0 0 0 3px rgb(123 30 69 / .35);
    color-scheme: light;
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --ink: #edeaf0; --ink-2: #cfcad4; --muted: #a39ea8; --accent-ink: #e3b65a;
      --bg: #141216; --surface: #1c1a1f; --surface-2: #232026; --line: #38343d;
      --brand-soft: #3a1e2b; --accent-soft: #3a2e14; --danger-soft: #3b1515; --success-soft: #0f2c1e; --info-soft: #26232a;
      --shadow: 0 1px 2px rgb(0 0 0 / .4); color-scheme: dark;
    }
  }
  :root[data-theme="dark"] {
      --ink: #edeaf0; --ink-2: #cfcad4; --muted: #a39ea8; --accent-ink: #e3b65a;
      --bg: #141216; --surface: #1c1a1f; --surface-2: #232026; --line: #38343d;
      --brand-soft: #3a1e2b; --accent-soft: #3a2e14; --danger-soft: #3b1515; --success-soft: #0f2c1e; --info-soft: #26232a;
      --shadow: 0 1px 2px rgb(0 0 0 / .4); color-scheme: dark;
  }
  :root[data-theme="light"] { color-scheme: light; }
}

@layer base {
  html { -webkit-text-size-adjust: 100%; scroll-padding-top: 96px; overflow-x: clip; }
  body { font-family: var(--font); font-size: var(--fs-body); line-height: 1.6; color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; overflow-x: hidden; overflow-x: clip; }
  h1, h2, h3 { font-family: var(--font); font-weight: 700; line-height: 1.2; letter-spacing: -.02em; color: var(--brand); }
  h1 { font-size: var(--fs-h1); }
  h2 { font-size: var(--fs-h2); margin-bottom: .75rem; }
  h3 { font-size: var(--fs-h3); font-weight: 600; letter-spacing: -.01em; }
  a { color: var(--brand); text-underline-offset: 3px; }
  a:hover { color: var(--accent-ink); }
  :focus-visible { outline: none; box-shadow: var(--focus); border-radius: 6px; }
  h1:focus, main:focus { outline: none; box-shadow: none; }
  address { font-style: normal; }
  ::selection { background: var(--brand-soft); color: var(--brand-strong); }
  .icon { flex: none; }
  @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) :is(h1, h2, h3, a) { color: var(--ink); } }
  :root[data-theme="dark"] :is(h1, h2, h3, a) { color: var(--ink); }
  @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }
}

@layer layout {
  .container { width: min(100% - 2rem, var(--container)); margin-inline: auto; }
  .narrow { max-width: 860px; }
  .section { padding-block: clamp(2.25rem, 1.75rem + 2vw, 3.75rem); }
  .section-gap { margin-top: 2.5rem; }
  .grid { display: grid; gap: var(--space-5); }
  .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  @media (max-width: 1199px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (max-width: 767px) { .grid-3 { grid-template-columns: 1fr; } .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); } }
  .page-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 2.5rem; align-items: start; }
  .page-layout > .side-nav:first-child { order: -1; }
  @media (max-width: 1023px) { .page-layout { grid-template-columns: 1fr; } }
  .band { background: var(--surface-2); }
  .section-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; margin-bottom: var(--space-5); flex-wrap: wrap; }
  .section-head h2 { margin: 0; }
}

@layer components {
  .skip-link { position: absolute; left: -999px; top: .5rem; z-index: 100; background: var(--brand); color: #fff; padding: .6rem 1rem; border-radius: var(--radius-sm); }
  .skip-link:focus { left: .5rem; color: #fff; }
  #root:not(.ready) .boot { display: grid; place-items: center; min-height: 60vh; }
  .boot { display: none; }
  .boot-mark { width: 52px; height: 52px; border-radius: 14px; background: var(--brand); color: #fff; display: grid; place-items: center; font-size: 2rem; font-weight: 800; animation: pulse 1.2s infinite ease-in-out; }
  @keyframes pulse { 50% { transform: scale(.9); opacity: .7; } }
  .noscript { max-width: 860px; margin: 2rem auto; padding: 0 1rem; }

  .topbar { background: #1d1b20; color: #cfcad3; font-size: var(--fs-xs); }
  .topbar-inner { display: flex; justify-content: space-between; align-items: center; gap: 1rem; min-height: 38px; }
  .topbar a { color: #fff; text-decoration: none; display: inline-flex; align-items: center; gap: .4rem; }
  .topbar a:hover { color: var(--accent); }
  .topbar-contact, .topbar-right { display: flex; align-items: center; gap: 1.25rem; }
  .member-login { padding-left: 1rem; border-left: 1px solid rgb(255 255 255 / .2); }
  @media (max-width: 767px) { .topbar-contact a:nth-child(2) { display: none; } .topbar .social { display: none; } }
  .social { display: flex; gap: .5rem; flex-wrap: wrap; }
  .social a { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; border: 1px solid rgb(255 255 255 / .35); }
  .social-lg a { width: 40px; height: 40px; }

  .site-header { background: var(--surface); position: sticky; top: 0; z-index: 40; border-bottom: 1px solid transparent; transition: box-shadow .2s, border-color .2s; }
  .site-header.scrolled { box-shadow: 0 6px 24px rgb(29 27 32 / .08); border-bottom-color: var(--line); }
  .header-main { display: flex; align-items: center; gap: 1rem; min-height: 78px; }
  .brand { display: flex; align-items: center; gap: .75rem; text-decoration: none; color: var(--brand); margin-right: auto; flex: none; white-space: nowrap; }
  .brand-logo { width: auto; height: 56px; object-fit: contain; flex: none; }
  .brand-logo.sm { height: 32px; }
  .brand-light .brand-logo, .appbar .brand-logo, .install-banner .brand-logo { background: #fff; border-radius: 12px; padding: 3px; }
  @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .brand-logo { background: #fff; border-radius: 12px; padding: 3px; } }
  :root[data-theme="dark"] .brand-logo { background: #fff; border-radius: 12px; padding: 3px; }
  .brand-mark { width: 50px; height: 50px; border-radius: 50%; border: 2px solid var(--brand); color: var(--brand); display: grid; place-items: center; flex: none; }
  .brand-text strong { display: block; font-size: 1.1rem; font-weight: 700; line-height: 1.15; letter-spacing: -.01em; }
  .brand-text small { display: block; color: var(--ink-2); font-size: .85rem; font-weight: 500; }
  .brand-light { color: #fff; } .brand-light:hover { color: #fff; } .brand-light .brand-mark { border-color: #fff; color: #fff; } .brand-light .brand-text small { color: #bdb7c2; }
  .primary-nav { display: flex; align-items: center; }
  .primary-nav > ul { display: flex; gap: .1rem; align-items: center; }
  .primary-nav a, .primary-nav button { display: flex; align-items: center; gap: .25rem; padding: .6rem .55rem; min-height: 44px; border-radius: var(--radius-sm); color: var(--ink); text-decoration: none; font-weight: 500; font-size: .9rem; background: none; border: 0; cursor: pointer; white-space: nowrap; }
  .primary-nav a:hover, .primary-nav button:hover { color: var(--accent-ink); }
  .primary-nav a.active, .primary-nav button.active { color: var(--brand); font-weight: 600; box-shadow: inset 0 -2px 0 var(--accent); border-radius: 0; }
  .has-sub { position: relative; }
  .submenu { position: absolute; top: 100%; left: 0; min-width: 230px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); padding: .4rem; display: none; flex-direction: column; }
  .has-sub.open .submenu, .has-sub:focus-within .submenu { display: flex; }
  .submenu a { border-radius: 8px; }
  .submenu a:hover { background: var(--surface-2); }
  .header-cta { flex: none; }
  .primary-nav .nav-cta-mobile { display: none; }
  .nav-toggle { display: none; width: 46px; height: 46px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); cursor: pointer; place-items: center; }
  .burger, .burger::before, .burger::after { display: block; width: 20px; height: 2px; background: var(--brand); position: relative; content: ""; transition: transform .2s; }
  .burger::before { position: absolute; top: -6px; } .burger::after { position: absolute; top: 6px; }
  .nav-toggle[aria-expanded=true] .burger { background: transparent; }
  .nav-toggle[aria-expanded=true] .burger::before { transform: translateY(6px) rotate(45deg); }
  .nav-toggle[aria-expanded=true] .burger::after { transform: translateY(-6px) rotate(-45deg); }
  @media (max-width: 1279.98px) {
    .nav-toggle { display: grid; }
    .primary-nav { position: fixed; inset: 0 0 0 auto; width: min(88vw, 360px); background: var(--surface); box-shadow: var(--shadow-lg); padding: 5.5rem 1rem 1.5rem; transform: translateX(100%); transition: transform .25s; overflow-y: auto; z-index: -1; visibility: hidden; flex-direction: column; align-items: stretch; gap: 1rem; }
    .primary-nav.open { transform: none; visibility: visible; }
    .primary-nav > ul { flex-direction: column; align-items: stretch; }
    .submenu { position: static; display: flex; box-shadow: none; border: 0; padding: 0 0 0 1rem; }
    .has-sub > button { display: none; }
    .primary-nav .nav-cta-mobile { display: inline-flex; }
  }
  @media (max-width: 640px) { .header-main .header-cta { display: none; } }
  @media (max-width: 420px) { .brand-text small { display: none; } .brand-logo { height: 46px; } }

  .ticker { background: var(--surface-2); border-block: 1px solid var(--line); font-size: var(--fs-small); }
  .ticker-inner { display: flex; gap: 1rem; align-items: center; min-height: 44px; }
  .ticker-label { display: inline-flex; align-items: center; gap: .45rem; color: var(--brand); font-weight: 700; white-space: nowrap; flex: none; }
  .ticker-viewport { flex: 1; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent); }
  .ticker-track { display: flex; width: max-content; animation: ticker 40s linear infinite; }
  .ticker:hover .ticker-track, .ticker:focus-within .ticker-track, .ticker.paused .ticker-track { animation-play-state: paused; }
  .ticker-track ul { display: flex; flex: none; }
  .ticker-track li { white-space: nowrap; padding-inline: 1.25rem; position: relative; }
  .ticker-track li::after { content: "|"; position: absolute; right: -.15rem; color: var(--line); }
  .ticker-track a { color: var(--ink); text-decoration: none; display: inline-flex; align-items: center; min-height: 40px; padding-block: .25rem; }
  .ticker-track a:hover { color: var(--accent-ink); text-decoration: underline; }
  .ticker-toggle { width: 36px; height: 36px; border: 0; background: none; border-radius: 8px; cursor: pointer; display: grid; place-items: center; color: var(--brand); flex: none; }
  .ticker-toggle:hover { background: var(--surface); }
  @keyframes ticker { to { transform: translateX(-50%); } }
  @media (max-width: 600px) { .ticker-label { font-size: 0; gap: 0; } }

  .btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .7rem 1.25rem; min-height: 44px; border-radius: 10px; background: var(--brand); color: #fff; border: 2px solid var(--brand); font-weight: 600; font-size: .93rem; text-decoration: none; cursor: pointer; transition: background .15s, color .15s, border-color .15s, transform .15s, box-shadow .15s; }
  .btn:hover { background: var(--brand-strong); border-color: var(--brand-strong); color: #fff; transform: translateY(-1px); box-shadow: 0 6px 16px rgb(123 30 69 / .22); }
  .btn:active { transform: translateY(0); box-shadow: none; }
  .btn[disabled], .btn[aria-disabled=true] { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; }
  .btn-navy { background: var(--brand); border-color: var(--brand); color: #fff; }
  .btn-navy:hover { background: var(--brand-strong); border-color: var(--brand-strong); color: #fff; box-shadow: 0 6px 16px rgb(29 27 32 / .25); }
  .btn-outline { background: transparent; border-color: var(--brand); color: var(--brand); }
  .btn-outline:hover { background: var(--brand); color: #fff; box-shadow: none; border-color: var(--brand); }
  .btn-white { background: #fff; border-color: #fff; color: var(--brand); }
  .btn-white:hover { background: var(--surface-2); border-color: var(--surface-2); color: var(--brand); }
  .btn-outline-light { background: transparent; border-color: rgb(255 255 255 / .8); color: #fff; }
  .btn-outline-light:hover { background: #fff; color: var(--brand); border-color: #fff; }
  .btn-ghost { background: var(--brand); border-color: var(--brand); color: #fff; }
  .btn-sm { padding: .45rem .95rem; min-height: 40px; font-size: .85rem; }
  .btn-lg { padding: .85rem 1.4rem; font-size: .98rem; min-height: 50px; }
  .btn-block { width: 100%; }
  .chip { display: inline-flex; align-items: center; gap: .3rem; padding: .2rem .6rem; border-radius: 999px; font-size: var(--fs-xs); font-weight: 600; background: var(--surface-2); color: var(--brand); }
  .chip-accent { background: var(--accent-soft); color: var(--accent-ink); text-transform: uppercase; letter-spacing: .04em; font-size: .7rem; }
  .chip-muted { color: var(--muted); }
  .chip-warn, .chip-urgent { background: #fff1e6; color: #b45309; }
  .chip-circular { background: var(--info-soft); color: #4a3f55; }
  .chip-notice { background: var(--accent-soft); color: var(--accent-ink); }
  .eyebrow { display: inline-flex; align-items: center; gap: .6rem; text-transform: uppercase; letter-spacing: .1em; font-size: .78rem; font-weight: 700; color: var(--accent-ink); margin-bottom: .4rem; }
  .eyebrow::before { content: ""; width: 26px; height: 2px; background: var(--accent); }
  .eyebrow-lines::after { content: ""; width: 26px; height: 2px; background: var(--accent); }
  .lead { font-size: clamp(1rem, .95rem + .3vw, 1.15rem); color: var(--ink-2); max-width: 60ch; margin-top: .75rem; }
  .meta { display: flex; flex-wrap: wrap; gap: .35rem .9rem; color: var(--muted); font-size: var(--fs-small); align-items: center; }
  .meta span { display: inline-flex; align-items: center; gap: .3rem; }
  .meta-list { display: grid; gap: .45rem; color: var(--ink-2); font-size: var(--fs-small); }
  .meta-list li { display: flex; gap: .55rem; align-items: flex-start; }
  .meta-list .icon { color: var(--accent-ink); margin-top: .15rem; }
  .view-all, .read-more { display: inline-flex; align-items: center; gap: .35rem; font-weight: 600; font-size: var(--fs-small); text-decoration: none; color: var(--brand); }
  .view-all:hover, .read-more:hover { color: var(--accent-ink); }
  .read-more .icon, .view-all .icon { transition: transform .15s; }
  .read-more:hover .icon, .view-all:hover .icon { transform: translateX(3px); }

  .card { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--shadow); transition: transform .2s, box-shadow .2s, border-color .2s; }
  .card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: #d9cfc4; }
  .card-media { position: relative; display: block; overflow: hidden; background: var(--surface-2); }
  .card-media img, .img-placeholder { aspect-ratio: 16 / 9; width: 100%; object-fit: cover; background: var(--surface-2); }
  .img-placeholder { background: linear-gradient(135deg, var(--brand-soft), var(--surface-2)); }
  .card-body { padding: 1.15rem 1.25rem 1.3rem; display: grid; gap: .6rem; flex: 1; align-content: start; }
  .card-title { font-size: var(--fs-h3); }
  .card-title a { color: var(--brand); text-decoration: none; }
  .card-title a:hover { color: var(--accent-ink); }
  .card-text { color: var(--muted); font-size: var(--fs-small); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .card-foot { display: flex; justify-content: flex-end; align-items: center; gap: .5rem; margin-top: auto; padding-top: .4rem; }
  .cards-equal > .card { height: 100%; }
  .date-badge { position: absolute; top: .9rem; left: .9rem; background: #fff; border-radius: 10px; text-align: center; padding: .4rem .65rem; box-shadow: var(--shadow); line-height: 1.1; color: var(--brand); min-width: 58px; }
  .date-badge strong { display: block; font-size: 1.45rem; font-weight: 800; }
  .date-badge span { display: block; font-size: .7rem; font-weight: 700; text-transform: uppercase; }
  .media-chip { position: absolute; left: 1rem; bottom: .8rem; background: #fff; color: var(--brand); font-size: .72rem; font-weight: 700; padding: .2rem .65rem; border-radius: 999px; }
  .event-card .card-title { min-height: 2.4em; }

  .members-grid { display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); }
  .members-row { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-4); }
  @media (max-width: 1199px) { .members-row { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  @media (max-width: 767px) { .members-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); } }
  .members-strip { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(180px, 1fr); gap: 1.25rem; overflow-x: auto; padding-bottom: .5rem; }
  .member { text-align: center; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.35rem .9rem 1.2rem; transition: transform .2s, box-shadow .2s; }
  .member:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
  .member-photo { width: 104px; height: 104px; border-radius: 50%; object-fit: cover; object-position: center 25%; margin: 0 auto .85rem; border: 4px solid var(--surface-2); box-shadow: 0 0 0 2px var(--accent); background: var(--surface-2); }
  .member-initial { display: grid; place-items: center; font-size: 2.4rem; font-weight: 700; color: var(--brand); }
  .member h3 { font-size: .98rem; }
  .designation { color: var(--accent-ink); font-weight: 600; font-size: .88rem; margin-top: .15rem; }
  .member-qual, .member-tenure { color: var(--muted); font-size: var(--fs-xs); margin-top: .3rem; }

  .page-header { background: linear-gradient(180deg, var(--surface-2), var(--bg)); padding-block: 2.25rem 2.5rem; }
  .crumbs ol { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; padding: 0; margin-bottom: .75rem; font-size: var(--fs-small); color: var(--muted); }
  .crumbs li + li::before { content: "/"; margin-right: .4rem; opacity: .6; }
  .crumbs a { color: var(--muted); }
  .page-header .meta { margin-top: .75rem; }

  .tabs { display: flex; gap: .25rem; border-bottom: 2px solid var(--line); margin-bottom: 1.5rem; flex-wrap: wrap; }
  .tabs a { padding: .65rem 1rem; text-decoration: none; color: var(--muted); font-weight: 600; margin-bottom: -2px; border-bottom: 2px solid transparent; min-height: 44px; }
  .tabs a.active { color: var(--brand); border-color: var(--accent); }
  .pager { display: flex; gap: .4rem; justify-content: center; margin-top: 2rem; flex-wrap: wrap; }
  .pager .btn { min-width: 44px; padding-inline: .9rem; }

  .side-nav, .side-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.25rem; position: sticky; top: 100px; box-shadow: var(--shadow); }
  .side-nav h2, .side-card h2 { font-size: 1.1rem; }
  .side-nav ul { display: grid; gap: .15rem; list-style: none; padding: 0; }
  .side-nav a { display: block; padding: .5rem .65rem; border-radius: 8px; text-decoration: none; color: var(--ink-2); }
  .side-nav a[aria-current] { background: var(--surface-2); color: var(--brand); font-weight: 600; box-shadow: inset 3px 0 0 var(--accent); }
  @media (max-width: 1023px) { .side-nav, .side-card { position: static; } }
  .facts { display: grid; grid-template-columns: max-content 1fr; gap: .4rem 1rem; margin: .5rem 0 1rem; font-size: .95rem; }
  .facts dt { color: var(--muted); font-weight: 600; }

  .prose { max-width: 72ch; color: var(--ink-2); }
  .prose > * + * { margin-top: 1em; }
  .prose h2 { margin-top: 1.6em; } .prose h3 { margin-top: 1.4em; }
  .prose ul, .prose ol { padding-left: 1.3rem; }
  .prose li + li { margin-top: .35em; }
  .prose blockquote { border-left: 4px solid var(--accent); padding: .25rem 1rem; color: var(--ink); font-size: 1.05em; }
  .prose table, .agenda { width: 100%; border: 1px solid var(--line); font-size: .95rem; }
  .prose th, .prose td, .agenda th, .agenda td { border-bottom: 1px solid var(--line); padding: .6rem .8rem; text-align: left; vertical-align: top; }
  .prose th, .agenda th { background: var(--surface-2); color: var(--brand); }
  .prose img { border-radius: var(--radius-sm); }
  .table-wrap { overflow-x: auto; }
  .feature-img { width: 100%; border-radius: var(--radius); margin-bottom: 1.5rem; aspect-ratio: 16 / 8; object-fit: cover; }

  .file-list, .doc-list { display: grid; gap: .6rem; list-style: none; padding: 0; }
  .file-list a { display: flex; gap: .75rem; align-items: center; padding: .75rem 1rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); text-decoration: none; color: var(--ink); }
  .file-list a:hover { border-color: var(--accent); }
  .file-type { display: inline-grid; place-items: center; min-width: 48px; height: 48px; border-radius: 10px; background: var(--surface-2); color: var(--brand); font-weight: 800; font-size: .75rem; flex: none; }
  .doc-list li { display: grid; grid-template-columns: auto 1fr auto; gap: 1rem; align-items: center; padding: 1rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
  .doc-list h3 { font-size: 1.02rem; }
  @media (max-width: 600px) { .doc-list li { grid-template-columns: auto 1fr; } .doc-list .btn { display: none; } }
  .notice-list { display: grid; list-style: none; padding: 0; border-top: 1px solid var(--line); }
  .notice-list li { display: grid; grid-template-columns: 130px 1fr; gap: 1rem; padding: .95rem .5rem; border-bottom: 1px solid var(--line); }
  .notice-list li div { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
  .notice-list a { font-weight: 600; color: var(--brand); }
  .notice-list time { color: var(--muted); font-size: var(--fs-small); }
  .notice-list .urgent { background: #fff8f1; }
  @media (max-width: 600px) { .notice-list li { grid-template-columns: 1fr; gap: .25rem; } }
  .link-cards { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); list-style: none; padding: 0; }
  .link-cards a { display: grid; gap: .25rem; padding: 1.1rem 1.25rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); text-decoration: none; color: var(--brand); box-shadow: var(--shadow); }
  .link-cards a:hover { border-color: var(--accent); }
  .link-cards span { color: var(--muted); font-size: var(--fs-small); }
  .speakers { display: grid; gap: 1rem; }
  .speaker { display: grid; grid-template-columns: 96px 1fr; gap: 1rem; align-items: start; padding: 1rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
  .speaker .member-photo { width: 88px; height: 88px; margin: 0; }

  .photo-grid { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fill, minmax(min(44vw, 220px), 1fr)); list-style: none; padding: 0; }
  .photo-grid button { display: block; width: 100%; padding: 0; border: 0; border-radius: var(--radius-sm); overflow: hidden; cursor: zoom-in; background: var(--surface-2); }
  .photo-grid img { aspect-ratio: 4 / 3; width: 100%; object-fit: cover; transition: transform .3s; }
  .photo-grid button:hover img { transform: scale(1.04); }
  .album-body { grid-template-columns: auto 1fr; align-items: center; gap: .75rem; padding: .85rem 1rem; }
  .album-icon { width: 36px; height: 36px; border-radius: 10px; background: var(--surface-2); color: var(--brand); display: grid; place-items: center; }
  .album-card .card-title { font-size: .95rem; }
  .album-card .card-media img { aspect-ratio: 4 / 3; }
  .lightbox { position: fixed; inset: 0; background: rgb(20 6 14 / .94); z-index: 100; display: grid; grid-template-columns: 64px 1fr 64px; align-items: center; }
  .lightbox figure { display: grid; justify-items: center; gap: .75rem; max-height: 100vh; padding: 3rem 0 1rem; }
  .lightbox img { max-height: 80vh; width: auto; border-radius: 8px; }
  .lightbox figcaption { color: #e7eef7; text-align: center; font-size: .95rem; }
  .lb-count { opacity: .7; margin-left: .75rem; }
  .lightbox button { background: rgb(255 255 255 / .1); color: #fff; border: 0; width: 48px; height: 48px; border-radius: 50%; font-size: 2rem; line-height: 1; cursor: pointer; justify-self: center; }
  .lightbox button:hover { background: rgb(255 255 255 / .2); }
  .lb-close { position: absolute; top: 1rem; right: 1rem; }
  .no-scroll { overflow: hidden; }

  .form-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(1.25rem, 1rem + 1.5vw, 2rem); display: grid; gap: 1.1rem; box-shadow: var(--shadow); }
  .form-grid { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
  .field { display: grid; gap: .35rem; }
  .field label { font-weight: 600; font-size: .92rem; color: var(--brand); }
  .field .req { color: var(--danger); }
  .field input:not([type=checkbox]), .field select, .field textarea { width: 100%; padding: .7rem .85rem; min-height: 48px; border: 1.5px solid var(--line); border-radius: 10px; background: var(--surface); }
  .field input:focus, .field select:focus, .field textarea:focus { border-color: var(--accent); box-shadow: var(--focus); outline: none; }
  .field.has-error input, .field.has-error select, .field.has-error textarea { border-color: var(--danger); }
  .field .hint { color: var(--muted); font-size: var(--fs-xs); }
  .field .error { color: var(--danger); font-size: .86rem; font-weight: 600; }
  .check { display: flex; gap: .65rem; align-items: flex-start; font-weight: 400 !important; color: var(--ink-2) !important; cursor: pointer; }
  .check input { width: 22px; height: 22px; margin-top: .15rem; accent-color: var(--brand); flex: none; }
  .hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
  .notice { padding: 1rem 1.25rem; border-radius: var(--radius-sm); background: var(--surface-2); border-left: 4px solid var(--accent); margin-bottom: 1rem; }
  .notice-error { background: var(--danger-soft); border-color: var(--danger); color: var(--danger); }
  .notice-error ul { margin-top: .5rem; padding-left: 1.2rem; }
  .notice-error a { color: inherit; }
  .notice-info { background: var(--info-soft); }
  .success-panel { text-align: center; background: var(--success-soft); border: 1px solid rgb(22 163 74 / .35); border-radius: var(--radius); padding: 2rem 1.5rem; display: grid; gap: .75rem; justify-items: center; }
  .success-panel:focus { outline: none; box-shadow: var(--focus); }
  .success-icon { width: 64px; height: 64px; border-radius: 50%; background: var(--success); color: #fff; display: grid; place-items: center; font-size: 2rem; }
  .ref strong { font-size: 1.6rem; letter-spacing: .05em; color: var(--brand); }
  .success-panel .facts { text-align: left; }
  .empty-state { text-align: center; padding: 2.5rem 1rem; color: var(--muted); border: 1px dashed var(--line); border-radius: var(--radius); background: var(--surface-2); display: grid; gap: .75rem; justify-items: center; }
  .empty-state h2 { font-size: 1.3rem; }
  .skeleton-block { display: grid; gap: .75rem; padding: 1rem 0; }
  .skeleton { height: 1rem; border-radius: 6px; background: linear-gradient(90deg, var(--surface-2), var(--line), var(--surface-2)); background-size: 200% 100%; animation: shimmer 1.2s infinite; }
  @keyframes shimmer { to { background-position: -200% 0; } }

  .cta-band-wrap { margin-top: var(--space-6); position: relative; z-index: 1; margin-bottom: -3.5rem; }
  .cta-band { display: grid; grid-template-columns: auto 1fr auto; gap: 1.25rem 1.5rem; align-items: center; padding: 1.5rem 2rem; border-radius: var(--radius); color: #fff;
    background: radial-gradient(500px 200px at 85% 0%, rgb(255 255 255 / .12), transparent), linear-gradient(100deg, #5f1735, var(--brand) 60%, #8e2a55); box-shadow: var(--shadow-lg); }
  .cta-icon { width: 58px; height: 58px; border-radius: 50%; background: #fff; color: var(--accent-ink); display: grid; place-items: center; }
  .cta-copy h2 { color: #fff; font-size: clamp(1.1rem, 1rem + .5vw, 1.35rem); margin: 0 0 .2rem; }
  .cta-copy p { color: #f1dee6; font-size: var(--fs-small); }
  .cta-actions { display: flex; gap: .75rem; flex-wrap: wrap; }
  @media (max-width: 900px) { .cta-band { grid-template-columns: 1fr; text-align: center; justify-items: center; } .cta-actions { justify-content: center; } .cta-actions .btn { flex: 1 1 220px; } }

  .site-footer { background: #17151a; color: #bdb7c2; padding-top: 5.5rem; font-size: var(--fs-small); }
  .site-footer a { color: #e9e5ec; text-decoration: none; }
  .site-footer a:hover { color: var(--accent); }
  .footer-grid { display: grid; gap: 2rem; grid-template-columns: 1.2fr 1.3fr 1.3fr .9fr; padding-bottom: 2.5rem; }
  .footer-grid > section + section { border-left: 1px solid rgb(255 255 255 / .1); padding-left: 2rem; }
  @media (max-width: 1023px) { .footer-grid { grid-template-columns: 1fr 1fr; } .footer-grid > section + section { border: 0; padding: 0; } }
  @media (max-width: 600px) { .footer-grid { grid-template-columns: 1fr; } }
  .footer-tagline { margin-top: 1rem; }
  .footer-title { color: #fff; font-size: .98rem; font-weight: 600; margin-bottom: 1rem; letter-spacing: 0; }
  .footer-links { display: grid; grid-template-columns: 1fr 1fr; gap: .45rem 1rem; }
  .footer-contact { display: grid; gap: .7rem; }
  .footer-contact li { display: flex; gap: .65rem; align-items: flex-start; }
  .footer-contact .icon { color: var(--accent); margin-top: .1rem; }
  .site-footer .social a { border-color: rgb(255 255 255 / .3); color: #fff; }
  .site-footer .social a:hover { background: #fff; border-color: #fff; color: var(--brand); }
  .footer-bottom { border-top: 1px solid rgb(255 255 255 / .1); }
  .footer-bottom-inner { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding-block: 1rem; }
  .footer-bottom ul { display: flex; gap: 1rem; flex-wrap: wrap; }
  .footer-bottom .credit { display: inline-block; margin-left: .35rem; opacity: .85; } .footer-bottom .credit a { color: #e8c06a; font-weight: 600; text-decoration: none; } .footer-bottom .credit a:hover { text-decoration: underline; }
  .footer-bottom li + li { padding-left: 1rem; border-left: 1px solid rgb(255 255 255 / .2); }
}

@layer pages {
  .hero { background: linear-gradient(90deg, var(--surface-2) 0%, var(--surface-2) 45%, transparent 45%); position: relative; overflow: hidden; }
  .hero-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: stretch; min-height: 480px; }
  .hero-copy { padding-block: clamp(2.5rem, 2rem + 3vw, 4.25rem); padding-right: 2rem; display: flex; flex-direction: column; justify-content: center; position: relative; z-index: 1; }
  .hero h1 { max-width: 14ch; margin-top: .25rem; }
  .hero-actions { display: flex; gap: .85rem; flex-wrap: wrap; margin-top: 1.75rem; }
  .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 96px), 1fr)); gap: .75rem; margin-top: 2rem; max-width: 520px; }
  .stats li { display: flex; align-items: center; gap: .6rem; }
  .stats li + li { border-left: 1px solid var(--line); padding-left: .75rem; }
  .stat-icon { color: var(--brand); }
  .stats strong { display: block; font-size: 1.15rem; font-weight: 800; color: var(--brand); line-height: 1.1; }
  .stats small { color: var(--muted); font-size: var(--fs-xs); }
  .hero-visual { position: relative; margin-right: calc((100vw - min(100vw - 2rem, var(--container))) / -2); min-height: 420px; }
  .hero-photo { position: absolute; inset: 0; }
  .hero-photo img, .hero-photo .img-placeholder { width: 100%; height: 100%; object-fit: cover; aspect-ratio: auto; }
  .hero-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--surface-2) 0%, rgb(247 245 242 / 0) 28%); }
  .featured-cme { position: absolute; right: max(1rem, calc((100vw - min(100vw - 2rem, var(--container))) / 2)); top: 50%; transform: translateY(-50%); width: min(340px, 90%);
    background: var(--surface); border-radius: var(--radius); padding: 1.4rem 1.4rem 1.5rem; box-shadow: var(--shadow-lg); display: grid; gap: .7rem; justify-items: start; border: 1px solid var(--line); }
  .featured-cme h2 { font-size: 1.2rem; margin: 0; padding-right: 3rem; }
  .featured-cme h2 a { color: var(--brand); text-decoration: none; }
  .featured-icon { position: absolute; top: 1rem; right: 1rem; width: 52px; height: 52px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-ink); display: grid; place-items: center; }
  .credit-pill { border: 1px solid var(--line); border-radius: 6px; padding: .05rem .45rem; }
  .sep { margin-inline: .4rem; color: var(--line); }
  @media (max-width: 1199px) { .hero h1 { font-size: clamp(1.9rem, 1.4rem + 1.8vw, 2.6rem); max-width: 16ch; } }
  @media (max-width: 1023px) {
    .hero { background: var(--surface-2); }
    .hero-grid { grid-template-columns: 1fr; min-height: 0; }
    .hero-copy { padding-right: 0; padding-bottom: 1.5rem; }
    .hero h1 { max-width: none; }
    .hero-visual { margin: 0 -1rem; min-height: 0; display: grid; }
    .hero-photo { position: relative; aspect-ratio: 16 / 9; }
    .hero-photo::after { display: none; }
    .featured-cme { position: relative; inset: auto; transform: none; width: auto; margin: -2.5rem 1rem 1.5rem; }
  }
  @media (max-width: 767px) {
    .hero-actions .btn { flex: 1 1 100%; }
  }

  .quick-wrap { background: var(--surface-2); padding-block: 0 2.5rem; }
  .quick-links { display: grid; gap: var(--space-4); grid-template-columns: repeat(4, minmax(0, 1fr)); padding-top: 1.5rem; }
  @media (max-width: 1199px) { .quick-links { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (max-width: 600px) { .quick-links { grid-template-columns: 1fr; } }
  .quick-link { display: grid; grid-template-columns: auto 1fr auto; gap: .9rem; align-items: center; padding: 1.15rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); text-decoration: none; color: var(--ink); transition: transform .2s, box-shadow .2s, border-color .2s; }
  .quick-link:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: var(--accent); color: var(--ink); }
  .quick-icon { width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand); }
  .quick-link:nth-child(2) .quick-icon { background: var(--laurel-soft); color: var(--laurel); }
  .quick-link:nth-child(3) .quick-icon { background: var(--accent-soft); color: var(--accent-ink); }
  .quick-link:nth-child(4) .quick-icon { background: #ece9ef; color: #3f3b44; }
  .quick-text strong { display: block; color: var(--brand); font-weight: 600; }
  .quick-text span { display: block; color: var(--muted); font-size: var(--fs-xs); line-height: 1.45; margin-top: .15rem; }
  .quick-arrow { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; color: var(--brand); transition: background .15s, color .15s; }
  .quick-link:hover .quick-arrow { background: var(--brand); color: #fff; border-color: var(--brand); }

  .news-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--space-5); align-items: stretch; }
  @media (max-width: 1023px) { .news-grid { grid-template-columns: 1fr; } }
  .news-featured .card-media img { aspect-ratio: 16 / 7; }
  .media-meta { position: absolute; left: 1rem; top: 1rem; display: flex; gap: .5rem; align-items: center; }
  .media-meta .media-chip { position: static; background: var(--brand); color: #fff; }
  .media-date { display: inline-flex; gap: .3rem; align-items: center; background: rgb(255 255 255 / .92); color: var(--brand); font-size: .72rem; font-weight: 600; padding: .2rem .6rem; border-radius: 999px; }
  .news-side { display: grid; gap: var(--space-4); align-content: stretch; }
  .news-compact { display: grid; grid-template-columns: auto 1fr; gap: 1rem; padding: 1.2rem 1.25rem; align-items: start; }
  .news-icon { width: 54px; height: 54px; border-radius: 50%; background: var(--surface-2); color: var(--brand); display: grid; place-items: center; }
  .news-compact .card-title { font-size: 1rem; margin: .35rem 0 .3rem; }
  .news-compact .card-text { -webkit-line-clamp: 2; margin-bottom: .35rem; }

  .gallery-strip .card-body { padding: .8rem .9rem; }
  .contact-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 2.5rem; }
  @media (max-width: 1023px) { .contact-grid { grid-template-columns: 1fr; } }
  .contact-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.25rem; display: grid; gap: .5rem; margin-bottom: 1.25rem; box-shadow: var(--shadow); }
  .map iframe { width: 100%; height: 360px; border: 0; border-radius: var(--radius); }
  .center-page { text-align: center; min-height: 60vh; display: grid; place-content: center; gap: 1rem; }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .hero { background: var(--surface-2); }
    :root:not([data-theme="light"]) .hero-photo::after { background: linear-gradient(90deg, var(--surface-2), transparent 28%); }
    :root:not([data-theme="light"]) :is(.date-badge, .btn-white, .media-date) { background: #fff; color: var(--brand); }
  }
  :root[data-theme="dark"] .hero { background: var(--surface-2); }
  :root[data-theme="dark"] .hero-photo::after { background: linear-gradient(90deg, var(--surface-2), transparent 28%); }
  :root[data-theme="dark"] :is(.date-badge, .btn-white, .media-date) { background: #fff; color: var(--brand); }
}

@layer utilities {
  .grid, .members-row, .doc-chips, .stats { position: relative; }
  @media (min-width: 768px) { .tabs { position: relative; } }
  .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .muted { color: var(--muted); }
  .small { font-size: var(--fs-small); }
  @media print {
    .topbar, .site-header, .ticker, .site-footer, .cta-band-wrap, .skip-link, .btn, .tabs, .pager, .side-nav { display: none !important; }
    body { background: #fff; color: #000; }
    .page-header { background: none; padding: 0 0 1rem; }
    .card, .form-card, .success-panel { box-shadow: none; }
  }
}

/* Publications & downloads */
@layer pages {
  .doc-search { position: relative; display: flex; align-items: center; max-width: 640px; margin-top: 1.5rem; background: var(--surface); border: 1.5px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); padding-inline: 1rem; }
  .doc-search:focus-within { border-color: var(--accent); box-shadow: var(--focus); }
  .doc-search > .icon { color: var(--muted); }
  .doc-search input { flex: 1; border: 0; background: none; min-height: 54px; padding: 0 .75rem; font-size: 1rem; color: var(--ink); min-width: 0; }
  .doc-search input:focus { outline: none; }
  .doc-search input::-webkit-search-cancel-button { display: none; }
  .doc-search-clear { width: 36px; height: 36px; border: 0; border-radius: 50%; background: var(--surface-2); color: var(--brand); font-size: 1.3rem; cursor: pointer; line-height: 1; flex: none; }
  .doc-layout { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 2rem; align-items: start; }
  .doc-aside { position: sticky; top: 100px; display: grid; gap: 1.25rem; }
  .doc-filter-card, .doc-help { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.25rem; box-shadow: var(--shadow); }
  .doc-filter-card h2, .doc-help h2 { font-size: 1rem; margin-bottom: .75rem; }
  .doc-cats { display: grid; gap: .2rem; }
  .doc-cats a { display: flex; justify-content: space-between; align-items: center; gap: .5rem; padding: .6rem .75rem; border-radius: 10px; color: var(--ink-2); text-decoration: none; font-size: .92rem; min-height: 44px; }
  .doc-cats a:hover { background: var(--surface-2); color: var(--brand); }
  .doc-cats a.active { background: var(--brand); color: #fff; font-weight: 600; }
  .doc-cats .count { min-width: 28px; text-align: center; font-size: .75rem; font-weight: 700; padding: .1rem .45rem; border-radius: 999px; background: var(--surface-2); color: var(--brand); }
  .doc-cats a.active .count { background: rgb(255 255 255 / .2); color: #fff; }
  .doc-help { background: linear-gradient(160deg, var(--surface-2), var(--surface)); display: grid; gap: .6rem; justify-items: start; }
  .doc-help h2 { margin: 0; }
  .doc-help p { color: var(--muted); font-size: var(--fs-small); }
  .doc-help-icon { width: 46px; height: 46px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-ink); display: grid; place-items: center; }
  .doc-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
  .doc-count { color: var(--muted); }
  .doc-count strong { color: var(--brand); }
  .doc-controls { display: flex; gap: .6rem; flex-wrap: wrap; }
  .select-wrap select { min-height: 44px; padding: .5rem 2.2rem .5rem .85rem; border: 1.5px solid var(--line); border-radius: 10px; background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23082d5c' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right .8rem center; appearance: none; font-weight: 500; color: var(--brand); cursor: pointer; }
  .select-wrap select:focus { border-color: var(--accent); box-shadow: var(--focus); outline: none; }
  .doc-chips { display: none; gap: .5rem; overflow-x: auto; padding-bottom: .5rem; margin-bottom: .75rem; scrollbar-width: thin; }
  .chip-btn { flex: none; display: inline-flex; align-items: center; gap: .4rem; min-height: 40px; padding: .4rem .9rem; border-radius: 999px; border: 1.5px solid var(--line); background: var(--surface); color: var(--ink-2); font-weight: 500; font-size: .88rem; cursor: pointer; white-space: nowrap; }
  .chip-btn span { font-size: .72rem; font-weight: 700; color: var(--muted); }
  .chip-btn.active { background: var(--brand); border-color: var(--brand); color: #fff; }
  .chip-btn.active span { color: #f1dee6; }
  .doc-active-filters { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: 1rem; }
  .filter-pill { display: inline-flex; gap: .4rem; align-items: center; min-height: 34px; padding: .25rem .75rem; border-radius: 999px; border: 0; background: var(--accent-soft); color: var(--brand); font-weight: 600; font-size: .85rem; cursor: pointer; }
  .filter-pill:hover { background: var(--accent); }
  .link-btn { border: 0; background: none; color: var(--accent-ink); font-weight: 600; text-decoration: underline; cursor: pointer; padding: .25rem; }
  .doc-content { min-width: 0; }
  .doc-grid { display: grid; gap: 1rem; }
  .doc-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 1.1rem; align-items: center; padding: 1.15rem 1.25rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); transition: transform .2s, box-shadow .2s, border-color .2s; position: relative; }
  .doc-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); border-color: #d9cfc4; }
  .file-badge { width: 58px; height: 66px; border-radius: 10px; display: grid; place-items: center; align-content: center; gap: .15rem; color: #fff; background: #64748b; }
  .file-badge b { font-size: .68rem; letter-spacing: .04em; }
  .tone-pdf { background: #dc2626; } .tone-doc { background: #2563eb; } .tone-xls { background: #16a34a; } .tone-ppt { background: #ea580c; } .tone-img { background: var(--accent-ink); }
  .doc-tags { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: .35rem; }
  .doc-title { font-size: 1.05rem; }
  .doc-title a { color: var(--brand); text-decoration: none; }
  .doc-title a::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius); }
  .doc-title a:hover { color: var(--accent-ink); }
  .doc-title a:focus-visible { box-shadow: none; }
  .doc-title a:focus-visible::after { box-shadow: var(--focus); }
  .doc-desc { color: var(--muted); font-size: var(--fs-small); margin-top: .25rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .doc-meta { display: flex; flex-wrap: wrap; gap: .3rem 1.1rem; margin-top: .55rem; color: var(--muted); font-size: var(--fs-xs); }
  .doc-meta li { display: inline-flex; align-items: center; gap: .3rem; }
  .doc-btn { position: relative; z-index: 1; }
  .doc-skeleton .file-badge { background: var(--surface-2); }
  .doc-skeleton .doc-main { display: grid; gap: .5rem; }
  @media (max-width: 1023px) {
    .doc-layout { grid-template-columns: minmax(0, 1fr); }
    .doc-aside { position: static; order: 2; }
    .doc-filter-card { display: none; }
    .doc-chips { display: flex; }
  }
  @media (max-width: 600px) {
    .doc-card { grid-template-columns: auto minmax(0, 1fr); align-items: start; }
    .doc-btn { grid-column: 1 / -1; width: 100%; }
    .file-badge { width: 48px; height: 56px; }
    .doc-controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
    .doc-controls .select-wrap { display: block; min-width: 0; }
    .doc-controls select { width: 100%; }
    .doc-meta { gap: .25rem .8rem; }
  }
}
/* Membership & member portal */
@layer pages {
  .benefit-grid { display: grid; gap: 1rem; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .benefit-grid li { display: grid; grid-template-columns: auto 1fr; gap: .9rem; padding: 1.15rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
  .benefit-grid h3 { font-size: 1rem; } .benefit-grid p { color: var(--muted); font-size: var(--fs-small); margin-top: .2rem; }
  .plan-grid { display: grid; gap: 1.25rem; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; }
  .plan { display: flex; flex-direction: column; gap: .75rem; padding: 1.5rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow); }
  .plan .btn { margin-top: auto; }
  .plan-featured { border: 2px solid var(--accent); box-shadow: var(--shadow-lg); position: relative; }
  .plan-featured::before { content: "Most popular"; position: absolute; top: -.8rem; left: 1.5rem; background: var(--accent); color: var(--brand); font-size: .72rem; font-weight: 700; padding: .15rem .6rem; border-radius: 999px; }
  .plan-price { font-size: 1.9rem; font-weight: 800; color: var(--brand); line-height: 1.1; }
  .plan-price span { display: block; font-size: .85rem; font-weight: 500; color: var(--muted); }
  .plan-benefits { display: grid; gap: .45rem; font-size: var(--fs-small); color: var(--ink-2); }
  .plan-benefits li { display: flex; gap: .45rem; align-items: flex-start; } .plan-benefits .icon { color: var(--accent-ink); margin-top: .2rem; }
  .steps-band { background: var(--surface-2); border-radius: var(--radius-lg); padding: 2rem; }
  .how-steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.25rem; counter-reset: s; }
  .how-steps li { display: grid; gap: .35rem; align-content: start; }
  .how-steps span { width: 38px; height: 38px; border-radius: 50%; background: var(--brand); color: #fff; display: grid; place-items: center; font-weight: 700; }
  .how-steps p { color: var(--muted); font-size: var(--fs-small); }
  .how-step-link { justify-self: start; display: inline-flex; align-items: center; gap: .35rem; font-weight: 600; font-size: var(--fs-small); }
  @media (max-width: 1023px) { .benefit-grid, .how-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } .plan-grid { grid-template-columns: 1fr; } }
  @media (max-width: 600px) { .benefit-grid, .how-steps { grid-template-columns: 1fr; } }

  .apply-wrap { max-width: 920px; }
  .stepper { display: grid; grid-template-columns: repeat(6, 1fr); gap: .25rem; margin-bottom: 1.5rem; }
  .stepper li { display: grid; justify-items: center; gap: .35rem; text-align: center; position: relative; color: var(--muted); font-size: .78rem; font-weight: 600; }
  .stepper li::before { content: ""; position: absolute; top: 17px; left: calc(-50% + 20px); right: calc(50% + 20px); height: 2px; background: var(--line); }
  .stepper li:first-child::before { display: none; }
  .stepper li.done::before, .stepper li.current::before { background: var(--accent); }
  .step-dot { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); border: 2px solid var(--line); color: var(--muted); position: relative; z-index: 1; }
  .stepper .current .step-dot { border-color: var(--brand); background: var(--brand); color: #fff; }
  .stepper .done .step-dot { border-color: var(--accent); background: var(--accent); color: var(--brand); }
  .stepper .current { color: var(--brand); }
  @media (max-width: 600px) { .step-label { display: none; } .stepper .current .step-label { display: block; position: absolute; top: 42px; white-space: nowrap; } .stepper { margin-bottom: 2.25rem; } }
  .step-title { font-size: 1.15rem; }
  .step-title:focus { outline: none; }
  .step-actions { display: flex; justify-content: space-between; gap: 1rem; border-top: 1px solid var(--line); padding-top: 1rem; }
  .span-2 { grid-column: 1 / -1; }
  .plan-choices { border: 0; padding: 0; margin: 0; display: grid; gap: .75rem; }
  .plan-choice { display: flex; gap: .85rem; align-items: flex-start; padding: 1rem 1.1rem; border: 2px solid var(--line); border-radius: var(--radius); cursor: pointer; }
  .plan-choice input { width: 20px; height: 20px; margin-top: .15rem; accent-color: var(--brand); }
  .plan-choice small { display: block; color: var(--ink-2); }
  .plan-choice.selected { border-color: var(--brand); background: var(--surface-2); }
  .upload-grid { display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  @media (max-width: 700px) { .upload-grid { grid-template-columns: 1fr; } }
  .upload-box label { display: grid; justify-items: center; gap: .35rem; text-align: center; padding: 1.25rem; border: 2px dashed var(--line); border-radius: var(--radius); cursor: pointer; color: var(--brand); background: var(--surface-2); min-height: 170px; align-content: center; }
  .upload-box label small { color: var(--muted); word-break: break-all; }
  .upload-box input:focus-visible + label, .upload-box label:hover { border-color: var(--accent); }
  .upload-box.has-file label { border-style: solid; border-color: var(--success); background: var(--success-soft); }
  .upload-box.has-error label { border-color: var(--danger); }
  .upload-box:focus-within label { box-shadow: var(--focus); }
  .status-card { margin-top: 1.5rem; padding: 1.5rem; border-radius: var(--radius); border: 1px solid var(--line); border-left: 5px solid var(--accent); background: var(--surface); box-shadow: var(--shadow); display: grid; gap: .5rem; }
  .status-success { border-left-color: var(--success); } .status-error { border-left-color: var(--danger); } .status-warn { border-left-color: var(--warning); }
  .mt-section { margin-top: 1.5rem; } .mb-1 { margin-bottom: 1rem; } .mt-1 { margin-top: 1rem; } .mt-2 { margin-top: 1.5rem; }

  /* Member portal (server-rendered) */
  .member-portal .portal-main { min-height: 60vh; }
  .portal-nav { display: flex; align-items: center; gap: .25rem; flex-wrap: wrap; }
  .portal-nav a { padding: .55rem .75rem; border-radius: 10px; color: var(--ink-2); text-decoration: none; font-weight: 500; font-size: .92rem; }
  .portal-nav a.active, .portal-nav a:hover { background: var(--surface-2); color: var(--brand); }
  .portal-nav form { margin-left: .5rem; }
  @media (max-width: 760px) { .member-portal .header-main { flex-wrap: wrap; padding-block: .5rem; } .portal-nav { width: 100%; } }
  .portal-footer { border-top: 1px solid var(--line); padding-block: 1.25rem; color: var(--muted); font-size: var(--fs-small); }
  .portal-auth { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); gap: 2rem; max-width: 900px; margin-inline: auto; align-items: start; }
  .portal-auth.single { grid-template-columns: minmax(0, 480px); justify-content: center; }
  .portal-side { background: linear-gradient(160deg, var(--brand-strong), var(--brand)); color: #f1dee6; border-radius: var(--radius-lg); padding: 2rem; display: grid; gap: .75rem; justify-items: start; }
  .portal-side h2 { color: #fff; } .portal-side a:not(.btn) { color: #fff; }
  @media (max-width: 760px) { .portal-auth { grid-template-columns: 1fr; } }
  .stack-form { display: grid; gap: 1rem; }
  .notice-success { background: var(--success-soft); border-color: var(--success); color: #136c37; }
  .portal-welcome { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
  .portal-id { display: flex; gap: 1rem; align-items: center; }
  .portal-id img, .portal-initial { width: 88px; height: 88px; border-radius: 50%; object-fit: cover; border: 4px solid var(--surface-2); box-shadow: 0 0 0 2px var(--accent); }
  .portal-initial { display: grid; place-items: center; background: var(--surface-2); font-size: 2rem; font-weight: 700; color: var(--brand); }
  .portal-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 1rem; }
  .portal-stat { padding: 1rem 1.15rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); display: grid; gap: .2rem; }
  .portal-stat span { color: var(--muted); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .05em; font-weight: 600; }
  .portal-stat strong { color: var(--brand); font-size: 1.1rem; } .portal-stat .ok { color: var(--success); } .portal-stat .bad { color: var(--danger); }
  .portal-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 1.5rem; align-items: start; margin-top: 1rem; }
  @media (max-width: 900px) { .portal-grid { grid-template-columns: 1fr; } }
  .card-page { display: grid; justify-items: center; gap: 1.5rem; }
  /* Digital membership card: sizes to its own width (container queries), stacks cleanly on phones. */
  .member-card { width: 100%; max-width: 540px; min-width: 0; container-type: inline-size; border-radius: 18px; overflow: hidden; background: #fff; color: #1d1b20; box-shadow: var(--shadow-lg); border: 1px solid var(--line); }
  .mc-head { background: linear-gradient(110deg, #5f1735, #7b1e45); color: #fff; padding: .9rem 1.25rem; display: flex; justify-content: space-between; gap: .4rem 1rem; align-items: center; flex-wrap: wrap; }
  .mc-org { font-weight: 700; font-size: .95rem; line-height: 1.3; min-width: 0; } .mc-label { font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: #e8c06a; font-weight: 700; white-space: nowrap; }
  .mc-body { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 1rem; padding: 1.25rem; align-items: center; }
  .mc-photo { width: 96px; height: 96px; border-radius: 14px; object-fit: cover; border: 3px solid #f5e9ee; }
  .mc-initial { display: grid; place-items: center; background: #f5e9ee; font-size: 2.2rem; font-weight: 700; color: #7b1e45; }
  .mc-details { display: grid; gap: .1rem; font-size: .85rem; color: #3f3b44; min-width: 0; }
  .mc-name { font-size: 1.15rem; line-height: 1.25; color: #7b1e45; overflow-wrap: anywhere; }
  .mc-details dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .15rem .6rem; margin-top: .45rem; }
  .mc-details dt { color: #67626b; } .mc-details dd { margin: 0; font-weight: 700; color: #1d1b20; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
  .mc-qr { display: grid; justify-items: center; gap: .2rem; } .mc-qr svg { width: 96px; height: 96px; } .mc-qr small { font-size: .65rem; color: #67626b; }
  .mc-foot { background: #c8962e; color: #2a1406; text-align: center; font-weight: 800; letter-spacing: .2em; font-size: .78rem; padding: .5rem; }
  @container (max-width: 460px) {
    .mc-head { padding: .8rem 1rem; }
    .mc-body { grid-template-columns: auto minmax(0, 1fr); gap: .9rem; padding: 1rem; }
    .mc-photo { width: 80px; height: 80px; }
    .mc-details dl { grid-template-columns: 1fr; gap: 0; margin-top: .55rem; }
    .mc-details dt { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; margin-top: .35rem; }
    .mc-details dd { white-space: nowrap; overflow-wrap: normal; }
    .mc-qr { grid-column: 1 / -1; padding-top: .6rem; border-top: 1px dashed #e6e1da; }
    .mc-qr svg { width: 120px; height: 120px; }
  }
  @container (max-width: 300px) { .mc-body { grid-template-columns: 1fr; justify-items: center; text-align: center; } .mc-details dl { text-align: left; } }
  @media print { .member-portal .site-header, .portal-footer, .no-print { display: none !important; } .member-card { box-shadow: none; } }
}
/* Member profile popup */
@layer pages {
  .member-clickable { position: relative; cursor: pointer; }
  .member-open { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; text-align: center; }
  .member-open::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius); }
  .member-open:focus-visible { box-shadow: none; }
  .member-open:focus-visible::after { box-shadow: var(--focus); }
  .member-clickable:hover { border-color: var(--accent); }
  .member-more { display: inline-flex; align-items: center; gap: .3rem; margin-top: .6rem; font-size: var(--fs-xs); font-weight: 600; color: var(--accent-ink); opacity: .85; }
  .member-clickable:hover .member-more { opacity: 1; }
  .member-clickable:hover .member-more .icon { transform: translateX(3px); transition: transform .15s; }
  .modal-backdrop { position: fixed; inset: 0; z-index: 100; background: rgb(30 8 22 / .6); display: grid; place-items: center; padding: 1rem; animation: fade-in .15s ease-out; }
  .profile-modal { position: relative; width: min(100%, 620px); max-height: calc(100vh - 2rem); overflow-y: auto; background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 1.75rem; text-align: left; animation: pop-in .18s ease-out; cursor: auto; }
  .modal-close { position: absolute; top: .75rem; right: .75rem; width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--surface-2); color: var(--brand); font-size: 1.6rem; line-height: 1; cursor: pointer; }
  .modal-close:hover { background: var(--line); }
  .profile-head { display: flex; gap: 1.25rem; align-items: center; padding-right: 2.5rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--line); }
  .profile-photo { width: 120px; height: 120px; flex: none; border-radius: 50%; object-fit: cover; object-position: center 25%; border: 4px solid var(--surface-2); box-shadow: 0 0 0 2px var(--accent); background: var(--surface-2); }
  .profile-photo.member-initial { font-size: 2.8rem; }
  .profile-head h2 { font-size: 1.45rem; margin: 0 0 .2rem; }
  .profile-head .designation { font-size: 1rem; }
  .profile-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .75rem; margin: 1.25rem 0; }
  .profile-facts div { background: var(--surface-2); border-radius: 10px; padding: .65rem .85rem; }
  .profile-facts dt { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 600; }
  .profile-facts dd { margin: .15rem 0 0; color: var(--brand); font-weight: 600; }
  .profile-bio h3 { font-size: 1rem; margin-bottom: .5rem; }
  .profile-bio p { color: var(--ink-2); }
  .profile-bio p + p { margin-top: .75rem; }
  .profile-contact { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--line); }
  .profile-contact .btn { word-break: break-all; }
  @keyframes fade-in { from { opacity: 0; } }
  @keyframes pop-in { from { opacity: 0; transform: translateY(10px) scale(.98); } }
  @media (max-width: 520px) {
    .profile-modal { padding: 1.25rem; }
    .profile-head { flex-direction: column; text-align: center; padding-right: 0; padding-top: .5rem; }
    .profile-photo { width: 104px; height: 104px; }
  }
}
/* =========================================================================
   Native-app mobile shell (phones ≤ 767px). Desktop/tablet unaffected.
   ========================================================================= */
@layer components {
  .mobile-only { display: none; }
  .appbar, .bottom-nav, .mobile-action-bar, .install-banner { display: none; }
  .ripple { position: absolute; border-radius: 50%; background: currentColor; opacity: .18; transform: scale(0); animation: ripple .55s ease-out; pointer-events: none; }
  .has-ripple { position: relative; overflow: hidden; }
  @keyframes ripple { to { transform: scale(1); opacity: 0; } }
}

@media (max-width: 767px) {
  @layer pages {
    :root { --appbar-h: 56px; --bnav-h: 72px; --safe-b: env(safe-area-inset-bottom, 0px); --safe-t: env(safe-area-inset-top, 0px); }
    html { scroll-padding-top: calc(var(--appbar-h) + 12px); -webkit-tap-highlight-color: transparent; }
    body { background: var(--surface-2); overscroll-behavior-y: none; }
    .desktop-only { display: none !important; }
    .mobile-only { display: block; }
    /* The app bar wrapper must be the sticky element (a sticky child cannot outgrow a wrapper of its own height). */
    .mobile-only:has(> .appbar) { position: sticky; top: 0; z-index: 60; }
    .has-bottom-nav main, .has-bottom-nav .site-footer { padding-bottom: calc(var(--bnav-h) + var(--safe-b)); }
    .has-bottom-nav .site-footer { padding-bottom: calc(var(--bnav-h) + var(--safe-b) + 1rem); }
    .m-hide-ticker .ticker, .m-hide-cta .cta-band-wrap { display: none; }

    /* Top app bar */
    .appbar { display: flex; align-items: center; gap: .25rem; position: sticky; top: 0; z-index: 60; height: calc(var(--appbar-h) + var(--safe-t)); padding: var(--safe-t) .25rem 0; background: var(--brand); color: #fff; transition: box-shadow .2s; }
    .appbar.raised { box-shadow: 0 2px 8px rgb(0 0 0 / .25); }
    .appbar-btn { width: 48px; height: 48px; display: grid; place-items: center; border: 0; border-radius: 50%; background: none; color: #fff; cursor: pointer; flex: none; position: relative; overflow: hidden; }
    .appbar-btn:active { background: rgb(255 255 255 / .12); }
    .appbar-title { flex: 1; min-width: 0; font-size: 1.15rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-left: .25rem; }
    .appbar-brand { flex: 1; display: flex; align-items: center; gap: .6rem; color: #fff; text-decoration: none; font-weight: 700; font-size: 1.1rem; min-width: 0; }
    .appbar-brand:hover { color: #fff; }
    .brand-mark.sm { width: 32px; height: 32px; border-width: 0; background: var(--accent); color: var(--brand); }
    .appbar-actions { display: flex; }

    /* Bottom navigation (Material 3) */
    .bottom-nav { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; height: calc(var(--bnav-h) + var(--safe-b)); padding: 0 0 var(--safe-b); background: var(--surface); border-top: 1px solid var(--line); box-shadow: 0 -2px 12px rgb(29 27 32 / .08); }
    .bnav-item { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .25rem; min-width: 0; border: 0; background: none; color: var(--ink-2); text-decoration: none; font: inherit; cursor: pointer; position: relative; overflow: hidden; }
    .bnav-pill { width: 60px; height: 32px; border-radius: 16px; display: grid; place-items: center; transition: background .2s; }
    .bnav-label { font-size: .72rem; font-weight: 600; letter-spacing: .01em; white-space: nowrap; }
    .bnav-item.active { color: var(--brand); }
    .bnav-item.active .bnav-pill { background: var(--accent-soft); color: var(--brand); }
    .bnav-item:focus-visible { box-shadow: inset var(--focus); }

    /* Navigation drawer */
    .drawer-scrim { position: fixed; inset: 0; z-index: 120; background: rgb(0 0 0 / .45); animation: fade-in .2s; }
    .drawer { position: absolute; inset: 0 auto 0 0; width: min(86vw, 340px); background: var(--surface); border-radius: 0 20px 20px 0; padding: calc(1rem + var(--safe-t)) .75rem calc(1rem + var(--safe-b)); overflow-y: auto; animation: slide-in .25s cubic-bezier(.2, .8, .2, 1); }
    .drawer-head { display: flex; gap: .75rem; align-items: center; padding: .5rem .75rem 1rem; }
    .drawer-head strong { display: block; color: var(--brand); line-height: 1.25; font-size: .98rem; }
    .drawer-head small { display: block; color: var(--muted); font-size: .75rem; line-height: 1.35; margin-top: .2rem; }
    .drawer-list { display: grid; gap: 2px; }
    .drawer-list a, .drawer-list button { display: flex; align-items: center; gap: 1rem; width: 100%; min-height: 52px; padding: 0 1rem; border-radius: 26px; border: 0; background: none; color: var(--ink); text-decoration: none; font: inherit; font-weight: 500; font-size: .95rem; cursor: pointer; text-align: left; position: relative; overflow: hidden; }
    .drawer-list .icon { color: var(--ink-2); }
    .drawer-list a.active { background: var(--accent-soft); color: var(--brand); font-weight: 600; }
    .drawer-list a.active .icon { color: var(--brand); }
    .drawer-divider { height: 1px; background: var(--line); margin: .75rem 1rem; }
    @keyframes slide-in { from { transform: translateX(-100%); } }

    /* Page transition */
    .page-anim { animation: page-in .22s ease-out; }
    @keyframes page-in { from { opacity: 0; transform: translateY(8px); } }

    /* Install banner */
    .install-banner { display: flex; align-items: center; gap: .75rem; position: fixed; left: .75rem; right: .75rem; bottom: calc(var(--bnav-h) + var(--safe-b) + .75rem); z-index: 55; padding: .75rem .75rem .75rem 1rem; background: var(--surface); border-radius: 16px; box-shadow: var(--shadow-lg); animation: page-in .3s ease-out; }
    .install-banner p { flex: 1; min-width: 0; font-size: .85rem; }
    .install-banner small { display: block; color: var(--muted); font-size: .75rem; }
    .install-close { border: 0; background: none; font-size: 1.4rem; color: var(--muted); width: 32px; height: 32px; cursor: pointer; }

    /* Sticky bottom action bar (event detail) */
    .mobile-action-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; position: fixed; left: 0; right: 0; bottom: calc(var(--bnav-h) + var(--safe-b)); z-index: 50; padding: .75rem 1rem; background: var(--surface); border-top: 1px solid var(--line); box-shadow: 0 -4px 14px rgb(29 27 32 / .08); }
    .mobile-action-bar strong { display: block; color: var(--brand); font-size: .92rem; }
    .mobile-action-bar small { color: var(--muted); font-size: .78rem; }
    .mobile-action-bar .btn { min-width: 132px; }
    .page-layout:has(.mobile-action-bar) { padding-bottom: 5rem; }
    .side-card { display: none; }

    /* Sticky submit areas on forms */
    .step-actions, .form-card > .btn-lg[type=submit] { position: sticky; bottom: calc(var(--bnav-h) + var(--safe-b) + .5rem); z-index: 5; background: var(--surface); padding: .75rem; margin: 0 -.75rem; border-radius: 14px; box-shadow: 0 -2px 12px rgb(29 27 32 / .08); }
    .form-card > .btn-lg[type=submit] { margin: 0; width: 100%; }
    .field input:not([type=checkbox]), .field select, .field textarea, .doc-search input { font-size: 16px; } /* prevents iOS zoom */

    /* App-like content */
    .container { width: calc(100% - 2rem); }
    .page-header { padding-block: 1.25rem 1.5rem; background: var(--surface); border-radius: 0 0 24px 24px; }
    .page-header h1 { font-size: 1.6rem; }
    .crumbs { display: none; }
    .lead { font-size: .98rem; }
    .section { padding-block: 1.5rem; }
    .card, .member, .doc-card, .quick-link, .form-card, .news-compact { border-radius: 18px; box-shadow: 0 1px 3px rgb(29 27 32 / .06); border-color: transparent; }
    .card:hover, .member:hover, .doc-card:hover, .quick-link:hover { transform: none; }
    .card:active, .member-clickable:active, .doc-card:active, .quick-link:active { transform: scale(.985); transition: transform .08s; }
    .section-head { margin-bottom: .9rem; align-items: center; }
    .section-head h2 { font-size: 1.25rem; }
    .eyebrow { font-size: .68rem; margin-bottom: .15rem; }
    .tabs { position: sticky; top: calc(var(--appbar-h) + var(--safe-t)); z-index: 20; background: var(--surface-2); margin-inline: -1rem; padding-inline: 1rem; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
    .tabs a { white-space: nowrap; }
    .ticker { position: relative; z-index: 1; }
    .ticker-inner { min-height: 40px; }

    /* Home screen */
    .hero { background: var(--brand); color: #fff; border-radius: 0 0 28px 28px; overflow: hidden; }
    .hero-copy { padding-block: 1.5rem 1rem; }
    .hero h1 { color: #fff; font-size: 1.75rem; max-width: none; }
    .hero .lead { color: #ead7df; }
    .hero .eyebrow, .hero .eyebrow-lines { color: #e8c06a; }
    .hero-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin-top: 1.25rem; }
    .hero-actions .btn { flex: none; min-height: 48px; padding-inline: .6rem; font-size: .88rem; }
    .hero .hero-actions .btn-navy { background: #fff; border-color: #fff; color: var(--brand); }
    .hero .hero-actions .btn-outline { border-color: rgb(255 255 255 / .6); color: #fff; }
    .hero .stats { display: flex; overflow-x: auto; gap: .6rem; margin-top: 1.25rem; max-width: none; scrollbar-width: none; }
    .hero .stats li, .hero .stats li + li { flex: none; border: 0; padding: .55rem .85rem; background: rgb(255 255 255 / .1); border-radius: 14px; }
    .hero .stats strong { color: #fff; } .hero .stats small { color: #ead7df; } .hero .stat-icon { color: #e8c06a; }
    .hero-visual { margin: 0 -1rem; }
    .hero-photo { aspect-ratio: 16 / 10; }
    .featured-cme { margin: -2rem 1rem 1.25rem; border-radius: 18px; }
    .quick-wrap { background: transparent; padding-bottom: .5rem; }
    .quick-links { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; padding-top: 1rem; }
    .quick-link { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: .4rem; padding: .85rem .25rem; background: var(--surface); }
    .quick-link .quick-text span, .quick-arrow { display: none; }
    .quick-text strong { font-size: .72rem; line-height: 1.2; }
    .quick-icon { width: 48px; height: 48px; border-radius: 16px; }

    /* Swipeable carousels (home) */
    .app-root:not(.m-no-carousel) .home .cards-equal,
    .app-root:not(.m-no-carousel) .home .gallery-strip,
    .app-root:not(.m-no-carousel) .home .members-row { display: grid; grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 82%; gap: .75rem; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: -1rem; padding: 0 1rem .5rem; scrollbar-width: none; }
    .app-root:not(.m-no-carousel) .home .members-row { grid-auto-columns: 44%; }
    .app-root:not(.m-no-carousel) .home .gallery-strip { grid-auto-columns: 60%; }
    .app-root:not(.m-no-carousel) .home .cards-equal > *, .app-root:not(.m-no-carousel) .home .gallery-strip > *, .app-root:not(.m-no-carousel) .home .members-row > * { scroll-snap-align: start; }
    .home .band { background: transparent; }
    .home .section.container { padding-block: 1.25rem; }

    /* Lists as native rows */
    .notice-list { border: 0; display: grid; gap: .5rem; }
    .notice-list li { background: var(--surface); border: 0; border-radius: 16px; padding: .85rem 1rem; }
    .doc-card { padding: .9rem; }
    .members-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
    .member { padding: 1rem .5rem; }
    .member-photo { width: 76px; height: 76px; }
    .member h3 { font-size: .88rem; } .designation { font-size: .78rem; } .member-qual, .member-tenure, .member-more { font-size: .7rem; }
    .grid-4 { gap: .6rem; }

    /* Bottom-sheet style dialogs */
    .modal-backdrop { place-items: end stretch; padding: 0; }
    .profile-modal { width: 100%; max-height: 88vh; border-radius: 24px 24px 0 0; padding: 1.75rem 1.25rem calc(1.25rem + var(--safe-b)); animation: sheet-up .25s cubic-bezier(.2, .8, .2, 1); }
    .profile-modal::before { content: ""; position: absolute; top: .55rem; left: 50%; width: 36px; height: 4px; border-radius: 2px; background: var(--line); transform: translateX(-50%); }
    @keyframes sheet-up { from { transform: translateY(100%); } }

    /* Footer: compact on phones */
    .site-footer { padding-top: 2rem; border-radius: 24px 24px 0 0; }
    .cta-band-wrap { margin-bottom: 1rem; }
    .cta-band { border-radius: 20px; padding: 1.25rem; }
    .footer-links { grid-template-columns: 1fr 1fr; }
    .footer-grid { gap: 1.5rem; padding-bottom: 1.5rem; }
  }
}

@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
  .page-anim, .drawer, .profile-modal, .install-banner { animation: none; }
}
@media (display-mode: standalone) {
  .install-banner { display: none !important; }
}
.offline-icon { font-size: 3rem; }
/* =========================================================================
   Design enhancement (healthcare "Accessible & Ethical" + soft UI)
   ========================================================================= */
@layer tokens {
  :root {
    --health: #2f7a47; --health-soft: #e8f2ea;
    --shadow-xs: 0 1px 2px rgb(29 27 32 / .06);
    --shadow: 0 1px 2px rgb(29 27 32 / .05), 0 4px 16px rgb(29 27 32 / .07);
    --shadow-lg: 0 2px 6px rgb(29 27 32 / .06), 0 18px 40px rgb(29 27 32 / .13);
    --ease: cubic-bezier(.2, .8, .2, 1);
    --press: 150ms;
    --z-sticky: 40; --z-fixed: 60; --z-modal: 100; --z-toast: 120;
    --fs-body: clamp(1rem, .97rem + .12vw, 1.0625rem); /* ≥16px everywhere (readability) */
  }
}
@layer components {
  .btn, .chip-btn, .quick-link, .card, .member, .doc-card, .tabs a, .bnav-item, .appbar-btn { transition: background-color var(--press) ease, color var(--press) ease, border-color var(--press) ease, box-shadow 200ms var(--ease), transform var(--press) var(--ease); }
  .btn:active { transform: translateY(1px) scale(.99); }
  .btn:focus-visible, .chip-btn:focus-visible, a:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; box-shadow: none; }
  .card-title { line-height: 1.35; }
  .meta-list li span, .card-text { line-height: 1.55; }

  /* Seat meter (social proof) */
  .seat-meter { display: grid; gap: .35rem; margin-top: .15rem; }
  .seat-bar { height: 6px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
  .seat-bar span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--accent), var(--health)); }
  .seat-text { display: inline-flex; align-items: center; gap: .35rem; font-size: var(--fs-xs); color: var(--muted); font-weight: 500; }
  .seat-low { color: #b45309; font-weight: 600; }

  /* Empty states */
  .empty-icon { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); color: var(--accent-ink); box-shadow: var(--shadow-xs); }

  /* Decorative page header: soft brand shape, no imagery needed */
  .page-header { position: relative; overflow: hidden; isolation: isolate; }
  .page-header::after { content: ""; position: absolute; z-index: -1; right: -6rem; top: -7rem; width: 26rem; height: 26rem; border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, rgb(200 150 46 / .12), rgb(47 122 71 / .06) 55%, transparent 70%); }
  .page-header::before { content: ""; position: absolute; z-index: -1; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--line), transparent); }
}
@layer pages {
  /* Testimonials */
  .testimonials-band { background: linear-gradient(180deg, var(--surface-2), var(--bg)); }
  .testimonials { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); }
  .testimonial { display: flex; flex-direction: column; gap: 1rem; padding: 1.5rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow); }
  .quote-mark { color: var(--accent); opacity: .85; }
  .testimonial blockquote { margin: 0; flex: 1; }
  .testimonial blockquote p { color: var(--ink); font-size: 1.02rem; line-height: 1.7; }
  .testimonial footer { display: flex; align-items: center; gap: .75rem; padding-top: 1rem; border-top: 1px solid var(--line); }
  .testimonial footer img, .t-initial { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; flex: none; }
  .t-initial { display: grid; place-items: center; background: var(--health-soft); color: var(--health); font-weight: 700; font-size: 1.15rem; }
  .testimonial strong { display: block; color: var(--brand); font-size: .95rem; }
  .testimonial small { display: block; color: var(--muted); font-size: var(--fs-xs); }
  @media (max-width: 1023px) { .testimonials { grid-template-columns: 1fr; } }

  /* Initial avatars: calm two-tone instead of flat grey */
  .member-initial, .profile-photo.member-initial, .portal-initial { background: linear-gradient(145deg, var(--accent-soft), var(--health-soft)); color: var(--brand); }

  /* Hero refinements */
  .hero h1 { text-wrap: balance; }
  .lead { text-wrap: pretty; }
  .featured-cme { box-shadow: var(--shadow-lg); }

  /* Credits chip uses health green (positive, non-alarming) */
  .meta-list li:has(.credit-pill) .icon, .event-card .meta-list li:last-child .icon { color: var(--health); }
}
@media (max-width: 767px) {
  @layer pages {
    .app-root:not(.m-no-carousel) .home .testimonials { display: grid; grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 86%; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: -1rem; padding: 0 1rem .5rem; scrollbar-width: none; }
    .home .testimonials > * { scroll-snap-align: start; }
    .testimonial { border-color: transparent; border-radius: 18px; }
    .hero-actions .btn .icon:last-child { display: none; }
    .hero-actions .btn { white-space: nowrap; font-size: .85rem; gap: .35rem; }
    .section-head { flex-wrap: nowrap; align-items: flex-end; }
    .section-head .view-all { flex: none; font-size: .8rem; padding-bottom: .2rem; }
    .section-head > div { min-width: 0; }
    .testimonials-band { background: transparent; }
  }
}
/* =========================================================================
   UI refinement: spacing rhythm (8-pt scale) and clean section labels
   ========================================================================= */
@layer pages {
  /* Section labels: no decorative dashes — a small caps label sits directly above the heading */
  .eyebrow::before, .eyebrow::after, .eyebrow-lines::before, .eyebrow-lines::after { content: none; display: none; }
  .eyebrow { display: block; gap: 0; margin-bottom: .5rem; letter-spacing: .08em; }

  /* Vertical rhythm: 56px between sections; adjacent sections on the same background don't double up */
  .section { padding-block: clamp(2.5rem, 2rem + 1.6vw, 3.5rem); }
  .home .section.container + .section.container { padding-top: 0; }
  .page-header + .section, .page-header + .container.section { padding-top: clamp(1.75rem, 1.5rem + 1vw, 2.5rem); }
  .section-gap { margin-top: clamp(2rem, 1.75rem + 1vw, 3rem); }

  /* Section heads: heading and its link share one baseline; consistent gap to content */
  .section-head { margin-bottom: 1.5rem; gap: .75rem 1.5rem; align-items: flex-end; }
  .section-head h2 { line-height: 1.15; }
  .section-head .view-all { padding-bottom: .25rem; white-space: nowrap; }
  h2 + .lead, .page-header h1 + .lead { margin-top: .5rem; }

  /* Page header: tighter, balanced spacing */
  .page-header { padding-block: clamp(1.75rem, 1.5rem + 1.2vw, 2.75rem); }
  .crumbs ol { margin-bottom: .5rem; }
  .page-header .hero-actions, .page-header .doc-search { margin-top: 1.25rem; }

  /* Cards: one internal spacing scale (20px padding, 12px stacks) */
  .card-body { padding: 1.25rem; gap: .75rem; }
  .card-title { margin: 0; }
  .meta-list { gap: .5rem; }
  .card-foot { padding-top: .25rem; }
  .event-card .card-body, .news-card .card-body, .album-card .card-body:not(.album-body) { display: flex; flex-direction: column; }
  .event-card .card-foot { margin-top: auto; }
  .event-card .card-title { min-height: calc(2 * 1.35em); }
  .news-compact { padding: 1.25rem; gap: 1rem; }
  .news-side { gap: 1.5rem; }
  .doc-card { padding: 1.25rem; gap: 1rem; }
  .member { padding: 1.5rem 1rem 1.25rem; display: flex; flex-direction: column; align-items: center; }
  .member .member-more { margin-top: auto; padding-top: .75rem; }
  .member .member-photo { flex: none; }
  .testimonial { padding: 1.5rem; gap: 1rem; }

  /* Grids: one gutter */
  .grid, .members-grid, .testimonials, .news-grid { gap: 1.5rem; }
  .members-row { gap: 1rem; }
  .quick-links { gap: 1rem; }
  .quick-wrap { padding-bottom: clamp(2rem, 1.75rem + 1vw, 2.5rem); }

  /* Hero: even spacing between label, heading, copy, actions and stats */
  .hero h1 { margin-top: 0; }
  .hero .lead { margin-top: 1rem; }
  .hero-actions { margin-top: 1.5rem; }
  .stats { margin-top: 1.75rem; }

  /* Footer & CTA: breathing room above the band, aligned columns */
  .cta-band-wrap { margin-top: clamp(1.5rem, 1rem + 2vw, 3rem); }
  .footer-title { margin-bottom: .875rem; }
  .footer-links, .footer-contact { gap: .625rem 1rem; }
}

@media (max-width: 767px) {
  @layer pages {
    .section { padding-block: 1.75rem; }
    .home .section.container + .section.container { padding-top: .5rem; }
    .page-header + .section, .page-header + .container.section { padding-top: 1.25rem; }
    .section-head { margin-bottom: 1rem; }
    .eyebrow { margin-bottom: .25rem; font-size: .7rem; }
    .card-body { padding: 1rem; gap: .6rem; }
    .grid, .members-grid, .news-grid { gap: 1rem; }
    .quick-links { gap: .5rem; }
    .hero .lead { margin-top: .75rem; }
    .hero-actions { margin-top: 1.25rem; }
    .stats { margin-top: 1.25rem; }
    .cta-band-wrap { margin-top: 1rem; }
  }
}
/* Header: full menu only when it truly fits; wider row + compact items on large screens */
@media (min-width: 1600px) {
  @layer pages {
    .site-header .header-main { max-width: min(100%, 1440px); padding-inline: 1.5rem; gap: .75rem; }
    .primary-nav a, .primary-nav button { padding-inline: .45rem; font-size: .875rem; }
    .header-cta { padding-inline: 1rem; }
  }
}

/* =========================================================================
   Page builder blocks (components/blocks.js)
   ========================================================================= */
@layer pages {
  .page-blocks > .section.container + .section.container { padding-top: 0; }
  .pb-narrow { max-width: 760px; margin-inline: auto; }
  .pb-narrow .prose { max-width: none; }
  .pb-h2 { margin-bottom: 1rem; }
  .center { text-align: center; }
  .block-head { margin-bottom: 1.75rem; max-width: 720px; }
  .block-head.center { margin-inline: auto; text-align: center; }
  .block-head .lead { margin-top: .5rem; color: var(--muted); }
  .btn-light { background: #fff; border-color: #fff; color: var(--brand); }
  .btn-light:hover { background: var(--accent-soft); border-color: var(--accent-soft); }

  .pb-hero { position: relative; background: linear-gradient(135deg, var(--brand-soft), var(--surface) 60%); overflow: hidden; }
  .pb-hero-inner { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; padding-block: clamp(2.5rem, 2rem + 4vw, 5rem); position: relative; }
  .pb-hero h1 { font-size: var(--fs-h1); margin: .25rem 0 0; }
  .pb-hero .lead { margin-top: 1rem; max-width: 56ch; }
  .pb-hero-media img, .pb-hero-media .img-placeholder { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
  .pb-hero-plain .pb-hero-inner { grid-template-columns: minmax(0, 1fr); text-align: center; justify-items: center; }
  .pb-hero-plain .lead { margin-inline: auto; }
  .pb-hero-plain .hero-actions { justify-content: center; }
  .pb-hero-background { background: var(--brand); color: #fff; }
  .pb-hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .pb-hero-background::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgb(29 27 32 / .92), rgb(29 27 32 / .55)); }
  .pb-hero-background .pb-hero-inner { z-index: 1; grid-template-columns: minmax(0, 1fr); min-height: clamp(320px, 45vw, 480px); }
  .pb-hero-background h1, .pb-hero-background .lead, .pb-hero-background .eyebrow { color: #fff; }
  .pb-hero-background .btn-outline { color: #fff; border-color: rgb(255 255 255 / .6); }

  .pb-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
  .pb-split.img-left .pb-split-media { order: -1; }
  .pb-split-copy { display: grid; gap: 1rem; justify-items: start; }
  .pb-split-copy h2 { margin: 0; }
  .pb-split-media img, .pb-split-media .img-placeholder { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-lg); box-shadow: var(--shadow); }

  .pb-features { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.25rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pb-features.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pb-features.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pb-feature { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 1.5rem; box-shadow: var(--shadow); display: grid; gap: .5rem; align-content: start; }
  .pb-feature-icon { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; background: var(--accent-soft); color: var(--brand); margin-bottom: .35rem; }
  .pb-feature h3 { font-size: 1.05rem; margin: 0; }
  .pb-feature p { color: var(--muted); margin: 0; font-size: .95rem; }

  .pb-steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
  .pb-steps li { display: flex; gap: 1rem; align-items: flex-start; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 1.35rem; }
  .pb-step-no { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--brand); color: #fff; font-weight: 700; }
  .pb-steps h3 { font-size: 1rem; margin: .35rem 0 .3rem; }
  .pb-steps p { margin: 0; color: var(--muted); font-size: .95rem; }

  .pb-stats-band { background: var(--brand); color: #fff; }
  .pb-stats-band h2 { color: #fff; }
  .pb-stats { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1.5rem; text-align: center; }
  .pb-stats strong { display: block; font-size: clamp(2rem, 1.5rem + 2vw, 2.75rem); font-weight: 800; letter-spacing: -.02em; color: var(--accent); }
  .pb-stats span { color: rgb(255 255 255 / .85); }

  a.pb-link-card { text-decoration: none; color: inherit; transition: transform .2s, box-shadow .2s; }
  a.pb-link-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }

  .pb-gallery { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; }
  .pb-gallery figure { margin: 0; }
  .pb-gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); }
  .pb-gallery figcaption { font-size: .88rem; color: var(--muted); margin-top: .4rem; }

  .pb-video { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius-lg); overflow: hidden; background: #000; box-shadow: var(--shadow-lg); }
  .pb-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
  .pb-caption { margin-top: .75rem; font-size: .9rem; }

  .pb-quote { max-width: 820px; margin: 0 auto; text-align: center; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(1.75rem, 1rem + 3vw, 3rem); box-shadow: var(--shadow); }
  .pb-quote .quote-mark { color: var(--accent); margin: 0 auto .75rem; }
  .pb-quote blockquote { margin: 0; }
  .pb-quote blockquote p { font-size: clamp(1.1rem, 1rem + .5vw, 1.35rem); line-height: 1.6; color: var(--ink); font-weight: 500; }
  .pb-quote figcaption { display: inline-flex; align-items: center; gap: .75rem; margin-top: 1.25rem; text-align: left; }
  .pb-quote-photo { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }
  .pb-quote figcaption strong { display: block; color: var(--brand); }
  .pb-quote figcaption small { color: var(--muted); }

  .pb-faq { display: grid; gap: .65rem; }
  .pb-faq details { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); transition: box-shadow .2s; }
  .pb-faq details[open] { box-shadow: var(--shadow); }
  .pb-faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1rem 1.25rem; font-weight: 600; color: var(--brand); min-height: 44px; }
  .pb-faq summary::-webkit-details-marker { display: none; }
  .pb-faq-icon { flex: none; color: var(--accent-ink); transition: transform .2s; }
  .pb-faq details[open] .pb-faq-icon { transform: rotate(45deg); }
  .pb-faq-a { padding: 0 1.25rem 1.1rem; color: var(--ink-2); }
  .pb-faq-a p { margin: 0 0 .6rem; }

  .pb-cta { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1.5rem; padding: clamp(1.75rem, 1rem + 3vw, 2.75rem); border-radius: var(--radius-lg); background: var(--brand); color: #fff; }
  .pb-cta h2 { color: #fff; margin: 0; }
  .pb-cta p { margin: .5rem 0 0; color: rgb(255 255 255 / .85); max-width: 60ch; }
  .pb-cta.tone-cyan { background: linear-gradient(135deg, #0891b2, #f2b705); }
  .pb-cta.tone-light { background: var(--brand-soft); color: var(--ink); }
  .pb-cta.tone-light h2 { color: var(--brand); }
  .pb-cta.tone-light p { color: var(--ink-2); }
  .pb-cta:not(.tone-light) .btn-outline { color: #fff; border-color: rgb(255 255 255 / .6); }
  .pb-cta-actions { display: flex; gap: .75rem; flex-wrap: wrap; }
}
@media (max-width: 900px) {
  @layer pages {
    .pb-hero-inner, .pb-split { grid-template-columns: minmax(0, 1fr); }
    .pb-split.img-left .pb-split-media { order: 0; }
    .pb-features, .pb-features.cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
}
@media (max-width: 560px) {
  @layer pages {
    .pb-features, .pb-features.cols-2, .pb-features.cols-4 { grid-template-columns: minmax(0, 1fr); }
    .pb-cta { flex-direction: column; align-items: flex-start; }
  }
}

/* Page builder: containers with columns */
@layer pages {
  .pb-container.sp-compact { padding-block: clamp(1.25rem, 1rem + 1vw, 2rem); }
  .pb-container.sp-normal { padding-block: clamp(2.5rem, 2rem + 1.6vw, 3.5rem); }
  .pb-container.sp-spacious { padding-block: clamp(3.5rem, 2.5rem + 3vw, 5.5rem); }
  .pb-container.bg-soft { background: var(--brand-soft); }
  .pb-container.bg-cyan { background: var(--accent-soft); }
  .pb-container.bg-navy { background: var(--brand); color: rgb(255 255 255 / .9); }
  .pb-container.bg-navy h2, .pb-container.bg-navy h3, .pb-container.bg-navy .prose, .pb-container.bg-navy .prose * { color: #fff; }
  .pb-container.bg-navy .pb-feature, .pb-container.bg-navy .pb-steps li, .pb-container.bg-navy .pb-faq details, .pb-container.bg-navy .card { color: var(--ink); }
  .pb-container.bg-navy .pb-feature h3, .pb-container.bg-navy .pb-steps h3 { color: var(--brand); }
  .pb-container.bg-card .pb-container-inner { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: clamp(1.25rem, 1rem + 2vw, 2.5rem); }
  .pb-container-inner.narrow { max-width: 880px; }
  .pb-container-inner.full { padding-inline: clamp(1rem, 3vw, 2.5rem); }
  .pb-container-title { margin-bottom: 1.5rem; }
  .pb-cols { display: grid; grid-template-columns: var(--cols, minmax(0, 1fr)); }
  .pb-cols.gap-small { gap: 1rem; }
  .pb-cols.gap-medium { gap: clamp(1.25rem, 1rem + 1.5vw, 2rem); }
  .pb-cols.gap-large { gap: clamp(1.75rem, 1rem + 3vw, 3.5rem); }
  .pb-cols.al-top { align-items: start; }
  .pb-cols.al-center { align-items: center; }
  .pb-cols.al-bottom { align-items: end; }
  .pb-col { display: grid; gap: 1.25rem; min-width: 0; align-content: start; }
  .pb-in-col > .block-head { margin-bottom: 1rem; }
  .pb-in-col .pb-features { grid-template-columns: minmax(0, 1fr); }
  .pb-col .pb-features.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pb-in-col .grid-3 { grid-template-columns: minmax(0, 1fr); }
  .pb-in-col .pb-cta { padding: 1.5rem; }
  .pb-in-col .pb-quote { padding: 1.5rem; }
  .pb-stats.in-col { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); text-align: left; }
  .pb-stats.in-col strong { color: var(--brand); }
  .pb-stats.in-col span { color: var(--muted); }
  .bg-navy .pb-stats.in-col strong { color: var(--accent); }
  .bg-navy .pb-stats.in-col span { color: rgb(255 255 255 / .8); }

  .pb-image { margin: 0; }
  .pb-image img { width: 100%; height: auto; display: block; }
  .pb-image.shape-rounded img { border-radius: var(--radius-lg); }
  .pb-image.shape-circle img { border-radius: 50%; aspect-ratio: 1; object-fit: cover; max-width: 320px; margin-inline: auto; }
  .pb-image figcaption { font-size: .88rem; color: var(--muted); margin-top: .5rem; text-align: center; }
  .pb-image-link { display: block; transition: opacity .2s; }
  .pb-image-link:hover { opacity: .9; }
  .pb-button { display: flex; }
  .pb-button.align-center { justify-content: center; }
  .pb-button.align-right { justify-content: flex-end; }
  .btn-accent { background: var(--accent); border-color: var(--accent); color: var(--brand); }
  .bg-navy .btn-outline { color: #fff; border-color: rgb(255 255 255 / .6); }
  .pb-spacer.size-sm { height: 1rem; }
  .pb-spacer.size-md { height: 2.5rem; }
  .pb-spacer.size-lg { height: 4.5rem; }
  .pb-spacer { display: grid; align-items: center; }
  .pb-spacer.with-line span { display: block; height: 1px; background: var(--line); max-width: var(--container); width: calc(100% - 2rem); margin-inline: auto; }
  .page-blocks > .pb-container + .pb-container.bg-none, .page-blocks > .pb-container.bg-none + .section.container { padding-top: 0; }
}
@media (max-width: 900px) {
  @layer pages {
    .pb-cols.n-3, .pb-cols.n-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pb-cols.n-2 { grid-template-columns: minmax(0, 1fr); }
    .pb-cols.n-2.stack-reverse > .pb-col:last-child { order: -1; }
  }
}
@media (max-width: 600px) {
  @layer pages {
    .pb-cols.n-3, .pb-cols.n-4 { grid-template-columns: minmax(0, 1fr); }
    .pb-cols.stack-reverse > .pb-col:last-child { order: -1; }
  }
}

/* Password show/hide toggle + bot guard widget (password-toggle.js, botguard.js, <x-bot-guard>) */
.pw-wrap { position: relative; display: block; width: 100%; }
.pw-wrap > input { width: 100%; padding-right: 3rem !important; }
.pw-toggle { position: absolute; top: 50%; right: .35rem; transform: translateY(-50%); width: 38px; height: 38px; display: grid; place-items: center; border: 0; border-radius: 8px; background: transparent; color: #64748b; cursor: pointer; }
.pw-toggle:hover { color: #0f172a; background: rgb(100 116 139 / .12); }
.pw-toggle:focus-visible { outline: 2px solid #9c1458; outline-offset: 1px; }
.hp-field { position: absolute !important; left: -10000px !important; top: auto; width: 1px; height: 1px; overflow: hidden; }
.bot-guard { position: relative; display: flex; align-items: center; gap: .7rem; padding: .65rem .85rem; border: 1px solid #e2e8f0; border-radius: 10px; background: #f8fafc; font-size: .82rem; line-height: 1.3; }
.bot-guard .bg-text { display: grid; }
.bot-guard .bg-text strong { font-weight: 600; color: #1e293b; }
.bot-guard .bg-text small { color: #64748b; font-size: .74rem; }
.bg-check { width: 24px; height: 24px; flex: none; border-radius: 50%; display: grid; place-items: center; border: 2px solid #cbd5e1; color: #fff; position: relative; }
.bg-check svg { opacity: 0; transform: scale(.5); transition: opacity .2s, transform .2s; }
.bg-spin { position: absolute; inset: -2px; border-radius: 50%; border: 2px solid transparent; border-top-color: #9c1458; animation: bg-spin .8s linear infinite; }
.bot-guard[data-state="done"] { border-color: #bbf7d0; background: #f0fdf4; }
.bot-guard[data-state="done"] .bg-check { background: #16a34a; border-color: #16a34a; }
.bot-guard[data-state="done"] .bg-check svg { opacity: 1; transform: none; }
.bot-guard[data-state="done"] .bg-spin, .bot-guard[data-state="error"] .bg-spin { display: none; }
.bot-guard[data-state="error"] { border-color: #fecaca; background: #fef2f2; }
.bot-guard[data-state="error"] .bg-check { border-color: #dc2626; }
.bot-error { color: #b91c1c; font-size: .84rem; font-weight: 600; margin: .25rem 0 0; }
.captcha-box { min-height: 78px; }
@keyframes bg-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .bg-spin { animation-duration: 2.4s; } }
:root[data-theme="dark"] .bot-guard { background: #232026; border-color: #38343d; }
:root[data-theme="dark"] .bot-guard .bg-text strong { color: #edeaf0; }
:root[data-theme="dark"] .bot-guard[data-state="done"] { background: #0f2e1d; border-color: #166534; }
:root[data-theme="dark"] .pw-toggle:hover { color: #edeaf0; }

/* Appearance switch */
.theme-toggle { display: inline-flex; align-items: center; gap: .35rem; background: none; border: 1px solid rgb(255 255 255 / .22); color: inherit; border-radius: 999px; padding: .15rem .65rem; font: inherit; font-size: var(--fs-xs); cursor: pointer; transition: background .15s, border-color .15s; }
.theme-toggle:hover { background: rgb(255 255 255 / .08); border-color: rgb(255 255 255 / .4); }
.theme-toggle:focus-visible { outline: 2px solid #e8c06a; outline-offset: 2px; }
.drawer-label { margin: .25rem 1rem .5rem; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.theme-switch { display: grid; grid-template-columns: repeat(3, 1fr); gap: .25rem; margin: 0 .75rem 1rem; padding: .25rem; background: var(--surface-2); border: 1px solid var(--line); border-radius: 14px; }
.theme-switch button { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-height: 44px; border: 0; border-radius: 10px; background: none; color: var(--ink-2); font: inherit; font-size: .88rem; font-weight: 500; cursor: pointer; transition: background .15s, color .15s; }
.theme-switch button.on { background: var(--surface); color: var(--brand); font-weight: 600; box-shadow: 0 1px 3px rgb(0 0 0 / .12); }
.theme-switch button:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
:root[data-theme="dark"] .theme-switch button.on { color: #e08aac; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .theme-switch button.on { color: #e08aac; } }/* Dark appearance: wine text is too dim on dark surfaces, so titles use light ink and accents a lighter rose. */
:root[data-theme="dark"] :is(h1, h2, h3, h4, h1 a, h2 a, h3 a, h4 a) { color: var(--ink); }
:root[data-theme="dark"] :is(.bottom-nav a.active, .bottom-nav a[aria-current], .drawer-list a.active) { color: #e08aac; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) :is(h1, h2, h3, h4, h1 a, h2 a, h3 a, h4 a) { color: var(--ink); }
  :root:not([data-theme="light"]) :is(.bottom-nav a.active, .bottom-nav a[aria-current], .drawer-list a.active) { color: #e08aac; }
}
:root[data-theme="dark"] { --laurel-soft: #1d3324; }
:root[data-theme="dark"] .quick-link :is(strong, span, small, h3) { color: var(--ink); }
:root[data-theme="dark"] .quick-link:nth-child(4) .quick-icon { background: #2c2931; color: var(--ink); }
:root[data-theme="dark"] .quick-link .quick-icon { color: #e08aac; }
:root[data-theme="dark"] .quick-link:nth-child(2) .quick-icon { color: #7fc796; }
:root[data-theme="dark"] .quick-link:nth-child(3) .quick-icon { color: var(--accent-ink); }
:root[data-theme="dark"] :is(.section-head a, .link-more, .btn-link) { color: #e08aac; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --laurel-soft: #1d3324; }
  :root:not([data-theme="light"]) .quick-link :is(strong, span, small, h3) { color: var(--ink); }
  :root:not([data-theme="light"]) .quick-link:nth-child(4) .quick-icon { background: #2c2931; color: var(--ink); }
  :root:not([data-theme="light"]) .quick-link .quick-icon { color: #e08aac; }
  :root:not([data-theme="light"]) .quick-link:nth-child(2) .quick-icon { color: #7fc796; }
  :root:not([data-theme="light"]) .quick-link:nth-child(3) .quick-icon { color: var(--accent-ink); }
  :root:not([data-theme="light"]) :is(.section-head a, .link-more, .btn-link) { color: #e08aac; }
}

/* Roll of honour (past presidents / secretaries) */
.honour-lead { margin: -.25rem 0 1rem; }
.honour-roll { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: .5rem .75rem; }
.honour-roll li { display: flex; align-items: center; gap: .85rem; padding: .7rem .9rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.honour-roll li.current { border-color: var(--accent); background: var(--accent-soft); }
.honour-years { flex: none; min-width: 5.6rem; font-size: var(--fs-xs); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--accent-ink); letter-spacing: .02em; }
.honour-name { flex: 1; min-width: 0; font-weight: 600; color: var(--ink); }
.honour-more { margin-top: 1rem; }

/* Present leadership (current President & Hon. Secretary) */
.present-leaders { padding: clamp(1.25rem, 3vw, 2rem); border: 1px solid var(--line); border-top: 4px solid var(--accent); border-radius: var(--radius-lg); background: linear-gradient(180deg, var(--brand-soft), var(--surface) 70%); }
.present-leaders h2 { margin-bottom: 1.25rem; }
.present-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 320px)); gap: 1.25rem; justify-content: center; }
.present-grid .member { padding-block: 1.75rem; }
.present-grid .member-photo { width: 180px; height: 180px; border-radius: 28px; }
.present-grid .member-initial { font-size: 3.6rem; }
@media (max-width: 600px) { .present-grid .member-photo { width: 150px; height: 150px; border-radius: 24px; } }
.present-grid .designation { font-size: 1rem; font-weight: 700; color: var(--brand); text-transform: uppercase; letter-spacing: .06em; }
:root[data-theme="dark"] .present-grid .designation { color: #e08aac; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .present-grid .designation { color: #e08aac; } }

/* Home: three principal office bearers */
@media (min-width: 768px) { .principal-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 250px)); justify-content: center; gap: 1.25rem; overflow: visible; } }
/* Phones: swipeable row (snap per card, next card peeks in to show there is more). */
@media (max-width: 767px) {
  .home .principal-row { display: grid !important; grid-auto-flow: column; grid-template-columns: none !important; grid-auto-columns: 64% !important; gap: .75rem; overflow-x: auto !important; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; margin-inline: -1rem; padding: .25rem 1rem .75rem; scroll-padding-inline: 1rem; scrollbar-width: none; }
  .home .principal-row::-webkit-scrollbar { display: none; }
  .home .principal-row > * { scroll-snap-align: start; min-width: 0; }
  .principal-row .member-photo { width: 112px; height: 112px; border-radius: 20px; }
  .principal-row h3, .principal-row .designation { overflow-wrap: anywhere; }
}
@media (min-width: 768px) { .principal-row .member-photo { width: 136px; height: 136px; border-radius: 22px; } }
.principal-row .member-initial { font-size: 3rem; }
.principal-row .designation { font-weight: 700; color: var(--brand); text-transform: uppercase; letter-spacing: .06em; }
:root[data-theme="dark"] .principal-row .designation { color: #e08aac; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .principal-row .designation { color: #e08aac; } }

/* Mobile verification (SMS code) */
.otp-card { display: grid; gap: 1rem; max-width: 520px; margin-inline: auto; }
.otp-card form { display: grid; gap: .9rem; }
.stepper-mini { margin: 0 0 .25rem; }
.otp-input { font-size: 1.6rem !important; letter-spacing: .5em; text-align: center; font-variant-numeric: tabular-nums; padding-left: .5em !important; }
.otp-actions { display: flex; justify-content: space-between; gap: 1rem; margin: 0; flex-wrap: wrap; }
.otp-actions .btn-link:disabled { opacity: .55; cursor: not-allowed; text-decoration: none; }
/* Sign-in / verification method tabs (mobile SMS code | email code) */
.auth-tabs { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: .25rem; padding: .25rem; margin: 0 0 1rem; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); }
.auth-tabs a, .auth-tabs button { display: flex; align-items: center; justify-content: center; gap: .4rem; min-height: 42px; padding: .4rem .75rem; border: 0; border-radius: 9px; background: transparent; color: var(--ink-2, var(--muted)); font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; }
.auth-tabs .active { background: var(--surface); color: var(--brand); box-shadow: 0 1px 3px rgb(0 0 0 / .08); }
.auth-tabs a:focus-visible, .auth-tabs button:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.verified-input { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.verified-input input { flex: 1 1 160px; background: var(--surface-2); }
.verified-tag { display: inline-flex; align-items: center; gap: .3rem; padding: .2rem .6rem; border-radius: 999px; background: #e8f2ea; color: #2f7a47; font-size: .78rem; font-weight: 700; }
/* Member card background: soft security-card tint, fine guilloche lines and a faded IMA watermark */
@layer pages {
  .mc-body { position: relative; isolation: isolate;
    background:
      radial-gradient(120% 90% at 100% 0%, rgba(200,150,46,.16), transparent 55%),
      radial-gradient(90% 80% at 0% 100%, rgba(123,30,69,.10), transparent 60%),
      repeating-radial-gradient(circle at 18% 120%, transparent 0 10px, rgba(123,30,69,.045) 10px 11px),
      linear-gradient(180deg, #fffaf3, #fdf3f6); }
  .mc-body::before { content: ""; position: absolute; z-index: -1; inset: 50% auto auto 50%; width: 62%; aspect-ratio: 1; transform: translate(-50%, -50%);
    background: url("../img/logo-mark.webp") center / contain no-repeat; opacity: .07; pointer-events: none; }
  .mc-photo { background: #fff; }
  .mc-qr svg { background: #fff; padding: 4px; border-radius: 8px; box-shadow: 0 0 0 1px rgba(123,30,69,.12); }
  @media print { .mc-body { -webkit-print-color-adjust: exact; print-color-adjust: exact; } }
}
/* Member card colour refresh: deep maroon header with gold rule, warm ivory body, metallic gold footer */
@layer pages {
  .mc-head { position: relative;
    background:
      radial-gradient(80% 140% at 100% 0%, rgba(232,192,106,.28), transparent 60%),
      repeating-linear-gradient(135deg, rgba(255,255,255,.035) 0 2px, transparent 2px 9px),
      linear-gradient(115deg, #3d0c22 0%, #6a1a3c 45%, #8e2650 100%);
    border-bottom: 3px solid #d9ab48; box-shadow: inset 0 -1px 0 rgba(255,255,255,.18); }
  .mc-org { text-shadow: 0 1px 2px rgba(0,0,0,.35); }
  .mc-label { color: #3d0c22; background: linear-gradient(180deg, #f6dc94, #d9ab48); padding: .2rem .6rem; border-radius: 999px; letter-spacing: .1em; box-shadow: 0 1px 0 rgba(255,255,255,.4) inset; }
  .mc-body {
    background:
      radial-gradient(110% 85% at 100% 0%, rgba(217,171,72,.20), transparent 55%),
      radial-gradient(90% 80% at 0% 100%, rgba(142,38,80,.12), transparent 60%),
      repeating-radial-gradient(circle at 18% 120%, transparent 0 10px, rgba(142,38,80,.05) 10px 11px),
      linear-gradient(160deg, #fffdf8 0%, #fbf3e6 55%, #f8e9ee 100%); }
  .mc-foot { color: #3d0c22; text-shadow: 0 1px 0 rgba(255,255,255,.45);
    background: linear-gradient(90deg, #b9822a 0%, #e9c46a 30%, #fbe7a6 50%, #e9c46a 70%, #b9822a 100%);
    border-top: 1px solid rgba(61,12,34,.25); }
}
/* Print / Save as PDF: print only the card, exactly as on screen (unlayered so it wins over layered rules) */
@media print {
  @page { size: A4 portrait; margin: 15mm; }
  html, body { background: #fff !important; }
  body * { visibility: hidden !important; }
  .member-card, .member-card * { visibility: visible !important; -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
  .member-card { position: absolute !important; top: 0; left: 50%; transform: translateX(-50%); width: 140mm !important; max-width: none !important;
    margin: 0 !important; box-shadow: none !important; border: 1px solid #d9c7cf !important; break-inside: avoid; page-break-inside: avoid; }
  .mp-shell, .mp-app, .mp-main, .mp-card-stage { transform: none !important; overflow: visible !important; }
}
@layer pages { .mc-body { overflow: hidden; } .mc-body::before { width: auto; height: 120%; } }
@media print { .mc-body::before { opacity: .06 !important; } }
/* Find a member (public directory search) */
@layer pages {
  .dir-search { display: grid; gap: .6rem; width: 100%; max-width: 760px; }
  .dir-search { margin-top: 1.5rem; }
  .dir-search .doc-search { max-width: none; margin-top: 0; }
  .dir-filters { display: flex; flex-wrap: wrap; gap: .5rem; }
  .dir-filters select { flex: 1 1 11rem; min-width: 0; min-height: 44px; padding: 0 .8rem; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; }
  .dir-clear { min-height: 44px; padding: 0 1rem; border-radius: 10px; border: 1px solid var(--line); background: transparent; color: inherit; font: inherit; font-weight: 600; cursor: pointer; }
  .dir-grid { display: grid; gap: var(--space-4, 1rem); grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
  .dir-card { display: flex; flex-direction: column; gap: .75rem; padding: 1.1rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); transition: box-shadow .2s, border-color .2s; }
  .dir-card:hover { border-color: var(--accent); box-shadow: var(--shadow-md, 0 6px 20px rgba(0,0,0,.08)); }
  .dir-head { display: flex; gap: .85rem; align-items: center; min-width: 0; }
  .dir-photo { flex: none; width: 72px; height: 72px; border-radius: 50%; object-fit: cover; border: 2px solid var(--line); }
  .dir-initial { display: grid; place-items: center; background: color-mix(in srgb, var(--primary, #7b1e45) 10%, var(--surface)); color: var(--primary, #7b1e45); font-size: 1.6rem; font-weight: 700; }
  .dir-id { min-width: 0; }
  .dir-id h3 { margin: 0; font-size: 1.05rem; line-height: 1.3; overflow-wrap: anywhere; }
  .dir-spec { margin: .15rem 0 0; color: var(--primary, #7b1e45); font-weight: 600; font-size: .9rem; }
  .dir-qual { margin: .1rem 0 0; color: var(--muted); font-size: .85rem; overflow-wrap: anywhere; }
  .dir-hosp { display: flex; gap: .5rem; margin: 0; font-size: .9rem; color: var(--muted); }
  .dir-hosp .icon, .dir-hosp svg { flex: none; margin-top: .2rem; }
  .dir-hosp > span { display: grid; min-width: 0; overflow-wrap: anywhere; }
  .dir-hosp strong { color: var(--ink); font-weight: 600; }
  .dir-meta { display: flex; flex-wrap: wrap; gap: .4rem .75rem; align-items: center; font-size: .8rem; color: var(--muted); }
  .dir-badge { display: inline-flex; align-items: center; gap: .3rem; padding: .15rem .55rem; border-radius: 999px; background: color-mix(in srgb, var(--accent, #c8962e) 16%, transparent); color: var(--ink); font-weight: 600; }
  .dir-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: auto; }
  .dir-actions .btn { flex: 1 1 auto; justify-content: center; min-height: 44px; }
  .dir-note { margin-top: 1.5rem; }
}
/* Find a member: clickable card + profile pop-up extras */
@layer pages {
  .dir-card.member-clickable { cursor: pointer; }
  .dir-open { text-align: left; font-weight: inherit; }
  .dir-actions { position: relative; z-index: 1; }
  .dir-role { margin: .15rem 0 0; font-size: .82rem; font-weight: 700; letter-spacing: .02em; color: var(--accent-ink, #8a6414); }
  .dir-meta .member-more { margin: 0 0 0 auto; }
  .profile-badge { margin: .4rem 0 0; width: fit-content; font-size: .8rem; }
  .profile-hospital { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--line); }
  .profile-hospital h3 { margin: 0 0 .4rem; font-size: 1rem; }
  .profile-hospital p { margin: 0 0 .25rem; overflow-wrap: anywhere; }
  .profile-hospital .profile-contact { margin-top: .6rem; }
}
@layer pages { .profile-hospital + .profile-bio { margin-top: 1rem; } }
/* Menu drawer (below 1280px): section labels for sub-menus, and nothing from the header overlapping the drawer */
@layer components {
  .sub-label { display: none; }
  @media (max-width: 1279.98px) {
    .site-header.menu-open .header-cta { visibility: hidden; }
    /* Solid band under the close button so scrolled items never slide beneath it. */
    .primary-nav { padding-top: 0; }
    .primary-nav::before { content: ""; position: sticky; top: 0; z-index: 1; display: block; flex: none; height: 4.75rem; margin: 0 -1rem -1rem; background: var(--surface); }
    /* Close button stays pinned in the drawer corner even if the header is off-screen. */
    .site-header.menu-open .nav-toggle { position: fixed; top: 1rem; right: 1rem; z-index: 2; }
    .has-sub .sub-label { display: block; padding: .9rem .55rem .25rem; font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
    .primary-nav > ul > li + li.has-sub { margin-top: .35rem; border-top: 1px solid var(--line); }
    .primary-nav > ul > li.has-sub + li { border-top: 1px solid var(--line); margin-top: .35rem; padding-top: .35rem; }
    .has-sub .submenu { padding-left: 0; }
    .primary-nav a.active { box-shadow: inset 3px 0 0 var(--accent); padding-left: .8rem; }
  }
}
/* Scroll row (home gallery) and lightbox zoom */
@layer components {
  .scroll-row { position: relative; }
  .sr-track { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 3 * var(--space-5, 1.5rem)) / 4); gap: var(--space-5, 1.5rem);
    overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; padding: .25rem .1rem 1rem; overscroll-behavior-x: contain; }
  .sr-track::-webkit-scrollbar { display: none; }
  .sr-track > * { scroll-snap-align: start; min-width: 0; }
  .sr-track:focus-visible { outline: none; box-shadow: var(--focus); border-radius: var(--radius); }
  .sr-btn { position: absolute; top: 38%; z-index: 2; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%;
    border: 1px solid var(--line); background: var(--surface); color: var(--brand); box-shadow: var(--shadow-lg); cursor: pointer; transition: opacity .2s, transform .2s, background .2s; }
  .sr-btn:hover:not(:disabled) { background: var(--brand); color: #fff; }
  .sr-btn:disabled { opacity: 0; pointer-events: none; }
  .sr-prev { left: -14px; } .sr-next { right: -14px; }
  @media (max-width: 1100px) { .sr-track { grid-auto-columns: calc((100% - 2 * var(--space-5, 1.5rem)) / 3); } }
  @media (max-width: 767px) { .sr-track { grid-auto-columns: 72%; gap: .75rem; } .sr-btn { display: none; } }

  .lightbox { overflow: hidden; }
  .lightbox figure { min-width: 0; }
  .lb-stage { display: grid; place-items: center; max-width: 100%; touch-action: none; cursor: zoom-in; user-select: none; }
  .lightbox.is-zoomed .lb-stage { cursor: grab; }
  .lightbox.is-zoomed .lb-stage:active { cursor: grabbing; }
  .lb-stage img { max-width: min(100%, 92vw); transform-origin: center; transition: transform .12s ease-out; will-change: transform; -webkit-user-drag: none; }
  .lightbox.is-zoomed .lb-stage img { position: relative; z-index: 1; }
  .lightbox.is-zoomed .lb-prev, .lightbox.is-zoomed .lb-next { opacity: .35; }
  .lb-tools { position: absolute; top: 1rem; right: 1rem; z-index: 3; display: flex; align-items: center; gap: .4rem; }
  .lightbox .lb-tools button { width: 44px; height: 44px; font-size: 1.5rem; }
  .lightbox .lb-tool:disabled { opacity: .35; cursor: default; }
  .lb-tools .lb-close { position: static; font-size: 2rem; margin-left: .4rem; }
  .lb-zoom { min-width: 3.5rem; text-align: center; color: #e7eef7; font-size: .85rem; font-variant-numeric: tabular-nums; }
  .lb-hint { display: block; margin-top: .25rem; font-size: .78rem; opacity: .6; }
  @media (max-width: 767px) {
    .lightbox { grid-template-columns: 0 1fr 0; }
    .lightbox .lb-prev, .lightbox .lb-next { position: absolute; bottom: 1.25rem; z-index: 3; }
    .lightbox .lb-prev { left: 1rem; } .lightbox .lb-next { right: 1rem; }
    .lb-tools { top: .75rem; right: .75rem; }
  }
}
@layer components {
  .lb-tools { padding: .3rem; border-radius: 999px; background: rgb(15 4 10 / .72); backdrop-filter: blur(6px); }
  .lightbox .lb-prev, .lightbox .lb-next { position: relative; z-index: 3; background: rgb(15 4 10 / .6); }
  .lightbox figcaption { position: relative; z-index: 3; padding: .3rem .8rem; border-radius: 999px; background: rgb(15 4 10 / .55); }
}
@layer components { .lightbox { z-index: 2000; background: #12050c; } }
@layer components {
  .fee-chip { display: inline-block; padding: .1rem .55rem; border-radius: 999px; font-size: .78rem; font-weight: 700; background: color-mix(in srgb, var(--accent, #c8962e) 18%, transparent); color: var(--ink); }
  .fee-notice strong { color: var(--brand); }
}
/* Bot guard runs invisibly: its status box only appears if the check fails or a submit is waiting on it. */
.bot-guard:not([data-state="error"]):not([data-state="finishing"]) { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important; border: 0 !important; }
/* Find a member: show filter + past office bearer badge + roles in pop-up */
@layer pages {
  .dir-show { display: flex; flex-wrap: wrap; gap: .4rem; }
  .dir-show button { display: inline-flex; align-items: center; gap: .4rem; min-height: 40px; padding: 0 .9rem; border-radius: 999px; border: 1px solid var(--line);
    background: var(--surface); color: var(--ink); font: inherit; font-size: .88rem; font-weight: 600; cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
  .dir-show button:hover { border-color: var(--accent); }
  .dir-show button.is-on { background: var(--brand); border-color: var(--brand); color: #fff; }
  .dir-n { padding: 0 .45rem; border-radius: 999px; font-size: .75rem; background: color-mix(in srgb, currentColor 14%, transparent); }
  .dir-badge-past { background: color-mix(in srgb, var(--brand, #7b1e45) 10%, transparent); }
  .profile-roles { grid-column: 1 / -1; }
  .profile-roles ul { margin: 0; padding-left: 1.1rem; }
  .profile-roles li + li { margin-top: .15rem; }
}
@media (max-width: 767px) {
  .hero-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-actions .btn { white-space: normal; text-align: center; line-height: 1.25; }
}
/* Wide screens (≥1600px): the full menu needs ~1,400px, so give the header row room (unlayered so it beats .container). */
@media (min-width: 1600px) {
  .site-header .container.header-main { width: min(100%, 1560px); max-width: min(100%, 1560px); padding-inline: 1.5rem; }
}
/* Laptops 1280–1599px: keep the full menu, scaled to 90% across the full header width so it fits. */
@media (min-width: 1280px) and (max-width: 1599.98px) {
  .site-header .container.header-main { width: 100%; max-width: 100%; padding-inline: 1rem; gap: .5rem; zoom: .9; }
  .site-header .primary-nav a, .site-header .primary-nav button { padding-inline: .32rem; }
  .site-header .header-cta { padding-inline: .85rem; }
}
/* Apply form stepper: any number of steps on one row (6 single / 7 couple); labels wrap instead of pushing steps to a new line. */
@layer pages {
  .stepper { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); list-style: none; padding: 0; }
  .stepper li { min-width: 0; }
  .step-label { max-width: 100%; overflow-wrap: anywhere; line-height: 1.25; }
  @media (max-width: 600px) {
    .step-dot { width: 30px; height: 30px; font-size: .8rem; }
    .stepper li::before { top: 14px; left: calc(-50% + 16px); right: calc(50% + 16px); }
    .stepper .current .step-label { top: 36px; left: 50%; transform: translateX(-50%); }
    .stepper li:first-child.current .step-label { left: 0; transform: none; }
    .stepper li:last-child.current .step-label { left: auto; right: 0; transform: none; }
  }
  .plan-choice > span { min-width: 0; }
  .plan-choice strong { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .6rem; }
}
/* ===== Form fields (public forms): compact, equal-height controls aligned row by row =====
   Each .field in a .form-grid uses subgrid rows, so labels, inputs and hints line up across the row even when a
   label wraps; rows no longer stretch inputs to the tallest neighbour. */
@layer pages {
  .form-grid { align-items: start; row-gap: 1.25rem; column-gap: 1.25rem; }
  .form-grid > .field { grid-row: span 4; grid-template-rows: subgrid; row-gap: .4rem; align-content: start; }
  @supports not (grid-template-rows: subgrid) { .form-grid > .field { grid-row: auto; grid-template-rows: none; } }
  .form-grid > .field > label { align-self: end; }
  .field label { color: var(--ink); font-size: .9rem; line-height: 1.35; }
  .field input:not([type=checkbox]):not([type=radio]):not([type=file]), .field select {
    height: 48px; min-height: 48px; padding: 0 .9rem; font: inherit; font-size: 1rem; line-height: 1.2; color: var(--ink);
    border: 1.5px solid var(--line); border-radius: 10px; background-color: var(--surface);
    transition: border-color .15s, box-shadow .15s, background-color .15s; }
  .field textarea { min-height: 96px; padding: .7rem .9rem; font: inherit; font-size: 1rem; line-height: 1.5; resize: vertical; }
  .field input:hover:not(:focus):not([readonly]), .field select:hover:not(:focus), .field textarea:hover:not(:focus) { border-color: color-mix(in srgb, var(--brand) 35%, var(--line)); }
  .field input::placeholder, .field textarea::placeholder { color: color-mix(in srgb, var(--muted) 75%, transparent); }
  .field input[type=date] { padding-right: .6rem; }
  .field input[type=date]::-webkit-calendar-picker-indicator { cursor: pointer; opacity: .65; }
  .field select { appearance: none; -webkit-appearance: none; padding-right: 2.4rem; cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b6570' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right .85rem center; background-size: 16px; }
  /* Browser autofill tint matches the design instead of bright blue */
  .field input:-webkit-autofill { -webkit-box-shadow: 0 0 0 40px var(--surface) inset; -webkit-text-fill-color: var(--ink); caret-color: var(--ink); }
  .field .hint { font-size: .8rem; line-height: 1.45; margin: 0; }
  .field .error { margin: 0; font-size: .82rem; }

  /* Verified mobile: badge sits beside the label; the read-only number keeps the full width with a small "Change" link inside. */
  .label-row { display: inline-flex; align-items: center; flex-wrap: wrap; gap: .5rem; }
  .label-row .verified-tag { font-size: .72rem; padding: .15rem .55rem; }
  .verified-input { position: relative; display: block; }
  .verified-input input { width: 100%; padding-right: 5.25rem !important; background: var(--surface-2) !important; color: var(--ink-2); cursor: default; font-variant-numeric: tabular-nums; }
  .verified-input .btn-link { position: absolute; top: 50%; right: .35rem; transform: translateY(-50%); }
  .verified-tag svg { flex: none; }
  .btn-link { display: inline-flex; align-items: center; min-height: 36px; padding: 0 .6rem; border: 0; border-radius: 8px; background: none;
    color: var(--brand); font: inherit; font-size: .88rem; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
  .btn-link:hover { background: color-mix(in srgb, var(--brand) 8%, transparent); }
  .btn-link:focus-visible { outline: none; box-shadow: var(--focus); }
}

/* Homepage hero slider (page-builder block "hero_slider"): every class below maps to an admin option. */
@layer pages {
  .hs { --hs-h: 540px; --hs-speed: 750ms; position: relative; overflow: hidden; background: var(--brand-strong); color: #fff; isolation: isolate; outline: none; }
  .hs-compact { --hs-h: 400px; } .hs-tall { --hs-h: 660px; } .hs-full { --hs-h: max(480px, calc(100svh - 140px)); }
  .hs-track { display: grid; }

  /* Slides + transition effects */
  .hs-slide { grid-area: 1 / 1; position: relative; display: grid; opacity: 0; visibility: hidden;
    transition: opacity var(--hs-speed) ease, transform var(--hs-speed) cubic-bezier(.22, .61, .36, 1), visibility 0s linear var(--hs-speed); }
  .hs-slide.is-active { opacity: 1; visibility: visible; transition-delay: 0s; z-index: 1; }
  .hs-slide.is-prev { visibility: visible; }
  .fx-slide .hs-slide { opacity: 1; transform: translateX(100%); }
  .fx-slide .hs-slide.dir-back { transform: translateX(-100%); }
  .fx-slide .hs-slide.is-active { transform: none; }
  .fx-slide .hs-slide.is-prev.dir-next { transform: translateX(-100%); }
  .fx-slide .hs-slide.is-prev.dir-back { transform: translateX(100%); }
  .fx-zoom .hs-slide { transform: scale(1.08); }
  .fx-zoom .hs-slide.is-active { transform: none; }
  .fx-none .hs-slide { transition: none; }
  .fx-kenburns .hs-slide.is-active .hs-bg img, .fx-kenburns .hs-slide.is-active img.hs-bg { animation: hs-kenburns calc(var(--hs-interval, 6s) + var(--hs-speed)) ease-out both; }
  @keyframes hs-kenburns { from { transform: scale(1); } to { transform: scale(1.12); } }

  /* Photo + overlay (strength per slider, overridable per slide; direction follows the text placement) */
  .hs-media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
  .hs-media .hs-bg, .hs-media img { width: 100%; height: 100%; object-fit: cover; object-position: var(--focal, center); }
  .hs-bg-plain { background: linear-gradient(120deg, var(--brand-strong), var(--brand)); }
  .hs-slide { --ov: .6; --ov-rgb: 28 10 20; }
  .hs-slide.ov-none { --ov: 0; } .hs-slide.ov-light { --ov: .35; } .hs-slide.ov-strong { --ov: .82; }
  .hs-slide.tc-dark { --ov-rgb: 255 255 255; color: var(--ink); }
  .hs-slide::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: linear-gradient(90deg, rgb(var(--ov-rgb) / var(--ov)) 0%, rgb(var(--ov-rgb) / calc(var(--ov) * .7)) 45%, rgb(var(--ov-rgb) / calc(var(--ov) * .15)) 100%); }
  .hs-slide:has(.al-center)::after { background: rgb(var(--ov-rgb) / calc(var(--ov) * .8)); }
  .hs-slide:has(.al-right)::after { background: linear-gradient(270deg, rgb(var(--ov-rgb) / var(--ov)) 0%, rgb(var(--ov-rgb) / calc(var(--ov) * .7)) 45%, rgb(var(--ov-rgb) / calc(var(--ov) * .15)) 100%); }

  /* Text placement */
  .hs-inner { display: flex; min-height: var(--hs-h); padding-block: 3rem 4.75rem; }
  .hs-inner.al-left { justify-content: flex-start; text-align: left; }
  .hs-inner.al-center { justify-content: center; text-align: center; }
  .hs-inner.al-right { justify-content: flex-end; text-align: right; }
  .hs-inner.va-top { align-items: flex-start; } .hs-inner.va-middle { align-items: center; } .hs-inner.va-bottom { align-items: flex-end; }
  .hs-inner.al-center .hero-actions { justify-content: center; } .hs-inner.al-right .hero-actions { justify-content: flex-end; }
  .hs-copy { width: 100%; max-width: 640px; }
  .cw-narrow .hs-copy { max-width: 480px; } .cw-wide .hs-copy { max-width: 860px; }
  /* Reserve the featured card's column so text placed on that side never runs under it. */
  .has-featured.fp-right .hs-inner { padding-right: calc(min(340px, 90%) + 2.5rem); }
  .has-featured.fp-left .hs-inner { padding-left: calc(min(340px, 90%) + 2.5rem); }
  .hs-copy :is(h1, .hs-h) { color: inherit; font-size: clamp(2rem, 1.4rem + 2.4vw, 3.2rem); line-height: 1.12; margin: .3rem 0 0; }
  .al-left .hs-copy :is(h1, .hs-h), .al-right .hs-copy :is(h1, .hs-h) { max-width: 18ch; }
  .al-right .hs-copy :is(h1, .hs-h) { margin-left: auto; }
  .al-center .hs-copy :is(h1, .hs-h) { margin-inline: auto; }
  .hs-copy .eyebrow { color: #f1d38f; }
  .al-center .eyebrow-lines, .al-right .eyebrow-lines { justify-content: inherit; }
  .hs-copy .lead { color: inherit; opacity: .92; margin-top: 1rem; }
  .tc-dark .hs-copy .eyebrow { color: var(--brand); }
  .tc-dark .hs-copy :is(h1, .hs-h) { color: var(--brand-strong); }
  .hs .btn-navy { background: var(--accent); border-color: var(--accent); color: #1d1208; }
  .tc-dark .btn-light { border-color: var(--brand); color: var(--brand); }

  /* Text animations (played on the active slide) */
  .hs-slide.is-active .hs-copy > * { animation: var(--hs-ta, hs-fade-up) .7s cubic-bezier(.22, .61, .36, 1) both; animation-delay: calc(var(--hs-speed) * .35); }
  .hs-slide.is-active .hs-copy > :nth-child(2) { animation-delay: calc(var(--hs-speed) * .35 + .1s); }
  .hs-slide.is-active .hs-copy > :nth-child(3) { animation-delay: calc(var(--hs-speed) * .35 + .2s); }
  .hs-slide.is-active .hs-copy > :nth-child(4) { animation-delay: calc(var(--hs-speed) * .35 + .3s); }
  .ta-fade { --hs-ta: hs-fade; } .ta-slide-left { --hs-ta: hs-slide-in; } .ta-zoom { --hs-ta: hs-zoom-in; }
  .ta-none .hs-slide.is-active .hs-copy > * { animation: none; }
  @keyframes hs-fade-up { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
  @keyframes hs-fade { from { opacity: 0; } to { opacity: 1; } }
  @keyframes hs-slide-in { from { opacity: 0; transform: translateX(-36px); } to { opacity: 1; transform: none; } }
  @keyframes hs-zoom-in { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }

  /* Featured CME card */
  .hs-featured { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
  .hs-featured .featured-cme { pointer-events: auto; color: var(--ink); }
  .fp-left .hs-featured .featured-cme { right: auto; left: max(1rem, calc((100vw - min(100vw - 2rem, var(--container))) / 2)); }

  /* Navigation */
  .hs-controls { position: absolute; left: 0; right: 0; bottom: 1.1rem; margin-inline: auto; display: flex; align-items: center; gap: .75rem; z-index: 3; }
  .hs-arrow { width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgb(255 255 255 / .45); background: rgb(0 0 0 / .25); color: #fff; display: grid; place-items: center; cursor: pointer; transition: background .2s; }
  .hs-arrow:hover, .hs-arrow:focus-visible { background: rgb(0 0 0 / .5); }
  .hs-arrow:disabled { opacity: .4; cursor: default; }
  .hs-pause { margin-left: auto; }
  .hs-dots { display: flex; gap: .45rem; }
  .hs-dots button { width: 10px; height: 10px; padding: 0; border-radius: 99px; border: 0; background: rgb(255 255 255 / .5); cursor: pointer; transition: width .25s, background .25s; }
  .hs-dots button.on { width: 28px; background: #fff; }
  .hs-progress { position: absolute; left: 0; right: 0; top: calc(var(--hs-h) - 4px); height: 4px; background: rgb(255 255 255 / .2); z-index: 3; }
  .hs-progress span { display: block; height: 100%; width: 0; background: var(--accent); animation: hs-progress var(--hs-interval, 6s) linear forwards; }
  .hs-progress span.is-paused { animation-play-state: paused; }
  @keyframes hs-progress { to { width: 100%; } }

  .hs-loading { min-height: 520px; background: var(--surface-2); color: var(--ink); }

  @media (max-width: 1023px) {
    .hs { --hs-h: 460px; background: var(--surface-2); }
    .hs-compact { --hs-h: 360px; } .hs-tall { --hs-h: 540px; } .hs-full { --hs-h: max(420px, calc(100svh - 160px)); }
    .hs-inner { padding-block: 2.5rem 4.25rem; }
    .hs-slide::after, .hs-slide:has(.al-center)::after, .hs-slide:has(.al-right)::after {
      background: linear-gradient(180deg, rgb(var(--ov-rgb) / calc(var(--ov) * .6)) 0%, rgb(var(--ov-rgb) / var(--ov)) 100%); }
    .has-featured.fp-right .hs-inner, .has-featured.fp-left .hs-inner { padding-inline: 0; }
    .hs-featured { position: relative; inset: auto; pointer-events: auto; padding-block: 1rem .5rem; }
    .hs-featured .featured-cme, .fp-left .hs-featured .featured-cme { margin: 0; position: relative; transform: none; top: auto; right: auto; left: auto; width: auto; }
    .hs-controls { bottom: auto; top: calc(var(--hs-h) - 3.25rem); }
  }
  @media (max-width: 767px) {
    .hs { --hs-h: 420px; }
    .hs-compact { --hs-h: 340px; } .hs-tall { --hs-h: 500px; }
  }
  @media (prefers-reduced-motion: reduce) {
    .hs-slide, .fx-slide .hs-slide, .fx-zoom .hs-slide { transition: none; transform: none; }
    .hs-slide.is-active .hs-copy > *, .fx-kenburns .hs-slide.is-active img { animation: none; }
  }

  /* Association statistics block: one card, equal columns, readable on light backgrounds at every width. */
  .stats-section { padding-block: clamp(1.5rem, 1rem + 2vw, 2.5rem); }
  .stats.stats-band { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); grid-auto-flow: column; gap: 0; max-width: none; margin: 0;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: 1.25rem .5rem; }
  .stats-band li, .stats-band li + li { display: flex; align-items: center; justify-content: center; gap: .9rem; padding: .25rem 1rem; border: 0; background: none; border-radius: 0; }
  .stats-band li + li { border-left: 1px solid var(--line); }
  .stats-band .stat-icon { flex: none; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand); }
  .stats-band strong { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); color: var(--brand); line-height: 1.05; }
  .stats-band small { display: block; margin-top: .2rem; color: var(--muted); font-size: .9rem; }
  .stats-section .pb-h2 { text-align: center; margin-bottom: 1rem; }
  @media (max-width: 767px) {
    .stats.stats-band { padding: 1rem .25rem; border-radius: var(--radius); }
    .stats-band li, .stats-band li + li { flex-direction: column; text-align: center; gap: .45rem; padding: .25rem .4rem; }
    .stats-band .stat-icon { width: 42px; height: 42px; }
    .stats-band .stat-icon svg { width: 22px; height: 22px; }
    .stats-band strong { font-size: 1.3rem; }
    .stats-band small { font-size: .78rem; line-height: 1.25; }
  }
}

/* Membership: "submit the IMA paper form" next-step card on the application success screen */
@layer pages {
  .paper-form { text-align: left; margin: 1.25rem 0; padding: 1.1rem 1.25rem; border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: var(--radius); background: var(--accent-soft); }
  .paper-form h3 { display: flex; align-items: center; gap: .5rem; margin: 0 0 .5rem; font-size: 1.1rem; color: var(--brand); }
  .paper-form p { margin: .5rem 0; }
  .paper-form :is(ul, ol) { margin: .35rem 0 .6rem; padding-left: 1.3rem; }
  .paper-form li { margin: .2rem 0; }
}

/* Splash screens (Admin → Splash screens): curtain launch + welcome card */
html.splash-open, html.splash-open body { overflow: hidden; }
.splash { position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; color: #fff; font-family: inherit; }
.splash-curtain { --curtain: #9b0d14; background: #1a0306; overflow: hidden; }
.curtain-panel { position: absolute; top: 0; bottom: 0; width: 51%; z-index: 1;
  background:
    linear-gradient(to bottom, rgb(0 0 0 / .45), transparent 22%, transparent 78%, rgb(0 0 0 / .5)),
    repeating-linear-gradient(90deg,
      color-mix(in srgb, var(--curtain) 45%, #000) 0px, var(--curtain) 18px,
      color-mix(in srgb, var(--curtain) 75%, #fff) 30px, var(--curtain) 42px,
      color-mix(in srgb, var(--curtain) 45%, #000) 64px);
  transition: transform 1.9s cubic-bezier(.65, 0, .25, 1), filter 1.9s ease; }
.curtain-left { left: 0; transform-origin: left center; box-shadow: inset -30px 0 40px rgb(0 0 0 / .45); }
.curtain-right { right: 0; transform-origin: right center; box-shadow: inset 30px 0 40px rgb(0 0 0 / .45); }
.curtain-valance { position: absolute; top: 0; left: 0; right: 0; height: 9vh; min-height: 56px; z-index: 3;
  background: radial-gradient(ellipse 60px 26px at 50% 100%, transparent 98%, color-mix(in srgb, var(--curtain) 55%, #000) 100%) 0 0 / 120px 100%,
    linear-gradient(color-mix(in srgb, var(--curtain) 50%, #000), color-mix(in srgb, var(--curtain) 70%, #000));
  box-shadow: 0 6px 18px rgb(0 0 0 / .5); transition: transform 1.2s ease .6s; }
.splash-curtain.is-opening .curtain-left { transform: translateX(-96%) skewX(-4deg) scaleX(.85); filter: brightness(.85); }
.splash-curtain.is-opening .curtain-right { transform: translateX(96%) skewX(4deg) scaleX(.85); filter: brightness(.85); }
.splash-curtain.is-opening .curtain-valance { transform: translateY(-110%); }
.splash-curtain.is-opening { background: transparent; transition: background .35s ease; }
.splash-stage { position: relative; z-index: 2; display: grid; justify-items: center; gap: .6rem; padding: 1.5rem; text-align: center;
  transition: opacity .5s ease, transform .5s ease; }
.splash-curtain.is-opening .splash-stage { opacity: 0; transform: scale(.94); }
.splash-logo { width: 96px; height: 96px; object-fit: contain; background: #fff; border-radius: 50%; padding: 8px; box-shadow: 0 8px 24px rgb(0 0 0 / .35); }
.splash-title { margin: .4rem 0 0; color: #fff8ec; font-size: clamp(2.2rem, 1.4rem + 4vw, 4.4rem); font-weight: 800; letter-spacing: -.01em; line-height: 1.05;
  text-shadow: 0 4px 24px rgb(0 0 0 / .55); }
.splash-subtitle { margin: 0; letter-spacing: .38em; text-transform: uppercase; font-size: clamp(.8rem, .7rem + .5vw, 1.05rem); color: #f1d38f; }
.launch-track { position: relative; margin-top: 1.6rem; width: min(300px, 80vw); height: 76px; border-radius: 99px; background: linear-gradient(#1b1b1d, #2c2c30);
  box-shadow: inset 0 3px 8px rgb(0 0 0 / .7), 0 0 0 3px rgb(255 255 255 / .12), 0 14px 30px rgb(0 0 0 / .45); }
.launch-label { position: absolute; inset: 0; display: grid; place-items: center; padding-right: 64px; font-weight: 800; letter-spacing: .12em; font-size: 1.15rem; color: #f3f3f3; pointer-events: none; }
.launch-knob { position: absolute; top: 6px; left: 6px; width: 64px; height: 64px; border-radius: 50%; border: 0; cursor: grab; touch-action: none; color: #fff;
  display: grid; place-items: center; background: radial-gradient(circle at 35% 30%, #ff6b6b, #d90f1c 60%, #8f0610);
  box-shadow: 0 6px 18px rgb(217 15 28 / .6), inset 0 2px 4px rgb(255 255 255 / .35);
  transform: translateX(calc(var(--drag, 0) * (min(300px, 80vw) - 76px))); transition: transform .25s ease;
  animation: launch-pulse 1.8s ease-in-out infinite; }
.launch-knob:active { cursor: grabbing; transition: none; }
.launch-knob:focus-visible { outline: 3px solid #f1d38f; outline-offset: 3px; }
@keyframes launch-pulse { 0%, 100% { box-shadow: 0 6px 18px rgb(217 15 28 / .6), 0 0 0 0 rgb(255 80 80 / .55); } 50% { box-shadow: 0 6px 18px rgb(217 15 28 / .6), 0 0 0 14px rgb(255 80 80 / 0); } }
.splash-hint { margin: .5rem 0 0; color: rgb(255 255 255 / .75); font-size: .9rem; }
.splash-skip { position: absolute; top: calc(9vh + .75rem); right: 1rem; z-index: 4; border: 1px solid rgb(255 255 255 / .35); background: rgb(0 0 0 / .25);
  color: #fff; border-radius: 99px; padding: .35rem .9rem; font: inherit; font-size: .85rem; cursor: pointer; }
.splash-curtain.is-opening .splash-skip { opacity: 0; }
.splash-preview-tag { position: absolute; top: calc(9vh + .75rem); left: 1rem; z-index: 4; background: #f1d38f; color: #3b2a05; border-radius: 99px; padding: .25rem .7rem; font-size: .75rem; font-weight: 700; }
.splash-welcome .splash-preview-tag { top: 1rem; }
.splash-confetti { position: absolute; inset: 0; z-index: 5; pointer-events: none; overflow: hidden; }
.splash-confetti i { position: absolute; top: -12px; left: var(--x); width: 9px; height: 15px; border-radius: 2px; background: hsl(var(--h) 85% 58%);
  animation: confetti-fall 2.2s cubic-bezier(.2, .6, .4, 1) var(--d) forwards; }
@keyframes confetti-fall { to { transform: translate(calc((var(--i) - 21) * 6px), 105vh) rotate(calc(var(--i) * 47deg)); opacity: .9; } }
.splash-welcome { --splash-bg: #5f1735; background: color-mix(in srgb, var(--splash-bg) 88%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  animation: splash-in .35s ease both; padding: 1rem; }
.splash-welcome.is-leaving { animation: splash-out .35s ease both; }
.welcome-card { width: min(440px, 100%); background: #fff; color: var(--ink); border-radius: 20px; padding: 2rem 1.6rem 1.6rem; text-align: center;
  display: grid; justify-items: center; gap: .6rem; box-shadow: 0 24px 60px rgb(0 0 0 / .35); border-top: 5px solid var(--accent); }
.welcome-card .splash-logo { box-shadow: none; border: 1px solid var(--line); }
.welcome-card h1 { margin: .3rem 0 0; color: var(--brand); font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2rem); }
.welcome-card p { margin: 0 0 .6rem; color: var(--muted); }
@keyframes splash-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes splash-out { to { opacity: 0; } }
@media (max-width: 767px) {
  .launch-track { height: 66px; } .launch-knob { width: 54px; height: 54px; } .launch-label { padding-right: 54px; font-size: 1rem; }
  .launch-knob { transform: translateX(calc(var(--drag, 0) * (min(300px, 80vw) - 66px))); }
  .curtain-panel { background-size: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .curtain-panel, .curtain-valance, .splash-stage { transition: opacity .3s ease; }
  .splash-curtain.is-opening .curtain-left, .splash-curtain.is-opening .curtain-right, .splash-curtain.is-opening .curtain-valance { transform: none; opacity: 0; }
  .launch-knob { animation: none; } .splash-welcome, .splash-welcome.is-leaving { animation: none; }
}

/* Orations (/orations, /orations/:slug) */
@layer pages {
  .oration-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); }
  .oration-card { position: relative; display: flex; flex-direction: column; gap: .45rem; height: 100%; padding: 1.25rem 1.25rem 1.1rem; border: 1px solid var(--line); border-radius: var(--radius);
    background: var(--surface); text-decoration: none; color: inherit; border-top: 4px solid var(--brand); transition: box-shadow .2s, transform .2s, border-color .2s; }
  .oration-card:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
  .oration-card:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
  .oration-no { position: absolute; top: .9rem; right: 1rem; font-weight: 800; font-size: 1.4rem; color: color-mix(in srgb, var(--brand) 18%, transparent); }
  .oration-name { font-size: 1.08rem; line-height: 1.3; color: var(--brand); padding-right: 2.2rem; }
  .oration-memory { font-size: var(--fs-small); color: var(--muted); }
  .oration-latest { display: flex; align-items: center; gap: .75rem; margin-top: .4rem; padding: .7rem; border-radius: 12px; background: var(--surface-2); }
  .oration-latest small { display: block; font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--accent-ink, var(--accent)); }
  .oration-latest b { display: block; color: var(--ink); }
  .oration-latest em { display: block; font-size: var(--fs-small); color: var(--muted); font-style: normal; }
  .oration-latest.is-empty { color: var(--muted); }
  .oration-more { margin-top: auto; padding-top: .4rem; display: inline-flex; align-items: center; gap: .3rem; font-weight: 600; font-size: var(--fs-small); color: var(--brand); }
  .oration-avatar { flex: none; width: 52px; height: 52px; border-radius: 50%; object-fit: cover; }
  .oration-avatar.is-initials { display: grid; place-items: center; background: var(--brand-soft); color: var(--brand); font-weight: 700; }
  .oration-about { display: flex; gap: 1.5rem; align-items: flex-start; margin-bottom: 2rem; }
  .oration-portrait { flex: none; width: 160px; height: 160px; border-radius: var(--radius); object-fit: cover; }
  .oration-h { margin: 0 0 1rem; }
  .oration-timeline { list-style: none; margin: 0; padding: 0 0 0 1.2rem; border-left: 3px solid var(--line); display: grid; gap: 1.1rem; }
  .oration-timeline > li { position: relative; display: grid; grid-template-columns: 70px 1fr; gap: 1rem; align-items: start; }
  .oration-timeline > li::before { content: ""; position: absolute; left: calc(-1.2rem - 8px); top: .55rem; width: 13px; height: 13px; border-radius: 50%; background: var(--brand); border: 3px solid var(--surface); }
  .oration-timeline > li.is-upcoming::before { background: var(--accent); }
  .oration-year { font-size: 1.35rem; font-weight: 800; color: var(--brand); line-height: 1.6; }
  .oration-entry { display: flex; gap: 1rem; align-items: flex-start; padding: 1rem 1.1rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
  .oration-entry .oration-avatar { width: 64px; height: 64px; }
  .oration-entry h3 { margin: .15rem 0 .1rem; font-size: 1.08rem; }
  .oration-entry p { margin: .2rem 0; }
  .oration-topic { font-weight: 600; color: var(--ink); }
  .oration-meta { display: flex; flex-wrap: wrap; gap: .4rem 1rem; color: var(--muted); font-size: var(--fs-small); }
  .oration-meta span { display: inline-flex; align-items: center; gap: .3rem; }
  @media (max-width: 640px) {
    .oration-about { flex-direction: column; } .oration-portrait { width: 120px; height: 120px; }
    .oration-timeline > li { grid-template-columns: 1fr; gap: .3rem; } .oration-year { line-height: 1.2; }
    .oration-entry { flex-direction: column; }
  }
}

/* Home page "Orations" block: scroll row of oration cards (3 per view on desktop) */
@layer pages {
  .sr-track.oration-row { grid-auto-columns: calc((100% - 2 * var(--space-5, 1.5rem)) / 3); padding: 4px 2px 8px; }
  .oration-slide { display: flex; } .oration-slide > .oration-card { flex: 1; }
  @media (max-width: 1100px) { .sr-track.oration-row { grid-auto-columns: calc((100% - var(--space-5, 1.5rem)) / 2); } }
  @media (max-width: 640px) { .sr-track.oration-row { grid-auto-columns: 85%; } }
}

/* Oration cards: cover image (photo of the doctor honoured) + speaker profile picture */
@layer pages {
  .oration-card.has-media { padding-top: 0; overflow: hidden; }
  .oration-media { position: relative; display: block; margin: 0 -1.25rem .5rem; aspect-ratio: 16 / 9; background: var(--surface-2); }
  .oration-cover { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 25%; }
  .oration-cover.is-placeholder { display: grid; place-items: center; align-content: center; gap: .35rem; color: #f1d38f;
    background: radial-gradient(circle at 30% 20%, color-mix(in srgb, var(--brand) 70%, #fff) 0%, var(--brand) 45%, var(--brand-strong) 100%); }
  .oration-cover.is-placeholder b { font-size: 1.6rem; letter-spacing: .08em; color: #fff; }
  .oration-card.has-media .oration-no { top: .6rem; right: .6rem; padding: .15rem .55rem; border-radius: 99px; font-size: .85rem; color: #fff; background: rgb(0 0 0 / .45); }
  .oration-card.has-media .oration-name { padding-right: 0; }
  .oration-card:hover .oration-cover:not(.is-placeholder) { transform: scale(1.03); }
  .oration-cover { transition: transform .4s ease; }
  .oration-latest .oration-avatar { width: 46px; height: 46px; box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px var(--line); }
  .oration-avatar.is-unknown { display: grid; place-items: center; background: var(--surface); color: var(--muted); border: 1px dashed var(--line); }
  @media (prefers-reduced-motion: reduce) { .oration-cover { transition: none; } .oration-card:hover .oration-cover { transform: none; } }
}

/* Oration link on CME programme cards and pages */
@layer pages {
  .event-oration { margin: .15rem 0 .35rem; font-size: var(--fs-small); font-weight: 600; }
  .event-oration a { color: var(--accent-ink, var(--brand)); text-decoration: none; }
  .event-oration a::before { content: "★ "; color: var(--accent); }
  .event-oration a:hover { text-decoration: underline; }
}

/* Honour roll (past presidents / secretaries / treasurers): portrait + name */
.honour-photo { flex: none; width: 52px; height: 52px; border-radius: 50%; object-fit: cover; object-position: center 20%; box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px var(--line); }
.honour-photo.is-initials { display: grid; place-items: center; background: var(--brand-soft); color: var(--brand); font-weight: 700; font-size: .85rem; }
.honour-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .1rem; }
.honour-text .honour-years { min-width: 0; }
.honour-roll li.current .honour-photo { box-shadow: 0 0 0 2px var(--accent-soft), 0 0 0 4px var(--accent); }
.honour-qual { font-size: var(--fs-xs); color: var(--muted); line-height: 1.35; overflow-wrap: anywhere; }

/* ===== Refine: calmer, denser, minimal UI (overrides earlier layers) ===== */
@layer refine {
  :root {
    --radius: 10px; --radius-sm: 8px; --radius-lg: 14px;
    --shadow: 0 1px 2px rgb(29 27 32 / .04);
    --shadow-lg: 0 8px 24px rgb(29 27 32 / .08);
    --fs-body: 1rem;
    --fs-small: .875rem; --fs-xs: .8rem;
    --fs-h1: clamp(1.6rem, 1.3rem + 1.4vw, 2.35rem);
    --fs-h2: clamp(1.25rem, 1.1rem + .6vw, 1.6rem);
    --fs-h3: clamp(.98rem, .95rem + .15vw, 1.08rem);
    --space-5: 1.25rem; --space-6: 1.5rem; --space-7: 2.25rem; --space-8: 3.25rem;
  }
  body { line-height: 1.55; }
  h1, h2, h3 { letter-spacing: -.015em; }
  h2 { margin-bottom: .5rem; }

  .section { padding-block: clamp(1.75rem, 1.4rem + 1.4vw, 2.75rem); }
  .section-gap { margin-top: 2rem; }
  .section-head { margin-bottom: 1rem; }
  .page-header { padding-block: 1.5rem 1.6rem; }
  .lead { font-size: clamp(.95rem, .92rem + .15vw, 1.02rem); margin-top: .5rem; }
  .eyebrow { font-size: .7rem; letter-spacing: .12em; margin-bottom: .3rem; }
  .eyebrow::before, .eyebrow-lines::after { width: 18px; height: 1.5px; }

  /* Buttons: quieter, smaller, no lift */
  .btn { padding: .5rem 1rem; min-height: 38px; border-width: 1px; border-radius: 8px; font-size: .875rem; font-weight: 600; }
  .btn:hover { transform: none; box-shadow: none; }
  .btn-sm { padding: .32rem .75rem; min-height: 32px; font-size: .8rem; }
  .btn-lg { padding: .62rem 1.2rem; min-height: 44px; font-size: .92rem; }
  .chip { padding: .12rem .5rem; font-size: .72rem; }

  /* Cards: flat with hairline border */
  .card { box-shadow: none; }
  .card:hover { transform: none; box-shadow: var(--shadow-lg); }
  .card-body { padding: .9rem 1rem 1rem; gap: .4rem; }
  .grid, .members-grid { gap: 1rem; }

  /* Forms */
  .field { gap: .25rem; }
  .field label { font-size: .84rem; }
  .field input:not([type=checkbox]), .field select, .field textarea { padding: .5rem .7rem; min-height: 40px; border-width: 1px; border-radius: 8px; }

  /* Hero */
  .hero-grid { min-height: 400px; }
  .hero-copy { padding-block: clamp(2rem, 1.6rem + 2vw, 3.25rem); }
  .hero-actions { margin-top: 1.25rem; gap: .6rem; }
  .stats { margin-top: 1.5rem; }

  /* Directory */
  .dir-grid { gap: .75rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
  .dir-card { padding: .85rem; gap: .55rem; }
  .dir-head { gap: .7rem; }
  .dir-photo { width: 52px; height: 52px; border-width: 1px; }
  .dir-initial { font-size: 1.15rem; }
  .dir-id h3 { font-size: .95rem; }
  .dir-spec { font-size: .82rem; }
  .dir-qual, .dir-hosp { font-size: .8rem; }
  .dir-meta { font-size: .74rem; }
  .dir-actions .btn, .dir-clear { min-height: 34px; }
  .filter-pill { min-height: 30px; font-size: .8rem; }

  /* Profile modal */
  .profile-modal { width: min(100%, 560px); padding: 1.4rem; }
  .modal-close { width: 34px; height: 34px; }
  .profile-head { gap: 1rem; padding-bottom: 1rem; }
  .profile-photo { width: 88px; height: 88px; border-width: 2px; }
  .profile-photo.member-initial { font-size: 2rem; }
  .profile-head h2 { font-size: 1.2rem; }
  .profile-head .designation { font-size: .88rem; }
  .profile-facts { gap: .5rem; margin: 1rem 0; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
  .profile-facts div { padding: .5rem .7rem; border-radius: 8px; }
  .profile-facts dt { font-size: .68rem; }
  .profile-facts dd { font-size: .9rem; }
  .profile-hospital h3, .profile-bio h3 { font-size: .9rem; }
  .profile-hospital p, .profile-bio p { font-size: .88rem; }
  .profile-contact { margin-top: 1rem; padding-top: 1rem; }

  /* Keep comfortable touch targets on phones */
  @media (max-width: 767px) {
    .btn, .dir-actions .btn, .dir-clear { min-height: 44px; }
    .btn-sm, .filter-pill { min-height: 40px; }
    .modal-close { width: 44px; height: 44px; }
    .dir-qual, .dir-hosp, .dir-spec { font-size: .875rem; }
    .field input:not([type=checkbox]), .field select, .field textarea { min-height: 44px; font-size: 16px; }
    .profile-photo { width: 80px; height: 80px; }
  }
}

/* Accessibility & interaction polish (ui-ux-pro-max: healthcare = Accessible & Ethical + Minimalism) */
@layer refine {
  .dir-card, .card, .filter-pill, summary, [role="button"] { cursor: pointer; }
  .btn, .dir-card, .card, .filter-pill { transition-duration: .18s; }
  .dir-card:focus-within { border-color: var(--accent); }
  :focus-visible { box-shadow: 0 0 0 3px rgb(123 30 69 / .4); }
  .dir-meta, .profile-facts dt { color: var(--ink-2); }
}

/* Mobile: native-app density — smaller type scale, tighter rhythm (8px grid) */
@layer refine {
  @media (max-width: 767px) {
    html { font-size: 93.75%; }               /* 15px root: everything in rem scales down */
    :root {
      --fs-body: .95rem; --fs-small: .84rem; --fs-xs: .74rem;
      --fs-h1: 1.45rem; --fs-h2: 1.12rem; --fs-h3: .98rem;
      --space-4: .75rem; --space-5: 1rem; --space-6: 1.25rem; --space-7: 1.5rem; --space-8: 2rem;
    }
    body { line-height: 1.5; }

    /* Section rhythm: 20px between blocks, 12px under headings */
    .section, .home .section.container { padding-block: 1.25rem; }
    .section-gap { margin-top: 1.25rem; }
    .section-head { margin-bottom: .75rem; }
    .section-head h2, h2 { font-size: var(--fs-h2); margin-bottom: .4rem; }
    .page-header { padding-block: 1rem 1.1rem; }
    .page-header h1 { font-size: 1.35rem; }
    .lead { font-size: .9rem; margin-top: .35rem; }
    .eyebrow { font-size: .64rem; }

    /* Hero */
    .hero h1 { font-size: 1.5rem; line-height: 1.15; }
    .hero .lead { font-size: .88rem; }
    .hero-copy { padding-block: 1.1rem .85rem; }
    .hero-actions { gap: .5rem; margin-top: .9rem; }
    .hero-actions .btn { min-height: 44px; font-size: .84rem; }
    .hs-copy :is(h1, .hs-h) { font-size: 1.55rem; }
    .hs-copy .lead { font-size: .88rem; margin-top: .5rem; }

    /* Cards & lists: tighter insides, 10px between */
    .grid, .grid-4, .members-grid, .dir-grid, .notice-list { gap: .6rem; }
    .card-body { padding: .75rem .85rem .85rem; gap: .3rem; }
    .card-title { font-size: .98rem; line-height: 1.3; }
    .card-text { font-size: .84rem; }
    .card-foot { padding-top: .25rem; }
    .notice-list li { padding: .7rem .85rem; border-radius: 14px; }
    .dir-card { padding: .75rem; gap: .45rem; border-radius: 14px; }
    .chip { font-size: .68rem; }
    .quick-links { gap: .4rem; padding-top: .75rem; }
    .quick-link { padding: .65rem .2rem; border-radius: 14px; }
    .quick-icon { width: 42px; height: 42px; border-radius: 13px; }
    .member { padding: .8rem .4rem; }
    .member-photo { width: 64px; height: 64px; }

    /* Bottom sheet */
    .profile-modal { padding: 1.4rem 1rem calc(1rem + env(safe-area-inset-bottom)); }
    .profile-head h2 { font-size: 1.1rem; }

    /* Keep iOS from zooming into inputs */
    .field input:not([type=checkbox]), .field select, .field textarea, input, select, textarea { font-size: 16px; }
  }
}

/* Membership ID card at real CR80 size: 3.375in × 2.125in. Unlayered so it overrides the earlier card rules. */
.member-card { width: 3.375in !important; height: 2.125in; max-width: none; flex: none; display: grid; grid-template-rows: auto 1fr auto;
  border-radius: .125in; box-shadow: 0 6px 22px rgb(29 27 32 / .16); container-type: normal; font-family: var(--font); }
.member-card .mc-head { display: flex; align-items: center; justify-content: flex-start; gap: .06in; flex-wrap: nowrap; padding: .05in .1in; border-bottom-width: 2px; }
.member-card .mc-logo { width: .24in; height: .24in; flex: none; border-radius: 50%; background: #fff; padding: 1px; object-fit: contain; }
.member-card .mc-org { font-size: 7pt; line-height: 1.15; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.member-card .mc-body { display: grid; grid-template-columns: .74in minmax(0, 1fr) .72in; gap: .08in; padding: .07in .1in; align-items: center; }
.member-card .mc-photo { width: .74in; height: .9in; border-radius: .05in; border: 1.5px solid #fff; box-shadow: 0 0 0 1px rgba(123,30,69,.25); object-fit: cover; object-position: center 20%; }
.member-card .mc-initial { font-size: 22pt; }
.member-card .mc-details { display: grid; gap: 0; align-content: center; min-width: 0; font-size: 6pt; line-height: 1.25; color: #3f3b44; }
.member-card .mc-name { font-size: 8.5pt; line-height: 1.15; color: #6a1a3c; margin-bottom: .02in; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.member-card .mc-qual { font-size: 6pt; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.member-card .mc-type { justify-self: start; margin: .03in 0; padding: .01in .06in; border-radius: 999px; background: #6a1a3c; color: #fbe7a6; font-size: 5.5pt; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.member-card .mc-no-label { font-size: 5pt; text-transform: uppercase; letter-spacing: .06em; color: #67626b; }
.member-card .mc-no { font-size: 6pt; font-weight: 700; color: #1d1b20; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.member-card .mc-qr { display: grid; justify-items: center; gap: .01in; grid-column: auto; padding: 0; border: 0; }
.member-card .mc-qr svg { width: .68in; height: .68in; padding: 2px; border-radius: .03in; }
.member-card .mc-qr small { font-size: 4.5pt; }
.member-card .mc-foot { font-size: 6pt; letter-spacing: .18em; padding: .025in; }
@media print {
  @page { size: 3.375in 2.125in; margin: 0; }
  .member-card { position: absolute !important; top: 0 !important; left: 0 !important; transform: none !important; width: 3.375in !important; height: 2.125in !important;
    border: 0 !important; border-radius: 0 !important; box-shadow: none !important; }
}

/* Oration cards: lock the cover to the 16:9 frame so every card in a row is the same height
   (an aspect-ratio box otherwise grows to fit a tall portrait). Portraits are framed on the face. */
.oration-media { overflow: hidden; }
.oration-media > .oration-cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 22%; }