/* Inner pages built on the home template: /guides, guide pages, about/privacy/terms/disclosure and the error page. Owner: terminal -38.
   The section heads and guide cards are the home Latest guides parts (home/guides.css, read-only); the hero is -16's ax_page_hero.
   Every graphic here is one of the user's Cyber Eden asset IDs in kit/pages (file name = asset ID), recoloured to the site red:
   ASSET-0004 frames the article column (rebuilt as a 9-slice from its own clean runs; crosshair and glitch streaks left out),
   ASSET-0007 is the part tag ("FEATURED" painted out, the part number live),
   ASSET-0110 the bars (contents, information pages, popular pages; its text painted out, chevron kept), and the code line sits
   in the footer's join field (kit/foot/ASSET-0012). All links use the site-wide hover spec. */
.axp-wrap { display: grid; grid-template-columns: minmax(0, 1fr); }
/* Brand wordmarks in the shared page hero (guide titles and ledes) sit at text height, so long titles fit the panel's copy box. */
.ax-page-hero h1 .inline-wordmark { height: 1.12em; margin: 0 .04em; vertical-align: -.17em; filter: none; }
.ax-page-hero-lede .inline-wordmark { height: 1.4em; margin: 0 .05em; vertical-align: -.42em; filter: none; }
.axp-kicker { margin-bottom: 12px; color: var(--ax-red-2); font: 700 15px/1 var(--ax-font-ui); letter-spacing: .04em; text-transform: uppercase; }
.axp-empty { color: #b4b4bb; font: 600 17px/1.5 var(--ax-font-body); }

/* Article column and aside. */
.axp-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; align-items: start; gap: 28px; }
.axp-main { min-width: 0; }
.axp-back { position: relative; display: inline-flex; align-items: center; gap: 10px; margin-bottom: 14px; color: var(--ax-red-2); font: 700 16px/1 var(--ax-font-ui); letter-spacing: .04em; text-transform: uppercase; transition: color .2s, scale .2s var(--ease, ease); }
.axp-back img { width: auto; height: 14px; scale: -1 1; transition: translate .2s var(--ease, ease), filter .2s, scale var(--ax-art-t, .5s ease), rotate var(--ax-art-t, .5s ease); }
/* All guides: grows, its (mirrored) chevron art glows along its shape, steps left, zooms and turns (--ax-art-*). */
.axp-back:hover, .axp-back:focus-visible { z-index: 1; color: #fff; scale: var(--ax-hover-scale, 1.06); }
.axp-back:is(:hover, :focus-visible) img { filter: var(--ax-hover-fx, brightness(1.2) drop-shadow(0 0 10px rgba(236, 20, 34, .55))); }
.axp-back:is(:hover, :focus-visible) img { translate: -3px 0; scale: calc(-1 * var(--ax-art-zoom, 1.1)) var(--ax-art-zoom, 1.1); rotate: calc(-1 * var(--ax-art-turn, -3deg)); }
.axp-title { margin-bottom: 18px; color: #fff; font: 400 clamp(30px, 3vw, 42px)/1.08 var(--ax-font-display); letter-spacing: .02em; text-transform: uppercase; }
.axp-title .inline-wordmark { height: 1.28em; margin: -.08em .05em; vertical-align: -.14em; filter: none; }
.axp-article { display: grid; grid-template-columns: minmax(0, 1fr); gap: 34px; padding: 44px 54px 48px; border: 0 solid; border-image: url("kit/pages/ASSET-0004.webp") 53 49 52 54 fill / 53px 49px 52px 54px stretch; }
.axp-part { scroll-margin-top: 120px; }
.axp-tag { display: flex; align-items: center; width: 145px; height: 40px; margin-bottom: 10px; padding: 0 0 2px 34px; background: url("kit/pages/ASSET-0007.webp") center / 100% 100% no-repeat; color: #fff; font: 700 16px/1 var(--ax-font-ui); letter-spacing: .04em; text-transform: uppercase; }
.axp-part h2 { margin-bottom: 12px; color: #fff; font: 400 clamp(24px, 2.2vw, 30px)/1.1 var(--ax-font-display); letter-spacing: .02em; text-transform: uppercase; }
.axp-part h2 .inline-wordmark { height: 1.3em; margin: -.075em .05em; vertical-align: -.14em; filter: none; }
.axp-part p, .axp-part li { max-width: 660px; color: #d0d0d6; font: 500 17px/1.7 var(--ax-font-body); }
.axp-part p + p, .axp-part p + ul { margin-top: 12px; }
.axp-part ul { display: grid; gap: 6px; padding-left: 22px; }
.axp-part li::marker { color: var(--ax-red-2); }
.axp-part .inline-wordmark { height: 1.7em; margin: -.1em .06em; vertical-align: -.45em; filter: none; }
.axp-code { --k: calc(56px / 138); display: flex; align-items: center; gap: 4px; margin-top: 16px; }
.axp-code code { flex: 1 1 auto; display: flex; align-items: center; min-width: 0; height: 56px; padding: 0 calc(var(--k) * 92) 0 calc(var(--k) * 104); border: 0 solid; border-image: url("kit/foot/ASSET-0012.webp") 0 92 0 95 fill / 0 calc(var(--k) * 92) 0 calc(var(--k) * 95) stretch; overflow-x: auto; color: #e6e6ea; font: 500 14px/1 ui-monospace, "Cascadia Mono", Consolas, monospace; white-space: nowrap; scrollbar-width: thin; }
.axp-code .ax-btn { flex: none; width: 170px; height: 36px; padding: 0 44px 1px 24px; font-size: 17px; }

.axp-aside { position: sticky; top: 112px; display: grid; gap: 22px; }
.axp-toc { display: grid; gap: 8px; }
.axp-help { padding: 30px 30px 32px; border: 0 solid; border-image: url("kit/pages/ASSET-0004.webp") 53 49 52 54 fill / 32px 29px 31px 32px stretch; }
.axp-help p:not(.axp-kicker) { margin-bottom: 18px; color: #c8c8cf; font: 600 15px/1.55 var(--ax-font-body); }
.axp-help .ax-btn { width: 220px; height: 47px; padding: 0 58px 1px 30px; font-size: 18px; }

/* ASSET-0110 bars: label and sub line live in the painted-out text area, clear of the chevron. */
.axp-bars { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.axp-links { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.axp-bar { display: flex; align-items: center; aspect-ratio: 345 / 77; padding: 0 19% 2px 11%; background: url("kit/pages/ASSET-0110.webp") center / 100% 100% no-repeat; }
.axp-bar span { display: grid; gap: 5px; min-width: 0; }
.axp-bar strong { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; color: #fff; font: 700 20px/1.1 var(--ax-font-ui); letter-spacing: .04em; text-transform: uppercase; }
.axp-bar small { overflow: hidden; color: #9b9ba3; font: 700 12px/1 var(--ax-font-ui); letter-spacing: .04em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
/* Oswald's glyph box runs past these clamped lines; a bottom pad with a matching negative margin keeps the box size and leaves
   nothing to scroll. The TOC uses whole-pixel lines and pad so the box has no fractional overflow, and the pad stops short of a
   clamped third line. */
.axp-bar strong, .axp-bar small { padding-bottom: .2em; margin-bottom: -.2em; }
.axp-toc .axp-bar strong { padding-bottom: 2.5px; margin-bottom: -2.5px; font-size: 17px; line-height: 19px; }
.axp-bar strong .inline-wordmark { height: 1.2em; margin: -.1em .04em; vertical-align: -.2em; filter: none; }
.axp-bar b { color: var(--ax-red-2); }
.axp-bar[aria-current="page"] strong { color: var(--ax-red-2); }
.axp-bar[aria-current="page"] { filter: brightness(1.2); }

/* The /guides trust strip, framed like the help box. */
.axp-trust { display: flex; align-items: center; justify-content: space-between; gap: 18px 32px; padding: 30px 40px 32px; border: 0 solid; border-image: url("kit/pages/ASSET-0004.webp") 53 49 52 54 fill / 32px 29px 31px 32px stretch; }
.axp-trust-copy { min-width: 0; }
.axp-trust h2 { color: #fff; font: 400 30px/1.05 var(--ax-font-display); letter-spacing: .02em; text-transform: uppercase; }
.axp-trust ul { display: flex; flex-wrap: wrap; gap: 6px 26px; margin-top: 12px; padding: 0; list-style: none; }
.axp-trust li { color: #d0d0d6; font: 600 16px/1.4 var(--ax-font-body); }
.axp-trust li::before { content: "\2022"; margin-right: 8px; color: var(--ax-red-2); }
.axp-trust .ax-btn { flex: none; width: 220px; height: 47px; padding: 0 58px 1px 30px; font-size: 18px; }

/* The support band. */
.axp-band { display: grid; justify-items: center; gap: 12px; }
.axp-band-row { display: flex; align-items: center; justify-content: space-between; gap: 18px 32px; width: 100%; }
.axp-band-copy { min-width: 0; }
.axp-band-copy h2 { color: #fff; font: 400 36px/1 var(--ax-font-display); letter-spacing: .02em; text-transform: uppercase; }
.axp-band-copy p { margin-top: 8px; color: #d0d0d0; font: 600 17px/1.45 var(--ax-font-body); }
.axp-band-copy .inline-wordmark { height: 1.7em; margin: -.1em .06em; vertical-align: -.45em; filter: none; }
.axp-band .ax-btn { flex: none; }

/* /guides: fewer than four cards sit centred as one block (head and row), each card the home card's width. */
.axp-center { --n: 4; width: calc((100% - 48px) / 4 * var(--n) + (var(--n) - 1) * 16px); margin-inline: auto; }
.axp-center.is-n1 { --n: 1; }
.axp-center.is-n2 { --n: 2; }
.axp-center.is-n3 { --n: 3; }
.axp-center .axgd-grid { grid-template-columns: repeat(var(--n), minmax(0, 1fr)); }

/* The home trending band on the error page sizes from this container. */
.axp-most { container-type: inline-size; }

/* Shared hover and light-up (site-wide spec; the vars live in site-apex.css, the fallbacks match them). Bars grow and glow
   along their own shape; the bars beside one in its row step aside, the contents list steps up and down. */
.axp-bar { transition: var(--ax-hover-t, filter .2s, transform .2s var(--ease, ease), scale .2s var(--ease, ease), translate .25s var(--ease, ease)); }
.axp-bar:hover, .axp-bar:focus-visible { z-index: 1; filter: var(--ax-hover-fx, brightness(1.2) drop-shadow(0 0 10px rgba(236, 20, 34, .55))); scale: var(--ax-hover-scale, 1.06); }
/* No white focus or tap box on the art links and buttons: keyboard focus shows the same art-following glow as hover. */
.axp-bar, .axp-back, .axp-wrap .ax-btn { -webkit-tap-highlight-color: transparent; }
.axp-bar:is(:focus, :focus-visible), .axp-back:is(:focus, :focus-visible), .axp-wrap .ax-btn:is(:focus, :focus-visible) { outline: none; }
.axp-code .ax-btn, .axp-help .ax-btn, .axp-trust .ax-btn { --ax-hover-scale: 1.04; }
.axp-toc { --ax-hover-push: 6px; }
.axp-toc .axp-bar:is(:hover, :focus-visible) ~ .axp-bar { translate: 0 var(--ax-hover-push, 6px); }
.axp-toc .axp-bar:has(~ .axp-bar:is(:hover, :focus-visible)) { translate: 0 calc(-1 * var(--ax-hover-push, 6px)); }
@media (min-width: 1101px) {
  .axp-bars .axp-bar:is(:hover, :focus-visible) ~ .axp-bar { translate: var(--ax-hover-push, 14px) 0; }
  .axp-bars .axp-bar:has(~ .axp-bar:is(:hover, :focus-visible)) { translate: calc(-1 * var(--ax-hover-push, 14px)) 0; }
}

@media (max-width: 1100px) {
  .axp-center { width: 100%; }
  .axp-center .axgd-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .axp-center .axgd-card:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc(50% - 8px); }
  .axp-bars { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .axp-layout { grid-template-columns: minmax(0, 1fr); }
  .axp-aside { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .axp-aside > :only-child { grid-column: 1 / -1; }
}
/* Two per row: only the bar sharing the hovered bar's row steps aside. */
@media (min-width: 641px) and (max-width: 1100px) {
  .axp-bars .axp-bar:nth-child(odd):is(:hover, :focus-visible) + .axp-bar { translate: var(--ax-hover-push, 14px) 0; }
  .axp-bars .axp-bar:nth-child(odd):has(+ .axp-bar:is(:hover, :focus-visible)) { translate: calc(-1 * var(--ax-hover-push, 14px)) 0; }
}
@media (max-width: 760px) {
  .axp-center .axgd-card:last-child:nth-child(odd) { width: calc(50% - 5px); }
  .axp-article { gap: 26px; padding: 30px 26px 32px; border-image-width: 32px 29px 31px 32px; }
  .axp-aside { grid-template-columns: minmax(0, 1fr); }
  .axp-band-row { flex-direction: column; align-items: flex-start; }
  .axp-trust { flex-direction: column; align-items: flex-start; padding: 26px 26px 28px; }
  .axp-trust h2 { font-size: 24px; }
  .axp-trust ul { flex-direction: column; }
  .axp-trust li { font-size: 15px; }
  .axp-band-copy h2 { font-size: 28px; }
  .axp-band-copy p, .axp-part p, .axp-part li { font-size: 15px; }
}
@media (max-width: 640px) {
  .axp-center .axgd-grid { grid-template-columns: minmax(0, 1fr); }
  .axp-center .axgd-card:last-child:nth-child(odd) { width: 100%; }
  .axp-bars { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .axp-band .ax-btn { width: min(300px, 100%); height: 64px; padding: 0 78px 2px 42px; font-size: 21px; }
}
@media (max-width: 480px) {
  .axp-code { flex-wrap: wrap; }
  .axp-code code { flex-basis: 100%; }
}