/* ═══════════════════════════════════════════════════════════════
   AVIATION AFFAIR — SHARED CSS
   Loaded on every page. Contains tokens, base styles, header,
   footer, and components used across multiple pages (cards,
   bylines, buttons, etc.).

   Page-specific styles live in separate files loaded only on the
   page that needs them:
     - home-aviation-affair.css       → Page 10
     - episodes-aviation-affair.css   → Pages 20, 30
     - articles-aviation-affair.css   → Pages 100, 101
     - technology-aviation-affair.css → Pages 110, 111
     - about-aviation-affair.css      → Page 40
     - contact-aviation-affair.css    → Page 50
   ═══════════════════════════════════════════════════════════════ */


/* ───────────────────────────────────────────────────────────────
   1. DESIGN TOKENS (CSS CUSTOM PROPERTIES)
   ─────────────────────────────────────────────────────────────── */

:root {
  /* ── Brand colors — Palette 04 ───────────────────────────── */
  --aa-navy-deep:    #0F2440;
  --aa-navy:         #1B3A5C;
  --aa-navy-light:   #234876;
  --aa-navy-card:    #2B5482;
  --aa-sky:          #4A8FCB;
  --aa-sky-bright:   #7AB3E0;
  --aa-cream:        #FAF7F0;
  --aa-cream-warm:   #F4EFE3;
  --aa-paper:        #FFFFFF;
  --aa-ink-dark:     #142A45;

  /* ── Default (LIGHT MODE — matches Demo 1) ─────────────── */
  --aa-bg:              #FAF7F2;          /* warm cream page background */
  --aa-bg-elevated:     #FFFFFF;          /* card / surface */
  --aa-bg-card:         #F1ECE3;          /* alt surface (slightly warmer) */
  --aa-bg-deep:         #F1ECE3;          /* footer band, alt sections */
  --aa-ink:             #1B3A5C;          /* navy — body text */
  --aa-ink-muted:       #5A6F84;          /* warm gray-blue */
  --aa-ink-dim:         #8A9AAE;          /* lighter still — meta info */
  --aa-accent:          #1B3A5C;          /* navy — accents are darker, not brighter */
  --aa-accent-bright:   #4A8FCB;          /* sky blue — links and hover state */
  --aa-rule:            #E2DACB;          /* warm cream-tan border */
  --aa-rule-soft:       rgba(27, 58, 92, 0.08);
  --aa-shadow:          0 1px 3px rgba(27, 58, 92, 0.08);
  --aa-shadow-elevated: 0 4px 16px rgba(27, 58, 92, 0.12);

  /* ── Typography (system fonts only — no loading required) ─ */
  --aa-font-display:    Georgia, 'Times New Roman', Times, serif;
  --aa-font-body:       Calibri, 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --aa-font-mono:       Consolas, 'Courier New', Courier, monospace;

  /* ── Spacing scale ───────────────────────────────────────── */
  --aa-space-xs:   4px;
  --aa-space-sm:   8px;
  --aa-space-md:   16px;
  --aa-space-lg:   24px;
  --aa-space-xl:   40px;
  --aa-space-2xl:  64px;
  --aa-space-3xl:  96px;

  /* ── Layout ──────────────────────────────────────────────── */
  --aa-container:       1080px;
  --aa-container-narrow: 720px;
  --aa-radius:          4px;
  --aa-radius-lg:       8px;

  /* ── Typography scale ────────────────────────────────────── */
  --aa-fs-mono:         0.78rem;
  --aa-fs-eyebrow:      0.7rem;
  --aa-fs-body:         1rem;
  --aa-fs-lead:         1.15rem;
  --aa-fs-deck:         1.25rem;
  --aa-fs-h3:           1.4rem;
  --aa-fs-h2:           clamp(1.8rem, 4vw, 2.6rem);
  --aa-fs-h1:           clamp(2.2rem, 5vw, 3.8rem);
  --aa-fs-display:      clamp(2.8rem, 6vw, 4.4rem);

  /* ── Animation ───────────────────────────────────────────── */
  --aa-transition:      150ms ease;
  --aa-transition-slow: 300ms ease;
}


/* ───────────────────────────────────────────────────────────────
   2. DARK MODE OVERRIDES
   ─────────────────────────────────────────────────────────────── */

[data-theme="dark"] {
  --aa-bg:              #0E2138;
  --aa-bg-elevated:     #173353;
  --aa-bg-card:         #1B3A5C;
  --aa-bg-deep:         #173353;
  --aa-ink:             #F1ECE3;
  --aa-ink-muted:       #B5C4D6;
  --aa-ink-dim:         #7FA0BD;
  --aa-accent:          #7FB3E0;
  --aa-accent-bright:   #4A8FCB;
  --aa-rule:            #2A4A6E;
  --aa-rule-soft:       rgba(255, 255, 255, 0.08);
  --aa-shadow:          0 1px 3px rgba(0, 0, 0, 0.3);
  --aa-shadow-elevated: 0 4px 16px rgba(0, 0, 0, 0.35);
}


/* ───────────────────────────────────────────────────────────────
   3. RESET & BASE
   Light reset — Universal Theme already sets most defaults.
   ─────────────────────────────────────────────────────────────── */

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  overflow-x: clip;
}

body.t-Body {
  background: var(--aa-bg) !important;
  color: var(--aa-ink) !important;
  font-family: var(--aa-font-body) !important;
  font-size: var(--aa-fs-body);
  line-height: 1.65;
  overflow-x: clip;
  transition: background-color var(--aa-transition-slow), color var(--aa-transition-slow);
}

/* Universal Theme structural overrides — these zero out vertical spacing
   so the hero sits flush against the header on single-column pages.

   IMPORTANT: These rules apply to single-column pages. Pages that use
   the AVIATION_AFFAIR_SIDEBAR template need the flex layout restored —
   that's handled in Section 27 below via :has(#t_Body_side) selector. */
.t-Body {
  background: transparent;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
  position: static !important;
  grid-template-rows: none !important;
  grid-template-columns: none !important;
  gap: 0 !important;
}
.t-Body-main {
  background: transparent;
  margin: 0;
  padding: 0;
}
.t-Body-content {
  background: transparent;
  margin: 0;
  padding: 0;
}
.t-Body-mainContent {
  background: transparent;
  margin: 0;
  padding: 0;
}

.t-Body-fullContent {
  padding: 0;
  margin: 0;
  background: transparent;
}
.t-Body-fullContent:empty { display: none; }

.t-Body-contentInner {
  max-width: var(--aa-container);
  margin: 0 auto;
  padding: 0 var(--aa-space-lg);
  background: transparent;
}

.t-Body-contentInner > .container,
.t-Body-contentInner > .container > .row {
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 0;
  padding-bottom: 0;
}

.t-Body-contentInner > .container > .row:first-child {
  margin-top: 0 !important;
}

.apex-page-success.u-hidden,
.apex-page-error.u-hidden {
  display: none !important;
}

.t-PageBody { background: var(--aa-bg) !important; }

form#wwvFlowForm,
#wwvFlowForm {
  display: block !important;
  grid-template-rows: none !important;
  grid-template-columns: none !important;
  gap: 0 !important;
}

body.apex-side-nav,
body.t-PageBody--leftNav {
  padding-left: 0 !important;
}

body.apex-side-nav .t-Body,
body.t-PageBody--leftNav .t-Body {
  margin-left: 0 !important;
  padding-left: 0 !important;
}

body.apex-top-nav {
  padding-top: 0 !important;
}

body.apex-top-nav .t-Body {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

body.t-PageBody--topNav,
body.js-HeaderExpanded,
body.t-PageBody--topNav.js-HeaderExpanded {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

body.t-PageBody--topNav .t-Body,
body.js-HeaderExpanded .t-Body {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.t-Header-nav,
#t_Header_nav,
.t-NavigationBar,
.t-Header--top {
  display: none !important;
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

.t-Body-nav,
#t_Body_nav,
#t_TreeNav {
  display: none !important;
}


/* ───────────────────────────────────────────────────────────────
   4. SITE HEADER
   ─────────────────────────────────────────────────────────────── */

.site-header {
  border-bottom: 1px solid var(--aa-rule);
  padding: var(--aa-space-md) 0;
  background: var(--aa-bg);
  position: sticky;
  top: 0;
  z-index: 100;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

:root:not([data-theme="dark"]) .site-header {
  background: rgba(250, 247, 242, 0.92);
}

[data-theme="dark"] .site-header {
  background: rgba(14, 33, 56, 0.92);
}

.site-header__inner {
  max-width: var(--aa-container);
  margin: 0 auto;
  padding: 0 var(--aa-space-lg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--aa-space-lg);
}

.site-header__brand {
  display: flex;
  align-items: center;
  gap: var(--aa-space-md);
  text-decoration: none;
  color: var(--aa-ink);
  flex-shrink: 0;
}

.site-header__mark {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  color: var(--aa-ink);
}

.site-footer__mark {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  color: var(--aa-ink);
}

.site-header__wordmark {
  font-family: var(--aa-font-display);
  font-size: 1.4rem;
  font-weight: 400;
  letter-spacing: 0.005em;
  color: var(--aa-ink);
  line-height: 1;
}

.site-header__wordmark em {
  font-style: italic;
  color: var(--aa-accent-bright);
  font-weight: 400;
}

.site-header__nav {
  display: flex;
  gap: var(--aa-space-lg);
  align-items: center;
  flex: 1;
  justify-content: flex-end;
}

.site-header__nav a {
  font-family: var(--aa-font-body);
  font-size: 1rem;
  font-weight: 600;
  color: var(--aa-ink);
  text-decoration: none;
  padding: var(--aa-space-sm) 0;
  border-bottom: 1px solid transparent;
  transition: color var(--aa-transition), border-color var(--aa-transition);
}

.site-header__nav a:hover,
.site-header__nav a:focus-visible {
  color: var(--aa-accent-bright);
  border-bottom-color: var(--aa-accent);
  outline: none;
}

.site-header__nav a.active,
.site-header__nav a[aria-current="page"] {
  color: var(--aa-accent-bright);
  border-bottom-color: var(--aa-accent-bright);
}


/* ───────────────────────────────────────────────────────────────
   5. THEME TOGGLE BUTTON
   ─────────────────────────────────────────────────────────────── */

.theme-toggle {
  background: transparent;
  border: 1px solid var(--aa-rule);
  border-radius: 50%;
  width: 38px;
  height: 38px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--aa-ink-muted);
  font-size: 14px;
  transition: border-color var(--aa-transition), color var(--aa-transition);
  flex-shrink: 0;
}

.theme-toggle:hover,
.theme-toggle:focus-visible {
  border-color: var(--aa-accent-bright);
  color: var(--aa-accent-bright);
  outline: none;
}

.theme-toggle__sun,
.theme-toggle__moon {
  position: absolute;
}
:root:not([data-theme="dark"]) .theme-toggle__sun { display: none; }
[data-theme="dark"]            .theme-toggle__moon { display: none; }


/* ───────────────────────────────────────────────────────────────
   6. SITE FOOTER
   ─────────────────────────────────────────────────────────────── */

.site-footer {
  background: var(--aa-bg-deep);
  border-top: 1px solid var(--aa-rule);
  padding: var(--aa-space-2xl) 0 var(--aa-space-lg);
  margin-top: var(--aa-space-3xl);
}

.site-footer__inner {
  max-width: var(--aa-container);
  margin: 0 auto;
  padding: 0 var(--aa-space-lg);
}

.site-footer__cols {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--aa-space-xl);
  padding-bottom: var(--aa-space-xl);
  border-bottom: 1px solid var(--aa-rule-soft);
}

.site-footer__brand img {
  width: 44px;
  height: 44px;
  margin-bottom: var(--aa-space-md);
}

.site-footer__brand-name {
  font-family: var(--aa-font-display);
  font-size: 1.15rem;
  color: var(--aa-ink);
  margin-bottom: var(--aa-space-xs);
}

.site-footer__brand-name em {
  font-style: italic;
  color: var(--aa-accent-bright);
  font-weight: 400;
}

.site-footer__brand-tagline {
  font-family: var(--aa-font-display);
  font-style: italic;
  font-size: 0.9rem;
  color: var(--aa-ink-muted);
  line-height: 1.5;
}

.site-footer__col h4 {
  font-family: var(--aa-font-mono);
  font-size: var(--aa-fs-mono);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--aa-accent-bright);
  margin: 0 0 var(--aa-space-md);
}

.site-footer__col a {
  display: block;
  font-family: var(--aa-font-display);
  font-size: 0.95rem;
  color: var(--aa-ink-muted);
  text-decoration: none;
  padding: var(--aa-space-xs) 0;
  transition: color var(--aa-transition);
}

.site-footer__col a:hover,
.site-footer__col a:focus-visible {
  color: var(--aa-accent-bright);
  outline: none;
}

.site-footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: var(--aa-space-lg);
  font-family: var(--aa-font-mono);
  font-size: var(--aa-fs-mono);
  color: var(--aa-ink-dim);
  flex-wrap: wrap;
  gap: var(--aa-space-md);
}

.site-footer__bottom a {
  color: var(--aa-ink-dim);
  text-decoration: none;
  margin: 0 var(--aa-space-xs);
  transition: color var(--aa-transition);
}

.site-footer__bottom a:hover { color: var(--aa-accent-bright); }


/* ───────────────────────────────────────────────────────────────
   7. NEWSLETTER SIGNUP BAND (FOOTER)
   ─────────────────────────────────────────────────────────────── */

#R_FOOTER_SUBSCRIBE,
.newsletter-band {
  background: var(--aa-bg-elevated);
  padding: var(--aa-space-2xl) 0;
  margin-top: var(--aa-space-3xl);
  border-top: 1px solid var(--aa-rule);
  border-bottom: 1px solid var(--aa-rule);
}

.newsletter-band:empty {
  display: none !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  height: 0 !important;
}

.newsletter-band:not(:has(*)) {
  display: none !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  height: 0 !important;
}

.newsletter-band__inner {
  max-width: var(--aa-container-narrow);
  margin: 0 auto;
  padding: 0 var(--aa-space-lg);
  text-align: center;
}

.newsletter-band__headline {
  font-family: var(--aa-font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 1.6rem;
  color: var(--aa-ink);
  margin-bottom: var(--aa-space-md);
  line-height: 1.3;
}

.newsletter-band__consent {
  font-family: var(--aa-font-body);
  font-size: 0.85rem;
  color: var(--aa-ink-muted);
  line-height: 1.5;
  margin-bottom: var(--aa-space-lg);
}

.newsletter-band__form {
  display: flex;
  gap: var(--aa-space-sm);
  max-width: 460px;
  margin: 0 auto;
}

.newsletter-band__form input[type="email"] {
  flex: 1;
  padding: 12px 16px;
  border: 1px solid var(--aa-rule);
  background: var(--aa-bg);
  color: var(--aa-ink);
  font-family: var(--aa-font-body);
  font-size: 1rem;
  border-radius: var(--aa-radius);
  transition: border-color var(--aa-transition);
}

.newsletter-band__form input[type="email"]:focus {
  border-color: var(--aa-accent-bright);
  outline: none;
}

.newsletter-band__form button {
  padding: 12px 24px;
  border: none;
  background: var(--aa-accent);
  color: white;
  font-family: var(--aa-font-mono);
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  cursor: pointer;
  border-radius: var(--aa-radius);
  transition: background var(--aa-transition);
}

.newsletter-band__form button:hover { background: var(--aa-accent-bright); }


/* ───────────────────────────────────────────────────────────────
   8. HONEYPOT FIELD (anti-spam)
   ─────────────────────────────────────────────────────────────── */

.visually-hidden-honeypot {
  position: absolute !important;
  left: -10000px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}


/* ───────────────────────────────────────────────────────────────
   9. PAGE HERO (used on Episodes, About, Contact)
   ─────────────────────────────────────────────────────────────── */

.page-hero {
  padding: var(--aa-space-3xl) 0 var(--aa-space-2xl);
  text-align: left;
  max-width: var(--aa-container-narrow);
}

.page-hero__eyebrow {
  font-family: var(--aa-font-mono);
  font-size: var(--aa-fs-mono);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--aa-accent);
  margin-bottom: var(--aa-space-md);
}

.page-hero__title {
  font-family: var(--aa-font-display);
  font-weight: 400;
  font-size: var(--aa-fs-h1);
  line-height: 1;
  letter-spacing: -0.015em;
  color: var(--aa-ink);
  margin: 0 0 var(--aa-space-md);
}

.page-hero__title em {
  font-style: italic;
  color: var(--aa-accent-bright);
  font-weight: 400;
}

.page-hero__deck {
  font-family: var(--aa-font-display);
  font-style: italic;
  font-weight: 300;
  font-size: var(--aa-fs-deck);
  color: var(--aa-ink-muted);
  line-height: 1.5;
  max-width: 580px;
}


/* ───────────────────────────────────────────────────────────────
   10. HOME HERO
   ─────────────────────────────────────────────────────────────── */

.home-hero {
  background: linear-gradient(135deg, #1B3A5C 0%, #0E2138 100%);
  color: #FFFFFF;
  text-align: center;
  padding: var(--aa-space-3xl) var(--aa-space-lg);
  position: relative;
  overflow: hidden;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

.home-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(127, 179, 224, 0.15) 0%, transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(127, 179, 224, 0.10) 0%, transparent 40%);
  pointer-events: none;
}

.home-hero__inner {
  max-width: var(--aa-container-narrow);
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.home-hero__mark {
  width: 80px;
  height: 80px;
  margin: 0 auto var(--aa-space-lg);
  display: block;
  color: #FFFFFF;
}

.home-hero__wordmark {
  font-family: var(--aa-font-display);
  font-weight: 400;
  font-size: var(--aa-fs-display);
  line-height: 1;
  letter-spacing: -0.015em;
  color: #FFFFFF;
  margin: 0 0 var(--aa-space-sm);
}

.home-hero__wordmark em {
  font-style: italic;
  color: #7FB3E0;
}

.home-hero__tagline {
  font-family: var(--aa-font-mono);
  font-size: 0.85rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: #7FB3E0;
  margin: 0 0 var(--aa-space-lg);
}

.home-hero__intro {
  font-family: var(--aa-font-body);
  font-style: normal;
  font-size: var(--aa-fs-deck);
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.55;
  max-width: 560px;
  margin: 0 auto var(--aa-space-xl);
}

.home-hero__cta {
  display: inline-block;
  background: #4A8FCB;
  color: #FFFFFF;
  font-family: var(--aa-font-body);
  font-size: 1rem;
  font-weight: 600;
  padding: var(--aa-space-md) var(--aa-space-xl);
  border-radius: var(--aa-radius-lg);
  text-decoration: none;
  transition: background var(--aa-transition), transform var(--aa-transition);
}

.home-hero__cta:hover,
.home-hero__cta:focus-visible {
  background: #7FB3E0;
  color: #0E2138;
  text-decoration: none;
  outline: none;
}

.home-hero__cta:active {
  transform: translateY(1px);
}

.home-hero__rule {
  width: 100px;
  height: 2px;
  background: rgba(127, 179, 224, 0.4);
  margin: var(--aa-space-md) auto;
}


/* ───────────────────────────────────────────────────────────────
   12. RECENT EPISODES (CARDS GRID — used on home)
   ─────────────────────────────────────────────────────────────── */

.recent-eps {
  max-width: var(--aa-container);
  margin: 0 auto var(--aa-space-2xl);
  padding: var(--aa-space-2xl) var(--aa-space-lg) 0;
}

.recent-eps__title {
  font-family: var(--aa-font-display);
  font-weight: 400;
  font-size: 2rem;
  line-height: 1.2;
  margin: 0 0 var(--aa-space-xl);
  color: var(--aa-ink);
}

.ep-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 420px));
  gap: var(--aa-space-lg);
  justify-content: center;
}

.ep-card {
  background: var(--aa-bg-elevated);
  border: 1px solid var(--aa-rule-soft);
  border-radius: var(--aa-radius-lg);
  overflow: hidden;
  color: var(--aa-ink);
  transition: transform var(--aa-transition),
              border-color var(--aa-transition),
              box-shadow var(--aa-transition);
  display: flex;
  flex-direction: column;
  height: 100%;
}

.ep-card:hover {
  transform: translateY(-2px);
  border-color: var(--aa-accent-bright);
  box-shadow: var(--aa-shadow-elevated);
}

.ep-card__video {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #000;
  overflow: hidden;
}

.ep-card__video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.ep-card__body {
  padding: var(--aa-space-md) var(--aa-space-md) var(--aa-space-lg);
  flex: 1;
  display: flex;
  flex-direction: column;
}

.ep-card__meta {
  font-family: var(--aa-font-mono);
  font-size: var(--aa-fs-mono);
  letter-spacing: 0.05em;
  color: var(--aa-ink-dim);
  margin-bottom: var(--aa-space-sm);
  display: flex;
  flex-wrap: wrap;
  gap: var(--aa-space-md);
}

.ep-card__heading {
  font-family: var(--aa-font-display);
  font-weight: 400;
  font-size: 1.2rem;
  line-height: 1.25;
  margin: 0 0 var(--aa-space-sm);
}

.ep-card__heading a {
  color: var(--aa-ink);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--aa-transition);
}

.ep-card__heading a:hover {
  border-bottom-color: var(--aa-accent-bright);
}

.ep-card__excerpt {
  font-family: var(--aa-font-display);
  font-style: italic;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--aa-ink-muted);
  margin: 0 0 var(--aa-space-md);
  flex: 1;
}

.ep-card__footer {
  margin-top: auto;
  padding-top: var(--aa-space-md);
  border-top: 1px solid var(--aa-rule-soft);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--aa-space-md);
}

.ep-card__badge {
  display: inline-block;
  background: var(--aa-accent-bright);
  color: #FFFFFF;
  font-family: var(--aa-font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: var(--aa-radius-sm);
}

.ep-card__cta {
  font-family: var(--aa-font-body);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--aa-accent-bright);
  font-family: var(--aa-font-mono);
  letter-spacing: 0.05em;
}

.home-see-all {
  display: inline-block;
  margin-top: var(--aa-space-lg);
  font-family: var(--aa-font-mono);
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  color: var(--aa-accent-bright);
  text-decoration: none;
  padding: var(--aa-space-sm) 0;
  border-bottom: 1px solid var(--aa-rule);
  transition: color var(--aa-transition), border-color var(--aa-transition);
}

.home-see-all:hover {
  color: var(--aa-ink);
  border-bottom-color: var(--aa-accent-bright);
}


/* ───────────────────────────────────────────────────────────────
   20. BUTTONS
   ─────────────────────────────────────────────────────────────── */

.btn-primary, .btn-secondary {
  display: inline-block;
  padding: 12px 28px;
  font-family: var(--aa-font-mono);
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--aa-radius);
  cursor: pointer;
  transition: background var(--aa-transition), color var(--aa-transition), border-color var(--aa-transition);
  border: 1px solid transparent;
}

.btn-primary {
  background: var(--aa-accent);
  color: white;
}

.btn-primary:hover {
  background: var(--aa-accent-bright);
  color: white;
}

.btn-secondary {
  background: transparent;
  color: var(--aa-ink);
  border-color: var(--aa-rule);
}

.btn-secondary:hover {
  border-color: var(--aa-accent-bright);
  color: var(--aa-accent-bright);
}


/* ───────────────────────────────────────────────────────────────
   21. UTILITY PAGES (PRIVACY, TERMS, SUBSCRIBE CONFIRM)
   ─────────────────────────────────────────────────────────────── */

.utility-page {
  max-width: var(--aa-container-narrow);
  margin: 0 auto;
  padding: var(--aa-space-3xl) 0 var(--aa-space-2xl);
  font-family: var(--aa-font-display);
  font-size: var(--aa-fs-lead);
  line-height: 1.7;
  color: var(--aa-ink-muted);
}

.utility-page h1 {
  font-family: var(--aa-font-display);
  font-weight: 400;
  font-size: var(--aa-fs-h1);
  color: var(--aa-ink);
  margin: 0 0 var(--aa-space-md);
}

.utility-page h2 {
  font-family: var(--aa-font-display);
  font-weight: 500;
  font-size: var(--aa-fs-h3);
  color: var(--aa-ink);
  margin: var(--aa-space-xl) 0 var(--aa-space-md);
}

.utility-page p { margin: 0 0 var(--aa-space-md); }


/* ───────────────────────────────────────────────────────────────
   22. ICONS — bridge for FontAwesome 6 sizing
   ─────────────────────────────────────────────────────────────── */

.fa6 {
  display: inline-block;
  vertical-align: middle;
  line-height: 1;
}

.site-header__nav .fa6,
.site-footer__col .fa6 {
  font-size: 0.95em;
  margin-right: var(--aa-space-xs);
}


/* ───────────────────────────────────────────────────────────────
   23. ARTICLE CARDS
   ─────────────────────────────────────────────────────────────── */

.ar-card {
  background: var(--aa-bg-elevated);
  border: 1px solid var(--aa-rule-soft);
  border-radius: var(--aa-radius-lg);
  overflow: hidden;
  text-decoration: none;
  color: var(--aa-ink);
  transition: transform var(--aa-transition),
              border-color var(--aa-transition),
              box-shadow var(--aa-transition);
  height: 100%;
  display: flex;
  flex-direction: column;
}

.ar-card:hover {
  transform: translateY(-2px);
  border-color: var(--aa-accent-bright);
  box-shadow: var(--aa-shadow-elevated);
}

.ar-card__thumb {
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, #5A3A7A 0%, #3A2454 100%);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--aa-font-display);
  font-size: 1.4rem;
  line-height: 1.25;
  padding: var(--aa-space-lg);
  text-align: center;
  overflow: hidden;
}

.ar-card__body {
  padding: var(--aa-space-md) var(--aa-space-md) var(--aa-space-lg);
  flex: 1;
  display: flex;
  flex-direction: column;
}

.ar-card__meta {
  font-family: var(--aa-font-mono);
  font-size: var(--aa-fs-mono);
  letter-spacing: 0.05em;
  color: var(--aa-ink-dim);
  margin-bottom: var(--aa-space-sm);
  display: flex;
  flex-wrap: wrap;
  gap: var(--aa-space-md);
}

.ar-card__title {
  font-family: var(--aa-font-display);
  font-weight: 400;
  font-size: 1.2rem;
  line-height: 1.25;
  margin: 0 0 var(--aa-space-sm);
  color: var(--aa-ink);
}

.ar-card__excerpt {
  font-family: var(--aa-font-display);
  font-style: italic;
  font-size: 0.95rem;
  color: var(--aa-ink-muted);
  line-height: 1.5;
  margin: 0 0 var(--aa-space-md);
  flex: 1;
}

.ar-card__footer {
  margin-top: auto;
  padding-top: var(--aa-space-md);
  border-top: 1px solid var(--aa-rule-soft);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--aa-space-md);
  font-family: var(--aa-font-mono);
  font-size: var(--aa-fs-mono);
  color: var(--aa-ink-dim);
}


/* ───────────────────────────────────────────────────────────────
   24. TUTORIAL CARDS
   ─────────────────────────────────────────────────────────────── */

.tut-card {
  background: var(--aa-bg-elevated);
  border: 1px solid var(--aa-rule-soft);
  border-radius: var(--aa-radius-lg);
  overflow: hidden;
  text-decoration: none;
  color: var(--aa-ink);
  transition: transform var(--aa-transition),
              border-color var(--aa-transition),
              box-shadow var(--aa-transition);
  height: 100%;
  display: flex;
  flex-direction: column;
}

.tut-card:hover {
  transform: translateY(-2px);
  border-color: var(--aa-accent-bright);
  box-shadow: var(--aa-shadow-elevated);
}

.tut-card__thumb {
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, #1F4D5C 0%, #0E2138 100%);
  color: #E8EEF5;
  font-family: var(--aa-font-mono);
  font-size: 0.8rem;
  line-height: 1.55;
  padding: var(--aa-space-md);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  overflow: hidden;
}

.tut-card__thumb-num {
  font-family: var(--aa-font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--aa-sky-bright);
  margin-bottom: var(--aa-space-sm);
}

.tut-card__thumb-code {
  color: #E8EEF5;
  font-size: 0.78rem;
  line-height: 1.5;
  white-space: pre-wrap;
  flex: 1;
  overflow: hidden;
}

.tut-card__thumb-code .kw  { color: #F58FA0; }
.tut-card__thumb-code .str { color: #8FD9A8; }
.tut-card__thumb-code .com { color: #8FA0B5; font-style: italic; }

.tut-card__body {
  padding: var(--aa-space-md) var(--aa-space-md) var(--aa-space-lg);
  flex: 1;
  display: flex;
  flex-direction: column;
}

.tut-card__meta {
  font-family: var(--aa-font-mono);
  font-size: var(--aa-fs-mono);
  letter-spacing: 0.05em;
  color: var(--aa-ink-dim);
  margin-bottom: var(--aa-space-sm);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--aa-space-md);
}

.tut-card__title {
  font-family: var(--aa-font-display);
  font-weight: 400;
  font-size: 1.2rem;
  line-height: 1.25;
  margin: 0 0 var(--aa-space-sm);
  color: var(--aa-ink);
}

.tut-card__excerpt {
  font-family: var(--aa-font-display);
  font-style: italic;
  font-size: 0.95rem;
  color: var(--aa-ink-muted);
  line-height: 1.5;
  margin: 0 0 var(--aa-space-md);
  flex: 1;
}

.tut-card__footer {
  margin-top: auto;
  padding-top: var(--aa-space-md);
  border-top: 1px solid var(--aa-rule-soft);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--aa-space-md);
  font-family: var(--aa-font-mono);
  font-size: var(--aa-fs-mono);
  color: var(--aa-ink-dim);
}

.tut-card__difficulty {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  letter-spacing: normal;
}

.tut-card__difficulty .dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.3;
}

.tut-card__difficulty .dot--on { opacity: 1; }


/* ───────────────────────────────────────────────────────────────
   25. AUTHOR BYLINE (HYBRID — PHOTO OR INITIALS FALLBACK)
   ─────────────────────────────────────────────────────────────── */

.byline {
  display: inline-flex;
  align-items: center;
  gap: var(--aa-space-sm);
  font-family: var(--aa-font-body);
}

.byline__avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--aa-accent);
  color: #FFFFFF;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--aa-font-display);
  font-size: 0.8rem;
  font-weight: 600;
  flex-shrink: 0;
  overflow: hidden;
  line-height: 1;
}

.byline__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.byline__name {
  font-family: var(--aa-font-display);
  font-size: 0.9rem;
  color: var(--aa-ink-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.byline--lg .byline__avatar {
  width: 48px;
  height: 48px;
  font-size: 1.1rem;
}

.byline--lg .byline__name {
  font-size: 1.05rem;
}


/* ───────────────────────────────────────────────────────────────
   26. FILTER CHIPS — PILL-STYLE CATEGORY NAVIGATION
   Optional component for category links. Currently not used by
   filter components (those are in Section 27). Useful for a topic
   hub on the home page or other navigational chip lists.
   ─────────────────────────────────────────────────────────────── */

.filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--aa-space-sm);
  margin: 0 0 var(--aa-space-xl);
  max-width: var(--aa-container);
  padding: 0 var(--aa-space-lg);
}

.filter-chips__chip {
  font-family: var(--aa-font-body);
  font-size: 0.9rem;
  padding: var(--aa-space-sm) var(--aa-space-md);
  background: var(--aa-bg-elevated);
  border: 1px solid var(--aa-rule);
  color: var(--aa-ink-muted);
  border-radius: 999px;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--aa-transition),
              border-color var(--aa-transition),
              color var(--aa-transition);
}

.filter-chips__chip:hover,
.filter-chips__chip:focus-visible {
  border-color: var(--aa-accent-bright);
  color: var(--aa-accent-bright);
  outline: none;
}

.filter-chips__chip.is-active {
  background: var(--aa-accent);
  border-color: var(--aa-accent);
  color: #FFFFFF;
}


/* ═══════════════════════════════════════════════════════════════
   27. AVIATION_AFFAIR_SIDEBAR TEMPLATE — LAYOUT + COMPONENT STYLES
   ═══════════════════════════════════════════════════════════════
   Used by pages with the AVIATION_AFFAIR_SIDEBAR template
   (currently Page 102 — Articles Test with Faceted Search).

   The template uses Universal Theme's "Left and Right Side Columns"
   structure with these positions:
     #REGION_POSITION_02#  → t-Body-side       (left sidebar — filters)
     #REGION_POSITION_03#  → t-Body-actions    (right sidebar — related)
     #BODY#                → t-Body-contentInner (main content)

   IMPORTANT: Section 3 above zeroes out .t-Body-main / .t-Body-content
   for single-column editorial pages (AVIATION_AFFAIR template). The
   rules below RE-ENABLE the flex side-by-side layout, but ONLY for
   pages with a sidebar — detected via the :has(#t_Body_side) selector.
   This means single-column pages stay single-column; sidebar pages
   get the proper layout.

   Sub-sections:
     27a. Layout (flex restoration for sidebar pages)
     27b. Faceted Search styling (used inside left sidebar)
     27c. Smart Filters styling (used in main content area, alternative)
     27d. Mobile stacking
   ═══════════════════════════════════════════════════════════════ */


/* ───────────────────────────────────────────────────────────────
   27a. LAYOUT — restore flex for pages with a sidebar
   ─────────────────────────────────────────────────────────────── */

/* Make .t-Body itself the outer flex container so .t-Body-main and
   .t-Body-actions (right sidebar) sit side by side as siblings.
   Use !important throughout because UT has many .t-Body rules with
   high specificity that we need to override.
   align-items: stretch ensures all 3 columns are the same height. */
.t-Body:has(#t_Body_side) {
  display: flex !important;
  align-items: stretch !important;     /* all columns same height */
  max-width: 1600px !important;
  margin: 0 auto !important;
  padding: var(--aa-space-xl) var(--aa-space-sm) !important;
  gap: var(--aa-space-sm) !important;
  position: relative !important;
}

/* Inside .t-Body, .t-Body-main is a nested flex row containing the
   left sidebar and main content. */
.t-Body:has(#t_Body_side) .t-Body-main {
  display: flex !important;
  align-items: stretch !important;     /* left sidebar matches main content height */
  flex: 1 !important;
  min-width: 0 !important;
  gap: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  max-width: none !important;
}

.t-Body:has(#t_Body_side) .t-Body-content {
  flex: 1 !important;
  min-width: 0 !important;
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
  margin-left: 8px !important;
  background: transparent !important;
}

/* Zero out inner content wrapper that UT may add padding to */
.t-Body:has(#t_Body_side) .t-Body-contentInner,
.t-Body:has(#t_Body_side) .t-Body-mainContent {
  padding: 0 !important;
  margin: 0 !important;
  max-width: none !important;
}

/* LEFT sidebar — filters area
   Use !important to beat Universal Theme's own t-Body-side rules.
   No align-self or position:sticky — let it stretch to full container height. */
#t_Body_side,
.t-Body-side {
  flex-shrink: 0 !important;
  width: 300px !important;
  min-width: 300px !important;
  max-width: 300px !important;
  background: var(--aa-cream-warm) !important;
  border-radius: var(--aa-radius-lg) !important;
  padding: var(--aa-space-lg) !important;
  /* Override any UT positioning that pushes sidebar off-screen */
  left: auto !important;
  transform: none !important;
}

/* RIGHT sidebar — related content area
   Always visible — toggle button removed from template HTML. */
.t-Body-actions,
#t_Body_actions {
  flex-shrink: 0 !important;
  width: 300px !important;
  min-width: 300px !important;
  max-width: 300px !important;
  background: transparent !important;
  padding: 0 !important;
  /* Override any UT positioning */
  right: auto !important;
  transform: none !important;
}

/* Right sidebar inner content — match left sidebar styling exactly */
.t-Body-actionsContent {
  background: var(--aa-cream-warm) !important;
  border-radius: var(--aa-radius-lg) !important;
  padding: var(--aa-space-lg) !important;
  height: 100%;
  box-sizing: border-box;
}

/* Override any UT region styling inside the right sidebar to match left */
.t-Body-actions .t-Region,
.t-Body-actions .t-Region-bodyWrap {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 0 !important;
}

/* Region headers in right sidebar — apply editorial eyebrow style */
.t-Body-actions .t-Region-headerItems h1,
.t-Body-actions .t-Region-headerItems h2,
.t-Body-actions .t-Region-headerItems h3,
.t-Body-actions .t-Region-title {
  font-family: var(--aa-font-mono) !important;
  font-size: var(--aa-fs-eyebrow) !important;
  font-weight: 700 !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  color: var(--aa-accent-bright) !important;
  margin: 0 0 var(--aa-space-sm) !important;
  padding-bottom: var(--aa-space-xs) !important;
  border-bottom: 1px solid var(--aa-rule-soft) !important;
}

/* Region body in right sidebar — same body font as left */
.t-Body-actions .t-Region-body,
.t-Body-actions .t-Region-bodyWrap {
  font-family: var(--aa-font-body) !important;
  color: var(--aa-ink) !important;
}

/* Force consistent border-radius on the wrapper itself */
.t-Body-actions {
  border-radius: var(--aa-radius-lg) !important;
  overflow: hidden !important;
}

/* Hide the right-sidebar toggle button (we removed it from template HTML
   but Universal Theme CSS may still reference it) */
.t-Body-actionsToggle,
#t_Button_rightControlButton {
  display: none !important;
}

/* Hide empty sidebars — bulletproof approach
   When there's no region in REGION_POSITION_03, the .t-Body-actions
   container still renders. To prevent it stealing 300px of body width,
   we collapse it to zero width when its content is empty. */
.t-Body-actionsContent:empty,
#t_Body_side:empty {
  display: none;
}

/* If right sidebar has no region content, collapse the wrapper entirely */
.t-Body-actions:not(:has(.t-Body-actionsContent > *)) {
  display: none !important;
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}


/* ───────────────────────────────────────────────────────────────
   27b. FACETED SEARCH inside the left sidebar — editorial brand
   ─────────────────────────────────────────────────────────────── */

#t_Body_side .t-FacetedSearch,
#t_Body_side .t-Region--facetedSearch {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
}

/* Each facet group title (e.g., "Category", "Author", "Year") */
#t_Body_side .t-FacetedSearch-facetTitle,
#t_Body_side .t-Region-headerItems h2 {
  font-family: var(--aa-font-mono);
  font-size: var(--aa-fs-eyebrow);
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--aa-accent-bright);
  margin: 0 0 var(--aa-space-sm);
  padding-bottom: var(--aa-space-xs);
  border-bottom: 1px solid var(--aa-rule-soft);
}

/* Facet groups separated with vertical spacing */
#t_Body_side .t-FacetedSearch-facet {
  margin-bottom: var(--aa-space-lg);
  padding-bottom: var(--aa-space-md);
  border-bottom: 1px solid var(--aa-rule-soft);
}

#t_Body_side .t-FacetedSearch-facet:last-child {
  border-bottom: 0;
}

/* Checkbox labels */
#t_Body_side .t-FacetedSearch-facet label,
#t_Body_side .t-FacetedSearch-itemLabel {
  font-family: var(--aa-font-body);
  font-size: 0.9rem;
  color: var(--aa-ink);
  cursor: pointer;
  padding: 4px 0;
  display: flex;
  align-items: center;
  gap: var(--aa-space-xs);
}

#t_Body_side .t-FacetedSearch-facet label:hover {
  color: var(--aa-accent-bright);
}

/* Item count badge after each option (e.g., "Accidents (4)") */
#t_Body_side .t-FacetedSearch-count,
#t_Body_side .t-FacetedSearch-itemCount {
  font-family: var(--aa-font-mono);
  font-size: var(--aa-fs-mono);
  color: var(--aa-ink-dim);
  margin-left: auto;
}

/* Search input field (the free-text search facet) */
#t_Body_side .t-FacetedSearch-search input,
#t_Body_side input[type="search"],
#t_Body_side input[type="text"] {
  width: 100%;
  padding: var(--aa-space-sm) var(--aa-space-md);
  border: 1px solid var(--aa-rule);
  border-radius: var(--aa-radius);
  background: var(--aa-bg-elevated);
  color: var(--aa-ink);
  font-family: var(--aa-font-body);
  font-size: 0.9rem;
  transition: border-color var(--aa-transition);
}

#t_Body_side input[type="search"]:focus,
#t_Body_side input[type="text"]:focus {
  border-color: var(--aa-accent-bright);
  outline: none;
}

/* "Clear all filters" link */
#t_Body_side .t-FacetedSearch-clearAll,
#t_Body_side .a-FacetedSearch-clearChartAllLink {
  font-family: var(--aa-font-mono);
  font-size: var(--aa-fs-mono);
  letter-spacing: 0.05em;
  color: var(--aa-accent-bright);
  text-decoration: none;
  display: inline-block;
  margin-top: var(--aa-space-sm);
}

#t_Body_side .t-FacetedSearch-clearAll:hover {
  text-decoration: underline;
}


/* ───────────────────────────────────────────────────────────────
   27c. SMART FILTERS — alternative filter UI in main content area
   For Page 100 (Articles index) — pill bar above the cards grid.
   Renders horizontally; no sidebar needed.
   ─────────────────────────────────────────────────────────────── */

.t-Region--smartFilters,
.t-SmartFilters {
  background: var(--aa-cream-warm);
  border-radius: var(--aa-radius-lg);
  padding: var(--aa-space-md);
  margin-bottom: var(--aa-space-lg);
}

/* Filter pills */
.t-SmartFilters-button {
  font-family: var(--aa-font-body);
  font-size: 0.88rem;
  padding: var(--aa-space-xs) var(--aa-space-md);
  background: var(--aa-bg-elevated);
  border: 1px solid var(--aa-rule);
  border-radius: 999px;
  color: var(--aa-ink);
  transition: border-color var(--aa-transition),
              background var(--aa-transition),
              color var(--aa-transition);
}

.t-SmartFilters-button:hover {
  border-color: var(--aa-accent-bright);
  color: var(--aa-accent-bright);
}

.t-SmartFilters-button.is-active,
.t-SmartFilters-button[aria-expanded="true"] {
  background: var(--aa-accent);
  color: #FFFFFF;
  border-color: var(--aa-accent);
}

/* Free-text search input */
.t-SmartFilters-search input {
  border-radius: 999px;
  border-color: var(--aa-rule);
  font-family: var(--aa-font-body);
  padding: var(--aa-space-sm) var(--aa-space-md);
}

.t-SmartFilters-search input:focus {
  border-color: var(--aa-accent-bright);
  outline: none;
}

/* Active filter chips (shown below the bar after selecting) */
.t-SmartFilters-chip,
.a-FacetedSearch-tag {
  background: var(--aa-accent-bright);
  color: #FFFFFF;
  border-radius: 999px;
  padding: 2px 12px;
  font-family: var(--aa-font-body);
  font-size: 0.82rem;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.t-SmartFilters-chip-remove {
  color: #FFFFFF;
  opacity: 0.8;
  cursor: pointer;
}

/* Result count line */
.t-SmartFilters-resultCount,
.a-FacetedSearch-resultCount {
  font-family: var(--aa-font-mono);
  font-size: var(--aa-fs-mono);
  color: var(--aa-ink-dim);
  margin: 0 0 var(--aa-space-md);
}


/* ───────────────────────────────────────────────────────────────
   27d. MOBILE STACKING — sidebars become full-width above content
   ─────────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
  .t-Body:has(#t_Body_side) {
    flex-direction: column;
    align-items: stretch !important;
    padding: var(--aa-space-lg) var(--aa-space-md) !important;
    gap: var(--aa-space-md) !important;
  }

  .t-Body:has(#t_Body_side) .t-Body-main {
    flex-direction: column;
    gap: var(--aa-space-md) !important;
  }

  #t_Body_side,
  .t-Body-side {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    order: -1;  /* sidebar appears ABOVE content on mobile */
  }

  .t-Body-actions,
  #t_Body_actions {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    order: 1;
  }
}


/* ───────────────────────────────────────────────────────────────
   28. RESPONSIVE — collapse 3-up grids and reduce thumbs on mobile
   ─────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
  .ar-card__thumb,
  .tut-card__thumb {
    font-size: 1.15rem;
  }

  .ar-card__title,
  .tut-card__title {
    font-size: 1.1rem;
  }

  .filter-chips {
    padding: 0 var(--aa-space-md);
  }
}


/* Faceted Search input — make room for the search icon on the left */
.t-Body-actions .t-Facets-searchInput,
.t-Body-actions input[type="search"],
#t_Body_side .t-Facets-searchInput,
#t_Body_side input[type="search"] {
  padding-left: 32px !important;
}