/* Underwater News: dive-flag red on chart seafoam, condensed instrument headlines, a reading serif. */
@font-face { font-family: "Barlow Condensed"; font-weight: 500; font-display: swap; src: url(fonts/barlow-condensed-latin-500-normal.woff2) format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 600; font-display: swap; src: url(fonts/barlow-condensed-latin-600-normal.woff2) format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 700; font-display: swap; src: url(fonts/barlow-condensed-latin-700-normal.woff2) format("woff2"); }
@font-face { font-family: "Source Serif 4"; font-weight: 200 900; font-style: normal; font-display: swap; src: url(fonts/source-serif-4-latin-wght-normal.woff2) format("woff2"); }
@font-face { font-family: "Source Serif 4"; font-weight: 200 900; font-style: italic; font-display: swap; src: url(fonts/source-serif-4-latin-wght-italic.woff2) format("woff2"); }

:root {
  --sea: #eaf3f2;        /* page: the pale water of a chart's shallows */
  --paper: #fbfdfc;
  --ink: #0b2a33;
  --ink-2: #4a666e;
  --rule: #c7dbda;
  --abyss: #05222d;
  --abyss-ink: #d6e6e6;
  --flag: #d3242c;       /* diver-down flag */
  --flag-ink: #ffffff;
  --link: #0d5c6b;
  --t-diving: #13808a; --t-medicine: #b83a46; --t-archaeology: #9a6526; --t-environment: #3a8446;
  --t-science: #2f62ad; --t-tech: #6549ad; --t-recalls: #c94a14; --t-film: #a8427a; --t-current: #4d5b66;
  --cond: "Barlow Condensed", "Arial Narrow", "Roboto Condensed", sans-serif;
  --serif: "Source Serif 4", "Iowan Old Style", Georgia, serif;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --sea: #04161d; --paper: #071f28; --ink: #dcebea; --ink-2: #8eaaae; --rule: #17404a;
    --abyss: #020d12; --flag: #ef4a50; --link: #7fd0d8;
    --t-diving: #45bfc8; --t-medicine: #ec7d86; --t-archaeology: #d8a25e; --t-environment: #79c385;
    --t-science: #82a9ee; --t-tech: #ab93ee; --t-recalls: #f28a5a; --t-film: #e58bba; --t-current: #b9c6cf;
  }
  .plate img { filter: saturate(.85) brightness(.9); }
}
.t-diving { --t: var(--t-diving); } .t-medicine { --t: var(--t-medicine); } .t-archaeology { --t: var(--t-archaeology); }
.t-environment { --t: var(--t-environment); } .t-science { --t: var(--t-science); } .t-tech { --t: var(--t-tech); }
.t-recalls { --t: var(--t-recalls); } .t-film { --t: var(--t-film); } .t-current-affairs { --t: var(--t-current); }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--sea); color: var(--ink); font: 18px/1.62 var(--serif); }
a { color: var(--link); text-underline-offset: 3px; text-decoration-thickness: 1px; }
img { display: block; max-width: 100%; }
:focus-visible { outline: 3px solid var(--flag); outline-offset: 2px; }
.wrap { max-width: 1160px; margin: 0 auto; padding: 0 16px; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 8px; background: var(--paper); padding: 6px 10px; z-index: 10; }

/* ---------- surface: masthead */
.surface { background: var(--abyss); color: var(--abyss-ink); }
.mast { display: flex; align-items: center; justify-content: space-between; gap: 8px 24px; flex-wrap: wrap; padding-top: 22px; padding-bottom: 14px; }
.brand { display: inline-flex; align-items: center; gap: 12px; color: #f2f8f8; text-decoration: none;
  font: 700 clamp(30px, 4.6vw, 44px)/1 var(--cond); letter-spacing: .005em; }
.brand .flag { width: 1.05em; height: auto; flex: none; transform: translateY(-.04em); }
.brand .logo { width: 58px; height: auto; flex: none; }
.brand.small { font-size: 26px; }
.brand.small .logo { width: 40px; }
@media (max-width: 640px) { .brand .logo { width: 44px; } }
.tagline { margin: 0; font: italic 17px/1.4 var(--serif); color: #ffffff; }
.sections { display: flex; gap: 22px; overflow-x: auto; scrollbar-width: none; border-top: 1px solid #12404d; padding: 10px 0 0; }
.sections::-webkit-scrollbar { display: none; }
@media (min-width: 900px) { .sections { flex-wrap: wrap; overflow: visible; gap: 0 20px; } .sections a { font-size: 16.5px; } }
.sections a { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; color: #b9d0d3; text-decoration: none;
  font: 500 17px/1 var(--cond); letter-spacing: .02em; padding: 4px 0 12px; border-bottom: 3px solid transparent; }
.sections a:hover { color: #fff; }
.sections a[aria-current] { color: #fff; border-bottom-color: var(--t, var(--flag)); }
.ring { width: 10px; height: 10px; border-radius: 50%; flex: none; border: 2px solid var(--t, var(--flag));
  box-shadow: 0 0 0 2px transparent, inset 0 0 0 2px transparent; background: radial-gradient(circle, var(--t, var(--flag)) 0 2px, transparent 2.5px); }
.sections a:first-child { padding-left: 0; }

/* ---------- depth gauge (wide screens) */
.gauge { position: fixed; left: max(56px, calc((100vw - 1160px) / 2 - 64px)); top: 200px; bottom: 48px; width: 48px; z-index: 3; display: none; }
@media (min-width: 1300px) { .gauge { display: block; } }
.gauge ol { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; border-left: 1px solid var(--rule); }
.gauge li { position: absolute; left: 0; top: calc(var(--d) / 40 * 100%); width: 12px; border-top: 1px solid var(--ink-2); }
.gauge li span { position: absolute; left: 16px; top: -.7em; font: 500 13px/1 var(--cond); color: var(--ink-2); }
.gauge::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px;
  background: repeating-linear-gradient(to bottom, var(--rule) 0 1px, transparent 1px calc(100% / 40)); }
.needle { position: absolute; right: calc(100% - 1px); top: 0; transform: translateY(-50%); display: flex; align-items: center; gap: 2px;
  font: 600 15px/1 var(--cond); color: var(--flag); white-space: nowrap; }
.needle::after { content: ""; border: 6px solid transparent; border-left: 8px solid var(--flag); margin-left: 4px; margin-right: -6px; }
.needle b { font-weight: 700; font-size: 20px; }

/* ---------- shared story parts */
main.wrap { padding-top: 26px; padding-bottom: 56px; }
.themes-row { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-bottom: 6px; }
.theme { display: inline-flex; align-items: center; gap: 6px; color: var(--t, var(--ink-2)); text-decoration: none; font: 600 16px/1.2 var(--cond); letter-spacing: .02em; }
.theme .ring { width: 9px; height: 9px; }
.story h1, .story h2 { font-family: var(--cond); font-weight: 600; letter-spacing: -.003em; margin: 0; text-wrap: balance; }
.story h2 a, .related a, .popular a { color: inherit; text-decoration: none; }
.story h2 a:hover, .related a:hover, .popular a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-decoration-color: var(--flag); }
.byline { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 8px 0 12px; font: 500 15px/1.3 var(--cond); letter-spacing: .02em; color: var(--ink-2); }
.byline .src { color: var(--ink); font-weight: 600; }
.why { font-style: italic; color: var(--ink); margin: 0 0 10px; max-width: 62ch; }
.abstract { margin: 0 0 12px; max-width: 68ch; }
.points { list-style: none; margin: 0 0 16px; padding: 0; max-width: 66ch; }
.points li { position: relative; padding-left: 26px; margin: 4px 0; }
.points li::before { content: ""; position: absolute; left: 0; top: .78em; width: 14px; border-top: 2px solid var(--t, var(--ink-2)); }
.story .points li::before { border-top-color: var(--ink-2); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.read { display: inline-block; background: var(--flag); color: var(--flag-ink); text-decoration: none; font: 600 17px/1 var(--cond);
  letter-spacing: .03em; padding: 11px 16px 10px; border-radius: 3px; }
.read:hover { background: #b51c24; }
.actions button { display: inline-flex; align-items: center; gap: 6px; font: 500 16px/1 var(--cond); letter-spacing: .03em; color: var(--ink-2);
  background: none; border: 0; padding: 8px 2px; cursor: pointer; }
.actions button:hover { color: var(--ink); }
.actions svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.like[aria-pressed="true"] { color: var(--flag); }
.like[aria-pressed="true"] svg { fill: var(--flag); stroke: var(--flag); }
.pic { margin: 0; overflow: hidden; background: var(--rule); border-radius: 2px; }
.pic img { width: 100%; height: 100%; object-fit: cover; }
.pic figcaption { font: 500 13px/1.3 var(--cond); color: var(--ink-2); padding: 6px 0 0; background: var(--sea); }

/* ---------- lead story */
.lead-wrap { margin-bottom: 40px; }
.story-lead { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); background: var(--paper); border: 1px solid var(--rule); }
.story-lead .pic { width: 100%; height: 100%; min-height: 380px; border-radius: 0; }
.story-lead .body { padding: 28px 32px 30px; align-self: center; }
.story-lead h2 { font-size: clamp(36px, 4.4vw, 56px); line-height: 1; }
.story-lead .why { font-size: 21px; line-height: 1.45; }
@media (max-width: 860px) {
  .story-lead { grid-template-columns: 1fr; }
  .story-lead .pic { height: auto; min-height: 0; aspect-ratio: 16 / 9; }
  .story-lead .body { padding: 20px 18px 22px; }
}

/* ---------- stream */
.layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 48px; align-items: start; }
@media (max-width: 960px) { .layout { grid-template-columns: 1fr; gap: 24px; } }
.story-row { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 24px; padding: 26px 0; border-top: 1px solid var(--rule); }
.stream > .story-row:first-child { border-top: 0; padding-top: 0; }
.story-row .pic { aspect-ratio: 4 / 3; }
.story-row h2 { font-size: 30px; line-height: 1.04; }
.story-row .abstract, .story-row .points { font-size: 17px; }
@media (max-width: 640px) {
  .story-row { grid-template-columns: 1fr; gap: 12px; }
  .story-row .pic { aspect-ratio: 21 / 8; }
  .story-row h2 { font-size: 27px; }
}

/* ---------- text-only stories (pictures off in Settings) */
.story-lead.nopic { display: block; border-top: 4px solid var(--flag); }
.story-lead.nopic .body { padding: 30px 40px 34px; }
.story-lead.nopic h2 { max-width: 22ch; }
.story-row.nopic { display: block; }
.story-row.nopic h2 { max-width: 30ch; }
@media (max-width: 640px) { .story-lead.nopic .body { padding: 20px 18px 24px; } }

/* ---------- your own articles */
.theme.mine { color: var(--ink); background: var(--rule); padding: 3px 9px 2px; border-radius: 2px; }
.editor-piece.story-row { border-left: 3px solid var(--flag); padding-left: 20px; }
.standfirst { font-size: 22px; line-height: 1.45; max-width: 60ch; }
.article-body { max-width: 66ch; font-size: 19px; line-height: 1.7; }
.article-body p { margin: 0 0 1.1em; }
.article-body h2 { font: 600 30px/1.1 var(--cond); margin: 1.6em 0 .5em; }
.article-body h3 { font: 600 23px/1.15 var(--cond); margin: 1.4em 0 .4em; }
.article-body ul, .article-body ol { padding-left: 1.3em; margin: 0 0 1.1em; }
.article-body li { margin: .3em 0; }
.article-body blockquote { margin: 1.4em 0; padding: 2px 0 2px 22px; border-left: 3px solid var(--flag); font-style: italic; }
.article-body blockquote p { margin: 0; }
.article-body .yt { margin: 1.4em 0; }
.story-single.editor-piece .actions { margin-top: 26px; padding-top: 16px; border-top: 1px solid var(--rule); }

/* ---------- videos: click to play */
.yt { position: relative; margin: 4px 0 18px; max-width: 760px; }
.yt-play { display: flex; align-items: center; gap: 22px; width: 100%; aspect-ratio: 16 / 9; padding: 0 8%;
  border: 0; border-radius: 3px; cursor: pointer; text-align: left; color: #eef6f6;
  background: radial-gradient(120% 90% at 85% 110%, #0d4f62 0, #062b38 45%, var(--abyss) 100%); }
.yt-play:hover .yt-icon { transform: scale(1.06); }
.yt-icon { flex: none; width: 74px; height: 74px; border-radius: 50%; background: var(--flag); position: relative; }
.yt-icon::after { content: ""; position: absolute; left: 29px; top: 22px; border: 15px solid transparent; border-left: 24px solid #fff; border-right: 0; }
@media (prefers-reduced-motion: no-preference) { .yt-icon { transition: transform .15s; } }
.yt-text { display: flex; flex-direction: column; gap: 4px; }
.yt-text small { font: 500 16px/1.2 var(--cond); letter-spacing: .03em; color: #8fc6e4; }
.yt-text strong { font: 600 clamp(22px, 3vw, 32px)/1.05 var(--cond); }
.yt-note { font: italic 15px/1.3 var(--serif); color: #9fb7bb; }
.yt-out { display: inline-block; margin-top: 6px; font: 500 15px var(--cond); letter-spacing: .02em; color: var(--ink-2); }
.yt iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 3px; background: #000; }
.story-row .yt-icon { width: 56px; height: 56px; }
.story-row .yt-icon::after { left: 22px; top: 16px; border-width: 12px; border-left-width: 19px; border-right-width: 0; }
@media (max-width: 640px) { .yt-play { gap: 14px; padding: 0 6%; } .yt-icon { width: 52px; height: 52px; }
  .yt-icon::after { left: 20px; top: 15px; border-width: 11px; border-left-width: 17px; border-right-width: 0; } .yt-note { display: none; } }
.weekly-video { margin: 0 0 40px; }
.weekly-video h2 { font: 600 24px/1.2 var(--cond); letter-spacing: .02em; margin: 0 0 12px; border-top: 2px solid var(--ink); padding-top: 10px; }
.weekly-video .yt { max-width: 820px; }
.video-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 28px; }
.video-list .weekly-video { margin: 0; }

/* ---------- single story page */
.story-single .pic { aspect-ratio: 21 / 9; margin-bottom: 22px; }
.story-single .pic figcaption { text-align: right; }
.story-single h1 { font-size: clamp(38px, 5vw, 58px); line-height: 1; }
.story-single .why { font-size: 21px; }
.related { margin-top: 40px; border-top: 2px solid var(--ink); padding-top: 10px; }
.related h2, .side-block h2 { font: 600 19px/1.2 var(--cond); letter-spacing: .02em; margin: 0 0 10px; }
.related ul { list-style: none; padding: 0; margin: 0; }
.related li { padding: 10px 0; border-bottom: 1px solid var(--rule); font: 600 22px/1.1 var(--cond); }
.related li span { display: block; font: 500 14px/1.4 var(--cond); color: var(--ink-2); margin-top: 3px; }

/* ---------- section pages */
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; border-bottom: 3px solid var(--t); margin-bottom: 26px; }
.section-head h1 { display: flex; align-items: center; gap: 14px; margin: 0 0 6px; font: 700 clamp(40px, 6vw, 68px)/1 var(--cond); }
.section-head h1 .ring { width: 22px; height: 22px; border-width: 4px; background: radial-gradient(circle, var(--t) 0 4px, transparent 4.5px); }
.section-head p { margin: 0; font: 500 17px var(--cond); color: var(--ink-2); }

/* ---------- sidebar, sponsors, shelf */
.side { position: sticky; top: 20px; display: grid; gap: 28px; }
@media (max-width: 960px) { .side { position: static; } }
.side-block { border-top: 2px solid var(--ink); padding-top: 10px; }
.subscribe p { margin: 0 0 12px; font-size: 16px; line-height: 1.5; }
.popular ol { margin: 0; padding: 0; list-style: none; counter-reset: rank; }
.popular li { counter-increment: rank; display: grid; grid-template-columns: 26px 1fr; padding: 8px 0; border-bottom: 1px solid var(--rule);
  font: 600 19px/1.12 var(--cond); }
.popular li::before { content: counter(rank); color: var(--flag); font-weight: 700; }
.slot-top { margin: -6px 0 28px; }
.slot-infeed { padding: 22px 0; border-top: 1px solid var(--rule); }
.ad { position: relative; display: flex; gap: 16px; align-items: center; color: var(--ink); text-decoration: none;
  border: 1px dashed var(--ink-2); border-radius: 3px; padding: 26px 16px 14px; background: var(--paper); }
.ad:hover { border-style: solid; }
.ad-label { position: absolute; top: 7px; left: 16px; font: 500 13px/1 var(--cond); letter-spacing: .04em; color: var(--ink-2); }
.ad img { max-height: 120px; width: auto; }
.ad .cover { max-height: 128px; box-shadow: 0 2px 6px rgba(5, 34, 45, .25); }
.ad-text { display: flex; flex-direction: column; gap: 3px; font-size: 16px; line-height: 1.45; }
.ad-text strong { font: 600 22px/1.05 var(--cond); }
.ad-text em { color: var(--ink-2); }
.slot-top .ad { justify-content: center; min-height: 96px; }
.side .ad { flex-direction: column; align-items: flex-start; }
.side .ad .cover { max-height: 200px; }
.shelf .ad { border: 0; padding: 4px 0 0; background: none; }
.shelf .ad-label { display: none; }

/* ---------- prose pages */
.prose { max-width: 680px; }
.prose h1 { font: 700 clamp(40px, 6vw, 64px)/1 var(--cond); margin: 0 0 18px; }
.prose h2 { font: 600 28px/1.1 var(--cond); margin: 40px 0 8px; }
.prose .lede { font-size: 22px; line-height: 1.5; }
.books { display: grid; gap: 22px; margin-top: 14px; }
.book { display: grid; grid-template-columns: 120px 1fr; gap: 20px; align-items: start; }
.book img { width: 120px; box-shadow: 0 2px 8px rgba(5, 34, 45, .25); }
.book h3 { margin: 0; font: 600 26px/1.05 var(--cond); }
.book .sub { margin: 4px 0 8px; font-style: italic; color: var(--ink-2); }
.empty { color: var(--ink-2); font-style: italic; }

/* ---------- seabed: footer */
.seabed { background: var(--abyss); color: #a9c3c6; font-size: 16px; padding: 36px 0 24px; }
.foot { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px 48px; }
.foot p { max-width: 56ch; margin: 12px 0 0; }
.foot .ai-note { font-size: 13px; line-height: 1.5; margin-top: 6px; color: #8aa6aa; }
.foot nav { display: grid; gap: 6px; align-content: start; }
.foot nav a { color: #e1eded; font: 500 18px/1.3 var(--cond); letter-spacing: .02em; text-decoration: none; }
.foot nav a:hover { text-decoration: underline; }
.copy { margin-top: 28px; font: 500 14px var(--cond); color: #6f9298; }
@media (max-width: 640px) { .foot { grid-template-columns: 1fr; } }

.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: var(--ink); color: var(--sea);
  padding: 9px 16px; border-radius: 3px; font: 500 16px var(--cond); }
@media (prefers-reduced-motion: no-preference) { .needle { transition: top .12s linear; } }