/* goonbate: the server-written pages (/files/, /libraries/, /tags/, /for/, /tiers/, /faq/, /gooning/) and the links the
   SEO pass added to /releases/. Everything else comes from style.css + releases.css as it is: these pages are the
   releases page's own parts (disc, chips, badges, rails, ladder). Only what those files don't already cover is here.
   House rules kept: two faces, lowercase display, alpha-of-ink secondary text, hover = a hard inversion, no tweens. */

/* names that are links now look exactly as they did as plain text; hover is the house underline (rel-listen's) */
a.pg-t, .rel-l-t.pg-t { color: inherit; text-decoration: none; }
a.pg-t:hover, a.pg-t:focus-visible { box-shadow: inset 0 -2px 0 var(--red); outline: none; }
a.rel-pick { display: block; color: inherit; text-decoration: none; }

/* where you are: goonbate / every file / relapse files / dealer (m) */
.pg-crumbs { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .55rem; margin-bottom: clamp(1rem, 3vh, 1.8rem);
  font-family: 'Franklin Gothic Bold', var(--display); font-weight: 700; font-size: clamp(.72rem, .85vw, .82rem); letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-60); }
.pg-crumbs a { color: inherit; text-decoration: none; padding: .1em .2em; margin: 0 -.2em; }
.pg-crumbs a:hover, .pg-crumbs a:focus-visible { background: var(--ink); color: #000; outline: none; }
.pg-crumbs i { font-style: normal; color: var(--ink-40); }
.pg-crumbs [aria-current] { color: var(--ink); }

/* the top of a list page: the big lowercase name, one line under it */
.pg-top { padding-bottom: 0; }
.pg-h1 { margin: 0 0 clamp(.8rem, 2vh, 1.2rem); max-width: 14ch; }
.pg-lede { color: var(--ink-60); max-width: 34em; }

/* a file's own page: the release block from /releases/, with breadcrumbs over it */
.pg-file { padding-top: clamp(1.4rem, 5vh, 3rem); }
.pg-file .rel-next { padding-top: clamp(1rem, 3vh, 2rem); }
.pg-file .rel-next-disc { cursor: default; }
.pg-hook { margin: -.2rem 0 .9rem; font-family: var(--display); font-stretch: condensed; font-weight: 700; font-size: clamp(1.15rem, 1.5vw, 1.4rem);
  line-height: 1.1; text-transform: lowercase; color: var(--ink-60); max-width: 30em; }

/* chips that are links: the same chip; hover inverts, a hard cut */
a.rel-col, .pg-chip { text-decoration: none; color: var(--ink); }
.pg-chip { display: inline-flex; align-items: center; }
a.rel-col:hover, a.rel-col:focus-visible, .pg-chip:hover, .pg-chip:focus-visible { background: var(--ink); color: #000; box-shadow: none; outline: none; }
a.rel-col:hover .rel-ic path, a.rel-col:focus-visible .rel-ic path { stroke: #000; }

/* the preview: a chip that is a button. playing = inverted */
.pg-play { border: 0; cursor: pointer; margin-right: 1.2rem; margin-bottom: .8rem; vertical-align: middle; }
.pg-play:hover, .pg-play:focus-visible, .pg-play.is-on { background: var(--ink); color: #000; box-shadow: none; outline: none; }
.pg-play:hover .rel-ic path, .pg-play.is-on .rel-ic path { stroke: #000; }
.pg-play.is-on { background: var(--red); }
.rel-go { display: flex; flex-wrap: wrap; align-items: center; }

/* list sections on these pages */
.pg-sec .rel-bar { margin-bottom: clamp(1.4rem, 3.5vh, 2.4rem); }
.pg-lib-intro { color: var(--ink-60); margin: -.6rem 0 clamp(1.4rem, 3.5vh, 2.2rem); }

/* /tiers/: the lanyards as a ladder, reading down, with what each one gets */
.pg-tiers .rel-j { align-items: start; }
.pg-tier-name { font-family: var(--display); font-stretch: condensed; font-weight: 700; font-size: clamp(1.6rem, 2.4vw, 2.2rem); line-height: .95;
  text-transform: lowercase; letter-spacing: -.01em; color: var(--ink); margin-bottom: .6rem; }
.pg-gets { list-style: none; display: grid; gap: .3rem; font-size: 1.02rem; line-height: 1.45; color: var(--ink); }
.pg-gets li::before { content: ''; display: inline-block; width: .42em; height: .42em; margin-right: .6em; vertical-align: .14em; border-radius: 2px; background: var(--tc, var(--red)); }
.pg-gets .pg-gets-lead { color: var(--ink-60); }
.pg-gets .pg-gets-lead::before { display: none; }

/* /faq/: the receipt's answers, one under another */
.pg-faq { display: grid; gap: clamp(2rem, 5vh, 3.2rem); }
.pg-faq > * { max-width: 46rem; }
.pg-q { font-family: var(--display); font-stretch: condensed; font-weight: 700; font-size: clamp(1.8rem, 3.4vw, 2.8rem); line-height: .92;
  letter-spacing: -.015em; text-transform: lowercase; margin-bottom: .7rem; text-wrap: balance; }
.pg-q .rel-kicker-n { display: block; margin-bottom: .45rem; font-family: 'Franklin Gothic Bold', var(--display); font-size: .8rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--ink-60); }

/* /gooning/: the guide. one column of reading, headings in the display face */
.pg-guide > * { max-width: 46rem; }
.pg-h2 { font-family: var(--display); font-stretch: condensed; font-weight: 700; font-size: clamp(2.2rem, 4.6vw, 3.6rem); line-height: .9;
  letter-spacing: -.02em; word-spacing: -.06em; text-transform: lowercase; margin-bottom: 1.2rem; text-wrap: balance; }
.pg-guide .rel-desc + .rel-desc { margin-top: 1em; }
.pg-guide a { color: inherit; text-decoration: none; box-shadow: inset 0 -2px 0 var(--red); }
.pg-guide a:hover { background: var(--ink); color: #000; box-shadow: none; }
.pg-guide a.rel-col { box-shadow: inset 0 0 0 1px var(--ink-12); }
.pg-links { margin-top: 1.4rem; }
.pg-gloss { display: grid; grid-template-columns: minmax(8rem, max-content) 1fr; gap: 1rem 2rem; margin-top: .4rem; }
.pg-gloss dt { font-family: var(--display); font-stretch: condensed; font-weight: 700; font-size: 1.5rem; line-height: 1; text-transform: lowercase; }
.pg-gloss dd { font-size: 1.08rem; line-height: 1.55; color: var(--ink); }
.pg-toc { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; margin-top: 1.4rem; font-family: var(--display); font-stretch: condensed; font-weight: 700;
  font-size: 1.15rem; text-transform: lowercase; }
.pg-toc a { color: var(--ink); text-decoration: none; box-shadow: inset 0 -2px 0 var(--red); }
.pg-toc a:hover, .pg-toc a:focus-visible { background: var(--ink); color: #000; box-shadow: none; outline: none; }

@media (max-width: 700px) {
  .pg-gloss { grid-template-columns: 1fr; gap: .3rem; }
  .pg-gloss dd { margin-bottom: 1rem; }
  .pg-h1 { max-width: none; }
}

/* "inside this file": the deeper notes, folded under the release block. closed by default, opens as a cut */
.pg-notes { margin-top: clamp(1.6rem, 4vh, 2.6rem); border-top: 1px solid var(--ink-12); }
.pg-notes summary { list-style: none; display: inline-flex; align-items: center; gap: .6rem; padding: 1rem 0; cursor: pointer;
  font-family: var(--display); font-stretch: condensed; font-weight: 700; font-size: 1.3rem; text-transform: lowercase; color: var(--ink); }
.pg-notes summary::-webkit-details-marker { display: none; }
.pg-notes summary span { box-shadow: inset 0 -2px 0 var(--red); }
.pg-notes summary:hover span, .pg-notes summary:focus-visible span { background: var(--ink); color: #000; box-shadow: none; }
.pg-notes summary svg { width: 1.6rem; height: 1rem; fill: none; stroke: var(--ink); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.pg-notes[open] summary svg { transform: rotate(90deg); }
.pg-notes-in { padding-bottom: 1.4rem; }
.pg-notes .pg-gloss { grid-template-columns: minmax(7rem, max-content) 1fr; }
.pg-notes .pg-gloss dt { font-size: 1.2rem; }
.pg-notes .pg-gloss dd { font-size: 1rem; }
.pg-notes-in .rel-desc { margin-bottom: 1.2rem; }
.pg-notes dd a { color: inherit; text-decoration: none; box-shadow: inset 0 -2px 0 var(--red); }
.pg-notes dd a:hover { background: var(--ink); color: #000; box-shadow: none; }

/* ============ /gooning/: the guide, built from the home page's parts ============
   one rhythm for every section: the heading in the living type on the left, the words on the right, then that section's
   one object full width (steps, discs, the type wall, the sticker wall, the receipt, the label, the ticks, the bands).
   house rules: two faces, lowercase display, ink and alpha-of-ink, red for the marks, hover = a hard inversion */
.pg-guide-page main { overflow-x: clip; }
.pg-g { width: 100%; max-width: calc(min(1240px, 90vw) + var(--frame) * 2); margin: 0 auto; padding: clamp(3.5rem, 9vh, 6rem) var(--frame) 0; container-type: inline-size; }
.pg-g[id] { scroll-margin-top: 4.5rem; }

/* the top: the question in the home page's living type, the eyes for the o's */

/* every section's heading: the living type, two lines at most */
.pg-g-h { font-family: 'Roboto Flex', var(--display); font-weight: 740; font-stretch: 40%; font-variation-settings: 'wght' 740, 'wdth' 40;
  font-size: min(5.6cqi, 6.4rem); line-height: .88; letter-spacing: -.02em; text-transform: lowercase; color: var(--ink); margin: 0; text-wrap: balance; }
.pg-g-h .vp-line { display: block; }
.pg-g-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: clamp(2rem, 6cqi, 6rem); align-items: start; }
.pg-g-col .rel-desc, .pg-g-read .rel-desc { font-size: clamp(1.08rem, 1.35vw, 1.28rem); line-height: 1.6; color: var(--ink); max-width: 36em; text-wrap: pretty; }
.pg-g-read .rel-desc + .rel-desc { margin-top: 1em; }
.pg-g-read .rel-desc:first-child { font-size: clamp(1.25rem, 1.9vw, 1.65rem); line-height: 1.4; }
.pg-g a:not([class]) { color: inherit; text-decoration: none; box-shadow: inset 0 -2px 0 var(--red); }
.pg-g a:not([class]):hover, .pg-g a:not([class]):focus-visible { background: var(--ink); color: #000; box-shadow: none; outline: none; }
.pg-g-sub { color: var(--ink-60); max-width: 30em; margin-top: 1.2rem; }
.pg-g-stick { position: sticky; top: 5.5rem; }
.pg-g-col > .pg-g-h + * { margin-top: clamp(1.2rem, 3vh, 1.8rem); }

/* the one big line, as the home page sets its lead review */
.pg-g-pull { margin: clamp(4rem, 12vh, 7.5rem) 0 0; font-family: 'Roboto Flex', var(--display); font-weight: 1000; font-stretch: 151%; font-variation-settings: 'wght' 1000, 'wdth' 151;
  font-size: min(8.4cqi, 7.6rem); line-height: .9; letter-spacing: -.03em; text-transform: lowercase; text-align: center; color: var(--ink); text-wrap: balance; }

/* how a session goes: five steps along one line (a real sequence, so numbered) */
.pg-steps { list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(1.4rem, 2.6cqi, 2.4rem); margin: clamp(3rem, 8vh, 5rem) 0 0; padding: 0; counter-reset: s; }
.pg-steps li { position: relative; padding-top: 1.4rem; border-top: 2px solid var(--ink-12); }
.pg-steps li::before { content: ''; position: absolute; left: 0; top: -2px; width: 2.4rem; height: 2px; background: var(--red); }
.pg-step-n { display: block; font-family: var(--display); font-stretch: condensed; font-weight: 700; font-size: .8rem; letter-spacing: .18em; color: var(--red); margin-bottom: .7rem; font-variant-numeric: tabular-nums; }
.pg-steps h3 { font-family: var(--display); font-stretch: condensed; font-weight: 700; font-size: clamp(1.7rem, 2.6vw, 2.4rem); line-height: .92; text-transform: lowercase; color: var(--ink); margin-bottom: .6rem; }
.pg-steps p { font-size: 1.02rem; line-height: 1.5; color: var(--ink-60); }

/* gooning hypnosis: four real discs, the newest out */
.pg-g-kick { margin: clamp(3rem, 8vh, 4.5rem) 0 1.2rem; font-family: var(--display); font-stretch: condensed; font-weight: 700; font-size: .8rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-60); }
.pg-g-cds { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1rem, 3cqi, 2.6rem); margin: 0; padding: 0; }
.pg-g-cd { display: grid; gap: .35rem; color: var(--ink); text-decoration: none; }
.pg-g-cd .rel-cd { width: 100%; height: auto; aspect-ratio: 1; margin-bottom: .6rem; }
.pg-g-cd-t { font-family: var(--display); font-stretch: condensed; font-weight: 700; font-size: clamp(1.15rem, 1.7vw, 1.5rem); line-height: 1; text-transform: lowercase; }
.pg-g-cd-m { font-family: var(--display); font-stretch: condensed; font-weight: 700; font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-60); }
.pg-g-cd:hover .pg-g-cd-t, .pg-g-cd:focus-visible .pg-g-cd-t { box-shadow: inset 0 -2px 0 var(--red); }
.pg-g-cd:focus-visible { outline: none; }

/* made for every type: the versions as one wall of the living type, each the door to its files */
.pg-types { display: flex; flex-wrap: wrap; align-items: baseline; gap: clamp(.2rem, .8cqi, .7rem) clamp(.9rem, 2.4cqi, 2.2rem); margin-top: clamp(2.6rem, 7vh, 4.5rem);
  font-family: 'Roboto Flex', var(--display); font-weight: 620; font-stretch: 25%; font-variation-settings: 'wght' 620, 'wdth' 25; text-transform: lowercase; }
.pg-type { display: inline-flex; align-items: baseline; gap: .35em; color: var(--ink); text-decoration: none; padding: 0 .12em; margin: 0 -.12em; }
.pg-type-w { font-size: min(9.6cqi, 6.8rem); line-height: .92; letter-spacing: -.012em; }      /* still type here: the words sit close, a swell would run them together */
.pg-type i { font-family: var(--display); font-stretch: condensed; font-weight: 700; font-style: normal; font-variation-settings: normal; font-size: clamp(.72rem, .9vw, .84rem);
  letter-spacing: .16em; text-transform: uppercase; color: var(--red); white-space: nowrap; }
.pg-type:hover, .pg-type:focus-visible { background: var(--ink); color: #000; outline: none; }
.pg-type:hover i, .pg-type:focus-visible i { color: #000; }

/* the gooner's dictionary: the home page's sticker wall (js/kinds.js), taller for three rows */
.pg-g-wall { margin-top: clamp(2rem, 5vh, 3rem); }
.pg-g-wall.kinds-on .wall { aspect-ratio: 2.15; }
.pg-g-wall .kind[id] { scroll-margin-top: 6rem; }
.pg-g-wall .kind-tier--all { display: none; }
.pg-g-wall .kind-text a { color: inherit; text-decoration: none; box-shadow: inset 0 -2px 0 var(--red); }

/* how to listen: the receipt */
.pg-g-split--slip { align-items: start; }
.pg-g-slip { justify-self: center; }
.pg-g-slip .slip-q span { min-width: 2.2em; text-align: center; }

/* strobe safety: the red burst slapped on beside the heading, four plain lines with the red icons */
.pg-g-hwrap { position: relative; display: inline-block; --sw: clamp(100px, 11cqi, 170px); }
.pg-g-warn { position: absolute; z-index: 2; width: var(--sw); left: calc(100% + .4rem); top: 50%; translate: 0 -50%; rotate: 9deg; cursor: default; }
.pg-lines { list-style: none; display: grid; gap: 1.1rem; margin: 1.8rem 0 0; padding: 0; }
.pg-lines li { display: grid; grid-template-columns: 2.2rem minmax(0, 1fr); gap: 1rem; align-items: start; }
.pg-lines .pg-line-ic { width: 2.2rem; height: 2.2rem; color: var(--red); }
.pg-lines p { font-size: clamp(1.02rem, 1.25vw, 1.15rem); line-height: 1.55; color: var(--ink); }

/* consent: a big red house icon, a short line, plain words. two across */
.pg-care { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2.4rem, 6vh, 3.6rem) clamp(2rem, 6cqi, 6rem); margin: clamp(3rem, 8vh, 5rem) 0 0; padding: 0; }
.pg-care li { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: clamp(1rem, 2cqi, 1.6rem); align-items: start; align-content: start; }
.pg-care .pg-care-ic { grid-row: 1 / 3; width: clamp(2.8rem, 4.4cqi, 4rem); height: clamp(2.8rem, 4.4cqi, 4rem); color: var(--red); }
.pg-care .rel-ic-a, .pg-lines .rel-ic-a, .pg-ticks .rel-ic-a { stroke-width: 1.7; } .pg-care .rel-ic-b, .pg-lines .rel-ic-b, .pg-ticks .rel-ic-b { stroke-width: 1.2; }
.pg-care h3 { font-family: var(--display); font-stretch: condensed; font-weight: 700; font-size: clamp(1.6rem, 2.6vw, 2.3rem); line-height: .95; letter-spacing: -.01em; text-transform: lowercase; color: var(--ink); margin: .2rem 0 .6rem; text-wrap: balance; }
.pg-care p { font-size: clamp(1.05rem, 1.3vw, 1.22rem); line-height: 1.55; color: var(--ink); max-width: 32em; text-wrap: pretty; }

/* poppers: the label off the bottle. paper, black print, the one rule that can kill in red */
.pg-g-split--label { align-items: start; }
.pg-label { justify-self: center; width: min(100%, 34rem); background: var(--ink); color: #000; border-radius: 14px; rotate: -.6deg; padding: 0 0 .6rem; overflow: hidden; }
.pg-label-head { background: var(--red); color: #000; padding: .9rem 1.4rem .8rem; font-family: 'Franklin Gothic Bold', var(--display); font-weight: 700; font-size: clamp(1rem, 1.4vw, 1.25rem); letter-spacing: .14em; text-transform: uppercase; }
.pg-label ul { list-style: none; margin: 0; padding: 0 1.4rem; }
.pg-label li { padding: 1rem 0 1.05rem; border-bottom: 2px dashed rgba(0, 0, 0, .35); }
.pg-label li:last-child { border-bottom: 0; }
.pg-label h3 { font-family: 'Franklin Gothic Bold', var(--display); font-weight: 700; font-size: clamp(1rem, 1.25vw, 1.12rem); letter-spacing: .06em; text-transform: uppercase; line-height: 1.15; margin-bottom: .4rem; }
.pg-label p { font-size: clamp(.98rem, 1.15vw, 1.06rem); line-height: 1.5; color: #000; }
.pg-label .pg-label-hot { margin: 1rem -1.4rem 0; padding: 1rem 1.4rem 1.1rem; background: #000; color: var(--ink); border-bottom: 0; }
.pg-label .pg-label-hot h3 { color: var(--red); font-size: clamp(1.1rem, 1.5vw, 1.3rem); }
.pg-label .pg-label-hot p { color: var(--ink); }

/* aftercare: a ticked list, read down, two across on wide screens */
.pg-ticks { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.6rem clamp(2rem, 6cqi, 6rem); margin: clamp(2.6rem, 7vh, 4rem) 0 0; padding: 0; }
.pg-ticks li { display: grid; grid-template-columns: 2.2rem minmax(0, 1fr); column-gap: 1rem; align-items: baseline; padding-bottom: 1.4rem; border-bottom: 2px solid var(--ink-12); }
.pg-ticks .pg-tick-ic { grid-row: 1 / 3; width: 2.2rem; height: 2.2rem; color: var(--red); align-self: start; }
.pg-ticks h3 { font-family: var(--display); font-stretch: condensed; font-weight: 700; font-size: clamp(1.4rem, 2vw, 1.8rem); line-height: 1; text-transform: lowercase; color: var(--ink); margin-bottom: .35rem; }
.pg-ticks p { font-size: 1.04rem; line-height: 1.5; color: var(--ink-60); }

/* questions: every one open. the question on the left in the display face, the answer beside it at reading size */
.pg-qas { margin-top: clamp(2rem, 5vh, 3rem); }
.pg-qa { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: 1rem clamp(2rem, 6cqi, 6rem); align-items: baseline; padding: clamp(1.6rem, 4vh, 2.4rem) 0; border-top: 2px solid var(--ink-12); }
.pg-qa:last-child { border-bottom: 2px solid var(--ink-12); }
.pg-qa h3 { font-family: var(--display); font-stretch: condensed; font-weight: 700; font-size: clamp(1.7rem, 3vw, 2.6rem); line-height: .95; letter-spacing: -.01em; text-transform: lowercase; color: var(--ink); text-wrap: balance; }
.pg-qa p { font-size: clamp(1.12rem, 1.5vw, 1.38rem); line-height: 1.5; color: var(--ink); max-width: 34em; text-wrap: pretty; }
@media (max-width: 820px) { .pg-qa { grid-template-columns: minmax(0, 1fr); } }

/* where to start: the home page's coloured-in bands, edge to edge */
.pg-g--doors .pg-g-sub { margin-bottom: clamp(2rem, 5vh, 3rem); }
.pg-g-doors { height: auto; margin: 0 calc(50% - 50vw); width: 100vw; grid-template-rows: none; }
.pg-g-doors .join-row { min-height: clamp(8.5rem, 21vh, 13rem); }
.pg-g-doors .join-name { font-size: min(9.6vw, 11vh); }
@media (min-width: 1100px) { .pg-g-doors .join-name { font-size: min(7.4vw, 11vh); } .pg-g-doors .join-sub { grid-row: 1 / 3; } }
.pg-g--doors + .rel-join { margin-top: clamp(5rem, 14vh, 9rem); }

@media (max-width: 980px) {
  .pg-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 2rem; }
}
@media (max-width: 820px) {
  .pg-g-split { grid-template-columns: minmax(0, 1fr); gap: 1.4rem; }
  .pg-g-stick { position: static; }
  .pg-g-h { font-size: min(10.5cqi, 4.6rem); }
  .pg-g-cds { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pg-care, .pg-ticks { grid-template-columns: minmax(0, 1fr); }
  .pg-type-w { font-size: min(14cqi, 4.2rem); }
  .pg-g-hwrap { --sw: clamp(92px, 26cqi, 130px); }
  .pg-g-wall.kinds-on .wall { aspect-ratio: auto; }
}
@media (max-width: 520px) {
  .pg-steps { grid-template-columns: minmax(0, 1fr); }
}
.pg-label .pg-label-hot:first-child { margin-top: 0; }

/* the top. the question is the biggest thing on the page, set still and left, the way every section reads. the answer is a
   different voice: its own column to the right, a red mark over it, the definition in ink and the invitation quieter under it */
.pg-g-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); column-gap: clamp(2rem, 6cqi, 6rem); padding-top: clamp(1.4rem, 4vh, 2.6rem); }
.pg-g-hero > .pg-crumbs { grid-column: 1 / -1; margin-bottom: 0; }
.pg-g-title { grid-column: 1 / -1; font-family: 'Roboto Flex', var(--display); font-weight: 760; font-stretch: 40%; font-variation-settings: 'wght' 760, 'wdth' 40;
  font-size: min(15.5cqi, 25svh); line-height: .84; letter-spacing: -.025em; text-transform: lowercase; color: var(--ink); margin: clamp(1.6rem, 5vh, 3rem) 0 0; }
.pg-g-title-l { display: block; white-space: nowrap; }
.pg-g-answer { grid-column: 2; margin-top: clamp(2.2rem, 6vh, 3.6rem); padding-top: 1.4rem; position: relative; max-width: 34rem; }
.pg-g-answer::before { content: ''; position: absolute; left: 0; top: 0; width: 3.2rem; height: 3px; background: var(--red); }
.pg-g-def { font-size: clamp(1.3rem, 2vw, 1.75rem); line-height: 1.32; letter-spacing: -.005em; color: var(--ink); text-wrap: pretty; }
.pg-g-inv { margin-top: 1.1rem; font-size: clamp(1.02rem, 1.25vw, 1.15rem); line-height: 1.5; color: var(--ink-60); }
.pg-g-go { display: inline-flex; align-items: center; gap: .45em; margin-top: 1.2rem; font-family: var(--display); font-stretch: condensed; font-weight: 700; font-size: .82rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ink); text-decoration: none; padding: .35em .5em; margin-left: -.5em; }
.pg-g-go .pg-g-go-ar { width: 1.6em; height: auto; rotate: 90deg; fill: none; stroke: var(--red); stroke-width: 2.2; stroke-linecap: round; }
.pg-g-go:hover, .pg-g-go:focus-visible { background: var(--ink); color: #000; outline: none; }
.pg-g-go:hover .pg-g-go-ar, .pg-g-go:focus-visible .pg-g-go-ar { stroke: #000; }
.pg-g-inv .pg-g-go { display: flex; width: max-content; }
@media (max-width: 820px) {
  .pg-g-hero { grid-template-columns: minmax(0, 1fr); }
  .pg-g-answer { grid-column: 1; }
  .pg-g-title { font-size: min(19cqi, 22svh); }
}

/* the separator between sections: the house's red hand-drawn line (pages.js draws and boils it) */
.pg-g-sep.rel-wig { width: 100%; margin: 0 0 clamp(3.5rem, 9vh, 6rem); }

/* what's in here: the contents on their own, one door per section, a red house icon each */
.pg-ix { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(1.4rem, 3cqi, 2.6rem); margin: clamp(2rem, 5vh, 3rem) 0 0; padding: 0; }
.pg-ix a { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 1rem; align-items: center; padding: 1.1rem .7rem 1.2rem; margin: 0 -.7rem;
  border-top: 2px solid var(--ink-12); color: var(--ink); text-decoration: none; }
.pg-ix .pg-ix-ic { grid-row: 1 / 3; width: clamp(2.2rem, 3cqi, 2.8rem); height: clamp(2.2rem, 3cqi, 2.8rem); color: var(--red); }
.pg-ix .rel-ic-a { stroke-width: 1.7; } .pg-ix .rel-ic-b { stroke-width: 1.2; }
.pg-ix-n { font-family: var(--display); font-stretch: condensed; font-weight: 700; font-size: .72rem; letter-spacing: .18em; color: var(--ink-40); font-variant-numeric: tabular-nums; }
.pg-ix-t { font-family: var(--display); font-stretch: condensed; font-weight: 700; font-size: clamp(1.35rem, 2vw, 1.75rem); line-height: 1; text-transform: lowercase; }
.pg-ix a:hover, .pg-ix a:focus-visible { background: var(--ink); color: #000; outline: none; }
.pg-ix a:hover .pg-ix-ic, .pg-ix a:focus-visible .pg-ix-ic, .pg-ix a:hover .pg-ix-n, .pg-ix a:focus-visible .pg-ix-n { color: #000; }
@media (max-width: 980px) { .pg-ix { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .pg-ix { grid-template-columns: minmax(0, 1fr); } }

/* a real review, set as the home page sets its lead one */
.pg-g-review { margin: clamp(3.5rem, 9vh, 5.5rem) 0 0; }
.pg-g-review blockquote { margin: 0; }
.pg-g-review blockquote p { font-family: var(--display); font-stretch: condensed; font-weight: 700; text-transform: lowercase; font-size: clamp(2rem, 4.6cqi, 3.7rem);
  line-height: .94; letter-spacing: -.02em; word-spacing: -.06em; max-width: 22ch; text-wrap: balance; color: var(--ink); }
.pg-g-review blockquote p::before { content: '\201C'; } .pg-g-review blockquote p::after { content: '\201D'; }
.pg-g-review figcaption { display: flex; align-items: center; gap: .7rem; margin-top: 1.1rem; font-family: var(--display); font-stretch: condensed; font-weight: 700;
  font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-60); }
.pg-g-review figcaption::before { content: ''; width: 2rem; height: 3px; background: var(--red); }

/* the way in, straight after the hypnosis: one coloured-in band, the first tier, edge to edge */
.pg-g-cta { margin: clamp(3rem, 8vh, 4.5rem) calc(50% - 50vw) 0; width: 100vw; min-height: clamp(8.5rem, 20vh, 12rem); }
.pg-g-cta .join-name { font-size: min(8.4vw, 10vh); }
@media (min-width: 1100px) { .pg-g-cta { grid-template-columns: 3.4rem minmax(0, 1fr) auto; } .pg-g-cta .join-name { font-size: min(6.4vw, 10vh); } .pg-g-cta .join-sub { grid-column: 3; grid-row: 1 / 3; align-self: center; } }

/* poppers: where the facts come from, printed small at the foot of the label */
.pg-label-src { padding: .8rem 1.4rem .4rem; font-size: .84rem; line-height: 1.5; color: rgba(0, 0, 0, .7); border-top: 2px dashed rgba(0, 0, 0, .35); margin: 0 0 0; }
.pg-label-src a { color: #000; text-decoration: none; box-shadow: inset 0 -2px 0 var(--red); margin-right: .9rem; white-space: nowrap; }
.pg-label-src a:hover, .pg-label-src a:focus-visible { background: #000; color: var(--ink); box-shadow: none; outline: none; }

/* who wrote it and when, quietly, at the end */
.pg-g-credit { padding-top: clamp(4rem, 10vh, 6rem); font-size: .98rem; line-height: 1.5; color: var(--ink-60); }

/* where did gooning come from: a timeline, one row per moment. what's on record is ink; the story is marked red */
.pg-time { list-style: none; margin: clamp(2.6rem, 7vh, 4rem) 0 0; padding: 0; }
.pg-time li { display: grid; grid-template-columns: minmax(8rem, 13rem) minmax(0, 1fr) auto; gap: .4rem clamp(1.4rem, 3cqi, 2.6rem); align-items: baseline;
  padding: clamp(1.1rem, 2.8vh, 1.6rem) 0; border-top: 2px solid var(--ink-12); }
.pg-time li:last-child { border-bottom: 2px solid var(--ink-12); }
.pg-time-when { font-family: var(--display); font-stretch: condensed; font-weight: 700; font-size: clamp(1.5rem, 2.4vw, 2.1rem); line-height: 1; text-transform: lowercase; color: var(--ink); }
.pg-time p { font-size: clamp(1.05rem, 1.3vw, 1.2rem); line-height: 1.55; color: var(--ink); max-width: 40em; }
.pg-time-tag { display: inline-flex; align-items: center; gap: .5em; font-family: var(--display); font-stretch: condensed; font-weight: 700; font-size: .72rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ink-60); white-space: nowrap; }
.pg-time-tag::before { content: ''; width: .6em; height: .6em; border-radius: 2px; background: var(--ink-60); }
.pg-time--story .pg-time-tag { color: var(--red); } .pg-time--story .pg-time-tag::before { background: none; box-shadow: inset 0 0 0 2px var(--red); }
.pg-time--story p { color: var(--ink-60); }

/* what is goonbate: the facts as a spec sheet, short enough to quote */
.pg-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 clamp(1.2rem, 3cqi, 2.4rem); margin: clamp(2.6rem, 7vh, 4rem) 0 0; }
.pg-facts > div { padding: 1.1rem 0 1.3rem; border-top: 2px solid var(--ink-12); }
.pg-facts dt { font-family: var(--display); font-stretch: condensed; font-weight: 700; font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-60); margin-bottom: .45rem; }
.pg-facts dd { font-family: var(--display); font-stretch: condensed; font-weight: 700; font-size: clamp(1.25rem, 1.9vw, 1.6rem); line-height: 1.08; text-transform: lowercase; color: var(--ink); }
.pg-facts dd a { color: inherit; text-decoration: none; box-shadow: inset 0 -2px 0 var(--red); }
.pg-facts dd a:hover, .pg-facts dd a:focus-visible { background: var(--ink); color: #000; box-shadow: none; outline: none; }

/* the whole dictionary, readable, under the wall: three columns, each word with its sticker's colour */
.pg-dict { columns: 3 16rem; column-gap: clamp(1.6rem, 4cqi, 3.4rem); margin: clamp(2.4rem, 6vh, 3.4rem) 0 0; padding-top: clamp(1.6rem, 4vh, 2.2rem); border-top: 2px solid var(--ink-12); }
.pg-dict > div { break-inside: avoid; padding: 0 0 1.2rem; scroll-margin-top: 6rem; }
.pg-dict dt { display: flex; align-items: center; gap: .55rem; font-family: var(--display); font-stretch: condensed; font-weight: 700; font-size: clamp(1.2rem, 1.6vw, 1.4rem); line-height: 1; text-transform: lowercase; color: var(--ink); margin-bottom: .35rem; }
.pg-dict dt i { width: .62em; height: .62em; border-radius: 50%; background: var(--c); flex: none; }
.pg-dict dd { font-size: .98rem; line-height: 1.5; color: var(--ink-60); }
.pg-dict dd a { color: var(--ink); }
.pg-dict > div:target dt { color: var(--red); }

/* where the facts come from, printed small at the foot of a section */
.pg-g-src { margin-top: clamp(2rem, 5vh, 2.8rem); font-size: .86rem; line-height: 1.5; color: var(--ink-60); }
.pg-g-src a { margin: 0 .9rem 0 .3rem; white-space: nowrap; }
.pg-g-src a:last-of-type { margin-right: .3rem; }

@media (max-width: 980px) { .pg-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 820px) {
  .pg-time li { grid-template-columns: minmax(0, 1fr) auto; }
  .pg-time li p { grid-column: 1 / -1; }
}