/* ============================================================
   MIGRATION LAYER (2026-07-31). Homepage only, loaded LAST, after refine.css.

   What this is: the parts of lab experiment 4 (the hybrid) that earned their
   place, applied to the EXISTING homepage rather than replacing it. It follows
   the same discipline as refine.css: one file, loaded last, so the whole
   direction reverts by deleting one <link> and nothing else changes.

   NOT touched by this file, on purpose:
   - the ribbon hero (.rh*) and its fallback,
   - the Recent Work section (.work-card, .work-shot),
   - the header, footer, mobile bar and mega menu,
   - any other page. This stylesheet is linked from index.html only.

   Brought over from the hybrid:
   - the typographic scale and spacing rhythm,
   - the systems panel,
   - the day-to-day list as hairline rows instead of boxes,
   - the coverage table,
   - hairline dividers and borderless section treatment.
   ============================================================ */

.mg {
  --mg-hair: rgba(255, 255, 255, .11);
  --mg-hair-2: rgba(255, 255, 255, .18);
  --mg-ink-2: #a8b1c2;
  --mg-navy: #6fa0ff;
  --mg-gold: #d9b877;
  --mg-ok: #5fd6a4;
  --mg-tile: rgba(255, 255, 255, .028);
  --mg-ease: cubic-bezier(.28, .11, .32, 1);
}

/* ---------- Typography: the hybrid's scale, one display weight ----------
   The site already sets headings at 600 (refine.css). This tightens the
   tracking and the leading, which is what actually made the lab pages read as
   considered rather than merely clean. */
.mg h2 { letter-spacing: -.028em; line-height: 1.1; }
.mg h3, .mg .h3 { letter-spacing: -.016em; line-height: 1.3; }
.mg .section-head { max-width: 58ch; }
.mg .section-head .lead { font-size: clamp(1.0625rem, 1rem + .35vw, 1.2rem); line-height: 1.5; }
.mg .eyebrow { font-size: .75rem; letter-spacing: .1em; }

/* ---------- Spacing rhythm ---------- */
.mg .section { padding-block: clamp(72px, 4rem + 3vw, 104px); }
.mg .section-head { margin-bottom: clamp(40px, 2rem + 2vw, 52px); }

/* ---------- Systems panel (new section) ---------- */
.mg-panel {
  max-width: 760px; margin: 0 auto;
  background: var(--mg-tile); border: 1px solid var(--mg-hair);
  border-radius: 20px; padding: 6px 26px 12px;
}
.mg-panel .mg-head {
  display: flex; align-items: center; gap: 9px; padding: 18px 0 14px;
  font-size: .75rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--mg-ink-2);
}
.mg-panel .mg-head svg { width: 15px; height: 15px; color: var(--mg-navy); }
.mg-row { display: flex; align-items: center; gap: 16px; padding: 16px 0; border-top: 1px solid var(--mg-hair); }
.mg-row > svg { width: 19px; height: 19px; color: var(--mg-navy); flex: none; }
.mg-row .t { font-size: .9375rem; font-weight: 600; letter-spacing: -.012em; }
.mg-row .s { font-size: .8125rem; color: var(--mg-ink-2); }
.mg-row .state {
  margin-left: auto; font-size: .625rem; font-weight: 600; letter-spacing: .09em;
  text-transform: uppercase; color: var(--mg-ok); white-space: nowrap;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* ---------- Day to day: hairline rows, not boxes. Same nine items, same
     copy, no content lost: only the container changes. ---------- */
.mg-list { display: grid; gap: 0 44px; grid-template-columns: 1fr; }
.mg-list .card {
  background: none; border: 0; border-top: 1px solid var(--mg-hair);
  border-radius: 0; padding: 20px 0; backdrop-filter: none; -webkit-backdrop-filter: none;
  display: grid; grid-template-columns: 20px 1fr; gap: 14px; align-items: start;
}
.mg-list .card:hover { background: none; border-color: var(--mg-hair-2); transform: none; }
.mg-list .card > svg { width: 19px; height: 19px; color: var(--mg-navy); margin-top: 3px; }
.mg-list .card .h3 { margin: 0 0 4px; font-size: 1rem; grid-column: 2; }
.mg-list .card p { margin: 0; grid-column: 2; font-size: .9375rem; color: var(--mg-ink-2); }

/* ---------- Coverage table (new section): hairlines only, no box ---------- */
.mg-tablewrap { overflow-x: auto; }
/* It is focusable now, so it must show that it is. */
.mg-tablewrap:focus-visible { outline: 2px solid var(--mg-navy); outline-offset: 4px; border-radius: 6px; }
.mg-table { border-collapse: collapse; width: 100%; min-width: 540px; }
.mg-table caption { text-align: left; padding-bottom: 14px; font-size: .8125rem; color: var(--mg-ink-2); }
.mg-table th, .mg-table td {
  text-align: left; padding: 16px 18px 16px 0;
  border-top: 1px solid var(--mg-hair); font-size: .9375rem;
}
.mg-table thead th {
  border-top: 0; padding-top: 0; font-size: .6875rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--mg-ink-2);
}
.mg-table tbody tr:last-child td { border-bottom: 1px solid var(--mg-hair); }
/* display:inline-block matters: the base stylesheet sets svg to block, which
   pushed the tick onto its own line above the word Yes. */
.mg-table td svg { display: inline-block; width: 16px; height: 16px; color: var(--mg-ok); vertical-align: -3px; }
.mg-table td .no { color: var(--mg-ink-2); }

/* ---------- Borderless section treatment. The homepage's inner sections used
     bordered glass cards everywhere; the hybrid's lesson is that the type
     carries it and the boxes were noise. Applied ONLY to the two service card
     grids, never to Recent Work, which needs its frame around a screenshot. */
.mg-flat .card {
  background: var(--mg-tile); border-color: transparent;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.mg-flat .card:hover { background: rgba(255, 255, 255, .05); border-color: transparent; transform: none; }

/* ---------- Hairline section separators instead of heavy blocks ---------- */
.mg-rule { border: 0; border-top: 1px solid var(--mg-hair); margin: 0; }

@media (min-width: 760px) {
  .mg-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
  .mg-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  .mg *, .mg *::before, .mg *::after { transition: none !important; }
}