/* ============================================================
   GLACIER ARCHIVE — The Arctic Seed Vault
   Crystalline cold · institutional hush · precise type
   Fonts: Syne (display) · Hanken Grotesk (text) · Martian Mono (data)
   ============================================================ */

:root{
  /* cold palette */
  --white:      #f5f9fc;   /* glacial white base */
  --frost:      #e6eff5;   /* frost panel */
  --frost-2:    #d5e3ec;   /* deeper frost */
  --ice:        #a9cbe0;   /* ice blue */
  --ice-deep:   #7ba8c6;   /* deeper ice */
  --steel:      #56707f;   /* steel grey-blue */
  --ink:        #142230;   /* cold near-black */
  --ink-soft:   #38505f;   /* muted body ink */
  --accent:     #12b6cd;   /* single cold accent — glacial cyan */
  --accent-dk:  #0a8ba0;

  /* vault-descent (driven by JS 0..1 via --cool) */
  --cool: 0;

  /* type */
  --f-display: "Syne", system-ui, sans-serif;
  --f-text: "Hanken Grotesk", system-ui, sans-serif;
  --f-mono: "Martian Mono", ui-monospace, "SF Mono", monospace;

  /* rhythm */
  --edge: clamp(20px, 5vw, 88px);
  --maxw: 1320px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  font-family:var(--f-text);
  color:var(--ink);
  background:var(--white);
  line-height:1.55;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* the whole page cools as you descend into the vault */
.descent{
  position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    linear-gradient( to bottom,
      hsl(202 44% calc(97% - var(--cool) * 74%)) 0%,
      hsl(203 46% calc(92% - var(--cool) * 72%)) 45%,
      hsl(206 50% calc(86% - var(--cool) * 74%)) 100% );
  transition:background .2s linear;
}
/* frost creeps in from the edges the deeper you go */
.frostveil{
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  opacity:calc(var(--cool) * 0.9);
  background:
    radial-gradient( 120% 90% at 50% -10%, transparent 55%, hsla(200 60% 96% / .5) 100%),
    radial-gradient( 60% 55% at 0% 100%, hsla(190 55% 92% / .55), transparent 60%),
    radial-gradient( 60% 55% at 100% 100%, hsla(190 55% 92% / .55), transparent 60%);
  mix-blend-mode:screen;
  transition:opacity .25s linear;
}

/* ---- skip link ---- */
.skip{
  position:absolute; left:12px; top:-60px; z-index:200;
  background:var(--ink); color:var(--white); padding:10px 16px;
  border-radius:6px; text-decoration:none; font-family:var(--f-mono); font-size:12px;
  transition:top .18s ease;
}
.skip:focus{ top:12px; }

:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:2px; }

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:sticky; top:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  gap:24px; padding:14px var(--edge);
  background:hsl(202 44% 97% / calc(0.62 + var(--cool)*0.2));
  backdrop-filter:blur(10px) saturate(1.1);
  -webkit-backdrop-filter:blur(10px) saturate(1.1);
  border-bottom:1px solid hsl(203 30% 60% / .22);
}
.brand{ display:flex; align-items:center; gap:11px; text-decoration:none; color:inherit; }
.brand svg{ width:26px; height:26px; flex:0 0 auto; display:block; }
.brand b{
  font-family:var(--f-display); font-weight:800; font-size:16px;
  letter-spacing:.14em; text-transform:uppercase; line-height:1;
}
.brand span{ font-family:var(--f-mono); font-size:10px; letter-spacing:.28em; color:var(--steel); display:block; margin-top:3px; }
.navlinks{ display:flex; gap:26px; align-items:center; }
.navlinks a{
  color:var(--ink-soft); text-decoration:none; font-size:13px; letter-spacing:.02em;
  font-weight:500; position:relative; padding:4px 0;
}
.navlinks a::after{
  content:""; position:absolute; left:0; bottom:0; height:1.5px; width:0; background:var(--accent);
  transition:width .28s cubic-bezier(.22,1,.36,1);
}
.navlinks a:hover{ color:var(--ink); }
.navlinks a:hover::after{ width:100%; }
.navlinks .tag{ font-family:var(--f-mono); font-size:10px; letter-spacing:.16em; color:var(--steel);
  border:1px solid hsl(203 30% 60% / .4); padding:5px 9px; border-radius:20px; }
.navlinks .tag::after{ display:none; }
.navtoggle{ display:none; }

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative;
  min-height:100svh;
  display:grid;
  grid-template-rows:1fr auto;
  overflow:hidden;
}
#ice{
  position:absolute; inset:0; width:100%; height:100%;
  z-index:0; display:block;
}
.hero-glare{ /* subtle top light bloom over the ice */
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(90% 60% at 50% -8%, hsla(0 0% 100% / .55), transparent 60%);
}
.hero-inner{
  position:relative; z-index:2;
  align-self:center;
  padding:96px var(--edge) 0;
  max-width:var(--maxw); width:100%; margin:0 auto;
}
.eyebrow{
  font-family:var(--f-mono); font-size:11px; letter-spacing:.34em; text-transform:uppercase;
  color:var(--accent-dk); display:flex; align-items:center; gap:12px; margin:0 0 22px;
}
.eyebrow::before{ content:""; width:38px; height:1px; background:var(--accent-dk); }
.hero h1{
  font-family:var(--f-display); font-weight:800;
  font-size:clamp(3.4rem, 12.5vw, 12rem);
  line-height:.86; letter-spacing:-.02em; margin:0;
  color:var(--ink);
  text-wrap:balance;
}
.hero h1 .thin{ font-weight:600; color:var(--steel); display:block; font-size:.5em; letter-spacing:0; }
.hero-lede{
  margin:30px 0 0; max-width:44ch;
  font-size:clamp(1.02rem, 1.7vw, 1.32rem);
  color:var(--ink-soft); line-height:1.5;
}
.hero-lede b{ color:var(--ink); font-weight:600; }

/* readout strip */
.readout{
  position:relative; z-index:2;
  border-top:1px solid hsl(203 30% 50% / .28);
  background:hsl(202 44% 97% / .5);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.readout-inner{
  max-width:var(--maxw); margin:0 auto; width:100%;
  display:grid; grid-template-columns:repeat(4,1fr);
  font-family:var(--f-mono);
}
.metric{ padding:18px var(--edge); border-left:1px solid hsl(203 30% 50% / .2); }
.metric:first-child{ border-left:none; }
.metric .k{ font-size:9.5px; letter-spacing:.24em; text-transform:uppercase; color:var(--steel); }
.metric .v{ font-size:clamp(1.3rem, 3.2vw, 2.1rem); font-weight:500; color:var(--ink); line-height:1.1; margin-top:6px;
  font-variant-numeric:tabular-nums; }
.metric .v small{ font-size:.5em; color:var(--steel); font-weight:400; margin-left:3px; }
.metric .live{ display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--accent);
  margin-left:8px; vertical-align:middle; box-shadow:0 0 0 0 var(--accent); }
@media (prefers-reduced-motion: no-preference){
  .metric .live{ animation:pulse 2.4s ease-out infinite; }
}
@keyframes pulse{ 0%{ box-shadow:0 0 0 0 hsl(188 84% 43% / .6);} 70%{ box-shadow:0 0 0 9px hsl(188 84% 43% / 0);} 100%{ box-shadow:0 0 0 0 hsl(188 84% 43% / 0);} }

/* ============================================================
   SECTION SCAFFOLD
   ============================================================ */
section{ position:relative; }
.wrap{ max-width:var(--maxw); margin:0 auto; padding:clamp(72px,11vw,150px) var(--edge); }
.kicker{
  font-family:var(--f-mono); font-size:11px; letter-spacing:.28em; text-transform:uppercase;
  color:var(--accent-dk); margin:0 0 18px; display:flex; align-items:center; gap:12px;
}
.kicker .idx{ color:var(--steel); }
.h2{
  font-family:var(--f-display); font-weight:700;
  font-size:clamp(2rem, 5.2vw, 4.2rem); line-height:.98; letter-spacing:-.015em; margin:0;
  text-wrap:balance;
}
.lead{ font-size:clamp(1.05rem,1.6vw,1.3rem); color:var(--ink-soft); max-width:56ch; line-height:1.55; }

/* reveal */
.reveal{ opacity:0; transform:translateY(26px); }
.reveal.in{ opacity:1; transform:none; transition:opacity .9s cubic-bezier(.22,1,.36,1), transform .9s cubic-bezier(.22,1,.36,1); }
@media (prefers-reduced-motion: reduce){ .reveal{ opacity:1; transform:none; } }

/* ============================================================
   MISSION
   ============================================================ */
.mission .wrap{ display:grid; grid-template-columns:1.55fr .95fr; gap:clamp(40px,6vw,96px); align-items:start; }
.mission h2{ margin-bottom:26px; }
.mission p + p{ margin-top:20px; }
.mission .big{
  font-family:var(--f-display); font-weight:600;
  font-size:clamp(1.4rem,2.6vw,2.1rem); line-height:1.22; letter-spacing:-.01em; color:var(--ink);
  margin:0 0 26px; text-wrap:balance;
}
.mission .big em{ font-style:normal; color:var(--accent-dk); }
.mission p{ color:var(--ink-soft); max-width:54ch; }

/* core-sample column graphic */
.core{ position:relative; }
.core figure{ margin:0; position:sticky; top:96px; }
.core .col{
  height:clamp(360px,52vw,560px); border-radius:60px 60px 8px 8px;
  overflow:hidden; border:1px solid hsl(203 30% 50% / .3);
  display:grid; grid-template-rows:1fr 1.1fr 1.4fr 1.2fr 2fr;
  box-shadow:0 30px 60px -30px hsl(206 50% 30% / .4);
}
.core .col span{ position:relative; display:flex; align-items:center; padding-left:20px;
  font-family:var(--f-mono); font-size:10px; letter-spacing:.14em; color:hsl(206 40% 22% / .8); }
.core .col span::after{ content:attr(data-d); position:absolute; right:16px; color:hsl(206 30% 30% / .55); }
.core .s1{ background:linear-gradient(hsl(0 0% 100%), hsl(200 40% 94%)); }
.core .s2{ background:linear-gradient(hsl(200 42% 90%), hsl(202 44% 82%)); }
.core .s3{ background:linear-gradient(hsl(203 46% 80%), hsl(205 48% 68%)); }
.core .s4{ background:linear-gradient(hsl(206 50% 62%), hsl(208 52% 48%)); }
.core .s5{ background:linear-gradient(hsl(209 54% 40%), hsl(212 58% 24%)); }
.core .s3 span, .core .s4 span, .core .s5 span{ color:hsl(200 40% 96% / .92); }
.core figcaption{ font-family:var(--f-mono); font-size:10px; letter-spacing:.14em; color:var(--steel);
  text-align:center; margin-top:16px; text-transform:uppercase; }

/* ============================================================
   COLLECTION — accession ledger
   ============================================================ */
.collection .head{ display:flex; justify-content:space-between; align-items:flex-end; gap:28px; flex-wrap:wrap; margin-bottom:40px; }
.ledger-meta{ font-family:var(--f-mono); font-size:11px; color:var(--steel); text-align:right; letter-spacing:.1em; }
.ledger-meta b{ color:var(--ink); font-weight:500; display:block; font-size:26px; letter-spacing:0; }
.ledger{ width:100%; border-collapse:collapse; font-family:var(--f-mono); font-size:12.5px; min-width:720px; }
.ledger caption{ text-align:left; font-family:var(--f-mono); font-size:10px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--steel); padding-bottom:12px; }
.ledger th{
  text-align:left; font-weight:500; color:var(--steel);
  font-size:9.5px; letter-spacing:.18em; text-transform:uppercase;
  padding:0 16px 12px; border-bottom:1.5px solid hsl(206 40% 40% / .5);
  white-space:nowrap;
}
.ledger th.num, .ledger td.num{ text-align:right; }
.ledger td{
  padding:15px 16px; border-bottom:1px solid hsl(203 30% 55% / .22);
  color:var(--ink-soft); vertical-align:baseline;
}
.ledger td .sp{ color:var(--ink); font-weight:500; }
.ledger td .latin{ font-style:italic; color:var(--steel); display:block; font-size:11px; margin-top:2px; }
.ledger td.acc{ color:var(--accent-dk); font-weight:500; }
.ledger td.geo{ font-variant-numeric:tabular-nums; white-space:nowrap; color:var(--steel); }
.ledger tbody tr{ transition:background .2s ease; }
.ledger tbody tr:hover{ background:hsl(188 60% 92% / .5); }
.ledger tbody tr:hover td.acc{ color:var(--accent); }
.ledger-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; }

/* ============================================================
   COLD SCIENCE — cross-section
   ============================================================ */
.science .wrap{ display:grid; grid-template-columns:.92fr 1.08fr; gap:clamp(40px,6vw,90px); align-items:center; }
.science h2{ margin-bottom:24px; }
.science .why{ display:grid; gap:22px; margin-top:34px; }
.science .why .row{ display:grid; grid-template-columns:auto 1fr; gap:20px; align-items:start;
  padding-top:22px; border-top:1px solid hsl(203 30% 55% / .28); }
.science .why .t{ font-family:var(--f-mono); font-size:clamp(1.5rem,3vw,2.1rem); color:var(--accent-dk);
  font-weight:500; line-height:1; font-variant-numeric:tabular-nums; }
.science .why h3{ margin:0 0 6px; font-family:var(--f-display); font-weight:600; font-size:1.05rem; letter-spacing:.01em; }
.science .why p{ margin:0; color:var(--ink-soft); font-size:.95rem; max-width:46ch; }
.xsec{ width:100%; height:auto; border-radius:12px; overflow:hidden;
  border:1px solid hsl(203 30% 50% / .3); background:hsl(202 44% 97% / .5);
  box-shadow:0 30px 70px -40px hsl(210 50% 30% / .5); }
.xsec text{ font-family:var(--f-mono); }

/* ============================================================
   DEPOSITORS
   ============================================================ */
.dep-top{ display:grid; grid-template-columns:1fr auto; gap:30px; align-items:end; margin-bottom:52px; }
.dep-count{ font-family:var(--f-display); font-weight:700; font-size:clamp(3rem,9vw,7rem);
  line-height:.8; color:var(--accent-dk); letter-spacing:-.02em; }
.dep-count small{ display:block; font-family:var(--f-mono); font-size:11px; letter-spacing:.24em;
  color:var(--steel); font-weight:400; margin-top:14px; text-transform:uppercase; }
.dep-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:1px;
  background:hsl(203 30% 55% / .25); border:1px solid hsl(203 30% 55% / .25); }
.dep{ background:var(--white); padding:24px 22px 22px; display:flex; flex-direction:column; gap:6px;
  transition:background .25s ease; }
.dep:hover{ background:hsl(188 55% 94%); }
.dep .flag{ font-family:var(--f-mono); font-size:10px; letter-spacing:.2em; color:var(--accent-dk); }
.dep .name{ font-family:var(--f-display); font-weight:600; font-size:1.05rem; color:var(--ink); line-height:1.2; }
.dep .inst{ font-size:.82rem; color:var(--steel); }
.dep .n{ font-family:var(--f-mono); font-size:11px; color:var(--ink-soft); margin-top:8px;
  font-variant-numeric:tabular-nums; }
.dep .n b{ color:var(--accent-dk); font-weight:500; }

/* ============================================================
   VISIT / CONTACT
   ============================================================ */
.visit .wrap{ display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(40px,6vw,90px); align-items:start; }
.visit h2{ margin-bottom:26px; }
.visit .lead{ margin-bottom:38px; }
.coords{ display:grid; gap:0; font-family:var(--f-mono); font-size:12.5px;
  border-top:1px solid hsl(203 30% 55% / .3); }
.coords .r{ display:grid; grid-template-columns:130px 1fr; gap:18px; padding:16px 0;
  border-bottom:1px solid hsl(203 30% 55% / .22); }
.coords .r .l{ color:var(--steel); letter-spacing:.14em; font-size:9.5px; text-transform:uppercase; padding-top:2px; }
.coords .r .d{ color:var(--ink); }
.coords .r .d a{ color:var(--accent-dk); text-decoration:none; }
.coords .r .d a:hover{ text-decoration:underline; }

.form{ background:hsl(202 44% 97% / .6); border:1px solid hsl(203 30% 55% / .3); border-radius:14px;
  padding:clamp(24px,4vw,38px); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
.form h3{ margin:0 0 4px; font-family:var(--f-display); font-weight:700; font-size:1.4rem; }
.form p.sub{ margin:0 0 24px; color:var(--steel); font-size:.9rem; }
.field{ margin-bottom:18px; }
.field label{ display:block; font-family:var(--f-mono); font-size:10px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--steel); margin-bottom:8px; }
.field input, .field select, .field textarea{
  width:100%; padding:13px 14px; font-family:var(--f-text); font-size:15px; color:var(--ink);
  background:var(--white); border:1px solid hsl(203 30% 55% / .4); border-radius:8px;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.field textarea{ resize:vertical; min-height:96px; }
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:var(--accent); box-shadow:0 0 0 3px hsl(188 84% 43% / .18);
}
.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--f-mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  background:var(--ink); color:var(--white); border:none; border-radius:8px;
  padding:15px 24px; cursor:pointer; transition:background .25s ease, transform .2s ease;
}
.btn:hover{ background:var(--accent-dk); transform:translateY(-1px); }
.btn:active{ transform:translateY(0); }
.form .note{ margin:16px 0 0; font-size:.8rem; color:var(--steel); font-family:var(--f-mono); letter-spacing:.02em; min-height:1.2em; }
.form .note.ok{ color:var(--accent-dk); }

/* ============================================================
   FOOTER
   ============================================================ */
footer{ background:hsl(211 56% 12%); color:hsl(200 30% 82%); position:relative; }
footer .wrap{ padding-top:clamp(56px,8vw,96px); padding-bottom:48px; }
footer .ftop{ display:grid; grid-template-columns:1.6fr 1fr 1fr; gap:40px; align-items:start; }
footer .fbrand b{ font-family:var(--f-display); font-weight:800; font-size:clamp(1.8rem,4vw,2.8rem);
  letter-spacing:.02em; color:hsl(200 35% 94%); display:block; }
footer .fbrand p{ max-width:40ch; color:hsl(200 22% 68%); margin:16px 0 0; font-size:.95rem; }
footer .fcol h4{ font-family:var(--f-mono); font-size:10px; letter-spacing:.22em; text-transform:uppercase;
  color:hsl(200 30% 60%); margin:0 0 16px; }
footer .fcol a{ display:block; color:hsl(200 26% 80%); text-decoration:none; font-size:.92rem; padding:5px 0; }
footer .fcol a:hover{ color:var(--accent); }
footer .fbar{ display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap;
  margin-top:clamp(48px,7vw,80px); padding-top:26px; border-top:1px solid hsl(200 30% 40% / .3);
  font-family:var(--f-mono); font-size:10.5px; letter-spacing:.12em; color:hsl(200 22% 58%); }
footer .fbar span{ display:inline-flex; align-items:center; gap:8px; }

/* ============================================================
   404
   ============================================================ */
.err{ min-height:100svh; display:grid; place-items:center; text-align:center; padding:40px var(--edge);
  position:relative; overflow:hidden; }
.err-inner{ position:relative; z-index:2; }
.err .big{ font-family:var(--f-display); font-weight:800; font-size:clamp(5rem,26vw,20rem);
  line-height:.8; letter-spacing:-.03em; color:var(--ink); position:relative; }
.err .msg{ font-family:var(--f-mono); font-size:12px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--accent-dk); margin:26px 0 10px; }
.err h1{ font-family:var(--f-display); font-weight:600; font-size:clamp(1.3rem,3.4vw,2rem);
  margin:0 0 18px; color:var(--ink); }
.err p{ max-width:46ch; margin:0 auto 30px; color:var(--ink-soft); }
.err .home{ display:inline-flex; align-items:center; gap:10px; font-family:var(--f-mono); font-size:12px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--white); background:var(--ink);
  padding:14px 24px; border-radius:8px; text-decoration:none; transition:background .25s; }
.err .home:hover{ background:var(--accent-dk); }
#frostcanvas{ position:absolute; inset:0; z-index:1; width:100%; height:100%; }

/* ============================================================
   GUIDE
   ============================================================ */
.guide-hero{ padding:clamp(90px,14vw,170px) var(--edge) clamp(40px,6vw,70px); max-width:var(--maxw); margin:0 auto; }
.guide-hero .eyebrow{ color:var(--accent-dk); }
.guide-hero h1{ font-family:var(--f-display); font-weight:800; font-size:clamp(2.6rem,8vw,6rem);
  line-height:.9; letter-spacing:-.02em; margin:14px 0 0; text-wrap:balance; }
.guide-hero p{ max-width:60ch; font-size:clamp(1.05rem,1.7vw,1.3rem); color:var(--ink-soft); margin-top:24px; }
.guide-body{ max-width:min(820px,92vw); margin:0 auto; padding:0 var(--edge) 120px; }
.guide-body section{ padding:clamp(40px,6vw,64px) 0; border-top:1px solid hsl(203 30% 55% / .28); }
.guide-body h2{ font-family:var(--f-display); font-weight:700; font-size:clamp(1.5rem,3.6vw,2.4rem);
  letter-spacing:-.01em; margin:6px 0 8px; }
.guide-body .num{ font-family:var(--f-mono); font-size:11px; letter-spacing:.24em; color:var(--accent-dk);
  text-transform:uppercase; }
.guide-body h3{ font-family:var(--f-display); font-weight:600; font-size:1.15rem; margin:30px 0 8px; }
.guide-body p{ color:var(--ink-soft); margin:14px 0; }
.guide-body p b{ color:var(--ink); }
.guide-body ul{ color:var(--ink-soft); padding-left:22px; margin:14px 0; }
.guide-body li{ margin:8px 0; }
.guide-body li b{ color:var(--ink); }
.guide-body pre{ background:hsl(211 50% 14%); color:hsl(200 30% 88%); font-family:var(--f-mono);
  font-size:12px; line-height:1.7; padding:20px 22px; border-radius:10px; overflow-x:auto;
  margin:18px 0; border:1px solid hsl(200 30% 30% / .4); }
.guide-body pre .c{ color:hsl(188 60% 60%); }
.guide-body pre .k{ color:hsl(28 80% 68%); }
.guide-body code{ font-family:var(--f-mono); font-size:.86em; background:hsl(188 40% 90%);
  color:var(--accent-dk); padding:2px 6px; border-radius:4px; }
.guide-body pre code{ background:none; color:inherit; padding:0; }
.scorecard{ width:100%; border-collapse:collapse; font-family:var(--f-mono); font-size:12.5px; margin:18px 0; }
.scorecard td{ padding:11px 14px; border-bottom:1px solid hsl(203 30% 55% / .22); }
.scorecard td:last-child{ text-align:right; color:var(--accent-dk); font-weight:500; }
.scorecard tr:hover{ background:hsl(188 55% 94% / .5); }
.backhome{ display:inline-flex; align-items:center; gap:10px; margin-top:40px;
  font-family:var(--f-mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent-dk); text-decoration:none; }
.backhome:hover{ color:var(--accent); }
.callout{ background:hsl(188 50% 93% / .6); border-left:3px solid var(--accent);
  padding:18px 22px; border-radius:0 10px 10px 0; margin:22px 0; }
.callout p{ margin:0; color:var(--ink); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1040px){
  .mission .wrap{ grid-template-columns:1fr; }
  .core figure{ position:static; max-width:340px; }
  .science .wrap{ grid-template-columns:1fr; }
  .visit .wrap{ grid-template-columns:1fr; }
  footer .ftop{ grid-template-columns:1fr 1fr; }
  footer .fbrand{ grid-column:1 / -1; }
}
@media (max-width: 760px){
  .navlinks{
    position:fixed; inset:58px 0 auto 0;
    flex-direction:column; align-items:flex-start; gap:0;
    background:hsl(202 44% 97% / .97); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
    padding:8px var(--edge) 22px; border-bottom:1px solid hsl(203 30% 60% / .3);
    transform:translateY(-140%); transition:transform .4s cubic-bezier(.22,1,.36,1); pointer-events:none;
  }
  .navlinks.open{ transform:none; pointer-events:auto; }
  .navlinks a{ padding:14px 0; width:100%; border-bottom:1px solid hsl(203 30% 55% / .18); font-size:15px; }
  .navlinks .tag{ margin-top:14px; }
  .navtoggle{ display:inline-flex; flex-direction:column; gap:5px; background:none; border:none;
    cursor:pointer; padding:8px; }
  .navtoggle span{ width:24px; height:2px; background:var(--ink); transition:.3s; }
  .navtoggle.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .navtoggle.open span:nth-child(2){ opacity:0; }
  .navtoggle.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
  .readout-inner{ grid-template-columns:1fr 1fr; }
  .metric:nth-child(3){ border-left:none; }
  .metric:nth-child(1), .metric:nth-child(2){ border-bottom:1px solid hsl(203 30% 50% / .2); }
  .dep-top{ grid-template-columns:1fr; }
  footer .ftop{ grid-template-columns:1fr; }
  .coords .r{ grid-template-columns:110px 1fr; gap:12px; }
}
@media (max-width: 420px){
  .metric .v{ font-size:1.4rem; }
  .core figure{ max-width:none; }
}