*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top: calc(96px + env(safe-area-inset-top,0px)); }
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} *{transition:none!important} }

body{
  margin:0; background:var(--ink); color:var(--cream);
  font-family:var(--body); font-size:17px; line-height:1.75;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:var(--brass); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; }
a:hover{ color:var(--brass-hi); }
:focus-visible{ outline:2px solid var(--brass); outline-offset:3px; border-radius:var(--r-sm); }
.wrap{ width:min(var(--wrap), 100% - 40px); margin-inline:auto; }

/* ============ Header — CSS-only menu ============ */
.site-head{
  position:sticky; top:env(safe-area-inset-top,0px); z-index:60;
  background:var(--ink); border-bottom:2px solid var(--line);
}
.head-inner{ display:flex; flex-direction:column; align-items:center; gap:10px; padding:16px 0 12px; position:relative; }
.brand{ display:block; text-decoration:none; color:var(--cream); }
.brand svg{ width:150px; max-width:46vw; height:auto; margin-inline:auto; }

.nav-toggle{ position:absolute; opacity:0; width:1px; height:1px; pointer-events:none; }
.menu-btn{
  position:absolute; right:0; top:18px;
  display:inline-flex; align-items:center; gap:8px;
  border:1px solid var(--line); color:var(--cream);
  font:400 14px/1 var(--body); letter-spacing:.06em;
  padding:9px 14px; cursor:pointer; border-radius:var(--r-sm);
  user-select:none;
}
.menu-btn:hover{ border-color:var(--brass); color:var(--brass); }
.nav-toggle:focus-visible + .menu-btn{ outline:2px solid var(--brass); outline-offset:3px; }
.menu-btn svg{ width:18px; height:18px; display:block; }
.menu-btn .bars{ display:block; } .menu-btn .close{ display:none; }
.menu-btn .lbl-close{ display:none; }
.nav-toggle:checked + .menu-btn .bars{ display:none; }
.nav-toggle:checked + .menu-btn .close{ display:block; }
.nav-toggle:checked + .menu-btn .lbl-open{ display:none; }
.nav-toggle:checked + .menu-btn .lbl-close{ display:inline; }

nav ul{ list-style:none; display:flex; flex-wrap:wrap; justify-content:center; gap:2px 28px; margin:0; padding:0; }
nav a{ text-decoration:none; color:var(--slate); font-size:15.5px; padding:6px 2px; display:inline-block; }
nav a:hover, nav a[aria-current="page"]{ color:var(--cream); box-shadow:inset 0 -2px 0 var(--crimson); }

@media (max-width: 760px){
  #primary-nav{ display:none; width:100%; }
  .nav-toggle:checked ~ #primary-nav{ display:block; }
  nav ul{ flex-direction:column; align-items:stretch; gap:0; border-top:1px solid var(--line); margin-top:8px; }
  nav li{ border-bottom:1px solid var(--line); text-align:center; }
  nav a{ padding:13px 0; width:100%; }
}
@media (min-width: 761px){ .menu-btn{ display:none; } }

/* ============ Hero ============ */
.hero{
  text-align:center;
  padding: clamp(50px,7vw,86px) 0 clamp(40px,6vw,62px);
  background-color:var(--ink);
  background-image:
    linear-gradient(90deg, rgba(22,26,32,.78) 0%, rgba(22,26,32,.45) 55%, rgba(22,26,32,.25) 100%),
    linear-gradient(180deg, rgba(22,26,32,0) 40%, var(--ink) 94%),
    url("../images/cover.jpg");
  --cover-w: max(100%, 1100px);
  background-size: 100% 100%, var(--cover-w) calc(var(--cover-w) / 2), var(--cover-w) auto;
  background-position: 0 0, right top, right top;
  background-repeat: no-repeat;
  border-bottom:2px solid var(--line);
}
.hero h1{
  font-family:var(--display); font-weight:400;
  font-size:clamp(2rem, 5.6vw, 3.9rem); line-height:1.18;
  letter-spacing:.01em; word-spacing:.06em;
  margin:0 auto 20px; max-width:24ch;
  color:#FFF6E8;
  /* soft ink outline, the way an anime title card is set */
  text-shadow:
    -2px 0 0 #151826, 2px 0 0 #151826, 0 -2px 0 #151826, 0 2px 0 #151826,
    0 6px 22px rgba(0,0,0,.55);
}
.hero .kicker{ margin:0 auto 30px; max-width:62ch; color:var(--muted); font-size:clamp(1rem,2.2vw,1.12rem); }

.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

.search{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; width:min(660px,100%); margin:0 auto 16px; }
.search-field{ position:relative; flex:1 1 280px; min-width:0; display:flex; }
.search-icon{
  position:absolute; left:16px; top:50%; transform:translateY(-50%);
  width:19px; height:19px; color:var(--brass); pointer-events:none;
}
.search input{
  flex:1 1 auto; min-width:0; padding:15px 18px 15px 46px;
  font:400 16px/1.4 var(--body); color:var(--cream);
  background:var(--field); border:2px solid rgba(255,200,87,.35);
  border-radius:999px; transition:border-color .2s ease, box-shadow .2s ease;
}
.search input::placeholder{ color:#8E88A2; }
.search input:hover{ border-color:rgba(255,200,87,.6); }
.search input:focus{ outline:none; border-color:var(--brass); box-shadow:0 0 0 4px rgba(255,200,87,.18); }
.search button{
  flex:0 0 auto; padding:15px 30px; cursor:pointer;
  font-family:var(--display); font-size:15px; line-height:1.4; letter-spacing:.03em;
  color:#2A1020; background:var(--crimson); border:2px solid var(--crimson);
  border-radius:999px; transition:transform .15s ease, background .2s ease;
}
.search button span{ color:#FFF0F5; margin-right:4px; }
.search button:hover{ background:var(--crimson-hi); border-color:var(--crimson-hi); transform:translateY(-2px); }
@media (max-width:480px){ .search-field, .search button{ flex:1 1 100%; } }

/* genre chips under the search */
.chips{
  display:flex; flex-wrap:wrap; justify-content:center; gap:9px;
  list-style:none; padding:0; margin:0 auto 26px; max-width:620px;
}
.chips li{ margin:0; }
.chips a{
  display:inline-block; text-decoration:none;
  font-size:14px; line-height:1; padding:9px 16px;
  color:var(--muted); background:rgba(242,236,228,.05);
  border:1px solid var(--line); border-radius:999px;
  transition:color .2s ease, border-color .2s ease, background .2s ease;
}
.chips a:hover{ color:#2A1020; background:var(--brass); border-color:var(--brass); }

.cta{
  display:inline-block; cursor:pointer;
  font-family:var(--display); font-size:1.05rem; letter-spacing:.03em;
  color:var(--brass); background:transparent; border:2px solid var(--brass);
  padding:13px 34px; border-radius:999px;
  transition:transform .15s ease, background .2s ease, color .2s ease;
}
.cta:hover{ background:var(--brass); color:#151826; transform:translateY(-2px); }
.hero .hint{ display:block; margin-top:12px; font-size:14px; color:var(--slate); }

/* ============ Releases — CSS-only slider (scroll-snap) ============ */
.releases{ margin-top:clamp(40px,6vw,58px); text-align:left; }
.releases-head{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:14px; }
.releases h4{
  font-family:var(--display); font-weight:400; font-size:1.3rem; letter-spacing:.02em;
  margin:0; color:var(--brass);
}
.releases .swipe-hint{ font-size:14px; color:var(--slate); font-style:italic; margin:0; }

.rail{
  display:flex; gap:18px;
  overflow-x:auto; padding:4px 4px 18px;
  scroll-snap-type:x mandatory;
  scrollbar-color: var(--brass) var(--panel);
  scrollbar-width: thin;
  -webkit-overflow-scrolling:touch;
}
.rail::-webkit-scrollbar{ height:8px; }
.rail::-webkit-scrollbar-track{ background:var(--panel); border-radius:99px; }
.rail::-webkit-scrollbar-thumb{ background:var(--brass); border-radius:99px; }

.card{
  flex:0 0 clamp(230px, 74vw, 264px);
  scroll-snap-align:center;
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r);
  overflow:hidden; transition:border-color .2s ease, transform .2s ease;
}
.card:hover{ border-color:var(--brass); transform:translateY(-5px); box-shadow:0 12px 26px rgba(0,0,0,.35); }
.poster{ aspect-ratio:2/3; display:grid; place-items:center; padding:14px; text-align:center; }
/* a real poster fills the tile; the pN colour stays behind it as a fallback */
.poster:has(img){ padding:0; }
.poster img{ width:100%; height:100%; object-fit:cover; }
.poster span{ font-family:var(--display); font-size:1.42rem; line-height:1.22; letter-spacing:.01em; text-shadow:0 2px 10px rgba(0,0,0,.3); }
.p1{ background:linear-gradient(160deg,#6B5AC4,#2C2455); color:#F4EFFF; }
.p2{ background:linear-gradient(160deg,#28405F,#10182A); color:#E7EEF8; }
.p3{ background:linear-gradient(160deg,#E4557E,#6F2044); color:#FFF1F6; }
.p4{ background:linear-gradient(160deg,#FFC857,#B06B12); color:#2A1C04; }
.p5{ background:linear-gradient(160deg,#358974,#123A30); color:#EAF8F4; }
.p6{ background:linear-gradient(160deg,#5478BE,#1C2C4C); color:#EFF4FC; }
.card-body{ padding:16px 18px 20px; }
.card h5{ font-family:var(--display); font-weight:400; font-size:1.12rem; letter-spacing:.01em; margin:0 0 8px; line-height:1.3; color:var(--cream); }
.card p{ margin:0 0 10px; color:var(--muted); font-size:15.5px; line-height:1.55; }
.card .meta{ margin:0; font-size:14px; color:var(--slate); }

/* ============ Sections ============ */
section{ padding:var(--gap) 0; border-bottom:1px solid var(--line); }
h2{
  font-family:var(--display); font-weight:400;
  font-size:clamp(1.55rem,3.6vw,2.15rem); line-height:1.3; letter-spacing:.01em;
  margin:0 0 10px; padding-bottom:10px; color:var(--cream);
  background-image:linear-gradient(90deg, var(--crimson) 0 34%, var(--brass) 34% 62%, var(--aqua) 62% 78%, transparent 78%);
  background-size:100% 4px; background-position:0 100%; background-repeat:no-repeat;
  border-radius:2px;
}
h3{ font-family:var(--display); font-weight:400; font-size:1.16rem; letter-spacing:.01em; margin:28px 0 8px; color:var(--brass); }
p{ max-width:70ch; }
.lead{ color:var(--slate); max-width:64ch; margin:0 0 22px; }

ul, ol{ max-width:64ch; padding-left:1.9em; }
li{ margin:9px 0; }

ul{ list-style:none; }
ul li{ position:relative; }
ul li::before{
  content:"\2726"; position:absolute; left:-1.5em; top:0;
  color:var(--brass); font-size:.92em; line-height:inherit;
}
ol{ list-style:none; counter-reset:rh-step; }
ol li{ position:relative; }
ol li::before{
  counter-increment:rh-step; content:counter(rh-step);
  position:absolute; left:-1.9em; top:.25em;
  width:1.5em; height:1.5em; border-radius:50%;
  display:grid; place-items:center;
  font-family:var(--display); font-size:.78em; line-height:1;
  color:#2A1020; background:var(--crimson);
}
/* the chip row and the footer links keep their own look */
.chips li::before, .site-foot li::before, nav li::before{ content:none; }
nav ul, .chips, .site-foot ul{ padding-left:0; }

figure{ margin:32px auto; text-align:center; max-width:740px; }
figure img{ margin-inline:auto; border:2px solid rgba(255,200,87,.35); border-radius:16px; }
figcaption{ margin-top:10px; font-size:14.5px; color:var(--slate); font-style:italic; }

blockquote{
  position:relative;
  margin:32px 0 40px; padding:20px 26px;
  border:2px solid var(--crimson);
  border-radius:18px;
  background:var(--panel);
  font-size:1.08rem; line-height:1.65; max-width:62ch; color:var(--muted);
}
/* manga speech-bubble tail */
blockquote::after, blockquote::before{
  content:""; position:absolute; left:34px; width:0; height:0;
  border-style:solid;
}
blockquote::before{ bottom:-16px; border-width:16px 14px 0 0; border-color:var(--crimson) transparent transparent transparent; }
blockquote::after{ bottom:-12px; border-width:13px 11px 0 0; border-color:var(--panel) transparent transparent transparent; }
blockquote cite{ display:block; margin-top:12px; font-size:14.5px; font-style:normal; color:var(--slate); }

.table-scroll{ overflow-x:auto; margin-top:18px; border:1px solid var(--line); border-radius:var(--r); }
table{ border-collapse:collapse; width:100%; min-width:620px; font-size:16px; }
caption{ caption-side:bottom; padding:12px 14px; font-size:14px; color:var(--slate); text-align:left; font-style:italic; }
th, td{ padding:13px 16px; text-align:left; border-bottom:1px solid var(--line); }
thead th{ background:var(--panel-2); font-family:var(--display); font-weight:400; font-size:14.5px; letter-spacing:.01em; color:var(--brass); }
tbody tr:nth-child(even){ background:rgba(242,236,228,.035); }
tbody tr:last-child td, tbody tr:last-child th{ border-bottom:0; }
tbody tr:hover{ background:rgba(228,85,126,.14); }

.post{ background:var(--panel); border:1px solid var(--line); padding:clamp(22px,4vw,40px); border-radius:var(--r); }
.post header p{ color:var(--slate); font-size:14.5px; margin:6px 0 0; font-style:italic; }
.post h2{ margin-bottom:4px; }
code{ background:var(--panel-2); padding:2px 7px; font-size:14.5px; border-radius:4px; }

.grid-2{ display:grid; gap:26px; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }
.site-foot{ padding:36px 0 46px; text-align:center; color:var(--slate); font-size:15px; }
.site-foot ul{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px 24px; list-style:none; padding:0; margin:0 auto 14px; max-width:none; }
/* ============ Article — single centered reading column ============ */
.post > *{ max-width:55rem; margin-left:auto; margin-right:auto; }
.post > :first-child{ margin-top:0; }
.post > :last-child{ margin-bottom:0; }
.post > p{ margin-top:0; margin-bottom:1.1em; }
.post > h2{ margin-top:44px; margin-bottom:14px; }
.post > h3{ margin-top:28px; }
.post > ul, .post > ol{ padding-left:1.9em; }
.post > figure{ margin-top:32px; margin-bottom:32px; }