/* NORTHSIDE SOLUTIONS LTD - site stylesheet.
   One sheet for seven pages. The page is a board: the browser's own body margin is
   left alone and the board is drawn inside it, so there is no margin zeroing here.
   The reset is forms only. The reduced-motion block is the last thing in the file. */

/* ---------------------------------------------------------------- 1. reset */

:where(*) { box-sizing: border-box; }

button,
input,
select,
textarea {
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
  background-color: transparent;
  border: 1px solid currentColor;
  border-radius: 0;
}

button { cursor: pointer; }

input[type="checkbox"] {
  accent-color: #d2883a;
  inline-size: 1.05rem;
  block-size: 1.05rem;
  border: 0;
}

fieldset { border: 1px solid rgba(233, 226, 214, 0.2); }

legend { padding-inline: 0.45rem; }

/* An author `display` must not out-rank the hidden attribute: the two tool
   outputs are markup first and are only unhidden once the script is running. */
[hidden] { display: none !important; }

/* ------------------------------------------------------------- 2. tokens */

:root {
  --ns-bg: #211f1c;
  --ns-ink: #e9e2d6;
  --ns-accent: #d2883a;
  --ns-accent2: #78909c;
  --ns-surface: #2b2824;

  --ns-ink-soft: rgba(233, 226, 214, 0.74);
  --ns-ink-faint: rgba(233, 226, 214, 0.46);
  --ns-rule: rgba(233, 226, 214, 0.16);
  --ns-rule-firm: rgba(233, 226, 214, 0.3);
  --ns-amber-soft: rgba(210, 136, 58, 0.18);
  --ns-steel-soft: rgba(120, 144, 156, 0.2);
  --ns-shadow: rgba(0, 0, 0, 0.45);

  --ns-head: "Pathway Gothic One", "Arial Narrow", Haettenschweiler, sans-serif;
  --ns-body: "Red Hat Text", "Segoe UI", system-ui, sans-serif;

  --ns-gutter: clamp(0.9rem, 3.2vw, 2.1rem);
  --ns-board: 74rem;
}

/* --------------------------------------------------------------- 3. board */

html {
  background-color: var(--ns-bg);
  color-scheme: dark;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  background-color: var(--ns-bg);
  border: 1px solid var(--ns-rule);
  color: var(--ns-ink);
  font-family: var(--ns-body);
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.08rem);
  line-height: 1.62;
  overflow-wrap: break-word;
}

.ns-board {
  margin-inline: auto;
  max-inline-size: var(--ns-board);
  padding-inline: var(--ns-gutter);
}

/* ----------------------------------------------------------- 4. skip link */

.ns-skip {
  position: absolute;
  inset-block-start: 0.4rem;
  inset-inline-start: 0.4rem;
  z-index: 9;
  padding: 0.5rem 0.8rem;
  background-color: var(--ns-accent);
  color: var(--ns-bg);
  font-family: var(--ns-head);
  font-size: 1.05rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  transform: translateY(-180%);
  transition: transform 160ms ease-out;
}

.ns-skip:focus { transform: translateY(0); }

/* -------------------------------------------------------------- 5. header */

.ns-head {
  border-block-end: 1px solid var(--ns-rule);
  background-color: var(--ns-surface);
}

.ns-head__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem var(--ns-gutter);
  align-items: flex-end;
  justify-content: space-between;
  padding-block: 0.85rem;
}

.ns-mark {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  color: var(--ns-ink);
  text-decoration: none;
}

.ns-mark svg {
  display: block;
  inline-size: 2.4rem;
  block-size: 2.4rem;
  flex: none;
}

.ns-mark__name {
  display: block;
  font-family: var(--ns-head);
  font-size: 1.42rem;
  letter-spacing: 0.055em;
  line-height: 1.04;
  text-transform: uppercase;
}

.ns-mark__trade {
  display: block;
  color: var(--ns-ink-faint);
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.ns-mark:hover .ns-mark__name,
.ns-mark:focus-visible .ns-mark__name { color: var(--ns-accent); }

.ns-primary ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem 1.15rem;
  margin-block: 0.2rem;
  padding-inline-start: 0;
  list-style: none;
}

.ns-primary a {
  display: inline-block;
  padding-block: 0.22rem;
  border-block-end: 2px solid transparent;
  color: var(--ns-ink-soft);
  font-family: var(--ns-head);
  font-size: 1.1rem;
  letter-spacing: 0.055em;
  text-decoration: none;
  text-transform: uppercase;
  transition: color 150ms ease-out, border-color 150ms ease-out;
}

.ns-primary a:hover {
  color: var(--ns-ink);
  border-block-end-color: var(--ns-rule-firm);
}

.ns-primary a[aria-current="page"] {
  color: var(--ns-accent);
  border-block-end-color: var(--ns-accent);
}

/* ------------------------------------------------------- 6. stacked slabs */

.ns-slabs { padding-block: 1.6rem 1.9rem; }

.ns-slab {
  position: relative;
  margin-block: 0.42rem;
  padding: 0.95rem 1.1rem 1rem;
  border-inline-start: 4px solid var(--ns-accent);
  background-color: var(--ns-surface);
  box-shadow: 0 1px 0 var(--ns-shadow);
}

.ns-slab--2 {
  margin-inline-end: 1.1rem;
  border-inline-start-color: var(--ns-accent2);
}

.ns-slab--3 {
  margin-inline-end: 2.2rem;
  border-inline-start-color: var(--ns-accent2);
}

.ns-slab--4 {
  margin-inline-end: 3.3rem;
  border-inline-start-color: var(--ns-rule-firm);
  border-block-end: 1px solid var(--ns-rule);
  background-color: transparent;
  box-shadow: none;
}

.ns-slab__eyebrow {
  display: block;
  margin-block-end: 0.45rem;
  color: var(--ns-accent);
  font-family: var(--ns-head);
  font-size: 0.92rem;
  letter-spacing: 0.17em;
  text-transform: uppercase;
}

.ns-slab h1 {
  margin-block: 0.1rem 0.2rem;
  font-family: var(--ns-head);
  font-size: clamp(2.05rem, 1.2rem + 5.1vw, 4.05rem);
  font-weight: 400;
  letter-spacing: 0.012em;
  line-height: 0.96;
  text-transform: uppercase;
  text-wrap: balance;
}

.ns-slab__fact { margin-block: 0.2rem; font-size: 1.02rem; }

.ns-slab__fact b {
  color: var(--ns-accent);
  font-weight: inherit;
  letter-spacing: 0.02em;
}

.ns-slab__yard {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 1.3rem;
  margin-block: 0.3rem;
  color: var(--ns-ink-faint);
  font-size: 0.86rem;
}

/* --------------------------------------------------- 7. chapter headings */

.ns-chapter {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.1rem 0.75rem;
  align-items: baseline;
  margin-block: 2.5rem 0.9rem;
  padding-block-end: 0.4rem;
  border-block-end: 1px solid var(--ns-rule);
  font-family: var(--ns-head);
  font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.25rem);
  font-weight: 400;
  letter-spacing: 0.03em;
  line-height: 1.02;
  text-transform: uppercase;
}

.ns-chapter--page {
  margin-block-start: 1.9rem;
  border-block-end-width: 3px;
  border-block-end-color: var(--ns-accent);
  font-size: clamp(1.95rem, 1.2rem + 3.6vw, 3.2rem);
  line-height: 0.98;
}

.ns-chapter__no {
  color: var(--ns-accent);
  font-size: 0.72em;
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
}

.ns-sub {
  margin-block: 1.5rem 0.55rem;
  font-family: var(--ns-head);
  font-size: 1.32rem;
  font-weight: 400;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* ---------------------------------------------------------- 8. body prose */

main p { margin-block: 0.75rem; max-inline-size: 64ch; }

main a {
  color: var(--ns-accent);
  text-decoration-color: var(--ns-amber-soft);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  transition: color 150ms ease-out, text-decoration-color 150ms ease-out;
}

main a:hover { color: var(--ns-ink); text-decoration-color: var(--ns-rule-firm); }

strong { color: var(--ns-accent); font-weight: inherit; }

.ns-lede { font-size: 1.1rem; max-inline-size: 58ch; }

.ns-list {
  margin-block: 0.7rem;
  padding-inline-start: 1.05rem;
  max-inline-size: 62ch;
}

.ns-list li { margin-block: 0.4rem; padding-inline-start: 0.2rem; }

.ns-list li::marker { color: var(--ns-accent2); }

.ns-caption {
  margin-block: 0.55rem;
  color: var(--ns-ink-faint);
  font-size: 0.82rem;
  max-inline-size: 58ch;
}

.ns-note {
  margin-block: 1.1rem;
  max-inline-size: 44rem;
  padding: 0.9rem 1.05rem;
  border: 1px solid var(--ns-rule-firm);
  border-inline-start: 4px solid var(--ns-accent2);
  background-color: var(--ns-surface);
  font-size: 0.95rem;
}

.ns-note p { margin-block: 0.4rem; max-inline-size: 62ch; }

.ns-note__head {
  display: block;
  margin-block-end: 0.3rem;
  color: var(--ns-accent2);
  font-family: var(--ns-head);
  font-size: 1.02rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ------------------------------------------------------------- 9. drawing */

.ns-plan {
  margin-block: 1.1rem;
  margin-inline: 0.15rem;
  padding: 0.8rem 0.8rem 0.4rem;
  border: 1px solid var(--ns-rule);
  background-color: var(--ns-surface);
  max-inline-size: 36rem;
}

/* The drawings are authored at roughly the width they are shown at, so the
   annotation reads at 390 px and is not blown up to headline size at 1440. */
.ns-plan svg {
  display: block;
  inline-size: 100%;
  max-inline-size: 32rem;
  block-size: auto;
}

.ns-plan figcaption {
  margin-block: 0.6rem 0.2rem;
  color: var(--ns-ink-faint);
  font-size: 0.8rem;
  line-height: 1.5;
}

.ns-key {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.1rem;
  margin-block: 0.5rem 0.2rem;
  padding-inline-start: 0;
  list-style: none;
  font-size: 0.74rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.ns-key li {
  display: flex;
  gap: 0.35rem;
  align-items: center;
  color: var(--ns-ink-faint);
}

.ns-key i {
  inline-size: 1.1rem;
  block-size: 0.3rem;
  flex: none;
  background-color: currentColor;
}

.ns-k-work { color: var(--ns-accent); }
.ns-k-route { color: var(--ns-accent2); }
.ns-k-screen { color: var(--ns-ink-soft); }

/* ------------------------------------------------- 10. the Gantt extend */

.ns-gantt {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: auto repeat(4, auto auto);
  gap: 0.25rem 0;
  position: relative;
  margin-block: 1.2rem 0.4rem;
  padding: 0.9rem 0.9rem 2rem;
  border: 1px solid var(--ns-rule);
  background-color: var(--ns-surface);
  --ns-now-col: 7;
}

.ns-gantt__scale {
  grid-column: 1 / -1;
  grid-row: 1;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  margin-block-end: 0.2rem;
  border-block-end: 1px solid var(--ns-rule);
  color: var(--ns-ink-faint);
  font-family: var(--ns-head);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
}

.ns-gantt__wk {
  padding-block-end: 0.2rem;
  padding-inline-start: 0.18rem;
  border-inline-start: 1px solid var(--ns-rule);
  font-variant-numeric: tabular-nums;
}

.ns-gantt__label {
  grid-column: 1 / -1;
  grid-row: var(--ns-lrow);
  position: relative;
  z-index: 4;
  display: block;
  padding-block: 0.3rem 0.1rem;
  background-color: var(--ns-surface);
  color: var(--ns-ink-soft);
  font-family: var(--ns-head);
  font-size: 1.03rem;
  letter-spacing: 0.06em;
  text-decoration: none;
  text-transform: uppercase;
  transition: color 150ms ease-out, padding-inline-start 150ms ease-out;
}

.ns-gantt__label:hover { color: var(--ns-accent); padding-inline-start: 0.3rem; }

.ns-gantt__label span {
  color: var(--ns-accent);
  font-variant-numeric: tabular-nums;
}

.ns-bar {
  position: relative;
  grid-column: calc(1 + var(--ns-from)) / span var(--ns-span);
  grid-row: var(--ns-brow);
  display: flex;
  align-items: center;
  block-size: 1.45rem;
}

.ns-bar--strip { --ns-from: 0; --ns-span: 3; --ns-step: 0; }
.ns-bar--frame { --ns-from: 3; --ns-span: 3; --ns-step: 1; }
.ns-bar--services { --ns-from: 6; --ns-span: 3; --ns-step: 2; }
.ns-bar--finish { --ns-from: 9; --ns-span: 3; --ns-step: 3; }

/* Both the stage label and its bar are placed on explicit rows, so the progress
   line may be given rows 1 to -1 and overlap them instead of displacing them. */
.ns-row--1 { --ns-lrow: 2; --ns-brow: 3; }
.ns-row--2 { --ns-lrow: 4; --ns-brow: 5; }
.ns-row--3 { --ns-lrow: 6; --ns-brow: 7; }
.ns-row--4 { --ns-lrow: 8; --ns-brow: 9; }

.ns-bar__fill {
  position: absolute;
  inset: 0;
  background-color: var(--ns-accent);
  border-inline-start: 3px solid var(--ns-ink);
  transform-origin: left center;
  animation: ns-extend 620ms cubic-bezier(0.22, 0.68, 0.3, 1) both;
  animation-delay: calc(var(--ns-step) * 560ms + 220ms);
}

.ns-bar--frame .ns-bar__fill { background-color: var(--ns-accent2); }
.ns-bar--services .ns-bar__fill { background-color: var(--ns-accent); }

.ns-bar--finish .ns-bar__fill {
  background-color: transparent;
  border: 2px solid var(--ns-accent);
  border-inline-start-width: 3px;
  border-inline-start-color: var(--ns-ink);
}

.ns-bar__weeks {
  position: relative;
  z-index: 2;
  padding-inline: 0.45rem;
  color: var(--ns-bg);
  font-family: var(--ns-head);
  font-size: 0.82rem;
  letter-spacing: 0.07em;
  white-space: nowrap;
  animation: ns-settle 420ms ease-out both;
  animation-delay: calc(var(--ns-step) * 560ms + 620ms);
}

.ns-bar--finish .ns-bar__weeks { color: var(--ns-accent); }

.ns-gantt__now {
  grid-column: var(--ns-now-col) / span 1;
  grid-row: 1 / -1;
  position: relative;
  z-index: 3;
  pointer-events: none;
  border-inline-start: 2px dashed var(--ns-ink);
  animation: ns-drop 460ms cubic-bezier(0.3, 0.1, 0.3, 1) both;
  animation-delay: 2.6s;
}

.ns-gantt__now b {
  position: absolute;
  inset-block-end: -1.5rem;
  inset-inline-start: 0.22rem;
  color: var(--ns-ink);
  font-family: var(--ns-head);
  font-size: 0.7rem;
  font-weight: inherit;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  animation: ns-flag 500ms ease-out both;
  animation-delay: 3.1s;
}

@keyframes ns-extend {
  from { transform: scaleX(0); }
}

@keyframes ns-settle {
  from { opacity: 0; transform: translateX(-0.4rem); }
}

@keyframes ns-drop {
  from { opacity: 0; transform: translateY(-1.2rem); }
}

@keyframes ns-flag {
  from { opacity: 0; }
}

/* --------------------------------------------------- 11. the book spread */

.ns-stage { margin-block: 1.15rem; }

.ns-stage details {
  border: 1px solid var(--ns-rule);
  border-inline-start: 4px solid var(--ns-rule-firm);
  background-color: var(--ns-surface);
  transition: border-color 180ms ease-out;
}

.ns-stage details[open] { border-inline-start-color: var(--ns-accent); }

.ns-stage summary {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 0.8rem;
  align-items: baseline;
  justify-content: flex-start;
  padding: 0.7rem 0.9rem;
  cursor: pointer;
  list-style: none;
  font-family: var(--ns-head);
  font-size: 1.22rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  transition: background-color 170ms ease-out, color 170ms ease-out;
}

.ns-stage summary:hover { background-color: var(--ns-amber-soft); }

.ns-stage summary::-webkit-details-marker { display: none; }

/* A flex summary loses its disclosure triangle, and a stage that does not look
   openable will not be opened. This is the affordance, drawn. */
.ns-stage summary::after {
  content: "";
  flex: none;
  align-self: center;
  inline-size: 0.6rem;
  block-size: 0.6rem;
  margin-inline-start: 0.2rem;
  border-inline-end: 2px solid var(--ns-accent);
  border-block-end: 2px solid var(--ns-accent);
  transform: translateY(-0.12rem) rotate(45deg);
  transition: transform 220ms ease-out;
}

.ns-stage details[open] summary::after {
  transform: translateY(0.1rem) rotate(-135deg);
}

.ns-stage summary b {
  color: var(--ns-accent);
  font-weight: inherit;
  font-variant-numeric: tabular-nums;
}

.ns-stage summary em {
  margin-inline-start: auto;
  color: var(--ns-ink-faint);
  font-family: var(--ns-body);
  font-size: 0.78rem;
  font-style: normal;
  letter-spacing: 0.08em;
}

.ns-spread {
  display: grid;
  gap: 0;
  border-block-start: 1px solid var(--ns-rule);
}

.ns-spread__page { padding: 0.85rem 0.95rem 1.1rem; }

.ns-spread__page h3 {
  margin-block: 0.25rem 0.5rem;
  font-family: var(--ns-head);
  font-size: 1.12rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.ns-spread__page p { margin-block: 0.55rem; font-size: 0.97rem; max-inline-size: 48ch; }

.ns-spread__page .ns-list { font-size: 0.95rem; }

.ns-spread__folio {
  display: block;
  margin-block-end: 0.3rem;
  font-family: var(--ns-head);
  font-size: 0.74rem;
  letter-spacing: 0.17em;
  text-transform: uppercase;
}

.ns-spread__works h3 { color: var(--ns-ink); }
.ns-spread__works .ns-spread__folio { color: var(--ns-accent); }

.ns-spread__client {
  background-color: var(--ns-steel-soft);
  border-block-start: 1px dashed var(--ns-rule-firm);
}

.ns-spread__client h3 { color: var(--ns-accent2); }
.ns-spread__client .ns-spread__folio { color: var(--ns-accent2); }

/* --------------------------------------------------------- 12. timelines */

.ns-timeline {
  margin-block: 1rem;
  padding-inline-start: 0;
  list-style: none;
  counter-reset: ns-tl;
}

.ns-timeline > li {
  position: relative;
  margin-block: 0.1rem;
  padding: 0.1rem 0 1.05rem 2.5rem;
  counter-increment: ns-tl;
}

.ns-timeline > li::before {
  content: counter(ns-tl, decimal-leading-zero);
  position: absolute;
  inset-block-start: 0.18rem;
  inset-inline-start: 0;
  inline-size: 1.75rem;
  padding-block: 0.05rem;
  background-color: var(--ns-bg);
  border: 1px solid var(--ns-accent);
  color: var(--ns-accent);
  font-family: var(--ns-head);
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-align: center;
  transition: background-color 160ms ease-out, color 160ms ease-out;
}

.ns-timeline > li::after {
  content: "";
  position: absolute;
  inset-block: 1.5rem 0.1rem;
  inset-inline-start: 0.85rem;
  border-inline-start: 1px solid var(--ns-rule-firm);
}

.ns-timeline > li:last-child::after { border-inline-start-color: transparent; }

.ns-timeline > li:hover::before { background-color: var(--ns-accent); color: var(--ns-bg); }

.ns-timeline b {
  display: block;
  color: var(--ns-ink);
  font-family: var(--ns-head);
  font-size: 1.08rem;
  font-weight: inherit;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.ns-timeline p { margin-block: 0.25rem; font-size: 0.96rem; max-inline-size: 58ch; }

/* ----------------------------------------------------------- 13. widgets */

.ns-tool {
  margin-block: 1.2rem;
  border: 1px solid var(--ns-rule-firm);
  background-color: var(--ns-surface);
}

.ns-tool__head {
  padding: 0.7rem 0.95rem;
  border-block-end: 1px solid var(--ns-rule);
  background-color: var(--ns-bg);
}

.ns-tool__head h3 {
  margin-block: 0.1rem;
  font-family: var(--ns-head);
  font-size: 1.24rem;
  font-weight: 400;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.ns-tool__head p { margin-block: 0.25rem; color: var(--ns-ink-faint); font-size: 0.85rem; }

.ns-tool__body { padding: 0.9rem 0.95rem 1.1rem; }

.ns-fields {
  display: grid;
  gap: 0.85rem;
  margin-block: 0.4rem 1rem;
  padding: 0.2rem 0 0.9rem;
}

.ns-field { display: grid; gap: 0.25rem; }

.ns-field label {
  color: var(--ns-ink-soft);
  font-family: var(--ns-head);
  font-size: 0.98rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.ns-field small { color: var(--ns-ink-faint); font-size: 0.78rem; line-height: 1.45; }

.ns-field input {
  padding: 0.45rem 0.55rem;
  border-color: var(--ns-rule-firm);
  background-color: var(--ns-bg);
  font-variant-numeric: tabular-nums;
  transition: border-color 160ms ease-out, background-color 160ms ease-out;
}

.ns-field input:hover { border-color: var(--ns-ink-faint); }

.ns-field input:focus-visible {
  border-color: var(--ns-accent);
  background-color: var(--ns-surface);
  outline: 2px solid var(--ns-accent);
  outline-offset: 1px;
}

.ns-pair { display: grid; gap: 0.6rem; }

.ns-working {
  margin-block: 0.6rem;
  padding-inline-start: 0;
  list-style: none;
  border-block-start: 1px solid var(--ns-rule);
}

.ns-working li {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.2rem 0.9rem;
  align-items: baseline;
  padding-block: 0.42rem;
  border-block-end: 1px solid var(--ns-rule);
  font-size: 0.93rem;
}

.ns-working li span { color: var(--ns-ink-soft); }

.ns-working li b {
  color: var(--ns-ink);
  font-family: var(--ns-head);
  font-size: 1.1rem;
  font-weight: inherit;
  letter-spacing: 0.05em;
  font-variant-numeric: tabular-nums;
  text-align: end;
}

.ns-working li.ns-working--sum b { color: var(--ns-accent); font-size: 1.32rem; }

.ns-working li.ns-working--note {
  grid-template-columns: 1fr;
  color: var(--ns-accent2);
  font-size: 0.86rem;
}

.ns-out {
  margin-block: 0.9rem 0.3rem;
  padding: 0.75rem 0.85rem;
  border: 1px solid var(--ns-rule);
  border-inline-start: 4px solid var(--ns-accent);
  background-color: var(--ns-bg);
}

.ns-out p { margin-block: 0.3rem; font-size: 0.95rem; }

.ns-out__verdict {
  font-family: var(--ns-head);
  font-size: 1.3rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.ns-guide {
  display: block;
  margin-block: 0.7rem 0.2rem;
  color: var(--ns-ink-faint);
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* ------------------------------------------------- 14. mitigation picker */

.ns-measures {
  display: grid;
  gap: 0.35rem;
  margin-block: 0.4rem 0.9rem;
  padding: 0.4rem 0 0.7rem;
}

.ns-measures legend {
  color: var(--ns-accent2);
  font-family: var(--ns-head);
  font-size: 1rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.ns-measures fieldset { padding-block-end: 0.5rem; }

.ns-measure {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.2rem 0.6rem;
  align-items: start;
  padding: 0.35rem 0.4rem;
  border: 1px solid transparent;
  transition: background-color 160ms ease-out, border-color 160ms ease-out;
}

.ns-measure:hover { background-color: var(--ns-amber-soft); border-color: var(--ns-rule); }

.ns-measure input { margin-block-start: 0.32rem; }

.ns-measure span { font-size: 0.95rem; }

.ns-measure small {
  grid-column: 2;
  color: var(--ns-ink-faint);
  font-size: 0.78rem;
  line-height: 1.45;
}

.ns-spec {
  margin-block: 0.8rem 0.4rem;
  padding: 0.8rem 0.85rem;
  border: 1px dashed var(--ns-rule-firm);
  background-color: var(--ns-bg);
  color: var(--ns-ink-soft);
  font-family: var(--ns-body);
  font-size: 0.88rem;
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-wrap: break-word;
}

.ns-send {
  display: inline-block;
  margin-block: 0.5rem;
  padding: 0.55rem 1.1rem;
  border: 2px solid var(--ns-accent);
  background-color: transparent;
  color: var(--ns-accent);
  font-family: var(--ns-head);
  font-size: 1.1rem;
  letter-spacing: 0.1em;
  text-decoration: none;
  text-transform: uppercase;
  transition: background-color 170ms ease-out, color 170ms ease-out;
}

.ns-send:hover { background-color: var(--ns-accent); color: var(--ns-bg); }

/* ------------------------------------------------------------ 15. footer */

.ns-foot {
  margin-block-start: 2.8rem;
  border-block-start: 1px solid var(--ns-rule-firm);
  background-color: var(--ns-surface);
}

.ns-foot__inner { padding-block: 1.4rem 1.6rem; }

.ns-index__head,
.ns-reg__head {
  display: block;
  margin-block: 0.2rem 0.6rem;
  color: var(--ns-accent);
  font-family: var(--ns-head);
  font-size: 0.86rem;
  letter-spacing: 0.17em;
  text-transform: uppercase;
}

.ns-index ol {
  display: grid;
  gap: 0.1rem 1.4rem;
  margin-block: 0.3rem 1.2rem;
  padding-inline-start: 0;
  list-style: none;
  counter-reset: ns-ix;
}

.ns-index li {
  counter-increment: ns-ix;
  border-block-end: 1px solid var(--ns-rule);
}

.ns-index a {
  display: grid;
  grid-template-columns: 2.4rem 1fr;
  gap: 0.7rem;
  padding-block: 0.4rem;
  color: var(--ns-ink-soft);
  font-family: var(--ns-head);
  font-size: 1.05rem;
  letter-spacing: 0.055em;
  text-decoration: none;
  text-transform: uppercase;
  transition: color 160ms ease-out, background-color 160ms ease-out;
}

.ns-index a::before {
  content: counter(ns-ix, decimal-leading-zero);
  color: var(--ns-accent);
  font-size: 0.86rem;
  font-variant-numeric: tabular-nums;
}

.ns-index a:hover { color: var(--ns-ink); background-color: var(--ns-amber-soft); }

.ns-index a[aria-current="page"] { color: var(--ns-accent); }

.ns-reg address {
  margin-block: 0.4rem 0.7rem;
  font-size: 0.92rem;
  font-style: normal;
  line-height: 1.55;
}

.ns-reg address span { display: block; }

.ns-reg p {
  margin-block: 0.22rem;
  color: var(--ns-ink-soft);
  font-size: 0.86rem;
}

.ns-reg a { color: var(--ns-accent); transition: color 150ms ease-out; }

.ns-reg a:hover { color: var(--ns-ink); }

/* ------------------------------------------------------- 16. wide widths */

@media (min-width: 40em) {
  .ns-pair { grid-template-columns: 1fr 1fr; gap: 0.9rem; }
  .ns-fields { grid-template-columns: 1fr 1fr; gap: 0.9rem 1.2rem; }
  .ns-fields .ns-field--wide { grid-column: 1 / -1; }
  .ns-index ol { grid-template-columns: 1fr 1fr; }
  .ns-gantt__wk:nth-child(even) { color: var(--ns-ink-faint); }
}

@media (min-width: 52em) {
  .ns-gantt {
    grid-template-columns: minmax(10rem, 15rem) repeat(12, minmax(0, 1fr));
    grid-template-rows: auto repeat(4, auto);
    gap: 0.5rem 0;
    --ns-now-col: 8;
  }

  .ns-gantt__scale { grid-column: 2 / -1; font-size: 0.8rem; }

  .ns-row--1 { --ns-lrow: 2; --ns-brow: 2; }
  .ns-row--2 { --ns-lrow: 3; --ns-brow: 3; }
  .ns-row--3 { --ns-lrow: 4; --ns-brow: 4; }
  .ns-row--4 { --ns-lrow: 5; --ns-brow: 5; }

  .ns-gantt__label {
    grid-column: 1 / 2;
    padding-block: 0.1rem;
    padding-inline-end: 0.8rem;
    align-self: center;
  }

  .ns-bar { grid-column: calc(2 + var(--ns-from)) / span var(--ns-span); }

  .ns-spread {
    grid-template-columns: 1fr 1fr;
    position: relative;
  }

  .ns-spread::before {
    content: "";
    position: absolute;
    inset-block: 0.6rem;
    inset-inline-start: 50%;
    inline-size: 0;
    border-inline-start: 1px solid var(--ns-rule-firm);
    box-shadow: -7px 0 14px -10px rgba(0, 0, 0, 0.85), 7px 0 14px -10px rgba(0, 0, 0, 0.85);
  }

  .ns-spread__works { padding-inline-end: 1.5rem; }

  .ns-spread__client {
    padding-inline-start: 1.5rem;
    border-block-start: 0;
    border-inline-start: 1px dashed var(--ns-rule-firm);
  }

  .ns-foot__inner { display: grid; grid-template-columns: 1.35fr 1fr; gap: 0 2.6rem; }
}

@media (min-width: 68em) {
  .ns-slab { padding-inline: 1.9rem; }
  .ns-slabs { padding-block: 2.3rem 2.6rem; }
  .ns-index ol { grid-template-columns: 1fr 1fr; }
}

/* ------------------------------------------------------- 17. focus/print */

:focus-visible {
  outline: 2px solid var(--ns-accent);
  outline-offset: 2px;
}

summary:focus-visible {
  outline: 2px solid var(--ns-accent);
  outline-offset: -2px;
  background-color: var(--ns-amber-soft);
}

::selection { background-color: var(--ns-accent); color: var(--ns-bg); }

@media print {
  html, body { background-color: #ffffff; color: #211f1c; }
  body { border: 0; }
  .ns-head, .ns-index, .ns-skip, .ns-tool { display: none; }
  .ns-stage details { border-color: #211f1c; }
  .ns-spread__client { background-color: transparent; }
  .ns-bar__fill, .ns-bar__weeks, .ns-gantt__now { animation: none; }
}

/* -------------------------------------------- 18. reduced motion (last) */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  /* Every animation and every transition in this file is switched off here, and
     the base rules above are already the finished state: the programme bars sit
     at full length, the week captions are in place and the progress line stands
     on week seven. Nothing is merely shortened. */
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }

  .ns-bar__fill,
  .ns-bar__weeks,
  .ns-gantt__now,
  .ns-gantt__now b {
    opacity: 1;
    transform: none;
  }

  .ns-skip { transform: translateY(-180%); }
  .ns-skip:focus { transform: translateY(0); }
}