:root{
    --ink:#1c1815;
    --panel:#251f1a;
    --paper:#e9dfc6;
    --paper-dim:#d8cba9;
    --oxide:#a8402c;
    --oxide-dim:#7c3122;
    --olive:#6d7350;
    --brass:#c39a3c;
    --thread:#8f8368;
    --radius:2px;
  }

  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    background:var(--ink);
    color:var(--paper);
    font-family:'Lora', Georgia, serif;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }
  ::selection{ background:var(--oxide); color:var(--paper); }

  .label-face{ font-family:'Special Elite', 'Courier New', monospace; letter-spacing:0.02em; }
  .mono{ font-family:'Courier Prime', 'Courier New', monospace; }

  a{ color:inherit; }

  /* subtle tape-hiss grain */
  body::before{
    content:"";
    position:fixed; inset:0;
    pointer-events:none;
    z-index:500;
    opacity:0.05;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    mix-blend-mode:overlay;
  }

  /* ---------- topbar ---------- */
  .topbar{
    position:sticky; top:0; z-index:100;
    display:flex; align-items:center; justify-content:space-between;
    padding:18px 6vw;
    background:rgba(28,24,21,0.92);
    backdrop-filter:blur(6px);
    border-bottom:1px solid rgba(233,223,198,0.12);
    gap:12px;
  }
  .brandmark{
    display:flex; align-items:center; gap:10px;
    font-size:0.82rem;
    text-transform:uppercase;
    letter-spacing:0.14em;
    min-width:0;
  }
  .brandmark a{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:block; }
  .brandmark svg{ width:22px; height:22px; flex-shrink:0; }
  .langtoggle{
    display:flex; border:1px solid var(--thread); border-radius:var(--radius); overflow:hidden;
    flex-shrink:0;
  }
  .langtoggle button{
    font-family:'Courier Prime', monospace;
    font-size:0.78rem;
    letter-spacing:0.08em;
    background:transparent;
    border:none;
    color:var(--paper-dim);
    padding:7px 14px;
    cursor:pointer;
    transition:background .2s, color .2s;
  }
  .langtoggle button + button{ border-left:1px solid var(--thread); }
  .langtoggle button.active{ background:var(--oxide); color:var(--paper); }
  .langtoggle button:focus-visible, button:focus-visible, a:focus-visible{
    outline:2px solid var(--brass); outline-offset:2px;
  }

  /* ---------- hero ---------- */
  .hero{
    position:relative;
    padding:14vh 6vw 12vh;
    display:grid;
    grid-template-columns:1.1fr 0.9fr;
    align-items:center;
    gap:6vw;
    overflow:hidden;
    border-bottom:1px solid rgba(233,223,198,0.12);
  }
  .hero-copy .eyebrow{
    font-family:'Courier Prime', monospace;
    color:var(--brass);
    font-size:0.82rem;
    letter-spacing:0.18em;
    text-transform:uppercase;
    margin:0 0 22px;
  }
  .hero-copy h1{
    font-family:'Special Elite', monospace;
    font-size:clamp(2.1rem, 4.4vw, 3.6rem);
    line-height:1.16;
    margin:0 0 26px;
    max-width:12ch;
  }
  .hero-copy p{
    font-size:1.05rem;
    color:var(--paper-dim);
    max-width:46ch;
    margin:0 0 34px;
  }
  .hero-cta{
    display:inline-flex; align-items:center; gap:10px;
    font-family:'Courier Prime', monospace;
    font-size:0.85rem; letter-spacing:0.08em; text-transform:uppercase;
    color:var(--ink); background:var(--brass);
    padding:13px 22px; border-radius:var(--radius);
    text-decoration:none;
    transition:transform .15s ease, background .15s ease;
  }
  .hero-cta:hover{ background:#d8ac47; transform:translateY(-1px); }

  /* reel graphic */
  .reel-wrap{ position:relative; display:flex; justify-content:center; }
  .reel{ width:min(100%, 380px); height:auto; animation:spin 40s linear infinite; }
  @keyframes spin{ to{ transform:rotate(360deg); } }
  @media (prefers-reduced-motion:reduce){ .reel{ animation:none; } }

  /* ---------- section shell ---------- */
  section{ padding:11vh 6vw; }
  .section-head{ margin-bottom:6vh; max-width:56ch; }
  .section-tag{
    font-family:'Courier Prime', monospace;
    color:var(--brass);
    font-size:0.78rem; letter-spacing:0.16em; text-transform:uppercase;
    margin:0 0 12px;
  }
  .section-head h2{
    font-family:'Special Elite', monospace;
    font-size:clamp(1.5rem, 2.6vw, 2.1rem);
    margin:0;
  }

  /* ---------- about ---------- */
  .about{ background:var(--panel); border-bottom:1px solid rgba(233,223,198,0.12); }
  .about-grid{
    display:grid; grid-template-columns:1.3fr 0.7fr; gap:6vw; align-items:start;
  }
  .about-body p{ color:var(--paper-dim); font-size:1.02rem; margin:0 0 20px; }
  .about-body p:first-of-type{ color:var(--paper); }
  .disclosure{
    border-left:2px solid var(--oxide);
    padding:4px 0 4px 18px;
    margin-top:32px;
    font-family:'Courier Prime', monospace;
    font-size:0.85rem;
    color:var(--paper-dim);
  }

  .gear-card{
    border:1px solid var(--thread);
    border-radius:var(--radius);
    padding:26px 24px;
    background:rgba(233,223,198,0.03);
  }
  .gear-card h3{
    font-family:'Special Elite', monospace;
    font-size:1rem; margin:0 0 16px;
    color:var(--brass);
  }
  .gear-card dl{ margin:0; }
  .gear-card dt{ font-family:'Courier Prime', monospace; font-size:0.78rem; color:var(--thread); text-transform:uppercase; letter-spacing:0.06em; margin-top:14px; }
  .gear-card dt:first-child{ margin-top:0; }
  .gear-card dd{ margin:2px 0 0; font-size:0.92rem; color:var(--paper-dim); }

  /* ---------- episodes ---------- */
  .episodes{ }
  .ep{
    display:grid;
    grid-template-columns:0.85fr 1.15fr;
    gap:5vw;
    align-items:start;
    padding:6vh 0;
  }
  .ep + .ep{ border-top:1px solid rgba(233,223,198,0.12); }

  .tape-label{
    background:var(--paper);
    color:var(--ink);
    border-radius:1px;
    padding:22px 22px 24px;
    box-shadow:0 14px 30px rgba(0,0,0,0.35);
    transform:rotate(var(--tilt, -1.1deg));
    position:relative;
  }
  .tape-label::before{
    content:"";
    position:absolute; inset:6px;
    border:1px dashed rgba(28,24,21,0.25);
    pointer-events:none;
  }
  .tape-label .ep-num{
    font-family:'Courier Prime', monospace;
    font-size:0.72rem; letter-spacing:0.14em; text-transform:uppercase;
    color:var(--oxide-dim);
    margin:0 0 10px;
  }
  .tape-label h3{
    font-family:'Special Elite', monospace;
    font-size:1.28rem;
    line-height:1.3;
    margin:0 0 16px;
  }
  .tape-meta{
    font-family:'Courier Prime', monospace;
    font-size:0.82rem;
    border-top:1px solid rgba(28,24,21,0.2);
    padding-top:12px;
    display:grid;
    grid-template-columns:auto 1fr;
    gap:5px 10px;
    color:#3a342b;
  }
  .tape-meta span:nth-child(odd){ color:var(--oxide-dim); text-transform:uppercase; letter-spacing:0.06em; font-size:0.72rem; }

  .ep-copy p{ color:var(--paper-dim); margin:0 0 22px; font-size:1rem; }
  .ep-copy p:first-child{ color:var(--paper); }

  .video-frame{
    position:relative;
    border:1px solid var(--thread);
    border-radius:var(--radius);
    padding:10px;
    background:rgba(0,0,0,0.25);
  }
  .video-frame .ratio{
    position:relative; width:100%; padding-top:56.25%;
    background:#000;
  }
  .video-frame iframe{
    position:absolute; inset:0; width:100%; height:100%; border:0;
  }
  .video-caption{
    font-family:'Courier Prime', monospace;
    font-size:0.72rem;
    color:var(--thread);
    padding:8px 4px 2px;
    text-transform:uppercase;
    letter-spacing:0.08em;
  }

  /* ---------- footer ---------- */
  footer{
    padding:8vh 6vw 6vh;
    border-top:1px solid rgba(233,223,198,0.12);
    display:flex; flex-wrap:wrap; gap:24px;
    align-items:center; justify-content:space-between;
  }
  footer .foot-left{ font-family:'Courier Prime', monospace; font-size:0.8rem; color:var(--thread); }
  footer .foot-links{ display:flex; gap:22px; }
  footer .foot-links a{
    font-family:'Courier Prime', monospace;
    font-size:0.8rem; letter-spacing:0.06em; text-transform:uppercase;
    color:var(--paper-dim); text-decoration:none;
    border-bottom:1px solid transparent;
  }
  footer .foot-links a:hover{ color:var(--brass); border-color:var(--brass); }

  [data-i18n]{ }
  [data-lang="tr"] [data-en], [data-lang="en"] [data-tr]{ display:none; }

  @media (max-width: 880px){
    .hero{ grid-template-columns:1fr; padding-top:16vh; }
    .reel-wrap{ order:-1; }
    .reel{ width:200px; }
    .about-grid{ grid-template-columns:1fr; }
    .ep{ grid-template-columns:1fr; }
    .tape-label{ transform:rotate(-0.6deg); }
  }

/* ---------- detail pages ---------- */
.back-link{
  display:inline-flex; align-items:center; gap:8px;
  font-family:'Courier Prime', monospace;
  font-size:0.8rem; letter-spacing:0.06em; text-transform:uppercase;
  color:var(--paper-dim); text-decoration:none;
  padding:22px 6vw 0;
  display:block;
}
.back-link:hover{ color:var(--brass); }

.detail-hero{
  padding:6vh 6vw 7vh;
  border-bottom:1px solid rgba(233,223,198,0.12);
  display:grid;
  grid-template-columns:0.8fr 1.2fr;
  gap:6vw;
  align-items:start;
}
.detail-hero .tape-label{ width:100%; }
.detail-hero .intro .eyebrow{
  font-family:'Courier Prime', monospace;
  color:var(--brass); font-size:0.8rem; letter-spacing:0.16em; text-transform:uppercase;
  margin:0 0 18px;
}
.detail-hero .intro h1{
  font-family:'Special Elite', monospace;
  font-size:clamp(1.7rem, 3.2vw, 2.6rem);
  line-height:1.2;
  margin:0 0 20px;
}
.detail-hero .intro .lede{
  font-size:1.05rem; color:var(--paper-dim); max-width:52ch; margin:0;
}

.story{ padding:2vh 6vw 9vh; max-width:74ch; margin:0 auto; }
.story h2{
  font-family:'Special Elite', monospace;
  font-size:1.3rem;
  margin:0 0 24px;
}
.story p{ font-size:1.05rem; color:var(--paper-dim); margin:0 0 22px; }
.story p:first-of-type{ color:var(--paper); }
.story .pullquote{
  font-family:'Special Elite', monospace;
  font-size:1.15rem;
  color:var(--brass);
  border-left:2px solid var(--oxide);
  padding:2px 0 2px 22px;
  margin:36px 0;
}

.detail-video{ padding:7vh 6vw 2vh; max-width:74ch; margin:0 auto; }
.detail-video .video-frame{ }
.video-soon{
  border:1px dashed var(--thread);
  border-radius:var(--radius);
  padding:14vh 24px;
  text-align:center;
  font-family:'Courier Prime', monospace;
  font-size:0.85rem;
  color:var(--thread);
  text-transform:uppercase;
  letter-spacing:0.08em;
}

.sources{
  background:var(--panel);
  border-top:1px solid rgba(233,223,198,0.12);
  padding:9vh 6vw;
}
.sources-inner{ max-width:74ch; margin:0 auto; }
.sources-inner .section-tag{
  font-family:'Courier Prime', monospace;
  color:var(--brass); font-size:0.78rem; letter-spacing:0.16em; text-transform:uppercase;
  margin:0 0 12px;
}
.sources-inner h2{
  font-family:'Special Elite', monospace;
  font-size:1.3rem; margin:0 0 14px;
}
.sources-inner > p{ color:var(--paper-dim); font-size:0.95rem; max-width:60ch; margin:0 0 34px; }

.source-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:0; }
.source-item{
  display:grid;
  grid-template-columns:110px 1fr;
  gap:18px;
  padding:18px 0;
  border-top:1px solid rgba(233,223,198,0.12);
}
.source-item:last-child{ border-bottom:1px solid rgba(233,223,198,0.12); }
.source-kind{
  font-family:'Courier Prime', monospace;
  font-size:0.7rem; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--thread);
  padding-top:2px;
}
.source-body a{
  font-family:'Lora', serif;
  font-size:1rem; color:var(--paper);
  text-decoration:none;
  border-bottom:1px solid var(--oxide);
}
.source-body a:hover{ color:var(--brass); border-color:var(--brass); }
.source-body p{
  margin:6px 0 0; font-size:0.88rem; color:var(--paper-dim);
}
.source-item.placeholder .source-body a{
  color:var(--thread); border-color:var(--thread); font-style:italic;
}
.source-item.placeholder .source-kind{ color:var(--oxide-dim); }

@media (max-width: 880px){
  .detail-hero{ grid-template-columns:1fr; }
}

.read-more{
  display:inline-flex; align-items:center;
  font-family:'Courier Prime', monospace;
  font-size:0.85rem; letter-spacing:0.05em;
  color:var(--brass); text-decoration:none;
  border-bottom:1px solid transparent;
}
.read-more:hover{ border-color:var(--brass); }

/* ---------- social icons ---------- */
.social-icons{
  display:flex; align-items:center; gap:16px;
}
.social-icons a{
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px;
  color:var(--paper-dim);
  border:1px solid var(--thread);
  border-radius:50%;
  transition:color .15s ease, border-color .15s ease, background .15s ease;
}
.social-icons a:hover{
  color:var(--ink);
  border-color:var(--brass);
  background:var(--brass);
}
.social-icons svg{ width:16px; height:16px; }

footer{ flex-wrap:wrap; row-gap:20px; }

/* ---------- narrow phones: keep the lang toggle from being pushed off-screen ---------- */
@media (max-width: 420px){
  .topbar{ padding:14px 5vw; }
  .brandmark{ font-size:0.62rem; letter-spacing:0.08em; gap:7px; }
  .brandmark svg{ width:18px; height:18px; }
  .langtoggle button{ padding:6px 10px; font-size:0.72rem; }
}
