/* =============================================================
   NAVIGATION  ·  desktop mega menu + full screen mobile drawer
   Loaded after site.css on every page.
   ============================================================= */

/* the bar itself lives in site.css; only the panels are defined here */

/* ---------- MEGA PANEL ---------- */
.mega{
  position:fixed; left:0; right:0; top:var(--hdr-h,4.1rem); z-index:95;
  background:color-mix(in srgb, var(--mega-bg) 97%, transparent);
  backdrop-filter:blur(18px) saturate(1.1);
  border-bottom:1px solid var(--mega-line);
  box-shadow:0 30px 60px -30px rgba(0,0,0,.6);
  opacity:0; visibility:hidden; transform:translateY(-10px);
  transition:opacity .3s var(--e), transform .35s var(--e), visibility .35s;
}
.mega.open{opacity:1; visibility:visible; transform:none}
/* the mega panel is an overlay, not a band: it stays dark in both themes
   so it reads as part of the header rather than part of the page */
.mega{--mega-bg:#0B120E; --mega-line:rgba(242,237,225,.16); --mega-tx:#F2EDE1; --mega-tx2:rgba(242,237,225,.66); --mega-brand:#DDBD9C; --mega-card:rgba(242,237,225,.05)}

.mega__in{width:var(--shell); margin-inline:auto; display:grid; grid-template-columns:1fr 22rem;
  gap:clamp(1.5rem,3vw,3rem); padding:clamp(1.5rem,2.6vw,2.4rem) 0 clamp(1.6rem,2.8vw,2.6rem)}
.mega__cols{display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(1rem,2vw,2rem)}
.mega__gr{font-family:var(--f-l); font-weight:600; font-size:.82rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--mega-brand); margin:0 0 .9rem; padding-bottom:.6rem; border-bottom:1px solid var(--mega-line)}
.mega__list{list-style:none; padding:0; margin:0}
.mega__list li{opacity:0; transform:translateY(8px)}
.mega.open .mega__list li{opacity:1; transform:none; transition:opacity .4s var(--e), transform .4s var(--e)}
.mega__list a{
  display:block; text-decoration:none; padding:.5rem .6rem; margin-left:-.6rem; border-radius:3px;
  font-family:var(--f-l); font-weight:500; font-size:1.05rem; letter-spacing:.04em; color:var(--mega-tx);
  transition:background .2s var(--e), color .2s var(--e); line-height:1.2;
}
.mega__list a em{display:block; font-family:var(--f-b); font-style:italic; font-weight:400;
  font-size:.78rem; letter-spacing:0; color:var(--mega-tx2); margin-top:.12rem}
.mega__list a:hover, .mega__list a:focus-visible{background:color-mix(in srgb, var(--mega-brand) 14%, transparent); color:var(--mega-brand); outline:none}

/* the featured card, swaps on hover */
.mega__feat{position:relative; border:1px solid var(--mega-line); border-radius:4px; overflow:hidden; background:var(--mega-card); display:flex; flex-direction:column}
/* the menu preview never crops: sources are a mix of 4:3 and 16:9, and a
   3:2 box with contain gives each one a thin margin instead of a lost horn */
.mega__pic{position:relative; aspect-ratio:4/3; overflow:hidden;
  background:color-mix(in srgb, #0B120E 72%, var(--mega-card))}
.mega__pic img{position:absolute; inset:0; width:100%; height:100%; object-fit:contain; opacity:0; transition:opacity .45s var(--e)}
.mega__pic img.on{opacity:1}
.mega__body{padding:1.1rem 1.2rem 1.3rem}
.mega__eyebrow{font-family:var(--f-l); font-weight:600; font-size:.76rem; letter-spacing:.22em; text-transform:uppercase; color:var(--mega-brand); margin:0 0 .4rem}
.mega__name{font-family:var(--f-d); font-weight:600; font-size:1.5rem; letter-spacing:.02em; text-transform:uppercase; line-height:1; margin:0; color:var(--mega-tx)}
.mega__sci{font-style:italic; font-size:.92rem; color:var(--mega-tx2); margin:.3rem 0 0}
.mega__meta{display:flex; gap:1.4rem; flex-wrap:wrap; margin:.9rem 0 0; padding-top:.8rem; border-top:1px solid var(--mega-line)}
.mega__meta div{min-width:5rem}
.mega__meta dt{font-family:var(--f-l); font-weight:500; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--mega-tx2); margin:0 0 .15rem}
.mega__meta dd{margin:0; font-family:var(--f-l); font-weight:500; font-size:1rem; color:var(--mega-tx)}
.mega__go{display:inline-flex; align-items:center; gap:.5rem; margin-top:1rem; text-decoration:none;
  font-family:var(--f-l); font-weight:600; font-size:.82rem; letter-spacing:.18em; text-transform:uppercase; color:var(--mega-brand)}
.mega__go::after{content:"\2192"; transition:transform .25s var(--e)}
.mega__go:hover::after{transform:translateX(4px)}
.mega__all{grid-column:1 / -1; display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap;
  margin-top:1.4rem; padding-top:1.1rem; border-top:1px solid var(--mega-line)}
.mega__all p{margin:0; font-size:.95rem; color:var(--mega-tx2)}
.mega__all a{text-decoration:none; font-family:var(--f-l); font-weight:600; font-size:.82rem;
  letter-spacing:.18em; text-transform:uppercase; color:var(--mega-brand)}

.mega-scrim{position:fixed; inset:0; z-index:94; background:rgba(4,8,5,.45); opacity:0; visibility:hidden; transition:opacity .3s}
.mega-scrim.on{opacity:1; visibility:visible}


/* ---------- MOBILE DRAWER ---------- */
.mtrig[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.mtrig[aria-expanded="true"] span:nth-child(2){opacity:0}
.mtrig[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.drawer{
  position:fixed; inset:0; z-index:200; display:flex; flex-direction:column;
  background:var(--dr-bg); color:var(--dr-tx);
  opacity:0; visibility:hidden; transform:translateY(-1.5%);
  transition:opacity .35s var(--e), transform .45s var(--e), visibility .45s;
  overscroll-behavior:contain;
}
.drawer.open{opacity:1; visibility:visible; transform:none}
.drawer{--dr-bg:#0A100C; --dr-tx:#F2EDE1; --dr-tx2:rgba(242,237,225,.62); --dr-line:rgba(242,237,225,.13); --dr-brand:#DDBD9C}

.drawer__top{display:flex; align-items:center; gap:1rem; padding:.9rem clamp(1rem,5vw,1.6rem);
  border-bottom:1px solid var(--dr-line); flex:0 0 auto}
.drawer__top img{height:38px; width:auto}
.drawer__x{margin-left:auto; width:44px; height:44px; border-radius:50%; border:1px solid var(--dr-line);
  background:none; color:var(--dr-tx); font-size:1.3rem; line-height:1; cursor:pointer; display:grid; place-items:center}
.drawer__body{flex:1 1 auto; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:1.2rem clamp(1rem,5vw,1.6rem) 2rem}

.dr-main{list-style:none; padding:0; margin:0 0 1.6rem}
.dr-main li{border-bottom:1px solid var(--dr-line); opacity:0; transform:translateY(14px)}
.drawer.open .dr-main li{opacity:1; transform:none; transition:opacity .45s var(--e), transform .45s var(--e)}
.dr-main a{display:flex; align-items:center; justify-content:space-between; gap:1rem; text-decoration:none;
  padding:1rem .2rem; font-family:var(--f-d); font-weight:600; font-size:1.75rem; letter-spacing:.02em;
  text-transform:uppercase; color:var(--dr-tx); line-height:1}
.dr-main a span{font-family:var(--f-l); font-weight:500; font-size:.78rem; letter-spacing:.18em; color:var(--dr-tx2)}

.dr-h{display:flex; align-items:center; gap:.9rem; margin:0 0 .9rem;
  font-family:var(--f-l); font-weight:600; font-size:.82rem; letter-spacing:.24em; text-transform:uppercase; color:var(--dr-brand)}
.dr-h::after{content:""; flex:1; height:1px; background:var(--dr-line)}
.dr-sp{list-style:none; padding:0; margin:0 0 1.8rem; display:grid; gap:.55rem}
.dr-sp li{opacity:0; transform:translateY(12px)}
.drawer.open .dr-sp li{opacity:1; transform:none; transition:opacity .4s var(--e), transform .4s var(--e)}
.dr-sp a{display:grid; grid-template-columns:4.6rem 1fr auto; align-items:center; gap:.9rem; text-decoration:none;
  border:1px solid var(--dr-line); border-radius:4px; padding:.5rem .8rem .5rem .5rem; color:var(--dr-tx);
  transition:border-color .25s, background .25s}
.dr-sp a:active{border-color:var(--dr-brand); background:color-mix(in srgb, var(--dr-brand) 12%, transparent)}
.dr-sp img{width:4.6rem; height:3.2rem; object-fit:cover; border-radius:3px; display:block}
.dr-sp b{display:block; font-family:var(--f-l); font-weight:500; font-size:1.05rem; letter-spacing:.03em; line-height:1.15}
.dr-sp em{display:block; font-family:var(--f-b); font-style:italic; font-weight:400; font-size:.76rem; color:var(--dr-tx2); margin-top:.1rem}
.dr-sp .ar{font-family:var(--f-l); color:var(--dr-brand); font-size:1.1rem}

.dr-foot{border-top:1px solid var(--dr-line); padding-top:1.4rem; display:grid; gap:.7rem}
.dr-foot a{text-decoration:none; color:var(--dr-tx); font-family:var(--f-l); font-weight:500;
  font-size:1.02rem; letter-spacing:.06em; display:flex; align-items:center; gap:.7rem}
.dr-foot a span{color:var(--dr-brand)}
.dr-cta{display:block; text-align:center; margin-top:1.2rem; text-decoration:none; background:var(--dr-brand);
  color:#0A100C; font-family:var(--f-l); font-weight:600; font-size:.95rem; letter-spacing:.18em;
  text-transform:uppercase; padding:1rem; border-radius:99px}

body.nav-locked{overflow:hidden}

/* ---------- breakpoints ---------- */
@media (max-width:1100px){
  /* the left nav collapses into the drawer; the right column keeps the CTA */
  .nav--l{display:none}
  .hdr .nav--r button.navtrig{display:none}
  .mega{display:none}
  .mtrig{display:flex}
}
@media (min-width:1101px){
  .drawer{display:none}
}
@media (max-width:640px){
  .dr-main a{font-size:1.5rem; padding:.85rem .2rem}
  .drawer__top img{height:30px}
}
@media (prefers-reduced-motion:reduce){
  .mega,.drawer,.mega__list li,.dr-main li,.dr-sp li{transition-duration:.01ms !important}
}

/* =============================================================
   FOOTER  ·  brand column, link columns, legal row
   ============================================================= */
.sitefoot{background:var(--ft-bg); color:var(--ft-tx); border-top:1px solid var(--ft-line);
  padding-block:clamp(3rem,6vw,4.8rem) 0; position:relative; overflow:hidden}
/* the footer closes the page and stays dark, like the menu panels */
.sitefoot{--ft-bg:#080D0A; --ft-tx:#F2EDE1; --ft-tx2:rgba(242,237,225,.62); --ft-tx3:rgba(242,237,225,.42); --ft-line:rgba(242,237,225,.12); --ft-brand:#DDBD9C}
.sitefoot::before{content:""; position:absolute; inset:-40% -10% auto 30%; height:60%;
  background:radial-gradient(closest-side, color-mix(in srgb, var(--ft-brand) 12%, transparent), transparent);
  pointer-events:none}
.sitefoot .shell{position:relative}

.ft-top{display:grid; grid-template-columns:1.35fr 1.7fr repeat(3,1fr); gap:clamp(1.5rem,2.6vw,2.6rem)}
.ft-col--wide ul{columns:2; column-gap:clamp(1rem,2vw,2rem)}
.ft-col--wide li{break-inside:avoid}
.ft-brand img{height:56px; width:auto; margin-bottom:1.2rem}
.ft-brand p{margin:0 0 1.3rem; font-size:1rem; color:var(--ft-tx2); max-width:28ch; line-height:1.6}
.ft-badge{display:inline-flex; align-items:center; gap:.6rem; border:1px solid var(--ft-line);
  border-radius:99px; padding:.5rem 1rem; font-family:var(--f-l); font-weight:500; font-size:.85rem;
  letter-spacing:.1em; text-transform:uppercase; color:var(--ft-tx2)}
.ft-badge::before{content:""; width:.45rem; height:.45rem; border-radius:50%; background:var(--ft-brand);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--ft-brand) 25%, transparent)}
.ft-soc{display:flex; gap:.6rem; margin:1.4rem 0 0; list-style:none; padding:0}
.ft-soc a{display:grid; place-items:center; width:40px; height:40px; border-radius:50%;
  border:1px solid var(--ft-line); color:var(--ft-tx2); text-decoration:none;
  transition:border-color .25s, color .25s, transform .25s var(--e)}
.ft-soc a:hover{border-color:var(--ft-brand); color:var(--ft-brand); transform:translateY(-2px)}
.ft-soc svg{width:16px; height:16px; fill:currentColor}
.ft-enq{display:flex; gap:.5rem; margin-top:1.4rem; max-width:22rem}
.ft-enq a{flex:1; text-align:center; text-decoration:none; background:var(--ft-brand); color:#080D0A;
  font-family:var(--f-l); font-weight:600; font-size:.88rem; letter-spacing:.16em; text-transform:uppercase;
  padding:.85rem 1rem; border-radius:99px; transition:filter .25s, transform .25s var(--e)}
.ft-enq a:hover{filter:brightness(1.1); transform:translateY(-2px)}

.ft-col h4{margin:0 0 1.1rem; font-family:var(--f-l); font-weight:600; font-size:.82rem;
  letter-spacing:.24em; text-transform:uppercase; color:var(--ft-tx3)}
.ft-col ul{list-style:none; padding:0; margin:0}
.ft-col li{margin-bottom:.7rem}
.ft-col a{text-decoration:none; font-size:1rem; color:var(--ft-tx2); transition:color .2s}
.ft-col a:hover{color:var(--ft-brand)}

.ft-mid{display:flex; align-items:center; gap:1rem; margin-top:clamp(2.5rem,5vw,3.5rem)}
.ft-mid::before,.ft-mid::after{content:""; flex:1; height:1px; background:var(--ft-line)}
.ft-mid i{display:block; width:.7rem; height:.7rem; border-radius:50%; border:1px solid var(--ft-brand);
  position:relative}
.ft-mid i::after{content:""; position:absolute; inset:.18rem; border-radius:50%; background:var(--ft-brand)}

.ft-legal{display:flex; flex-wrap:wrap; gap:.3rem 0; padding-block:1.4rem}
.ft-legal a{text-decoration:none; font-size:.92rem; color:var(--ft-tx3); padding:0 1rem;
  border-right:1px solid var(--ft-line); transition:color .2s}
.ft-legal a:first-child{padding-left:0}
.ft-legal a:last-child{border-right:0}
.ft-legal a:hover{color:var(--ft-brand)}

.ft-base{border-top:1px solid var(--ft-line); padding-block:1.3rem; display:flex;
  justify-content:space-between; gap:1rem; flex-wrap:wrap; font-size:.92rem; color:var(--ft-tx3)}
.ft-base b{color:var(--ft-tx2); font-weight:500}
.ft-base a{color:var(--ft-brand); text-decoration:none; font-weight:500}
.ft-base a:hover{text-decoration:underline}

@media (max-width:1040px){
  .ft-top{grid-template-columns:repeat(2,1fr); gap:2rem}
  .ft-col--wide{grid-column:1 / -1}
  .ft-brand{grid-column:1 / -1}
}
@media (max-width:560px){
  .ft-top{grid-template-columns:1fr}
  .ft-col--wide ul{columns:2}
  .ft-legal{flex-direction:column; gap:.75rem}
  .ft-legal a{padding:0; border-right:0}
  .ft-base{flex-direction:column; gap:.5rem}
}

/* the light/dark logo swap must apply wherever the logo appears, not just the header */
/* drawer and footer sit on their own fixed backgrounds, so they pick the
   logo by theme. The header does NOT: it follows the band behind it. */

.dr-main a span{flex:0 0 auto; text-align:right; max-width:9rem}

/* ---- species page relief map ---- */
.map-card{position:relative; display:block; padding:1rem 1rem 1.15rem}
.map-card__fig{position:relative; display:block}
.map-card img{width:100%; height:auto; display:block}
.mc-pins{position:absolute; inset:0}
.mc-pin{position:absolute; width:16px; height:16px; margin:-8px 0 0 -8px; border-radius:50%; z-index:2;
  background:var(--brand); display:block; opacity:0; transform:scale(.3);
  transition:opacity .5s var(--e) .25s, transform .5s var(--e) .25s}
.map-card.in .mc-pin{opacity:1; transform:scale(1)}
.mc-pin::after{content:""; position:absolute; inset:-13px; border-radius:50%;
  border:2px solid color-mix(in srgb, var(--brand) 75%, transparent)}
.map-card figcaption{display:block; margin-top:.8rem; font-family:var(--f-l); font-weight:600; font-size:.78rem;
  letter-spacing:.18em; text-transform:uppercase; color:var(--brand); text-align:center}