:root{
  --bg:#f4efe6; --card:#fffaf3; --soft:#e8e0d4; --surface:#faf9f6;
  --ink:#3a342e; --ink-2:#5a534c; --ink-3:#7a726a; --ink-4:#9a9288;
  --line:#e0d8cc; --line-2:#cfc6ba; --accent:#8b3d2f;
  --serif:'Songti SC','Source Han Serif SC','Noto Serif CJK SC','STSong',Georgia,serif;
  --sans:-apple-system,BlinkMacSystemFont,'PingFang SC','HarmonyOS Sans SC',system-ui,sans-serif;
  --mono:'SF Mono',ui-monospace,Menlo,Consolas,monospace;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:16px/1.68 var(--sans);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer}
img{max-width:100%; display:block}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:3px}

.wrap{
  max-width:1180px;margin:0 auto;
  padding-left:max(28px, env(safe-area-inset-left));
  padding-right:max(28px, env(safe-area-inset-right));
}
@media (max-width:620px){
  .wrap{
    padding-left:max(20px, env(safe-area-inset-left));
    padding-right:max(20px, env(safe-area-inset-right));
  }
  h1.ttl{font-size:28px}
  .lede{font-size:16px}
  .mast-top{align-items:center;gap:10px}
}

.mast{padding:clamp(26px,5vw,48px) 0 0}
.mast-top{display:flex; align-items:flex-end; justify-content:space-between; gap:14px}
.brand{display:flex; align-items:flex-end; gap:12px}
.brand svg{width:22px; height:36px; color:var(--ink)}
.brand b{
  font-family:var(--serif); font-weight:700; font-size:clamp(34px,6vw,52px);
  line-height:.98; letter-spacing:-.015em;
}
.brand b::after{content:".";color:var(--accent)}
.slogan{margin:8px 0 0; color:var(--ink-3); font-size:13.5px; letter-spacing:.02em}
.mast-side{display:flex; align-items:center; gap:7px; padding-bottom:4px}
.pill{
  display:inline-flex; align-items:center; gap:6px; height:32px; padding:0 13px;
  border:1px solid var(--line-2); border-radius:999px; font-size:12.5px;
  color:var(--ink-2); background:var(--card); white-space:nowrap;
}
.pill:hover{border-color:var(--ink); color:var(--ink)}

.ep-grid{
  display:grid; grid-template-columns:minmax(0,1fr) 264px;
  gap:22px; align-items:start;
  padding:24px 0 48px;
  border-top:1px solid var(--line); margin-top:20px;
}
@media (max-width:940px){
  .ep-grid{grid-template-columns:minmax(0,1fr); gap:16px; padding:18px 0 36px}
}

.kicker{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  margin:0 0 16px; font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-3);
}
.kicker .src{font-weight:600; color:var(--accent); letter-spacing:.12em}
.kicker .date{font-family:var(--mono); margin-left:auto; letter-spacing:.04em}
.kicker .pill{text-transform:none; letter-spacing:.02em; height:28px; padding:0 11px; font-size:12px}

h1.ttl{
  font-family:var(--serif); font-weight:700; margin:0 0 16px;
  font-size:clamp(28px,4.6vw,44px); line-height:1.18; letter-spacing:-.02em;
}
.lede{font-size:18px; line-height:1.7; color:var(--ink-2); margin:0 0 18px; max-width:38em}
.tags{display:flex; flex-wrap:wrap; gap:6px; margin:0 0 16px}
.tags:empty{display:none;margin:0}
.tag{
  font-size:11.5px; color:var(--ink-3); border:1px solid var(--line);
  border-radius:999px; padding:4px 10px; background:var(--card);
}

.pull{
  margin:0 0 18px; padding:16px 18px 16px 20px;
  background:color-mix(in srgb, var(--accent) 8%, var(--card));
  border-left:3px solid var(--accent); border-radius:0 12px 12px 0;
  color:var(--ink-2); font-size:15.5px; line-height:1.7;
}
.pull .lbl{display:block; font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--accent); margin-bottom:8px; font-weight:600}

.sec{margin:0 0 18px}
.sec:last-child{margin-bottom:0}
.sec h2{
  font-family:var(--serif); font-size:20px; font-weight:700;
  margin:0 0 10px; letter-spacing:-.01em;
}
.sec p{margin:0; color:var(--ink-2); max-width:38em}

.cmds{display:grid; gap:8px; margin-top:12px}
.cmd{
  display:flex; align-items:flex-start; gap:10px;
  background:var(--card); border:1px solid var(--line); border-radius:12px;
  padding:11px 12px;
}
.cmd code{
  flex:1; font:13px/1.55 var(--mono); color:var(--ink);
  white-space:pre-wrap; word-break:break-all;
}
.cmd button{
  flex:none; height:28px; padding:0 10px; border:1px solid var(--line-2);
  border-radius:999px; font-size:12px; color:var(--ink-3);
}
.cmd button:hover,.cmd button.on{border-color:var(--ink); color:var(--ink)}

.cover{
  width:100%; height:auto; object-fit:contain; object-position:center top;
  border-radius:16px; margin:0 0 20px;
  border:1px solid var(--line); background:var(--soft);
}
.plate{
  aspect-ratio:16/10; border-radius:16px; margin:0 0 28px; padding:22px 22px 20px;
  display:flex; flex-direction:column; justify-content:flex-end;
  background:
    radial-gradient(120% 80% at 88% 0%, rgba(20,20,19,.06), transparent 55%),
    linear-gradient(165deg,#e8e4dc,#ddd8ce 60%,#d0cbc2);
  border:1px solid var(--line);
}
.plate .c{font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); margin-bottom:10px; font-weight:600}
.plate .t{font-family:var(--serif); font-size:clamp(22px,3vw,30px); font-weight:700; line-height:1.25}

.aside{position:sticky; top:28px; display:grid; gap:10px}
@media (max-width:940px){ .aside{position:static} }
.box{
  background:var(--card); border:1px solid var(--line); border-radius:16px; padding:16px 16px 14px;
}
.box .hd{font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-4); margin:0 0 12px}
.kv{display:grid; grid-template-columns:64px 1fr; gap:8px 10px; font-size:13.5px; margin:0}
.kv dt{color:var(--ink-4)}
.kv dd{margin:0; text-align:right; color:var(--ink-2); word-break:break-all}
.box .pill{margin-top:12px; width:100%; justify-content:center}

.foot{
  grid-column:1/-1; border-top:1px solid var(--line);
  padding-top:22px; display:flex; justify-content:space-between; gap:16px;
  font-size:13px; color:var(--ink-3);
}
.foot a:hover{color:var(--ink)}
.foot.fam{border-top:0;padding-top:8px;justify-content:flex-start;gap:16px;flex-wrap:wrap}
.foot.fam a[aria-current="page"]{color:var(--ink)}

.uses,.who{margin:0;padding:0 0 0 1.1em;color:var(--ink-2);line-height:1.65}
.uses li,.who li{margin:0 0 8px}
.rel{display:grid;gap:10px}
.rel a{display:block;color:var(--ink);text-decoration:none;font-size:14px;line-height:1.4}
.rel a:hover{color:var(--accent)}