/* The header every page shares (text pages and the map): "PNT lab" with the
   site name under it, the page links and the "by region" menu on the right,
   the toggle that folds it away, all on white with black ink. */
:root {
  --ink: #000000;
  --paper: #ffffff;
  --rule: #e2e2e2;
  --head: "Poppins", "Poppins Fallback", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --wide: 75rem;
  --gutter: clamp(16px, 6vw, 100px);
}
@media (min-width: 1400px) { :root { --wide: 86rem; } }
@media (min-width: 1800px) { :root { --wide: 96rem; } }

/* On white, lined up with the text column: "PNT lab" with the site
   name under it on one line, and the page links in light lowercase on the
   right, level with the top of the mark. */
.site-head { min-height: 0; background: var(--paper); }
.head-in {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  justify-content: space-between;
  gap: 1rem 2rem;
  padding: clamp(1.5rem, 5vw, 4rem) max(4.5rem, var(--gutter), calc((100vw - var(--wide)) / 2 + var(--gutter))) clamp(1rem, 2.5vw, 2rem) max(var(--gutter), calc((100vw - var(--wide)) / 2 + var(--gutter)));
}
/* The header folds away: its row collapses to nothing while it fades and
   lifts, and unfolds the same way. */
.head-wrap {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.head-wrap > .site-head {
  transition: opacity 0.4s ease, transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s;
}
html.head-moving .head-wrap > .site-head { overflow: hidden; }
html.head-off .head-wrap { grid-template-rows: 0fr; }
html.head-off .head-wrap > .site-head {
  overflow: hidden;
  visibility: hidden;
  opacity: 0;
  transform: translateY(-1.5rem);
  transition: opacity 0.3s ease, transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s 0.6s;
}
/* The toggle: a black map hexagon at the top right with an arrow that
   flips over when the header is away. It stays put while the page scrolls. */
.head-toggle {
  position: fixed;
  top: 0.75rem;
  right: clamp(12px, 2vw, 28px);
  z-index: 30;
  display: grid;
  place-items: center;
  width: 2.7rem;
  height: 2.34rem;
  padding: 0;
  border: 0;
  background: var(--ink);
  color: var(--paper);
  clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
  cursor: pointer;
  transition: transform 0.4s cubic-bezier(0.25, 1.9, 0.6, 0.75), background 0.2s ease;
}
.head-toggle:hover { transform: scale(1.12); }
.head-toggle:active { transform: scale(0.94); }
.head-toggle:focus-visible { background: #444444; transform: scale(1.12); outline: none; }
.head-toggle .arrow {
  display: block;
  width: 0.62rem;
  height: 0.62rem;
  margin-top: 0.22rem;
  border: solid currentColor;
  border-width: 2.5px 0 0 2.5px;
  transform: rotate(45deg);
  transition: transform 0.55s cubic-bezier(0.25, 1.6, 0.5, 1), margin 0.55s cubic-bezier(0.25, 1.6, 0.5, 1);
}
html.head-off .head-toggle .arrow { transform: rotate(225deg); margin-top: -0.3rem; }
.brand-wrap { display: flex; min-width: 0; flex-direction: column; align-items: flex-start; gap: 0.9rem; }
/* "PNT Lab", always on one line. */
.lab {
  display: inline-block;
  width: max-content;
  font-family: var(--head);
  font-weight: 700;
  font-size: clamp(2rem, 8vw, 3.4rem);
  line-height: 1;
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.brand {
  white-space: nowrap;
  text-decoration: none;
  font-family: var(--head);
  font-weight: 600;
  font-size: clamp(1.1rem, 4.6vw, 1.7rem);
  line-height: 1;
  letter-spacing: -0.01em;
}
.brand:hover { text-decoration: none; }
/* The dropdowns share the nav's right edge, so switching menus never shifts
   the panel horizontally as the viewport or active menu changes. */
.site-head nav {
  position: relative;
  display: flex;
  justify-self: end;
  max-width: min(42rem, 60vw);
  flex-wrap: wrap;
  gap: 0.4rem 1.8rem;
  padding-top: 0.6rem;
  font-size: 1.15rem;
  white-space: normal;
}
.site-head nav a { text-decoration: none; }
/* Image-led dropdowns in the same light lowercase, their panels white
   with a black edge and a grey copy offset behind, the links filling black
   on hover like the page's other links. */
.menu { position: static; }
.menu summary {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  list-style: none;
  cursor: pointer;
}
.menu summary::-webkit-details-marker { display: none; }
.menu summary::after {
  content: "";
  width: 0.4em;
  height: 0.4em;
  border: solid currentColor;
  border-width: 0 1.5px 1.5px 0;
  transform: translateY(-0.15em) rotate(45deg);
  transition: transform 0.2s ease;
}
.menu[open] summary::after { transform: translateY(0.05em) rotate(225deg); }
.menu summary:hover,
.menu[open] summary { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.18em; }
.menu summary:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.menu-list {
  position: absolute;
  top: calc(100% + 0.6rem);
  right: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  min-width: min(17rem, calc(100vw - 2rem));
  padding: 0.4rem 0;
  background: var(--paper);
  border: 1px solid var(--ink);
  box-shadow: 6px 6px 0 var(--rule);
  animation: menu-in 0.2s ease backwards;
}
@keyframes menu-in { from { opacity: 0; transform: translateY(-0.4rem); } }
.menu-list a { display: flex; align-items: center; gap: 0.85rem; padding: 0.4rem 1.1rem; text-decoration: none; }
.menu-list img {
  flex: none;
  width: 3.6rem;
  height: 3.12rem;
  object-fit: cover;
  clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
  transition: transform 0.35s cubic-bezier(0.25, 1.9, 0.6, 0.75);
}
.menu-list a:hover img,
.menu-list a:focus-visible img { transform: scale(1.12) rotate(-4deg); }
.menu-list a:hover,
.menu-list a:focus-visible,
.menu-list a[aria-current="page"] { background: var(--ink); color: var(--paper); text-decoration: none; outline: none; }
.site-head nav > a:hover,
.site-head nav > a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; }


@media (max-width: 1100px) {
  .head-in { grid-template-columns: minmax(0, 1fr); }
  .brand-wrap { gap: 0.7rem; }
  .site-head nav { width: 100%; max-width: 100%; justify-content: flex-end; gap: 0.4rem 1.2rem; padding-top: 0; font-size: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .head-wrap, .site-head, .head-toggle, .head-toggle .arrow { transition: none !important; }
}

/* Links take the header's ink whatever page the header is on. */
.site-head a { color: inherit; }
.site-head a:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.menu-list a:hover,
.menu-list a:focus-visible,
.menu-list a[aria-current="page"] { color: var(--paper); }

/* The map page: this header on top, the map filling the rest of the screen;
   folding the header away gives the map its height. (Here rather than in
   style.css, and specific enough to win over it, so a browser holding an
   older style.css still lays the page out right.) */
body.with-head { display: flex; flex-direction: column; }
/* The header sits over the top of the page and slides away; the map just
   starts below it, so folding the header resizes the map once, not on every
   frame of the slide (which made it flash). menu.js sets --head-h. */
body.with-head .head-wrap {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 6;
  display: block;
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
html.head-off body.with-head .head-wrap { transform: translateY(-100%); }
html.head-off body.with-head .head-wrap > .site-head { opacity: 1; transform: none; visibility: visible; }
body.with-head .map-section { position: relative; inset: auto; flex: 1; min-height: 0; margin-top: var(--head-h, 2.5rem); }
html.head-off body.with-head .map-section { margin-top: 0; }
body.with-head .map-frame { height: 100%; }
body.with-head .map-head { top: 0; }

/* On the text pages the same hexagon takes you back to the top of the
   page, nudging its arrow upwards when pointed at. */
.head-toggle.to-top:hover .arrow { transform: rotate(45deg) translate(-3px, -3px); }

/* On the map the header is a slim bar: "PNT lab" in the corner, the links
   beside the toggle, and the site name kept for screen readers only. */
body.with-head .head-in {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.2rem 1.5rem;
  padding: 0.55rem 4.5rem 0.55rem clamp(14px, 2.4vw, 32px);
  border-bottom: 1px solid var(--rule);
}
body.with-head .brand-wrap { gap: 0; }
body.with-head .lab { width: auto; font-size: 1.2rem; }
body.with-head .brand {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
body.with-head .site-head nav { padding-top: 0; font-size: 0.95rem; gap: 0.2rem 1.4rem; }
body.with-head .site-head nav > a,
body.with-head .site-head nav > .menu > summary { padding: 0.35rem 0.5rem; }
body.with-head .head-toggle { top: 0.5rem; right: clamp(10px, 1.6vw, 24px); }
@media (max-width: 560px) {
  body.with-head .head-in { padding-right: 3.9rem; }
  body.with-head .site-head nav { font-size: 0.9rem; gap: 0.2rem 1rem; }
}

/* On the map the hexagon sits wholly inside the slim bar, centred in it. */
body.with-head .head-toggle {
  width: 2.2rem;
  height: 1.9rem;
  top: calc((var(--head-h, 2.5rem) - 1.9rem) / 2);
}
body.with-head .head-toggle .arrow { width: 0.5rem; height: 0.5rem; margin-top: 0.18rem; border-width: 2px 0 0 2px; }
html.head-off body.with-head .head-toggle { top: 0.5rem; }

/* The site name in a black box with white text, like the titles on the
   right of the pages. (Hidden on the map, where the bar is slim.) */
.site-head .brand {
  display: inline-block;
  padding: 0.12em 0.32em 0.16em;
  background: var(--ink);
  color: var(--paper);
}
.site-head .brand:hover { background: #333333; }


/* The active menu is underlined, like the other links, on its page. */
.menu.current summary { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.18em; }

/* On the text pages the back-to-top hexagon only appears once you have
   started scrolling: it pops up from below, and drops away again at the top. */
.head-toggle.to-top {
  opacity: 0;
  scale: 0.4;
  translate: 0 1rem;
  pointer-events: none;
  transition: transform 0.4s cubic-bezier(0.25, 1.9, 0.6, 0.75), background 0.2s ease, opacity 0.3s ease, scale 0.45s cubic-bezier(0.25, 1.7, 0.5, 1), translate 0.45s cubic-bezier(0.25, 1.7, 0.5, 1);
}
html.scrolled .head-toggle.to-top { opacity: 1; scale: 1; translate: 0 0; pointer-events: auto; }
@media (prefers-reduced-motion: reduce) { .head-toggle.to-top { transition: opacity 0.2s ease; scale: 1; translate: 0 0; } }

.menu-list a span { white-space: nowrap; }