/* PenguinTracker — shared sheet for the generated archive pages.
   The showpieces (index, ice, antarctica) stay self-contained; there are ~890
   archive pages and duplicating the sheet into every one of them would be worse
   than linking it. Plain CSS, no build step. */

:root{
  --paper:#f4f6f8; --ink:#0d1319; --ink2:#5c6a77; --ink3:#93a1ae;
  --line:rgba(13,19,25,.13); --line2:rgba(13,19,25,.07);
  --cold:#1f5fbf; --hot:#d4571f; --warn:#9a7415; --vio:#6b46c9;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);
  font:13px/1.65 var(--mono);-webkit-font-smoothing:antialiased}
a{color:var(--cold);text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:1120px;margin:0 auto;padding:0 26px}

/* ---- masthead ---------------------------------------------------------- */
#top{border-bottom:1px solid var(--line);background:#ffffff9c;
  position:sticky;top:0;z-index:20;backdrop-filter:blur(9px)}
#top .wrap{display:flex;align-items:center;gap:26px;height:46px}
.mark{font-size:12.5px;font-weight:600;letter-spacing:-.01em;color:var(--ink);
  white-space:nowrap}
.mark span{color:var(--cold)}
#nav{display:flex;gap:13px;overflow-x:auto;scrollbar-width:none}
#nav::-webkit-scrollbar{display:none}
#nav a{font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink2);white-space:nowrap}
#nav a:hover{color:var(--ink);text-decoration:none}
#nav a[aria-current]{color:var(--ink);box-shadow:inset 0 -1px 0 var(--ink)}

/* ---- page head --------------------------------------------------------- */
.crumb{font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink3);padding-top:26px}
.crumb a{color:var(--ink3)}
.crumb a:hover{color:var(--ink2);text-decoration:none}
h1{font:500 clamp(25px,4.2vw,41px)/1.08 var(--mono);letter-spacing:-.038em;
  margin:13px 0 0;max-width:22ch}
.kicker{font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink3);
  margin-top:11px}
.lede{margin-top:16px;max-width:62ch;font-size:13.5px;line-height:1.8;color:var(--ink2)}
.lede b{color:var(--ink);font-weight:600}

/* ---- layout ------------------------------------------------------------ */
/* minmax(0,…) rather than 1fr on both: a grid track defaults to a minimum of
   its content, so a .tblwrap inside this column stops scrolling inside itself
   and pushes the whole page sideways instead. Cost 156px of horizontal overflow
   on a colony page at 390px the first time a table was put in one. */
.cols{display:grid;grid-template-columns:minmax(0,1fr) 372px;gap:34px;
  align-items:start;margin:38px 0 0}
@media(max-width:900px){.cols{grid-template-columns:minmax(0,1fr)}}

.k{font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink3)}
.panel{border:1px solid var(--line);background:#fffffff0}
.panel>.k{padding:11px 15px;border-bottom:1px solid var(--line2)}

/* key/value rows */
.kv{border:1px solid var(--line);background:#fffffff0}
.kv .r{display:flex;gap:16px;padding:8.5px 15px;border-top:1px solid var(--line2);
  font-size:12px}
.kv .r:first-child{border-top:0}
.kv .r>span:first-child{color:var(--ink2);flex:0 0 40%;
  font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;padding-top:1px}
.kv .r>span:last-child{flex:1;font-variant-numeric:tabular-nums;
  overflow-wrap:anywhere}
.kv .r.hi>span:last-child{font-size:17px;letter-spacing:-.02em;line-height:1.25}

/* stat strip — a few quotable numbers across the top of a story page */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(212px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);margin-top:30px}
.stats>div{background:#fff;padding:17px 18px 19px}
.stats .v{font:500 clamp(27px,3.6vw,40px)/1 var(--mono);letter-spacing:-.045em;
  font-variant-numeric:tabular-nums}
.stats .l{font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink3);
  margin-top:10px}
.stats .s{font-size:11px;color:var(--ink2);margin-top:7px;line-height:1.65;max-width:34ch}

/* small multiples */
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(318px,1fr));gap:16px;
  margin-top:18px}
.grid2 .fig{margin:0}

/* charts + maps */
.fig{border:1px solid var(--line);background:#fff;padding:0;position:relative}
.fig svg{display:block;width:100%;height:auto}
.figcap{font-size:9.5px;letter-spacing:.05em;color:var(--ink3);padding:9px 13px;
  border-top:1px solid var(--line2);line-height:1.6}
.figcap b{color:var(--ink2);font-weight:500}

/* A wide chart with per-row labels cannot shrink to a phone and stay legible;
   scroll the figure, never the page. */
.figscroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.figscroll svg{min-width:720px}
/* The colony map carries 12 place labels across 1360 units; below this it is
   not a small map, it is an unreadable one. */
.figscroll.map svg{min-width:880px}
/* The sheet draws one row per breeding site at one unit per row, so below one
   device pixel per row the renderer starts dropping rows — a figure that
   silently omits some of the 728 records it claims to draw. Its floor is the
   full viewBox width; it scrolls rather than shrinks. */
.figscroll.sheet svg{min-width:1000px}

/* ---- sections ---------------------------------------------------------- */
section{margin-top:46px}
h2{font:500 17px/1.3 var(--mono);letter-spacing:-.02em;margin:0 0 3px}
.note{color:var(--ink2);max-width:70ch;line-height:1.8;font-size:12.5px}
.note b{color:var(--ink);font-weight:600}

/* link grids */
.links{margin-top:16px;display:grid;gap:1px;background:var(--line);
  grid-template-columns:repeat(auto-fill,minmax(238px,1fr));border:1px solid var(--line)}
.links a{background:var(--paper);padding:12px 14px;display:block;color:var(--ink);
  transition:background .12s}
.links a:hover{background:#fff;text-decoration:none}
.links .n{font-size:12.5px;letter-spacing:-.01em}
.links .m{font-size:9.5px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink3);margin-top:4px}
.links .d{font-size:10px;color:var(--cold);margin-top:3px;font-variant-numeric:tabular-nums}

/* ---- tables ------------------------------------------------------------ */
/* Tables carry six columns of tabular numbers and cannot shrink below their
   content; scroll the table, never the page. */
.tblwrap{overflow-x:auto;margin-top:14px;-webkit-overflow-scrolling:touch}
.tbl{width:100%;border-collapse:collapse;font-size:12px;min-width:520px}
.tbl th{font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink3);
  text-align:left;font-weight:400;padding:0 12px 8px 0;border-bottom:1px solid var(--line)}
.tbl td{padding:7px 12px 7px 0;border-bottom:1px solid var(--line2);
  font-variant-numeric:tabular-nums;vertical-align:top}
.tbl tr:hover td{background:#0d13190a}
.tbl .num{text-align:right;padding-right:18px}
.tbl th.num{padding-right:18px}

#filter{width:100%;max-width:340px;margin-top:20px;padding:9px 12px;
  border:1px solid var(--line);background:#fff;font:12px/1.4 var(--mono);color:var(--ink)}
#filter:focus{outline:none;border-color:#0d131955}
#count{font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink3);
  margin-top:9px}

/* ---- tags -------------------------------------------------------------- */
.tag{display:inline-block;font-size:8.5px;letter-spacing:.13em;padding:2px 6px;
  border:1px solid;margin-right:5px;white-space:nowrap;text-transform:uppercase}
.t-cold{color:var(--cold);border-color:#1f5fbf40;background:#1f5fbf0d}
.t-hot{color:var(--hot);border-color:#d4571f40;background:#d4571f0d}
.t-warn{color:var(--warn);border-color:#9a741540;background:#9a74150d}
.t-vio{color:var(--vio);border-color:#6b46c940;background:#6b46c90d}
.t-flat{color:var(--ink2);border-color:var(--line)}

/* ---- footer ------------------------------------------------------------ */
footer{margin-top:70px;border-top:1px solid var(--line);padding:26px 0 58px;
  color:var(--ink3);font-size:10px;letter-spacing:.05em;line-height:1.9}
footer a{color:var(--ink2)}
footer .srcs{margin-top:9px;max-width:78ch}