/* Marcos · Dive Atlas — deep-ocean theme */
:root{
  --ocean-900:#05182a; --ocean-800:#07203a; --ocean-700:#0c2c49;
  --ocean-650:#0f3556; --ocean-600:#123e63; --line:#173f5e;
  --text:#eaf2fb; --muted:#9db8d6; --dim:#7193b4;
  --blue:#3b8cff; --blue-bright:#5aa6ff; --blue-deep:#1f6fe0;
  --glow:rgba(59,140,255,.28);
  --radius:14px; --maxw:1200px;
  --shadow:0 18px 40px rgba(0,0,0,.45);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; color:var(--text); background:var(--ocean-900);
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  line-height:1.65; -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
.bg-deep{position:fixed; inset:0; z-index:-2;
  background:
    radial-gradient(1100px 700px at 78% -8%, #0d3a63 0%, rgba(13,58,99,0) 60%),
    radial-gradient(900px 600px at 8% 108%, #0a2c4d 0%, rgba(10,44,77,0) 60%),
    linear-gradient(180deg,#06203a 0%,#05182a 60%,#041325 100%);}
.bg-rays{position:fixed; inset:0; z-index:-1; opacity:.5; pointer-events:none;
  background:repeating-linear-gradient(108deg, rgba(90,166,255,.045) 0 2px, transparent 2px 120px);}
a{color:var(--blue-bright); text-decoration:none}
a:hover{color:#86bdff}
img{max-width:100%; display:block}
h1,h2,h3{line-height:1.2; font-weight:600; margin:0 0 .4em}
h1{font-size:clamp(2rem,5vw,3.3rem); letter-spacing:-.02em}
h2{font-size:clamp(1.5rem,3vw,2.1rem); letter-spacing:-.01em}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 22px}
.muted{color:var(--muted)} .dim{color:var(--dim)}
.kicker{color:var(--blue-bright); font-size:.8rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase}

/* nav */
.nav{position:sticky; top:0; z-index:1000; backdrop-filter:blur(12px);
  background:rgba(6,26,46,.82); border-bottom:1px solid var(--line)}
.nav .row{display:flex; align-items:center; justify-content:space-between; height:64px; max-width:var(--maxw); margin:0 auto; padding:0 22px}
.brand{display:flex; align-items:center; gap:10px; color:var(--text); font-weight:600; font-size:1.02rem}
.brand .mark{width:26px;height:26px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,var(--blue-bright),var(--blue-deep));
  box-shadow:0 0 14px var(--glow)}
.nav-links{display:flex; gap:6px; align-items:center; list-style:none; margin:0; padding:0}
.nav-links a{color:var(--muted); font-size:.93rem; padding:8px 13px; border-radius:9px; transition:.18s}
.nav-links a:hover{color:var(--text); background:rgba(59,140,255,.10)}
.nav-links a.active{color:#fff; background:rgba(59,140,255,.18)}
.nav-toggle{display:none; background:none; border:0; color:var(--text); font-size:1.5rem; cursor:pointer}

/* buttons / pills */
.btn{display:inline-flex; align-items:center; gap:8px; padding:11px 20px; border-radius:30px; font-weight:600; font-size:.92rem;
  background:var(--blue-deep); color:#fff; border:1px solid transparent; cursor:pointer; transition:.18s}
.btn:hover{background:var(--blue); color:#fff; box-shadow:0 0 24px var(--glow)}
.btn.ghost{background:transparent; border-color:var(--line); color:var(--text)}
.btn.ghost:hover{border-color:var(--blue); background:rgba(59,140,255,.10)}
.pill{display:inline-flex; align-items:center; gap:6px; font-size:.76rem; font-weight:600; padding:4px 11px; border-radius:20px; letter-spacing:.02em}
.pill.log{background:rgba(59,140,255,.16); color:#9fc6ff}
.pill.board{background:rgba(45,212,160,.15); color:#74e3c0}
.pill.photo{background:rgba(245,170,90,.15); color:#f3c07f}
.pill.nophoto{background:rgba(120,150,180,.14); color:#a8c0da}

/* sections */
.section{padding:72px 0}
.section.tight{padding:46px 0}
.section-head{max-width:720px; margin-bottom:34px}
.section-head p{color:var(--muted); margin:.5em 0 0}

/* hero */
.hero{position:relative; padding:84px 0 30px}
.hero h1{margin-bottom:.25em}
.hero .lead{color:var(--muted); font-size:1.18rem; max-width:640px}
.hero-cta{display:flex; gap:12px; margin-top:26px; flex-wrap:wrap}

/* stat strip / cards */
.stat-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px}
.stat{background:linear-gradient(180deg,var(--ocean-700),var(--ocean-800)); border:1px solid var(--line);
  border-radius:var(--radius); padding:18px 20px}
.stat .n{font-size:2rem; font-weight:700; letter-spacing:-.02em; color:#fff}
.stat .n small{font-size:1rem; font-weight:600; color:var(--muted); margin-left:3px}
.stat .l{color:var(--dim); font-size:.82rem; margin-top:2px}
.stat .sub{color:var(--blue-bright); font-size:.76rem; margin-top:4px}

/* map */
#map{height:560px; width:100%; border-radius:var(--radius); border:1px solid var(--line); background:#06182b; box-shadow:var(--shadow)}
.leaflet-container{background:#06182b !important; font-family:inherit}
.dive-flag{cursor:pointer; transition:transform .18s, filter .18s; transform-origin:3.5px 29px;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.55))}
.dive-flag svg{display:block}
.dive-flag:hover{transform:scale(1.22); filter:drop-shadow(0 0 7px var(--glow)) drop-shadow(0 2px 3px rgba(0,0,0,.5))}
.dive-flag.nophoto{opacity:.5}
.dive-flag.nophoto:hover{opacity:.9}
.leaflet-popup-content-wrapper{background:var(--ocean-700); color:var(--text); border:1px solid var(--line); border-radius:12px}
.leaflet-popup-tip{background:var(--ocean-700)}
.leaflet-popup-content{margin:12px 14px; font-size:.9rem}
.leaflet-bar a{background:var(--ocean-700); color:var(--text); border-color:var(--line)}
.leaflet-bar a:hover{background:var(--ocean-600)}

/* trip detail panel (map) */
.panel{position:fixed; top:0; right:0; height:100%; width:min(440px,92vw); z-index:1200;
  background:linear-gradient(180deg,var(--ocean-800),var(--ocean-900)); border-left:1px solid var(--line);
  box-shadow:-20px 0 50px rgba(0,0,0,.5); transform:translateX(102%); transition:transform .32s ease; overflow-y:auto}
.panel.open{transform:translateX(0)}
.panel .ph{position:sticky; top:0; background:rgba(7,32,58,.9); backdrop-filter:blur(8px);
  padding:18px 20px; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; align-items:flex-start; gap:10px}
.panel .ph h3{margin:0; font-size:1.2rem}
.panel .ph .x{background:none;border:0;color:var(--muted);font-size:1.5rem;cursor:pointer;line-height:1}
.panel .body{padding:20px}
.panel .cover{border-radius:12px; border:1px solid var(--line); margin-bottom:16px; width:100%; aspect-ratio:3/2; object-fit:cover}
.dive-row{border:1px solid var(--line); border-radius:12px; padding:13px 15px; margin-bottom:11px; background:rgba(13,43,70,.5)}
.dive-row .t{display:flex; justify-content:space-between; gap:10px; align-items:baseline}
.dive-row .site{font-weight:600}
.dive-row .no{color:var(--dim); font-size:.8rem; font-weight:600}
.dive-row .meta{color:var(--muted); font-size:.84rem; margin-top:5px; display:flex; gap:14px; flex-wrap:wrap}
.dive-row .meta b{color:var(--blue-bright); font-weight:600}
.dive-row .note{color:var(--dim); font-size:.83rem; margin-top:7px}
.op-link{display:inline-flex; align-items:center; gap:6px; font-size:.85rem; margin-top:4px}

/* mini gallery in panel */
.mini-grid{display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:6px}
.mini-grid img{border-radius:10px; aspect-ratio:1; object-fit:cover; border:1px solid var(--line); cursor:pointer; transition:.18s}
.mini-grid img:hover{filter:brightness(1.12)}

/* timeline */
.timeline{position:relative; max-width:920px; margin:0 auto; padding:10px 0}
.timeline::before{content:''; position:absolute; left:26px; top:0; bottom:0; width:2px;
  background:linear-gradient(180deg,transparent,var(--line) 6%,var(--line) 94%,transparent)}
.tl{position:relative; padding:0 0 30px 70px}
.tl .node{position:absolute; left:18px; top:6px; width:18px;height:18px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,var(--blue-bright),var(--blue-deep)); box-shadow:0 0 0 5px rgba(59,140,255,.16),0 0 16px var(--glow)}
.tl.nophoto .node{background:radial-gradient(circle at 35% 30%,#cdd9e6,#6f8fb0); box-shadow:0 0 0 5px rgba(120,150,180,.14)}
.tl .yr{color:var(--blue-bright); font-size:.82rem; font-weight:600; letter-spacing:.04em}
.tl-card{background:linear-gradient(180deg,var(--ocean-700),var(--ocean-800)); border:1px solid var(--line);
  border-radius:var(--radius); padding:16px 18px; margin-top:6px; transition:.2s}
.tl-card:hover{border-color:rgba(59,140,255,.5); box-shadow:0 0 26px rgba(59,140,255,.10)}
.tl-card .top{display:flex; justify-content:space-between; gap:12px; align-items:flex-start}
.tl-card h3{font-size:1.16rem; margin:0}
.tl-card .place{color:var(--muted); font-size:.9rem}
.tl-thumbs{display:flex; gap:7px; margin-top:12px; flex-wrap:wrap}
.tl-thumbs img{width:78px;height:78px;object-fit:cover;border-radius:9px;border:1px solid var(--line);cursor:pointer;transition:.18s}
.tl-thumbs img:hover{filter:brightness(1.12); transform:translateY(-2px)}
.tl-sites{color:var(--dim); font-size:.85rem; margin-top:10px}

/* gallery */
.trip-block{margin-bottom:48px}
.trip-block .bh{display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; margin-bottom:14px; padding-bottom:10px; border-bottom:1px solid var(--line)}
.trip-block .bh h3{margin:0; font-size:1.35rem}
.trip-block .bh .place{color:var(--muted); font-size:.92rem}
.trip-block .bh .date{color:var(--dim); font-size:.85rem; margin-left:auto}
.masonry{column-count:3; column-gap:12px}
.masonry img{width:100%; margin:0 0 12px; border-radius:12px; border:1px solid var(--line); cursor:pointer; transition:.2s; break-inside:avoid}
.masonry img:hover{filter:brightness(1.1); border-color:rgba(59,140,255,.5)}
.masonry .vtile{position:relative; display:block; margin:0 0 12px; cursor:pointer; break-inside:avoid; border-radius:12px; overflow:hidden; border:1px solid var(--line); transition:.2s}
.masonry .vtile img{width:100%; margin:0; border:0; border-radius:0; display:block}
.masonry .vtile:hover{border-color:rgba(59,140,255,.6)}
.masonry .vtile:hover img{filter:brightness(1.08)}
.masonry .vtile .playbadge{position:absolute; inset:0; margin:auto; width:62px; height:62px; border-radius:50%;
  background:rgba(8,32,58,.6); border:2px solid rgba(255,255,255,.85); backdrop-filter:blur(2px);
  display:flex; align-items:center; justify-content:center; pointer-events:none; transition:.2s}
.masonry .vtile .playbadge::after{content:""; margin-left:5px; border-style:solid; border-width:11px 0 11px 18px; border-color:transparent transparent transparent #fff}
.masonry .vtile:hover .playbadge{background:rgba(59,140,255,.75); transform:scale(1.06)}
.gallery-jump{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:30px}
.gallery-jump a{font-size:.83rem; padding:6px 13px; border-radius:20px; border:1px solid var(--line); color:var(--muted)}
.gallery-jump a:hover{border-color:var(--blue); color:var(--text); background:rgba(59,140,255,.10)}

/* lightbox */
.lb{position:fixed; inset:0; z-index:2000; background:rgba(3,12,22,.93); display:none; align-items:center; justify-content:center}
.lb.open{display:flex}
.lb img{max-width:92vw; max-height:88vh; border-radius:10px; box-shadow:var(--shadow)}
.lb .lbvid{max-width:92vw; max-height:88vh; border-radius:10px; box-shadow:var(--shadow); background:#000; display:none}
.lb .x,.lb .nav-btn{position:absolute; background:rgba(13,43,70,.7); border:1px solid var(--line); color:#fff;
  width:46px;height:46px;border-radius:50%; font-size:1.4rem; cursor:pointer; display:flex; align-items:center; justify-content:center}
.lb .x{top:20px; right:22px}
.lb .prev{left:20px; top:50%; transform:translateY(-50%)}
.lb .next{right:20px; top:50%; transform:translateY(-50%)}
.lb .cap{position:absolute; bottom:18px; left:0; right:0; text-align:center; color:var(--muted); font-size:.85rem}

/* stats page */
.bars{display:flex; align-items:flex-end; gap:8px; height:230px; padding:16px 4px; border-bottom:1px solid var(--line); overflow-x:auto}
.bar{flex:1; min-width:26px; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; gap:7px}
.bar .col{width:100%; max-width:34px; border-radius:6px 6px 0 0;
  background:linear-gradient(180deg,var(--blue-bright),var(--blue-deep)); box-shadow:0 0 14px var(--glow); transition:height .8s ease}
.bar .yl{color:var(--dim); font-size:.72rem} .bar .vl{color:var(--muted); font-size:.74rem; font-weight:600}

/* cert cards */
.cert-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:18px}
.cert{position:relative; background:linear-gradient(180deg,var(--ocean-700),var(--ocean-800)); border:1px solid var(--line);
  border-radius:var(--radius); padding:22px; overflow:hidden}
.cert::before{content:''; position:absolute; left:0; top:0; bottom:0; width:5px; background:linear-gradient(180deg,var(--blue-bright),var(--blue-deep))}
.cert .ag{color:var(--blue-bright); font-weight:600; font-size:.82rem; letter-spacing:.08em; text-transform:uppercase}
.cert h3{font-size:1.3rem; margin:.2em 0 .1em}
.cert .when{color:var(--muted); font-size:.9rem}
.cert .dt{color:var(--dim); font-size:.88rem; margin-top:10px}
.cert.has-card{cursor:pointer; transition:transform .18s, border-color .18s, box-shadow .18s}
.cert.has-card:hover,.cert.has-card:focus-visible{transform:translateY(-3px); border-color:rgba(59,140,255,.55); box-shadow:0 10px 30px rgba(0,0,0,.35); outline:none}
.cert .viewcard{display:inline-block; margin-left:10px; vertical-align:middle; font-size:.72rem; font-weight:600; letter-spacing:.04em;
  color:var(--blue-bright); border:1px solid rgba(59,140,255,.4); border-radius:20px; padding:3px 10px; transition:.18s; white-space:nowrap}
.cert.has-card:hover .viewcard,.cert.has-card:focus-visible .viewcard{background:rgba(59,140,255,.15); border-color:var(--blue-bright)}

/* about */
.prose{max-width:760px}
.prose p{color:var(--text); margin:0 0 1.1em}
.tier-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px; margin:24px 0}
.tier{border:1px solid var(--line); border-radius:12px; padding:16px 18px; background:rgba(13,43,70,.4)}
.tier h4{margin:0 0 6px; font-size:1rem} .tier p{font-size:.88rem; color:var(--muted); margin:0}
.op-list{columns:2; gap:18px; margin-top:8px; list-style:none; padding:0}
.op-list li{margin-bottom:7px; break-inside:avoid; color:var(--muted); font-size:.9rem}

/* flags */
.flag{width:24px; height:18px; border-radius:3px; border:1px solid rgba(255,255,255,.18); object-fit:cover; vertical-align:-3px; box-shadow:0 1px 4px rgba(0,0,0,.35)}
.flag.sm{width:20px;height:15px}
.flag.lg{width:34px;height:25px}
.flag-strip{display:flex; flex-wrap:wrap; gap:10px; align-items:center}
.flag-strip .fc{display:inline-flex; align-items:center; gap:7px; padding:6px 11px 6px 8px; border:1px solid var(--line);
  border-radius:22px; background:rgba(13,43,70,.5); font-size:.84rem; color:var(--muted)}
.flag-strip .fc:hover{border-color:rgba(59,140,255,.5); color:var(--text)}
a.fc{text-decoration:none; cursor:pointer; transition:border-color .15s ease, color .15s ease, background .15s ease}
a.fc:hover{background:rgba(19,60,98,.72)}
a.fc:focus-visible{outline:2px solid var(--accent); outline-offset:2px}

/* map.html?c=<iso> — which country the map was filtered to */
.country-note{margin:0 0 14px; padding:9px 14px; border-radius:22px; display:inline-flex; gap:9px;
  align-items:center; font-size:.86rem; color:var(--muted); border:1px solid var(--line);
  background:rgba(13,43,70,.5)}
.country-note strong{color:var(--text); font-weight:600}
.country-note a{color:var(--accent); text-decoration:none}
.country-note a:hover{text-decoration:underline}

/* landing / splash */
.splash{position:relative; min-height:100vh; display:flex; align-items:center; justify-content:center; text-align:center; overflow:hidden}
.splash .shot{position:absolute; inset:0; background-size:cover; background-position:center; z-index:-2; opacity:0; transition:opacity 1.8s ease}
.splash .scrim{position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(4,16,30,.62) 0%, rgba(4,16,30,.5) 40%, rgba(4,18,33,.82) 100%)}
.splash .inner{max-width:860px; padding:40px 22px}
.diveflag{width:96px; height:74px; border-radius:8px; margin:0 auto 26px; box-shadow:0 14px 40px rgba(0,0,0,.55); border:2px solid rgba(255,255,255,.25)}
.splash h1{font-size:clamp(2.4rem,7vw,4.6rem); margin:0 0 .15em; text-shadow:0 4px 30px rgba(0,0,0,.6)}
.splash .tag{font-size:clamp(1.05rem,2.4vw,1.35rem); color:#d6e6f7; max-width:620px; margin:0 auto 14px; text-shadow:0 2px 16px rgba(0,0,0,.6)}
.splash .meta{color:#a8c6e4; font-size:.95rem; margin-bottom:30px}
.splash .enter-cta{display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-bottom:34px}
.splash .scroll-hint{position:absolute; bottom:22px; left:50%; transform:translateX(-50%); color:#bcd6ff; font-size:.8rem; letter-spacing:.1em}
.splash-flags{max-width:760px; margin:0 auto}

/* footer */
.footer{border-top:1px solid var(--line); padding:30px 0; color:var(--dim); font-size:.85rem; text-align:center; margin-top:30px}

/* reveal */
.reveal{opacity:0; transform:translateY(22px); transition:opacity .6s ease, transform .6s ease}
.reveal.in{opacity:1; transform:none}

@media (max-width:820px){
  .nav-links{position:fixed; top:64px; right:0; flex-direction:column; align-items:stretch; gap:2px;
    background:rgba(7,32,58,.98); border-left:1px solid var(--line); border-bottom:1px solid var(--line);
    padding:10px; width:210px; transform:translateX(102%); transition:.26s; height:auto}
  .nav-links.open{transform:translateX(0)}
  .nav-toggle{display:block}
  .masonry{column-count:2}
  .op-list{columns:1}
  #map{height:60vh}
}
@media (max-width:480px){ .masonry{column-count:1} }


/* ---- logbook scan links (added 2026-09-12) ---- */
.logbook-btn{display:inline-flex; align-items:center; gap:7px; margin-top:10px; padding:6px 12px;
  font:inherit; font-size:.82rem; font-weight:600; color:#9fc6ff; cursor:pointer;
  background:rgba(59,140,255,.10); border:1px solid rgba(59,140,255,.30); border-radius:20px;
  transition:background .15s ease, border-color .15s ease, color .15s ease}
.logbook-btn:hover,.logbook-btn:focus-visible{background:rgba(59,140,255,.20); border-color:var(--blue); color:#d6e7ff}
.logbook-btn .ic{font-size:.95rem; line-height:1; opacity:.85}

.tl-logbook{display:flex; align-items:center; gap:7px; flex-wrap:wrap; margin-top:10px}
.tl-logbook .lbl{font-size:.74rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--dim)}
.lb-chip{font:inherit; font-size:.78rem; font-weight:600; padding:3px 10px; cursor:pointer;
  color:#9fc6ff; background:rgba(59,140,255,.10); border:1px solid rgba(59,140,255,.28);
  border-radius:14px; transition:background .15s ease, border-color .15s ease, color .15s ease}
.lb-chip:hover,.lb-chip:focus-visible{background:rgba(59,140,255,.22); border-color:var(--blue); color:#d6e7ff}