/* Transitional route UX and mail shell. public-unity.css owns public catalog headers. */
:root {
  --public-reading-width: 68ch;
  --public-header-height: 84px;
}

body.mail-page .site-header { min-height: 72px; }
body.mail-page .site-header .nav a,
body.mail-page .site-header .header-action,
body.mail-page .site-header .language-switcher button { min-height: 38px; }

@media (hover: hover) and (pointer: fine) {
  body.mail-page .site-header .nav a:hover,
body.mail-page .site-header .header-action:hover,
body.mail-page .site-header .language-switcher button:hover {
    border-color: rgba(43, 231, 214, .5);
    filter: brightness(1.12);
    transform: translateY(-1px);
  }
}

@media (hover: none), (pointer: coarse) {
  body.mail-page .site-header .nav a,
body.mail-page .site-header .header-action,
body.mail-page .site-header .language-switcher button {
    transition: transform 120ms ease, border-color 120ms ease, background-color 120ms ease, filter 120ms ease;
  }

  body.mail-page .site-header .nav a:active,
body.mail-page .site-header .header-action:active,
body.mail-page .site-header .language-switcher button:active {
    border-color: rgba(43, 231, 214, .58);
    background-color: rgba(43, 231, 214, .12);
    filter: brightness(1.15);
    transform: scale(.97);
  }
}

.hero__lead,
.projects-library__head > div > p:not(.eyebrow),
.anime-hero .hero__lead,
.music-hero__lead,
.section__intro > p:not(.eyebrow),
.footer__intro > p:not(.eyebrow) {
  max-width: var(--public-reading-width);
  line-height: 1.58;
}

.projects-library {
  display: flex;
  flex-direction: column;
  padding-top: 52px;
}

.projects-library__head { order: 1; }
.projects-library > [data-project-news] { order: 2; margin: 34px 0 46px; }
.projects-library > .projects-status-tabs { order: 3; }
.projects-library > .projects-sections { order: 4; }

.projects-showcase,
.projects-showcase__main,
.projects-showcase__featured {
  min-height: 0;
  height: 440px;
}

.projects-showcase__featured { aspect-ratio: auto; }
.projects-showcase__media,
.projects-showcase__media picture,
.projects-showcase__media img { width: 100%; height: 100%; }

.projects-showcase__media img.project-image--contain {
  width: min(34%, 320px);
  height: min(56%, 260px);
  margin: auto;
  object-fit: contain;
}

.projects-showcase__caption { max-width: min(680px, 72%); }


.music-hero {
  min-height: min(740px, calc(100svh - var(--public-header-height)));
  padding-top: 104px;
  padding-bottom: 48px;
}

.music-releases { padding-top: 72px; }

.anime-page .anime-main .anime-grid {
  display: flex;
  gap: 16px;
  width: 100%;
  max-width: 100%;
  padding: 3px 2px 12px;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-inline: contain;
  scroll-padding-inline: 2px;
  scroll-snap-type: x mandatory;
  touch-action: pan-x pan-y;
  cursor: grab;
  scrollbar-width: thin;
}

.anime-page .anime-main .anime-grid.is-dragging {
  scroll-snap-type: none;
  cursor: grabbing;
  user-select: none;
}

.anime-page .anime-main .anime-grid > .anime-card {
  flex: 0 0 clamp(230px, 26vw, 292px);
  min-width: 0;
  scroll-snap-align: start;
}

.anime-page .anime-main .anime-grid > .anime-empty { flex: 1 0 100%; }


@media (min-width: 901px) and (max-width: 1180px) {
  body.mail-page .site-header .nav a { padding-inline: 10px; }
  .music-hero { grid-template-columns: minmax(280px, .76fr) minmax(420px, 1.24fr); gap: 32px; }
  .music-platform { min-height: 60px; }
}

@media (min-width: 901px) and (max-width: 1100px) {
  :root {
    --header-safe-offset: 116px;
    --public-header-height: 104px;
  }

  body.mail-page .site-header {
    top: 8px;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "brand actions" "nav nav";
    gap: 6px 10px;
    min-height: 0;
    padding: 7px;
    border-radius: 16px;
  }

  body.mail-page .site-header .brand {
    min-height: 40px;
    padding: 3px 10px 3px 3px;
  }

  body.mail-page .site-header .brand__mark {
    width: 38px;
    height: 38px;
    flex-basis: 38px;
  }

  body.mail-page .site-header .brand__name { font-size: .82rem; }

  body.mail-page .site-header .header-actions {
    grid-area: actions;
    gap: 5px;
  }

  body.mail-page .site-header .header-action {
    min-height: 34px;
    padding: 8px 13px;
    font-size: .74rem;
  }

  body.mail-page .site-header .language-switcher {
    min-height: 34px;
    padding: 3px;
  }

  body.mail-page .site-header .language-switcher button {
    min-width: 32px;
    min-height: 32px;
    padding: 0 8px;
    font-size: .72rem;
  }

  body.mail-page .site-header .nav {
    grid-area: nav;
    display: flex;
    grid-template-columns: none;
    justify-content: center;
    gap: 4px;
    width: 100%;
    max-width: none;
    min-height: 40px;
    padding: 3px;
    overflow-x: auto;
    overflow-y: hidden;
    border-radius: 11px;
    scrollbar-width: none;
  }

  body.mail-page .site-header .nav::-webkit-scrollbar { display: none; }

  body.mail-page .site-header .nav a {
    flex: 0 0 auto;
    width: auto;
    min-width: max-content;
    min-height: 34px;
    padding: 8px 13px;
    border-radius: 8px;
    font-size: .74rem;
    line-height: 1;
  }

  .music-hero h1 { font-size: 2.85rem; }
}

@media (max-width: 900px) {
  :root {
    --header-safe-offset: 112px;
    --public-header-height: 104px;
  }

  body.mail-page .site-header {
    top: 8px;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "brand actions" "nav nav";
    gap: 5px 8px;
    min-height: 0;
    padding: 6px;
    border-radius: 15px;
  }

  body.mail-page .site-header .brand {
    min-height: 40px;
    padding: 3px 7px 3px 3px;
  }

  body.mail-page .site-header .brand__mark {
    width: 34px;
    height: 34px;
    flex-basis: 34px;
  }

  body.mail-page .site-header .brand__name { font-size: .78rem; }
  body.mail-page .site-header .header-actions { gap: 4px; }

  body.mail-page .site-header .language-switcher {
    min-height: 32px;
    padding: 3px;
  }

  body.mail-page .site-header .language-switcher button {
    min-width: 30px;
    min-height: 30px;
    padding: 0 7px;
    font-size: .7rem;
  }

  body.mail-page .site-header .nav {
    grid-area: nav;
    display: flex;
    grid-template-columns: none;
    justify-content: flex-start;
    gap: 3px;
    width: 100%;
    max-width: none;
    min-height: 39px;
    padding: 3px;
    overflow-x: auto;
    overflow-y: hidden;
    border-radius: 11px;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
    touch-action: pan-x pan-y;
  }

  body.mail-page .site-header .nav::-webkit-scrollbar { display: none; }

  body.mail-page .site-header .nav a {
    flex: 1 0 auto;
    width: auto;
    min-width: max-content;
    min-height: 33px;
    padding: 7px 10px;
    border-radius: 8px;
    font-size: .7rem;
    line-height: 1;
    scroll-snap-align: center;
  }

  .projects-library {
    width: min(100% - 24px, 1360px);
    padding-top: 48px;
    padding-bottom: 64px;
  }

  

  .projects-library > [data-project-news] { margin: 24px 0 34px; }
  .projects-showcase,
.projects-showcase__main,
.projects-showcase__featured { height: 230px; }

  .projects-showcase__shade {
    z-index: 2;
    opacity: 1;
    background: linear-gradient(90deg, rgba(2, 2, 2, .94), rgba(2, 2, 2, .48) 62%, rgba(2, 2, 2, .18));
  }

  .projects-showcase__caption {
    z-index: 3;
    right: 16px;
    bottom: 16px;
    left: 16px;
    max-width: none;
    text-shadow: 0 2px 14px rgba(0, 0, 0, .9);
  }

  .projects-showcase__caption h2 { font-size: 1.45rem; line-height: 1.08; }
  .projects-showcase__caption p { max-width: 90%; font-size: .88rem; }

  .projects-status-tabs {
    display: flex;
    gap: 6px;
    padding: 4px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .projects-status-tab {
    flex: 1 0 auto;
    min-width: max-content;
    min-height: 42px;
    padding: 9px 14px;
  }

  

  .projects-library__head h1,
.anime-hero--catalog h1,
.music-hero__copy h1 {
    font-size: 2.55rem;
    line-height: .98;
  }

  .anime-hero--catalog .hero__lead,
.music-hero__lead { font-size: .98rem; line-height: 1.5; }

  .anime-hero__actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
  }

  .anime-hero__actions > :first-child { grid-column: 1 / -1; }

  .anime-hero__actions .button {
    width: 100%;
    min-width: 0;
    min-height: 46px;
    padding-inline: 12px;
    font-size: .86rem;
    white-space: normal;
    text-align: center;
  }

  

  

  

  .anime-hero--catalog {
    min-height: auto;
    padding-top: 50px;
    padding-bottom: 36px;
  }

  .anime-feed.section { padding-top: 42px; }
  .anime-feed__tools { display: flex; width: 100%; overflow-x: auto; scrollbar-width: none; }
  .anime-feed__tools .feed-filter { flex: 1 0 auto; min-height: 42px; }

  .music-hero {
    grid-template-columns: 1fr;
    gap: 16px;
    min-height: auto;
    padding-top: 36px;
    padding-bottom: 16px;
  }

  .music-hero__copy h1 { margin-bottom: 14px; }
  .music-hero__copy h1 span { white-space: nowrap; }
  .music-platforms { gap: 7px; margin-top: 17px; }
  .music-platform { min-height: 52px; padding: 6px 11px; }
  .music-platform__mark { width: 52px; height: 52px; }
  .music-platform__mark img { width: 26px; height: 26px; }
  .music-feature__meta {
    align-items: center;
    flex-direction: row;
    gap: 12px;
    padding: 12px 14px 14px;
  }
  .music-feature__meta h2 { font-size: 1.08rem; }
  .music-feature__meta a { font-size: .72rem; }

  .music-releases { display: none; }
  .music-releases .section-head { align-items: flex-start; flex-direction: column; gap: 16px; }

  .music-grid {
    display: flex;
    gap: 12px;
    margin-inline: calc(var(--page-gutter, 12px) * -1);
    padding-inline: var(--page-gutter, 12px);
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    touch-action: pan-x pan-y;
    scroll-padding-inline: var(--page-gutter, 12px);
    scroll-snap-type: x mandatory;
  }

  .music-grid::-webkit-scrollbar { display: none; }
  .music-release { flex: 0 0 min(82vw, 330px); scroll-snap-align: start; }

  .anime-page .anime-main .anime-grid {
    margin-inline: calc(var(--page-gutter, 12px) * -1);
    width: calc(100% + (var(--page-gutter, 12px) * 2));
    max-width: none;
    padding-inline: var(--page-gutter, 12px);
    scrollbar-width: none;
  }

  .anime-page .anime-main .anime-grid::-webkit-scrollbar { display: none; }
  .anime-page .anime-main .anime-grid > .anime-card { flex-basis: min(78vw, 300px); }

  

}

@media (max-width: 430px) {
  body.mail-page .site-header .nav a { padding-inline: 9px; font-size: .68rem; }

  .projects-library__head h1,
.anime-hero--catalog h1,
.music-hero__copy h1 { font-size: 2.3rem; }

  .music-page main,
.music-footer { width: min(100% - 24px, var(--wide-max)); }
}

@media (max-width: 360px) {
  body.mail-page .site-header .brand__name { font-size: .72rem; }
  body.mail-page .site-header .nav a { flex-grow: 0; }
  .anime-hero__actions { grid-template-columns: 1fr; }
  .anime-hero__actions > :first-child { grid-column: auto; }
}

@media (prefers-reduced-motion: reduce) {
  body.mail-page .site-header .nav,
.projects-status-tabs,
.music-grid,
.anime-page .anime-main .anime-grid { scroll-behavior: auto; }
}

/* Shared interaction and type rhythm for public surfaces. */
:where(.site-header, .anime-header, main, footer) :is(a, button):focus-visible {
  outline: 2px solid #13d8cf;
  outline-offset: 3px;
}


:where(.section__intro, .music-hero__copy, .projects-library__head) > p:not(.eyebrow) {
  max-width: 62ch;
  text-wrap: pretty;
}

:where(.site-header .nav a, .anime-header .nav a, .header-action, .music-platform, .button) {
  min-height: 44px;
}

@media (hover: hover) and (pointer: fine) {
  body.mail-page .site-header .nav a,
.header-action,
.music-platform,
.music-feature__source,
.music-feature__meta > a,
.music-footer__links a {
    transition: color 180ms ease, border-color 180ms ease, background-color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
  }

  body.mail-page .site-header .nav a:hover,
.header-action:hover { transform: translateY(-1px); }

  .music-platform:hover {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, currentColor 42%, #39434a);
    box-shadow: 0 14px 30px rgba(0, 0, 0, .28);
  }

  .music-feature__media img,
.music-release__thumbnail { transition: transform 240ms ease, filter 240ms ease; }
  .music-feature__media:hover img,
.music-release:hover .music-release__thumbnail { transform: scale(1.015); filter: saturate(1.08) contrast(1.03); }
}

@media (prefers-reduced-motion: reduce) {
  .music-platform,
.music-feature__media img,
.music-release__thumbnail { transition: none; transform: none; }
}