/* ==========================================================================
   PULP — Build with it (Design Completion Campaign, 2026-09-29).
   The board is the magazine: the cover (colour, type, the painted scene)
   framed in the ink, then the pages inside on the same cream stock in one
   ink with double rules. Faces are the room's own ("Anton PL", "Libre
   Franklin PL", declared in x-pulp.css). Every class is gpl- or scoped to
   .gm--pulp. Nothing moves.
   ========================================================================== */
.gm--pulp {
  --gm-tag-inverse: var(--gm-color-stock);
  width: min(1000px, 100% - 2 * clamp(0px, 2vw, 30px));
  margin: clamp(10px, 3vw, 30px) auto;
  background: var(--gm-color-stock); color: var(--gm-color-ink);
  font: 500 17px/1.55 var(--gm-font-text);
  border-top: 6px double var(--gm-color-ink);
}
.gm--pulp .gm__title { font: 400 clamp(40px, 6vw, 64px)/0.95 var(--gm-font); text-transform: uppercase; }
.gm--pulp .gm__get a { color: var(--gm-color-ink); }
.gm--pulp .gm-t[data-g="record"] { color: var(--gm-color-red-text); }
.gm--pulp .gm-f__n { display: inline-grid; place-items: center; min-width: 1.75rem; height: 1.75rem; background: var(--gm-color-ink); color: var(--gm-color-stock); font: 400 16px/1 var(--gm-font); }
.gm--pulp .gm-f__name { font: 400 26px/1 var(--gm-font); text-transform: uppercase; letter-spacing: 0.01em; }
.gm--pulp .gm-more summary { color: var(--gm-color-ink); }
.gpl-cap { margin: 0.6rem 0 0; font-size: 14px; font-style: italic; line-height: 1.45; }

/* ---- the cover ------------------------------------------------------- */
.gpl-cover {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 32px;
  padding: clamp(16px, 3vw, 28px); border: 4px solid var(--gm-color-ink);
}
.gpl-f--img { grid-column: 1 / -1; grid-row: 1; }
.gpl-slot { position: relative; height: clamp(180px, 28vw, 280px); border: 3px solid var(--gm-color-ink); background: var(--gm-color-ink); display: grid; place-items: center; text-align: center; }
.gpl-slot p { max-width: 34ch; margin: 0 16px; padding: 10px 16px; background: var(--gm-color-stock); border: 3px solid var(--gm-color-ink); font: 700 14px/1.4 var(--gm-font-text); text-transform: uppercase; letter-spacing: 0.04em; }
.gpl-hatch { display: grid; grid-template-columns: repeat(3, 1fr); height: 36px; margin-top: 10px; border: 2px solid var(--gm-color-ink); }
.gpl-hatch i:nth-child(1) { background: radial-gradient(circle, var(--gm-color-ink) 0 1.2px, transparent 1.6px) 0 0 / 7px 9px, radial-gradient(circle, var(--gm-color-ink) 0 1px, transparent 1.4px) 3px 4px / 11px 8px; }
.gpl-hatch i:nth-child(2) { background: repeating-linear-gradient(45deg, var(--gm-color-ink) 0 1.5px, transparent 1.5px 7px); }
.gpl-hatch i:nth-child(3) { background: repeating-linear-gradient(45deg, var(--gm-color-ink) 0 2px, transparent 2px 6px), repeating-linear-gradient(-45deg, var(--gm-color-ink) 0 2px, transparent 2px 6px); }

.gpl-sws { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; font-size: 13px; }
.gpl-sws li { display: grid; gap: 2px; }
.gpl-sws span { display: block; height: 44px; border: 2px solid var(--gm-color-ink); }
.gpl-sws code { font-size: 12px; }

.gpl-disp { margin: 0; font: 400 var(--gm-size-display)/var(--gm-leading-display) var(--gm-font); text-transform: uppercase; }
.gpl-disp span { position: relative; display: inline-block; isolation: isolate; }
.gpl-disp span::before { content: attr(data-t); content: attr(data-t) / ""; position: absolute; left: 0; top: 0; width: 100%; color: var(--gm-color-red); transform: translate(0.045em, 0.035em); z-index: -1; }
.gpl-banner {
  display: inline-block; max-width: 100%; margin: 14px 0 12px; padding: 6px 14px;
  background: var(--gm-color-red); color: var(--gm-color-stock);
  font: 400 var(--gm-size-banner)/var(--gm-leading-banner) var(--gm-font); text-transform: uppercase;
  transform: rotate(-3deg); transform-origin: left center;
}
.gpl-text { margin: 0; font-size: 16px; }

/* ---- the pages inside ------------------------------------------------ */
.gpl-inside { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; margin-top: 28px; }
.gpl-inside > .gpl-f { padding: 22px 0; border-top: 6px double var(--gm-color-ink); }
.gpl-f--ui { grid-column: 1 / -1; }

.gpl-lay { position: relative; height: 120px; border: 3px solid var(--gm-color-ink); background: repeating-linear-gradient(45deg, var(--gm-color-ink) 0 1.5px, transparent 1.5px 8px); overflow: hidden; }
.gpl-lay span { position: absolute; left: -6px; height: 22px; background: var(--gm-color-red); transform-origin: left center; }
.gpl-lay__b1 { top: 22px; width: 78%; transform: rotate(-6deg); }
.gpl-lay__b2 { top: 70px; width: 52%; height: 16px !important; background: var(--gm-color-ink) !important; transform: rotate(-2deg); }
.gpl-rules span { display: block; height: 0; border-top: 6px double var(--gm-color-ink); margin: 0 0 14px; }
.gpl-rules span + span { border-top: 2px solid var(--gm-color-ink); }
.gpl-edge { height: 44px; background: var(--gm-color-ink); clip-path: polygon(0 0, 100% 0, 100% 70%, 94% 86%, 88% 72%, 80% 90%, 71% 76%, 62% 94%, 50% 78%, 41% 92%, 30% 74%, 21% 90%, 12% 76%, 5% 88%, 0 74%); }

.gpl-nav { display: flex; flex-wrap: wrap; gap: 4px 22px; align-items: center; padding: 10px 18px; background: var(--gm-color-ink); }
.gpl-nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px; color: var(--gm-color-stock); font: 400 24px/1 var(--gm-font); text-transform: uppercase; text-decoration: none; }
.gpl-nav a:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.gpl-nav a:focus-visible { outline: 3px solid var(--gm-color-stock); outline-offset: 2px; }
.gpl-nav a[aria-current] { background: var(--gm-color-red); transform: rotate(-2deg); }
.gpl-ui { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 24px; margin-top: 22px; align-items: start; }
.gpl-card {
  display: block; border: 3px solid var(--gm-color-ink); border-bottom: 0; color: var(--gm-color-ink); text-decoration: none; padding: 0 0 26px;
  clip-path: polygon(0 0, 100% 0, 100% 96%, 93% 99%, 85% 96%, 76% 100%, 66% 97%, 55% 100%, 44% 96%, 33% 99%, 22% 96%, 11% 100%, 0 97%);
}
.gpl-card__img { display: grid; place-items: center; height: 150px; border-bottom: 3px solid var(--gm-color-ink); background: var(--gm-color-ink); }
.gpl-card__img i { padding: 4px 10px; background: var(--gm-color-stock); border: 2px solid var(--gm-color-ink); font: 700 12px/1.3 var(--gm-font-text); font-style: normal; text-transform: uppercase; letter-spacing: 0.04em; }
.gpl-card b { display: block; margin: 12px 14px 2px; font: 400 28px/1 var(--gm-font); text-transform: uppercase; }
.gpl-card > span:last-child { display: block; margin: 0 14px; font-size: 15px; }
.gpl-card:hover b { text-decoration: underline; text-decoration-thickness: 2px; }
.gpl-form { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: end; }
.gpl-form label { flex-basis: 100%; font-weight: 700; }
.gpl-form input { flex: 1 1 12rem; min-width: 0; height: 2.75rem; padding: 0 10px; border: 2px solid var(--gm-color-ink); border-radius: 0; background: var(--gm-color-stock); color: var(--gm-color-ink); }
.gpl-form input:focus-visible { border-width: 4px; }
.gpl-btn { min-height: 44px; margin: 0 6px 5px 0; padding: 8px 20px; border: 0; border-radius: 0; background: var(--gm-color-ink); color: var(--gm-color-stock); font: 400 22px/1 var(--gm-font) !important; text-transform: uppercase; cursor: pointer; box-shadow: 6px 5px 0 var(--gm-color-red); }
.gpl-btn:hover { box-shadow: 3px 2px 0 var(--gm-color-red); }
.gpl-btn:active { box-shadow: 0 0 0 var(--gm-color-red); }
.gpl-btn:focus-visible { outline: 3px solid var(--gm-color-ink); outline-offset: 6px; }
.gpl-still { margin: 0; padding: 18px; border: 3px solid var(--gm-color-ink); font: 400 26px/1.1 var(--gm-font); text-transform: uppercase; }
.gpl-two { display: grid; grid-template-columns: 1fr 1fr; border: 3px solid var(--gm-color-ink); }
.gpl-two span { padding: 14px; font: 400 20px/1.15 var(--gm-font); text-transform: uppercase; }
.gpl-two__cover { background: var(--gm-cover-ground); color: var(--gm-color-stock); }
.gpl-two__in { background: var(--gm-color-stock); }

@media (max-width: 760px) {
  .gpl-cover, .gpl-inside, .gpl-ui { grid-template-columns: 1fr; }
  .gpl-f--img { grid-row: auto; }
  .gpl-sws { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Present, never arriving: the room is motionless (outranks site.css's .js-reveal rule). */
.js-reveal .pl-page main > section.gm--pulp { opacity: 1; transform: none; transition: none; will-change: auto; }