/* =====================================================================
   revamp3 · DIRECTION C — "INSTRUMENT"
   Site layer. Everything the design system does not ship, and nothing it
   does. Semantic roles only: no raw hex, no --mqn-* palette reference.
   Colour role assignment lives where it belongs, in the theme file.

   The direction in one line: the page is an instrument panel. A near-black
   ground, hairline rules that behave like a bezel and a graticule, zero
   radius anywhere, a mono channel label beside every block of content, and
   a contour readout carrying the sensing lattice above it.
   ===================================================================== */

/* ---------- Primitives the system leaves open ---------- */
.mq-label {
  font-family: var(--ds-font-mono);
  font-size: var(--ds-text-xs);
  letter-spacing: var(--ds-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--ds-ink-faint);
  margin: 0;
}
.mq-mono { font-family: var(--ds-font-mono); font-size: var(--ds-text-sm); color: var(--ds-ink-muted); }
.mq-prose { max-width: 62ch; margin: 0 0 var(--ds-space-5); text-wrap: pretty; }
.mq-prose--tight { max-width: 56ch; color: var(--ds-ink-muted); }
.mq-lead { max-width: 58ch; }
.mq-plain { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--ds-space-2); }
.mq-plain--inline { display: flex; flex-wrap: wrap; gap: var(--ds-space-3) var(--ds-space-5); }
.mq-rail__body .mq-plain--inline { margin-block: var(--ds-space-4) var(--ds-space-6); }
.mq-plain--inline li { position: relative; }
.mq-plain--inline li + li::before {
  content: ""; position: absolute; inset-inline-start: calc(-1 * var(--ds-space-3));
  top: 0.35em; bottom: 0.35em; width: 1px; background: var(--ds-line);
}

/* ---------- The bezel: a tick strip, the way an instrument edge is ruled ---------- */
.mq-ticks {
  position: absolute; inset-inline: 0; top: 0; height: 12px;
  pointer-events: none; z-index: var(--ds-z-content);
  background-repeat: no-repeat;
  background-image:
    repeating-linear-gradient(to right, var(--ds-line) 0 1px, transparent 1px 14px),
    repeating-linear-gradient(to right, var(--ds-line-strong) 0 1px, transparent 1px 112px);
  background-size: 100% 5px, 100% 11px;
}

/* ---------- Header ---------- */
.ds-header__logo img { height: 24px; }
.mq-nav { display: flex; flex-wrap: wrap; align-items: center;
          margin-inline-start: auto; gap: var(--ds-space-4) var(--ds-space-5); }
.mq-nav__list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--ds-space-4) var(--ds-space-5);
}
.mq-nav a:not(.ds-btn) {
  font-family: var(--ds-font-mono); font-size: var(--ds-text-xs);
  letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none;
  color: var(--ds-ink-muted); padding-block: 0.35rem;
  border-bottom: 1px solid transparent;
}
.mq-nav a:not(.ds-btn):hover { color: var(--ds-ink); border-bottom-color: var(--ds-accent); }
.mq-nav a:not(.ds-btn)[aria-current="page"] { color: var(--ds-ink); border-bottom-color: var(--ds-ink); }
.mq-nav__cta { padding-block: 0.6em; }

/* ---------- Dropdown panels ----------
   The Capabilities ▾ / Products ▾ split from RDDS, in this direction's
   register: zero radius, a hairline border, no shadow softening, mono items,
   and a hard hover state rather than a fade. Opens on hover AND focus-within,
   so it is reachable from the keyboard without a line of JavaScript. */
.mq-nav__item > a { display: inline-flex; align-items: center; gap: 0.5em; }
/* Bridge the gap between the item and its panel so the pointer can cross it. */
.mq-nav__item { padding-bottom: 14px; margin-bottom: -14px; }
.mq-nav__caret {
  width: 0; height: 0; flex: none;
  border-inline: 3px solid transparent;
  border-top: 4px solid currentColor;
  opacity: 0.7;
}
.mq-nav__panel {
  top: 100%; inset-inline-start: calc(-1 * var(--ds-space-3));
  min-width: 15rem; padding: 0; border-radius: 0;
  border: 1px solid var(--ds-line-strong);
  background: var(--ds-surface-deep); box-shadow: none;
  gap: 0; transform: none; transition: opacity var(--ds-dur-fast) var(--ds-ease), visibility var(--ds-dur-fast);
}
.ds-nav__item:hover .mq-nav__panel, .ds-nav__item:focus-within .mq-nav__panel { transform: none; }
.mq-nav .mq-nav__panel a {
  display: block; padding: 0.7rem 1rem;
  border-bottom: 1px solid var(--ds-line);
  color: var(--ds-ink-muted);
}
.mq-nav .mq-nav__panel a:last-child { border-bottom: 0; }
.mq-nav .mq-nav__panel a:hover, .mq-nav .mq-nav__panel a:focus-visible {
  background: var(--ds-ink); color: var(--ds-ink-inverse);
}
.mq-nav .mq-nav__panel a[aria-current="page"] { color: var(--ds-ink); }
@media (max-width: 899px) {
  /* No hover on touch and no room in a two-row header: the panels collapse and
     the capability index one tap away carries the same six links. */
  .mq-nav__panel { display: none; }
  .mq-nav__caret { display: none; }
}
@media (max-width: 899px) {
  .ds-header__inner { flex-wrap: wrap; gap: var(--ds-space-3); padding-block: var(--ds-space-3); min-height: 0; }
  .mq-nav { width: 100%; margin-inline-start: 0; gap: var(--ds-space-3) var(--ds-space-4); }
}

/* ---------- Buttons: hard state change, no soft fade ---------- */
.ds-btn {
  font-family: var(--ds-font-mono); font-size: var(--ds-text-xs);
  letter-spacing: 0.12em; text-transform: uppercase;
  padding: 0.95em 1.7em; border-radius: 0;
}
.ds-btn--primary { border-color: var(--ds-accent); }
.ds-btn--primary:hover { background: transparent; color: var(--ds-accent); border-color: var(--ds-accent); }
.ds-btn--ghost { border-color: var(--ds-line-strong); color: var(--ds-ink-muted); }
.ds-btn--ghost:hover { background: var(--ds-ink); color: var(--ds-ink-inverse); border-color: var(--ds-ink); }

/* ---------- Section ruling: the page is graticuled, not boxed ---------- */
.ds-section { border-top: var(--ds-rule-weight) solid var(--ds-line); }

/* ---------- Hero ---------- */
.mq-hero { padding-block: clamp(4rem, 2.5rem + 6vw, 8.5rem) clamp(3rem, 2rem + 4vw, 6rem); }
.mq-hero--page { padding-block: clamp(3.5rem, 2.5rem + 4vw, 6rem) clamp(2.5rem, 1.8rem + 3vw, 4.5rem); }
.mq-hero--article { padding-bottom: clamp(2rem, 1.5rem + 2vw, 3rem); }
.mq-eyebrow { display: flex; align-items: center; gap: var(--ds-space-3);
              font-family: var(--ds-font-mono); color: var(--ds-ink-muted); }
.mq-eyebrow::before { content: ""; width: 2.5rem; height: 1px; background: var(--ds-accent); flex: none; }
.mq-eyebrow a { text-decoration: none; }
.mq-eyebrow a:hover { color: var(--ds-ink); }
.mq-display {
  max-width: 21ch;
  font-size: clamp(2.25rem, 1.55rem + 2.9vw, 3.9rem);
}
.mq-display--page { max-width: 18ch; font-size: clamp(2rem, 1.5rem + 2.1vw, 3.1rem); }
.mq-display--article { max-width: 26ch; font-size: var(--ds-text-2xl); font-weight: var(--ds-weight-medium); }
.mq-hero__sub { max-width: 54ch; color: var(--ds-ink-muted); text-wrap: pretty; }
.mq-article__meta { margin: 0; }

/* ---------- The contour readout ----------
   Computed iso-lines behind the type, masked so that the field is at full
   strength where there is no copy and gone where there is. The lattice above
   it is the sensing array; the two together are the device the direction is
   named for. Decorative: both sit inside aria-hidden. */
.mq-field {
  color: var(--ds-ink-muted);
  -webkit-mask-image: linear-gradient(102deg, transparent 0%, rgb(0 0 0 / 0.18) 48%, rgb(0 0 0 / 1) 74%);
          mask-image: linear-gradient(102deg, transparent 0%, rgb(0 0 0 / 0.18) 48%, rgb(0 0 0 / 1) 74%);
}
.mq-field__svg { inset: 0; width: 100%; height: 100%; }
.mq-field__minor { opacity: 0.3; }
.mq-field__major { opacity: 0.58; }
/* The lattice has to be legible: "contour as readout with the sensing lattice
   over it" is the whole direction, and an invisible lattice is not a lattice. */
.motif-sensing > .motif-dots { opacity: 0.34; }
.mq-hero .motif-dots--field { --field-x: 76%; --field-y: 42%; }
/* Narrow viewports: the copy runs the full width, so the field sits under it.
   Drop the field back rather than letting iso-lines cross the subhead. */
@media (max-width: 899px) {
  .mq-field__minor { opacity: 0.15; }
  .mq-field__major { opacity: 0.27; }
  .motif-sensing > .motif-dots { opacity: 0.2; }
}

/* ---------- The readout strip under the hero ---------- */
.mq-readout { background: var(--ds-bg-alt); border-block: var(--ds-rule-weight) solid var(--ds-line); }
.mq-readout .ds-container { display: grid; gap: var(--ds-space-4); padding-block: var(--ds-space-6); }
.mq-readout__line {
  margin: 0; max-width: 46ch;
  font-size: var(--ds-text-xl); line-height: 1.3;
  letter-spacing: var(--ds-tracking-tight); color: var(--ds-ink);
}

/* ---------- The channel strip: this direction's structural signature ---------- */
.mq-rail { display: grid; gap: var(--ds-space-4); }
.mq-rail__label { padding-top: 0.35rem; }
.mq-rail__body > :last-child { margin-bottom: 0; }
.mq-rail__body > .ds-h2 { max-width: 17ch; }
.mq-rail__body > .ds-lead, .mq-rail__body > .mq-lead { max-width: 54ch; }
@media (min-width: 900px) {
  .mq-rail { grid-template-columns: 11rem minmax(0, 1fr); gap: var(--ds-space-7); }
  .mq-rail__label { position: sticky; top: 6.5rem; align-self: start; }
  .mq-rail__body {
    border-inline-start: var(--ds-rule-weight) solid var(--ds-line);
    padding-inline-start: var(--ds-space-7);
  }
}

/* ---------- Capability tiles (home) ---------- */
.mq-tiles, .mq-cards { list-style: none; margin: var(--ds-space-6) 0 var(--ds-space-5); padding: 0;
                       display: grid; gap: 0; border-top: 1px solid var(--ds-line); }
@media (min-width: 780px) { .mq-tiles { grid-template-columns: repeat(3, 1fr); } }
.mq-tile__link, .mq-card__link {
  display: flex; flex-direction: column; gap: var(--ds-space-3);
  padding: var(--ds-space-5) var(--ds-space-5) var(--ds-space-5) 0;
  height: 100%; text-decoration: none;
  border-bottom: 1px solid var(--ds-line);
  transition: background-color var(--ds-dur) var(--ds-ease), color var(--ds-dur) var(--ds-ease);
}
@media (min-width: 780px) {
  .mq-tile + .mq-tile .mq-tile__link { border-inline-start: 1px solid var(--ds-line); padding-inline-start: var(--ds-space-5); }
}
.mq-tile__link:hover, .mq-card__link:hover { background: var(--ds-surface); }
.mq-pict { width: 48px; height: 48px; color: var(--ds-ink-muted); flex: none; }
.mq-tile__link:hover .mq-pict, .mq-card__link:hover .mq-pict { color: var(--ds-accent); }
.mq-tile__title { margin: 0; font-size: var(--ds-text-lg); align-self: start; font-weight: var(--ds-weight-semibold);
                  letter-spacing: var(--ds-tracking-tight); }
.mq-tile__blurb { margin: 0; color: var(--ds-ink-muted); font-size: var(--ds-text-sm); text-wrap: pretty; }
@media (min-width: 780px) {
  .mq-tile__link { display: grid; grid-template-rows: auto auto 1fr auto;
                   align-content: start; gap: var(--ds-space-3); }
}
.mq-tile__go {
  margin-top: auto; padding-top: var(--ds-space-4);
  font-family: var(--ds-font-mono); font-size: var(--ds-text-xs);
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ds-ink-faint);
}
.mq-tile__link:hover .mq-tile__go, .mq-card__link:hover .mq-tile__go { color: var(--ds-accent); }
.mq-more { margin: 0; font-family: var(--ds-font-mono); font-size: var(--ds-text-xs);
           letter-spacing: 0.12em; text-transform: uppercase; }
.mq-more a, .mq-more__link { color: var(--ds-accent); text-decoration: none;
                             border-bottom: 1px solid var(--ds-line-strong); padding-bottom: 2px; }
.mq-more a:hover, .mq-more__link:hover { border-bottom-color: var(--ds-accent); }

/* ---------- Capability cards (index) ---------- */
@media (min-width: 720px) { .mq-cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1120px) { .mq-cards { grid-template-columns: repeat(3, 1fr); } }
.mq-card__link { padding-inline: 0 var(--ds-space-5); }
/* Vertical hairlines between columns, so the grid reads as a graticule rather
   than as a row of floating boxes. First column stays flush with the rail. */
@media (min-width: 620px) and (max-width: 1119px) {
  .mq-card:nth-child(2n) .mq-card__link {
    border-inline-start: 1px solid var(--ds-line); padding-inline-start: var(--ds-space-5); }
}
@media (min-width: 1120px) {
  .mq-card:not(:nth-child(3n+1)) .mq-card__link {
    border-inline-start: 1px solid var(--ds-line); padding-inline-start: var(--ds-space-5); }
}
.mq-card__head { display: flex; align-items: center; gap: var(--ds-space-4); }
.mq-card__title { margin: 0; }
.mq-card__sum { margin: 0; color: var(--ds-ink-muted); font-size: var(--ds-text-sm); text-wrap: pretty; }
.mq-card__tags { list-style: none; margin: var(--ds-space-2) 0 0; padding: 0;
                 display: flex; flex-wrap: wrap; gap: var(--ds-space-2); }
.mq-tag { border-radius: 0; border-color: var(--ds-line); color: var(--ds-ink-faint);
          font-family: var(--ds-font-mono); letter-spacing: 0.04em; }

/* ---------- Applications list ---------- */
.mq-apps { margin: var(--ds-space-5) 0 var(--ds-space-6); display: grid; gap: 0;
           border-top: 1px solid var(--ds-line); }
.mq-app { display: grid; gap: var(--ds-space-2); padding-block: var(--ds-space-5);
          border-bottom: 1px solid var(--ds-line); }
@media (min-width: 760px) { .mq-app { grid-template-columns: 16rem minmax(0, 1fr); gap: var(--ds-space-6); } }
.mq-app__name { font-family: var(--ds-font-mono); font-size: var(--ds-text-sm);
                letter-spacing: 0.06em; text-transform: uppercase; color: var(--ds-ink); }
.mq-app__body { margin: 0; color: var(--ds-ink-muted); text-wrap: pretty; }

/* ---------- Product rows ---------- */
.mq-rows { border-top: 1px solid var(--ds-line); margin-top: var(--ds-space-5); }
.mq-row { display: grid; gap: var(--ds-space-2); padding-block: var(--ds-space-5);
          border-bottom: 1px solid var(--ds-line); align-items: baseline; }
@media (min-width: 860px) {
  .mq-row { grid-template-columns: 3rem 15rem minmax(0, 1fr) 9.5rem; gap: var(--ds-space-5); }
}
.mq-row__idx { color: var(--ds-ink-faint); }
.mq-row__title { margin: 0; font-size: var(--ds-text-lg); }
.mq-row__body { margin: 0; color: var(--ds-ink-muted); font-size: var(--ds-text-sm); text-wrap: pretty; }
.mq-row__go { font-family: var(--ds-font-mono); font-size: var(--ds-text-xs);
              letter-spacing: 0.12em; text-transform: uppercase; }
.mq-row__state { color: var(--ds-ink-faint); }

/* ---------- Stats ---------- */
.mq-stats { display: grid; margin-top: var(--ds-space-6); border-top: 1px solid var(--ds-line); }
@media (min-width: 700px) { .mq-stats { grid-template-columns: repeat(3, 1fr); } }
.mq-stat { display: grid; gap: var(--ds-space-2); padding: var(--ds-space-5) var(--ds-space-5) var(--ds-space-5) 0;
           border-bottom: 1px solid var(--ds-line); }
@media (min-width: 700px) {
  .mq-stat + .mq-stat { border-inline-start: 1px solid var(--ds-line); padding-inline-start: var(--ds-space-5); }
}
.mq-stat__value { font-size: var(--ds-text-2xl); font-weight: var(--ds-weight-medium);
                  letter-spacing: var(--ds-tracking-display); line-height: 1;
                  font-variant-numeric: tabular-nums; }
.mq-stat__label { font-size: var(--ds-text-sm); color: var(--ds-ink-muted); }

/* ---------- Locations ---------- */
.mq-locs { display: grid; gap: 0; margin-top: var(--ds-space-5); border-top: 1px solid var(--ds-line); }
.mq-loc { display: grid; gap: var(--ds-space-2); padding-block: var(--ds-space-5);
          border-bottom: 1px solid var(--ds-line); }
@media (min-width: 760px) { .mq-loc { grid-template-columns: 16rem minmax(0, 1fr); gap: var(--ds-space-6); } }
.mq-loc__title { margin: 0; font-size: var(--ds-text-lg); }
.mq-loc__body { margin: 0; color: var(--ds-ink-muted); text-wrap: pretty; }

/* ---------- Vision exhibits ---------- */
.mq-exhibits { list-style: none; margin: var(--ds-space-6) 0 0; padding: 0;
               display: grid; gap: 0; border-top: 1px solid var(--ds-line); }
@media (min-width: 900px) { .mq-exhibits { grid-template-columns: repeat(2, 1fr); } }
.mq-exhibit { display: grid; gap: var(--ds-space-2); padding: var(--ds-space-5) var(--ds-space-6) var(--ds-space-6) 0;
              border-bottom: 1px solid var(--ds-line); align-content: start; }
@media (min-width: 900px) {
  .mq-exhibit:nth-child(even) { border-inline-start: 1px solid var(--ds-line); padding-inline-start: var(--ds-space-6); }
}
.mq-exhibit__idx { color: var(--ds-ink-faint); }
.mq-exhibit__title { margin: 0; font-size: var(--ds-text-lg); }
.mq-exhibit__body { margin: 0; color: var(--ds-ink-muted); text-wrap: pretty; }

/* ---------- Photographic plate ----------
   Photograph treatment for this build: full colour, no filter. Both usable
   photographs are microscope captures where the colour IS the measurement —
   emission on the die, interference on the wafer. Desaturating them would
   remove information. What is consistent instead is the plate: a hairline
   frame and a mono caption bar, applied to every photograph on the site. */
/* Split: prose beside a plate. Both photographs are small originals (600 and
   700 px wide) — §4 of the guidelines calls them too small for full-bleed, and
   they are. The plate is capped at native width so nothing is upscaled. */
.mq-split { display: grid; gap: var(--ds-space-6); }
@media (min-width: 1000px) {
  .mq-split { grid-template-columns: minmax(0, 1fr) minmax(0, 34rem); gap: var(--ds-space-8); align-items: start; }
}
.mq-split > :first-child > :last-child { margin-bottom: 0; }
.mq-plate { margin: var(--ds-space-6) 0 0; border: 1px solid var(--ds-line);
            background: var(--ds-surface); max-width: 37.5rem; }
.mq-split .mq-plate { margin-top: 0; }
.mq-plate img { width: 100%; height: auto; }
.mq-plate__cap {
  display: flex; flex-wrap: wrap; gap: var(--ds-space-2) var(--ds-space-4); align-items: baseline;
  padding: var(--ds-space-3) var(--ds-space-4);
  border-top: 1px solid var(--ds-line);
  font-size: var(--ds-text-sm); color: var(--ds-ink-muted);
}

/* ---------- The wavelength readout ---------- */
.mq-chart { margin: var(--ds-space-6) 0 0; border: 1px solid var(--ds-line);
            background: var(--ds-surface); padding: var(--ds-space-5) var(--ds-space-4) 0; }
.mq-chart__svg { width: 100%; height: auto; color: var(--ds-ink-muted); }
.mq-chart__svg text { font-family: var(--ds-font-mono); font-variant-numeric: tabular-nums; }
.mq-chart__tick { font-size: 21px; fill: var(--ds-ink-muted); }
.mq-chart__value { font-size: 23px; fill: var(--ds-ink); }
.mq-chart__axis { font-size: 19px; fill: var(--ds-ink-faint); letter-spacing: 0.14em; text-transform: uppercase; }
.mq-chart__cap { padding: var(--ds-space-3) 0 var(--ds-space-4); margin: 0;
                 border-top: 1px solid var(--ds-line); font-size: var(--ds-text-sm);
                 color: var(--ds-ink-muted); }

/* ---------- Partner roster ----------
   No logo assets exist and the partner set is not final (open question Q9), so
   the names are set as a ruled roster rather than faked as a logo wall. */
.mq-roster { list-style: none; margin: var(--ds-space-6) 0 0; padding: 0;
             display: grid; gap: 0; border-top: 1px solid var(--ds-line); }
@media (min-width: 620px) { .mq-roster { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .mq-roster { grid-template-columns: repeat(4, 1fr); } }
.mq-roster__item {
  padding: var(--ds-space-4) var(--ds-space-5) var(--ds-space-4) 0;
  border-bottom: 1px solid var(--ds-line);
  font-size: var(--ds-text-base); color: var(--ds-ink-muted);
  letter-spacing: var(--ds-tracking-tight);
}

/* ---------- News ---------- */
.mq-newslist { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ds-line); }
.mq-news__link { display: grid; gap: var(--ds-space-2); padding-block: var(--ds-space-5);
                 border-bottom: 1px solid var(--ds-line); text-decoration: none;
                 transition: background-color var(--ds-dur) var(--ds-ease); }
@media (min-width: 860px) {
  .mq-news__link { grid-template-columns: 12rem minmax(0, 1fr); gap: var(--ds-space-2) var(--ds-space-6); }
  .mq-news__date { grid-column: 1; grid-row: 1; }
  .mq-news__title { grid-column: 2; grid-row: 1; }
  .mq-news__excerpt { grid-column: 2; grid-row: 2; }
}
.mq-news__link:hover { background: var(--ds-surface); }
.mq-news__date { color: var(--ds-ink-faint); }
.mq-news__title { margin: 0; font-weight: var(--ds-weight-medium); max-width: 48ch; }
.mq-news__excerpt { margin: 0; color: var(--ds-ink-muted); font-size: var(--ds-text-sm);
                    max-width: 62ch; text-wrap: pretty; }
.mq-news__link:hover .mq-news__title { color: var(--ds-accent); }

/* ---------- Closing ---------- */
.mq-closing { background: var(--ds-bg-alt); }
.mq-closing__head { max-width: 26ch; font-size: clamp(1.9rem, 1.4rem + 2.1vw, 3.05rem); }

/* ---------- Contact ---------- */
.mq-contact__addr { margin: 0 0 var(--ds-space-4); font-size: var(--ds-text-xl);
                    letter-spacing: var(--ds-tracking-tight); }
.mq-contact__addr a { text-decoration: none; border-bottom: 1px solid var(--ds-line-strong); }
.mq-contact__addr a:hover { border-bottom-color: var(--ds-accent); color: var(--ds-accent); }

/* ---------- Footer ---------- */
.ds-footer { position: relative; border-top: var(--ds-rule-weight) solid var(--ds-line); }
.mq-footer__line { margin: var(--ds-space-2) 0 0; font-size: var(--ds-text-sm); max-width: 30ch; }
.ds-footer .mq-plain { font-size: var(--ds-text-sm); }

/* ---------- Motion off switch ----------
   One animation ships on this site: the lattice drift on the Mag ISR page,
   declared in /motion-manifest.json. It stops here, and the static first
   frame — a lattice sitting still over the anomaly — is what remains. */
@media (prefers-reduced-motion: reduce) {
  .motif-dots--sweep { animation: none; }
}