/* Detail layout. Typography, headings, links and colors reuse the main site. */
.manga-detail { padding: 34px 0 24px; font-family: inherit; color: var(--text); font-size: 18px; line-height: 1.7; }
.manga-detail-shell { width: min(1100px, calc(100% - 64px)); margin: 0 auto; }
.manga-breadcrumbs { margin: 0 0 30px; font-size: 16px; color: var(--muted); }
.manga-breadcrumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; list-style: none; padding: 0; margin: 0; }
.manga-breadcrumbs li + li::before { content: '/'; padding-right: 12px; color: var(--muted); }
.manga-breadcrumbs a { font-size: inherit; font-weight: 400; }
.manga-detail-card { padding: 0; }
.manga-hero { display: grid; grid-template-columns: calc((100% - 60px) / 4) minmax(0, 1fr); gap: 40px; align-items: start; }
.manga-hero.manga-hero-no-cover { grid-template-columns: 1fr; }
.manga-cover { margin: 0; }
.manga-cover img { display: block; width: 100%; height: auto; border-radius: 8px; }
.manga-eyebrow { display: none; }
.manga-hero-content { min-width: 0; }
.manga-title-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 10px; }
.manga-hero h1 { font-size: clamp(32px, 4vw, 40px); font-weight: 500; line-height: 1.2; margin: 0; overflow-wrap: anywhere; max-width: 100%; }
.manga-original-title { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; color: var(--muted); font-size: 18px; margin: 0 0 22px; }
.manga-original-title span[aria-hidden] { padding: 0 5px; }
.manga-icon-link { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 28px; height: 28px; color: var(--muted); text-decoration: none; vertical-align: middle; border-radius: 4px; }
.manga-icon-link svg { display: block; width: 15px; height: 15px; }
.manga-icon-link:hover { color: var(--text); background: #f8fafc; }
.manga-fact-value { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.manga-fact-value > span:first-child { min-width: 0; max-width: 100%; }
.manga-inline-links { display: inline-flex; align-items: center; gap: 4px; }
.manga-facts { --manga-fact-column-min: 18rem; display: grid; grid-template-columns: fit-content(50%) minmax(0, 1fr); gap: 22px 28px; margin: 0; }
.manga-facts > div { min-width: 0; }
/* The left column grows with its content instead of taking half the block. */
.manga-facts > .manga-fact:nth-child(odd):not(.manga-fact-expanded) { min-width: var(--manga-fact-column-min); }
/* Expanded facts occupy their own final rows, without stretching a neighbor. */
.manga-facts > .manga-fact-expanded { grid-column: 1 / -1; }
.manga-facts dt { color: var(--muted); font-size: 16px; font-weight: 400; margin: 0 0 4px; }
.manga-facts dd { font-size: 18px; line-height: 1.5; font-weight: 400; margin: 0; overflow-wrap: anywhere; }
.manga-other-names { font-size: 16px; margin: 22px 0 0; }
.manga-section { margin-top: 34px; padding-top: 28px; border-top: 1px solid #f0f2f5; }
.manga-section h2 { margin: 0 0 18px; }
.manga-section h3 { font-size: 20px; font-weight: 600; line-height: 1.5; margin: 0 0 12px; }
.manga-description { border-top: 0; margin-top: 34px; padding-top: 0; }
.manga-description p { max-width: 74ch; font-size: inherit; line-height: 1.75; margin: 0 0 16px; }
.manga-description p:last-child { margin: 0; }
.manga-reader-opinions { border-top: 0; padding-top: 0; margin-top: 26px; }
.manga-opinions-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px; }
.manga-opinion { min-width: 0; }
.manga-opinion h2 { font-size: 20px; font-weight: 600; line-height: 1.5; margin-bottom: 12px; }
.manga-opinion ul { margin: 0; padding-left: 21px; }
.manga-opinion li { font-size: inherit; line-height: 1.7; padding-left: 3px; margin-bottom: 10px; }
.manga-opinion li:last-child { margin-bottom: 0; }
.manga-editor-notes { max-width: 74ch; font-size: inherit; line-height: 1.75; margin: 26px 0 0; overflow-wrap: anywhere; }
.manga-related-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 36px; }
.manga-related-column { min-width: 0; }
.manga-related-column > div + div { margin-top: 26px; }
.manga-related-list { list-style: none; padding: 0; margin: 0; font-size: inherit; line-height: 1.7; overflow-wrap: anywhere; }
.manga-related-list li + li { margin-top: 12px; }
.manga-related-year, .manga-related-type { color: var(--muted); }
.manga-related-year { white-space: nowrap; }
.manga-source-work { grid-column: 1 / -1; }
.manga-original-work { margin: 0; font-size: inherit; line-height: 1.7; }
.manga-characters { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 28px 20px; list-style: none; padding: 0; margin: 0; }
.manga-character img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 8px; background: #f2f4f7; }
.manga-character h3 { font-size: inherit; font-weight: 600; margin: 11px 0 3px; overflow-wrap: anywhere; }
.manga-character p { font-size: 15px; color: var(--muted); margin: 0; line-height: 1.5; }
.manga-panel-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; list-style: none; padding: 0; margin: 0; }
.manga-panel-grid > li { min-width: 0; }
.manga-panel-link { display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 3 / 4; overflow: hidden; border-radius: 8px; background: transparent; cursor: zoom-in; }
.manga-panel-link img { display: block; width: 100%; height: 100%; object-fit: contain; }
.manga-panel-viewer { box-sizing: border-box; position: fixed; inset: 0; width: 100%; height: 100%; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 76px 24px 24px; border: 0; background: transparent; overflow: hidden; }
.manga-panel-viewer[open] { display: flex; align-items: center; justify-content: center; }
.manga-panel-viewer::backdrop { background: rgba(0, 0, 0, 0.88); }
.manga-panel-viewer-image { display: block; width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 8px; }
.manga-panel-viewer-close { top: max(16px, env(safe-area-inset-top)); right: max(16px, env(safe-area-inset-right)); }
.manga-panel-viewer-open { overflow: hidden; }
.manga-detail a:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; border-radius: 3px; }
@media (max-width: 767px) {
    .manga-detail { padding-top: 24px; font-size: 17px; }
    .manga-detail-shell { width: calc(100% - 40px); }
    .manga-breadcrumbs { font-size: 15px; margin-bottom: 24px; }
    .manga-hero { grid-template-columns: 1fr; gap: 24px; }
    .manga-cover { width: calc((100% - 16px) / 2); margin: 0 auto; }
    .manga-hero h1, .manga-original-title { text-align: center; }
    .manga-title-row { justify-content: center; }
    .manga-original-title { justify-content: center; }
    .manga-icon-link { width: 36px; height: 36px; }
    .manga-hero h1 { font-size: 32px; }
    .manga-facts { --manga-fact-column-min: 0px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 18px; }
    .manga-facts dd { font-size: inherit; }
    .manga-characters { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; }
    .manga-panel-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
    .manga-panel-viewer { padding: 68px 12px max(12px, env(safe-area-inset-bottom)); }
    .manga-panel-viewer-close { width: 44px; height: 44px; top: max(12px, env(safe-area-inset-top)); right: max(12px, env(safe-area-inset-right)); }
    .manga-opinions-grid, .manga-related-grid { grid-template-columns: 1fr; gap: 24px; }
    .manga-related-column > div + div { margin-top: 24px; }
    .manga-section { margin-top: 30px; padding-top: 24px; }
    .manga-description { padding-top: 0; }
    .manga-reader-opinions { margin-top: 24px; padding-top: 0; }
    .manga-editor-notes { margin-top: 24px; }
}
@media (max-width: 360px) {
    .manga-detail-page .site-logo { font-size: 18px; letter-spacing: .01em; }
    .manga-detail-page .header-social-links { gap: 4px; }
}
@media (prefers-reduced-motion: reduce) {
    .manga-detail * { scroll-behavior: auto; transition: none; }
}
