:root {
  --bg:#f6f1e8; --card:#fffdf8; --ink:#1c1916; --muted:#6b635a;
  --line:#e4d9c8; --gold:#9a7b3c; --gold-soft:#c4a574; --btn:#2a241c;
}
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
body {
  margin:0; font-family:Inter,system-ui,-apple-system,Segoe UI,sans-serif;
  background:var(--bg); color:var(--ink); line-height:1.5;
}
a { color:var(--gold); }
img { max-width:100%; display:block; }
.ys-top {
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:max(12px,env(safe-area-inset-top)) 18px 12px;
  border-bottom:1px solid var(--line); background:rgba(246,241,232,.94);
  backdrop-filter:blur(10px); position:sticky; top:0; z-index:20;
}
.ys-top.on-dark {
  background:linear-gradient(180deg, rgba(0,0,0,.72), rgba(0,0,0,.2));
  border-bottom:1px solid rgba(255,255,255,.08); position:absolute; left:0; right:0;
}
.ys-brand { text-decoration:none; color:var(--ink); font-weight:800; letter-spacing:.02em; }
.ys-top.on-dark .ys-brand { color:#fff; }
.ys-brand span { color:var(--gold); }
.ys-nav {
  display:flex; flex-wrap:nowrap; gap:4px 12px; justify-content:flex-end; align-items:center;
  font-size:13px; font-weight:650; min-width:0;
}
.ys-nav > a, .ys-nav .nav-drop > summary {
  text-decoration:none; color:var(--muted); white-space:nowrap; padding:6px 2px;
  list-style:none; cursor:pointer;
}
.ys-top.on-dark .ys-nav > a, .ys-top.on-dark .ys-nav .nav-drop > summary {
  color:rgba(255,255,255,.9);
}
.ys-nav > a:hover, .ys-nav .nav-drop > summary:hover { color:var(--ink); }
.ys-top.on-dark .ys-nav > a:hover, .ys-top.on-dark .ys-nav .nav-drop > summary:hover { color:#fff; }
.ys-nav .donate { color:var(--gold); font-weight:700; }
.ys-nav .nav-drop { position:relative; }
.ys-nav .nav-drop > summary { list-style:none; display:inline-flex; align-items:center; gap:4px; }
.ys-nav .nav-drop > summary::-webkit-details-marker { display:none; }
.ys-nav .nav-drop > summary::after { content:"▾"; font-size:10px; opacity:.7; }
.ys-nav .nav-menu {
  position:absolute; right:0; top:calc(100% + 8px); min-width:200px; z-index:50;
  background:var(--card); border:1px solid var(--line); border-radius:14px;
  padding:8px; box-shadow:0 16px 40px rgba(40,30,10,.12);
  display:flex; flex-direction:column; gap:2px;
}
.ys-nav .nav-menu a {
  text-decoration:none; color:var(--ink); font-size:13px; font-weight:650;
  padding:10px 12px; border-radius:10px;
}
.ys-nav .nav-menu a:hover { background:#f3ebe0; color:var(--gold); }
.ys-nav .nav-menu .sub { display:block; font-size:11px; font-weight:500; color:var(--muted); margin-top:2px; }
@media (max-width:640px) {
  .ys-nav > a.pri-hide { display:none; }
}
.ys-foot {
  max-width:1120px; margin:28px auto 0; padding:24px 18px max(28px,env(safe-area-inset-bottom));
  border-top:1px solid var(--line); color:var(--muted); font-size:13px;
}
.btn {
  appearance:none; border:0; cursor:pointer; text-decoration:none; font-weight:700; font-size:14px;
  padding:14px 20px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center;
}
.btn.gold { background:var(--gold-soft); color:#1a1408; }
.btn.primary { background:var(--btn); color:#fff; }
.btn.ghost { background:transparent; color:var(--ink); border:1px solid var(--line); }
.btn.ghost.light { color:#fff; border-color:rgba(255,255,255,.35); }
.rail { display:flex; gap:12px; overflow-x:auto; padding:4px 2px 14px; scrollbar-width:none; }
.rail::-webkit-scrollbar { display:none; }
.yt { flex:0 0 auto; width:210px; border:0; padding:0; background:transparent; color:inherit; cursor:pointer; text-align:left; font:inherit; }
.yt img { width:210px; height:118px; object-fit:cover; border-radius:12px; border:1px solid var(--line); }
.yt .cap { margin-top:8px; font-size:12px; color:var(--muted); }
.yt .cap b { display:block; color:var(--ink); font-size:13px; margin-bottom:2px; }
.modal { position:fixed; inset:0; z-index:50; display:none; background:rgba(28,25,22,.72); align-items:center; justify-content:center; padding:16px; }
.modal.on { display:flex; }
.modal-card { width:min(960px,100%); background:#fffdf8; border:1px solid var(--line); border-radius:14px; overflow:hidden; }
.modal-card .bar { display:flex; justify-content:space-between; padding:10px 14px; border-bottom:1px solid var(--line); font-size:13px; color:var(--muted); }
.modal-card iframe { width:100%; aspect-ratio:16/9; border:0; background:#111; }
.modal-card button { appearance:none; border:0; background:transparent; color:var(--gold); font:650 13px system-ui; cursor:pointer; }