/* =====================================================================
   MESA QUANTUM — REVAMP OPTION A · "STRUCTURE"
   Site stylesheet. Loads LAST, after:
     ds/tokens/palette.css → ds/tokens/core.css →
     ds/themes/direction-a-structure.css → ds/motifs/motifs.css →
     ds/components/components.css

   Everything here is either (a) a retuned structural token the system
   invites a direction to set, or (b) a pattern the system does not
   ship. Semantic roles only — no raw hex, no --mqn-* reaches into the
   palette from this file.

   The idea: an instrument-maker's annual report. A numbered section
   index, a standing left rail, hairline rules instead of cards, and
   type doing the work photography cannot do — because Mesa Quantum has
   two publishable photographs and one publishable chart, and a hero
   that needs a picture is a hero that cannot ship.
   ===================================================================== */

:root {
  /* Density is the argument of this direction. The system default is
     1280px; the Lockheed anchor runs 1600 and reads like a broadsheet
     partly because of it. 1400 is the widest the shipped type scale
     holds without the measure going slack. Recorded in README.md. */
  --ds-container: 1400px;

  /* Direction A's theme sets a generous 4.5–10rem section rhythm. Pulled in:
     the Lockheed anchor reads mature because it is DENSE, and this direction
     fails if it reads thin. Retuned here rather than in the theme file, which
     is shared. */
  --ds-section-y: clamp(3.25rem, 2.25rem + 4.2vw, 6.5rem);

  /* The standing left rail: section ordinal + label. */
  --mq-rail: 13rem;
  --mq-rail-gap: var(--ds-space-7);
}

/* ---------------------------------------------------------------
   1 · Rules — the connective tissue of the whole layout
   --------------------------------------------------------------- */
.mq-rule {
  height: var(--ds-rule-weight, 1px);
  background: var(--ds-line);
  border: 0;
  margin: 0;
}
.mq-rule--strong { background: var(--ds-line-strong); }

/* ---------------------------------------------------------------
   2 · Header — hairline, sticky, no JavaScript anywhere
   --------------------------------------------------------------- */
.ds-header__inner { flex-wrap: wrap; row-gap: var(--ds-space-3); padding-block: var(--ds-space-3); }
.ds-header__logo img { height: 26px; }

/* The system hides the nav below 900px and expects a JS drawer. This
   build runs no JavaScript, so the nav wraps instead of disappearing. */
.ds-nav {
  display: flex;
  flex-wrap: wrap;
  row-gap: var(--ds-space-2);
  column-gap: var(--ds-space-5);
  margin-inline-start: auto;
}
.ds-nav a:not(.ds-btn) {
  position: relative;
  padding-block: var(--ds-space-1);
  letter-spacing: 0.01em;
}
/* A rule under the current page, not a colour wash. */
.ds-nav a:not(.ds-btn)[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: var(--ds-rule-weight, 1px);
  background: var(--ds-line-strong);
}
.ds-nav .ds-btn { padding: 0.6em 1.1em; }

@media (max-width: 620px) {
  .ds-nav { width: 100%; margin-inline-start: 0; column-gap: var(--ds-space-4); }
  .ds-nav .ds-btn { margin-inline-start: auto; }
}

/* ---------------------------------------------------------------
   3 · Buttons — Lockheed's hard state swap, not a soft fade.
        Fill and text invert completely on hover and focus.
   --------------------------------------------------------------- */
.ds-btn--primary { border-color: var(--ds-accent); }
.ds-btn--primary:hover,
.ds-btn--primary:focus-visible {
  background: var(--ds-bg);
  color: var(--ds-accent);
  border-color: var(--ds-accent);
}
.ds-btn--ghost:hover,
.ds-btn--ghost:focus-visible {
  background: var(--ds-ink);
  color: var(--ds-ink-inverse);
  border-color: var(--ds-ink);
}

/* ---------------------------------------------------------------
   4 · The masthead / hero
   --------------------------------------------------------------- */
.mq-hero { position: relative; overflow: hidden; border-bottom: var(--ds-rule-weight,1px) solid var(--ds-line); }
.mq-hero .motif-outline {
  inset: -14% 0 -14% auto;
  width: min(46%, 620px);
  background-size: cover;
  background-position: center;
  -webkit-mask-image: linear-gradient(to left, #000 30%, transparent 100%);
          mask-image: linear-gradient(to left, #000 30%, transparent 100%);
}
.mq-hero > .ds-container { position: relative; z-index: var(--ds-z-content); }

/* Top line of the masthead: category on the left, where the company
   operates on the right. Real information, not ornament — and it is
   what makes the right-hand third of the hero earn its space. */
.mq-masthead {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--ds-space-4);
  padding-block: var(--ds-space-4);
  border-top: var(--ds-rule-weight,1px) solid var(--ds-line-strong);
}
.mq-masthead p { margin: 0; }
.mq-locations {
  font-size: var(--ds-text-xs);
  letter-spacing: var(--ds-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--ds-ink-faint);
}
.mq-hero .ds-eyebrow { margin: 0; color: var(--ds-ink); }

.mq-hero__body { padding-block: clamp(3rem, 2rem + 6vw, 7rem) clamp(2.5rem, 2rem + 4vw, 5rem); }
.mq-hero h1 {
  font-size: var(--ds-text-4xl);
  font-weight: var(--ds-display-weight);
  line-height: var(--ds-leading-tight);
  letter-spacing: var(--ds-tracking-display);
  text-wrap: balance;
  max-width: 18ch;
  margin: 0 0 var(--ds-space-6);
}
.mq-hero__sub {
  font-size: var(--ds-text-lg);
  line-height: var(--ds-leading-normal);
  color: var(--ds-ink-muted);
  max-width: 54ch;
  margin: 0 0 var(--ds-space-6);
  text-wrap: pretty;
}
.mq-actions { display: flex; flex-wrap: wrap; gap: var(--ds-space-3); }

/* Interior pages get the same masthead, one notch quieter. */
.mq-hero--page .mq-hero__body { padding-block: clamp(2.5rem,1.5rem + 4vw,4.5rem) clamp(2rem,1.5rem + 3vw,3.5rem); }
.mq-hero--page h1 { font-size: var(--ds-text-3xl); max-width: 22ch; }

/* ---------------------------------------------------------------
   5 · The numbered section index — the structural signature.
        [01] · WHAT WE DO   in a standing left rail, hairline between
        rail and column. The device is Lockheed's; the guidelines note
        it is unclaimed and that Direction A is its natural home.
   --------------------------------------------------------------- */
.mq-sec { border-top: var(--ds-rule-weight,1px) solid var(--ds-line); padding-block: var(--ds-section-y); }
.mq-sec--alt { background: var(--ds-bg-alt); }
.mq-sec--first { border-top: 0; }

.mq-sec__grid { display: grid; gap: var(--ds-space-5); }
@media (min-width: 1000px) {
  .mq-sec__grid {
    grid-template-columns: var(--mq-rail) minmax(0, 1fr);
    column-gap: var(--mq-rail-gap);
  }
  .mq-sec__rail {
    border-right: var(--ds-rule-weight,1px) solid var(--ds-line);
    padding-right: var(--mq-rail-gap);
    position: sticky;
    top: 6rem;
    align-self: start;
  }
}
.mq-sec__rail { display: flex; flex-direction: column; gap: var(--ds-space-2); }
.mq-idx {
  font-family: var(--ds-font-mono);
  font-size: var(--ds-text-sm);
  font-variant-numeric: tabular-nums;
  color: var(--ds-accent);
  margin: 0;
}
.mq-label {
  font-size: var(--ds-text-xs);
  font-weight: var(--ds-weight-semibold);
  letter-spacing: var(--ds-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--ds-ink-muted);
  margin: 0;
}
.mq-sec__body > * + * { margin-top: var(--ds-space-5); }
.mq-sec__body h2 { max-width: 26ch; }
.mq-lead {
  font-size: var(--ds-text-lg);
  line-height: var(--ds-leading-normal);
  color: var(--ds-ink-muted);
  max-width: 62ch;
  text-wrap: pretty;
}
.mq-body { max-width: 68ch; text-wrap: pretty; }
/* Prose left, the capability's own pictogram in the margin at the right —
   the one drawing on the page, and it depicts the thing the page is about. */
.mq-figrow { display: grid; gap: var(--ds-space-6); align-items: start; }
@media (min-width: 900px) {
  .mq-figrow { grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--ds-space-8); }
  .mq-figrow .mq-pict--lg { margin-top: var(--ds-space-1); }
}
.mq-body p { margin: 0 0 var(--ds-space-4); }
.mq-body p:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------
   6 · Columns, not cards.
        No rounded boxes, no shadows, no left-border accents. Columns
        separated by hairlines — the newspaper/report answer.
   --------------------------------------------------------------- */
.mq-cols { display: grid; gap: 0; }
.mq-cols > * {
  padding-block: var(--ds-space-5);
  border-top: var(--ds-rule-weight,1px) solid var(--ds-line);
}
@media (min-width: 820px) {
  .mq-cols--3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .mq-cols--2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .mq-cols > * { border-top: 0; border-left: var(--ds-rule-weight,1px) solid var(--ds-line); padding: 0 var(--ds-space-5); }
  .mq-cols > *:first-child { border-left: 0; padding-left: 0; }
  .mq-cols > *:last-child { padding-right: 0; }
}
.mq-cols h3 { margin: var(--ds-space-4) 0 var(--ds-space-2); }
.mq-cols p { margin: 0 0 var(--ds-space-4); color: var(--ds-ink-muted); text-wrap: pretty; }

/* ---------------------------------------------------------------
   7 · Pictograms — one minimal line drawing per capability, drawn
        from the subject itself (a broken satellite link, a phase
        offset, a holdover plateau, a magnetic anomaly, a flaw in a
        section, a track deviation). Monochrome, unfilled, no
        decoration icons anywhere on this site.
   --------------------------------------------------------------- */
.mq-pict { display: block; width: 64px; height: 64px; color: var(--ds-ink); }
.mq-pict--lg { width: 168px; height: 168px; }
.mq-pict .s { stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.mq-pict .s-faint { stroke: currentColor; fill: none; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; opacity: 0.38; }
.mq-pict .s-mark { stroke: var(--ds-accent); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------------------------------------------------------------
   8 · The capability index — a ruled register, one row per entry
   --------------------------------------------------------------- */
.mq-reg { border-top: var(--ds-rule-weight,1px) solid var(--ds-line-strong); }
.mq-reg__row {
  display: grid;
  gap: var(--ds-space-4);
  padding-block: var(--ds-space-6);
  border-bottom: var(--ds-rule-weight,1px) solid var(--ds-line);
  align-items: start;
}
@media (min-width: 820px) {
  .mq-reg__row { grid-template-columns: 5rem minmax(0, 22rem) minmax(0, 1fr); column-gap: var(--ds-space-6); }
}
.mq-reg__row h3 { margin: 0 0 var(--ds-space-2); }
.mq-link { color: inherit; text-decoration: none; display: inline-flex; align-items: baseline; gap: 0.45em; }
.mq-link span { color: var(--ds-accent); font-weight: var(--ds-weight-medium); }
.mq-link:hover { text-decoration: underline; text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
.mq-reg__row p { margin: 0; color: var(--ds-ink-muted); text-wrap: pretty; }
.mq-reg__more { display: inline-block; margin-top: var(--ds-space-3); font-size: var(--ds-text-sm); font-weight: var(--ds-weight-semibold); color: var(--ds-accent); text-decoration: none; }
.mq-reg__more:hover { text-decoration: underline; text-underline-offset: 0.25em; }

/* Applications, set as a ruled list rather than pills — an
   application is a claim, not a tag. */
.mq-apps { list-style: none; margin: var(--ds-space-4) 0 0; padding: 0; }
.mq-apps li {
  padding-block: var(--ds-space-2);
  border-top: var(--ds-rule-weight,1px) solid var(--ds-line);
  font-size: var(--ds-text-sm);
  color: var(--ds-ink-muted);
  display: flex;
  gap: var(--ds-space-3);
}
.mq-apps b { font-weight: var(--ds-weight-semibold); color: var(--ds-ink); flex: 0 0 13rem; }
@media (max-width: 620px) { .mq-apps li { flex-direction: column; gap: var(--ds-space-1); } }

/* ---------------------------------------------------------------
   9 · Plates — the two real photographs, framed and captioned the way
        a technical report plates its figures. Full colour, no scrim,
        no duotone: in both images the colour is measurement (the
        laser spot, the die array), so removing it removes information.
   --------------------------------------------------------------- */
.mq-plates { display: grid; gap: var(--ds-space-6); }
@media (min-width: 820px) { .mq-plates--2 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
/* A single plate never runs past the native size of the file behind it —
   700px. Blowing a 700px photograph up to a 1220px column is the one way to
   make a real photograph look like a bad one. */
.mq-plates--one { max-width: 700px; }
.mq-plate { margin: 0; }
.mq-plate img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border: var(--ds-rule-weight,1px) solid var(--ds-line-strong); }
.mq-plate figcaption { margin-top: var(--ds-space-3); font-size: var(--ds-text-sm); color: var(--ds-ink-muted); text-wrap: pretty; }
.mq-plate figcaption b {
  display: block;
  font-size: var(--ds-text-xs);
  letter-spacing: var(--ds-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--ds-ink);
  margin-bottom: var(--ds-space-1);
}

/* ---------------------------------------------------------------
   10 · Stats — figures set large, label beneath, hairline above
   --------------------------------------------------------------- */
.mq-stats { display: grid; gap: 0; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.mq-stat { padding-block: var(--ds-space-5); border-top: var(--ds-rule-weight,1px) solid var(--ds-line-strong);
            display: flex; flex-direction: column; }
@media (min-width: 720px) { .mq-stat { padding-right: var(--ds-space-6); } }
.mq-stat__v { font-size: var(--ds-text-2xl); font-weight: var(--ds-display-weight); letter-spacing: var(--ds-tracking-display); line-height: 1.02; text-wrap: balance; }
.mq-stat__v--word { font-size: var(--ds-text-xl); }
.mq-stat__l { font-size: var(--ds-text-sm); color: var(--ds-ink-muted); margin-top: auto; padding-top: var(--ds-space-4); max-width: 26ch; }

/* ---------------------------------------------------------------
   11 · Institution row — names set as text. There is no confirmed
        partner logo set (open question Q9), and inventing one would
        be worse than setting the names honestly.
   --------------------------------------------------------------- */
.mq-insts { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
@media (min-width: 720px) { .mq-insts { grid-template-columns: repeat(4, minmax(0,1fr)); } }
.mq-insts li {
  padding-block: var(--ds-space-4);
  border-top: var(--ds-rule-weight,1px) solid var(--ds-line);
  font-size: var(--ds-text-sm);
  font-weight: var(--ds-weight-medium);
  letter-spacing: 0.01em;
  color: var(--ds-ink);
}
@media (min-width: 720px) { .mq-insts li { padding-right: var(--ds-space-5); } }

/* ---------------------------------------------------------------
   11b · The statement band — the single deep surface on a light page.
        One full-bleed dark band between the capability index and the
        evidence, carrying the company's own positioning line. It gives
        the homepage the two-tone alternation the reference sites use,
        without turning the direction into a dark one.
   --------------------------------------------------------------- */
.mq-statement {
  background: var(--ds-surface-deep);
  color: var(--ds-ink-inverse);
  padding-block: clamp(2.75rem, 2rem + 3vw, 5rem);
}
.mq-statement p {
  margin: 0;
  font-size: var(--ds-text-2xl);
  font-weight: var(--ds-weight-semibold);
  line-height: var(--ds-leading-snug);
  letter-spacing: var(--ds-tracking-display);
  max-width: 34ch;
  text-wrap: balance;
}
@media (min-width: 1000px) {
  .mq-statement p { margin-inline-start: calc(var(--mq-rail) + var(--mq-rail-gap)); }
}

/* ---------------------------------------------------------------
   12 · Closing statement
   --------------------------------------------------------------- */
.mq-closing h2 { font-size: var(--ds-text-3xl); max-width: 24ch; }

/* ---------------------------------------------------------------
   13 · Definition list used for locations, product areas, newsroom
   --------------------------------------------------------------- */
.mq-defs { margin: 0; }
.mq-def { padding-block: var(--ds-space-5); border-top: var(--ds-rule-weight,1px) solid var(--ds-line); display: grid; gap: var(--ds-space-3); }
.mq-def:first-child { border-top-color: var(--ds-line-strong); }
@media (min-width: 900px) { .mq-def { grid-template-columns: minmax(0, 18rem) minmax(0, 1fr); column-gap: var(--ds-space-6); } }
.mq-def h3 { margin: 0; }
.mq-def p { margin: 0; color: var(--ds-ink-muted); max-width: 64ch; text-wrap: pretty; }
.mq-def__note { font-size: var(--ds-text-sm); }

/* ---------------------------------------------------------------
   14 · The wavelength-vs-temperature readout on the VCSEL page.
        A measured result, built as inline SVG with real text rather than a
        picture of a chart: monochrome plus the accent, where the accent
        marks the measured trace and nothing else. The rubidium D1 target
        line is drawn muted, in the same ink as its label, because it is a
        reference we are working toward rather than a Mesa Quantum result.
        That is the whole colour rule for readouts on this site.
   --------------------------------------------------------------- */
.mq-figure { margin: 0; }
.mq-figure svg { width: 100%; height: auto; display: block; color: var(--ds-ink); }
.mq-figure figcaption { margin-top: var(--ds-space-4); font-size: var(--ds-text-sm); color: var(--ds-ink-muted); max-width: 64ch; text-wrap: pretty; }
.mq-axis { stroke: var(--ds-line-strong); fill: none; stroke-width: 1; }
.mq-tick { stroke: var(--ds-line); fill: none; stroke-width: 1; }
.mq-target { stroke: var(--ds-ink-muted); fill: none; stroke-width: 1; stroke-dasharray: 4 3; }
.mq-mark { stroke: var(--ds-accent); fill: none; stroke-width: 2; }
.mq-dot { fill: var(--ds-accent); }
.mq-svgtext { fill: var(--ds-ink); font-family: var(--ds-font); font-size: 15px; }
.mq-svgtext--muted { fill: var(--ds-ink-muted); font-size: 14px; letter-spacing: 0.02em; }
.mq-svgtext--mark { fill: var(--ds-accent); font-family: var(--ds-font-mono); font-size: 14px; font-weight: 600; }

/* ---------------------------------------------------------------
   15 · Newsroom register
   --------------------------------------------------------------- */
.mq-news { list-style: none; margin: 0; padding: 0; border-top: var(--ds-rule-weight,1px) solid var(--ds-line-strong); }
.mq-news li { padding-block: var(--ds-space-5); border-bottom: var(--ds-rule-weight,1px) solid var(--ds-line); display: grid; gap: var(--ds-space-2); }
@media (min-width: 900px) { .mq-news li { grid-template-columns: 11rem minmax(0,1fr); column-gap: var(--ds-space-6); align-items: baseline; } }
.mq-news__kind { font-size: var(--ds-text-xs); letter-spacing: var(--ds-tracking-eyebrow); text-transform: uppercase; color: var(--ds-ink-faint); }
.mq-news__title { font-size: var(--ds-text-lg); font-weight: var(--ds-weight-semibold); letter-spacing: var(--ds-tracking-tight); margin: 0; text-wrap: pretty; }

/* ---------------------------------------------------------------
   16 · Contact
   --------------------------------------------------------------- */
.mq-contact a { color: var(--ds-accent); text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); }
.mq-contact__mail { font-size: var(--ds-text-xl); font-weight: var(--ds-weight-semibold); letter-spacing: var(--ds-tracking-tight); }

/* ---------------------------------------------------------------
   17 · Footer
   --------------------------------------------------------------- */
.ds-footer { border-top: 0; }
.ds-footer__cols { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--ds-space-7) var(--ds-space-6); }
.mq-foot__brand { display: grid; gap: var(--ds-space-4); }
.mq-foot__brand img { height: 26px; width: auto; filter: var(--ds-logo-filter-footer, brightness(0) invert(1)); }
.mq-foot__statement { margin: 0; max-width: 34ch; line-height: var(--ds-leading-normal); }
.mq-foot__title {
  font-size: var(--ds-text-xs);
  letter-spacing: var(--ds-tracking-eyebrow);
  text-transform: uppercase;
  color: color-mix(in srgb, currentColor 65%, transparent);
  margin: 0 0 var(--ds-space-4);
}
.mq-foot__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--ds-space-3); font-size: var(--ds-text-sm); }
.mq-foot__list address { font-style: normal; line-height: var(--ds-leading-normal); }
.ds-footer__bottom { font-size: var(--ds-text-xs); letter-spacing: 0.02em; }
.mq-foot__opt { color: color-mix(in srgb, currentColor 70%, transparent); }

/* ---------------------------------------------------------------
   18 · Breadcrumb
   --------------------------------------------------------------- */
.mq-crumb { font-size: var(--ds-text-xs); letter-spacing: var(--ds-tracking-eyebrow); text-transform: uppercase; color: var(--ds-ink-faint); margin: 0 0 var(--ds-space-4); }
.mq-crumb a { color: inherit; text-decoration: none; }
.mq-crumb a:hover { color: var(--ds-ink); }

/* ---------------------------------------------------------------
   19 · Prose links inside body copy
   --------------------------------------------------------------- */
.mq-body a, .mq-lead a, .mq-def p a { color: var(--ds-accent); }

/* ---------------------------------------------------------------
   20 · Print — the register should survive being printed, because
        this audience prints things.
   --------------------------------------------------------------- */
@media print {
  .ds-header, .ds-skip-link { display: none; }
  .ds-footer { background: none; color: var(--ds-ink); }
  .mq-sec__rail { border: 0; }
}