/* ===== genauto.html only — engineering write-up =====
   Builds on page-styles.css. Everything is scoped to .ga-* so other pages are untouched.
   The write-up sits on a full-width white sheet (.ga-paper); paper-edges.js
   breaks its top and bottom edges up into navy scanlines. */

:root {
  --ga-col: 63vw;              /* width of the write-up column */
  --ga-ink: #0f1f30;           /* text on the sheet */
  --ga-ink-soft: rgba(15, 31, 48, 0.62);
  --ga-panel: #f0f3f6;         /* boxes that hold tables */
  --ga-rule: rgba(15, 31, 48, 0.14);
  --ga-measure: 62ch;          /* comfortable line length for paragraphs */
  --ga-fade-y: 7rem;           /* room for the scanline edge above/below the content */
}


/* ---------- the white sheet ---------- */

.ga-paper {
  position: relative;
  isolation: isolate;
  margin: 3rem 0 2rem 0;
  padding: calc(var(--ga-fade-y) + 1rem) 0 calc(var(--ga-fade-y) + 3rem) 0;
  overflow: visible;
  background: #ffffff;   /* without JS the sheet is simply a white block */
}

.ga-edge {
  position: absolute;
  z-index: -1;
  pointer-events: none;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}
.ga-edge.top    { top: 0; left: 0; }
.ga-edge.bottom { bottom: 0; left: 0; }

/* page-styles.css colours every element light; flip to ink on the sheet */
.ga-paper * { color: var(--ga-ink); }

/* page-styles.css sets overflow-x: hidden on every element, which makes the
   other axis scrollable. Text never needs to scroll, so turn that off. */
.ga-paper h2, .ga-paper h3, .ga-paper h4, .ga-paper p, .ga-paper li,
.ga-paper ul, .ga-paper figcaption, .ga-paper span, .ga-paper strong,
.ga-h2, .ga-h3, .ga-flow, .ga-sec { overflow: visible !important; }


/* ---------- sections + headings ---------- */

.ga-sec {
  width: var(--ga-col);
  margin: 2.6rem auto 0 auto;
  scroll-margin-top: 1.5rem;
}
.ga-paper > .ga-sec:first-of-type { margin-top: 0; }

.ga-h2 {
  margin: 0 0 0.5rem 0;
  font-size: 2.6rem;
  font-weight: 600 !important;
  letter-spacing: 0.005em;
  line-height: 1.15;
  white-space: normal;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 1.4rem;
}
/* the divider starts where the title ends and runs to the right edge */
.ga-h2::after {
  content: "";
  flex: 1 1 auto;
  min-width: 2rem;
  height: 2px;
  background: currentColor;
  opacity: 0.4;
  transform: translateY(0.12em);   /* sit on the optical middle of the capitals */
}
.ga-h2 > span { flex: 0 1 auto; }
.ga-h2 small { font-size: 0.55em; color: var(--ga-ink-soft); font-weight: 400; }

.ga-h3 {
  margin: 2rem 0 0.7rem 0;
  font-size: 1.3rem;
  font-weight: 600 !important;
  line-height: 1.25;
  white-space: normal;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 1rem;
}
/* lighter divider running from the subsection title to the right edge */
.ga-h3::after {
  content: "";
  flex: 1 1 auto;
  min-width: 2rem;
  height: 1.5px;
  background: currentColor;
  opacity: 0.2;
  transform: translateY(0.1em);
}


/* ---------- text ---------- */

.ga-paper p,
.ga-paper li {
  font-size: 0.97rem;
  font-weight: 400 !important;
  line-height: 1.65;
  text-align: left;
}
.ga-paper p { margin: 0 0 0.7rem 0; max-width: 100ch !important; }
.ga-paper p:last-child { margin-bottom: 0; }
.ga-paper strong { font-weight: 600 !important; }

.ga-lead { font-size: 1.1rem !important; line-height: 1.55 !important; max-width: 100ch !important; }

.ga-paper ul { margin: 0 0 0 0; padding-left: 1.15rem; }
.ga-paper li { margin-bottom: 0.25rem; }

.ga-note { font-size: 0.9rem !important; color: var(--ga-ink-soft) !important; }


/* ---------- layout ---------- */

/* two (or more) columns; --c sets the track sizes */
.ga-cols {
  display: grid;
  grid-template-columns: var(--c, 1fr 1fr);
  gap: var(--g, 1.6rem);
  align-items: center;
}
.ga-cols.top { align-items: center !important; }

.ga-stack { display: flex; flex-direction: column; gap: var(--g, 1.2rem); }
.ga-stack.center { align-items: center; }

/* a row of figures that sit close together around the centre */
.ga-strip {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--g, 1rem);
}


/* ---------- figures ---------- */

.ga-fig {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: visible;
}

/* by default a figure is sized by height, so rows of them pack tightly */
.ga-fig img,
.ga-fig video {
  display: block;
  height: var(--h, 220px);
  width: auto;
  max-width: 100%;
  object-fit: contain;
}
.ga-fig img { cursor: zoom-in; }

/* ...or by width, when it should fill its column */
.ga-fig.fill { align-items: stretch; }
.ga-fig.fill img,
.ga-fig.fill video { width: 100%; height: auto; max-height: var(--h, none); }

/* photos and videos get a fixed frame */
.ga-fig.photo img,
.ga-fig.photo video {
  width: var(--w, auto);
  height: var(--h, 220px);
  object-fit: cover;
  cursor: default;
}
.ga-fig.photo.fill img,
.ga-fig.photo.fill video { width: 100%; height: auto; aspect-ratio: var(--ar, 4 / 3); }

.ga-fig figcaption {
  position: static;
  transform: none;
  margin: auto;
  white-space: normal;
  text-shadow: none;
  width: auto;
  max-width: 34ch;
  padding-top: 0.4rem !important;
  font-size: 0.8rem;
  font-weight: 400;
  line-height: 1.4;
  text-align: center !important;
  align-self: center;
  color: var(--ga-ink-soft);
}

/* renders that were cropped in the deck: fade the cut edge into the sheet */
.bleed-r  img { -webkit-mask-image: linear-gradient(to left, transparent, #000 18%); mask-image: linear-gradient(to left, transparent, #000 18%); }
.bleed-lr img { -webkit-mask-image: linear-gradient(to right, transparent, #000 15%, #000 85%, transparent); mask-image: linear-gradient(to right, transparent, #000 15%, #000 85%, transparent); }


/* ---------- arrows + reasoning chains (the ⇒ / ⇓ steps from the slides) ---------- */

.ga-arrow {
  display: inline-flex;
  flex: none;
  width: 40px;
  height: 24px;
  color: var(--ga-ink);
  overflow: visible !important;
}
.ga-arrow svg { width: 100%; height: 100%; overflow: visible; }
.ga-arrow.down { transform: rotate(90deg); }
.ga-arrow * { color: inherit; }

.ga-flow {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7rem;
}
.ga-flow > .ga-arrow { margin: auto; }
.ga-flow p { margin: 0; }

/* inline chain: text ⇒ text ⇒ text */
.ga-chain { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.9rem; max-width: 100%; }
.ga-chain > span:not(.ga-arrow) { font-size: 1.05rem; line-height: 1.6; }

/* "+" and "=" between sketches */
.ga-op { font-size: 2rem; font-weight: 300 !important; line-height: 1; }


/* ---------- boxes (tables keep their panel) ---------- */

.ga-box {
  background: var(--ga-panel);
  padding: 1rem 1.4rem !important;
  width: fit-content;
  max-width: 100%;
  box-sizing: border-box;
}

.ga-spec {
  border-collapse: collapse;
  font-size: 0.9rem;
  font-variant-numeric: tabular-nums;
}
.ga-spec th,
.ga-spec td {
  text-align: left;
  padding: 0.45rem 1.4rem 0.45rem 0;
  border-bottom: 1px solid var(--ga-rule);
  font-weight: 400 !important;
  white-space: nowrap;
}
.ga-spec tr:last-child th, .ga-spec tr:last-child td { border-bottom: none; }
.ga-spec td:last-child, .ga-spec th:last-child { padding-right: 0; }
.ga-spec thead th { font-size: 0.8rem; font-weight: 600 !important; color: var(--ga-ink-soft); }
.ga-spec td.margin { color: #d63a55; font-weight: 600 !important; }

.ga-calc {
  width: fit-content;
  max-width: 100%;
  box-sizing: border-box;
  padding: 0.8rem 1.3rem;
  background: var(--ga-panel);
  border-left: 3px solid rgba(15, 31, 48, 0.25);
  font-size: 1.02rem;
  line-height: 1.85;
  text-align: left !important;
}
/* equations are set in a math serif, with italic variables */
.ga-math, .ga-math * {
  font-family: "STIX Two Text", "Cambria Math", "Times New Roman", serif !important;
  font-variant-numeric: lining-nums;
}
.ga-math i { font-style: italic !important; }
.ga-math .op { padding: 0 0.25em; }
.ga-math .note, .ga-math .note * { font-size: 0.85em; color: var(--ga-ink-soft) !important; }
.ga-math .note { margin-bottom: 0.2rem; line-height: 1.6; }
.ga-math .res { font-weight: 600 !important; }

.frac { display: inline-flex; flex-direction: column; vertical-align: middle; text-align: center; margin: 0 0.2rem; line-height: 1.3; }
.frac > span:first-child { border-bottom: 1px solid currentColor; padding: 0 0.2rem; }


/* ---------- placeholders for media of the final build ---------- */

.ga-ph {
  aspect-ratio: var(--ar, 16 / 9);
  width: 100%;
  box-sizing: border-box;
  border: 1.5px dashed rgba(15, 31, 48, 0.35);
  background: repeating-linear-gradient(0deg, transparent 0 10px, rgba(15, 31, 48, 0.045) 10px 11px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 1rem;
  text-align: center;
}
.ga-ph strong { font-size: 0.95rem; }
.ga-ph span { font-size: 0.82rem; color: var(--ga-ink-soft) !important; }


/* ---------- intro diagram: research → implementation → application ---------- */

.ga-drift {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 1.4rem;
  align-items: center;
  margin-top: 1.4rem;
}
.ga-drift, .ga-drift .col, .ga-drift .col * { overflow: visible !important; }
.ga-drift .col { display: flex; flex-direction: column; gap: 0.7rem; }
.ga-drift .col-title { font-size: 1.05rem; font-weight: 500 !important; text-align: center; margin-bottom: 0.3rem; }

.ga-paperref { padding: 0.75rem 0.95rem; background: var(--ga-panel); }
.ga-paperref:nth-child(3) { background: #e6e9ee; }
.ga-paperref:nth-child(4) { background: #dbe0e7; }
.ga-paperref b { display: block; font-size: 0.85rem; font-weight: 600 !important; line-height: 1.35; margin-bottom: 0.25rem; }
.ga-paperref span { font-size: 0.75rem; line-height: 1.45; color: var(--ga-ink-soft) !important; display: block; }

.ga-pill {
  background: var(--dark-secondary);
  padding: 0.55rem 1rem;
  text-align: center;
  font-size: 0.92rem;
  font-weight: 500 !important;
}
.ga-paper .ga-pill, .ga-paper .ga-pill * { color: var(--light-primary); }
.ga-pill + .ga-sub { margin-top: -0.2rem; }
.ga-sub { font-size: 0.8rem !important; text-align: center !important; line-height: 1.5 !important; color: var(--ga-ink-soft) !important; margin: 0 !important; max-width: none !important; }

.ga-highlight {
  border: 2px dashed var(--ga-ink);
  padding: 0.9rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  position: relative;
}
.ga-highlight .tag {
  position: absolute;
  top: -0.7rem;
  right: 0.8rem;
  background: #fff;
  padding: 0 0.4rem;
  font-size: 0.78rem;
  font-weight: 600 !important;
  color: #d63a55 !important;
}

.ga-goal { padding: 0.75rem 0.95rem; border: 1.5px solid var(--ga-ink); }
.ga-goal b { display: block; font-size: 0.9rem; font-weight: 600 !important; line-height: 1.35; }
.ga-goal span { display: block; font-size: 0.8rem; color: var(--ga-ink-soft) !important; margin-top: 0.15rem; }


/* ---------- requirements list ---------- */

.ga-reqs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.6rem 2.6rem;
}
.ga-reqs h4 { margin: 0 0 0.35rem 0; font-size: 1.1rem; font-weight: 600 !important; }
.ga-reqs ul { margin: 0; }
.ga-reqs li { font-size: 0.98rem; }


/* ---------- carousels on the sheet ---------- */

.ga-sec .splide { max-width: 100%; margin-top: 2rem !important; margin-bottom: -3rem !important;}
.ga-paper .splide__arrow svg { fill: #c5ccd5 !important; }
.ga-paper .splide__arrow:hover svg { fill: var(--dark-secondary) !important; }


/* ---------- section navigation ---------- */

.ga-nav {
  position: fixed;
  right: 14px;
  top: 50%;
  transform: translate(8px, -50%);
  z-index: 60;
  padding: 0.7rem 0.8rem 0.7rem 1rem;
  background: rgba(11, 33, 53, 0.55);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  border-radius: 6px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s linear 0.25s;
  overflow: visible;
}
.ga-nav.is-visible,
.ga-nav.is-open,
.ga-nav:focus-within {
  opacity: 1;
  visibility: visible;
  transform: translate(0, -50%);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s;
}
.ga-nav ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 0.15rem; overflow: visible; }
.ga-nav li { overflow: visible; }
/* labels on the left, ticks on the right edge */
.ga-nav a {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  gap: 0.7rem;
  padding: 0.3rem 0;
  text-decoration: none;
  font-size: 0.85rem;
  color: rgba(240, 240, 240, 0.75);
  white-space: nowrap;
  overflow: visible;
  text-shadow: 0 1px 2px rgba(5, 18, 32, 0.5);
}
.ga-nav .tick {
  display: block;
  width: 12px;
  height: 6px;
  background: rgba(240, 240, 240, 0.45);
  transition: width 0.2s ease, background 0.2s ease;
}
.ga-nav a:hover,
.ga-nav a:focus-visible { color: #ffffff; }
.ga-nav a[aria-current="true"] { color: #ffffff; font-weight: 500; }
.ga-nav a[aria-current="true"] .tick { width: 26px; background: var(--light-accent); }
.ga-nav a:focus-visible { outline: 1px solid rgba(255, 255, 255, 0.6); outline-offset: 3px; }
.ga-nav .label { overflow: visible; }

@media (hover: hover) {
  .ga-nav a:hover .tick { width: 20px; background: #ffffff; }
  .ga-nav:hover { opacity: 1; visibility: visible; transform: translate(0, -50%); transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s; }
}

@media (prefers-reduced-motion: reduce) {
  .ga-nav, .ga-nav .tick { transition: none; }
}


/* ---------- mobile ---------- */

@media (max-width: 1000px) {
  :root { --ga-col: 92vw; --ga-fade-y: 3.2rem; }

  .ga-paper { margin: 0.8rem 0 1rem 0; }
  .ga-sec { margin-top: 1.6rem; }
  .ga-h2 { font-size: 1.25rem; margin-bottom: 0.6rem; gap: 0.6rem; }
  .ga-h2 small { font-size: 0.7em; }
  .ga-h3 { font-size: 0.98rem; margin: 1.3rem 0 0.5rem 0; }

  /* page-styles.css shrinks every paragraph with !important on small screens */
  .ga-paper p,
  .ga-paper li { font-size: 0.84rem !important; line-height: 1.55 !important; }
  .ga-paper p { margin: 0 0 0.55rem 0 !important; }
  .ga-paper p:last-child { margin-bottom: 0 !important; }
  .ga-lead { font-size: 0.9rem !important; }
  .ga-label { font-size: 0.62rem !important; }

  .ga-cols { grid-template-columns: minmax(0, 1fr) !important; gap: 0.9rem; }
  .ga-strip { gap: 0.5rem; }
  .ga-fig img, .ga-fig video { height: calc(var(--h, 220px) * 0.55); }
  .ga-fig.fill img, .ga-fig.fill video { height: auto; max-height: 34svh; }
  .ga-fig.photo img, .ga-fig.photo video { width: calc(var(--w, 300px) * 0.55); }
  .ga-fig figcaption { font-size: 0.66rem; }

  .ga-drift { grid-template-columns: minmax(0, 1fr); gap: 0.6rem; margin-top: 0.8rem; }
  .ga-drift > .ga-arrow { transform: rotate(90deg); justify-self: center; width: 28px; height: 18px; }
  .ga-drift .col-title { font-size: 0.9rem; }

  .ga-reqs { grid-template-columns: minmax(0, 1fr); gap: 0.8rem; }

  .ga-spec { font-size: 0.72rem; }
  .ga-spec th, .ga-spec td { padding: 0.3rem 0.6rem 0.3rem 0; }
  .ga-calc { font-size: 0.82rem; padding: 0.6rem 0.8rem; }
  .ga-box { padding: 0.6rem 0.7rem !important; overflow-x: auto !important; }
  .ga-spec thead th { white-space: normal; }

  .ga-question { font-size: 1rem !important; margin: 0.9rem auto !important; }
  .ga-mine { font-size: 0.9rem !important; }

}


/* ---------- added components ---------- */

/* a reasoning chain laid out left to right: step ⇒ step ⇒ step */
.ga-steps {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 1rem;
  align-items: center;
}
.ga-steps p { margin: 0 !important; font-size: 0.98rem !important; }

/* a paragraph centred under a row of figures */
.ga-under { margin: 1rem auto 0 auto !important; }

/* small inline graph recreated from the reaction wheel slide */
.ga-graph { width: 230px; height: auto; display: block; }
.ga-graph * { overflow: visible; }

/* the perception section stays on the navy page */
.ga-dark { width: 63vw; margin: 0 auto; scroll-margin-top: 1.5rem; }
.ga-dark .ga-h2 { color: var(--light-primary); }

@media (max-width: 1000px) {
  .ga-steps { grid-template-columns: minmax(0, 1fr); gap: 0.6rem; }
  .ga-steps > .ga-arrow { transform: rotate(90deg); justify-self: start; margin-left: 1rem; }
  .ga-dark { width: 95vw; }
}


/* =====================================================================
   Layout helpers added in this revision
   ===================================================================== */

/* tables should never clip: let the box size to the table */
.ga-box, .ga-box * { overflow: visible !important; }

/* ---------- grids with aligned rows ----------
   Children are placed with inline grid-area, so rows line up across
   columns (labels with labels, figures with figures, text with text).
   On phones every child falls back to source order. */
.ga-grid {
  display: grid;
  grid-template-columns: var(--c, minmax(0, 1fr) auto minmax(0, 1fr));
  column-gap: var(--g, 1.3rem);
  row-gap: var(--rg, 0.55rem);
  align-items: start;
}
.ga-grid > .ga-arrow { align-self: center; justify-self: center; }
.ga-strip[style*="nowrap"] > .ga-fig { flex: 0 1 auto; min-width: 0; }
.ga-grid .ga-fig img,
.ga-grid .ga-fig video { height: var(--h, 220px); }
.ga-grid > .ga-fig,
.ga-grid > .ga-strip { align-self: center; justify-self: center; }
.ga-grid > p { margin: 0 !important; }

/* problem / solution labels */
.ga-label {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  overflow: visible !important;
}
.ga-label::before { content: ""; width: 18px; height: 3px; background: currentColor; }
.ga-paper .ga-label.problem { color: #d63a55; }
.ga-paper .ga-label.solution { color: var(--ga-ink); }

/* ---------- text + figure pairs that size to each other ----------
   genauto-layout.js sets the figure's width so its height matches the text
   next to it. Without JS it falls back to a 45% column. */
.ga-fit {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--g, 2rem);
  align-items: center;
}
.ga-fit.fig-left { grid-template-columns: auto minmax(0, 1fr); }
.ga-fit > .ga-fig.fit { width: 45%; min-width: 0; }
.ga-fit > .ga-fig.fit img,
.ga-fit > .ga-fig.fit video { width: 100%; height: auto; max-height: none; }
.ga-fit.is-fitted > .ga-fig.fit { width: auto; }

/* ---------- media placeholders block at the top ---------- */
.ga-media {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  grid-template-rows: 1fr 1fr;
  gap: 0.9rem;
  margin: 1.4rem 0 2.6rem 0;
}
.ga-media > .ga-ph:first-child { grid-row: span 2; }
.ga-media > .ga-ph:not(:first-child) { aspect-ratio: auto; height: 100%; }

/* ---------- goals: a plain bullet list under the drifting section ---------- */
.ga-goals { margin: 0.2rem 0 0 0; padding-left: 1.15rem !important; }
.ga-goals li { margin: 0 0 0.12rem 0; }
#requirements { margin-top: 1.4rem; }

/* ---------- research cards: link icon in the corner ---------- */
.ga-paperref { position: relative; padding-right: 2.4rem; }
.ga-paperref .ga-link {
  position: absolute;
  right: 0.55rem;
  bottom: 0.5rem;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  text-decoration: none;
  overflow: visible;
}
.ga-paperref .ga-link svg { width: 15px; height: 15px; }
.ga-paperref .ga-link:hover,
.ga-paperref .ga-link:focus-visible { background: rgba(15, 31, 48, 0.1); }
.ga-paperref .ga-link:focus-visible { outline: 2px solid var(--ga-ink); outline-offset: 1px; }

/* ---------- system simplification ----------
   One row: [sketch] -> [sketch] -> [sketch], captions under each, and the
   explanation underneath the whole row. Stays a row on phones too. */
.ga-simp {
  display: grid;
  margin: 0.4rem auto 0 auto;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
  column-gap: 0.9rem;
  align-items: center;
  justify-items: center;
}
.ga-simp > .ga-fig { width: 100%; }
.ga-simp > .ga-fig img { width: 100%; height: var(--h, 190px); object-fit: contain; }
.ga-simp > .ga-fig figcaption { min-height: 2.8em; }
.ga-simp-text { margin: 1.1rem auto 0 auto; max-width: 100ch; }

/* three sketches side by side that should never wrap */
.ga-row3 { flex-wrap: nowrap !important; }
.ga-row3 > .ga-fig { flex: 0 1 auto; min-width: 0; }

/* ---------- the "impossible" question ---------- */
.ga-question {
  margin: 1.4rem auto !important;
  max-width: 44ch !important;
  text-align: center !important;
  font-size: 1.25rem !important;
  line-height: 1.45 !important;
  font-weight: 500 !important;
}

/* ---------- industry solutions ---------- */
.ga-industry .ga-fig.photo { width: 100%; }
.ga-industry .ga-fig.photo img { width: 100%; height: auto; max-height: 260px; object-fit: contain; }

/* price comparison */
.ga-price { font-size: 1rem !important; margin: 0 !important; }
.ga-price strong { font-weight: 700 !important; }
.ga-mine { text-align: center !important; margin: 1rem auto 0 auto !important; font-size: 1.05rem !important; }
.ga-mine strong { color: #d63a55 !important; }

/* bold sub-titles above an explanation (reaction wheel, pendulum) */
.ga-paper .ga-subtitle { font-size: 1.08rem !important; font-weight: 600 !important; margin: 0 !important; }

@media (max-width: 1000px) {
  .ga-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .ga-grid > * { grid-area: auto !important; justify-self: start; }
  .ga-grid > .ga-arrow { transform: rotate(90deg); justify-self: center; }
  .ga-grid .ga-fig img, .ga-grid .ga-fig video { height: calc(var(--h, 220px) * 0.7); }
  .ga-grid > .ga-fig, .ga-grid > .ga-strip { justify-self: center; }

  .ga-fit, .ga-fit.fig-left { grid-template-columns: minmax(0, 1fr); }
  .ga-fit > .ga-fig.fit { width: 100% !important; }

  .ga-media { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; }
  .ga-media > .ga-ph:first-child { grid-row: auto; }
  .ga-media > .ga-ph:not(:first-child) { aspect-ratio: 16 / 9; height: auto; }

  .ga-simp { column-gap: 0.35rem; }
  .ga-simp > .ga-arrow { width: 18px; height: 12px; }
  .ga-simp > .ga-fig img { height: calc(var(--h, 190px) * 0.45); }
  .ga-simp > .ga-fig figcaption { font-size: 0.58rem; min-height: 0; }
  .ga-simp-text { margin-top: 0.7rem; }
  .ga-h2 { gap: 0.8rem; }
}


/* ---------- collapsible sections (phones only) ----------
   genauto-layout.js wraps each section's content in .ga-sec-body and turns
   the heading into a toggle button. On desktop the button is plain text. */
.ga-toggle {
  all: unset;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font: inherit;
  color: inherit;
  cursor: default;
}
.ga-toggle .chev { display: none; }

@media (max-width: 1000px) {
  .ga-toggle { cursor: pointer; }
  .ga-toggle:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
  .ga-toggle .chev {
    display: inline-block;
    width: 0.5em;
    height: 0.5em;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translateY(-0.15em);
    transition: transform 0.2s ease;
  }
  .is-collapsed .ga-toggle .chev { transform: rotate(-45deg); }
  .is-collapsed > .ga-sec-body { display: none; }
  .ga-sec.is-collapsible .ga-h2, .ga-dark.is-collapsible .ga-h2 { margin-bottom: 0.4rem; }
  .ga-sec { margin-top: 2.2rem; }
}


/* phones: final tightening for the goals list, arrows and grids */
@media (max-width: 1000px) {
  .ga-arrow { width: 30px; height: 18px; }
  .ga-grid { row-gap: 0.4rem; }
  .ga-industry .ga-fig.photo img { max-height: 200px; }
  .ga-sec.is-collapsible .ga-h2 { margin-bottom: 0.2rem; }
  .ga-sec.is-collapsed + .ga-sec, .ga-sec.is-collapsed { margin-top: 0.9rem; }
}


/* =====================================================================
   Revision: problem statements, actuator layout, clamp and shape
   figures, frame-based and self-contained sections, phone section menu
   ===================================================================== */

/* the one-line problem statement after the PROBLEM label */
.ga-label .ga-prob {
  margin-left: 0.15rem;
  font-size: 1rem;
  font-weight: 600 !important;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.3;
  color: var(--ga-ink) !important;
}
.ga-label:has(.ga-prob) { flex-wrap: wrap; row-gap: 0.2rem; }

/* actuator: bullets, sketch, table in one row (phones: sketch + table, bullets below) */
.ga-act {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  grid-template-areas: "list fig table";
  gap: 2rem;
  align-items: center;
  margin-top: 0.6rem;
}
.ga-act-list { grid-area: list; }
.ga-act-fig { grid-area: fig; }
.ga-act-table { grid-area: table; }

/* toggle clamp: text with the animated sketch beside it */
.ga-clamp-sol {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(130px, 0.75fr);
  gap: 1rem;
  align-items: center;
}
.ga-toggle-fig { width: 100%; }
.ga-toggle-fig svg { display: block; width: 100%; height: auto; }

/* captions set inside a photo */
.ga-incap-fig { position: relative; }
.ga-incap {
  position: absolute;
  left: 6px;
  bottom: 6px;
  padding: 0.15rem 0.45rem;
  font-size: 0.68rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.03em;
  line-height: 1.4;
  white-space: nowrap;
  background: rgba(15, 31, 48, 0.8);
  color: #ffffff !important;
  border-radius: 3px;
  pointer-events: none;
}

/* the arms meeting different wheel shapes */
.ga-shape-fig { width: 100%; }
.ga-shape-fig svg { display: block; width: 100%; max-width: 400px; height: auto; margin: 0 auto; }

/* frame-based actuation: two videos and the final assembly in a row */
.ga-frame-media {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  align-items: start;
  margin: 1.8rem 0 1.2rem 0;
}
.ga-frame-media .ga-vertical { width: 100%; margin: 0; }
.ga-frame-media video, .ga-frame-media img {
  width: 100%;
  height: auto;
  aspect-ratio: 686 / 960;
  object-fit: cover;
  max-width: none;
}
.ga-frame-media figcaption { max-width: none; }

/* self-contained actuation */
.ga-claim {
  max-width: 62ch !important;
  margin: 1.4rem auto !important;
  text-align: center !important;
  font-size: 1.08rem !important;
  line-height: 1.55 !important;
}
.ga-vs { margin-top: 1.8rem; }
.ga-paper .ga-subhead {
  margin: 0 0 0.6rem 0;
  font-size: 1.2rem;
  font-weight: 600 !important;
  text-align: center;
}
.ga-vs > p { max-width: 74ch !important; margin-left: auto !important; margin-right: auto !important; }
.ga-vs-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.8rem;
  margin: 1rem 0;
}
.ga-vs-row .ga-fig img { height: 210px; }

@media (max-width: 1000px) {
  .ga-label .ga-prob { font-size: 0.82rem; }

  /* drifting diagram stays a row: papers become icons */
  .ga-drift { grid-template-columns: auto auto minmax(0, 1fr) auto minmax(0, 1fr); gap: 0.4rem; margin-top: 0.7rem; }
  .ga-drift > .ga-arrow { transform: none; width: 14px; height: 10px; }
  .ga-drift .col { gap: 0.35rem; }
  .ga-drift .col-title { font-size: 0.62rem !important; margin-bottom: 0; }
  .ga-drift .col:first-child { align-items: center; }
  .ga-drift .col:first-child .ga-sub { display: none; }
  .ga-paperref {
    width: 26px;
    height: 33px;
    padding: 0 !important;
    box-sizing: border-box;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 33'%3E%3Cpath d='M1.5 1.5h15l8 8v22h-23z' fill='%23f0f3f6' stroke='%230f1f30' stroke-width='1.5' stroke-linejoin='round'/%3E%3Cpath d='M16.5 1.5v8h8' fill='none' stroke='%230f1f30' stroke-width='1.5' stroke-linejoin='round'/%3E%3Cpath d='M6 15h14M6 19.5h14M6 24h9' stroke='%230f1f30' stroke-width='1.2' stroke-opacity='0.5'/%3E%3C/svg%3E") center / contain no-repeat !important;
  }
  .ga-paperref b, .ga-paperref span { display: none !important; }
  .ga-paperref .ga-link { inset: 0; width: auto; height: auto; }
  .ga-paperref .ga-link svg { display: none; }
  .ga-drift .ga-pill { font-size: 0.64rem; padding: 0.3rem 0.4rem; }
  .ga-drift .ga-sub { font-size: 0.56rem !important; line-height: 1.35 !important; }
  .ga-drift .ga-highlight { padding: 0.45rem 0.4rem; gap: 0.3rem; }
  .ga-drift .ga-highlight .tag { font-size: 0.52rem; top: -0.55rem; right: 0.3rem; }
  .ga-drift .ga-goal { padding: 0.35rem 0.4rem; }
  .ga-drift .ga-goal b { font-size: 0.62rem; }
  .ga-drift .ga-goal span { font-size: 0.56rem; }
  #goal .ga-lead { font-size: 0.82rem !important; }
  #goal .ga-goals li { font-size: 0.8rem !important; line-height: 1.45 !important; }

  /* arrows between stacked columns point down */
  .ga-cols > .ga-arrow { transform: rotate(90deg); justify-self: center; }

  .ga-act { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "fig table" "list list"; gap: 0.7rem 0.6rem; }
  .ga-act-fig img { height: 64px !important; }
  .ga-act-table { justify-self: end; padding: 0.45rem 0.55rem !important; }
  .ga-act .ga-spec { font-size: 0.6rem; }
  .ga-act .ga-spec th, .ga-act .ga-spec td { padding: 0.22rem 0.4rem 0.22rem 0; }
  .ga-fit > .ga-fig.fit img, .ga-fit > .ga-fig.fit video { width: auto; max-width: 100%; max-height: 32svh; margin: 0 auto; }

  .ga-clamp-sol { grid-template-columns: minmax(0, 1fr) 118px; gap: 0.6rem; }
  .ga-incap { font-size: 0.56rem !important; left: 4px; bottom: 4px; padding: 0.1rem 0.35rem; }
  .ga-shape-fig svg { max-width: 330px; }

  .ga-frame-media { gap: 0.35rem; margin: 1rem 0 0.8rem 0; }
  .ga-frame-media figcaption { font-size: 0.56rem !important; }

  .ga-claim { font-size: 0.9rem !important; margin: 1rem auto !important; }
  .ga-vs { margin-top: 1.2rem; }
  .ga-paper .ga-subhead { font-size: 0.98rem; margin-bottom: 0.4rem; }
  .ga-vs-row { flex-direction: column; gap: 0.6rem; margin: 0.7rem 0; }
  .ga-vs-row .ga-fig img { height: 150px; }

  /* section menu on phones: just the ticks at the edge until tapped */
  .ga-nav {
    right: 0;
    padding: 0.45rem 0.5rem 0.45rem 0.55rem;
    background: rgba(11, 33, 53, 0.62);
    border-radius: 6px 0 0 6px;
  }
  .ga-nav .label { display: none; }
  .ga-nav a { padding: 0.3rem 0; gap: 0.5rem; font-size: 0.78rem; }
  .ga-nav .tick { width: 9px; height: 4px; }
  .ga-nav a[aria-current="true"] .tick { width: 18px; }
  .ga-nav.is-open { padding: 0.6rem 0.65rem 0.6rem 0.9rem; background: rgba(11, 33, 53, 0.9); }
  .ga-nav.is-open .label { display: inline; }
}
.ga-vs + .ga-question { margin-top: 1.6rem !important; margin-bottom: 0.4rem !important; }


/* =====================================================================
   Revision 3: numbered problems above the subsection titles, bigger
   shape figures, recording/playback block, full-assembly figures, the
   merged attachment carousel
   ===================================================================== */

/* page-styles.css gives every element overflow-x: hidden, which makes the
   section bodies their own vertical scrollers on phones (the carousel's
   negative margin was enough to trigger it). Sections never scroll inside. */
.ga-sec, .ga-sec-body { overflow: visible !important; }

/* "— PROBLEM 2  Summary" on one line, then the subsection title */
.ga-probhead { margin: 2.4rem 0 0.9rem 0; }
.ga-probhead .ga-label { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 0.7rem; row-gap: 0.25rem; }
.ga-probhead .ga-label::before { align-self: center; }
.ga-probhead .ga-label .ga-prob { margin-left: 0; }
.ga-probhead .ga-h3 { margin: 0.45rem 0 0 0 !important; }

/* clamping: wider solution column so three figures fit in one row */
.ga-grid-wide { --c: minmax(0, 0.72fr) auto minmax(0, 1.28fr); }
.ga-clamp-row { display: flex; flex-wrap: nowrap; gap: 0.5rem; align-items: flex-end; width: 100%; }
.ga-clamp-row > .ga-fig { min-width: 0; margin: 0; }
.ga-clamp-row > .ga-fig:nth-child(1) { flex: 1.333 1 0; }
.ga-clamp-row > .ga-fig:nth-child(2) { flex: 0.82 1 0; }
.ga-clamp-row > .ga-fig:nth-child(3) { flex: 1.374 1 0; }
.ga-grid .ga-clamp-row .ga-fig img { width: 100%; height: auto; max-height: none; cursor: zoom-in; }
.ga-sketchbox img { box-sizing: border-box; border: 1px solid rgba(15, 31, 48, 0.12); border-radius: 3px; }

/* adapting to any shape */
.ga-shape-row { margin: 0.4rem 0 0.9rem 0; }
.ga-shape-row .ga-row3 { display: flex; gap: 0.9rem; justify-content: center; align-items: center; }
.ga-shape-row .ga-row3 img { height: 150px; width: auto; min-width: 0; max-width: 33%; object-fit: contain; cursor: zoom-in; }
.ga-side {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1.6rem;
  align-items: center;
  margin: 1.1rem 0;
}
.ga-side > .ga-fig img { height: 240px; width: auto; cursor: zoom-in; }
.ga-side > div > p:last-child { margin-bottom: 0 !important; }
.ga-sol-gap { margin-top: 1.6rem; }
.ga-shape-diags { display: flex; gap: 0.8rem; align-items: center; flex-wrap: nowrap; }
.ga-shape-diags .ga-fig img { height: 250px; width: auto; cursor: zoom-in; }
.ga-shape-cad, .ga-assembly-row { display: flex; gap: 0.8rem; align-items: center; flex-wrap: nowrap; margin: 1rem 0 0.4rem 0; }
.ga-shape-cad > .ga-fig, .ga-assembly-row > .ga-fig { min-width: 0; margin: 0; }
.ga-shape-cad > .ga-fig:nth-child(1) { flex: 1.286 1 0; }
.ga-shape-cad > .ga-fig:nth-child(2) { flex: 1.549 1 0; }
.ga-assembly-row > .ga-fig:nth-child(1) { flex: 1.026 1 0; }
.ga-assembly-row > .ga-fig:nth-child(2) { flex: 1.286 1 0; }
.ga-shape-cad img, .ga-assembly-row img { width: 100%; height: auto; cursor: zoom-in; }
.ga-modular { margin: 0.6rem auto 0.4rem auto; text-align: center; }
.ga-modular img { width: 100%; max-width: 860px; height: auto; cursor: zoom-in; }

/* recording and playback */
.ga-rec {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 0.62fr) minmax(0, 0.62fr);
  gap: 1rem;
  align-items: center;
  margin: 0.6rem 0 0.4rem 0;
}
.ga-rec .ga-fig { margin: 0; width: 100%; }
.ga-rec-diag img { width: 100%; height: auto; cursor: zoom-in; }
.ga-rec video { width: 100%; height: auto; aspect-ratio: 686 / 960; object-fit: cover; display: block; background: #0b2135; }

/* outcome: the control loop on its own */
.ga-outcome-loop { max-width: 680px; margin: 0.4rem auto 0 auto; }
.ga-outcome-loop img { width: 100%; height: auto; cursor: zoom-in; }

/* the attachment carousel: one height, each clip as wide as its shape */
#splideAttach { max-width: 100% !important; padding: 0 3.6rem 34px 3.6rem !important; margin: 1.6rem 0 0 0 !important; }
#splideAttach .splide__slide { width: auto !important; max-height: none !important; padding: 0 !important; }
#splideAttach video { display: block; height: 100%; width: auto; border-radius: 4px; background: #0b2135; }

@media (max-width: 1000px) {
  .ga-probhead { margin: 1.6rem 0 0.6rem 0; }
  .ga-grid-wide { --c: minmax(0, 1fr); }
  .ga-shape-row .ga-row3 { gap: 0.4rem; }
  .ga-shape-row .ga-row3 img { height: auto; width: 32%; max-width: none; }
  .ga-side { grid-template-columns: minmax(0, 1fr); gap: 0.6rem; justify-items: center; }
  .ga-side > .ga-fig img { height: auto; width: 100%; max-width: 330px; }
  .ga-side-figs > div { justify-self: stretch; }
  .ga-shape-diags { gap: 0.4rem; width: 100%; }
  .ga-shape-diags .ga-fig { flex: 1 1 0; min-width: 0; margin: 0; }
  .ga-shape-diags .ga-fig img { height: auto; width: 100%; }
  .ga-shape-cad, .ga-assembly-row { gap: 0.4rem; }
  .ga-rec { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0.5rem; }
  .ga-rec-diag { grid-column: 1 / -1; }
  #splideAttach { padding: 0 0 1.75rem 0 !important; }
  #splideAttach .splide__arrow { display: none; }
}
.ga-shape-row figcaption { max-width: none !important; margin-top: 0.45rem; }
@media (max-width: 1000px) {
  .ga-clamp-row .ga-incap { white-space: normal; line-height: 1.2; right: 4px; }
  .ga-side > .ga-fig img { max-width: 250px; }
  .ga-outcome-loop + .ga-fit .ga-fig.fit video { max-height: 46svh; }
}
.ga-shape-arms img { height: 230px !important; width: auto; }
.ga-shape-row4 { margin: 0.4rem 0 0.6rem 0; }
.ga-shape-row4 img { width: 100%; height: auto; max-width: 900px; cursor: zoom-in; }
@media (max-width: 1000px) { .ga-shape-arms img { height: auto !important; width: 100%; max-width: 280px; } }