/*
 * Structure for autogrowth.com, skin "Kraftwerk". Reads only the tokens in
 * /theme/theme.css (plus the drawing's own fixed geometry). No inline styles
 * anywhere: CSP style-src 'self'. See DESIGN.md.
 */

/* ------------------------------------------------------------------ base */

*, *::before, *::after { box-sizing: border-box; }
html {
  background: var(--c-bg);
  color: var(--c-ink);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  margin: 0;
  font-family: var(--font-sans);
  font-stretch: var(--wd-body);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-variant-numeric: lining-nums tabular-nums;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
main { flex: 1 0 auto; outline: none; }
h1, h2, h3, p, ul, ol, dl, dd, figure, blockquote { margin: 0; padding: 0; }
ul, ol { list-style: none; }
strong, b { font-weight: var(--fw-bold); }
img, svg { display: block; max-width: 100%; }
table { border-collapse: collapse; }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
@media (hover: hover) { a:hover { text-decoration-thickness: 2px; } }

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

:focus-visible { outline: var(--focus-w) solid var(--c-focus); outline-offset: 3px; }
main:focus, main:focus-visible, [tabindex="-1"]:focus { outline: none; }

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

.skip-link {
  position: absolute; left: 12px; top: -80px; z-index: 60;
  padding: 10px 16px; background: var(--c-white); color: var(--c-black);
  font-weight: var(--fw-bold); text-decoration: none;
}
.skip-link:focus { top: 12px; }
.skip-link:focus-visible { outline-color: var(--c-white); outline-offset: 3px; }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
/* Anchor jumps and keyboard focus stop clear of the sheet frame and of sticky bars. */
html { scroll-padding-block: calc(var(--frame) + 16px); }
html:has(body.page-brief) { scroll-padding-top: 64px; }
@media (min-width: 1100px) { html:has(body.page-brief) { scroll-padding-top: calc(var(--frame) + 96px); } }

/* ------------------------------------------------- the sheet frame (ISO 5457) */

.frame { display: none; }
@media (min-width: 900px) {
  .frame {
    display: block; position: fixed; inset: 10px; z-index: 40; pointer-events: none;
    outline: 1px solid var(--c-raster); outline-offset: -1px;
  }
  /* everything outside the drawing area is masked, so content never slides under the zone band */
  .frame::before {
    content: ""; position: absolute; inset: 18px;
    border: var(--rule-strong) solid var(--c-frame-in);
    box-shadow: 0 0 0 100vmax var(--c-bg);
  }
  .frame__zones {
    position: absolute; display: flex;
    font-size: 10px; line-height: 1; font-stretch: var(--wd-tag); color: var(--c-ink-2);
  }
  .frame__zones span { flex: 1; display: grid; place-items: center; border-left: 1px solid var(--c-raster); }
  .frame__zones span:first-child { border-left: 0; }
  .frame__zones--top { left: 18px; right: 18px; top: 0; height: 18px; }
  .frame__zones--side { flex-direction: column; top: 18px; bottom: 18px; left: 0; width: 18px; }
  .frame__zones--side span { border-left: 0; border-top: 1px solid var(--c-raster); }
  .frame__zones--side span:first-child { border-top: 0; }
}

/* ------------------------------------------------------------ page gutters */

.site-header, main, .site-footer, .access-header {
  padding-inline: calc(var(--frame) + var(--pad));
}
main > *, .site-header__inner, .tblock, .access-header > * { max-width: var(--page-max); }
main > * { margin-inline: auto; }

/* --------------------------------------------------------------- type */

.wordmark {
  font-stretch: 125%; font-weight: var(--fw-bold); font-size: 1.1875rem; letter-spacing: -0.01em;
  text-decoration: none; white-space: nowrap;
}

.h2 {
  font-stretch: var(--wd-head); font-weight: 330; font-size: var(--fs-2xl);
  line-height: var(--lh-head); letter-spacing: -0.02em; text-wrap: balance;
  max-width: 24em;
}
.h2--sub { margin-top: var(--s-8); }
.h3 {
  font-stretch: var(--wd-head); font-weight: var(--fw-bold); font-size: var(--fs-l);
  line-height: 1.25; letter-spacing: -0.005em;
}
.lede { font-size: clamp(1.125rem, 1rem + 0.5vw, 1.3125rem); line-height: 1.45; max-width: 36em; }
.claim {
  font-stretch: 108%; font-weight: 330; font-size: clamp(1.375rem, 1rem + 1.5vw, 2.25rem);
  line-height: 1.2; letter-spacing: -0.02em; max-width: 26em; text-wrap: pretty;
}
.note, .small { color: var(--c-ink-2); }
.small { font-size: var(--fs-s); line-height: 1.5; }
p + p { margin-top: 1em; }
.actions { margin-top: var(--s-6); }

/* ------------------------------------------------------------ buttons */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 22px; border-radius: 0; cursor: pointer;
  font: inherit; font-weight: 600; font-stretch: var(--wd-head); font-size: var(--fs-m); line-height: 1.1;
  text-decoration: none; text-align: center;
  transition: background-color var(--dur-ui) var(--ease), color var(--dur-ui) var(--ease);
}
.btn--solid { background: var(--c-white); color: var(--c-black); border: var(--rule-strong) solid var(--c-white); }
.btn--line { background: transparent; color: var(--c-white); border: var(--rule-strong) solid var(--c-white); }
@media (hover: hover) {
  .btn--solid:hover { background: var(--c-black); color: var(--c-white); }
  .btn--line:hover { background: var(--c-white); color: var(--c-black); }
}
.btn--small { min-height: 40px; padding: 0 14px; font-size: var(--fs-s); }
.btn[disabled] { cursor: progress; }

/* ------------------------------------------------------------- header */

.site-header { border-bottom: 1px solid var(--c-raster); }
.site-header__inner {
  margin-inline: auto;
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
  column-gap: var(--s-6); row-gap: var(--s-2);
  padding: 18px 0 14px;
}
@media (min-width: 900px) { .site-header__inner { padding-top: calc(var(--frame) + 18px); } }
.site-nav { order: 3; flex-basis: 100%; }
.site-nav__list { display: flex; justify-content: space-between; gap: var(--s-4); font-size: var(--fs-s); font-stretch: 92%; }
.site-nav__link { text-decoration: none; display: inline-block; padding: 6px 0; }
@media (hover: hover) { .site-nav__link:hover { text-decoration: underline; } }
@media (min-width: 760px) {
  .site-nav { order: 0; flex-basis: auto; margin-left: auto; }
  .site-nav__list { gap: var(--s-6); font-size: 0.9375rem; font-stretch: 100%; }
}
.site-header__cta { min-height: 40px; padding: 0 16px; font-size: var(--fs-s); }

/* brief header: sticky on wide screens only */
.site-header--brief .site-header__inner { flex-wrap: wrap; }
.brief-line { display: none; color: var(--c-ink-2); font-size: var(--fs-s); }
.brief-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; }
.logout-form { margin: 0; }
@media (max-width: 759px) {
  .site-header--brief .site-header__inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; row-gap: 12px; }
  .site-header--brief .brief-actions { display: contents; }
  .site-header--brief .logout-form { grid-column: 2; grid-row: 1; }
  .site-header--brief .brief-actions > .btn { grid-column: 1 / -1; grid-row: 2; width: 100%; }
}
/* narrow phones: the download label stays on one line */
@media (max-width: 419px) {
  .site-header--brief .brief-actions > .btn { padding-inline: 12px; font-stretch: var(--wd-body); }
}
@media (min-width: 1100px) {
  .site-header--brief { position: sticky; top: var(--frame); z-index: 30; background: var(--c-bg); }
  .site-header--brief .site-header__inner { flex-wrap: nowrap; padding-block: 16px 14px; }
  .brief-line { display: block; margin-right: auto; padding-left: var(--s-5); border-left: 1px solid var(--c-raster); }
}
@media (min-width: 1100px) and (min-width: 900px) {
  .site-header--brief .site-header__inner { padding-top: 16px; }
  .site-header--brief { padding-top: 0; }
}

/* ------------------------------------------------------------ the sheet strip */

.strip {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-4);
  padding: 14px 0 12px; border-top: var(--rule-strong) solid var(--c-strong); border-bottom: 1px solid var(--c-raster);
}
.strip__name { font-stretch: 125%; font-weight: var(--fw-bold); font-size: var(--fs-m); letter-spacing: -0.005em; }
.strip__no { font-size: var(--fs-tag); font-stretch: var(--wd-tag); color: var(--c-ink-2); white-space: nowrap; }

/* ------------------------------------------------------------ sections */

.section { padding-top: var(--s-8); }
@media (min-width: 700px) { .section { padding-top: var(--s-9); } }
.section > .h2 { margin-top: var(--s-6); }
.section__body { margin-top: var(--s-6); max-width: 46rem; }
.section__body > * + * { margin-top: var(--s-5); }
.section > .h3, .section__body > .h3 { margin-top: var(--s-8); }
.section > .h3 + * { margin-top: var(--s-4); }
.section--contact { padding-bottom: var(--s-6); }
@media (min-width: 700px) { .section--contact { padding-bottom: var(--s-8); } }

@media (min-width: 1100px) {
  .section { padding-top: var(--s-10); }
}

/* --------------------------------------------------------------- hero */

.hero { padding: clamp(2.5rem, 6vh, 5rem) 0 var(--s-6); }
@media (min-width: 700px) { .hero { padding-bottom: var(--s-8); } }
.hero__title {
  max-width: 15.5em;
  font-stretch: 120%; font-weight: var(--fw-light); font-size: var(--fs-display);
  line-height: var(--lh-tight); letter-spacing: var(--track-display);
  background: var(--g-sheen); background-size: 100% 1.02em;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-wrap: balance; padding-bottom: 0.06em;
}
.hero__sub { margin-top: var(--s-5); font-size: clamp(1.1875rem, 1rem + 0.6vw, 1.5rem); font-stretch: var(--wd-head); }

.hero__plant { margin-top: clamp(2rem, 5vh, 4rem); display: grid; gap: 0; }
.package { position: relative; max-width: 26rem; padding: 30px 18px 14px; }
/* package boundary: dash-dot line by convention */
.package::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    repeating-linear-gradient(90deg, var(--c-ink-2) 0 14px, transparent 14px 18px, var(--c-ink-2) 18px 20px, transparent 20px 24px) top / 100% 1.5px no-repeat,
    repeating-linear-gradient(90deg, var(--c-ink-2) 0 14px, transparent 14px 18px, var(--c-ink-2) 18px 20px, transparent 20px 24px) bottom / 100% 1.5px no-repeat,
    repeating-linear-gradient(180deg, var(--c-ink-2) 0 14px, transparent 14px 18px, var(--c-ink-2) 18px 20px, transparent 20px 24px) left / 1.5px 100% no-repeat,
    repeating-linear-gradient(180deg, var(--c-ink-2) 0 14px, transparent 14px 18px, var(--c-ink-2) 18px 20px, transparent 20px 24px) right / 1.5px 100% no-repeat;
}
.package__label {
  position: absolute; top: -0.7em; left: 14px; padding: 0 8px; background: var(--c-bg);
  font-size: var(--fs-s); font-weight: 600; font-stretch: var(--wd-head); line-height: 1.4;
}
.hero__pipes { display: none; }

.outputs { margin: 0 0 0 40px; padding: 22px 0 0 28px; border-left: 2px solid var(--c-pipe); }
.outputs__item { position: relative; padding: 14px 0; max-width: 40em; }
.outputs__item::before { content: ""; position: absolute; left: -30px; top: 1.45em; width: 22px; border-top: 2px solid var(--c-white); }
.outputs__item + .outputs__item { border-top: 1px solid var(--c-raster); }
.outputs__name { font-stretch: 118%; font-weight: 600; font-size: var(--fs-l); text-decoration: none; }
@media (hover: hover) { .outputs__name:hover { text-decoration: underline; } }
.outputs__line { margin-top: 2px; color: var(--c-ink-2); }

@media (min-width: 1080px) {
  .hero__plant { grid-template-columns: minmax(300px, 400px) minmax(60px, 140px) minmax(0, 1fr); align-items: stretch; }
  .package { align-self: center; }
  .hero__pipes { display: block; width: 100%; height: 100%; overflow: visible; }
  .outputs { margin: 0; padding: 0; border: 0; display: grid; grid-template-rows: 1fr 1fr; }
  .outputs__item { display: flex; flex-direction: column; justify-content: center; padding: 14px 0 14px 22px; border-left: 2px solid var(--c-white); }
  .outputs__item::before { display: none; }
}
.hp-line { fill: none; stroke: var(--c-pipe); stroke-width: 2; }
.hp-medium { fill: none; stroke: var(--c-white); stroke-width: 2.4; }

.hero__foot { margin-top: clamp(2rem, 5vh, 3.5rem); display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-5) var(--s-6); }
.inception__text { font-size: var(--fs-s); color: var(--c-ink-2); }

/* ---------------------------------------------------- mini plant (hero, access) */

.mini { margin: 0; }
.mini__svg { width: 100%; height: auto; overflow: visible; }
.mp-line { fill: none; stroke: var(--c-pipe); stroke-width: 2; }
.mp-medium { fill: none; stroke: var(--c-white); stroke-width: 2.4; }
.mp-unit { fill: var(--c-black); stroke: var(--c-mini-line); stroke-width: 5; }
.mp-unit .thin { stroke-width: 3; fill: none; }
.mp-unit .dash { stroke-dasharray: 6 5; }
.mp-unit .sym-t { font: 600 13px var(--font-sans); text-anchor: middle; fill: var(--c-mini-line); stroke: none; }
.mp-tags text { fill: var(--c-ink-2); font-size: 12px; font-stretch: var(--wd-tag); text-anchor: middle; font-family: var(--font-sans); }
.mini__cap {
  display: grid; grid-template-columns: repeat(6, 1fr); margin-top: 6px;
  font-size: 12px; font-stretch: 76%; line-height: 1.2; color: var(--c-ink-2); text-align: center;
}

@media (prefers-reduced-motion: no-preference) {
  /* Drawn once on load, under 5 s, then at rest (WCAG 2.2.2). */
  .mp-line { stroke-dasharray: 1 1; stroke-dashoffset: 1; animation: ag-draw 1.4s var(--ease) 0.15s forwards; }
  .mp-unit { opacity: 0; animation: ag-on 0.5s var(--ease) forwards; }
  .mp-unit:nth-child(1) { animation-delay: 0.25s; }
  .mp-unit:nth-child(2) { animation-delay: 0.4s; }
  .mp-unit:nth-child(3) { animation-delay: 0.55s; }
  .mp-unit:nth-child(4) { animation-delay: 0.7s; }
  .mp-unit:nth-child(5) { animation-delay: 0.85s; }
  .mp-unit:nth-child(6) { animation-delay: 1s; }
  .mp-medium { stroke-dasharray: 1 1; stroke-dashoffset: 1; animation: ag-draw 1.7s cubic-bezier(0.45, 0, 0.2, 1) 1.5s forwards; }
  .hp-medium { stroke-dasharray: 1 1; stroke-dashoffset: 1; animation: ag-draw 0.9s var(--ease) 3.1s forwards; }
  .hp-medium--2 { animation-delay: 3.3s; }
}
@keyframes ag-draw { to { stroke-dashoffset: 0; } }
@keyframes ag-on { to { opacity: 1; } }

/* -------------------------------------------------------------- the plant */

.plant { margin: var(--s-8) 0 0; container: plant / inline-size; }
.plant__strip {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--s-2) var(--s-6);
  padding-bottom: var(--s-4);
}
.plant__how { max-width: 52em; font-size: var(--fs-s); line-height: 1.5; color: var(--c-ink-2); }
.plant__skip { font-size: var(--fs-s); font-weight: 600; font-stretch: var(--wd-head); white-space: nowrap; }

.plant__stick { display: grid; gap: var(--s-4); }
.plant__drawing {
  position: relative; border: 1px solid var(--c-raster); padding: 12px 10px 40px;
  background-image: linear-gradient(to right, var(--c-grid) 1px, transparent 1px), linear-gradient(to bottom, var(--c-grid) 1px, transparent 1px);
  background-size: 20px 20px;
}
.pid-box { position: relative; width: 100%; margin-inline: auto; }
.pid-box--wide { aspect-ratio: 1200 / 640; }
.pid-box--tall { aspect-ratio: 640 / 1150; max-width: 34rem; }
.pid { width: 100%; height: 100%; overflow: visible; }
/* The wide sheet only where it gets room (lettering stays readable);
   narrower plants, the brief's column included, get the tall sheet. */
.pid-box--wide { display: none; }
@container plant (min-width: 900px) {
  .pid-box--wide { display: block; }
  .pid-box--tall { display: none; }
}

/* Pinned only where the wide sheet still reads well inside one screen (about
   0.8 scale or more): about one screen of travel, then it lets go. Shorter
   screens get the drawing at full width, unpinned. The brief keeps its header
   on screen, so it needs 80 px more height. The instrument panel runs under
   the drawing, as on a control desk. */
@container plant (min-width: 1000px) {
  @media (min-height: 860px) {
    body:not(.page-brief) .plant__track { height: 180vh; }
    body:not(.page-brief) .plant__stick {
      position: sticky; top: calc(var(--frame) + 8px); height: calc(100vh - var(--frame) * 2 - 16px);
      grid-template-rows: minmax(0, 1fr) auto; padding: 8px 0;
    }
    body:not(.page-brief) .plant__drawing { display: grid; place-items: center; min-height: 0; container-type: size; padding: 16px 16px 44px; }
    body:not(.page-brief) .pid-box--wide { width: min(100cqw - 8px, (100cqh - 8px) * 1.875); }
  }
  @media (min-width: 1100px) and (min-height: 940px) {
    .page-brief .plant__track { height: 180vh; }
    .page-brief .plant__stick {
      position: sticky; top: calc(var(--frame) + 80px); height: calc(100vh - var(--frame) * 2 - 88px);
      grid-template-rows: minmax(0, 1fr) auto; padding: 8px 0;
    }
    .page-brief .plant__drawing { display: grid; place-items: center; min-height: 0; container-type: size; padding: 16px 16px 44px; }
    .page-brief .pid-box--wide { width: min(100cqw - 8px, (100cqh - 8px) * 1.875); }
  }
}

/* drawing */
.pid text { font-family: var(--font-sans); fill: var(--c-white); }
/* silver strokes: the gradient stops take their colours from the theme */
.steel-0 { stop-color: var(--c-steel-0); }
.steel-1 { stop-color: var(--c-steel-1); }
.steel-2 { stop-color: var(--c-steel-2); }
.steel-3 { stop-color: var(--c-steel-3); }
/* drafting convention: lines break around lettering */
.pid .note, .pid .valve-tag, .pid .unit-tag, .pid .unit-name, .pid .inst-plain, .pid .key-text {
  paint-order: stroke; stroke: var(--c-black); stroke-width: 6px; stroke-linejoin: round;
}
.pid .base { fill: none; stroke: var(--c-raster); stroke-width: 3; }
.pid .med { fill: none; stroke: var(--c-white); stroke-width: 3; }
.pid .pulse { fill: none; stroke: var(--c-black); stroke-width: 3.4; stroke-dasharray: 3 21; stroke-dashoffset: calc(var(--flow, 0) * 1px); display: none; }
/* armed by /theme/plant.js: pipes empty, scroll pushes the medium (dash offset per line) */
.plant.is-armed .pid .med { stroke-dasharray: 1 2; }
.plant.is-armed .pid .is-flowing .pulse { display: inline; }
.pid .arrow { fill: var(--c-raster); transition: fill 0.3s; }
.pid .is-flowing .arrow { fill: var(--c-white); }
.pid .sig { fill: none; stroke: var(--c-signal); stroke-width: 1.4; stroke-dasharray: 7 5; }

.pid .unit { fill: var(--c-black); stroke-width: 4; transition: stroke 0.5s, stroke-width 0.5s; }
.pid .unit .thin { stroke-width: 1.4; fill: none; }
.pid .unit .dash { stroke-dasharray: 6 5; }
.pid .unit.is-live { stroke: var(--c-white); stroke-width: 3; }
.pid .sym-t { font-size: 13px; font-weight: 600; text-anchor: middle; fill: currentColor; stroke: none; }
.pid .unit.is-live .sym-t { fill: var(--c-white); }

.pid .unit-name { font-size: 21px; font-weight: 600; font-stretch: var(--wd-head); }
.pid .unit-n { fill: var(--c-silver); font-weight: 400; }
.pid .unit-tag { font-size: 13px; font-stretch: var(--wd-tag); fill: var(--c-silver); letter-spacing: 0.02em; }
.pid .note { font-size: 15px; font-stretch: 88%; fill: var(--c-silver); }
.pid .key-text { font-size: 15px; font-stretch: 92%; fill: var(--c-white); }
.pid .inst-plain { font-size: 14px; font-stretch: 88%; fill: var(--c-silver); }

.pid .valve { fill: var(--c-silver); stroke: var(--c-silver); stroke-width: 2; }
.pid .valve .valve-body { transition: fill 0.5s var(--ease); }
.pid .valve .valve-stem { fill: none; }
.pid .valve.is-open { fill: var(--c-black); stroke: var(--c-white); }
.pid .valve-tag { font-size: 12px; font-stretch: var(--wd-tag); fill: var(--c-silver); }

.pid .stream polygon { fill: var(--c-black); stroke: var(--c-white); stroke-width: 1.6; }
.pid .stream text { font-size: 14px; font-weight: 700; text-anchor: middle; dominant-baseline: central; }
.pid .stream--key text { font-size: 12px; }

.pid .inst .bubble { fill: var(--c-black); stroke: var(--c-silver); stroke-width: 2; transition: stroke-width 0.25s, stroke 0.25s; }
.pid .inst line { stroke: var(--c-silver); stroke-width: 1.4; }
.pid .inst text { font-size: 13px; font-weight: 600; text-anchor: middle; font-stretch: 88%; }
.pid .inst .ring { fill: none; stroke: var(--c-white); stroke-width: 1.5; stroke-dasharray: 3 4; opacity: 0; transition: opacity 0.25s; }
.pid .inst.is-read .bubble { stroke: var(--c-white); }
.pid .inst.is-active .bubble { stroke-width: 4; }
.pid .inst.is-active .ring { opacity: 1; }

.pid--tall .unit-name { font-size: 26px; font-stretch: 96%; }
.pid--tall .unit-tag, .pid--tall .valve-tag { font-size: 17px; }
.pid--tall .note, .pid--tall .key-text { font-size: 19px; }
.pid--tall .inst-plain { font-size: 18px; }
.pid--tall .inst text { font-size: 15px; }
.pid--tall .stream--key text { font-size: 14px; }

/* instrument bubbles are links laid over the drawing */
.inst-link {
  position: absolute; aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%);
  min-width: 24px; z-index: 2;
}
.inst-link:focus-visible { outline-offset: 2px; }
.inst-link--wide-g-time { left: 90%; top: 50.78%; width: 5.67%; }
.inst-link--wide-g-tests { left: 79.17%; top: 91.25%; width: 5.67%; }
.inst-link--wide-g-built { left: 60.17%; top: 91.25%; width: 5.67%; }
.inst-link--wide-g-launch { left: 39.83%; top: 91.25%; width: 5.67%; }
.inst-link--tall-g-time { left: 53.91%; top: 90.96%; width: 11.88%; }
.inst-link--tall-g-tests { left: 73.44%; top: 90.96%; width: 11.88%; }
.inst-link--tall-g-built { left: 85.16%; top: 58.43%; width: 11.88%; }
.inst-link--tall-g-launch { left: 85.16%; top: 42.61%; width: 11.88%; }

.flag {
  position: absolute; z-index: 3; width: max-content; max-width: 260px; pointer-events: none;
  padding: 10px 14px 12px; background: var(--c-black); border: var(--rule-strong) solid var(--c-white);
  box-shadow: 6px 6px 0 var(--c-shadow);
}
.flag[hidden] { display: none; }
.flag__tag { font-size: var(--fs-tag); font-stretch: var(--wd-tag); color: var(--c-ink-2); }
.flag__val { font-size: 1.875rem; font-weight: 250; font-stretch: var(--wd-digit); line-height: 1.05; }
.flag__desc { margin-top: 4px; font-size: var(--fs-s); line-height: 1.35; }
.flag p + p { margin-top: 0; }

.plant__status { position: absolute; left: 14px; bottom: 10px; font-size: var(--fs-s); font-weight: 600; font-stretch: var(--wd-head); }
.plant__status-k { color: var(--c-ink-2); font-weight: 400; font-stretch: var(--wd-tag); }

/* instrument panel */
.panel { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid var(--c-raster); }
.gauge {
  display: grid; grid-template-columns: 96px minmax(0, 1fr); grid-template-rows: 1fr auto auto auto 1fr; column-gap: 14px;
  padding: 12px 14px; margin: -1px 0 0 -1px; border-top: 1px solid var(--c-raster); border-left: 1px solid var(--c-raster);
  align-content: center; transition: background-color 0.3s;
}
.gauge.is-linked { background: var(--c-lit); box-shadow: inset 3px 0 0 var(--c-white); }
.gauge .dial, .gauge .drums { grid-row: 1 / 6; grid-column: 1; align-self: center; justify-self: center; }
.gauge > p { grid-column: 2; margin: 0; }
.gauge__tag { grid-row: 2; font-size: var(--fs-tag); font-stretch: var(--wd-tag); color: var(--c-ink-2); }
.gauge__val { grid-row: 3; font-size: 1.25rem; font-weight: 600; line-height: 1.15; }
.gauge__desc { grid-row: 4; margin-top: 2px !important; font-size: 0.8125rem; line-height: 1.3; color: var(--c-ink-2); }
@container plant (max-width: 599px) {
  .panel { grid-template-columns: 1fr; }
}
/* four across: dial and reading side by side, the note underneath at full width */
@container plant (min-width: 1000px) {
  .panel { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .gauge { grid-template-rows: 48px 48px auto 1fr; align-content: start; padding: 12px 16px 14px; }
  .gauge .dial, .gauge .drums { grid-row: 1 / 3; }
  .gauge > .gauge__tag { grid-row: 1; align-self: end; }
  .gauge > .gauge__val { grid-row: 2; align-self: start; }
  .gauge > .gauge__desc { grid-column: 1 / -1; grid-row: 3; margin-top: 10px !important; }
}

.dial { width: 96px; height: auto; overflow: visible; }
.dial .bezel { fill: none; stroke-width: 5; }
.bezel-0 { stop-color: var(--c-bezel-0); }
.bezel-1 { stop-color: var(--c-bezel-1); }
.bezel-2 { stop-color: var(--c-bezel-2); }
.bezel-3 { stop-color: var(--c-bezel-3); }
.dial .face { fill: var(--c-face); }
.dial .tick { stroke: var(--c-silver); stroke-width: 1; }
.dial .tick--maj { stroke: var(--c-white); stroke-width: 2; }
.dial .lbl { fill: var(--c-white); font: 500 11px var(--font-sans); font-stretch: var(--wd-tag); text-anchor: middle; }
.dial .needle { stroke: var(--c-white); stroke-width: 2.4; stroke-linecap: round; }
.dial .hub { fill: var(--c-white); }
.dial .unit { fill: var(--c-silver); font: 400 10px var(--font-sans); font-stretch: var(--wd-tag); text-anchor: middle; }

.drums {
  display: flex; justify-content: center; align-items: center; gap: 3px; width: 92px; height: 60px;
  border: 3px solid transparent;
  background: linear-gradient(var(--c-face), var(--c-face)) padding-box, var(--g-bezel) border-box;
}
.drum { width: 30px; height: 40px; overflow: hidden; background: linear-gradient(var(--c-black), var(--c-drum) 50%, var(--c-black)); border: 1px solid var(--c-drum-edge); }
.drum__col { display: flex; flex-direction: column; transition: transform 1.8s cubic-bezier(0.3, 1.35, 0.45, 1); }
.drum__col span { height: 38px; flex: none; display: grid; place-items: center; font-size: 30px; font-weight: 250; font-stretch: var(--wd-digit); line-height: 1; }
/* position 0 is the blank (armed, not yet read); the digits start one cell down */
.drum__col--0 { transform: translateY(-38px); }
.drum__col--1 { transform: translateY(-76px); }
.drum__col--2 { transform: translateY(-114px); }
.drum__col--3 { transform: translateY(-152px); }
.drum__col--4 { transform: translateY(-190px); }
.drum__col--5 { transform: translateY(-228px); }
.drum__col--6 { transform: translateY(-266px); }
.drum__col--7 { transform: translateY(-304px); }
.drum__col--8 { transform: translateY(-342px); }
.drum__col--9 { transform: translateY(-380px); }

/* ------------------------------------------------------- key to the drawing */

.key { margin-top: var(--s-7); max-width: 64rem; }
.key__table { width: 100%; border: var(--rule-strong) solid var(--c-strong); font-size: var(--fs-s); }
.key__table caption { text-align: left; padding-bottom: var(--s-3); font-weight: 600; font-stretch: var(--wd-head); font-size: var(--fs-m); }
.key__table th, .key__table td { text-align: left; vertical-align: middle; padding: 10px 14px; border-bottom: 1px solid var(--c-raster); font-weight: 400; }
.key__table thead th { font-size: var(--fs-tag); font-stretch: var(--wd-tag); color: var(--c-ink-2); border-bottom: var(--rule-strong) solid var(--c-strong); padding-block: 8px; }
.key__table tbody th { font-weight: 600; white-space: nowrap; }
.key__symcell { width: 64px; }
.key__sym { width: 40px; height: 32px; fill: var(--c-black); stroke: var(--c-white); stroke-width: 3; overflow: visible; }
.key__sym .thin { stroke-width: 1.6; fill: none; }
.key__sym .dash { stroke-dasharray: 6 5; }
.key__sym .sym-t { font: 600 13px var(--font-sans); text-anchor: middle; fill: var(--c-white); stroke: none; }
.key__sym .key-line { fill: none; stroke-width: 3; }
.key__sym .key-arrow { fill: var(--c-white); stroke: none; }
.key__sym .valve-body { fill: var(--c-silver); stroke: var(--c-silver); }
.key__sym .valve-stem { fill: none; stroke: var(--c-silver); }
.key__n { color: var(--c-ink-2); font-weight: 400; margin-right: 2px; }
.key__tag { font-stretch: var(--wd-tag); color: var(--c-ink-2); white-space: nowrap; }
.key__what { color: var(--c-ink); }
.key__what::first-letter { text-transform: uppercase; }
@media (max-width: 699px) {
  .key__table thead { display: none; }
  .key__table, .key__table tbody { display: block; }
  .key__table tr { display: grid; grid-template-columns: 52px minmax(0, 1fr); column-gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--c-raster); }
  .key__table th, .key__table td { display: block; padding: 0; border: 0; }
  .key__symcell { grid-row: 1 / 4; width: auto; }
  .key__tag { font-size: var(--fs-tag); }
  .key__table { border: 0; }
  .key__table tbody { border: var(--rule-strong) solid var(--c-strong); }
  .key__table tr:last-child { border-bottom: 0; }
  .key__table caption { display: block; }
}

/* ---------------------------------------------------------------- tables */

.table-wrap { margin-top: var(--s-5); overflow-x: auto; }
.table-wrap:focus-visible { outline-offset: 4px; }
.table { width: 100%; border: var(--rule-strong) solid var(--c-strong); font-size: var(--fs-s); }
.table caption { text-align: left; padding-bottom: var(--s-3); font-weight: 600; font-stretch: var(--wd-head); font-size: var(--fs-m); }
.table th, .table td { text-align: left; vertical-align: baseline; padding: 12px 16px; border-bottom: 1px solid var(--c-raster); font-weight: 400; }
.table thead th { font-size: var(--fs-tag); font-stretch: var(--wd-tag); color: var(--c-ink-2); border-bottom: var(--rule-strong) solid var(--c-strong); vertical-align: bottom; padding-block: 9px; }
.table tbody th { font-weight: 600; }
.table tbody tr:last-child > * { border-bottom: 0; }
.table .num { text-align: right; white-space: nowrap; }
.table--services td:nth-child(2) { color: var(--c-ink-2); }
.table--waves { min-width: 640px; }
.table--waves tbody tr:last-child { background: var(--c-row); }
.table--waves tbody tr:last-child > * { font-weight: 650; }
.table--spec tbody th { width: 36%; color: var(--c-ink-2); font-weight: 400; }
.table--spec td { font-size: var(--fs-m); }
.table--next tbody th { width: 30%; font-weight: 600; }
.table-wrap--spec { margin-top: var(--s-7); max-width: 64rem; }
@media (max-width: 599px) {
  .table { font-size: 0.875rem; }
  .table th, .table td { padding: 10px 10px; }
  .table--services thead { display: none; }
  .table--services, .table--services tbody { display: block; }
  .table--services tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; padding: 12px; border-bottom: 1px solid var(--c-raster); }
  .table--services tr:last-child { border-bottom: 0; }
  .table--services th, .table--services td { display: block; padding: 0; border: 0; }
  .table--services td:nth-child(2) { grid-column: 1 / -1; grid-row: 2; margin-top: 4px; }
  .table--services td.num { grid-column: 2; grid-row: 1; }
  .table--spec tbody th { width: 42%; }
}

/* ------------------------------------------------------------ data sheets */

.facts { margin-top: var(--s-6); max-width: 56rem; border-top: var(--rule-strong) solid var(--c-strong); }
.facts__row { display: grid; gap: 2px var(--s-5); padding: 12px 0; border-bottom: 1px solid var(--c-raster); }
.facts dt { font-size: var(--fs-s); font-stretch: 88%; color: var(--c-ink-2); }
.facts dd { max-width: 44em; }
@media (min-width: 700px) {
  .facts__row { grid-template-columns: minmax(9rem, 14rem) minmax(0, 1fr); }
  .facts dt { padding-top: 2px; }
}
.funds { list-style: decimal; padding-left: 1.2em; }
.funds li + li { margin-top: 4px; }

.plans { border-top: var(--rule-strong) solid var(--c-strong); margin-top: var(--s-4); }
.plans__row { display: flex; justify-content: space-between; gap: var(--s-4); padding: 12px 0; border-bottom: 1px solid var(--c-raster); }
.plans dt { font-weight: 600; font-stretch: var(--wd-head); }
.plans dd { font-variant-numeric: tabular-nums; }
.split { margin-top: var(--s-8); display: grid; gap: var(--s-7) var(--s-7); }
.split__col > .h3 + * { margin-top: var(--s-4); }
.split__col > p { margin-top: var(--s-3); }
@media (min-width: 900px) { .split { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.commitments { margin-top: var(--s-4); border-top: var(--rule-strong) solid var(--c-strong); }
.commitments li { padding: 12px 0; border-bottom: 1px solid var(--c-raster); }

.ticks { max-width: 44em; }
.ticks li { position: relative; padding: 10px 0 10px 26px; border-bottom: 1px solid var(--c-raster); }
.ticks li:first-child { border-top: 1px solid var(--c-raster); }
.ticks li::before { content: ""; position: absolute; left: 2px; top: 1.15em; width: 12px; border-top: 2px solid var(--c-white); }
* + .ticks { margin-top: var(--s-4); }

.cols { margin-top: var(--s-8); display: grid; gap: var(--s-7); }
.cols > * > .h3 + * { margin-top: var(--s-4); }
@media (min-width: 1000px) { .cols { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--s-8); } }
.feeds li { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 12px; padding: 12px 0; border-top: 1px solid var(--c-raster); color: var(--c-ink-2); }
.feeds strong { color: var(--c-ink); }
.dia { position: relative; width: 22px; height: 22px; margin: 2px 0 0 4px; display: grid; place-items: center; font-size: 11px; font-weight: 700; color: var(--c-white); }
.dia::before { content: ""; position: absolute; inset: 3px; border: 1.5px solid var(--c-white); transform: rotate(45deg); }

/* equipment sheets (uoe.ai products) */
.equip { margin-top: var(--s-7); border: 1px solid var(--c-raster); display: grid; }
.equip--lead { border: var(--rule-strong) solid var(--c-strong); }
.equip__head { padding: var(--s-5); border-bottom: 1px solid var(--c-raster); }
.equip__name { font-stretch: 125%; font-size: var(--fs-xl); }
.equip__line { margin-top: var(--s-3); font-size: var(--fs-l); line-height: 1.4; }
.equip__body { padding: var(--s-5); }
.equip__body > .facts { margin-top: 0; border-top: 0; }
.equip__body > .facts .facts__row:last-child { border-bottom: 0; }
.equip__body > .ticks li:first-child { border-top: 0; }
.equip__body > .ticks li:last-child { border-bottom: 0; }
@media (min-width: 1000px) {
  .equip { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
  .equip__head { border-bottom: 0; border-right: 1px solid var(--c-raster); padding: var(--s-6); }
  .equip__body { padding: var(--s-6); }
}
.devlist { margin-top: var(--s-8); }
.devlist__list { margin-top: var(--s-4); border-top: var(--rule-strong) solid var(--c-strong); max-width: 52rem; }
.devlist__list li { padding: 12px 0; border-bottom: 1px solid var(--c-raster); color: var(--c-ink-2); }
.devlist__list strong { color: var(--c-ink); }
.devlist .note { margin-top: var(--s-5); }

/* the suite: nine units on a legend sheet */
.suite { margin-top: var(--s-7); display: grid; border-top: 1px solid var(--c-raster); border-left: 1px solid var(--c-raster); }
.suite__item { padding: var(--s-5); border-right: 1px solid var(--c-raster); border-bottom: 1px solid var(--c-raster); }
.suite__name { font-stretch: var(--wd-head); font-weight: 600; font-size: var(--fs-m); }
.suite__item p { margin-top: var(--s-2); font-size: var(--fs-s); line-height: 1.5; color: var(--c-ink-2); }
@media (min-width: 640px) { .suite { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .suite { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.suite + .note { margin-top: var(--s-5); }

.contact-email { font-stretch: 118%; font-weight: var(--fw-light); font-size: var(--fs-3xl); line-height: 1.1; letter-spacing: -0.02em; overflow-wrap: anywhere; }
.contact-email a { text-decoration-thickness: 1px; text-underline-offset: 0.15em; }
@media (max-width: 599px) { .contact-email { font-stretch: 100%; font-size: min(var(--fs-3xl), 7.4vw); } }

.link-row { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-6); margin-top: var(--s-5); font-weight: 600; font-stretch: var(--wd-head); }
.link-row a { display: inline-block; padding: 6px 0; }

/* ------------------------------------------------------------- the brief */

.brief { padding-bottom: var(--s-6); }
.toc { position: sticky; top: 0; z-index: 20; background: var(--c-bg); border-bottom: 1px solid var(--c-raster); margin-inline: calc(-1 * var(--pad)); padding-inline: var(--pad); }
.toc__title { display: none; }
.toc__list { display: flex; gap: var(--s-5); overflow-x: auto; scrollbar-width: none; padding: 4px 2px; }
.toc__list::-webkit-scrollbar { display: none; }
.toc__link { display: flex; align-items: baseline; gap: 6px; padding: 10px 0; white-space: nowrap; text-decoration: none; font-size: var(--fs-s); font-weight: 600; font-stretch: 92%; color: var(--c-ink-2); }
.toc__n { font-weight: 400; font-stretch: var(--wd-tag); font-size: var(--fs-tag); }
.toc__link[aria-current] { color: var(--c-ink); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.4em; }
@media (hover: hover) { .toc__link:hover { color: var(--c-ink); } }

@media (min-width: 1100px) {
  .brief { display: grid; grid-template-columns: 13rem minmax(0, 1fr); gap: var(--s-8); align-items: start; }
  .toc { top: calc(var(--frame) + 96px); margin: var(--s-8) 0 0; padding: 0; border: 0; background: none; }
  .toc__title { display: block; padding-bottom: 8px; font-size: var(--fs-tag); font-stretch: var(--wd-tag); color: var(--c-ink-2); border-bottom: var(--rule-strong) solid var(--c-strong); }
  .toc__list { display: block; overflow: visible; padding: 0; }
  .toc__list li { border-bottom: 1px solid var(--c-raster); }
  .toc__link { display: grid; grid-template-columns: 22px minmax(0, 1fr); padding: 9px 0; white-space: normal; }
  .toc__link[aria-current] { text-decoration: none; box-shadow: inset 3px 0 0 var(--c-white); padding-left: 10px; grid-template-columns: 22px minmax(0, 1fr); }
}

.cover { padding: var(--s-8) 0 0; }
.cover__title {
  font-stretch: 122%; font-weight: var(--fw-light); font-size: var(--fs-display); line-height: var(--lh-tight); letter-spacing: var(--track-display);
  background: var(--g-sheen); background-size: 100% 1.02em; -webkit-background-clip: text; background-clip: text; color: transparent;
  padding-bottom: 0.06em;
}
.welcome { margin-top: var(--s-5); padding: 12px 16px; border: var(--rule-strong) solid var(--c-white); font-weight: 600; max-width: 40em; }
.tblock--cover { margin-top: var(--s-6); }

.why { margin-top: var(--s-6); padding: var(--s-5) 0 var(--s-5) var(--s-5); border-left: 2px solid var(--c-white); }
.why__label { font-size: var(--fs-tag); font-stretch: var(--wd-tag); color: var(--c-ink-2); }
.why blockquote p { margin-top: var(--s-2); font-stretch: 108%; font-weight: 330; font-size: var(--fs-xl); line-height: 1.3; letter-spacing: -0.01em; }

.proofs { margin-top: var(--s-4); border-top: var(--rule-strong) solid var(--c-strong); }
.proofs__item { display: grid; gap: 4px var(--s-5); padding: 12px 0; border-bottom: 1px solid var(--c-raster); }
.proofs__item > p { color: var(--c-ink-2); }
.proofs__item strong { color: var(--c-ink); }
.proofs__links { display: flex; flex-wrap: wrap; gap: 4px var(--s-4); font-size: var(--fs-s); font-weight: 600; font-stretch: var(--wd-head); }
.proofs__links a { display: inline-block; padding: 4px 0; }
@media (min-width: 900px) {
  .proofs__item { grid-template-columns: minmax(0, 1fr) 13rem; align-items: baseline; }
  .proofs__links { justify-content: flex-end; }
}

.timeline { margin-top: var(--s-6); border-top: var(--rule-strong) solid var(--c-strong); max-width: 60rem; }
.timeline__item { display: grid; gap: 2px var(--s-5); padding: 12px 0; border-bottom: 1px solid var(--c-raster); }
.timeline__item--cont { border-top: 0; }
.timeline__date { font-size: var(--fs-s); font-stretch: 88%; color: var(--c-ink-2); }
.timeline__item--cont .timeline__date { display: none; }
@media (min-width: 700px) {
  .timeline__item { grid-template-columns: minmax(9rem, 14rem) minmax(0, 1fr); }
  .timeline__item--cont .timeline__date { display: block; }
  .timeline__date { padding-top: 2px; }
}

.nvidia { margin-top: var(--s-8); padding-top: var(--s-6); border-top: 1px solid var(--c-raster); }
.nvidia .inception { margin-top: var(--s-4); display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4) var(--s-5); }
.nvidia .inception__text { color: var(--c-ink); font-weight: 600; font-size: var(--fs-m); }
.qa { margin-top: var(--s-5); max-width: 46rem; }
.qa__item { padding: 14px 0; border-top: 1px solid var(--c-raster); }
.qa dt { font-weight: 600; font-stretch: var(--wd-head); }
.qa dd { margin-top: 6px; color: var(--c-ink-2); }
.nvidia__also { margin-top: var(--s-5); max-width: 46rem; }

.round__note { margin-top: var(--s-5); max-width: 46rem; padding: 12px 0 12px var(--s-5); border-left: 2px solid var(--c-silver); color: var(--c-ink-2); }

/* badge slot: empty until the official artwork is supplied */
.badge-slot {
  width: 220px; min-height: 72px; padding: 10px 14px; display: grid; align-content: center;
  border: var(--rule-strong) dashed var(--c-silver);
  background-image: repeating-linear-gradient(135deg, transparent 0 9px, var(--c-slot) 9px 10px);
  font-size: var(--fs-tag); line-height: 1.35; color: var(--c-ink-2);
}
/* NVIDIA Inception badge (NVIDIA's file, unchanged). 44px tall: the bordered card is
   33.6px, over the 30px digital minimum, and smaller than the wordmark. The 9px margin
   plus the file's own margin gives the clear space (the NVIDIA symbol's height). */
.inception__badge { display: block; height: 44px; width: auto; margin-block: 9px; }

/* ------------------------------------------------------------ title blocks */

.tblock {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  border: var(--rule-strong) solid var(--c-strong); background: var(--c-bg);
  font-size: var(--fs-s); line-height: 1.3;
}
.tblock__f { padding: 7px 12px 9px; border-top: 1px solid var(--c-line); border-left: 1px solid var(--c-line); margin: -1px 0 0 -1px; }
.tblock dt { font-size: 11px; font-stretch: var(--wd-tag); color: var(--c-ink-2); letter-spacing: 0.02em; }
.tblock dd { font-weight: 500; }
.tblock a { text-decoration-thickness: 1px; }
/* The Programme field holds NVIDIA's badge in place of a label and a value. On wide
   screens it is the title block's logo box: a fixed column with the badge centred,
   well outside its clear space (14px around the badge's card). */
.tblock--cover { max-width: 44rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tblock--cover .tblock__f--programme { grid-column: 1 / -1; }
@media (min-width: 700px) {
  .tblock--cover { max-width: 36rem; grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.6fr) 12rem; }
  .tblock--cover .tblock__f--programme { grid-column: auto; display: grid; place-items: center; }
}

/* the footer is the sheet's title block */
.site-footer { padding-top: var(--s-7); padding-bottom: calc(var(--frame) + var(--s-6)); }
@media (min-width: 700px) { .site-footer { padding-top: var(--s-9); } }
.site-footer .tblock {
  margin-left: auto; max-width: 54rem;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas:
    "company company"
    "contact contact"
    "programme programme"
    "legal legal"
    "copy copy";
}
.site-footer .tblock__f--company { grid-area: company; }
.site-footer .tblock__f--contact { grid-area: contact; }
.site-footer .tblock__f--programme { grid-area: programme; }
.site-footer .tblock__f--legal { grid-area: legal; }
.site-footer .tblock__f--copy { grid-area: copy; color: var(--c-ink-2); }
/* the footer's badge is the programme mark of every sheet: 76px tall (card about 58px),
   larger than the cover's; its clear space stays 9px plus the file's own margin */
.site-footer .inception__badge { height: 76px; }
.tblock__name { display: block; font-stretch: 125%; font-weight: var(--fw-bold); font-size: var(--fs-m); }
.tblock__links { display: flex; flex-wrap: wrap; gap: 0 var(--s-5); }
.tblock__links a { display: inline-block; padding: 3px 0; }
@media (min-width: 760px) {
  .site-footer .tblock {
    max-width: 60rem;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 14rem;
    grid-template-areas:
      "company company programme"
      "contact legal programme"
      "copy copy copy";
  }
  .site-footer .tblock__f--programme { display: grid; place-items: center; }
}

/* ------------------------------------------------------------ access screen */

.page-access { background-image: linear-gradient(to right, var(--c-grid-sheet) 1px, transparent 1px), linear-gradient(to bottom, var(--c-grid-sheet) 1px, transparent 1px); background-size: 24px 24px; }
.access-header {
  display: flex; justify-content: space-between; align-items: center; gap: var(--s-4);
  max-width: calc(30rem + 2 * (var(--frame) + var(--pad))); margin: 0 auto; width: 100%;
  padding-top: 18px; padding-bottom: 14px;
}
.access-header .wordmark { font-size: 1.375rem; }
.access-header__about { font-size: var(--fs-s); font-weight: 600; padding: 8px 0; }
.access {
  max-width: 30rem; margin: 0 auto; padding: var(--s-5) 0 var(--s-6);
  border-top: var(--rule-strong) solid var(--c-strong);
}
.access__title {
  font-stretch: 125%; font-weight: var(--fw-light); font-size: clamp(2.5rem, 2rem + 2vw, 3rem); line-height: 1; letter-spacing: -0.03em;
  background: var(--g-sheen); -webkit-background-clip: text; background-clip: text; color: transparent;
  padding-bottom: 0.08em;
}
.access__prompt { margin-top: var(--s-3); color: var(--c-ink-2); }
.access__closed { margin-top: var(--s-5); font-weight: 600; }
.gate { margin-top: var(--s-5); }
.gate__label { display: block; margin-bottom: 8px; font-weight: 600; font-size: 0.9375rem; }
.gate__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
.gate__input {
  width: 100%; min-width: 0; height: 60px; padding: 0 14px; margin: 0; border-radius: 0;
  background: var(--c-field); color: var(--c-white); caret-color: var(--c-white);
  border: var(--rule-strong) solid var(--c-silver); border-right: 0;
  font: 500 1.3125rem/1 var(--font-sans); font-stretch: 100%; letter-spacing: 0.06em; text-transform: uppercase;
  -webkit-appearance: none; appearance: none;
}
.gate__input::placeholder { color: var(--c-ink-2); opacity: 1; letter-spacing: 0.06em; }
.gate__input:focus-visible { outline: 3px solid var(--c-white); outline-offset: -3px; }
.gate__btn { height: 60px; min-width: 104px; font-size: 1.125rem; }
.gate__btn:focus-visible { outline-offset: 2px; }
.gate__error[hidden] { display: none; }
.gate__error {
  display: flex; gap: 12px; align-items: flex-start; margin-top: 14px; padding: 12px 14px;
  border: var(--rule-strong) dashed var(--c-white); font-weight: 600; font-size: var(--fs-m); line-height: 1.35;
}
/* a closed valve: the drawing's symbol for "nothing passes" */
.gate__error::before {
  content: ""; flex: none; width: 22px; height: 14px; margin-top: 3px; background: var(--c-white);
  clip-path: polygon(0 0, 0 100%, 100% 0, 100% 100%);
}
.gate__error--block { margin-top: var(--s-5); }
.gate.is-error .gate__input {
  border: 3px solid var(--c-white); border-right: 0;
  background-image: repeating-linear-gradient(135deg, transparent 0 6px, var(--c-hatch) 6px 7px);
}
.access__footnote { margin-top: var(--s-5); font-size: var(--fs-s); color: var(--c-ink-2); }
.mini--access { margin-top: var(--s-6); padding: 22px 0 12px; border-top: 1px solid var(--c-raster); border-bottom: 1px solid var(--c-raster); }
.tblock--mini { margin-top: var(--s-5); grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
.site-footer--compact {
  max-width: calc(30rem + 2 * (var(--frame) + var(--pad))); margin: 0 auto; width: 100%;
  padding-top: var(--s-6); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--s-2) var(--s-5);
  font-size: var(--fs-s);
}
.site-footer--compact .tblock__links { gap: 0 var(--s-4); }
.site-footer--compact .tblock__links li:first-child { flex-basis: 100%; }
.site-footer__copy { color: var(--c-ink-2); }
.site-footer__tm { margin-top: 6px; max-width: 72ch; font-size: var(--fs-tag); line-height: 1.45; color: var(--c-ink-2); }
.site-footer--compact .site-footer__tm { flex-basis: 100%; margin-top: 0; }
.page-access .site-footer { padding-top: var(--s-5); }
@media (min-width: 900px) {
  .page-access main { padding-top: var(--s-6); }
  .access { padding: 30px 34px 30px; border: var(--rule-strong) solid var(--c-strong); box-shadow: 0 0 0 10px var(--c-bg), 0 0 0 11px var(--c-raster); background: var(--c-bg); }
  .access-header { padding-top: calc(var(--frame) + 18px); }
}
@media (max-width: 380px) {
  .gate__input { font-size: 1.1875rem; letter-spacing: 0.04em; padding: 0 10px; }
  .gate__btn { min-width: 88px; }
}

/* ------------------------------------------------------------------- legal */

.legal { max-width: 46rem; padding-top: var(--s-7); }
.legal__title {
  margin-top: var(--s-6);
  font-stretch: 122%; font-weight: var(--fw-light); font-size: var(--fs-3xl); line-height: 1.04; letter-spacing: -0.03em;
}
.legal__body { margin-top: var(--s-6); }
.legal__body h2 { margin-top: var(--s-7); font-stretch: var(--wd-head); font-weight: 600; font-size: var(--fs-l); line-height: 1.25; }
.legal__body h3 { margin-top: var(--s-5); font-stretch: var(--wd-head); font-weight: 600; font-size: var(--fs-m); }
.legal__body p, .legal__body ul { margin-top: var(--s-3); }
.legal__body ul { padding-left: 0; }
.legal__body li { position: relative; padding-left: 22px; margin-top: 6px; }
.legal__body li::before { content: ""; position: absolute; left: 2px; top: 0.8em; width: 10px; border-top: 1.5px solid var(--c-silver); }
.legal__body a { overflow-wrap: anywhere; }

/* --------------------------------------------------------------------- 404 */

.notfound { padding: var(--s-7) 0 var(--s-6); max-width: 46rem; }
.notfound__svg { margin-top: var(--s-7); width: 100%; height: auto; overflow: visible; }
.nf-pipe { fill: none; stroke: var(--c-raster); stroke-width: 3; }
.nf-medium { fill: none; stroke: var(--c-white); stroke-width: 3; }
.nf-arrow { fill: var(--c-white); }
.nf-flange { fill: var(--c-black); stroke: var(--c-white); stroke-width: 3; }
.nf-bolt { stroke: var(--c-silver); stroke-width: 2; }
.nf-tag { fill: var(--c-silver); font: 13px var(--font-sans); font-stretch: var(--wd-tag); }
@media (max-width: 599px) { .nf-tag { font-size: 22px; } }
.notfound__title {
  margin-top: var(--s-6);
  font-stretch: 122%; font-weight: var(--fw-light); font-size: var(--fs-3xl); line-height: 1.04; letter-spacing: -0.03em;
  background: var(--g-sheen); background-size: 100% 1.04em; -webkit-background-clip: text; background-clip: text; color: transparent;
}
.notfound .lede { margin-top: var(--s-4); }

/* ------------------------------------------------------------ reduced motion */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important; transition-delay: 0s !important;
  }
}

@media print {
  .frame, .skip-link, .plant__skip, .toc, .brief-actions { display: none !important; }
  .plant__track { height: auto !important; }
  .plant__stick { position: static !important; height: auto !important; }
}