/* Public-site adaptation of SLQS Hub src/app/theme.css, verified 2026-09-22.
   Keep the community's public storytelling while sharing the Hub's UI language. */
:root {
  --surface-1: #171a22; --surface-2: #0e1015; --surface-3: #1e222c;
  --surface-4: #252a36; --ink-1: #eef1f6; --ink-2: #c3cad6;
  --ink-3: #939cad; --border-1: #2b3040; --brand-purple: #6657dd;
  --brand-purple-ink: #a99df8; --brand-teal-ink: #63d3e2;
  --brand-purple-tint: #211d3a;
  --paper: var(--surface-2); --ink: var(--ink-1); --navy: var(--ink-1);
  --muted: var(--ink-2); --line: var(--border-1); --blue: var(--brand-teal-ink);
  --header: 88px; color-scheme: dark;
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
}
body { background: var(--surface-2); }
h1, h2, h3, h4, .hv-name, .hv-group-intro h3, .member-copy h2, .member-copy h3,
.community-features h3, .geography-card h3, .expertise-grid h3, .community-totals dd {
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  color: var(--ink-1); font-weight: 600; letter-spacing: -.035em;
}
h1 { font-size: clamp(2.8rem, 4.8vw, 4.6rem); line-height: 1.1; }
h2 { font-size: clamp(2rem, 3.4vw, 3.25rem); line-height: 1.14; }
em { font-style: normal; color: var(--brand-purple-ink); font-weight: inherit; }
.container { width: min(calc(100% - 96px), 1328px); }
:focus-visible { outline-color: var(--brand-teal-ink); }
.skip-link { background: var(--surface-1); color: var(--ink-1); border: 1px solid var(--line); border-radius: 8px; }
.site-header { background: var(--surface-1); border-color: var(--border-1); }
.header-inner { gap: 24px; }
.brand, .brand img { width: 166px; flex-basis: 166px; }
#site-navigation { gap: 12px; }
#site-navigation a { padding: 11px 14px; border-radius: 8px; color: var(--ink-2); font-size: .875rem; letter-spacing: 0; }
#site-navigation a:hover, #site-navigation a[aria-current] { color: var(--ink-1); background: var(--surface-4); }
.menu-toggle { border-color: var(--border-1); border-radius: 8px; }
.button { background: var(--brand-purple); color: #fff; border-radius: 8px; padding: 16px 22px; }
.button:hover { background: #7568e8; }
.text-link { color: var(--brand-purple-ink); font-weight: 600; font-size: .875rem; border-color: var(--border-1); }
.text-link:hover { color: var(--brand-teal-ink); border-color: currentColor; }
.social-links { display: flex; flex-wrap: wrap; gap: 14px 32px; margin-top: 8px; }
.social-links .text-link { gap: 10px; padding-bottom: 0; border-bottom: 0; }
.social-links .text-link:hover span { transform: translate(2px,-2px); }
.footer-main { padding-bottom: 36px; }
@media (max-width: 760px) { .footer-main { padding-bottom: 28px; } }
.hero-actions .text-link { padding: 16px 22px; min-height: 52px; color: #f4f6ff; background: #192638; border: 1px solid #879bb7; border-radius: 8px; justify-content: center; }
.hero-actions .text-link:hover { color: #fff; background: #263950; border-color: #95ddf7; }
.hero-actions .text-link:focus-visible { outline: 3px solid #95ddf7; outline-offset: 4px; }
.hero { background: var(--surface-2); }
.hero-shade { background: linear-gradient(90deg, #0e1015f2, #0e1015b8 52%, #0e101540), linear-gradient(0deg,#0e1015,transparent 65%); }
.hero-content { min-height: 650px; padding-block: 72px; }
.hero h1 em { color: var(--brand-purple-ink); }
.hero-description { color: var(--ink-2); max-width: 520px; }
.hero-orbit::before { background: radial-gradient(ellipse,#171a22ee 0%,#171a22b0 45%,transparent 72%); }
.orbit-ring { border-color: #a99df880; box-shadow: none; }
.orbit-ring::before, .orbit-ring::after { border-color: #a99df840; }
.orbit-copy h2 { font-size: clamp(2rem,3.2vw,3rem); text-shadow: none; }
.orbit-copy h2 em { color: var(--brand-teal-ink); }
.hero .eyebrow, .orbit-label { color: var(--brand-teal-ink); }
.section { padding-block: 76px 88px; }
.section-top { margin-bottom: 46px; }
.section-top .eyebrow, .section-index, .feature-number { color: var(--ink-3); }
.community-features { gap: 24px; margin-top: 48px; }
.community-features article, .geography-card, .expertise-grid article {
  background: var(--surface-1); border: 1px solid var(--border-1); border-radius: 12px; padding: 28px;
}
.community-features h3 { font-size: 1.4rem; }
.feature-number { color: var(--brand-purple-ink); margin-bottom: 24px; }
.community-insights, .advisory-section { background: var(--surface-1); }
.community-totals { border: 0; gap: 16px; }
.community-totals div, .community-totals div:first-child, .community-totals div:last-child {
  background: var(--surface-3); border: 1px solid var(--border-1); border-radius: 12px; padding: 24px;
}
.community-totals dd { font-size: 2.6rem; color: var(--ink-1); }
.community-totals dt { color: var(--ink-2); }
.geography-card { background: var(--surface-2); }
.geography-card h3, .expertise-grid h3 { font-size: 1.7rem; }
.community-map .mapped { fill: var(--brand-purple); }
.community-map .unmapped { fill: var(--surface-4); }
.community-map path { stroke: var(--surface-2); }
.bar-track { background: var(--surface-4); border-radius: 6px; }
.bar-track i { background: var(--brand-purple-ink); border-radius: inherit; }
.coverage, .snapshot-note { color: var(--ink-3); border-color: var(--border-1); }
.expertise-grid { gap: 28px; margin-top: 28px; }
.expertise-grid article { background: var(--surface-2); }
.hv-head { margin-bottom: 44px; }
.hv-group { grid-template-columns: 235px minmax(0,1fr); gap: 40px; padding-block: 32px 40px; }
.hv-group-intro h3 { font-size: 1.35rem; }
.hv-group-index { color: var(--brand-purple-ink); letter-spacing: .08em; }
.hv-cell, .member-card { border: 1px solid var(--border-1); border-radius: 12px; overflow: hidden; background: var(--surface-1); }
.hv-portrait-panel, .portrait-shell, .leaders-grid .portrait-shell, .advisors-grid .portrait-shell {
  background: var(--surface-3); padding: 16px 16px 0; margin: 0; overflow: hidden;
}
.hv-group:not(.hv-group-governance) .hv-portrait-panel { max-width: none; }
.hv-pt { border-radius: 0; aspect-ratio: 4/5; background: var(--surface-3); }
.hv-pt img.hv-photo { object-position: center bottom; }
.hv-ini, .portrait-initials { color: var(--brand-purple-ink); background: var(--surface-3); font-family: inherit; }
.hv-copy, .member-copy { padding: 20px 18px 24px; }
.member-copy h2, .member-copy h3, .position, .organization { overflow-wrap: anywhere; }
.hv-role, .member-role, .leaders-grid .member-role, .advisors-grid .member-role { color: var(--brand-teal-ink); font-size: .65rem; line-height: 1.6; }
.hv-name, .hv-group:not(.hv-group-governance) .hv-name { font-size: 1.15rem; line-height: 1.35; }
.hv-members { gap: 24px; align-items: stretch; }
.advisors-grid { gap: 22px; }
.advisors-grid .member-card { background: var(--surface-2); }
.advisors-grid .member-copy h3 { font-size: 1.1rem; }
.portrait { background: var(--surface-3); }
.detail-intro { background: var(--surface-1); border-bottom: 1px solid var(--line); padding-block: 34px 54px; }
.detail-intro .text-link { margin-bottom: 32px; }
.detail-intro h1 { margin-bottom: 20px; }
.detail-intro .eyebrow { color: var(--brand-teal-ink); }
.detail-intro { position: relative; isolation: isolate; overflow: hidden; padding-block: 44px 80px; }
.detail-scenery, .detail-shade { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.detail-scenery { background: url('/assets/oman-hero.webp') center 58% / cover; transform-origin: center; }
.detail-shade { background: linear-gradient(90deg,#0e1015f5,#0e1015bd 55%,#0e101560),linear-gradient(0deg,#0e1015,transparent); }
.detail-hero-copy > * { animation: detail-arrive .85s ease-out both; }
.detail-hero-copy .eyebrow { animation-delay: .08s; }
.detail-hero-copy h1 { animation-delay: .16s; }
.detail-hero-copy .large-copy { animation-delay: .24s; }
@keyframes detail-arrive { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
@media(prefers-reduced-motion:reduce) {
  .detail-scenery, .detail-hero-copy { transform: none !important; }
  .detail-hero-copy > * { animation: none; }
}
.detail-grid { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 28px; }
.detail-grid .portrait-shell { max-width: none; padding: 22px; }
.detail-grid .member-copy h2 { font-size: 1.35rem; }
.detail-page .hv-section .section-top, .detail-page .hv-head { display: none; }
.detail-page .hv-section { padding-bottom: 24px; }
.detail-page .hv-group:first-child { border-top: 0; padding-top: 0; }
.detail-page .detail-roster:has(.roster-end):not(:has(.detail-grid)) { padding-block: 0 64px; }
.detail-page .roster-end { margin-top: 28px; }
.site-footer { background: var(--surface-1); border-top: 1px solid var(--line); color: var(--ink-1); }
.footer-main h2 { font-size: 2.6rem; }
.footer-main .eyebrow { color: var(--brand-teal-ink); }
.footer-main p:not(.eyebrow), .footer-bottom { color: var(--ink-3); }
.footer-bottom { border-color: var(--line); }
.footer-links a:hover { color: var(--brand-purple-ink); }
@media(max-width:1050px) {
  .container { width: calc(100% - 64px); }
  .hv-group { grid-template-columns: 190px minmax(0,1fr); gap: 28px; }
  .hv-members { gap: 16px; }
  .hv-copy, .member-copy { padding: 16px 12px 20px; }
  .advisors-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
}
@media(max-width:760px) {
  :root { --header: 82px; }
  .container { width: calc(100% - 40px); }
  .brand, .brand img { width: 145px; flex-basis: 145px; }
  .hero-content { min-height: auto; padding-block: 48px 28px; }
  .hero h1 { font-size: clamp(2.4rem,9vw,3.8rem); }
  .hero-orbit { max-width: 270px; }
  .section { padding-block: 52px 60px; }
  .section-top { margin-bottom: 32px; }
  .about-layout h2, .advisory-heading h2 { font-size: 2.2rem; }
  .community-totals { gap: 12px; }
  .community-totals div, .community-totals div:first-child, .community-totals div:last-child { padding: 18px; }
  .community-totals dd { font-size: 2.2rem; }
  .hv-group { grid-template-columns: 1fr; gap: 24px; }
  .hv-members, .hv-group:not(.hv-group-governance) .hv-members { gap: 20px 14px; }
  .hv-name, .hv-group:not(.hv-group-governance) .hv-name { font-size: 1rem; }
  .hv-portrait-panel { padding: 10px 10px 0; }
  .advisors-grid, .detail-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px 14px; }
  .detail-grid .portrait-shell { padding: 10px; }
  .detail-grid .member-copy h2 { font-size: 1.05rem; }
  .detail-intro h1 { font-size: 2.6rem; }
  .footer-main h2 { font-size: 2.2rem; }
  /* Open mobile menu: link text lines up with the brand, tap height preserved. */
  #site-navigation a { padding: 14px 0; }
  /* Comfortable touch targets for the footer link lists. */
  .footer-links { gap: 4px; }
  .footer-links a { display: inline-flex; align-items: center; min-height: 44px; }
  .footer-bottom a { display: inline-flex; align-items: center; min-height: 44px; }
}

/* Scroll-driven SLQS crest: static composition is the no-JS/loading fallback. */
.hero-logo-sequence { position: relative; min-width: 0; text-align: center; }
.crest-life { margin-bottom: 52px; }
.logo-fallback { width: 100%; height: auto; }
.logo-canvas { width: 130%; max-width: none; height: auto; margin-left: -15%; }
.logo-canvas[hidden] { display: none; }
.logo-message h2 { font-size: clamp(2rem,3.2vw,3rem); line-height: 1.1; margin: 16px 0 24px; }
.logo-message h2 em { color: var(--brand-teal-ink); font-style: normal; }
.hero-scroll.sequence-ready { height: 300svh; }
.sequence-ready .hero { position: sticky; top: var(--header); height: calc(100svh - var(--header)); min-height: 0; display: flex; flex-direction: column; justify-content: center; }
.sequence-ready .hero-content { min-height: 0; padding-block: 30px; flex: 1; }
.sequence-ready .hero-bottom { flex: 0 0 auto; }
.sequence-ready .crest-life { display: none; }
.sequence-ready .logo-message { margin-top: 34px; }
[data-hero-stage] { will-change: opacity, transform; }
@media (max-width: 700px) {
  .sequence-ready .hero-content { grid-template-columns: 1fr; gap: 8px; padding-block: 18px 8px; align-content: center; }
  .sequence-ready .hero h1 { font-size: clamp(1.8rem,7vw,2.6rem); margin-bottom: 12px; }
  .sequence-ready .hero-description { font-size: .85rem; margin-bottom: 10px; }
  .sequence-ready .hero-actions { margin-top: 12px; gap: 10px; }
  .sequence-ready .hero-actions a { padding: 12px; min-height: 44px; font-size: .75rem; }
  .sequence-ready .hero-logo-sequence { width: min(100%,340px); margin: auto; }
  .sequence-ready .logo-canvas { width: 110%; margin-left: -5%; }
  .sequence-ready .logo-message { margin-top: 20px; }
  .sequence-ready .logo-message h2 { font-size: 1.55rem; margin: 6px 0; }
  .sequence-ready .logo-message .orbit-label { font-size: .65rem; }
  .sequence-ready .hero-bottom { padding-bottom: 12px; }
}
@media (max-height: 650px) and (min-width: 701px) {
  .sequence-ready .hero h1 { font-size: 2.5rem; }
  .sequence-ready .logo-message h2 { font-size: 1.8rem; }
}

/* Six particle streams travel across the whole hero, behind readable copy. */
.logo-particle-slot { display: none; }
.sequence-ready .logo-particle-slot { display: block; width: 130%; margin-left: -15%; aspect-ratio: 960 / 540; }
.hero .logo-canvas { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; pointer-events: none; }
.sequence-ready .hero-copy, .sequence-ready .logo-message, .sequence-ready .hero-bottom { position: relative; z-index: 2; }
@media (max-width: 700px) {
 .sequence-ready .logo-particle-slot { width: 110%; margin-left: -5%; }
 .hero .logo-canvas { width: 100%; margin: 0; }
}
/* The crest is sized from this box, and the box is 16:9, so a narrow logo column
   leaves the crest height-limited and small -- which is what opens a dead band
   between the hero copy and the scroll bar at mid widths. Widening the box only
   across that range grows the crest back without touching the wide layout. */
@media (min-width: 761px) and (max-width: 1150px) {
 .sequence-ready .logo-particle-slot { width: 165%; margin-left: -32.5%; }
}

/* Block-level img: text-align on the parent cannot centre it, so centre it explicitly. */
.crest-life { position: relative; width: min(55.8%, 288px); aspect-ratio: 1; margin-inline: auto; }
.logo-fallback { width: 100%; height: 100%; object-fit: contain; }
@media (max-width: 700px) and (prefers-reduced-motion: no-preference) {
 .mobile-logo-wait .crest-life { opacity: 0; }
 /* Reveal once, then rest at a steady heartbeat. The heartbeat is listed last so it
    owns `transform` once its delay elapses, exactly as the reveal finishes. */
 .mobile-logo-revealed .crest-life {
  animation: mobile-logo-reveal 1.1s cubic-bezier(.2,.7,.2,1) both,
             mobile-logo-heartbeat 2.1s ease-in-out 1.1s infinite;
 }
}
@keyframes mobile-logo-reveal {
 from { opacity: 0; transform: scale(.78); filter: blur(10px); }
 to { opacity: 1; transform: scale(1); filter: blur(0); }
}
/* Two-beat cardiac rhythm: firm thump, small recoil, softer second thump, then a rest. */
@keyframes mobile-logo-heartbeat {
 0%   { transform: scale(1); }
 8%   { transform: scale(1.065); }
 16%  { transform: scale(.995); }
 24%  { transform: scale(1.042); }
 34%  { transform: scale(1); }
 100% { transform: scale(1); }
}
@media (max-width: 700px) and (max-height: 740px) {
 .sequence-ready .logo-particle-slot { width: 88%; margin-inline: auto; }
 .sequence-ready .hero-content { padding-top: 20px; gap: 4px; }
 .sequence-ready .hero-bottom { padding-top: 8px; }
}

.developer-credit { display: flex; justify-content: center; align-items: center; gap: 16px; padding-block: 18px 28px; font-size: .8rem; }
.developer-credit a { display: inline-flex; background: #fff; border-radius: 5px; padding: 8px 12px; }
.developer-credit img { width: 120px; height: auto; }
.developer-credit a:focus-visible { outline: 3px solid #62dbe8; outline-offset: 4px; }

/* The three words close the crest statement, so they sit with it rather than in
   the footer bar, and the whole block drops a little for comfortable reading. */
.hero-logo-sequence { margin-top: 34px; }
@media (max-width: 760px) {
 .hero-logo-sequence { margin-top: 20px; }
}
@media (max-width: 700px) {
 .sequence-ready .hero-logo-sequence { margin-top: 20px; }
}

/* Living sand: synthesised motes drifting on a loop that closes exactly, because
   each mote fades to nothing at both ends of its own staggered lifetime. Nothing
   is drawn over the mark, so the sharp SVG crest still sits on top and only the
   air around it moves. Built by scripts/build_crest_dust.py.

   Geometry — the loop is 560x520 and its crest occupies x 98..461, y 81..425;
   the crest SVG is a 584 square whose artwork occupies x 20..575, y 20..563.
   Those two boxes give the size and offset below, which keep the sand registered
   to the crest at every width. */
.crest-dust { position: absolute; left: -22.28%; top: -18.51%; width: 146.86%; height: 140.8%; pointer-events: none; }
.crest-dust img { width: 100%; height: 100%; object-fit: fill; }
/* During the scroll sequence the crest is painted on the canvas, so the sand is
   lifted out of the flow and pinned to wherever that painted crest landed. */
.crest-dust.is-floating { position: absolute; z-index: 1; opacity: 0; transition: opacity .3s linear; }

/* Muttrah sunset by Sidath Jayasingha as the hero backdrop. Positioned right
   so the Riyam burner clears the crest; shaded lightly and mostly on the left
   so the sky keeps its colour, with the copy lifted by shadow rather than by
   darkening the photograph. */
.hero-scenery { background-image: url('/assets/oman-hero-sunset.webp'); background-position: 85% center; filter: brightness(1.3) saturate(1.12); }
.hero-shade { background: linear-gradient(90deg, #0e101599, #0e101540 40%, #0e101500 68%), linear-gradient(0deg,#0e1015,transparent 30%); }
@media (max-width: 760px) {
 .hero-scenery { background-position: 62% center; }
 .hero-shade { background: linear-gradient(180deg, #0e101573, #0e101526 55%, #0e1015 100%); }
}
.hero h1 { color: #fff; text-shadow: 0 2px 4px #0e101599, 0 6px 28px #0e1015b3; }
.hero h1 em { color: #c4b5ff; text-shadow: 0 2px 4px #0e101599, 0 0 26px #7c5cff80, 0 6px 28px #0e1015b3; }
.hero-description { color: #f1f3f8; text-shadow: 0 1px 3px #0e1015cc, 0 2px 14px #0e1015b3; }

/* The crest caption sits over the brightest part of the water, so it gets its
   own soft pool of shade, and its small labels are brightened and weighted up. */
.hero .logo-message { isolation: isolate; text-shadow: 0 1px 3px #0e1015e6, 0 2px 18px #0e1015cc; }
.hero .logo-message::before { content: ""; position: absolute; inset: -18% -14%; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, #0e1015b3, #0e101566 55%, #0e101500); }
.hero .logo-message h2 { color: #fff; }
.hero .logo-message h2 em { color: #8ff0fb; }
.hero .logo-message .orbit-label { color: #aef4fc; font-weight: 700; }

/* Insights hands over to the committee: close the stacked gap under the globe
   and fade its lighter surface into the page instead of stopping on a hard edge. */
.community-insights { padding-bottom: 24px;
  background: linear-gradient(to bottom, var(--surface-1) calc(100% - 240px), var(--surface-2)); }
.community-insights .globe-journey { margin-bottom: 0; }
@media (max-width: 760px) {
 .community-insights { padding-bottom: 12px;
   background: linear-gradient(to bottom, var(--surface-1) calc(100% - 160px), var(--surface-2)); }
}
/* The sticky globe stage used to reserve a full viewport and centre the globe
   inside it, which left ~170px of empty stage under the globe once it unstuck.
   Size the stage to its content and centre it with the sticky offset instead. */
@media (min-width: 761px) {
 .community-insights .globe-ready:not(.globe-reduced) .globe-stage { min-height: 0; top: max(100px, calc(50svh - 250px)); }
}