/* MOD — Build with it (Design Completion Campaign, 2026-09-29).
   The board is a run of posters, like the page: flat primary fields, a 10px
   ink rule between them, each field numbered on a small target. Faces and
   colours are the room's (x-mod.css): Chango for display, Rubik for body. */
.gm--mod {
  --gm-tag-inverse: var(--gm-color-ground);
  --gmo-d: var(--md-display, "Arial Black", sans-serif);
  --gmo-b: var(--md-body, "Helvetica Neue", Arial, sans-serif);
  max-width: none; margin: 0; padding: clamp(48px, 7vw, 96px) clamp(16px, 5vw, 64px);
  border-top: 10px solid var(--gm-color-ink);
  background: var(--gm-color-ground); color: var(--gm-color-ink);
  font: 500 18px/1.5 var(--gmo-b);
}
.gm--mod .gm__head, .gm--mod .gm__board { max-width: 1200px; }
.gm--mod .gm__head { grid-template-columns: minmax(0, 1fr); }
.gm--mod .gm__title { grid-row: auto; }
.gm--mod .gm__lede, .gm--mod .gm__key, .gm--mod .gm__get { max-width: 64ch; }
.gm--mod .gm__title { font: 400 clamp(34px, 6.4vw, 84px)/.95 var(--gmo-d); text-transform: uppercase; }
.gm--mod .gm__lede { font-weight: 700; font-size: 20px; }
.gm--mod .gm__key, .gm--mod .gm__get { opacity: 1; font-size: 15px; }
.gm--mod .gm-t { border-width: 2px; font-family: var(--gmo-b); font-weight: 800; }
.gm--mod :focus-visible { outline: 4px solid var(--gm-color-ink); outline-offset: 3px; }

.gmo-run { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; border: 6px solid var(--gm-color-ink); }
.gmo-f { padding: clamp(20px, 3vw, 36px); border: 3px solid var(--gm-color-ink); background: var(--gm-color-ground); }
.gmo-f--yel { background: var(--gm-color-yellow); }
.gmo-f--red { background: var(--gm-color-red); color: var(--gm-color-ground); --gm-tag-inverse: var(--gm-color-red); }
.gmo-f--blue { background: var(--gm-color-blue); color: var(--gm-color-ground); --gm-tag-inverse: var(--gm-color-blue); }
.gmo-f--red :focus-visible, .gmo-f--blue :focus-visible { outline-color: var(--gm-color-yellow); }
.gmo-f--ui, .gmo-f--wide { grid-column: 1 / -1; }
.gmo-f--wide .gmo-img { max-width: 560px; }
.gmo-f .gm-f__head { align-items: center; gap: 14px; }
.gmo-f .gm-f__n { position: relative; display: grid; place-items: center; width: 44px; height: 44px; flex: 0 0 44px; }
.gmo-tg--n { position: absolute; inset: 0; width: 100%; height: 100%; }
.gmo-n { position: relative; width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; background: var(--gm-color-ground); color: var(--gm-color-ink); font: 400 13px/1 var(--gmo-d); }
/* The heading never breaks inside a word: it is sized to its own card (the longest, TYPOGRAPHY, runs about 9.4em
   wide beside the 58px numeral), capped at 24px. */
.gmo-f { container-type: inline-size; }
.gmo-f .gm-f__name { min-width: 0; overflow-wrap: normal; font: 400 clamp(14px, calc((100cqi - 58px) / 9.8), 24px)/1.05 var(--gmo-d); text-transform: uppercase; }
.gmo-f .gm-f__note { opacity: 1; font-size: 15px; }
.gmo-cap { margin: 12px 0 0; font: 700 15px/1.4 var(--gmo-b); }
.gmo-body { margin: 12px 0 0; }
.gmo-f .gm-more summary { font: 800 14px/1.3 var(--gmo-b); text-transform: uppercase; letter-spacing: .06em; min-height: 44px; display: flex; align-items: center; }
.gmo-f .gm-gap { opacity: 1; border-width: 2px; }

/* specimens */
.gmo-sws { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.gmo-sws li { display: grid; gap: 4px; font-size: 13px; min-width: 0; }
.gmo-sws span { display: block; aspect-ratio: 1; border: 3px solid var(--gm-color-ink); }
.gmo-sws code { font: 600 12px/1.2 var(--gmo-b); overflow-wrap: anywhere; }
.gmo-zoom { display: flex; align-items: flex-end; gap: 10px; overflow: hidden; font-size: 22px; }
.gmo-zoom span { font-family: var(--gmo-d); line-height: .9; white-space: nowrap; }
.gmo-zoom span:last-child { color: var(--gm-color-red); }
.gmo-posters { display: grid; grid-template-columns: 1fr; border: 4px solid var(--gm-color-ink); }
.gmo-ps { display: grid; place-items: center; height: 54px; border-top: 8px solid var(--gm-color-ink); }
.gmo-ps:first-child { border-top: 0; }
.gmo-ps .gmo-tg { width: 40px; height: 40px; }
.gmo-ps--s { background: repeating-linear-gradient(90deg, var(--gm-color-red) 0 22px, var(--gm-color-ground) 22px 44px, var(--gm-color-blue) 44px 66px, var(--gm-color-ground) 66px 88px); }
.gmo-ps--y { background: var(--gm-color-yellow); }
.gmo-shapes { display: flex; gap: 14px; align-items: center; }
.gmo-shapes span { display: block; width: 64px; height: 64px; border: 4px solid var(--gm-color-ink); }
.gmo-sq { background: var(--gm-color-ground); }
.gmo-ci { border-radius: 50%; background: var(--gm-color-blue); }
.gmo-st { background: repeating-linear-gradient(0deg, var(--gm-color-ground) 0 10px, var(--gm-color-ink) 10px 20px); }
.gmo-img { display: flex; gap: 16px; align-items: center; }
.gmo-coaster { display: block; width: 90px; height: 90px; flex: 0 0 90px; border-radius: 50%; border: 4px solid var(--gm-color-ink); overflow: hidden; }
.gmo-coaster .gmo-tg { width: 100%; height: 100%; }
.gmo-paste { position: relative; flex: 1; min-width: 0; height: 90px; overflow: hidden; border: 4px solid var(--gm-color-ink); background: var(--gm-color-ground); }
.gmo-paste b { position: absolute; left: 6%; top: 10%; padding: 2px 6px; font: 400 20px/1 var(--gmo-d); background: var(--gm-color-ink); color: var(--gm-color-ground); transform: rotate(-4deg); }
.gmo-paste .gmo-paste--r { left: 30%; top: 50%; background: var(--gm-color-red); transform: rotate(3deg); }
.gmo-paste i { position: absolute; right: 6%; top: 12%; width: 22%; height: 60%; background: var(--gm-color-ink); border: 3px solid var(--gm-color-ground); outline: 3px solid var(--gm-color-ink); }
.gmo-grow { position: relative; width: 120px; aspect-ratio: 1; }
.gmo-grow i { position: absolute; inset: 0; margin: auto; border-radius: 50%; }
.gmo-grow i:nth-child(1) { width: 100%; height: 100%; background: var(--gm-color-ground); }
.gmo-grow i:nth-child(2) { width: 75%; height: 75%; background: var(--gm-color-red); }
.gmo-grow i:nth-child(3) { width: 50%; height: 50%; background: var(--gm-color-ground); }
.gmo-grow i:nth-child(4) { width: 25%; height: 25%; background: var(--gm-color-blue); }
@media (prefers-reduced-motion: no-preference) {
  .gmo-grow i { animation: gmo-grow .9s linear both; }
  .gmo-grow i:nth-child(2) { animation-delay: .1s; } .gmo-grow i:nth-child(3) { animation-delay: .2s; } .gmo-grow i:nth-child(4) { animation-delay: .3s; }
  @keyframes gmo-grow { from { transform: scale(0); } to { transform: scale(1); } }
}

/* components */
.gmo-nav { display: flex; flex-wrap: wrap; gap: 4px 26px; align-items: center; padding-bottom: 10px; margin-bottom: 20px; border-bottom: 6px solid var(--gm-color-ink); font: 800 16px/1.2 var(--gmo-b); text-transform: uppercase; letter-spacing: .06em; }
.gmo-nav a, .gmo-nav span { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--gm-color-ink); }
.gmo-nav a { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 4px; }
.gmo-nav a:hover { text-decoration-color: var(--gm-color-red); }
.gmo-tg--s { width: 24px; height: 24px; }
.gmo-ui { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; }
.gmo-card { display: grid; gap: 6px; padding: 20px; border: 6px solid var(--gm-color-ink); background: var(--gm-color-yellow); color: var(--gm-color-ink); text-decoration: none; }
.gmo-card:hover { border-width: 10px; padding: 16px; }
.gmo-card b { font: 400 24px/1.05 var(--gmo-d); text-transform: uppercase; }
.gmo-card--blue { background: var(--gm-color-blue); color: var(--gm-color-ground); }
.gmo-form { display: grid; gap: 10px; }
.gmo-form label { font: 800 14px/1.2 var(--gmo-b); text-transform: uppercase; letter-spacing: .08em; }
.gmo-form input { min-height: 48px; padding: 8px 12px; border: 4px solid var(--gm-color-ink); border-radius: 0; background: var(--gm-color-ground); color: var(--gm-color-ink); }
.gmo-form input:focus-visible { border-color: var(--gm-color-red); }
.gmo-btn { justify-self: start; min-height: 48px; padding: 10px 26px; border: 4px solid var(--gm-color-ink); border-radius: 999px; background: var(--gm-color-red); color: var(--gm-color-ground); font: 400 18px/1 var(--gmo-d) !important; text-transform: uppercase; cursor: pointer; transition: none; }
.gmo-btn:hover { background: var(--gm-color-blue); }
.gmo-btn:active { background: var(--gm-color-ink); }
.gmo-btn:disabled { background: var(--gm-color-ground); color: var(--gm-color-ink); text-decoration: line-through; cursor: not-allowed; }

@media (max-width: 860px) {
  .gmo-run, .gmo-ui { grid-template-columns: minmax(0, 1fr); }
  .gmo-sws { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}