@charset "UTF-8";
:root{--ink:#103c4b;--teal:#086c73;--deep:#075461;--mint:#e5f5ed;--sand:#fff9ec;--yellow:#ffd966;--line:#d8e5df;--radius:24px;--body:'Avenir Next',Avenir,'Segoe UI',sans-serif;--display:'Trebuchet MS','Arial Rounded MT Bold',sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--sand);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.7}button,a,input{touch-action:manipulation}button{font:inherit}a{color:var(--teal);text-underline-offset:5px}a:hover{text-decoration-thickness:2px}button:focus-visible,a:focus-visible{outline:3px solid #b54720;outline-offset:5px}img{display:block;max-width:100%;height:auto}figure{margin:0}h1,h2,h3{font-family:var(--display);font-weight:800;line-height:1.09;letter-spacing:-.045em;margin:0 0 22px}h1{font-size:clamp(2.7rem,5.4vw,5.3rem)}h2{font-size:clamp(2rem,3.5vw,3.45rem)}h3{font-size:1.65rem;letter-spacing:-.025em}p{margin:0 0 20px}p:last-child{margin-bottom:0}.wrap{max-width:1220px;margin:auto;padding-left:40px;padding-right:40px}.section{padding-top:74px;padding-bottom:74px}.eyebrow{font-size:.8rem;font-weight:800;letter-spacing:.13em;color:var(--teal);margin-bottom:18px}.lede{font-size:1.18rem;line-height:1.75;max-width:700px}.small{font-size:.875rem}.topline{text-align:center;background:var(--deep);color:#fff;padding:9px 20px;font-size:.8rem;letter-spacing:.045em}.site-header{display:flex;align-items:center;justify-content:space-between;padding:19px 40px;max-width:1440px;margin:auto;gap:25px}.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font-family:var(--display);font-weight:900;font-size:1.65rem;line-height:1;letter-spacing:-.04em;flex-shrink:0}.brand img{width:59px;height:59px;border-radius:50%;object-fit:cover}.brand small{display:block;font-family:var(--body);font-size:.7rem;letter-spacing:.08em;line-height:1.8}.site-header nav ul{list-style:none;display:flex;align-items:center;gap:25px;margin:0;padding:0}.site-header nav a{font-size:.9rem;text-decoration:none;font-weight:650;color:var(--ink)}.site-header nav a:hover{color:var(--teal);text-decoration:underline}.menu-toggle{display:none}.hero-scene{max-width:1440px;margin:auto;padding:0 22px}.hero-art img{width:100%;border-radius:26px;aspect-ratio:2.6;object-fit:cover}.welcome{display:flex;align-items:center;justify-content:space-between;gap:35px;padding-top:42px;padding-bottom:53px;border-bottom:1px solid var(--line)}.welcome h1{font-size:clamp(2.6rem,4.5vw,4.3rem);margin-bottom:15px}.welcome .lede{font-size:1.04rem;max-width:650px}.welcome .wp-block-buttons{flex-shrink:0;max-width:230px;display:grid;gap:12px}.wp-block-buttons{display:flex;flex-wrap:wrap;gap:14px;margin-top:24px}.wp-block-button__link,.button{border:2px solid var(--teal);background:var(--teal);color:white;display:inline-flex;align-items:center;justify-content:center;padding:13px 24px;border-radius:100px;text-decoration:none;font-size:.94rem;font-weight:750;line-height:1.5;cursor:pointer;min-height:50px}.wp-block-button__link:hover,.button:hover{background:var(--deep);border-color:var(--deep);color:white;transform:translateY(-1px)}.is-style-outline .wp-block-button__link,.button.outline{background:transparent;color:var(--teal)}.is-style-outline .wp-block-button__link:hover,.button.outline:hover{background:var(--mint)}.light .wp-block-button__link{background:var(--yellow);border-color:var(--yellow);color:var(--ink)}.card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px;margin-top:32px}.card-grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}.feature-card{border:1px solid var(--line);border-radius:var(--radius);background:white;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 5px 0 #0c596107}.feature-card>.wp-block-image{background:#f3f5ed}.feature-card>.wp-block-image img{width:100%;aspect-ratio:1.45;object-fit:cover}.feature-card>.wp-block-image img[src*="colouring"]{object-fit:contain;background:#fff;padding:20px}.card-body{padding:27px;flex:1;display:flex;flex-direction:column}.card-body>p:last-child{margin-top:auto;padding-top:15px}.card-body p{font-size:1rem}.card-body h3{margin-bottom:13px}.text-link{font-weight:750;font-size:.95rem;text-decoration:none}.text-link span{margin-left:6px}.ocean-band{background:var(--deep);color:white}.ocean-band .eyebrow{color:var(--yellow)}.split{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:65px}.split>.wp-block-image img{border-radius:var(--radius);width:100%;max-height:520px;object-fit:cover}.split.reverse>.wp-block-image{order:2}.ocean-band .split{grid-template-columns:.8fr 1.2fr}.ocean-band .split img{aspect-ratio:1.45;object-fit:cover}.purpose{text-align:center;max-width:960px}.purpose .lede{margin-left:auto;margin-right:auto}.purpose .wp-block-buttons{justify-content:center}.page-intro{padding-top:64px;padding-bottom:44px}.page-intro .lede{max-width:700px}.page-intro+.section{padding-top:25px}.characters-grid .wp-block-image img{aspect-ratio:1.25;padding:22px}.character-detail>.wp-block-image img{object-fit:contain;background:white;max-height:630px;padding:28px}.quote-box{background:#ffecac;border-radius:var(--radius);padding:30px;margin:28px 0}.character-line{font-weight:750;font-size:1.2rem}.info-box{padding:40px;background:var(--mint);border:1px solid #bddbcb;border-radius:var(--radius)}.reading-width{max-width:880px}.reading-width>h2{margin-top:44px}.reading-width>h2:first-child{margin-top:0}.reading-width.article>figure{margin-bottom:40px}.reading-width.article>figure img{border-radius:24px;max-height:480px;width:100%;object-fit:cover}.reading-width.article h2{font-size:2rem}.discovery-game{border:1px solid #bbd5d1;border-radius:24px;overflow:hidden;background:#e5f5ed;margin-top:28px}.game-top{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:18px 24px}.game-count{font-weight:750}.plain-button{border:0;background:transparent;color:var(--ink);font-weight:700;cursor:pointer;text-decoration:underline;text-underline-offset:4px}.game-scene{position:relative}.game-scene>img{width:100%}.spot{position:absolute;border:3px solid transparent;border-radius:50%;background:transparent;cursor:pointer;min-width:44px;min-height:44px}.spot:hover{border-color:#fff9;box-shadow:0 0 0 4px #ffffff30}.spot:focus-visible{outline:4px solid var(--yellow);outline-offset:0}.spot.found{border-color:var(--yellow);box-shadow:0 0 0 4px #fff9;background:#ffe07520}.spot.found:after{content:'✓';position:absolute;right:0;top:0;background:var(--yellow);color:var(--ink);border-radius:50%;width:30px;height:30px;font-weight:800;line-height:30px}.spot-raffy{left:62%;top:26%;width:13%;height:27%}.spot-tia{left:40%;top:59%;width:25%;height:36%}.spot-kevin{left:8%;top:5%;width:16%;height:33%}.game-message{padding:22px 24px;min-height:74px}.rhythm{background:var(--mint);border:1px solid var(--line);padding:30px;border-radius:24px}.rhythm-controls{display:flex;gap:15px;flex-wrap:wrap;margin-bottom:25px}.rhythm-tap.pulse{background:var(--yellow);border-color:var(--yellow);color:var(--ink);transform:scale(1.035)}.site-footer{background:var(--deep);color:white;margin-top:50px;padding:50px 40px 24px}.footer-inner,.footer-bottom{max-width:1140px;margin:auto;display:flex;justify-content:space-between;gap:30px}.footer-brand{font-family:var(--display);font-weight:800;font-size:1.6rem;color:white;text-decoration:none}.footer-inner p{font-size:.95rem;margin-top:12px;color:#d8eceb}.footer-links{display:flex;gap:30px;align-items:center;flex-wrap:wrap}.footer-links a{color:white;font-size:.94rem}.footer-bottom{border-top:1px solid #ffffff30;margin-top:38px;padding-top:22px;font-size:.8rem;color:#d8eceb}.skip-link{position:absolute;left:20px;top:-100px;background:white;padding:12px 20px;z-index:10}.skip-link:focus{top:10px}.generic-content{max-width:850px;padding:60px 30px;margin:auto}.generic-content h1{margin-bottom:36px}.generic-content h2{font-size:2.2rem;margin-top:38px}.generic-content .wp-block-image{margin:25px 0}.pagination{padding:30px}.wp-block-image figcaption{font-size:.85rem;margin:10px 0}.screen-reader-text{clip:rect(1px,1px,1px,1px);position:absolute!important;height:1px;width:1px;overflow:hidden}
@media(min-width:1500px){.hero-art img{max-height:500px}}@media(max-width:1050px){.site-header{padding:18px 25px}.site-header nav ul{gap:16px}.site-header nav a{font-size:.84rem}.brand{font-size:1.45rem}.brand img{width:46px;height:46px}.split{gap:35px}.welcome{align-items:flex-start}.card-grid{gap:18px}.card-body{padding:22px}.wrap{padding-left:28px;padding-right:28px}}
@media(max-width:780px){.site-header{position:relative;flex-wrap:wrap;padding:17px 22px}.menu-toggle{display:block}.site-header nav{display:none;width:100%}.site-header nav.is-open{display:block}.site-header nav ul{display:flex;align-items:stretch;flex-direction:column;gap:0;padding-top:12px}.site-header nav a{display:block;padding:12px 0;font-size:1rem}.hero-scene{padding:0 12px}.hero-art img{border-radius:18px;aspect-ratio:2.1;object-fit:cover}.welcome{display:block;padding-top:34px;padding-bottom:40px}.welcome .wp-block-buttons{display:flex;max-width:none}.card-grid,.card-grid.two{grid-template-columns:1fr 1fr}.card-grid .feature-card:last-child:nth-child(odd){grid-column:1/-1}.characters-grid .feature-card:last-child:nth-child(odd){grid-column:auto}.section{padding-top:48px;padding-bottom:48px}.split,.ocean-band .split{grid-template-columns:1fr;gap:30px}.split.reverse>.wp-block-image{order:0}.split>.wp-block-image img{max-height:450px}.ocean-band .split-copy{order:2}.page-intro{padding-top:40px}.footer-inner,.footer-bottom{flex-direction:column;gap:25px}.footer-links{gap:22px}.site-footer{padding:38px 28px 22px}.info-box{padding:28px}.game-top{padding:14px 16px;font-size:.9rem}.game-message{padding:18px;font-size:.95rem}}
@media(max-width:490px){body{font-size:16px}.wrap{padding-left:22px;padding-right:22px}.card-grid,.card-grid.two{grid-template-columns:1fr}.card-grid .feature-card:last-child:nth-child(odd){grid-column:auto}.hero-art img{aspect-ratio:1.7;object-fit:contain;background:#d2edf1}.welcome h1{font-size:2.55rem}.page-intro h1{font-size:2.85rem}.card-body{padding:25px}.feature-card>.wp-block-image img{aspect-ratio:1.7}.characters-grid .wp-block-image img{aspect-ratio:1.3}.wp-block-button__link,.button{font-size:.91rem;padding:12px 20px}.topline{font-size:.73rem}.game-scene{overflow:hidden}.spot-kevin{left:7%;width:18%}.spot-raffy{width:15%}.game-count{max-width:160px}.footer-bottom{font-size:.78rem}.rhythm{padding:22px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important;animation:none!important}}
.footer-links ul{display:flex;list-style:none;padding:0;margin:0;gap:25px;flex-wrap:wrap}.wp-block-buttons>.wp-block-button{margin:0}.wp-block-group{box-sizing:border-box}
.portrait{position:relative;overflow:hidden;aspect-ratio:1.22;border-radius:24px;background:#d8efea}.portrait img,.feature-card>.portrait img,.character-detail>.portrait img{position:absolute!important;width:var(--zoom)!important;max-width:none!important;height:auto!important;max-height:none!important;aspect-ratio:auto!important;padding:0!important;object-fit:initial!important;left:var(--left);top:var(--top);border-radius:0!important}.portrait-raffy{--zoom:532%;--left:-313%;--top:-42%}.portrait-barry{--zoom:415%;--left:-17%;--top:-87%}.portrait-wendy{--zoom:420%;--left:-296%;--top:-98%}.portrait-kevin{--zoom:525%;--left:-36%;--top:-4%}.portrait-keely{--zoom:560%;--left:-153%;--top:-116%}.portrait-tia{--zoom:365%;--left:-135%;--top:-79%}.portrait-murray{--zoom:470%;--left:-360%;--top:-20%}.feature-card>.portrait{border-radius:0}.character-detail>.portrait{width:100%}
@media(max-width:490px){.hero-art img{aspect-ratio:2.6;object-fit:cover}}

/* Marine comic direction — 27 September 2026 */
@font-face{font-family:'Comic Neue';src:url('fonts/ComicNeue-Regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Comic Neue';src:url('fonts/ComicNeue-Bold.ttf') format('truetype');font-weight:700 900;font-style:normal;font-display:swap}
:root{--ink:#073b62;--teal:#006d91;--deep:#064d78;--mint:#c5f5ee;--sand:#edfaff;--yellow:#ffe36b;--line:#88cddd;--radius:28px;--display:'Comic Neue','Comic Sans MS',cursive;--body:'Comic Neue','Comic Sans MS','Segoe UI',sans-serif}
body{font-size:19px;background-color:#edfaff;background-image:radial-gradient(circle at 8% 18%,transparent 0 24px,#ffffffb0 25px 28px,transparent 29px),radial-gradient(circle at 94% 36%,transparent 0 38px,#8cdeed60 39px 43px,transparent 44px),linear-gradient(180deg,#b9efff 0,#effcff 850px,#d2f7f2 100%);background-size:100% 1100px,100% 1450px,100% 100%;line-height:1.65}
h1,h2,h3{font-weight:700;letter-spacing:-.025em;line-height:1.13}h1{color:#06416c;text-shadow:2px 3px 0 #ffffff}h2{color:#075078}h3{color:#073b62;font-size:1.85rem}.lede{font-size:1.3rem}.eyebrow{font-family:var(--display);font-size:.9rem;letter-spacing:.09em;color:#07557a;font-weight:700}.topline{background:#075482;color:white;font-size:.95rem;letter-spacing:.02em;border-bottom:3px solid #053451}.site-header{background:#fffaf0;border:3px solid #073b62;border-top:0;border-radius:0 0 30px 30px;margin:0 auto 22px;box-shadow:0 5px 0 #087a9820}.brand{font-size:2rem;letter-spacing:-.04em}.brand small{font-family:var(--display);font-size:.85rem;letter-spacing:.01em}.brand img{border:3px solid #19adca;box-shadow:2px 2px 0 #073b62;width:62px;height:62px}.site-header nav ul{gap:18px}.site-header nav a{font-family:var(--display);font-size:1rem;font-weight:700}.site-header nav a:hover{color:#ad390f}.hero-art img{border:3px solid #073b62;box-shadow:0 7px 0 #076c8e25;border-radius:32px}.welcome{background:#fff1ab;border:3px solid #073b62;border-radius:30px 30px 45px 16px;padding:34px 40px;margin-top:30px;margin-bottom:16px;max-width:1140px;box-shadow:6px 7px 0 #087fa42b}.welcome h1{font-size:clamp(2.8rem,4.8vw,4.5rem);text-shadow:2px 3px 0 white}.welcome .lede{font-size:1.18rem}.wp-block-button__link,.button{background:#ffe36b;color:#073b62;border:3px solid #073b62;border-radius:18px 23px 19px 25px;box-shadow:3px 4px 0 #073b62;font-family:var(--display);font-size:1.1rem;font-weight:700;padding:12px 23px}.wp-block-button__link:hover,.button:hover{background:#ffca46;color:#073b62;border-color:#073b62;transform:translateY(-2px);box-shadow:3px 6px 0 #073b62}.is-style-outline .wp-block-button__link,.button.outline{background:#bdedff;color:#073b62}.is-style-outline .wp-block-button__link:hover,.button.outline:hover{background:#91e2f4}.light .wp-block-button__link{border-color:#073b62;background:#ffe36b;color:#073b62}.card-grid{gap:28px}.feature-card{border:3px solid #073b62;border-radius:28px 22px 30px 24px;box-shadow:5px 6px 0 #087a9830}.card-grid>.feature-card:nth-child(3n+1){background:#d1f7ff}.card-grid>.feature-card:nth-child(3n+2){background:#fff0ab}.card-grid>.feature-card:nth-child(3n){background:#ffdfcc}.feature-card>.wp-block-image{border-bottom:3px solid #073b62}.card-body p{font-size:1.12rem}.text-link{font-size:1.12rem;color:#075078;font-weight:700}.card-body{padding:26px}.ocean-band{background:linear-gradient(120deg,#086c98,#064c79);border-top:5px solid #55d9d5;border-bottom:5px solid #55d9d5;border-radius:70px 15px 65px 20px;margin:24px 0;color:#fff}.ocean-band h2{color:#fff;text-shadow:2px 3px 0 #033851}.ocean-band .eyebrow{color:#ffe36b}.ocean-band img{border:4px solid #8bece6;box-shadow:7px 7px 0 #033b6060}.purpose{background:#e4fff2;border:3px solid #16817f;border-radius:35px;margin-top:55px;margin-bottom:30px}.page-intro{background:linear-gradient(125deg,#aeecff,#baf5e7);border:3px solid #4db4c5;border-radius:35px 20px 60px 20px;padding-top:45px;padding-bottom:40px;margin-top:34px;margin-bottom:22px;max-width:1140px}.page-intro h1{font-size:clamp(2.8rem,5vw,4.8rem)}.quote-box{background:#ffe36b;border:3px solid #073b62;border-radius:25px 25px 25px 6px;box-shadow:4px 4px 0 #087a9825}.info-box{background:#c9f6eb;border:3px solid #127e8c;border-radius:30px}.info-box h3{font-size:1.65rem}.character-line{font-size:1.35rem}.character-detail>.wp-block-image{border:3px solid #073b62;box-shadow:6px 6px 0 #087a9825;border-radius:30px}.discovery-game{border:3px solid #073b62;background:#c6f4f4;box-shadow:6px 7px 0 #087a9825;border-radius:28px}.game-top{background:#ffe36b;border-bottom:3px solid #073b62;font-size:1.1rem}.game-message{font-size:1.2rem}.rhythm{background:#c6f4f4;border:3px solid #073b62;box-shadow:5px 6px 0 #087a9825}.plain-button{font-size:1rem}.site-footer{background:linear-gradient(125deg,#075888,#043c64);border-top:6px solid #41d6d1;border-radius:65px 65px 0 0}.footer-brand{font-size:2rem}.footer-inner p,.footer-links a{font-size:1.08rem}.footer-bottom{font-size:.9rem}.small{font-size:1rem}.generic-content{background:#ffffffcc;border-radius:30px;margin-top:35px;margin-bottom:35px}.reading-width.article>figure img{border:3px solid #073b62}
@media(max-width:1200px){.welcome,.page-intro{margin-left:28px;margin-right:28px}.site-header{margin-left:15px;margin-right:15px;padding:18px 24px}.site-header nav ul{gap:15px}.site-header nav a{font-size:.94rem}.brand{font-size:1.7rem}.brand img{width:50px;height:50px}.purpose{margin-left:28px;margin-right:28px}.site-header .brand small{font-size:.8rem}}
@media(max-width:780px){.site-header nav a{font-size:1.15rem}.site-header nav ul{gap:0}.welcome{padding:28px}.ocean-band{border-radius:40px 12px 35px 12px}.page-intro{padding:30px 25px}.card-grid{gap:23px}.site-footer{border-radius:38px 38px 0 0}.brand{font-size:1.85rem}.page-intro h1{overflow-wrap:break-word}}
@media(max-width:490px){body{font-size:18px}.topline{font-size:.82rem}.welcome,.page-intro,.purpose{margin-left:16px;margin-right:16px}.welcome{padding:25px 22px}.welcome h1{font-size:2.7rem}.welcome .lede{font-size:1.12rem}.page-intro h1{font-size:2.9rem}.lede{font-size:1.2rem}.hero-art img{border-radius:23px}.eyebrow{font-size:.86rem;letter-spacing:.07em}.wp-block-button__link,.button{font-size:1rem;padding:11px 18px}.welcome .wp-block-buttons{gap:16px}.brand img{width:48px;height:48px}.site-header{padding:16px}.game-top{font-size:1rem}.game-message{font-size:1.1rem}.footer-bottom{font-size:.88rem}.feature-card>.wp-block-image img{aspect-ratio:1.45}.info-box{padding:24px}.character-detail>.wp-block-image{width:100%}}
/* Full-body character artwork: never zoom or crop fins, tails, wings or claws. */
figure.character-art,.feature-card>figure.character-art,.character-detail>figure.character-art{position:relative;display:flex;align-items:center;justify-content:center;aspect-ratio:1.22;background:#fffdf5;overflow:hidden;padding:22px}
figure.character-art img,.feature-card>figure.character-art img,.character-detail>figure.character-art img{position:static!important;display:block;width:100%!important;height:100%!important;max-width:100%!important;max-height:100%!important;aspect-ratio:auto!important;object-fit:contain!important;padding:0!important;left:auto!important;top:auto!important;border-radius:0!important}
.character-detail>figure.character-art{aspect-ratio:1.15;max-height:540px;padding:30px}
/* Friendly encounters in the characters’ own world, rather than specimen portraits. */
figure.character-art,.feature-card>figure.character-art,.character-detail>figure.character-art{padding:0;aspect-ratio:1;background:#b6eceb}
figure.character-art img,.feature-card>figure.character-art img,.character-detail>figure.character-art img{width:100%!important;height:100%!important;object-fit:contain!important}
.characters-grid .card-body>p:first-of-type{font-size:1.25rem;font-weight:700;line-height:1.5;color:#075078}
.characters-grid .feature-card{transition:transform .2s ease,box-shadow .2s ease}
.characters-grid .feature-card:hover,.characters-grid .feature-card:focus-within{transform:translateY(-5px);box-shadow:6px 11px 0 #087a9830}
@media(prefers-reduced-motion:reduce){.characters-grid .feature-card:hover,.characters-grid .feature-card:focus-within{transform:none}}
