/* ==========================================================================
   STREAMLINE MODERNE — Build with it board (Design Completion Campaign,
   2026-09-29). More of the room's run: each field seated on a three-line
   chrome course under a capsule name plate, content leading from the left.
   Values are the room's (exhibits/streamline-moderne.css) via --gm-* tokens;
   "Jost SM" is declared by the room stylesheet on the same page.
   Prefix: gsm-. Nothing global.
   ========================================================================== */
.gm--streamline-moderne {
  --gm-tag-inverse: var(--gm-color-ground);
  --gsm-steel: #6E7883;
  --gsm-ink-2: #4A525B;
  --gsm-ground-2: #EDE3CE;
  max-width: none;
  margin: 0;
  padding: clamp(2rem, 5vw, 3.5rem) clamp(1.25rem, 5vw, 4rem);
  background: var(--gm-color-ground);
  color: var(--gm-color-ink);
  font-family: var(--gm-font);
}
.gm--streamline-moderne .gm__head { max-width: 62rem; }
.gm--streamline-moderne .gm__title { font-weight: 600; font-size: clamp(1.4rem, 3vw, 2rem); letter-spacing: 0.12em; text-transform: uppercase; }
.gm--streamline-moderne .gm__lede { font-weight: 300; line-height: 1.7; letter-spacing: 0.02em; }
.gm--streamline-moderne a { color: var(--gm-color-petrol); }
.gm--streamline-moderne :focus-visible { outline: 3px solid var(--gm-color-petrol); outline-offset: 3px; border-radius: 999px; }
.gm--streamline-moderne .gm-t { color: var(--gm-color-trim); border-radius: 999px; padding: 0 0.6rem; }
.gm--streamline-moderne .gm-t[data-g="translation"] { color: var(--gm-color-petrol); }
.gm--streamline-moderne .gm-gap { border-radius: 1rem; }
.gm--streamline-moderne .gm-ls li { border-top-color: rgba(90, 100, 110, 0.3); }

/* the run of lines */
.gsm-board { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2.25rem, 4vw, 3rem) clamp(1.5rem, 4vw, 3rem); }
.gsm-f { min-width: 0; }
.gsm-f--wide { grid-column: 1 / -1; }
.gsm-f:nth-child(even):not(.gsm-f--wide) .gm-f__spec { margin-inline-start: 0; }

/* the course and the plate seated on it */
.gsm-course { display: grid; gap: 5px; margin-bottom: -0.95rem; }
.gsm-course i { display: block; height: 2px; border-radius: 999px; background: var(--gm-color-chrome); }
.gsm-course i:nth-child(2) { height: 5px; }
.gsm-f > .gm-f__head {
  position: relative; width: fit-content; max-width: 100%; margin: 0 0 1.25rem;
  padding: 0.4rem 1.2rem; background: var(--gm-color-ground);
  border: 1px solid var(--gm-color-trim); border-radius: 999px; gap: 0.6rem;
}
.gsm-f .gm-f__n { font: 500 0.7rem/1 var(--mono, monospace); letter-spacing: 0.08em; color: var(--gm-color-petrol); }
.gsm-f .gm-f__name { font-size: 0.8rem; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; }
.gsm-f .gm-f__note { color: var(--gsm-ink-2); opacity: 1; line-height: 1.7; }
.gsm-cap { margin: 0.75rem 0 0; font-size: 0.85rem; line-height: 1.65; color: var(--gsm-ink-2); max-width: 46ch; }

/* 01 colour */
.gsm-sws { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: 0.6rem 1rem; }
.gsm-sws li { display: grid; grid-template-columns: 2.6rem 1fr; column-gap: 0.6rem; align-items: center; font-size: 0.85rem; }
.gsm-sws b { font-weight: 600; }
.gsm-sws code { grid-column: 2; font-size: 0.75rem; color: var(--gsm-ink-2); }
.gsm-chip { grid-row: span 2; width: 2.6rem; height: 1.1rem; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(35, 41, 48, 0.35); }
.gsm-chip--ground { background: var(--gm-color-ground); }
.gsm-chip--ink { background: var(--gm-color-ink); }
.gsm-chip--petrol { background: var(--gm-color-petrol); }
.gsm-chip--trim { background: var(--gm-color-trim); }
.gsm-band { display: grid; gap: 7px; margin-top: 1.1rem; max-width: 22rem; }
.gsm-band i { height: 3px; border-radius: 999px; background: var(--gm-color-chrome); }
.gsm-band i:nth-child(2) { height: 6px; }

/* 02 type */
.gsm-display { margin: 0; font-size: clamp(1.5rem, 3.2vw, 2.2rem); font-weight: 600; line-height: 1.1; letter-spacing: 0.12em; text-transform: uppercase; }
.gsm-display span { display: block; width: calc(100% / 1.16); transform: scaleX(1.16); transform-origin: left center; }
.gsm-plate { display: inline-block; margin: 0.9rem 0 0; padding: 0.35rem 1.1rem; border: 1px solid var(--gm-color-trim); border-radius: 999px; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; }
.gsm-body { margin: 0.8rem 0 0; max-width: 44ch; line-height: 1.8; letter-spacing: 0.02em; }

/* 03 layout: the run */
.gsm-run { position: relative; display: flex; flex-wrap: wrap; gap: 0.6rem; padding-block: 0.9rem; }
.gsm-run::before, .gsm-run::after { content: ""; position: absolute; inset-inline: 0; height: 3px; border-radius: 999px; background: var(--gm-color-chrome); }
.gsm-run::before { top: calc(50% - 6px); }
.gsm-run::after { top: calc(50% + 4px); }
.gsm-run__i { position: relative; z-index: 1; padding: 0.35rem 1.1rem; border: 1px solid var(--gm-color-trim); border-radius: 999px; background: var(--gm-color-ground); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; }
.gsm-run__i--1 { background: var(--gm-color-petrol); border-color: var(--gm-color-petrol); color: var(--gm-color-ground); }
.gsm-run__i--2 { margin-inline-start: clamp(0.5rem, 3vw, 2rem); }
.gsm-run__i--3 { margin-inline-start: clamp(0.5rem, 3vw, 2rem); }

/* 04 shape */
.gsm-shapes { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }
.gsm-shape { display: inline-flex; align-items: center; justify-content: center; min-height: 3rem; padding: 0 1.2rem; border: 1px solid var(--gm-color-trim); font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; }
.gsm-shape--capsule { border-radius: 999px; }
.gsm-shape--panel { min-height: 4.5rem; border-radius: 1.6rem 1rem 1rem 1.6rem; box-shadow: inset 0 0 0 4px var(--gm-color-ground), inset 0 0 0 5px var(--gsm-steel); }
.gsm-shape--box { border-style: dashed; color: var(--gsm-ink-2); border-radius: 0; }

/* 05 imagery */
.gsm-marks { display: block; width: 100%; max-width: 24rem; height: auto; padding: 0.5rem; border-radius: 1rem 0.6rem 0.6rem 1rem; background: var(--gsm-ground-2); }
.gsm-marks * { fill: none; stroke: var(--gm-color-trim); stroke-width: 1.6; stroke-linecap: round; }

/* 06 components */
.gsm-nav { margin-bottom: 1.5rem; }
.gsm-nav .gsm-course { margin-bottom: -1.55rem; }
.gsm-nav ul { position: relative; list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.gsm-nav a, .gm .gsm-btn { display: inline-flex; align-items: center; min-height: 44px; padding: 0 1.2rem; border: 1px solid var(--gm-color-trim); border-radius: 999px; background: var(--gm-color-ground); color: var(--gm-color-ink); font: 600 0.74rem/1.2 var(--gm-font); letter-spacing: 0.16em; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: color 160ms linear, border-color 160ms linear, background-color 160ms linear; }
.gsm-nav a:hover, .gm .gsm-btn:hover { border-color: var(--gm-color-petrol); color: var(--gm-color-petrol); }
.gsm-nav a[aria-current="page"], .gm .gsm-btn--lead { background: var(--gm-color-petrol); border-color: var(--gm-color-petrol); color: var(--gm-color-ground); }
.gm .gsm-btn--lead:hover { background: var(--gm-color-ink); border-color: var(--gm-color-ink); color: var(--gm-color-ground); }
.gsm-cards { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 1.5rem; }
.gsm-card { flex: 1 1 14rem; max-width: 20rem; display: grid; gap: 0.3rem; padding: 1.2rem; border: 1px solid var(--gm-color-trim); border-radius: 1.6rem 1rem 1rem 1.6rem; color: var(--gm-color-ink) !important; text-decoration: none; transition: border-color 160ms linear, box-shadow 160ms linear; }
.gsm-card + .gsm-card { margin-top: clamp(0rem, 2vw, 1.25rem); }
.gsm-card b { font-size: 0.8rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; }
.gsm-card span { font-size: 0.9rem; color: var(--gsm-ink-2); }
.gsm-card:hover { border-color: var(--gm-color-petrol); box-shadow: inset 0 0 0 1px var(--gm-color-petrol); }
.gsm-form label { display: block; margin-bottom: 0.4rem; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gm-color-trim); }
.gsm-form__row { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.gsm-form input { flex: 1 1 12rem; max-width: 22rem; min-width: 0; min-height: 44px; padding: 0 1.2rem; border: 1px solid var(--gm-color-trim); border-radius: 999px; background: var(--gm-color-ground); color: var(--gm-color-ink); }
.gsm-form input:focus { border-color: var(--gm-color-petrol); }

/* 07 motion: the designed still */
.gsm-still { position: relative; max-width: 24rem; padding-block: 0.5rem; }
.gsm-still .gsm-course { margin: 0; }
.gsm-still__cap { position: absolute; left: 62%; top: 50%; width: 4.5rem; height: 0.9rem; margin-top: -0.45rem; border-radius: 999px; background: var(--gm-color-chrome); box-shadow: 0 1px 0 rgba(35, 41, 48, 0.18); }

@media (max-width: 48rem) {
  .gsm-board { grid-template-columns: minmax(0, 1fr); }
  .gm--streamline-moderne .gm__head { grid-template-columns: minmax(0, 1fr); }
  .gm--streamline-moderne .gm__title { grid-row: auto; }
}
@media (max-width: 26rem) {
  .gsm-f .gm-f__name { letter-spacing: 0.14em; }
  .gsm-nav a, .gm .gsm-btn { padding: 0 0.9rem; letter-spacing: 0.1em; }
  .gsm-run { flex-wrap: nowrap; }
  .gsm-run__i { padding-inline: 0.7rem; letter-spacing: 0.08em; }
  .gsm-run__i--2, .gsm-run__i--3 { margin-inline-start: 0.3rem; }
  .gm--streamline-moderne .gm-ls li { grid-template-columns: minmax(0, 1fr); gap: 0.3rem; }
}
@media (prefers-reduced-motion: reduce) {
  .gsm-nav a, .gsm-btn, .gsm-card { transition: none; }
}