/* Editorial refresh: retain the existing composition, remove ornamental UI chrome.
   Both dossier directions share markup and the original character data. */
:root { --rule: #35353d; --paper: #e5dfcf; --ink: #282723; }
a { background: none; color: #aaa1df; -webkit-text-fill-color: currentColor; text-decoration: underline; text-underline-offset: 4px; }
.landing, .character-section, .screenshots-section, .six-section, .mobile-staircase-section { background: none; }
.logo-main { filter: none; }
.tagline { background: none; -webkit-text-fill-color: currentColor; color: #c2bade; }
.character-image, .character-image img, .char-nav-btn, .char-nav-thumb, .char-nav-arrow,
.screenshot-container, .video-wrapper, .video-wrapper iframe, .email-input, .signup-button,
.six-store-card, .six-ad-badge, .six-get-btn, .six-install-btn, .six-review,
.six-features li, .six-bar, .six-bar span, .trait, .social-link, .redacted { border-radius: 0; }
.char-nav-thumb { clip-path: inset(0); }
.screenshot-container, .video-wrapper, .signup-icon, .six-icon, .six-store-card,
.char-nav-btn, .char-nav-btn.active, .char-nav-btn:hover, .char-nav-arrow:hover,
.signup-button:hover, .six-get-btn:hover, .six-install-btn, .six-install-btn:hover { box-shadow: none; }
.screenshot-container { border: 1px solid var(--rule); }
.dot { border-radius: 0; width: 24px; height: 3px; }
.dot.active { transform: none; background: #aaa1df; }
.signup-form { gap: 0; max-width: 560px; }
.email-input { min-width: 0; border: 1px solid #58555f; background: transparent; }
.signup-button { background: #69608f; border: 1px solid #69608f; font-family: 'Courier New', monospace; }
.signup-button:hover { background: #7c72a5; transform: none; }
.signup-description { font-family: 'EB Garamond', serif; font-size: 1.5rem; }
.signup-section h2 { font-weight: 400; }
.footer { background: transparent; border-top: 1px solid var(--rule); }
.social-link { background: transparent !important; border: 1px solid var(--rule); }
.six-store-card { background: #141916; border: 1px solid #445447; border-top: 3px solid #74997b; }
.six-get-btn, .six-install-btn { background: #3e7250; text-decoration: none; }
.six-get-btn:hover, .six-install-btn:hover { background: #4d8962; transform: none; }
.six-features { gap: 0; }
.six-features li { background: none; border: 0; border-bottom: 1px solid #35483a; padding: .45rem 0; margin-right: 1.2rem; color: #9bbb9f; }
.six-review { background: none; border: 0; border-top: 1px solid #354039; padding: 1rem 0; }
.six-review-low { background: none; }
.six-ad-badge { color: #adb5af; }
:where(button, a, input):focus-visible { outline: 2px solid #c4badf; outline-offset: 4px; }

/* Shared dossier structure and retained surveillance treatment (?dossier=surveillance). */
.character-showcase { --file-text: #d9ddd7; --file-muted: #a7b3a5; --file-rule: #424b43; position: relative; border: 1px solid var(--file-rule); background: #111713; color: var(--file-text); padding: 0 32px 20px; }
.dossier-register { display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--file-rule); color: var(--file-muted); font: 11px/1.5 'Courier New', monospace; letter-spacing: .13em; text-transform: uppercase; }
.dossier-register span:last-child { text-align: right; }
.character-display { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 44px; align-items: start; padding: 32px 0; margin: 0; }
.character-image { width: 100%; height: 510px; background-color: #1b241e; background-image: linear-gradient(#91ac9010 1px, transparent 1px), linear-gradient(90deg, #91ac9010 1px, transparent 1px); background-size: 36px 36px; border: 1px solid var(--file-rule); box-shadow: none; overflow: hidden; }
.character-image img { width: 100%; min-width: 0; height: 100%; object-fit: contain; object-position: center bottom; }
.character-image::after { content: ''; position: absolute; inset: 12px; border: 1px solid #b4c5b54d; clip-path: polygon(0 0, 20px 0, 20px 1px, calc(100% - 20px) 1px, calc(100% - 20px) 0, 100% 0, 100% 20px, calc(100% - 1px) 20px, calc(100% - 1px) calc(100% - 20px), 100% calc(100% - 20px), 100% 100%, calc(100% - 20px) 100%, calc(100% - 20px) calc(100% - 1px), 20px calc(100% - 1px), 20px 100%, 0 100%, 0 calc(100% - 20px), 1px calc(100% - 20px), 1px 20px, 0 20px); pointer-events: none; }
.vertical-chinese-name { left: 12px; top: 24px; transform: none; height: auto; font-size: 2.1rem; color: var(--char-accent, var(--accent-color)); text-shadow: none; filter: none; opacity: 1; }
.character-info { display: flex; flex-direction: column; gap: 22px; padding-top: 8px; text-align: left; min-width: 0; }
.character-name h3 { color: var(--file-text); background: none; -webkit-text-fill-color: currentColor; font-family: 'EB Garamond', serif; font-weight: 400; font-size: clamp(2.5rem, 4vw, 3.9rem); }
.character-name h4 { color: var(--file-muted); background: none; -webkit-text-fill-color: currentColor; font-weight: 400; font-size: 1.35rem; margin-top: 8px; }
.character-stats { display: flex; flex-direction: column; gap: 0; border-top: 1px solid var(--file-rule); border-bottom: 1px solid var(--file-rule); padding: 12px 0; margin-bottom: 22px; opacity: 1; letter-spacing: .02em; }
.character-stats span { font: 13px/1.9 'Courier New', monospace; color: var(--file-muted); opacity: 1; }
.character-stats span:last-child { color: var(--file-text); font-weight: 400; }
.character-stats span::after { content: none !important; }
#char-description { font-size: 16px; line-height: 1.85; opacity: 1; color: var(--file-text); }
.char-quotes-container { margin: 0; border-top: 1px solid var(--file-rule); padding-top: 16px; }
.char-quote { color: var(--file-muted); font: italic 22px/1.45 'EB Garamond', serif; border: 0; padding: 0; }
.character-navigation-row { border-top: 1px solid var(--file-rule); padding-top: 20px; gap: 16px; }
.char-nav-btn { border: 1px solid var(--file-rule); background: #202823; }
.char-nav-btn.active { background: #2b342b; border-color: #d5decf; }
.char-nav-arrow { background: transparent; border: 1px solid var(--file-rule); color: var(--file-text); opacity: 1; }
.char-nav-arrow:hover { transform: none; color: var(--file-text); border-color: var(--file-text); background: transparent; }
.char-nav-counter { color: var(--file-muted); opacity: 1; font: 11px/1.6 'Courier New', monospace; }
.char-nav-counter #char-nav-index { color: var(--file-text); }
.gradient-left { background: linear-gradient(to right, #111713, transparent); }
.gradient-right { background: linear-gradient(to left, #111713, transparent); }

/* Default paper treatment; overrides the shared surveillance base above. */
html[data-dossier="paper"] .character-showcase { --file-text: #282723; --file-muted: #625e54; --file-rule: #b8ae9a; background: #e5dfcf; background-image: repeating-linear-gradient(0deg, #6f5b3805 0, #6f5b3805 1px, transparent 1px, transparent 4px); border-color: #b8ae9a; box-shadow: 7px 7px 0 #ada48f, 8px 8px 0 #39372e; }
html[data-dossier="paper"] .dossier-register { color: #814432; border-bottom: 3px double #9b8a70; }
html[data-dossier="paper"] .character-image { background: #c7c2b5; background-image: none; border: 9px solid #f5f0e3; outline: 1px solid #b0a58e; transform: rotate(-1deg); margin: 4px 0; }
html[data-dossier="paper"] .character-image::after { display: none; }
html[data-dossier="paper"] .character-name h3 { font-family: 'Courier New', monospace; font-size: clamp(2rem, 3.3vw, 3rem); letter-spacing: -.07em; }
html[data-dossier="paper"] .character-name h4 { color: var(--char-accent, var(--accent-color)); }
html[data-dossier="paper"] .char-quote { color: var(--file-text); }
html[data-dossier="paper"] .redacted { background: var(--ink); }
html[data-dossier="paper"] .character-stats span { font-family: 'Courier New', monospace; }
html[data-dossier="paper"] #char-description { font-family: 'EB Garamond', serif; font-size: 21px; line-height: 1.5; }
html[data-dossier="paper"] .char-nav-btn { background: #cbc5b7; }
html[data-dossier="paper"] .char-nav-btn.active { background: #f5f0e3; border-color: #814432; }
html[data-dossier="paper"] .gradient-left { background: linear-gradient(to right, #e5dfcf, transparent); }
html[data-dossier="paper"] .gradient-right { background: linear-gradient(to left, #e5dfcf, transparent); }
@media (max-width: 1000px) and (min-width: 768px) { .character-display { gap: 24px; } .character-image { height: 480px; } }
@media (max-width: 767px) {
    .landing .characters-container { position: absolute; bottom: 20px; }
    .landing-content { border: 0; border-radius: 0; box-shadow: none; background: #0f0f1ac9; }
    .character-section { padding: 3rem 0; }
    .character-showcase { padding: 0 18px 18px; }
    .dossier-register { font-size: 9px; letter-spacing: .06em; }
    .character-display { grid-template-columns: 1fr; gap: 24px; padding: 24px 0; }
    .character-image { width: 100%; height: 380px; }
    .character-info { display: flex; gap: 20px; }
    .character-name h3 { font-size: 2.8rem; }
    .character-stats { align-items: flex-start; text-align: left; }
    .character-navigation-row { gap: 8px; }
    .char-nav-btn { width: 60px; height: 68px; min-width: 60px; }
    .signup-form { gap: 0; }
    .email-input, .signup-button { border-radius: 0; }
    .six-header { gap: .75rem; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; }
    .char-nav-btn img { transition: none; }
}
/* Clip the entrance artwork to the hero at intermediate desktop widths. */
@media (min-width: 768px) { .landing { overflow: clip; } }

/* PV: the promotion video between the synopsis and the character files. A thumbnail facade with a play mark; the
   YouTube player is only loaded when it is clicked (script.js, "PV player"). Without JS the facade links to YouTube. */
.pv-section { position: relative; z-index: 5; padding: 1rem 0 5rem; }
.pv-frame { max-width: 1000px; margin: 0 auto; }
.pv-player { position: relative; aspect-ratio: 16 / 9; background: #07070d; border: 1px solid var(--rule); padding: 0; overflow: hidden; }
.pv-player iframe, .pv-facade { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.pv-facade { cursor: pointer; background: #07070d; text-decoration: none; }
.pv-facade img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s ease, filter .6s ease; filter: brightness(.82); }
.pv-facade::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(7, 7, 13, .55)); pointer-events: none; }
.pv-play { position: absolute; left: 50%; top: 50%; z-index: 1; width: 84px; height: 84px; transform: translate(-50%, -50%); display: grid; place-items: center; border: 1px solid rgba(232, 228, 244, .85); border-radius: 50%; background: rgba(15, 15, 26, .45); backdrop-filter: blur(2px); transition: background .3s ease, transform .3s ease; }
.pv-play svg { width: 30px; height: 30px; margin-left: 4px; fill: #f2eefc; }
.pv-facade:hover img, .pv-facade:focus-visible img { transform: scale(1.02); filter: brightness(.95); }
.pv-facade:hover .pv-play, .pv-facade:focus-visible .pv-play { background: rgba(86, 77, 169, .75); transform: translate(-50%, -50%) scale(1.06); }
.pv-caption { display: flex; justify-content: space-between; gap: 16px; margin: 12px 0 0; font: 11px/1.5 'Courier New', monospace; letter-spacing: .14em; text-transform: uppercase; color: #8f8aa8; }
.pv-caption a { color: #aaa1df; }
@media (max-width: 767px) {
    .pv-section { padding: .5rem 0 1.5rem; background: linear-gradient(180deg, rgba(99, 102, 241, 0.05), transparent 70%); }   /* continues the synopsis's tint, no seam */
    .pv-play { width: 64px; height: 64px; }
    .pv-play svg { width: 24px; height: 24px; }
    .pv-caption { font-size: 9px; letter-spacing: .08em; }
}
@media (prefers-reduced-motion: reduce) { .pv-facade img, .pv-play { transition: none; } }