/* =====================================================================
   MESA QUANTUM — revamp2 · DIRECTION B "PATTERN" · site stylesheet
   Loaded LAST, after: tokens/palette · tokens/core · themes/direction-b-pattern
   · motifs/motifs · components/components.

   CONTRACT
   - Semantic roles only. No raw hex anywhere in this file, and no --mqn-*
     palette variable. Where a role was missing it is ADDED here (--ds-…),
     derived from roles the theme already assigns.
   - Nothing in this file animates. The site ships exactly one animation and
     it belongs to the design system (@keyframes ds-lattice-drift), used once,
     on /capabilities/mag-isr/, and declared in motion-manifest.json.

   THE IDEA, IN ONE LINE
   The dot lattice is a sampling grid, not a texture. It appears at three
   scales and each one is load-bearing:
     1. LAYOUT   — content sits in a hairline cell lattice (.mq-lattice).
     2. FIGURE   — dots are the measurement marks in the VCSEL spectrum
                   readout, where density genuinely encodes data.
     3. GROUND   — a dot field over a contour field appears on four surfaces
                   only, and on three of them a field being measured is
                   literally the subject of the copy beside it.

   DELIBERATE DEVIATIONS, recorded here because the guidelines ask for them:
   - --ds-section-y is retuned down. Density is part of maturity and this
     direction is the dense one; §5 explicitly allows retuning this one token.
   - .ds-section--deep is never used: it sets color:var(--ds-ink-inverse),
     which on a dark theme is near-black text on a near-black ground.
   - .ds-nav is shown at every width. The system hides it below 900px and
     assumes a JS drawer; this build has no JavaScript at all.
   ===================================================================== */

/* ---------------------------------------------------------------
   Added roles + one retuned rhythm token.
   --------------------------------------------------------------- */
:root {
  --ds-section-y:     clamp(3.25rem, 2rem + 3.6vw, 6rem);
  --ds-cell:          var(--ds-bg);
  --ds-cell-hover:    var(--ds-surface);
  --ds-cell-alt:      var(--ds-bg-alt);
  --ds-tick:          var(--ds-line-strong);
  --ds-panel:         var(--ds-surface);
  --ds-readout-grid:  color-mix(in srgb, var(--ds-ink) 16%, transparent);
  --ds-readout-mark:  var(--ds-accent);
  --ds-photo-frame:   var(--ds-line-strong);
}

/* ---------------------------------------------------------------
   Shell
   --------------------------------------------------------------- */
body { display: flex; flex-direction: column; min-height: 100vh; }
main { flex: 1 0 auto; }

/* ---------------------------------------------------------------
   Header + nav
   --------------------------------------------------------------- */
.ds-nav { display: flex; flex-wrap: wrap; row-gap: var(--ds-space-2); }
.ds-header__inner { flex-wrap: wrap; row-gap: var(--ds-space-3); padding-block: var(--ds-space-3); }
.ds-header__logo img { height: 26px; }
.ds-nav a:not(.ds-btn) { letter-spacing: 0.005em; }
.ds-nav a[aria-current="page"] {
  color: var(--ds-ink);
  text-decoration: underline;
  text-decoration-color: var(--ds-accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.5em;
}
@media (max-width: 899px) {
  .ds-nav { margin-inline-start: 0; gap: var(--ds-space-4); width: 100%; }
  .ds-nav .ds-btn { padding: 0.6em 1.1em; }
}

/* ---------------------------------------------------------------
   Bands
   --------------------------------------------------------------- */
.mq-band--alt  { background: var(--ds-bg-alt); }
.mq-band--deep { background: var(--ds-surface-deep); }
.mq-band--tight { padding-block: calc(var(--ds-section-y) * 0.7); }
.mq-rule { height: 1px; background: var(--ds-line); border: 0; margin: 0; }

/* ---------------------------------------------------------------
   The field panel — contour under, lattice over.
   The motif is CONTAINED, never bled behind body copy: it sits on its own
   lighter surface inside a hairline frame, so it reads as an instrument
   viewport onto a measured field rather than as wallpaper.
   --------------------------------------------------------------- */
.mq-fieldpanel {
  position: relative;
  overflow: hidden;
  background: var(--ds-panel);
  border: 1px solid var(--ds-line-strong);
  min-height: 320px;
  /* The theme sets --ds-motif-opacity: 0.30, tuned for a motif bleeding
     full-bleed BEHIND content, where 0.30 is already at the edge of
     competing with text. Nothing here sits behind text: the field is
     contained in its own frame and is the only thing in it. Raised so the
     lattice and the contour actually read as a measurement rather than as
     a stain. This is a scoped override of a role, not a fork of the theme. */
  --ds-motif-opacity: 0.55;
}
/* SYSTEM DEFECT WORKED AROUND HERE, worth fixing upstream:
   motifs.css draws the contour with `background-image: url('contour.svg')`
   and the SVG paints with `stroke="currentColor"`. An SVG referenced as a
   CSS background is an external document, so currentColor there resolves to
   the SVG's own default — BLACK — and never inherits the theme. On a dark
   ground the contour therefore renders as invisible dark-on-dark smudging
   rather than as a tinted field. The fix is to use the same file as an
   alpha MASK over a currentColor fill, which does inherit. */
.mq-fieldpanel .motif-contour {
  color: var(--ds-accent);
  background-image: none;
  background-color: currentColor;
  -webkit-mask-image: url('/ds/motifs/contour.svg');
          mask-image: url('/ds/motifs/contour.svg');
  -webkit-mask-size: 860px auto;      mask-size: 860px auto;
  -webkit-mask-position: 54% 46%;     mask-position: 54% 46%;
  -webkit-mask-repeat: no-repeat;     mask-repeat: no-repeat;
}
.mq-fieldpanel .motif-dots {
  color: var(--ds-ink);
  --dot-gap: 18px;
  --dot-size: 1.6px;
  --field-x: 58%;
  --field-y: 46%;
}
/* Corner ticks: an instrument frame, two marks, nothing more. */
.mq-fieldpanel::before,
.mq-fieldpanel::after {
  content: ""; position: absolute; width: 16px; height: 16px;
  border: 1px solid var(--ds-tick); z-index: var(--ds-z-content);
}
.mq-fieldpanel::before { top: 10px; left: 10px; border-right: 0; border-bottom: 0; }
.mq-fieldpanel::after  { bottom: 10px; right: 10px; border-left: 0; border-top: 0; }

.mq-fieldfig { margin: 0; }
.mq-fieldfig .mq-fieldpanel { min-height: clamp(220px, 24vw, 330px); }
.mq-fieldfig figcaption {
  margin-top: var(--ds-space-4);
  font-size: var(--ds-text-sm);
  color: var(--ds-ink-muted);
  max-width: 78ch;
  text-wrap: pretty;
}

/* ---------------------------------------------------------------
   Hero — message paired with the field, not floating on it.
   --------------------------------------------------------------- */
.mq-hero {
  border-bottom: 1px solid var(--ds-line);
  padding-block: clamp(3rem, 2rem + 4vw, 6rem);
}
.mq-hero__grid { display: grid; gap: var(--ds-space-7); align-items: center; }
@media (min-width: 1000px) {
  .mq-hero__grid { grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr); gap: var(--ds-space-8); }
  .mq-hero .mq-fieldpanel { min-height: 420px; height: 100%; }
}
.mq-hero__title {
  font-size: var(--ds-text-3xl);
  font-weight: var(--ds-display-weight, 600);
  line-height: var(--ds-leading-tight);
  letter-spacing: var(--ds-tracking-display);
  margin: 0 0 var(--ds-space-5);
  max-width: 20ch;
  text-wrap: balance;
}
.mq-hero__sub {
  font-size: var(--ds-text-lg);
  line-height: var(--ds-leading-normal);
  color: var(--ds-ink-muted);
  max-width: 52ch;
  margin: 0 0 var(--ds-space-6);
  text-wrap: pretty;
}

/* ---------------------------------------------------------------
   Section heads. The split head is the density device: heading left,
   standfirst right, hairline across the top of the pair.
   --------------------------------------------------------------- */
.mq-head { margin-bottom: var(--ds-space-7); }
.mq-head .ds-h2 { margin: 0 0 var(--ds-space-4); max-width: 24ch; }
.mq-head p { color: var(--ds-ink-muted); margin: 0; max-width: 62ch; text-wrap: pretty; }

.mq-head--split { display: grid; gap: var(--ds-space-5); }
@media (min-width: 900px) {
  .mq-head--split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: var(--ds-space-8);
    align-items: end;
  }
  .mq-head--split .ds-h2 { margin-bottom: 0; }
  .mq-head--split p { padding-bottom: 0.35em; }
}

.mq-eyebrow-rule { display: flex; align-items: center; gap: var(--ds-space-4); margin: 0 0 var(--ds-space-4); }
.mq-eyebrow-rule::after { content: ""; flex: 1; height: 1px; background: var(--ds-line); }

.mq-statement {
  font-size: var(--ds-text-2xl);
  font-weight: var(--ds-weight-medium);
  line-height: var(--ds-leading-snug);
  letter-spacing: var(--ds-tracking-tight);
  max-width: 34ch;
  margin: 0;
  text-wrap: balance;
}
.mq-statement + .ds-btn { margin-top: var(--ds-space-6); }
.mq-statement-row { display: grid; gap: var(--ds-space-5); align-items: end; }
@media (min-width: 900px) {
  .mq-statement-row { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); column-gap: var(--ds-space-8); }
  .mq-statement-row .mq-statement + .ds-btn { margin-top: 0; }
}

/* ---------------------------------------------------------------
   THE LATTICE — the layout is the sampling grid.
   --------------------------------------------------------------- */
.mq-lattice {
  display: grid;
  gap: 1px;
  background: var(--ds-line);
  border: 1px solid var(--ds-line);
}
.mq-lattice > * {
  background: var(--ds-cell);
  padding: var(--ds-space-6);
  margin: 0;
}
.mq-lattice--alt > * { background: var(--ds-cell-alt); }
@media (min-width: 700px)  { .mq-lattice--2 { grid-template-columns: repeat(2, 1fr); }
                             .mq-lattice--3 { grid-template-columns: repeat(2, 1fr); }
                             .mq-lattice--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .mq-lattice--3 { grid-template-columns: repeat(3, 1fr); }
                             .mq-lattice--4 { grid-template-columns: repeat(4, 1fr); } }

/* A cell that is a link. Hard state change — fill swaps, pictogram and
   title take the accent. No lift, no shadow, no soft fade. */
.mq-cell {
  display: flex; flex-direction: column; gap: var(--ds-space-3);
  text-decoration: none; color: inherit;
  transition: background-color var(--ds-dur) var(--ds-ease), color var(--ds-dur) var(--ds-ease);
}
.mq-cell:hover, .mq-cell:focus-visible { background: var(--ds-cell-hover); }
.mq-cell:hover .mq-cell__title, .mq-cell:focus-visible .mq-cell__title { color: var(--ds-accent); }
.mq-cell:hover .mq-pict, .mq-cell:focus-visible .mq-pict { color: var(--ds-accent); }
.mq-cell__title {
  margin: 0; font-size: var(--ds-text-xl); font-weight: var(--ds-weight-semibold);
  letter-spacing: var(--ds-tracking-tight); line-height: var(--ds-leading-snug);
}
.mq-cell__body { margin: 0; color: var(--ds-ink-muted); text-wrap: pretty; }
.mq-cell__go {
  margin-top: auto; padding-top: var(--ds-space-4);
  font-size: var(--ds-text-xs); letter-spacing: var(--ds-tracking-eyebrow);
  text-transform: uppercase; color: var(--ds-ink-muted);
}
.mq-cell:hover .mq-cell__go, .mq-cell:focus-visible .mq-cell__go { color: var(--ds-ink); }
.mq-kicker {
  font-size: var(--ds-text-xs); letter-spacing: var(--ds-tracking-eyebrow);
  text-transform: uppercase; color: var(--ds-ink-muted);
}

/* ---------------------------------------------------------------
   Pictograms — one minimal line drawing per capability, drawn from the
   subject (Playground Global's tile rule). Content, not motif: each
   carries its own <title> and is announced.
   --------------------------------------------------------------- */
.mq-pict { width: 68px; height: 68px; display: block; color: var(--ds-ink-muted); transition: color var(--ds-dur) var(--ds-ease); }
.mq-pict--lg { width: clamp(110px, 12vw, 148px); height: clamp(110px, 12vw, 148px); }

/* ---------------------------------------------------------------
   Tags (applications)
   --------------------------------------------------------------- */
.mq-tags { display: flex; flex-wrap: wrap; gap: var(--ds-space-2); list-style: none; margin: 0; padding: 0; }
.mq-tags li {
  font-size: var(--ds-text-xs);
  padding: 0.35em 0.8em;
  border: 1px solid var(--ds-line);
  color: var(--ds-ink-muted);
}

/* ---------------------------------------------------------------
   Stats
   --------------------------------------------------------------- */
.mq-stat__value { display: block; font-size: var(--ds-text-2xl); font-weight: var(--ds-weight-semibold); letter-spacing: var(--ds-tracking-display); line-height: 1; }
.mq-stat__label { display: block; margin-top: var(--ds-space-3); color: var(--ds-ink-muted); font-size: var(--ds-text-sm); }

/* ---------------------------------------------------------------
   Partner names. No logo set exists and the final set is unsettled
   (Q9), so they are set in type rather than faked as a logo wall.
   --------------------------------------------------------------- */
.mq-partners {
  display: grid; gap: 1px; background: var(--ds-line); border: 1px solid var(--ds-line);
  list-style: none; margin: 0; padding: 0; grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 700px) { .mq-partners { grid-template-columns: repeat(4, 1fr); } }
.mq-partners li {
  background: var(--ds-surface-deep);
  padding: var(--ds-space-5) var(--ds-space-4);
  font-size: var(--ds-text-sm); font-weight: var(--ds-weight-medium);
  letter-spacing: 0.02em; color: var(--ds-ink-muted); text-align: center;
}

/* ---------------------------------------------------------------
   Prose. NOTE the ordering: `.mq-prose > *` zeroes margins and
   `.mq-prose > * + *` restores the top one. Both are the same
   specificity, so the later rule wins — a `.mq-prose p { margin: 0 }`
   would outrank the sibling rule and collapse every paragraph gap.
   --------------------------------------------------------------- */
.mq-prose { max-width: var(--ds-measure); }
.mq-prose > * { margin: 0; }
.mq-prose > * + * { margin-top: var(--ds-space-4); }
.mq-prose p { text-wrap: pretty; }
.mq-prose h2 {
  font-size: var(--ds-text-xl); font-weight: var(--ds-weight-semibold);
  letter-spacing: var(--ds-tracking-tight); line-height: var(--ds-leading-snug);
}
.mq-prose > h2 + * { margin-top: var(--ds-space-3); }
.mq-prose > * + h2 { margin-top: var(--ds-space-7); }
.mq-lead { font-size: var(--ds-text-lg); color: var(--ds-ink-muted); max-width: 56ch; margin: 0 0 var(--ds-space-6); text-wrap: pretty; }

.mq-defs { margin: 0; }
.mq-defs dt { font-weight: var(--ds-weight-semibold); margin-top: var(--ds-space-5); }
.mq-defs dt:first-child { margin-top: 0; }
.mq-defs dd { margin: var(--ds-space-2) 0 0; color: var(--ds-ink-muted); max-width: 62ch; text-wrap: pretty; }

/* Applications panel on a capability page */
.mq-panel {
  border: 1px solid var(--ds-line);
  background: var(--ds-bg-alt);
  padding: var(--ds-space-6);
  align-self: start;
}
.mq-panel h2 {
  margin: 0 0 var(--ds-space-5);
  font-size: var(--ds-text-xs); letter-spacing: var(--ds-tracking-eyebrow);
  text-transform: uppercase; font-weight: var(--ds-weight-semibold); color: var(--ds-ink-muted);
}

/* ---------------------------------------------------------------
   Figures — photographs and readouts.
   PHOTOGRAPH TREATMENT for this build: full colour, no filter, hairline
   frame. Chosen because both publishable photographs are microscope
   images whose subject is carried by colour — the laser spot on the die
   is the evidence, and grayscale would delete it.
   --------------------------------------------------------------- */
.mq-figure { margin: 0; border: 1px solid var(--ds-photo-frame); background: var(--ds-surface-deep); align-self: start; }
.mq-figure img { width: 100%; height: auto; display: block; }
.mq-figure figcaption {
  padding: var(--ds-space-4) var(--ds-space-5);
  border-top: 1px solid var(--ds-line);
  font-size: var(--ds-text-sm); color: var(--ds-ink-muted); text-wrap: pretty;
}

.mq-readout { margin: 0; border: 1px solid var(--ds-line); background: var(--ds-surface-deep); padding: var(--ds-space-5); }
.mq-readout__scroll { overflow-x: auto; }
.mq-readout svg { display: block; min-width: 660px; width: 100%; height: auto; }
.mq-readout figcaption { margin-top: var(--ds-space-4); padding-top: var(--ds-space-4); border-top: 1px solid var(--ds-line); font-size: var(--ds-text-sm); color: var(--ds-ink-muted); text-wrap: pretty; }
.mq-readout .r-axis   { stroke: var(--ds-readout-grid); }
.mq-readout .r-rule   { stroke: var(--ds-readout-grid); }
.mq-readout .r-mark   { fill: var(--ds-readout-mark); }
.mq-readout .r-stem   { stroke: var(--ds-readout-mark); }
.mq-readout .r-label  { fill: var(--ds-ink); font-family: var(--ds-font); font-size: 15px; font-weight: 600; }
.mq-readout .r-tick   { fill: var(--ds-ink-muted); font-family: var(--ds-font); font-size: 14px; }
.mq-readout .r-bandlabel { fill: var(--ds-ink-muted); font-family: var(--ds-font); font-size: 12px; letter-spacing: 0.16em; }

/* ---------------------------------------------------------------
   Page head (interior pages)
   --------------------------------------------------------------- */
.mq-pagehead { padding-block: clamp(2.5rem, 1.8rem + 3vw, 4.5rem); border-bottom: 1px solid var(--ds-line); }
.mq-pagehead h1 {
  font-size: var(--ds-text-3xl); font-weight: var(--ds-display-weight, 600);
  line-height: var(--ds-leading-tight); letter-spacing: var(--ds-tracking-display);
  margin: 0 0 var(--ds-space-4); max-width: 18ch;
}
.mq-pagehead__split { display: grid; gap: var(--ds-space-6); }
@media (min-width: 900px) {
  .mq-pagehead__split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--ds-space-8); align-items: end; }
  .mq-pagehead__split h1 { margin-bottom: 0; }
  .mq-pagehead__split .mq-lead { margin-bottom: 0.35em; }
}

.mq-caphead { display: grid; gap: var(--ds-space-6); }
@media (min-width: 860px) {
  .mq-caphead { grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: var(--ds-space-8); }
}
.mq-caphead .mq-lead { margin-bottom: var(--ds-space-5); }
.mq-caphead .mq-pict { color: var(--ds-accent); }

/* ---------------------------------------------------------------
   Footer
   --------------------------------------------------------------- */
.ds-footer h2 { font-size: var(--ds-text-xs); letter-spacing: var(--ds-tracking-eyebrow); text-transform: uppercase; font-weight: var(--ds-weight-semibold); margin: 0 0 var(--ds-space-4); }
.ds-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--ds-space-2); font-size: var(--ds-text-sm); }
.ds-footer p { margin: 0 0 var(--ds-space-3); font-size: var(--ds-text-sm); }
.ds-footer__bottom p { margin: 0; }
.mq-foot__mark img { height: 24px; }

/* ---------------------------------------------------------------
   Two-column body layouts
   --------------------------------------------------------------- */
.mq-split { display: grid; gap: var(--ds-space-7); }
@media (min-width: 960px) {
  .mq-split { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); column-gap: var(--ds-space-8); }
}
.mq-split--even { }
@media (min-width: 960px) { .mq-split--even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

/* Closing row: statement + supporting line on the left, one action right. */
.mq-statement-row > div > .mq-lead { margin: var(--ds-space-4) 0 0; max-width: 60ch; }
@media (min-width: 900px) { .mq-statement-row > .ds-btn { justify-self: start; } }

.mq-statement--wide { max-width: 42ch; }

/* ---------------------------------------------------------------
   Header dropdowns — Capabilities and Products, the RDDS structural
   split. Pure CSS (:hover / :focus-within), no JavaScript anywhere.
   Below 900px the panel is suppressed: /capabilities/ lists all six and
   so does the footer, so nothing becomes unreachable.
   --------------------------------------------------------------- */
.mq-nav__item { display: inline-flex; align-items: center; }
.mq-nav__parent::after {
  content: ""; display: inline-block; margin-inline-start: 0.45em;
  width: 0; height: 0;
  border-inline: 3.5px solid transparent;
  border-block-start: 4px solid currentColor;
  vertical-align: 0.15em;
}
.mq-nav__panel { z-index: 1; min-width: 232px; }
.mq-nav__panel a { display: block; font-size: var(--ds-text-sm); padding-block: 0.2rem; }
.ds-nav .mq-nav__panel a:not(.ds-btn) { color: var(--ds-ink-muted); }
.ds-nav .mq-nav__panel a:not(.ds-btn):hover { color: var(--ds-accent); }
@media (max-width: 899px) { .mq-nav__panel { display: none; } }