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

  --colL:43%;
  --colR:57%;
}

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

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

  display:flex;
  justify-content:center;
}

a{
  color:inherit;
  text-decoration:none;
}


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

.site-wrap{
  width:100%;
  max-width:480px;
  background:var(--ink);
  min-height:100vh;
  box-shadow:0 0 60px rgba(0,0,0,0.6);
}


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

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

  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:14px 16px;

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

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

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

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


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

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

  min-width:0;
  max-width:100%;

  padding:10px 8px;

  box-sizing:border-box;
  overflow:hidden;
}

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

  font-family:'Inter',sans-serif;
  font-size:20px;
  font-weight:800;
  line-height:1.1;

  color:#f1efe9;

  white-space:normal;
  overflow-wrap:break-word;
  word-break:normal;

  letter-spacing:0;

  max-width:100%;
  box-sizing:border-box;
}


/* =========================
   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:16px;

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

.cover-link{
  width:100%;

  aspect-ratio:2 / 3;

  border-radius:6px;
  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 6px 16px rgba(0,0,0,0.4);

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

  transition:
    box-shadow .2s ease,
    transform .2s ease;
}

.cover-link:hover{
  transform:translateY(-2px);

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

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

  object-fit:cover;

  display:block;
}

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

  text-align:center;

  padding:10px;
}


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

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


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

.series-name{
  background:#0f0e12;

  padding:14px 16px;

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

  font-size:clamp(
    0.95rem,
    4vw,
    1.5rem
  );

  text-transform:uppercase;
  letter-spacing:0.5px;

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

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

  text-align:center;

  color:#f1efe9;
  text-decoration:none;
}

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


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

.chapter-list{
  list-style:none;
}

.chapter-list li a{
  display:flex;

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

  gap:12px;

  padding:14px 16px;

  font-weight:600;

  font-size:clamp(
    0.85rem,
    3.6vw,
    1.25rem
  );

  background:var(--panel);

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

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

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

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

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

.chapter-date{
  font-size:0.7em;
  font-weight:600;

  color:var(--muted);

  white-space:nowrap;
  flex-shrink:0;
}

.chapter-list li a:hover .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:18px 6px;

  text-align:center;

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

  font-size:clamp(
    0.85rem,
    4.5vw,
    1.4rem
  );

  text-transform:uppercase;

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

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

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

.copyright{
  text-align:center;

  padding:14px;

  font-size:0.78rem;

  color:var(--muted);

  letter-spacing:0.5px;
}


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

@media (max-width:560px){

  .logo-holder{
    padding:10px 10px;
    min-width:0;
  }

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

  .site-title-wrap{
    display:flex;

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

    min-width:0;
    width:100%;

    padding:8px 6px;

    overflow:visible;
  }

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

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

    font-weight:800;

    font-size:clamp(
      10px,
      4.2vw,
      20px
    );

    line-height:1.05;

    letter-spacing:0;

    color:#f1efe9;

    white-space:nowrap;

    overflow:visible;

    text-overflow:clip;

    min-width:0;

    width:max-content;

    max-width:100%;
  }
}