/* Shared, quiet mobile navigation and image-led openings. */
#af-black.fx-site.fx-hud .mobile-dock { display: none; }
#af-black.fx-site.fx-hud .af-hero-minimal { touch-action: pan-y pinch-zoom; }
#af-black.fx-site.fx-hud .af-hero-minimal :is(.af-hero-poster, .af-hero-video, video) { pointer-events: none; }
#af-black.fx-site.fx-hud .af-hero-minimal:focus-visible { outline: 2px solid var(--af-accent); outline-offset: -3px; }
#af-black.fx-site.fx-hud .qa-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 5%; }
#af-black.fx-site.fx-hud .qa-hero-art { margin: 0; width: 100%; }
#af-black.fx-site.fx-hud .qa-hero-art img { display: block; width: 100%; height: auto; aspect-ratio: 16/9; object-fit: cover; border-radius: 10px; }
#af-black.fx-site.fx-hud .creator-essay .creator-story-image { margin: 4px 0 58px; }
#af-black.fx-site.fx-hud .creator-story-image img { display: block; width: 100%; height: auto; aspect-ratio: 3/1; object-fit: cover; border-radius: 5px; }
#af-black.fx-site.fx-hud .creator-story-image figcaption { margin-top: 10px; font-size: 10px; line-height: 1.8; color: #919a89; letter-spacing: .02em; }
/* Below-the-fold covers now use native lazy images instead of eager backgrounds. */
#af-black.fx-site.fx-hud .af-lazy-media { background-image: none; }
#af-black.fx-site.fx-hud .af-lazy-media::before { content: none; }
#af-black.fx-site.fx-hud .af-lazy-media > .af-cover-image { display: block; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
#af-black.fx-site.fx-hud .af-lazy-media > .af-mv-play { z-index: 2; }
#af-black.fx-site.fx-hud .af-lazy-media > .vv-card-logo { z-index: 2; }
/* Shared desktop reading width for Works, publications, Q&A and Contact. */
@media (min-width: 761px) {
  #af-black.fx-site.fx-hud .af-hero-minimal h1.af-feature-title { font-size: clamp(44px, 6.1vw, 104px); }
  #af-black.fx-site.fx-hud .af-hero-minimal[data-title-script="ja"] h1.af-feature-title { font-size: clamp(37px, 5.1vw, 84px); }

  #af-black.page-standard.fx-site.fx-hud:is(.qa-page, .ct-site, .af-works-site, .publication-site) .page-frame {
    max-width: 1600px; padding-inline: 4.5%;
  }
}
@media (min-width: 761px) and (max-width: 1000px) {
  #af-black.fx-site.fx-hud .af-hero-minimal h1.af-feature-title { font-size: clamp(44px, 8vw, 80px); }
}
@media (max-width: 760px) {
  #af-black.fx-site.fx-hud { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
  #af-black.fx-site.fx-hud .af-nav { top: max(4px, env(safe-area-inset-top, 0px)); }
  #af-black.fx-site.fx-hud .af-nav .af-nav-inner {
    width: calc(100% - 8px); height: 48px; padding: 0 2px 0 12px; border-radius: 11px;
  }
  #af-black.fx-site.fx-hud .af-logo { font-size: 18px; gap: 7px; }
  #af-black.fx-site.fx-hud .fx-menu-btn { min-height: 44px; padding-inline: 12px; border: 0; background: none; }
  #af-black.fx-site.fx-hud .af-navlinks { top: calc(100% + 4px); }
  #af-black.fx-site.fx-hud .mobile-dock {
    display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
    position: fixed; z-index: 85; inset: auto 0 0;
    padding: 6px max(8px, env(safe-area-inset-right, 0px)) calc(6px + env(safe-area-inset-bottom, 0px)) max(8px, env(safe-area-inset-left, 0px));
    border-top: 1px solid #d6e6bf26; background: #0b100ef5;
  }
  #af-black.fx-site.fx-hud .mobile-dock a {
    min-height: 52px; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 5px; border-radius: 8px; color: #a6b0a1; font-size: 10px; line-height: 1.2; font-weight: 500;
  }
  #af-black.fx-site.fx-hud .mobile-dock svg { width: 21px; height: 21px; stroke: currentColor; stroke-width: 1.7; fill: none; stroke-linecap: round; stroke-linejoin: round; }
  #af-black.fx-site.fx-hud .mobile-dock a.is-current { color: var(--af-accent); background: #d2f72f0c; }
  #af-black.fx-site.fx-hud .mobile-dock a:focus-visible { outline: 2px solid var(--af-accent); outline-offset: -2px; }
  body:has(input:focus, textarea:focus, select:focus) #af-black .mobile-dock { display: none; }
  #af-black.fx-site.fx-hud .af-hero.af-hero-minimal { aspect-ratio: 2 / 3; height: auto; min-height: 0; max-height: none; }
  #af-black.fx-site.fx-hud .af-hero-minimal .af-hero-bottom { bottom: 52px; }
  #af-black.fx-site.fx-hud .af-hero-minimal .hero-feature-copy {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0 14px;
  }
  #af-black.fx-site.fx-hud .af-hero-minimal .af-hero-eyebrow { grid-column: 1 / -1; grid-row: 1; font-size: 8px; margin: 0 0 10px; }
  #af-black.fx-site.fx-hud .af-hero-minimal h1.af-feature-title {
    grid-column: 1; grid-row: 2; font-size: clamp(24px, 6.9vw, 36px); line-height: 1.04; margin: 0;
    max-width: 100%; font-stretch: 100%; letter-spacing: -.025em; overflow-wrap: anywhere;
  }
  #af-black.fx-site.fx-hud .af-hero-minimal[data-title-script="ja"] h1.af-feature-title { font-size: clamp(23px, 6.4vw, 34px); line-height: 1.15; }
  #af-black.fx-site.fx-hud .af-hero-minimal .af-hero-caption { grid-column: 1; grid-row: 3; margin-top: 9px; font-size: 8px; letter-spacing: .08em; }
  #af-black.fx-site.fx-hud .af-hero-minimal .hero-detail-button {
    grid-column: 2; grid-row: 2 / 4; margin: 0; min-height: 44px; max-width: 118px;
    padding: 9px 12px; gap: 8px; font-size: 10px; line-height: 1.6; border-radius: 12px;
  }
  #af-black.fx-site.fx-hud .af-hero-minimal .hero-detail-button > span:last-child { flex-shrink: 0; font-size: 16px; }
  #af-black.fx-site.fx-hud .af-hero-minimal .hero-slide-navigation .af-hero-arrow { top: 50%; bottom: auto; transform: translateY(-50%); width: 44px; height: 44px; background: #080c0be6; border-color: #ffffff70; box-shadow: 0 2px 12px #0004; backdrop-filter: none; }
  #af-black.fx-site.fx-hud .af-hero-minimal .hero-previous { left: 12px; right: auto; }
  #af-black.fx-site.fx-hud .af-hero-minimal .hero-next { right: 12px; left: auto; }
  #af-black.fx-site.fx-hud .af-hero-minimal .af-hero-count { left: 6%; bottom: 22px; }
  #af-black.fx-site.fx-hud .af-hero-minimal .af-hero-status { left: 6%; right: 6%; top: calc(62px + env(safe-area-inset-top, 0px)); bottom: auto; font-size: 10px; }
  #af-black.fx-site.fx-hud .project-hero { gap: 26px; }
  #af-black.fx-site.fx-hud .project-hero > .os-hero-art { grid-row: 1; }
  #af-black.fx-site.fx-hud .project-hero > div { grid-row: 2; }
  #af-black.fx-site.fx-hud .project-hero h1,
  #af-black.fx-site.fx-hud .project-hero-brain h1 { font-size: clamp(32px, 8.5vw, 44px); line-height: 1.08; margin: 12px 0 20px; letter-spacing: -.035em; }
  #af-black.fx-site.fx-hud .project-hero h2 { font-size: 20px; }
  #af-black.fx-site.fx-hud .project-hero .os-hero-art { padding: 5px; }
  #af-black.fx-site.fx-hud .project-hero .os-hero-caption { padding: 10px 3px 5px; }
  #af-black.fx-site.fx-hud .qa-hero { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  #af-black.fx-site.fx-hud .qa-hero-art { grid-row: 1; }
  #af-black.fx-site.fx-hud .qa-hero-copy { grid-row: 2; }
  #af-black.qa-page.fx-site.fx-hud .qa-question {
    grid-template-columns: 32px minmax(0, 1fr) 26px; grid-template-rows: 32px auto;
    column-gap: 11px; row-gap: 3px; padding: 16px 0;
  }
  #af-black.qa-page.fx-site.fx-hud .qa-question-content { display: contents; }
  #af-black.qa-page.fx-site.fx-hud .qa-questioner { grid-column: 1; grid-row: 1; width: 32px; height: 32px; }
  #af-black.qa-page.fx-site.fx-hud .qa-questioner svg { width: 27px; height: 27px; }
  #af-black.qa-page.fx-site.fx-hud .qa-question-label { grid-column: 1; grid-row: 2; margin: 0; font-size: 9px; line-height: 1.4; text-align: center; align-self: start; }
  #af-black.qa-page.fx-site.fx-hud .qa-question h3 { grid-column: 2; grid-row: 1 / 3; margin: 0; font-size: 14px; line-height: 1.65; letter-spacing: 0; }
  #af-black.qa-page.fx-site.fx-hud .qa-expand { grid-column: 3; grid-row: 1 / 3; width: 26px; height: 26px; }
  #af-black.qa-page.fx-site.fx-hud .qa-expand::before,
  #af-black.qa-page.fx-site.fx-hud .qa-expand::after { left: 6px; }
  #af-black.page-standard.ct-site.fx-site.fx-hud .ct-intro-layout { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  #af-black.page-standard.ct-site.fx-site.fx-hud .ct-intro-layout .ct-robot { grid-row: 1; }
  #af-black.page-standard.ct-site.fx-site.fx-hud .ct-intro-layout .ct-intro-copy { grid-row: 2; }
  #af-black.fx-site.fx-hud .creator-essay .creator-story-image { margin-bottom: 38px; }
  #af-black.fx-site.fx-hud .social-account-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  #af-black.fx-site.fx-hud .social-station .social-account { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 3px 12px; padding: 14px; }
  #af-black.fx-site.fx-hud .social-station .social-platform { grid-column: 1; grid-row: 1; font-size: 12px; gap: 7px; }
  #af-black.fx-site.fx-hud .social-station .social-platform svg { width: 20px; height: 20px; }
  #af-black.fx-site.fx-hud .social-station .social-out { display: none; }
  #af-black.fx-site.fx-hud .social-station .social-count { grid-column: 2; grid-row: 1; font-size: 28px; margin: 0; text-align: right; }
  #af-black.fx-site.fx-hud .social-station .social-count-label { grid-column: 2; grid-row: 2; font-size: 9px; text-align: right; margin: 0; }
  #af-black.fx-site.fx-hud .social-station .social-handle { grid-column: 1; grid-row: 2; margin: 0; font-size: 9px; }
  /* Retain the static grid and colour, avoiding full-screen filter layers on phones. */
  #af-black.fx-site.fx-hud :is(.fx-grain, .fx-cursor, .fx-glow) { display: none; }
  #af-black.fx-site.fx-hud .fx-bg .fx-grid { mask-image: none; -webkit-mask-image: none; opacity: .65; }
  #af-black.fx-site.fx-hud :is(.af-nav-inner, .hero-media-controls button, .af-media-label, .af-duration) { backdrop-filter: none; -webkit-backdrop-filter: none; }
  #af-black.fx-site.fx-hud .af-nav-inner { background: #0b100ef2; }
}