/* ============================================================================
   AIToolsay — Author profile (§AAP)                       redesigned 2026-09-23
   ----------------------------------------------------------------------------
   Markup: components/resources/views/livewire/public/author-profile.blade.php
   One template serves every /author/{slug}.

   BRAND. Every colour is the site's own: the homepage hero's look (white or
   #0E0E11 canvas, two soft blue glows, blue four-point sparkles, a dashed
   orbit, ink headline with ONE blue-gradient word), the house `--sc-fill`
   recipe for filled controls, the house eyebrow pill, the tinted "brand"
   pill that fills on hover, and the §DKSYS tone plates. Nothing here is
   saturated-blue-as-a-page — that look was rejected on the auth pages.

   SPECIFICITY — read before adding a rule.
     · custom.ltr.css styles h1–h6, b, strong and small at (0,2,2) through
       `body:not(.admin-shell):not(.theme-dark) h2 {…}` and a dark mirror.
       A kit heading at (0,1,0) or (0,2,0) silently loses weight, colour and
       line-height. Every heading here is `.aap-h` and is styled at (0,4,0)
       (`.aap .aap-panel .aap-h.aap-title`). No b/strong/small are used.
     · `body:not(.admin-shell) a { transition: color … }` is (0,1,2): a bare
       class rule on a link loses its transition list. Link rules are
       `.aap .aap-x` (0,2,0)+.
     · The Bootstrap `.card` class is avoided on purpose: floating-widgets
       turns `.card a:hover` #2060C0, unreadable in dark mode.

   MOTION uses `backwards` fill only, so no entrance animation pins a
   transform that a :hover lift needs later. Reduced motion switches every
   animation OFF by `animation: none` (not a duration clamp — a clamp strobes
   infinite loops).

   LAYOUT has no page max-width of its own: the root reads the shell tokens
   (partials/shell-cap), so its content edge IS the header brand's edge at
   every width. See the page-shell rule in shell-cap.
   ========================================================================= */


/* ---------------------------------------------------------------------------
   0. Tokens — light (dark twin in §16)
   ------------------------------------------------------------------------ */
.aap {
    --aap-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;

    /* Brand */
    --aap-brand: #3680ED;
    --aap-brand-ink: #1B5BB5;            /* text on white 6.5:1, on --aap-soft 5.8:1 */
    --aap-brand-plate: #1C6FEB;          /* fill under a white glyph, 4.64:1 */
    --aap-sky: #60A4F5;
    --aap-soft: #EAF2FD;
    --aap-soft-2: #F4F8FE;
    --aap-line-brand: #CFE0FA;
    /* The house --sc-fill ramp, its first stop walked from #357FEC (3.89:1
       under white) to #2C6FD6 (4.83:1): these buttons set their label from
       the LEFT edge, where the house centred search label never sits. */
    --aap-fill: linear-gradient(135deg, #2C6FD6 0%, #2865C5 34%, #1B4E9C 100%);
    --aap-fill-glow: rgba(53, 127, 236, .40);
    --aap-accent-text: linear-gradient(100deg, #3680ED 6%, #2060C0 58%, #1B5BB5 100%);
    --aap-focus: rgba(54, 128, 237, .28);
    --aap-focus-ring: 0 0 0 3px var(--aap-card), 0 0 0 5.5px var(--aap-brand);
    --aap-success: linear-gradient(135deg, #087F61 0%, #05664E 100%);   /* white ≥ 4.98:1 */

    /* Surfaces */
    --aap-card: #FFFFFF;
    --aap-card-2: #F9FAFC;
    --aap-card-3: #F1F4F9;
    --aap-glass: rgba(255, 255, 255, .80);
    --aap-glass-line: rgba(255, 255, 255, .95);

    /* Ink — ink-3 is walked darker than the house #6B7686 (4.6:1) so small
       labels keep 5.9:1 on white and 5.4:1 on the tinted surfaces. */
    --aap-ink: #0B1220;
    --aap-ink-2: #3D4757;
    --aap-ink-3: #56616F;

    /* Lines */
    --aap-line: #E7ECF3;
    --aap-line-soft: #F0F3F8;
    --aap-line-strong: #D6DEE9;

    /* Depth */
    --aap-sh-soft: 0 1px 2px rgba(16, 24, 40, .04), 0 6px 20px rgba(16, 24, 40, .05);
    --aap-sh-lift: 0 2px 6px rgba(16, 24, 40, .06), 0 18px 44px rgba(16, 24, 40, .10);

    /* Hero sky — the home hero's glows, sparkles and orbit */
    --aap-glow-1: rgba(54, 128, 237, .20);
    --aap-glow-2: rgba(14, 165, 233, .14);
    --aap-spark: #3680ED;
    --aap-dot: rgba(54, 128, 237, .20);
    --aap-ring: rgba(54, 128, 237, .34);
    --aap-spot: rgba(54, 128, 237, .10);
    --aap-scrim-a: rgba(255, 255, 255, .96);
    --aap-scrim-b: rgba(255, 255, 255, .72);

    /* Geometry + motion */
    --aap-r-xl: 28px;
    --aap-r-lg: 22px;
    --aap-r-md: 16px;
    --aap-ease: cubic-bezier(.22, .61, .36, 1);
    --aap-spring: cubic-bezier(.34, 1.56, .64, 1);

    /* Page shell — the site's ONE width dial (partials/shell-cap). */
    position: relative;
    width: 100%;
    max-width: var(--seo-shell-max, 1920px);
    margin: 0 auto;
    padding: 18px max(var(--seo-shell-pad, 24px), env(safe-area-inset-right)) 84px max(var(--seo-shell-pad, 24px), env(safe-area-inset-left));

    font-family: var(--aap-font);
    font-size: 15px;
    line-height: 1.6;
    color: var(--aap-ink-2);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.aap *, .aap *::before, .aap *::after { box-sizing: border-box; }
.aap ul, .aap ol { list-style: none; margin: 0; padding: 0; }
.aap p, .aap figure, .aap blockquote { margin: 0; }
.aap a { color: inherit; text-decoration: none; }
.aap img { display: block; max-width: 100%; }
.aap svg { flex: none; }
.aap button { font: inherit; }

.aap .aap-sr {
    position: absolute !important;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* Tones — one set of variables per `data-tone`, read by plates, bars, chips.
   `--plate` is the §DKSYS tone plate (white glyph, themed by dark-system.css);
   `--tint`/`--tink` are the soft background and the ink that sits on it. */
.aap [data-tone="blue"]    { --plate: var(--dk-tone-blue-plate, #1B5BB5);    --tint: #EAF2FD; --tink: #1B5BB5; --wash: rgba(54, 128, 237, .12); }
.aap [data-tone="emerald"] { --plate: var(--dk-tone-emerald-plate, #08795A); --tint: #E4F6EE; --tink: #08795A; --wash: rgba(16, 185, 129, .13); }
.aap [data-tone="violet"]  { --plate: var(--dk-tone-violet-plate, #5B33C4);  --tint: #F0EBFD; --tink: #5B33C4; --wash: rgba(124, 58, 237, .11); }
.aap [data-tone="amber"]   { --plate: var(--dk-tone-amber-plate, #A85B08);   --tint: #FFF2DC; --tink: #9A5307; --wash: rgba(245, 158, 11, .14); }
.aap [data-tone="rose"]    { --plate: var(--dk-tone-rose-plate, #B31D3C);    --tint: #FDEBEF; --tink: #B31D3C; --wash: rgba(225, 29, 72, .10); }
.aap [data-tone="cyan"]    { --plate: var(--dk-tone-cyan-plate, #0A6E88);    --tint: #E2F4F9; --tink: #0A6E88; --wash: rgba(6, 182, 212, .13); }

/* Social networks — `--net` fills the icon on hover; every value carries a
   white glyph at 3:1 or better (icons are non-text). */
.aap [data-net]              { --net: var(--aap-brand-plate); --net-ink: #FFFFFF; }
.aap [data-net="twitter"]    { --net: #1A8CD8; }
.aap [data-net="linkedin"]   { --net: #0A66C2; }
.aap [data-net="github"]     { --net: #24292F; }
.aap [data-net="youtube"]    { --net: #E10000; }
.aap [data-net="instagram"]  { --net: #D62976; }
.aap [data-net="facebook"]   { --net: #1877F2; }
.aap [data-net="tiktok"]     { --net: #111111; }
.aap [data-net="pinterest"]  { --net: #E60023; }
.aap [data-net="medium"]     { --net: #111111; }
.aap [data-net="threads"]    { --net: #111111; }
.aap [data-net="telegram"]   { --net: #1B8BC7; }
.aap [data-net="whatsapp"]   { --net: #128C7E; }
.aap [data-net="discord"]    { --net: #5865F2; }
.aap [data-net="reddit"]     { --net: #D93A00; }
.aap [data-net="mastodon"]   { --net: #595AFF; }
.aap [data-net="dribbble"]   { --net: #C32361; }
.aap [data-net="behance"]    { --net: #1769FF; }
.aap [data-net="website"]    { --net: #1C6FEB; }
.aap [data-net="email"]      { --net: #08795A; }


/* ---------------------------------------------------------------------------
   1. Shared type — accent word, eyebrow pill
   ------------------------------------------------------------------------ */
.aap .aap-accent {
    color: var(--aap-brand);
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .aap .aap-accent {
        background-image: var(--aap-accent-text);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
    }
}

/* The house eyebrow (homepage `.hpx-head.is-showcase .hpx-eyebrow`). */
.aap .aap-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 15px 6px 11px;
    border-radius: 999px;
    background: var(--aap-soft);
    border: 1px solid var(--aap-line-brand);
    color: var(--aap-brand-ink);
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -.004em;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}
.aap .aap-eyebrow svg { width: 14px; height: 14px; color: var(--aap-brand); }
.aap .aap-eyebrow--sm { padding: 4px 12px 4px 9px; font-size: 11.5px; }


/* ---------------------------------------------------------------------------
   2. Breadcrumb
   ------------------------------------------------------------------------ */
.aap .aap-crumbs { margin: 0 0 16px; }
.aap .aap-crumbs ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--aap-ink-3);
}
.aap .aap-crumbs li { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.aap .aap-crumbs li + li::before {
    content: "";
    width: 6px; height: 6px;
    margin: 0 4px 0 2px;
    border-top: 1.6px solid currentColor;
    border-right: 1.6px solid currentColor;
    transform: rotate(45deg);
    opacity: .55;
}
.aap .aap-crumbs a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: -10px;
    padding: 5px 10px;
    border-radius: 999px;
    color: var(--aap-ink-3);
    transition: color .2s ease, background-color .2s ease;
}
.aap .aap-crumbs a:hover { color: var(--aap-brand-ink); background: var(--aap-soft); }
.aap .aap-crumbs [aria-current] { color: var(--aap-ink); overflow-wrap: anywhere; }


/* ---------------------------------------------------------------------------
   3. Hero
   ------------------------------------------------------------------------ */
.aap .aap-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: clamp(26px, 3.6vw, 56px) clamp(20px, 3.8vw, 56px) clamp(92px, 7.4vw, 112px);
    border-radius: var(--aap-r-xl);
    background: var(--aap-card);
    border: 1px solid var(--aap-line);
    box-shadow: var(--aap-sh-soft);
}

/* 3a. The sky: glows, dot texture, sparkles, optional cover. */
.aap .aap-sky {
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    border-radius: inherit;
    pointer-events: none;
}
.aap .aap-cover {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
}
/* A cover photo sits under a scrim that is SOLID where the copy is, so no
   photograph can cost a word of contrast. */
.aap .aap-hero.has-cover .aap-sky::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, var(--aap-scrim-a) 0%, var(--aap-scrim-a) 38%, var(--aap-scrim-b) 72%, rgba(0, 0, 0, 0) 100%);
}
.aap .aap-glow {
    position: absolute;
    border-radius: 50%;
    aspect-ratio: 1;
    will-change: transform, opacity;
}
.aap .aap-glow--1 {
    width: min(820px, 95vw);
    left: -14%;
    top: 50%;
    translate: 0 -50%;
    background: radial-gradient(closest-side, var(--aap-glow-1), rgba(54, 128, 237, 0));
    animation: aap-breathe 9s ease-in-out infinite;
}
.aap .aap-glow--2 {
    width: min(680px, 80vw);
    right: -12%;
    top: -36%;
    background: radial-gradient(closest-side, var(--aap-glow-2), rgba(14, 165, 233, 0));
    animation: aap-breathe 12s ease-in-out -5s infinite;
}
.aap .aap-dots {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(var(--aap-dot) 1.2px, transparent 1.7px);
    background-size: 22px 22px;
    -webkit-mask-image: radial-gradient(60% 90% at 18% 50%, #000 0%, rgba(0, 0, 0, .35) 45%, transparent 75%);
    mask-image: radial-gradient(60% 90% at 18% 50%, #000 0%, rgba(0, 0, 0, .35) 45%, transparent 75%);
}
.aap .aap-spark {
    position: absolute;
    width: var(--s, 14px);
    height: var(--s, 14px);
    color: var(--aap-spark);
    opacity: .2;
    animation: aap-twinkle var(--t, 4.4s) ease-in-out var(--dl, 0s) infinite;
}
.aap .aap-spark svg { display: block; width: 100%; height: 100%; }
.aap .aap-spark--1 { --s: 18px; left: 4%;  top: 12%;    --dl: -.4s; }
.aap .aap-spark--2 { --s: 11px; left: 27%; top: 8%;     --dl: -1.6s; --t: 5.2s; }
.aap .aap-spark--3 { --s: 13px; left: 44%; bottom: 16%; --dl: -2.4s; }
.aap .aap-spark--4 { --s: 22px; right: 33%; top: 12%;   --dl: -.9s; --t: 5.6s; }
.aap .aap-spark--5 { --s: 10px; right: 5%; top: 44%;    --dl: -3.1s; }
.aap .aap-spark--6 { --s: 16px; right: 22%; bottom: 20%; --dl: -1.2s; --t: 4.8s; }
.aap .aap-spark--7 { --s: 9px;  left: 21%; bottom: 12%; --dl: -2.8s; }
.aap .aap-spark--8 { --s: 12px; left: 60%; top: 7%;     --dl: -3.6s; --t: 6s; }

/* 3b. Grid: avatar | copy | spotlight (≥1280px). */
.aap .aap-hero-in {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: clamp(28px, 3.4vw, 56px);
}

/* 3c. Identity: avatar, rotating ring, two orbits, verified badge. */
.aap .aap-id {
    --av: clamp(150px, 15.5vw, 220px);
    position: relative;
    display: grid;
    place-items: center;
    width: var(--av);
    height: var(--av);
    margin: 34px;
}
.aap .aap-orbit {
    position: absolute;
    left: 50%;
    top: 50%;
    translate: -50% -50%;
    border-radius: 50%;
    border: 1.5px dashed var(--aap-ring);
    pointer-events: none;
}
.aap .aap-orbit--1 {
    width: calc(var(--av) + 46px);
    height: calc(var(--av) + 46px);
    animation: aap-spin 40s linear infinite;
}
.aap .aap-orbit--2 {
    width: calc(var(--av) + 108px);
    height: calc(var(--av) + 108px);
    border-style: dotted;
    border-width: 2px;
    opacity: .75;
    animation: aap-spin 64s linear infinite reverse;
}
/* The "planets" ride the rings. */
.aap .aap-orbit::before,
.aap .aap-orbit::after {
    content: "";
    position: absolute;
    border-radius: 50%;
}
.aap .aap-orbit--1::before {
    width: 11px; height: 11px;
    left: -6px; top: 50%;
    translate: 0 -50%;
    background: var(--aap-brand);
    box-shadow: 0 0 0 4px var(--aap-soft), 0 0 16px var(--aap-fill-glow);
}
.aap .aap-orbit--1::after {
    width: 7px; height: 7px;
    right: 12%; top: 8%;
    background: var(--aap-sky);
    box-shadow: 0 0 10px var(--aap-sky);
}
.aap .aap-orbit--2::before {
    width: 9px; height: 9px;
    right: 3%; bottom: 26%;
    background: #8CBEFA;
    box-shadow: 0 0 0 3px var(--aap-soft), 0 0 12px rgba(96, 164, 245, .6);
}
.aap .aap-orbit--2::after { display: none; }

.aap .aap-avatar {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 6px;
    border-radius: 50%;
    animation: aap-zoom .9s var(--aap-spring) .05s backwards;
    transition: transform .6s var(--aap-spring);
}
.aap .aap-avatar-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: conic-gradient(from 0deg, #3680ED, #60A4F5, #A9CCFB, #2060C0, #3680ED);
    box-shadow: 0 22px 54px -14px var(--aap-fill-glow);
    animation: aap-spin 9s linear infinite;
}
.aap .aap-avatar-img {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    background: var(--aap-soft);
    border: 5px solid var(--aap-card);
}
.aap .aap-avatar-badge {
    position: absolute;
    z-index: 2;
    right: 5%;
    bottom: 5%;
    display: grid;
    place-items: center;
    width: clamp(36px, 3.4vw, 48px);
    height: clamp(36px, 3.4vw, 48px);
    padding: 3px;
    border-radius: 50%;
    background: var(--aap-card);
    box-shadow: 0 8px 18px -6px rgba(54, 128, 237, .55);
    animation: aap-pop .7s var(--aap-spring) .55s backwards;
}
.aap .aap-avatar-badge svg { display: block; width: 100% !important; height: 100% !important; }
@media (hover: hover) {
    .aap .aap-id:hover .aap-avatar { transform: scale(1.035) rotate(-2deg); }
}

/* 3d. Copy. A size container, so the social row can decide for itself
   whether it fits beside the buttons (see §3e). `width:100%` is load-bearing:
   inline-size containment gives the box NO content width, so a centred grid
   item (the stacked phone hero) would otherwise collapse to 0. */
.aap .aap-copy {
    container: aap-copy / inline-size;
    width: 100%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.aap .aap-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 15px 5px 5px;
    border-radius: 999px;
    background: var(--aap-soft);
    border: 1px solid var(--aap-line-brand);
    color: var(--aap-brand-ink);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .02em;
    line-height: 1.2;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}
.aap .aap-kicker-ico {
    display: grid;
    place-items: center;
    width: 26px; height: 26px;
    border-radius: 50%;
    background: var(--aap-card);
    color: var(--aap-brand);
    box-shadow: 0 1px 3px rgba(16, 24, 40, .14);
}
.aap .aap-kicker-ico svg { display: block; width: 17px !important; height: 17px !important; }

.aap .aap-hero .aap-h.aap-name {
    max-width: 100%;
    margin: 16px 0 0;
    font-size: clamp(34px, 4.3vw, 66px);
    font-weight: 800;
    line-height: 1.04;
    letter-spacing: -.035em;
    color: var(--aap-ink);
    overflow-wrap: break-word;
}
.aap .aap-role {
    margin-top: 12px;
    font-size: clamp(15.5px, 1.2vw, 18px);
    font-weight: 650;
    line-height: 1.4;
    color: var(--aap-brand-ink);
}
.aap .aap-bio {
    max-width: 62ch;
    margin-top: 12px;
    font-size: clamp(15px, 1.05vw, 16.5px);
    line-height: 1.72;
    color: var(--aap-ink-2);
}
.aap .aap-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 20px;
}
.aap .aap-fact {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 36px;
    padding: 4px 14px 4px 5px;
    border-radius: 999px;
    background: var(--aap-glass);
    border: 1px solid var(--aap-line);
    color: var(--aap-ink-2);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    transition: border-color .25s ease, box-shadow .25s ease;
}
.aap .aap-fact:hover { border-color: var(--aap-line-brand); box-shadow: 0 6px 16px -10px var(--aap-fill-glow); }
.aap .aap-fact-i {
    display: grid;
    place-items: center;
    width: 26px; height: 26px;
    border-radius: 50%;
    flex: none;
    background: var(--aap-soft);
    color: var(--aap-brand-ink);
}
.aap .aap-fact a {
    color: var(--aap-brand-ink);
    font-weight: 650;
    background: linear-gradient(currentColor, currentColor) 0 100% / 0 1.5px no-repeat;
    transition: background-size .35s var(--aap-ease), color .2s ease;
    overflow-wrap: anywhere;
}
.aap .aap-fact a:hover { background-size: 100% 1.5px; }

/* 3e. Actions: primary, soft, socials. */
.aap .aap-cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-top: 26px;
}
.aap .aap-soc {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
/* The divider only exists when the row has room for buttons AND icons on
   one line (they need ~594px). Drawn unconditionally, it dangled at the
   start of the line whenever the icons wrapped under the buttons. */
@container aap-copy (min-width: 620px) {
    .aap .aap-soc { margin-left: 4px; padding-left: 16px; border-left: 1px solid var(--aap-line-strong); }
}
.aap .aap-soc-a {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: grid;
    place-items: center;
    width: 44px; height: 44px;
    border-radius: 50%;
    background: var(--aap-card);
    border: 1px solid var(--aap-line-strong);
    color: var(--aap-ink-2);
    font-size: 16px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .05);
    transition: transform .35s var(--aap-spring), color .25s ease, border-color .25s ease, box-shadow .35s ease;
}
/* ::before = the network's colour, expanding from the centre. */
.aap .aap-soc-a::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: 50%;
    background: var(--net);
    transform: scale(0);
    transition: transform .4s var(--aap-ease);
}
@media (hover: hover) {
    .aap .aap-soc-a:hover {
        color: var(--net-ink);
        border-color: transparent;
        transform: translateY(-3px);
        box-shadow: 0 12px 24px -10px var(--net);
    }
    .aap .aap-soc-a:hover::before { transform: scale(1); }
}

/* 3f. Spotlight — the newest article as a glass card (≥1280px only; it
   duplicates the feed's first card, so smaller screens drop it). */
.aap .aap-spot {
    position: relative;
    isolation: isolate;
    display: none;
    flex-direction: column;
    gap: 11px;
    padding: 12px 12px 18px;
    border-radius: var(--aap-r-lg);
    background: var(--aap-glass);
    border: 1px solid var(--aap-glass-line);
    box-shadow: var(--aap-sh-lift);
    -webkit-backdrop-filter: blur(16px) saturate(1.3);
    backdrop-filter: blur(16px) saturate(1.3);
    transition: transform .55s var(--aap-ease), box-shadow .55s var(--aap-ease);
}
.aap .aap-spot::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 40%), var(--aap-spot), transparent 65%);
    opacity: 0;
    transition: opacity .4s ease;
    pointer-events: none;
}
.aap .aap-spot-tag {
    position: absolute;
    left: 22px; top: 22px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px 5px 9px;
    border-radius: 999px;
    background: rgba(11, 18, 32, .72);
    color: #FFFFFF;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .03em;
    line-height: 1.2;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}
.aap .aap-spot-tag svg { width: 12px; height: 12px; color: #A9CCFB; }
.aap .aap-spot-media {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 15px;
    background: var(--aap-soft);
}
.aap .aap-spot-media img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .9s var(--aap-ease);
}
.aap .aap-spot-fallback,
.aap .aap-post-fallback {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: var(--aap-brand);
    background: radial-gradient(80% 90% at 30% 20%, var(--aap-soft-2), var(--aap-soft));
}
.aap .aap-spot-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
    padding: 2px 6px 0;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--aap-ink-3);
}
.aap .aap-spot-title {
    padding: 0 6px;
    font-size: 18px;
    font-weight: 750;
    line-height: 1.35;
    letter-spacing: -.015em;
    color: var(--aap-ink);
    overflow-wrap: break-word;
    transition: color .25s ease;
}
.aap .aap-spot-go {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 6px;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--aap-brand-ink);
}
.aap .aap-spot-go svg { transition: transform .35s var(--aap-spring); }
@media (hover: hover) {
    .aap .aap-spot:hover { transform: translateY(-5px); box-shadow: var(--aap-sh-lift), 0 26px 50px -24px var(--aap-fill-glow); }
    .aap .aap-spot:hover::after { opacity: 1; }
    .aap .aap-spot:hover .aap-spot-media img { transform: scale(1.06); }
    .aap .aap-spot:hover .aap-spot-title { color: var(--aap-brand-ink); }
    .aap .aap-spot:hover .aap-spot-go svg { transform: translateX(4px); }
}


/* ---------------------------------------------------------------------------
   4. Buttons
   ------------------------------------------------------------------------ */
.aap .aap-btn {
    position: relative;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 48px;
    padding: 0 22px;
    border: 0;
    border-radius: 999px;
    font-family: inherit;
    font-size: 15px;
    font-weight: 650;
    line-height: 1.2;
    letter-spacing: -.005em;
    text-align: center;
    white-space: normal;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition: transform .3s var(--aap-ease), box-shadow .3s var(--aap-ease), color .22s ease, background-color .22s ease;
}
.aap .aap-btn:active { transform: translateY(0) scale(.98); }

/* Primary — the house `--sc-fill` with the search button's inset light, a
   sheen that sweeps across on hover and an arrow that steps forward. */
.aap .aap-btn--primary {
    padding: 0 7px 0 24px;
    color: #FFFFFF;
    background-color: #2B6BCC;
    background-image: var(--aap-fill);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .30),
        inset 0 0 0 1px rgba(255, 255, 255, .10),
        0 2px 6px -2px rgba(11, 18, 32, .22),
        0 12px 28px -10px var(--aap-fill-glow);
}
.aap .aap-btn--primary::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, .34) 50%, transparent 65%) no-repeat;
    background-size: 260% 100%;
    background-position: 140% 0;
    transition: background-position .9s var(--aap-ease);
    pointer-events: none;
}
.aap .aap-btn-arrow {
    display: grid;
    place-items: center;
    width: 36px; height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .18);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .24);
    transition: transform .4s var(--aap-spring), background-color .25s ease;
}
@media (hover: hover) {
    .aap .aap-btn--primary:hover {
        transform: translateY(-2px);
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, .30),
            inset 0 0 0 1px rgba(255, 255, 255, .10),
            0 4px 10px -2px rgba(11, 18, 32, .24),
            0 20px 38px -12px var(--aap-fill-glow);
    }
    .aap .aap-btn--primary:hover::before { background-position: -40% 0; }
    .aap .aap-btn--primary:hover .aap-btn-arrow { transform: translateX(3px); background: rgba(255, 255, 255, .28); }
}

/* Soft — the house "brand" pill: tinted at rest, FILLS on hover. */
.aap .aap-btn--soft {
    padding: 0 7px 0 20px;
    color: var(--aap-brand-ink);
    background-color: var(--aap-soft);
    box-shadow: inset 0 0 0 1px var(--aap-line-brand);
}
.aap .aap-btn--soft::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: var(--aap-fill);
    opacity: 0;
    transition: opacity .25s ease;
}
.aap .aap-btn-dot {
    display: grid;
    place-items: center;
    width: 34px; height: 34px;
    border-radius: 50%;
    background: var(--aap-brand-plate);
    color: #FFFFFF;
    transition: transform .45s var(--aap-spring), background-color .25s ease;
}
@media (hover: hover) {
    .aap .aap-btn--soft:hover {
        color: #FFFFFF;
        transform: translateY(-2px);
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0), 0 16px 30px -12px var(--aap-fill-glow);
    }
    .aap .aap-btn--soft:hover::before { opacity: 1; }
    .aap .aap-btn--soft:hover .aap-btn-dot { background: rgba(255, 255, 255, .22); transform: rotate(-14deg) scale(1.06); }
}
.aap .aap-btn--soft.is-done { color: #FFFFFF; }
.aap .aap-btn--soft.is-done::before { opacity: 1; background: var(--aap-success); }
.aap .aap-btn--soft.is-done .aap-btn-dot { background: rgba(255, 255, 255, .22); }
.aap .aap-btn--block { width: 100%; justify-content: space-between; }


/* ---------------------------------------------------------------------------
   5. Stats strip — glass, overlapping the hero's foot
   ------------------------------------------------------------------------ */
.aap .aap-stats {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr));
    margin: calc(-1 * clamp(58px, 5vw, 70px)) clamp(12px, 2.6vw, 44px) 0;
    overflow: hidden;
    border-radius: var(--aap-r-lg);
    background: var(--aap-glass);
    border: 1px solid var(--aap-glass-line);
    box-shadow: var(--aap-sh-lift);
    -webkit-backdrop-filter: blur(18px) saturate(1.4);
    backdrop-filter: blur(18px) saturate(1.4);
    animation: aap-rise .8s var(--aap-ease) .35s backwards;
}
.aap .aap-stat {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
    padding: clamp(16px, 1.5vw, 22px) clamp(16px, 1.7vw, 26px);
}
.aap .aap-stat + .aap-stat { border-left: 1px solid var(--aap-line); }
.aap .aap-stat::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: radial-gradient(130% 150% at 0% 50%, var(--wash), transparent 62%);
    opacity: 0;
    transition: opacity .4s ease;
}
.aap .aap-stat:hover::before { opacity: 1; }
.aap .aap-stat-ico {
    display: grid;
    place-items: center;
    width: 50px; height: 50px;
    flex: none;
    border-radius: 15px;
    color: #FFFFFF;
    background-color: var(--plate);
    background-image: linear-gradient(135deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .26) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .24), 0 10px 22px -10px var(--plate);
    transition: transform .5s var(--aap-spring);
}
.aap .aap-stat:hover .aap-stat-ico { transform: rotate(-8deg) scale(1.07); }
.aap .aap-stat-copy { display: flex; flex-direction: column; min-width: 0; }
.aap .aap-stat-num {
    font-size: clamp(22px, 2vw, 30px);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -.02em;
    color: var(--aap-ink);
    font-variant-numeric: tabular-nums;
}
.aap .aap-stat-plus { margin-left: 1px; color: var(--aap-brand); }
.aap .aap-stat-label {
    margin-top: 4px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--aap-ink-3);
}


/* ---------------------------------------------------------------------------
   6. Body layout
   ------------------------------------------------------------------------ */
.aap .aap-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(320px, 23vw, 400px);
    align-items: start;
    gap: clamp(20px, 1.8vw, 28px);
    margin-top: clamp(24px, 2.6vw, 36px);
}
.aap .aap-main {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: clamp(20px, 1.8vw, 28px);
}
.aap .aap-rail {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: clamp(18px, 1.5vw, 22px);
}
/* Stamped by the script (see bootRail): under the header when the rail fits
   the window, pinned by its FOOT when it does not. */
.aap .aap-rail.is-sticky { position: sticky; top: var(--aap-rail-top, calc(var(--aits-hd-h, 76px) + 20px)); }


/* ---------------------------------------------------------------------------
   7. Panels + section heads
   ------------------------------------------------------------------------ */
.aap .aap-panel {
    position: relative;
    padding: clamp(18px, 2.1vw, 32px);
    border-radius: var(--aap-r-xl);
    background: var(--aap-card);
    border: 1px solid var(--aap-line);
    box-shadow: var(--aap-sh-soft);
}
.aap .aap-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px 28px;
}
.aap .aap-head-copy { min-width: 0; max-width: 760px; }
.aap .aap-panel .aap-h.aap-title {
    margin: 12px 0 0;
    font-size: clamp(24px, 2.2vw, 34px);
    font-weight: 750;
    line-height: 1.15;
    letter-spacing: -.025em;
    color: var(--aap-ink);
    overflow-wrap: break-word;
    scroll-margin-top: calc(var(--aits-hd-h, 76px) + 24px);
}
.aap .aap-panel .aap-h.aap-title:focus { outline: none; }
.aap .aap-sub { margin-top: 8px; font-size: 14.5px; line-height: 1.6; color: var(--aap-ink-3); }
.aap .aap-feed { scroll-margin-top: calc(var(--aits-hd-h, 76px) + 20px); }


/* ---------------------------------------------------------------------------
   8. Feed tools — search, type filters, result line
   ------------------------------------------------------------------------ */
.aap .aap-search {
    position: relative;
    display: flex;
    align-items: center;
    flex: 0 1 360px;
    min-width: min(100%, 260px);
}
.aap .aap-search-i {
    position: absolute;
    left: 17px;
    display: grid;
    color: var(--aap-ink-3);
    pointer-events: none;
    transition: color .2s ease;
}
.aap .aap-search-input {
    width: 100%;
    height: 50px;
    margin: 0;
    padding: 0 50px 0 46px;
    border-radius: 999px;
    border: 1px solid var(--aap-line-strong);
    background: var(--aap-card-2);
    color: var(--aap-ink);
    font-family: inherit;
    font-size: 14.5px;
    font-weight: 500;
    -webkit-appearance: none;
    appearance: none;
    box-shadow: inset 0 1px 2px rgba(16, 24, 40, .04);
    transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.aap .aap-search-input::placeholder { color: var(--aap-ink-3); opacity: 1; }
.aap .aap-search-input::-webkit-search-cancel-button,
.aap .aap-search-input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; display: none; }
.aap .aap-search-input:hover { border-color: var(--aap-line-brand); }
.aap .aap-search-input:focus {
    outline: none;
    border-color: var(--aap-brand);
    background: var(--aap-card);
    box-shadow: 0 0 0 4px var(--aap-focus);
}
.aap .aap-search:focus-within .aap-search-i { color: var(--aap-brand); }
.aap .aap-search-x {
    position: absolute;
    right: 9px;
    display: grid;
    place-items: center;
    width: 34px; height: 34px;
    border: 0;
    border-radius: 50%;
    background: var(--aap-soft);
    color: var(--aap-brand-ink);
    cursor: pointer;
    transition: transform .35s var(--aap-spring), background-color .2s ease, color .2s ease;
}
.aap .aap-search-x:hover { background: var(--aap-brand-plate); color: #FFFFFF; transform: rotate(90deg); }
.aap .aap-search-spin {
    position: absolute;
    right: 52px;
    width: 16px; height: 16px;
    border-radius: 50%;
    border: 2px solid var(--aap-line-brand);
    border-top-color: var(--aap-brand);
    animation: aap-spin .7s linear infinite;
}
.aap .aap-search:not(:has(.aap-search-x)) .aap-search-spin { right: 18px; }

.aap .aap-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 20px;
}
.aap .aap-filter {
    position: relative;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 42px;
    padding: 0 7px 0 16px;
    border-radius: 999px;
    border: 1px solid var(--aap-line);
    background: var(--aap-card) linear-gradient(180deg, rgba(255, 255, 255, .07) 0%, rgba(255, 255, 255, 0) 62%);
    color: var(--aap-ink-2);
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
    transition: color .22s ease, border-color .22s ease, transform .3s var(--aap-spring), box-shadow .3s ease;
}
.aap .aap-filter::before {
    content: "";
    position: absolute;
    inset: -1px;
    z-index: -1;
    border-radius: inherit;
    background: var(--aap-fill);
    opacity: 0;
    transition: opacity .22s ease;
}
.aap .aap-filter-n {
    display: grid;
    place-items: center;
    min-width: 28px;
    height: 28px;
    padding: 0 8px;
    border-radius: 999px;
    background: var(--aap-card-3);
    color: var(--aap-ink-2);
    font-size: 12px;
    font-weight: 750;
    font-variant-numeric: tabular-nums;
    transition: background-color .22s ease, color .22s ease;
}
@media (hover: hover) {
    .aap .aap-filter:hover { border-color: var(--aap-line-brand); color: var(--aap-brand-ink); transform: translateY(-2px); }
}
.aap .aap-filter.is-on { color: #FFFFFF; border-color: transparent; box-shadow: 0 12px 24px -12px var(--aap-fill-glow); }
.aap .aap-filter.is-on::before { opacity: 1; }
.aap .aap-filter.is-on .aap-filter-n { background: rgba(255, 255, 255, .22); color: #FFFFFF; }

.aap .aap-results {
    margin: 18px 0 0;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--aap-ink-3);
}
.aap .aap-results span { color: var(--aap-ink); font-weight: 700; }


/* ---------------------------------------------------------------------------
   9. Article cards
   ------------------------------------------------------------------------ */
.aap .aap-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr));
    gap: clamp(16px, 1.5vw, 24px);
    margin-top: 16px;
    transition: opacity .25s ease;
}
.aap .aap-grid.is-loading { opacity: .5; pointer-events: none; }
.aap .aap-post {
    min-width: 0;
    animation: aap-rise .7s var(--aap-ease) backwards;
    animation-delay: calc(var(--i, 0) * 55ms);
}
.aap .aap-post-a {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    height: 100%;
    border-radius: var(--aap-r-lg);
    background: var(--aap-card);
    border: 1px solid var(--aap-line);
    box-shadow: var(--aap-sh-soft);
    transition: transform .5s var(--aap-ease), box-shadow .5s var(--aap-ease), border-color .3s ease;
}
/* ::before = a gradient hairline that lights up on hover (mask trick);
   ::after  = a soft light that follows the pointer (--mx/--my from JS). */
.aap .aap-post-a::before {
    content: "";
    position: absolute;
    inset: -1px;
    z-index: 3;
    padding: 1.5px;
    border-radius: inherit;
    background: linear-gradient(140deg, var(--aap-brand) 0%, var(--aap-sky) 38%, rgba(96, 164, 245, 0) 72%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
    opacity: 0;
    transition: opacity .45s ease;
    pointer-events: none;
}
.aap .aap-post-a::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 30%), var(--aap-spot), transparent 65%);
    opacity: 0;
    transition: opacity .45s ease;
    pointer-events: none;
}
.aap .aap-post-media {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
    margin: 8px 8px 0;
    overflow: hidden;
    border-radius: calc(var(--aap-r-lg) - 7px);
    background: var(--aap-soft);
}
.aap .aap-post-media img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .9s var(--aap-ease);
}
/* A light sweep crosses the image on hover. */
.aap .aap-post-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .32) 48%, transparent 62%);
    transform: translateX(-120%);
    transition: transform 1s var(--aap-ease);
    pointer-events: none;
}

/* Module badge — ink on a near-solid tint so it reads over any photo. */
.aap .aap-kind {
    position: absolute;
    left: 10px; top: 10px;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: .06em;
    text-transform: uppercase;
    white-space: nowrap;
    color: #1B5BB5;
    background: rgba(255, 255, 255, .94);
    border: 1px solid #CFE0FA;
    box-shadow: 0 3px 10px -3px rgba(16, 24, 40, .28);
}
.aap .aap-kind--news        { color: #B31D3C; border-color: #F6C9D2; }
.aap .aap-kind--guide       { color: #08795A; border-color: #BFE6D5; }
.aap .aap-kind--cheat-sheet { color: #5B33C4; border-color: #DCCFF7; }
.aap .aap-spot-meta .aap-kind { position: static; box-shadow: none; background: var(--aap-soft); }

.aap .aap-new {
    position: absolute;
    right: 10px; top: 10px;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 11px 4px 8px;
    border-radius: 999px;
    color: #FFFFFF;
    background-color: #2B6BCC;
    background-image: var(--aap-fill);
    font-size: 11px;
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: .05em;
    text-transform: uppercase;
    box-shadow: 0 6px 16px -6px var(--aap-fill-glow);
}
.aap .aap-new svg { width: 12px; height: 12px; animation: aap-twinkle-sm 2.6s ease-in-out infinite; }

.aap .aap-post-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 10px;
    padding: 16px 18px 18px;
}
.aap .aap-post-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--aap-ink-3);
}
.aap .aap-post-meta > span { display: inline-flex; align-items: center; gap: 5px; }
.aap .aap-post-cat {
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--aap-soft);
    border: 1px solid var(--aap-line-brand);
    color: var(--aap-brand-ink);
    font-size: 11.5px;
    font-weight: 700;
}
.aap .aap-post .aap-h.aap-post-title {
    margin: 0;
    font-size: clamp(16.5px, 1.1vw, 18.5px);
    font-weight: 750;
    line-height: 1.36;
    letter-spacing: -.012em;
    color: var(--aap-ink);
    overflow-wrap: break-word;
    transition: color .25s ease;
}
.aap .aap-post-excerpt {
    display: block;
    font-size: 14px;
    line-height: 1.65;
    color: var(--aap-ink-2);
}
.aap .aap-post-go {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    align-self: flex-start;
    margin-top: auto;
    padding-top: 4px;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--aap-brand-ink);
}
.aap .aap-post-go svg { transition: transform .4s var(--aap-spring); }
.aap .aap-post-go::after {
    content: "";
    position: absolute;
    left: 0; right: 21px; bottom: -3px;
    height: 2px;
    border-radius: 2px;
    background: var(--aap-fill);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .45s var(--aap-ease);
}
@media (hover: hover) {
    .aap .aap-post-a:hover {
        transform: translateY(-6px);
        border-color: transparent;
        box-shadow: var(--aap-sh-lift), 0 26px 48px -26px var(--aap-fill-glow);
    }
    .aap .aap-post-a:hover::before,
    .aap .aap-post-a:hover::after { opacity: 1; }
    .aap .aap-post-a:hover .aap-post-media img { transform: scale(1.06); }
    .aap .aap-post-a:hover .aap-post-media::after { transform: translateX(120%); }
    .aap .aap-post-a:hover .aap-post-title { color: var(--aap-brand-ink); }
    .aap .aap-post-a:hover .aap-post-go svg { transform: translateX(4px); }
    .aap .aap-post-a:hover .aap-post-go::after { transform: scaleX(1); }
}

/* Empty / no-match state. */
.aap .aap-empty {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 48px 22px;
    text-align: center;
    border: 1.5px dashed var(--aap-line-strong);
    border-radius: var(--aap-r-lg);
    background: var(--aap-card-2);
}
.aap .aap-empty-ico {
    display: grid;
    place-items: center;
    width: 64px; height: 64px;
    border-radius: 20px;
    background: var(--aap-soft);
    color: var(--aap-brand);
}
.aap .aap-empty .aap-h.aap-empty-title {
    margin: 6px 0 0;
    font-size: 18px;
    font-weight: 750;
    line-height: 1.35;
    color: var(--aap-ink);
    overflow-wrap: anywhere;
}
.aap .aap-empty p { max-width: 48ch; font-size: 14.5px; color: var(--aap-ink-3); }
.aap .aap-empty .aap-btn { margin-top: 8px; }


/* ---------------------------------------------------------------------------
   10. Pager — real links (crawlable), Livewire takes the click
   ------------------------------------------------------------------------ */
.aap .aap-pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 28px;
    padding-top: 22px;
    border-top: 1px solid var(--aap-line);
}
.aap .aap-pg-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.aap .aap-pg {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 44px;
    height: 44px;
    padding: 0 12px;
    border-radius: 14px;
    border: 1px solid var(--aap-line);
    background: var(--aap-card);
    color: var(--aap-ink-2);
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    transition: color .2s ease, background-color .2s ease, border-color .2s ease, transform .3s var(--aap-spring), box-shadow .3s ease;
}
.aap .aap-pg--step { padding: 0 18px; border-radius: 999px; }
.aap .aap-pg--step svg { transition: transform .35s var(--aap-spring); }
.aap .aap-pg.is-on {
    color: #FFFFFF;
    border-color: transparent;
    background-color: #2B6BCC;
    background-image: var(--aap-fill);
    box-shadow: 0 10px 22px -10px var(--aap-fill-glow);
}
.aap .aap-pg.is-off { color: var(--aap-ink-3); background: var(--aap-card-2); border-style: dashed; cursor: not-allowed; }
.aap .aap-pg-gap { min-width: 22px; text-align: center; color: var(--aap-ink-3); font-weight: 700; }
@media (hover: hover) {
    .aap a.aap-pg:hover { color: var(--aap-brand-ink); background: var(--aap-soft); border-color: var(--aap-line-brand); transform: translateY(-2px); }
    .aap a.aap-pg--prev:hover svg { transform: translateX(-3px); }
    .aap a.aap-pg--next:hover svg { transform: translateX(3px); }
}


/* ---------------------------------------------------------------------------
   11. Awards
   ------------------------------------------------------------------------ */
.aap .aap-award-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
    gap: 12px;
    margin-top: 18px;
}
.aap .aap-award {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px;
    border-radius: var(--aap-r-md);
    background: var(--aap-card-2);
    border: 1px solid var(--aap-line);
    transition: border-color .25s ease, transform .35s var(--aap-ease), box-shadow .35s ease;
}
.aap .aap-award:hover { border-color: var(--aap-line-brand); transform: translateY(-2px); box-shadow: var(--aap-sh-soft); }
.aap .aap-award-ico {
    display: grid;
    place-items: center;
    width: 42px; height: 42px;
    flex: none;
    border-radius: 13px;
    color: #FFFFFF;
    background-color: var(--dk-tone-amber-plate, #A85B08);
    background-image: linear-gradient(135deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .26));
}
.aap .aap-award-copy { min-width: 0; }
.aap .aap-award-title { display: block; font-size: 15px; font-weight: 700; line-height: 1.4; color: var(--aap-ink); overflow-wrap: break-word; }
.aap .aap-award-sub { display: block; margin-top: 3px; font-size: 13px; font-weight: 600; color: var(--aap-ink-3); }


/* ---------------------------------------------------------------------------
   12. Rail cards
   ------------------------------------------------------------------------ */
.aap .aap-card {
    position: relative;
    padding: clamp(18px, 1.5vw, 24px);
    border-radius: var(--aap-r-lg);
    background: var(--aap-card);
    border: 1px solid var(--aap-line);
    box-shadow: var(--aap-sh-soft);
    transition: border-color .3s ease, box-shadow .35s ease;
}
/* A brand hairline draws across the top edge on hover. */
.aap .aap-card::before {
    content: "";
    position: absolute;
    left: 22px; right: 22px; top: -1px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, rgba(54, 128, 237, 0), var(--aap-brand) 30%, var(--aap-sky) 70%, rgba(96, 164, 245, 0));
    opacity: 0;
    transform: scaleX(.3);
    transition: opacity .4s ease, transform .6s var(--aap-ease);
}
.aap .aap-card:hover { border-color: var(--aap-line-brand); box-shadow: var(--aap-sh-lift); }
.aap .aap-card:hover::before { opacity: 1; transform: scaleX(1); }
.aap .aap-card-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.aap .aap-card-ico {
    display: grid;
    place-items: center;
    width: 42px; height: 42px;
    flex: none;
    border-radius: 13px;
    color: #FFFFFF;
    background-color: var(--plate);
    background-image: linear-gradient(135deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .26) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .24), 0 8px 18px -8px var(--plate);
    transition: transform .5s var(--aap-spring);
}
.aap .aap-card:hover .aap-card-ico { transform: rotate(-8deg) scale(1.06); }
.aap .aap-card .aap-h.aap-card-title {
    margin: 0;
    font-size: 17.5px;
    font-weight: 750;
    line-height: 1.3;
    letter-spacing: -.015em;
    color: var(--aap-ink);
    overflow-wrap: break-word;
}

/* 12a. About */
.aap .aap-creds { display: grid; gap: 10px; }
.aap .aap-creds li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.45;
    color: var(--aap-ink);
    transition: transform .3s var(--aap-ease), color .2s ease;
}
.aap .aap-creds li:hover { transform: translateX(3px); color: var(--aap-brand-ink); }
.aap .aap-cred-tick {
    display: grid;
    place-items: center;
    width: 22px; height: 22px;
    flex: none;
    border-radius: 50%;
    color: #FFFFFF;
    background-color: #2B6BCC;
    background-image: var(--aap-fill);
    box-shadow: 0 4px 10px -3px var(--aap-fill-glow);
}
.aap .aap-longbio {
    display: grid;
    gap: 12px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px dashed var(--aap-line-strong);
    font-size: 14.5px;
    line-height: 1.75;
    color: var(--aap-ink-2);
}
.aap .aap-creds + .aap-longbio { margin-top: 18px; }
.aap .aap-card-head + .aap-longbio { margin-top: 0; padding-top: 0; border-top: 0; }
.aap .aap-edu { display: grid; gap: 10px; margin-top: 16px; }
.aap .aap-edu li { display: flex; gap: 10px; align-items: flex-start; }
.aap .aap-edu-ico { display: grid; place-items: center; width: 32px; height: 32px; flex: none; border-radius: 10px; background: var(--aap-soft); color: var(--aap-brand-ink); }
.aap .aap-edu-title { display: block; font-size: 14px; font-weight: 700; color: var(--aap-ink); }
.aap .aap-edu-sub { display: block; font-size: 12.5px; font-weight: 600; color: var(--aap-ink-3); }

/* 12b. Mission — a light runs round the border (conic + @property). */
@property --aap-ang {
    syntax: '<angle>';
    inherits: false;
    initial-value: 0deg;
}
.aap .aap-mission {
    overflow: hidden;
    border-color: var(--aap-line-brand);
    background:
        radial-gradient(130% 110% at 0% 0%, var(--aap-soft) 0%, rgba(234, 242, 253, 0) 58%),
        var(--aap-card);
}
.aap .aap-mission::after {
    content: "";
    position: absolute;
    inset: 0;
    padding: 1.5px;
    border-radius: inherit;
    background: conic-gradient(from var(--aap-ang), rgba(54, 128, 237, 0) 0 62%, var(--aap-brand) 78%, var(--aap-sky) 88%, rgba(96, 164, 245, 0) 100%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
    animation: aap-border-run 6s linear infinite;
    pointer-events: none;
}
.aap .aap-mission-mark {
    position: absolute;
    right: 18px; top: 16px;
    color: var(--aap-brand);
    opacity: .22;
    transition: transform .6s var(--aap-spring), opacity .3s ease;
}
.aap .aap-mission-mark svg { width: 54px; height: 54px; }
.aap .aap-mission:hover .aap-mission-mark { opacity: .38; transform: rotate(-8deg) scale(1.08); }
.aap .aap-mission-text { margin-top: 14px; }
.aap .aap-mission-text p {
    font-size: clamp(16px, 1.15vw, 18px);
    font-style: italic;
    font-weight: 600;
    line-height: 1.6;
    letter-spacing: -.01em;
    color: var(--aap-ink);
}
.aap .aap-mission-by {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--aap-line);
}
.aap .aap-mission-by img {
    width: 40px; height: 40px;
    flex: none;
    border-radius: 50%;
    box-shadow: 0 0 0 2px var(--aap-card), 0 0 0 4px var(--aap-line-brand);
}
.aap .aap-mission-name { display: block; font-size: 14.5px; font-weight: 750; line-height: 1.3; color: var(--aap-ink); }
.aap .aap-mission-role { display: block; font-size: 12.5px; font-weight: 600; line-height: 1.4; color: var(--aap-ink-3); }

/* 12c. Expertise chips — links to site search; tinted, FILL on hover. */
.aap .aap-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.aap .aap-chip {
    position: relative;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 38px;
    padding: 0 15px 0 12px;
    border-radius: 999px;
    background: var(--aap-soft-2);
    border: 1px solid var(--aap-line-brand);
    color: var(--aap-brand-ink);
    font-size: 13.5px;
    font-weight: 650;
    line-height: 1.25;
    transition: color .22s ease, border-color .22s ease, transform .35s var(--aap-spring), box-shadow .3s ease;
}
.aap .aap-chip svg { width: 13px; height: 13px; color: var(--aap-brand); transition: transform .55s var(--aap-spring), color .22s ease; }
.aap .aap-chip::before {
    content: "";
    position: absolute;
    inset: -1px;
    z-index: -1;
    border-radius: inherit;
    background: var(--aap-fill);
    opacity: 0;
    transition: opacity .22s ease;
}
@media (hover: hover) {
    .aap .aap-chip:hover { color: #FFFFFF; border-color: transparent; transform: translateY(-2px); box-shadow: 0 12px 22px -12px var(--aap-fill-glow); }
    .aap .aap-chip:hover::before { opacity: 1; }
    .aap .aap-chip:hover svg { color: #FFFFFF; transform: rotate(90deg) scale(1.15); }
}

/* 12d. Top categories — plate, name, share-of-work bar, count, arrow. */
.aap .aap-cat-list { display: grid; gap: 4px; }
.aap .aap-cat {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) auto 16px;
    align-items: center;
    gap: 12px;
    padding: 10px;
    border-radius: 14px;
    transition: background-color .25s ease, transform .35s var(--aap-ease);
}
.aap .aap-cat-ico {
    display: grid;
    place-items: center;
    width: 40px; height: 40px;
    border-radius: 12px;
    background: var(--tint);
    color: var(--tink);
    transition: background-color .25s ease, color .25s ease, transform .5s var(--aap-spring);
}
.aap .aap-cat-ico svg { width: 18px; height: 18px; }
.aap .aap-cat-body { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.aap .aap-cat-name {
    font-size: 14.5px;
    font-weight: 650;
    line-height: 1.3;
    color: var(--aap-ink);
    overflow-wrap: anywhere;
    transition: color .2s ease;
}
.aap .aap-cat-bar {
    position: relative;
    display: block;
    height: 5px;
    overflow: hidden;
    border-radius: 5px;
    background: var(--aap-line-soft);
}
.aap .aap-cat-bar span {
    position: absolute;
    top: 0; bottom: 0; left: 0;
    width: var(--w, 50%);
    border-radius: inherit;
    background: linear-gradient(90deg, var(--plate), var(--tink));
    transform-origin: left center;
    animation: aap-grow 1.2s var(--aap-ease) .4s backwards;
}
.aap .aap-cat-n {
    display: grid;
    place-items: center;
    min-width: 30px;
    height: 26px;
    padding: 0 9px;
    border-radius: 999px;
    background: var(--aap-card-3);
    color: var(--aap-ink-2);
    font-size: 12.5px;
    font-weight: 750;
    font-variant-numeric: tabular-nums;
}
.aap .aap-cat-go { display: grid; color: var(--aap-brand-ink); opacity: .35; transition: opacity .25s ease, transform .4s var(--aap-spring); }
@media (hover: hover) {
    .aap .aap-cat:hover { background: var(--aap-soft-2); }
    .aap .aap-cat:hover .aap-cat-ico { background: var(--plate); color: #FFFFFF; transform: rotate(-8deg) scale(1.05); }
    .aap .aap-cat:hover .aap-cat-name { color: var(--aap-brand-ink); }
    .aap .aap-cat:hover .aap-cat-go { opacity: 1; transform: translate(2px, -2px); }
}

/* 12e. Connect — networks as rows; the icon tile takes the network's colour. */
.aap .aap-connect-lede { margin: -4px 0 14px; font-size: 14px; line-height: 1.6; color: var(--aap-ink-3); }
.aap .aap-net-list { display: grid; gap: 8px; margin-bottom: 14px; }
.aap .aap-net {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) 16px;
    align-items: center;
    gap: 12px;
    padding: 9px 12px 9px 9px;
    border-radius: 14px;
    background: var(--aap-card);
    border: 1px solid var(--aap-line);
    transition: border-color .25s ease, transform .35s var(--aap-ease), box-shadow .35s ease;
}
.aap .aap-net::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--net);
    opacity: 0;
    transition: opacity .3s ease;
}
.aap .aap-net-ico {
    display: grid;
    place-items: center;
    width: 40px; height: 40px;
    border-radius: 12px;
    background: var(--aap-card-3);
    color: var(--net);
    font-size: 17px;
    transition: background-color .25s ease, color .25s ease, transform .5s var(--aap-spring);
}
.aap .aap-net-copy { min-width: 0; }
.aap .aap-net-name { display: block; font-size: 14px; font-weight: 700; line-height: 1.3; color: var(--aap-ink); }
.aap .aap-net-handle { display: block; font-size: 12.5px; font-weight: 550; line-height: 1.4; color: var(--aap-ink-3); overflow-wrap: anywhere; }
.aap .aap-net-go { display: grid; color: var(--aap-ink-3); transition: transform .4s var(--aap-spring), color .2s ease; }
@media (hover: hover) {
    .aap .aap-net:hover { border-color: var(--net); transform: translateX(3px); box-shadow: 0 12px 24px -16px var(--net); }
    .aap .aap-net:hover::before { opacity: .07; }
    .aap .aap-net:hover .aap-net-ico { background: var(--net); color: var(--net-ink); transform: rotate(-8deg) scale(1.04); }
    .aap .aap-net:hover .aap-net-go { color: var(--aap-ink); transform: translate(2px, -2px); }
}


/* ---------------------------------------------------------------------------
   13. Motion
   ------------------------------------------------------------------------ */
.aap .aap-rise {
    animation: aap-rise .8s var(--aap-ease) backwards;
    animation-delay: calc(var(--d, 0) * 80ms + 80ms);
}
@keyframes aap-rise    { from { opacity: 0; transform: translateY(16px); } }
@keyframes aap-zoom    { from { opacity: 0; transform: scale(.86); } }
@keyframes aap-pop     { from { opacity: 0; transform: scale(.4) rotate(-40deg); } }
@keyframes aap-spin    { to { transform: rotate(360deg); } }
@keyframes aap-grow    { from { transform: scaleX(0); } }
@keyframes aap-breathe {
    0%, 100% { transform: scale(1);    opacity: .85; }
    50%      { transform: scale(1.08); opacity: 1; }
}
@keyframes aap-twinkle {
    0%, 100% { opacity: .18; transform: scale(.62) rotate(0deg); }
    50%      { opacity: .95; transform: scale(1) rotate(45deg); }
}
@keyframes aap-twinkle-sm {
    0%, 100% { transform: scale(1) rotate(0deg); }
    50%      { transform: scale(.72) rotate(45deg); }
}
@keyframes aap-border-run { to { --aap-ang: 360deg; } }


/* ---------------------------------------------------------------------------
   13b. Focus
   custom.ltr.css rings every a/button at (0,2,2) and, in LIGHT mode, adds
   `border-radius:6px` at (0,3,2). The per-element kit rings this block
   replaces sat at (0,2,0)–(0,3,0), so they never showed: keyboard focus drew
   the generic ring and squared every pill and card to a 6px rectangle. These
   answer at (0,3,2) — later in the cascade, so they win the tie — and each
   element keeps its OWN radius through --aap-fr.
   ------------------------------------------------------------------------ */
.aap .aap-crumbs a, .aap .aap-btn, .aap .aap-filter, .aap .aap-chip { --aap-fr: 999px; }
.aap .aap-soc-a, .aap .aap-search-x { --aap-fr: 50%; }
.aap .aap-spot, .aap .aap-post-a { --aap-fr: var(--aap-r-lg); }
.aap .aap-pg, .aap .aap-cat, .aap .aap-net { --aap-fr: 14px; }
.aap .aap-pg--step { --aap-fr: 999px; }
.aap .aap-fact a { --aap-fr: 4px; }
body:not(.admin-shell) .aap a:focus-visible,
body:not(.admin-shell) .aap button:focus-visible {
    outline: none;
    box-shadow: var(--aap-focus-ring);
    border-radius: var(--aap-fr, 8px);
}
body:not(.admin-shell) .aap .aap-btn--primary:focus-visible { box-shadow: var(--aap-focus-ring), 0 12px 28px -10px var(--aap-fill-glow); }
body:not(.admin-shell) .aap .aap-btn--soft:focus-visible { color: #FFFFFF; }
body:not(.admin-shell) .aap .aap-btn--soft:focus-visible::before { opacity: 1; }

/* ---------------------------------------------------------------------------
   14. Responsive
   ------------------------------------------------------------------------ */

/* ≥1280: the hero gains its spotlight column. */
@media (min-width: 1280px) {
    .aap .aap-hero.has-spot .aap-hero-in { grid-template-columns: auto minmax(0, 1fr) minmax(300px, 380px); }
    .aap .aap-spot { display: flex; }
}

/* <1100: one column; the rail becomes a card grid under the feed. */
@media (max-width: 1099.98px) {
    .aap .aap-layout { grid-template-columns: minmax(0, 1fr); }
    .aap .aap-rail {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: start;
    }
    .aap .aap-rail > .aap-about { grid-column: 1 / -1; }
    .aap .aap-rail.is-sticky { position: static; }
}

/* <860: the hero stacks and centres; stats go 2 × 2. */
@media (max-width: 859.98px) {
    .aap .aap-hero-in {
        grid-template-columns: minmax(0, 1fr);
        justify-items: center;
        gap: 18px;
        text-align: center;
    }
    .aap .aap-id { --av: clamp(132px, 30vw, 178px); margin: 36px 36px 22px; }
    .aap .aap-copy { align-items: center; }
    .aap .aap-bio { margin-inline: auto; }
    .aap .aap-facts, .aap .aap-cta { justify-content: center; }
    .aap .aap-soc {
        width: 100%;
        justify-content: center;
        margin: 4px 0 0;
        padding: 14px 0 0;
        border-left: 0;
        border-top: 1px solid var(--aap-line);
    }
    .aap .aap-dots {
        -webkit-mask-image: radial-gradient(90% 55% at 50% 22%, #000 0%, rgba(0, 0, 0, .3) 50%, transparent 80%);
        mask-image: radial-gradient(90% 55% at 50% 22%, #000 0%, rgba(0, 0, 0, .3) 50%, transparent 80%);
    }
    .aap .aap-glow--1 { left: 50%; top: 20%; translate: -50% -50%; }
    /* Stacked, the copy fills the lower two thirds: keep every sparkle up
       round the avatar, clear of the words and buttons. */
    .aap .aap-spark--1 { left: 6%;  top: 5%; }
    .aap .aap-spark--2 { left: 16%; top: 19%; }
    .aap .aap-spark--4 { right: 8%; top: 8%; }
    .aap .aap-spark--5 { right: 15%; top: 22%; }
    .aap .aap-spark--3, .aap .aap-spark--6,
    .aap .aap-spark--7, .aap .aap-spark--8 { display: none; }

    .aap .aap-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-inline: clamp(8px, 3vw, 24px); }
    .aap .aap-stat + .aap-stat { border-left: 0; }
    .aap .aap-stat:nth-child(even) { border-left: 1px solid var(--aap-line); }
    .aap .aap-stat:nth-child(n + 3) { border-top: 1px solid var(--aap-line); }
    .aap .aap-stat:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* <860: the feed head stacks and the search takes the full width (beside
   the title it would wrap onto a line of its own at a fixed 360px). */
@media (max-width: 859.98px) {
    .aap .aap-head { flex-direction: column; align-items: stretch; }
    .aap .aap-search { flex: 1 1 auto; width: 100%; }
}

/* <700: one rail column. */
@media (max-width: 699.98px) {
    .aap .aap-rail { grid-template-columns: minmax(0, 1fr); }
}

/* <560: the feed panel un-boxes so cards get the full width; the pager
   puts Previous / Next on one row and the page numbers under them. */
@media (max-width: 559.98px) {
    .aap .aap-feed { padding: 0; background: none; border: 0; box-shadow: none; }
    .aap .aap-pager { display: grid; grid-template-columns: 1fr 1fr; }
    .aap .aap-pg--prev { justify-self: start; }
    .aap .aap-pg--next { justify-self: end; }
    .aap .aap-pg-list { grid-column: 1 / -1; grid-row: 2; }
}

/* Phones. */
@media (max-width: 479.98px) {
    .aap { padding-top: 14px; padding-bottom: 64px; }
    .aap .aap-hero { border-radius: 22px; }
    .aap .aap-cta { width: 100%; }
    .aap .aap-cta > .aap-btn { flex: 1 1 100%; }
    .aap .aap-btn--primary { justify-content: space-between; padding-left: 22px; }
    .aap .aap-btn--soft { justify-content: space-between; }
    .aap .aap-fact { font-size: 12.5px; }
    .aap .aap-stat { flex-direction: column; align-items: flex-start; gap: 10px; padding: 14px; }
    .aap .aap-stat-ico { width: 42px; height: 42px; border-radius: 13px; }
    .aap .aap-card { border-radius: 20px; }
}
@media (max-width: 359.98px) {
    .aap .aap-hero { padding-inline: 14px; }
    .aap .aap-kicker { font-size: 12px; }
}


/* ---------------------------------------------------------------------------
   15. Accessibility — reduced motion, forced colours, print
   ------------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
    .aap *, .aap *::before, .aap *::after {
        animation: none !important;
        transition-duration: .01ms !important;
    }
}
@media (forced-colors: active) {
    .aap .aap-accent { background: none; -webkit-text-fill-color: currentColor; color: CanvasText; }
    .aap .aap-sky, .aap .aap-orbit { display: none; }
    .aap .aap-btn, .aap .aap-filter, .aap .aap-pg, .aap .aap-chip { border: 1px solid ButtonText; }
}
@media print {
    .aap .aap-sky, .aap .aap-orbit, .aap .aap-spot, .aap .aap-search, .aap .aap-filters,
    .aap .aap-pager, .aap .aap-cta .aap-btn, .aap .aap-connect .aap-btn { display: none !important; }
    .aap *, .aap *::before, .aap *::after { animation: none !important; box-shadow: none !important; }
    .aap .aap-stats { margin-top: 16px; }
}


/* ---------------------------------------------------------------------------
   16. Dark mode — a token swap plus the few literals that need a twin.
   Neutrals come from §DKSYS (dark-system.css) with their fallbacks.
   ------------------------------------------------------------------------ */
body.theme-dark .aap {
    --aap-brand: #60A4F5;
    --aap-brand-ink: #8CBEFA;
    --aap-brand-plate: #2572DF;
    --aap-soft: rgba(54, 128, 237, .16);
    --aap-soft-2: rgba(54, 128, 237, .10);
    --aap-line-brand: rgba(96, 164, 245, .30);
    --aap-fill:
        linear-gradient(0deg, rgba(9, 18, 33, .34), rgba(9, 18, 33, .34)),
        linear-gradient(135deg, #357FEC 0%, #2B6BCC 34%, #1B4E9C 100%);
    --aap-fill-glow: rgba(53, 127, 236, .52);
    --aap-accent-text: linear-gradient(100deg, #60A4F5 6%, #4A8FE8 58%, #8CBEFA 100%);
    --aap-focus: rgba(96, 164, 245, .32);
    --aap-success: linear-gradient(0deg, rgba(0, 0, 0, .12), rgba(0, 0, 0, .12)), linear-gradient(135deg, #087F61 0%, #05664E 100%);

    --aap-card: var(--dk-surface-2, #17171B);
    --aap-card-2: var(--dk-surface-3, #1D1D22);
    --aap-card-3: var(--dk-surface-4, #24242A);
    --aap-glass: rgba(28, 28, 33, .74);
    --aap-glass-line: rgba(255, 255, 255, .10);

    --aap-ink: var(--dk-text, #F4F5F7);
    --aap-ink-2: var(--dk-text-2, #C7CAD1);
    --aap-ink-3: var(--dk-text-3, #9AA0AB);

    --aap-line: var(--dk-line, rgba(255, 255, 255, .10));
    --aap-line-soft: var(--dk-line-soft, rgba(255, 255, 255, .06));
    --aap-line-strong: var(--dk-line-strong, rgba(255, 255, 255, .16));

    --aap-sh-soft: 0 1px 2px rgba(0, 0, 0, .40);
    --aap-sh-lift: 0 2px 6px rgba(0, 0, 0, .35), 0 18px 44px rgba(0, 0, 0, .45);

    --aap-glow-1: rgba(54, 128, 237, .24);
    --aap-glow-2: rgba(56, 189, 248, .12);
    --aap-spark: #A9CCFB;
    --aap-dot: rgba(96, 164, 245, .16);
    --aap-ring: rgba(96, 164, 245, .32);
    --aap-spot: rgba(96, 164, 245, .10);
    --aap-scrim-a: rgba(23, 23, 27, .96);
    --aap-scrim-b: rgba(23, 23, 27, .74);
}
/* Hero ground: the home hero's near-black canvas, not the card grey. */
body.theme-dark .aap .aap-hero { background: var(--dk-bg, #0E0E11); }

/* Tone twins: pastel inks on alpha tints (plates are themed by §DKSYS). */
body.theme-dark .aap [data-tone="blue"]    { --tint: rgba(54, 128, 237, .16); --tink: #8CBEFA; --wash: rgba(54, 128, 237, .18); }
body.theme-dark .aap [data-tone="emerald"] { --tint: rgba(16, 185, 129, .15); --tink: #7FD9B0; --wash: rgba(16, 185, 129, .16); }
body.theme-dark .aap [data-tone="violet"]  { --tint: rgba(139, 92, 246, .17); --tink: #C4B1F8; --wash: rgba(139, 92, 246, .16); }
body.theme-dark .aap [data-tone="amber"]   { --tint: rgba(245, 158, 11, .15); --tink: #F5C77E; --wash: rgba(245, 158, 11, .15); }
body.theme-dark .aap [data-tone="rose"]    { --tint: rgba(244, 63, 94, .15);  --tink: #F7A8B8; --wash: rgba(244, 63, 94, .15); }
body.theme-dark .aap [data-tone="cyan"]    { --tint: rgba(6, 182, 212, .15);  --tink: #86D8EA; --wash: rgba(6, 182, 212, .15); }

/* Near-black networks would vanish on a near-black card: they invert. */
body.theme-dark .aap [data-net="github"],
body.theme-dark .aap [data-net="tiktok"],
body.theme-dark .aap [data-net="medium"],
body.theme-dark .aap [data-net="threads"] { --net: #F4F5F7; --net-ink: #0B1220; }
/* Idle network glyphs use the neutral ink in the dark: several brand blues
   drop under 3:1 on #1D1D22. They take their colour on hover, as a fill. */
body.theme-dark .aap .aap-net-ico { color: var(--aap-ink-2); }

/* Badges over photos: a dark glass plate with pastel ink. */
body.theme-dark .aap .aap-kind {
    color: #A8CBFB;
    background: rgba(14, 14, 17, .82);
    border-color: rgba(120, 175, 250, .36);
}
body.theme-dark .aap .aap-kind--news        { color: #F7A8B8; border-color: rgba(247, 168, 184, .34); }
body.theme-dark .aap .aap-kind--guide       { color: #8FDCB4; border-color: rgba(143, 220, 180, .34); }
body.theme-dark .aap .aap-kind--cheat-sheet { color: #CBB2F7; border-color: rgba(203, 178, 247, .34); }
body.theme-dark .aap .aap-spot-meta .aap-kind { background: rgba(54, 128, 237, .16); }

/* The soft pill's dot is a solid plate; lift it off the dark tint. */
body.theme-dark .aap .aap-btn-dot { box-shadow: 0 0 0 1px rgba(255, 255, 255, .08); }
body.theme-dark .aap .aap-avatar-img { border-color: var(--dk-bg, #0E0E11); }
body.theme-dark .aap .aap-avatar-badge { background: var(--dk-bg, #0E0E11); }
body.theme-dark .aap .aap-kicker-ico { background: var(--dk-surface-3, #1D1D22); box-shadow: 0 0 0 1px rgba(255, 255, 255, .08); }
body.theme-dark .aap .aap-filter { background: var(--aap-card-2) linear-gradient(180deg, rgba(255, 255, 255, .06) 0%, rgba(255, 255, 255, 0) 62%); }
body.theme-dark .aap .aap-search-input { box-shadow: none; }
body.theme-dark .aap .aap-mission {
    background:
        radial-gradient(130% 110% at 0% 0%, rgba(54, 128, 237, .14) 0%, rgba(54, 128, 237, 0) 58%),
        var(--aap-card);
}