/* =============================================================================
   Malpelo Primer: "Deep Blue" theme
   Loaded after each page's own stylesheet. Re-points the shared design tokens
   to a deep-ocean palette, then restyles the nav, hero, species cards, tables
   and the overview-only components (photo hero, page tiles, season picker).
   ========================================================================== */

/* ---- tokens -------------------------------------------------------------- */
:root{
  --bg:#061726; --panel:#0B2236; --panel-2:#0F2A41;
  --ink:#EAF2F5; --muted:#A9BDCA; --line:#1E3A52; --line-strong:#2C4D68;
  --dark:#04111D; --dark-2:#0B2236; --dark-line:#1E3A52;
  --on-dark:#EAF2F5; --on-dark-muted:#A9BDCA;
  /* graphic accent (bars, badges, active states) */
  --red:#7FE0D2; --red-strong:#5CC9BA; --red-weak:#0F3A40; --on-red:#061726;
  /* text accent (links, labels) */
  --blue:#7FE0D2; --blue-strong:#B9F0E8; --blue-weak:#0E2F3C;
  /* secondary */
  --petrol:#79B8E6; --petrol-weak:#0E2A40;
  --tip:#8FD9A8;     --tip-bg:#0D2A22;
  --warn:#F2C46B;    --warn-bg:#2A2312;
  --caution:#F29C8A; --caution-bg:#2E1815;
  --gold:#E2B85C;

  --disp:'Instrument Serif', Georgia, 'Times New Roman', serif;
  --sans:'Instrument Sans', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  --mono:'Instrument Sans', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  --radius:10px; --radius-lg:16px;
  color-scheme:dark;
}
body{background:var(--bg); color:var(--ink); font-size:17px}
::selection{background:#7FE0D2; color:#061726}
a{color:var(--blue); text-decoration-color:color-mix(in srgb, var(--blue) 45%, transparent)}
a:hover{color:var(--blue-strong)}

/* ---- type ----------------------------------------------------------------- */
h1,h2,h3{font-family:var(--disp); font-weight:400; letter-spacing:-.005em; text-transform:none}
h1{font-size:clamp(44px,6.4vw,84px); line-height:1; font-weight:400}
h1 em{font-style:italic; color:var(--blue)}
h2{font-size:clamp(34px,4.2vw,50px); line-height:1.05; font-weight:400; margin-bottom:6px}
h3{font-size:clamp(26px,2.6vw,32px); line-height:1.1; margin:34px 0 10px}
h4{font-family:var(--sans); color:var(--blue); text-transform:uppercase; letter-spacing:.1em; font-size:13px}
.eyebrow,.mod-kicker{font-family:var(--sans); font-size:13px; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:var(--blue)}
.mod-time{color:var(--muted); font-size:15px}
p.lede{color:#C9D9E2; font-size:20px; max-width:620px}
:not(pre)>code{background:transparent; border:0; padding:0; color:var(--ink);
  font-family:var(--disp); font-style:italic; font-size:1.08em}

/* ---- nav ------------------------------------------------------------------ */
nav.site{background:rgba(4,17,29,.86); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line)}
.nav-brand{font-family:var(--disp)!important; font-size:23px!important; font-weight:400!important; color:#fff}
nav.site a{font-family:var(--sans); font-size:14px; letter-spacing:0; color:var(--on-dark-muted)}
nav.site a:hover,nav.site a:focus-visible{color:#fff; border-bottom-color:var(--blue)}
nav.site .nav-pages a{border-radius:999px; border-color:var(--line-strong); font-weight:500}
nav.site .nav-pages a[aria-current="page"]{background:var(--blue); color:#061726; border-color:var(--blue)}
.lang-switch{border-radius:999px; border-color:var(--line-strong)}
.lang-switch b{background:var(--blue); color:#061726; font-family:var(--sans)}
nav.site .lang-switch a{font-family:var(--sans)}
.skip-link{background:var(--blue); color:#061726}

/* ---- hero (species pages): text left, framed photo right ------------------ */
header.hero{position:relative; overflow:hidden; border-bottom:1px solid var(--line);
  background:radial-gradient(120% 140% at 85% 0%, #0E3550 0%, #08203A 38%, #061726 72%)}
.hero-in{padding:64px 24px 60px; display:grid; gap:40px; align-items:center}
.hero-in:has(.hero-photo){grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}
.hero-photo{margin:0; padding:0; background:none; border:0; position:relative}
.hero-photo img{width:100%; aspect-ratio:4/3; height:auto; object-fit:cover; border-radius:var(--radius-lg);
  box-shadow:0 30px 60px rgba(0,0,0,.45)}
.hero-photo figcaption{border:0; margin:10px 0 0; padding:0; font-size:13px; color:var(--muted)}
@media(max-width:820px){ .hero-in:has(.hero-photo){grid-template-columns:1fr} .hero-in{padding-top:40px} }

/* ---- modules -------------------------------------------------------------- */
main{padding-top:8px}
.module{padding:56px 0 16px; border-bottom:1px solid var(--line)}
.module>p:not(.mod-kicker):not(.mod-time),.module>ul,.module>ol,.module>dl{color:#D5E2E9}

/* ---- species cards (Field Notebook plates, in Deep Blue) ------------------ */
article.species{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:28px;
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:18px; margin:24px 0; align-items:start}
article.species.no-photo{grid-template-columns:1fr; padding:24px 28px}
article.species>figure{margin:0; padding:0; background:none; border:0; position:sticky; top:calc(var(--navh,60px) + 16px)}
article.species>figure img{width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; border-radius:var(--radius)}
article.species>figure figcaption{border:0; padding:8px 2px 0; margin:0; font-size:13px}
.species-body{min-width:0; padding:6px 8px 4px 0}
.species-body h3{margin:0 0 2px; font-size:clamp(28px,2.8vw,36px)}
.species-body h3 .ui-label,.module>h3 .ui-label{display:block; margin-top:4px; padding:0; background:none; border:0;
  font-family:var(--disp); font-style:italic; font-weight:400; font-size:20px; color:var(--muted); white-space:normal}
.species-body p{max-width:none; color:#D5E2E9}
.species-body>p>b.lbl{display:block; margin-bottom:2px; font-family:var(--sans); font-size:12px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--blue)}
.species-body p.species-links{margin-top:16px; padding-top:12px; border-top:1px dashed var(--line-strong); font-size:14.5px; color:var(--muted)}
.species-body figure{margin:14px 0}
.species-body .note,.species-body .tip,.species-body .warning,.species-body .caution{margin:14px 0}
@media(max-width:760px){
  article.species{grid-template-columns:1fr; padding:14px; gap:16px}
  article.species>figure{position:static}
  .species-body{padding:0 4px 4px}
}

/* ---- figures, panels, cards ----------------------------------------------- */
figure{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius-lg)}
figure img{border-radius:var(--radius)}
figcaption{border-top:0; color:var(--muted)}
.module>figure{max-width:760px}
.panel,.note,.tip,.warning,.caution{border-radius:var(--radius-lg); border:1px solid var(--line)}
.note{background:var(--petrol-weak); border-left:4px solid var(--petrol)}
.tip{background:var(--tip-bg); border-left:4px solid var(--tip)}
.warning{background:var(--warn-bg); border-left:4px solid var(--warn)}
.caution{background:var(--caution-bg); border-left:4px solid var(--caution)}
.panel-title{font-family:var(--sans); letter-spacing:.12em}
.slide-card{background:var(--panel); border:1px solid var(--line); border-top:3px solid var(--blue); border-radius:var(--radius)}
.slide-card b{font-family:var(--disp); font-weight:400; font-size:24px; line-height:1.1}
.slide-card .sn{font-family:var(--sans); font-weight:600; letter-spacing:.12em; color:var(--blue)}
.checkpoint{background:#04111D; border-left-color:var(--blue); font-family:var(--sans)}
ol.steps>li::before,.steps>li::before{font-family:var(--sans); font-weight:700; border-radius:999px}
ul.check>li::before,.check>li::before{border-color:var(--blue);
  background-image:linear-gradient(45deg,transparent 44%,var(--blue) 45%,var(--blue) 55%,transparent 56%),
  linear-gradient(-45deg,transparent 44%,var(--blue) 45%,var(--blue) 55%,transparent 56%)}
.seriesnav a{background:var(--panel); border:1px solid var(--line); border-radius:999px; font-family:var(--sans);
  text-transform:none; letter-spacing:0; font-size:15px; font-weight:600}
.seriesnav a:hover{background:var(--panel-2)}
.seriesnav a,.seriesnav a.next{border-left:1px solid var(--line); border-right:1px solid var(--line)}

/* anatomy diagram on the Shark ID page */
.diagram svg{background:var(--panel)}
.diagram .shape path,.diagram .shape circle{fill:#123049; stroke:#C9D9E2}
.diagram .shape .eye{fill:#EAF2F5}
.diagram .marks text{fill:#061726}

/* ---- tables --------------------------------------------------------------- */
table{background:var(--panel); border-radius:var(--radius)}
th{font-family:var(--sans); font-size:13px; letter-spacing:.06em; background:#04111D; color:#EAF2F5}
.table-scroll thead th{box-shadow:inset 0 -2px 0 var(--blue)}
td{border-color:var(--line)}
tr:nth-child(even) td{background:var(--panel-2)}
tr.fam th{background:#123049; color:#EAF2F5; font-family:var(--disp); font-size:20px; letter-spacing:0; text-transform:none; font-weight:400}
tr.fam th span{font-family:var(--sans); font-size:14px}
tr.endemic td{background:rgba(226,184,92,.12)}
tr.endemic td:first-child{box-shadow:inset 3px 0 0 var(--gold)}
.tag-endemic{background:var(--gold); color:#2A1F06}
td img{border-radius:6px}
caption{color:var(--muted)}

/* ---- footer --------------------------------------------------------------- */
footer.site{background:#04111D; border-top:1px solid var(--line); font-family:var(--sans); color:var(--muted)}
footer.site b{color:#EAF2F5}

/* =============================================================================
   Overview page components
   ========================================================================== */
.ov-hero{position:relative; min-height:min(88vh,820px); display:flex; align-items:flex-end; overflow:hidden; border-bottom:0; background:#061726}
.ov-hero>img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:60% 40%}
.ov-hero::after{content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(6,23,38,.45) 0%, rgba(6,23,38,.05) 30%, rgba(6,23,38,.4) 62%, #061726 100%)}
.ov-hero-in{position:relative; z-index:1; width:100%; max-width:var(--page); margin:0 auto; padding:120px 24px 64px}
.ov-hero h1{max-width:900px; font-size:clamp(46px,7.4vw,104px); line-height:.98}
.ov-hero p.lede{margin:24px 0 32px}
.ov-hero .credit{position:absolute; right:20px; bottom:16px; z-index:1; margin:0; font-size:12px; color:#A9BDCA}
.btn-row{display:flex; flex-wrap:wrap; gap:14px}
.btn{display:inline-flex; align-items:center; min-height:48px; padding:0 26px; border-radius:999px;
  font-weight:600; text-decoration:none; border:1px solid rgba(234,242,245,.6); color:#fff}
.btn:hover{background:rgba(234,242,245,.1); color:#fff}
.btn.primary{background:var(--blue); border-color:var(--blue); color:#061726}
.btn.primary:hover{background:var(--blue-strong); color:#061726}

.ov-section{padding:72px 0 8px}
.ov-section>h2+p.sub{margin:0 0 30px; color:var(--muted); max-width:640px}
.stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr)); gap:28px}
@media(max-width:560px){ .stats{grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px 18px} .stat b{font-size:46px} }
.stat{border-top:1px solid var(--line-strong); padding-top:20px}
.stat b{display:block; font-family:var(--disp); font-weight:400; font-size:clamp(52px,5vw,66px); line-height:1}
.stat span{display:block; margin-top:8px; color:var(--muted)}
.intro{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:48px; align-items:end}
.intro p{max-width:none; color:#D5E2E9; font-size:18px}
@media(max-width:760px){ .intro{grid-template-columns:1fr; gap:8px} }

.tiles{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); grid-auto-rows:220px; gap:18px}
.tile{position:relative; display:block; overflow:hidden; border-radius:var(--radius-lg); text-decoration:none; color:#fff; background:var(--panel)}
.tile.big{grid-row:span 2}
.tile img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .5s ease}
.tile:hover img{transform:scale(1.04)}
.tile::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(6,23,38,0) 30%, rgba(6,23,38,.92) 100%)}
.tile .t{position:absolute; z-index:1; left:22px; right:22px; bottom:18px}
.tile .k{display:block; font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--blue)}
.tile b{display:block; font-family:var(--disp); font-weight:400; font-size:28px; line-height:1.08; margin-top:4px}
.tile.big b{font-size:clamp(30px,2.8vw,38px)}
.tile .d{display:block; margin-top:6px; font-size:15px; color:#C9D9E2}
.tile:hover,.tile:focus-visible{color:#fff}
@media(max-width:900px){ .tiles{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media(max-width:560px){ .tiles{grid-template-columns:1fr; grid-auto-rows:200px} .tile.big{grid-row:span 1} }

/* season picker */
.months{display:flex; flex-wrap:wrap; gap:8px; margin:0 0 26px}
.months button{min-height:44px; min-width:62px; padding:0 14px; border-radius:999px; cursor:pointer;
  font:600 15px var(--sans); color:var(--ink); background:transparent; border:1px solid var(--line-strong)}
.months button:hover{border-color:var(--blue)}
.months button[aria-pressed="true"]{background:var(--blue); border-color:var(--blue); color:#061726}
.season-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr)); gap:18px}
.season-card{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; transition:border-color .2s}
.season-card img{display:block; width:100%; height:170px; object-fit:cover; border-radius:0; transition:filter .3s, opacity .3s}
.season-card .b{padding:16px 18px 20px}
.season-card .badge{display:inline-block; padding:3px 10px; border-radius:999px; font-size:12.5px; font-weight:600;
  border:1px solid var(--line-strong); color:var(--muted)}
.season-card h3{margin:10px 0 4px; font-size:28px}
.season-card p{margin:0; color:var(--muted); font-size:15px}
.season-card.on{border-color:var(--blue)}
.season-card.on .badge{background:var(--blue); border-color:var(--blue); color:#061726}
.season-card:not(.on) img{filter:grayscale(.85); opacity:.6}
.season-status{margin:0 0 18px; font-size:18px; color:#D5E2E9}
.season-status b{color:var(--blue); font-weight:600}

/* six to know: field-notebook plates */
.plates{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr)); gap:22px}
.plate{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius-lg); padding:14px; margin:0}
.plate img{display:block; width:100%; height:210px; object-fit:cover; border-radius:var(--radius)}
.plate .pb{padding:14px 6px 6px}
.plate .num{font-size:12px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--blue)}
.plate h3{margin:4px 0 0; font-size:30px}
.plate .sci{font-family:var(--disp); font-style:italic; font-size:19px; color:var(--muted)}
.plate dl{margin:14px 0 0; padding-top:12px; border-top:1px dashed var(--line-strong);
  display:grid; grid-template-columns:auto minmax(0,1fr); gap:6px 12px; font-size:15px; max-width:none}
.plate dt{margin:0; font-weight:600; color:var(--blue)}
.plate dd{margin:0; padding:0; border:0; color:#D5E2E9}

/* sites */
.sites{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr)); gap:4px 40px}
.site-item{border-top:1px solid var(--line); padding:16px 0 12px}
.site-item b{display:block; font-family:var(--disp); font-weight:400; font-size:26px; line-height:1.15}
.site-item p{margin:4px 0 0; color:#D5E2E9; max-width:none}
.site-item small{display:block; margin-top:4px; color:var(--muted); font-size:13px}
.sources{columns:2 340px; column-gap:40px; margin-left:0; list-style:none}
.sources li{break-inside:avoid; padding:10px 0; border-top:1px solid var(--line); margin:0}
.ov-foot-note{margin-top:28px}

/* callout labels in Spanish */
html[lang="es"] .note .panel-title::before{content:"Nota"}
html[lang="es"] .tip .panel-title::before{content:"Consejo"}
html[lang="es"] .warning .panel-title::before{content:"Aviso"}
html[lang="es"] .caution .panel-title::before{content:"Precaución"}

/* ---- background photos (Megan Applegate) ----------------------------------- */
html,body{overflow-x:clip}
/* species pages: full-width photo behind the header */
header.hero.has-bg{background:#061726; isolation:isolate}
header.hero .hero-bg{position:absolute; inset:0; z-index:-2; width:100%; height:100%; object-fit:cover; border-radius:0}
header.hero.has-bg::before{content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(90deg, rgba(6,23,38,.92) 0%, rgba(6,23,38,.72) 45%, rgba(6,23,38,.35) 100%),
             linear-gradient(180deg, rgba(6,23,38,.25) 0%, rgba(6,23,38,0) 40%, rgba(6,23,38,.85) 100%)}
header.hero.has-bg .hero-in{padding-top:84px; padding-bottom:84px}
.bg-credit{position:absolute; right:16px; bottom:10px; margin:0; font-size:11.5px; color:#A9BDCA; z-index:1}
@media(max-width:820px){
  header.hero.has-bg::before{background:linear-gradient(180deg, rgba(6,23,38,.7) 0%, rgba(6,23,38,.82) 55%, #061726 100%)}
}
/* overview: full-width photo bands behind a section */
.ov-band{position:relative; isolation:isolate; padding:88px 0 80px; margin-top:56px}
.ov-band::before{content:""; position:absolute; z-index:-1; top:0; bottom:0; left:50%; width:100vw; transform:translateX(-50%);
  background:linear-gradient(180deg, #061726 0%, rgba(6,23,38,.8) 16%, rgba(6,23,38,.8) 84%, #061726 100%), var(--band) center/cover no-repeat}
.ov-band .band-credit{position:absolute; right:0; bottom:14px; margin:0; font-size:11.5px; color:#A9BDCA}
.band-jacks{--band:url('img/bg-jacks.jpg')}
.band-divers{--band:url('img/bg-divers.jpg')}
/* overview hero: darker on the text side so the headline reads over a busy photo */
.ov-hero::after{background:
  linear-gradient(90deg, rgba(6,23,38,.82) 0%, rgba(6,23,38,.55) 45%, rgba(6,23,38,.1) 80%),
  linear-gradient(180deg, rgba(6,23,38,.45) 0%, rgba(6,23,38,0) 30%, rgba(6,23,38,.35) 62%, #061726 100%)}
.months button{background:rgba(6,23,38,.55)}
@media(max-width:760px){ .ov-hero::after{background:linear-gradient(180deg, rgba(6,23,38,.55) 0%, rgba(6,23,38,.7) 50%, #061726 100%)} }

/* fish table: family on its own line under the scientific name */
td small.fam-tag{display:block; margin-top:3px; font-size:12.5px; color:var(--muted)}

/* ---- photo cropping ---------------------------------------------------------
   Species cards show the whole photo (no crop). Elsewhere photos fill a fixed
   box and get trimmed; object-position says which part to keep:
   first number = left/right (0% keeps the left edge, 100% the right),
   second number = top/bottom. Add one line per photo that needs it. */
article.species>figure img{aspect-ratio:auto; height:auto; object-fit:contain}
img[src$="sphyrna-lewini.jpg"]{object-position:8% 50%}      /* hammerhead: head on the left */
img[src$="triaenodon-obesus.jpg"]{object-position:5% 50%}   /* whitetip: head on the left */

/* link back to the Dive Field Guides home page */
footer.site .home-link{margin-top:12px}
footer.site .home-link a{color:var(--blue); text-decoration:none; font-weight:600}
footer.site .home-link a:hover{text-decoration:underline}