/* ==========================================================
   1. TOKEN
   ========================================================== */
:root{
  --ys-ink:#000000;
  --ys-red:#E8341F;        /* ganti di sini kalau mau warna aksen lain */
  --ys-paper:#F5F4F2;
  --ys-dim:#6B6764;
  --ys-line:#2A2A2A;
  --ys-display:'Archivo Black', system-ui, sans-serif;
  --ys-body:'Inter', system-ui, sans-serif;
  --ys-mono:'Space Mono', ui-monospace, monospace;
  --ys-pad:24px;
  --ys-max:1280px;
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;background:var(--ys-ink);color:var(--ys-paper);
  font-family:var(--ys-body);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;}
a{color:inherit;}
:focus-visible{outline:3px solid var(--ys-red);outline-offset:3px;}

.ys-wrap{max-width:var(--ys-max);margin:0 auto;padding-left:var(--ys-pad);padding-right:var(--ys-pad);}
.ys-skip{position:absolute;left:-9999px;}
.ys-skip:focus{left:12px;top:12px;background:var(--ys-red);color:#fff;padding:10px 16px;z-index:99;font-family:var(--ys-mono);font-size:12px;}

/* ==========================================================
   2. HEADER
   ========================================================== */
.ys-header{background:var(--ys-ink);border-bottom:1px solid var(--ys-line);position:relative;z-index:20;}
.ys-header .ys-wrap{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;padding-top:18px;padding-bottom:18px;}
.ys-brand{text-decoration:none;display:block;}
.ys-brand-name{font-family:var(--ys-mono);font-size:15px;font-weight:700;color:var(--ys-paper);letter-spacing:.02em;}
.ys-brand-name span{color:var(--ys-red);}
.ys-brand-sub{font-family:var(--ys-mono);font-size:9px;color:var(--ys-dim);text-transform:uppercase;letter-spacing:.22em;margin-top:5px;}
.ys-brand img{max-height:38px;width:auto;}

.ys-nav ul{display:flex;gap:22px;list-style:none;margin:0;padding:0;flex-wrap:wrap;}
.ys-nav a{font-family:var(--ys-mono);font-size:11px;font-weight:700;color:var(--ys-paper);text-decoration:none;text-transform:uppercase;letter-spacing:.1em;transition:color .12s;}
.ys-nav a::before{content:"[";color:var(--ys-dim);margin-right:1px;}
.ys-nav a::after{content:"]";color:var(--ys-dim);margin-left:1px;}
.ys-nav a:hover,.ys-nav .current-menu-item > a{color:var(--ys-red);}
.ys-nav a:hover::before,.ys-nav a:hover::after{color:var(--ys-red);}

/* ==========================================================
   3. HERO
   ========================================================== */
.ys-hero{position:relative;background:var(--ys-ink);min-height:76vh;display:flex;align-items:flex-end;overflow:hidden;}
.ys-hero-media{position:absolute;inset:0;z-index:0;background-size:cover;background-position:center 20%;filter:grayscale(1) contrast(1.25);}
.ys-hero-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.18) 38%, rgba(0,0,0,.94) 88%, #000 100%), linear-gradient(90deg, rgba(0,0,0,.88) 0%, rgba(0,0,0,.30) 52%, rgba(0,0,0,.55) 100%);}
.ys-hero-media::before{content:"";position:absolute;inset:0;z-index:1;background:repeating-linear-gradient(0deg, rgba(0,0,0,.30) 0px, rgba(0,0,0,.30) 1px, rgba(0,0,0,0) 2px, rgba(0,0,0,0) 4px);}
.ys-hero .ys-wrap{position:relative;z-index:2;padding-top:96px;padding-bottom:56px;width:100%;}

.ys-kicker{font-family:var(--ys-mono);font-size:10px;font-weight:700;color:var(--ys-red);text-transform:uppercase;letter-spacing:.24em;margin:0 0 20px;}
.ys-hero h1{font-family:var(--ys-display);font-size:clamp(46px,10.5vw,132px);line-height:.84;letter-spacing:-.035em;text-transform:uppercase;margin:0 0 26px;max-width:15ch;}
.ys-mark{background:var(--ys-red);color:#fff;padding:0 .12em;box-decoration-break:clone;-webkit-box-decoration-break:clone;}
.ys-tagline{font-family:var(--ys-mono);font-size:13px;line-height:1.75;color:#CFCBC8;max-width:46ch;margin:0 0 34px;}
.ys-tagline b{color:var(--ys-paper);font-weight:700;}

.ys-actions{display:flex;gap:12px;flex-wrap:wrap;}
.ys-btn{display:inline-block;font-family:var(--ys-mono);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.12em;text-decoration:none;padding:14px 24px;border:2px solid var(--ys-paper);color:var(--ys-paper);background:transparent;cursor:pointer;transition:background .12s,color .12s,border-color .12s;}
.ys-btn::before{content:"> ";}
.ys-btn:hover{background:var(--ys-red);border-color:var(--ys-red);color:#fff;}
.ys-btn--solid{background:var(--ys-red);border-color:var(--ys-red);color:#fff;}
.ys-btn--solid:hover{background:transparent;border-color:var(--ys-paper);color:var(--ys-paper);}

.ys-sysbox{position:absolute;right:var(--ys-pad);bottom:56px;z-index:3;border:1px solid var(--ys-line);background:rgba(0,0,0,.6);padding:14px 16px;max-width:210px;}
.ys-sysbox p{font-family:var(--ys-mono);font-size:10px;line-height:1.7;text-transform:uppercase;letter-spacing:.12em;color:var(--ys-dim);margin:0;}
.ys-sysbox p b{color:var(--ys-paper);font-weight:700;display:block;margin-bottom:6px;}

/* ==========================================================
   4. SECTION + KARTU
   ========================================================== */
.ys-section{background:var(--ys-ink);padding:72px 0;}
.ys-section--tight{padding-top:0;}
.ys-sectionhead{display:flex;align-items:center;gap:14px;font-family:var(--ys-mono);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.2em;color:var(--ys-red);margin:0 0 28px;}
.ys-sectionhead::after{content:"";flex:1;height:1px;background:var(--ys-line);}

.ys-card{display:block;text-decoration:none;color:inherit;position:relative;}
.ys-card-media{position:relative;aspect-ratio:4/3;overflow:hidden;background:#141414;margin-bottom:14px;}
.ys-card-media img{width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(1) contrast(1.2);transition:filter .2s, transform .3s;}
.ys-card:hover .ys-card-media img{filter:grayscale(0) contrast(1.05);transform:scale(1.03);}
.ys-card-media::before,.ys-card-media::after{content:"";position:absolute;width:18px;height:18px;z-index:2;border-color:var(--ys-red);border-style:solid;transition:width .2s, height .2s;}
.ys-card-media::before{top:8px;left:8px;border-width:2px 0 0 2px;}
.ys-card-media::after{bottom:8px;right:8px;border-width:0 2px 2px 0;}
.ys-card:hover .ys-card-media::before,.ys-card:hover .ys-card-media::after{width:28px;height:28px;}
.ys-card-tag{position:absolute;left:0;bottom:0;z-index:3;background:var(--ys-red);color:#fff;font-family:var(--ys-mono);font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.16em;padding:6px 10px;}
.ys-card-title{font-family:var(--ys-display);font-size:17px;line-height:1.06;text-transform:uppercase;letter-spacing:-.01em;margin:0 0 8px;transition:color .12s;}
.ys-card:hover .ys-card-title{color:var(--ys-red);}
.ys-card-meta{font-family:var(--ys-mono);font-size:10px;text-transform:uppercase;letter-spacing:.14em;color:var(--ys-dim);margin:0;}

.ys-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;}
.ys-grid--3{grid-template-columns:repeat(3,1fr);}

.ys-feature{display:grid;grid-template-columns:1.15fr 1fr;border:1px solid var(--ys-line);text-decoration:none;color:inherit;margin-bottom:22px;}
.ys-feature-media{position:relative;overflow:hidden;background:#141414;min-height:340px;}
.ys-feature-media img{width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(1) contrast(1.2);transition:filter .25s;}
.ys-feature:hover .ys-feature-media img{filter:grayscale(0) contrast(1.05);}
.ys-feature-body{padding:34px 32px;display:flex;flex-direction:column;justify-content:center;}
.ys-feature-kicker{font-family:var(--ys-mono);font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.22em;color:var(--ys-red);margin:0 0 16px;}
.ys-feature-title{font-family:var(--ys-display);font-size:clamp(26px,3.6vw,44px);line-height:.92;text-transform:uppercase;letter-spacing:-.02em;margin:0 0 16px;}
.ys-feature-excerpt{font-size:15px;line-height:1.62;color:#B4B0AD;margin:0 0 22px;max-width:44ch;}
.ys-feature-meta{font-family:var(--ys-mono);font-size:10px;text-transform:uppercase;letter-spacing:.14em;color:var(--ys-dim);margin:0;padding-top:16px;border-top:1px solid var(--ys-line);}

.ys-more{display:inline-block;margin-top:34px;font-family:var(--ys-mono);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.14em;color:var(--ys-paper);text-decoration:none;border-bottom:2px solid var(--ys-red);padding-bottom:5px;transition:color .12s;}
.ys-more::after{content:" _";}
.ys-more:hover{color:var(--ys-red);}

/* ==========================================================
   5. HALAMAN TUNGGAL
   ========================================================== */
.ys-post-hero{position:relative;background:var(--ys-ink);padding:64px 0 0;}
.ys-post-hero h1{font-family:var(--ys-display);font-size:clamp(34px,6.5vw,76px);line-height:.9;letter-spacing:-.03em;text-transform:uppercase;margin:0 0 22px;max-width:18ch;}
.ys-post-meta{font-family:var(--ys-mono);font-size:11px;text-transform:uppercase;letter-spacing:.16em;color:var(--ys-dim);margin:0 0 40px;display:flex;gap:8px;flex-wrap:wrap;}
.ys-post-meta span::after{content:" ·";color:var(--ys-line);}
.ys-post-meta span:last-child::after{content:"";}
.ys-post-figure{margin:0 0 0;position:relative;}
.ys-post-figure img{width:100%;display:block;filter:grayscale(1) contrast(1.2);}
.ys-post-caption{font-family:var(--ys-mono);font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:var(--ys-dim);padding-top:12px;margin:0;}

/* strip data artis */
.ys-strip{background:var(--ys-red);color:#fff;margin-top:48px;}
.ys-strip .ys-wrap{display:grid;grid-template-columns:repeat(4,1fr);padding-top:0;padding-bottom:0;}
.ys-cell{padding:24px 20px 26px;border-left:1px solid rgba(0,0,0,.22);}
.ys-cell:first-child{border-left:0;padding-left:0;}
.ys-cell:last-child{padding-right:0;}
.ys-cell dt{font-family:var(--ys-mono);font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.18em;color:rgba(0,0,0,.55);margin:0 0 8px;}
.ys-cell dd{font-family:var(--ys-display);font-size:19px;line-height:1.1;text-transform:uppercase;margin:0;}
.ys-cell dd.is-empty{font-family:var(--ys-mono);font-size:13px;text-transform:none;color:rgba(0,0,0,.42);}

/* badan artikel */
.ys-body{padding:72px 0 0;}
.ys-body .ys-col{max-width:68ch;}
.ys-body p{font-size:17px;line-height:1.75;margin:0 0 26px;}
.ys-body h2{font-family:var(--ys-display);font-size:clamp(22px,3.4vw,32px);line-height:1;text-transform:uppercase;letter-spacing:-.01em;margin:48px 0 20px;}
.ys-body h3{font-family:var(--ys-display);font-size:19px;text-transform:uppercase;margin:36px 0 14px;}
.ys-body a{color:var(--ys-red);text-decoration:underline;text-underline-offset:3px;}
.ys-body ul,.ys-body ol{margin:0 0 26px;padding-left:22px;}
.ys-body li{margin-bottom:10px;}
.ys-body img{margin:32px 0;}
.ys-body blockquote{border-top:3px solid var(--ys-paper);border-bottom:3px solid var(--ys-paper);padding:24px 0;margin:40px 0;}
.ys-body blockquote p{font-family:var(--ys-display);font-size:clamp(19px,2.8vw,25px);line-height:1.16;text-transform:uppercase;margin:0;}
.ys-body figcaption{font-family:var(--ys-mono);font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:var(--ys-dim);margin-top:-22px;margin-bottom:32px;}

/* ==========================================================
   6. TOMBOL SHARE
   ========================================================== */
.ys-share{border-top:1px solid var(--ys-line);margin-top:56px;padding:28px 0 0;}
.ys-share-label{font-family:var(--ys-mono);font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.2em;color:var(--ys-red);margin:0 0 16px;}
.ys-share-list{display:flex;gap:10px;flex-wrap:wrap;list-style:none;margin:0;padding:0;}
.ys-share-list a,.ys-share-list button{
  display:inline-block;font-family:var(--ys-mono);font-size:11px;font-weight:700;
  text-transform:uppercase;letter-spacing:.1em;text-decoration:none;
  padding:11px 16px;border:1px solid var(--ys-line);color:var(--ys-paper);
  background:transparent;cursor:pointer;transition:background .12s,border-color .12s,color .12s;
}
.ys-share-list a:hover,.ys-share-list button:hover{background:var(--ys-red);border-color:var(--ys-red);color:#fff;}
.ys-share-list button.is-copied{background:var(--ys-red);border-color:var(--ys-red);color:#fff;}

/* ==========================================================
   7. FOOTER
   ========================================================== */
.ys-footer{background:var(--ys-ink);border-top:1px solid var(--ys-line);margin-top:96px;overflow:hidden;}
.ys-footer .ys-wrap{padding-top:64px;padding-bottom:44px;}
.ys-wordmark{font-family:var(--ys-display);font-size:clamp(40px,12vw,140px);line-height:.82;letter-spacing:-.04em;text-transform:uppercase;color:var(--ys-red);margin:0 0 32px;}
.ys-foot-row{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;border-top:1px solid var(--ys-line);padding-top:22px;}
.ys-foot-row ul{display:flex;gap:20px;list-style:none;margin:0;padding:0;flex-wrap:wrap;}
.ys-foot-row a{font-family:var(--ys-mono);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;text-decoration:none;transition:color .12s;}
.ys-foot-row a:hover{color:var(--ys-red);}
.ys-copy{font-family:var(--ys-mono);font-size:10px;color:var(--ys-dim);margin:0;letter-spacing:.06em;}

/* ==========================================================
   8. NAVIGASI ARSIP
   ========================================================== */
.ys-pagination{display:flex;gap:8px;flex-wrap:wrap;margin-top:48px;}
.ys-pagination .page-numbers{font-family:var(--ys-mono);font-size:12px;font-weight:700;padding:10px 15px;border:1px solid var(--ys-line);text-decoration:none;transition:background .12s,border-color .12s;}
.ys-pagination .page-numbers:hover,.ys-pagination .current{background:var(--ys-red);border-color:var(--ys-red);color:#fff;}
.ys-empty{font-family:var(--ys-mono);font-size:13px;color:var(--ys-dim);text-transform:uppercase;letter-spacing:.12em;}

/* ==========================================================
   9. MOBILE
   ========================================================== */
@media (max-width:1040px){
  .ys-grid,.ys-grid--3{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:900px){
  .ys-nav ul{gap:14px;}
  .ys-nav a{font-size:10px;letter-spacing:.06em;}
  .ys-sysbox{display:none;}
  .ys-strip .ys-wrap{grid-template-columns:repeat(2,1fr);}
  .ys-cell{padding-left:20px;padding-right:20px;}
  .ys-cell:nth-child(odd){border-left:0;padding-left:0;}
  .ys-cell:nth-child(even){padding-right:0;}
  .ys-cell:nth-child(n+3){border-top:1px solid rgba(0,0,0,.22);}
}
@media (max-width:820px){
  .ys-feature{grid-template-columns:1fr;}
  .ys-feature-media{min-height:230px;}
  .ys-feature-body{padding:26px 22px;}
}
@media (max-width:720px){
  :root{--ys-pad:20px;}
  .ys-header .ys-wrap{flex-direction:column;align-items:center;gap:16px;padding-top:20px;padding-bottom:16px;}
  .ys-brand{text-align:center;}
  .ys-nav{width:100%;}
  .ys-nav ul{justify-content:flex-start;flex-wrap:nowrap;gap:16px;overflow-x:auto;padding-bottom:6px;scrollbar-width:none;-ms-overflow-style:none;}
  .ys-nav ul::-webkit-scrollbar{display:none;}
  .ys-nav li{flex:none;}
  .ys-hero{min-height:66vh;}
  .ys-hero .ys-wrap{padding-top:64px;padding-bottom:44px;}
  .ys-hero h1{max-width:none;}
  .ys-actions .ys-btn{flex:1;text-align:center;}
}
@media (max-width:560px){
  .ys-section{padding:52px 0;}
  .ys-grid,.ys-grid--3{grid-template-columns:1fr;gap:26px;}
  .ys-card-media{aspect-ratio:16/9;}
  .ys-card-title{font-size:19px;}
  .ys-strip .ys-wrap{grid-template-columns:1fr;}
  .ys-cell{padding:18px 0;border-left:0;border-top:1px solid rgba(0,0,0,.22);}
  .ys-cell:first-child{border-top:0;}
  .ys-body{padding-top:48px;}
  .ys-body p{font-size:16px;}
  .ys-footer{margin-top:64px;}
}
@media (prefers-reduced-motion:reduce){*{transition:none !important;}}
/* ==========================================================
   10. ZINE — headline homepage + halaman baca
   Tempel di paling bawah style.css yang sudah ada.
   ========================================================== */

/* ---------- Headline di homepage ---------- */
.ys-zine{background:var(--ys-ink);padding:0 0 72px;}
.ys-zine-inner{
  display:grid;grid-template-columns:minmax(0,420px) 1fr;
  gap:44px;align-items:center;
}

.ys-zine-cover{
  position:relative;display:block;text-decoration:none;
  background:#141414;line-height:0;
  box-shadow:14px 14px 0 var(--ys-red);
  transition:transform .2s, box-shadow .2s;
}
.ys-zine-cover img{
  width:100%;height:auto;display:block;
  filter:grayscale(1) contrast(1.18);
  transition:filter .25s;
}
.ys-zine-cover:hover{transform:translate(-4px,-4px);box-shadow:18px 18px 0 var(--ys-red);}
.ys-zine-cover:hover img{filter:grayscale(0) contrast(1.04);}

/* garis scan tipis di sampul */
.ys-zine-cover::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(0deg,
    rgba(0,0,0,.22) 0px, rgba(0,0,0,.22) 1px,
    rgba(0,0,0,0) 2px, rgba(0,0,0,0) 4px);
}
.ys-zine-badge{
  position:absolute;left:0;top:0;z-index:2;
  background:var(--ys-red);color:#fff;
  font-family:var(--ys-mono);font-size:9px;font-weight:700;
  text-transform:uppercase;letter-spacing:.18em;
  padding:7px 11px;line-height:1;
}

.ys-zine-body{min-width:0;}
.ys-zine-no{
  font-family:var(--ys-display);
  font-size:clamp(56px,10vw,124px);line-height:.78;
  letter-spacing:-.05em;color:var(--ys-red);
  margin:0 0 14px;
}
.ys-zine-no::before{
  content:"ISSUE ";
  font-family:var(--ys-mono);font-size:11px;font-weight:700;
  letter-spacing:.24em;color:var(--ys-dim);
  display:block;margin-bottom:14px;
}
.ys-zine-title{
  font-family:var(--ys-display);
  font-size:clamp(24px,3.6vw,40px);line-height:.94;
  text-transform:uppercase;letter-spacing:-.02em;
  margin:0 0 18px;
}
.ys-zine-text{
  font-size:16px;line-height:1.7;color:#B4B0AD;
  max-width:48ch;margin:0 0 22px;
}
.ys-zine-meta{
  display:flex;gap:8px;flex-wrap:wrap;
  font-family:var(--ys-mono);font-size:10px;
  text-transform:uppercase;letter-spacing:.14em;color:var(--ys-dim);
  margin:0 0 26px;padding-top:18px;border-top:1px solid var(--ys-line);
}
.ys-zine-meta span::after{content:" ·";color:var(--ys-line);}
.ys-zine-meta span:last-child::after{content:"";}

/* ---------- Halaman baca ---------- */
.ys-reader-head{background:var(--ys-ink);padding:64px 0 44px;}
.ys-reader-head h1{
  font-family:var(--ys-display);
  font-size:clamp(32px,6vw,68px);line-height:.9;
  letter-spacing:-.03em;text-transform:uppercase;
  margin:0 0 22px;max-width:18ch;
}

.ys-reader{background:#0A0A0A;padding:8px 0 56px;}
.ys-reader-inner{
  max-width:900px;margin:0 auto;
  padding-left:var(--ys-pad);padding-right:var(--ys-pad);
  counter-reset:ys-page;
}

/* tiap gambar = satu halaman zine */
.ys-reader-inner figure,
.ys-reader-inner p:has(> img){
  position:relative;margin:0 0 8px;line-height:0;
}
.ys-reader-inner img{
  width:100%;height:auto;display:block;
  border:1px solid var(--ys-line);
}

/* nomor halaman otomatis */
.ys-reader-inner figure::before{
  counter-increment:ys-page;
  content:"PAGE " counter(ys-page, decimal-leading-zero);
  position:absolute;left:0;top:0;z-index:2;
  background:var(--ys-ink);color:var(--ys-dim);
  font-family:var(--ys-mono);font-size:9px;font-weight:700;
  letter-spacing:.18em;padding:6px 10px;line-height:1;
}
.ys-reader-inner figcaption{
  font-family:var(--ys-mono);font-size:10px;line-height:1.6;
  text-transform:uppercase;letter-spacing:.12em;color:var(--ys-dim);
  padding:10px 0 22px;
}

/* teks di antara halaman zine */
.ys-reader-inner p{
  font-size:16px;line-height:1.7;color:#B4B0AD;
  margin:26px 0;
}
.ys-reader-inner h2{
  font-family:var(--ys-display);font-size:24px;
  text-transform:uppercase;color:var(--ys-paper);
  margin:40px 0 18px;
}

/* ---------- Mobile ---------- */
@media (max-width:900px){
  .ys-zine-inner{grid-template-columns:1fr;gap:32px;}
  .ys-zine-cover{max-width:340px;box-shadow:10px 10px 0 var(--ys-red);}
  .ys-zine-cover:hover{box-shadow:13px 13px 0 var(--ys-red);}
}
@media (max-width:560px){
  .ys-zine{padding-bottom:52px;}
  .ys-zine-cover{max-width:none;}
  .ys-reader-head{padding:44px 0 32px;}
  .ys-reader{padding-bottom:40px;}
  .ys-reader-inner{padding-left:0;padding-right:0;}
  .ys-reader-inner img{border-left:0;border-right:0;}
  .ys-reader-inner figcaption{padding-left:20px;padding-right:20px;}
  .ys-reader-inner p{padding-left:20px;padding-right:20px;}
}
/* ==========================================================
   11. ZINE — headline arsip + halaman grid sampul
   Ganti blok "10. ZINE" yang lama dengan ini,
   atau tempel di bawahnya (yang belakangan menang).
   ========================================================== */

/* ---------- Headline di homepage ---------- */
.ys-zinearc{background:var(--ys-ink);padding:0 0 76px;}
.ys-zinearc-grid{
  display:grid;grid-template-columns:1.25fr 1fr;
  gap:52px;align-items:center;
}

/* deretan sampul */
.ys-zinearc-covers{
  display:grid;grid-template-columns:repeat(4,1fr);gap:12px;
}
.ys-zinearc-cover{
  position:relative;display:block;line-height:0;
  background:#141414;text-decoration:none;
  transition:transform .18s;
}
.ys-zinearc-cover img{
  width:100%;height:auto;display:block;aspect-ratio:1/1.414;object-fit:cover;
  filter:grayscale(1) contrast(1.15);transition:filter .22s;
}
.ys-zinearc-cover:hover{transform:translateY(-6px);}
.ys-zinearc-cover:hover img{filter:grayscale(0) contrast(1.02);}
.ys-zinearc-cover::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(0deg,
    rgba(0,0,0,.20) 0px, rgba(0,0,0,.20) 1px,
    rgba(0,0,0,0) 2px, rgba(0,0,0,0) 4px);
}
.ys-zinearc-num{
  position:absolute;left:0;bottom:0;z-index:2;
  background:var(--ys-red);color:#fff;
  font-family:var(--ys-mono);font-size:9px;font-weight:700;
  letter-spacing:.12em;padding:5px 8px;line-height:1;
}

.ys-zinearc-body{min-width:0;}
.ys-zinearc-title{
  font-family:var(--ys-display);
  font-size:clamp(30px,4.4vw,54px);line-height:.9;
  text-transform:uppercase;letter-spacing:-.03em;
  margin:0 0 20px;
}
.ys-zinearc-text{
  font-size:16px;line-height:1.7;color:#B4B0AD;
  max-width:44ch;margin:0 0 24px;
}
.ys-zinearc-meta{
  display:flex;gap:8px;flex-wrap:wrap;
  font-family:var(--ys-mono);font-size:10px;
  text-transform:uppercase;letter-spacing:.14em;color:var(--ys-dim);
  margin:0 0 26px;padding-top:18px;border-top:1px solid var(--ys-line);
}
.ys-zinearc-meta span::after{content:" ·";color:var(--ys-line);}
.ys-zinearc-meta span:last-child::after{content:"";}

/* ---------- Halaman arsip ---------- */
.ys-arc-head{background:var(--ys-ink);padding:72px 0 44px;}
.ys-arc-head h1{
  font-family:var(--ys-display);
  font-size:clamp(36px,7vw,84px);line-height:.86;
  letter-spacing:-.035em;text-transform:uppercase;
  margin:0 0 20px;
}
.ys-arc-intro{
  font-family:var(--ys-mono);font-size:13px;line-height:1.7;
  color:#B4B0AD;max-width:46ch;margin:0;
}

.ys-arc{background:var(--ys-ink);padding:0 0 88px;}
.ys-arc-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:28px 22px;
}
.ys-arc-item{display:flex;flex-direction:column;min-width:0;}

.ys-arc-cover{
  position:relative;display:block;line-height:0;
  background:#141414;margin-bottom:14px;
  border:1px solid var(--ys-line);
  transition:transform .18s, border-color .18s;
}
.ys-arc-cover img{
  width:100%;height:auto;display:block;
  aspect-ratio:1/1.414;object-fit:cover;
  filter:grayscale(1) contrast(1.15);transition:filter .22s;
}
.ys-arc-cover:hover{transform:translateY(-6px);border-color:var(--ys-red);}
.ys-arc-cover:hover img{filter:grayscale(0) contrast(1.02);}
.ys-arc-cover::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(0deg,
    rgba(0,0,0,.20) 0px, rgba(0,0,0,.20) 1px,
    rgba(0,0,0,0) 2px, rgba(0,0,0,0) 4px);
}
.ys-arc-num{
  position:absolute;left:0;top:0;z-index:2;
  background:var(--ys-red);color:#fff;
  font-family:var(--ys-mono);font-size:10px;font-weight:700;
  letter-spacing:.14em;padding:6px 10px;line-height:1;
}

.ys-arc-title{
  font-family:var(--ys-display);font-size:16px;line-height:1.08;
  text-transform:uppercase;letter-spacing:-.01em;margin:0 0 8px;
}
.ys-arc-meta{
  display:flex;gap:6px;flex-wrap:wrap;
  font-family:var(--ys-mono);font-size:10px;
  text-transform:uppercase;letter-spacing:.12em;color:var(--ys-dim);
  margin:0 0 10px;
}
.ys-arc-meta span::after{content:" ·";color:var(--ys-line);}
.ys-arc-meta span:last-child::after{content:"";}
.ys-arc-excerpt{
  font-size:13px;line-height:1.6;color:#8A8683;
  margin:0 0 16px;
}

/* tombol Read */
.ys-arc-btn{
  margin-top:auto;align-self:flex-start;
  font-family:var(--ys-mono);font-size:11px;font-weight:700;
  text-transform:uppercase;letter-spacing:.14em;text-decoration:none;
  color:var(--ys-paper);border:1px solid var(--ys-line);
  padding:10px 20px;
  transition:background .12s,border-color .12s,color .12s;
}
.ys-arc-btn::before{content:"> ";}
.ys-arc-btn:hover{background:var(--ys-red);border-color:var(--ys-red);color:#fff;}

/* ---------- Mobile ---------- */
@media (max-width:1000px){
  .ys-zinearc-grid{grid-template-columns:1fr;gap:34px;}
  .ys-arc-grid{grid-template-columns:repeat(3,1fr);}
}
@media (max-width:760px){
  .ys-arc-grid{grid-template-columns:repeat(2,1fr);gap:26px 16px;}
}
@media (max-width:560px){
  .ys-zinearc{padding-bottom:56px;}
  .ys-zinearc-covers{grid-template-columns:repeat(2,1fr);gap:10px;}
  .ys-arc-head{padding:48px 0 32px;}
  .ys-arc{padding-bottom:60px;}
  .ys-arc-grid{grid-template-columns:1fr;gap:34px;}
  .ys-arc-cover{max-width:280px;}
  .ys-arc-title{font-size:19px;}
}
/* ==========================================================
   12. PEMBACA ZINE — tampilan ebook
   ========================================================== */

.ys-reader-app{
  background:#0A0A0A;
  border-top:1px solid var(--ys-line);
  border-bottom:1px solid var(--ys-line);
  padding:20px 0 0;
  user-select:none;
}

/* ---------- Panggung ---------- */
.ys-reader-stage{
  display:flex;align-items:center;justify-content:center;gap:10px;
  padding:0 12px;
}

.ys-spread{
  display:flex;gap:2px;justify-content:center;align-items:flex-start;
  flex:1;max-width:1120px;cursor:pointer;
}
.ys-spread.is-two .ys-page{flex:1 1 50%;min-width:0;}

.ys-page{
  position:relative;margin:0;line-height:0;flex:0 1 auto;
  max-width:100%;background:#141414;
}
.ys-page img{
  width:100%;height:auto;display:block;
  max-height:78vh;object-fit:contain;
  box-shadow:0 18px 44px rgba(0,0,0,.6);
}
.ys-spread:not(.is-two) .ys-page{max-width:620px;}

.ys-page figcaption{
  position:absolute;left:0;bottom:0;
  background:var(--ys-ink);color:var(--ys-dim);
  font-family:var(--ys-mono);font-size:9px;font-weight:700;
  letter-spacing:.16em;padding:5px 9px;line-height:1;
}

/* ---------- Tombol panah ---------- */
/* PENTING: harus dibatasi ke .ys-reader-stage.
   Kalau tidak, aturan ini ikut mengenai menu utama situs
   yang juga memakai kelas .ys-nav. */
.ys-reader-stage .ys-nav{
  flex:none;width:46px;height:46px;
  background:transparent;border:1px solid var(--ys-line);
  color:var(--ys-paper);font-size:22px;line-height:1;
  cursor:pointer;transition:background .12s,border-color .12s,opacity .12s;
}
.ys-reader-stage .ys-nav:hover:not(:disabled){background:var(--ys-red);border-color:var(--ys-red);}
.ys-reader-stage .ys-nav:disabled{opacity:.22;cursor:default;}
.ys-reader-stage .ys-nav:focus-visible{outline:3px solid var(--ys-red);outline-offset:3px;}

/* ---------- Bar bawah ---------- */
.ys-reader-bar{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  max-width:1120px;margin:0 auto;padding:18px 12px;
}
.ys-counter{
  font-family:var(--ys-mono);font-size:11px;font-weight:700;
  letter-spacing:.16em;color:var(--ys-dim);
}
.ys-counter .ys-cur{color:var(--ys-paper);}

.ys-tool{
  background:transparent;border:1px solid var(--ys-line);color:var(--ys-paper);
  font-family:var(--ys-mono);font-size:10px;font-weight:700;
  text-transform:uppercase;letter-spacing:.14em;
  padding:9px 15px;cursor:pointer;
  transition:background .12s,border-color .12s,color .12s;
}
.ys-tool:hover,.ys-tool.is-on{background:var(--ys-red);border-color:var(--ys-red);color:#fff;}
.ys-tool:focus-visible{outline:3px solid var(--ys-red);outline-offset:3px;}

/* ---------- Deret thumbnail ---------- */
.ys-thumbs{
  display:flex;gap:8px;overflow-x:auto;
  max-width:1120px;margin:0 auto;
  padding:0 12px 20px;
  scrollbar-width:thin;
}
.ys-thumbs::-webkit-scrollbar{height:6px;}
.ys-thumbs::-webkit-scrollbar-thumb{background:var(--ys-line);}
.ys-thumb{
  position:relative;flex:none;width:66px;padding:0;
  background:transparent;border:1px solid var(--ys-line);
  cursor:pointer;line-height:0;
  transition:border-color .12s;
}
.ys-thumb img{width:100%;height:auto;display:block;aspect-ratio:1/1.414;object-fit:cover;opacity:.55;transition:opacity .12s;}
.ys-thumb:hover img,.ys-thumb.is-current img{opacity:1;}
.ys-thumb.is-current{border-color:var(--ys-red);}
.ys-thumb span{
  position:absolute;left:0;bottom:0;
  background:var(--ys-ink);color:var(--ys-dim);
  font-family:var(--ys-mono);font-size:8px;font-weight:700;
  padding:3px 5px;line-height:1;
}
.ys-thumb.is-current span{background:var(--ys-red);color:#fff;}

/* ---------- Mode layar penuh ---------- */
.ys-reader-app.is-full{
  background:#000;padding:0;
  display:flex;flex-direction:column;justify-content:center;
}
.ys-reader-app.is-full .ys-reader-stage{flex:1;padding:20px 16px 0;}
.ys-reader-app.is-full .ys-page img{max-height:86vh;}

/* ---------- Tanpa JavaScript ---------- */
.ys-reader-fallback{max-width:900px;margin:0 auto;padding:0 20px;}
.ys-reader-fallback img{width:100%;height:auto;display:block;margin-bottom:8px;}

/* ---------- Mobile ---------- */
@media (max-width:899px){
  .ys-reader-app{padding-top:14px;}
  .ys-reader-stage{gap:6px;padding:0 8px;}
  .ys-reader-stage .ys-nav{width:38px;height:38px;font-size:18px;}
  .ys-page img{max-height:70vh;}
  .ys-spread:not(.is-two) .ys-page{max-width:none;}
  .ys-reader-bar{padding:14px 10px;}
  .ys-tool{padding:8px 12px;font-size:9px;}
}
@media (max-width:480px){
  .ys-reader-stage .ys-nav{width:34px;height:34px;}
  .ys-counter{font-size:10px;}
  .ys-thumb{width:52px;}
}
@media (prefers-reduced-motion:reduce){
  .ys-page img{box-shadow:none;}
}

/* ==========================================================
   13. PERBAIKAN — menu, sampul zine, footer, mobile
   ========================================================== */

/* ---------- HEADER & MENU ---------- */
.ys-header .ys-wrap{
  align-items:center;
  flex-wrap:nowrap;
  gap:32px;
}
.ys-brand{flex:0 1 auto;min-width:0;}
.ys-nav{flex:0 0 auto;}
.ys-nav ul{
  flex-wrap:nowrap;
  gap:20px;
  white-space:nowrap;
}
.ys-nav a{white-space:nowrap;}

/* tombol burger — tersembunyi di desktop */
.ys-burger{
  display:none;
  flex:0 0 auto;
  width:44px;height:38px;
  background:transparent;
  border:1px solid var(--ys-line);
  color:var(--ys-paper);
  cursor:pointer;
  padding:0;
  align-items:center;justify-content:center;
  gap:4px;flex-direction:column;
  transition:border-color .12s;
}
.ys-burger span{
  display:block;width:18px;height:2px;background:var(--ys-paper);
  transition:transform .18s, opacity .18s;
}
.ys-burger:hover{border-color:var(--ys-red);}
.ys-burger[aria-expanded="true"]{border-color:var(--ys-red);background:var(--ys-red);}
.ys-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg);}
.ys-burger[aria-expanded="true"] span:nth-child(2){opacity:0;}
.ys-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg);}

@media (max-width:1080px){
  .ys-nav ul{gap:14px;}
  .ys-nav a{font-size:10px;letter-spacing:.06em;}
}

@media (max-width:860px){
  .ys-header .ys-wrap{gap:16px;}
  .ys-burger{display:flex;}

  .ys-nav{
    position:absolute;left:0;right:0;top:100%;
    background:var(--ys-ink);
    border-bottom:1px solid var(--ys-line);
    max-height:0;overflow:hidden;
    transition:max-height .22s ease;
    z-index:30;
  }
  .ys-nav.is-open{max-height:70vh;overflow-y:auto;}
  .ys-nav ul{
    flex-direction:column;
    flex-wrap:nowrap;
    gap:0;
    padding:8px var(--ys-pad) 20px;
  }
  .ys-nav li{border-top:1px solid var(--ys-line);}
  .ys-nav li:first-child{border-top:0;}
  .ys-nav a{
    display:block;padding:15px 0;
    font-size:13px;letter-spacing:.14em;
  }
}

/* logo tetap di kiri, burger di kanan — jangan menumpuk */
@media (max-width:720px){
  .ys-header .ys-wrap{
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
    padding-top:16px;padding-bottom:16px;
  }
  .ys-brand{text-align:left;}
  .ys-brand-name{font-size:13px;}
  .ys-brand-sub{font-size:8px;letter-spacing:.16em;}
}

/* ---------- SAMPUL ZINE DI HOMEPAGE ---------- */
.ys-zinearc{padding-top:64px;}
.ys-zinearc-grid{
  grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  gap:56px;
}
.ys-zinearc-covers{
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:16px;
  align-items:start;
}
.ys-zinearc-cover{
  max-width:340px;
  width:100%;
  border:1px solid var(--ys-line);
}
.ys-zinearc-cover img{aspect-ratio:1/1.414;}
.ys-zinearc-num{font-size:10px;padding:6px 10px;}

/* ---------- JUDUL BLOK ZINE ---------- */
.ys-zinearc-title{
  font-size:clamp(28px,4vw,52px);
  line-height:1.02;
  margin-bottom:22px;
}
.ys-mark{
  display:inline-block;
  padding:.06em .14em;
  line-height:1;
}

/* ---------- FOOTER ---------- */
.ys-footer .ys-wrap{padding-top:64px;padding-bottom:40px;}
.ys-wordmark{
  white-space:nowrap;
  font-size:min(12.6vw,168px);
  line-height:.95;
  letter-spacing:-.045em;
  margin:0 0 30px;

  /* gradasi terang di atas, gelap di bawah */
  background-image:linear-gradient(180deg,
    #FF7A5E 0%,
    #F0472F 34%,
    var(--ys-red) 62%,
    #6C1409 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
}
/* cadangan untuk browser yang tidak mendukung gradasi teks */
@supports not (background-clip:text){
  .ys-wordmark{color:var(--ys-red);-webkit-text-fill-color:var(--ys-red);}
}

/* ---------- HERO DI MOBILE ---------- */
@media (max-width:720px){
  .ys-hero{min-height:auto;}
  .ys-hero .ys-wrap{padding-top:56px;padding-bottom:40px;}
  .ys-hero h1{font-size:clamp(38px,12vw,64px);line-height:.88;}
  .ys-hero-media::after{
    background:linear-gradient(180deg,
      rgba(0,0,0,.62) 0%,
      rgba(0,0,0,.30) 30%,
      rgba(0,0,0,.92) 78%,
      #000 100%);
  }
  .ys-tagline{font-size:12px;margin-bottom:26px;}
  .ys-kicker{font-size:9px;letter-spacing:.18em;margin-bottom:14px;}
}

@media (max-width:1000px){
  .ys-zinearc-grid{grid-template-columns:1fr;gap:36px;}
  .ys-zinearc-covers{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));}
  .ys-zinearc-cover{max-width:260px;}
}
@media (max-width:560px){
  .ys-zinearc{padding-top:44px;}
  .ys-zinearc-covers{grid-template-columns:repeat(2,1fr);gap:12px;}
  .ys-zinearc-cover{max-width:none;}
  .ys-zinearc-title{font-size:clamp(26px,8vw,38px);}
  .ys-footer .ys-wrap{padding-top:48px;}
  .ys-wordmark{margin-bottom:24px;}
}

/* ==========================================================
   14. PERBAIKAN — hilangkan geser mendatar
   ========================================================== */

/* Tidak ada satu pun elemen yang boleh melewati lebar layar */
html,body{max-width:100%;overflow-x:hidden;}
img,svg,video{max-width:100%;}

/* ---------- MENU ---------- */
.ys-header .ys-wrap{gap:24px;}
.ys-brand{flex:0 1 auto;min-width:0;overflow:hidden;}
.ys-nav{flex:0 1 auto;min-width:0;}
.ys-nav ul{
  gap:16px;
  flex-wrap:nowrap;
  justify-content:flex-end;
}
.ys-nav a{font-size:10px;letter-spacing:.08em;}

/* layar sedang: rapatkan sebelum burger muncul */
@media (max-width:1180px){
  .ys-nav ul{gap:12px;}
  .ys-nav a{font-size:9px;letter-spacing:.05em;}
  .ys-nav a::before,.ys-nav a::after{display:none;}
}

/* ---------- FOOTER ---------- */
/* wordmark selalu muat, tidak pernah memaksa lebar */
.ys-footer{overflow:hidden;}
.ys-wordmark{
  font-size:min(11.2vw,150px);
  max-width:100%;
}

/* ---------- JUDUL BLOK ZINE ---------- */
.ys-zinearc-title{
  overflow-wrap:break-word;
  word-break:break-word;
  hyphens:auto;
}
.ys-zinearc-text{
  overflow-wrap:break-word;
}

/* ---------- pengaman umum ---------- */
/* CATATAN: jangan pakai overflow pada .ys-wrap —
   menu mobile diposisikan absolut di dalamnya dan akan terpotong. */
.ys-header,.ys-header .ys-wrap{overflow:visible;}
.ys-hero h1,.ys-post-hero h1,.ys-arc-head h1,.ys-reader-head h1{
  overflow-wrap:break-word;
}


/* ==========================================================
   15. MENU MOBILE — pastikan tampil utuh
   ========================================================== */
.ys-header{position:relative;z-index:40;overflow:visible;}
.ys-header .ys-wrap{overflow:visible;position:relative;}

@media (max-width:860px){
  .ys-nav{
    position:absolute;
    left:calc(var(--ys-pad) * -1);
    right:calc(var(--ys-pad) * -1);
    top:calc(100% + 16px);
    background:var(--ys-ink);
    border-top:1px solid var(--ys-line);
    border-bottom:1px solid var(--ys-line);
    max-height:0;
    overflow:hidden;
    transition:max-height .22s ease;
    z-index:50;
  }
  .ys-nav.is-open{max-height:min(70vh,520px);overflow-y:auto;}

  .ys-nav ul{
    display:flex;
    flex-direction:column;
    flex-wrap:nowrap;
    justify-content:flex-start;
    gap:0;
    padding:4px var(--ys-pad) 16px;
    white-space:normal;
  }
  .ys-nav li{width:100%;border-top:1px solid var(--ys-line);}
  .ys-nav li:first-child{border-top:0;}
  .ys-nav a{
    display:block;
    width:100%;
    padding:16px 0;
    font-size:13px;
    letter-spacing:.14em;
    white-space:nowrap;
  }
  /* kurung siku dimunculkan lagi di menu mobile */
  .ys-nav a::before{content:"[";display:inline;color:var(--ys-dim);margin-right:2px;}
  .ys-nav a::after{content:"]";display:inline;color:var(--ys-dim);margin-left:2px;}
}


/* ==========================================================
   16. PENGAMAN — menu situs vs tombol pembaca zine
   Keduanya sempat memakai kelas .ys-nav.
   Aturan di bawah memastikan menu situs tidak ikut terkena
   ukuran tombol panah pembaca.
   ========================================================== */
@media (min-width:861px){
  .ys-header .ys-nav{
    width:auto;
    height:auto;
    border:0;
    background:transparent;
    font-size:inherit;
    line-height:inherit;
    cursor:auto;
  }
}
/* Di layar kecil cukup lepaskan ukuran kotaknya saja —
   latar dan border tetap milik menu mobile. */
@media (max-width:860px){
  .ys-header .ys-nav{
    width:auto;
    height:auto;
    font-size:inherit;
    line-height:inherit;
    cursor:auto;
  }
}


/* ==========================================================
   17. MENU MOBILE — rata kanan, jarak lebih rapat, latar pekat
   ========================================================== */
@media (max-width:860px){

  .ys-header .ys-nav{
    background:var(--ys-ink) !important;
    border-top:1px solid var(--ys-line);
    border-bottom:1px solid var(--ys-line);
    border-left:0;border-right:0;
    box-shadow:0 18px 34px rgba(0,0,0,.7);
  }

  .ys-nav ul{
    align-items:stretch;
    padding:0 var(--ys-pad) 8px;
  }

  .ys-nav li{
    width:100%;
    border-top:1px solid var(--ys-line);
  }
  .ys-nav li:first-child{border-top:0;}

  .ys-nav a{
    display:block;
    width:100%;
    text-align:right;          /* sejajar dengan tombol burger */
    padding:12px 0;            /* lebih rapat dari sebelumnya */
    font-size:12px;
    letter-spacing:.12em;
    line-height:1.2;
  }
}

@media (max-width:480px){
  .ys-nav a{padding:11px 0;font-size:11px;}
}

/* ==========================================================
   18. INTERVIEW — headline, sampul, transkrip, galeri
   ========================================================== */

/* ---------- Blok headline di homepage ---------- */
.ys-ivhead{
  position:relative;
  min-height:72vh;
  display:flex;align-items:flex-end;
  background:var(--ys-ink);
  overflow:hidden;
  padding:0 0 8px;
}
.ys-ivhead-media{
  position:absolute;inset:0;z-index:0;
  background-size:cover;background-position:center 20%;
  filter:grayscale(1) contrast(1.2);
}
/* gradasi hitam ke transparan, pekat di bawah */
.ys-ivhead-media::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(180deg,
      rgba(0,0,0,.55) 0%,
      rgba(0,0,0,.10) 26%,
      rgba(0,0,0,.80) 72%,
      rgba(0,0,0,.97) 92%,
      #000 100%),
    linear-gradient(90deg,
      rgba(0,0,0,.80) 0%,
      rgba(0,0,0,.20) 55%,
      rgba(0,0,0,.40) 100%);
}
.ys-ivhead-media::before{
  content:"";position:absolute;inset:0;z-index:1;
  background:repeating-linear-gradient(0deg,
    rgba(0,0,0,.26) 0px, rgba(0,0,0,.26) 1px,
    rgba(0,0,0,0) 2px, rgba(0,0,0,0) 4px);
}
.ys-ivhead .ys-wrap{position:relative;z-index:2;width:100%;padding-top:90px;padding-bottom:52px;}

.ys-ivhead-kicker{
  font-family:var(--ys-mono);font-size:10px;font-weight:700;
  color:var(--ys-red);text-transform:uppercase;letter-spacing:.26em;
  margin:0 0 18px;
}
.ys-ivhead-name{
  font-family:var(--ys-display);
  font-size:clamp(40px,8.5vw,110px);
  line-height:.86;letter-spacing:-.035em;text-transform:uppercase;
  margin:0 0 24px;max-width:14ch;
}
.ys-ivhead-quote{
  margin:0 0 28px;padding:0 0 0 18px;
  border-left:3px solid var(--ys-red);
  max-width:52ch;
}
.ys-ivhead-quote p{
  font-family:var(--ys-mono);font-size:14px;line-height:1.72;
  color:#DCD8D5;margin:0;
}
.ys-ivhead-quote p::before{content:"“";}
.ys-ivhead-quote p::after{content:"”";}

.ys-ivhead-foot{display:flex;align-items:center;gap:18px;flex-wrap:wrap;}
.ys-ivhead-date{
  font-family:var(--ys-mono);font-size:10px;
  text-transform:uppercase;letter-spacing:.16em;color:var(--ys-dim);
}

/* ---------- Sampul halaman interview ---------- */
.ys-ivcover{
  position:relative;background:var(--ys-ink);
  min-height:66vh;display:flex;align-items:flex-end;overflow:hidden;
}
.ys-ivcover-media{
  position:absolute;inset:0;z-index:0;
  background-size:cover;background-position:center 20%;
  filter:grayscale(1) contrast(1.2);
}
.ys-ivcover-media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,
    rgba(0,0,0,.58) 0%,
    rgba(0,0,0,.12) 28%,
    rgba(0,0,0,.84) 74%,
    #000 100%);
}
.ys-ivcover-media::before{
  content:"";position:absolute;inset:0;z-index:1;
  background:repeating-linear-gradient(0deg,
    rgba(0,0,0,.26) 0px, rgba(0,0,0,.26) 1px,
    rgba(0,0,0,0) 2px, rgba(0,0,0,0) 4px);
}
.ys-ivcover .ys-wrap{position:relative;z-index:2;width:100%;padding-top:96px;padding-bottom:48px;}
.ys-ivcover-name{
  font-family:var(--ys-display);
  font-size:clamp(38px,8vw,100px);
  line-height:.86;letter-spacing:-.035em;text-transform:uppercase;
  margin:0 0 22px;max-width:14ch;
}
.ys-ivcover-quote{
  margin:0 0 24px;padding:0 0 0 18px;
  border-left:3px solid var(--ys-red);max-width:54ch;
}
.ys-ivcover-quote p{
  font-family:var(--ys-mono);font-size:14px;line-height:1.72;color:#DCD8D5;margin:0;
}
.ys-ivcover-quote p::before{content:"“";}
.ys-ivcover-quote p::after{content:"”";}

/* ---------- Avatar ---------- */
.ys-av{
  display:inline-grid;place-items:center;flex:none;
  font-family:var(--ys-mono);font-weight:700;
  text-transform:uppercase;letter-spacing:.04em;
  overflow:hidden;line-height:1;
  border:1px solid var(--ys-line);
}
.ys-av img{width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(1) contrast(1.1);}
.ys-av--sm{width:34px;height:34px;font-size:11px;}
.ys-av--md{width:52px;height:52px;font-size:15px;}
.ys-av--lg{width:76px;height:76px;font-size:22px;}

.ys-av.tone-a{background:var(--ys-red);color:#fff;border-color:var(--ys-red);}
.ys-av.tone-b{background:#1A1A1A;color:var(--ys-paper);}
.ys-av.tone-c{background:var(--ys-paper);color:var(--ys-ink);border-color:var(--ys-paper);}

/* ---------- Transkrip ---------- */
.ys-iv-line{
  display:grid;grid-template-columns:132px 1fr;
  gap:20px;margin-bottom:22px;align-items:start;
}
.ys-iv-line.is-same{margin-top:-12px;}

.ys-iv-who{display:flex;align-items:center;gap:10px;padding-top:2px;min-height:1px;}
.ys-iv-nm{
  font-family:var(--ys-mono);font-size:10px;font-weight:700;
  text-transform:uppercase;letter-spacing:.12em;color:var(--ys-dim);
  overflow-wrap:anywhere;
}

.ys-iv-txt p{margin:0 0 12px;}
.ys-iv-txt p:last-child{margin-bottom:0;}

/* pertanyaan kontributor — lebih redup, lebih kecil */
.ys-iv-line.is-q .ys-iv-txt p{
  font-family:var(--ys-mono);font-size:14px;line-height:1.7;
  color:#9E9A97;
}
.ys-iv-line.is-q .ys-iv-nm{color:var(--ys-red);}

/* jawaban artis — teks utama */
.ys-iv-line.is-a .ys-iv-txt{
  border-left:2px solid var(--ys-line);padding-left:20px;
}
.ys-iv-line.is-a .ys-iv-txt p{
  font-size:17px;line-height:1.75;color:var(--ys-paper);
}

.ys-iv-h{
  font-family:var(--ys-display);
  font-size:clamp(20px,3vw,28px);line-height:1.02;
  text-transform:uppercase;letter-spacing:-.01em;
  margin:52px 0 26px;
  padding-top:24px;border-top:1px solid var(--ys-line);
}
.ys-iv-note{
  font-family:var(--ys-mono);font-size:13px;line-height:1.75;
  color:#8A8683;margin:0 0 22px;
  padding-left:20px;border-left:2px solid var(--ys-red);
}

/* ---------- Galeri ---------- */
.ys-gal{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
.ys-gal-item{margin:0;line-height:0;}
.ys-gal-item img{
  width:100%;height:100%;display:block;aspect-ratio:4/3;object-fit:cover;
  border:1px solid var(--ys-line);
  filter:grayscale(1) contrast(1.15);transition:filter .22s;
}
.ys-gal-item:hover img{filter:grayscale(0) contrast(1.02);}
.ys-gal-item figcaption{
  font-family:var(--ys-mono);font-size:10px;line-height:1.6;
  text-transform:uppercase;letter-spacing:.1em;color:var(--ys-dim);
  padding-top:8px;
}

/* ---------- Pemutar Bandcamp ---------- */
.ys-bandcamp{border:1px solid var(--ys-line);margin:0 0 8px;line-height:0;}
.ys-bandcamp iframe{width:100%;height:320px;border:0;display:block;}

/* ---------- Tautan sosial ---------- */
.ys-links{display:flex;gap:10px;flex-wrap:wrap;list-style:none;margin:0;padding:0;}
.ys-links a{
  display:inline-block;font-family:var(--ys-mono);font-size:11px;font-weight:700;
  text-transform:uppercase;letter-spacing:.12em;text-decoration:none;
  padding:11px 18px;border:1px solid var(--ys-line);color:var(--ys-paper);
  transition:background .12s,border-color .12s,color .12s;
}
.ys-links a::after{content:" ↗";color:var(--ys-dim);}
.ys-links a:hover{background:var(--ys-red);border-color:var(--ys-red);color:#fff;}
.ys-links a:hover::after{color:#fff;}

/* ---------- Mobile ---------- */
@media (max-width:820px){
  .ys-gal{grid-template-columns:repeat(2,1fr);gap:10px;}
  .ys-iv-line{grid-template-columns:1fr;gap:10px;margin-bottom:26px;}
  .ys-iv-line.is-same{margin-top:-16px;}
  .ys-iv-line.is-a .ys-iv-txt{padding-left:14px;}
}
@media (max-width:560px){
  /* Beri ruang tetap untuk foto banner, bukan min-height:auto.
     min-height:auto membuat kotak menciut mengikuti tinggi teks,
     dan karena foto latar posisinya absolute (menumpuk di belakang),
     foto ikut tertutup teks begitu kotaknya menciut. */
  .ys-ivhead{
    min-height:0;
    padding-top:56vw;         /* ruang foto: proporsional lebar layar */
    display:block;
  }
  .ys-ivhead .ys-wrap{padding-top:24px;padding-bottom:36px;}

  .ys-ivcover{
    min-height:0;
    padding-top:60vw;
    display:block;
  }
  .ys-ivcover .ys-wrap{padding-top:24px;padding-bottom:32px;}

  .ys-ivhead-name,.ys-ivcover-name{max-width:none;}
  .ys-ivhead-quote p,.ys-ivcover-quote p{font-size:13px;}
  .ys-gal{grid-template-columns:1fr;}
  .ys-iv-line.is-a .ys-iv-txt p{font-size:16px;}
  .ys-bandcamp iframe{height:290px;}
}

@media (max-width:400px){
  .ys-ivhead{padding-top:64vw;}
  .ys-ivcover{padding-top:68vw;}
}

/* ==========================================================
   19. PENGAMAN — avatar tidak boleh melar
   ========================================================== */
.ys-av{width:34px;height:34px;flex:none;overflow:hidden;display:inline-grid;place-items:center;}
.ys-av img{width:100%;height:100%;object-fit:cover;display:block;max-width:none;}
.ys-av--sm{width:34px;height:34px;}
.ys-av--md{width:52px;height:52px;}
.ys-av--lg{width:76px;height:76px;}

/* ==========================================================
   20. PERBAIKAN — avatar, galeri, pemutar Bandcamp
   ========================================================== */

/* ---------- AVATAR ----------
   Foto harus dipotong tengah, bukan tampil sebagian.
   Aturan ini sengaja ditulis ulang dengan spesifisitas lebih tinggi
   supaya tidak kalah oleh aturan lama mana pun. */
.ys-iv-who .ys-av,
.ys-body .ys-av,
span.ys-av{
  display:inline-grid !important;
  place-items:center;
  flex:none;
  overflow:hidden;
  position:relative;
  border:1px solid var(--ys-line);
}
.ys-iv-who .ys-av img,
.ys-body .ys-av img,
span.ys-av img{
  position:absolute;inset:0;
  width:100% !important;height:100% !important;
  max-width:none !important;
  object-fit:cover !important;
  object-position:center top;   /* wajah biasanya di bagian atas */
  display:block;
  margin:0;
}
span.ys-av--sm{width:34px !important;height:34px !important;}
span.ys-av--md{width:52px !important;height:52px !important;}
span.ys-av--lg{width:76px !important;height:76px !important;}

/* ---------- GALERI ----------
   Rasio asli foto dipertahankan — tidak dipotong jadi 4:3.
   Tata letak kolom, tinggi mengikuti gambar masing-masing. */
.ys-gal{
  display:block;
  columns:3;
  column-gap:14px;
}
.ys-gal-item{
  break-inside:avoid;
  -webkit-column-break-inside:avoid;
  page-break-inside:avoid;
  display:block;
  margin:0 0 14px;
}
.ys-gal-item img{
  width:100%;
  height:auto !important;
  aspect-ratio:auto !important;
  object-fit:fill !important;
  display:block;
  border:1px solid var(--ys-line);
}

/* ---------- PEMUTAR BANDCAMP ----------
   Tinggi mengikuti kode embed yang ditempel, bukan angka tetap. */
.ys-bandcamp{
  border:1px solid var(--ys-line);
  margin:0 0 10px;
  line-height:0;
  max-width:100%;
}
.ys-bandcamp iframe{
  width:100%;
  height:var(--bc-h,340px);
  border:0;
  display:block;
}
/* pemutar ramping: tanpa bingkai tambahan */
.ys-bandcamp.is-slim{border-color:transparent;}

@media (max-width:900px){
  .ys-gal{columns:2;}
}
@media (max-width:560px){
  .ys-gal{columns:1;column-gap:0;}
  .ys-gal-item{margin-bottom:12px;}
}

/* ==========================================================
   21. EVENT RAIL — geser tanpa JavaScript
   CSS scroll-snap murni, jalan di semua perangkat termasuk HP.
   ========================================================== */
.ys-evrail{
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  scroll-snap-type:x proximity;
  scrollbar-width:thin;
  scrollbar-color:var(--ys-line) transparent;
  padding-bottom:6px;
}
.ys-evrail::-webkit-scrollbar{height:6px;}
.ys-evrail::-webkit-scrollbar-thumb{background:var(--ys-line);}
.ys-evrail:focus-visible{outline:3px solid var(--ys-red);outline-offset:-3px;}

.ys-evrail-track{
  display:flex;
  gap:16px;
  /* Sisi kiri disejajarkan dengan kolom konten (sama seperti .ys-wrap),
     bukan cuma nempel var(--ys-pad) dari tepi layar. Kalau layar jauh
     lebih lebar dari lebar konten maksimum, tanpa ini rail akan terlihat
     menjorok ke kiri sendiri dibanding section lain di atas/bawahnya.
     Sisi kanan tetap dibiarkan bebas supaya rail bisa digeser sampai habis. */
  padding-left: max(var(--ys-pad), calc((100% - var(--ys-max)) / 2 + var(--ys-pad)));
  padding-right: var(--ys-pad);
  padding-bottom: 8px;
  width:max-content;
}

.ys-evcard{
  scroll-snap-align:start;
  flex:0 0 auto;
  width:220px;
  display:block;
  text-decoration:none;color:inherit;
}
.ys-evcard-media{
  position:relative;
  aspect-ratio:3/4;              /* flyer biasanya potret */
  background:#141414;
  overflow:hidden;
  margin-bottom:12px;
  border:1px solid var(--ys-line);
}
.ys-evcard-media img{
  width:100%;height:100%;object-fit:cover;display:block;
  filter:grayscale(1) contrast(1.15);transition:filter .2s, transform .3s;
}
.ys-evcard:hover .ys-evcard-media img{filter:grayscale(0) contrast(1.02);transform:scale(1.03);}

.ys-evcard-badge{
  position:absolute;left:0;top:0;z-index:2;
  font-family:var(--ys-mono);font-size:9px;font-weight:700;
  text-transform:uppercase;letter-spacing:.14em;
  padding:6px 10px;
}
.ys-evcard-badge.is-upcoming{background:var(--ys-red);color:#fff;}
.ys-evcard-badge.is-report{background:var(--ys-paper);color:var(--ys-ink);}

.ys-evcard-title{
  font-family:var(--ys-display);font-size:15px;line-height:1.12;
  text-transform:uppercase;letter-spacing:-.005em;
  margin:0 0 6px;
  transition:color .12s;
}
.ys-evcard:hover .ys-evcard-title{color:var(--ys-red);}
.ys-evcard-meta{
  font-family:var(--ys-mono);font-size:9px;text-transform:uppercase;
  letter-spacing:.12em;color:var(--ys-dim);margin:0 0 8px;
}
.ys-evcard-excerpt{font-size:12px;line-height:1.55;color:#9E9A97;margin:0;}

.ys-evcard--more{
  width:140px;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;
  border:1px dashed var(--ys-line);
  aspect-ratio:3/4;
  text-align:center;
}
.ys-evcard--more span{
  font-family:var(--ys-mono);font-size:12px;font-weight:700;
  text-transform:uppercase;letter-spacing:.1em;color:var(--ys-dim);
}
.ys-evcard--more:hover{border-color:var(--ys-red);}
.ys-evcard--more:hover span{color:var(--ys-red);}

@media (max-width:560px){
  .ys-evcard{width:168px;}
  .ys-evcard--more{width:110px;}
}

/* ==========================================================
   22. CTA KONTRIBUSI
   ========================================================== */
.ys-cta{
  display:flex;align-items:center;justify-content:space-between;
  gap:20px;flex-wrap:wrap;
  border:1px solid var(--ys-line);
  padding:26px 28px;
  margin-top:44px;
}
.ys-cta-kicker{
  font-family:var(--ys-mono);font-size:10px;font-weight:700;
  color:var(--ys-red);text-transform:uppercase;letter-spacing:.18em;
  margin:0 0 8px;
}
.ys-cta-body{font-size:14px;color:#B4B0AD;margin:0;max-width:44ch;}
.ys-cta--compact{padding:18px 20px;margin-top:28px;}
.ys-cta--compact .ys-cta-body{font-size:13px;}

@media (max-width:560px){
  .ys-cta{flex-direction:column;align-items:flex-start;padding:22px 20px;}
  .ys-cta .ys-btn{width:100%;text-align:center;}
}

/* ==========================================================
   23. FORM CONTRIBUTE
   ========================================================== */
.ys-cform label{
  display:block;
  font-family:var(--ys-mono);font-size:10px;font-weight:700;
  text-transform:uppercase;letter-spacing:.14em;color:var(--ys-dim);
  margin:0 0 22px;
}
.ys-cform label em{
  display:block;font-style:normal;text-transform:none;letter-spacing:0;
  font-size:11px;color:#6B6764;margin-top:4px;
}
.ys-cform input[type=text],
.ys-cform input[type=email],
.ys-cform input[type=url],
.ys-cform select,
.ys-cform textarea{
  display:block;width:100%;margin-top:8px;
  background:#0C0C0C;border:1px solid var(--ys-line);
  color:var(--ys-paper);font-family:var(--ys-body);font-size:15px;
  padding:13px 14px;
}
.ys-cform textarea{resize:vertical;line-height:1.6;}
.ys-cform input:focus,.ys-cform select:focus,.ys-cform textarea:focus{
  outline:none;border-color:var(--ys-red);
}

/* honeypot — tersembunyi dari manusia, tetap ada untuk bot */
.ys-hp{position:absolute;left:-9999px;top:-9999px;width:1px;height:1px;overflow:hidden;}

.ys-sent{padding:40px 0;}
.ys-sent-big{
  font-family:var(--ys-display);font-size:clamp(32px,5vw,52px);
  text-transform:uppercase;color:var(--ys-red);margin:0 0 16px;
}
.ys-sent p{font-size:16px;color:#B4B0AD;margin:0 0 28px;max-width:50ch;}

@media (max-width:560px){
  .ys-cform input,.ys-cform select,.ys-cform textarea{font-size:14px;padding:11px 12px;}
}

/* ==========================================================
   24. HEADLINE — kartu sekunder (2 slot di bawah banner utama)
   ========================================================== */
.ys-hlrow{background:var(--ys-ink);padding:0 0 64px;}
.ys-hlrow-grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:20px;
}
.ys-hlrow-grid--1{grid-template-columns:1fr;max-width:520px;}

.ys-hlmini{display:block;text-decoration:none;color:inherit;}
.ys-hlmini-media{
  position:relative;aspect-ratio:16/9;overflow:hidden;
  background:#141414;margin-bottom:14px;border:1px solid var(--ys-line);
}
.ys-hlmini-media img{
  width:100%;height:100%;object-fit:cover;display:block;
  filter:grayscale(1) contrast(1.15);transition:filter .2s, transform .3s;
}
.ys-hlmini:hover .ys-hlmini-media img{filter:grayscale(0) contrast(1.02);transform:scale(1.03);}

.ys-hlmini-tag{
  position:absolute;left:0;top:0;z-index:2;
  background:var(--ys-red);color:#fff;
  font-family:var(--ys-mono);font-size:9px;font-weight:700;
  text-transform:uppercase;letter-spacing:.14em;
  padding:6px 10px;
}
.ys-hlmini-title{
  font-family:var(--ys-display);font-size:19px;line-height:1.1;
  text-transform:uppercase;letter-spacing:-.01em;
  margin:0 0 8px;transition:color .12s;
}
.ys-hlmini:hover .ys-hlmini-title{color:var(--ys-red);}
.ys-hlmini-excerpt{font-size:13px;line-height:1.55;color:#9E9A97;margin:0;}

@media (max-width:820px){
  .ys-hlrow-grid{grid-template-columns:1fr;max-width:520px;}
}
@media (max-width:560px){
  .ys-hlrow{padding-bottom:48px;}
  .ys-hlmini-title{font-size:18px;}
}

/* ==========================================================
   25. HEADLINE SLIDER — mengikuti referensi harshnoise.org
   Catatan: menggantikan pemakaian .ys-ivhead/.ys-hlrow di homepage.
   Kedua class lama sengaja dibiarkan (dead code aman) karena
   .ys-ivcover (halaman interview tunggal) masih memakai pola serupa.
   ========================================================== */
.ys-slider{
  position:relative;background:var(--ys-ink);overflow:hidden;
  min-height:72vh;
}

.ys-slide{
  position:absolute;inset:0;
  display:flex;align-items:flex-end;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .5s ease;
}
.ys-slide.is-active{opacity:1;visibility:visible;pointer-events:auto;}

.ys-slide-media{
  position:absolute;inset:0;z-index:0;
  background-size:cover;background-position:center 20%;
  filter:grayscale(1) contrast(1.2);
}
.ys-slide-media::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(180deg,
      rgba(0,0,0,.55) 0%, rgba(0,0,0,.10) 26%,
      rgba(0,0,0,.80) 72%, rgba(0,0,0,.97) 92%, #000 100%),
    linear-gradient(90deg,
      rgba(0,0,0,.80) 0%, rgba(0,0,0,.20) 55%, rgba(0,0,0,.40) 100%);
}
.ys-slide-media::before{
  content:"";position:absolute;inset:0;z-index:1;
  background:repeating-linear-gradient(0deg,
    rgba(0,0,0,.26) 0px, rgba(0,0,0,.26) 1px,
    rgba(0,0,0,0) 2px, rgba(0,0,0,0) 4px);
}

.ys-slide .ys-wrap{position:relative;z-index:2;width:100%;padding-top:90px;padding-bottom:68px;}

.ys-slide-kicker{
  font-family:var(--ys-mono);font-size:10px;font-weight:700;
  color:var(--ys-red);text-transform:uppercase;letter-spacing:.2em;
  margin:0 0 18px;
}
.ys-slide-name{
  font-family:var(--ys-display);
  font-size:clamp(40px,8.5vw,110px);line-height:.86;
  letter-spacing:-.035em;text-transform:uppercase;
  margin:0 0 22px;max-width:16ch;
}
.ys-slide-excerpt{
  font-size:15px;line-height:1.7;color:#CFCBC8;
  max-width:52ch;margin:0 0 30px;
}

.ys-slide-cta{
  display:inline-flex;align-items:center;gap:14px;
  text-decoration:none;color:var(--ys-paper);
  font-family:var(--ys-mono);font-weight:700;font-size:12px;
  text-transform:uppercase;letter-spacing:.12em;
}
.ys-slide-arrow{
  width:42px;height:42px;border-radius:100%;
  border:1px solid var(--ys-paper);
  display:grid;place-items:center;font-size:16px;
  transition:background .15s,border-color .15s,color .15s,transform .15s;
}
.ys-slide-cta:hover .ys-slide-arrow{
  background:var(--ys-red);border-color:var(--ys-red);color:#fff;
  transform:translateX(3px);
}

/* garis merah — titik navigasi.
   Sengaja dalam alur teks biasa (bukan absolute), supaya selalu
   menempel tepat di bawah tombol Read More di ukuran layar apa pun. */
.ys-slider-dots{
  display:flex;gap:8px;margin-top:26px;
}
.ys-dot{
  width:22px;height:3px;background:rgba(245,244,242,.28);
  border:0;padding:0;cursor:pointer;
  transition:background .2s,width .2s;
}
.ys-dot.is-active{background:var(--ys-red);width:34px;}
.ys-dot:hover{background:rgba(245,244,242,.55);}
.ys-dot:focus-visible{outline:2px solid var(--ys-red);outline-offset:3px;}

/* ---------- Mobile ---------- */
@media (max-width:820px){
  .ys-slider{min-height:66vh;}
  .ys-slide-name{max-width:none;}
}
@media (max-width:560px){
  .ys-slider{min-height:60vh;}
  .ys-slide .ys-wrap{padding-top:56px;padding-bottom:54px;}
  .ys-slide-excerpt{font-size:13px;}
  .ys-slider-dots{margin-top:20px;}
}
@media (prefers-reduced-motion:reduce){
  .ys-slide{transition:none;}
}