*,*::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; text-transform:uppercase;
  font-size:clamp(2.2rem, 6.4vw, 4.4rem); line-height:1.06;
  letter-spacing:.055em; word-spacing:.12em;
  margin:0 auto 20px; max-width:26ch;
}
.hero .kicker{ margin:0 auto 30px; max-width:62ch; color:var(--muted); font-size:clamp(1rem,2.2vw,1.12rem); }

.search{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; width:min(640px,100%); margin:0 auto 24px; }
.search input{
  flex:1 1 260px; min-width:0; padding:14px 18px;
  font:400 16px/1.4 var(--body); color:var(--cream);
  background:var(--field); border:1px solid rgba(233,227,215,.3);
  border-radius:var(--r-sm);
}
.search input::placeholder{ color:#8D94A0; }
.search button{
  flex:0 0 auto; padding:14px 28px; cursor:pointer;
  font:400 16px/1.4 var(--body); letter-spacing:.05em;
  color:#F6F1E6; background:var(--crimson); border:1px solid var(--crimson);
  border-radius:var(--r-sm);
}
.search button:hover{ background:var(--crimson-hi); border-color:var(--crimson-hi); }
@media (max-width:480px){ .search input, .search button{ flex:1 1 100%; } }

.cta{
  display:inline-block; cursor:pointer;
  font-family:var(--display); font-size:1.1rem; letter-spacing:.11em; text-transform:uppercase;
  color:var(--brass); background:transparent; border:2px solid var(--brass);
  padding:13px 34px; border-radius:var(--r-sm);
}
.cta:hover{ background:var(--brass); color:#161A20; }
.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.35rem; letter-spacing:.09em;
  text-transform:uppercase; 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(-3px); }
.poster{ aspect-ratio:2/3; display:grid; place-items:center; padding:14px; text-align:center; }
.poster:has(img){ padding:0; background:var(--panel-2); }
.poster img{ width:100%; height:100%; object-fit:cover; }
.poster span{ font-family:var(--display); font-size:1.5rem; line-height:1.08; letter-spacing:.04em; }
.p1{ background:#7E2A1B; color:#F2E7D6; }
.p2{ background:#22405E; color:#E9E3D7; }
.p3{ background:#C79B35; color:#191308; }
.p4{ background:#33315F; color:#E9E3D7; }
.p5{ background:#25493A; color:#E9E3D7; }
.card-body{ padding:16px 18px 20px; }
.card h5{ font-family:var(--display); font-weight:400; font-size:1.28rem; letter-spacing:.03em; margin:0 0 8px; line-height:1.15; }
.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; text-transform:uppercase;
  font-size:clamp(1.7rem,4.2vw,2.5rem); line-height:1.1; letter-spacing:.05em; margin:0 0 10px;
}
h3{ font-family:var(--display); font-weight:400; font-size:1.25rem; letter-spacing:.06em; text-transform:uppercase; 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.3em; }
li{ margin:8px 0; }
ul li::marker, ol li::marker{ color:var(--crimson); }

figure{ margin:32px auto; text-align:center; max-width:740px; }
figure img{ margin-inline:auto; border:1px solid var(--line); border-radius:var(--r); }
figcaption{ margin-top:10px; font-size:14.5px; color:var(--slate); font-style:italic; }

blockquote{
  margin:32px 0; padding:16px 22px;
  border-left:3px solid var(--crimson);
  border-radius:0 var(--r) var(--r) 0;
  background:var(--panel);
  font-size:1.15rem; line-height:1.6; font-style:italic; max-width:62ch; color:var(--muted);
}
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:15px; letter-spacing:.07em; text-transform:uppercase; color:var(--brass); }
tbody tr:last-child td, tbody tr:last-child th{ border-bottom:0; }
tbody tr:hover{ background:rgba(176,58,36,.12); }

.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.3em; }
.post > figure{ margin-top:32px; margin-bottom:32px; }