@font-face {
  font-family: "Atkinson Hyperlegible PSG";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("/assets/fonts/atkinson-hyperlegible-next-latin-wght-normal.woff2") format("woff2-variations");
}

@font-face {
  font-family: "League Gothic PSG";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/league-gothic-latin-400-normal.woff2") format("woff2");
}

:root {
  --paper: oklch(96.5% 0.018 82);
  --paper-light: oklch(99% 0.01 82);
  --paper-deep: oklch(91.5% 0.028 78);
  --ink: oklch(23% 0.025 58);
  --ink-soft: oklch(43% 0.028 60);
  --rule: oklch(76% 0.035 74);
  --signal: oklch(59% 0.165 43);
  --signal-dark: oklch(43% 0.13 39);
  --sage: oklch(43% 0.065 147);
  --signal-fill: #a63f13;
  --ink-on-signal: #fff9ec;
  --water: oklch(61% 0.065 218);
  --water-dark: oklch(34% 0.052 215);
  --water-pale: oklch(91.5% 0.025 215);
  --body: "Atkinson Hyperlegible PSG", sans-serif;
  --display: "League Gothic PSG", sans-serif;
  --content: 76rem;
  --reading: 45rem;
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4.5rem;
  --space-4xl: 6rem;
}

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

html {
  color-scheme: light;
  scroll-behavior: smooth;
  text-size-adjust: 100%;
}

body {
  min-width: 20rem;
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font: 450 1.05rem/1.58 var(--body);
  text-rendering: optimizeLegibility;
}

body::before {
  position: fixed;
  z-index: -1;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90' viewBox='0 0 90 90'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.035'/%3E%3C/svg%3E");
  content: "";
  pointer-events: none;
}

button,
input,
select,
textarea {
  font: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

a {
  color: inherit;
  text-decoration-color: color-mix(in oklch, var(--signal) 68%, transparent);
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.18em;
}

a:hover {
  color: var(--signal-dark);
  text-decoration-color: currentColor;
}

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

h1,
h2,
h3,
p {
  text-wrap: pretty;
}

h1,
h2,
h3 {
  margin: 0;
  font-family: var(--body);
  font-weight: 760;
  letter-spacing: -0.025em;
}

h1 {
  font-size: clamp(2.65rem, 8vw, 5.2rem);
  line-height: 0.98;
}

h2 {
  font-size: clamp(1.85rem, 4.5vw, 3.15rem);
  line-height: 1.06;
}

h3 {
  font-size: clamp(1.18rem, 2.2vw, 1.55rem);
  line-height: 1.18;
}

[hidden] {
  display: none !important;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  z-index: 100;
  inset: var(--space-sm) auto auto var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  color: var(--paper-light);
  background: var(--ink);
  transform: translateY(-180%);
}

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

:focus-visible {
  outline: 0.2rem solid var(--signal);
  outline-offset: 0.2rem;
}

.site-header,
main,
.site-footer {
  width: min(calc(100% - 2rem), var(--content));
  margin-inline: auto;
}

.site-header {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md) var(--space-lg);
  align-items: center;
  min-height: 4.75rem;
  padding-block: var(--space-sm);
  border-bottom: 1px solid var(--rule);
}

.wordmark {
  display: inline-flex;
  min-height: 2.75rem;
  align-items: center;
  gap: var(--space-sm);
  color: var(--ink);
  text-decoration: none;
}

.wordmark:hover {
  color: var(--ink);
}

.wordmark span {
  display: grid;
  min-width: 2.65rem;
  min-height: 2.65rem;
  place-items: center;
  padding-inline: 0.32rem;
  color: var(--ink-on-signal);
  background: var(--signal-fill);
  font-family: var(--display);
  font-size: 1.55rem;
  line-height: 1;
  letter-spacing: 0.035em;
}

.wordmark strong {
  max-width: 8.5rem;
  font-size: 0.95rem;
  line-height: 1.05;
}

.site-nav,
.header-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs) var(--space-md);
  align-items: center;
}

.site-nav {
  margin-inline-start: auto;
}

.site-nav a,
.sign-in-link,
.nav-secondary {
  display: inline-flex;
  min-height: 2.75rem;
  align-items: center;
  color: var(--ink-soft);
  font-size: 0.94rem;
  font-weight: 680;
  text-decoration: none;
}

.site-nav a:hover,
.sign-in-link:hover,
.nav-secondary:hover,
.site-nav a[aria-current="page"] {
  color: var(--ink);
}

.site-nav a[aria-current="page"] {
  text-decoration: underline;
  text-decoration-color: var(--signal);
  text-decoration-thickness: 0.14rem;
  text-underline-offset: 0.42rem;
}

.header-actions {
  margin-inline-start: var(--space-xs);
}

.support-link,
.nav-support {
  display: inline-flex;
  min-height: 2.75rem;
  align-items: center;
  justify-content: center;
  padding: 0.55rem 0.85rem;
  border: 1px solid var(--signal-dark);
  color: var(--signal-dark);
  background: var(--paper-light);
  font-size: 0.88rem;
  font-weight: 760;
  line-height: 1;
  text-decoration: none;
}

.support-link:hover,
.nav-support:hover {
  color: var(--ink-on-signal);
  background: var(--signal-fill);
}

.eyebrow,
.section-index,
.tool-kind {
  margin: 0 0 var(--space-sm);
  color: var(--signal-dark);
  font-size: 0.79rem;
  font-weight: 780;
  letter-spacing: 0.075em;
  text-transform: uppercase;
}

.dek {
  max-width: 42rem;
  margin: var(--space-lg) 0 0;
  color: var(--ink-soft);
  font-size: clamp(1.12rem, 2.5vw, 1.4rem);
  line-height: 1.48;
}

.actions,
.page-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  align-items: center;
  margin-block-start: var(--space-xl);
}

.button {
  display: inline-flex;
  min-height: 2.75rem;
  align-items: center;
  justify-content: center;
  padding: 0.7rem 1rem;
  border: 1px solid var(--ink);
  border-radius: 0.2rem;
  color: var(--ink);
  background: transparent;
  font-weight: 720;
  line-height: 1.1;
  text-decoration: none;
  cursor: pointer;
}

.button:hover {
  color: var(--paper-light);
  background: var(--ink);
}

.button-primary {
  color: var(--ink-on-signal);
  background: var(--signal-fill);
  border-color: var(--signal-fill);
}

.button-primary:hover {
  color: var(--paper-light);
  background: var(--ink);
  border-color: var(--ink);
}

.button-quiet {
  background: var(--paper-light);
}

.text-action,
.section-link,
.row-action {
  display: inline-flex;
  min-height: 2.75rem;
  align-items: center;
  padding: 0;
  border: 0;
  border-bottom: 1px solid currentColor;
  color: var(--ink);
  background: transparent;
  font-weight: 720;
  text-decoration: none;
  cursor: pointer;
}

.text-action:hover,
.section-link:hover,
.row-action:hover {
  color: var(--signal-dark);
}

.home-hero {
  display: grid;
  gap: var(--space-2xl);
  padding-block: clamp(var(--space-3xl), 9vw, var(--space-4xl));
  border-bottom: 1px solid var(--rule);
}

.hero-copy h1 {
  max-width: 13ch;
}

.quick-start {
  align-self: end;
  padding: var(--space-xl);
  border: 1px solid var(--rule);
  background: var(--paper-light);
}

.quick-start h2 {
  font-size: 1.4rem;
}

.quick-start ol {
  display: grid;
  gap: var(--space-sm);
  margin: var(--space-lg) 0 0;
  padding-inline-start: 1.5rem;
}

.quick-start li::marker {
  color: var(--signal-dark);
  font-weight: 780;
}

.home-section {
  padding-block: clamp(var(--space-3xl), 8vw, var(--space-4xl));
  border-bottom: 1px solid var(--rule);
}

.section-heading {
  display: grid;
  gap: var(--space-sm);
  margin-block-end: var(--space-2xl);
}

.section-heading h2 {
  max-width: 19ch;
}

.section-heading .section-link {
  justify-self: start;
}

.featured-links,
.tool-rows,
.tool-library {
  border-top: 1px solid var(--ink);
}

.featured-links > a,
.tool-rows > a {
  display: grid;
  gap: var(--space-xs);
  padding-block: var(--space-lg);
  border-bottom: 1px solid var(--rule);
  color: var(--ink);
  text-decoration: none;
}

.featured-links > a:hover,
.tool-rows > a:hover {
  padding-inline: var(--space-sm);
  color: var(--signal-dark);
  background: var(--paper-light);
}

.featured-links strong,
.tool-rows strong {
  font-size: 1.22rem;
}

.featured-links span,
.tool-rows span {
  max-width: 42rem;
  color: var(--ink-soft);
}

.tool-rows small {
  color: var(--signal-dark);
  font-size: 0.8rem;
  font-weight: 760;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.topic-directory {
  display: grid;
  gap: var(--space-2xl);
}

.topic-directory section {
  padding-block-start: var(--space-md);
  border-top: 1px solid var(--ink);
}

.topic-directory h3 {
  margin-block-end: var(--space-md);
}

.topic-directory ul {
  display: grid;
  gap: var(--space-sm);
  margin: 0;
  padding: 0;
  list-style: none;
}

.topic-directory a {
  display: inline-block;
  max-width: 38rem;
}

.library-page,
.guide-library-page,
.guide-page,
.manual-page,
.account-page,
.checklist-page,
.tool-page {
  padding-block: clamp(var(--space-2xl), 7vw, var(--space-4xl));
}

.page-lead,
.library-masthead,
.guide-masthead {
  padding-block-end: var(--space-2xl);
  border-bottom: 1px solid var(--ink);
}

.compact-lead h1,
.library-masthead h1,
.guide-masthead h1,
.tool-page .page-lead h1 {
  max-width: 17ch;
}

.tool-library {
  margin-block-start: var(--space-2xl);
}

.tool-row {
  display: grid;
  gap: var(--space-lg);
  padding-block: var(--space-2xl);
  border-bottom: 1px solid var(--rule);
}

.tool-row h2 {
  font-size: clamp(1.55rem, 3.5vw, 2.35rem);
}

.tool-row h2 a {
  text-decoration: none;
}

.tool-row p {
  max-width: 48rem;
  margin: var(--space-sm) 0 0;
  color: var(--ink-soft);
}

.tool-row .tool-kind {
  margin: 0 0 var(--space-xs);
  color: var(--signal-dark);
}

.tool-requirement {
  color: var(--ink) !important;
  font-size: 0.9rem;
  font-weight: 720;
}

.tool-row .row-action {
  align-self: end;
  justify-self: start;
}

.resource-support {
  display: flex;
  justify-content: flex-end;
  padding-block: var(--space-2xl);
}

.breadcrumb,
.tool-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  align-items: center;
  margin-block-end: var(--space-xl);
  color: var(--ink-soft);
  font-size: 0.9rem;
}

.breadcrumb a,
.tool-breadcrumb a {
  color: var(--ink-soft);
}

.library-masthead {
  display: grid;
  gap: var(--space-lg);
}

.library-masthead .dek {
  align-self: end;
}

.library-tools {
  padding-block-start: var(--space-2xl);
}

.library-heading {
  margin-block-end: var(--space-xl);
}

.guide-filter {
  display: grid;
  gap: var(--space-md);
  padding: var(--space-lg);
  border: 1px solid var(--rule);
  background: var(--paper-light);
}

.guide-filter > div,
.field-control,
.tool-form label {
  display: grid;
  gap: var(--space-xs);
}

.guide-filter label,
.field-control label,
.tool-form label {
  color: var(--ink-soft);
  font-size: 0.82rem;
  font-weight: 760;
}

input,
select,
textarea {
  width: 100%;
  min-height: 2.75rem;
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--rule);
  border-radius: 0.2rem;
  color: var(--ink);
  background: var(--paper-light);
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--ink);
}

.guide-result-line {
  padding-block: var(--space-xl) var(--space-sm);
}

.guide-result-line p {
  margin: 0;
  color: var(--ink-soft);
}

.guide-library {
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--ink);
  list-style: none;
}

.guide-record > a {
  display: grid;
  gap: var(--space-md);
  padding-block: var(--space-xl);
  border-bottom: 1px solid var(--rule);
  color: var(--ink);
  text-decoration: none;
}

.guide-record > a:hover {
  padding-inline: var(--space-sm);
  background: var(--paper-light);
}

.guide-record-copy > p:first-child {
  margin: 0 0 var(--space-xs);
  color: var(--signal-dark);
  font-size: 0.78rem;
  font-weight: 760;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.guide-record-copy h2 {
  max-width: 30ch;
  font-size: clamp(1.45rem, 3vw, 2.15rem);
}

.guide-record-copy > p:last-child {
  max-width: 52rem;
  margin: var(--space-sm) 0 0;
  color: var(--ink-soft);
}

.guide-record-status {
  align-self: end;
  color: var(--ink-soft);
}

.library-empty {
  padding: var(--space-2xl);
  border: 1px solid var(--rule);
  background: var(--paper-light);
}

.library-empty p {
  margin-block-end: 0;
}

.guide-masthead > div {
  max-width: 58rem;
}

.guide-updated {
  margin: var(--space-lg) 0 0;
  color: var(--ink-soft);
  font-size: 0.9rem;
}

.page-actions {
  margin-block-start: var(--space-lg);
}

.page-actions .share-status {
  flex-basis: 100%;
  color: var(--ink-soft);
  font-size: 0.9rem;
}

.guide-reader,
.policy-layout {
  display: grid;
  gap: var(--space-2xl);
  padding-block: var(--space-3xl);
}

.guide-toc,
.contents {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-md);
  align-content: start;
  padding-block-end: var(--space-lg);
  border-bottom: 1px solid var(--rule);
}

.guide-toc p,
.contents strong {
  flex-basis: 100%;
  margin: 0 0 var(--space-xs);
}

.guide-toc a,
.contents a {
  color: var(--ink-soft);
  font-size: 0.9rem;
}

.guide-prose,
.prose {
  min-width: 0;
  max-width: var(--reading);
}

.guide-prose section,
.prose section {
  scroll-margin-top: var(--space-xl);
}

.guide-prose section + section,
.prose section + section {
  margin-block-start: var(--space-3xl);
}

.guide-prose h2,
.prose h2 {
  margin-block-end: var(--space-lg);
}

.guide-prose h3,
.prose h3 {
  margin-block: var(--space-2xl) var(--space-md);
  scroll-margin-top: var(--space-xl);
}

.guide-prose code,
.prose code {
  padding: 0.08em 0.28em;
  border: 1px solid var(--rule);
  background: var(--paper-light);
  font-size: 0.92em;
  overflow-wrap: anywhere;
}

.guide-prose p,
.guide-prose li,
.prose p,
.prose li {
  max-width: 68ch;
}

.guide-prose ul,
.guide-prose ol,
.prose ul,
.prose ol {
  display: grid;
  gap: var(--space-sm);
  padding-inline-start: 1.35rem;
}

.guide-diagram {
  margin: var(--space-2xl) 0;
  padding: var(--space-lg);
  border: 1px solid var(--rule);
  background: var(--paper-light);
}

.guide-diagram figcaption {
  margin-block-end: var(--space-lg);
  color: var(--signal-dark);
  font-size: 0.82rem;
  font-weight: 780;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.diagram-flow {
  counter-reset: diagram-step;
  gap: 0 !important;
  padding: 0 !important;
  list-style: none;
}

.diagram-flow li {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-xs);
  padding: var(--space-md) 0 var(--space-md) 2.75rem;
  border-inline-start: 2px solid var(--signal);
  counter-increment: diagram-step;
}

.diagram-flow li::before {
  position: absolute;
  top: 0.85rem;
  left: -1rem;
  display: grid;
  width: 1.85rem;
  height: 1.85rem;
  place-items: center;
  border: 2px solid var(--signal);
  border-radius: 50%;
  color: var(--ink-on-signal);
  background: var(--signal-fill);
  content: counter(diagram-step);
  font-size: 0.78rem;
  font-weight: 780;
}

.diagram-flow li:last-child {
  border-inline-start-color: transparent;
}

.diagram-flow li strong,
.diagram-flow li span {
  align-self: start;
}

.diagram-flow li span {
  color: var(--ink-soft);
}

.guide-prose li::marker,
.prose li::marker {
  color: var(--signal-dark);
  font-weight: 760;
}

.guide-prose blockquote {
  margin: var(--space-xl) 0;
  padding: var(--space-lg);
  border: 1px solid var(--rule);
  background: var(--paper-light);
}

.guide-prose blockquote p {
  margin: 0;
}

.source-ledger {
  padding-block-start: var(--space-2xl);
  border-top: 1px solid var(--ink);
}

.source-list {
  margin: 0;
  padding: 0 !important;
  list-style: none;
}

.source-list li {
  display: grid;
  gap: var(--space-2xs);
  padding-block: var(--space-md);
  border-bottom: 1px solid var(--rule);
}

.source-list span {
  color: var(--ink-soft);
  font-size: 0.86rem;
}

.guide-adjacent {
  display: grid;
  padding-block: var(--space-2xl);
  border-top: 1px solid var(--ink);
}

.guide-adjacent a {
  display: grid;
  gap: var(--space-xs);
  padding-block: var(--space-lg);
  border-bottom: 1px solid var(--rule);
  color: var(--ink);
  text-decoration: none;
}

.guide-adjacent a:hover {
  padding-inline: var(--space-sm);
  background: var(--paper-light);
}

.guide-adjacent span {
  color: var(--signal-dark);
  font-size: 0.78rem;
  font-weight: 760;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.account-page {
  display: grid;
  gap: var(--space-2xl);
  align-items: start;
}

.account-intro {
  padding-block-end: var(--space-xl);
}

.account-intro h1 {
  max-width: 10ch;
}

.account-intro .section-link {
  margin-block-start: var(--space-xl);
}

.account-sheet {
  padding: clamp(var(--space-lg), 5vw, var(--space-2xl));
  border: 1px solid var(--rule);
  background: var(--paper-light);
}

.account-sheet > h2 {
  font-size: clamp(1.65rem, 3.8vw, 2.45rem);
}

.account-promise,
.account-privacy,
.field-help,
.auth-dispatch p,
.session-confirmation p {
  color: var(--ink-soft);
}

.auth-form {
  display: grid;
  gap: var(--space-lg);
  margin-block-start: var(--space-xl);
}

.field-help,
.field-error,
.auth-announcement,
.account-privacy {
  margin: var(--space-xs) 0 0;
  font-size: 0.9rem;
  line-height: 1.45;
}

.field-error,
.auth-announcement[data-tone="error"],
.form-error {
  color: var(--signal-dark);
  font-weight: 700;
}

.auth-announcement[data-tone="success"] {
  color: var(--sage);
  font-weight: 700;
}

.auth-secondary-actions,
.account-controls {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  margin-block-start: var(--space-lg);
}

.auth-code {
  max-width: 13rem;
  font-size: 1.45rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.2em;
}

.session-confirmation {
  padding-block-end: var(--space-md);
  border-bottom: 1px solid var(--rule);
}

.session-confirmation h3 {
  overflow-wrap: anywhere;
}

.profile-form {
  padding-block-end: var(--space-lg);
  border-bottom: 1px solid var(--rule);
}

.account-privacy {
  margin-block-start: var(--space-xl);
}

.policy-copy section {
  padding-block-end: var(--space-xl);
  border-bottom: 1px solid var(--rule);
}

.measurement-controls {
  margin-block-start: var(--space-xl);
  padding: var(--space-lg);
  border: 1px solid var(--rule);
  background: var(--paper-light);
}

.measurement-controls h3 {
  margin-block-end: var(--space-sm);
}

.measurement-controls > div {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-block-start: var(--space-lg);
}

.bench {
  display: grid;
  gap: var(--space-2xl);
  margin-block-start: var(--space-2xl);
  padding-block: var(--space-2xl);
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
}

.bench-heading p:last-child {
  max-width: 38rem;
  color: var(--ink-soft);
}

.tool-form {
  display: grid;
  gap: var(--space-lg);
}

.input-with-unit {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.input-with-unit input {
  grid-column: 1 / -1;
  grid-row: 1;
  padding-inline-end: 2.75rem;
}

.input-with-unit span {
  z-index: 1;
  grid-column: 2;
  grid-row: 1;
  padding-inline-end: var(--space-md);
  color: var(--ink-soft);
}

.caption {
  color: var(--ink-soft);
  font-size: 0.88rem;
}

.water-results {
  padding-block: var(--space-2xl);
}

.water-results > h2 {
  margin-block-end: var(--space-xl);
}

.result-grid {
  display: grid;
  border-top: 1px solid var(--ink);
}

.result-grid > div {
  padding-block: var(--space-lg);
  border-bottom: 1px solid var(--rule);
}

.result-grid dt {
  color: var(--ink-soft);
  font-size: 0.82rem;
  font-weight: 720;
}

.result-grid dd {
  margin: var(--space-xs) 0 0;
  font-size: clamp(1.65rem, 4vw, 2.5rem);
  font-weight: 760;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.result-grid .result-with-detail {
  display: grid;
  justify-items: start;
  gap: var(--space-xs);
}

.result-with-detail small {
  color: var(--ink-soft);
  font-size: 0.82rem;
  font-weight: 620;
  line-height: 1.2;
}

/* ================================================================
   PLATE PRIMITIVES
   Field-manual illustration language. See docs/DESIGN-LANGUAGE.md.

   Every .pl-* rule below is a bare single-class selector on purpose.
   CSS descendant selectors do not cross the shadow boundary that
   <use> creates, so `.plate-art .pl-obj` silently fails on every
   instantiated symbol and the symbols render as solid black shapes.
   Do not scope these rules. The pl- prefix is what makes them safe.
   ================================================================ */

.pl-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.pl-frame,
.pl-cut,
.pl-obj,
.pl-sec,
.pl-thin,
.pl-dim,
.pl-hidden,
.pl-phantom,
.pl-center {
  fill: none;
  stroke: var(--ink);
  stroke-linecap: butt;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.pl-frame {
  stroke-width: 1.6;
}

.pl-cut {
  stroke-width: 1.6;
}

.pl-obj {
  stroke-width: 1.15;
}

.pl-sec {
  stroke-width: 0.85;
}

.pl-thin {
  stroke-width: 0.6;
}

.pl-dim {
  stroke-width: 0.65;
}

.pl-hidden {
  stroke-width: 0.7;
  stroke-dasharray: 5 3;
}

.pl-phantom {
  stroke-width: 0.85;
  stroke-dasharray: 15 3.5 3.5 3.5;
}

.pl-center {
  stroke-width: 0.6;
  stroke-dasharray: 13 3 3.5 3;
}

.pl-ink {
  fill: var(--ink);
  stroke: none;
}

.pl-paper {
  fill: var(--paper);
  stroke: none;
}

/* Knocked-out linework: a hairline drawn in paper over a filled cut face,
   used for knurl ticks on a sectioned cap. */
.pl-void {
  fill: none;
  stroke: var(--paper);
  stroke-width: 0.6;
  vector-effect: non-scaling-stroke;
}

/* Tone area: stroked contour whose fill comes from a pattern attribute, so
   the fill is deliberately left unset here. */
.pl-tone {
  stroke: var(--ink);
  stroke-width: 0.85;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.pl-fig,
.pl-blk,
.pl-dimt,
.pl-note,
.pl-val,
.pl-lg,
.pl-xl,
.pl-md {
  font-family: var(--display);
  fill: var(--ink);
}

.pl-fig {
  font-size: 25px;
  letter-spacing: 0.11em;
}

.pl-blk {
  font-size: 23px;
  letter-spacing: 0.09em;
}

.pl-dimt {
  font-size: 22px;
  letter-spacing: 0.045em;
}

.pl-note {
  font-size: 21px;
  letter-spacing: 0.07em;
  fill: var(--ink-soft);
}

.pl-val {
  font-size: 22px;
  letter-spacing: 0.03em;
}

.pl-lg {
  font-size: 34px;
  letter-spacing: 0.01em;
}

.pl-md {
  font-size: 27px;
  letter-spacing: 0.04em;
}

.pl-xl {
  font-size: 50px;
  letter-spacing: 0;
}

/* Knock-out halo for any label that crosses linework or hatch. */
.pl-halo {
  paint-order: stroke;
  stroke: var(--paper);
  stroke-width: 4.5;
  stroke-linejoin: round;
}

/* Rust. At most one mark per plate, and every mark carries a second,
   non-colour cue so nothing is lost in a black and white print. */
.pl-sigt {
  fill: var(--signal-dark);
}

.pl-sigl {
  fill: none;
  stroke: var(--signal-dark);
  stroke-width: 1.6;
  vector-effect: non-scaling-stroke;
}

.pl-sigf {
  fill: var(--signal-dark);
  stroke: none;
}

/* Struck run: counted, not spendable. One ink line through the whole run,
   never a colour, so the mark is the same in print and on screen. */
.pl-struck {
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.6;
  vector-effect: non-scaling-stroke;
}

.pl-ring-warn {
  stroke-dasharray: 4 2.6;
}

.hx {
  fill: none;
  stroke: var(--ink);
}


/* ---------------- plate furniture, outside the drawing ---------------- */

.plates {
  padding-block: var(--space-2xl);
  border-top: 1px solid var(--ink);
}

.plate {
  margin: 0 0 var(--space-3xl);
}

.plate-head {
  display: grid;
  gap: var(--space-sm);
  padding-block-end: var(--space-xs);
  margin-block-end: var(--space-md);
  border-bottom: 1px solid var(--ink);
}

.plate-id {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-md);
  align-items: baseline;
}

.fignum {
  margin: 0;
  font-family: var(--display);
  font-size: 1.1rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.plate-id h3 {
  margin: 0;
  font-size: clamp(1.15rem, 2.4vw, 1.45rem);
  line-height: 1.15;
}

.plate-spec {
  display: grid;
  gap: 0.15rem;
  margin: 0;
  font-size: 0.84rem;
}

.plate-spec > div {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.plate-spec dt {
  font-family: var(--display);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.plate-spec dd {
  margin: 0;
  font-variant-numeric: tabular-nums;
}

/* A plate is a sheet. On a phone the sheet keeps its authored size and the
   reader pans it, because a 576 unit plate scaled to 288 px puts every
   in-figure label under 8 px. */
.plate-sheet {
  overflow-x: auto;
  overscroll-behavior-x: contain;
}

.plate-art {
  display: block;
  width: 100%;
  height: auto;
}

@media (max-width: 34rem) {
  .plate-sheet {
    padding-block-end: var(--space-2xs);
    border-bottom: 1px solid var(--rule);
  }

  .plate-art {
    min-width: 26rem;
    max-width: none;
  }
}

.plate figcaption {
  max-width: var(--reading);
  margin-block-start: var(--space-sm);
  color: var(--ink-soft);
  font-size: 0.95rem;
  line-height: 1.5;
}

.plate figcaption b {
  color: var(--ink);
}

/* Ringed callouts. The numerals in the drawing and the counters here are
   the same object, so the plate stays terse and the sentence stays legible
   at real body size. */
.plate-key {
  max-width: var(--reading);
  padding: 0;
  margin-block-start: var(--space-lg);
  list-style: none;
  counter-reset: plate-key;
}

.plate-key li {
  position: relative;
  padding: var(--space-sm) 0 var(--space-sm) 2.6rem;
  border-top: 1px solid var(--rule);
  font-size: 0.95rem;
  line-height: 1.5;
  counter-increment: plate-key;
}

.plate-key li::before {
  content: counter(plate-key);
  position: absolute;
  top: var(--space-sm);
  left: 0;
  display: grid;
  place-items: center;
  width: 1.7rem;
  height: 1.7rem;
  border: 1.15px solid var(--ink);
  border-radius: 50%;
  font-family: var(--display);
  font-size: 1.05rem;
  line-height: 1;
}

.plate-key li.warn::before {
  border-style: dashed;
  border-color: var(--signal-dark);
  color: var(--signal-dark);
}

/* ---------------- page furniture ---------------- */

/* Plate pages hold a single measured column. A plate is authored for about
   576 CSS px, so the column caps near that rather than filling a desk
   monitor and coarsening every hairline. */
.water-planner-page {
  max-width: 44rem;
  margin-inline: auto;
}

/* The key-spec band and the plate band already rule this page. A third rule
   on the form, or a lead rule directly above the band, reads as a doubled
   line with an empty gutter between the two. */
.water-planner-page .bench {
  border-block: 0;
}

.water-planner-page .page-lead {
  padding-block-end: var(--space-xl);
  border-bottom: 0;
}

/* Headings on this page are set the way every other page on the site sets
   them: Atkinson, sentence case. League Gothic is reserved for the inside
   of a plate and for the drafting furniture around it. */
.water-planner-page h2 {
  font-size: clamp(1.6rem, 3.6vw, 2.35rem);
}

.keyspec {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: var(--space-xl) 0 0;
  border-top: 1.5px solid var(--ink);
  border-bottom: 1.5px solid var(--ink);
}

.keyspec > div {
  padding: var(--space-sm) var(--space-md) var(--space-sm) 0;
  border-bottom: 1px solid var(--rule);
}

.keyspec > div:nth-last-child(-n + 2) {
  border-bottom: 0;
}

.keyspec dt {
  font-family: var(--display);
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.keyspec dd {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(1.4rem, 4vw, 1.75rem);
  line-height: 1.1;
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
}

.keyspec dd small {
  font-size: 0.62em;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
}

.water-notes {
  max-width: var(--reading);
  padding-block: var(--space-2xl);
  border-top: 1px solid var(--rule);
}

.water-notes > p {
  max-width: var(--reading);
  margin-block-start: var(--space-md);
}

.water-notes h2 {
  margin-block-end: var(--space-sm);
}

.ruled-table {
  width: 100%;
  border-collapse: collapse;
  margin-block-start: var(--space-lg);
  font-size: 0.95rem;
}

.ruled-table th,
.ruled-table td {
  padding: var(--space-sm) var(--space-md) var(--space-sm) 0;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--rule);
}

.ruled-table thead th {
  font-size: 0.85rem;
  font-weight: 780;
  letter-spacing: 0.02em;
  color: var(--ink-soft);
  border-bottom: 1px solid var(--ink);
}

.ruled-table tbody th {
  font-weight: 720;
}

.ruled-table td {
  font-variant-numeric: tabular-nums;
}

.derivation tbody th {
  font-weight: 450;
  color: var(--ink-soft);
}

.derivation td {
  text-align: right;
  white-space: nowrap;
}

.jobs-table .write-in {
  min-width: 8rem;
}

.jobs-table .write-in::before {
  content: "";
  display: block;
  height: 1.5rem;
  border-bottom: 1px solid var(--ink);
}

.fact-list {
  display: grid;
  margin: var(--space-lg) 0 0;
  border-top: 1px solid var(--ink);
}

.fact-list > div {
  display: grid;
  gap: var(--space-2xs);
  padding-block: var(--space-sm);
  border-bottom: 1px solid var(--rule);
}

.fact-list dt {
  font-family: var(--display);
  font-size: 0.9rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.fact-list dd {
  margin: 0;
}

.caution {
  padding-block-start: var(--space-sm);
  margin-block-start: var(--space-lg);
  border-top: 2px solid var(--signal-dark);
  font-size: 0.95rem;
}

.caution b:first-child {
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.05rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--signal-dark);
}

.water-formula {
  padding-block-start: var(--space-md);
  margin-block-start: var(--space-lg);
  border-top: 1px solid var(--ink);
  font-size: clamp(1.02rem, 2.2vw, 1.18rem);
  font-variant-numeric: tabular-nums;
}

@media (min-width: 42rem) {
  .plate-head {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
  }

  .plate-spec {
    justify-items: end;
    text-align: right;
  }

  .keyspec {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .keyspec > div:nth-last-child(-n + 3) {
    border-bottom: 0;
  }

  .keyspec > div:nth-child(3n + 2),
  .keyspec > div:nth-child(3n) {
    padding-inline-start: var(--space-md);
  }
}

@media (max-width: 34rem) {
  .ruled-table,
  .ruled-table tbody,
  .ruled-table tr,
  .ruled-table th,
  .ruled-table td {
    display: block;
  }

  .ruled-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  .ruled-table tr {
    padding-block: var(--space-sm);
    border-bottom: 1px solid var(--rule);
  }

  .ruled-table th,
  .ruled-table td {
    padding-block: 0.1rem;
    padding-inline-end: 0;
    border-bottom: 0;
  }

  .ruled-table tbody th {
    font-family: var(--display);
    font-weight: 400;
    font-size: 1.1rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
  }

  .ruled-table td[data-cell]::before {
    content: attr(data-cell) " ";
    font-family: var(--display);
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--ink-soft);
  }

  .derivation td {
    text-align: left;
  }
}

.not-found-page {
  display: grid;
  min-height: 100vh;
  place-items: center;
}

.not-found-page main {
  width: min(calc(100% - 2rem), 42rem);
  padding-block: var(--space-4xl);
}

.not-found-page h1 {
  max-width: 12ch;
}

.not-found-page main > p:not(.eyebrow) {
  max-width: 38rem;
  color: var(--ink-soft);
  font-size: 1.2rem;
}

.site-footer {
  display: grid;
  gap: var(--space-xl);
  align-items: start;
  padding-block: var(--space-2xl);
  border-top: 1px solid var(--ink);
}

.site-footer strong {
  font-size: 1rem;
}

.site-footer p {
  max-width: 34rem;
  margin: var(--space-xs) 0 0;
  color: var(--ink-soft);
  font-size: 0.88rem;
}

.site-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm) var(--space-lg);
}

.site-footer nav a {
  min-height: 2.75rem;
  align-content: center;
  color: var(--ink-soft);
  font-size: 0.9rem;
}

.footer-home {
  text-decoration: none;
}

.footer-note {
  margin: 0 !important;
}

@media (min-width: 42rem) {
  .site-header,
  main,
  .site-footer {
    width: min(calc(100% - 3rem), var(--content));
  }

  .featured-links > a,
  .tool-rows > a {
    grid-template-columns: minmax(12rem, 0.55fr) minmax(0, 1fr);
    align-items: baseline;
  }

  .diagram-flow li {
    grid-template-columns: minmax(7rem, 0.35fr) minmax(0, 1fr);
    gap: var(--space-sm) var(--space-lg);
  }

  .tool-rows small {
    grid-column: 2;
  }

  .topic-directory,
  .result-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .result-grid > div:nth-child(odd) {
    padding-inline-end: var(--space-lg);
  }

  .result-grid > div:nth-child(even) {
    padding-inline-start: var(--space-lg);
    border-left: 1px solid var(--rule);
  }

  .guide-filter {
    grid-template-columns: minmax(0, 1.4fr) minmax(12rem, 0.7fr) auto;
    align-items: end;
  }

  .guide-record > a {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .guide-adjacent {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-lg);
  }

  .tool-row {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
  }

}

@media (min-width: 58rem) {
  .home-hero {
    grid-template-columns: minmax(0, 1.25fr) minmax(18rem, 0.62fr);
    align-items: end;
    gap: clamp(var(--space-3xl), 8vw, var(--space-4xl));
  }

  .section-heading {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
  }

  .section-heading .eyebrow {
    grid-column: 1 / -1;
  }

  .section-heading .section-link {
    grid-column: 2;
    grid-row: 2;
  }

  .topic-directory {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .library-masthead {
    grid-template-columns: minmax(0, 1fr) minmax(20rem, 0.55fr);
    gap: var(--space-3xl);
  }

  .guide-reader,
  .policy-layout {
    grid-template-columns: minmax(12rem, 0.3fr) minmax(0, 1fr);
    gap: clamp(var(--space-2xl), 7vw, var(--space-4xl));
  }

  .guide-toc,
  .contents {
    position: sticky;
    top: var(--space-lg);
    display: grid;
    align-self: start;
    padding-block-end: 0;
    border-bottom: 0;
  }

  .account-page {
    grid-template-columns: minmax(18rem, 0.7fr) minmax(25rem, 1fr);
    gap: clamp(var(--space-3xl), 8vw, var(--space-4xl));
  }

  .bench {
    grid-template-columns: minmax(15rem, 0.55fr) minmax(0, 1fr);
    gap: clamp(var(--space-2xl), 7vw, var(--space-4xl));
  }

  .site-footer {
    grid-template-columns: minmax(15rem, 0.8fr) minmax(0, 1fr) auto;
  }
}

@media (max-width: 54rem) {
  .site-header {
    align-items: flex-start;
  }

  .site-nav {
    order: 3;
    width: 100%;
    margin-inline-start: 0;
    border-top: 1px solid var(--rule);
  }

  .site-nav .nav-secondary,
  .site-nav .nav-support {
    display: inline-flex;
  }

  .header-actions {
    margin-inline-start: auto;
  }
}

@media (max-width: 34rem) {
  .wordmark strong {
    display: none;
  }

  .header-actions .sign-in-link {
    display: none;
  }

  .site-nav {
    justify-content: space-between;
    gap: var(--space-xs);
  }

  .site-nav a {
    font-size: 0.88rem;
  }

  .site-nav .nav-support {
    width: 100%;
  }

  .support-link {
    padding-inline: 0.7rem;
  }
}

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

@media print {
  @page {
    margin: 0.55in;
  }

  body {
    color: #000;
    background: #fff;
    font-size: 10.5pt;
  }

  body::before,
  .skip-link,
  .site-header,
  .site-footer,
  .page-actions,
  .guide-toc,
  .contents,
  .guide-adjacent,
  .resource-support,
  .actions,
  .guide-filter {
    display: none !important;
  }

  main,
  .guide-reader,
  .policy-layout,
  .guide-prose,
  .prose {
    display: block;
    width: 100%;
    max-width: none;
    padding: 0;
    margin: 0;
  }

  h1 {
    font-size: 34pt;
  }

  h2 {
    font-size: 20pt;
  }

  a {
    color: #000;
    text-decoration: underline;
  }

  .guide-prose section,
  .prose section,
  .source-list li,
  .plate,
  .plate-key li,
  .ruled-table tr,
  .fact-list > div,
  .caution {
    break-inside: avoid;
  }

  .plate,
  .plate-art,
  .keyspec {
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }

  /* Black and white is the reference rendering for a plate. Value and hatch
     carry every distinction, so the tokens collapse to ink on paper and the
     rust marks fall back to their dash and stripe cues. */
  .water-planner-page {
    --ink: #000;
    --ink-soft: #000;
    --paper: #fff;
    --paper-light: #fff;
    --signal-dark: #000;
    --rule: #999;
  }

  /* Hold the sheet near its authored size so in-figure type lands close to
     the 10.5pt body rather than swelling with the paper. */
  .plate-art {
    width: 6.2in;
    max-width: 6.2in;
  }

  .plate-sheet {
    overflow: visible;
    border: 0;
  }

  /* Sheet one is the field card. The form, its button and the breadcrumb are
     screen furniture and never reach paper. The selector is scoped so it
     outranks the screen rule that keeps the card hidden. */
  .water-planner-page .field-card {
    display: block;
    break-after: page;
  }

  .field-card .card-grid > div,
  .field-card .card-note {
    break-inside: avoid;
  }

  /* The card already carries these six readings on sheet one. */
  .water-planner-page .bench,
  .water-planner-page .keyspec,
  .water-planner-page .page-actions,
  .water-planner-page .breadcrumb,
  .water-planner-page noscript {
    display: none !important;
  }

  /* A scoped print: the button that offers the card puts the card on paper
     and nothing else, so one click is one sheet rather than ten. The root
     carries the scope only while the print dialogue is open. */
  :root[data-print-scope="field-card"] main > * {
    display: none !important;
  }

  :root[data-print-scope="field-card"] .water-planner-page .field-card {
    display: block !important;
    break-after: auto;
  }
}

/* ---------------- printed field card ---------------- */

.field-card {
  display: none;
}

.field-card h2 {
  font-size: 1.6rem;
}

.field-card .card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-block-start: var(--space-md);
  border-top: 1.5px solid var(--ink);
  border-bottom: 1.5px solid var(--ink);
}

.field-card .card-grid > div {
  padding: var(--space-sm) var(--space-md) var(--space-sm) 0;
}

.field-card .card-grid dt {
  font-family: var(--display);
  font-size: 0.85rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.field-card .card-grid dd {
  margin: 0;
  font-family: var(--display);
  font-size: 1.5rem;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.field-card .card-note {
  margin-block-start: var(--space-md);
  font-size: 0.9rem;
}

/* An over-payload plan is a trip blocker, so the reading changes ink. */
.is-over dd,
.is-over .over-mark {
  color: var(--signal-dark);
}

.over-mark {
  margin: var(--space-2xs) 0 0;
  font-size: 0.75rem;
  font-weight: 780;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}