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

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

html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}

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

  -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;
}

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


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

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

  background:var(--ink);

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


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

header.site-header{
  display:grid;
  grid-template-columns:43% 57%;

  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);

  min-width:0;
}

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

  min-width:0;

  padding:14px 16px;

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

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

  width:100%;
}

.logo-holder img{
  display:block;

  width:100%;
  max-width:325px;
  height:auto;

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

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


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

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

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

  padding:10px 8px;

  overflow:hidden;
}

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

  max-width:100%;

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

  font-size:20px;
  font-weight:800;
  line-height:1.1;

  color:#f1efe9;

  text-align:center;

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


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

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

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


/* =========================================================
   SERIES INFORMATION
========================================================= */

.series-info-box{
  display:flex;
  align-items:flex-start;

  width:100%;
  min-width:0;

  gap:25px;

  padding:20px 20px 10px;

  margin:0;

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


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

.series-cover{
  flex:0 0 190px;

  width:190px;
  min-width:190px;

  background:#201f25;

  border-radius:8px;

  overflow:hidden;
}

.series-cover img{
  display:block;

  width:100%;
  height:auto;

  aspect-ratio:2 / 3;

  object-fit:cover;

  border-radius:8px;

  background:var(--cover-bg);

  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.15),
    0 6px 16px rgba(0,0,0,.4);
}


/* =========================================================
   SERIES DETAILS
========================================================= */

.series-details{
  flex:1 1 auto;

  min-width:0;

  display:flex;
  flex-direction:column;

  padding:0;
}

.series-details h1{
  margin:0 0 14px;

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

  font-size:32px;
  font-weight:800;

  line-height:1.2;

  color:#f1efe9;

  text-transform:uppercase;

  overflow-wrap:anywhere;
}


/* =========================================================
   SERIES META
========================================================= */

.series-meta{
  display:flex;

  flex-wrap:wrap;

  gap:10px;

  width:100%;
}

.meta-item{
  display:block;

  width:auto;
  max-width:100%;

  padding:9px 12px;

  border-radius:8px;

  border:1px solid rgba(255,255,255,.10);

  background:rgba(255,255,255,.04);

  font-size:13px;

  line-height:1.4;

  overflow-wrap:anywhere;
}

.meta-label{
  font-weight:700;
}


/* =========================================================
   GENRE SECTION
========================================================= */

.genre-section{
  width:100%;
  min-width:0;

  padding:10px 20px 12px;

  margin:0;

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

.section-title{
  margin:0 0 9px;

  font-size:18px;
  font-weight:700;

  line-height:1.3;
}

.genre-list{
  display:flex;

  flex-wrap:wrap;

  gap:7px;

  width:100%;
}

.genre-card{
  display:inline-flex;

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

  padding:7px 13px;

  border-radius:8px;

  border:1px solid rgba(255,255,255,.12);

  background:rgba(255,255,255,.04);

  font-size:13px;
  font-weight:600;

  line-height:1.3;
}


/* =========================================================
   SUMMARY
========================================================= */

.summary-section{
  width:100%;
  min-width:0;

  margin:0;

  padding:13px 20px;

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

  background:rgba(255,255,255,.035);
}

.summary-title{
  margin:0 0 8px;

  font-size:19px;
  font-weight:700;

  line-height:1.3;
}

.summary-text{
  margin:0;

  font-size:14px;

  line-height:1.6;

  color:#f1efe9;

  opacity:.9;
}


/* =========================================================
   CHAPTER SECTION
========================================================= */

.chapter-section{
  display:block !important;

  width:100%;
  min-width:0;

  margin:0;

  padding:0;

  border-radius:10px;

  border:1px solid rgba(255,255,255,.10);

  background:rgba(255,255,255,.035);

  box-sizing:border-box;

  overflow:hidden;
}

.chapter-section h2{
  display:block !important;

  width:100%;

  margin:0;

  padding:18px 20px 14px;

  font-size:22px;

  font-weight:700;

  line-height:1.3;
}


/* =========================================================
   CHAPTER CONTROLS
========================================================= */

.chapter-controls{
  display:flex;

  width:100%;

  gap:10px;

  margin:0;

  padding:0 10px 18px;

  flex-wrap:wrap;

  box-sizing:border-box;
}


/* =========================================================
   CHAPTER SEARCH
========================================================= */

.chapter-search{
  flex:1 1 200px;

  min-width:0;

  width:auto;

  height:44px;

  padding:10px 13px;

  border:1px solid rgba(255,255,255,.18);

  border-radius:7px;

  background:#25252b;

  color:#f5f5f7;

  font-family:inherit;

  font-size:14px;

  outline:none;

  box-sizing:border-box;

  box-shadow:0 2px 8px rgba(0,0,0,.20);

  appearance:none;
  -webkit-appearance:none;

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

.chapter-search::placeholder{
  color:rgba(255,255,255,.55);
}

.chapter-search:hover{
  border-color:rgba(255,255,255,.25);
}

.chapter-search:focus{
  border-color:rgba(255,255,255,.35);

  background:#292930;

  box-shadow:
    0 0 0 2px rgba(201,56,44,.18),
    0 3px 10px rgba(0,0,0,.25);
}


/* =========================================================
   CHAPTER SELECT
========================================================= */

.chapter-select{
  flex:0 0 190px;

  width:190px;

  height:44px;

  padding:10px 13px;

  border:1px solid rgba(255,255,255,.18);

  border-radius:7px;

  background:#25252b;

  color:#f5f5f7;

  font-family:inherit;

  font-size:14px;

  outline:none;

  box-sizing:border-box;

  box-shadow:0 2px 8px rgba(0,0,0,.20);

  cursor:pointer;

  appearance:auto;
  -webkit-appearance:auto;

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

.chapter-select:hover{
  border-color:rgba(255,255,255,.25);
}

.chapter-select:focus{
  border-color:rgba(255,255,255,.35);

  background:#292930;

  box-shadow:
    0 0 0 2px rgba(201,56,44,.18),
    0 3px 10px rgba(0,0,0,.25);
}

.chapter-select option{
  background:#25252b;
  color:#f5f5f7;
}


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

.chapter-list{
  display:grid;

  grid-template-columns:repeat(2,minmax(0,1fr));

  gap:8px;

  width:100%;
  min-width:0;

  margin:0;
  padding:10px;

  list-style:none;

  background:#201f25;
}

.chapter-list li{
  display:block;

  width:100%;
  min-width:0;

  margin:0;
  padding:0;
}


/* =========================================================
   CHAPTER CARD
========================================================= */

.chapter-list li a,
.chapter-link{
  position:relative;

  display:flex !important;

  flex-direction:column !important;

  align-items:center !important;

  justify-content:center !important;

  width:100% !important;
  min-width:0 !important;

  min-height:68px !important;

  height:auto !important;

  padding:8px 10px !important;

  margin:0 !important;

  border-radius:7px;

  border:1px solid rgba(255,255,255,.10);

  background:var(--card);

  color:#f1efe9 !important;

  text-decoration:none;

  overflow:hidden;

  box-sizing:border-box;

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


/* =========================================================
   ALTERNATING CHAPTER CARDS
========================================================= */

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


/* =========================================================
   CHAPTER HOVER
========================================================= */

.chapter-list li a:hover,
.chapter-link:hover{
  background:var(--stamp) !important;

  border-color:var(--stamp);

  color:#fff !important;
}


/* =========================================================
   CHAPTER NUMBER
========================================================= */

.chapter-link .chapter-number,
.chapter-list li a .chapter-number{
  display:block !important;

  width:100% !important;
  min-width:0 !important;

  height:auto !important;

  margin:0 0 3px !important;
  padding:0 !important;

  text-align:center !important;

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

  font-size:17px !important;
  font-weight:800 !important;

  line-height:1.2 !important;

  color:#f1efe9 !important;

  visibility:visible !important;
  opacity:1 !important;

  white-space:nowrap !important;

  overflow:hidden !important;

  text-overflow:ellipsis !important;

  flex:none !important;
}


/* =========================================================
   CHAPTER TITLE
========================================================= */

.chapter-link .chapter-name,
.chapter-list li a .chapter-name{
  display:-webkit-box !important;

  width:100% !important;
  min-width:0 !important;

  height:auto !important;

  margin:0 0 3px !important;
  padding:0 !important;

  text-align:center !important;

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

  font-size:12px !important;
  font-weight:600 !important;

  line-height:1.3 !important;

  color:#f1efe9 !important;

  visibility:visible !important;
  opacity:.92 !important;

  white-space:normal !important;

  overflow:hidden !important;

  overflow-wrap:anywhere !important;
  word-break:break-word !important;

  -webkit-box-orient:vertical !important;
  -webkit-line-clamp:2 !important;

  flex:none !important;
}


/* =========================================================
   CHAPTER DATE
========================================================= */

.chapter-link .chapter-date,
.chapter-list li a .chapter-date{
  display:block !important;

  width:100% !important;
  min-width:0 !important;

  height:auto !important;

  margin:0 !important;
  padding:0 !important;

  text-align:left !important;

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

  font-size:10px !important;
  font-weight:400 !important;

  line-height:1.2 !important;

  color:var(--muted) !important;

  visibility:visible !important;
  opacity:.65 !important;

  white-space:nowrap !important;

  overflow:hidden !important;

  text-overflow:ellipsis !important;

  flex:none !important;
}


/* =========================================================
   CHAPTER HOVER TEXT
========================================================= */

.chapter-list li a:hover .chapter-number,
.chapter-list li a:hover .chapter-name,
.chapter-list li a:hover .chapter-date,

.chapter-link:hover .chapter-number,
.chapter-link:hover .chapter-name,
.chapter-link:hover .chapter-date{
  color:#fff !important;
  opacity:1 !important;
}


/* =========================================================
   LOADING / ERROR / NO RESULTS
========================================================= */

.loading,
.error,
.no-results{
  display:block !important;

  grid-column:1 / -1;

  width:100%;

  text-align:center;

  padding:30px 10px;

  margin:0;

  opacity:.7;
}

.error{
  color:#ff6b6b;
}


/* =========================================================
   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(
    .85rem,
    4.5vw,
    1.4rem
  );

  text-transform:uppercase;

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

  transition:
    background-color .12s ease,
    color .12s 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:14px;

  font-size:.78rem;

  color:var(--muted);

  letter-spacing:.5px;
}


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

@media(max-width:600px){

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


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

  .logo-holder{
    padding:10px 10px;
  }

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

  .site-title-wrap{
    padding:8px 6px;

    overflow:visible;
  }

  .site-title{
    width:max-content;
    max-width:100%;

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

    line-height:1.05;

    white-space:nowrap;

    overflow:visible;
  }


  /* =========================
     SERIES INFORMATION
  ========================= */

  .series-info-box{
    gap:14px;

    padding:15px 15px 8px;
  }

  .series-cover{
    flex:0 0 120px;

    width:120px;
    min-width:120px;
  }

  .series-cover img{
    border-radius:7px;
  }

  .series-details{
    min-width:0;
  }

  .series-details h1{
    font-size:23px;

    line-height:1.2;

    margin-bottom:10px;
  }

  .series-meta{
    display:block;

    width:100%;
  }

  .meta-item{
    width:100%;

    margin-bottom:7px;

    padding:7px 9px;

    font-size:12px;
  }


  /* =========================
     GENRE
  ========================= */

  .genre-section{
    padding:8px 15px 10px;
  }

  .section-title{
    font-size:17px;

    margin-bottom:8px;
  }

  .genre-list{
    gap:6px;
  }

  .genre-card{
    padding:6px 10px;

    font-size:12px;
  }


  /* =========================
     SUMMARY
  ========================= */

  .summary-section{
    padding:11px 15px;
  }

  .summary-title{
    font-size:18px;

    margin-bottom:7px;
  }

  .summary-text{
    font-size:13px;

    line-height:1.55;
  }


  /* =========================
     CHAPTER SECTION
  ========================= */

  .chapter-section{
    width:100%;

    margin:0;

    border-radius:8px;
  }

  .chapter-section h2{
    font-size:20px;

    padding:14px 15px 12px;
  }


  /* =========================
     CHAPTER CONTROLS
  ========================= */

  .chapter-controls{
    display:flex;

    flex-direction:column;

    width:100%;

    gap:8px;

    margin:0;

    padding:0 8px 14px;
  }

  .chapter-search,
  .chapter-select{
    flex:none;

    width:100%;

    min-width:0;

    height:43px;

    font-size:13px;
  }

  .chapter-search{
    padding:9px 12px;
  }

  .chapter-select{
    padding:9px 12px;
  }


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

  .chapter-list{
    grid-template-columns:1fr;

    gap:8px;

    padding:8px;
  }


  /* =========================
     CHAPTER CARD
  ========================= */

  .chapter-list li a,
  .chapter-link{
    width:100% !important;

    min-height:66px !important;

    height:auto !important;

    padding:7px 10px !important;

    border-radius:7px;
  }

  .chapter-link .chapter-number,
  .chapter-list li a .chapter-number{
    font-size:16px !important;

    font-weight:800 !important;

    line-height:1.2 !important;

    margin-bottom:3px !important;
  }

  .chapter-link .chapter-name,
  .chapter-list li a .chapter-name{
    font-size:11px !important;

    font-weight:600 !important;

    line-height:1.3 !important;

    margin-bottom:3px !important;

    -webkit-line-clamp:2 !important;
  }

  .chapter-link .chapter-date,
  .chapter-list li a .chapter-date{
    font-size:9px !important;

    line-height:1.2 !important;

    text-align:left !important;
  }
}


/* =========================================================
   VERY SMALL PHONES
========================================================= */

@media(max-width:380px){

  .series-info-box{
    gap:11px;

    padding:13px 12px 7px;
  }

  .series-cover{
    flex:0 0 105px;

    width:105px;
    min-width:105px;
  }

  .series-details h1{
    font-size:20px;
  }

  .meta-item{
    padding:6px 8px;

    font-size:11px;
  }

  .genre-section{
    padding:7px 12px 9px;
  }

  .summary-section{
    padding:10px 12px;
  }

  .chapter-section h2{
    font-size:19px;

    padding:13px 12px 11px;
  }

  .chapter-controls{
    gap:7px;

    padding:0 7px 13px;
  }

  .chapter-search,
  .chapter-select{
    height:41px;

    font-size:12px;
  }

  .chapter-list{
    gap:7px;

    padding:7px;
  }

  .chapter-list li a,
  .chapter-link{
    min-height:63px !important;

    padding:6px 9px !important;
  }

  .chapter-link .chapter-number,
  .chapter-list li a .chapter-number{
    font-size:15px !important;
  }

  .chapter-link .chapter-name,
  .chapter-list li a .chapter-name{
    font-size:10px !important;

    line-height:1.25 !important;
  }

  .chapter-link .chapter-date,
  .chapter-list li a .chapter-date{
    font-size:8px !important;
  }
}


/* =========================================================
   TABLET
========================================================= */

@media(min-width:601px) 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;
  }


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

  .series-info-box{
    gap:20px;

    padding:20px 20px 10px;
  }

  .series-cover{
    flex:0 0 180px;

    width:180px;
    min-width:180px;
  }

  .series-details h1{
    font-size:28px;
  }

  .meta-item{
    padding:8px 10px;

    font-size:12px;
  }


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

  .chapter-controls{
    gap:8px;

    padding:0 8px 16px;
  }

  .chapter-search{
    flex:1 1 160px;

    height:42px;

    font-size:13px;
  }

  .chapter-select{
    flex:0 0 180px;

    width:180px;

    height:42px;

    font-size:13px;
  }

  .chapter-list{
    grid-template-columns:repeat(
      2,
      minmax(0,1fr)
    );

    gap:8px;

    padding:8px;
  }

  .chapter-list li a,
  .chapter-link{
    min-height:58px !important;

    padding:7px 8px !important;
  }

  .chapter-link .chapter-number,
  .chapter-list li a .chapter-number{
    font-size:15px !important;
  }

  .chapter-link .chapter-name,
  .chapter-list li a .chapter-name{
    font-size:11px !important;
  }

  .chapter-link .chapter-date,
  .chapter-list li a .chapter-date{
    font-size:9px !important;
  }
}


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

@media(min-width:801px){

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

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

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

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

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

  .site-title{
    font-size:clamp(
      1.8rem,
      3vw,
      3rem
    );
  }


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

  .series-info-box{
    gap:30px;

    padding:25px 25px 10px;
  }

  .series-cover{
    flex:0 0 200px;

    width:200px;
    min-width:200px;
  }

  .series-details h1{
    font-size:36px;
  }

  .meta-item{
    padding:10px 14px;

    font-size:14px;
  }


  /* =========================
     GENRE
  ========================= */

  .genre-section{
    padding:10px 25px 13px;
  }

  .section-title{
    font-size:20px;
  }

  .genre-card{
    padding:8px 15px;

    font-size:14px;
  }


  /* =========================
     SUMMARY
  ========================= */

  .summary-section{
    padding:14px 25px;
  }

  .summary-title{
    font-size:20px;

    margin-bottom:8px;
  }

  .summary-text{
    font-size:15px;

    line-height:1.6;

    max-width:1000px;
  }


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

  .chapter-section h2{
    font-size:24px;

    padding:18px 25px 14px;
  }

  .chapter-controls{
    gap:10px;

    padding:0 12px 20px;
  }

  .chapter-search{
    height:44px;

    font-size:14px;
  }

  .chapter-select{
    flex:0 0 210px;

    width:210px;

    height:44px;

    font-size:14px;
  }

  .chapter-list{
    grid-template-columns:repeat(
      4,
      minmax(0,1fr)
    );

    gap:10px;

    padding:12px;
  }

  .chapter-list li a,
  .chapter-link{
    min-height:68px !important;

    padding:8px 10px !important;
  }

  .chapter-link .chapter-number,
  .chapter-list li a .chapter-number{
    font-size:17px !important;
  }

  .chapter-link .chapter-name,
  .chapter-list li a .chapter-name{
    font-size:12px !important;
  }

  .chapter-link .chapter-date,
  .chapter-list li a .chapter-date{
    font-size:10px !important;
  }


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

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

    font-size:1.3rem;
  }

  .copyright{
    padding:18px;

    font-size:.85rem;
  }
}


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

@media(min-width:1200px){

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

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

  .series-info-box{
    gap:35px;

    padding:30px 30px 12px;
  }

  .series-cover{
    flex-basis:220px;

    width:220px;
    min-width:220px;
  }

  .series-details h1{
    font-size:40px;
  }

  .chapter-list{
    gap:10px;

    padding:14px;
  }

  .chapter-list li a,
  .chapter-link{
    min-height:72px !important;
  }
}


/* =========================================================
   CLICK / TAP FEEDBACK
========================================================= */

a:active{
  color:#fff;
}

.chapter-list li a:active,
.chapter-link:active{
  background:var(--stamp) !important;

  border-color:var(--stamp);

  color:#fff !important;
}

.chapter-list li a:active .chapter-number,
.chapter-list li a:active .chapter-name,
.chapter-list li a:active .chapter-date,

.chapter-link:active .chapter-number,
.chapter-link:active .chapter-name,
.chapter-link:active .chapter-date{
  color:#fff !important;

  opacity:1 !important;
}

.footer-links a:active{
  background:var(--stamp);

  color:#fff;
}


/* =========================================================
   PROTECTION
========================================================= */

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

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


/* =========================================================
   VOLUME LIST — SAME AS CHAPTER LIST
========================================================= */

.volume-list{
  display:grid;

  grid-template-columns:repeat(2,minmax(0,1fr));

  gap:8px;

  width:100%;
  min-width:0;

  margin:0;
  padding:10px;

  list-style:none;

  background:#201f25;
}

.volume-list li{
  display:block;

  width:100%;
  min-width:0;

  margin:0;
  padding:0;
}


/* =========================================================
   VOLUME CARD — SAME AS CHAPTER CARD
========================================================= */

.volume-list li a,
.volume-link{
  position:relative;

  display:flex !important;

  flex-direction:column !important;

  align-items:center !important;

  justify-content:center !important;

  width:100% !important;
  min-width:0 !important;

  min-height:68px !important;

  height:auto !important;

  padding:8px 10px !important;

  margin:0 !important;

  border-radius:7px;

  border:1px solid rgba(255,255,255,.10);

  background:var(--card);

  color:#f1efe9 !important;

  text-decoration:none;

  overflow:hidden;

  box-sizing:border-box;

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


/* =========================================================
   ALTERNATING VOLUME CARDS
========================================================= */

.volume-list li:nth-child(even) a,
.volume-list li:nth-child(even) .volume-link{
  background:var(--card-alt);
}


/* =========================================================
   VOLUME HOVER
========================================================= */

.volume-list li a:hover,
.volume-link:hover{
  background:var(--stamp) !important;

  border-color:var(--stamp);

  color:#fff !important;
}


/* =========================================================
   VOLUME NUMBER
========================================================= */

.volume-link .volume-number,
.volume-list li a .volume-number{
  display:block !important;

  width:100% !important;
  min-width:0 !important;

  height:auto !important;

  margin:0 0 3px !important;
  padding:0 !important;

  text-align:center !important;

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

  font-size:17px !important;
  font-weight:800 !important;

  line-height:1.2 !important;

  color:#f1efe9 !important;

  visibility:visible !important;
  opacity:1 !important;

  white-space:nowrap !important;

  overflow:hidden !important;

  text-overflow:ellipsis !important;

  flex:none !important;
}


/* =========================================================
   VOLUME TITLE
========================================================= */

.volume-link .volume-name,
.volume-list li a .volume-name{
  display:-webkit-box !important;

  width:100% !important;
  min-width:0 !important;

  height:auto !important;

  margin:0 0 3px !important;
  padding:0 !important;

  text-align:center !important;

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

  font-size:12px !important;
  font-weight:600 !important;

  line-height:1.3 !important;

  color:#f1efe9 !important;

  visibility:visible !important;
  opacity:.92 !important;

  white-space:normal !important;

  overflow:hidden !important;

  overflow-wrap:anywhere !important;
  word-break:break-word !important;

  -webkit-box-orient:vertical !important;
  -webkit-line-clamp:2 !important;

  flex:none !important;
}


/* =========================================================
   VOLUME DATE
========================================================= */

.volume-link .volume-date,
.volume-list li a .volume-date{
  display:block !important;

  width:100% !important;
  min-width:0 !important;

  height:auto !important;

  margin:0 !important;
  padding:0 !important;

  text-align:left !important;

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

  font-size:10px !important;
  font-weight:400 !important;

  line-height:1.2 !important;

  color:var(--muted) !important;

  visibility:visible !important;
  opacity:.65 !important;

  white-space:nowrap !important;

  overflow:hidden !important;

  text-overflow:ellipsis !important;

  flex:none !important;
}


/* =========================================================
   VOLUME HOVER TEXT
========================================================= */

.volume-list li a:hover .volume-number,
.volume-list li a:hover .volume-name,
.volume-list li a:hover .volume-date,

.volume-link:hover .volume-number,
.volume-link:hover .volume-name,
.volume-link:hover .volume-date{
  color:#fff !important;

  opacity:1 !important;
}

@media(max-width:600px){

  .volume-list{
    grid-template-columns:1fr;

    gap:8px;

    padding:8px;
  }

  .volume-list li a,
  .volume-link{
    min-height:66px !important;

    padding:7px 10px !important;

    border-radius:7px;
  }

  .volume-link .volume-number,
  .volume-list li a .volume-number{
    font-size:16px !important;
  }

  .volume-link .volume-name,
  .volume-list li a .volume-name{
    font-size:11px !important;
  }

  .volume-link .volume-date,
  .volume-list li a .volume-date{
    font-size:9px !important;
  }
}


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

  .volume-list{
    grid-template-columns:repeat(2,minmax(0,1fr));

    gap:8px;

    padding:8px;
  }

  .volume-list li a,
  .volume-link{
    min-height:58px !important;

    padding:7px 8px !important;
  }

  .volume-link .volume-number,
  .volume-list li a .volume-number{
    font-size:15px !important;
  }

  .volume-link .volume-name,
  .volume-list li a .volume-name{
    font-size:11px !important;
  }

  .volume-link .volume-date,
  .volume-list li a .volume-date{
    font-size:9px !important;
  }
}


@media(min-width:801px){

  .volume-list{
    grid-template-columns:repeat(4,minmax(0,1fr));

    gap:10px;

    padding:12px;
  }

  .volume-list li a,
  .volume-link{
    min-height:68px !important;

    padding:8px 10px !important;
  }

  .volume-link .volume-number,
  .volume-list li a .volume-number{
    font-size:17px !important;
  }

  .volume-link .volume-name,
  .volume-list li a .volume-name{
    font-size:12px !important;
  }

  .volume-link .volume-date,
  .volume-list li a .volume-date{
    font-size:10px !important;
  }
}


@media(min-width:1200px){

  .volume-list{
    gap:10px;

    padding:14px;
  }

  .volume-list li a,
  .volume-link{
    min-height:72px !important;
  }
}