@charset "UTF-8";
/* ==========================================================================
   Aiedrow — Apple Design System
   --------------------------------------------------------------------------
   One source of truth for surfaces, type, spacing, radii and controls.
   Pages compose these classes instead of hand-rolling one-off Tailwind
   combinations, which is what made the old build drift (five border alphas,
   seven shadow steps, six corner radii on the same page).

   Rules this file enforces, taken from how apple.com actually behaves:
     · Surfaces alternate between two tones only — page and elevated.
       Contrast comes from tone, not from borders.
     · Shadows are reserved for things that genuinely float (menus, modals,
       sticky bars). Content cards do not cast shadows.
     · Three corner radii: 12 / 18 / 28. Pills for controls.
     · Blue is the only accent, used for actions — never for decoration.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
    /* Surfaces — light */
    --a-page: #ffffff;
    --a-page-alt: #f5f5f7;
    --a-surface: #ffffff;
    --a-surface-alt: #f5f5f7;
    --a-surface-sunken: #ebebed;
    --a-surface-inverse: #1d1d1f;

    /* Text — light */
    --a-fg: #1d1d1f;
    --a-fg-secondary: #6e6e73;
    --a-fg-muted: #86868b;
    --a-fg-on-dark: #f5f5f7;

    /* Hairlines & separators */
    --a-hairline: rgba(0, 0, 0, 0.10);
    --a-hairline-soft: rgba(0, 0, 0, 0.06);

    /* Accent */
    --a-accent: #0071e3;
    --a-accent-hover: #0077ed;
    --a-accent-active: #0066cc;
    --a-accent-soft: rgba(0, 113, 227, 0.10);

    /* Semantic (used only for status, never decoration) */
    --a-green: #1d7d3f;
    --a-orange: #a85700;

    /* Typography */
    --a-font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
              "Helvetica Neue", Helvetica, Arial, sans-serif;
    --a-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

    /* Radii */
    --a-r-sm: 12px;
    --a-r-md: 18px;
    --a-r-lg: 28px;
    --a-r-pill: 980px;

    /* Layout */
    --a-header-h: 52px;
    --a-wrap: 1040px;
    --a-wrap-narrow: 740px;

    /* Elevation — only for floating surfaces */
    --a-shadow-menu: 0 8px 28px rgba(0, 0, 0, 0.12);
    --a-shadow-modal: 0 24px 68px rgba(0, 0, 0, 0.20);

    --a-ease: cubic-bezier(0.4, 0, 0.2, 1);
}

.dark {
    --a-page: #000000;
    --a-page-alt: #101012;
    --a-surface: #1d1d1f;
    --a-surface-alt: #161617;
    --a-surface-sunken: #000000;
    --a-surface-inverse: #f5f5f7;

    --a-fg: #f5f5f7;
    --a-fg-secondary: #a1a1a6;
    --a-fg-muted: #86868b;
    --a-fg-on-dark: #f5f5f7;

    --a-hairline: rgba(255, 255, 255, 0.14);
    --a-hairline-soft: rgba(255, 255, 255, 0.08);

    --a-accent: #2997ff;
    --a-accent-hover: #4aa8ff;
    --a-accent-active: #1a84e8;
    --a-accent-soft: rgba(41, 151, 255, 0.14);

    --a-green: #30d158;
    --a-orange: #ff9f0a;

    --a-shadow-menu: 0 8px 28px rgba(0, 0, 0, 0.55);
    --a-shadow-modal: 0 24px 68px rgba(0, 0, 0, 0.70);
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */

* { box-sizing: border-box; margin: 0; padding: 0; }

html {
    scroll-behavior: smooth;
    /* Header + the sticky section nav, so an anchor never lands underneath. */
    scroll-padding-top: calc(var(--a-header-h) + 60px);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    width: 100%;
    max-width: 100%;
}

body {
    background-color: var(--a-page);
    color: var(--a-fg);
    font-family: var(--a-font);
    font-size: 17px;
    line-height: 1.5;
    letter-spacing: -0.011em;
    padding-top: var(--a-header-h);
    overflow-x: hidden;
    width: 100%;
    max-width: 100%;
    position: relative;
    transition: background-color 0.25s var(--a-ease), color 0.25s var(--a-ease);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--a-font);
    font-weight: 600;
    color: var(--a-fg);
    letter-spacing: -0.02em;
    line-height: 1.1;
}

p { color: var(--a-fg-secondary); line-height: 1.55; }

a { text-decoration: none; color: inherit; transition: color 0.2s var(--a-ease), opacity 0.2s var(--a-ease); }

img { max-width: 100%; height: auto; display: block; }

button { font-family: inherit; }

/* Author `display` rules beat the UA sheet's `[hidden] { display: none }`
   regardless of specificity, so anything given a display value here would
   ignore the attribute. Filters and dialogs rely on it, so enforce it once. */
[hidden] { display: none !important; }

::selection { background: var(--a-accent-soft); }

:focus-visible {
    outline: 2px solid var(--a-accent);
    outline-offset: 3px;
    border-radius: 6px;
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

.no-scrollbar::-webkit-scrollbar { display: none !important; }
.no-scrollbar { -ms-overflow-style: none !important; scrollbar-width: none !important; }

/* --------------------------------------------------------------------------
   3. Layout — sections & wrappers
   -------------------------------------------------------------------------- */

.a-section {
    background: var(--a-page);
    padding: 88px 22px;
    transition: background-color 0.25s var(--a-ease);
}
.a-section--alt { background: var(--a-page-alt); }

/* A dark band re-declares the tokens for its subtree, so every card, chip,
   hairline and link inside it inverts correctly without a single override. */
.a-section--dark,
.a-card--dark,
.a-on-dark {
    --a-page: #000000;
    --a-page-alt: #101012;
    --a-surface: #1d1d1f;
    --a-surface-alt: #161617;
    --a-surface-sunken: #000000;
    --a-surface-inverse: #f5f5f7;
    --a-fg: #f5f5f7;
    --a-fg-secondary: #a1a1a6;
    --a-fg-muted: #86868b;
    --a-hairline: rgba(255, 255, 255, 0.14);
    --a-hairline-soft: rgba(255, 255, 255, 0.08);
    --a-accent: #2997ff;
    --a-accent-hover: #4aa8ff;
    --a-accent-soft: rgba(41, 151, 255, 0.14);
    --a-green: #30d158;
    --a-orange: #ff9f0a;
    color: var(--a-fg);
}
.a-section--dark { background: #000000; }
.a-section--tight { padding-block: 56px; }
.a-section--flush-top { padding-top: 0; }

@media (min-width: 768px) {
    .a-section { padding: 104px 32px; }
    .a-section--tight { padding-block: 64px; }
    .a-section--flush-top { padding-top: 0; }
}

.a-wrap { width: 100%; max-width: var(--a-wrap); margin-inline: auto; }
.a-wrap--narrow { max-width: var(--a-wrap-narrow); }
.a-wrap--wide { max-width: 1240px; }

/* Section heading block: eyebrow → title → lede, with an optional trailing link */
.a-head { margin-bottom: 40px; }
.a-head__row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
}
.a-head p { max-width: 62ch; }
.a-head__aside { display: flex; align-items: center; gap: 16px; }
@media (min-width: 768px) { .a-head { margin-bottom: 48px; } }

/* --------------------------------------------------------------------------
   4. Typography scale
   -------------------------------------------------------------------------- */

.a-eyebrow {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.055em;
    text-transform: uppercase;
    color: var(--a-fg-muted);
    margin-bottom: 10px;
}
.a-eyebrow--accent { color: var(--a-accent); }

/* Legacy alias kept so admin/*.php and older views keep rendering correctly. */
.apple-badge {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.055em;
    text-transform: uppercase;
    color: var(--a-fg-muted);
    margin-bottom: 10px;
}

.a-display {
    font-size: clamp(40px, 6.2vw, 72px);
    font-weight: 600;
    letter-spacing: -0.025em;
    line-height: 1.06;
    color: var(--a-fg);
}
.a-headline {
    font-size: clamp(30px, 3.8vw, 46px);
    font-weight: 600;
    letter-spacing: -0.022em;
    line-height: 1.09;
    color: var(--a-fg);
}
.a-subhead {
    font-size: clamp(23px, 2.4vw, 30px);
    font-weight: 600;
    letter-spacing: -0.018em;
    line-height: 1.15;
    color: var(--a-fg);
}
.a-title {
    font-size: 21px;
    font-weight: 600;
    letter-spacing: -0.014em;
    line-height: 1.22;
    color: var(--a-fg);
}
.a-title--sm { font-size: 18px; letter-spacing: -0.01em; }

.a-lede {
    font-size: clamp(18px, 1.5vw, 21px);
    font-weight: 400;
    line-height: 1.45;
    letter-spacing: -0.012em;
    color: var(--a-fg-secondary);
}
.a-body { font-size: 17px; line-height: 1.55; color: var(--a-fg-secondary); }
.a-body--sm { font-size: 15px; line-height: 1.5; }
.a-caption { font-size: 13px; line-height: 1.45; color: var(--a-fg-muted); }
.a-mono { font-family: var(--a-font-mono); font-size: 12px; letter-spacing: 0; }

.a-clamp-1 { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.a-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.a-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* --------------------------------------------------------------------------
   5. Header & navigation
   -------------------------------------------------------------------------- */

/* Accessibility helpers */
.a-skip-link {
    position: fixed;
    top: 8px;
    left: 50%;
    transform: translate(-50%, -180%);
    z-index: 1000;
    padding: 10px 20px;
    border-radius: var(--a-r-pill);
    background: var(--a-surface);
    color: var(--a-fg);
    font-size: 14px;
    box-shadow: var(--a-shadow-menu);
    transition: transform 0.2s var(--a-ease);
}
.a-skip-link:focus { transform: translate(-50%, 0); }

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

.apple-header {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: var(--a-header-h);
    z-index: 900;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-inline: 22px;
    background: color-mix(in srgb, var(--a-page) 80%, transparent);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 1px solid var(--a-hairline-soft);
    transition: background-color 0.25s var(--a-ease), border-color 0.25s var(--a-ease);
}
@media (min-width: 768px) { .apple-header { padding-inline: 32px; } }

@supports not (background: color-mix(in srgb, red 50%, transparent)) {
    .apple-header { background: rgba(255, 255, 255, 0.8); }
    .dark .apple-header { background: rgba(0, 0, 0, 0.8); }
}

.a-brand {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -0.014em;
    color: var(--a-fg);
    flex-shrink: 0;
}
.a-brand img { width: 22px; height: 22px; border-radius: 6px; object-fit: cover; }

.apple-nav-link {
    font-size: 13px;
    font-weight: 400;
    color: var(--a-fg-secondary);
    padding: 6px 13px;
    border-radius: var(--a-r-pill);
    white-space: nowrap;
    transition: color 0.2s var(--a-ease), background-color 0.2s var(--a-ease);
}
.apple-nav-link:hover { color: var(--a-fg); }
.apple-nav-link.active {
    color: var(--a-fg);
    font-weight: 500;
    background: var(--a-hairline-soft);
}

.a-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: transparent;
    border: none;
    color: var(--a-fg);
    cursor: pointer;
    transition: background-color 0.2s var(--a-ease);
}
.a-icon-btn:hover { background: var(--a-hairline-soft); }

.a-search-trigger {
    display: none;
    align-items: center;
    gap: 7px;
    padding: 5px 11px;
    font-size: 12px;
    border-radius: var(--a-r-pill);
    color: var(--a-fg-secondary);
    background: var(--a-hairline-soft);
    border: none;
    cursor: pointer;
    transition: background-color 0.2s var(--a-ease), color 0.2s var(--a-ease);
}
.a-search-trigger:hover { background: var(--a-hairline); color: var(--a-fg); }

.a-nav { display: none; align-items: center; gap: 2px; }
.a-header-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.a-search-trigger__label { display: none; }
/* Qualified with the parent on purpose: .apple-btn-blue's own `display:
   inline-flex` (declared further down, for the button component generally)
   is the same specificity as a bare `.a-header-cta`, and being later in the
   file it would win the tie and keep the button visible at every width. The
   extra ancestor class breaks the tie in this rule's favour instead. */
.a-header-actions .a-header-cta { display: none; }
.a-menu-btn { display: inline-flex; }

@media (min-width: 834px) {
    .a-nav { display: flex; }
    .a-search-trigger { display: inline-flex; }
    .a-search-trigger__label { display: inline; }
    .a-menu-btn { display: none; }
}
@media (min-width: 1024px) {
    .a-header-actions .a-header-cta { display: inline-flex; }
}

.a-search-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--a-hairline-soft);
    font-size: 13px;
    color: var(--a-fg-muted);
}

/* Mobile drawer */
.a-drawer {
    position: fixed;
    inset: var(--a-header-h) 0 0 0;
    z-index: 890;
    display: flex;
    flex-direction: column;
    padding: 20px 22px 40px;
    background: var(--a-page);
    overflow-y: auto;
}
.a-drawer[hidden] { display: none; }

.a-drawer-search {
    margin-bottom: 12px;
}
.a-drawer-search-form {
    position: relative;
    width: 100%;
}
.a-drawer-search-form i {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 15px;
    color: var(--a-fg-muted);
    pointer-events: none;
}
.a-drawer-search-form input {
    width: 100%;
    padding: 11px 16px 11px 38px;
    background: var(--a-surface);
    border: 1px solid var(--a-hairline);
    border-radius: var(--a-r-pill);
    color: var(--a-fg);
    font-size: 14px;
    font-family: inherit;
    outline: none;
    transition: border-color 0.2s var(--a-ease);
}
.a-drawer-search-form input:focus {
    border-color: var(--a-accent);
}

.a-drawer-links {
    display: flex;
    flex-direction: column;
}
.a-drawer-links a {
    font-size: 18px;
    font-weight: 500;
    letter-spacing: -0.014em;
    color: var(--a-fg);
    padding: 14px 4px;
    border-bottom: 1px solid var(--a-hairline-soft);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.a-drawer-links a.active { color: var(--a-accent); font-weight: 600; }
.a-drawer-links a:last-of-type { border-bottom: none; }

@media (min-width: 834px) { .a-drawer { display: none !important; } }


/* --------------------------------------------------------------------------
   6. Buttons & links
   -------------------------------------------------------------------------- */

.apple-btn-blue,
.apple-btn-secondary,
.apple-btn-dark,
.apple-btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 11px 22px;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: -0.01em;
    border-radius: var(--a-r-pill);
    border: none;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.2s var(--a-ease), color 0.2s var(--a-ease),
                border-color 0.2s var(--a-ease);
}

.apple-btn-blue { background: var(--a-accent); color: #ffffff !important; }
.apple-btn-blue:hover { background: var(--a-accent-hover); color: #ffffff !important; }
.apple-btn-blue:active { background: var(--a-accent-active); }

.apple-btn-secondary { background: var(--a-surface-alt); color: var(--a-fg); }
.apple-btn-secondary:hover { background: var(--a-surface-sunken); }
.dark .apple-btn-secondary { background: rgba(255, 255, 255, 0.12); }
.dark .apple-btn-secondary:hover { background: rgba(255, 255, 255, 0.2); }

.apple-btn-dark { background: var(--a-surface-inverse); color: var(--a-page) !important; }
.apple-btn-dark:hover { opacity: 0.86; }

.apple-btn-ghost {
    background: transparent;
    color: var(--a-accent);
    border: 1px solid currentColor;
    padding-block: 10px;
}
.apple-btn-ghost:hover { background: var(--a-accent-soft); }

.a-btn-sm { padding: 8px 17px; font-size: 13px; }
.a-btn-lg { padding: 13px 28px; font-size: 17px; }

/* Text link with the Apple chevron. Add the chevron in CSS so no page has to
   hand-type "›" and get the spacing subtly different each time. */
.apple-btn-link,
.a-link {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: 15px;
    font-weight: 400;
    letter-spacing: -0.01em;
    color: var(--a-accent);
    transition: color 0.2s var(--a-ease);
}
.apple-btn-link:hover,
.a-link:hover { color: var(--a-accent-hover); text-decoration: underline; text-underline-offset: 3px; }
.a-link--sm { font-size: 13px; }
.a-link::after {
    content: "\203A";
    font-size: 1.25em;
    line-height: 1;
    transform: translateY(-0.05em);
    transition: transform 0.2s var(--a-ease);
}
.a-link:hover::after { transform: translate(2px, -0.05em); }
.a-link--external::after { content: "\2197"; font-size: 0.95em; transform: none; }
.a-link--external:hover::after { transform: translate(1px, -1px); }
.a-link--plain::after { content: none; }

/* Filter chips */
.a-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 15px;
    font-size: 13px;
    font-weight: 400;
    letter-spacing: -0.008em;
    border-radius: var(--a-r-pill);
    background: var(--a-surface-alt);
    color: var(--a-fg-secondary);
    border: none;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.2s var(--a-ease), color 0.2s var(--a-ease);
}
.a-chip:hover { background: var(--a-surface-sunken); color: var(--a-fg); }
.dark .a-chip { background: rgba(255, 255, 255, 0.1); }
.dark .a-chip:hover { background: rgba(255, 255, 255, 0.16); }
.a-chip.is-active,
.dark .a-chip.is-active {
    background: var(--a-surface-inverse);
    color: var(--a-page);
    font-weight: 500;
}
.a-chip__count { color: currentColor; opacity: 0.55; }

/* Native select styled as a chip */
.a-select {
    appearance: none;
    -webkit-appearance: none;
    padding: 7px 34px 7px 15px;
    font-family: inherit;
    font-size: 13px;
    color: var(--a-fg);
    background-color: var(--a-surface-alt);
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%2386868b' d='M1.4.6 6 5.2 10.6.6 12 2 6 8 0 2z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 9px;
    border: none;
    border-radius: var(--a-r-pill);
    cursor: pointer;
}
.dark .a-select { background-color: rgba(255, 255, 255, 0.1); }

/* --------------------------------------------------------------------------
   7. Surfaces — cards
   -------------------------------------------------------------------------- */

.a-card {
    background: var(--a-surface);
    border-radius: var(--a-r-lg);
    padding: 28px;
    position: relative;
    overflow: hidden;
    border: none;
    transition: background-color 0.25s var(--a-ease), transform 0.25s var(--a-ease);
}
.a-card--tint { background: var(--a-surface-alt); }
.dark .a-card--tint { background: var(--a-surface-alt); }
.a-card--dark { background: #1d1d1f; }
.a-card--flush { padding: 0; }
.a-card--bare { background: transparent; border-radius: 0; overflow: visible; }
.a-card--sm { padding: 22px; border-radius: var(--a-r-md); }
a.a-card--sm, .a-card--sm { display: flex; flex-direction: column; align-items: flex-start; }
.a-card--sm > .a-link { margin-top: auto; padding-top: 16px; }

/* Interactive cards lift very slightly. No shadow, no colour shift, no border
   appearing on hover — apple.com moves the image, not the container. */
a.a-card, .a-card--link { display: block; cursor: pointer; }
a.a-card:hover, .a-card--link:hover { transform: translateY(-2px); }
.a-card__media { position: relative; overflow: hidden; background: var(--a-surface-alt); }
.a-card__media img,
.a-card__media > .a-media-fill {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 0.5s var(--a-ease);
}
a.a-card:hover .a-card__media img,
.a-card--link:hover .a-card__media img { transform: scale(1.03); }

.a-card__body { padding: 24px; }
.a-card__foot {
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid var(--a-hairline-soft);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

/* Aspect helpers so ratios stop being re-invented per page */
.a-ratio-16-9 { aspect-ratio: 16 / 9; }
.a-ratio-16-10 { aspect-ratio: 16 / 10; }
.a-ratio-4-3 { aspect-ratio: 4 / 3; }
.a-ratio-4-5 { aspect-ratio: 4 / 5; }
.a-ratio-3-4 { aspect-ratio: 3 / 4; }
.a-ratio-1-1 { aspect-ratio: 1 / 1; }
.a-ratio-2-3 { aspect-ratio: 2 / 3; }

/* Legacy card aliases (kept for older views that still reference them). */
.apple-card { background: var(--a-surface-alt); border-radius: var(--a-r-lg); padding: 28px; overflow: hidden; border: none; }
.apple-card-white { background: var(--a-surface); border-radius: var(--a-r-lg); padding: 28px; overflow: hidden; border: none; }
.apple-card-dark { background: #1d1d1f; color: #f5f5f7; border-radius: var(--a-r-lg); padding: 28px; overflow: hidden; border: none; }
.apple-bento-card {
    background: var(--a-surface);
    border-radius: var(--a-r-lg);
    border: none;
    transition: transform 0.25s var(--a-ease);
}
.apple-bento-card:hover { transform: translateY(-2px); }
.dark .apple-bento-card { background: var(--a-surface); }

/* Editorial row (list-style index of posts) */
.a-row {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 18px 0;
    border-bottom: 1px solid var(--a-hairline-soft);
}
.a-row:hover .a-row__title { color: var(--a-accent); }
.newsroom-row-item { display: flex; align-items: center; gap: 20px; padding: 18px 0; border-bottom: 1px solid var(--a-hairline-soft); }
.newsroom-row-item:hover .newsroom-title { color: var(--a-accent); }

/* Cover image on a dark scrim — used by every "billboard" card */
.a-billboard {
    position: relative;
    overflow: hidden;
    border-radius: var(--a-r-lg);
    background: #000;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    color: #f5f5f7;
    isolation: isolate;
}
.a-billboard > img {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    z-index: -2;
    transition: transform 0.6s var(--a-ease);
}
.a-billboard::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.86) 0%, rgba(0, 0, 0, 0.45) 45%, rgba(0, 0, 0, 0.1) 100%);
}
.a-billboard:hover > img { transform: scale(1.03); }
.a-billboard h2, .a-billboard h3, .a-billboard h4 { color: #ffffff; }
.a-billboard p { color: rgba(255, 255, 255, 0.78); }
.a-billboard__inner { position: relative; padding: 28px; }
@media (min-width: 768px) { .a-billboard__inner { padding: 40px; } }

/* Hero */
.a-hero { padding-top: 72px; padding-bottom: 64px; }
.a-hero__avatar {
    width: 84px; height: 84px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--a-surface-alt);
    margin: 0 auto 26px;
}
.a-hero__lede { margin-top: 20px; }
.a-br-md { display: none; }
@media (min-width: 768px) {
    .a-hero { padding-top: 92px; padding-bottom: 84px; }
    .a-br-md { display: inline; }
}

.a-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.a-actions--center { justify-content: center; }

/* Directory tile: a number, a label, and one way in */
a.a-tile,
.a-tile {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-height: 168px;
    padding: 22px;
    border-radius: var(--a-r-md);
}
.a-tile__count {
    font-size: 32px;
    font-weight: 600;
    letter-spacing: -0.024em;
    line-height: 1;
    color: var(--a-fg);
    margin-bottom: 10px;
}
.a-tile .a-link { margin-top: auto; padding-top: 16px; }

/* Book cover column, used inside rails */
.a-book { display: block; }
.a-book__cover {
    border-radius: var(--a-r-md);
    overflow: hidden;
    background: var(--a-surface-alt);
}
.a-book__cover img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--a-ease); }
.a-book:hover .a-book__cover img { transform: scale(1.04); }

/* Play affordance over a thumbnail */
.a-play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.22);
    transition: background-color 0.25s var(--a-ease);
}
.a-play > i {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px; height: 50px;
    padding-left: 3px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.94);
    color: #1d1d1f;
    font-size: 17px;
    transition: transform 0.25s var(--a-ease);
}
a:hover > .a-card__media > .a-play,
a:hover .a-play { background: rgba(0, 0, 0, 0.12); }
a:hover .a-play > i { transform: scale(1.06); }

/* Long-form prose column */
.a-prose { max-width: 66ch; }
.a-prose p {
    font-size: clamp(17px, 1.35vw, 19px);
    line-height: 1.62;
    color: var(--a-fg-secondary);
}
.a-prose p + p { margin-top: 1.15em; }
.a-prose a { color: var(--a-accent); }
.a-prose a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Figures strip — numbers with a label, separated by hairlines, not boxes */
.a-figures {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px 20px;
}
@media (min-width: 700px) { .a-figures { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.a-figures > div {
    padding-top: 20px;
    border-top: 1px solid var(--a-hairline);
}
.a-figures__n {
    display: block;
    font-size: clamp(38px, 4.6vw, 54px);
    font-weight: 600;
    letter-spacing: -0.028em;
    line-height: 1;
    color: var(--a-fg);
}
.a-figures__l {
    display: block;
    margin-top: 10px;
    font-size: 14px;
    color: var(--a-fg-muted);
}

/* Feature card — title over copy, nothing else */
.a-feature { padding: 30px; border-radius: var(--a-r-lg); }
.a-feature p { margin-top: 10px; }

/* Numbered process list */
.a-steps { list-style: none; border-top: 1px solid var(--a-hairline); }
.a-steps > li {
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: 8px 16px;
    padding: 26px 0;
    border-bottom: 1px solid var(--a-hairline);
}
@media (min-width: 768px) {
    .a-steps > li { grid-template-columns: 96px 1fr; gap: 32px; padding: 32px 0; }
}
.a-steps__n {
    font-family: var(--a-font-mono);
    font-size: 13px;
    color: var(--a-fg-muted);
    padding-top: 4px;
}
.a-steps p { margin-top: 8px; max-width: 62ch; }

/* Compact link list with a trailing note */
.a-inline-list { list-style: none; margin-top: 28px; border-top: 1px solid var(--a-hairline); }
.a-inline-list > li {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 14px;
    padding: 14px 0;
    border-bottom: 1px solid var(--a-hairline);
}

/* Jump nav + filter bar */
.a-jump { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 32px; }
.a-filterbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 32px;
}
.a-filterbar .a-caption { margin-left: auto; }

/* Site preview framed as a browser window — one hairline, one domain label,
   no decorative traffic lights. */
.a-browser {
    display: block;
    border-radius: var(--a-r-md);
    overflow: hidden;
    background: var(--a-surface-alt);
    border: 1px solid var(--a-hairline-soft);
}
.a-browser__bar {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 28px;
    padding-inline: 12px;
    background: var(--a-surface-alt);
    border-bottom: 1px solid var(--a-hairline-soft);
    color: var(--a-fg-muted);
}
.a-browser__bar .a-mono { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.a-browser__view { display: block; overflow: hidden; background: var(--a-surface); }
.a-browser__view img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--a-ease); }
.a-browser:hover img { transform: scale(1.03); }

/* Repository index */
.a-repo-list { list-style: none; border-top: 1px solid var(--a-hairline); }
.a-repo-list > li {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    align-items: center;
    padding: 22px 0;
    border-bottom: 1px solid var(--a-hairline);
}
@media (min-width: 834px) {
    .a-repo-list > li { grid-template-columns: minmax(0, 1fr) 200px 130px; gap: 24px; }
}
.a-repo-list__main p { margin-top: 6px; max-width: 62ch; }
/* Stacked, not wrapped: a flex row reflowed differently per row depending on
   how long the language string was, so nothing lined up down the column. */
.a-repo-list__meta { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; }
@media (min-width: 834px) { .a-repo-list > li > .a-link { justify-self: end; } }

/* Verse card */
.a-verse { display: flex; flex-direction: column; align-items: flex-start; min-height: 210px; }
.a-verse .a-link { margin-top: auto; padding-top: 16px; }

/* Channel card */
.a-channel { display: flex; align-items: flex-start; gap: 16px; padding: 24px; border-radius: var(--a-r-md); }
.a-channel__avatar { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }

/* Feature billboard */
.a-billboard--feature { min-height: 340px; }

/* Shelf: cover beside a synopsis, two per row on wide screens */
.a-shelf { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 834px) { .a-shelf { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } }
.a-shelf__item {
    display: grid;
    grid-template-columns: 104px minmax(0, 1fr);
    gap: 20px;
    padding: 20px;
    border-radius: var(--a-r-md);
    background: var(--a-surface);
    transition: transform 0.25s var(--a-ease);
}
.a-shelf__item:hover { transform: translateY(-2px); }
@media (min-width: 560px) { .a-shelf__item { grid-template-columns: 130px minmax(0, 1fr); gap: 24px; padding: 24px; } }
.a-shelf__body { display: flex; flex-direction: column; }
.a-shelf__meta {
    margin-top: auto;
    padding-top: 16px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
}

/* Featured post: image beside the copy on wide screens, stacked below */
.a-feature-post { display: grid; grid-template-columns: 1fr; }
@media (min-width: 834px) {
    .a-feature-post { grid-template-columns: 1.15fr 1fr; align-items: stretch; }
    .a-feature-post .a-card__media { height: 100%; aspect-ratio: auto; }
}
.a-feature-post__body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 28px;
}
@media (min-width: 834px) { .a-feature-post__body { padding: 44px; } }

/* Archive index: thumbnail, label, title, date — two columns when there's room */
.a-index {
    display: grid;
    grid-template-columns: 1fr;
    column-gap: 40px;
    border-top: 1px solid var(--a-hairline);
}
@media (min-width: 834px) { .a-index { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.a-index__row {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 18px 0;
    border-bottom: 1px solid var(--a-hairline);
}
.a-index__row:hover .a-title { color: var(--a-accent); }
.a-index__thumb {
    flex-shrink: 0;
    width: 76px; height: 76px;
    border-radius: var(--a-r-sm);
    overflow: hidden;
    background: var(--a-surface-alt);
}
.a-index__thumb img { width: 100%; height: 100%; object-fit: cover; }
.a-index__text { min-width: 0; display: block; }
.a-index__text .a-title { display: block; transition: color 0.2s var(--a-ease); }

/* Search field styled to sit in a chip row */
.a-field {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 15px;
    border-radius: var(--a-r-pill);
    background: var(--a-surface-alt);
    color: var(--a-fg-muted);
    min-width: 200px;
}
.dark .a-field { background: rgba(255, 255, 255, 0.1); }
.a-field input {
    flex: 1;
    min-width: 0;
    border: none;
    background: transparent;
    font-family: inherit;
    font-size: 13px;
    color: var(--a-fg);
}
.a-field input:focus { outline: none; }
.a-field input::placeholder { color: var(--a-fg-muted); }
.a-field:focus-within { outline: 2px solid var(--a-accent); outline-offset: 2px; }

/* Empty state */
.a-empty {
    text-align: center;
    max-width: 420px;
    margin: 48px auto 0;
    padding: 40px 28px;
    border-radius: var(--a-r-lg);
    background: var(--a-surface);
}

/* Bio hero: copy beside a portrait */
.a-bio { display: grid; grid-template-columns: 1fr; gap: 32px; align-items: center; }
@media (min-width: 834px) { .a-bio { grid-template-columns: 1fr 0.85fr; gap: 56px; } }
.a-bio__text .a-hero__lede { margin-top: 18px; }
.a-bio__portrait {
    order: -1;
    border-radius: var(--a-r-lg);
    overflow: hidden;
    background: var(--a-surface-alt);
    aspect-ratio: 4 / 3;
}
@media (min-width: 834px) { .a-bio__portrait { order: 0; aspect-ratio: 4 / 5; } }
.a-bio__portrait img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* The subject sits just right of centre in the source frame. */
    object-position: 54% center;
}

/* Spec list — label / value pairs, hairline separated */
.a-speclist { border-top: 1px solid var(--a-hairline); }
.a-speclist > div {
    display: grid;
    grid-template-columns: 1fr;
    gap: 4px;
    padding: 18px 0;
    border-bottom: 1px solid var(--a-hairline);
}
@media (min-width: 640px) {
    .a-speclist > div { grid-template-columns: 150px minmax(0, 1fr); gap: 24px; align-items: baseline; }
}
.a-speclist dt { font-size: 15px; font-weight: 500; color: var(--a-fg); }
.a-speclist dd { font-size: 15px; line-height: 1.5; color: var(--a-fg-secondary); }

/* Art mosaic — one lead tile at 2x2, the rest at 1x1 */
.a-mosaic {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}
@media (min-width: 640px) { .a-mosaic { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; } }
.a-mosaic__item { display: block; }
.a-mosaic__media {
    display: block;
    aspect-ratio: 1 / 1;
    border-radius: var(--a-r-md);
    overflow: hidden;
    background: var(--a-surface-alt);
}
.a-mosaic__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--a-ease); }
.a-mosaic__item:hover .a-mosaic__media img { transform: scale(1.04); }
.a-mosaic__cap { display: block; padding: 13px 3px 0; }
.a-mosaic__cap .a-title { display: block; transition: color 0.2s var(--a-ease); }
.a-mosaic__cap .a-caption { display: block; margin-top: 2px; }
.a-mosaic__item:hover .a-title { color: var(--a-accent); }
@media (min-width: 640px) {
    .a-mosaic__item.is-lead { grid-column: span 2; grid-row: span 2; }
    .a-mosaic__item.is-lead .a-mosaic__media { aspect-ratio: auto; height: calc(100% - 46px); min-height: 260px; }
    .a-mosaic__item.is-lead .a-title { font-size: 21px; }
}

/* "Now" — three current facts in a ruled list */
.a-now { display: grid; grid-template-columns: 1fr; gap: 24px; }
@media (min-width: 834px) { .a-now { grid-template-columns: 300px minmax(0, 1fr); gap: 40px; } }
.a-now__list { list-style: none; border-top: 1px solid var(--a-hairline); }
.a-now__list > li {
    display: grid;
    grid-template-columns: 1fr;
    gap: 4px;
    padding: 18px 0;
    border-bottom: 1px solid var(--a-hairline);
}
@media (min-width: 640px) {
    .a-now__list > li { grid-template-columns: 130px minmax(0, 1fr) auto; align-items: baseline; gap: 20px; }
}
.a-now__list a.a-title { transition: color 0.2s var(--a-ease); }
.a-now__list a.a-title:hover { color: var(--a-accent); }

/* Filmstrip — a row of covers above a hero, centre tile slightly forward */
.a-filmstrip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    align-items: center;
    margin-bottom: 40px;
}
@media (min-width: 640px) {
    .a-filmstrip { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; margin-bottom: 52px; }
}
.a-filmstrip__cell {
    aspect-ratio: 4 / 5;
    border-radius: var(--a-r-md);
    overflow: hidden;
    background: #161617;
    opacity: 0.55;
    transition: opacity 0.3s var(--a-ease), transform 0.3s var(--a-ease);
}
.a-filmstrip__cell img { width: 100%; height: 100%; object-fit: cover; }
.a-filmstrip__cell:nth-child(2),
.a-filmstrip__cell:nth-child(4) { opacity: 0.75; }
.a-filmstrip__cell.is-lead { opacity: 1; transform: scale(1.06); z-index: 1; }
.a-filmstrip__cell:hover { opacity: 1; }
/* Only the centre three fit comfortably on a phone. */
@media (max-width: 639px) {
    .a-filmstrip__cell:nth-child(1),
    .a-filmstrip__cell:nth-child(5) { display: none; }
}

/* Verse: one line per line, as written */
.a-verse__lines {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin-top: 12px;
    font-size: 15px;
    line-height: 1.45;
    color: var(--a-fg-secondary);
}
.a-verse__lines span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Stat band — label above figure, hairline separated */
.a-statband {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px 20px;
    margin-top: 48px;
    padding-top: 28px;
    border-top: 1px solid var(--a-hairline);
}
@media (min-width: 700px) { .a-statband { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.a-statband dt { font-size: 13px; color: var(--a-fg-muted); }
.a-statband dd {
    margin-top: 6px;
    font-size: clamp(28px, 3vw, 38px);
    font-weight: 600;
    letter-spacing: -0.026em;
    line-height: 1;
    color: var(--a-fg);
}

/* Sticky in-page section nav */
.a-sectionnav {
    position: sticky;
    top: var(--a-header-h);
    z-index: 800;
    background: color-mix(in srgb, var(--a-page) 84%, transparent);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 1px solid var(--a-hairline-soft);
}
@supports not (background: color-mix(in srgb, red 50%, transparent)) {
    .a-sectionnav { background: rgba(255, 255, 255, 0.88); }
    .dark .a-sectionnav { background: rgba(0, 0, 0, 0.88); }
}
.a-sectionnav__inner {
    display: flex;
    gap: 2px;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 9px 22px;
}
.a-sectionnav__inner::-webkit-scrollbar { display: none; }
@media (min-width: 768px) { .a-sectionnav__inner { padding-inline: 32px; } }
.a-sectionnav a {
    flex-shrink: 0;
    padding: 6px 13px;
    border-radius: var(--a-r-pill);
    font-size: 13px;
    color: var(--a-fg-secondary);
    white-space: nowrap;
    transition: color 0.2s var(--a-ease), background-color 0.2s var(--a-ease);
}
.a-sectionnav a:hover { color: var(--a-fg); }
.a-sectionnav a.is-active {
    color: var(--a-fg);
    font-weight: 500;
    background: var(--a-hairline-soft);
}

/* Contact: channels column beside a sticky note form */
.a-contact { display: grid; grid-template-columns: 1fr; gap: 28px; align-items: start; }
@media (min-width: 900px) { .a-contact { grid-template-columns: 1fr 1fr; gap: 32px; } }
.a-contact__form { padding: 30px; }
@media (min-width: 900px) {
    .a-contact__form { padding: 36px; position: sticky; top: calc(var(--a-header-h) + 24px); }
}

/* Forms */
.a-form { display: flex; flex-direction: column; gap: 18px; }
.a-form__row { display: flex; flex-direction: column; gap: 7px; }
.a-label {
    font-size: 13px;
    font-weight: 500;
    letter-spacing: -0.006em;
    color: var(--a-fg-secondary);
}
.a-input {
    width: 100%;
    padding: 12px 16px;
    border-radius: var(--a-r-sm);
    border: 1px solid var(--a-hairline);
    background: var(--a-surface-alt);
    color: var(--a-fg);
    font-family: inherit;
    font-size: 16px;
    line-height: 1.4;
    transition: border-color 0.2s var(--a-ease), box-shadow 0.2s var(--a-ease);
}
.a-input::placeholder { color: var(--a-fg-muted); }
/* A visible focus ring is required; the previous markup set outline:none and
   put nothing in its place, leaving keyboard users with no cursor at all. */
.a-input:focus {
    outline: none;
    border-color: var(--a-accent);
    box-shadow: 0 0 0 3px var(--a-accent-soft);
}
textarea.a-input { resize: vertical; min-height: 132px; }

.a-form__status { font-size: 13px; color: var(--a-fg-secondary); min-height: 1.4em; }
.a-form__status[data-state="ok"] { color: var(--a-green); }
.a-form__status[data-state="error"] { color: #d33a3a; }
.dark .a-form__status[data-state="error"] { color: #ff6961; }

/* Round tinted glyph used to head a card */
.a-icon-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px; height: 36px;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--a-accent-soft);
    color: var(--a-accent);
    font-size: 15px;
}
.a-icon-badge--green { background: rgba(52, 199, 89, 0.16); color: var(--a-green); }
.a-icon-badge--violet { background: rgba(175, 82, 222, 0.16); color: #9f4fd0; }
.dark .a-icon-badge--violet { color: #bf5af2; }

/* Card sub-structure: glyph + heading row, and a ruled footer strip */
.a-card-head { display: flex; align-items: center; gap: 13px; }
.a-card-rule {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--a-hairline-soft);
}
.a-card-rule--split {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.a-stack { display: flex; flex-direction: column; gap: 9px; }
.a-stack--lg { gap: 18px; }

/* Inline link inside running prose: no flex, no generated chevron, so it
   wraps with the sentence instead of forcing its own line box. */
.a-inline-link { color: var(--a-accent); text-decoration: underline; text-underline-offset: 3px; }
.a-inline-link:hover { color: var(--a-accent-hover); }

/* --------------------------------------------------------------------------
   8. Status tags
   -------------------------------------------------------------------------- */

.a-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.01em;
    border-radius: var(--a-r-pill);
    background: var(--a-surface-alt);
    color: var(--a-fg-secondary);
    white-space: nowrap;
}
.dark .a-tag { background: rgba(255, 255, 255, 0.1); }
.a-tag--accent { background: var(--a-accent-soft); color: var(--a-accent); }
.a-tag--green { background: rgba(29, 125, 63, 0.12); color: var(--a-green); }
.dark .a-tag--green { background: rgba(48, 209, 88, 0.16); }
.a-tag--orange { background: rgba(168, 87, 0, 0.12); color: var(--a-orange); }
.dark .a-tag--orange { background: rgba(255, 159, 10, 0.16); }
.a-tag--onDark { background: rgba(0, 0, 0, 0.55); color: #fff; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }

/* --------------------------------------------------------------------------
   9. Grids
   -------------------------------------------------------------------------- */

.a-grid { display: grid; gap: 20px; }
@media (min-width: 768px) { .a-grid { gap: 24px; } }
.a-grid-2 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.a-grid-3 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.a-grid-4 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.a-grid-books { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 540px) {
    .a-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 640px) {
    .a-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .a-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .a-grid-books { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 960px) {
    .a-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .a-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .a-grid-books { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

/* Horizontal snap rail — replaces Swiper for simple card runs so the page
   works before JavaScript loads and stays accessible with a keyboard. */
.a-rail {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(255px, 1fr);
    gap: 20px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 22px;
    padding-bottom: 14px;
    margin-inline: -22px;
    padding-inline: 22px;
}
.a-rail > * { scroll-snap-align: start; }
@media (min-width: 768px) {
    .a-rail { grid-auto-columns: minmax(300px, 1fr); gap: 24px; margin-inline: 0; padding-inline: 0; scroll-padding-inline: 0; }
}
.a-rail::-webkit-scrollbar { height: 3px; }
.a-rail::-webkit-scrollbar-track { background: var(--a-hairline-soft); border-radius: 3px; }
.a-rail::-webkit-scrollbar-thumb { background: var(--a-fg-muted); border-radius: 3px; }
.a-rail--wide { grid-auto-columns: minmax(290px, 1fr); }
@media (min-width: 768px) { .a-rail--wide { grid-auto-columns: minmax(400px, 1fr); } }
.a-rail--narrow { grid-auto-columns: minmax(146px, 1fr); }
@media (min-width: 768px) { .a-rail--narrow { grid-auto-columns: minmax(168px, 1fr); } }

.a-rail-nav { display: inline-flex; gap: 8px; }
.a-rail-nav button {
    width: 34px; height: 34px;
    border-radius: 50%;
    border: none;
    background: var(--a-surface-alt);
    color: var(--a-fg);
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: background-color 0.2s var(--a-ease), opacity 0.2s var(--a-ease);
}
.a-rail-nav button:hover { background: var(--a-surface-sunken); }
.a-rail-nav button[disabled] { opacity: 0.32; cursor: default; }
.dark .a-rail-nav button { background: rgba(255, 255, 255, 0.12); }
.dark .a-rail-nav button:hover { background: rgba(255, 255, 255, 0.2); }
.a-section--dark .a-rail-nav button { background: rgba(255, 255, 255, 0.12); color: #f5f5f7; }
.a-section--dark .a-rail-nav button:hover { background: rgba(255, 255, 255, 0.2); }

/* --------------------------------------------------------------------------
   10. Accordion (details/summary)
   -------------------------------------------------------------------------- */

.a-accordion { border-top: 1px solid var(--a-hairline); }
.a-accordion details { border-bottom: 1px solid var(--a-hairline); }
.a-accordion summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 22px 2px;
    font-size: 17px;
    font-weight: 500;
    letter-spacing: -0.012em;
    color: var(--a-fg);
    cursor: pointer;
    list-style: none;
}
.a-accordion summary::-webkit-details-marker { display: none; }
.a-accordion summary::after {
    content: "";
    flex-shrink: 0;
    width: 13px; height: 13px;
    border-right: 1.5px solid var(--a-fg-muted);
    border-bottom: 1.5px solid var(--a-fg-muted);
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform 0.25s var(--a-ease);
}
.a-accordion details[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.a-accordion__body { padding: 0 2px 24px; max-width: 66ch; }

/* --------------------------------------------------------------------------
   11. Overlays — spotlight search & modal
   -------------------------------------------------------------------------- */

.a-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    background: rgba(0, 0, 0, 0.42);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    padding: 22px;
}
.a-overlay[hidden] { display: none; }
.a-overlay--top { align-items: flex-start; justify-content: center; padding-top: 14vh; }
.a-overlay--center { align-items: center; justify-content: center; }

.a-panel {
    background: var(--a-surface);
    color: var(--a-fg);
    border-radius: var(--a-r-lg);
    box-shadow: var(--a-shadow-modal);
    width: 100%;
    overflow: hidden;
}
.a-panel--search { max-width: 580px; }
.a-panel--modal { max-width: 520px; padding: 32px; }

.a-search-field {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 20px;
    border-bottom: 1px solid var(--a-hairline-soft);
}
.a-search-field input {
    flex: 1;
    border: none;
    background: transparent;
    font-family: inherit;
    font-size: 17px;
    color: var(--a-fg);
    letter-spacing: -0.012em;
}
.a-search-field input::placeholder { color: var(--a-fg-muted); }
.a-search-field input:focus { outline: none; }

.a-quicklink {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 14px;
    border-radius: var(--a-r-sm);
    font-size: 14px;
    color: var(--a-fg);
    background: var(--a-surface-alt);
    transition: background-color 0.2s var(--a-ease);
}
.a-quicklink:hover { background: var(--a-surface-sunken); }
.dark .a-quicklink { background: rgba(255, 255, 255, 0.08); }
.dark .a-quicklink:hover { background: rgba(255, 255, 255, 0.14); }

kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--a-font) !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    padding: 2px 6px !important;
    color: var(--a-fg-muted) !important;
    background-color: var(--a-hairline-soft) !important;
    border: none !important;
    border-radius: 5px !important;
    box-shadow: none !important;
    line-height: 1.3 !important;
}

/* --------------------------------------------------------------------------
   12. Footer
   -------------------------------------------------------------------------- */

.a-footer {
    background: var(--a-page-alt);
    color: var(--a-fg-muted);
    font-size: 12px;
    line-height: 1.5;
    padding: 44px 22px;
    border-top: 1px solid var(--a-hairline-soft);
}
@media (min-width: 768px) { .a-footer { padding-inline: 32px; } }
.a-footer a { color: var(--a-fg-secondary); }
.a-footer a:hover { color: var(--a-fg); text-decoration: underline; text-underline-offset: 3px; }
.a-footer__cols {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px 20px;
    padding-block: 24px 32px;
    border-bottom: 1px solid var(--a-hairline-soft);
}
@media (min-width: 700px) { .a-footer__cols { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.a-footer__cols h3 {
    font-size: 12px;
    font-weight: 600;
    color: var(--a-fg);
    margin-bottom: 10px;
    letter-spacing: -0.004em;
}
.a-footer__cols ul { list-style: none; display: flex; flex-direction: column; gap: 9px; }
.a-footer__base {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-top: 20px;
}

/* --------------------------------------------------------------------------
   13. Third-party overrides (Swiper, SlimSelect)
   -------------------------------------------------------------------------- */

.swiper-scrollbar { background: var(--a-hairline-soft) !important; height: 3px !important; border-radius: 3px !important; }
.swiper-scrollbar-drag { background: var(--a-fg-muted) !important; border-radius: 3px !important; }
.swiper-pagination-bullet { background: var(--a-fg-muted) !important; opacity: 0.3 !important; }
.swiper-pagination-bullet-active { background: var(--a-accent) !important; opacity: 1 !important; }

.ss-main {
    border-radius: var(--a-r-pill) !important;
    border: none !important;
    background: var(--a-surface-alt) !important;
    padding: 7px 15px !important;
    font-family: var(--a-font) !important;
    font-size: 13px !important;
    box-shadow: none !important;
    color: var(--a-fg) !important;
}
.ss-main .ss-values .ss-value {
    background: var(--a-accent) !important;
    color: #ffffff !important;
    border-radius: var(--a-r-pill) !important;
    font-size: 12px !important;
    padding: 3px 10px !important;
}
.ss-content {
    border-radius: var(--a-r-sm) !important;
    border: none !important;
    box-shadow: var(--a-shadow-menu) !important;
    background: var(--a-surface) !important;
    color: var(--a-fg) !important;
}