:root{--paper:#f3efe5;--ink:#161616;--muted:#4a4a4a;--rule:rgba(0,0,0,.18);--accent:#8b1d1d}
*{box-sizing:border-box}
body{margin:0;background:#e6e1d6;color:var(--ink);line-height:1.45;padding:24px;font-family:Georgia,"Times New Roman",serif}
.paper{max-width:1024px;margin:0 auto;background:var(--paper);border:1px solid rgba(0,0,0,.12);box-shadow:0 18px 60px rgba(0,0,0,.18);padding:28px 26px 34px;position:relative;overflow:hidden}
.paper:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 20% 30%, rgba(0,0,0,.05), transparent 55%),radial-gradient(circle at 80% 70%, rgba(0,0,0,.04), transparent 60%),repeating-linear-gradient(0deg, rgba(0,0,0,.02), rgba(0,0,0,.02) 1px, transparent 1px, transparent 6px);mix-blend-mode:multiply;opacity:.35;pointer-events:none}
.paper>*{position:relative}
.masthead{text-align:center;padding-bottom:12px;border-bottom:3px double var(--ink);margin-bottom:14px}
.kicker{font-variant:small-caps;letter-spacing:.16em;color:var(--muted);font-size:.92rem;margin-bottom:2px}
h1{margin:0;font-size:3.1rem;line-height:1;letter-spacing:.02em;font-family:"Playfair Display","Times New Roman",serif;text-transform:uppercase}
.nav{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:12px}
.nav a{border:1px solid rgba(0,0,0,.4);padding:4px 10px;text-decoration:none;color:var(--ink);text-transform:uppercase;font-size:.82rem;letter-spacing:.08em}
.nav a:hover{color:var(--accent);border-color:var(--accent)}
.meta{margin-top:10px;display:flex;gap:12px;justify-content:space-between;flex-wrap:wrap;font-size:.95rem;color:var(--muted)}
.tag{border:1px solid rgba(0,0,0,.2);padding:3px 10px;white-space:nowrap;text-transform:uppercase;letter-spacing:.08em;font-size:.85rem}
.section{padding-top:10px}.section h2,.section h3{margin:0 0 8px 0}.section h2{font-size:2rem;line-height:1.1}.section h3{font-size:1.1rem;letter-spacing:.08em;text-transform:uppercase;border-top:1px solid var(--rule);padding-top:10px}
.grid{display:grid;grid-template-columns:1.6fr 1fr;gap:18px}
@media (max-width:860px){.grid{grid-template-columns:1fr}}
.sidebar{border-left:1px solid var(--rule);padding-left:16px}
@media (max-width:860px){.sidebar{border-left:0;padding-left:0;border-top:1px solid var(--rule);padding-top:14px}}
.card{border:1px solid rgba(0,0,0,.2);padding:12px 14px;margin-bottom:12px;background:rgba(255,255,255,.35)}
.card a,a{color:var(--ink)}
a:hover{color:var(--accent)}
.muted{color:var(--muted)}
.list{display:grid;gap:10px}
.pull{margin:10px 0 14px;padding:12px 14px;border:1px solid rgba(0,0,0,.25);border-left:4px solid var(--accent);font-size:1.05rem;background:rgba(255,255,255,.35)}
.byline{display:flex;justify-content:space-between;flex-wrap:wrap;color:var(--muted);font-size:.95rem;gap:10px}
.badge{border:1px solid rgba(0,0,0,.45);padding:1px 8px;font-size:.8rem;text-transform:uppercase;letter-spacing:.08em}
.streamer-banner{margin:22px 0 10px;padding:12px 0;border-top:3px double var(--ink);border-bottom:1px solid var(--rule);text-align:center}
.streamer-banner .small{font-size:.85rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.streamer-banner a{display:inline-block;font-size:1.1rem;font-weight:700;text-decoration:none;text-transform:uppercase;letter-spacing:.06em}
.streamer-banner .desc{margin-top:6px;font-size:.95rem;color:#2f2f2f;font-style:italic}
.follow-writer{margin:18px 0 6px;padding:10px 0 8px;border-top:3px double var(--ink);border-bottom:1px solid var(--rule);display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;justify-content:space-between}
.follow-writer .label{font-size:.85rem;color:var(--muted);letter-spacing:.12em;text-transform:uppercase}
.social-links{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.social-links a{width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;border:1px solid rgba(0,0,0,.7);border-radius:2px;background:transparent;color:var(--ink);text-decoration:none}
.social-links a:hover{background:rgba(139,29,29,.08);border-color:var(--accent);color:var(--accent)}
.social-links svg{width:16px;height:16px;display:block;fill:currentColor}
.jay-link{display:inline-flex;align-items:center;gap:6px;text-decoration:none;font-weight:700;vertical-align:middle}
.jay-link img{width:18px;height:18px;border:1px solid rgba(0,0,0,.32);image-rendering:pixelated;vertical-align:middle}
.mc-name-inline{display:inline-flex;align-items:center;gap:4px;vertical-align:middle;white-space:nowrap;line-height:inherit}
.mc-name-inline img{width:18px;height:18px;border:1px solid rgba(0,0,0,.25);image-rendering:pixelated;vertical-align:middle;position:relative;top:0;display:block;flex:0 0 auto}
.mc-name-inline span{line-height:inherit}
footer{margin-top:18px;border-top:3px double var(--ink);padding-top:12px;display:flex;justify-content:space-between;flex-wrap:wrap;font-size:.95rem;color:var(--muted);gap:10px}
img{max-width:100%}

.brand-title{display:flex;align-items:center;justify-content:center;gap:10px}
.brand-icon{width:30px;height:30px;display:inline-block;vertical-align:middle}

.site-logo-wrap{display:none}
.site-logo{display:none}


.home-main-title{font-size:2.7rem;letter-spacing:.01em;margin-top:4px}
@media (max-width:680px){.site-logo{display:none}.home-main-title{font-size:2.1rem}}


/* New masthead layout */
.masthead-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin:-2px -8px 2px 0}
.kicker-left{font-variant:small-caps;letter-spacing:.16em;color:var(--muted);font-size:.92rem;margin:0;padding-top:2px}
.logo-top-right{width:min(200px,30vw);height:auto;display:block;filter:drop-shadow(0 2px 4px rgba(0,0,0,.14));margin:-40px -40px 0 0}
.masthead h1{margin-top:-2px}

.mobile-nav-toggle{display:none;border:1px solid rgba(0,0,0,.4);background:transparent;padding:6px 10px;text-transform:uppercase;letter-spacing:.08em;font-size:.78rem}

@media (max-width:760px){
  .masthead-top{align-items:center;gap:8px;margin:0 0 4px 0}
  .kicker-left{display:none}
  .logo-top-right{width:120px;order:0;margin:0 auto 0 0}
  .masthead h1{font-size:1.72rem;margin-top:-2px}
  .mobile-nav-toggle{display:inline-block;margin:0 0 0 auto;order:1}
  .nav{display:none;width:100%;justify-content:flex-start}
  .nav.is-open{display:flex}
}


/* Professional mobile menu (glass drawer) */
.mobile-menu-backdrop{display:none}
.mobile-menu-panel{display:none}
@media (max-width:760px){
  .nav{display:none !important}
  .mobile-nav-toggle{display:inline-block;margin:0 0 0 auto;order:1;border:1px solid rgba(0,0,0,.35);background:rgba(255,255,255,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border-radius:10px;padding:7px 12px;font-weight:600}
  .mobile-menu-backdrop{display:block;position:fixed;inset:0;background:rgba(0,0,0,.32);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);opacity:0;pointer-events:none;transition:opacity .2s ease;z-index:60}
  .mobile-menu-panel{display:block;position:fixed;top:0;right:0;height:100dvh;width:min(78vw,320px);background:rgba(243,239,229,.82);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-left:1px solid rgba(0,0,0,.16);box-shadow:-8px 0 28px rgba(0,0,0,.22);transform:translateX(100%);transition:transform .24s ease;z-index:61;padding:18px 14px}
  .mobile-menu-panel .menu-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
  .mobile-menu-panel .menu-title{font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
  .mobile-menu-panel .menu-close{border:1px solid rgba(0,0,0,.35);background:transparent;border-radius:8px;padding:4px 9px}
  .mobile-menu-panel a{display:block;padding:10px 10px;margin:6px 0;border:1px solid rgba(0,0,0,.24);text-decoration:none;text-transform:uppercase;letter-spacing:.06em;background:rgba(255,255,255,.45)}
  body.menu-open .mobile-menu-backdrop{opacity:1;pointer-events:auto}
  body.menu-open .mobile-menu-panel{transform:translateX(0)}
  body.menu-open{overflow:hidden}
}


/* Mobile meta labels: wrap netjes i.p.v. buiten scherm */
@media (max-width:760px){
  .meta{display:flex;flex-wrap:wrap;justify-content:flex-start;gap:8px}
  .meta .tag{flex:0 1 auto;text-align:center;padding:7px 10px;font-size:.76rem;letter-spacing:.04em;white-space:normal}
  .meta.meta-home{flex-wrap:nowrap;justify-content:space-between}
  .meta.meta-home .tag{flex:1 1 0;white-space:nowrap}
}

/* Live popup */
.live-popup {
  position: fixed;
  right: 16px;
  bottom: 16px;
  width: min(320px, calc(100vw - 24px));
  background: #111;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  padding: 12px 14px 14px;
  z-index: 9999;
}

.live-popup-title {
  font-weight: 700;
  margin-bottom: 6px;
}

.live-popup-text {
  font-size: 14px;
  line-height: 1.35;
  opacity: 0.92;
  margin-bottom: 10px;
}

.live-popup-cta {
  display: inline-block;
  background: #9146ff;
  color: #fff;
  text-decoration: none;
  border-radius: 8px;
  padding: 8px 12px;
  font-weight: 600;
}

.live-popup-cta:hover {
  filter: brightness(1.08);
}

.live-popup-close {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
  background: transparent;
  color: #ddd;
  font-size: 18px;
  line-height: 1;
}

.live-popup-close:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

/* Footer Twitch live indicator */
.twitch-live-indicator {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.twitch-live-indicator .dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.12);
}

.twitch-live-indicator.is-live .dot { background: #26c266; }
.twitch-live-indicator.is-offline .dot { background: #8d8d8d; }
.twitch-live-indicator.is-unknown .dot { background: #b3a56a; }