:root{
  --bg:#f2f2f2; --text:#000; --muted:#555; --rule:0 0 0/8%;
  --wrap:1100px; --gap:16px; --pad:16px; --aside:260px; --aside-collapsed:28px;
  --f-header:clamp(14px,1.2vw,18px);
  --f-title:clamp(14px,1.1vw,16px);
  --f-date:10px; --f-body:clamp(12px,1vw,14px);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font:200 14px/1.55 "Helvetica Neue", Helvetica, Arial, sans-serif
}

.admin-link{
  position:fixed;
  top:8px;
  right:10px;
  z-index:20;
  color:#000;
  font-size:10px;
  line-height:1;
  opacity:.18;
  text-decoration:none;
  transition:opacity .16s ease;
}

.admin-link:hover,
.admin-link:focus-visible{
  opacity:.55;
}

.wrap{
  max-width:var(--wrap);
  margin:auto;
  padding:12px var(--pad) 24px;
  display:grid;
  grid-template-rows:auto 1fr;
  gap:12px;
  height:100%;
}

header{text-align:center}
.brand{
  font-size:var(--f-header);
  font-weight:700;
  text-transform:lowercase;
  cursor:pointer;
}

.layout{
  --aside-current:var(--aside-collapsed);
  display:grid;
  grid-template-columns:1fr var(--aside-current);
  gap:var(--gap);
  min-height:0;
  transition:grid-template-columns .22s ease-in-out
}
.layout.expanded{--aside-current:var(--aside)}

main{
  overflow-y:auto;
  overflow-x:hidden;
  padding-inline-start:20vw;
  padding-inline-end:2px;
}

.post{padding:16px 0 24px; overflow:hidden}
.post-title{font-size:var(--f-title);font-weight:700;margin:0}
.post-date{font-size:var(--f-date);color:var(--muted);margin:4px 0 8px}
.post-body{font-size:var(--f-body); overflow-x:hidden}

.post-body img,
.post-body video,
.post-body iframe{
  max-width:100%;
  height:auto;
  display:block;
}

aside{
  border-inline-start:1px solid rgba(var(--rule));
  overflow:hidden;
  display:flex;
  flex-direction:column;
  min-width:0;
}

.nav-toggle{
  display:flex;
  justify-content:center;
  position:sticky;
  top:0;
  background:linear-gradient(to bottom,rgba(0,0,0,.03),transparent);
}

.toggle{
  all:unset;
  font-size:var(--f-title);
  font-weight:700;
  padding:0 8px;
  cursor:pointer;
}

.layout:not(.expanded) .toggle{
  writing-mode:vertical-rl;
  transform:rotate(180deg);
  padding:8px 0;
  margin-top:40px;
}

.post-list{
  list-style:none;
  margin:0;
  padding:8px;
  overflow:auto;
  font-size:var(--f-body);
}

.post-list li{
  padding:6px 4px;
  border-radius:4px;
  cursor:pointer;
  text-align:center;
}

.post-list li:hover{background:rgba(0,0,0,.06)}
.post-list li.active{background:rgba(0,0,0,.1);font-weight:700}

.section-label{
  font-size:10px;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.08em;
  text-align:center;
  margin:12px 0 4px;
}

.empty-state{
  color:var(--muted);
  font-size:var(--f-body);
  padding:16px 0;
}

hr{border:none;border-top:1px solid rgba(0,0,0,.08);margin:8px 0}

.layout:not(.expanded) aside nav{
  display:none;
}

@media (max-width:800px){
  .layout{grid-template-columns:1fr}
  aside{border-inline-start:none;border-top:1px solid rgba(0,0,0,.08)}
  main{padding-inline-start:10vw}
}