/* ==========================================================================
   Nuijamiestentie – Metsäläntie water utility construction
   Visual language: the Finnish road information sign.
   A blue plate, an inset white keyline, wide uppercase.
   ========================================================================== */

/* --- Tokens ---------------------------------------------------------------- */

:root {
  /* Color */
  --blue: #1e12c7; /* plates, footer, primary buttons */
  --blue-deep: #000a66; /* headings and body text */
  --blue-live: #2b4bff; /* links, hover, focus */
  --blue-tint: #eaeeff; /* panel backgrounds */
  --blue-rule: #b9c4ff; /* hairlines */
  --white: #ffffff;

  /* Typography */
  --display: "Archivo", "Arial Black", "Helvetica Neue", Arial, sans-serif;
  --body: "IBM Plex Sans", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  /* Dimensions */
  --gutter: clamp(1.25rem, 5vw, 3.5rem);
  --measure: 62ch;
  --radius: 14px;
  --keyline: 2px;

  /* Motion */
  --ease: cubic-bezier(0.2, 0.7, 0.3, 1);
  --fast: 140ms;
  --slow: 900ms;
}

/* --- Foundation ------------------------------------------------------------ */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--white);
  color: var(--blue-deep);
  font-family: var(--body);
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  line-height: 1.65;
  font-synthesis-weight: none;
}

img {
  max-width: 100%;
  height: auto;
}

a {
  color: var(--blue-live);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

a:hover {
  color: var(--blue);
}

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

/* On a blue surface a blue focus ring would be invisible */
.plate :focus-visible,
.footer :focus-visible,
.lightbox :focus-visible {
  outline-color: var(--white);
}

::selection {
  background: var(--blue);
  color: var(--white);
}

/* --- Typographic roles ----------------------------------------------------- */

.display,
h1,
h2 {
  font-family: var(--display);
  font-weight: 700;
  font-stretch: 112%;
  font-variation-settings: "wdth" 112;
  text-transform: uppercase;
  letter-spacing: 0.012em;
  line-height: 1.02;
  margin: 0;
  text-wrap: balance;
  /* Finnish is a long-worded language: a word must not push past the plate. */
  hyphens: auto;
  overflow-wrap: break-word;
}

h3 {
  font-family: var(--body);
  font-weight: 600;
  font-size: 1.0625rem;
  line-height: 1.35;
  margin: 0;
}

/* Eyebrow / data label: small monospace uppercase */
.label {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin: 0;
}

.data {
  font-family: var(--mono);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

p {
  margin: 0 0 1em;
}
/* p:last-child { margin-bottom: 0; } */

/* --- Structure ------------------------------------------------------------- */

.container {
  width: min(1180px, 100%);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  padding-block: clamp(3rem, 7vw, 5.5rem);
  border-top: 1px solid var(--blue-rule);
}

.section:first-of-type {
  border-top: 0;
}

.section__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 1.25rem;
  margin-bottom: 2rem;
}

.section__head h2 {
  font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.25rem);
}
.section__head .label {
  color: var(--blue-live);
}

.prose {
  max-width: var(--measure);
}
.prose > * + * {
  margin-top: 1em;
}

.skip {
  position: absolute;
  left: 0.5rem;
  top: -4rem;
  z-index: 100;
  background: var(--blue);
  color: var(--white);
  padding: 0.75rem 1.25rem;
  border-radius: 0 0 8px 8px;
  font-family: var(--mono);
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-decoration: none;
  transition: top var(--fast) var(--ease);
}

.skip:focus-visible {
  top: 0;
  color: var(--white);
}

/* --- Top bar --------------------------------------------------------------- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--white);
  border-bottom: 1px solid var(--blue-rule);
}

.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 72px;
}

.topbar__logo {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}

.topbar__logo img {
  display: block;
  width: 152px;
  height: auto;
}

.topbar__right {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

/* --- Language switch --------------------------------------------------------- */

.lang-switch {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  flex: 0 0 auto;
}

.lang-switch a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  min-width: 32px;
  padding: 0 0.55rem;
  border-radius: 999px;
  color: var(--blue-deep);
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-decoration: none;
  transition:
    background-color var(--fast) var(--ease),
    color var(--fast) var(--ease);
}

.lang-switch a:hover {
  background: var(--blue-tint);
  color: var(--blue);
}

.lang-switch a[aria-current="page"] {
  background: var(--blue);
  color: var(--white);
}

/* In miniature the navigation is the same information sign as the logo:
   the current page is a filled blue plate, the others await a touch. */

.nav__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.2rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 1rem;
  border-radius: 999px;
  color: var(--blue-deep);
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition:
    background-color var(--fast) var(--ease),
    color var(--fast) var(--ease);
}

.nav__link:hover {
  background: var(--blue-tint);
  color: var(--blue);
}

.nav__link[aria-current="page"] {
  background: var(--blue);
  color: var(--white);
}

.nav__link[aria-current="page"]::after {
  content: "";
  position: absolute;
  border-radius: 999px;
  pointer-events: none;
}

.nav__link[aria-current="page"]:hover {
  background: var(--blue-deep);
  color: var(--white);
}

.nav__toggle {
  display: none;
}

/* Hamburger mark that turns into a cross when the menu opens */
.nav__burger {
  position: relative;
  display: block;
  width: 15px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: background-color var(--fast) var(--ease);
}

.nav__burger::before,
.nav__burger::after {
  content: "";
  position: absolute;
  left: 0;
  width: 15px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform var(--fast) var(--ease);
}

.nav__burger::before {
  top: -5px;
}
.nav__burger::after {
  top: 5px;
}

.nav[data-open="true"] .nav__burger {
  background: transparent;
}
.nav[data-open="true"] .nav__burger::before {
  transform: translateY(5px) rotate(45deg);
}
.nav[data-open="true"] .nav__burger::after {
  transform: translateY(-5px) rotate(-45deg);
}

/* --- Plate: the site's signature element ----------------------------------- */

.plate {
  position: relative;
  background: var(--blue);
  color: var(--white);
  border-radius: var(--radius);
  padding: clamp(1.75rem, 4vw, 3rem);
}

/* An inset white keyline, as on a road information sign */
.plate::before {
  content: "";
  position: absolute;
  inset: clamp(9px, 1vw, 15px);
  border: var(--keyline) solid var(--white);
  border-radius: 6px;
  pointer-events: none;
}

.plate > * {
  position: relative;
}

.plate .label {
  color: var(--white);
  opacity: 0.8;
}

/* Tightly scoped, so it does not override the buttons' own colors */
.plate a:not([class]) {
  color: var(--white);
}

/* --- Hero ------------------------------------------------------------------ */

.hero {
  padding-block: clamp(1.5rem, 4vw, 2.75rem) 0;
}

.hero__plate {
  box-shadow: 10px 10px 0 var(--blue-tint);
}

.hero__title {
  font-size: clamp(1.5rem, 0.75rem + 3.9vw, 3.5rem);
  margin-block: 0.6rem 0;
  max-width: 18ch;
}

/* The plate on subpages is shallower */
.hero__title--sub {
  font-size: clamp(1.75rem, 1rem + 3.4vw, 3.25rem);
}

.hero__span {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-top: 1.6rem;
  font-family: var(--mono);
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  color: var(--white);
}

.hero__span::after {
  content: "";
  flex: 1 1 auto;
  height: var(--keyline);
  background: currentColor;
  opacity: 0.55;
  order: 1;
}

.hero__span span:last-child {
  order: 2;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.75rem;
}

/* On narrow screens the buttons go full width – the wrap looks deliberate */
@media (max-width: 519px) {
  .hero__actions .btn {
    width: 100%;
    justify-content: center;
    text-align: center;
  }
}

/* --- Buttons --------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 48px;
  padding: 0 1.4rem;
  border: var(--keyline) solid currentColor;
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  transition:
    background-color var(--fast) var(--ease),
    color var(--fast) var(--ease);
}

/* A white button on a blue plate */
.btn--solid {
  background: var(--white);
  color: var(--blue);
  border-color: var(--white);
}

.btn--solid:hover {
  background: var(--blue-tint);
  color: var(--blue);
}

.btn--ghost {
  background: transparent;
  color: var(--white);
  border-color: var(--white);
}

.btn--ghost:hover {
  background: var(--white);
  color: var(--blue);
}

/* A blue button on a white background */
.btn--blue {
  background: var(--blue);
  color: var(--white);
  border-color: var(--blue);
}

.btn--blue:hover {
  background: var(--blue-deep);
  color: var(--white);
  border-color: var(--blue-deep);
}

/* --- Progress rail: the site's one loud element ---------------------------- */

.rail {
  padding-block: clamp(2.5rem, 5vw, 3.75rem);
}

.rail__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  margin-bottom: 1.5rem;
}

.rail__head .label {
  color: var(--blue-live);
}

/* --progress and data-live come from site.js, which computes them from the
   current date. Without JS the rail shows only the timeline without a position –
   an empty rail is more honest than a stale value. */
.rail__track {
  position: relative;
  height: 56px;
  background: var(--blue-tint);
  border-radius: 6px;
  --progress: 0%;
}

/* Quarter-year ticks.
   The ticks are drawn on top of the fill (z-index) so that even the quarters
   already passed stay readable and do not disappear under the blue. */
.rail__ticks {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

.rail__tick {
  position: relative;
  flex: 1 1 0;
  border-right: 1px solid var(--white);
  transition: border-color var(--slow) var(--ease);
}

.rail__tick:last-child {
  border-right: 0;
}

/* The quarter in progress is highlighted, so the period is visible even when
   the marker sits right at the end of the rail. */
.rail__tick.is-current {
  background: rgba(0, 0, 255, 0.1);
}

.rail__tick.is-current span {
  color: var(--blue);
  font-weight: 700;
}

.rail__tick span {
  position: absolute;
  left: 0.9rem;
  bottom: 0.4rem;
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.08em;
  color: var(--blue-live);
  white-space: nowrap;
  transition: color var(--slow) var(--ease);
}

/* The parts left under the fill are drawn light: blue text on a blue background
   would disappear. site.js marks each tick with a data-covered value according
   to whether the fill reaches the label ("label") or the whole tick ("all").
   These rules come after the is-current rules, because they carry the same
   specificity and coverage decides the color on the current quarter too. */
.rail__tick[data-covered="label"] span,
.rail__tick[data-covered="all"] span {
  color: rgba(255, 255, 255, 0.8);
}

.rail__tick[data-covered="all"] {
  border-right-color: rgba(255, 255, 255, 0.35);
}

/* On top of the fill the current quarter stands out in a light tone, not blue. */
.rail__tick.is-current[data-covered="all"] {
  background: rgba(255, 255, 255, 0.12);
}

/* The passed stretch and the "you are here" marker appear only once site.js has
   computed the position. A marker parked at zero would claim something false. */
.rail__fill,
.rail__marker {
  display: none;
}

.rail__track[data-live] .rail__fill,
.rail__track[data-live] .rail__marker {
  display: block;
}

.rail__fill {
  position: absolute;
  inset-block: 0;
  left: 0;
  width: var(--progress);
  min-width: 3px;
  background: var(--blue);
  border-radius: 6px 0 0 6px;
  transition: width var(--slow) var(--ease);
}

.rail__marker {
  position: absolute;
  top: -10px;
  bottom: -10px;
  left: var(--progress);
  z-index: 2;
  width: var(--keyline);
  background: var(--blue-deep);
  transition: left var(--slow) var(--ease);
}

.rail__marker::after {
  content: "";
  position: absolute;
  top: -7px;
  left: 50%;
  width: 14px;
  height: 14px;
  background: var(--blue-deep);
  border: 3px solid var(--white);
  border-radius: 50%;
  transform: translateX(-50%);
}

/* On narrow screens the tick years would overlap.
   The span is then read from below the rail. */
@media (max-width: 719px) {
  .rail__tick span {
    display: none;
  }
  .rail__track {
    height: 40px;
  }
}

.rail__ends {
  display: flex;
  justify-content: space-between;
  margin-top: 1.5rem;
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  color: var(--blue-deep);
}

.rail__now {
  margin-top: 0.75rem;
  font-family: var(--mono);
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  color: var(--blue);
}

/* --- Two-column content ---------------------------------------------------- */

.split {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
  grid-template-columns: 1fr;
  align-items: start;
}

@media (min-width: 900px) {
  .split {
    grid-template-columns: minmax(0, 1.55fr) minmax(280px, 0.85fr);
  }
  .split__aside {
    position: sticky;
    top: 88px;
  }
}

/* --- Panel (light card) ---------------------------------------------------- */

.panel {
  background: var(--blue-tint);
  border-radius: var(--radius);
  padding: clamp(1.4rem, 3vw, 2rem);
}

.panel .label {
  color: var(--blue-live);
  margin-bottom: 1rem;
}

.panel__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.border-bottom {
  border-bottom: 1px solid var(--blue-rule);
  padding-bottom: 0.9rem;
}

.panel__list li + li {
  margin-top: 0.9rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--blue-rule);
}

.panel__list .data {
  display: block;
  font-size: 0.8125rem;
  letter-spacing: 0.05em;
  color: var(--blue);
  margin-bottom: 0.15rem;
}

/* --- Impact cards ---------------------------------------------------------- */

.cards {
  display: grid;
  gap: 1px;
  grid-template-columns: 1fr;
  background: var(--blue-rule);
  border: 1px solid var(--blue-rule);
  border-radius: var(--radius);
  overflow: hidden;
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 720px) {
  .cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

.card {
  background: var(--white);
  padding: clamp(1.4rem, 3vw, 2rem);
  transition: background-color var(--fast) var(--ease);
}

.card:hover {
  background: var(--blue-tint);
}

/* The heading names the topic, so the glyph is decoration: sized in absolute px
   rather than em so all four read at the same weight regardless of heading length. */
.card__icon {
  display: block;
  width: 28px;
  height: 28px;
  margin-bottom: 0.9rem;
  color: var(--blue);
  fill: currentColor;
}

.card h3 {
  margin-bottom: 0.5rem;
}
.card p {
  font-size: 0.9375rem;
}

/* --- Phase series (blasting) ----------------------------------------------- */

.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--blue-rule);
}

.step {
  display: grid;
  grid-template-columns: 1.5rem minmax(0, 1fr);
  gap: 0.2rem 1.25rem;
  padding-block: 1.15rem;
  border-bottom: 1px solid var(--blue-rule);
}

/* A diamond, not a number: the phases do not necessarily run in this order, so
   running numbering would claim more than is known. The shape is the same as on
   the priority road sign and stays within the site's signage language.
   Every cell is placed explicitly: in an implicit grid, auto-placement would
   drop the description into the mark column. */
.step::before {
  content: "";
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
  width: 7px;
  height: 7px;
  /* Aligned to the middle of the name's first line */
  margin-top: 0.34rem;
  background: var(--blue);
  border-radius: 0.1rem;
}

.step__name {
  grid-column: 2;
  grid-row: 1;
  font-family: var(--display);
  font-weight: 700;
  font-stretch: 112%;
  font-variation-settings: "wdth" 112;
  text-transform: uppercase;
  letter-spacing: 0.015em;
  font-size: 1rem;
  line-height: 1.25;
}

.step__note {
  grid-column: 2;
  grid-row: 2;
  font-size: 0.9375rem;
  color: var(--blue-deep);
  opacity: 0.85;
}

/* Noise level and duration: own row on narrow screens, own column on wide */
.step__meta {
  grid-column: 2;
  grid-row: 3;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.7rem;
  margin-top: 0.5rem;
}

@media (min-width: 760px) {
  .step {
    grid-template-columns: 1.5rem minmax(0, 1fr) 14rem;
  }

  /* Left-aligned so the meters line up from row to row – the bars have to be
	   readable as a column. The duration is pushed to the right edge. */
  .step__meta {
    grid-column: 4;
    grid-row: 1 / 3;
    align-self: center;
    flex-wrap: nowrap;
    justify-content: flex-start;
    margin-top: 0;
    min-width: 130px;
  }

  .step__dur {
    margin-left: auto;
  }
}

.step__level {
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--blue);
}

.step__level--unknown {
  color: var(--blue-deep);
  opacity: 0.5;
}

.step__dur {
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--blue-deep);
  opacity: 0.6;
  border-left: 1px solid var(--blue-rule);
  padding-left: 0.7rem;
}

/* --- Noise level meter ----------------------------------------------------- */

.meter {
  display: inline-flex;
  align-items: flex-end;
  gap: 3px;
  flex: 0 0 auto;
}

.meter i {
  width: 9px;
  border: 1px solid var(--blue-rule);
  background: var(--blue-tint);
  border-radius: 2px;
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
}

.meter i:nth-child(1) {
  height: 9px;
}
.meter i:nth-child(2) {
  height: 14px;
}
.meter i:nth-child(3) {
  height: 19px;
}

.meter[data-noise="1"] i:nth-child(-n + 1),
.meter[data-noise="2"] i:nth-child(-n + 2),
.meter[data-noise="3"] i:nth-child(-n + 3) {
  background: var(--blue);
  border-color: var(--blue);
}

/* Not stated: a dashed outline, so an empty meter is not read as quiet */
.meter[data-noise="0"] i {
  background: none;
  border-style: dashed;
  border-color: var(--blue-live);
  opacity: 0.45;
}

.legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.25rem;
  margin-top: 1.75rem;
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--blue-deep);
}

.legend__title {
  color: var(--blue-live);
}

.legend__item {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

/* --- Accordion (details) --------------------------------------------------- */

.acc {
  border: 1px solid var(--blue-rule);
  border-radius: var(--radius);
  overflow: hidden;
}

.acc + .acc {
  margin-top: 0.75rem;
}

.acc__summary {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 56px;
  padding: 0.75rem 1.25rem;
  background: var(--blue-tint);
  color: var(--blue);
  font-family: var(--mono);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  list-style: none;
  transition: background-color var(--fast) var(--ease);
}

.acc__summary::-webkit-details-marker {
  display: none;
}
.acc__summary:hover {
  background: var(--blue-rule);
}

.acc__summary::after {
  content: "+";
  margin-left: auto;
  font-size: 1.35rem;
  line-height: 1;
  transition: transform var(--fast) var(--ease);
}

.acc[open] .acc__summary::after {
  transform: rotate(45deg);
}

.acc__body {
  padding: 1.25rem;
}
.acc__body > :last-child {
  margin-bottom: 0;
}

/* --- Map list -------------------------------------------------------------- */

.maps {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--blue-rule);
}

.maps a {
  color: #000a66;
  text-decoration: none;
}

.maps a:hover {
  text-decoration: underline;
}

.map {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 1rem;
  padding-block: 1rem;
  border-bottom: 1px solid var(--blue-rule);
}

.map__link {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 32px;
  font-weight: 600;
  color: var(--blue);
}

.map__link::before {
  content: "PDF";
  font-family: var(--mono);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--white);
  background: var(--blue);
  padding: 0.2rem 0.4rem;
  border-radius: 3px;
}

.map__valid {
  font-family: var(--mono);
  font-size: 0.8125rem;
  color: var(--blue-deep);
  opacity: 0.75;
}

/* An unpublished map: no link, but a clear state */
.map--pending {
  color: var(--blue-deep);
  opacity: 0.7;
}

.map--pending .map__name {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 600;
}

.map--pending .map__name::before {
  content: "PDF";
  font-family: var(--mono);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--blue-deep);
  border: 1px solid var(--blue-rule);
  padding: 0.15rem 0.35rem;
  border-radius: 3px;
}

.map__state {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--blue-deep);
  border: 1px solid var(--blue-rule);
  border-radius: 999px;
  padding: 0.15rem 0.6rem;
}

/* --- Notices --------------------------------------------------------------- */

.notices {
  display: grid;
  gap: 1.5rem;
}

.notice {
  border: 1px solid var(--blue-rule);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 3.5vw, 2.5rem);
}

.notice__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  align-items: center;
  margin-bottom: 0.75rem;
  color: var(--blue-live);
}

.notice__title {
  font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  margin-bottom: 1.25rem;
}

.notice__block + .notice__block {
  margin-top: 1.5rem;
}

.notice__block h3 {
  color: var(--blue);
  margin-bottom: 0.5rem;
}

.notice__block ul {
  margin: 0;
  padding-left: 1.15rem;
}

.notice__block li {
  margin-bottom: 0.35rem;
}

.notice__foot {
  margin-top: 1.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--blue-rule);
}

.year {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  color: var(--blue-live);
  border-bottom: var(--keyline) solid var(--blue);
  padding-bottom: 0.5rem;
  margin-bottom: 1.5rem;
}

/* --- Images and lightbox --------------------------------------------------- */

.figure {
  margin: 0;
}

.figure__frame {
  display: block;
  width: 100%;
  padding: 0;
  border: 1px solid var(--blue-rule);
  border-radius: var(--radius);
  background: var(--white);
  overflow: hidden;
  cursor: zoom-in;
}

.figure__frame img {
  display: block;
  width: 100%;
  height: auto;
}

.figure figcaption {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  margin-top: 0.75rem;
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  color: var(--blue-deep);
  opacity: 0.8;
}

/* HSY's own notice image is shown as it is, as a quotation */
.quoted {
  border: 1px solid var(--blue-rule);
  border-radius: var(--radius);
  padding: 1rem;
  background: var(--white);
}

.quoted img {
  display: block;
  width: 100%;
  height: auto;
}

.quoted figcaption {
  margin-top: 0.85rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--blue-rule);
  font-size: 0.9375rem;
}

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(0, 0, 255, 0.94);
  border: 0;
}

.lightbox:not([open]) {
  display: none;
}
.lightbox::backdrop {
  background: rgba(0, 0, 255, 0.94);
}

.lightbox img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  background: var(--white);
  border-radius: 6px;
}

.lightbox__close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  min-height: 44px;
  padding: 0 1.1rem;
  background: transparent;
  color: var(--white);
  border: var(--keyline) solid var(--white);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
}

.lightbox__close:hover {
  background: var(--white);
  color: var(--blue);
}

/* --- Contact plate --------------------------------------------------------- */

.contact__grid {
  display: grid;
  gap: 2rem;
  grid-template-columns: 1fr;
}

@media (min-width: 760px) {
  .contact__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.contact__item .label {
  margin-bottom: 0.5rem;
}

.contact__value {
  display: inline-block;
  font-family: var(--display);
  font-weight: 700;
  font-stretch: 112%;
  font-variation-settings: "wdth" 112;
  font-size: clamp(1.15rem, 0.8rem + 1.5vw, 1.9rem);
  line-height: 1.15;
  letter-spacing: 0.01em;
  color: var(--white);
  text-decoration: none;
  border-bottom: var(--keyline) solid rgba(255, 255, 255, 0.45);
  word-break: break-word;
}

.contact__value:hover {
  color: var(--white);
  border-bottom-color: var(--white);
}

.contact__note {
  margin-top: 0.5rem;
  font-size: 0.9375rem;
  color: var(--white);
  opacity: 0.85;
}

/* --- Footer ---------------------------------------------------------------- */

.footer {
  background: var(--blue);
  color: var(--white);
  padding-block: clamp(2rem, 4vw, 3rem);
}

.footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
}

.footer a {
  color: var(--white);
}

.footer__meta {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  opacity: 0.8;
}

/* --- Mobile navigation ----------------------------------------------------- */

@media (max-width: 719px) {
  .topbar__inner {
    min-height: 60px;
  }

  .nav__toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    min-height: 44px;
    padding: 0 0.9rem;
    background: var(--blue);
    color: var(--white);
    border: 0;
    border-radius: 999px;
    font-family: var(--mono);
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
  }

  .nav__list {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0.25rem;
    padding: 0.75rem var(--gutter) 1.25rem;
    background: var(--white);
    border-bottom: 1px solid var(--blue-rule);
    box-shadow: 0 18px 32px -18px rgba(0, 0, 255, 0.35);
  }

  .nav[data-open="true"] .nav__list {
    display: flex;
  }

  .nav__link {
    display: flex;
    min-height: 52px;
    padding-inline: 1rem;
    border-radius: 12px;
    background: var(--blue-tint);
  }

  .nav__link[aria-current="page"] {
    background: var(--blue);
  }
  .nav__link[aria-current="page"]::after {
    inset: 4px 8px;
    border-radius: 8px;
  }
}

/* Without JS the menu cannot be opened, so it is always open and full width.
   The flag sits on the <html> element so that it reaches the top bar too. */
@media (max-width: 719px) {
  html:not([data-enhanced]) .nav__toggle {
    display: none;
  }
  html:not([data-enhanced]) .topbar__inner {
    flex-wrap: wrap;
    row-gap: 0;
  }
  html:not([data-enhanced]) .nav {
    width: 100%;
  }

  /* A wrapping row of buttons takes less vertical space than a full-width stack */
  html:not([data-enhanced]) .nav__list {
    display: flex;
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem;
    padding: 0 0 0.9rem;
    box-shadow: none;
    border-bottom: 0;
  }

  html:not([data-enhanced]) .nav__link {
    min-height: 44px;
    padding-inline: 0.85rem;
  }
}

/* --- Reduced motion -------------------------------------------------------- */

@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;
  }
}

/* --- Print ----------------------------------------------------------------- */

@media print {
  .topbar,
  .lightbox,
  .hero__actions {
    display: none;
  }
  body {
    color: #000;
  }
  .plate,
  .footer {
    background: #fff;
    color: #000;
    border: 1px solid #000;
  }
  .plate::before {
    display: none;
  }
  .contact__value,
  .footer a {
    color: #000;
  }
}

/* --- Fix the noise legend title onto its own row on mobile ----------------- */
@media (max-width: 490px) {
  .legend__title {
    flex-basis: 100%;
  }
}

/* --- Vemssi-logo ------------------------------------------------------------ */

/* The right side of the plate is left empty by the heading, so the character is
   placed there absolutely: it takes no row above the heading and does not push
   the content down. The rule comes after the .plate > * rule, which would set
   position: relative – same specificity, so order decides. */
.vemssi-head {
  position: absolute;
  top: clamp(0.5rem, 2vw, 2rem);
  right: clamp(1rem, 3.5vw, 1.2rem);
  z-index: 1;
  width: clamp(200px, 10vw, 32px);
  height: auto;
  filter: drop-shadow(-5px 5px 30px rgba(0, 0, 0, 0.4));
}

/* Without this the svg stays at its default size and does not fill the box */
.vemssi-head svg {
  display: block;
  width: 100%;
  height: auto;
}

/* On narrow screens the heading fills the width of the plate, so the character
   returns to the text flow above the heading, where it covers nothing. */
@media (max-width: 899px) {
  .vemssi-head {
    position: static;
    width: 102px;
    margin-bottom: 0.75rem;
  }
}