/* ==========================================================================
   NEW WAVE TYPOGRAPHY — Build with it board. Loaded on a/new-wave-typography.html only.
   The room's paper, ink and Archivo ("NW Archivo" is declared by the room's
   stylesheet). Six columns; each field placed off its seat by whole columns
   (--gnw-at), only its heading turned (--gnw-turn). Reading text stays level.
   Contrast: ink #111111 on paper 16.2 · deep magenta #B8006A on paper 5.7.
   ========================================================================== */
.gm--new-wave-typography { --gm-tag-inverse: #F2F0EA; max-width: 1180px; background: #F2F0EA; color: #111111; font-family: "NW Archivo", "Helvetica Neue", Arial, sans-serif; font-stretch: 100%; }
.gm--new-wave-typography .gm__title { font-weight: 900; font-stretch: 62%; font-size: clamp(32px, 4vw, 52px); letter-spacing: .06em; text-transform: uppercase; line-height: .95; transform: rotate(-3deg); transform-origin: left center; }
.gm--new-wave-typography .gm__lede { font-size: 1.125rem; }
.gm--new-wave-typography a { color: #111111; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.gm--new-wave-typography :focus-visible { outline: 3px solid #B8006A; outline-offset: 3px; }
.gm--new-wave-typography .gm-t { border-width: 2px; border-radius: 0; white-space: normal; max-width: 100%; }

.gnw-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: 20px; row-gap: 56px; align-items: start; }
.gnw-f { grid-column: var(--gnw-at); min-width: 0; padding-top: 12px; border-top: 8px solid #111111; }
.gnw-f .gm-f__head { align-items: baseline; transform: rotate(var(--gnw-turn, 0deg)); transform-origin: left center; }
.gnw-f .gm-f__n { font-weight: 900; font-stretch: 62%; font-size: 1.5rem; color: #B8006A; }
.gnw-f .gm-f__name { font-weight: 900; font-stretch: 62%; font-size: clamp(1.25rem, 2.2vw, 1.75rem); letter-spacing: .24em; text-transform: uppercase; line-height: 1.1; }
.gnw-cap { margin: .6rem 0 0; font-size: .9375rem; line-height: 1.5; max-width: 52ch; }

/* The stepped shape, solid, as the room draws it. */
.gnw-steps { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr 1fr 3fr; align-items: end; height: 32px; }
.gnw-steps i { height: 32px; background: #111111; }
.gnw-steps i:nth-child(2) { height: 24px; }
.gnw-steps i:nth-child(3) { height: 16px; }
.gnw-steps i:nth-child(4) { height: 8px; }
.gnw-steps--in { grid-template-columns: repeat(4, 1fr); max-width: 320px; }

/* colour */
.gnw-bw { display: flex; align-items: end; height: 72px; padding: 8px 10px; background: #111111; color: #F2F0EA; font-weight: 900; font-stretch: 62%; letter-spacing: .3em; text-transform: uppercase; }
.gnw-swatch { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: .6rem 0 0; padding: 0; list-style: none; font-size: .875rem; font-stretch: 75%; }
.gnw-swatch li { display: inline-flex; align-items: center; gap: 6px; }
.gnw-swatch i { width: 20px; height: 20px; border: 1px solid #111111; }

/* type */
.gnw-disp { margin: 0; font-size: clamp(34px, 5vw, 60px); line-height: .95; font-weight: 200; font-stretch: 125%; }
.gnw-b { display: block; padding-left: .8em; font-weight: 500; font-stretch: 100%; }
.gnw-x { font-weight: 900; font-stretch: 62%; letter-spacing: .14em; color: #E6007E; }

/* grid */
.gnw-cols { position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: 8px; row-gap: 8px; padding: 14px 0; }
.gnw-cols__g { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: 8px; }
.gnw-cols i { background: rgba(0, 155, 209, .12); border-inline: 1px solid rgba(0, 155, 209, .7); }
.gnw-cols b { position: relative; grid-row: 1; padding: 4px 6px; border: 2px dashed #111111; font-size: .75rem; font-stretch: 75%; }
.gnw-cols b.gnw-off { grid-row: 2; border-style: solid; background: #111111; color: #F2F0EA; }

/* imagery: film over film, the dot left showing */
.gnw-film { position: relative; height: 150px; overflow: hidden; background: #F2F0EA; }
.gnw-film span { position: absolute; mix-blend-mode: multiply; }
.gnw-film__m { left: 4%; top: 12%; width: 60%; height: 70%; background: radial-gradient(circle, #E6007E 36%, transparent 38%) 0 0 / 11px 11px; transform: rotate(-4deg); }
.gnw-film__c { right: 4%; bottom: 6%; width: 55%; height: 64%; background: radial-gradient(circle, #009BD1 30%, transparent 32%) 0 0 / 14px 14px; transform: rotate(3deg); }
.gnw-film b { position: absolute; left: 12%; top: 34%; font-size: 48px; font-weight: 900; font-stretch: 62%; letter-spacing: .3em; }

/* components */
.gnw-nav { display: flex; flex-wrap: wrap; gap: 4px 28px; margin-bottom: 20px; font-size: 1.375rem; font-weight: 300; font-stretch: 125%; }
.gnw-nav a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
.gnw-nav a:hover { background: #FFD500; }
.gnw-nav a[aria-current="page"] { color: #B8006A; transform: rotate(-3deg) translateY(6px); }
.gnw-nav a[aria-current="page"] .gnw-x { color: #B8006A; }
.gnw-ui { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: 20px; align-items: start; }
.gm--new-wave-typography a.gnw-card { grid-column: span 2; display: block; padding-top: 10px; border-top: 8px solid #111111; text-decoration: none; }
.gm--new-wave-typography a.gnw-card--off { grid-column: 4 / span 2; margin-top: 30px; }
.gnw-card b { display: block; font-size: 1.25rem; font-weight: 900; font-stretch: 62%; letter-spacing: .14em; text-transform: uppercase; }
.gnw-card span { display: block; margin-top: 4px; }
.gnw-card:hover b { font-stretch: 125%; letter-spacing: 0; }
.gnw-form { grid-column: 1 / span 4; display: flex; flex-wrap: wrap; align-items: end; gap: 8px 10px; margin-top: 28px; }
.gnw-form label { flex: 0 0 100%; font-weight: 700; font-stretch: 75%; letter-spacing: .1em; font-size: .8125rem; }
.gnw-form input { flex: 1 1 12rem; min-width: 0; height: 44px; padding: 0 10px; border: 2px solid #111111; border-radius: 0; background: #F2F0EA; color: #111111; }
.gm--new-wave-typography .gnw-btn { min-height: 44px; padding: 0 16px; border: 2px solid #111111; border-radius: 0; background: #F2F0EA; color: #111111; font-weight: 700; font-stretch: 75%; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; }
.gm--new-wave-typography .gnw-btn:hover { background: #FFD500; }
.gm--new-wave-typography .gnw-btn:active { background: #111111; color: #F2F0EA; }

/* motion */
.gnw-still { position: relative; margin: 0; height: 64px; font-size: 44px; font-weight: 900; font-stretch: 62%; letter-spacing: .3em; line-height: 1; }
.gnw-still span { position: absolute; left: 0; top: 0; }
.gnw-still__b { left: 60px !important; top: 16px !important; color: transparent; -webkit-text-stroke: 1.5px #111111; transform: rotate(-4deg); }

/* film: over-exposure as weight */
.gnw-exp { margin: 0; font-size: clamp(34px, 5vw, 56px); font-weight: 200; font-stretch: 125%; line-height: 1; }
.gnw-exp span { font-weight: 900; }

@media (max-width: 860px) {
  .gnw-grid, .gnw-ui { grid-template-columns: minmax(0, 1fr); }
  .gnw-grid > *, .gnw-ui > *, .gm--new-wave-typography a.gnw-card, .gm--new-wave-typography a.gnw-card--off { grid-column: 1 / -1; }
  .gm--new-wave-typography a.gnw-card--off { margin-top: 20px; margin-left: 2rem; }
  .gnw-form { grid-column: 1 / -1; }
  .gnw-grid { row-gap: 40px; }
}