/* Manga companion to the home-page archive design. */
body.manga-page { --manga-gold:#efc16f; --manga-red:#d32339; }
.manga-page .archive-page-hero { min-height:580px; padding:110px max(32px, calc((100% - 1280px) / 2)) 65px; background-position:center 40%; }
.manga-page .archive-page-hero::before { background:linear-gradient(90deg,#070709 4%,rgba(7,7,9,.88) 38%,rgba(7,7,9,.2) 85%),linear-gradient(0deg,#09090b,transparent 65%); }
.manga-page .archive-page-hero__content { width:100%; max-width:700px; }
.manga-page .archive-page-hero h1 { font-size:clamp(3rem,6.5vw,6.4rem); line-height:1.02; max-width:680px; margin:22px 0; }
.manga-page .archive-page-hero p { margin:0; max-width:590px; font-size:18px; line-height:1.8; color:#c0b9b2; }
.manga-page .archive-kicker { color:var(--manga-red); font-size:11px; line-height:1.6; }
.manga-page .archive-chip-row { gap:9px; }
.manga-page .archive-chip { padding:10px 13px; border-radius:7px; font-size:11px; line-height:1.4; letter-spacing:.04em; text-decoration:none; }
.manga-page a.archive-chip:hover { color:var(--manga-gold); border-color:#ac784b; background:#342018; }
.manga-page .manga-start { display:inline-flex; align-items:center; gap:45px; margin-top:12px; padding:15px 23px; border:1px solid #d33846; border-radius:9px; background:linear-gradient(120deg,#931527,#5c1020); color:#fff0de; font-size:15px; text-decoration:none; transition:background .2s,transform .2s; }
.manga-page .manga-start:hover { background:#a51e30; transform:translateY(-3px); }
.manga-page .archive-section { width:min(1280px,calc(100% - 64px)); margin:100px auto; scroll-margin-top:100px; }
.manga-page .archive-section::before { top:-35px; left:0; font-size:90px; opacity:.35; pointer-events:none; }
.manga-page .archive-heading { font-size:clamp(2.2rem,4.2vw,4rem); line-height:1.12; margin:15px 0 20px; }
.manga-page .archive-lead { font-size:17px; line-height:1.8; max-width:800px; }
.manga-page .reading-guide { margin:28px 0; padding:clamp(22px,3vw,34px); border:1px solid #594333; border-left:3px solid var(--manga-gold); border-radius:16px; background:linear-gradient(120deg,#211916,#111012 75%); }
.manga-page .reading-guide h3 { margin:0 0 14px; color:#f2e5d5; font-size:clamp(21px,2.3vw,28px); line-height:1.3; }
.manga-page .reading-guide p { margin:0 0 16px; color:#bfb4ab; font-size:16px; line-height:1.8; max-width:1000px; }
.manga-page .reading-guide strong { color:#ead6ba; }
.manga-page .reading-guide a { color:var(--manga-gold); font-size:14px; text-underline-offset:4px; }
.manga-page .reading-guide a span { color:#bfb4ab; }
.manga-page .arc-details { margin:0 0 22px; border-block:1px solid #443235; background:transparent; }
.manga-page .arc-details summary { padding:14px 0; color:#e9c18a; font:inherit; font-size:15px; cursor:pointer; line-height:1.5; }
.manga-page .arc-details summary::marker { color:var(--manga-red); }
.manga-page .arc-details[open] summary { color:#ffe1b2; }
.manga-page .arc-row .arc-details p { margin:0; padding:0 0 18px; font-size:15px; line-height:1.8; }
.manga-page .reading-progress-note { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:24px 35px; margin:36px 0 28px; padding:32px 38px; border:1px solid #59402a; border-radius:20px; background:radial-gradient(ellipse at top right,#3b211939,transparent 70%),#111012; }
.manga-page .reading-progress-note h3 { margin:8px 0; font-size:25px; color:#f5e5cf; }
.manga-page .reading-status { color:#a99f95; margin:0; font-size:15px; line-height:1.65; }
.manga-page .reading-count { align-self:center; color:var(--manga-gold); font-size:38px; white-space:nowrap; }
.manga-page .reading-progress-note progress { grid-column:1/-1; appearance:none; width:100%; height:7px; border:0; border-radius:8px; overflow:hidden; background:#302529; accent-color:var(--manga-gold); }
.manga-page progress::-webkit-progress-bar { background:#302529; }
.manga-page progress::-webkit-progress-value { background:linear-gradient(90deg,#bd2036,#efc16f); border-radius:8px; }
.manga-page progress::-moz-progress-bar { background:linear-gradient(90deg,#bd2036,#efc16f); }
.manga-page .arc-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start; gap:24px; margin-top:0; background:transparent; border:0; }
.manga-page .arc-row { position:relative; display:flex; flex-direction:column; align-items:stretch; gap:0; padding:0; min-width:0; overflow:hidden; border:1px solid #393033; border-radius:20px; background:linear-gradient(140deg,#1b1417,#0e0e10 75%); transition:transform .3s,border-color .3s,box-shadow .3s; }
.manga-page .arc-row:hover { transform:translateY(-5px); border-color:#976442; box-shadow:0 20px 45px #0006; }
.manga-page .arc-row img { order:-1; display:block; width:100%; height:240px; object-fit:cover; filter:grayscale(.25) brightness(.8); border:0; border-radius:0; transition:filter .4s; }
.manga-page .arc-row:hover img { filter:grayscale(0) brightness(1); }
.manga-page .arc-row__number { position:absolute; z-index:1; top:18px; left:20px; display:grid; place-items:center; width:54px; height:54px; border:1px solid #c28b5366; border-radius:13px; color:var(--manga-gold); background:#0a090ae6; font-size:25px; }
.manga-page .arc-row > div:not(.arc-row__number) { display:flex; flex-direction:column; flex:0 0 auto; padding:28px 30px 30px; min-width:0; }
.manga-page .arc-row h3 { margin:9px 0 12px; font-size:clamp(22px,2vw,29px); line-height:1.23; color:#f2e5d5; overflow-wrap:anywhere; }
.manga-page .arc-row p { color:#b3a8a1; font-size:16px; line-height:1.75; margin:0 0 24px; }
.manga-page .arc-row .archive-chip-row { margin:0; align-items:center; padding-top:8px; }
.manga-page .arc-progress-toggle { flex-basis:100%; margin-top:12px; min-height:45px; padding:12px 15px; border:1px solid #744438; border-radius:8px !important; background:#382019; color:#f1cf98; font:inherit; font-size:14px; cursor:pointer; transition:background .2s; }
.manga-page .arc-progress-toggle:hover { background:#553026; }
.manga-page .arc-reading-link { margin-top:18px; padding-top:18px; border-top:1px solid #b98a4933; }
.manga-page .reading-library-title { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:8px; margin-bottom:16px; color:#edc995; font-size:14px; letter-spacing:.04em; }
.manga-page .arc-reading-link small { color:#b3a8a1; font:12px/1.6 Arial,sans-serif; letter-spacing:0; }
.manga-page .reading-volume { margin:0 0 12px; padding:18px; border:1px solid #b98a4933; border-radius:14px; background:linear-gradient(125deg,#30222980,#121013); }
.manga-page .arc-reading-link h4 { display:flex; align-items:center; gap:12px; margin:0 0 16px; color:#f0dfc6; font-size:20px; }
.manga-page .arc-reading-link h4 small { margin-left:auto; font-weight:400; white-space:nowrap; }
.manga-page .volume-number { display:grid; place-items:center; width:34px; height:34px; flex-shrink:0; border:1px solid #b98a494d; border-radius:8px; background:#d9ab6110; color:#deb778; font:14px/1 Georgia,serif; }
.manga-page .arc-chapter-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.manga-page .arc-reading-link .arc-chapter-list a { box-sizing:border-box; width:100%; min-width:0; min-height:48px; display:flex; align-items:center; justify-content:space-between; gap:8px; margin:0; padding:12px 14px; border:1px solid #8c68434d !important; border-radius:9px !important; background:#0d0c0ec9 !important; color:#e8d8bf; text-decoration:none; font:600 14px/1.5 Arial,sans-serif; transition:background .2s,border-color .2s; }
.manga-page .arc-chapter-list a span { color:#c59c60; font-size:18px; }
.manga-page .arc-reading-link .arc-chapter-list a:hover { background:#38252b !important; border-color:#d3a76b !important; color:#fff1d8; }
.manga-page .arc-reading-link > small { display:block; margin-top:14px; }
.manga-page .reading-volume-fold > summary { display:flex; align-items:center; gap:12px; cursor:pointer; list-style:none; color:#f0dfc6; font-size:20px; font-weight:700; }
.manga-page .reading-volume-fold > summary::-webkit-details-marker { display:none; }
.manga-page .reading-volume-fold > summary small { margin-left:auto; font-weight:400; white-space:nowrap; }
.manga-page .reading-volume-fold > summary::after { content:'+'; color:#deb778; font:22px/1 Arial,sans-serif; }
.manga-page .reading-volume-fold[open] > summary::after { content:'−'; }
.manga-page .reading-volume-fold[open] > summary { margin-bottom:16px; }
.manga-page .reading-volume-fold[open] { border-color:#b98a4966; }
@media(max-width:380px) { .manga-page .arc-chapter-list { grid-template-columns:1fr; } .manga-page .reading-volume { padding:14px; } }
.manga-page .arc-row.arc-complete { border-color:#ae844a; }
.manga-page .arc-complete .arc-progress-toggle { background:#302a1c; border-color:#9a7e48; color:#f0d298; }
.manga-page .archive-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; border:0; background:none; }
.manga-page .archive-panel { display:flex; flex-direction:column; padding:34px 30px; min-height:280px; border:1px solid #403238; border-radius:18px; background:radial-gradient(ellipse at 100% 0,#671a2930,transparent 70%),#101012; }
.manga-page .archive-panel::before { content:'01 / ДОСЬЄ'; display:block; color:var(--manga-gold); letter-spacing:.13em; font-size:11px; margin-bottom:24px; }
.manga-page .archive-panel:nth-child(2)::before { content:'02 / ЛІТОПИС'; }
.manga-page .archive-panel:nth-child(3)::before { content:'03 / ГРИМУАР'; }
.manga-page .archive-panel h3 { font-size:25px; margin:0 0 15px; color:#f4e6d3; }
.manga-page .archive-panel p { font-size:16px; line-height:1.75; color:#aca29a; margin:0 0 25px; }
.manga-page .archive-panel a { margin-top:auto; color:var(--manga-gold); text-decoration:none; width:fit-content; border-bottom:1px solid #906a3a; padding-bottom:5px; }
.manga-page .atlas-context-menu { width:min(1280px,calc(100% - 64px)); box-sizing:border-box; margin:24px auto; border-radius:12px; padding:20px 24px; background:#101012; }
.manga-page :is(a,button,summary):focus-visible { outline:2px solid var(--manga-gold); outline-offset:4px; }
@media(max-width:900px) {
 .manga-page .archive-page-hero { min-height:540px; }
 .manga-page .arc-row img { height:210px; }
 .manga-page .arc-row > div:not(.arc-row__number) { padding:24px; }
 .manga-page .archive-grid { grid-template-columns:1fr; }
 .manga-page .archive-panel { min-height:0; }
}
@media(max-width:600px) {
 .manga-page .archive-page-hero { padding:90px 22px 40px; min-height:560px; }
 .manga-page .archive-page-hero h1 { font-size:clamp(38px,11vw,60px); }
 .manga-page .archive-page-hero p { font-size:16px; }
 .manga-page .archive-section { width:calc(100% - 32px); margin:72px auto; }
 .manga-page .atlas-context-menu { width:calc(100% - 32px); }
 .manga-page .arc-list { grid-template-columns:1fr; gap:20px; }
 .manga-page .arc-row img { height:220px; }
 .manga-page .reading-progress-note { padding:24px; gap:20px; grid-template-columns:1fr; }
 .manga-page .reading-count { font-size:30px; }
 .manga-page .reading-progress-note h3 { font-size:22px; }
}
@media(prefers-reduced-motion:reduce) {
 .manga-page .arc-row,.manga-page .arc-row img,.manga-page .manga-start { transition:none; transform:none; }
}
.manga-page .arc-list.arc-list-packed { grid-auto-rows:1px; row-gap:0; align-items:start; }
.manga-page .arc-list.arc-list-packed > .arc-row { align-self:start; height:auto; min-height:0; }