:root { color-scheme: dark; --harbor: #0b1c24; --harbor2: #10242e; --slip: #16323c; --foam: #e8f1f4; --mist: #8aa4ae; --gold: #e8b86d; --line: #2a4a56; }
* { box-sizing: border-box; }
html { background: var(--harbor); -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100dvh; color: var(--foam); font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", "PingFang SC", "Noto Sans SC", sans-serif; background: radial-gradient(120% 80% at 80% 0%, #17394a 0%, var(--harbor) 55%) fixed; }

/* Same bar as the Catch Log app: sticky, 48 px, one line, orange pill on the current page. */
.bar { position: sticky; top: 0; z-index: 20; border-bottom: 1px solid color-mix(in oklab, var(--line) 80%, transparent); background: color-mix(in oklab, var(--harbor) 85%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.bar-in { display: flex; align-items: center; height: 48px; padding: 0 12px; }
@media (min-width: 640px) { .bar-in { padding: 0 16px; } }
.fish-nav { display: flex; gap: 0; min-width: 0; overflow-x: auto; scrollbar-width: none; align-items: center; }
.fish-nav::-webkit-scrollbar { display: none; }
@media (min-width: 640px) { .fish-nav { gap: 4px; } }
.fish-nav-link { padding: 4px 4px; border-radius: 999px; color: var(--mist); text-decoration: none; font-size: clamp(11px, calc((100vw - 120px) / 22.6), 14px); line-height: 24px; white-space: nowrap; }
@media (max-width: 379px) { .fish-nav-link { padding: 4px 3px; } }
@media (min-width: 640px) { .fish-nav-link { padding: 4px 12px; font-size: 0.875rem; } }
.fish-nav-link:hover { color: var(--foam); }
.fish-nav-link.active { background: #fb923c; color: #111; font-weight: 600; }

/* The biggin.fish logo (0074): slim row on phones, in the bar from 768 px; same as the other apps. */
.brand-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 40px; padding: 0 12px; }
.brand-row a, .brand-inline { display: flex; align-items: center; }
.brand-row img { height: 28px; width: auto; }
.brand-inline img { height: 30px; width: auto; }
.brand-tag { font-size: 10px; letter-spacing: .28em; text-transform: uppercase; color: var(--gold); }
.brand-inline { display: none; flex: 0 0 auto; margin-right: 12px; }
@media (min-width: 768px) { .brand-row { display: none; } .brand-inline { display: flex; } }

main { max-width: 52rem; margin: 0 auto; padding: 1.25rem 1rem 2rem; }
h1 { font-family: Georgia, "Times New Roman", serif; font-weight: 400; font-size: 2rem; line-height: 1.1; margin: .5rem 0 1.25rem; }
@media (min-width: 640px) { h1 { font-size: 2.6rem; } main { padding-top: 2rem; } }
h2 { font-size: .75rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); font-weight: 500; margin: 0 0 .6rem; }
section + section { margin-top: 2.2rem; }
.lede { color: var(--mist); margin: 0 0 1rem; max-width: 34rem; }
.cards { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; }
.card { padding: 1rem 1rem .9rem; border-radius: 1.1rem; border: 1px solid var(--line); background: var(--harbor2); }
.card h3 { font-family: Georgia, "Times New Roman", serif; font-weight: 400; font-size: 1.35rem; line-height: 1.2; margin: .5rem 0 .25rem; }
.card[lang="zh-Hans"] h3 { font-family: "Songti SC", "Noto Serif SC", "PingFang SC", serif; letter-spacing: .02em; }
.desc { margin: 0 0 .8rem; color: var(--mist); font-size: .95rem; line-height: 1.45; }
.meta { display: flex; align-items: center; gap: .6rem; font-size: .8rem; color: var(--mist); }
.chip { padding: .1rem .6rem; border-radius: 999px; border: 1px solid color-mix(in oklab, var(--gold) 55%, transparent); color: var(--gold); font-size: .75rem; line-height: 1.4; }
.len { font-variant-numeric: tabular-nums; }
audio { display: block; width: 100%; height: 44px; }
.soon { padding: 1.1rem 1rem; border-radius: 1.1rem; border: 1px dashed var(--line); color: var(--mist); text-align: center; }
footer { max-width: 52rem; margin: 0 auto; padding: 0 1rem 2.5rem; display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; font-size: .85rem; }
footer a { color: var(--mist); text-decoration: none; }
footer a:hover { color: var(--foam); text-decoration: underline; }