/* Bioluminescence page components. Global tokens, fonts, typography, navbar pill,
   footer and skeleton utilities live in ocean-theme.css. */
.bioluminescence .bio-hero { --bio-focus: var(--bio-mint); }
.bioluminescence.cms-edit-mode .cms-editable:focus-visible { outline-color: hsl(var(--bio-focus)); }
.bioluminescence .bio-visual:focus-visible { outline-offset: -4px; }
.bio-container { max-width: 1536px; margin-inline: auto; padding-inline: var(--bio-gutter); }
.bio-hero { position: relative; isolation: isolate; background: hsl(var(--bio-night)); color: hsl(var(--bio-white)); }
.bio-hero-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 48%; z-index: -2; }
.bio-hero::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, hsl(var(--bio-night) / .83), hsl(var(--bio-night) / .05) 85%), linear-gradient(0deg, hsl(var(--bio-night)), transparent 45%); }
.bio-hero-inner { min-height: 800px; display: flex; align-items: center; position: relative; padding-block: 150px 100px; }
.bio-hero-copy { max-width: 740px; }
.bio-eyebrow { display: block; font: 11px/1.7 ui-monospace, monospace; text-transform: uppercase; letter-spacing: .15em; color: hsl(var(--bio-accent)); margin-bottom: 20px; }
.bio-hero .bio-eyebrow { color: hsl(var(--bio-mint)); }
.bio-signal { display: inline-block; width: 7px; height: 7px; margin-right: 10px; border-radius: 50%; background: hsl(var(--bio-mint)); box-shadow: 0 0 18px hsl(var(--bio-mint) / .65); }
.bio-hero h1 { font: 600 clamp(58px, 7.6vw, 116px)/1 var(--bio-display); letter-spacing: -.015em; margin: 0; overflow-wrap: anywhere; }
.bio-hero h1 .cms-text { white-space: pre-line; }
.bio-hero h1 em { display: block; font-style: normal; color: hsl(var(--bio-mint)); }
.bio-intro { max-width: 440px; color: hsl(197 20% 80%); font-size: 17px; line-height: 1.7; margin-top: 26px; }
.bio-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.bio-button { min-height: 48px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 14px; padding: 12px 22px; border: 1px solid hsl(var(--bio-accent)); border-radius: 8px; background: hsl(var(--bio-accent)); color: hsl(var(--bio-on-accent)); font-size: 14px; font-weight: 600; text-decoration: none; cursor: pointer; transition: box-shadow .2s; }
.bio-button:hover { box-shadow: 0 0 24px hsl(var(--bio-accent) / .15); }
.bio-button-secondary { background: hsl(var(--bio-surface)); color: hsl(var(--bio-ink)); border-color: hsl(var(--bio-line)); }
.bio-hero .bio-button { --bio-accent: var(--bio-mint); --bio-on-accent: var(--bio-night); }
.bio-hero .bio-button-secondary { background: hsl(var(--bio-night) / .7); color: hsl(var(--bio-white)); border-color: hsl(207 23% 50%); }
.bio-meta { position: absolute; right: var(--bio-gutter); bottom: 40px; text-align: right; font: 10px/1.9 ui-monospace, monospace; letter-spacing: .06em; color: hsl(197 20% 80%); }
.bio-meta strong { display: block; color: hsl(var(--bio-mint)); font-weight: 500; }
.bio-discovery { padding-block: 56px 0; }
#discover { scroll-margin-top: 112px; }
.bio-search-row { display: grid; grid-template-columns: 1fr 1.2fr; gap: 40px; align-items: center; padding-bottom: 32px; border-bottom: 1px solid hsl(var(--bio-line)); }
.bio-search-row .bio-eyebrow { margin-bottom: 8px; }
.bioluminescence h2 { font: 600 clamp(34px, 3.4vw, 48px)/1.1 var(--bio-display); margin: 0; }
.bio-search { display: flex; align-items: center; gap: 8px; padding: 8px; border: 1px solid hsl(var(--bio-line)); border-radius: var(--bio-radius); background: hsl(var(--bio-surface)); }
.bioluminescence .bio-search input { width: 100%; min-width: 0; min-height: 48px; padding: 12px; border: 0; background: transparent; color: hsl(var(--bio-ink)); font-size: 16px; }
.bioluminescence input::placeholder { color: hsl(var(--bio-muted)); opacity: 1; }
.bio-filter-bar { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: end; margin-top: 28px; }
.bio-filters { display: flex; flex-wrap: wrap; gap: 8px; max-width: 100%; }
.bio-chip { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; padding: 9px 16px; border: 1px solid hsl(var(--bio-line)); border-radius: 40px; background: transparent; color: hsl(var(--bio-muted)); font-size: 13px; cursor: pointer; text-decoration: none; }
.bio-chip[aria-pressed='true'], .bio-chip:hover { border-color: hsl(var(--bio-accent)); color: hsl(var(--bio-accent)); background: hsl(var(--bio-accent) / .08); }
.bio-tools { display: flex; flex-wrap: wrap; gap: 16px; margin-left: auto; }
.bio-tools label { display: grid; gap: 6px; font-size: 12px; color: hsl(var(--bio-muted)); }
.bioluminescence .bio-tools select { min-height: 44px; width: auto; max-width: 100%; padding: 8px 28px 8px 12px; border: 1px solid hsl(var(--bio-line)); background: hsl(var(--bio-surface)); color: hsl(var(--bio-ink)); border-radius: 8px; font-size: 14px; }
.bio-status { min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 12px; font: 12px/1.5 ui-monospace, monospace; color: hsl(var(--bio-muted)); }
.bio-reset { color: hsl(var(--bio-accent)); display: inline-flex; align-items: center; min-height: 44px; text-underline-offset: 4px; }
.bio-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.bio-card { position: relative; min-width: 0; overflow: hidden; border: 1px solid hsl(var(--bio-line)); border-radius: var(--bio-radius); background: hsl(var(--bio-surface)); transition: border-color .2s; }
.bio-card:hover { border-color: hsl(var(--bio-accent)); }
.bio-visual { position: relative; display: block; width: 100%; aspect-ratio: 16/10; background: hsl(var(--bio-skeleton)); border: 0; padding: 0; cursor: zoom-in; }
.bio-visual img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bio-kind { position: absolute; bottom: 12px; left: 12px; border-radius: 5px; padding: 5px 10px; background: hsl(var(--bio-night) / .92); color: hsl(var(--bio-white)); font: 11px/1.5 ui-monospace, monospace; }
.bio-save { position: absolute; top: 12px; right: 12px; display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid hsl(207 23% 50%); border-radius: 50%; background: hsl(var(--bio-night) / .94); color: hsl(var(--bio-mint)); cursor: pointer; }
.bio-save svg { width: 19px; height: 19px; }
.bio-save[aria-pressed='true'] { background: hsl(var(--bio-mint)); color: hsl(var(--bio-night)); }
.bio-save[aria-pressed='true'] svg { fill: currentColor; }
.bio-caption { padding: 20px; height: 142px; }
.bio-caption h3 { font-size: 18px; font-weight: 600; line-height: 1.4; margin: 0 0 10px; }
.bio-caption h3 a { min-height: 50px; color: hsl(var(--bio-ink)); text-decoration: none; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; }
.bio-caption p { font-size: 12px; line-height: 1.6; color: hsl(var(--bio-muted)); margin: 0; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.bio-skeleton { display: none; position: absolute; inset: 0; pointer-events: none; background: hsl(var(--bio-surface)); border-radius: inherit; overflow: hidden; }
.bio-skeleton-image { aspect-ratio: 16/10; background: hsl(var(--bio-skeleton)); }
.bio-skeleton-copy { padding: 20px; height: 142px; }
.bio-skeleton-copy::before, .bio-skeleton-copy::after { content: ''; display: block; height: 18px; width: 80%; border-radius: 6px; background: hsl(var(--bio-skeleton)); margin-bottom: 16px; }
.bio-skeleton-copy::after { width: 55%; height: 12px; }
.bio-skeleton::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 25%, hsl(var(--bio-ink) / .09) 45%, transparent 65%); transform: translateX(-100%); animation: bio-shimmer 1.6s infinite; }
.js .bio-card:not(.is-ready):not(:focus-within) .bio-skeleton, .is-fetching .bio-card .bio-skeleton { display: block; }
@keyframes bio-shimmer { to { transform: translateX(100%); } }
.bio-empty { grid-column: 1/-1; min-height: 380px; display: flex; flex-direction: column; justify-content: center; align-items: start; gap: 20px; padding: 32px; border: 1px dashed hsl(var(--bio-line)); border-radius: var(--bio-radius); }
.bio-empty p { color: hsl(var(--bio-muted)); }
.bio-error { padding: 16px; margin-bottom: 16px; border: 1px solid hsl(var(--bio-accent)); border-radius: 8px; }
.bio-pagination { min-height: 92px; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px; font-size: 13px; color: hsl(var(--bio-muted)); }
.bio-callout { display: flex; align-items: center; justify-content: space-between; gap: 32px; padding: 40px; margin-top: 32px; border: 1px solid hsl(var(--bio-line)); border-radius: var(--bio-radius); background: linear-gradient(110deg, hsl(var(--bio-accent) / .06), transparent); }
.bio-callout p { color: hsl(var(--bio-muted)); margin: 16px 0 0; max-width: 520px; line-height: 1.7; }
.bio-callout .bio-eyebrow { margin-bottom: 12px; }
.bioluminescence #navbar { top: 22px; }
.bio-brand { display: flex; align-items: center; gap: 16px; }
.bio-brand img { width: 126px; height: 30px; }
.bio-brand small { font: 9px/1.5 ui-monospace, monospace; letter-spacing: .06em; text-transform: uppercase; border-left: 1px solid hsl(207 23% 42%); padding-left: 16px; }
.bioluminescence .bn { display: none !important; }
.bioluminescence .ta-dropdown { background: hsl(var(--bio-surface)); border-color: hsl(var(--bio-line)); }
.bioluminescence .ta-item { border-color: hsl(var(--bio-line)); }
.bioluminescence .ta-item-label { color: hsl(var(--bio-ink)); }
.bioluminescence :is(.ta-item-sub, .ta-empty) { color: hsl(var(--bio-muted)); }
.bioluminescence .ta-item:hover, .bioluminescence .ta-item[aria-selected='true'] { background: hsl(var(--bio-accent) / .12); }
@media (max-width: 1279px) { .bio-brand small { display: none; } }
@media (max-width: 1050px) {
    .bio-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
    .bio-hero-inner { min-height: 760px; }
    .bio-search-row { gap: 24px; }
    .bioluminescence #primaryLinks { background: hsl(var(--bio-night)); border-color: hsl(207 23% 36%); }
}
@media (max-width: 767px) {
    .bio-hero-inner { min-height: 730px; padding-top: 140px; padding-bottom: 128px; }
    .bio-hero-image { object-position: 65% center; opacity: .68; }
    .bio-hero h1 { font-size: clamp(58px, 12vw, 88px); }
    .bio-intro { font-size: 16px; max-width: 360px; }
    .bio-meta { font-size: 9px; }
    .bio-eyebrow { font-size: 10px; letter-spacing: .1em; }
    .bio-search-row { grid-template-columns: 1fr; }
    .bio-discovery { padding-top: 36px; }
    .bio-tools { margin-left: 0; width: 100%; }
    .bio-callout { flex-direction: column; align-items: start; padding: 24px; }
    .bio-caption { padding: 16px; }
}
@media (max-width: 480px) {
    .bio-grid { grid-template-columns: minmax(0, 1fr); }
    .bio-search { flex-wrap: wrap; }
    .bio-search input { flex-basis: 100%; }
    .bio-search > button { width: 100%; }
    .bio-tools { gap: 12px; }
    .bio-tools label { flex: 1; min-width: 0; }
    .bio-tools select { width: 100% !important; }
    .bio-status { font-size: 11px; }
    .bio-brand img { width: 104px; }
    .bioluminescence #navbar .nav-actions { gap: 0; }
    .bio-hero .bio-actions > * { width: 100%; }
    .bio-hero-inner { min-height: 790px; }
}
@media (prefers-reduced-motion: reduce) { .bio-skeleton::after { animation: none; transform: none; background: none; } }