:root{
  --paper:#fbf7f0; --paper-2:#fffdf9; --ink:#211c1a; --soft:#5c5048; --faint:#8c7f74;
  --line:rgba(60,44,36,.12); --maroon:#800020; --maroon-soft:#9a3b46;
  --ui:'Hanken Grotesk',system-ui,sans-serif; --serif:'Newsreader',Georgia,serif;
  --accent:#800020; --text:#1c1b1b; --muted:#8c7071;
  --topbar-bg:rgba(252,249,248,.86); --topbar-border:rgba(140,112,113,.18); --topbar-hover:rgba(128,0,32,.06);
  --topbar-font:var(--ui);
  --nav-h:58px;
  --video-opacity:0.3;
}
body{font-family:var(--ui);color:var(--ink);background:#e9e0d0;-webkit-font-smoothing:antialiased;overflow:hidden}
.bg-video{position:fixed;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;opacity:var(--video-opacity)}
body::after{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;background:linear-gradient(180deg,rgba(248,243,234,.9),rgba(245,239,229,.95))}

.shell{position:relative;z-index:1;margin-top:var(--nav-h);height:calc(100vh - var(--nav-h));display:grid;grid-template-columns:330px 1fr}
.rail{border-right:1px solid var(--line);display:flex;flex-direction:column;height:calc(100vh - var(--nav-h));background:rgba(251,247,240,.72);backdrop-filter:blur(8px)}
.brand{padding:20px 22px 14px}
.brand h1{font-family:var(--serif);font-weight:600;font-size:21px;letter-spacing:-.01em;color:var(--ink)}
.brand p{font-size:12px;color:var(--faint);margin-top:2px;font-style:italic;font-family:var(--serif)}
.cats{display:flex;flex-wrap:wrap;gap:5px;padding:0 18px 14px;border-bottom:1px solid var(--line)}
.cat{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:500;color:var(--soft);padding:5px 10px;border-radius:999px;cursor:pointer;transition:.15s;border:1px solid transparent;background:none}
.cat .dot{width:7px;height:7px;border-radius:99px;background:var(--c,var(--faint))}
.cat:hover{background:rgba(128,0,32,.05)}.cat.active{background:var(--maroon);color:#fff}.cat.active .dot{background:rgba(255,255,255,.85)}
.list{flex:1;overflow-y:auto;padding:6px}
.item{display:block;width:100%;text-align:left;border:0;background:none;cursor:pointer;padding:13px 14px;border-radius:12px;border-bottom:1px solid var(--line);transition:background .15s;font-family:inherit}
.item:last-child{border-bottom:0}.item:hover{background:rgba(128,0,32,.04)}
.item.active{background:var(--paper-2);box-shadow:0 1px 2px rgba(40,28,20,.05),inset 3px 0 0 var(--maroon)}
.item .eye{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--c,var(--maroon-soft))}
.item .t{font-family:var(--serif);font-size:15px;font-weight:500;line-height:1.25;color:var(--ink);margin:3px 0 5px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.item .m{font-size:11px;color:var(--faint);display:flex;gap:8px}

.read{height:calc(100vh - var(--nav-h));overflow-y:auto}
.read-inner{max-width:680px;margin:0 auto;padding:46px 40px 90px}
.back{display:none;align-items:center;gap:7px;background:none;border:0;cursor:pointer;color:var(--maroon-soft);font-size:13px;font-weight:600;margin-bottom:22px;font-family:var(--ui)}
.back:hover{color:var(--maroon)}
.art-eye{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--c,var(--maroon));margin-bottom:14px;display:inline-flex;align-items:center;gap:8px}
.art-eye .dot{width:7px;height:7px;border-radius:99px;background:currentColor}
.art-title{font-family:var(--serif);font-weight:600;font-size:40px;line-height:1.08;letter-spacing:-.015em;color:var(--ink)}
.art-meta{display:flex;align-items:center;gap:14px;margin-top:16px;padding-bottom:26px;border-bottom:1px solid var(--line);font-size:13px;color:var(--faint)}
.art-meta .sep{width:3px;height:3px;border-radius:99px;background:var(--faint)}
.art-body{font-family:var(--serif);font-size:19px;line-height:1.75;color:#2c2521;margin-top:26px}
.art-body p{margin-bottom:1.15em}
.art-body p:first-of-type::first-letter{font-size:3.1em;line-height:.82;float:left;padding:6px 10px 0 0;color:var(--maroon);font-weight:600}
.art-body h2{font-family:var(--serif);font-weight:600;font-size:24px;margin:1.5em 0 .5em;color:var(--ink);letter-spacing:-.01em}
.art-body h3{font-family:var(--serif);font-weight:600;font-size:20px;margin:1.3em 0 .4em;color:var(--ink)}
.art-body strong{color:var(--ink);font-weight:600}
.art-body a{color:var(--maroon);text-decoration:underline;text-underline-offset:2px}
.art-body ul,.art-body ol{margin:0 0 1.15em 1.5em}
.art-body li{margin-bottom:.4em}
.art-body code{font-size:.85em;background:rgba(128,0,32,.06);padding:2px 5px;border-radius:3px}
.art-body pre{background:rgba(30,20,15,.04);border:1px solid var(--line);border-radius:8px;padding:16px;overflow-x:auto;margin:1.15em 0;font-size:14px;line-height:1.6}
.art-body pre code{background:none;padding:0}
.read::-webkit-scrollbar,.list::-webkit-scrollbar{width:9px}
.read::-webkit-scrollbar-thumb,.list::-webkit-scrollbar-thumb{background:rgba(128,0,32,.18);border-radius:9px}

@media(max-width:860px){
  .shell{grid-template-columns:1fr}
  .rail{height:auto;max-height:calc(100vh - var(--nav-h));border-right:0}
  .read{display:none}
  body.reading .rail{display:none}
  body.reading .read{display:block}
  .back{display:inline-flex}
  .read-inner{padding:30px 24px 80px}
  .art-title{font-size:32px}
}