/* =================================================================
   Dive Into St. Croix Caribbean Blog — site stylesheet (2026)
   One file for the whole site. Mobile-first. Tokens in :root.
   diveintostcroix.com was the site of Latitude 17 Scuba, a St. Croix dive
   centre (closed); it now publishes the Caribbean blog.
   Identity: the Latitude 17 Scuba logo — a red manta ray drawn as a
   diver-down flag (red with a white diagonal stripe) — and the dive
   itself: sunlit surface water at the top of the page, getting deeper
   (bluer) further down.
   Palette: logo red, deep and abyss blue, St. Croix lagoon turquoise,
   pale surface aqua and a little sand. Type: Kanit (bold italic, like the
   logo lettering) for headings, JetBrains Mono for gauge-style labels and
   readouts, Albert Sans for text.
   Motifs: the diver-down flag (--flag) as section-title mark, kicker icon,
   list bullet and current-menu marker; a dive-gauge depth scale
   (--gauge: tick marks on a turquoise line) under the header, over the
   footer and as a vertical scale beside the hero photos (--vgauge);
   rising bubbles (--bubbles) beside the heroes and in the deep bands;
   marine-life photos as round portholes with a turquoise ring.
   Deliberately different from the other network sites (oceansidebistro.net
   waves, asianrestaurantvi.com lacquer frames, baznotik.com sail slants,
   bowlingvi.com retro marquee, chenaybay.com cabana stripes, chinchillasskb.com
   volcano domes, greenervi.com leaf cuts, istanbulturkishrestaurant.com
   Iznik tiles, lapausemartinique.com lanterns, laoboutique.com gold rings,
   laplacesxm.com enamel street signs, mokpropertiespr.com site-plan grid,
   nohayliga.com checkered flags, northsidebistro.com veranda railings,
   paradiserentalspr.com bike lanes, sanjuanwatertours.com signal flags,
   racersclubpr.com runway markings, saffronhouseexuma.com Exuma shallows,
   seaplanesinparadise.com flight paths, secrethavenvilla.com palm shade,
   antiguacarrentals.com rising-sun pennants, villarentalstt.com sunrise
   horizon).
   ================================================================= */

:root{
  --red:     #D7262E;   /* logo */
  --red-2:   #A9141C;
  --abyss:   #061A30;   /* footer, deepest band */
  --deep:    #0B2A4A;   /* headings, text accents */
  --blue:    #12508A;
  --lagoon:  #19A7B5;   /* turquoise accents */
  --foam:    #7FD8DF;
  --surface: #E8F6F7;   /* sunlit surface water: heroes, light bands */
  --sand:    #F4ECDF;
  --ink:     #14253A;
  --muted:   #55667A;
  --line:    rgba(11,42,74,.14);

  --font-display: 'Kanit', 'Helvetica Neue', Arial, sans-serif;
  --font-label:   'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --font-body:    'Albert Sans', 'Helvetica Neue', Arial, sans-serif;

  --wrap: 1160px;
  --gutter: 20px;
  --flag: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 24'%3E%3Crect width='34' height='24' rx='2' fill='%23D7262E'/%3E%3Cpath d='M-2 22.5L30 -1.5L36 1.5L4 25.5Z' fill='%23fff'/%3E%3C/svg%3E");
  --gauge: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 16'%3E%3Crect width='100' height='2' fill='%2319A7B5'/%3E%3Cg fill='%230B2A4A'%3E%3Crect x='0' y='2' width='2' height='12'/%3E%3Crect x='20' y='2' width='1.2' height='6'/%3E%3Crect x='40' y='2' width='1.2' height='6'/%3E%3Crect x='60' y='2' width='1.2' height='6'/%3E%3Crect x='80' y='2' width='1.2' height='6'/%3E%3Crect x='50' y='2' width='1.6' height='9'/%3E%3C/g%3E%3C/svg%3E");
  --gauge-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 16'%3E%3Crect width='100' height='2' fill='%23D7262E'/%3E%3Cg fill='%237FD8DF'%3E%3Crect x='0' y='2' width='2' height='12'/%3E%3Crect x='20' y='2' width='1.2' height='6'/%3E%3Crect x='40' y='2' width='1.2' height='6'/%3E%3Crect x='60' y='2' width='1.2' height='6'/%3E%3Crect x='80' y='2' width='1.2' height='6'/%3E%3Crect x='50' y='2' width='1.6' height='9'/%3E%3C/g%3E%3C/svg%3E");
  --vgauge: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 60'%3E%3Crect x='28' width='2' height='60' fill='%2319A7B5'/%3E%3Cg fill='%230B2A4A'%3E%3Crect x='12' y='0' width='16' height='2'/%3E%3Crect x='20' y='15' width='8' height='1.2'/%3E%3Crect x='16' y='30' width='12' height='1.6'/%3E%3Crect x='20' y='45' width='8' height='1.2'/%3E%3C/g%3E%3C/svg%3E");
  --bubbles: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 260' fill='none' stroke='%2319A7B5' stroke-width='2'%3E%3Ccircle cx='60' cy='240' r='12'/%3E%3Ccircle cx='46' cy='200' r='8'/%3E%3Ccircle cx='70' cy='168' r='10'/%3E%3Ccircle cx='54' cy='130' r='6'/%3E%3Ccircle cx='78' cy='104' r='8'/%3E%3Ccircle cx='60' cy='70' r='5'/%3E%3Ccircle cx='70' cy='44' r='4'/%3E%3Ccircle cx='58' cy='20' r='3'/%3E%3Cg stroke='%23fff' stroke-opacity='.9' stroke-width='1.6'%3E%3Cpath d='M54 234a7 7 0 0 1 5-5'/%3E%3Cpath d='M65 162a6 6 0 0 1 4-4'/%3E%3C/g%3E%3C/svg%3E");
  --bubbles-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 260' fill='none' stroke='%237FD8DF' stroke-width='2'%3E%3Ccircle cx='60' cy='240' r='12'/%3E%3Ccircle cx='46' cy='200' r='8'/%3E%3Ccircle cx='70' cy='168' r='10'/%3E%3Ccircle cx='54' cy='130' r='6'/%3E%3Ccircle cx='78' cy='104' r='8'/%3E%3Ccircle cx='60' cy='70' r='5'/%3E%3Ccircle cx='70' cy='44' r='4'/%3E%3Ccircle cx='58' cy='20' r='3'/%3E%3Cg stroke='%23fff' stroke-opacity='.4' stroke-width='1.6'%3E%3Cpath d='M54 234a7 7 0 0 1 5-5'/%3E%3Cpath d='M65 162a6 6 0 0 1 4-4'/%3E%3C/g%3E%3C/svg%3E");
  --vgauge-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 60'%3E%3Crect x='28' width='2' height='60' fill='%2319A7B5'/%3E%3Cg fill='%237FD8DF'%3E%3Crect x='12' y='0' width='16' height='2'/%3E%3Crect x='20' y='15' width='8' height='1.2'/%3E%3Crect x='16' y='30' width='12' height='1.6'/%3E%3Crect x='20' y='45' width='8' height='1.2'/%3E%3C/g%3E%3C/svg%3E");
}

*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body{
  margin: 0;
  background: #fff;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.65;
}
strong{ font-weight: 700; }
img{ max-width: 100%; height: auto; display: block; }
a{ color: var(--blue); }
a:hover{ color: var(--red); }
:focus-visible{ outline: 3px solid var(--lagoon); outline-offset: 3px; }

h1,h2,h3{ font-family: var(--font-display); font-weight: 600; font-style: italic; line-height: 1.08; margin: 0; color: var(--deep); letter-spacing: -.005em; }
h1 em, h2 em{ font-style: italic; color: var(--red); }

.skip-link{
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--deep); color: #fff; padding: 10px 16px; font-weight: 600; text-decoration: none;
}
.skip-link:focus{ top: 12px; }

.flag{ display: inline-block; width: 30px; height: 21px; margin-right: 12px; vertical-align: -4px; background: var(--flag) 0 0 / 100% 100% no-repeat; }

/* ---------- Brand (header + footer): Latitude 17 Scuba logo + name ---------- */
.brand{ display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--deep); }
.brand:hover{ color: var(--deep); }
.brand__logo{ height: 62px; width: auto; flex: none; }
.brand__text{ display: flex; flex-direction: column; line-height: 1.05; min-width: 0; }
.brand__name{ font: italic 700 25px/1.05 var(--font-display); text-transform: uppercase; letter-spacing: .01em; white-space: nowrap; }
.brand__tag{ margin-top: 5px; font: 500 11.5px/1.2 var(--font-label); letter-spacing: .14em; text-transform: uppercase; color: var(--red); white-space: nowrap; }
.site-footer .brand{ color: #fff; }
.site-footer .brand__tag{ color: var(--foam); }
.site-footer .brand{ flex-direction: column; align-items: flex-start; gap: 14px; }
.site-footer .brand__logo{ height: 84px; }
.site-footer .brand__name{ white-space: normal; }
@media (max-width: 480px){
  .brand{ max-width: 100%; }
  .site-header .brand{ flex: 1 1 0; min-width: 0; gap: 9px; }
  .site-header .brand__logo{ height: 50px; }
  .brand__name{ font-size: 20px; white-space: normal; }
  .brand__tag{ font-size: 10px; letter-spacing: .1em; white-space: normal; }
}

/* ---------- Header + shared network menu (.bnet-menu from gandor.tv) ---------- */
.site-header{ position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.97); backdrop-filter: blur(6px); }
.site-header::after{ content: ""; display: block; height: 16px; background: var(--surface) var(--gauge) 0 0 / 100px 16px repeat-x; }
.site-header__inner{
  max-width: var(--wrap); margin: 0 auto; padding: 8px var(--gutter) 6px;
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.nav-toggle{
  margin-left: auto;
  font: 600 13.5px/1 var(--font-label); letter-spacing: .12em; text-transform: uppercase; color: #fff;
  background: var(--red); border: 0; border-radius: 10px; padding: 14px 18px; cursor: pointer;
  box-shadow: inset 0 -3px 0 var(--red-2);
}
html:not(.js) .nav-toggle{ display: none; }

.site-nav{ flex-basis: 100%; }
.js .site-nav{ display: none; }
.js .site-nav.is-open{ display: block; }

.bnet-menu{ list-style: none; margin: 0; padding: 6px 0 12px; }
.bnet-menu a{
  display: block; padding: 12px 2px;
  font: 600 14px/1.3 var(--font-label); letter-spacing: .06em; text-transform: uppercase; color: var(--deep); text-decoration: none;
  border-top: 1px solid var(--line);
}
.bnet-menu a:hover{ color: var(--red); }

/* active page: body page-* class + li bnet-* class */
.page-home .bnet-home a,
.page-website-solutions .bnet-website-solutions a,
.page-thrive .bnet-thrive a,
.page-directory .bnet-directory a,
.page-photos .bnet-photos a,
.page-free-stuff .bnet-free-stuff a,
.page-blog-network .bnet-blog-network a{ color: var(--red); }

@media (min-width: 1260px){
  /* full menu only when logo + menu fit side by side (header can be a little wider than the page content) */
  .site-header__inner{ max-width: 1260px; flex-wrap: nowrap; }
  .site-header .brand{ flex: none; }
  .site-nav, .js .site-nav{ display: block; flex-basis: auto; margin-left: auto; min-width: 0; }
  .nav-toggle{ display: none; }
  .bnet-menu{ display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 2px; padding: 0; }
  .bnet-menu a{ border-top: 0; padding: 8px 8px 22px; font-size: 12.5px; letter-spacing: .02em; white-space: nowrap; position: relative; }
  /* the current page gets a little diver-down flag */
  .page-home .bnet-home a::after,
  .page-website-solutions .bnet-website-solutions a::after,
  .page-thrive .bnet-thrive a::after,
  .page-directory .bnet-directory a::after,
  .page-photos .bnet-photos a::after,
  .page-free-stuff .bnet-free-stuff a::after,
  .page-blog-network .bnet-blog-network a::after{
    content: ""; position: absolute; left: 50%; bottom: 4px; width: 20px; height: 14px; margin-left: -10px;
    background: var(--flag) 0 0 / 100% 100% no-repeat;
  }
  .page-home .bnet-home a,
  .page-website-solutions .bnet-website-solutions a,
  .page-thrive .bnet-thrive a,
  .page-directory .bnet-directory a,
  .page-photos .bnet-photos a,
  .page-free-stuff .bnet-free-stuff a,
  .page-blog-network .bnet-blog-network a{ color: var(--deep); }
}

/* ---------- Heroes: sunlit surface water, bubbles rising on the right ---------- */
.hero{ position: relative; overflow: hidden; background: radial-gradient(70% 60% at 50% -10%, #fff 0%, rgba(255,255,255,0) 70%), linear-gradient(180deg, var(--surface) 0%, #fff 100%); }
.hero::before{ content: ""; position: absolute; right: 2%; top: 24px; width: 120px; height: 260px; background: var(--bubbles) 0 0 / 100% 100% no-repeat; opacity: .55; pointer-events: none; }
.hero__inner{ position: relative; max-width: var(--wrap); margin: 0 auto; padding: 56px var(--gutter) 72px; }
.hero__copy{ max-width: 900px; }
.hero__kicker{ margin: 0 0 16px; font: 600 13.5px/1.4 var(--font-label); letter-spacing: .12em; text-transform: uppercase; color: var(--blue); }
.hero__title{ font-size: clamp(38px, 5.6vw, 70px); text-wrap: balance; }
.hero__lede{ margin: 20px 0 0; max-width: 60ch; font-size: clamp(17.5px, 1.6vw, 20px); color: var(--muted); }
.hero__lede a{ color: var(--blue); }
.hero__actions{ margin: 30px 0 0; display: flex; flex-wrap: wrap; gap: 12px; }
.hero--page .hero__title{ font-size: clamp(36px, 5vw, 58px); }
.hero--page .hero__inner{ padding-top: 48px; padding-bottom: 62px; }
@media (max-width: 760px){ .hero::before, .guide::after{ display: none; } }

/* all heroes: the same deep blue as the field guide (owner, Oct 24 2026) */
.hero{ background: linear-gradient(180deg, var(--blue) 0%, var(--deep) 45%, var(--abyss) 100%); color: rgba(255,255,255,.86); }
.hero::before{ background-image: var(--bubbles-light); opacity: 1; }
.hero .hero__kicker{ color: var(--foam); }
.hero .hero__title{ color: #fff; }
.hero .hero__title em{ color: var(--foam); }
.hero .hero__lede{ color: rgba(255,255,255,.82); }
.hero .btn--line{ color: #fff; box-shadow: inset 0 0 0 2px rgba(255,255,255,.7); }
.hero .btn--line:hover{ background: #fff; color: var(--deep); }
.hero .banner::before{ background-image: var(--vgauge-light); }
.hero .banner img{ box-shadow: 0 0 0 6px var(--abyss), 0 0 0 8px var(--lagoon), 0 30px 50px -30px rgba(0,0,0,.8); }
.hero .hero__lede a{ color: var(--foam); }
.hero .hero__lede a:hover{ color: #fff; }

.btn{
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 50px; padding: 12px 24px; border-radius: 12px;
  font: 600 13.5px/1.2 var(--font-label); letter-spacing: .08em; text-transform: uppercase; text-decoration: none;
  transition: background-color .2s ease, color .2s ease, transform .2s ease;
}
.btn:hover{ transform: translateY(-2px); }
.btn--red{ background: var(--red); color: #fff; box-shadow: inset 0 -4px 0 var(--red-2); }
.btn--red:hover{ background: var(--red-2); color: #fff; }
.btn--navy{ background: var(--deep); color: #fff; box-shadow: inset 0 -4px 0 var(--abyss); }
.btn--navy:hover{ background: var(--blue); color: #fff; }
.btn--line{ color: var(--deep); box-shadow: inset 0 0 0 2px var(--deep); }
.btn--line:hover{ background: var(--deep); color: #fff; }
.btn--line-light{ color: #fff; box-shadow: inset 0 0 0 2px rgba(255,255,255,.7); }
.btn--line-light:hover{ background: #fff; color: var(--deep); }

/* hero photos with a dive-gauge depth scale down the left side (includes/banner.incl.php) */
.banner{ position: relative; margin: 44px 0 0 44px; }
.banner::before{ content: ""; position: absolute; left: -44px; top: 0; bottom: 0; width: 30px; background: var(--vgauge) 0 0 / 30px 60px repeat-y; }
.banner::after{ content: ""; position: absolute; left: -48px; top: 38%; width: 34px; height: 24px; background: var(--flag) 0 0 / 100% 100% no-repeat; }
.banner img{ width: 100%; aspect-ratio: 1280 / 500; object-fit: cover; border-radius: 18px; box-shadow: 0 0 0 6px #fff, 0 0 0 8px var(--lagoon), 0 30px 50px -30px rgba(6,26,48,.7); }
.hero--page .banner{ margin-top: 36px; }
.hero--page .banner img{ aspect-ratio: 1280 / 420; object-position: center 45%; }
@media (max-width: 600px){
  .banner{ margin-left: 8px; margin-right: 8px; }
  .banner::before, .banner::after{ display: none; }
  .banner img{ border-radius: 12px; }
  .hero--page .banner img{ aspect-ratio: 1280 / 500; }
}

/* ---------- Generic sections ---------- */
.section{ padding: 64px 0 80px; }
.section__inner{ max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.section__title{ font-size: clamp(32px, 4vw, 50px); margin-bottom: 28px; }
.section__title::before, .about-blog h2::before, .explore h2::before, .guide h2::before, .drive h2::before, .logbook h2::before{
  content: ""; display: block; width: 40px; height: 28px; margin-bottom: 14px; background: var(--flag) 0 0 / 100% 100% no-repeat;
}
.embed{ min-height: 320px; }

/* page content runs the full content width, same as "Keep exploring";
   the gandor.tv widgets cap themselves at 920px in their own styles */
.network-embed > div[class^="gtv-"]{ max-width: none; margin-top: 0; margin-bottom: 0; }

/* Third-party embeds paint their own white/cream panels; let the page
   background show through (cards inside keep theirs). !important
   because these widgets inject their CSS after ours. */
.page-home .eapps-facebook-feed-inner,
.page-photos .eapps-instagram-feed-header,
.page-thrive .cc-thrive-widget,
.page-directory .network-embed .ui-tabs,
.page-directory .network-embed .ui-tabs-nav,
.page-directory .network-embed .ui-tabs-panel,
.page-directory .network-embed .directory-card{ background: transparent !important; }
/* the directory's CoolestCarib logo + social-icons strip paints its own coloured band — keep it white here (owner, Oct 24 2026) */
.page-directory .network-embed .CoolestCaribLogo,
.page-directory .network-embed .CoolestCaribSocial{ background: #fff !important; }

/* ---------- Field guide (home): the deep-blue band with porthole photos ---------- */
.guide{ position: relative; overflow: hidden; color: rgba(255,255,255,.86); padding: 88px 0 96px;
  background: linear-gradient(180deg, var(--blue) 0%, var(--deep) 45%, var(--abyss) 100%); }
.guide::before{ content: ""; position: absolute; left: 0; right: 0; top: 0; height: 16px; background: var(--gauge-light) 0 0 / 100px 16px repeat-x; opacity: .85; }
.guide::after{ content: ""; position: absolute; right: 3%; top: 40px; width: 110px; height: 240px; background: var(--bubbles-light) 0 0 / 100% 100% no-repeat; pointer-events: none; }
.guide__inner{ position: relative; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.guide__kicker{ margin: 0 0 8px; font: 600 13px/1.4 var(--font-label); letter-spacing: .14em; text-transform: uppercase; color: var(--foam); }
.guide h2{ color: #fff; font-size: clamp(32px, 4vw, 50px); margin-bottom: 12px; max-width: 18ch; }
.guide h2 em{ color: var(--foam); }
.guide__intro{ margin: 0 0 44px; max-width: 58ch; }
.guide__list{ list-style: none; margin: 0; padding: 0; display: grid; gap: 40px 28px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); }
.critter{ text-align: center; }
.critter img{
  width: min(100%, 210px); aspect-ratio: 1; object-fit: cover; border-radius: 50%; margin: 0 auto 18px;
  box-shadow: 0 0 0 6px var(--abyss), 0 0 0 9px var(--lagoon), 0 22px 34px -16px rgba(0,0,0,.8);
}
.critter__depth{ display: inline-block; margin-bottom: 8px; padding: 3px 10px; border-radius: 6px; background: rgba(127,216,223,.14); font: 500 11.5px/1.4 var(--font-label); letter-spacing: .06em; text-transform: uppercase; color: var(--foam); }
.critter h3{ color: #fff; font-size: 25px; margin-bottom: 6px; }
.critter p{ margin: 0 auto; max-width: 30ch; font-size: 16px; line-height: 1.55; }
@media (max-width: 480px){
  .guide__list{ grid-template-columns: 1fr 1fr; gap: 32px 14px; }
  .critter img{ box-shadow: 0 0 0 4px var(--abyss), 0 0 0 6px var(--lagoon); }
  .critter h3{ font-size: 21px; }
  .critter p{ font-size: 15px; }
  .critter__depth{ font-size: 10px; letter-spacing: .02em; }
}

/* ---------- Car Rental STX promotion (home): back on shore, on sand ---------- */
.drive{ background: var(--sand); padding: 92px 0; }
.drive__inner{
  max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter);
  display: grid; gap: 44px; align-items: center;
}
.drive__photo{ position: relative; margin: 0; }
.drive__photo > img:first-child{ width: 100%; aspect-ratio: 8 / 5; object-fit: cover; border-radius: 18px; box-shadow: 0 30px 50px -30px rgba(6,26,48,.6); }
.drive__logo{ position: absolute; left: 18px; bottom: -22px; width: 210px; height: auto; background: #fff; padding: 10px 14px; border-radius: 14px; box-shadow: 0 14px 26px -14px rgba(6,26,48,.55); }
.drive__label{ margin: 0 0 8px; font: 600 12.5px/1.4 var(--font-label); letter-spacing: .1em; text-transform: uppercase; color: #0B7A4B; }
.drive h2{ font-size: clamp(30px, 3.8vw, 46px); margin-bottom: 14px; }
.drive p{ margin: 0 0 16px; max-width: 56ch; }
.drive__list{ list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 8px; }
.drive__list li{ position: relative; padding-left: 34px; }
.drive__list li::before{ content: ""; position: absolute; left: 0; top: .42em; width: 22px; height: 15px; background: var(--flag) 0 0 / 100% 100% no-repeat; }
.drive__actions{ display: flex; flex-wrap: wrap; gap: 10px; margin: 0 !important; }
.drive .btn--line-light{ color: var(--deep); box-shadow: inset 0 0 0 2px var(--deep); }
.drive .btn--line-light:hover{ background: var(--deep); color: #fff; }
@media (min-width: 900px){ .drive__inner{ grid-template-columns: 1.05fr 1fr; gap: 64px; } }
@media (max-width: 480px){ .drive__logo{ width: 170px; left: 12px; } }

/* ---------- From the Latitude 17 dive log (home) ---------- */
.logbook{ background: var(--surface); padding: 88px 0; }
.logbook__inner{
  max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter);
  display: grid; gap: 44px; align-items: center;
}
.logbook__photo{ margin: 0; }
.logbook__photo img{ width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 18px; box-shadow: 0 0 0 6px #fff, 0 0 0 8px var(--lagoon), 0 30px 50px -30px rgba(6,26,48,.7); }
.logbook__logo{ width: 120px; margin-bottom: 14px; }
.logbook h2::before{ display: none; }
.logbook h2{ font-size: clamp(30px, 3.6vw, 44px); margin-bottom: 14px; }
.logbook p{ margin: 0 0 16px; max-width: 58ch; }
@media (min-width: 900px){ .logbook__inner{ grid-template-columns: 1fr 1.05fr; gap: 64px; } }
/* the dive log band: the same deep blue as the field guide and home hero (owner, Oct 24 2026) */
.logbook{ position: relative; color: rgba(255,255,255,.86); background: linear-gradient(180deg, var(--blue) 0%, var(--deep) 45%, var(--abyss) 100%); }
.logbook h2{ color: #fff; }
.logbook__photo img{ box-shadow: 0 0 0 6px var(--abyss), 0 0 0 8px var(--lagoon), 0 30px 50px -30px rgba(0,0,0,.8); }
.logbook .btn--navy{ background: #fff; color: var(--deep); box-shadow: inset 0 -4px 0 var(--foam); }
.logbook .btn--navy:hover{ background: var(--foam); color: var(--abyss); }

/* ---------- About this blog ---------- */
.about-blog{ background: #fff; padding: 76px 0 72px; border-top: 1px solid var(--line); }
.about-blog__inner{
  max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter);
  display: grid; gap: 20px;
}
.about-blog h2{ font-size: clamp(32px, 4vw, 50px); }
.about-blog p{ margin: 0; max-width: 64ch; }
.about-blog .follow-label{ margin-top: 20px; font: 600 12.5px/1.4 var(--font-label); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.follow{ list-style: none; padding: 0; margin: 12px 0 0; display: flex; flex-wrap: wrap; gap: 10px; }
.follow a{
  display: inline-block; padding: 10px 20px; border-radius: 10px;
  background: var(--deep); color: #fff; text-decoration: none; font: 600 12.5px/1.3 var(--font-label); letter-spacing: .08em; text-transform: uppercase;
  box-shadow: inset 0 -3px 0 var(--abyss);
}
.follow a:hover{ background: var(--red); color: #fff; box-shadow: inset 0 -3px 0 var(--red-2); }
@media (min-width: 860px){ .about-blog__inner{ grid-template-columns: 1fr 2fr; gap: 56px; } }

/* ---------- Keep exploring ---------- */
.explore{ padding: 72px 0 32px; background: var(--surface); }
.explore__inner{ max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.explore h2{ font-size: clamp(30px, 3.6vw, 44px); margin-bottom: 34px; }
.explore__grid{ display: grid; gap: 40px; }
@media (min-width: 760px){ .explore__grid{ grid-template-columns: 1fr 1fr; } }
.tile{ display: block; text-decoration: none; color: var(--ink); }
.tile:hover{ color: var(--ink); }
.tile__img{ display: block; transition: transform .25s ease; }
.tile:hover .tile__img{ transform: translateY(-4px); }
.tile__img img{ width: 100%; aspect-ratio: 2 / 1; object-fit: cover; border-radius: 16px; box-shadow: 0 0 0 5px #fff, 0 0 0 7px var(--lagoon), 0 24px 40px -30px rgba(6,26,48,.7); }
.tile__title{ display: block; margin-top: 20px; font: italic 600 26px/1.2 var(--font-display); color: var(--deep); }
.tile:hover .tile__title{ color: var(--red); }
.tile__text{ display: block; margin-top: 4px; color: var(--muted); }

/* ---------- Share ---------- */
.share{ padding: 32px 0 80px; background: var(--surface); }
.share__inner{
  max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter);
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px;
}
.share__label{ margin: 0; font: 600 12.5px/1.4 var(--font-label); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.share__list{ list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.share__list a{
  display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
  background: #fff; box-shadow: 0 0 0 1.5px var(--line);
  transition: box-shadow .2s ease;
}
.share__list a:hover{ box-shadow: 0 0 0 2px var(--red); }
.share__list img{ width: 30px; height: 30px; }

/* ---------- Footer: the deepest water ---------- */
.site-footer{ position: relative; background: var(--abyss); color: rgba(255,255,255,.8); font-size: 16px; }
.site-footer::before{ content: ""; display: block; height: 16px; background: var(--surface) var(--gauge) 0 0 / 100px 16px repeat-x; }
.site-footer__inner{
  max-width: var(--wrap); margin: 0 auto; padding: 52px var(--gutter) 64px;
  display: grid; gap: 40px;
}
.site-footer__inner > *{ min-width: 0; }
.site-footer a{ color: #fff; text-decoration-color: rgba(255,255,255,.3); text-underline-offset: 3px; }
.site-footer a:hover{ color: var(--foam); }
.site-footer__brand p{ margin: 18px 0 0; }
.site-footer h2{ font: 600 12.5px/1.4 var(--font-label); font-style: normal; letter-spacing: .12em; text-transform: uppercase; color: var(--foam); margin-bottom: 14px; }
.site-footer ul{ list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.site-footer__network p{ margin: 0 0 14px; }
.site-footer__network .site-footer__gtv{ margin-bottom: 22px; }
.site-footer__cc{ display: inline-block; background: #fff; border-radius: 12px; padding: 10px 16px; }
.site-footer__cc img{ width: 170px; }
@media (min-width: 900px){
  .site-footer__inner{ grid-template-columns: 1fr 1.4fr 1fr; gap: 56px; }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  .btn, .tile__img, .share__list a{ transition: none; }
}