@media (min-width: 561px) {

:root{
--ink:#1a1a1f;
--panel:#37353d;
--panel-alt:#403e46;
--cover-bg:#e7e5df;
--muted:#a9a5ac;
--stamp:#c9382c;
--dot:rgba(255,255,255,0.045);

--colL:30%;
--colR:70%;
}

*{
box-sizing:border-box;
margin:0;
padding:0;
}

html,
body{
min-height:100%;
}

body{
background:#0c0c0f;
color:#f1efe9;
font-family:'Inter',sans-serif;

display:flex;
justify-content:center;

-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
}

a{
color:inherit;
text-decoration:none;
-webkit-tap-highlight-color:transparent;
}

/* =========================
DESKTOP SITE WRAPPER
========================= */

.site-wrap{
width:100%;
max-width:1100px;
min-height:100vh;

background:var(--ink);

box-shadow:0 0 60px rgba(0,0,0,0.6);
}

/* =========================
HEADER
========================= */

header.site-header{
display:grid;
grid-template-columns:var(--colL) var(--colR);

min-height:125px;

background:
radial-gradient(
var(--dot) 1.2px,
transparent 1.2px
) 0 0/10px 10px,

linear-gradient(
  135deg,
  #2a2830,
  #161519
);

border-bottom:3px solid var(--stamp);
}

.logo-holder{
display:flex;
align-items:center;
justify-content:flex-start;

padding:20px 28px;

border-right:1px solid rgba(255,255,255,0.08);
}

.logo-holder a{
display:flex;
align-items:center;
width:100%;
}

.logo-holder img{
width:100%;
max-width:280px;
height:auto;

aspect-ratio:650 / 223;
object-fit:contain;
}

/* =========================
SITE TITLE
========================= */

.site-title-wrap{
display:flex;
align-items:center;
justify-content:center;

min-width:0;

padding:20px 30px;
}

.site-title{
margin:0;
padding:0;

font-family:'Inter',sans-serif;

font-size:clamp(
1.8rem,
3vw,
3rem
);

font-weight:800;
line-height:1.1;

color:#f1efe9;

text-align:center;

white-space:nowrap;

overflow:hidden;
text-overflow:ellipsis;

max-width:100%;
}

/* =========================
MAIN
========================= */

main{
display:flex;
flex-direction:column;
}

/* =========================
SERIES CARD
========================= */

.series-card{
display:grid;

grid-template-columns:var(--colL) var(--colR);

border-bottom:1px solid rgba(255,255,255,0.06);
}

/* =========================
COVER
========================= */

.cover-cell{
background:#201f25;

padding:25px;

display:flex;
align-items:center;
justify-content:center;
}

.cover-link{
width:100%;
max-width:300px;

aspect-ratio:2 / 3;

border-radius:8px;
overflow:hidden;

position:relative;

background:var(--cover-bg);

border:3px solid rgba(255,255,255,0.35);

box-shadow:
inset 0 0 0 1px rgba(0,0,0,0.15),
0 8px 22px rgba(0,0,0,0.45);

display:flex;
align-items:center;
justify-content:center;

transition:
background-color .15s ease,
border-color .15s ease,
box-shadow .15s ease;
}

.cover-link:hover{
border-color:var(--stamp);

box-shadow:
inset 0 0 0 2px var(--stamp),
0 10px 25px rgba(0,0,0,0.5);
}

.cover-link:active{
background:var(--stamp);
}

.cover-link img{
width:100%;
height:100%;

object-fit:cover;

display:block;

-webkit-user-drag:none;
user-drag:none;
}

.cover-link span{
font-size:.8rem;
color:#8a8781;

text-align:center;
padding:10px;
}

/* =========================
SERIES INFO
========================= */

.info-cell{
display:flex;
flex-direction:column;

min-width:0;
}

/* =========================
SERIES NAME
========================= */

.series-name{
background:#0f0e12;

min-height:80px;

padding:18px 24px;

font-family:'Inter',sans-serif;

font-weight:800;

font-size:clamp(
1.2rem,
2.2vw,
2rem
);

text-transform:uppercase;

letter-spacing:.5px;

border-bottom:1px solid rgba(255,255,255,0.08);

display:flex;
align-items:center;
justify-content:center;

text-align:center;

color:#f1efe9;

white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;

transition:
background-color .15s ease,
color .15s ease;
}

.series-name:hover{
color:var(--stamp);
}

.series-name:active{
background:var(--stamp);
color:#fff;
}

/* =========================
CHAPTER LIST
========================= */

.chapter-list{
list-style:none;

display:flex;
flex-direction:column;

flex:1;
}

.chapter-list li{
display:flex;
flex:1;
}

.chapter-list li a{
display:flex;
flex:1;

align-items:center;
justify-content:space-between;

gap:20px;

min-height:65px;

padding:16px 24px;

font-weight:600;

font-size:clamp(
1rem,
1.6vw,
1.35rem
);

background:var(--panel);

border-bottom:1px solid rgba(255,255,255,0.05);

transition:
background-color .15s ease,
color .15s ease;
}

.chapter-list li:nth-child(even) a{
background:var(--panel-alt);
}

.chapter-list li a:hover{
background:var(--stamp);
color:#fff;
}

.chapter-list li a:active{
background:var(--stamp);
color:#fff;
}

.chapter-title,
.volume-title{
overflow:hidden;

text-overflow:ellipsis;

white-space:nowrap;

min-width:0;
}

.chapter-date{
font-size:.75em;

font-weight:600;

color:var(--muted);

white-space:nowrap;

flex-shrink:0;
}

.chapter-list li a:hover .chapter-date,
.chapter-list li a:active .chapter-date{
color:#fff;
}

/* =========================
FOOTER
========================= */

footer{
background:#0f0e12;

border-top:3px solid var(--stamp);
}

.footer-links{
display:grid;

grid-template-columns:repeat(3,1fr);
}

.footer-links a{
padding:22px 10px;

text-align:center;

font-family:'Anton',sans-serif;

font-size:1.3rem;

text-transform:uppercase;

border-right:1px solid rgba(255,255,255,0.1);

transition:
background-color .15s ease,
color .15s ease;
}

.footer-links a:last-child{
border-right:none;
}

.footer-links a:hover,
.footer-links a:active{
background:var(--stamp);
color:#fff;
}

.copyright{
text-align:center;

padding:18px;

font-size:.85rem;

color:var(--muted);

letter-spacing:.5px;
}

/* =========================
LARGE DESKTOP
========================= */

@media (min-width:1200px){

.site-wrap{
max-width:1200px;
}

header.site-header{
min-height:140px;
}

.cover-cell{
padding:30px;
}

.cover-link{
max-width:320px;
}

.series-name{
min-height:90px;
}

.chapter-list li a{
min-height:72px;
}
}

/* =========================
TABLET / SMALL DESKTOP
========================= */

@media (min-width:561px) and (max-width:800px){

.site-wrap{
max-width:800px;
}

header.site-header{
min-height:105px;
}

.logo-holder{
padding:16px 20px;
}

.logo-holder img{
max-width:220px;
}

.site-title-wrap{
padding:16px 20px;
}

.site-title{
font-size:1.5rem;
}

.cover-cell{
padding:20px;
}

.series-name{
min-height:65px;
padding:14px 18px;
font-size:1.15rem;
}

.chapter-list li a{
min-height:58px;
padding:14px 18px;
font-size:1rem;
}
}
}