@font-face {font-family: "Merriweather"; src: url("../../fonts/merriweather-latin-wght-normal.woff2") format("woff2"); font-weight: 700 900; font-display: swap} @font-face {font-family: "Source Sans 3"; src: url("../../fonts/source-sans-3-latin-wght-normal.woff2") format("woff2"); font-weight: 400 700; font-display: swap} :root {--background: hsl(42 50% 96%); --foreground: hsl(215 51% 15%); --card: hsl(0 0% 100%); --card-foreground: hsl(215 51% 15%); --primary: hsl(211 67% 17%); --primary-foreground: hsl(0 0% 100%); --secondary: hsl(43 39% 91%); --secondary-foreground: hsl(215 51% 15%); --accent: hsl(43 39% 91%); --accent-foreground: hsl(215 51% 15%); --muted: hsl(43 39% 91%); --muted-foreground: hsl(214 16% 36%); --gold: hsl(38 59% 45%); --gold-foreground: hsl(0 0% 100%); --brand-accent: hsl(33 65% 32%); --navy: hsl(211 67% 17%); --navy-foreground: hsl(0 0% 100%); --maroon: hsl(352 61% 30%); --border: hsl(43 33% 83%); --input: hsl(42 28% 79%); --ring: hsl(38 59% 45%); --success: hsl(151 59% 26%); --warning: hsl(33 79% 30%); --destructive: hsl(351 61% 40%); --overlay: rgba(14, 42, 71, 0.62); --shadow: 0 16px 40px -20px rgba(14, 42, 71, 0.28); --shadow-sm: 0 6px 18px -10px rgba(14, 42, 71, 0.22)} .dark {--background: hsl(211 51% 10%); --foreground: hsl(210 42% 95%); --card: hsl(211 48% 14%); --card-foreground: hsl(210 42% 95%); --primary: hsl(207 59% 61%); --primary-foreground: hsl(211 61% 11%); --secondary: hsl(212 48% 12%); --secondary-foreground: hsl(210 42% 95%); --accent: hsl(212 46% 16%); --accent-foreground: hsl(210 42% 95%); --muted: hsl(212 48% 12%); --muted-foreground: hsl(209 20% 72%); --gold: hsl(39 66% 64%); --gold-foreground: hsl(211 61% 11%); --brand-accent: hsl(39 66% 64%); --navy: hsl(211 57% 25%); --navy-foreground: hsl(0 0% 100%); --maroon: hsl(353 58% 71%); --border: hsl(212 35% 21%); --input: hsl(212 32% 24%); --ring: hsl(39 66% 64%); --success: hsl(148 50% 66%); --warning: hsl(35 68% 62%); --destructive: hsl(353 58% 71%); --overlay: rgba(4, 14, 21, 0.68); --shadow: 0 16px 40px -20px rgba(0, 0, 0, 0.6); --shadow-sm: 0 6px 18px -10px rgba(0, 0, 0, 0.5)} * {box-sizing: border-box} *, *::before, *::after {border-radius: 0 !important} html {scroll-behavior: smooth; scroll-padding-top: 6.5rem; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; color-scheme: light} html.dark {color-scheme: dark} body {margin: 0; background: var(--background); color: var(--foreground); font-family: "Source Sans 3", system-ui, sans-serif; font-size: 0.975rem; line-height: 1.7; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; position: relative} h1, h2, h3, h4 {font-family: "Merriweather", Georgia, serif; font-weight: 700; letter-spacing: -0.005em; text-wrap: balance; margin: 0} p {margin: 0; text-wrap: pretty} a {color: inherit} img {max-width: 100%; display: block} button {font-family: inherit} [id] {scroll-margin-top: calc(6.5rem + env(safe-area-inset-top, 0px))} ::selection {background: var(--gold); color: var(--gold-foreground)} :focus-visible {outline: 2px solid var(--ring); outline-offset: 2px} .skip-link {position: absolute; left: -9999px; top: 0; background: var(--primary); color: var(--primary-foreground); padding: 0.75rem 1rem; z-index: 200; font-weight: 600} .skip-link:focus {left: 0.5rem; top: 0.5rem} .wrap {max-width: 1240px; margin: 0 auto; padding-inline: clamp(1rem, 3vw, 1.5rem)} .narrow {max-width: 50rem} .muted {color: var(--muted-foreground)} .small {font-size: 0.85rem} .mt {margin-top: 2rem} .min-w-0 {min-width: 0} .mono {font-family: ui-monospace, "Cascadia Mono", Consolas, monospace} .up {text-transform: uppercase; letter-spacing: 0.02em} .btn {display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0 1.25rem; min-height: 44px; border: 1px solid transparent; font-weight: 600; font-size: 0.875rem; text-decoration: none; cursor: pointer; white-space: nowrap; letter-spacing: 0.01em; transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease} .btn:focus-visible {outline: 2px solid var(--ring); outline-offset: 2px} .btn:disabled {opacity: 0.5; cursor: not-allowed} .btn-primary {background: var(--primary); color: var(--primary-foreground)} .btn-primary:hover {background: var(--primary); background: color-mix(in oklch, var(--primary) 85%, var(--foreground))} .btn-gold {background: var(--gold); color: var(--gold-foreground)} .btn-gold:hover {background: var(--gold); background: color-mix(in oklch, var(--gold) 88%, var(--foreground))} .btn-navy {background: var(--navy); color: var(--navy-foreground)} .btn-navy:hover {background: var(--navy); background: color-mix(in oklch, var(--navy) 88%, var(--foreground))} .btn-outline {border-color: var(--border); background: var(--background); color: var(--foreground)} .btn-outline:hover {background: var(--muted)} .btn-sm {min-height: 40px; padding: 0 1rem; font-size: 0.8rem} .btn-block {width: 100%; justify-content: center} .btn-mt {margin-top: 1.5rem} .btn-danger {color: var(--destructive); border-color: var(--destructive); border-color: color-mix(in oklch, var(--destructive) 40%, transparent)} .btn-danger:hover {background: var(--destructive); background: color-mix(in oklch, var(--destructive) 12%, transparent)} .module-icon {display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex: none; border: 1px solid color-mix(in oklch, var(--gold) 50%, transparent); border: 1px solid var(--gold); background: var(--secondary); color: var(--primary)} .module-icon svg {width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round} .actions-grid .module-icon {font-family: "Merriweather", serif; font-weight: 800; font-size: 0.8rem} .closing-cta {display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem; border: 1px solid color-mix(in oklch, var(--gold) 40%, transparent); border: 1px solid var(--gold); border-top: 4px solid var(--gold); background: var(--navy); color: #fff; padding: 2rem 1.5rem} .closing-cta h2 {font-size: 1.5rem; color: #fff} .closing-cta p {margin-top: 0.5rem; color: rgba(255, 255, 255, 0.8); max-width: 46ch} .closing-cta .btn-gold {flex: none} .util-bar {display: none; background: var(--navy); color: #cfe0f0; font-size: 0.75rem} .util-bar .wrap {display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 2rem; padding-block: 0.4rem; flex-wrap: wrap} .util-office, .util-mail {display: inline-flex; align-items: center; gap: 0.5rem; min-width: 0} .util-office span, .util-mail span {overflow: hidden; text-overflow: ellipsis; white-space: nowrap} .util-bar .icn {width: 14px; height: 14px; flex: none; color: var(--gold)} .util-mail {color: #cfe0f0; text-decoration: none; font-weight: 500} .util-mail:hover {color: var(--gold)} .site-header {position: sticky; top: 0; z-index: 100; background: var(--background); background: color-mix(in srgb, var(--background) 95%, transparent); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border-bottom: 3px solid var(--gold); transition: box-shadow 0.2s ease} .site-header.is-stuck {box-shadow: 0 8px 24px -16px rgba(14, 42, 71, 0.35)} .navrow {display: flex; align-items: center; gap: 0.75rem; min-height: 64px} @media (min-width: 1024px) {.navrow {gap: 1rem; min-height: 72px}} .logo {display: flex; align-items: center; text-decoration: none; flex: none; transition: opacity 0.15s ease} .logo:hover {opacity: 0.9} .logo-img {height: 3.5rem; width: auto; max-width: 240px; object-fit: contain; background: #fff; border: 1px solid var(--border); padding: 2px} @media (min-width: 640px) {.logo-img {height: 4rem; max-width: 320px}} @media (min-width: 1024px) {.logo-img {height: 5rem; max-width: 400px}} .main-nav {margin-inline: auto; display: none} .main-nav ul {display: flex; gap: 2px; list-style: none; margin: 0; padding: 0} .navgroup {position: relative} .navlink {display: flex; align-items: center; gap: 5px; text-decoration: none; font-weight: 600; font-size: 0.875rem; color: var(--foreground); padding: 10px 10px; background: none; border: none; cursor: pointer; border-bottom: 2px solid transparent; transition: border-color 0.16s ease, color 0.16s ease} .navlink:hover {border-color: var(--gold)} .navgroup.open .navlink, .navlink.active {border-color: var(--gold); color: var(--primary)} .navlink .chev {width: 13px; height: 13px; transition: transform 0.18s ease} .navgroup.open .navlink .chev {transform: rotate(180deg)} .dropdown {position: absolute; top: calc(100% + 8px); left: 0; min-width: 14rem; background: var(--card); border: 1px solid var(--border); border-top: 2px solid var(--gold); box-shadow: var(--shadow); padding: 6px; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease; z-index: 120} .navgroup.open .dropdown {opacity: 1; visibility: visible; transform: translateY(0)} .dropdown a {display: block; text-decoration: none; color: var(--foreground); font-size: 0.875rem; font-weight: 500; padding: 10px 12px; border-bottom: 1px solid var(--border); transition: background 0.15s ease, color 0.15s ease} .dropdown a:last-child {border-bottom: none} .dropdown a:hover {background: var(--muted); color: var(--primary)} .navcta {display: flex; align-items: center; gap: 0.5rem; flex: none; margin-left: auto} .header-join {display: none} .burger {display: flex; width: 44px; height: 44px; border: 1px solid var(--border); background: var(--card); align-items: center; justify-content: center; cursor: pointer; padding: 0; flex: none} .burger span {position: relative; width: 18px; height: 2px; background: var(--foreground); display: block; transition: background 0.2s} .burger span::before, .burger span::after {content: ""; position: absolute; left: 0; width: 18px; height: 2px; background: var(--foreground); transition: transform 0.22s ease} .burger span::before {top: -6px} .burger span::after {top: 6px} .burger[aria-expanded="true"] span {background: transparent} .burger[aria-expanded="true"] span::before {transform: translateY(6px) rotate(45deg)} .burger[aria-expanded="true"] span::after {transform: translateY(-6px) rotate(-45deg)} .icn {width: 1.05em; height: 1.05em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none} [data-theme-toggle] {min-height: 44px; width: 44px; padding: 0; justify-content: center} [data-theme-toggle] .icn-moon {display: none} html.dark [data-theme-toggle] .icn-sun {display: none} html.dark [data-theme-toggle] .icn-moon {display: inline} .mobile-backdrop {position: fixed; inset: 0; z-index: 149; background: var(--overlay); opacity: 0; visibility: hidden; transition: opacity 0.22s ease, visibility 0.22s ease} .mobile-backdrop.open {opacity: 1; visibility: visible} .mobile-nav {position: fixed; top: 0; right: 0; bottom: 0; z-index: 150; width: min(23rem, 92vw); background: var(--card); border-left: 1px solid var(--border); border-top: 2px solid var(--gold); box-shadow: var(--shadow); transform: translateX(100%); visibility: hidden; transition: transform 0.25s ease, visibility 0.25s ease; overflow-y: auto; overscroll-behavior: contain} .mobile-nav.open {transform: translateX(0); visibility: visible} .mobile-nav-head {display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.9rem 1rem; border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--card); z-index: 2} .mobile-nav-head .logo-img {height: 2.5rem; max-width: 180px} .m-close {width: 44px; height: 44px; border: 1px solid var(--border); background: var(--background); display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--foreground); flex: none} .m-close:hover {background: var(--muted)} .mobile-nav-body {padding: 0.25rem 1rem 1.25rem; display: flex; flex-direction: column} body.menu-open {overflow: hidden} .mobile-nav-body > a, .mobile-nav-body .m-secondary {display: flex; align-items: center; min-height: 44px; padding: 0 4px; font-weight: 600; text-decoration: none; color: var(--foreground); border-bottom: 1px solid var(--border); font-size: 1rem} .mobile-nav-body .m-secondary {font-weight: 500; color: var(--muted-foreground); font-size: 0.875rem} .macc {border-bottom: 1px solid var(--border)} .macc summary {list-style: none; display: flex; justify-content: space-between; align-items: center; min-height: 44px; padding: 0 4px; font-weight: 700; cursor: pointer; font-size: 1rem} .macc summary::-webkit-details-marker {display: none} .macc summary svg {width: 16px; height: 16px; transition: transform 0.2s ease} .macc[open] summary svg {transform: rotate(180deg)} .macc a {display: flex; align-items: center; min-height: 44px; text-decoration: none; color: var(--muted-foreground); font-weight: 500; padding: 0 12px 0 8px; font-size: 0.875rem; border-top: 1px solid var(--border); border-top: 1px solid color-mix(in oklch, var(--border) 60%, transparent)} .macc a:hover {color: var(--primary)} .mobile-nav-body .panel-label {margin: 1rem 0 0.3rem; padding-top: 0.6rem; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted-foreground); display: flex; align-items: center; gap: 0.5rem} .panel-label::before {content: ""; width: 18px; height: 2px; background: var(--gold)} .mobile-nav-body .m-office {padding: 0.3rem 4px 1rem; font-size: 0.875rem; color: var(--muted-foreground)} .mobile-nav-body .btn {margin-top: 0.75rem; width: 100%; min-height: 48px; background: var(--gold); color: var(--gold-foreground)} .hero {position: relative; overflow: hidden; padding-block: 3rem 0; background: var(--navy)} .hero-bg {position: absolute; inset: 0; z-index: 0} .hero-bg img {width: 100%; height: 100%; object-fit: cover; object-position: 92% center} .hero-bg::after {content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(14, 42, 71, 0.96) 18%, rgba(14, 42, 71, 0.8) 52%, rgba(14, 42, 71, 0.42) 100%)} .hero .wrap {position: relative; z-index: 1} .hero-copy {max-width: 660px; padding-block: 1rem 2.5rem} .hero-copy .eyebrow {color: var(--gold)} .hero h1 {font-size: clamp(1.9rem, 1.2rem + 3.2vw, 3.4rem); line-height: 1.16; color: #fff; margin-bottom: 1rem} .hero h1 .accent {color: var(--gold)} .hero p.lead {font-size: 1.05rem; color: rgba(255, 255, 255, 0.85); line-height: 1.75; max-width: 52ch; margin-bottom: 1.5rem} .hero-cta {display: flex; gap: 0.85rem; flex-wrap: wrap} .hero-cta .btn-outline {border-color: rgba(255, 255, 255, 0.6); background: rgba(255, 255, 255, 0.1); color: #fff} .hero-cta .btn-outline:hover {background: #fff; color: var(--navy)} .hero-ribbon {position: relative; z-index: 1; background: rgba(255, 255, 255, 0.06); border-top: 1px solid rgba(255, 255, 255, 0.15)} .hero-ribbon .wrap {display: grid; grid-template-columns: 1fr} .ribbon-item {display: flex; align-items: center; gap: 0.75rem; padding: 1rem 0; border-top: 1px solid rgba(255, 255, 255, 0.15); text-decoration: none} .ribbon-item:first-child {border-top: none} .ribbon-item .ic {width: 38px; height: 38px; background: rgba(255, 255, 255, 0.08); border: 1px solid var(--gold); color: var(--gold); display: flex; align-items: center; justify-content: center; flex: none} .ribbon-item b {display: block; font-family: "Merriweather", serif; font-size: 0.86rem; color: #fff} .ribbon-item > span:last-child > span {font-size: 0.76rem; color: rgba(255, 255, 255, 0.72)} .ribbon-item:hover b {color: var(--gold)} .section {padding-block: 2.5rem} .alt {background: var(--secondary); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border)} .eyebrow {text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.75rem; font-weight: 600; color: var(--brand-accent); display: inline-flex; align-items: center; gap: 8px; margin-bottom: 0.8rem} .eyebrow::before {content: ""; width: 20px; height: 2px; background: var(--gold); display: inline-block} .section-head {max-width: 640px; margin-bottom: 2rem} .section-head h2 {font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.1rem); color: var(--primary); margin-top: 0.2em} .section-head p:not(.eyebrow) {color: var(--muted-foreground); line-height: 1.7; margin-top: 0.6rem} .row-head {display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; max-width: none} .row-head > div {max-width: 640px} .text-link {color: var(--primary); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; display: inline-flex; align-items: center; gap: 0.4rem} .text-link:hover {color: var(--foreground)} .page-intro {border-bottom: 1px solid var(--border); padding-block: 2.25rem 1.75rem} .page-intro h1 {font-size: clamp(1.9rem, 1.3rem + 2.6vw, 2.9rem); line-height: 1.15} .page-intro .lead {color: var(--muted-foreground); font-size: 1.05rem; margin-top: 0.6rem; max-width: 62ch} .page-grid {display: grid; grid-template-columns: 1.05fr 1fr; gap: 2.5rem; align-items: center} .frame {border: 1px solid var(--border); background: var(--secondary); margin: 0; overflow: hidden} .frame img {width: 100%; height: 100%; object-fit: cover} .frame-16-9 {aspect-ratio: 16 / 9} .frame-4-3 {aspect-ratio: 4 / 3} .frame-2-3 {aspect-ratio: 2 / 3} .anchor-nav {display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.25rem} .anchor-nav a {border: 1px solid var(--border); background: var(--card); color: var(--muted-foreground); padding: 0.55rem 1rem; font-size: 0.85rem; font-weight: 600; text-decoration: none} .anchor-nav a:hover {border-color: var(--primary); color: var(--primary)} .flat-card {background: var(--card); border: 1px solid var(--border); padding: 1.5rem; display: flex; flex-direction: column; gap: 0.75rem; box-shadow: var(--shadow-sm)} .panel-muted {background: var(--secondary)} .flat-card h3 {font-size: 1rem; color: var(--foreground)} .card-link {color: var(--primary); font-weight: 600; font-size: 0.9rem; text-decoration: none; margin-top: auto} .card-link:hover {color: var(--foreground)} .card-actions {display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1rem; align-items: center} .kicker {font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--brand-accent)} .grid-2 {display: grid; grid-template-columns: 1fr; gap: 1.25rem} .grid-4 {display: grid; grid-template-columns: 1fr; gap: 1rem} .actions-grid {margin-top: 1.25rem} .action-card {text-decoration: none; transition: border-color 0.15s ease} .action-card:hover {border-color: var(--primary)} .core-card {text-decoration: none} .core-card:hover {border-color: var(--primary)} .cat-card {border-top: 3px solid var(--maroon)} .about-grid {display: grid; grid-template-columns: 1fr; gap: 2rem; align-items: center} .about-photo {border: 1px solid var(--border); background: var(--secondary); margin: 0; overflow: hidden; aspect-ratio: 4 / 3; position: relative} .about-photo img {width: 100%; height: 100%; object-fit: cover} .about-photo figcaption {position: absolute; bottom: 0; left: 0; right: 0; background: rgba(13, 26, 40, 0.75); color: #dfe9f2; font-size: 0.72rem; padding: 0.4rem 0.75rem} .about-copy h2 {font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.1rem); color: var(--primary); margin-bottom: 0.8rem} .about-copy p {color: var(--muted-foreground); line-height: 1.75; margin-top: 0.8rem} .facts {display: grid; grid-template-columns: 1fr; gap: 0.8rem 1.5rem; margin: 1.25rem 0; border-top: 1px solid var(--border); padding-top: 1.1rem} .facts .full {grid-column: 1 / -1} .facts dt {font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted-foreground)} .facts dd {margin: 0.15rem 0 0; color: var(--foreground); font-weight: 600} .status-row {display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap} .chip {display: inline-block; border: 1px solid var(--border); background: var(--card); color: var(--muted-foreground); padding: 0.15rem 0.6rem; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em} .chip-pending, .chip-upcoming {color: var(--warning); border-color: var(--warning); background: var(--muted); border-color: color-mix(in oklch, var(--warning) 50%, transparent); background: color-mix(in oklch, var(--warning) 10%, transparent)} .chip-approved, .chip-past {color: var(--success); border-color: var(--success); background: var(--muted); border-color: color-mix(in oklch, var(--success) 50%, transparent); background: color-mix(in oklch, var(--success) 10%, transparent)} .chip-rejected {color: var(--destructive); border-color: var(--destructive); background: var(--muted); border-color: color-mix(in oklch, var(--destructive) 50%, transparent); background: color-mix(in oklch, var(--destructive) 10%, transparent)} .people-grid {display: grid; grid-template-columns: 1fr; gap: 1rem} .person-card {background: var(--card); border: 1px solid var(--border); border-top: 3px solid var(--navy); padding: 1.5rem 1.25rem; text-align: center; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; align-items: center; gap: 0.35rem} .person-card-wide {padding: 2rem 1.5rem} .person-card h3 {font-size: 0.96rem} .avatar {width: 58px; height: 58px; margin-bottom: 0.6rem; background: var(--navy); border: 2px solid var(--gold); color: var(--gold); font-family: "Merriweather", serif; font-weight: 800; font-size: 0.95rem; display: flex; align-items: center; justify-content: center} .avatar-img {object-fit: cover; padding: 0 !important; background: var(--secondary)} .avatar-sm {width: 36px; height: 36px; margin: 0; font-size: 0.72rem} .avatar-lg {width: 96px; height: 96px; margin-bottom: 0.75rem} .doc-role {color: var(--maroon); font-size: 0.76rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em} .doc-name {font-weight: 700} .doc-email, .doc-phone {overflow-wrap: anywhere} .committee-cols {display: grid; grid-template-columns: 1fr; gap: 1rem} .committee-mt {margin-top: 1.25rem} .committee-card {background: var(--card); border: 1px solid var(--border); border-top: 3px solid var(--maroon); padding: 1.6rem; display: flex; flex-direction: column; gap: 0.6rem} .committee-card h3 {font-size: 1rem; padding-bottom: 0.7rem; border-bottom: 1px solid var(--border)} .committee-desc {color: var(--muted-foreground); font-size: 0.85rem} .committee-card ul {list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column} .committee-card li {display: flex; justify-content: space-between; gap: 0.75rem; font-size: 0.9rem; padding: 0.65rem 0; border-top: 1px solid var(--border)} .committee-card li b {font-weight: 600; color: var(--foreground)} .committee-card li span {color: var(--muted-foreground); font-size: 0.8rem; white-space: nowrap} .committee-card li.empty {color: var(--muted-foreground)} .committee-card li.with-photo {display: flex; align-items: center; gap: 0.7rem; justify-content: flex-start} .committee-card li.with-photo .p-meta {display: flex; flex-direction: column; min-width: 0} .committee-card li.with-photo .p-meta b {font-weight: 600; color: var(--foreground)} .committee-card li.with-photo .p-meta span {color: var(--muted-foreground); font-size: 0.76rem; white-space: normal} .committee-card li.with-photo .p-meta .p-contact {font-size: 0.68rem; line-height: 1.4; color: var(--muted-foreground)} .group-block {margin-bottom: 2.5rem} .exec-strip {border: 1px solid var(--border); background: var(--card)} .exec-strip-head {display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.75rem; padding: 0.75rem 1.25rem; border-bottom: 1px solid var(--border)} .exec-list {list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr} .exec-list li {display: flex; align-items: center; gap: 0.75rem; min-width: 0; padding: 0.9rem 1.25rem; border-top: 1px solid var(--border)} .exec-list .p-meta {display: flex; flex-direction: column; min-width: 0} .exec-list .p-meta b {font-weight: 600; font-size: 0.9rem; color: var(--foreground); white-space: nowrap; overflow: hidden; text-overflow: ellipsis} .exec-list .p-meta span {color: var(--muted-foreground); font-size: 0.76rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis} .explore-grid {display: grid; grid-template-columns: 1fr; gap: 2.5rem; align-items: start} .explore-intro {position: static} .explore-photos {display: flex; flex-direction: column; gap: 1rem} .frame-card {border: 1px solid var(--border); background: var(--card); padding: 0.5rem; margin: 0} .photo-grid-2 {display: grid; grid-template-columns: 1fr; gap: 1rem} .photo-grid-2 .frame-card:last-child:nth-child(odd) {grid-column: 1 / -1} .photo-grid-2 .frame-card:last-child:nth-child(odd) .frame-4-3 {aspect-ratio: 16 / 9} .cert-strip {background: var(--card); border-bottom: 1px solid var(--border)} .cert-grid {display: grid; grid-template-columns: 1fr; gap: 2.5rem; align-items: center; padding-block: 2.5rem} .cert-mock {border: 1px solid var(--border); border-top: 4px solid var(--gold); background: var(--background); box-shadow: var(--shadow-sm); padding: 1.75rem 1.5rem; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 0.4rem; margin: 0 auto; width: 100%; max-width: 17rem} .cert-logo {width: 100%; max-width: 12rem; height: auto; border: 1px solid var(--border); background: #fff; padding: 3px; margin-bottom: 0.5rem} .cert-badge {display: inline-block; border: 1px solid var(--gold); color: var(--gold); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; padding: 0.3rem 0.9rem} .cert-label {font-size: 0.68rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted-foreground); margin-top: 0.6rem} .cert-no {font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 1.05rem; font-weight: 700; letter-spacing: 0.04em; color: var(--foreground); word-break: break-all} .cert-meta {font-size: 0.72rem; line-height: 1.6; color: var(--muted-foreground); margin-top: 0.35rem} .cert-title {font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.1rem); color: var(--primary); margin: 0.2em 0 0.6rem} .journal-wrap {display: grid; grid-template-columns: 1fr; gap: 2.5rem; align-items: center} .journal-cover {aspect-ratio: 3 / 4; max-width: 15rem; width: 100%; background: linear-gradient(155deg, var(--navy), var(--maroon)); color: #fff; display: flex; flex-direction: column; justify-content: space-between; padding: 1.75rem; box-shadow: var(--shadow); position: relative; overflow: hidden; border: 1px solid var(--gold)} .journal-cover::after {content: ""; position: absolute; width: 180px; height: 180px; border: 1px solid rgba(255, 255, 255, 0.18); top: -50px; right: -50px} .journal-cover .issn {font-size: 0.72rem; opacity: 0.75; letter-spacing: 0.06em} .journal-cover h3 {font-size: 1.15rem; margin-top: 0.5rem} .cover-note {font-size: 0.82rem; opacity: 0.85; position: relative} .journal-list {list-style: none; margin: 1.25rem 0 0; padding: 0; display: flex; flex-direction: column} .journal-list li {border: 1px solid var(--border); border-left: 3px solid var(--gold); background: var(--card)} .journal-list li + li {border-top: none} .journal-list a {display: flex; justify-content: space-between; gap: 1rem; padding: 0.85rem 1.1rem; text-decoration: none; font-size: 0.9rem; color: var(--foreground)} .journal-list a:hover {color: var(--primary)} .journal-list .value {color: var(--muted-foreground); font-size: 0.8rem} .events-grid {display: grid; grid-template-columns: 1fr; gap: 1.25rem} .event-featured {border-top: 3px solid var(--gold); padding: 1.75rem} .event-featured h3 {font-size: 1.3rem} .event-meta {display: flex; flex-wrap: wrap; gap: 0.75rem 1.75rem; color: var(--muted-foreground); font-size: 0.9rem} .meta-date, .meta-venue {display: inline-flex; align-items: center; gap: 0.4rem} .event-desc {color: var(--muted-foreground); font-size: 0.9rem} .past-list {list-style: none; margin: 0; padding: 0} .past-list li {border-top: 1px solid var(--border)} .past-list a {display: flex; justify-content: space-between; gap: 1rem; padding: 0.7rem 0; text-decoration: none; font-size: 0.88rem; color: var(--foreground)} .past-list a:hover {color: var(--primary)} .past-list time {color: var(--muted-foreground); font-size: 0.78rem; flex: none} .event-cards {display: grid; gap: 1.25rem} .event-card {flex-direction: row; gap: 1.25rem; align-items: flex-start} .event-card h3 {font-size: 1.05rem} .event-card h3 a {text-decoration: none} .event-card h3 a:hover {color: var(--primary)} .date-tile {border: 1px solid var(--border); border-top: 3px solid var(--gold); text-align: center; padding: 0.55rem 0.9rem; flex: none; min-width: 64px} .date-tile span {display: block; font-size: 0.66rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--maroon)} .date-tile b {display: block; font-family: "Merriweather", serif; font-size: 1.25rem; color: var(--foreground); line-height: 1.1} .steps {list-style: none; margin: 0; padding: 0; display: grid; gap: 0.9rem} .steps li {display: flex; gap: 1rem; background: var(--card); border: 1px solid var(--border); padding: 1.1rem} .step-num {width: 2rem; height: 2rem; flex: none; background: var(--navy); color: var(--gold); display: flex; align-items: center; justify-content: center; font-family: "Merriweather", serif; font-weight: 800} .steps h3 {font-size: 0.98rem; margin-bottom: 0.2rem} .rule-rows {margin: 0} .rule-rows > div {padding: 0.65rem 0; border-top: 1px solid var(--border)} .rule-rows > div:first-child {border-top: none} .rule-rows dt {font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted-foreground)} .rule-rows dd {margin: 0.15rem 0 0; color: var(--foreground); font-size: 0.92rem} .toolbar {display: flex; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 1.5rem; align-items: center} .toolbar input, .toolbar select, .field input, .field select, .field textarea {padding: 0.7rem 0.9rem; border: 1px solid var(--input); background: var(--card); color: var(--foreground); font-size: 0.92rem; font-family: inherit} .toolbar input:focus, .toolbar select:focus, .field input:focus, .field select:focus, .field textarea:focus {outline: 2px solid var(--ring); outline-offset: 1px} .directory-grid {list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 0.75rem} .member-grid {list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 0.75rem} .member-tile {display: flex; align-items: center; gap: 0.75rem; background: var(--card); border: 1px solid var(--border); padding: 0.85rem} .member-tile .avatar {width: 40px; height: 40px; margin: 0; font-size: 0.8rem} .m-name {font-weight: 600; font-size: 0.9rem} .m-type {color: var(--muted-foreground); font-size: 0.78rem} .m-mail a {color: var(--primary); font-size: 0.78rem; text-decoration: none} .m-mail a:hover {text-decoration: underline} .m-addr {color: var(--muted-foreground); font-size: 0.74rem; line-height: 1.4; margin-top: 0.15rem} .member-card {display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.4rem; background: var(--card); border: 1px solid var(--border); border-top: 3px solid var(--navy); padding: 1.5rem 1.25rem} .member-card .avatar-lg {width: 96px; height: 96px; margin: 0 0 0.5rem; font-size: 1.2rem} .member-card .m-name {font-size: 1rem} .member-card .m-mail a {font-size: 0.85rem} .sr-only {position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0} .breadcrumb {display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem; font-size: 0.8rem; color: var(--muted-foreground); margin-bottom: 0.9rem} .breadcrumb a {color: var(--primary); font-weight: 600; text-decoration: none} .breadcrumb a:hover {text-decoration: underline} .reg-table {width: 100%; border-collapse: collapse; background: var(--card); border: 1px solid var(--border); font-size: 0.92rem} .reg-table th {text-align: left; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted-foreground); padding: 0.7rem 0.85rem; border-bottom: 2px solid var(--border); white-space: nowrap} .reg-table td {padding: 0.7rem 0.85rem; border-bottom: 1px solid var(--border); vertical-align: middle} .reg-table tbody tr {transition: background-color 0.15s ease} .reg-table tbody tr:hover {background: var(--secondary)} .reg-table tbody tr:last-child td {border-bottom: none} .reg-table tr[hidden] {display: none} .col-no {width: 4.5rem} .col-id {width: 10.5rem} .col-type {width: 9rem} .reg-serial {font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-variant-numeric: tabular-nums; color: var(--muted-foreground)} .reg-name {font-weight: 600; overflow-wrap: anywhere} .reg-id-value {font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 0.85rem; letter-spacing: 0.02em; white-space: nowrap} .reg-type {color: var(--muted-foreground); white-space: nowrap} .dir-note {margin-top: 1rem; line-height: 1.6} .role-grid {display: grid; grid-template-columns: 1fr; gap: 1rem} .role-card {position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; gap: 0.35rem; text-align: center; background: var(--card); border: 1px solid var(--border); border-top: 3px solid var(--maroon); padding: 1.75rem 1.5rem; box-shadow: var(--shadow-sm)} .role-card h3 {position: relative; z-index: 1} .role-card .avatar-lg {width: 128px; height: 128px; margin-bottom: 0.85rem; font-size: 1.5rem} .role-motif {position: absolute; top: 0.7rem; right: 0.7rem; width: 2.4rem; height: 2.4rem; color: var(--gold); opacity: 0.45} .admin-review-list {margin: 0.5rem 0 0; padding-left: 1.1rem} .admin-review-list li {font-size: 0.85rem} .doctor-card {background: var(--card); border: 1px solid var(--border); border-top: 3px solid var(--maroon); padding: 1.5rem; display: flex; flex-direction: column; gap: 0.5rem; transition: border-top-color 0.15s ease} .doctor-card:hover {border-top-color: var(--gold)} .doctor-card header {display: flex; align-items: center; gap: 1rem; margin-bottom: 0.5rem} .doctor-card .dc-avatar {width: 56px; height: 56px; margin: 0; font-size: 0.9rem} .doctor-card h3 {font-size: 1.05rem} .doctor-card .doc-role {color: var(--maroon); font-size: 0.76rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em} .dc-rows {display: flex; flex-direction: column; gap: 0.4rem} .dc-row {display: flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; color: var(--foreground); min-width: 0} .dc-row .icn {color: var(--primary); flex: none} .dc-row a {color: var(--primary); text-decoration: none; overflow-wrap: anywhere} .dc-row a:hover {text-decoration: underline} .doctor-card .card-actions {margin-top: 0.5rem} .form-card {background: var(--card); border: 1px solid var(--border); border-top: 3px solid var(--gold); padding: 2rem; box-shadow: var(--shadow-sm)} .form-grid {display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem} .form-grid-top {grid-template-columns: 1fr 1fr} .field {display: flex; flex-direction: column; gap: 0.35rem} .field.full {grid-column: 1 / -1} .field label {font-size: 0.84rem; font-weight: 600} .field textarea {resize: vertical} .checkbox {flex-direction: row; align-items: center; gap: 0.5rem; cursor: pointer} .form-note {font-size: 0.8rem; color: var(--muted-foreground); margin: 1rem 0; line-height: 1.6} .admin-login {max-width: 24rem; margin: 2rem auto; display: flex; flex-direction: column; gap: 1rem} .admin-login h1 {font-size: 1.4rem} .photo-picker {display: flex; flex-direction: column; gap: 0.75rem} .photo-box {display: flex; gap: 1.25rem; align-items: center; border: 1px solid var(--border); background: var(--secondary); padding: 1.25rem; margin-bottom: 1.5rem} .photo-box-preview {width: 96px; height: 96px; flex: none; border: 1px dashed var(--border); background: var(--card); display: flex; align-items: center; justify-content: center; color: var(--muted-foreground); overflow: hidden} .photo-box-preview img {width: 100%; height: 100%; object-fit: cover; display: block} .photo-box-fields {flex: 1; min-width: 0} .photo-label {font-size: 0.84rem; font-weight: 700; display: block; margin-bottom: 0.3rem} .photo-box input[type="file"], .proof-fields input[type="file"] {font-size: 0.85rem; margin-top: 0.4rem} .proof-box {border: 1px solid var(--border); border-left: 4px solid var(--gold); padding: 1.1rem 1.25rem; margin-top: 1.5rem} .proof-box-head {display: flex; flex-direction: column; gap: 0.25rem} .proof-upload {display: flex; gap: 1rem; align-items: flex-start; margin-top: 0.6rem} .proof-icon {width: 42px; height: 42px; flex: none; border: 1px solid var(--border); background: var(--secondary); display: flex; align-items: center; justify-content: center; color: var(--primary)} .proof-fields {flex: 1; min-width: 0} .proof-thumb {max-width: 360px; border: 1px solid var(--border); margin-top: 0.5rem} .payment-banner {border: 1px solid var(--border); border-left: 4px solid var(--gold); background: var(--card); padding: 1.1rem 1.25rem; margin-bottom: 1.25rem} .payment-banner dl {display: grid; grid-template-columns: auto 1fr; gap: 0.35rem 1.25rem; margin: 0.6rem 0} .payment-banner dt {font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted-foreground)} .payment-banner dd {margin: 0; font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-weight: 600; text-transform: uppercase} .payment-banner .kicker {color: var(--gold)} .alert {border: 1px solid var(--border); border-left: 4px solid var(--border); background: var(--card); padding: 0.9rem 1.1rem; margin-bottom: 1rem; font-size: 0.9rem} .alert-warning {border-left-color: var(--warning)} .alert-ok {border-left-color: var(--success)} .alert-error {border-left-color: var(--destructive)} .empty-panel {border: 1px dashed var(--border); background: var(--card); padding: 1.75rem; color: var(--muted-foreground); font-size: 0.9rem; margin-bottom: 1rem} .prose {color: var(--muted-foreground); line-height: 1.75} .prose h2 {color: var(--foreground); font-size: 1.4rem; margin: 2rem 0 0.5rem} .prose p + p {margin-top: 1rem} .prose a {color: var(--primary); font-weight: 600} .reading-list {list-style: none; margin: 0; padding: 0} .reading-list li {display: flex; flex-direction: column; padding: 0.6rem 0; border-bottom: 1px solid var(--border)} .reading-list a {color: var(--primary); font-weight: 600; text-decoration: none} .reading-list a:hover {text-decoration: underline} .map-placeholder {border: 1px dashed var(--border); background: var(--secondary); color: var(--muted-foreground); padding: 2rem; text-align: center; margin-top: 1.25rem; font-size: 0.86rem} .contact-grid {display: grid; grid-template-columns: 1fr; gap: 2.5rem; align-items: start} .office-lines {display: flex; flex-direction: column; font-style: normal; margin: 0.6rem 0 1rem} .contact-list {list-style: none; margin: 0; padding: 0} .contact-list li {padding: 0.7rem 0; border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap: 0.1rem} .contact-list .avatar {margin-bottom: 0.35rem} .contact-list a {color: var(--primary); text-decoration: none} .contact-list a:hover {text-decoration: underline} .update-rows {list-style: none; margin: 0; padding: 0} .update-rows li {border-bottom: 1px solid var(--border)} .update-row {display: grid; grid-template-columns: 1fr; gap: 0.4rem; align-items: start; padding: 0.9rem 1rem; text-decoration: none; background: var(--card); border-left: 2px solid transparent; transition: border-color 0.15s ease, background 0.15s ease} .update-row:hover {border-left-color: var(--gold)} .u-cat {font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold); padding-top: 0.15rem} .u-main b {display: block; font-family: "Merriweather", serif; font-size: 0.95rem; color: var(--foreground)} .u-main b:hover {color: var(--primary)} .u-main span {display: block; color: var(--muted-foreground); font-size: 0.85rem; margin-top: 0.15rem} .update-row time {color: var(--muted-foreground); font-size: 0.8rem; text-align: right} .demo-notice {display: inline-block; border: 1px dashed var(--border); background: var(--card); color: var(--muted-foreground); font-size: 0.78rem; padding: 0.4rem 0.8rem; margin-bottom: 1rem} .new-badge {display: inline-block; border: 1px solid var(--brand-accent); color: var(--brand-accent); font-size: 0.62rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; padding: 0.1rem 0.45rem; vertical-align: middle; animation: new-blink 1.6s ease-in-out infinite} @keyframes new-blink {0%, 100% {opacity: 1} 50% {opacity: 0.35}} .update-docs {margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--border)} .update-docs .card-actions {margin-top: 0.75rem} display: inline-block; border: 1px solid var(--brand-accent); color: var(--brand-accent); font-size: 0.62rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; padding: 0.1rem 0.45rem; vertical-align: middle; animation: new-blink 1.6s ease-in-out infinite} @keyframes new-blink {0%, 100% {opacity: 1} 50% {opacity: 0.35}} .site-footer {background: var(--navy); color: #c3d5e6; border-top: 4px solid var(--gold)} .foot-top {padding-block: 2.5rem 2rem; display: grid; grid-template-columns: 1fr; gap: 2rem} @media (min-width: 640px) {.foot-top {grid-template-columns: 1fr 1fr}} @media (min-width: 1024px) {.foot-top {grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 2.25rem}} .foot-top h4, .foot-contacts h4 {font-family: "Merriweather", serif; font-size: 0.875rem; margin-bottom: 0.9rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--gold)} .foot-brand-col .logo-img {background: #fff} .foot-tagline {color: #a3b9cd; font-size: 0.87rem; line-height: 1.75; margin-top: 0.9rem} .foot-top ul, .foot-contacts ul {list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.55rem} .foot-top nav a, .foot-legal a {text-decoration: none; color: #a3b9cd; font-size: 0.87rem} .foot-top nav a:hover, .foot-legal a:hover {color: var(--gold)} .foot-contacts {display: grid; grid-template-columns: 1fr; gap: 2rem; border-top: 1px solid rgba(255, 255, 255, 0.15); padding-block: 2rem} @media (min-width: 1024px) {.foot-contacts {grid-template-columns: 1.8fr 1fr; gap: 2.5rem}} .doc-contacts {display: grid !important; grid-template-columns: 1fr; gap: 1.5rem !important} @media (min-width: 640px) {.doc-contacts {grid-template-columns: 1fr 1fr}} .doc-contacts li {display: flex; flex-direction: column} .doc-contacts .doc-name {color: #fff; font-weight: 600} .doc-contacts .doc-role {color: #a3b9cd} .doc-contacts a {color: #a3b9cd; text-decoration: none; font-size: 0.85rem} .doc-contacts a:hover {color: var(--gold)} .foot-contacts address {font-style: normal; color: #a3b9cd; font-size: 0.87rem; line-height: 1.7; display: flex; flex-direction: column} .foot-caveat {color: #7d97ae; font-size: 0.78rem; margin-top: 0.75rem} .foot-bottom {display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; border-top: 1px solid rgba(255, 255, 255, 0.15); padding-block: 1.1rem; font-size: 0.8rem; color: #7d97ae} .foot-legal {display: flex; gap: 1.25rem; margin: 0 !important; padding: 0} .admin-auth {min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--secondary); padding: 2.5rem 1rem} .admin-auth-head {display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: 100%; max-width: 28rem; margin-bottom: 1.25rem} .admin-login-main {width: 100%; max-width: 28rem} .admin-auth .admin-login {max-width: none; margin: 0} .admin-auth .form-card {padding: 1.5rem} .admin-auth-foot {margin-top: 1.5rem; text-align: center; font-size: 0.8rem; color: var(--muted-foreground)} .admin-auth-foot a {color: var(--primary); font-weight: 600; text-decoration: none} .admin-auth-foot a:hover {text-decoration: underline} .table-scroll {overflow-x: auto; -webkit-overflow-scrolling: touch} .table-scroll .admin-table {min-width: 42rem} .admin-body {background: var(--secondary)} .admin-shell {min-height: 100vh; display: grid; grid-template-columns: 1fr; background: var(--secondary)} .admin-side {display: none} .admin-main-col {display: flex; flex-direction: column; min-width: 0} .admin-topbar {position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 0.75rem; border-bottom: 1px solid var(--border); background: var(--background); background: color-mix(in srgb, var(--background) 90%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); padding: 0.6rem 1rem} .admin-burger {width: 40px; height: 40px; border: 1px solid var(--border); background: var(--card); display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--foreground); flex: none} .admin-topbar-title {min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.875rem; font-weight: 600} .admin-topbar-actions {display: flex; align-items: center; gap: 0.5rem; margin-left: auto} .admin-topbar-actions [data-theme-toggle] {min-height: 40px; width: 40px} .admin-user {display: none; font-size: 0.875rem; color: var(--muted-foreground)} .admin-main {flex: 1; padding: 1rem} .admin-footer {padding: 1rem; font-size: 0.85rem; color: var(--muted-foreground); border-top: 1px solid var(--border)} .admin-brand {display: flex; align-items: center; gap: 0.75rem; text-decoration: none} .admin-brand-mark {width: 36px; height: 36px; flex: none; display: flex; align-items: center; justify-content: center; background: var(--navy); border: 1px solid var(--gold); color: var(--gold); font-family: "Merriweather", serif; font-weight: 800; font-size: 0.8rem} .admin-brand-text {display: flex; flex-direction: column; line-height: 1.2} .admin-brand-text b {font-family: "Merriweather", serif; font-weight: 700; font-size: 0.875rem; color: var(--foreground)} .admin-brand-text small {font-size: 0.75rem; color: var(--muted-foreground)} .admin-nav {display: flex; flex-direction: column; gap: 2px} .admin-nav-link {display: flex; align-items: center; min-height: 44px; padding: 0 12px; font-size: 0.875rem; font-weight: 600; text-decoration: none; color: var(--foreground); transition: background-color 0.15s ease, color 0.15s ease} .admin-nav-link:hover {background: var(--accent)} .admin-nav-link.active {background: var(--primary); background: color-mix(in oklch, var(--primary) 10%, transparent); color: var(--primary)} .admin-side-foot {margin-top: auto; display: flex; flex-direction: column; gap: 0.5rem; border-top: 1px solid var(--border); padding-top: 1rem} .admin-view-site {display: flex; align-items: center; min-height: 40px; padding: 0 12px; font-size: 0.875rem; font-weight: 500; color: var(--muted-foreground); text-decoration: none} .admin-view-site:hover {background: var(--accent); color: var(--foreground)} .admin-backdrop {position: fixed; inset: 0; z-index: 149; background: var(--overlay); opacity: 0; visibility: hidden; transition: opacity 0.22s ease, visibility 0.22s ease} .admin-backdrop.open {opacity: 1; visibility: visible} .admin-drawer {position: fixed; top: 0; left: 0; bottom: 0; z-index: 150; width: min(18rem, 88vw); background: var(--card); border-right: 1px solid var(--border); border-top: 2px solid var(--gold); box-shadow: var(--shadow); display: flex; flex-direction: column; padding: 1rem; transform: translateX(-100%); visibility: hidden; transition: transform 0.25s ease, visibility 0.25s ease; overflow-y: auto} .admin-drawer.open {transform: translateX(0); visibility: visible} .admin-drawer-head {display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem} .admin-drawer .m-close {width: 40px; height: 40px} .admin-drawer .admin-side-foot {margin-top: 1.5rem} body.admin-menu-open {overflow: hidden} @media (min-width: 1024px) {.admin-shell {grid-template-columns: 16rem 1fr} .admin-side {display: flex; flex-direction: column; gap: 1rem; padding: 1rem; border-right: 1px solid var(--border); background: var(--card)} .admin-side .admin-brand {margin-bottom: 1.5rem} .admin-burger {display: none} .admin-user {display: inline} .admin-main {padding: 1.5rem}} .stat-grid {display: grid; grid-template-columns: 1fr; gap: 0.75rem; margin-bottom: 1.5rem} .stat-card {background: var(--card); border: 1px solid var(--border); border-top: 3px solid var(--gold); padding: 1.25rem} .stat-card b {display: block; font-family: "Merriweather", serif; font-size: 1.6rem; color: var(--primary)} .stat-card span {color: var(--muted-foreground); font-size: 0.82rem} .admin-table {width: 100%; border-collapse: collapse; font-size: 0.88rem} .admin-table th {text-align: left; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted-foreground); border-bottom: 2px solid var(--border); padding: 0.6rem} .admin-table td {padding: 0.6rem; border-bottom: 1px solid var(--border); vertical-align: middle} .admin-table a {color: var(--primary); text-decoration: none; font-weight: 600} .admin-table a:hover {text-decoration: underline} .admin-table form {display: inline-flex; gap: 0.35rem; align-items: center} .admin-table select {padding: 0.3rem; border: 1px solid var(--input); background: var(--card); color: var(--foreground)} @media (min-width: 640px) {.grid-2 {grid-template-columns: 1fr 1fr} .grid-4 {grid-template-columns: repeat(2, 1fr)} .committee-cols {grid-template-columns: repeat(2, 1fr)} .people-grid {grid-template-columns: repeat(2, 1fr)} .exec-list {grid-template-columns: repeat(2, 1fr)} .member-grid, .directory-grid {grid-template-columns: repeat(2, 1fr)} .role-grid {grid-template-columns: repeat(2, minmax(0, 1fr))} .stat-grid {grid-template-columns: repeat(2, 1fr)} .facts {grid-template-columns: 1fr 1fr} .photo-grid-2 {grid-template-columns: 1fr 1fr} .hero-ribbon .wrap {grid-template-columns: repeat(3, 1fr)} .ribbon-item {border-top: none; border-left: 1px solid rgba(255, 255, 255, 0.15); padding: 1.1rem 1.25rem} .ribbon-item:first-child {border-left: none; padding-left: 0} .update-row {grid-template-columns: 10rem 1fr auto; gap: 1.25rem} .update-row time {text-align: right} .form-grid, .form-grid-top {grid-template-columns: 1fr 1fr}} @media (min-width: 1024px) {.util-bar {display: block} .header-join {display: inline-flex} .about-grid, .page-grid, .contact-grid, .journal-wrap, .explore-grid, .cert-grid {grid-template-columns: 1fr 1fr} .explore-grid {grid-template-columns: 1fr 1.1fr} .cert-grid {grid-template-columns: minmax(0, 18rem) 1fr} .journal-wrap {grid-template-columns: minmax(0, 17rem) 1fr} .contact-grid {grid-template-columns: 0.9fr 1.1fr} .about-grid {grid-template-columns: 1fr 1fr} .explore-intro {position: sticky; top: 7rem} .committee-cols, .people-grid {grid-template-columns: repeat(3, 1fr)} .grid-4 {grid-template-columns: repeat(4, 1fr)} .events-grid {grid-template-columns: 1.5fr 1fr} .foot-top {grid-template-columns: 1.3fr 1fr 1fr 1fr} .foot-contacts {grid-template-columns: 1.8fr 1fr} .form-grid, .form-grid-top {grid-template-columns: 1fr 1fr} .directory-grid, .member-grid {grid-template-columns: repeat(3, 1fr)} .stat-grid {grid-template-columns: repeat(4, 1fr)} .exec-list {grid-template-columns: repeat(5, 1fr)}} @media (min-width: 1280px) {.main-nav {display: flex} .burger {display: none} .navcta .header-join {display: inline-flex}} @media (max-width: 1279px) {.main-nav {display: none} .burger {display: flex} .navcta .header-join {display: none}} @media (max-width: 639px) {.wrap {padding-inline: 1rem} .section {padding-block: 2rem} .hero {padding-block: 3rem 0} .hero-cta {gap: 0.6rem} .hero-cta .btn {flex: 1 1 auto; justify-content: center; text-align: center} .foot-top {grid-template-columns: 1fr} .logo-img {height: 3.5rem; max-width: 240px} .form-card {padding: 1.25rem} .event-card {flex-direction: column} .event-meta {gap: 0.4rem 1rem} .admin-table {font-size: 0.8rem} .toolbar input, .toolbar select {flex: 1; min-width: 160px} .photo-box {flex-direction: column; align-items: flex-start} .photo-box-preview {width: 84px; height: 84px} .payment-banner dl {grid-template-columns: 1fr; gap: 0.55rem} .proof-upload {flex-direction: column} .closing-cta {flex-direction: column; align-items: flex-start} .toolbar input, .toolbar select, .field input, .field select, .field textarea, input[type="file"], .admin-table select {font-size: 16px} .reg-table, .reg-table tbody, .reg-table tr, .reg-table td {display: block; width: 100%} .reg-table {border: none; background: transparent} .reg-table thead {position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0} .reg-table tbody tr {background: var(--card); border: 1px solid var(--border); border-left: 3px solid var(--navy); margin-bottom: 0.65rem; padding: 0.4rem 0.85rem} .reg-table td {display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 0.5rem 0; border-bottom: 1px dashed var(--border)} .reg-table tbody tr td:last-child {border-bottom: none} .reg-table td::before {content: attr(data-label); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-foreground); flex: none} .reg-name {text-align: right}} @media (prefers-reduced-motion: reduce) {*, *::before, *::after {animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important}}