/* Dark is the site's own look rather than a reaction to the machine it is
   read on. prefers-color-scheme is deliberately not consulted: nearly every
   computer reports "light", so honouring it would make the dark theme the
   exception instead of the default. The toggle in the header is there for
   anyone who wants the other one, and the choice is remembered. */
:root{
  --bg:#0b1a20; --surface:#122830; --line:#1f3d47; --ink:#e8f1f4; --ink-2:#a9c3cc;
  --muted:#7e9ca6; --accent:#5ac8e8; --accent-2:#7fdcf5;
  color-scheme:dark;
  /* 68ch is the classic measure for a novel. This is a reference site read
     at a desk, and 68 left a third of a 1440px screen empty beside the text.
     78 is still inside the range that stays comfortable to read and uses the
     page. */
  --read:78ch; --wide:1120px;
  --sans:'Inter',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --serif:'Source Serif 4',Georgia,'Times New Roman',serif;
}
:root[data-theme="light"]{
  --bg:#ffffff; --surface:#f4f7f8; --line:#dbe4e7; --ink:#10242b; --ink-2:#4a6570;
  --muted:#6b8590; --accent:#0a6e8a; --accent-2:#0d8fb3;
  color-scheme:light;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background-color:var(--bg);
  background-image:
    radial-gradient(1100px 700px at 100% 0%,color-mix(in srgb,var(--accent) 14%,transparent),transparent 70%),
    radial-gradient(900px 650px at 0% 100%,color-mix(in srgb,var(--accent-2) 11%,transparent),transparent 70%);
  background-attachment:fixed;color:var(--ink);font-family:var(--serif);
  font-size:18px;line-height:1.65;-webkit-font-smoothing:antialiased}
.wrap{max-width:var(--wide);margin:0 auto;padding:0 20px}
.read{max-width:var(--read)}
a{color:var(--accent);text-underline-offset:2px}
a:hover{color:var(--accent-2)}

header.site{border-bottom:1px solid var(--line);background:var(--surface);
  position:sticky;top:0;z-index:20;backdrop-filter:saturate(1.3) blur(6px)}
header.site .wrap{display:flex;align-items:center;gap:18px;min-height:58px;flex-wrap:wrap}
.brand{font-family:var(--sans);font-weight:800;letter-spacing:-.02em;font-size:20px;
  color:var(--ink);text-decoration:none;display:flex;align-items:baseline;gap:8px}
.brand b{color:var(--accent)}
.brand span{font-weight:500;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
nav.main{display:flex;gap:2px;flex-wrap:wrap;margin-left:auto;font-family:var(--sans);font-size:14.5px}
nav.main a{color:var(--ink-2);text-decoration:none;padding:6px 10px;border-radius:7px;white-space:nowrap}
nav.main a:hover{background:var(--bg);color:var(--ink)}
nav.main a[aria-current]{color:var(--accent);font-weight:600}

main{padding:38px 0 10px}
.crumbs{font-family:var(--sans);font-size:13.5px;color:var(--muted);margin-bottom:10px}
.crumbs a{color:var(--muted);text-decoration:none}
.crumbs a:hover{color:var(--ink)}
h1{font-family:var(--sans);font-weight:800;letter-spacing:-.03em;
  font-size:clamp(28px,4.6vw,44px);line-height:1.1;margin:0 0 6px}
.lede{font-family:var(--sans);color:var(--ink-2);font-size:clamp(16px,2vw,18.5px);
  margin:0 0 26px;max-width:var(--read)}
article h2{font-family:var(--sans);font-weight:750;letter-spacing:-.02em;
  font-size:clamp(21px,2.9vw,27px);margin:38px 0 8px;line-height:1.2}
article h3{font-family:var(--sans);font-weight:700;font-size:clamp(18px,2.3vw,21px);margin:30px 0 6px}
article h4{font-family:var(--sans);font-weight:700;font-size:17px;margin:24px 0 4px;color:var(--ink-2)}
article p,article ul,article ol{max-width:var(--read)}
article p{margin:0 0 18px}
article li{margin:0 0 7px}
article strong{font-weight:650}
article hr{border:0;border-top:1px solid var(--line);margin:34px 0;max-width:var(--read)}
article blockquote{margin:0 0 18px;padding:2px 0 2px 18px;border-left:3px solid var(--accent);
  color:var(--ink-2);max-width:var(--read)}

.fig{display:block;margin:26px 0;text-decoration:none}
.fig img{display:block;width:100%;height:auto;border-radius:10px;border:1px solid var(--line);background:var(--surface)}
.fig span{display:block;font-family:var(--sans);font-size:13.5px;color:var(--muted);margin-top:8px;max-width:var(--read)}

/* Size and alignment, chosen in the Markdown. Each is a maximum rather than a
   width, so a picture never stretches past its own resolution and never
   overflows a phone. */
.fig.small{max-width:320px}
.fig.medium{max-width:560px}
.fig.large{max-width:820px}
.fig.full{max-width:none}
.fig.center{margin-left:auto;margin-right:auto;text-align:center}
.fig.center span{margin-left:auto;margin-right:auto}
.fig.left{float:left;margin:8px 28px 18px 0;max-width:340px}
.fig.right{float:right;margin:8px 0 18px 28px;max-width:340px}
.fig.plain img{border:0;background:none;border-radius:0}
article::after{content:"";display:block;clear:both}
@media (max-width:640px){
  /* A float on a phone leaves a column two words wide. */
  .fig.left,.fig.right{float:none;margin:26px 0;max-width:none}
}
/* The forecast lives in its own app, which is a PWA: embedding it would stop
   the install prompt firing, and the rest of that page is instructions for
   installing it. So it gets a door rather than a window. */
.applink{display:block;margin:26px 0;padding:20px 22px;border-radius:12px;text-decoration:none;
  border:1px solid var(--accent);background:linear-gradient(180deg,var(--surface),var(--bg))}
.applink:hover{border-color:var(--accent-2);background:var(--surface)}
.applink b{display:block;font-family:var(--sans);font-weight:750;font-size:19px;color:var(--accent);margin-bottom:4px}
.applink span{display:block;font-family:var(--sans);font-size:15px;color:var(--ink-2);line-height:1.5;max-width:52ch}
.embed{margin:26px 0;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--surface)}
.embed iframe{display:block;width:100%;min-height:620px;border:0}
.embed.video{max-width:820px}
.embed.video iframe{min-height:0;aspect-ratio:16/9;height:auto}

/* A card grid is not prose, so it is not held to the reading measure —
   article ul caps at --read, which pinned this to two columns. */
.cards{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(248px,1fr));
  margin:24px 0 8px;padding:0;list-style:none;max-width:none}
/* A card carries a photograph where an honest one exists and words alone
   where it does not. The two have to sit in one grid without the text ones
   looking like a failed image, so they are not treated as a lesser case: the
   picture is a band across the top, and a card without one starts with a rule
   in the same place and gives the words the room instead. */
.cards img{display:block;width:100%;height:auto;aspect-ratio:2/1;object-fit:cover;
  background:var(--surface);border-bottom:1px solid var(--line)}
.cards img.f-top{object-position:50% 12%}
.cards img.f-bottom{object-position:50% 100%}
.cards .c{padding:14px 17px 16px}
.cards .no-art .c{border-top:3px solid var(--accent);border-radius:10px 10px 0 0;padding-top:15px}
.cards li{display:flex}
.cards li > a{flex:1}
.cards a{display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--line);
  border-radius:11px;background:var(--surface);text-decoration:none;height:100%}
.cards a:hover{border-color:var(--accent)}
.cards b{display:block;font-family:var(--sans);font-size:16.5px;color:var(--ink);margin-bottom:3px}
.cards span{font-family:var(--sans);font-size:13.5px;color:var(--muted);line-height:1.45;display:block}

/* ---- the home page ----
   Somebody arriving from a post in the Facebook group wants one of two
   things: is it worth diving tomorrow, and what does the site look like
   underwater. Those go first. The mission statement is what they read once
   they already trust the place, so it goes after. */
.hero{display:grid;grid-template-columns:auto 1fr;gap:28px;align-items:center;margin:6px 0 32px}
.hero img{width:128px;height:128px;border-radius:18px;display:block}
.hero h1{margin:0 0 10px}
.hero p{margin:0;font-family:var(--sans);font-size:clamp(16px,2.1vw,19px);
  color:var(--ink-2);line-height:1.5;max-width:56ch}
@media (max-width:620px){.hero{grid-template-columns:1fr;gap:18px}.hero img{width:92px;height:92px}}

.twoup{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:16px;margin:0 0 44px}
/* The two things most people came for. They were two boxes of text, which
   told somebody who already knew what a dive forecast was; a band of the
   thing itself says it before the words do. */
.twoup a{display:block;padding:0;border-radius:14px;text-decoration:none;overflow:hidden;
  border:1px solid var(--accent);background:linear-gradient(180deg,var(--surface),var(--bg))}
.twoup a:hover{background:var(--surface)}
.twoup img{display:block;width:100%;height:152px;object-fit:cover;
  border-bottom:1px solid var(--accent)}
.twoup .t{display:block;padding:20px 24px 22px}
.twoup b{display:block;font-family:var(--sans);font-weight:750;font-size:20px;
  color:var(--accent);margin-bottom:5px}
.twoup em{display:block;font-family:var(--sans);font-size:15px;color:var(--ink-2);
  font-style:normal;line-height:1.5}

.made{list-style:none;padding:0;margin:14px 0 44px;display:grid;gap:12px;
  grid-template-columns:repeat(auto-fit,minmax(290px,1fr))}
.made li{font-family:var(--sans);font-size:15.5px;line-height:1.5;color:var(--ink-2);
  padding-left:24px;position:relative}
.made li::before{content:"";position:absolute;left:4px;top:9px;width:7px;height:7px;
  border-radius:50%;background:var(--accent)}

.channels{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:18px;margin:14px 0 8px}
.channel{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--surface);
  display:flex;flex-direction:column}
.channel img{display:block;width:100%;height:148px;object-fit:cover}
.channel .t{padding:15px 17px 17px}
.channel b{display:block;font-family:var(--sans);font-size:16.5px;margin-bottom:4px;color:var(--ink)}
.channel p{margin:0;font-family:var(--sans);font-size:14px;color:var(--ink-2);line-height:1.5}
.channel a{font-weight:600}

/* ---- dive site pages ----
   The safety brief is the part somebody reads at six in the morning before
   driving to a site they have not dived, so it is given its own weight
   rather than being one heading among many. */
.safety{border:1px solid var(--accent);border-left-width:4px;border-radius:0 12px 12px 0;
  background:var(--surface);padding:22px 24px;margin:30px 0}
.safety > :first-child{margin-top:0}
.safety > :last-child{margin-bottom:0}
.safety h2{margin:0 0 4px;font-size:clamp(19px,2.5vw,24px);color:var(--accent)}
.safety h3{font-size:16px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);
  margin:26px 0 6px}
.safety p,.safety ul,.safety ol{max-width:64ch}

.downloads{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 30px;font-family:var(--sans)}
.downloads a{display:inline-flex;align-items:center;gap:7px;padding:9px 15px;border-radius:9px;
  border:1px solid var(--line);background:var(--surface);text-decoration:none;
  font-size:14.5px;font-weight:600;color:var(--ink)}
.downloads a:hover{border-color:var(--accent);color:var(--accent)}
.downloads em{font-style:normal;font-weight:400;color:var(--muted);font-size:13.5px}

/* Square reference photographs keyed to labels on the map. A grid, because
   nine of them stacked full width is a page nobody scrolls to the end of. */
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:14px;margin:18px 0 30px}
.gallery .fig{margin:0;max-width:none}
.gallery .fig img{aspect-ratio:1;object-fit:cover}
.gallery .fig span{font-size:12.5px;margin-top:6px}

/* A row of columns. Unlike a gallery these cells hold whole pieces of the
   page — a picture and the paragraph that belongs to it — so nothing here
   crops to a square or caps at the reading measure. */
.row{display:grid;gap:26px;margin:22px 0 32px;max-width:none;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.row .cell > :first-child{margin-top:0}
.row .cell > :last-child{margin-bottom:0}
.row .fig{margin:0 0 12px;max-width:none}
.row p,.row ul,.row ol{max-width:none;font-size:15.5px;line-height:1.5}
.row h2,.row h3{font-size:17px;margin:0 0 6px;max-width:none}

/* The dive site map, and the numbered list that indexes it. The list is not
   decoration: it is how the map works without a mouse, and how it reads on a
   phone where a pin is a fingertip wide. */
.sitemap{margin:26px 0 34px;max-width:none}
.sitemap-canvas{height:clamp(320px,74vh,560px);border-radius:12px;border:1px solid var(--line);
  background:var(--surface);z-index:0}
.sitemap-key{list-style:none;display:grid;gap:8px;padding:0;margin:14px 0 0;
  grid-template-columns:repeat(auto-fill,minmax(210px,1fr));font-family:var(--sans)}
.sitemap-key button{display:grid;grid-template-columns:auto 1fr;gap:2px 10px;width:100%;
  text-align:left;padding:9px 12px;border:1px solid var(--line);border-radius:10px;
  background:var(--surface);color:var(--ink);font:inherit;cursor:pointer}
.sitemap-key button:hover{border-color:var(--accent);color:var(--accent)}
.sitemap-key button[aria-current]{border-color:var(--accent);background:var(--accent);color:#fff}
.sitemap-key i{grid-row:span 2;align-self:center;display:grid;place-items:center;
  width:23px;height:23px;border-radius:50%;background:var(--accent);color:#fff;
  font-style:normal;font-size:12.5px;font-weight:700}
.sitemap-key button[aria-current] i{background:#fff;color:var(--accent)}
.sitemap-key b{font-size:14.5px;font-weight:600;line-height:1.25}
.sitemap-key span{font-size:12px;color:var(--muted)}
.sitemap-key button:hover span,.sitemap-key button[aria-current] span{color:inherit;opacity:.85}
.sitemap figcaption{font-family:var(--sans);font-size:13px;color:var(--muted);
  margin-top:14px;max-width:var(--read)}
.sitemap-pin span{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;
  background:var(--accent);color:#fff;border:2px solid var(--bg);
  font-family:var(--sans);font-size:12.5px;font-weight:700;
  box-shadow:0 1px 5px rgba(0,0,0,.35)}
.leaflet-container{font-family:var(--sans)}
.sitemap-pop .leaflet-popup-content{margin:13px 15px;font-family:var(--sans)}
.sitemap-pop b{display:block;font-size:15.5px;margin-bottom:5px}
.sitemap-pop b a{color:var(--ink);text-decoration:none}
.sitemap-pop b a:hover{color:var(--accent)}
.sitemap-pop span{display:block;font-size:13px;line-height:1.45;color:var(--muted)}
.sitemap-pop .go{display:inline-block;margin-top:9px;font-size:13px;font-weight:600}
.sitemap-pop .leaflet-popup-content-wrapper{background:var(--bg);color:var(--ink);
  border:1px solid var(--line);border-radius:11px}
.sitemap-pop .leaflet-popup-tip{background:var(--bg);border:1px solid var(--line)}

footer.site{border-top:1px solid var(--line);margin-top:56px;padding:26px 0 40px;
  font-family:var(--sans);font-size:14px;color:var(--muted)}
footer.site .wrap{display:flex;gap:16px;justify-content:space-between;flex-wrap:wrap}
footer.site a{color:var(--muted)}
.themer{background:none;border:1px solid var(--line);color:var(--muted);border-radius:7px;
  cursor:pointer;padding:5px 9px;font:inherit;font-size:13px}
.themer:hover{color:var(--ink);border-color:var(--accent)}
@media (max-width:620px){
  body{font-size:17px}
  header.site .wrap{min-height:52px}
  nav.main{width:100%;margin:0 0 8px;overflow-x:auto;padding-bottom:2px}
  .embed iframe{min-height:520px}
}