:root{
  --tone-bg:#fffaf3; --tone-bg2:#f6ecdf; --tone-line:#e5d3bd;
  --tone-ink:#1c1012; --tone-ink2:#6b5b56;
  --tone-red:#a3162b; --tone-red2:#7a0f1f;
  --tone-gold:#c99a2e; --tone-gold2:#f0d9a0; --tone-white:#ffffff;
  --gap-1:6px; --gap-2:12px; --gap-3:20px; --gap-4:32px; --gap-5:52px; --gap-6:84px;
  --type-1:12px; --type-2:16px; --type-3:17px; --type-4:20px; --type-5:25px; --type-6:31px; --type-7:38px;
  --edge-sm:4px; --edge-lg:10px;
  --line-hair:1px solid var(--tone-line);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--tone-bg); color:var(--tone-ink);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans",Arial,sans-serif;
  font-size:var(--type-3); line-height:1.6;
}
h1,h2,h3,h4{
  font-family:Georgia,"Iowan Old Style","Noto Serif","Noto Serif Thai",serif;
  color:var(--tone-red2); line-height:1.25; margin:0 0 var(--gap-3);
}
h1{font-size:var(--type-7)} h2{font-size:var(--type-6)} h3{font-size:var(--type-5)} h4{font-size:var(--type-4)}
a{color:var(--tone-red)}
a:hover{color:var(--tone-red2)}
img{max-width:100%;height:auto;display:block}
p{margin:0 0 var(--gap-3)}
ul,ol{padding-left:1.2em}

/* header */
.mast{
  display:flex; align-items:center; justify-content:space-between; gap:var(--gap-3);
  padding:var(--gap-2) var(--gap-4); border-bottom:var(--line-hair); background:var(--tone-white);
  position:sticky; top:0; z-index:10;
}
.mast-logo{display:inline-flex}
.mast-nav{display:flex; flex-wrap:wrap; gap:var(--gap-3)}
.mast-nav a{text-decoration:none; font-weight:600; font-size:var(--type-2); color:var(--tone-ink)}
.mast-nav a:hover{color:var(--tone-red)}
.navtoggle{
  display:none; flex-direction:column; justify-content:center; gap:5px;
  width:40px; height:36px; border:var(--line-hair); border-radius:var(--edge-sm);
  background:var(--tone-white); cursor:pointer; padding:0;
}
.navtoggle span{display:block; width:20px; height:2px; margin:0 auto; background:var(--tone-ink)}

/* content shell */
main{max-width:1180px; margin:0 auto; padding:var(--gap-5) var(--gap-4)}
.crumbs{font-size:var(--type-1); color:var(--tone-ink2); margin-bottom:var(--gap-3)}
.crumbs a{color:var(--tone-ink2)}
.intro{max-width:68ch; font-size:var(--type-4); color:var(--tone-ink2); margin-bottom:var(--gap-5)}

/* post */
.post-head{margin-bottom:var(--gap-4)}
.post-meta{font-size:var(--type-1); color:var(--tone-ink2); display:flex; flex-wrap:wrap; gap:var(--gap-2); margin-bottom:var(--gap-3)}
.post-meta a{color:var(--tone-ink2)}
.cover{border-radius:var(--edge-lg); margin-bottom:var(--gap-4); overflow:hidden}
.prose{max-width:68ch}
.prose img{border-radius:var(--edge-sm); margin:var(--gap-3) 0}
.prose h2,.prose h3{margin-top:var(--gap-5)}
.faq{max-width:68ch; margin-top:var(--gap-5); border-top:var(--line-hair); padding-top:var(--gap-4)}
.faq h3{font-size:var(--type-4)}

/* stream / lists */
.stream{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap-4); list-style:none; margin:0; padding:0}
.stream-item{border:var(--line-hair); border-radius:var(--edge-lg); overflow:hidden; background:var(--tone-white)}
.stream-thumb{aspect-ratio:640/336; object-fit:cover; width:100%}
.stream-item .stream-body{padding:var(--gap-3)}
.stream-title{font-size:var(--type-3); font-weight:700; margin:0 0 var(--gap-1); text-decoration:none; color:var(--tone-ink); display:block}
.stream-date{font-size:var(--type-1); color:var(--tone-ink2)}

/* hubs */
.hubs{display:grid; grid-template-columns:repeat(5,1fr); gap:var(--gap-3); list-style:none; margin:0 0 var(--gap-5); padding:0}
.hub-link{
  display:block; padding:var(--gap-3); border:var(--line-hair); border-radius:var(--edge-lg);
  background:var(--tone-bg2); text-decoration:none; color:var(--tone-ink); font-weight:700; text-align:center;
}
.hub-link:hover{border-color:var(--tone-gold)}

/* pager */
.pager{display:flex; justify-content:space-between; gap:var(--gap-3); margin-top:var(--gap-5)}
.pager a{
  padding:var(--gap-2) var(--gap-3); border:var(--line-hair); border-radius:var(--edge-sm);
  text-decoration:none; color:var(--tone-ink); font-weight:600;
}
.pager a:hover{border-color:var(--tone-red)}

/* footer */
.foot{background:var(--tone-ink); color:var(--tone-gold2); padding:var(--gap-5) var(--gap-4); margin-top:var(--gap-6)}
.foot-logo{display:inline-flex; margin-bottom:var(--gap-3)}
.foot-links{display:flex; flex-wrap:wrap; gap:var(--gap-3); margin-bottom:var(--gap-3)}
.foot-links a{color:var(--tone-gold2); text-decoration:none; font-size:var(--type-2)}
.foot-links a:hover{color:var(--tone-white)}
.foot-note{font-size:var(--type-1); color:var(--tone-ink2); max-width:68ch; margin:0}

@media (max-width:960px){
  .stream{grid-template-columns:repeat(2,1fr)}
  .hubs{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:600px){
  .mast-nav{
    display:none; position:absolute; top:100%; left:0; right:0; flex-direction:column;
    background:var(--tone-white); border-bottom:var(--line-hair); padding:var(--gap-3) var(--gap-4);
  }
  .mast-nav.is-open{display:flex}
  .navtoggle{display:flex}
  main{padding:var(--gap-4) var(--gap-3)}
  .stream{grid-template-columns:1fr}
  .hubs{grid-template-columns:repeat(2,1fr)}
  h1{font-size:var(--type-6)}
}