/* 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); } }

/* Compact hardware gallery: real board photographs lead the centered image wall. */
.image-wall { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
              gap: var(--space-3); }
.image-wall__cell { margin: 0; min-width: 0; }
.image-wall__cell--featured { grid-column: span 2; }
.image-wall__link { display: block; border-radius: var(--radius-m); overflow: hidden; }
.image-wall__link:focus-visible { outline: var(--space-1) solid var(--accent);
                                 outline-offset: var(--space-1); }
.image-wall__img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3;
                  object-fit: cover; background: var(--bg-alt); }
.image-wall .figcap { margin-top: var(--space-1); }
.image-wall-copy { margin-top: var(--space-6); }
.image-wall-copy .prose { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
                         gap: var(--space-6); max-width: none; }
.image-wall-copy .prose p { margin: 0; }
@media (max-width: 734px) {
  .image-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
  .image-wall-copy .prose { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
}
@media print { .image-wall { display: none; } }

/* Founder credentials, linked solutions, and the published fingerprint feature. */
.hero-trust { margin-top: var(--space-7); }
.trust-strip { display: flex; justify-content: center; flex-wrap: wrap;
               gap: var(--space-3) var(--space-6); list-style: none;
               margin: var(--space-3) 0 0; padding: 0; }
.trust-strip a { color: var(--text); text-decoration: none;
                 font-size: 14px; line-height: 20px; font-weight: 600; }
.trust-strip a:hover { color: var(--accent); }
.solution-card { color: var(--text); text-decoration: none;
                 transition: transform var(--t-move); }
.solution-card .mcard__body { flex: 1; }
.solution-card__action { color: var(--accent); font-size: 14px; line-height: 20px;
                         font-weight: 600; margin-top: auto; padding-top: var(--space-3); }
.solution-card:focus-visible { outline-offset: var(--space-1); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .solution-card:hover { transform: translateY(calc(-1 * var(--space-1))); }
}
.fingerprint-showcase { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
                       gap: var(--space-6); }
.fingerprint-showcase .fig { margin: 0; min-width: 0; }
.fingerprint-showcase__link { display: block; }
.fingerprint-evidence { display: flex; gap: var(--space-4); flex-wrap: wrap;
                        margin-top: var(--space-3); margin-bottom: var(--space-7); }
.fingerprint-evidence a { font-size: 14px; line-height: 20px; font-weight: 600; }
.case-summary { display: grid; gap: var(--space-4); margin-top: var(--space-5); }
.case-summary dt { color: var(--text-2); font-size: 12px; line-height: 16px;
                   font-weight: 600; margin-bottom: var(--space-1); }
.case-summary dd { margin: 0; }
.case-details { margin-top: var(--space-5); }
.case-details summary { color: var(--accent); font-size: 14px; line-height: 20px;
                        font-weight: 600; cursor: pointer; }
.case-details p { margin-top: var(--space-3); color: var(--text-2); }
.cases article { scroll-margin-top: var(--space-6); }
@media (max-width: 734px) {
  .trust-strip { gap: var(--space-3) var(--space-4); }
  .fingerprint-showcase { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
}

.solution-card:hover, .solution-card:focus-visible { text-decoration: none; }
.solution-card:hover .solution-card__action { text-decoration: underline; }

/* Keep anchor headings visible below the wrapped mobile navigation. */
html { scroll-padding-top: var(--space-8); }
@media (max-width: 734px) {
  html { scroll-padding-top: calc(var(--space-9) + var(--space-6)); }
}


/* Scientific images: GPT illustrations explain; original pixels carry the evidence. */
.image-window { display: block; width: 100%; height: auto; overflow: hidden; }
.science-card { background: var(--bg); border: 1px solid var(--hairline);
  border-radius: var(--radius-l); margin: 0; overflow: hidden; min-width: 0; }
.science-card__head { padding: var(--space-5) var(--space-5) var(--space-3); }
.science-card__head h3 { font-size: 21px; line-height: 25px; font-weight: 600;
  margin-top: var(--space-2); }
.science-card__head .eyebrow { color: var(--accent); }
.science-photo { padding: var(--space-3) var(--space-5); }
.science-photo__img { width: 100%; height: auto; border-radius: var(--radius-m); }
.science-illustration { padding: 0 var(--space-3) var(--space-2); }
.science-illustration__img { width: 100%; height: auto; aspect-ratio: 16 / 10;
  object-fit: contain; display: block; }
.science-label { font-size: 12px; line-height: 16px; color: var(--text-2);
  margin: var(--space-2) 0 0; }
.science-illustration .science-label { padding-left: var(--space-2); }
.science-measurements { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4); padding: var(--space-3) var(--space-5); }
.science-measurements--single { grid-template-columns: minmax(0, 1fr); }
.science-sample { min-width: 0; }
.science-sample__img { width: 100%; height: auto; border-radius: var(--radius-s); }
.science-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3); margin: var(--space-4) var(--space-5); padding-top: var(--space-4);
  border-top: 1px solid var(--hairline); }
.science-facts dt { color: var(--text-2); font-size: 12px; line-height: 16px; }
.science-facts dd { margin: var(--space-1) 0 0; font-size: 14px; line-height: 20px; font-weight: 600; }
.science-card__caption { padding: var(--space-3) var(--space-5); color: var(--text-2);
  font-size: 14px; line-height: 20px; }
.science-source { margin: var(--space-3) var(--space-5) var(--space-5);
  border-top: 1px solid var(--hairline); padding-top: var(--space-3); }
.science-source summary { font-size: 12px; line-height: 16px; color: var(--accent); cursor: pointer; }
.science-source__img { width: 100%; height: auto; display: block; margin-top: var(--space-4); }
.science-source p { margin-top: var(--space-3); font-size: 12px; line-height: 16px; }
.science-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6); align-items: start; }
.fingerprint-showcase { align-items: start; }
.fingerprint-showcase .science-illustration__img { aspect-ratio: 2 / 1; }
.fingerprint-showcase .science-card { height: 100%; }
.mcard__art { background: var(--bg); }
.mcard__img { object-fit: contain; }
.gal__cell { border-radius: var(--radius-m); overflow: hidden; }
.gal__img { object-fit: contain; }
.fig__img, .split__img { border-radius: var(--radius-m); }
@media (max-width: 734px) {
  .science-gallery { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
  .science-card__head { padding: var(--space-4) var(--space-4) var(--space-3); }
  .science-photo, .science-measurements { padding-left: var(--space-4); padding-right: var(--space-4); }
  .science-facts { margin-left: var(--space-4); margin-right: var(--space-4); }
  .science-card__caption { padding-left: var(--space-4); padding-right: var(--space-4); }
  .science-source { margin-left: var(--space-4); margin-right: var(--space-4); }
}


/* Generated display surfaces sit behind the unchanged evidence layer. */
.image-stage { display: block; position: relative; width: 100%; height: auto;
  aspect-ratio: 3 / 2; overflow: hidden; border-radius: var(--radius-m); background: var(--bg); }
.image-stage__backdrop { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: fill; pointer-events: none; }
.image-stage__subject { position: absolute; left: 5%; top: 6%; width: 90%; height: 81%;
  object-fit: contain; display: block; border-radius: var(--radius-s); }
.image-stage.mcard__img { aspect-ratio: 16 / 10; }
.image-stage.gal__img, .image-stage.image-wall__img { aspect-ratio: 4 / 3; }
.image-wall__img { object-fit: contain; }
.case-art { min-width: 0; margin: 0; }
.case-art__primary { width: 100%; height: auto; display: block; aspect-ratio: 4 / 3;
  object-fit: contain; border-radius: var(--radius-m); }
.case-art__samples { margin-top: var(--space-4); }
.case-art__sample { padding: var(--space-3); border: 1px solid var(--hairline);
  border-radius: var(--radius-m); background: var(--bg); }
.case-art__source { margin-top: var(--space-3); font-size: 12px; line-height: 16px; }
.case-art__source summary { color: var(--accent); cursor: pointer; }
.case-art__original { width: 100%; height: auto; display: block; margin-top: var(--space-4); }
.case-art__source p { margin-top: var(--space-3); }
.draw-life-gif.image-stage { aspect-ratio: 1 / 1; }
.draw-life-gif .image-stage__subject { top: 4%; height: 82%; }

.case-art__samples summary { color: var(--accent); font-size: 12px; line-height: 16px; cursor: pointer; }
.case-art__sample { margin-top: var(--space-3); }
.mcard__art .case-art { padding: var(--space-3); }
.mcard__art .case-art__primary { aspect-ratio: 16 / 10; }


/* Photographic subjects occupy bespoke viewports, with true detail crops. */
.asset-composition { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2;
  border-radius: var(--radius-m); overflow: hidden; background: var(--bg); }
.asset-composition.mcard__img { aspect-ratio: 16 / 10; }
.asset-composition.gal__img, .asset-composition.image-wall__img { aspect-ratio: 4 / 3; }
.asset-composition.case-art__primary { aspect-ratio: 4 / 3; }
.image-stage__subject { top: 5%; height: 90%; }
.draw-life-gif .image-stage__subject { top: 5%; height: 90%; }

.composition-raster-box, .composition-raster { display: block; width: 100%; height: 100%; }


/* A continuous photographic ground and a richer scientific evidence hierarchy. */
.composition-label { font-family: inherit; font-weight: 500; }
.case-art__evidence { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3); margin-top: var(--space-3); }
.case-art__evidence .case-art__sample { margin: 0; padding: var(--space-2); }
.case-art__evidence .image-window { height: auto; aspect-ratio: 3 / 2; }
.measurement-matrix { margin: var(--space-3) var(--space-5); padding: var(--space-3);
  border: 1px solid var(--hairline); border-radius: var(--radius-m); background: var(--bg-alt); }
.measurement-matrix table { width: 100%; table-layout: fixed; border-collapse: separate;
  border-spacing: var(--space-2); margin: 0; }
.measurement-matrix td, .measurement-matrix th { padding: 0; border: 0; }
.measurement-matrix th { font-size: 12px; line-height: 16px; color: var(--text-2);
  font-weight: 500; text-align: left; }
.measurement-matrix tr > :first-child { width: 18%; }
.measurement-matrix .science-label { display: none; }
.measurement-matrix .science-sample__img { border-radius: 0; }
.fingerprint-showcase .science-illustration__img { aspect-ratio: 3 / 2; }
.science-photo:has(.asset-composition) { padding: var(--space-2); }
@media (max-width: 734px) {
  .measurement-matrix { margin-left: var(--space-3); margin-right: var(--space-3); padding: var(--space-1); }
  .measurement-matrix tr > :first-child { width: 22%; }
  .case-art__evidence { gap: var(--space-2); }
}


/* Multiple published circuit views share one canvas; mobile retains legibility. */
.asset-portfolio.case-art__primary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4); aspect-ratio: auto; padding: var(--space-3); background: var(--bg); }
.asset-portfolio__panel { min-width: 0; }
.asset-portfolio__label { margin: 0 0 var(--space-2); color: var(--text-2);
  font-size: 12px; line-height: 16px; font-weight: 500; }
.asset-portfolio__image { width: 100%; height: auto; aspect-ratio: 3 / 2; }
@media (max-width: 734px) {
  .asset-portfolio.case-art__primary { grid-template-columns: 1fr; gap: var(--space-5); }
}


/* Complex design canvases open the product paths before individual examples. */
.portfolio-opening { margin-top: 0; margin-bottom: var(--space-6); }
.portfolio-opening .asset-composition { aspect-ratio: 3 / 2; }

/* Supporting mechanical studies stay complete on desktop and mobile. */
#case-mechanical .gal { margin-top: var(--space-5); }
#case-mechanical .gal__img { object-fit: contain; aspect-ratio: 3 / 2; background: var(--bg); }
#draw .fig__img { object-fit: contain; height: auto; aspect-ratio: 3 / 2; }
@media (max-width: 734px) {
  #case-mechanical .gal { grid-template-columns: 1fr; }
}

/* Company identity stays legible beside the founder's engineering work. */
.company-panel { padding: var(--space-5); margin-bottom: var(--space-6);
  border: 1px solid var(--hairline); border-radius: var(--radius-m); background: var(--bg); }
.company-details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5); margin: var(--space-4) 0; }
.company-details dt { color: var(--text-2); font-size: 12px; line-height: 16px; }
.company-details dd { margin: var(--space-2) 0 0; overflow-wrap: anywhere; }
.company-product-link { margin-top: var(--space-4); color: var(--accent); }
.requirements-case { min-width: 0; overflow-wrap: anywhere; }
.requirements-lines { padding-left: var(--space-5); margin: var(--space-3) 0 var(--space-5); }
.requirements-lines li { margin-bottom: var(--space-3); }
.requirements-lines code { font-family: var(--font-mono); font-size: inherit; overflow-wrap: anywhere; }
.workflow-layout { max-width: calc(var(--space-9) * 6); margin: var(--space-6) auto 0; }
.workflow-map { padding: var(--space-5); background: var(--bg-alt);
  border: 1px solid var(--hairline); border-radius: var(--radius-xl); }
.claude-flow { display: grid; gap: var(--space-5); padding: 0; margin: 0; list-style: none; }
.claude-flow__step { position: relative; display: grid;
  grid-template-columns: calc(var(--space-6) * 2 + var(--space-2)) minmax(0, 1fr); align-items: center;
  gap: var(--space-4); min-width: 0; padding: var(--space-3);
  border: 1px solid var(--hairline); border-radius: var(--radius-m); background: var(--bg); }
.claude-flow__step + .claude-flow__step::before { content: ""; position: absolute;
  bottom: 100%; right: 50%; width: 1px; height: var(--space-5); background: var(--accent); }
.claude-flow__step--tool { border-color: var(--accent); background: var(--text); color: var(--on-accent); }
.claude-flow__step--tool .claude-flow__text { color: var(--on-accent); }
.workflow-icon, .agent-providers { display: flex; align-items: center; justify-content: center;
  gap: var(--space-2); width: calc(var(--space-6) * 2 + var(--space-2));
  height: var(--space-7); padding: var(--space-2); background: var(--bg-alt);
  color: var(--text); border-radius: var(--radius-s); }
.workflow-icon svg { width: var(--space-5); height: var(--space-5); color: var(--accent); }
.workflow-step__content { min-width: 0; }
.claude-flow__actor { font-size: 17px; line-height: 22px; font-weight: 600; }
.claude-flow__text { margin-top: var(--space-1); color: var(--text-2); font-size: 14px; line-height: 20px; }
.workflow-models { margin-top: var(--space-4); color: var(--text-2); font-size: 12px; line-height: 16px; text-align: center; }
.workflow-link { max-width: none; text-align: center; justify-content: center; }
.workflow-visual { min-width: 0; margin: var(--space-5) 0 0; }
.workflow-visual__images { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.workflow-visual__img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3;
  object-fit: contain; border-radius: var(--radius-s); }
.workflow-visual__caption { margin-top: var(--space-2); color: var(--text-2);
  font-size: 12px; line-height: 16px; }
.agent-provider { display: flex; align-items: center; }
.agent-provider svg { display: block; width: var(--space-5); height: var(--space-5); }
@media (max-width: 734px) {
  .workflow-map { padding: var(--space-4); }
  .claude-flow__step { gap: var(--space-3); }
  .workflow-visual__images { grid-template-columns: 1fr; gap: var(--space-2); }
  .workflow-visual__img { height: calc(var(--space-9) * 2); aspect-ratio: auto; }
  .company-panel { padding: var(--space-4); }
  .company-details { grid-template-columns: 1fr; gap: var(--space-4); }
}