/* The four main colors can be changed here. */
:root {
    --navy: #081b33;
    --ocean: #16445f;
    --sea: #bde5ef;
    --white: #f5fafc;
    --muted: #c1cdd8;
    --line: #355167;
}

* { box-sizing: border-box; }
body { position: relative; margin: 0; background: var(--navy); color: var(--white); font-family: Arial, sans-serif; font-size: 18px; line-height: 1.65; }
a { color: var(--sea); text-underline-offset: 5px; }
a:hover { color: white; }
a:focus-visible { outline: 3px solid var(--sea); outline-offset: 6px; }
h1, h2, h3, h4 { line-height: 1.2; margin: 0 0 18px; }
h1 { font-size: clamp(36px, 5vw, 58px); letter-spacing: -1.5px; }
h2 { font-size: 30px; letter-spacing: -0.5px; }
h3 { font-size: 23px; }
h4 { font-size: 18px; margin-bottom: 10px; }
p { margin: 0 0 20px; }
ul { padding-left: 22px; }
li { margin-bottom: 10px; }
figure { margin: 0; min-width: 0; }
img { display: block; max-width: 100%; width: 100%; height: auto; }
figcaption { color: var(--muted); font-size: 12px; line-height: 1.6; margin-top: 12px; }
figcaption a { color: inherit; }
section[id], article[id] { scroll-margin-top: 24px; }
.container, .header-inner, .footer-inner { width: min(1100px, calc(100% - 64px)); margin: 0 auto; }
.site-header { border-bottom: 1px solid var(--line); }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 24px 0; }
.site-name { color: var(--white); font-size: 23px; font-weight: bold; text-decoration: none; line-height: 1.3; }
.site-name-title { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.site-tagline { display: block; font-size: 12px; font-weight: normal; color: var(--muted); margin-top: 6px; }
/* Three small circles make a bubble trail beside the site name. */
.brand-bubbles { display: inline-flex; align-items: flex-end; gap: 5px; height: 20px; }
.brand-bubbles span { display: block; width: 6px; height: 6px; border: 2px solid var(--sea); border-radius: 50%; }
.brand-bubbles span:nth-child(2) { width: 14px; height: 14px; margin-bottom: 5px; }
.brand-bubbles span:nth-child(3) { width: 10px; height: 10px; margin-bottom: 12px; }
/* These faint bubbles sit in the empty margins on wide screens. */
.background-bubbles { position: absolute; width: 48px; height: 120px; opacity: 0.4; pointer-events: none; }
.background-bubbles span { position: absolute; display: block; border: 2px solid var(--sea); border-radius: 50%; }
.background-bubbles span:nth-child(1) { width: 9px; height: 9px; left: 27px; top: 8px; }
.background-bubbles span:nth-child(2) { width: 21px; height: 21px; left: 5px; top: 42px; }
.background-bubbles span:nth-child(3) { width: 12px; height: 12px; left: 30px; top: 88px; }
.background-bubbles-left { top: 185px; left: 16px; }
.background-bubbles-right { top: 510px; right: 16px; }
nav { display: flex; flex-wrap: wrap; gap: 28px; }
.site-header nav a { color: var(--muted); text-decoration: none; font-size: 16px; padding: 8px 0; border-bottom: 2px solid transparent; }
.site-header nav a:hover, .site-header nav a[aria-current="page"] { color: var(--white); border-color: var(--sea); }
.skip-link { position: absolute; top: -100px; left: 16px; padding: 10px 16px; background: var(--white); color: var(--navy); z-index: 1; }
.skip-link:focus { top: 12px; color: var(--navy); }
.eyebrow { color: var(--sea); font-size: 12px; font-weight: bold; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 20px; }
.lead { color: var(--sea); font-size: 21px; line-height: 1.5; }
.home-intro { display: grid; grid-template-columns: 0.9fr 1.1fr; align-items: center; gap: 56px; padding: 64px 0 54px; }
.home-intro h1 { max-width: 360px; }
.home-intro p:not(.eyebrow):not(.lead) { color: var(--muted); }
.button { display: inline-block; background: var(--sea); color: var(--navy); font-weight: bold; text-decoration: none; padding: 12px 22px; margin-top: 12px; border-radius: 3px; }
.button:hover { background: var(--white); color: var(--navy); }
.button span { margin-left: 20px; }
.home-discover { border-top: 1px solid var(--line); padding-top: 36px; }
.section-heading { margin-bottom: 28px; }
.section-heading p { color: var(--muted); margin-bottom: 0; }
.topic-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.topic-grid article { padding: 4px 0 16px; }
.topic-grid .eyebrow { font-size: 11px; letter-spacing: 0.6px; margin-bottom: 16px; }
.topic-grid p { color: var(--muted); font-size: 16px; }
.topic-grid a { font-size: 16px; }
.verse { border-left: 3px solid var(--sea); background: var(--ocean); padding: 28px 32px; }
.verse blockquote { font-size: 21px; line-height: 1.6; margin: 0 0 20px; }
.verse a, .verse > p:last-child { font-size: 14px; margin-bottom: 0; }
.home-verse { margin: 42px 0 64px; }
.home-verse blockquote { max-width: 740px; }
.page-intro { padding: 54px 0 24px; max-width: 750px; }
.section-nav { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 18px 0; gap: 12px 30px; font-size: 16px; }
.page-section { padding: 48px 0; border-bottom: 1px solid var(--line); }
.ocean-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.ocean-facts article { border: 1px solid var(--line); padding: 24px; }
.ocean-facts article p:not(.source) { color: var(--muted); }
.quiz-list { padding-left: 28px; margin: 28px 0 0; }
.quiz-list li { padding: 22px 0 22px 8px; border-top: 1px solid var(--line); }
.quiz-list li::marker { color: var(--sea); font-weight: bold; }
.quiz-list li > p { font-weight: bold; margin-bottom: 6px; }
.quiz-list details p { color: var(--muted); margin: 12px 0 0; }
.quiz-list summary { width: fit-content; cursor: pointer; color: var(--sea); text-decoration: underline; text-underline-offset: 5px; }
.quiz-list summary:focus-visible { outline: 3px solid var(--sea); outline-offset: 5px; }
.creature-search { margin: 24px 0; }
.creature-search label { display: block; font-weight: bold; margin-bottom: 8px; }
.creature-search-row { display: flex; flex-wrap: wrap; gap: 12px; }
.creature-search input { flex: 1 1 240px; min-width: 0; padding: 10px 12px; border: 2px solid var(--sea); background: var(--white); color: var(--navy); font: inherit; }
.creature-search button { padding: 10px 20px; border: 2px solid var(--sea); background: var(--sea); color: var(--navy); font: inherit; font-weight: bold; cursor: pointer; }
.creature-search input:focus-visible, .creature-search button:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; }
.search-feedback { color: var(--white); }
.ocean-zone { border: 1px solid var(--line); padding: 40px 32px; margin: 28px 0; }
.ocean-zone .depth { font-weight: bold; color: var(--sea); margin-bottom: 8px; }
.zone-facts { margin: 30px 0; }
.zone-facts li { margin-bottom: 16px; }
.zone-photo { max-width: 600px; margin: 28px 0; }
.zone-verse { border-top: 1px solid var(--line); padding-top: 28px; margin-top: 32px; }
.zone-verse > p { color: var(--muted); }
.zone-verse .verse h4 { font-size: 20px; }
.sunlight { background: var(--ocean); }
.twilight { background: #0d2a42; }
.darkness { background: #061426; }
.source { font-size: 13px; color: var(--muted); margin: 20px 0 0; }
.content-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: center; }
.two-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.two-columns p:last-child { margin-bottom: 0; }
.animal { margin-top: 30px; }
.species-nav { gap: 10px 24px; font-size: 15px; padding: 0 0 16px; }
.animal + .animal { margin-top: 40px; padding-top: 40px; border-top: 1px solid var(--line); }
.animal-description h3 { font-size: 28px; margin-bottom: 8px; }
.scientific-name { font-size: 14px; font-style: italic; color: var(--sea); }
.animal-description li { font-size: 16px; color: var(--muted); }
.credits { font-size: 15px; }
.credits li { margin-bottom: 15px; }
.next-page { padding: 30px 0; margin: 0; }
.site-footer { border-top: 1px solid var(--line); padding: 26px 0; }
.footer-inner { display: flex; align-items: center; gap: 28px; font-size: 13px; }
.footer-inner p { margin: 0 auto 0 0; font-weight: bold; }
.footer-inner p span { display: block; color: var(--muted); font-size: 12px; font-weight: normal; }

@media (max-width: 1250px) {
    .background-bubbles { display: none; }
}

@media (max-width: 760px) {
    .container, .header-inner, .footer-inner { width: calc(100% - 40px); }
    .header-inner { align-items: flex-start; flex-direction: column; gap: 18px; padding: 20px 0 12px; }
    .site-header nav { width: 100%; justify-content: space-between; gap: 24px; }
    .home-intro, .content-pair, .topic-grid, .two-columns, .ocean-facts { grid-template-columns: 1fr; gap: 28px; }
    .home-intro { padding: 36px 0; }
    .home-intro h1 { max-width: none; }
    .topic-grid article + article { border-top: 1px solid var(--line); padding-top: 24px; }
    .topic-grid { gap: 16px; }
    .page-intro { padding-top: 36px; }
    .page-section { padding: 34px 0; }
    .ocean-zone { padding: 24px; }
    .verse { padding: 24px; }
    .verse blockquote { font-size: 19px; }
    .footer-inner { flex-wrap: wrap; gap: 16px 24px; }
    .footer-inner p { width: 100%; }
}