/* Site-specific styles. Calm UI Profile A (Document) is in tokens.css and comes first.
   HARD RULE: build only from tokens. A literal colour, size, or spacing outside the token
   set is a defect and verify.py catches it. The three documented deviations from the house
   system are in the design doc, section 8.1. */

/* ---------- shell ---------- */

.vid__el--square { aspect-ratio: 1 / 1; }

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--bg-raised); color: var(--text);
  padding: var(--space-3) var(--space-4); border-radius: var(--radius-s); z-index: 10;
}
.skip:focus { left: var(--space-4); top: var(--space-4); }

.nav {
  position: sticky; top: 0; z-index: 5;
  background: var(--bg);
  border-bottom: 1px solid var(--hairline);
}
.nav__in {
  max-width: var(--content-max); margin: 0 auto;
  padding: var(--space-4) max(24px, 6%);
  display: flex; align-items: baseline; gap: var(--space-5); flex-wrap: wrap;
}
.nav__me { font-size: 17px; line-height: 25px; font-weight: 600; color: var(--text); text-decoration: none; }
.nav__links { margin-left: auto; display: flex; gap: var(--space-5); flex-wrap: wrap; }
.nav a { color: var(--text-2); text-decoration: none; font-size: 14px; line-height: 20px; font-weight: 600;
         transition: color var(--t-color); }
.nav a:hover, .nav a:focus-visible { color: var(--text); }
.nav a[aria-current="page"] { color: var(--text); }

.foot { border-top: 1px solid var(--hairline); padding: var(--space-8) 0 var(--space-9); }
.foot__row { display: flex; gap: var(--space-5); flex-wrap: wrap; align-items: baseline; }
.foot a { color: var(--text-2); }
.lanes { display: flex; gap: var(--space-3); flex-wrap: wrap; align-items: baseline;
         margin-bottom: var(--space-5); }
.lanes__label { font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .06em;
                text-transform: uppercase; color: var(--text-3); }
.lanes a { font-size: 14px; line-height: 20px; }
.lanes a[aria-current="true"] { color: var(--text); font-weight: 600; }

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

.hero { padding: var(--space-9) 0 var(--space-8); }
.hero__grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
              gap: var(--space-7); align-items: center; }
.hero__lede { color: var(--text-2); max-width: 42rem; margin-top: var(--space-5); }
.hero__actions { margin-top: var(--space-6); display: flex; gap: var(--space-5);
                 align-items: center; flex-wrap: wrap; }
.motif { width: 100%; height: auto; display: block; }
.portrait { width: 100%; height: auto; border-radius: var(--radius-xl); display: block; }

/* Centred hero — deviation D10, front page only. The house rule is left-aligned running
   text, and it still holds for every paragraph on the site. A marketing-scale front page
   is the one place a centred display line and lede read as composed rather than sloppy,
   and it is what puts the picture directly under the sentence it illustrates. The lede
   keeps its 42rem measure; only its box is centred. */
.hero--center { padding-bottom: var(--space-7); text-align: center; }
.hero--center .hero__lede,
.hero--center .eyebrow { margin-left: auto; margin-right: auto; }
.hero--center .hero__actions { justify-content: center; }
/* The hero picture runs wider than the content column. 1260px is the width Calm UI
   reserves for marketing-scale pages, and this is the one element on the site that is
   marketing-scale; everything below it stays on the 1080 measure. */
.hero__art { margin-top: var(--space-7); max-width: 1260px; }

/* .display--xl itself is now house CSS (tokens.css, Profile A-M) — deviation D11 is the
   DECISION to use it on this hero, not a local size. Only the centring is site-specific. */
.hero--center .display--xl { margin-left: auto; margin-right: auto; }

.btn {
  display: inline-block; background: var(--accent); color: var(--on-accent);
  padding: var(--space-3) var(--space-5); border-radius: 980px; text-decoration: none;
  font-size: 14px; line-height: 20px; font-weight: 600;
  transition: opacity var(--t-color);
}
.btn:hover, .btn:focus-visible { opacity: .85; }
/* ONE filled accent button per view (calm-ui): the second action is a quiet outline. */
.btn--quiet { background: none; color: var(--text);
              box-shadow: inset 0 0 0 1px var(--hairline); }
.btn--quiet:hover, .btn--quiet:focus-visible { opacity: 1; background: var(--bg-alt); }
.sec--alt .btn--quiet:hover { background: var(--bg); }

/* ---------- fleet diagram (generated inline SVG — src/fleetdiagram.py) ---------- */

/* The map scrolls sideways rather than shrinking. A 19-node diagram squeezed into 342px
   renders its labels at about 8px, which is a picture of a status map rather than a status
   map. min-width holds the type at a readable size and the container takes the overflow --
   contained, so the document itself never scrolls horizontally. */
.fd { overflow-x: auto; margin-bottom: var(--space-4); }
.fd__svg { width: 100%; min-width: 880px; height: auto; display: block; }
.fd__hint { display: none; }
@media (max-width: 960px) { .fd__hint { display: block; margin-bottom: var(--space-5); } }
.fd__chip { fill: var(--bg-alt); }
.sec--alt .fd__chip { fill: var(--bg); }
.fd__name { font-family: var(--font-sans); font-size: 12.5px; font-weight: 600;
            fill: var(--text); }
.fd__layer { font-family: var(--font-sans); font-size: 11px; font-weight: 600;
             letter-spacing: .06em; fill: var(--text-3); }
.fd__loop { font-family: var(--font-sans); font-size: 10.5px; fill: var(--text-3); }
.fd__status { font-family: var(--font-sans); font-size: 10.5px; font-weight: 600;
              letter-spacing: .04em; }
.fd__rule { stroke: var(--hairline); stroke-width: 1; }
.fd__dot--ok, .fd__status--ok         { fill: var(--ok); }
.fd__dot--warn, .fd__status--warn     { fill: var(--warn); }
.fd__dot--accent, .fd__status--accent { fill: var(--accent); }
.fd__status--muted                    { fill: var(--text-3); }
/* planned gets a hollow dot, not a coloured one: an absent capability is not a warning. */
.fd__dot--muted { fill: none; stroke: var(--text-3); stroke-width: 1; }
.inline-links { display: flex; gap: var(--space-4); flex-wrap: wrap; }
.inline-links a { font-size: 14px; line-height: 20px; font-weight: 600; }

/* ---------- section furniture ---------- */

.sec__head { margin-bottom: var(--space-7); }
.sec__head .subhead, .sec__head p { color: var(--text-2); max-width: 42rem; margin-top: var(--space-3); }
.sec__more { margin-top: var(--space-6); }

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


.card {
  background: var(--bg-alt); border-radius: var(--radius-l);
  padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3);
}
.sec--alt .card { background: var(--bg); }

.card__top { display: flex; gap: var(--space-4); align-items: baseline;
             justify-content: space-between; }
.card__name { font-size: 21px; line-height: 25px; font-weight: 600; letter-spacing: .011em; }
.card__meta { font-size: 12px; line-height: 16px; color: var(--text-2); }
.card__what { color: var(--text); max-width: 42rem; }
.card__role { font-size: 14px; line-height: 20px; color: var(--text-2); }
.card__ev { border-top: 1px solid var(--hairline); padding-top: var(--space-3);
            display: flex; gap: var(--space-4); flex-wrap: wrap; }
.card__ev a { font-size: 12px; line-height: 16px; font-weight: 600; }


/* ---------- status badge (ink derives from the status text) ---------- */

.badge { font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .06em;
         text-transform: uppercase; white-space: nowrap;
         display: inline-flex; align-items: center; gap: var(--space-2); }
.badge::before { content: ""; width: 8px; height: 8px; border-radius: 50%;
                 background: currentColor; flex: none; }
.badge--ok     { color: var(--ok); }
.badge--warn   { color: var(--warn); }
.badge--accent { color: var(--accent); }
.badge--muted  { color: var(--text-3); }
.badge--muted::before { background: transparent; box-shadow: inset 0 0 0 1px currentColor; }


/* ---------- fleet ---------- */

.loops { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-7); }
.loop__name { margin-bottom: var(--space-4); }
.node { padding: var(--space-4) 0; border-top: 1px solid var(--hairline); }
.node__top { display: flex; gap: var(--space-4); justify-content: space-between;
             align-items: baseline; }
.node__name { font-size: 17px; line-height: 25px; font-weight: 600; }
.node__vision { color: var(--text-2); font-size: 14px; line-height: 20px; margin-top: var(--space-2);
                max-width: 42rem; }
.node__date { font-size: 12px; line-height: 16px; color: var(--text-3); margin-top: var(--space-2); }
.node__sub { font-size: 12px; line-height: 16px; color: var(--text-3); margin-top: var(--space-2); }

.fleetbar { display: flex; gap: var(--space-5); flex-wrap: wrap; align-items: baseline; }
.fleetbar .badge { font-size: 14px; line-height: 20px; letter-spacing: 0; text-transform: none; }

/* ---------- lists ---------- */

.pubs { display: flex; flex-direction: column; }
.pub { padding: var(--space-4) 0; border-top: 1px solid var(--hairline); }
.pub__t { font-weight: 600; }
.pub__a { color: var(--text-2); font-size: 14px; line-height: 20px; margin-top: var(--space-2); }
.pub__v { color: var(--text-3); font-size: 14px; line-height: 20px; margin-top: var(--space-1); }
.pub__c { color: var(--text-3); font-size: 12px; line-height: 16px; margin-top: var(--space-2);
          font-variant-numeric: tabular-nums; }
.pub em { font-style: normal; color: var(--text); font-weight: 600; }

.rows { display: flex; flex-direction: column; }
.row { padding: var(--space-4) 0; border-top: 1px solid var(--hairline);
       display: flex; gap: var(--space-5); justify-content: space-between; align-items: baseline; }
.row__main { min-width: 0; }
.row__t { font-weight: 600; }
.row__s { color: var(--text-2); font-size: 14px; line-height: 20px; margin-top: var(--space-2); }
.row__side { color: var(--text-3); font-size: 12px; line-height: 16px; white-space: nowrap;
             font-variant-numeric: tabular-nums; }

/* ---------- demo clips ----------
   The fourth imagery shape now lives in tokens.css (`.vids` / `.vid` / `.vid__el`),
   upstreamed to the calm-ui skill on 2026-08-17 along with the light-pin doctrine. It is
   not repeated here: a shared shape declared in both files is the fork this site's
   CLAUDE.md forbids. The two rules that keep it working are outside CSS anyway — a
   `poster` on every clip and a size cap under Cloudflare's 25 MiB — and both are gated in
   video.py and verify.py. */

/* ---------- prose (essays, colophon, bio) ---------- */

.prose { max-width: 42rem; }
.prose p + p { margin-top: var(--space-5); }
.prose h2 { font-size: 28px; line-height: 32px; font-weight: 600; margin: var(--space-8) 0 var(--space-4); }
.prose h3 { font-size: 21px; line-height: 25px; font-weight: 600; margin: var(--space-6) 0 var(--space-3); }
.prose ul { margin: var(--space-4) 0 0 var(--space-5); }
.prose li + li { margin-top: var(--space-2); }

.note { color: var(--text-2); max-width: 42rem; }
.note p + p { margin-top: var(--space-5); }

/* ---------- entrance reveal (document only, <=30px rise, 150ms stagger) ---------- */

@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(24px); animation: rise var(--t-reveal) forwards; }
  @keyframes rise { to { opacity: 1; transform: none; } }
}

/* ---------- utilities ----------
   These exist so no element carries a style="" attribute. That is not tidiness for its
   own sake: an inline style attribute forces 'unsafe-inline' into the Content-Security-
   Policy, which is most of what a CSP is for on a site that loads nothing external. */

.mt-5 { margin-top: var(--space-5); }
/* .mt-7 was used by the recognition block before it existed as a rule, so the block sat
   flush against the citation note above it. A utility class that is referenced but never
   declared fails silently -- nothing errors, the spacing is just wrong. */
.mt-7 { margin-top: var(--space-7); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-7 { margin-bottom: var(--space-7); }
.pt-4 { padding-top: var(--space-4); }
.delay-1 { animation-delay: 150ms; }
.motif { color: var(--text-3); }

/* ---------- compact merged Alpaca-Draw / Draw-to-Life page ---------- */

.draw-merged .hero__grid { gap: var(--space-6); }
.draw-merged .hero__grid > .fig { max-width: var(--content-max); margin-inline: auto; }
.draw-merged .hero__grid .fig__img {
  max-height: calc(var(--space-9) * 4); object-fit: contain;
}
.draw-merged .draw-example-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.draw-merged .draw-example-cards .card { min-width: 0; padding: var(--space-4); }
.draw-merged .draw-example-cards .grid--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2);
}
.draw-merged .draw-example-cards .fig__img {
  max-height: calc(var(--space-9) * 2.5); object-fit: contain;
}
.draw-evolution__cases { align-items: stretch; }
.draw-evolution__case { min-width: 0; }
.draw-evolution__stages {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2); align-items: start;
}
.draw-evolution__stage { min-width: 0; }
.draw-evolution__stage .eyebrow {
  min-height: calc(var(--space-4) * 3); margin-bottom: var(--space-2);
}
.draw-evolution__stage .fig { margin: 0; }
.draw-evolution__stage .fig__img {
  aspect-ratio: 1 / 1; object-fit: contain;
}
.draw-life-table { min-width: 36rem; table-layout: fixed; }
.draw-life-table th, .draw-life-table td { width: 33.333%; vertical-align: top; }
.draw-life-table caption { padding-bottom: var(--space-3); text-align: left; }
.draw-life-table td, .draw-life-row { padding-top: var(--space-3); }
.draw-life-row {
  color: var(--text); font-size: inherit; line-height: inherit; font-weight: 400;
  letter-spacing: inherit; text-transform: none;
}
.draw-life-row .eyebrow { margin-bottom: var(--space-2); }
.draw-life-row .caption { margin-top: var(--space-2); }
.draw-life-table .fig__img, .draw-life-gif {
  aspect-ratio: 1 / 1; max-height: calc(var(--space-8) * 2.5); object-fit: contain;
}

/* ---------- print (D8: /cv prints to a clean PDF with Ctrl-P) ---------- */

@media print {
  :root { --bg: #ffffff; --bg-alt: #ffffff; --bg-raised: #ffffff;
          --text: #000000; --text-2: #333333; --text-3: #555555;
          --accent: #000000; --link: #000000; --hairline: rgba(0,0,0,.25); }
  .nav, .foot, .btn, .lanes, .sec__more, .skip, .motif, .portrait,
  .band, .gal, .fig, .mcard__art, .vids { display: none; }
  .sec { padding: var(--space-5) 0; break-inside: auto; }
  .hero { padding: 0 0 var(--space-5); }
  .wrap { max-width: none; padding: 0; }
  .card, .row, .pub, .node, article { break-inside: avoid; }
  .grid--2, .grid--3 { grid-template-columns: minmax(0, 1fr); }
  .card { padding: var(--space-3) 0; background: none; border-radius: 0;
          border-top: 1px solid var(--hairline); }
  .sec--alt .card { background: none; }
  .card__ev { border-top: none; padding-top: 0; }
  a { text-decoration: none; }
  .reveal { opacity: 1; transform: none; animation: none; }
  @page { margin: 16mm; }
}

/* ---------- responsive ----------
   Only what is site-specific. The collapses for .grid--*, .gal--*, .split, .numbers,
   .band__img and .fig__img now live in tokens.css alongside the rules they modify --
   repeating them here would fork the design system inside its own consumer. */

@media (max-width: 900px) {
  .hero__grid { grid-template-columns: minmax(0, 1fr); }
  .loops { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
  .draw-merged .draw-example-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 734px) {
  .hero { padding: var(--space-7) 0 var(--space-6); }
  .nav__in { gap: var(--space-4); }
  .nav__links { gap: var(--space-4); width: 100%; margin-left: 0; }
  .row { flex-direction: column; gap: var(--space-2); }
  .draw-merged .draw-example-cards { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Recognition: the best-paper award leads ---------- */
.award-hl { margin: var(--space-5) 0 var(--space-6); padding: var(--space-6);
  border-radius: var(--radius-l); background: var(--bg-alt); border-left: 4px solid var(--accent); }
.sec--alt .award-hl { background: var(--bg); }
.award-hl__t { font-size: 28px; line-height: 34px; font-weight: 700; margin-top: var(--space-2); }
.award-hl__s { color: var(--text-2); margin-top: var(--space-3); }
.award-hl__n { margin-top: var(--space-3); }
@media (max-width: 600px) { .award-hl__t { font-size: 22px; line-height: 28px; } }

/* ---------- the lead numbers: three cells, spread across the measure (owner 2026-10-08) */
.numbers--lead { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-7); }
@media (max-width: 600px) { .numbers--lead { grid-template-columns: 1fr; gap: var(--space-5); } }

/* ---------- success stories: one case per row, picture and text alternating ---------- */
.cases { display: flex; flex-direction: column; gap: var(--space-9); }
.cases .split { align-items: center; }
@media (max-width: 900px) { .cases { gap: var(--space-8); } }