/* Cato Alumni Hub
   Brand: #3043B4 primary, #0D0E51 navy, #C97703 gold, #7C756D taupe, #BFC7F8 periwinkle.
   Type: Crimson Pro (headings), Inter (body). Self-hosted.
   House rules: no colored edge rails on any element (state = background tint),
   no forced uppercase or letterspacing, no em dashes in copy. */

@font-face { font-family: "Crimson Pro"; src: url("/fonts/crimson-pro-var.woff2") format("woff2"); font-weight: 200 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Crimson Pro"; src: url("/fonts/crimson-pro-italic-var.woff2") format("woff2"); font-weight: 200 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/fonts/inter-var.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }

:root {
  --navy: #0D0E51; --navy-2: #1B1D6E; --navy-3: #2A2C80;
  --blue: #3043B4; --blue-hover: #2536A0; --blue-50: #F1F3FE; --blue-100: #E3E7FC; --peri: #BFC7F8;
  --gold: #C97703; --gold-ink: #8A5203; --gold-50: #FBF1E2;
  --taupe: #7C756D; --muted: #5F5952; --ink: #1A1A1A; --ink-2: #333333;
  --paper: #F9F9F7; --card: #FFFFFF; --line: #E5E2DC; --line-2: #D3CEC6;
  --ok: #1F6B43; --ok-50: #E7F3EC; --err: #A1231B; --err-50: #FCEBEA; --warn-50: #FBF1E2;
  --serif: "Crimson Pro", Georgia, "Times New Roman", serif;
  --sans: Inter, Arial, Helvetica, sans-serif;
  --mono: "Source Code Pro", "Courier New", monospace;
  --r: 14px; --r-sm: 10px; --r-xs: 8px;
  --shadow: 0 1px 2px rgba(13, 14, 81, .05), 0 12px 32px -20px rgba(13, 14, 81, .28);
  --shadow-hover: 0 2px 4px rgba(13, 14, 81, .06), 0 20px 44px -22px rgba(13, 14, 81, .4);
  --wrap: 1280px; --gutter: 28px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 16px/1.55 var(--sans); -webkit-font-smoothing: antialiased; min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1; padding-bottom: 56px; outline: none; }
img, svg { max-width: 100%; }
h1, h2, h3, h4 { font-family: var(--serif); color: var(--navy); margin: 0; line-height: 1.12; font-weight: 700; }
h1 { font-size: clamp(2.4rem, 4.6vw, 3.6rem); letter-spacing: -0.01em; }
h2 { font-size: clamp(1.6rem, 2.4vw, 2.1rem); }
h3 { font-size: 1.45rem; font-weight: 600; }
p { margin: 0 0 .75em; }
a { color: var(--blue); text-decoration: none; font-weight: 500; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; border-radius: 4px; }
button { font: inherit; }
code, pre { font-family: var(--mono); }
.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; }
.skip-link { position: absolute; left: 12px; top: -60px; background: var(--card); color: var(--navy); padding: 10px 16px; border-radius: var(--r-xs); z-index: 100; font-weight: 600; }
.skip-link:focus { top: 12px; }
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.wrap.narrow { max-width: 880px; }
.muted { color: var(--muted); }
.small { font-size: .875rem; }
.center { text-align: center; }
.ico { flex: none; vertical-align: middle; }
.stack > * + * { margin-top: 18px; }
.stack-lg > * + * { margin-top: 28px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.kicker { font-size: .9rem; font-weight: 600; color: var(--gold-ink); margin: 0 0 6px; }
.lede { font-size: 1.15rem; color: var(--ink-2); max-width: 62ch; }
.caption { font-size: .9rem; color: var(--muted); display: flex; align-items: center; gap: 6px; margin: 12px 0 0; }

/* ---------- Header ---------- */
.site-header { background: var(--navy); color: #fff; position: sticky; top: 0; z-index: 40; }
.header-inner { display: flex; align-items: center; gap: 28px; height: 76px; }
.brand { display: flex; align-items: center; gap: 18px; color: #fff; text-decoration: none !important; flex: none; }
.logo-svg { height: 44px; width: auto; color: #fff; display: block; }
.brand-divider { width: 1px; height: 36px; background: rgba(255, 255, 255, .45); }
.brand-name { font-family: var(--serif); font-size: 1.7rem; font-weight: 600; letter-spacing: -.005em; white-space: nowrap; }
.main-nav { flex: 1; }
.main-nav ul { list-style: none; display: flex; gap: 4px; margin: 0; padding: 0; justify-content: center; }
.main-nav a, .mobile-nav a { display: block; color: rgba(255, 255, 255, .92); padding: 9px 16px; border-radius: var(--r-xs); font-weight: 500; font-size: 1rem; text-decoration: none; }
.main-nav a:hover { background: rgba(255, 255, 255, .09); }
.main-nav a.active { background: var(--blue); color: #fff; }
.site-header :focus-visible { outline-color: var(--peri); }
.header-tools { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.icon-btn { display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; color: inherit; }
.site-header .icon-btn { color: #fff; }
.site-header .icon-btn:hover { background: rgba(255, 255, 255, .1); }
.menu { position: relative; }
.menu > summary { list-style: none; cursor: pointer; display: grid; place-items: center; border-radius: 50%; }
.menu > summary::-webkit-details-marker { display: none; }
.account-menu > summary .avatar { box-shadow: 0 0 0 2px rgba(255, 255, 255, .7); }
.menu-panel { position: absolute; right: 0; top: calc(100% + 10px); background: var(--card); color: var(--ink); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-hover); min-width: 260px; padding: 8px; z-index: 50; }
.menu-panel a, .menu-panel button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border-radius: var(--r-xs); color: var(--ink); background: none; border: 0; text-align: left; cursor: pointer; font-weight: 500; text-decoration: none; }
.menu-panel a:hover, .menu-panel button:hover { background: var(--blue-50); }
.menu-panel form { margin: 4px 0 0; border-top: 1px solid var(--line); padding-top: 4px; }
.menu-who { padding: 10px 12px 12px; border-bottom: 1px solid var(--line); margin-bottom: 4px; display: grid; }
.menu-who span { font-size: .85rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
.mobile-nav { display: none; }
.mobile-nav > summary { color: #fff; width: 42px; height: 42px; }
.mobile-nav .menu-panel ul { list-style: none; margin: 0; padding: 0; }
.mobile-nav .menu-panel a { color: var(--ink); }
.mobile-nav .menu-panel a.active { background: var(--blue-100); color: var(--navy); font-weight: 600; }

.view-as { background: var(--gold-50); color: var(--gold-ink); font-size: .925rem; }
.view-as .wrap { display: flex; align-items: center; justify-content: space-between; gap: 10px 20px; padding-top: 8px; padding-bottom: 8px; flex-wrap: wrap; }
.va-who { display: flex; align-items: center; gap: 8px; margin: 0; flex: 1 1 360px; }
.va-who strong { color: #6A3F02; }
.va-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.va-switch select.input { min-height: 36px; padding: 4px 36px 4px 12px; font-size: .9rem; width: auto; max-width: 220px; border-color: #E2C796; }
.btn-outline-gold { background: transparent; color: var(--gold-ink); border-color: var(--gold); }
.btn-outline-gold:hover { background: #F6E3C4; }
.admin-help { display: flex; gap: 8px; align-items: flex-start; }
.admin-help .ico { margin-top: 3px; color: var(--navy); }
.admin-accounts { margin-bottom: 28px; }
.sub-h { margin: 8px 0 6px; }

.welcome-bar { background: var(--card); border-bottom: 1px solid var(--line); }
.welcome-inner { display: flex; align-items: center; gap: 20px; min-height: 56px; flex-wrap: wrap; padding-top: 8px; padding-bottom: 8px; }
.welcome-hello { font-family: var(--serif); font-size: 1.4rem; font-weight: 600; color: var(--navy); margin: 0; padding-right: 20px; border-right: 1px solid var(--line); }
.welcome-edit { margin-left: auto; display: flex; align-items: center; gap: 8px; font-weight: 600; }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--line); background: var(--card); }
.footer-inner { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding-top: 18px; padding-bottom: 22px; font-size: .9rem; }
.site-footer nav { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; color: var(--muted); }
.proto-note { margin: 0; color: var(--muted); }

/* ---------- Buttons, links, chips ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 20px; border-radius: var(--r-sm); border: 1.5px solid transparent; font-weight: 600; font-size: 1rem; cursor: pointer; text-decoration: none !important; transition: background-color .15s, box-shadow .15s, transform .15s; white-space: nowrap; }
.btn-primary { background: var(--blue); color: #fff; }
.btn-primary:hover { background: var(--blue-hover); }
.btn-secondary { background: var(--card); color: var(--navy); border-color: var(--navy); }
.btn-secondary:hover { background: var(--blue-50); }
.btn-ghost { background: transparent; color: var(--blue); }
.btn-ghost:hover { background: var(--blue-50); }
.btn-light { background: #fff; color: var(--navy); }
.btn-light:hover { background: var(--blue-100); }
.btn-outline-light { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .85); }
.btn-outline-light:hover { background: rgba(255, 255, 255, .1); }
.btn-sm { min-height: 36px; padding: 0 14px; font-size: .9rem; }
.btn-block { width: 100%; }
.btn:active { transform: translateY(1px); }
.btn-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.link-arrow { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--blue); }
.link-arrow .ico { transition: transform .15s; }
.link-arrow:hover .ico, a:hover > .link-arrow .ico { transform: translateX(3px); }
.link-light { color: #fff; text-decoration: underline; text-underline-offset: 4px; font-weight: 600; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; background: var(--blue-100); color: var(--navy); font-size: .875rem; font-weight: 500; line-height: 1.5; white-space: nowrap; }
.chip-line { background: var(--card); box-shadow: inset 0 0 0 1px var(--peri); }
.chip-gold { background: var(--gold-50); color: var(--gold-ink); }
.chip-ok { background: var(--ok-50); color: var(--ok); }
.chip-link { text-decoration: none !important; }
.chip-link:hover { background: var(--peri); }
.chip-removable { background: var(--navy); color: #fff; text-decoration: none !important; }
.chip-removable:hover { background: var(--navy-3); }
.badge { display: inline-flex; align-items: center; gap: 5px; padding: 2px 10px; border-radius: 999px; font-size: .8rem; font-weight: 600; white-space: nowrap; }
.badge-info { background: var(--blue-100); color: var(--navy); }
.badge-ok { background: var(--ok-50); color: var(--ok); }
.badge-warn, .badge-gold { background: var(--gold-50); color: var(--gold-ink); }
.badge-error { background: var(--err-50); color: var(--err); }
.badge-neutral { background: #EFEDE9; color: var(--muted); }
.count { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; margin-left: 6px; border-radius: 999px; background: var(--blue); color: #fff; font: 600 .75rem var(--sans); }

/* ---------- Avatars ---------- */
.avatar { display: inline-grid; place-items: center; width: var(--sz, 48px); height: var(--sz, 48px); border-radius: 50%; object-fit: cover; flex: none; background: var(--blue-100); }
.avatar-initials { background: var(--av); color: #fff; font-family: var(--serif); font-weight: 600; font-size: calc(var(--sz) * .4); line-height: 1; letter-spacing: .01em; }
img.avatar { border-radius: 50%; }
.avatar.xl, .avatar.xxl { border-radius: 12px; }

/* ---------- Cards & sections ---------- */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 26px; box-shadow: var(--shadow); }
.card h2 { font-size: 1.7rem; margin-bottom: 14px; }
.card-navy { background: var(--navy); color: #fff; border-radius: var(--r); padding: 28px; }
.card-navy h2 { color: #fff; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.section-head h2 { margin: 0; }
.section-head p { margin: 0; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; padding: 34px 0 24px; flex-wrap: wrap; }
.page-head h1 { margin-bottom: 6px; }
.page-head .lede { margin: 0; }
.page-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.crumb { margin: 24px 0 0; font-size: .95rem; }
.crumb a { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; }
.empty { text-align: center; padding: 48px 24px; background: var(--card); border: 1px dashed var(--line-2); border-radius: var(--r); margin: 24px 0; }
.empty h3 { margin-bottom: 8px; }
.empty p { color: var(--muted); max-width: 52ch; margin: 0 auto 18px; }
.notice-wrap { padding-top: 18px; }
.notice { display: flex; align-items: flex-start; gap: 10px; padding: 12px 16px; border-radius: var(--r-sm); font-weight: 500; margin: 0 0 8px; }
.notice .ico { margin-top: 2px; }
.notice-ok { background: var(--ok-50); color: var(--ok); }
.notice-error { background: var(--err-50); color: var(--err); }
.notice-info, .notice-warn { background: var(--blue-50); color: var(--navy); }
.notice a { font-weight: 600; }

/* ---------- Forms ---------- */
.field { display: flex; flex-direction: column; gap: 6px; border: 0; padding: 0; margin-inline: 0; min-width: 0; }
.grid-2 > .field { margin-top: 0; }
.field label, .field legend, .field .label { font-weight: 600; color: var(--ink); font-size: .975rem; padding: 0; }
.opt { font-weight: 400; color: var(--muted); }
.hint { font-size: .875rem; color: var(--muted); margin: 0; }
.error { color: var(--err); font-size: .9rem; margin: 0; font-weight: 500; }
.input { width: 100%; min-height: 46px; padding: 10px 14px; border: 1px solid var(--line-2); border-radius: var(--r-xs); background: #fff; color: var(--ink); font: inherit; }
textarea.input { min-height: 110px; resize: vertical; line-height: 1.5; }
select.input { appearance: none; padding-right: 40px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%230D0E51' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6.5 9.5 5.5 5.5 5.5-5.5'/%3E%3C/svg%3E") no-repeat right 12px center; cursor: pointer; }
.input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(48, 67, 180, .22); }
.has-error .input { border-color: var(--err); }
.readonly { margin: 0; padding: 10px 14px; background: var(--paper); border-radius: var(--r-xs); color: var(--muted); }
.form-card h2 { margin-bottom: 4px; }
.form-actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.sticky-actions { position: sticky; bottom: 0; background: linear-gradient(rgba(249, 249, 247, 0), var(--paper) 30%); padding: 20px 0 12px; z-index: 5; }
.consent { display: flex; gap: 10px; align-items: flex-start; font-size: .95rem; cursor: pointer; }
.consent input { width: 18px; height: 18px; margin-top: 3px; accent-color: var(--blue); flex: none; }
.chip-options { display: flex; flex-wrap: wrap; gap: 8px; }
.check-chip { position: relative; cursor: pointer; }
.check-chip input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.check-chip span { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--line-2); background: #fff; font-size: .925rem; font-weight: 500; transition: background-color .12s; }
.check-chip .ico { display: none; }
.check-chip input:checked + span { background: var(--blue-100); border-color: var(--blue); color: var(--navy); font-weight: 600; }
.check-chip input:checked + span .ico { display: inline; }
.check-chip input:focus-visible + span { outline: 3px solid var(--blue); outline-offset: 2px; }
.check-chip:hover span { background: var(--blue-50); }
.radio-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.radio-card { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 14px 16px 14px 46px; border: 1px solid var(--line-2); border-radius: var(--r-sm); background: #fff; cursor: pointer; }
.radio-card input { position: absolute; left: 16px; top: 17px; width: 18px; height: 18px; accent-color: var(--blue); }
.radio-card:hover { background: var(--blue-50); }
.radio-card:has(input:checked) { background: var(--blue-100); border-color: var(--blue); }
.rc-title { font-weight: 600; color: var(--navy); }
.rc-hint { font-size: .875rem; color: var(--muted); }
.toggle { display: flex; align-items: flex-start; gap: 14px; cursor: pointer; }
.toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.toggle-ui { flex: none; width: 46px; height: 26px; border-radius: 999px; background: var(--line-2); position: relative; transition: background-color .15s; margin-top: 1px; }
.toggle-ui::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .2); transition: transform .15s; }
.toggle input:checked + .toggle-ui { background: var(--blue); }
.toggle input:checked + .toggle-ui::after { transform: translateX(20px); }
.toggle input:focus-visible + .toggle-ui { outline: 3px solid var(--blue); outline-offset: 2px; }
.toggle-text { display: flex; flex-direction: column; font-weight: 500; }
.toggle-text small { color: var(--muted); font-weight: 400; font-size: .875rem; }

/* Search inputs & filter bars */
.search-row { display: flex; gap: 12px; margin: 22px 0 18px; }
.search-input { position: relative; flex: 1; display: flex; align-items: center; }
.search-input .ico { position: absolute; left: 14px; color: var(--muted); pointer-events: none; }
.search-input input { width: 100%; min-height: 52px; padding: 0 16px 0 46px; border: 1px solid var(--line-2); border-radius: var(--r-sm); font: inherit; background: #fff; }
.search-input input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(48, 67, 180, .22); }
.search-row .btn { min-height: 52px; padding: 0 24px; }
.search-row.big { max-width: 760px; }
.filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 16px 0 10px; }
.filters .grow { flex: 1 1 260px; }
.filters .search-input input { min-height: 46px; }
.filters select.input { width: auto; min-width: 150px; flex: 0 1 auto; }
.near-toggle { display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 16px; border: 1px solid var(--navy); border-radius: var(--r-xs); background: #fff; color: var(--navy); font-weight: 600; cursor: pointer; }
.near-toggle input { width: 16px; height: 16px; accent-color: var(--blue); }
.near-toggle:has(input:checked) { background: var(--blue-100); }
.seg { display: inline-flex; border: 1px solid var(--blue); border-radius: var(--r-sm); overflow: hidden; background: #fff; }
.seg a { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; color: var(--navy); font-weight: 500; text-decoration: none; }
.seg a + a { border-left: 1px solid var(--blue); }
.seg a[aria-current] { background: var(--blue); color: #fff; }
.seg a:not([aria-current]):hover { background: var(--blue-50); }
.small-seg { margin: 4px 0 16px; }
.small-seg a { padding: 6px 12px; font-size: .9rem; }
.tabs-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 28px 0 4px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.tabs a { padding: 9px 18px; border-radius: 999px; color: var(--navy); font-size: 1.05rem; font-weight: 500; text-decoration: none; display: inline-flex; align-items: center; }
.tabs a:hover { background: var(--blue-50); }
.tabs a[aria-current] { background: var(--blue-100); font-weight: 700; }
.admin-tabs { margin-bottom: 26px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }

/* ---------- Auth ---------- */
.auth-page main { padding-bottom: 0; display: flex; }
.auth-wrap { flex: 1; display: grid; grid-template-columns: 1.1fr 1fr; min-height: calc(100vh - 76px - 62px); }
.auth-intro { background: var(--navy) radial-gradient(circle at 85% 10%, var(--navy-3), transparent 45%); color: #fff; display: flex; flex-direction: column; justify-content: center; gap: 36px; padding: 56px clamp(28px, 6vw, 88px); }
.auth-art { max-width: 540px; border-radius: 18px; overflow: hidden; aspect-ratio: 400 / 260; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .6); outline: 1px solid rgba(255, 255, 255, .12); }
.auth-art .art { width: 100%; height: 100%; display: block; }
.auth-copy { max-width: 560px; }
.auth-copy .kicker { color: var(--peri); }
.auth-copy h1 { color: #fff; font-size: clamp(2.8rem, 5vw, 4.2rem); margin-bottom: 14px; }
.auth-copy p { font-size: 1.1rem; max-width: 46ch; color: rgba(255, 255, 255, .9); }
.auth-panel { display: flex; flex-direction: column; justify-content: center; padding: 48px clamp(24px, 6vw, 88px); max-width: 620px; width: 100%; }
.auth-panel h2 { font-size: 2.2rem; margin-bottom: 18px; }
.auth-links { margin: 16px 0 0; }
.auth-help { color: var(--muted); font-size: .95rem; margin-top: 10px; }
.sample-box { margin-top: 28px; padding: 20px; background: var(--blue-50); border-radius: var(--r); }
.sample-box h3 { font-size: 1.2rem; margin-bottom: 4px; }
.sample-box p { font-size: .9rem; color: var(--muted); }
.sample-list { display: grid; gap: 8px; margin-top: 12px; }
.sample-btn { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--r-sm); background: #fff; text-align: left; cursor: pointer; color: var(--ink); }
.sample-btn:hover { background: var(--blue-100); }
.sample-btn > span:not(.avatar) { display: flex; flex-direction: column; flex: 1; }
.sample-btn small { color: var(--muted); font-size: .85rem; }
.sample-btn .ico { color: var(--blue); }

/* ---------- Home ---------- */
.home-hero { display: grid; grid-template-columns: 1fr 1.05fr; gap: 36px; align-items: center; padding: 36px 0 32px; }
.hero-find h1 { font-size: clamp(2.6rem, 4.8vw, 4rem); line-height: 1.04; }
.explore { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.explore > span { font-weight: 600; color: var(--ink-2); }
.explore .chip { padding: 6px 16px; font-size: .925rem; }
.hero-feature { display: grid; grid-template-columns: 44% 56%; background: var(--navy); color: #fff; border-radius: var(--r); overflow: hidden; min-height: 220px; text-decoration: none !important; box-shadow: var(--shadow); transition: box-shadow .2s, transform .2s; }
.hero-feature:hover { box-shadow: var(--shadow-hover); transform: translateY(-2px); }
.hf-art { clip-path: polygon(0 0, 100% 0, 84% 100%, 0 100%); }
.hf-art .art, .hf-art img { width: 100%; height: 100%; display: block; object-fit: cover; }
.hf-text { padding: 26px 28px 26px 12px; display: flex; flex-direction: column; justify-content: center; }
.hf-text .kicker { color: var(--peri); }
.hf-text h2 { color: #fff; font-size: clamp(1.7rem, 2.4vw, 2.2rem); margin-bottom: 8px; }
.hf-text p { color: rgba(255, 255, 255, .85); margin-bottom: 10px; }
.hf-when { display: flex; align-items: center; gap: 8px; font-size: .95rem; }
.hf-link { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: #fff; margin-top: 4px; }
.home-grid { display: grid; grid-template-columns: 1.55fr 1fr; gap: 24px; }
.pw-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.person-card { display: grid; grid-template-columns: 120px 1fr; gap: 18px; padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: #fff; transition: box-shadow .2s; }
.person-card:hover { box-shadow: var(--shadow-hover); }
.person-card .avatar.xl { width: 120px; height: 150px; font-size: 2.8rem; --sz: 120px; }
.person-card.compact { grid-template-columns: 72px 1fr; }
.person-card.compact .avatar.xl { width: 72px; height: 72px; font-size: 1.7rem; }
.person-photo { display: block; }
.person-body { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.person-body h3 { font-size: 1.5rem; }
.person-body h3 a { color: var(--navy); }
.person-body .role { margin: 0; color: var(--ink-2); font-size: .95rem; }
.person-body .org { color: var(--muted); }
.person-body .why { margin: 0; font-size: .9rem; }
.person-body .why strong { font-weight: 600; }
.person-body .open { margin: 0; display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; background: var(--ok-50); color: var(--ok); border-radius: 999px; font-size: .8rem; font-weight: 600; align-self: flex-start; }
.person-body .link-arrow { margin-top: auto; }
.nearby { display: flex; flex-direction: column; gap: 12px; }
.nearby .section-head { margin-bottom: 4px; }
.nearby-stat { margin: 0; font-size: .95rem; }
.local-event { display: grid; grid-template-columns: 120px 1fr; gap: 14px; align-items: center; text-decoration: none !important; color: var(--ink); }
.le-art { display: block; height: 72px; border-radius: var(--r-xs); overflow: hidden; }
.le-art .art { width: 100%; height: 100%; display: block; }
.le-text { display: flex; flex-direction: column; }
.le-text strong { font-family: var(--serif); font-size: 1.3rem; color: var(--navy); }
.le-text span { color: var(--muted); font-size: .9rem; }
.cu-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.cu-card { display: grid; grid-template-columns: 112px 1fr; gap: 16px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; color: var(--ink); text-decoration: none !important; transition: box-shadow .2s; }
.cu-card:hover { box-shadow: var(--shadow-hover); }
.cu-art { display: block; border-radius: var(--r-xs); overflow: hidden; }
.cu-art .art { width: 100%; height: 100%; display: block; }
.cu-text { display: flex; flex-direction: column; gap: 4px; }
.cu-text strong { font-family: var(--serif); font-size: 1.4rem; color: var(--navy); line-height: 1.1; }
.cu-text > span:not(.link-arrow) { font-size: .95rem; color: var(--ink-2); }
.cu-text small { color: var(--muted); }
.mentor-cta { display: grid; grid-template-columns: auto 1fr; gap: 24px; align-items: center; }
.mc-icon { color: var(--peri); padding-right: 24px; border-right: 1px solid rgba(255, 255, 255, .25); align-self: stretch; display: grid; place-items: center; }
.mentor-cta h2 { font-size: 1.9rem; margin-bottom: 8px; }
.mentor-cta p { color: rgba(255, 255, 255, .85); }
.home-row { display: grid; grid-template-columns: 1.55fr 1fr; gap: 24px; margin-top: 24px; }
.mini-events { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.mini-events li { display: grid; grid-template-columns: 64px 1fr auto; gap: 16px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); }
.mini-events li:first-child { border-top: 0; }
.mini-events .date-tile { width: 64px; height: 64px; }
.mini-events .date-tile .mon { font-size: 1rem; }
.mini-events .date-tile .day { font-size: 1.7rem; }
.mini-events a { font-family: var(--serif); font-size: 1.25rem; font-weight: 600; color: var(--navy); }
.mini-events span { display: block; color: var(--muted); font-size: .9rem; }
.op-tile { display: grid; grid-template-columns: 52px 1fr auto; gap: 14px; align-items: center; padding: 14px; border-radius: 12px; background: var(--blue-50); color: var(--ink); text-decoration: none !important; margin-bottom: 10px; }
.op-tile:hover { background: var(--blue-100); }
.op-tile > span:nth-child(2) { display: flex; flex-direction: column; }
.op-tile strong { color: var(--navy); }
.op-tile span span { color: var(--muted); font-size: .9rem; }
.op-ico { width: 52px; height: 52px; border-radius: 12px; background: #fff; display: grid; place-items: center; color: var(--blue); }
.anniversary-banner { display: grid; grid-template-columns: 1.1fr auto 1fr; gap: 28px; align-items: center; margin-top: 24px; background: #fff; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow); padding-left: 30px; }
.an-text h2 { font-size: clamp(1.8rem, 3vw, 2.5rem); margin-bottom: 4px; }
.an-text p { margin: 0; color: var(--ink-2); font-size: 1.1rem; }
.an-links { display: flex; gap: 18px; align-items: center; }
.an-sep { width: 1px; height: 28px; background: var(--line-2); }
.an-art { display: grid; grid-template-columns: repeat(3, 1fr); height: 130px; clip-path: polygon(14% 0, 100% 0, 100% 100%, 0 100%); }
.an-art .art { width: 100%; height: 100%; display: block; }
.social-bar { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; margin-top: 24px; padding: 18px 24px; background: var(--navy); color: #fff; border-radius: var(--r); }
.social-bar h2 { color: #fff; font-size: 1.4rem; }
.social-bar ul { list-style: none; display: flex; gap: 6px 18px; flex-wrap: wrap; margin: 0; padding: 0; }
.social-bar a, .social-bar .soon { display: inline-flex; align-items: center; gap: 8px; color: #fff; padding: 6px 4px; font-weight: 500; }
.social-bar .soon { color: rgba(255, 255, 255, .7); }
.social-bar .soon small { font-size: .8rem; }

/* Tile map */
.tile-map { margin: 0; }
.tile-map svg { width: 100%; height: auto; display: block; }
.tile-map .tile { fill: #EEECE8; transition: fill .15s; }
.tile-map .tile.l1 { fill: #DDE2FB; }
.tile-map .tile.l2 { fill: var(--peri); }
.tile-map .tile.l3 { fill: #7F8EDB; }
.tile-map .tile.l4 { fill: var(--blue); }
.tile-map .tile.hi { stroke: var(--gold); stroke-width: 3; }
.tile-map text { font: 600 11px var(--sans); fill: var(--navy); pointer-events: none; }
.tile-map .l3 + text, .tile-map .l4 + text { fill: #fff; }
.tile-map g[aria-hidden] text { fill: #A9A39B; }
.tile-map a:hover .tile, .tile-map a:focus .tile { fill: var(--navy); }
.tile-map a:hover text, .tile-map a:focus text { fill: #fff; }
.tile-map figcaption { font-size: .875rem; color: var(--muted); margin-top: 10px; }
.tile-map.small text { font-size: 10px; }

/* ---------- Directory & profiles ---------- */
.results-bar { display: flex; align-items: center; gap: 12px 20px; flex-wrap: wrap; margin: 10px 0 20px; }
.results-count { margin: 0; color: var(--ink-2); }
.active-filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.clear-all { font-size: .9rem; }
.results-tools { margin-left: auto; display: flex; gap: 10px; flex-wrap: wrap; }
.people-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 18px; }
.pager { display: flex; align-items: center; justify-content: center; gap: 18px; margin: 28px 0; }
.map-layout { display: grid; grid-template-columns: 1fr 300px; gap: 24px; }
.state-list ol { list-style: none; margin: 0; padding: 0; max-height: 520px; overflow: auto; }
.state-list a { display: flex; justify-content: space-between; padding: 9px 10px; border-radius: var(--r-xs); color: var(--ink); }
.state-list a:hover { background: var(--blue-50); text-decoration: none; }
.profile-layout { margin-top: 18px; display: grid; gap: 24px; }
.profile-card { display: grid; grid-template-columns: 180px 1fr; gap: 32px; align-items: center; padding: 30px; }
.profile-photo .avatar.xxl { width: 180px; height: 180px; font-size: 4rem; --sz: 180px; }
.profile-main h1 { font-size: clamp(2.2rem, 4vw, 3.2rem); margin-bottom: 6px; }
.profile-role { font-size: 1.15rem; color: var(--ink-2); margin-bottom: 6px; }
.profile-loc { display: flex; align-items: center; gap: 6px; color: var(--muted); }
.profile-main .chips { margin: 10px 0 18px; }
.connect { display: flex; gap: 12px; flex-wrap: wrap; }
.profile-cols { display: grid; grid-template-columns: 1fr 340px; gap: 24px; align-items: start; }
.bio { font-size: 1.1rem; line-height: 1.65; margin: 0; max-width: 64ch; }
.check-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.check-list li { display: flex; gap: 10px; align-items: center; }
.check-list .ico { color: var(--ok); }
.program-list { list-style: none; margin: 0; padding: 0; }
.program-list li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.program-list li:first-child { border-top: 0; }
.similar { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.similar a { display: flex; gap: 12px; align-items: center; padding: 6px; border-radius: var(--r-sm); color: var(--ink); text-decoration: none; }
.similar a:hover { background: var(--blue-50); }
.similar span { display: flex; flex-direction: column; }
.similar small { color: var(--muted); }
.headshot-edit { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; }
.headshot-preview .avatar.xl { width: 120px; height: 120px; font-size: 2.6rem; --sz: 120px; }
.file-btn { cursor: pointer; position: relative; }
.program-rows { display: grid; gap: 10px; }
.program-row { display: grid; grid-template-columns: 1fr 130px; gap: 10px; }

/* ---------- Events ---------- */
.event-hero { display: grid; grid-template-columns: 1fr 1fr; border-radius: var(--r); overflow: hidden; background: var(--navy); color: #fff; box-shadow: var(--shadow); min-height: 260px; }
.eh-art .art, .eh-art img { width: 100%; height: 100%; display: block; object-fit: cover; }
.eh-text { padding: 34px 40px; display: flex; flex-direction: column; justify-content: center; gap: 10px; }
.eh-text h2 { color: #fff; font-size: clamp(2rem, 3.4vw, 2.9rem); }
.eh-sum { font-size: 1.15rem; color: rgba(255, 255, 255, .9); margin: 0; }
.meta { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; color: var(--ink-2); }
.meta li { display: flex; align-items: center; gap: 10px; }
.meta .ico { color: var(--navy); }
.meta-light { color: #fff; }
.meta-light .ico { color: #fff; }
.eh-text .btn-row { margin-top: 10px; gap: 28px; }
.events-layout { display: grid; grid-template-columns: 1fr 360px; gap: 32px; margin-top: 18px; align-items: start; }
.events-main .section-head { margin-bottom: 4px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.event-list { display: grid; }
.event-item { border-bottom: 1px solid var(--line); }
.for-you { padding-top: 14px; }
.event-row { display: grid; grid-template-columns: 90px 220px 1fr auto; gap: 22px; align-items: center; padding: 16px 0; }
.date-tile { width: 90px; height: 90px; border-radius: var(--r-xs); background: var(--blue-100); display: flex; flex-direction: column; align-items: center; justify-content: center; font-family: var(--serif); color: var(--navy); line-height: 1; }
.date-tile .mon { font-size: 1.35rem; font-weight: 600; }
.date-tile .day { font-size: 2.6rem; font-weight: 700; margin-top: 2px; }
.event-thumb { display: block; height: 96px; border-radius: var(--r-xs); overflow: hidden; }
.event-thumb .art, .event-thumb img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform .3s; }
.event-row:hover .event-thumb .art { transform: scale(1.04); }
.event-body h3 { font-size: 1.6rem; margin-bottom: 8px; }
.event-body h3 a { color: var(--navy); }
.event-body .meta { font-size: .95rem; }
.event-cta { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.events-side { display: grid; gap: 0; background: linear-gradient(160deg, var(--blue-100), #D5DBFA); border-radius: var(--r); padding: 6px 26px; }
.side-panel { padding: 22px 0; }
.side-panel + .side-panel { border-top: 1px solid rgba(13, 14, 81, .18); }
.side-panel h2 { font-size: 1.85rem; margin-bottom: 8px; }
.side-panel .chips { margin: 12px 0 16px; }
.prefs-edit > summary { list-style: none; display: inline-flex; }
.prefs-edit > summary::-webkit-details-marker { display: none; }
.prefs-edit[open] > summary { margin-bottom: 14px; }
.prefs-edit form { background: #fff; border-radius: var(--r-sm); padding: 16px; }
.learn-strip { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 0; align-items: center; margin-top: 40px; padding: 24px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.learn-strip h2 { font-size: clamp(1.7rem, 2.6vw, 2.3rem); padding-right: 24px; }
.learn-strip a { display: flex; gap: 18px; align-items: center; padding: 6px 28px; border-left: 1px solid var(--line); color: var(--ink); text-decoration: none !important; }
.learn-strip a > .ico { color: var(--navy); }
.learn-strip a > span { display: flex; flex-direction: column; }
.learn-strip strong { font-family: var(--serif); font-size: 1.35rem; color: var(--navy); }
.learn-strip a:hover strong { color: var(--blue); }
.rec-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; margin-top: 16px; }
.rec-card { padding: 0; overflow: hidden; display: flex; flex-direction: column; color: var(--ink); text-decoration: none !important; }
.rec-art { display: block; height: 160px; }
.rec-art .art { width: 100%; height: 100%; display: block; }
.rec-text { padding: 18px; display: flex; flex-direction: column; gap: 4px; }
.rec-text strong { font-family: var(--serif); font-size: 1.35rem; color: var(--navy); }
.rec-text span { color: var(--muted); font-size: .9rem; }

/* Calendar */
.cal { margin-top: 16px; }
.cal-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.cal-head h2 { min-width: 220px; text-align: center; }
.cal-head .icon-btn { border: 1px solid var(--line-2); background: #fff; color: var(--navy); }
.cal-head .icon-btn:hover { background: var(--blue-50); }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: var(--line); gap: 1px; }
.cal-dow { background: var(--paper); padding: 8px; font-size: .85rem; font-weight: 600; color: var(--muted); text-align: center; }
.cal-cell { background: #fff; min-height: 104px; padding: 8px; display: flex; flex-direction: column; gap: 4px; }
.cal-cell.blank { background: #FBFAF8; }
.cal-cell.today { background: var(--blue-50); }
.cal-cell.today .cal-day { background: var(--navy); color: #fff; }
.cal-day { font-size: .85rem; font-weight: 600; color: var(--ink-2); width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; }
.cal-event { display: block; font-size: .8rem; line-height: 1.3; padding: 5px 7px; border-radius: 6px; background: var(--blue-100); color: var(--navy); font-weight: 500; text-decoration: none !important; overflow: hidden; }
.cal-event:hover { background: var(--peri); }
.cal-event.mine { background: var(--blue); color: #fff; }
.cal-time { display: block; font-size: .72rem; opacity: .8; }
.cal-agenda { margin-top: 22px; }
.cal-agenda h3 { margin-bottom: 4px; }
.cal-agenda .event-row { border-bottom: 1px solid var(--line); }

/* Detail pages */
.event-detail-hero { display: grid; grid-template-columns: 1.05fr 1fr; gap: 36px; align-items: center; margin: 18px 0 28px; }
.edh-art { border-radius: var(--r); overflow: hidden; aspect-ratio: 16 / 10; box-shadow: var(--shadow); }
.edh-art .art, .edh-art img { width: 100%; height: 100%; display: block; object-fit: cover; }
.edh-text h1 { margin: 14px 0 10px; font-size: clamp(2.2rem, 4vw, 3.3rem); }
.edh-text .meta { font-size: 1.05rem; margin-top: 16px; }
.detail-layout { display: grid; grid-template-columns: 1fr 360px; gap: 28px; align-items: start; }
.detail-layout > *, .events-layout > *, .profile-cols > *, .mentor-layout > *, .map-layout > *, .home-grid > *, .home-row > * { min-width: 0; }
.prose p { font-size: 1.075rem; line-height: 1.7; max-width: 68ch; }
.prose .chips { margin-top: 16px; }
.going { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 14px; }
.going a { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: .8rem; color: var(--ink-2); text-decoration: none; }
.going .more { width: 48px; height: 48px; border-radius: 50%; background: var(--blue-100); display: grid; place-items: center; font-weight: 600; color: var(--navy); font-size: .9rem; }
.where p { display: flex; gap: 10px; align-items: flex-start; }
.register-card .when { font-family: var(--serif); font-size: 1.3rem; color: var(--navy); line-height: 1.35; }
.register-card { position: sticky; top: 96px; }
.status-line { display: flex; gap: 8px; align-items: center; font-weight: 600; color: var(--ink-2); }
.status-line.ok { color: var(--ok); }
.join-box { display: flex; gap: 12px; padding: 14px; background: var(--blue-50); border-radius: var(--r-sm); margin: 12px 0; font-size: .9rem; }
.join-box span { display: flex; flex-direction: column; }
.cal-links { display: grid; gap: 8px; margin: 12px 0; }
.host a { word-break: break-all; }

/* ---------- Learning ---------- */
.primer-feature { display: grid; grid-template-columns: 340px 1fr; gap: 0; border-radius: var(--r); overflow: hidden; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow); color: var(--ink); text-decoration: none !important; margin-bottom: 10px; }
.pf-art .art { width: 100%; height: 100%; display: block; min-height: 200px; }
.pf-text { padding: 28px 32px; display: flex; flex-direction: column; gap: 8px; justify-content: center; }
.pf-text strong { font-family: var(--serif); font-size: 2rem; color: var(--navy); line-height: 1.1; }
.res-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 20px; margin-top: 12px; }
.res-card { padding: 0; overflow: hidden; display: flex; flex-direction: column; color: var(--ink); text-decoration: none !important; transition: box-shadow .2s, transform .2s; }
.res-card:hover { box-shadow: var(--shadow-hover); transform: translateY(-2px); }
.res-art { display: block; height: 150px; }
.res-art .art { width: 100%; height: 100%; display: block; }
.res-text { padding: 18px 20px 22px; display: flex; flex-direction: column; gap: 6px; }
.res-kind { font-size: .85rem; font-weight: 600; color: var(--gold-ink); }
.res-text strong { font-family: var(--serif); font-size: 1.45rem; color: var(--navy); line-height: 1.15; }
.res-text > span:last-child { color: var(--ink-2); font-size: .95rem; }
.res-head { padding-top: 20px; }
.res-head h1 { margin-bottom: 8px; }
.player { position: relative; border-radius: var(--r); overflow: hidden; aspect-ratio: 16 / 9; background: var(--navy); }
.player .art { width: 100%; height: 100%; display: block; }
.player p { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 14px 18px; background: rgba(13, 14, 81, .85); color: #fff; font-size: .9rem; }
.doc-box { display: flex; gap: 16px; padding: 22px; border-radius: var(--r); background: var(--blue-50); color: var(--navy); }
.doc-box p { margin: 4px 0 0; color: var(--muted); font-size: .9rem; }
.facts { display: grid; grid-template-columns: auto 1fr; gap: 8px 18px; margin: 0; }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; font-weight: 500; }
.related { list-style: none; margin: 0; padding: 0; }
.related li { border-top: 1px solid var(--line); }
.related li:first-child { border-top: 0; }
.related a, .related li > strong { display: block; padding: 10px 0; }
.related a { color: var(--ink); text-decoration: none; }
.related a:hover strong { color: var(--blue); }
.related strong { display: block; color: var(--navy); }
.related span { display: block; color: var(--muted); font-size: .875rem; }
.related li { display: flex; flex-direction: column; }
.related.big a { padding: 14px 0; }
.related.big strong { font-family: var(--serif); font-size: 1.3rem; }

/* ---------- Mentorship ---------- */
.mentor-hero { display: grid; grid-template-columns: 1.2fr 1fr; margin-top: 30px; background: var(--navy); color: #fff; border-radius: var(--r); overflow: hidden; }
.mh-text { padding: 40px 44px; }
.mh-text h1 { color: #fff; margin-bottom: 12px; }
.mh-text .kicker { color: var(--peri); }
.mh-text .lede { color: rgba(255, 255, 255, .9); margin-bottom: 22px; }
.mh-art .art { width: 100%; height: 100%; display: block; }
.mentor-layout { display: grid; grid-template-columns: 1fr 340px; gap: 28px; margin-top: 28px; align-items: start; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.steps li { display: grid; grid-template-columns: 44px 1fr; gap: 16px; }
.step-n { width: 44px; height: 44px; border-radius: 50%; background: var(--blue-100); color: var(--navy); display: grid; place-items: center; font-family: var(--serif); font-size: 1.4rem; font-weight: 700; }
.steps p { margin: 2px 0 0; color: var(--muted); }
.expect h3 { font-size: 1.25rem; margin-bottom: 10px; }
.stat-card .big-num { font-family: var(--serif); font-size: 4rem; font-weight: 700; color: var(--blue); margin: 0; line-height: 1; }

/* ---------- Opportunities ---------- */
.careers-banner { display: grid; grid-template-columns: 300px 1fr; border-radius: var(--r); overflow: hidden; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow); color: var(--ink); text-decoration: none !important; transition: box-shadow .2s; }
.careers-banner:hover { box-shadow: var(--shadow-hover); }
.cb-art .art { width: 100%; height: 100%; display: block; min-height: 180px; }
.cb-text { padding: 26px 30px; display: flex; flex-direction: column; gap: 6px; justify-content: center; }
.cb-text strong { font-family: var(--serif); font-size: 1.9rem; color: var(--navy); line-height: 1.1; }
.windows { margin: 36px 0; }
.window-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; }
.window-card { display: flex; flex-direction: column; gap: 10px; }
.window-card .badge { align-self: flex-start; }
.window-card h3 { font-size: 1.4rem; }
.window-card p { color: var(--ink-2); font-size: .95rem; flex: 1; }
.window-links { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.contact-mini { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.contact-mini li { display: flex; flex-direction: column; font-size: .925rem; }
.contact-mini strong { color: var(--navy); }

/* ---------- 50th anniversary ---------- */
.anniv-hero { background: var(--navy); color: #fff; }
.anniv-hero-inner { display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; align-items: center; padding-top: 48px; padding-bottom: 48px; }
.ah-text h1 { color: #fff; font-size: clamp(2.6rem, 5vw, 4.2rem); margin-bottom: 14px; }
.ah-text .kicker { color: var(--peri); }
.ah-text .lede { color: rgba(255, 255, 255, .9); margin-bottom: 24px; }
.ah-art { border-radius: var(--r); overflow: hidden; aspect-ratio: 16 / 10; }
.ah-art .art { width: 100%; height: 100%; display: block; }
.quote-reel { background: var(--navy-2); overflow: hidden; padding: 22px 0; }
.reel-track { display: flex; gap: 22px; width: max-content; animation: reel 80s linear infinite; padding-left: 22px; }
.quote-reel:hover .reel-track, .quote-reel:focus-within .reel-track { animation-play-state: paused; }
@keyframes reel { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.reel-item { margin: 0; width: 360px; flex: none; color: #fff; background: rgba(255, 255, 255, .06); border-radius: var(--r-sm); padding: 18px 20px; display: flex; flex-direction: column; gap: 8px; }
.reel-item .ico { color: var(--gold); }
.reel-item blockquote { margin: 0; font-family: var(--serif); font-size: 1.25rem; line-height: 1.35; }
.reel-item figcaption { font-size: .85rem; color: var(--peri); }
.reunion-card { display: grid; grid-template-columns: auto 1fr auto; gap: 24px; align-items: center; margin-top: 32px; }
.rc-text h2 { font-size: 1.7rem; margin-bottom: 4px; }
.rc-text p { margin: 0 0 4px; }
.anniv-section { margin-top: 44px; }
.film { display: grid; grid-template-columns: 1.3fr 1fr; gap: 28px; align-items: center; padding: 18px; }
.film-frame { position: relative; border-radius: var(--r-sm); overflow: hidden; aspect-ratio: 16 / 9; }
.film-frame .art { width: 100%; height: 100%; display: block; }
.film-label { position: absolute; left: 14px; bottom: 14px; background: rgba(255, 255, 255, .92); color: var(--navy); font-weight: 600; font-size: .85rem; padding: 4px 12px; border-radius: 999px; }
.photo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.photo-tile { margin: 0; background: #fff; border-radius: var(--r-sm); overflow: hidden; border: 1px solid var(--line); }
.photo-tile .art, .photo-tile img { width: 100%; aspect-ratio: 4 / 3; height: auto; display: block; object-fit: cover; }
.photo-tile figcaption { padding: 10px 12px; display: flex; flex-direction: column; font-size: .875rem; }
.photo-tile strong { font-family: var(--serif); font-size: 1.1rem; color: var(--navy); }
.photo-tile span { color: var(--muted); }
.story-grid { columns: 3 300px; column-gap: 18px; }
.story { break-inside: avoid; margin-bottom: 18px; }
.story-year { font-weight: 600; color: var(--gold-ink); font-size: .9rem; margin-bottom: 6px; }
.story blockquote { margin: 0 0 10px; font-family: var(--serif); font-size: 1.35rem; line-height: 1.3; color: var(--navy); }
.story p { color: var(--ink-2); }
.story-by { font-weight: 600; margin: 0; }
.share { display: grid; grid-template-columns: 1fr 1.4fr; gap: 32px; align-items: start; }
.share-intro h2 { margin-bottom: 10px; }
.photo-preview { max-width: 240px; border-radius: var(--r-sm); margin-top: 8px; }

/* ---------- Contact ---------- */
.contact-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 18px; }
.contact-card h2 { font-size: 1.5rem; margin-bottom: 2px; }
.contact-card a { display: inline-flex; gap: 8px; align-items: center; word-break: break-all; }
.contact-form { margin-top: 28px; }
.branch { border: 1px solid var(--line); border-radius: var(--r-sm); padding: 18px 20px 20px; display: grid; gap: 16px; }
.branch legend { font-family: var(--serif); font-weight: 700; color: var(--navy); font-size: 1.3rem; padding: 0 6px; }
.js [data-branching] .branch[hidden] { display: none; }
.seg-radio { display: inline-flex; border: 1px solid var(--blue); border-radius: var(--r-sm); overflow: hidden; align-self: flex-start; }
.seg-radio label { position: relative; cursor: pointer; }
.seg-radio input { position: absolute; opacity: 0; inset: 0; }
.seg-radio span { display: block; padding: 8px 16px; color: var(--navy); font-weight: 500; }
.seg-radio label + label span { border-left: 1px solid var(--blue); }
.seg-radio input:checked + span { background: var(--blue); color: #fff; }
.seg-radio input:focus-visible + span { outline: 3px solid var(--blue); outline-offset: -3px; }
.sub { display: grid; gap: 16px; }
.js .sub[hidden] { display: none; }

/* ---------- Search ---------- */
.search-results .section-head h2 { display: flex; align-items: center; }

/* ---------- Admin ---------- */
.admin-head { padding-bottom: 18px; align-items: center; }
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; margin-bottom: 24px; }
.kpi { display: flex; flex-direction: column; gap: 4px; color: var(--ink); text-decoration: none !important; transition: box-shadow .2s; }
.kpi:hover { box-shadow: var(--shadow-hover); }
.kpi-n { font-family: var(--serif); font-size: 2.8rem; font-weight: 700; color: var(--navy); line-height: 1; }
.kpi-l { color: var(--muted); font-size: .9rem; }
.bar-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.bar-list li { display: grid; grid-template-columns: 200px 1fr 40px; gap: 12px; align-items: center; font-size: .95rem; }
.bar { height: 10px; background: var(--blue-50); border-radius: 999px; overflow: hidden; }
.bar span { display: block; height: 100%; background: var(--blue); border-radius: 999px; }
.bar-list strong { text-align: right; }
.table-wrap { overflow-x: auto; margin: 0 -4px; }
.table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.table th { text-align: left; font-weight: 600; color: var(--muted); font-size: .85rem; padding: 10px 12px; border-bottom: 1px solid var(--line-2); white-space: nowrap; }
.table td { padding: 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.table tr:hover td { background: #FCFBF9; }
.table .who { display: flex; gap: 10px; align-items: center; color: var(--ink); }
.inline-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.sub-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; }
.sub-card { display: flex; flex-direction: column; gap: 8px; }
.sub-top { display: flex; justify-content: space-between; gap: 8px; align-items: center; flex-wrap: wrap; }
.sub-card blockquote { margin: 0; font-family: var(--serif); font-size: 1.2rem; color: var(--navy); }
.sub-photo { border-radius: var(--r-sm); max-height: 200px; object-fit: cover; }
.sync-list, .mail-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.sync-item details, .mail details { border-radius: var(--r-sm); }
.sync-item summary, .mail summary { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; cursor: pointer; padding: 10px 12px; border-radius: var(--r-sm); list-style: none; }
.sync-item summary::-webkit-details-marker, .mail summary::-webkit-details-marker { display: none; }
.sync-item summary:hover, .mail summary:hover { background: var(--blue-50); }
.sync-item { border: 1px solid var(--line); border-radius: var(--r-sm); }
.sync-what { flex: 1; }
.sync-what code { font-size: .8rem; background: var(--paper); padding: 2px 6px; border-radius: 4px; }
.payload, .mail-body { margin: 6px 12px 12px; padding: 14px; background: #10123F; color: #E3E7FC; border-radius: var(--r-xs); font-size: .8rem; line-height: 1.5; overflow-x: auto; white-space: pre-wrap; word-break: break-word; }
.mail-body { background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: .925rem; }
.mail { padding: 6px; }
.mail-kind { font-size: .75rem; font-weight: 600; background: var(--blue-100); color: var(--navy); padding: 2px 8px; border-radius: 999px; }
.mail summary strong { flex: 1; }
.map-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.map-list li { display: flex; flex-direction: column; font-size: .9rem; }
.map-list span { color: var(--blue); font-weight: 600; }
.map-list small { color: var(--muted); }

/* ---------- Responsive ---------- */
@media (max-width: 1180px) {
  .main-nav { display: none; }
  .mobile-nav { display: block; }
  .brand-name { font-size: 1.5rem; }
}
@media (max-width: 1060px) {
  .home-hero, .home-grid, .home-row, .events-layout, .detail-layout, .profile-cols, .mentor-layout, .map-layout, .event-detail-hero, .share, .film, .anniv-hero-inner { grid-template-columns: 1fr; }
  .pw-cards, .cu-grid { grid-template-columns: 1fr 1fr; }
  .anniversary-banner { grid-template-columns: 1fr; padding: 24px; }
  .an-art { display: none; }
  .register-card { position: static; }
  .photo-grid { grid-template-columns: repeat(3, 1fr); }
  .learn-strip { grid-template-columns: 1fr 1fr; gap: 16px; }
  .learn-strip h2 { grid-column: 1 / -1; }
  .learn-strip a:first-of-type { border-left: 0; padding-left: 0; }
}
@media (max-width: 760px) {
  :root { --gutter: 16px; }
  body { font-size: 15.5px; }
  .header-inner { height: 64px; gap: 12px; }
  .logo-svg { height: 34px; }
  .brand { gap: 12px; }
  .brand-divider { height: 28px; }
  .brand-name { font-size: 1.3rem; }
  .welcome-hello { border-right: 0; padding-right: 0; width: 100%; }
  .welcome-edit { margin-left: 0; }
  .search-row { flex-direction: column; }
  .hero-feature, .event-hero, .mentor-hero, .careers-banner, .primer-feature, .auth-wrap { grid-template-columns: 1fr; }
  .hf-art { clip-path: none; height: 150px; }
  .hf-text { padding: 22px; }
  .eh-art, .mh-art, .cb-art, .pf-art { height: 170px; }
  .eh-text, .mh-text { padding: 26px 22px; }
  .pw-cards, .cu-grid, .grid-2 { grid-template-columns: 1fr; }
  .person-card { grid-template-columns: 96px 1fr; }
  .person-card .avatar.xl { width: 96px; height: 120px; font-size: 2.2rem; }
  .people-grid { grid-template-columns: 1fr; }
  .cu-card { grid-template-columns: 110px 1fr; }
  .mentor-cta { grid-template-columns: 1fr; }
  .mc-icon { border-right: 0; padding-right: 0; justify-items: start; }
  .card { padding: 20px; }
  .event-row { grid-template-columns: 70px 1fr; gap: 14px; }
  .event-row .date-tile { width: 70px; height: 70px; }
  .event-row .date-tile .day { font-size: 2rem; }
  .event-row .date-tile .mon { font-size: 1.1rem; }
  .event-thumb { display: none; }
  .event-cta { grid-column: 2; align-items: flex-start; }
  .event-body h3 { font-size: 1.35rem; }
  .filters select.input, .near-toggle { flex: 1 1 calc(50% - 10px); min-width: 0; }
  .results-tools { margin-left: 0; }
  .profile-card { grid-template-columns: 1fr; gap: 18px; text-align: left; }
  .profile-photo .avatar.xxl { width: 120px; height: 120px; font-size: 2.6rem; }
  .cal-cell { min-height: 64px; padding: 4px; }
  .cal-event { font-size: 0; padding: 0; height: 8px; border-radius: 4px; }
  .cal-event .cal-time { display: none; }
  .photo-grid { grid-template-columns: 1fr 1fr; }
  .reunion-card { grid-template-columns: 1fr; }
  .learn-strip { grid-template-columns: 1fr; }
  .learn-strip a { border-left: 0; padding: 6px 0; }
  .bar-list li { grid-template-columns: 1fr 1fr 32px; }
  .auth-intro { padding: 32px 20px; gap: 22px; }
  .auth-art { max-width: 100%; }
  .auth-panel { padding: 32px 20px; }
  .tabs a { padding: 8px 12px; font-size: .95rem; }
  .reel-item { width: 280px; }
  .footer-inner { flex-direction: column; align-items: flex-start; }
  .social-bar { padding: 18px; }
  .anniversary-banner { padding: 20px; }
  .an-links { flex-wrap: wrap; }
  .program-row { grid-template-columns: 1fr 100px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
  .quote-reel { overflow-x: auto; }
  .reel-track { width: auto; }
  .reel-item[aria-hidden] { display: none; }
}
@media print {
  .site-header, .site-footer, .welcome-bar, .events-side, .filters { display: none; }
  body { background: #fff; }
}

/* ---------- Photos ---------- */
.art.photo { object-fit: cover; width: 100%; height: 100%; display: block; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.grid-3 > .field, .grid-2 > .field { margin-top: 0; }

/* ---------- Content editor ---------- */
.content-seg { margin-bottom: 22px; }
.editor-head { display: flex; align-items: center; gap: 12px; margin: 10px 0 18px; flex-wrap: wrap; }
.editor-head h2 { margin: 0; }
.editor-layout { display: grid; grid-template-columns: 1fr 340px; gap: 24px; align-items: start; }
.editor-layout > * { min-width: 0; }
.editor-layout h3 { font-size: 1.3rem; }
.image-edit { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.image-preview { width: 260px; aspect-ratio: 16 / 10; border-radius: var(--r-sm); overflow: hidden; background: var(--paper); border: 1px dashed var(--line-2); display: grid; place-items: center; }
.image-preview img { width: 100%; height: 100%; object-fit: cover; }
.image-preview img[hidden] { display: none; }
.no-image { color: var(--muted); font-size: .9rem; }
.row-card legend { font-family: var(--serif); font-weight: 700; color: var(--navy); font-size: 1.2rem; padding: 0 6px; }
fieldset.row-card { border: 1px solid var(--line); }
.past-block { margin-top: 22px; }
.past-block summary { cursor: pointer; font-weight: 600; color: var(--navy); padding: 8px 0; }
.delete-form { margin-top: 16px; }
.danger { color: var(--err) !important; }
.danger:hover { background: var(--err-50) !important; }
.danger-zone h3 { color: var(--err); }

/* ---------- Learning: open on cato.org ---------- */
.open-box { display: grid; grid-template-columns: 1.2fr 1fr; border-radius: var(--r); overflow: hidden; background: var(--navy); color: #fff; }
.open-box .open-photo { width: 100%; height: 100%; min-height: 220px; object-fit: cover; display: block; }
.open-text { padding: 26px; display: flex; flex-direction: column; gap: 6px; justify-content: center; align-items: flex-start; }
.open-text strong { font-family: var(--serif); font-size: 1.6rem; }
.open-text p { color: rgba(255, 255, 255, .8); margin: 0 0 8px; }

/* ---------- Tour ---------- */
.tour { margin-top: 28px; background: linear-gradient(160deg, #fff, var(--blue-50)); }
.tour-head { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; }
.tour-head h2 { margin-bottom: 6px; }
.tour-head p { max-width: 70ch; margin: 0; }
.tour-steps { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.tour-steps a { display: grid; grid-template-columns: 34px 1fr; gap: 10px; padding: 14px; border-radius: var(--r-sm); background: #fff; border: 1px solid var(--line); color: var(--ink); text-decoration: none !important; height: 100%; transition: box-shadow .15s; }
.tour-steps a:hover { box-shadow: var(--shadow-hover); }
.tour-n, .tour-check { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font: 700 1.05rem var(--serif); grid-row: 1; grid-column: 1; }
.tour-n { background: var(--blue-100); color: var(--navy); }
.tour-check { background: var(--ok-50); color: var(--ok); visibility: hidden; }
.tour-steps li.done .tour-check { visibility: visible; }
.tour-steps li.done .tour-n { visibility: hidden; }
.tour-steps li.done a { background: #FBFBF9; }
.tour-text { display: flex; flex-direction: column; gap: 2px; font-size: .9rem; color: var(--muted); }
.tour-text strong { color: var(--navy); font-size: 1rem; }

/* ---------- Feedback ---------- */
.fb-btn { position: fixed; right: 20px; bottom: 20px; z-index: 60; display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px; border-radius: 999px; background: var(--navy); color: #fff; font-weight: 600; box-shadow: 0 10px 28px -10px rgba(13, 14, 81, .6); text-decoration: none !important; }
.fb-btn:hover { background: var(--blue); }
.fb-btn:focus-visible { outline-color: var(--gold); }
.fb-dialog { border: 0; border-radius: var(--r); padding: 22px 24px; width: min(520px, calc(100vw - 32px)); box-shadow: var(--shadow-hover); color: var(--ink); }
.fb-dialog::backdrop { background: rgba(13, 14, 81, .45); }
.fb-dialog-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.fb-dialog-head h2 { font-size: 1.6rem; margin: 0; }
.fb-dialog-head form { margin: 0; }
.fb-tour { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.link-btn { background: none; border: 0; padding: 0; color: var(--blue); font-weight: 600; cursor: pointer; display: inline-flex; gap: 6px; align-items: center; font-size: .9rem; }
.check-chip input[type=radio]:checked + span { background: var(--blue-100); border-color: var(--blue); color: var(--navy); font-weight: 600; }
.fb-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.fb-item { padding: 18px 20px; }
.fb-top { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.fb-msg { margin: 10px 0; white-space: pre-wrap; font-size: 1.02rem; }
.fb-item form { margin: 0; }

/* ---------- Privacy ---------- */
.consent-banner { position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; background: var(--navy); color: #fff; box-shadow: 0 -10px 30px -12px rgba(0, 0, 0, .4); }
.consent-banner .wrap { display: flex; align-items: center; justify-content: space-between; gap: 12px 24px; padding-top: 14px; padding-bottom: 14px; flex-wrap: wrap; }
.consent-banner p { margin: 0; flex: 1 1 420px; }
.consent-banner a { color: var(--peri); }
.prose-page .prose h2 { font-size: 1.45rem; margin: 22px 0 8px; }
.prose-page .prose h2:first-child { margin-top: 0; }
.prose ul { padding-left: 20px; line-height: 1.7; }
.draft-note { display: inline-flex; align-items: center; gap: 6px; background: var(--gold-50); color: var(--gold-ink); padding: 4px 12px; border-radius: 999px; font-size: .85rem; font-weight: 600; }
.optin { border: 1px solid var(--line); border-radius: var(--r-sm); padding: 16px 18px; gap: 12px; }
.optin legend { padding: 0 6px; }
.delete-account { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); }

/* ---------- Page entrance ---------- */
@media (prefers-reduced-motion: no-preference) {
  main > .wrap, main > .anniv { animation: page-in .35s ease-out both; }
  @keyframes page-in { from { transform: translateY(8px); } to { transform: none; } }
}

@media (max-width: 1060px) {
  .editor-layout, .open-box { grid-template-columns: 1fr; }
  .tour-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .grid-3 { grid-template-columns: 1fr; }
  .fb-btn { right: 14px; bottom: 14px; padding: 10px 14px; }
  .fb-btn span { display: none; }
  .tour-head { flex-direction: column; }
  .tour-steps { grid-template-columns: 1fr; }
  .image-preview { width: 100%; }
}
@media print { .fb-btn, .fb-dialog, .consent-banner { display: none; } }
.field label.radio-card { padding: 14px 16px 14px 46px; font-weight: 400; }
.field label.check-chip, .field label.toggle, .field label.consent { padding: 0; font-weight: 500; }
.editor-layout aside .radio-grid { grid-template-columns: 1fr; }

/* ---------- Real photography ---------- */
.auth-art img, .mh-art img, .ah-art > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mh-art { min-height: 280px; }
.ah-art { position: relative; }
.ah-badge { position: absolute; right: 16px; bottom: 16px; width: 132px; aspect-ratio: 400 / 260; border-radius: 10px; overflow: hidden; box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .6); outline: 2px solid rgba(255, 255, 255, .85); }
.ah-badge .art { width: 100%; height: 100%; display: block; }
.photo-tile img { width: 100%; aspect-ratio: 4 / 3; height: auto; display: block; object-fit: cover; }
.va-short { display: none; }
@media (max-width: 760px) {
  .seg { max-width: 100%; overflow-x: auto; }
  .seg a { white-space: nowrap; }
  .va-long { display: none; }
  .va-short { display: inline; }
  .view-as .wrap { gap: 8px; }
  .va-who { flex-basis: 100%; }
  .va-switch select.input { max-width: 170px; }
}

/* ---------- Admin control round ---------- */
.nowrap { white-space: nowrap; }
form.inline { display: inline; }
.announce { font-size: .95rem; }
.announce .wrap { padding-top: 10px; padding-bottom: 10px; }
.announce p { margin: 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.announce a { font-weight: 600; display: inline-flex; align-items: center; gap: 4px; }
.announce-gold { background: var(--gold-50); color: #6A3F02; }
.announce-gold a { color: #6A3F02; }
.announce-navy { background: var(--navy-2); color: #fff; }
.announce-navy a { color: var(--peri); }
.announce-blue { background: var(--blue-100); color: var(--navy); }
.activity-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.activity-item { display: grid; grid-template-columns: 110px 1fr auto; gap: 14px; align-items: center; padding: 12px 14px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-sm); }
.activity-item.undone { opacity: .6; }
.act-when { font-size: .85rem; color: var(--muted); }
.act-what em { font-style: normal; font-weight: 600; color: var(--navy); }
.act-detail { display: block; font-size: .85rem; color: var(--muted); }
.role-explainer { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 0 0 14px; }
.role-explainer > div { background: var(--blue-50); border-radius: var(--r-sm); padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; font-size: .9rem; }
.role-explainer strong { color: var(--navy); font-family: var(--serif); font-size: 1.15rem; }
.role-form select.input { min-height: 36px; padding-top: 4px; padding-bottom: 4px; width: auto; }
.import-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; }
.step-title { display: flex; align-items: center; gap: 12px; }
.step-title h2 { margin: 0; }
.preview-table { max-height: 460px; overflow: auto; }
.preview-table tr.skip td { color: var(--muted); }
.copy-box { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.copy-box .input { flex: 1 1 280px; min-height: 38px; font-size: .9rem; background: var(--paper); }
.link-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.link-top { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.archive-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.archive-list li { display: grid; grid-template-columns: 180px 1fr; gap: 16px; align-items: start; padding: 12px; border: 1px solid var(--line); border-radius: var(--r-sm); }
.archive-list img { width: 180px; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-xs); }
.add-archive { border-top: 1px solid var(--line); padding-top: 18px; }
.person-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; margin-top: 24px; }
.person-actions h3 { font-size: 1.3rem; }
.small-kpis .kpi-n { font-size: 2.2rem; }
.editor-actions { margin-left: auto; }
.editor-actions form { margin: 0; }
.email-attendees { margin-top: 28px; }
.narrow-form { max-width: 640px; }
@media (max-width: 760px) {
  .activity-item { grid-template-columns: 1fr; gap: 4px; }
  .role-explainer { grid-template-columns: 1fr; }
  .archive-list li { grid-template-columns: 1fr; }
  .archive-list img { width: 100%; }
  .editor-actions { margin-left: 0; }
}

/* ---------- Suggestions and course cards ---------- */
.suggest { margin-top: 8px; }
.suggest h2 { font-size: 1.6rem; margin-bottom: 4px; }
.sg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; margin-top: 12px; }
.sg-card { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px; background: #fff; border: 1px solid var(--line); border-radius: var(--r); color: var(--ink); text-decoration: none !important; box-shadow: var(--shadow); transition: box-shadow .2s, transform .2s; }
.sg-card:hover { box-shadow: var(--shadow-hover); transform: translateY(-2px); }
.sg-card strong { font-family: var(--serif); font-size: 1.3rem; color: var(--navy); line-height: 1.15; }
.sg-card > span:not(.sg-kind):not(.link-arrow):not(.sg-meta) { color: var(--ink-2); font-size: .925rem; }
.sg-kind { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; font-weight: 600; color: var(--gold-ink); }
.sg-meta { font-size: .8rem; color: var(--muted); }
.sg-card .link-arrow { margin-top: auto; font-size: .9rem; }
.sg-course { background: linear-gradient(160deg, #fff, var(--blue-50)); }
.course-strip { margin: 20px 0 28px; }