:root {
  --c-brand: #2563eb;
  --c-brand-dark: #1d4ed8;
  --c-brand-bright: #3b82f6;
  --c-accent-red: #ea4335;
  --c-accent-yellow: #fbbc04;
  --c-accent-green: #34a853;
  --c-accent-blue: #4285f4;
  --c-cream: #ffffff;
  --c-surface: #f8fafc;
  --c-paper: #fafafa;
  --c-night: #0f172a;
  --c-slate: #1e293b;
  --c-text: #0f172a;
  --c-text-secondary: #475569;
  --c-text-muted: #64748b;
  --c-border: #e2e8f0;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-pill: 9999px;
  --font-display: 'Source Serif 4 Variable', 'Source Serif 4', Georgia, serif;
  --font-body: 'Inter Variable', 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'Courier New', monospace;
}
html { font-family: var(--font-body, system-ui, sans-serif); -webkit-font-smoothing: antialiased; background-color: var(--c-cream, #f9f9ff); color: var(--c-text, #0d0e1a); }
body { background-color: var(--c-cream, #f9f9ff); }

/* The wordmark segments (see wordmarkSegments above) are colored per-letter
   text on both a white header bar and a dark (#0f172a) footer bar. No single
   hex clears the normal-text 4.5:1 AA floor against both extremes at once,
   so this promotes the wordmark to WCAG "large text" (700 weight + the
   existing >=20px size clears the 14pt-bold threshold), which only needs
   3:1 -- the colors picked in wordmarkSegments clear that against both. The
   shared logo-mark CSS ships font-weight: 600, and axe/WCAG only treat >=700
   as bold, so 600 does not qualify on its own. */
.aosf-logo-mark span, .aosf-footer-logo-mark span { font-weight: 700; }
h1 { font-family: var(--font-display); letter-spacing: -0.02em; }
h1 em, h1 i { font-style: italic; color: var(--c-brand); font-weight: inherit; }
article > header > h1 {
  font-size: clamp(2rem, 5vw, 3.25rem);
  font-weight: 700;
  line-height: 1.1;
  color: var(--c-text);
}
/* Article body H2/H3 inside .prose (Tailwind Typography) inherit the
   body font (Inter) by default — that broke font unity with the rest of
   the site. Force the same display serif used by the logo + hero so every
   heading on every page reads in Source Serif 4. Italic <em>/<i> picks
   up the brand blue accent treatment (same idiom as global h1). */
.prose h2, .prose h3 {
  font-family: var(--font-display);
  letter-spacing: -0.015em;
  font-weight: 700;
  color: var(--c-text);
}
.prose h2 em, .prose h2 i,
.prose h3 em, .prose h3 i {
  font-style: italic;
  color: var(--c-brand);
  font-weight: inherit;
}

/* Mobile footer: the 3rd column ("Site") was orphaned in the 2-col grid, leaving
   a large empty cell to its right. Span it full width and lay its links out
   horizontally on a single line. */
@media (max-width: 639px) {
  .aosf-footer-inner > .aosf-footer-col:last-child { grid-column: 1 / -1; }
  .aosf-footer-inner > .aosf-footer-col:last-child .aosf-footer-links {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.55rem 1.75rem;
  }
}
/* Wordmark motion — on a site about motion design, the logo itself should
   move. Three layers: (1) staggered rise-up on every page load so each of
   the four colored segments (Art / of / Style / frame) introduces itself
   in turn; (2) a wave on hover where segments lift in sequence; (3) a
   subtle press feedback. Uses animation-fill-mode: backwards so hover
   transforms apply cleanly after the entrance keyframes finish.
   The entrance used to fade from opacity: 0, which meant axe-core's
   accessibility scan (run right after domcontentloaded, no wait for
   animations) could sample a span mid-fade -- e.g. #188038 blended down to
   a washed-out #9bc8a9 at ~35% opacity -- and flag color-contrast against a
   color nothing ever actually rests at. The color itself was fine; the
   transient blend was not. Motion now comes from transform only, so the
   text is always rendered at its final, checked color. */
.aosf-logo--wordmark .aosf-logo-mark {
  /* Preserve leading/trailing spaces inside inline-block child spans so
     "Art of Styleframe" doesn't render as "ArtofStyleframe". */
  white-space: pre;
}
.aosf-logo--wordmark .aosf-logo-mark > span {
  display: inline-block;
  white-space: pre;
  animation: aosf-wordmark-rise 0.55s cubic-bezier(0.22, 1, 0.36, 1) backwards;
  transition: transform 0.32s cubic-bezier(0.34, 1.56, 0.64, 1);
  will-change: transform;
}
.aosf-logo--wordmark .aosf-logo-mark > span:nth-child(1) { animation-delay: 0ms;   transition-delay: 0ms;   }
.aosf-logo--wordmark .aosf-logo-mark > span:nth-child(2) { animation-delay: 70ms;  transition-delay: 40ms;  }
.aosf-logo--wordmark .aosf-logo-mark > span:nth-child(3) { animation-delay: 140ms; transition-delay: 80ms;  }
.aosf-logo--wordmark .aosf-logo-mark > span:nth-child(4) { animation-delay: 210ms; transition-delay: 120ms; }
.aosf-logo--wordmark:hover .aosf-logo-mark > span {
  transform: translateY(-3px);
}
.aosf-logo--wordmark:active .aosf-logo-mark {
  transform: scale(0.97);
  transition: transform 0.1s ease;
}
@keyframes aosf-wordmark-rise {
  from { transform: translateY(10px); }
  to   { transform: translateY(0);    }
}
@media (prefers-reduced-motion: reduce) {
  .aosf-logo--wordmark .aosf-logo-mark > span,
  .aosf-logo--wordmark:hover .aosf-logo-mark > span,
  .aosf-logo--wordmark:active .aosf-logo-mark {
    animation: none;
    transition: none;
    transform: none;
  }
}

/* (5) Footer link columns: lay the three groups (Browse / More / Site) out
   horizontally on phones instead of a 2-col grid that orphans the third
   group on its own row. Desktop (>=640px) is unchanged. */
@media (max-width: 639px) {
  .aosf-footer-inner { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.75rem 1rem; }
  .aosf-footer-brand { grid-column: 1 / -1; }
  .aosf-footer-heading { font-size: 0.72rem; letter-spacing: 0.08em; margin-bottom: 0.7rem; }
  .aosf-footer-link { font-size: 0.9rem; }
}


      .aosf-skip-link {
        position: absolute;
        left: -9999px;
        top: 0;
        z-index: 9999;
        padding: 0.5rem 1rem;
        background: #000;
        color: #fff;
        font-size: 0.875rem;
        text-decoration: none;
      }
      .aosf-skip-link:focus { left: 0; }
      /* PBN-78: WCAG 2.2 SC 2.3.3 — respect prefers-reduced-motion (covers CWJ + any blog using shared BaseLayout) */
      @media (prefers-reduced-motion: reduce) {
        *, *::before, *::after {
          animation-duration: 0.01ms !important;
          animation-iteration-count: 1 !important;
          transition-duration: 0.01ms !important;
          scroll-behavior: auto !important;
        }
      }


  .aosf-site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--c-cream);
    border-bottom: 1px solid var(--c-border);
    transition: box-shadow 0.25s ease;
  }
  .aosf-site-header.scrolled {
    box-shadow: 0 2px 20px -4px rgba(28, 25, 23, 0.10);
  }
  .aosf-header-inner {
    max-width: 84rem;
    margin: 0 auto;
    padding: 0 1.5rem;
    height: 62px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    overflow: hidden;
  }
  .aosf-header-inner--logo-center {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    justify-content: unset;
  }
  .aosf-header-inner--logo-center .aosf-logo { grid-column: 2; }
  .aosf-header-inner--logo-center .aosf-nav-desktop { grid-column: 3; justify-self: end; }
  .aosf-header-inner--logo-center .aosf-nav-toggle { grid-column: 3; justify-self: end; }
  .aosf-header-inner--nav-centered .aosf-nav-desktop { flex: 1; justify-content: center; }
  .aosf-logo {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    text-decoration: none;
    flex-shrink: 0;
    height: 100%;
  }
  .aosf-logo img { display: block; }
  .aosf-logo-text {
    display: flex;
    flex-direction: column;
    line-height: 1;
    gap: 1px;
  }
  .aosf-logo-top {
    font-family: var(--font-body);
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--c-text-secondary);
  }
  .aosf-logo-bottom {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--c-text);
    letter-spacing: 0.01em;
  }
  /* Wordmark variant — editorial single-line italic display serif */
  .aosf-logo--wordmark { gap: 0; }
  /* ...unless a graphic mark sits in front of it, which needs the normal gap
     back (the wordmark's 0 exists only to keep the segment spans tight). */
  .aosf-logo--with-icon { gap: 0.6rem; }
  .aosf-logo-icon { display: block; flex-shrink: 0; }
  .aosf-logo-mark {
    font-family: var(--font-display);
    font-size: 1.3rem;
    font-weight: 600;
    font-style: italic;
    color: var(--c-text);
    letter-spacing: -0.01em;
    /* line-height 1 clipped descenders ("g", "y") against the header's
       overflow: hidden — 1.5 plus the padding gives the tail room to render. */
    line-height: 1.5;
    padding-bottom: 4px;
    white-space: nowrap;
  }
  @media (max-width: 480px) {
    .aosf-logo-mark { font-size: 1.1rem; }
  }
  /* The desktop nav used to appear at 640px, but a 7-item menu plus the CTA
     needs far more room than that: at 768px the CTA's right edge landed at
     786px, 18px off-screen, and the header clips overflow so it just looked
     cut off. 900px is where the full row fits. min-width: 0 lets the nav
     shrink rather than push the CTA out if a site adds another item. */
  .aosf-nav-desktop {
    display: none;
    align-items: center;
    gap: 0.15rem;
    min-width: 0;
  }
  @media (min-width: 900px) { .aosf-nav-desktop { display: flex; } }
  .aosf-nav-link {
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 500;
    color: var(--c-text-secondary);
    text-decoration: none;
    padding: 0.6rem 1rem;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    /* Only bites when the link carries a nav glyph; label-only links have a
       single child, so there is nothing to space. */
    gap: 7px;
    white-space: nowrap;
    border-radius: 8px;
    transition: color 0.15s, background 0.15s;
  }
  /* Nav glyphs inherit the link's colour — the active item is marked by its
     underline, not by recolouring the icon. */
  .aosf-nav-icon { flex-shrink: 0; }
  .aosf-nav-link:hover {
    color: var(--c-text);
    background: var(--c-surface);
  }
  .aosf-nav-link:focus-visible,
  .aosf-nav-cta:focus-visible {
    outline: 2px solid var(--c-brand, #2563eb);
    outline-offset: 3px;
    border-radius: 8px;
  }
  .aosf-nav-link--active {
    color: var(--c-text);
    font-weight: 600;
    position: relative;
  }
  .aosf-nav-link--active::after {
    content: '';
    position: absolute;
    left: 1rem;
    right: 1rem;
    bottom: 0.35rem;
    height: 2px;
    /* Falls back to the blog's own brand colour, not straight to a hardcoded
       Google blue: only AOSF defines --c-accent-blue, so every other site was
       underlining its active nav item in a colour outside its palette. Same
       chain the mobile nav's active marker already used. */
    background: var(--c-accent-blue, var(--c-brand, #4285f4));
    border-radius: 1px;
  }
  .aosf-nav-cta {
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 600;
    color: #fff;
    background: var(--c-brand-dark);
    text-decoration: none;
    padding: 0.6rem 1.1rem;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    border-radius: 8px;
    margin-left: 0.5rem;
    transition: background 0.15s, transform 0.1s;
  }
  .aosf-nav-cta:hover { background: var(--c-brand); transform: translateY(-1px); }
  .aosf-nav-toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    padding: 12px;
    min-width: 44px;
    min-height: 44px;
    background: none;
    border: none;
    cursor: pointer;
  }
  @media (min-width: 900px) { .aosf-nav-toggle { display: none; } }

  /* bars: classic 3-bar hamburger */
  .aosf-nav-toggle--bars span {
    display: block;
    width: 20px;
    height: 2px;
    background: var(--c-text);
    border-radius: 2px;
    transition: 0.2s;
  }

  /* dots: kebab-style 3 dots */
  .aosf-nav-toggle--dots span {
    display: block;
    width: 5px;
    height: 5px;
    background: var(--c-text);
    border-radius: 50%;
    transition: 0.2s;
  }

  /* cross: 2 bars that rotate to X when open */
  .aosf-nav-toggle--cross { gap: 0; }
  .aosf-nav-toggle--cross span {
    display: block;
    width: 20px;
    height: 2px;
    background: var(--c-text);
    border-radius: 2px;
    transition: transform 0.22s ease, opacity 0.22s ease, margin 0.22s ease;
    margin: 4px 0;
  }
  .aosf-nav-toggle--cross[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
  }
  .aosf-nav-toggle--cross[aria-expanded="true"] span:nth-child(2) {
    transform: translateY(-6px) rotate(-45deg);
  }
  /* Mobile dropdown: right-anchored card, thumb-reachable */
  .aosf-nav-mobile {
    position: absolute;
    top: calc(100% + 8px);
    right: 0.75rem;
    width: clamp(232px, 72vw, 296px);
    max-height: calc(100dvh - 62px - 24px);
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--c-cream, #fdfcf8);
    border: 1px solid var(--c-border);
    border-radius: 14px;
    box-shadow: 0 18px 48px -16px rgba(10, 14, 26, 0.22), 0 4px 12px -6px rgba(10, 14, 26, 0.08);
    padding: 0.5rem;
    z-index: 51;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px) scale(0.97);
    transform-origin: top right;
    transition: opacity 0.18s ease, transform 0.22s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0.22s;
    pointer-events: none;
  }
  .aosf-nav-mobile[data-open] {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    transition: opacity 0.18s ease, transform 0.24s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0s;
    pointer-events: auto;
  }
  @media (min-width: 900px) { .aosf-nav-mobile { display: none; } }
  .aosf-nav-mobile-inner {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .aosf-nav-mobile-link {
    font-family: var(--font-body);
    font-size: 0.975rem;
    font-weight: 500;
    color: var(--c-text);
    text-decoration: none;
    padding: 0.7rem 0.85rem;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 10px;
    position: relative;
    transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
  }
  .aosf-nav-mobile-link:hover,
  .aosf-nav-mobile-link:focus-visible {
    background: var(--c-surface, rgba(10, 14, 26, 0.04));
    color: var(--c-text);
  }
  .aosf-nav-mobile-link:focus-visible {
    /* Brand before blue, as everywhere else — the desktop nav's focus ring
       already used the blog's own colour. */
    outline: 2px solid var(--c-accent-blue, var(--c-brand, #4285f4));
    outline-offset: 2px;
  }
  .aosf-nav-mobile-link:active { transform: scale(0.985); }
  .aosf-nav-mobile-arrow {
    font-size: 0.85rem;
    color: var(--c-text-secondary);
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity 0.18s ease, transform 0.18s ease;
  }
  .aosf-nav-mobile-link:hover .aosf-nav-mobile-arrow,
  .aosf-nav-mobile-link:focus-visible .aosf-nav-mobile-arrow {
    opacity: 1;
    transform: translateX(0);
  }
  .aosf-nav-mobile-link--active {
    color: var(--c-text);
    font-weight: 600;
    background: var(--c-surface, rgba(10, 14, 26, 0.04));
  }
  .aosf-nav-mobile-link--active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 25%;
    bottom: 25%;
    width: 3px;
    border-radius: 2px;
    background: var(--c-accent-blue, var(--c-brand, #4285f4));
  }
  .aosf-nav-mobile-cta {
    font-family: var(--font-body);
    font-size: 0.975rem;
    font-weight: 600;
    color: #fff;
    background: var(--c-brand-dark, var(--c-brand, #1a1a1a));
    text-decoration: none;
    padding: 0.7rem 0.85rem;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 10px;
    margin-top: 6px;
    transition: background 0.15s ease, transform 0.1s ease;
  }
  .aosf-nav-mobile-cta:hover { background: var(--c-brand, var(--c-brand-dark, #1a1a1a)); }
  .aosf-nav-mobile-cta:active { transform: scale(0.985); }

  /* Stagger entry of links when the menu opens */
  .aosf-nav-mobile[data-open] .aosf-nav-mobile-link,
  .aosf-nav-mobile[data-open] .aosf-nav-mobile-cta {
    animation: aosf-navItemIn 0.32s cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: calc(60ms + var(--i, 0) * 35ms);
  }
  @keyframes aosf-navItemIn {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
  }

  .aosf-nav-overlay {
    position: fixed;
    inset: 0;
    background: rgba(10, 14, 26, 0.32);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    z-index: 49;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0s linear 0.2s;
  }
  .aosf-nav-overlay[data-open] {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.2s ease, visibility 0s linear 0s;
  }
  @media (min-width: 900px) { .aosf-nav-overlay { display: none; } }

  @media (prefers-reduced-motion: reduce) {
    .aosf-nav-mobile,
    .aosf-nav-mobile[data-open],
    .aosf-nav-overlay,
    .aosf-nav-overlay[data-open] {
      transition: opacity 0.001s, visibility 0s;
      transform: none;
    }
    .aosf-nav-mobile[data-open] .aosf-nav-mobile-link,
    .aosf-nav-mobile[data-open] .aosf-nav-mobile-cta {
      animation: none;
    }
  }


  .aosf-site-footer {
    background: var(--c-night);
    color: #94a3b8;
    font-family: var(--font-body);
  }
  .aosf-footer-inner {
    max-width: 84rem;
    margin: 0 auto;
    padding: 3rem 1.5rem 2.5rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem 1.5rem;
  }
  .aosf-footer-brand { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 1rem; }
  @media (min-width: 640px) {
    .aosf-footer-inner { grid-template-columns: 2fr 1fr 1fr 1fr; padding: 4rem 1.5rem 3rem; gap: 2.5rem; }
    .aosf-footer-brand { grid-column: auto; }
  }
  .aosf-footer-logo { display: inline-flex; align-items: center; gap: 0.65rem; text-decoration: none; }
  .aosf-footer-logo-icon {
    display: inline-block;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    background-image: url('/favicon.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
  }
  .aosf-footer-logo-name {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
    font-size: 1rem;
    color: #cbd5e1;
  }
  .aosf-footer-logo-name span {
    font-size: 0.875rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #94a3b8;
  }
  .aosf-footer-logo-name strong {
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 700;
    color: #e2e8f0;
  }
  .aosf-footer-logo--wordmark { gap: 0; }
  .aosf-footer-logo--with-icon { gap: 0.65rem; }
  .aosf-footer-logo-img { display: block; flex-shrink: 0; }
  .aosf-footer-logo-mark {
    font-family: var(--font-display);
    font-size: 1.3rem;
    font-weight: 600;
    font-style: italic;
    letter-spacing: -0.01em;
    /* Same descender fix as the header wordmark. */
    line-height: 1.5;
    padding-bottom: 4px;
    white-space: nowrap;
    color: #e2e8f0;
  }
  @media (max-width: 480px) {
    .aosf-footer-logo-mark { font-size: 1.1rem; }
  }
  .aosf-footer-tagline { font-size: 1rem; line-height: 1.65; color: #94a3b8; max-width: 30ch; }
  .aosf-footer-note { font-size: 0.875rem; line-height: 1.5; color: #94a3b8; max-width: 32ch; }
  .aosf-footer-social { list-style: none; padding: 0; margin: 1rem 0 0; display: flex; gap: 0.75rem; align-items: center; }
  .aosf-footer-social-link { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border-radius: 0.5rem; color: #94a3b8; background: rgba(148,163,184,0.1); transition: color 0.2s, background 0.2s; }
  .aosf-footer-social-link:hover { color: #fff; background: rgba(148,163,184,0.25); }
  .aosf-footer-link:focus-visible,
  .aosf-footer-policy-link:focus-visible,
  .aosf-footer-social-link:focus-visible { outline: 2px solid #93b4ff; outline-offset: 3px; border-radius: 4px; }
  .aosf-footer-heading {
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #e2e8f0;
    margin-bottom: 1rem;
  }
  .aosf-footer-links { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.55rem; }
  .aosf-footer-link { font-size: 1rem; color: #cbd5e1; text-decoration: none; transition: color 0.15s; }
  .aosf-footer-link:hover { color: var(--c-brand); }
  .aosf-footer-bottom {
    border-top: 1px solid #1a2234;
    max-width: 84rem;
    margin: 0 auto;
    padding: 1.25rem 1.5rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 2rem;
    justify-content: center;
    text-align: center;
    font-size: 0.875rem;
    color: #94a3b8;
  }
  .aosf-footer-bottom p { margin: 0; }
  @media (min-width: 640px) {
    .aosf-footer-bottom { justify-content: space-between; text-align: left; }
  }
  .aosf-footer-policy-link { color: #94a3b8; text-decoration: none; }
  .aosf-footer-policy-link:hover { color: var(--c-brand); }
  .aosf-footer-consent-btn { background: none; border: 0; padding: 0; margin: 0; font: inherit; cursor: pointer; }
  .aosf-footer-policy-sep { color: #94a3b8; margin: 0 0.5rem; }


    .ad-unit ins.adsbygoogle { display: block; width: 100%; max-width: 100%; }
    .ad-unit ins.adsbygoogle iframe { max-width: 100% !important; }
    .ad-unit-label { display: none; }
    .ad-unit.ad-filled {
      /* Vertical padding only. The governor adds .ad-filled AFTER the creative has
         been sized, so horizontal padding here shrinks the content box under an
         iframe that is already 16px wider, and the iframe max-width clamp then
         crops it -- including, at the wrong moment, the AdChoices icon this file
         deliberately refuses to hide with overflow:hidden. Any horizontal breathing
         room has to exist BEFORE the ad is measured or not at all. */
      padding: 0.5rem 0;
      border: 1px solid #e5e2d9;
      border-radius: 6px;
      background: #f8fafc;
    }
    .ad-unit.ad-filled .ad-unit-label {
      display: block;
      margin: 0 auto 0.4rem;
      font-size: 0.625rem;
      font-weight: 600;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      text-align: center;
    }
    /* Google Auto ads can inject units we never placed (anchor, "Related search
       for content"). Their innards are cross-origin, but the wrapper Google drops
       into our DOM is ours to keep in the content flow. */
    .google-auto-placed,
    ins.adsbygoogle[data-anchor-status],
    [id^="afscontainer"],
    [id^="afshcontainer"] {
      max-width: 100% !important;
      margin: 1.25rem auto !important;
      text-align: center;
      overflow: hidden;
    }
    .google-auto-placed iframe,
    [id^="afscontainer"] iframe,
    [id^="afshcontainer"] iframe { max-width: 100% !important; }
  

/* An ad landing inside the dark site footer would otherwise show its
   light article-body frame, which clashes with the navy footer. Give
   footer ads a dark, subtle frame so only the creative (which we can't
   recolour) stands out, not the wrapper. */
[data-site-footer] .ad-unit.ad-filled,
.site-footer .ad-unit.ad-filled {
  background: rgba(148, 163, 184, 0.06) !important;
  border-color: rgba(148, 163, 184, 0.22) !important;
}
[data-site-footer] .ad-unit .ad-unit-label,
.site-footer .ad-unit .ad-unit-label { color: #94a3b8 !important; }
/* Same for an auto-injected band landing in the footer. */
[data-site-footer] .google-auto-placed,
.site-footer .google-auto-placed,
[data-site-footer] [id^="afshcontainer"],
.site-footer [id^="afshcontainer"] {
  background: rgba(148, 163, 184, 0.06);
  border-radius: 8px;
}


/* Prime Big Deal Days 2026 -- campaign promo. Generated by promo-assets.ts. */
.aosf-deals-gnxp1 {
  position: relative;
  background: #0F172A;
  color: #FFFFFF;
  font-family: var(--font-body, system-ui, sans-serif);
  line-height: 1.3;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}
.aosf-deals-gnxp1[hidden] { display: none; }
.aosf-deals-gnxp1-inner {
  position: relative;
  box-sizing: border-box;
  max-width: 84rem;
  margin: 0 auto;
  padding: 0.625rem 1rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 0.75rem;
  row-gap: 0.25rem;
  /* Reserves the bar's height before the script runs, so correcting the phase
     text never moves the article underneath it. */
  min-height: 3.25rem;
  cursor: pointer;
}
.aosf-deals-gnxp1-copy { grid-area: copy; flex: 1 1 100%; min-width: 0; }
.aosf-deals-gnxp1-title {
  display: block;
  /* Clears the dismiss button, which sits top-right on phones so that the
     meta row underneath can run the full width. */
  padding-inline-end: 2.5rem;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.aosf-deals-gnxp1-sub {
  display: none;
  font-size: 0.875rem;
  font-weight: 400;
  color: #D9D9D9;
}
.aosf-deals-gnxp1-eyebrow {
  display: none;
  grid-area: eb;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #D9D9D9;
}
.aosf-deals-gnxp1-ct {
  grid-area: count;
  font-variant-numeric: tabular-nums;
  font-size: 0.8125rem;
  font-weight: 600;
  white-space: nowrap;
  color: #D9D9D9;
}
.aosf-deals-gnxp1-ct[hidden] { display: none; }
/* The CTA is a text link on phones -- a 44px button under the headline cost
   more height than the headline itself -- and a button from 600px up. The
   whole bar is its hit area at every width (see the overlay below). */
.aosf-deals-gnxp1-go {
  grid-area: cta;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  font-weight: 700;
  font-size: 0.875rem;
  white-space: nowrap;
  color: #FFFFFF;
  text-decoration: underline;
  text-decoration-color: #3B6FE0;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
}
.aosf-deals-gnxp1-go::after { content: "\2192" / ""; color: #3B6FE0; }
.aosf-deals-gnxp1-go:hover, .aosf-deals-gnxp1-go:focus-visible { filter: brightness(1.08); }
/* Ad marker. A bordered two-letter chip inline with the headline rather than
   on its own row: it reads as a label at a glance and costs no vertical space. */
.aosf-deals-gnxp1-note {
  display: inline-block;
  /* Above the CTA's stretched overlay, or the overlay would eat the pointer
     and the title tooltip would never appear. The chip is the one thing in the
     bar that is deliberately NOT part of the click target: it discloses the
     ad, it does not sell it. */
  position: relative;
  z-index: 2;
  cursor: help;
  margin-inline-end: 0.45rem;
  padding: 0.05rem 0.34rem;
  border: 1px solid #D9D9D9;
  border-radius: 4px;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.5;
  vertical-align: 0.15em;
  color: #D9D9D9;
}
/* Whole-bar click target, done with a stretched pseudo-element on the CTA so
   the bar stays ONE link for assistive tech and ships no extra JavaScript.
   Wrapping everything in an <a> would have swallowed the dismiss button; this
   keeps the button a real button, lifted above the overlay by z-index. The
   link itself stays static -- a positioned link would be the pseudo-element's
   containing block and shrink the overlay back to the button. */
.aosf-deals-gnxp1-go::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.aosf-deals-gnxp1-x {
  position: absolute;
  z-index: 3;
  top: 0.25rem;
  right: 0.25rem;
  width: 44px;
  height: 44px;
  padding: 0;
  display: grid;
  place-items: center;
  background: none;
  border: 0;
  border-radius: 50%;
  color: #FFFFFF;
  font-size: 1.375rem;
  line-height: 1;
  cursor: pointer;
}
.aosf-deals-gnxp1-x:hover { background: rgba(255, 255, 255, 0.12); }
.aosf-deals-gnxp1 :focus-visible { outline: 2px solid #3B6FE0; outline-offset: 2px; }
@media (min-width: 600px) {
  .aosf-deals-gnxp1-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "copy cta" "count cta";
    /* Right padding clears the dismiss button, now vertically centred. */
    padding: 0.5rem 3.25rem 0.5rem 1.5rem;
    row-gap: 0.125rem;
    column-gap: 1rem;
  }
  .aosf-deals-gnxp1-title { padding-inline-end: 0; }
  .aosf-deals-gnxp1-x { top: 50%; transform: translateY(-50%); }
  .aosf-deals-gnxp1-go {
    justify-self: end;
    justify-content: center;
    min-height: 44px;
    padding: 0.4rem 1.1rem;
    border-radius: 4px;
    background: #3B6FE0;
    color: #FFFFFF;
    font-size: 0.9375rem;
    text-decoration: none;
  }
  .aosf-deals-gnxp1-go::after { content: none; }
}
@media (min-width: 900px) {
  .aosf-deals-gnxp1-inner {
    grid-template-columns: minmax(0, 1fr) auto auto auto;
    grid-template-areas: "copy eb count cta";
    row-gap: 0;
  }
  .aosf-deals-gnxp1-eyebrow { display: block; }
  .aosf-deals-gnxp1-eyebrow::after { content: "\00B7"; margin-inline-start: 1rem; }
}
@media (min-width: 1024px) {
  /* Pointer territory: a 40px button keeps the bar at 56px. */
  .aosf-deals-gnxp1-go { min-height: 40px; }
}
/* The closing-hours pulse is the only motion here, and it is the kind that
   triggers vestibular symptoms, so it is opt-in by preference rather than
   opt-out. A box-shadow ring rather than a transform: a transformed link
   would become the containing block of the whole-bar overlay above. Button
   widths only -- a ring around a text link reads as a rendering fault. */
@media (prefers-reduced-motion: no-preference) and (min-width: 600px) {
  .aosf-deals-gnxp1[data-phase="final"] .aosf-deals-gnxp1-go { animation: aosf-deals-gnxp1-pulse 1.8s ease-in-out infinite; }
  @keyframes aosf-deals-gnxp1-pulse {
    0%, 100% { box-shadow: 0 0 0 0 #3B6FE0; }
    50% { box-shadow: 0 0 0 5px transparent; }
  }
}

.aosf-deals-gnxp1 {
  position: sticky;
  top: 62px;
  z-index: 49;
}
/* Phones: centred headline, Ad chip left and cross right, equal gutters. Left-aligned
   copy with the dismiss button hanging off the right edge read as two things
   that did not line up -- the text sat 16px from the left edge while the cross
   sat ~26px from the right and a line lower. Here the cross lives in the right
   gutter, its glyph's right edge on the same 16px inset the text used to have,
   and its centre on the headline's first line. */
@media (max-width: 599px) {
  .aosf-deals-gnxp1-inner { justify-content: center; }
  .aosf-deals-gnxp1-copy { text-align: center; }
  /* balance: no single orphaned word ("gear") on the last line at 320px. */
  .aosf-deals-gnxp1-title { padding-inline: 3rem; text-wrap: balance; }
  /* The Ad chip is pinned to the left inset, mirroring the cross on the right,
     and centred on the first line. The title's 3rem gutters clear both. */
  .aosf-deals-gnxp1-note {
    position: absolute;
    left: 1rem;
    top: calc(0.625rem + 0.65rem - 0.6rem);
    margin: 0;
    vertical-align: baseline;
  }
  .aosf-deals-gnxp1-go { justify-self: center; }
  /* 0.625rem inner padding + half of the 1.3 line-height of a 1rem headline,
     minus half the 44px target. */
  .aosf-deals-gnxp1-x { top: calc(0.625rem + 0.65rem - 22px); right: 0; }
}