/* ============================================================
   components.css — primitives and content components.
   ============================================================ */

@layer components {

  /* ===============================================================
     PANEL — the base. Getting this right is 60% of the build.

     No clip-path, no chamfer, no shadow, no radius. Because nothing
     clips, the focus ring is never clipped either -- which removes an
     entire class of accessibility bug for free.
     =============================================================== */

  /* Four hairlines, split by job:

     - top and left are the ANIMATED pair, drawn by the reveal. They live on
       the frame child's two pseudo-elements, because scaleX/scaleY cannot
       transform an element's own border.
     - right and bottom are STATIC, painted as two background-image strips
       on the panel itself. They have nothing to animate, so they need no
       element.

     Both read --panel-hair, so hover, focus-within and the active variant
     move all four edges together by setting one custom property. */

  .pg-panel {
    --panel-hair: var(--hair);
    position: relative;
    padding: var(--s-5);
    border: 0;
    background-color: var(--bg-1);
    background-image:
      linear-gradient(var(--panel-hair), var(--panel-hair)),
      linear-gradient(var(--panel-hair), var(--panel-hair));
    background-repeat: no-repeat;
    background-size: 1px 100%, 100% 1px;
    background-position: 100% 0, 0 100%;
    transition: --panel-hair var(--dur-2) var(--ease-out-quick);
  }

  @media (min-width: 1024px) {

    .pg-panel {
      padding: var(--s-7);
    }
  }

  .pg-panel__frame {
    position: absolute;
    inset: 0;
    pointer-events: none;
  }

  .pg-panel__frame::before,
  .pg-panel__frame::after {
    content: "";
    position: absolute;
    background: var(--panel-hair);
  }

  /* Top bar */
  .pg-panel__frame::before {
    inset-block-start: 0;
    inset-inline: 0;
    block-size: 1px;
    transform-origin: left;
  }

  /* Left bar */
  .pg-panel__frame::after {
    inset-block: 0;
    inset-inline-start: 0;
    inline-size: 1px;
    transform-origin: top;
  }

  .pg-panel--flat {
    background-color: transparent;
  }

  .pg-panel--inset {
    background-color: var(--bg-3);
    box-shadow: var(--inset-top);
  }

  .pg-panel--active {
    --panel-hair: var(--hair-accent);
  }

  /* Butt joint. Sibling panels share one hairline; the emphasised panel is
     raised so the shared edge belongs to it rather than to whichever
     happens to paint last. */
  .pg-panel + .pg-panel {
    margin-block-start: -1px;
  }

  .pg-panel:hover,
  .pg-panel:focus-within,
  .pg-panel--active {
    position: relative;
    z-index: var(--z-raised);
  }

  /* Corner ticks. Eight-pixel L arms from border-top/border-left on the
     frame's own pseudo-elements' siblings -- implemented as separate spans
     so the frame's four bars stay animatable. */
  .pg-tick {
    position: absolute;
    inline-size: var(--tick);
    block-size: var(--tick);
    opacity: 0;
    transition: opacity var(--dur-2) var(--ease-out-quick);
    border-color: var(--fg-3);
    border-style: solid;
    border-width: 0;
  }

  .pg-panel--ticked .pg-tick,
  .pg-panel--active .pg-tick {
    opacity: 1;
  }

  .pg-tick--tl {
    inset-block-start: 0;
    inset-inline-start: 0;
    border-block-start-width: 1px;
    border-inline-start-width: 1px;
  }

  .pg-tick--tr {
    inset-block-start: 0;
    inset-inline-end: 0;
    border-block-start-width: 1px;
    border-inline-end-width: 1px;
  }

  .pg-tick--bl {
    inset-block-end: 0;
    inset-inline-start: 0;
    border-block-end-width: 1px;
    border-inline-start-width: 1px;
  }

  .pg-tick--br {
    inset-block-end: 0;
    inset-inline-end: 0;
    border-block-end-width: 1px;
    border-inline-end-width: 1px;
  }

  /* Hover state is NOT colour-only.
     --hair-1 -> --hair-3 computes to roughly 1.2:1 -> 2.4:1 against the
     ground, which is under the 3:1 WCAG 1.4.11 requires of a state
     indicator. So hover also fades the corner ticks in. Lighthouse does not
     test 1.4.11 -- a score of 100 is not the gate. */
  @media (hover: hover) and (pointer: fine) {

    .pg-panel:hover,
    .pg-panel:focus-within {
      --panel-hair: var(--hair-hot);
    }

    .pg-panel:hover .pg-tick,
    .pg-panel:focus-within .pg-tick {
      opacity: 1;
    }
  }

  /* Reveal: the container assembles before its content exists. */
  .pg-panel__frame::before {
    transform: scaleX(0);
  }

  .pg-panel__frame::after {
    transform: scaleY(0);
  }

  .is-in .pg-panel__frame::before {
    transform: scaleX(1);
    transition: transform var(--dur-3) var(--ease-out-hud);
  }

  .is-in .pg-panel__frame::after {
    transform: scaleY(1);
    transition: transform var(--dur-3) var(--ease-out-hud) 70ms;
  }

  /* No JS, or reduced motion: the frame is simply already drawn. A correct,
     invisible failure. */
  @media (prefers-reduced-motion: reduce) {

    .pg-panel__frame::before {
      transform: scaleX(1);
    }

    .pg-panel__frame::after {
      transform: scaleY(1);
    }
  }

  /* ===============================================================
     EYEBROW
     =============================================================== */

  .pg-eyebrow {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    font-family: var(--font-mono);
    font-size: var(--t-meta);
    font-variation-settings: "wdth" 87.5;
    text-transform: uppercase;
    color: var(--fg-3);
    margin-block-end: var(--s-4);
  }

  :lang(en) .pg-eyebrow {
    letter-spacing: var(--ls-meta);
  }

  .pg-eyebrow__dot {
    inline-size: 6px;
    block-size: 6px;
    background: var(--accent);
    flex: none;
  }

  .pg-eyebrow__idx {
    margin-inline-start: auto;
    color: var(--fg-3);
    opacity: 0.7;
  }

  /* ===============================================================
     STATUS CHIP — never interactive
     =============================================================== */

  .pg-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    block-size: 24px;
    padding-inline: var(--s-2);
    border: 1px solid currentColor;
    border-radius: var(--r-0);
    font-family: var(--font-mono);
    font-size: var(--t-meta);
    text-transform: uppercase;
    color: var(--idle);
  }

  :lang(en) .pg-chip {
    letter-spacing: var(--ls-meta);
  }

  .pg-chip::before {
    content: "";
    inline-size: 6px;
    block-size: 6px;
    border-radius: var(--r-pill);
    background: currentColor;
    flex: none;
  }

  .pg-chip--work {
    color: var(--work);
  }

  .pg-chip--done {
    color: var(--done);
  }

  .pg-chip--idle {
    color: var(--idle);
  }

  /* The only glow in the entire system, on a 6px dot. Max ONE instance per
     page and never on index.html or games.html. */
  .pg-chip--live {
    color: var(--live);
  }

  .pg-chip--live::before {
    box-shadow: var(--bloom-live);
  }

  /* ===============================================================
     BUTTON — two variants, total. A third is scope creep.
     =============================================================== */

  .pg-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-2);
    min-block-size: 48px;
    padding-inline: var(--s-5);
    border-radius: var(--r-0);
    font-family: var(--font-ui);
    font-size: var(--t-label);
    font-weight: 600;
    line-height: 1;
    text-transform: uppercase;
    border: 1px solid transparent;
    transition: background-color var(--dur-2) var(--ease-out-quick),
      border-color var(--dur-2) var(--ease-out-quick),
      color var(--dur-2) var(--ease-out-quick),
      transform var(--dur-1) var(--ease-out-quick);
  }

  :lang(en) .pg-btn {
    letter-spacing: var(--ls-label);
  }

  /* White on --peepo-500 is 1.74:1. --accent-fg is the ground colour, and
     it is never white. */
  .pg-btn--primary {
    background: var(--accent);
    color: var(--accent-fg);
  }

  .pg-btn--ghost {
    background: transparent;
    border-color: var(--hair-hot);
    color: var(--fg);
  }

  @media (hover: hover) and (pointer: fine) {

    .pg-btn--primary:hover {
      background: var(--peepo-600);
    }

    .pg-btn--ghost:hover {
      border-color: var(--accent);
      color: var(--link);
    }
  }

  .pg-btn:active {
    transform: translateY(1px);
  }

  @media (max-width: 479px) {

    .pg-btn {
      inline-size: 100%;
    }
  }

  .pg-cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-4);
    margin-block-start: var(--s-6);
  }

  /* ===============================================================
     MONORECORD — the spec sheet. The workhorse of the credibility
     strategy: seven mono fields plus one first-person sentence per
     person means five people generate roughly the information density
     of a fifty-person headshot grid, and every word of it is specific.
     =============================================================== */

  .pg-rec {
    display: grid;
    grid-template-columns: minmax(9rem, 14rem) 1fr;
    gap: var(--s-2) var(--s-5);
    font-variant-numeric: tabular-nums;
  }

  .pg-rec > * {
    border-block-end: var(--bd);
    padding-block: var(--s-2);
    margin: 0;
  }

  .pg-rec dt {
    font-family: var(--font-mono);
    font-size: var(--t-meta);
    text-transform: uppercase;
    color: var(--fg-3);
  }

  :lang(en) .pg-rec dt {
    letter-spacing: var(--ls-meta);
  }

  .pg-rec dd {
    font-size: var(--t-body);
    color: var(--fg);
  }

  @media (max-width: 639px) {

    .pg-rec {
      grid-template-columns: 1fr;
      gap: 0 0;
    }

    .pg-rec dt {
      border-block-end: 0;
      padding-block-end: 0;
    }
  }

  /* ===============================================================
     EMOTE CODE
     Appears only in the ticker, the sticker sheet, and the crew record's
     CODE field. Nowhere else, ever.

     No extra tracking: this is already a mono face, and tracking a mono
     face for codes just breaks the grid it exists to hold.
     =============================================================== */

  .pg-ec {
    font-family: var(--font-mono);
    font-size: var(--t-code);
    color: var(--fg-2);
    letter-spacing: 0;
  }

  /* ===============================================================
     ICONS

     The latin subset of all three faces carries no arrows and no
     geometric shapes -- U+2192, U+25B2 and U+25B6 are all absent. Typing
     them would fall back to Consolas mid-string, which is exactly the
     defect this system exists to avoid. So every one of them is an inline
     SVG at currentColor instead.
     =============================================================== */

  .pg-ico {
    inline-size: 1em;
    block-size: 1em;
    flex: none;
    vertical-align: -0.125em;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .pg-ico--solid {
    fill: currentColor;
    stroke: none;
  }

  /* The ticker's pause control swaps glyphs on state, so both live in the
     button and CSS picks one. JS only ever changes aria-pressed. */
  .pg-ticker__pause .pg-ico--play {
    display: none;
  }

  .pg-ticker__pause[aria-pressed="true"] .pg-ico--play {
    display: block;
  }

  .pg-ticker__pause[aria-pressed="true"] .pg-ico--pause {
    display: none;
  }

  /* ===============================================================
     SECTION DIVIDER — never a 2px rule, never a coloured rule
     =============================================================== */

  .pg-divider {
    display: flex;
    align-items: center;
    gap: var(--s-4);
    margin-block: var(--s-8);
  }

  .pg-divider::before,
  .pg-divider::after {
    content: "";
    flex: 1;
    block-size: 1px;
    background: var(--hair-strong);
  }

  .pg-divider__glyph {
    inline-size: 12px;
    block-size: 12px;
    opacity: 0.7;
  }

  /* ===============================================================
     HERO BOARD
     =============================================================== */

  .pg-hero {
    position: relative;
    min-block-size: var(--h-hero);
    display: flex;
    align-items: center;
    padding-block: calc(var(--h-header) + var(--h-ticker) + var(--s-8)) var(--s-8);
    overflow: hidden;
  }

  @media (max-width: 767px) {

    .pg-hero {
      min-block-size: 76svh;
      padding-block: calc(var(--h-header) + var(--s-7)) var(--s-7);
    }
  }

  .pg-hero__plate {
    position: absolute;
    inset: -10% 0 0 0;
    z-index: -1;
    background-size: cover;
    background-position: center;
    /* Driven by the single rAF loop in hud.js. translate3d only. */
    transform: translate3d(0, var(--plate-y, 0px), 0);
    opacity: 0.55;
  }

  .pg-hero__scrim {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--scrim-art);
  }

  .pg-hero__grid {
    inline-size: 100%;
  }

  .pg-hero__op {
    display: flex;
    flex-direction: column;
    gap: var(--s-4);
    align-items: flex-start;
  }

  /* ===============================================================
     STAT STRIP
     No rolling numerals: rolling 00 and 01 up from 0 is a null animation.
     =============================================================== */

  .pg-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-block: var(--bd-strong);
  }

  @media (min-width: 768px) {

    .pg-stats {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }

  .pg-stats__cell {
    padding: var(--s-6) var(--gutter);
    border-inline-end: var(--bd);
    border-block-end: var(--bd);
  }

  @media (min-width: 768px) {

    .pg-stats__cell {
      border-block-end: 0;
    }

    .pg-stats__cell:last-child {
      border-inline-end: 0;
    }
  }

  .pg-stats__label {
    display: block;
    margin-block-start: var(--s-3);
    font-family: var(--font-ui);
    font-size: var(--t-label);
    font-weight: 600;
    text-transform: uppercase;
    color: var(--fg-3);
  }

  :lang(en) .pg-stats__label {
    letter-spacing: var(--ls-label);
  }

  /* ===============================================================
     GAME TILE
     With two titles ship 6/6, not a lonely 4/4/4. Static grid, never a
     carousel.
     =============================================================== */

  .pg-tiles {
    display: grid;
    gap: var(--s-5);
    grid-template-columns: 1fr;
  }

  @media (min-width: 768px) {

    .pg-tiles {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  .pg-tile {
    display: block;
    color: inherit;
  }

  .pg-tile__art {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--bg-2);
  }

  .pg-tile__art img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    transform: scale(1);
    transition: transform 600ms var(--ease-out-quick);
  }

  @media (hover: hover) and (pointer: fine) {

    .pg-tile:hover .pg-tile__art img {
      transform: scale(1.04);
      will-change: transform;
    }
  }

  .pg-tile__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-3);
    margin-block-start: var(--s-4);
  }

  .pg-tile__title {
    margin-block-start: var(--s-3);
  }

  .pg-tile__pitch {
    max-inline-size: 34ch;
    color: var(--fg-2);
    margin-block-start: var(--s-2);
  }

  .pg-platforms {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    color: var(--fg-3);
    margin-block-start: var(--s-4);
  }

  .pg-platforms svg {
    inline-size: 20px;
    block-size: 20px;
  }

  /* ===============================================================
     CREW RECORD

     Artefact photography, not headshots. Five headshots in a grid is the
     universal signature of a startup that could not fill a row; five
     artefacts read as five craftspeople. Same afternoon, same camera.
     =============================================================== */

  .pg-crew {
    display: grid;
    gap: var(--s-6);
    grid-template-columns: 1fr;
    align-items: start;
  }

  @media (min-width: 900px) {

    .pg-crew {
      grid-template-columns: 5fr 7fr;
      gap: var(--s-8);
    }

    .pg-crew--flip .pg-crew__media {
      order: 2;
    }
  }

  .pg-crew__media {
    position: relative;
  }

  .pg-crew__photo {
    aspect-ratio: 16 / 9;
    inline-size: 100%;
    object-fit: cover;
    background: var(--bg-2);
  }

  /* The single element permitted to break a panel border. */
  .pg-crew__pose {
    position: absolute;
    inset-block-end: calc(var(--s-5) * -1);
    inset-inline-start: calc(var(--s-4) * -1);
    inline-size: 88px;
    block-size: 88px;
  }

  .pg-crew__body {
    position: relative;
  }

  .pg-crew__idx {
    position: absolute;
    inset-block-start: calc(var(--s-6) * -1);
    inset-inline-end: 0;
    font-family: var(--font-display);
    font-size: var(--t-numeral);
    font-variation-settings: "wdth" 125, "wght" 700;
    color: var(--fg);
    opacity: 0.12;
    pointer-events: none;
    user-select: none;
  }

  @media (max-width: 899px) {

    .pg-crew__idx {
      position: static;
      display: block;
      font-size: var(--t-h3);
      opacity: 1;
      color: var(--fg-3);
      font-family: var(--font-mono);
      margin-block-end: var(--s-2);
    }
  }

  .pg-crew__chip {
    inline-size: 72px;
    block-size: 72px;
    object-fit: cover;
    background: var(--bg-2);
    margin-block-end: var(--s-4);
  }

  .pg-crew__role {
    font-family: var(--font-ui);
    font-size: var(--t-label);
    font-weight: 600;
    text-transform: uppercase;
    color: var(--link);
    margin-block: var(--s-2) var(--s-5);
  }

  :lang(en) .pg-crew__role {
    letter-spacing: var(--ls-label);
  }

  .pg-crew__quote {
    max-inline-size: 52ch;
    margin-block-start: var(--s-5);
    color: var(--fg-2);
  }

  /* SLOT 06 — the vacancy variant. Identical geometry to a real record.
     This converts "we are only five people" from an admission into the
     site's highest-intent recruitment surface, for the price of one
     component variant. */
  .pg-crew--vacant .pg-crew__photo {
    border: 1px dashed var(--hair-hot);
    background: transparent;
    display: grid;
    place-items: center;
  }

  /* ===============================================================
     THE SHEET — emote sticker band, paper ground
     =============================================================== */

  .pg-sheetband {
    padding-block: var(--s-9);
    padding-inline: var(--gutter);
    background: var(--bg);
    color: var(--fg);
  }

  .pg-sheetband__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
    gap: var(--s-6);
    max-inline-size: var(--w-container);
    margin-inline: auto;
    margin-block: var(--s-7);
  }

  .pg-sticker {
    position: relative;
    text-align: center;
  }

  .pg-sticker [data-mascot] {
    --bog-size: 96px;
    margin-inline: auto;
  }

  .pg-sticker__code {
    display: block;
    margin-block-start: var(--s-3);
    font-family: var(--font-mono);
    font-size: var(--t-code);
    color: var(--fg-2);
  }

  /* Trim marks. Same language as the HUD's registration ticks, which is
     exactly why this band lands inside the system rather than beside it. */
  .pg-sticker::before,
  .pg-sticker::after {
    content: "";
    position: absolute;
    inline-size: 8px;
    block-size: 8px;
    border-color: var(--fg-3);
    border-style: solid;
    border-width: 0;
    opacity: 0.5;
  }

  .pg-sticker::before {
    inset-block-start: -8px;
    inset-inline-start: -8px;
    border-block-start-width: 1px;
    border-inline-start-width: 1px;
  }

  .pg-sticker::after {
    inset-block-end: 8px;
    inset-inline-end: -8px;
    border-block-end-width: 1px;
    border-inline-end-width: 1px;
  }

  /* ===============================================================
     SCHEMATIC FIGURE — the game section as a technical drawing.

     Sells systems instead of production value, which is the correct answer
     to a one-key-art budget.
     =============================================================== */

  .pg-schem {
    position: relative;
    margin: 0;
  }

  .pg-schem__art {
    inline-size: 100%;
    block-size: auto;
    display: block;
  }

  .pg-schem__overlay {
    display: none;
  }

  @media (min-width: 1024px) {

    .pg-schem__overlay {
      display: block;
      position: absolute;
      inset: 0;
      inline-size: 100%;
      block-size: 100%;
      pointer-events: none;
    }
  }

  .pg-schem__line {
    fill: none;
    stroke: var(--hair-accent);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
    stroke-dasharray: 400;
    stroke-dashoffset: 400;
  }

  .is-in .pg-schem__line {
    stroke-dashoffset: 0;
    transition: stroke-dashoffset var(--dur-4) var(--ease-out-hud) var(--d, 0ms);
  }

  .pg-schem__list {
    counter-reset: hotspot;
    display: grid;
    gap: var(--s-3);
    margin-block-start: var(--s-5);
  }

  .pg-schem__item {
    display: flex;
    gap: var(--s-3);
    font-family: var(--font-mono);
    font-size: var(--t-meta);
    text-transform: uppercase;
    color: var(--fg-2);
  }

  :lang(en) .pg-schem__item {
    letter-spacing: var(--ls-meta);
  }

  .pg-schem__num {
    color: var(--accent);
    flex: none;
  }

  /* ===============================================================
     TIMELINE — no cards, no borders, no connecting line graphic.
     Separation is whitespace alone. It scales forever with zero design
     decisions.
     =============================================================== */

  .pg-timeline {
    display: grid;
    gap: clamp(5rem, 10vw, 10rem);
  }

  .pg-tl__date {
    display: block;
    font-family: var(--font-mono);
    font-size: var(--t-meta);
    text-transform: uppercase;
    color: var(--accent);
    margin-block-end: var(--s-4);
  }

  :lang(en) .pg-tl__date {
    letter-spacing: var(--ls-meta);
  }

  .pg-tl__body {
    max-inline-size: var(--w-tight);
    color: var(--fg-2);
  }

  /* ===============================================================
     MEDIA GRID + LIGHTBOX
     3-9 tiles. A fixed nine-tile requirement for a game at first playable
     is a fiction.
     =============================================================== */

  .pg-media {
    display: grid;
    gap: var(--s-3);
    grid-template-columns: 1fr;
  }

  @media (min-width: 768px) {

    .pg-media {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (min-width: 1200px) {

    .pg-media {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }

  .pg-media__tile {
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--bg-2);
    padding: 0;
    inline-size: 100%;
  }

  .pg-media__tile img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
  }

  .pg-lightbox {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    background: var(--scrim-modal);
    display: grid;
    place-items: center;
    gap: var(--s-4);
    padding: var(--gutter);
  }

  .pg-lightbox[hidden] {
    display: none;
  }

  .pg-lightbox__img {
    max-block-size: 84svh;
    max-inline-size: 100%;
    object-fit: contain;
  }

  .pg-lightbox__bar {
    display: flex;
    align-items: center;
    gap: var(--s-5);
    font-family: var(--font-mono);
    font-size: var(--t-meta);
    text-transform: uppercase;
    color: var(--fg-2);
  }

  /* ===============================================================
     NEWS / LOG ROWS
     =============================================================== */

  .pg-log {
    border-block-start: var(--bd);
  }

  .pg-log__row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-3) var(--s-5);
    align-items: baseline;
    padding-block: var(--s-4);
    border-block-end: var(--bd);
  }

  .pg-log__date {
    font-family: var(--font-mono);
    font-size: var(--t-meta);
    text-transform: uppercase;
    color: var(--fg-3);
    flex: none;
    min-inline-size: 12ch;
  }

  :lang(en) .pg-log__date {
    letter-spacing: var(--ls-meta);
  }

  /* ===============================================================
     ROLE CARD — salary band is mandatory, as policy
     =============================================================== */

  .pg-role__chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2);
    margin-block: var(--s-4);
  }

  .pg-benefits {
    display: grid;
    gap: var(--s-3);
    padding-inline-start: var(--s-5);
    color: var(--fg-2);
    max-inline-size: var(--w-text);
  }

  /* ===============================================================
     CONTACT — mailto rows. No form: a form means a backend, spam
     handling, four UI states, consent copy, and a thing that silently
     breaks and loses you a publisher email.
     =============================================================== */

  .pg-contact__row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--s-3) var(--s-5);
    padding-block: var(--s-5);
    border-block-end: var(--bd);
  }

  .pg-contact__key {
    font-family: var(--font-mono);
    font-size: var(--t-meta);
    text-transform: uppercase;
    color: var(--fg-3);
    min-inline-size: 18ch;
  }

  :lang(en) .pg-contact__key {
    letter-spacing: var(--ls-meta);
  }

  .pg-copy {
    font-family: var(--font-mono);
    font-size: var(--t-code);
    color: var(--fg-3);
    border: var(--bd);
    padding: var(--s-1) var(--s-2);
    min-block-size: 44px;
    min-inline-size: 44px;
  }

  /* ===============================================================
     404 — THE DROP

     The one page where the design breaks character. 404 is the page
     nobody plans to see, which makes it the safest place to spend the
     brand's entire comedic budget at once.
     =============================================================== */

  .pg-standalone {
    min-block-size: 100svh;
    display: grid;
    place-items: center;
    text-align: start;
    position: relative;
    overflow: hidden;
    padding-block: calc(var(--h-header) + var(--h-ticker) + var(--s-4)) var(--s-8);
  }

  @media (max-width: 767px) {

    .pg-standalone {
      padding-block-start: calc(var(--h-header) + var(--s-4));
    }
  }

  /* The holding page's mascot. Smaller than the 404's, because this page is
     an apology, not a joke. */
  .pg-hold__bog {
    inline-size: 128px;
    block-size: 128px;
    margin-block-end: var(--s-6);
  }

  .pg-404__bog {
    --bog-size: 256px;
    margin-block-end: var(--s-6);
  }

  /* The drop is an inline SVG teardrop, not a rounded div. A third
     border-radius exemption would erode a rule that is only load-bearing
     while it has exactly two exceptions. */
  .pg-drop {
    position: absolute;
    inset-block-start: 30%;
    inset-inline-start: 50%;
    inline-size: 14px;
    block-size: 20px;
    color: var(--link);
    opacity: 0.75;
    pointer-events: none;
  }

  @media (prefers-reduced-motion: no-preference) {

    .pg-drop {
      animation: pg-fall 4s var(--ease-out-quick) 1.2s infinite;
    }

    .pg-ring {
      animation: pg-splash 4s var(--ease-out-quick) 1.2s infinite;
    }
  }

  .pg-ring {
    position: absolute;
    inset-block-end: 12%;
    inset-inline-start: 50%;
    inline-size: 8px;
    block-size: 8px;
    color: var(--link);
    opacity: 0;
    pointer-events: none;
  }

  @keyframes pg-fall {

    0% {
      transform: translateY(0) scaleY(1);
      opacity: 0;
    }

    8% {
      opacity: 0.75;
    }

    88% {
      transform: translateY(52svh) scaleY(1.35);
      opacity: 0.75;
    }

    92% {
      transform: translateY(54svh) scaleY(0.2);
      opacity: 0;
    }

    100% {
      transform: translateY(54svh) scaleY(0.2);
      opacity: 0;
    }
  }

  @keyframes pg-splash {

    0%,
    88% {
      transform: scale(0.2);
      opacity: 0;
    }

    92% {
      opacity: 0.8;
    }

    100% {
      transform: scale(9);
      opacity: 0;
    }
  }
}