/* The site chrome every lab page shares with cliffordbernard.com: the base element rules, the skip link, the site
   header and the emphasis footer (packages/site-chrome/index.mjs renders the markup). Every value is a token of the
   pinned tokens.css (design/cliffordbernard/, loaded before this file); there is no colour literal here, and no dark
   scheme, because the site has none. A page's build prepends this file to its own stylesheet. */

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

html {
  background: var(--surface-page);
  color: var(--text-primary);
  font-family: var(--font-body);
  text-rendering: optimizeLegibility;
}
body {
  margin: 0;
  min-width: 20rem;
  background: var(--surface-page);
  font-size: var(--type-body);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, p, ol, ul { margin-block-start: 0; }
a { color: inherit; text-decoration-thickness: 0.08em; text-underline-offset: 0.22em; }
a:focus-visible, [tabindex]:focus-visible {
  border-radius: 0.125rem;
  outline: 0.1875rem solid var(--focus-ring);
  outline-offset: 0.25rem;
}
main:focus { outline: none; }
code { font-family: var(--font-mono); }
::selection { background: var(--accent); color: var(--text-on-emphasis); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: fixed; z-index: 100; inset-block-start: var(--space-3); inset-inline-start: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: var(--surface-emphasis); color: var(--text-on-emphasis); font-weight: 700;
  transform: translateY(-200%);
  transition: transform var(--motion-fast) var(--ease-standard);
}
.skip-link:focus { transform: translateY(0); }

/* header: cliffordbernard.com's own header. Seven destinations on a desktop; on a phone a fixed dock keeps four and
   the More sheet (a declarative popover, no script) holds the secondary three. */
.site-header { position: relative; z-index: 10; border-block-end: var(--rule) solid var(--border-subtle); background: var(--surface-page); }
.site-header__inner {
  display: flex; width: min(100%, calc(var(--content-wide) + 2 * var(--gutter))); min-height: 5rem;
  margin-inline: auto; padding-inline: var(--gutter);
  align-items: center; justify-content: space-between; gap: var(--space-5);
}
.site-brand {
  display: inline-flex; min-height: 2.75rem; align-items: center; flex: none;
  font-family: var(--font-display); font-size: 1rem; font-weight: 700; letter-spacing: -0.025em; text-decoration: none;
}
.site-navigation {
  display: flex; margin: 0; padding: 0; align-items: center;
  gap: clamp(var(--space-3), 2.5vw, var(--space-5)); list-style: none;
}
.site-navigation__link {
  display: inline-block; padding-block: var(--space-2);
  color: var(--text-muted); font-size: 0.875rem; font-weight: 600; text-decoration: none;
  transition: color var(--motion-fast) var(--ease-standard), box-shadow var(--motion-fast) var(--ease-standard);
}
.site-navigation__link:hover, .site-navigation__link.is-active { color: var(--text-primary); }
.site-navigation__link.is-active { box-shadow: inset 0 calc(-1 * var(--rule)) 0 var(--accent); }
.site-navigation__label--mobile, .site-navigation__more { display: none; }
.site-navigation__more > button { width: 100%; border: 0; background: transparent; font-family: inherit; font-weight: 600; cursor: pointer; }
.site-navigation__sheet {
  inset: auto var(--space-2) calc(var(--mobile-nav-clearance) - var(--space-2));
  width: min(24rem, calc(100vw - 2 * var(--space-2)));
  max-height: calc(100svh - var(--mobile-nav-clearance) - var(--space-5));
  margin: 0 0 0 auto; padding: var(--space-4);
  border: var(--rule) solid var(--border-on-emphasis);
  background: var(--surface-emphasis); color: var(--text-on-emphasis);
  --focus-ring: var(--violet-400);
}
.site-navigation__sheet p { margin-block-end: var(--space-2); color: var(--text-muted-on-emphasis); font-size: 0.875rem; }
.site-navigation__sheet a, .site-navigation__sheet button {
  display: flex; min-height: 2.75rem; padding: var(--space-2); align-items: center; font: inherit; color: inherit;
}
.site-navigation__sheet button {
  margin-block-start: var(--space-3); border: var(--rule) solid var(--border-on-emphasis); background: transparent; cursor: pointer;
}

@media (max-width: 48rem) {
  :root { --mobile-nav-clearance: calc(5.75rem + env(safe-area-inset-bottom, 0px)); }
  html { scroll-padding-block: var(--space-4) var(--mobile-nav-clearance); }
  .site-header__inner { min-height: 4rem; }
  .site-header nav {
    position: fixed; z-index: 90; width: auto; max-width: calc(100vw - 2 * var(--space-2));
    border: var(--rule) solid var(--border-subtle); border-radius: 999px; background: var(--surface-emphasis);
    inset-block-end: calc(var(--space-2) + env(safe-area-inset-bottom, 0px)); inset-inline: var(--space-2);
    --focus-ring: var(--violet-400);
  }
  .site-navigation {
    display: grid; width: 100%; padding: var(--space-1);
    grid-template-columns: 1fr 1.65fr 0.8fr 1.1fr 0.8fr; gap: 0;
  }
  .site-navigation li { min-width: 0; }
  .site-navigation__link {
    display: flex; min-height: 3.5rem; padding-inline: 0.25rem; border-radius: 999px;
    align-items: center; justify-content: center;
    color: var(--text-muted-on-emphasis); font-size: 0.875rem; line-height: 1; text-align: center; white-space: nowrap;
    scroll-margin-block: var(--space-3);
  }
  .site-navigation__link:hover { color: var(--text-on-emphasis); }
  .site-navigation__link.is-active { background: var(--surface-page); color: var(--text-primary); box-shadow: none; }
  .site-navigation__label--desktop, .site-navigation__secondary { display: none; }
  .site-navigation__label--mobile, .site-navigation__more { display: block; }
}

/* footer: the site's emphasis surface and closing invitation */
.site-footer {
  border-block-start: var(--rule) solid var(--border-on-emphasis);
  background: var(--surface-emphasis); color: var(--text-on-emphasis);
}
.site-footer a:focus-visible { outline-color: var(--accent-on-emphasis); }
.site-footer__inner {
  width: min(100%, calc(var(--content-wide) + 2 * var(--gutter)));
  margin-inline: auto; padding: var(--space-8) var(--gutter) var(--space-5);
}
.site-footer__label {
  margin-block-end: var(--space-4);
  color: var(--text-muted-on-emphasis); font-family: var(--font-mono); font-size: var(--type-caption); font-weight: 700;
  letter-spacing: var(--tracking-caption); text-transform: uppercase;
}
.site-footer__title {
  max-width: 18ch; margin-block-end: var(--space-5);
  font-family: var(--font-display); font-size: clamp(2rem, 4vw, 4.25rem); font-weight: 650;
  letter-spacing: var(--tracking-display); line-height: var(--leading-headline);
}
.site-footer__contact {
  display: inline-flex; min-height: 2.75rem; align-items: center; gap: var(--space-2);
  color: var(--text-on-emphasis); font-weight: 700; text-decoration-color: var(--accent-on-emphasis);
}
.site-footer__secondary {
  display: flex; margin-block-start: var(--space-8); padding-block-start: var(--space-4);
  border-block-start: var(--rule) solid var(--border-on-emphasis);
  align-items: center; justify-content: space-between; gap: var(--space-5);
}
.site-footer__secondary > nav { flex: 1 1 auto; min-width: 0; }
.site-footer__navigation { display: flex; flex-wrap: wrap; margin: 0; padding: 0; gap: 0 var(--space-4); list-style: none; }
.site-footer__navigation a {
  display: inline-flex; min-height: 2.75rem; align-items: center;
  color: var(--text-muted-on-emphasis); font-size: 0.8125rem;
}
.site-footer__meta { display: grid; justify-items: end; gap: var(--space-2); text-align: end; }
.site-footer__coordinates {
  display: flex; margin: 0; justify-content: flex-end; flex-wrap: wrap; gap: 0 var(--space-4); font-style: normal;
}
.site-footer__utility-link {
  display: inline-flex; min-height: 2.75rem; align-items: center; gap: var(--space-2);
  color: var(--text-on-emphasis); font-size: 0.8125rem; font-weight: 700; text-decoration-color: var(--accent-on-emphasis);
}
.site-footer__note { margin: 0; color: var(--text-muted-on-emphasis); font-size: 0.8125rem; }
.site-footer__copyright { margin: 0; color: var(--text-muted-on-emphasis); font-family: var(--font-mono); font-size: var(--type-caption); }

@media (max-width: 48rem) {
  /* after the footer's own padding, so the phone dock never covers the last lines */
  .site-footer__inner { padding-block-end: calc(var(--mobile-nav-clearance) + var(--space-5)); }
  .site-footer__secondary { flex-direction: column; align-items: flex-start; }
  .site-footer__meta { justify-items: start; text-align: start; }
  .site-footer__coordinates { justify-content: flex-start; }
}

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

/* Drawings and dots shared by the lab pages. Line art in the engraved, ink-on-paper manner of cliffordbernard.com: one
   stroke weight, a violet accent for what the drawing is about, short hatching for shade. The dots are the lab's one
   encoding of who handles a claim, told apart by shape as well as colour: a filled violet dot (no person), a soft
   grey dot with a thin edge (a person, briefly), a filled navy dot (a person, in full). */
.art { display: block; width: 100%; height: auto; fill: none; stroke: var(--text-primary); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.art .art__fill { fill: var(--surface-quiet); }
.art .art__paper { fill: var(--surface-page); }
.art .art__accent { stroke: var(--accent); }
.art .art__hatch { stroke: var(--text-muted); stroke-width: 1; }
.dots--none { fill: var(--accent); stroke: none; }
.dots--brief { fill: var(--paper-300); stroke: var(--text-muted); stroke-width: 1; }
.dots--full { fill: var(--surface-emphasis); stroke: none; }
/* a settlement that was wrong: an open violet ring, struck through, so it never reads as settled work */
.dots--wrong { fill: var(--surface-page); stroke: var(--accent); stroke-width: 1.2; }
.art .dots__strike { stroke: var(--accent); stroke-width: 1.2; }
/* the drawings' small labels: text, not strokes, in muted ink (5.04:1 on the page); the model's in violet, a person's in night */
.art .art__label { fill: var(--text-muted); stroke: none; font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.08em; }
.art .art__label--model { fill: var(--accent); }
.art .art__label--person { fill: var(--surface-emphasis); }
/* where a decision goes, as a hollow marker: a fixed rule (muted), the model (violet), a person (night) */
.art .mark { fill: var(--surface-page); stroke-width: 1.8; }
.art .mark--code { stroke: var(--text-muted); }
.art .mark--model { stroke: var(--accent); }
.art .mark--person { stroke: var(--surface-emphasis); }

/* The lab landing page in cliffordbernard.com's design (the owner's chosen layout, 30 September): a two-column hero,
   three lab cards in one ruled row and a method line, above the site's emphasis footer and its call to action. The header,
   footer and base rules are the shared chrome (packages/site-chrome/chrome.css), which the build prepends. Every value is
   a token of the pinned tokens.css (design/cliffordbernard/, loaded before this file); there is no colour literal here,
   and no dark scheme, because the site has none. Square, ruled and shadowless, like the site. */

/* sections */
.section-shell {
  width: min(100%, calc(var(--content-wide) + 2 * var(--gutter)));
  margin-inline: auto;
  padding: var(--space-section) var(--gutter);
}
.section-shell--compact { padding-block: 0 clamp(3rem, 7vw, 6rem); }

/* the hero: the statement on the left, the editorial image on the right (the statement alone until there is one);
   stacked under 64rem */
.lab-hero { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; gap: var(--space-8); padding-block-end: clamp(3rem, 6vw, 5rem); }
.lab-hero__text { display: grid; gap: var(--space-5); }
.lab-hero__eyebrow {
  margin: 0; color: var(--accent); font-family: var(--font-mono); font-size: var(--type-caption); font-weight: 700;
  letter-spacing: var(--tracking-caption); text-transform: uppercase;
}
.lab-hero h1 {
  max-width: 18ch; margin: 0;
  font-family: var(--font-display); font-size: var(--type-headline); font-weight: 650;
  letter-spacing: var(--tracking-display); line-height: var(--leading-headline);
}
.lab-hero__lede { max-width: var(--content-reading); margin: 0; color: var(--text-secondary); font-size: clamp(1.0625rem, 1.4vw, 1.25rem); }
/* the three gains, ruled like the site's lists: a label column, then the words */
.lab-hero__gains { display: grid; gap: var(--space-2); margin: var(--space-2) 0 0; padding-block-start: var(--space-4); border-block-start: var(--rule) solid var(--border-subtle); }
.lab-hero__gains > div { display: grid; grid-template-columns: 10rem minmax(0, 1fr); gap: var(--space-3); }
.lab-hero__gains dt { font-weight: 700; }
.lab-hero__gains dd { margin: 0; color: var(--text-secondary); }
.lab-hero--statement { grid-template-columns: minmax(0, 1fr); }
/* the editorial image, the main site's maquette series: one tall 2:3 picture beside the statement */
.lab-hero__image { justify-self: end; width: 100%; max-width: 28rem; margin: 0; }
.lab-hero__image img { display: block; width: 100%; height: auto; aspect-ratio: 2 / 3; object-fit: cover; }
@media (max-width: 64rem) {
  .lab-hero { grid-template-columns: minmax(0, 1fr); }
  .lab-hero__image { justify-self: start; max-width: 24rem; }
}
/* on a phone the maquette is cropped to a 4:3 frame on the model, so the labs are not a screen further down */
@media (max-width: 48rem) {
  .lab-hero__image { max-width: none; }
  .lab-hero__image img { aspect-ratio: 4 / 3; object-fit: cover; object-position: center 62%; }
}
@media (max-width: 30rem) {
  .lab-hero__gains > div { grid-template-columns: minmax(0, 1fr); gap: 0; }
}

/* the labs */
.lab-section-title {
  margin: 0 0 var(--space-5);
  font-family: var(--font-display); font-size: var(--type-subhead); font-weight: 650; letter-spacing: -0.035em; line-height: 1.1;
}
/* three cards in one ruled row. Each card has the same seven rows (number and stage, drawing, key, name, result, limit,
   link), shared with the row as a subgrid, so the names, result lines, limit lines and links line up across the cards
   whatever each drawing's key or line needs; the drawings share one band, as tall as their common shape. Under 64rem
   the cards stack. */
.lab-cards {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto auto auto auto auto 1fr auto;
  margin: 0; padding: 0; list-style: none;
  border-block-start: var(--rule) solid var(--border-subtle);
}
.lab-card {
  display: grid; grid-row: span 7; grid-template-rows: subgrid; grid-template-columns: minmax(0, 1fr); row-gap: var(--space-3);
  padding: var(--space-5) var(--space-5) var(--space-6);
  border-inline-end: var(--rule) solid var(--border-subtle);
}
.lab-card:first-child { padding-inline-start: 0; }
.lab-card:last-child { padding-inline-end: 0; border-inline-end: 0; }
.lab-card > * { margin: 0; }
.lab-card__head {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3);
  font-family: var(--font-mono); font-size: var(--type-caption); letter-spacing: var(--tracking-caption);
}
.lab-card__n { color: var(--accent); }
.lab-card__stage { color: var(--text-secondary); text-transform: uppercase; }
/* each drawing takes its card's width and its own height: a fixed frame shape here would let the tallest card's row
   height widen a narrower card's drawing past its padding, since the cards share their rows */
.lab-card__art > svg { display: block; width: 100%; height: auto; }
.lab-card__key { color: var(--text-muted); font-size: 0.8125rem; line-height: 1.5; }
.lab-card h3 { font-family: var(--font-display); font-size: 1.5rem; font-weight: 650; letter-spacing: -0.03em; line-height: 1.15; }
.lab-card__result { color: var(--text-primary); }
.lab-card__limit { color: var(--text-muted); font-size: 0.9375rem; }
.lab-card__pending {
  align-self: end; color: var(--text-muted); font-family: var(--font-mono); font-size: var(--type-caption);
  letter-spacing: var(--tracking-caption); text-transform: uppercase;
}
.text-link {
  display: inline-flex; width: fit-content; min-height: 2.75rem; align-self: end; align-items: center; gap: var(--space-2);
  color: var(--text-primary); font-weight: 700; text-decoration-color: var(--accent);
  transition: gap var(--motion-fast) var(--ease-standard);
}
.text-link:hover { gap: var(--space-3); }
@media (max-width: 64rem) {
  .lab-cards { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .lab-card { grid-row: auto; grid-template-rows: none; padding-inline: 0; border-inline-end: 0; border-block-end: var(--rule) solid var(--border-subtle); }
  .lab-card:last-child { border-block-end: 0; }
  .lab-card__art { max-width: 30rem; }
}

/* the method line: one ruled sentence under the cards */
.lab-method { margin: var(--space-6) 0 0; padding-block-start: var(--space-4); border-block-start: var(--rule) solid var(--border-subtle); color: var(--text-secondary); }

/* the drawings' page-only marks. The claims hundred in the claims Summary's shapes and colours (its .ceiling__dot), so the
   card and the page read alike: violet paid, a violet ring asked, ink to a person, a small grey dot by rule */
.dots--paid { fill: var(--accent); stroke: none; }
.dots--asked { fill: var(--surface-page); stroke: var(--accent); stroke-width: 1.4; }
.dots--doubt { fill: var(--text-primary); stroke: none; }
.dots--rule { fill: var(--text-muted); stroke: none; }
/* the freight drawing: a marker is filled once its part has been measured (the narrow model on the status step, so
   far), in its own colour; the rest stay hollow */
.art .mark.mark--measured { fill: var(--text-muted); }
.art .mark.mark--model.mark--measured { fill: var(--accent); }

/* the not-found page's links: one per line, under the lede */
.lab-not-found__links { list-style: none; margin: var(--space-5) 0 0; padding: 0; display: grid; gap: var(--space-3); }