/* ==========================================================================
   ACID GRAPHICS BOARD (gag-). Loaded on a/acid-graphics.html only, after
   grammar.css. Several compositions stuck on one black surface: tilted
   stickers with extruded heads, a still green band as the fold, grain over
   it all. Faces are the room's ("ArchivoBlackX", "ArchivoX", declared in
   x-acid-graphics.css); colours are the grammar's tokens, which are the room's.
   Nothing on the board moves.
   ========================================================================== */
.gm--acid-graphics {
  --gm-tag-inverse: #050505;
  position: relative;
  max-width: 72rem;
  background: var(--gm-color-black);
  color: var(--gm-color-paper);
  font: 400 1.0625rem/1.55 "ArchivoX", "Helvetica Neue", Arial, sans-serif;
  letter-spacing: -0.01em;
  overflow: hidden;
}
.gm--acid-graphics .gm__title { position: relative; z-index: 3; font: 400 clamp(2.5rem, 7vw, 5rem)/0.85 "ArchivoBlackX", "Arial Black", sans-serif; letter-spacing: -0.07em; text-transform: uppercase; color: var(--gm-color-paper); text-shadow: 2px 2px 0 var(--gm-color-green), 4px 4px 0 var(--gm-color-green), 6px 6px 0 #20A808, 8px 8px 0 #178006, 10px 10px 0 #0F5A04; }
.gm--acid-graphics .gm__lede, .gm--acid-graphics .gm__key, .gm--acid-graphics .gm__get { position: relative; z-index: 3; opacity: 1; }
.gm--acid-graphics .gm__key, .gm--acid-graphics .gm__get { color: var(--gm-color-chrome); }
.gm--acid-graphics .gm__get a { color: var(--gm-color-green); }
.gm--acid-graphics .gm-t[data-g="translation"] { color: var(--gm-color-magenta); }
.gm--acid-graphics .gm-t[data-g="translation"]::first-line { color: #050505; }
.gm--acid-graphics .gm-t[data-g="record"] { color: var(--gm-color-green); }
.gm--acid-graphics :focus-visible { outline: 3px solid var(--gm-color-green); outline-offset: 3px; }

.gag { position: relative; }
.gag-noise { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.13; pointer-events: none; z-index: 2; }
.gag-band { position: relative; z-index: 1; margin: 0 calc(clamp(1.25rem, 4vw, 2.5rem) * -1) 2.5rem; overflow: hidden; white-space: nowrap; border-block: 3px solid var(--gm-color-magenta); background: var(--gm-color-green); color: #000; }
.gag-band span { display: inline-block; padding: 10px 1rem; font: 400 clamp(1.25rem, 3.5vw, 2.25rem)/1 "ArchivoBlackX", "Arial Black", sans-serif; letter-spacing: -0.05em; }

/* the surface: stickers, not a grid */
.gag-surface { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 2.25rem 1.5rem; align-items: start; }
.gag-f { grid-column: span 6; position: relative; padding: 22px 20px 20px; background: #0C0C0C; border: 2px solid var(--gm-color-chrome); }
.gag-f:nth-child(odd) { transform: rotate(-1.2deg); }
.gag-f:nth-child(even) { transform: rotate(1deg); margin-top: 1.5rem; }
.gag-f:nth-child(3) { grid-column: 2 / span 6; }
.gag-f:nth-child(4) { grid-column: span 5; }
.gag-f--wide { grid-column: 1 / -1 !important; transform: rotate(-0.4deg) !important; margin-top: 0 !important; }
.gag-f .gm-f__head { align-items: flex-end; }
.gag-f .gm-f__n { font: 800 0.8125rem/1 "ArchivoX", sans-serif; color: var(--gm-color-chrome); }
.gag-f .gm-f__name { font: 400 clamp(1.75rem, 3vw, 2.375rem)/0.9 "ArchivoBlackX", "Arial Black", sans-serif; letter-spacing: -0.07em; text-transform: uppercase; color: var(--gm-color-paper); }
.gag-f--g .gm-f__name { text-shadow: 2px 2px 0 var(--gm-color-green), 4px 4px 0 #20A808, 6px 6px 0 #178006; }
.gag-f--m .gm-f__name { text-shadow: 2px 2px 0 var(--gm-color-magenta), 4px 4px 0 #B0128A, 6px 6px 0 #7A0C60; }
.gag-f--wide .gm-f__name { text-shadow: 2px 2px 0 var(--gm-color-green), 4px 4px 0 var(--gm-color-green), 6px 6px 0 #20A808, 8px 8px 0 #178006; }
.gag-f .gm-f__note { color: var(--gm-color-chrome); opacity: 1; }
.gag-f .gm-more summary { color: var(--gm-color-green); }
.gag-cap { margin: 0.6rem 0 0; font-size: 0.9375rem; color: var(--gm-color-chrome); }
.gag-cap b { color: var(--gm-color-paper); }

/* colour */
.gag-sws { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr)); gap: 0; }
.gag-sws li { display: grid; min-height: 4.5rem; padding: 0.5rem; align-content: end; border: 1px solid #333; }
.gag-sws b { font: 800 0.875rem/1.1 "ArchivoX", sans-serif; }
.gag-sws code { font-size: 0.75rem; }
.gag-vib { height: 2.25rem; margin-top: 0.75rem; background: repeating-linear-gradient(90deg, var(--gm-color-green) 0 6px, var(--gm-color-magenta) 6px 12px); }

/* type */
.gag-warp { margin: 0; display: flex; font: 400 clamp(3rem, 8vw, 5.5rem)/0.85 "ArchivoBlackX", "Arial Black", sans-serif; letter-spacing: -0.09em; color: var(--gm-color-chrome); }
.gag-warp b { display: inline-block; font-weight: 400; transform: translateY(calc(sin(var(--i) * 1.3rad) * 0.12em)) skewY(calc(sin(var(--i) * 0.9rad) * 8deg)) scaleY(calc(1 + cos(var(--i) * 1.1rad) * 0.14)); text-shadow: 2px 2px 0 #59636C, 4px 4px 0 var(--gm-color-magenta), 6px 6px 0 #B0128A, 8px 8px 0 #7A0C60; }

/* layout */
.gag-multi { position: relative; height: 8.5rem; overflow: hidden; border: 2px dashed #3a3a3a; }
.gag-multi span { position: absolute; font: 400 1rem/1 "ArchivoBlackX", "Arial Black", sans-serif; letter-spacing: -0.05em; }
.gag-multi__a { left: 6%; top: 10%; font-size: 2.25rem !important; color: var(--gm-color-green); transform: rotate(-4deg); }
.gag-multi__b { right: 8%; top: 36%; font-size: 1.5rem !important; padding: 2px 6px; background: var(--gm-color-magenta); color: #000; transform: rotate(3deg); }
.gag-multi__c { left: 22%; bottom: 8%; font-size: 1.75rem !important; color: var(--gm-color-chrome); letter-spacing: -0.12em !important; }
.gag-multi__d { right: 30%; bottom: -0.2em; font-size: 5rem !important; color: transparent; -webkit-text-stroke: 2px var(--gm-color-green); }

/* form */
.gag-forms { display: flex; align-items: center; gap: 1.5rem; }
.gag-drip { width: 5.5rem; height: 6rem; border-radius: 48% 52% 40% 60% / 36% 40% 60% 64%; background: radial-gradient(circle at 30% 25%, #fff 0 6%, var(--gm-color-chrome) 22%, #59636C 55%, #1a1d20); box-shadow: inset -6px -8px 14px rgba(0, 0, 0, 0.5); }
.gag-ext { font: 400 4rem/0.9 "ArchivoBlackX", "Arial Black", sans-serif; letter-spacing: -0.07em; color: var(--gm-color-paper); text-shadow: 2px 2px 0 var(--gm-color-green), 4px 4px 0 var(--gm-color-green), 6px 6px 0 #20A808, 8px 8px 0 #178006, 10px 10px 0 #0F5A04; }

/* imagery */
.gag-sky { position: relative; height: 10rem; overflow: hidden; border: 2px solid var(--gm-color-green); background: linear-gradient(180deg, #050505 0%, #1B3A0E 38%, #2BD40C 62%, var(--gm-color-magenta) 63%, #3A0B2E 100%); }
.gag-sky__op { position: absolute; left: 50%; top: 10%; width: 8rem; aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%; background: repeating-radial-gradient(circle, #050505 0 5px, var(--gm-color-green) 5px 9px); }
.gag-sky__dune { position: absolute; left: -10%; right: -10%; bottom: 0; height: 38%; background: #050505; border-radius: 60% 40% 0 0 / 70% 60% 0 0; box-shadow: 0 -2px 0 var(--gm-color-magenta); }
.gag-sky__smile { position: absolute; right: 8%; bottom: 10%; width: 2.75rem; fill: none; stroke: var(--gm-color-green); stroke-width: 2.5; }
.gag-sky__smile circle:not(:first-child) { fill: var(--gm-color-green); stroke: none; }

/* components */
.gag-ui { display: grid; gap: 1.5rem; }
.gag-nav { display: flex; flex-wrap: wrap; border-block: 3px solid var(--gm-color-magenta); background: var(--gm-color-green); }
.gag-nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 1rem; font: 400 1.25rem/1 "ArchivoBlackX", "Arial Black", sans-serif; letter-spacing: -0.05em; text-transform: uppercase; color: #050505; text-decoration: none; }
.gag-nav a:hover { text-decoration: underline; }
.gag-nav a[aria-current="page"] { background: var(--gm-color-magenta); }
.gag-nav a:focus-visible { outline-color: #050505; outline-offset: -3px; }
.gag-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 1.25rem; }
.gag-card { display: grid; gap: 0.3rem; padding: 1rem 1.1rem; background: #0C0C0C; border: 2px solid var(--gm-color-chrome); color: var(--gm-color-paper); text-decoration: none; transform: rotate(-1.2deg); }
.gag-card + .gag-card { transform: rotate(1deg); }
.gag-card:hover { border-color: var(--gm-color-green); transform: none; }
.gag-card b { font: 400 1.75rem/0.9 "ArchivoBlackX", "Arial Black", sans-serif; letter-spacing: -0.07em; text-transform: uppercase; text-shadow: 2px 2px 0 var(--gm-color-magenta), 4px 4px 0 #B0128A; }
.gag-card span { color: var(--gm-color-chrome); }
.gag-form { display: flex; flex-wrap: wrap; align-items: end; gap: 0.5rem 0.9rem; }
.gag-form label { flex-basis: 100%; font: 800 0.875rem/1.2 "ArchivoX", sans-serif; letter-spacing: -0.02em; text-transform: uppercase; }
.gag-form input { flex: 1 1 12rem; min-width: 0; height: 2.75rem; padding: 0 0.6rem; background: #050505; color: var(--gm-color-paper); border: 2px solid var(--gm-color-chrome); border-radius: 0; }
.gag-form input:focus { border-color: var(--gm-color-green); }
.gag-btn { min-height: 44px; padding: 0 1.25rem; border: 0; border-radius: 0; background: var(--gm-color-green); color: #050505; font: 400 1.25rem/1 "ArchivoBlackX", "Arial Black", sans-serif; letter-spacing: -0.05em; text-transform: uppercase; cursor: pointer; box-shadow: 2px 2px 0 #2BD40C, 4px 4px 0 #20A808, 6px 6px 0 #178006; }
.gag-btn:hover { background: var(--gm-color-magenta); }
.gag-btn:active { box-shadow: none; transform: translate(4px, 4px); }
.gag-btn:focus-visible { outline: 3px solid var(--gm-color-chrome); }

@media (max-width: 720px) {
  .gag-surface { grid-template-columns: minmax(0, 1fr); }
  .gag-f, .gag-f:nth-child(3), .gag-f:nth-child(4) { grid-column: 1 / -1; margin-top: 0; }
  .gm--acid-graphics .gm__head { grid-template-columns: minmax(0, 1fr); }
  .gm--acid-graphics .gm__title { grid-row: auto; }
}