/* ==========================================================================
   SERION — site.css
   --------------------------------------------------------------------------
   Layout idea: the page is a map sheet. An indigo survey plate bleeds off
   the right edge of the hero; everything below is set flush left on one
   grid, like the notes in the margin of a map: legend (what we do),
   time-lapse frames (method), register (companies).

   Contents
     1. Fonts
     2. Tokens (colours, type, spacing)
     3. Base
     4. Layout helpers
     5. Header and footer
     6. Buttons and links
     7. Hero
     8. Territory map (the SVG drawn by territory.js)
     9. Sections: mission, activities, method, companies, contact
    10. Legal pages and 404
    11. Smaller and larger screens
    12. Motion preferences and print
   ========================================================================== */


/* 1. Fonts ----------------------------------------------------------------- */

/* Archivo, variable (weight 100–900, width 62–125 %). SIL Open Font License,
   see assets/fonts/OFL.txt. One file serves the whole site. */
@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-latin-wdth-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}


/* 2. Tokens ---------------------------------------------------------------- */

:root {
  color-scheme: only light;

  /* Colours: the legend of the map. The site uses these and nothing else. */
  --indigo: #1B1C6B;       /* open space, land not yet surveyed */
  --indigo-deep: #141553;  /* the plates of the time-lapse, the footer */
  --indigo-2: #272A8A;     /* parcels put to use */
  --survey: #5D62D6;       /* survey lines and marks */
  --mist: #C5C9F8;         /* quiet text on indigo */
  --paper: #F5F5FB;        /* the page */
  --ink: #17184A;          /* text on paper */
  --ink-2: #4A4C7D;        /* secondary text on paper */
  --rule: #D8D9EC;         /* hairlines on paper */
  --gold: #F0C349;         /* investments, main actions */
  --gold-deep: #D2A125;    /* survey lines on gold */
  --coral: #F2644B;        /* businesses founded */
  --green: #2E9C7C;        /* thriving land, three tones */
  --green-light: #3BB08A;
  --green-dark: #237F68;
  --link: #B4C2FF;         /* software: the lines between businesses */

  /* Type: one family, two widths. Wide for names and headings, normal to read. */
  --font: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --wide: 125%;
  --semi-wide: 112%;

  --text: 1.0625rem;                                   /* 17 px */
  --text-small: 0.9375rem;                             /* 15 px */
  --text-lede: clamp(1.125rem, 1.02rem + 0.45vw, 1.3125rem);
  --text-h3: 1.3125rem;                                /* 21 px */
  --text-h2: clamp(1.75rem, 1.2rem + 2vw, 2.75rem);
  --text-h1: clamp(1.75rem, min(8.6vw, 1.15rem + 4.3vw), 4rem);   /* a clause of the headline fits on one line, down to 320 px */

  /* Spacing */
  --gutter: clamp(1.25rem, 5vw, 4.5rem);
  --page: calc(77.5rem + var(--gutter) + var(--gutter));   /* content width plus both gutters */
  --band: clamp(4.5rem, 3rem + 6vw, 8.5rem);
  --header-h: 4rem;
  --measure: 34rem;

  /* Rotation of the survey grid, shared by the map and the brand mark. */
  --angle: -11;
}


/* 3. Base ------------------------------------------------------------------ */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--text);
  line-height: 1.6;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }

h1, h2, h3 { font-weight: 600; text-wrap: balance; }

h1 {
  font-size: var(--text-h1);
  font-stretch: var(--wide);
  line-height: 1.04;
  letter-spacing: -0.015em;
}

h2 {
  font-size: var(--text-h2);
  font-stretch: var(--wide);
  line-height: 1.1;
  letter-spacing: -0.01em;
}

h3 {
  font-size: var(--text-h3);
  font-stretch: var(--semi-wide);
  line-height: 1.25;
}

p { text-wrap: pretty; }

a { color: inherit; }

img, svg { max-width: 100%; }

::selection { background: var(--gold); color: var(--ink); }

:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

.line { display: block; }       /* one clause of the headline per line */
.nowrap { white-space: nowrap; }

.vh {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip {
  position: absolute;
  left: var(--gutter);
  top: -4rem;
  z-index: 30;
  padding: 0.625rem 1rem;
  background: var(--gold);
  color: var(--ink);
  font-weight: 600;
}
.skip:focus { top: 0.5rem; }


/* 4. Layout helpers -------------------------------------------------------- */

/* One wrapper sets the width and the side gutter for the whole site. */
.wrap {
  max-width: var(--page);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.band { padding-block: var(--band); }
.band--paper { background: var(--paper); color: var(--ink); }
.band--indigo { background: var(--indigo); color: var(--paper); }
.band--gold { background: var(--gold); color: var(--ink); }
.band--ruled { border-top: 1px solid var(--rule); }

.band__head {
  display: grid;
  gap: 1rem;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.lede {
  max-width: var(--measure);
  font-size: var(--text-lede);
  line-height: 1.5;
}
.band--paper .lede { color: var(--ink-2); }
.band--indigo .lede { color: var(--mist); }


/* 5. Header and footer ----------------------------------------------------- */

.site-header {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 20;
  height: var(--header-h);
  background: var(--indigo);
  color: var(--paper);
  transition: background-color 0.25s ease;
}
/* While the hero is still under the header, the map shows through. */
.site-header.is-top { background: transparent; }

.site-header__row {
  display: flex;
  align-items: center;
  gap: 2rem;
  height: 100%;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  margin-right: auto;
  color: inherit;
  text-decoration: none;
  font-size: 1.125rem;
  font-weight: 700;
  font-stretch: var(--wide);
  letter-spacing: 0.16em;
}
/* The mark is one parcel of the survey, at the angle of the grid. */
.brand__mark {
  width: 0.8125rem;
  height: 0.8125rem;
  background: var(--gold);
  transform: rotate(calc(var(--angle) * 1deg));
}

.nav { display: flex; gap: 1.75rem; }
.nav a, .lang a {
  font-size: var(--text-small);
  font-weight: 500;
  text-decoration: none;
  text-underline-offset: 0.45em;
  text-decoration-thickness: 2px;
}
.nav a:hover, .lang a:hover, .nav a[aria-current] { text-decoration: underline; text-decoration-color: var(--gold); }

.lang {
  display: flex;
  gap: 0.25rem;
  font-size: var(--text-small);
  font-weight: 600;
}
.lang__item {
  display: inline-grid;
  place-items: center;
  min-width: 2.25rem;
  height: 2.25rem;
  color: var(--mist);
}
.lang__item.is-current { background: var(--indigo-2); color: var(--paper); }
.site-header.is-top .lang__item.is-current { background: var(--paper); color: var(--ink); }

.site-footer {
  padding-block: 3.5rem 2.5rem;
  background: var(--indigo-deep);
  color: var(--mist);
  font-size: var(--text-small);
}
.site-footer__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2rem 3rem;
}
.site-footer .brand { color: var(--paper); margin: 0 0 0.875rem; }
.site-footer__about { max-width: 26rem; }
.site-footer__links { display: flex; flex-wrap: wrap; gap: 0.5rem 1.75rem; align-content: start; }
.site-footer__links a { color: var(--paper); text-underline-offset: 0.3em; }
.site-footer__links a:hover { text-decoration-color: var(--gold); }
.site-footer__legal {
  margin-top: 3rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--indigo-2);
}


/* 6. Buttons and links ----------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  padding: 0.75rem 1.375rem;
  border: 0;
  background: var(--gold);
  color: var(--ink);
  font: inherit;
  font-weight: 600;
  font-stretch: 108%;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.btn:hover { background: var(--paper); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline-color: var(--paper); }

.btn--ink { background: var(--indigo); color: var(--paper); }
.btn--ink:hover { background: var(--ink); }
.btn--ink:focus-visible { outline-color: var(--ink); }

.textlink {
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.35em;
}
/* On hover the underline changes colour: gold on indigo, blue on paper. */
.textlink:hover { text-decoration-color: var(--survey); }
.hero .textlink:hover, .band--indigo .textlink:hover { text-decoration-color: var(--gold); }
.band--gold .textlink:hover { text-decoration-color: var(--indigo-2); }

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.75rem;
}


/* 7. Hero ------------------------------------------------------------------ */

.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin-top: calc(-1 * var(--header-h));   /* the map runs under the header */
  background: var(--indigo);
  color: var(--paper);
}

.hero__map {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 41rem) minmax(0, 1fr);
  grid-template-rows: 1fr auto;
  column-gap: 2rem;
  min-height: min(52rem, 100vh);
  min-height: min(52rem, 100svh);     /* the small viewport height, where supported */
  padding-top: var(--header-h);
  padding-bottom: 2rem;
}

.hero__copy {
  grid-column: 1;
  grid-row: 1;
  align-self: center;
  display: grid;
  gap: 1.75rem;
  padding-block: 3.5rem;
}
.hero__copy .lede { color: var(--mist); }
.hero__copy .actions { margin-top: 0.5rem; }

/* An empty box: its centre is where the two axes of the map cross. */
.hero__stage { grid-column: 2; grid-row: 1 / 3; }

/* The key of the map: what the colours mean, and the scale. */
.hero__key {
  grid-column: 1;
  grid-row: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.5rem;
  color: var(--mist);
  font-size: 0.8125rem;
  line-height: 1.3;
}
.key { display: flex; flex-wrap: wrap; gap: 0.625rem 1.25rem; }
.key__item { display: inline-flex; align-items: center; gap: 0.5rem; }

/* Small samples of the map's symbols, reused in "What we do". */
.sample {
  flex: none;
  width: 0.75rem;
  height: 0.75rem;
  transform: rotate(calc(var(--angle) * 1deg));
}
.sample--made { background: var(--coral); }
.sample--held { background: var(--gold); }
.sample--land { background: var(--green); }
.sample--link {
  position: relative;
  width: 1.375rem;
  height: 0.09375rem;
  background: var(--link);
}
.sample--link::before, .sample--link::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 0.3125rem;
  height: 0.3125rem;
  margin-top: -0.15625rem;
  background: var(--paper);
}
.sample--link::before { left: 0; }
.sample--link::after { right: 0; }

.scale { display: inline-flex; align-items: center; gap: 0.625rem; }
.scale__bar {
  width: calc(var(--t-cell) * 1px);
  height: 0.4375rem;
  border: 1px solid var(--mist);
  border-top: 0;
  transform: rotate(calc(var(--angle) * 1deg));
}


/* 8. Territory map --------------------------------------------------------- */

/* Geometry, read by territory.js. Each map sets its own values: the hero
   just below; the plates of the method and the contact plot in section 9. */
.territory { --t-angle: var(--angle); --t-gap: 3; }
.hero {
  --t-cell: 30;         /* parcel size in px; also sizes the scale bar of the key */
  --t-rx: 14;           /* developed area, in parcels, along the grid's x axis */
  --t-ry: 7.5;          /* and along its y axis */
  --t-businesses: 7;
  --t-stars: 1;
  --t-clear: 140;       /* how far from the text the land fades out, in px */
}

.t-svg { display: block; overflow: visible; }
.t-svg.is-instant * { transition: none !important; }

/* Everything starts hidden; territory.js switches layers on over time. */
.t-plot, .t-fill, .t-rows, .t-mark, .t-dot, .t-origin, .t-label {
  opacity: 0;
  transition: opacity 0.6s ease;
}

.t-plot { fill: none; stroke: var(--survey); stroke-width: 1; }
.t-plot.is-on { opacity: 0.55; }

.t-fill {
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(0.72);
  transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1), fill 1s ease;
}
.t-fill.is-on { opacity: 1; transform: none; }
.t-fill--land { fill: var(--indigo-2); }
.t-fill--tone1 { fill: var(--green); }
.t-fill--tone2 { fill: var(--green-light); }
.t-fill--tone3 { fill: var(--green-dark); }
.t-fill--made { fill: var(--coral); }
.t-fill--held { fill: var(--gold); }

.t-rows { fill: none; stroke: var(--indigo); stroke-width: 1; }
.t-rows.is-on { opacity: 0.3; }

.t-mark { fill: none; stroke: var(--survey); stroke-width: 1.2; }
.t-mark.is-on { opacity: 0.9; }
.t-mark.is-off { opacity: 0; }

.t-axis {
  fill: none;
  stroke: var(--survey);
  stroke-width: 1.2;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.6s cubic-bezier(0.3, 0.7, 0.2, 1);
}
.t-axis.is-on { stroke-dashoffset: 0; }

.t-origin { fill: var(--paper); }
.t-origin.is-on { opacity: 1; }

.t-label {
  fill: var(--mist);
  font-family: var(--font);
  font-size: 11px;
  font-weight: 500;
  font-stretch: 100%;
  letter-spacing: 0.08em;
}
.t-label.is-on { opacity: 0.75; }

.t-dot { fill: var(--paper); }
.t-dot.is-on { opacity: 1; }

.t-link {
  fill: none;
  stroke: var(--link);
  stroke-width: 1.4;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.1s ease;
}
.t-link.is-on { stroke-dashoffset: 0; }

.t-star { fill: var(--paper); }
.t-star--1 { opacity: 0.3; }
.t-star--2 { opacity: 0.5; }
.t-star--3 { opacity: 0.8; }
.t-star--twinkle { opacity: var(--o, 0.5); }
/* Stars twinkle in steps, every 0.8 s (6.4 s / 8), all on the same beat:
   the browser redraws the map about once a second instead of every frame. */
.t-star--twinkle { animation: t-twinkle 6.4s steps(8) var(--td, 0s) infinite alternate; }
.territory.is-paused .t-star--twinkle { animation-play-state: paused; }
@keyframes t-twinkle {
  from { opacity: var(--o, 0.5); }
  to { opacity: 0.08; }
}

/* Without JavaScript the maps are simply absent: hide what depends on them. */
@media (scripting: none) {
  .frame__plate, .hero__key, .hero__stage, .plot__stage, [data-copy] { display: none; }
}


/* 9. Sections -------------------------------------------------------------- */

/* Mission */
.mission {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 1.5rem;
  row-gap: 3.5rem;
}
.statement {
  grid-column: 1 / span 7;
  grid-row: 1;
  font-size: clamp(1.625rem, 1.05rem + 2.1vw, 2.625rem);
  font-stretch: var(--semi-wide);
  font-weight: 550;
  line-height: 1.16;
  letter-spacing: -0.01em;
}
.mission__body {
  grid-column: 9 / span 4;
  grid-row: 1 / span 2;
  display: grid;
  gap: 1.125rem;
  align-content: start;
}
/* A note in the margin: how to read the map. */
.note {
  grid-column: 1 / span 6;
  grid-row: 2;
  align-self: end;
  display: grid;
  grid-template-columns: 6rem minmax(0, 1fr);
  column-gap: 1.5rem;
  align-items: start;
}
.note__figure { display: block; width: 6rem; height: 6rem; overflow: visible; }
.note__grid { fill: none; stroke: var(--survey); stroke-width: 1; }
.note__axes { fill: none; stroke: var(--ink); stroke-width: 1.5; }
.note__parcel { fill: var(--gold); }
.note__origin { fill: var(--ink); }
.note__text {
  display: grid;
  gap: 0.375rem;
  color: var(--ink-2);
  font-size: var(--text-small);
  line-height: 1.55;
}
.note__text h3 { color: var(--ink); font-size: 1rem; }

/* Activities: read like the legend of the map */
.legend { border-bottom: 1px solid var(--rule); }
.legend__row {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 3fr) minmax(0, 5fr) minmax(0, 3fr);
  column-gap: 1.5rem;
  row-gap: 0.75rem;
  align-items: start;
  padding-block: 2rem;
  border-top: 1px solid var(--rule);
}
.legend__row p { max-width: var(--measure); }
.legend__list {
  display: grid;
  gap: 0.25rem;
  color: var(--ink-2);
  font-size: var(--text-small);
}
/* The sample sits on a tile of map, as it would in a printed legend. */
.chip {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  background: var(--indigo);
}
.chip .sample { width: 1rem; height: 1rem; }
.chip .sample--link { width: 1.625rem; height: 0.09375rem; }

/* Method: the same territory at four moments */
.frames {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2.5rem 1.5rem;
  counter-reset: frame;
}
.frame {
  display: grid;
  gap: 0.75rem;
  align-content: start;
  counter-increment: frame;
}
.frame__plate {
  position: relative;
  aspect-ratio: 1;
  max-width: 100%;
  margin-bottom: 0.75rem;
  overflow: hidden;
  background: var(--indigo-deep);
  --t-cell: 26;
  --t-rx: 5.2;
  --t-ry: 5.2;
  --t-businesses: 4;
  --t-stars: 0.9;
}
.frame__plate .territory { position: absolute; inset: 0; }
.frame h3::before {
  content: counter(frame, upper-roman) ".";
  content: counter(frame, upper-roman) "." / "";   /* shown, not read out: the list already carries the order */
  display: inline-block;
  min-width: 2.25rem;
  color: var(--gold);
}
.frame p { color: var(--mist); font-size: 1rem; }

/* Companies: a register */
.register { border-bottom: 1px solid var(--rule); }
.register__row {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 3fr) minmax(0, 3fr) minmax(0, 2fr);
  column-gap: 1.5rem;
  row-gap: 0.25rem;
  align-items: baseline;
  padding-block: 1.5rem;
  border-top: 1px solid var(--rule);
}
.register__name {
  font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.625rem);
  font-stretch: var(--semi-wide);
  font-weight: 600;
  line-height: 1.2;
}
.register__what, .register__where { color: var(--ink-2); }
.register__link { justify-self: end; }

/* Contact: a plot that is surveyed and still empty */
.plot {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  --t-cell: 30;
  --t-rx: 9;
  --t-ry: 9;
  --t-businesses: 0;
  --t-stars: 0;
  --t-clear: 140;
}
.plot__map { position: absolute; inset: 0; z-index: -1; }
.plot__inner {
  display: grid;
  grid-template-columns: minmax(0, 44rem) minmax(0, 1fr);
  column-gap: 2rem;
}
.plot .t-plot, .plot .t-mark { stroke: var(--gold-deep); }
.plot .t-plot.is-on, .plot .t-mark.is-on { opacity: 1; }
.plot .t-mark.is-off { opacity: 0; }
.plot .t-axis { stroke: var(--indigo); }
.plot .t-origin { fill: var(--indigo); }
.plot .t-fill, .plot .t-rows, .plot .t-dot, .plot .t-link { display: none; }   /* nothing is built here yet */

.contact { display: grid; gap: 1.5rem; }
.contact .lede { color: var(--ink); }
.contact__mail {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  margin-top: 1rem;
}
.contact__address {
  font-size: clamp(1.0625rem, min(5.6vw, 0.75rem + 2.5vw), 2.375rem);   /* the address stays on one line */
  font-stretch: var(--semi-wide);
  font-weight: 600;
  line-height: 1.2;
  overflow-wrap: anywhere;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
}
.contact__address:hover { text-decoration-color: var(--indigo-2); }
.contact__status { min-height: 1.5em; font-size: var(--text-small); font-weight: 600; }


/* 10. Legal pages and 404 -------------------------------------------------- */

.page-head {
  padding-block: clamp(3rem, 2rem + 5vw, 6rem) clamp(2.5rem, 2rem + 3vw, 4rem);
  background: var(--indigo);
  color: var(--paper);
}
.page-head .lede { margin-top: 1rem; color: var(--mist); }

.prose { display: grid; gap: 1rem; }
.prose > * { max-width: 44rem; }
.prose h2 {
  margin-top: 2rem;
  font-size: 1.5rem;
  font-stretch: var(--semi-wide);
  letter-spacing: 0;
}
.prose h2:first-child { margin-top: 0; }
.prose ul { display: grid; gap: 0.375rem; padding-left: 1.25rem; list-style: square; }
.prose ul ::marker { color: var(--survey); }
.prose a { text-decoration-thickness: 2px; text-underline-offset: 0.3em; }
.prose a:hover { text-decoration-color: var(--survey); }

.facts { display: grid; grid-template-columns: minmax(8rem, 14rem) minmax(0, 1fr); gap: 0.5rem 1.5rem; margin: 0; }
.facts dt { color: var(--ink-2); }
.facts dd { margin: 0; font-weight: 500; }

/* Details still to be filled in before going live (see README). */
.todo { padding: 0.05em 0.3em; background: var(--gold); color: var(--ink); font-weight: 600; }

.lost {
  display: grid;
  align-content: center;
  gap: 1.5rem;
  min-height: min(40rem, 80vh);
  padding-block: 5rem;
}
.lost .lede { color: var(--mist); }
.lost__other { display: grid; gap: 0.75rem; margin-top: 1.5rem; }


/* 11. Smaller and larger screens -------------------------------------------- */

@media (min-width: 100em) {
  .hero { --t-cell: 34; --t-rx: 14; --t-ry: 8; }
}

@media (max-width: 75em) {
  :root { --text-h1: clamp(1.75rem, min(8.6vw, 1.15rem + 4.3vw), 3.25rem); }
  .hero__inner { grid-template-columns: minmax(0, 34rem) minmax(0, 1fr); }
  .hero { --t-rx: 9; --t-ry: 10; }
  .statement { grid-column: 1 / span 12; }
  .mission__body { grid-column: 7 / span 6; grid-row: 2; }
  .note { grid-column: 1 / span 5; align-self: start; grid-template-columns: minmax(0, 1fr); row-gap: 1rem; }
  .frames { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plot__inner { grid-template-columns: minmax(0, 36rem) minmax(0, 1fr); }
  .plot { --t-rx: 6; --t-ry: 8; }
}

@media (max-width: 58em) {
  .site-header__row { gap: 1.25rem; }
  .nav { gap: 1.25rem; }

  /* Hero stacks: text, then the map, then its key. */
  .hero { --t-cell: 26; --t-rx: 8; --t-ry: 6; --t-businesses: 5; --t-clear: 64; }
  .hero__inner {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    min-height: 0;
  }
  .hero__copy { padding-block: 3rem 0; }
  .hero__stage { grid-column: 1; grid-row: 2; height: clamp(18rem, 84vw, 26rem); }
  .hero__key { grid-row: 3; }

  .mission { row-gap: 2.5rem; }
  .mission__body, .note { grid-column: 1 / span 12; grid-row: auto; }
  .note { grid-template-columns: 6rem minmax(0, 1fr); }

  .legend__row { grid-template-columns: 3.5rem minmax(0, 1fr); }
  .legend__row h3 { align-self: center; }
  .legend__row p, .legend__list { grid-column: 1 / -1; }

  .register__row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .register__name { grid-column: 1 / -1; }
  .register__link { grid-column: 1 / -1; justify-self: start; margin-top: 0.5rem; }

  /* Contact stacks too: text, then the empty plot. */
  .plot { --t-cell: 26; --t-rx: 7; --t-ry: 5; --t-clear: 56; }
  .plot__inner { grid-template-columns: minmax(0, 1fr); row-gap: 1rem; }
  .plot__stage { height: clamp(11rem, 50vw, 16rem); }
}

@media (max-width: 46em) {
  .nav { display: none; }   /* on phones the page is short enough to scroll */
}

@media (max-width: 34em) {
  .frames { grid-template-columns: minmax(0, 1fr); }
  .frame__plate { --t-cell: 30; --t-rx: 5.6; --t-ry: 5.6; }
  .register__row { grid-template-columns: minmax(0, 1fr); }
  .note { grid-template-columns: minmax(0, 1fr); row-gap: 1rem; }
  .facts { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .facts dd { margin-bottom: 0.75rem; }
  .brand { letter-spacing: 0.12em; }
}


/* 12. Motion preferences and print ----------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

@media print {
  .site-header, .hero__map, .hero__key, .hero__stage, .frame__plate, .plot__map, .plot__stage, .actions, .skip, [data-copy] { display: none; }
  .hero, .band, .page-head, .site-footer { background: none !important; color: #000 !important; margin-top: 0; }
  .hero__inner { min-height: 0; display: block; }
  .lede, .frame p, .site-footer, .site-footer__links a { color: #000 !important; }
  a { text-decoration: underline; }
}