/* ============================================================
   The Scuba Atlas — "Sunlit Reef" design system
   Editorial travel-magazine register: warm paper, ocean accents,
   hairline rules instead of boxes, photography everywhere.
   ============================================================ */

:root{
  --paper:#fbf7f0;          /* warm off-white */
  --paper2:#f3ecdf;         /* sand fill for alternating sections */
  --ink:#122b3d;            /* deep slate-blue text */
  --ink2:#4a6274;           /* secondary text */
  --lagoon:#0e9aae;         /* turquoise primary */
  --lagoon-deep:#0a6f80;
  --deep:#0b3c5d;           /* deep ocean blue */
  --abyss:#071f31;
  --coral:#e85d4a;          /* warm accent */
  --coral-soft:#f9ded7;
  --seafoam:#7ccdb7;
  --amber:#eda548;
  --rule:#d9cfc0;           /* hairlines on paper */
  --rule2:#c4b8a4;
  --card:#ffffff;
  --shadow:0 1px 2px rgba(18,43,61,.06),0 8px 24px -18px rgba(18,43,61,.25);
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --maxw:1180px;
}
[data-theme="dark"]{
  --paper:#081d2e;
  --paper2:#0b2438;
  --ink:#e9f2f4;
  --ink2:#9db4c0;
  --lagoon:#27c3d3;
  --lagoon-deep:#7adfe9;
  --deep:#9cc4e0;
  --abyss:#041016;
  --coral:#ff8570;
  --coral-soft:#3a2018;
  --seafoam:#59b3a0;
  --amber:#f0b46b;
  --rule:#1d3a50;
  --rule2:#2a4a63;
  --card:#0d2940;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 10px 28px -18px rgba(0,0,0,.6);
}

*{box-sizing:border-box}
html{overflow-x:clip;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:15px/1.55 var(--sans);overflow-x:clip}
a{color:var(--lagoon-deep);text-decoration:none}
a:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px}
img{max-width:100%;display:block}
h1,h2,h3{font-family:var(--serif);font-weight:600;letter-spacing:.01em;line-height:1.18;margin:0 0 .45em}
h1{font-size:2rem}
h2{font-size:1.42rem}
h3{font-size:1.12rem}
p{margin:.4em 0 .9em}
.num{font-variant-numeric:tabular-nums;text-align:right}
.muted{color:var(--ink2)}
.fineprint{font-size:.78rem;color:var(--ink2)}
.nowrap{white-space:nowrap}

/* ---------- header ---------- */
.topbar{display:flex;align-items:center;gap:14px;padding:10px 20px;
  background:var(--paper);border-bottom:1px solid var(--rule);
  position:sticky;top:0;z-index:60}
.burger{display:none;background:none;border:none;font-size:1.3rem;color:var(--ink);cursor:pointer;padding:4px 6px}
.logo-wrap{display:flex;flex-direction:column;flex:0 0 auto;min-width:auto}
.logo{font-family:var(--serif);font-size:1.34rem;font-weight:700;color:var(--ink);letter-spacing:.005em}
.logo span{color:var(--lagoon)}
.logo:hover{text-decoration:none}
.logo-img{height:30px;width:auto}
.tagline{font-size:.68rem;color:var(--ink2);letter-spacing:.02em;max-width:300px;line-height:1.25}
.mainnav{display:flex;gap:2px;align-items:center;flex-wrap:nowrap;margin-inline-start:6px}
.mainnav > a,.mainnav .ddbtn{padding:7px 9px;color:var(--ink);font-weight:600;font-size:.86rem;border-radius:7px;white-space:nowrap}
.mainnav > a:hover,.mainnav .ddbtn:hover{background:var(--paper2);text-decoration:none}
.dd{position:relative}
.ddmenu{display:none;position:absolute;top:100%;inset-inline-start:0;background:var(--card);border:1px solid var(--rule);
  border-radius:10px;box-shadow:var(--shadow);padding:8px;min-width:230px;z-index:70}
.ddmenu.open{display:block}
.ddmenu a{display:block;padding:7px 10px;color:var(--ink);border-radius:6px;font-size:.87rem}
.ddmenu a:hover{background:var(--paper2);text-decoration:none}
.searchwrap{position:relative;margin-inline-start:auto;flex:0 1 300px;min-width:130px}
#searchBox{width:100%;padding:8px 12px;border:1px solid var(--rule2);border-radius:20px;
  background:var(--card);color:var(--ink);font-size:16px}
#searchBox:focus{outline:2px solid var(--lagoon);outline-offset:0;border-color:transparent}
.searchresults{display:none;position:absolute;top:110%;inset-inline:0;background:var(--card);
  border:1px solid var(--rule);border-radius:10px;box-shadow:var(--shadow);z-index:80;overflow:hidden}
.searchresults.open{display:block}
.searchresults a{display:flex;justify-content:space-between;gap:10px;padding:9px 12px;color:var(--ink);font-size:.86rem;border-bottom:1px solid var(--rule)}
.searchresults a:last-child{border-bottom:none}
.searchresults a:hover{background:var(--paper2);text-decoration:none}
.searchresults .k{color:var(--ink2);font-size:.72rem;white-space:nowrap;align-self:center}
.savebtn{position:relative;font-size:1.1rem;color:var(--amber);padding:4px 6px}
.savebtn:hover{text-decoration:none}
.favbadge{position:absolute;top:-4px;inset-inline-end:-7px;background:var(--coral);color:#fff;
  font-size:.62rem;font-weight:700;border-radius:9px;padding:1px 5px}
.theme-toggle{background:none;border:1px solid var(--rule2);color:var(--ink);border-radius:50%;
  width:30px;height:30px;cursor:pointer;font-size:.95rem;flex:0 0 auto}
.userbtn{background:none;border:none;font-size:1.15rem;cursor:pointer;color:var(--ink);padding:2px 4px}

/* ---------- offcanvas ---------- */
.offcanvas{position:fixed;top:0;bottom:0;width:300px;max-width:86vw;background:var(--paper);
  z-index:100;padding:14px;overflow-y:auto;visibility:hidden;
  transition:transform .22s ease,visibility 0s .22s;box-shadow:var(--shadow)}
.offcanvas.left{left:0;transform:translateX(-105%)}
.offcanvas.right{right:0;transform:translateX(105%)}
.offcanvas.open{transform:none;visibility:visible;transition:transform .22s ease}
.oc-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.oc-close{background:none;border:none;font-size:1.4rem;cursor:pointer;color:var(--ink)}
.oc-link{display:block;padding:9px 6px;color:var(--ink);font-weight:600;border-bottom:1px solid var(--rule)}
.offcanvas details{border-bottom:1px solid var(--rule);padding:6px 0}
.offcanvas summary{font-weight:700;padding:6px;cursor:pointer}
.offcanvas details a{display:block;padding:6px 14px;color:var(--ink)}
.oc-card{background:var(--paper2);border-radius:10px;padding:10px 12px;margin:8px 0;color:var(--ink)}
.oc-card p{margin:.3em 0 0;font-size:.8rem;color:var(--ink2)}
.oc-row{display:flex;justify-content:space-between;align-items:center;padding:10px 4px;border-bottom:1px solid var(--rule)}
.oc-view{background:var(--paper2);border-radius:10px;padding:10px 12px;margin:10px 0;font-size:.83rem}
.oc-backdrop{position:fixed;inset:0;background:rgba(7,31,49,.45);z-index:90;display:none}
.oc-backdrop.open{display:block}
.lang-sel{padding:6px 10px;border-radius:8px;border:1px solid var(--rule2);background:var(--card);color:var(--ink);font-size:16px}

/* ---------- page scaffold ---------- */
.page{max-width:var(--maxw);margin:0 auto;padding:18px 20px 40px}
.crumbs{font-size:.8rem;color:var(--ink2);margin:2px 0 14px}
.crumbs a{color:var(--ink2)}
.crumbs span{margin:0 4px;color:var(--rule2)}
.crumbs b{color:var(--ink);font-weight:600}
.depthrule{height:3px;border:none;margin:26px 0;border-radius:2px;
  background:linear-gradient(90deg,var(--seafoam),var(--lagoon) 30%,var(--deep) 75%,var(--abyss))}
.kicker{font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--lagoon-deep);margin:0 0 6px}
.sechead{display:flex;align-items:baseline;justify-content:space-between;gap:14px;margin:30px 0 14px}
.sechead .more{font-size:.84rem;white-space:nowrap}
.lead{font-size:1.04rem;color:var(--ink2);max-width:62ch}

/* full-bleed band (sand-colored alternating sections) */
.band{margin:34px calc(50% - 50vw);padding:26px calc(50vw - 50%);background:var(--paper2)}
.band.deepband{background:linear-gradient(180deg,var(--deep),var(--abyss));color:#eaf4f6}
.band.deepband h2,.band.deepband h3{color:#fff}
.band.deepband .muted,.band.deepband .fineprint{color:#a8c4d4}
.band.deepband a{color:#8fe0ea}

/* ---------- hero ---------- */
.hero{position:relative;margin:0 calc(50% - 50vw) 26px;min-height:clamp(300px,46vw,540px);
  display:flex;align-items:flex-end;background:var(--abyss)}
.hero .heroimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(7,31,49,0) 30%,rgba(7,31,49,.42) 68%,rgba(7,31,49,.82));}
.hero-inner{position:relative;z-index:2;width:100%;max-width:var(--maxw);margin:0 auto;padding:26px 20px}
.hero h1{color:#fff;font-size:clamp(1.7rem,4.4vw,3rem);text-shadow:0 2px 18px rgba(0,0,0,.45);margin-bottom:.2em}
.hero .sub{color:#dcebf2;max-width:64ch;font-size:1.02rem;text-shadow:0 1px 10px rgba(0,0,0,.5)}
.hero .chiprow{margin-top:12px}
.hero-credit{position:absolute;bottom:8px;inset-inline-end:12px;z-index:3;font-size:.66rem;color:#b9cdd8;opacity:.85}
.herostrip{position:relative;margin:0 calc(50% - 50vw) 22px;min-height:clamp(170px,24vw,280px);
  display:flex;align-items:flex-end;background:var(--abyss)}
.herostrip .heroimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.herostrip::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(7,31,49,.05) 35%,rgba(7,31,49,.78))}
.herostrip .hero-inner{padding:18px 20px}
.herostrip h1{color:#fff;font-size:clamp(1.5rem,3.4vw,2.3rem);text-shadow:0 2px 14px rgba(0,0,0,.45)}

/* chips */
.chip{display:inline-block;padding:3px 11px;border-radius:14px;font-size:.76rem;font-weight:600;
  background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.35);margin:0 6px 6px 0;backdrop-filter:blur(2px)}
.page .chip,.band .chip{background:var(--card);color:var(--ink);border:1px solid var(--rule2)}
a.chip:hover{text-decoration:none;border-color:var(--lagoon)}
.chip.coral{background:var(--coral-soft);border-color:transparent;color:var(--coral)}
[data-theme="dark"] .chip.coral{color:#ffb3a6}
.chiprow{line-height:2}

/* confidence + labels */
.conf{display:inline-block;font-size:.68rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  padding:2px 8px;border-radius:4px}
.conf-well{color:#1e7d4f;background:rgba(46,160,103,.13)}
.conf-doc{color:var(--lagoon-deep);background:rgba(14,154,174,.12)}
.conf-est{color:#a06a1f;background:rgba(237,165,72,.16)}
.conf-unv{color:var(--ink2);background:rgba(120,130,140,.14)}
[data-theme="dark"] .conf-well{color:#6fd8a5}
[data-theme="dark"] .conf-est{color:#f0c184}

/* guided view helper text */
.gh{display:none;font-size:.78rem;color:var(--ink2);font-weight:400}
body.guided .gh{display:inline}
body.guided .gh.block{display:block;margin:2px 0 8px}

/* ---------- photo cards ---------- */
.cardgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:18px}
.cardgrid.wide{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.pcard{position:relative;background:var(--card);border-radius:12px;overflow:hidden;box-shadow:var(--shadow);
  display:flex;flex-direction:column;color:var(--ink)}
.pcard:hover{text-decoration:none;transform:translateY(-2px);transition:transform .15s ease}
.pcard .pimg{aspect-ratio:3/2;object-fit:cover;width:100%;background:linear-gradient(160deg,var(--lagoon),var(--deep))}
.pcard .pbody{padding:11px 13px 13px;display:flex;flex-direction:column;gap:3px;flex:1}
.pcard h3{margin:0;font-size:1.02rem}
.pcard .sub{font-size:.8rem;color:var(--ink2)}
.pcard .meta{margin-top:auto;padding-top:8px;font-size:.76rem;color:var(--ink2);display:flex;gap:10px;flex-wrap:wrap}
.pcard .favstar{position:absolute;top:8px;inset-inline-end:8px;z-index:3;background:rgba(7,31,49,.45);
  border:none;color:#fff;border-radius:50%;width:30px;height:30px;cursor:pointer;font-size:.95rem;line-height:1}
.pcard .favstar.on{color:var(--amber)}
.pcard .flag{position:absolute;top:8px;inset-inline-start:8px;z-index:3;font-size:.68rem;font-weight:700;
  background:rgba(7,31,49,.55);color:#fff;padding:3px 9px;border-radius:10px;letter-spacing:.04em}

/* featured split (1 big + stack) */
.feature-split{display:grid;grid-template-columns:1.6fr 1fr;gap:18px}
.feature-split .pcard.big .pimg{aspect-ratio:16/9}
.stackrow{display:flex;gap:12px;background:var(--card);border-radius:12px;overflow:hidden;box-shadow:var(--shadow);color:var(--ink)}
.stackrow img{width:118px;height:88px;object-fit:cover;flex:0 0 auto;background:linear-gradient(160deg,var(--lagoon),var(--deep))}
.stackrow .sbody{padding:8px 12px 8px 0;min-width:0}
.stackrow h3{font-size:.95rem;margin:0 0 2px}
.stackrow .sub{font-size:.78rem;color:var(--ink2)}
.stackrow:hover{text-decoration:none}

/* editorial row (image beside prose) */
.edrow{display:grid;grid-template-columns:minmax(240px,380px) 1fr;gap:24px;align-items:start;margin:20px 0}
.edrow.flip{grid-template-columns:1fr minmax(240px,380px)}
.edrow img{border-radius:12px;box-shadow:var(--shadow);aspect-ratio:3/2;object-fit:cover;width:100%}
.imgcredit{font-size:.66rem;color:var(--ink2);margin-top:4px;opacity:.85}

/* gallery */
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px}
.gallery img{aspect-ratio:3/2;object-fit:cover;border-radius:9px;width:100%}
.gallery figure{margin:0}
.gallery figcaption{font-size:.7rem;color:var(--ink2);padding:3px 2px}

/* ---------- data tables (hairline rules, no boxes) ---------- */
.tablewrap{overflow-x:auto;position:relative;margin:10px 0;
  background:linear-gradient(to right,var(--paper) 30%,rgba(0,0,0,0)),
             linear-gradient(to left,var(--paper) 30%,rgba(0,0,0,0)) 100% 0,
             radial-gradient(farthest-side at 0 50%,rgba(18,43,61,.16),rgba(0,0,0,0)),
             radial-gradient(farthest-side at 100% 50%,rgba(18,43,61,.16),rgba(0,0,0,0)) 100% 0;
  background-repeat:no-repeat;background-size:44px 100%,44px 100%,16px 100%,16px 100%;background-attachment:local,local,scroll,scroll}
table.data{width:100%;border-collapse:collapse;font-size:.88rem}
table.data th{font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink2);
  text-align:right;font-weight:700;padding:8px 10px;border-bottom:2px solid var(--rule2);white-space:nowrap}
table.data th.namecol,table.data td.namecol{text-align:left}
[dir="rtl"] table.data th.namecol,[dir="rtl"] table.data td.namecol{text-align:right}
table.data td{padding:8px 10px;border-bottom:1px solid var(--rule);vertical-align:middle}
table.data td.num{white-space:nowrap}
table.data tr:hover td{background:color-mix(in srgb,var(--paper2) 55%,transparent)}
table.data .thumb{width:52px;height:38px;object-fit:cover;border-radius:6px}
table.sortable th{cursor:pointer}
.namecol a{color:var(--ink);font-weight:600}
.namecol .sub{display:block;font-size:.74rem;color:var(--ink2);font-weight:400}

/* ---------- month chart (CSS bars) ---------- */
.mchart{display:grid;grid-template-columns:repeat(12,1fr);gap:6px;align-items:end;margin:12px 0 4px}
.mchart .mcol{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0}
.mchart .mbar{width:100%;max-width:34px;border-radius:5px 5px 2px 2px;min-height:6px;
  background:linear-gradient(180deg,var(--lagoon),var(--deep));opacity:.92}
.mchart .r0{background:var(--rule);height:6px}
.mchart .mlab{font-size:.66rem;color:var(--ink2);font-weight:600}
.mchart .mcol.cur .mlab{color:var(--coral);font-weight:800}
.mchart a.mcol:hover{text-decoration:none}
.mlegend{font-size:.72rem;color:var(--ink2)}

/* month table detail */
.mtable td .mini{font-size:.74rem;color:var(--ink2);display:block}

/* ---------- key facts sheet ---------- */
.factsheet{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1px;background:var(--rule);
  border-block:1px solid var(--rule);margin:16px 0}
.fact{background:var(--paper);padding:10px 12px}
.band .fact{background:var(--paper2)}
.fact .fl{font-size:.68rem;letter-spacing:.09em;text-transform:uppercase;color:var(--ink2);font-weight:700}
.fact .fv{font-size:1.02rem;font-weight:600;margin-top:2px}
.fact .fv.small{font-size:.88rem}

/* ---------- alerts / notices ---------- */
.notice{border-inline-start:3px solid var(--lagoon);background:var(--paper2);padding:10px 14px;border-radius:0 8px 8px 0;margin:14px 0;font-size:.9rem}
.notice.warn{border-color:var(--amber)}
.notice.danger{border-color:var(--coral);background:var(--coral-soft)}
[data-theme="dark"] .notice.danger{background:#2c1712}
.notice b:first-child{display:block;margin-bottom:2px}
.notice.danger a{color:var(--coral);font-weight:700}

/* ---------- buttons / forms ---------- */
.tbtn{background:var(--lagoon);color:#fff;border:none;border-radius:20px;padding:9px 18px;
  font-weight:700;font-size:.9rem;cursor:pointer}
.tbtn:hover{background:var(--lagoon-deep)}
.tbtn.ghost{background:transparent;color:var(--lagoon-deep);border:1.5px solid var(--lagoon)}
.tbtn.coralbtn{background:var(--coral)}
.filterbar{display:flex;flex-wrap:wrap;gap:10px;align-items:end;padding:14px 0;border-block:1px solid var(--rule);margin:8px 0 16px}
.fld{display:flex;flex-direction:column;gap:3px;min-width:0}
.fld label{font-size:.68rem;letter-spacing:.07em;text-transform:uppercase;color:var(--ink2);font-weight:700}
.fld select,.fld input{padding:7px 10px;border:1px solid var(--rule2);border-radius:8px;background:var(--card);
  color:var(--ink);font-size:16px;min-width:0;max-width:210px}
.presets{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 14px}

/* ---------- news ---------- */
.newsgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}
.newscard{display:flex;flex-direction:column;background:var(--card);border-radius:12px;overflow:hidden;box-shadow:var(--shadow);color:var(--ink)}
.newscard img{aspect-ratio:16/9;object-fit:cover;width:100%}
.newscard .nbody{padding:11px 13px}
.newscard h3{font-size:.98rem;margin:0 0 4px;font-family:var(--sans);font-weight:700}
.newscard .src{font-size:.74rem;color:var(--ink2)}
.newscard:hover{text-decoration:none}
.brief{border-inline-start:3px solid var(--seafoam);padding:8px 14px;margin:10px 0;background:var(--paper2);border-radius:0 8px 8px 0}
.brief .blab{font-size:.66rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--lagoon-deep)}

/* ---------- videos ---------- */
.vidgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
.vidcard{background:var(--card);border-radius:12px;overflow:hidden;box-shadow:var(--shadow);color:var(--ink)}
.vidcard img{aspect-ratio:16/9;object-fit:cover;width:100%}
.vidcard .vbody{padding:10px 12px}
.vidcard h3{font-size:.92rem;font-family:var(--sans);font-weight:700;margin:0 0 3px}
.vidcard .src{font-size:.74rem;color:var(--ink2)}
.vidcard:hover{text-decoration:none}

/* ---------- species month matrix ---------- */
.monthdots{display:grid;grid-template-columns:repeat(12,1fr);gap:4px;max-width:420px}
.monthdots .md{aspect-ratio:1;border-radius:50%;background:var(--rule);position:relative}
.monthdots .md.on{background:var(--lagoon)}
.monthdots .md.res{background:var(--seafoam)}
.monthdots .mdl{position:absolute;top:110%;left:50%;transform:translateX(-50%);font-size:.6rem;color:var(--ink2)}
.monthdots{margin-bottom:20px}

/* ---------- prose (learn guides) ---------- */
.prose{max-width:72ch;font-size:1rem;line-height:1.7}
.prose h2{margin-top:1.4em;font-size:1.3rem}
.prose ul{padding-inline-start:1.2em}
.prose li{margin:.35em 0}
.bodycols{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:34px;align-items:start}
.sidebar{position:sticky;top:70px;display:flex;flex-direction:column;gap:16px}
.sidebox{border-top:2px solid var(--rule2);padding-top:10px}
.sidebox h3{font-size:.8rem;letter-spacing:.09em;text-transform:uppercase;font-family:var(--sans);color:var(--ink2)}
.sidebox a{display:block;padding:5px 0;color:var(--ink);font-size:.9rem;border-bottom:1px solid var(--rule)}
.sidebox a:last-child{border-bottom:none}

/* ---------- trust strip ---------- */
.truststrip{display:flex;flex-wrap:wrap;gap:0;justify-content:space-between;border-block:1px solid var(--rule2);margin:0 0 8px}
.tstat{flex:1 1 120px;text-align:center;padding:14px 8px}
.tstat b{display:block;font-size:1.5rem;font-family:var(--serif);color:var(--deep)}
[data-theme="dark"] .tstat b{color:var(--lagoon)}
.tstat span{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink2);font-weight:700}
.stance{text-align:center;font-size:.8rem;color:var(--ink2);margin:8px 0 26px}

/* ---------- ask ---------- */
.askbox{max-width:680px;margin:0 auto}
.askbox form{display:flex;gap:10px}
.askbox input{flex:1;padding:12px 16px;font-size:16px;border:1.5px solid var(--rule2);border-radius:24px;background:var(--card);color:var(--ink)}
.ask-examples a{display:inline-block;margin:0 8px 8px 0}
#askOut{background:var(--paper2);border-radius:12px;padding:16px 18px;margin-top:18px}

/* ---------- map ---------- */
.mapwrap{position:relative;background:linear-gradient(180deg,#0d3b57,#072033);border-radius:14px;overflow:hidden;box-shadow:var(--shadow)}
.mapwrap svg{display:block;width:100%;height:auto}
.mapwrap .land{fill:#1b5a7a;stroke:#2e7396;stroke-width:.4}
.mapdot{fill:var(--amber);stroke:#fff;stroke-width:.6;cursor:pointer}
.mapdot:hover{fill:var(--coral)}
.maplegend{font-size:.76rem;color:var(--ink2);margin-top:8px}
.locator{max-width:420px}
.locator .mapwrap{border-radius:10px}

/* ---------- footer ---------- */
.megafooter{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px;
  max-width:var(--maxw);margin:30px auto 0;padding:26px 20px;border-top:1px solid var(--rule)}
.megafooter h2{font-size:.8rem;letter-spacing:.09em;text-transform:uppercase;font-family:var(--sans);margin-bottom:8px}
.megafooter h2 a{color:var(--ink)}
.megafooter a{display:block;color:var(--ink2);font-size:.84rem;padding:2.5px 0}
.footer{background:var(--abyss);color:#b6cbd8;margin-top:26px;padding:34px 20px 40px;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:22px}
.footer a{color:#cfe2ec;display:block;padding:2.5px 0;font-size:.85rem}
.footer .f-col b{color:#fff;display:block;margin-bottom:6px;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase}
.f-family,.f-sub,.f-langs,.f-legal{grid-column:1/-1}
.f-family{border-top:1px solid #12374f;padding-top:16px;font-size:.85rem}
.f-family a{display:inline;padding:0}
.f-sub{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.f-sub input{padding:9px 14px;border-radius:20px;border:1px solid #2a5674;background:#0c2a40;color:#fff;font-size:16px;min-width:240px}
.f-legal{font-size:.74rem;color:#8fa9ba;border-top:1px solid #12374f;padding-top:16px}
.f-legal a{display:inline;padding:0;color:#b8d4e2}
.f-legal p{margin:.5em 0}

/* ---------- admin ---------- */
.adminbar{display:flex;gap:14px;align-items:center;background:var(--paper2);padding:10px 14px;border-radius:10px;margin-bottom:16px;font-size:.86rem;flex-wrap:wrap}
.qbar{height:8px;border-radius:4px;background:var(--rule);position:relative;min-width:90px}
.qbar i{position:absolute;inset-block:0;inset-inline-start:0;border-radius:4px;background:linear-gradient(90deg,var(--coral),var(--amber) 55%,var(--seafoam))}
.progress{height:10px;background:var(--rule);border-radius:5px;overflow:hidden}
.progress i{display:block;height:100%;background:var(--lagoon)}

/* ---------- misc ---------- */
.cols2{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.scrollrow{display:grid;grid-auto-flow:column;grid-auto-columns:260px;gap:14px;overflow-x:auto;padding-bottom:8px;scroll-snap-type:x mandatory}
.scrollrow > *{scroll-snap-align:start}
.srcline{font-size:.76rem;color:var(--ink2);border-top:1px solid var(--rule);margin-top:20px;padding-top:8px}
.srcline a{margin-inline-end:10px}
.pill-nav{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 16px}
.pill-nav a{padding:5px 13px;border:1px solid var(--rule2);border-radius:16px;font-size:.8rem;color:var(--ink);font-weight:600}
.pill-nav a.cur,.pill-nav a:hover{background:var(--deep);border-color:var(--deep);color:#fff;text-decoration:none}
[data-theme="dark"] .pill-nav a.cur,[data-theme="dark"] .pill-nav a:hover{background:var(--lagoon);border-color:var(--lagoon);color:#04222e}
.starline .favstar{background:none;border:1px solid var(--rule2);border-radius:16px;padding:5px 13px;cursor:pointer;color:var(--ink);font-size:.82rem}
.starline .favstar.on{color:var(--amber);border-color:var(--amber)}
.calcout{font-size:1.3rem;font-family:var(--serif);color:var(--deep);margin-top:10px}
[data-theme="dark"] .calcout{color:var(--lagoon)}

/* ---------- responsive ---------- */
@media (max-width:1120px){
  .tagline{display:none}
  .mainnav > a,.mainnav .ddbtn{padding:7px 6px;font-size:.82rem}
}
@media (max-width:950px){
  .mainnav{display:none}
  .burger{display:block}
  .bodycols{grid-template-columns:1fr}
  .sidebar{position:static}
  .feature-split{grid-template-columns:1fr}
  .cols2{grid-template-columns:1fr}
  .edrow,.edrow.flip{grid-template-columns:1fr}
}
@media (max-width:640px){
  .page{padding:14px 14px 30px}
  .topbar{padding:8px 10px;gap:8px;flex-wrap:wrap}
  .searchwrap{flex:1 1 100%;order:10;margin-inline-start:0;min-width:0}
  .logo-wrap{flex:1 1 auto;min-width:0}
  .logo{font-size:1.15rem}
  .savebtn,.theme-toggle,.userbtn{flex:0 0 auto}
  h1{font-size:1.5rem}
  .factsheet{grid-template-columns:repeat(2,1fr)}
  .mchart{gap:3px}
  .mchart .mlab{font-size:.56rem}
  .hero{min-height:280px}
  input,select,textarea,#searchBox,.fld select,.fld input,.askbox input,.f-sub input{font-size:16px}
}

/* ---------- a11y ---------- */
.skiplink{position:absolute;left:-9999px;top:0;background:var(--deep);color:#fff;
  padding:10px 18px;border-radius:0 0 10px 0;z-index:200;font-weight:700}
.skiplink:focus{left:0}
a:focus-visible,button:focus-visible,select:focus-visible,input:focus-visible,summary:focus-visible{
  outline:2px solid var(--lagoon);outline-offset:2px;border-radius:4px}

/* ---------- marine-life calendar grid ---------- */
.calgrid th{text-align:center}
.calcell{position:relative;text-align:center;min-width:26px}
.calcell .md{display:inline-block;width:13px;height:13px;border-radius:50%}
.calcell .calcount{position:absolute;top:1px;right:2px;font-size:.56rem;color:var(--ink2)}
.calgrid td.namecol{white-space:nowrap}

/* map layer dot colors */
.mapdot.dot-site{fill:#7ccdb7;stroke-width:.3}
.mapdot.dot-wreck{fill:#ff8570}
.mapdot.dot-site:hover,.mapdot.dot-wreck:hover{fill:#ffd27a}