/* ==========================================================================
   RETROFUTURISM — Build with it (Design Completion Campaign, 2026-09-29).
   Sits at the end of the page's 02 Build, as 02.12. Plates on the page's grey
   instrument, the page's condensed readout and reading faces, and its two time
   colours, all read from the page's own --rf- variables: the grammar carries
   no palette or face, so the board borrows the apparatus rather than inventing
   one. Every class is grf- or scoped to .gm--retrofuturism.
   ========================================================================== */
.gm--retrofuturism {
  --gm-tag-inverse: var(--rf-plate);
  max-width: none; margin: clamp(48px, 7vw, 88px) 0 0; padding: 0;
  color: var(--rf-ink); font-family: var(--rf-read);
  border-top: 2px solid var(--rf-ink); padding-top: 10px;
}
.gm--retrofuturism .gm__title { font: 600 clamp(1.75rem, 3.4vw, 2.5rem)/1.05 var(--rf-disp); }
.gm--retrofuturism .gm__title::before { content: "02.12"; display: block; font: 500 1rem var(--rf-disp); color: var(--rf-ink3); margin-bottom: 6px; }
.gm--retrofuturism .gm__key, .gm--retrofuturism .gm__get, .gm--retrofuturism .gm-t, .gm--retrofuturism .gm-more summary { font-family: var(--rf-disp); }
.gm--retrofuturism .gm__get a { color: var(--rf-ink); }
.gm--retrofuturism .gm-t[data-g="translation"] { color: var(--rf-future); }
.gm--retrofuturism .gm-f__n { font: 500 1rem var(--rf-disp); color: var(--rf-ink3); }
.gm--retrofuturism .gm-f__name { font: 600 1.375rem/1.1 var(--rf-disp); }
.gm--retrofuturism .gm-gap { font-family: var(--rf-disp); }
.grf-cap { margin: 8px 0 0; font: 500 .8125rem/1.35 var(--rf-disp); color: var(--rf-ink3); }
.grf-past { color: var(--rf-past); font-style: normal; }
.grf-fut { color: var(--rf-future); font-style: normal; }

.grf-rack { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.grf-f { background: var(--rf-plate); border: 1px solid var(--rf-rule); padding: clamp(12px, 1.8vw, 20px); min-width: 0; }
.grf-f--wide { grid-column: 1 / -1; }
@media (max-width: 760px) { .grf-rack { grid-template-columns: minmax(0, 1fr); } }

.grf-bar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font: 500 1rem var(--rf-disp); }
.grf-bar span { border: 1px solid var(--rf-ink); padding: 4px 10px; }
.grf-bar .grf-on { background: var(--rf-past); border-color: var(--rf-past); color: var(--rf-plate); }
.grf-bar .grf-fut { border-color: var(--rf-future); }
.grf-arrow { font-weight: 600; padding: 0 4px; }

.grf-logic { list-style: none; margin: 0; padding: 0; font: .9375rem/1.4 var(--rf-read); }
.grf-logic li { display: grid; grid-template-columns: 6.5rem 1fr; border-top: 1px solid var(--rf-rule); padding: 6px 0; }
.grf-logic b { font: 600 .9375rem var(--rf-disp); color: var(--rf-past); }
.grf-ext { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font: 600 1.125rem var(--rf-disp); margin: 0; }
.grf-ext span { border-bottom: 2px solid currentColor; }

.grf-plate { border: 1px solid var(--rf-ink); background: #fff; padding: 10px 12px; display: grid; gap: 2px; }
.grf-plate b { font: 600 1.25rem/1.1 var(--rf-disp); }
.grf-plate span { font: 500 .9375rem var(--rf-disp); }

.grf-nav { display: flex; flex-wrap: wrap; gap: 4px 18px; align-items: baseline; border-bottom: 2px solid var(--rf-ink); padding-bottom: 8px; margin-bottom: 14px; font: 500 1.0625rem var(--rf-disp); }
.grf-ro { margin-right: auto; color: var(--rf-ink3); }
.grf-nav a { color: var(--rf-ink); text-decoration: none; padding: 6px 0; }
.grf-nav a:hover { text-decoration: underline; }
.grf-nav a[aria-current="page"] { font-weight: 700; text-decoration: underline 2px; text-underline-offset: 5px; }
.grf-ui { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 620px) { .grf-ui { grid-template-columns: minmax(0, 1fr); } }
.grf-card { display: grid; gap: 4px; border: 1px solid var(--rf-ink); background: #fff; padding: 12px; color: var(--rf-ink); text-decoration: none; }
.grf-card b { font: 600 1.25rem/1.1 var(--rf-disp); }
.grf-card span { font: 500 .9375rem var(--rf-disp); }
.grf-card small { font: 500 .75rem var(--rf-disp); color: var(--rf-ink3); }
.grf-card:hover b { text-decoration: underline; }
.grf-form { display: grid; gap: 6px; }
.grf-form label { font: 500 .875rem var(--rf-disp); color: var(--rf-ink2); }
.grf-form input { height: 44px; border: 1px solid var(--rf-ink); border-radius: 0; background: #fff; padding: 0 10px; font: 1rem var(--rf-read); min-width: 0; }
.grf-btn { justify-self: start; min-height: 44px; padding: 0 20px; border: 1px solid var(--rf-ink); border-radius: 0; background: var(--rf-ink); color: var(--rf-plate); font: 600 1rem var(--rf-disp); cursor: pointer; }
.grf-btn:hover { background: var(--rf-past); border-color: var(--rf-past); }
.gm--retrofuturism .grf-btn:focus-visible, .gm--retrofuturism .grf-form input:focus-visible, .gm--retrofuturism .grf-nav a:focus-visible { outline: 3px solid var(--rf-ink); outline-offset: 3px; }