@layer s145.art-b, s145.art-a;
/* gamingbroject.com s145 lab: archives (WS5). Lab only: /testqq/, manifest part 50-archives.json. Loaded on the body
 * classes category, tag, search and author, and on single-post for the related stories grid.
 *
 * SOURCE. The archive and related-grid rules of the judged articles merge (design/articles-final/merge-test.css), kept in
 * their two sub-layers (plan 3.1):
 *   s145.art-b  lens B (AB-04, AB-05) and the judge's overrides: card surface and meta, hover, press, the card ring,
 *               the poster titles, search hits, the last row and the 8-bit pagination arrow;
 *   s145.art-a  lens A (P6, P10) and what is new here: area tokens, labels, the visible search H1, the author bar, one
 *               link per card, no featured card on search, the pagination wrap, the touch and reduced-motion stops.
 * For !important the order is s145.sys (global.css) > s145.art-b > s145.art-a > s145 > gbl > gbu > unlayered.
 *
 * RULES. Scoped to body category, tag, search and author, and to the related grid on single posts; never to .archive
 * alone (it also matches the game hubs). Dark is the default; Day mode is html[data-gb-theme="light"] and every colour
 * here comes from an alias below that carries both values. Card box-shadow is never set, so Halloween's candle glow stays
 * (html.gb-hw). Motion sits inside (prefers-reduced-motion: no-preference), the press uses the scale property and no
 * transition is !important; the theme's own card transition therefore still times the archive cards (its press is
 * instant, its photo zoom is the theme's 400 ms), while the related grid, which has none, gets 140 ms and 420 ms.
 * Fills belong to global.css (the current page, Follow, the search button). Decision flag: ?s145off=art15 turns the
 * poster titles off (archive H1s then use the hub step). Keep this file free of the document-head tag text. */

@layer s145.art-a {

  /* 0. Area tokens: aliases of the site tokens with both themes' fallbacks, so the file reads right on its own
   *    (?gb145only=archives) and follows the ground Panos picks (violet, or flat black with ?s145black=1). */
  html {
    --s5arc-ink: var(--s145-ink, #f7f5fb);
    --s5arc-ink-2: var(--s145-ink-2, #c9c3d1);
    --s5arc-warm: var(--s145-warm, #c9b8a6);
    --s5arc-red: var(--s145-red, #ff2948);
    --s5arc-focus: var(--s145-focus, #21eaff);
    --s5arc-surface: var(--s145-surface-1, #0f0916);
    --s5arc-line: var(--s145-hairline, rgba(255, 255, 255, .07));
    --s5arc-r: var(--s145-r-l, 14px);
    --s5arc-ease: var(--s145-ease, cubic-bezier(.23, 1, .32, 1));
    --s5arc-hub: var(--s145-title-hub, clamp(40px, 1.6rem + 2.4vw, 60px));
    --s5arc-poster: var(--s145-title-poster, clamp(56px, 7.4vw, 112px));
  }
  html[data-gb-theme="light"] {
    --s5arc-ink: var(--s145-ink, #15121b);
    --s5arc-ink-2: var(--s145-ink-2, #4f4958);
    --s5arc-warm: var(--s145-warm, #7a6450);
    --s5arc-red: var(--s145-red, #d1123a);
    --s5arc-focus: var(--s145-focus, #007385);
    --s5arc-surface: var(--s145-surface-1, var(--gl-card, #ffffff));
    --s5arc-line: var(--s145-hairline, var(--gl-line, #e4e0ea));
  }
  html.gb-hw:not([data-gb-theme="light"]) { --s5arc-red: var(--s145-red, #ff7a1a); }

  /* 1. ART-04: the title says where you are. No "GamingBroject Channel", "Newsroom", "Author" or "Search" label over it. */
  html body:is(.category, .tag, .search, .author) .gb-archive-head > .gb-kicker,
  html body.author .gb-author-header .gb-kicker { display: none !important; }

  /* Search: the H1 ("Search results for ...") was a 1 px clipped line. It is shown on the hub step. */
  html body.search main > h1:first-child {
    position: static !important;
    width: auto !important;
    height: auto !important;
    margin: 0 0 20px !important;
    padding: 0 !important;
    overflow: visible !important;
    clip: auto !important;
    clip-path: none !important;
    white-space: normal !important;
    font-size: var(--s5arc-hub) !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    letter-spacing: -.005em !important;
    text-wrap: balance !important;
    color: var(--s5arc-ink) !important;
  }

  /* Author archive: Follow, RSS and All authors sat in one 88 px grid cell beside the first card. One row instead. */
  html body.author .gb-grid > .gbc-author-bar:not([hidden]):not(.hz-hidden) {
    grid-column: 1 / -1 !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 10px !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
  }

  /* 2. ART-08: one link per card. The title link covers the whole card; "Read story" is gone and archive.js takes the
   *    photo link out of the tab order, so a card is one tab stop and a click on the photo still opens the story. */
  html body:is(.category, .tag, .search, .author) .gb-grid > .gb-post-card,
  html body.single-post .gb-related-grid > article { position: relative !important; }
  html body:is(.category, .tag, .search, .author) .gb-grid > .gb-post-card .gb-card-read { display: none !important; }
  html body:is(.category, .tag, .search, .author) .gb-grid > .gb-post-card h2 a::after,
  html body.single-post .gb-related-grid > article h3 a::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
  }

  /* Search results are a ranked list: no featured first card, and its title at the card size. */
  @media (min-width: 901px) {
    html body.search .gb-grid > .gb-post-card:first-child { grid-column: span 4 !important; }
  }
  html body.search .gb-grid > .gb-post-card:first-child h2 { font-size: 21px !important; line-height: 1.2 !important; }

  /* 3. Pagination, layout only (global.css fills the current page): the row wraps instead of running off a phone. */
  html body:is(.category, .tag, .search, .author) .pagination .nav-links {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  /* 4. The theme's card hover (a 6 px lift and a 1.035 photo zoom) is not gated: after a tap it sticks on touch, and it
   *    moves for reduced-motion readers. Both stop here; a mouse with motion allowed keeps it. */
  @media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) {
    html body:is(.category, .tag, .search, .author) .gb-grid > .gb-post-card:is(:hover, :active),
    html body:is(.category, .tag, .search, .author) .gb-grid > .gb-post-card:is(:hover, :active) .gb-post-card-media img {
      transform: none !important;
    }
  }

}

@layer s145.art-b {

  /* 5. AB-05: cards that behave like one object. Surface per ART-16 (the panel tone and a faint line on the violet
   *    ground, frameless on flat black), the humanize corner (14 px), meta at 13 px in the warm label colour. */
  html body:is(.category, .tag, .search, .author) .gb-grid > .gb-post-card,
  html body.single-post .gb-related-grid > article {
    border: 1px solid var(--s5arc-line) !important;
    border-radius: var(--s5arc-r) !important;
    background: var(--s5arc-surface) !important;
  }
  html body:is(.category, .tag, .search, .author) .gb-grid > .gb-post-card .gb-post-card-body { padding: 16px 20px 22px !important; }
  html body:is(.category, .tag, .search, .author) .gb-grid > .gb-post-card :is(.gb-post-meta, .gb-post-meta time) {
    font-family: var(--font-sans, Inter, system-ui, sans-serif) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    color: var(--s5arc-warm) !important;
  }

  /* The ring sits on the card, in the site's focus colour (cyan, teal in Day mode). archive.js marks the title link with
   * data-s145-ring="card", so global.css draws no second ring on the link itself. */
  html body:is(.category, .tag, .search, .author) .gb-grid > .gb-post-card:has(h2 a:focus-visible),
  html body.single-post .gb-related-grid > article:has(h3 a:focus-visible) {
    outline: 2px solid var(--s5arc-focus) !important;
    outline-offset: 3px !important;
  }
  html body:is(.category, .tag, .search, .author) .gb-grid > .gb-post-card h2 a:focus-visible,
  html body.single-post .gb-related-grid > article h3 a:focus-visible { outline: none !important; }

  /* Hover, for a mouse only (no sticky hover on touch): the title gets a 2 px red underline; the related grid also gets
   * the photo zoom the archive cards already have from the theme. The live title clamp (overflow hidden) leaves only
   * 4.2 to 4.4 px under the baseline of a title's last line, so the line sits 1 px under the baseline: at 4 px it was cut
   * off (invisible in the related grid), at 1 px about 1.2 px stays free at every screen density and font backend. */
  @media (hover: hover) and (pointer: fine) {
    html body:is(.category, .tag, .search, .author) .gb-grid > .gb-post-card:hover h2 a,
    html body.single-post .gb-related-grid > article:hover h3 a {
      text-decoration-line: underline !important;
      text-decoration-color: var(--s5arc-red) !important;
      text-decoration-thickness: 2px !important;
      text-underline-offset: 1px !important;
    }
  }
  @media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
    html body.single-post .gb-related-grid > article:hover .gb-related-media img { transform: scale(1.035) !important; }
  }

  /* Press: .99 with the scale property, so it never fights the theme's transform. */
  @media (prefers-reduced-motion: no-preference) {
    html body:is(.category, .tag, .search, .author) .gb-grid > .gb-post-card,
    html body.single-post .gb-related-grid > article { transition: scale 140ms var(--s5arc-ease); }
    html body.single-post .gb-related-grid .gb-related-media img { transition: transform 420ms var(--s5arc-ease); }
    html body:is(.category, .tag, .search, .author) .gb-grid > .gb-post-card:active,
    html body.single-post .gb-related-grid > article:active { scale: .99 !important; }
  }

  /* Search hits: a red underline instead of red chips inside the titles and summaries. Both are clamped like the titles
   * above, so a hit on a last line keeps its whole 3 px line only 1 px under the baseline (one px thicker than the
   * hover line, so the hit still shows while the card is hovered). */
  html body.search .gb-grid > .gb-post-card mark {
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
    background: none !important;
    box-shadow: none !important;
    color: inherit !important;
    text-decoration-line: underline !important;
    text-decoration-color: var(--s5arc-red) !important;
    text-decoration-thickness: 3px !important;
    text-underline-offset: 1px !important;
  }

  /* 6. Archive H1s. Every category and tag H1 sits on the hub step; with the ART-15 posters (lab default, Panos
   *    decides; ?s145off=art15 turns them off) a name up to 24 characters becomes a poster and the intro reads larger.
   *    tx-archive.php marks longer names with s145-long-title, which keeps them on the hub step within two lines. */
  html body:is(.category, .tag) .gb-archive-head h1.gb-title {
    font-size: var(--s5arc-hub) !important;
    line-height: 1 !important;
    letter-spacing: -.005em !important;
    text-wrap: balance !important;
  }
  :where(html:not(.s145-off-art15)) body:is(.category, .tag) .gb-archive-head h1.gb-title:not(.s145-long-title) {
    margin: 0 0 18px !important;
    font-size: var(--s5arc-poster) !important;
    line-height: .9 !important;
  }
  :where(html:not(.s145-off-art15)) body:is(.category, .tag) .gb-archive-head :is(.gb-intro, .gb-intro > p) {
    max-width: 60ch !important;
    font-size: 19px !important;
    line-height: 1.55 !important;
    text-wrap: pretty !important;
    color: var(--s5arc-ink-2) !important;
  }
  @media (max-width: 760px) {
    :where(html:not(.s145-off-art15)) body:is(.category, .tag) .gb-archive-head :is(.gb-intro, .gb-intro > p) { font-size: 17px !important; }
  }

  /* 7. No half-empty last row from 1200 px: two leftovers share it, a single one becomes a wide card. Category and tag
   *    grids open with a featured card two columns wide (a lone featured card becomes the wide card too); search (no
   *    featured card) and author grids count plainly. */
  @media (min-width: 1200px) {
    html body:is(.category, .tag) .gb-grid:has(> .gb-post-card:first-child):has(> .gb-post-card:last-child:nth-child(3n + 1 of .gb-post-card)) > .gb-post-card:nth-last-child(-n + 2 of .gb-post-card):nth-child(n + 3 of .gb-post-card),
    html body:is(.search, .author) .gb-grid:has(> .gb-post-card:last-child:nth-child(3n + 2 of .gb-post-card)) > .gb-post-card:nth-last-child(-n + 2 of .gb-post-card) {
      grid-column: span 6 !important;
    }
    html body:is(.category, .tag) .gb-grid:has(> .gb-post-card:first-child):has(> .gb-post-card:last-child:nth-child(3n of .gb-post-card)) > .gb-post-card:last-child:nth-child(n + 3 of .gb-post-card):not([hidden]):not(.hz-hidden),
    html body:is(.category, .tag) .gb-grid > .gb-post-card:first-child:last-child:not([hidden]):not(.hz-hidden),
    html body:is(.search, .author) .gb-grid:has(> .gb-post-card:last-child:nth-child(3n + 1 of .gb-post-card)) > .gb-post-card:last-child:not([hidden]):not(.hz-hidden) {
      grid-column: 1 / -1 !important;
      display: grid !important;
      grid-template-columns: minmax(0, 7fr) minmax(0, 5fr) !important;
      align-items: center !important;
      min-height: 0 !important;
    }
    html body:is(.category, .tag) .gb-grid:has(> .gb-post-card:first-child):has(> .gb-post-card:last-child:nth-child(3n of .gb-post-card)) > .gb-post-card:last-child:nth-child(n + 3 of .gb-post-card) .gb-post-card-body,
    html body:is(.category, .tag) .gb-grid > .gb-post-card:first-child:last-child .gb-post-card-body,
    html body:is(.search, .author) .gb-grid:has(> .gb-post-card:last-child:nth-child(3n + 1 of .gb-post-card)) > .gb-post-card:last-child .gb-post-card-body {
      padding: 24px 36px !important;
    }
  }

  /* 8. The arrow-only previous and next links show the site's 8-bit arrow (tx-archive.php gives them a spoken name;
   *    the author pages' "Previous" and "Next" keep theirs). */
  html body:is(.category, .tag, .search, .author) .pagination :is(.prev, .next).page-numbers { font-size: 0 !important; }
  html body:is(.category, .tag, .search, .author) .pagination :is(.prev, .next).page-numbers::after {
    content: "" !important;
    width: 9px !important;
    height: 14px !important;
    background: currentColor !important;
    clip-path: polygon(0 0, 33.4% 0, 33.4% 16.7%, 66.7% 16.7%, 66.7% 33.4%, 100% 33.4%, 100% 66.7%, 66.7% 66.7%, 66.7% 83.4%, 33.4% 83.4%, 33.4% 100%, 0 100%) !important;
  }
  html body:is(.category, .tag, .search, .author) .pagination .prev.page-numbers::after {
    clip-path: polygon(100% 0, 66.6% 0, 66.6% 16.7%, 33.3% 16.7%, 33.3% 33.4%, 0 33.4%, 0 66.7%, 33.3% 66.7%, 33.3% 83.4%, 66.6% 83.4%, 66.6% 100%, 100% 100%) !important;
  }
  /* Forced colours (Windows high contrast) repaint every background as Canvas, which made the arrow vanish into its box:
   * there it is drawn in the system link colour instead. */
  @media (forced-colors: active) {
    html body:is(.category, .tag, .search, .author) .pagination :is(.prev, .next).page-numbers::after {
      forced-color-adjust: none !important;
      background: LinkText !important;
    }
  }

}