:root{
  --canvas:#e7eae1; --surface:#ffffff; --text:#22281f; --accent:#1d5c3a; --rule:#c6cdba;
  --muted:#5b6355; --band:#17492e;
  --s2:2px; --s4:4px; --s6:6px; --s8:8px; --s12:12px; --s16:16px; --s24:24px;
  --id:Georgia,"Times New Roman",serif;
  --hd:Verdana,Geneva,"DejaVu Sans",sans-serif;
  --bd:Arial,Helvetica,"Liberation Sans",sans-serif;
  --mo:"Courier New","DejaVu Sans Mono",monospace;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--canvas);color:var(--text);font:15px/1.62 var(--bd)}
img{max-width:100%;height:auto;display:block}
a{color:var(--accent)}
a:hover{text-decoration:none}
a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.skip{position:absolute;left:-9999px;top:0;background:var(--surface);color:var(--accent);
  padding:var(--s8) var(--s12);border:1px solid var(--accent);z-index:9}
.skip:focus{left:var(--s8);top:var(--s8)}
.shell{max-width:1180px;margin:0 auto;padding:0 var(--s16)}

/* 1. community banner */
.banner{background:var(--band);border-bottom:4px solid var(--accent)}
.banner .shell{display:flex;align-items:center;gap:var(--s16);padding-top:var(--s24);padding-bottom:var(--s24)}
.banner img{width:56px;height:56px;flex:0 0 auto}
.wordmark{font:400 40px/1.05 var(--id);letter-spacing:-.01em;color:#fff;margin:0}
.strap{font:12px/1.4 var(--mo);color:#b9d3c3;margin:var(--s4) 0 0;letter-spacing:.06em;text-transform:uppercase}

/* 2. network tab menu */
.tabstrip{background:var(--surface);border-bottom:1px solid var(--rule)}
.tabstrip .shell{padding:0}
.tabstrip ul{list-style:none;margin:0;padding:0;display:flex;overflow-x:auto;-webkit-overflow-scrolling:touch}
.tabstrip li{flex:0 0 auto}
.tabstrip a{display:block;padding:var(--s12) var(--s16);font:bold 13px/1 var(--hd);letter-spacing:.06em;
  text-transform:uppercase;color:var(--text);text-decoration:none;border-bottom:3px solid transparent;white-space:nowrap}
.tabstrip a:hover{background:var(--canvas)}
.tabstrip a[aria-current="page"]{color:var(--accent);border-bottom-color:var(--accent)}

.grid{display:grid;grid-template-columns:220px minmax(0,1fr) 260px;gap:var(--s24) var(--s16);
  align-items:start;padding-top:var(--s24);padding-bottom:var(--s24)}
.railL,.railR{display:flex;flex-direction:column;gap:var(--s16);min-width:0}
.col{display:flex;flex-direction:column;gap:var(--s24);min-width:0}
.narrow{padding-top:var(--s24);padding-bottom:var(--s24);max-width:760px;margin-left:auto;margin-right:auto}

/* modules */
.module{background:var(--surface);border:1px solid var(--rule)}
.module>h2,.module>h1{margin:0;padding:var(--s8) var(--s12);background:var(--canvas);
  border-bottom:1px solid var(--rule);font:bold 13px/1.3 var(--hd);letter-spacing:.06em;text-transform:uppercase}
.module .in{padding:var(--s12)}
.module p{margin:0 0 var(--s12)}
.module p:last-child{margin-bottom:0}
.linklist{list-style:none;margin:0;padding:0}
.linklist li{border-bottom:1px solid var(--rule)}
.linklist li:last-child{border-bottom:0}
.linklist a{display:flex;justify-content:space-between;gap:var(--s8);padding:var(--s8) var(--s12);
  text-decoration:none;font:13px/1.4 var(--bd)}
.linklist a:hover{background:var(--canvas)}
.linklist .n{font:12px/1.4 var(--mo);color:var(--muted);flex:0 0 auto}
.legend{list-style:none;margin:0;padding:0}
.legend li{display:flex;gap:var(--s8);padding:var(--s6) var(--s12);border-bottom:1px solid var(--rule);font-size:13px}
.legend li:last-child{border-bottom:0}
.legend code{font:12px/1.5 var(--mo);color:var(--accent);flex:0 0 72px}

/* activity + discussion records */
.records{list-style:none;margin:0;padding:0}
.record{display:flex;gap:var(--s12);padding:var(--s12);border-bottom:1px solid var(--rule)}
.record:last-child{border-bottom:0}
.pip{width:44px;height:44px;flex:0 0 44px;border:1px solid var(--rule);background:var(--canvas);
  display:flex;align-items:center;justify-content:center}
.pip img{width:24px;height:24px}
.rbody{min-width:0;flex:1}
.area{font:11px/1.4 var(--mo);letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin:0}
.rtitle{font:bold 17px/1.3 var(--hd);margin:var(--s2) 0 var(--s4)}
.rtitle a{text-decoration:none}
.rtitle a:hover{text-decoration:underline}
.rex{margin:0;color:var(--muted);font-size:14px}
.stamp{font:12px/1.4 var(--mo);color:var(--muted);flex:0 0 auto;padding-top:var(--s2)}

/* group tiles */
.tiles{list-style:none;margin:0;padding:var(--s12);display:grid;grid-template-columns:1fr;gap:var(--s12)}
.tile{display:flex;gap:var(--s8);align-items:flex-start}
.tile .pip{width:36px;height:36px;flex-basis:36px}
.tile .pip img{width:20px;height:20px}
.tile h3{font:bold 14px/1.25 var(--hd);margin:0 0 var(--s2)}
.tile h3 a{text-decoration:none}
.tile p{margin:0;font-size:12px;color:var(--muted);line-height:1.45}
.tile .n{font:11px/1.4 var(--mo);color:var(--accent);display:block;margin-top:var(--s2)}

/* schedule */
.sched{list-style:none;margin:0;padding:0}
.sched li{display:flex;gap:var(--s8);padding:var(--s6) var(--s12);border-bottom:1px solid var(--rule);font-size:13px}
.sched li:last-child{border-bottom:0}
.sched .wk{font:12px/1.5 var(--mo);color:var(--muted);flex:0 0 52px}
.boards{display:grid;grid-template-columns:1fr;gap:var(--s8);padding:var(--s12)}
.boards img{border:1px solid var(--rule);background:var(--canvas)}

/* prose / detail */
.breadcrumb{font:12px/1.5 var(--mo);color:var(--muted);margin:0 0 var(--s12)}
.breadcrumb a{color:var(--muted)}
h1.title{font:400 32px/1.2 var(--id);margin:0 0 var(--s8)}
.dek{font:17px/1.5 var(--bd);color:var(--muted);margin:0 0 var(--s16);max-width:34em}
.metapanel{border:1px solid var(--rule);background:var(--surface);padding:var(--s12);margin:0 0 var(--s16);
  font:12px/1.7 var(--mo);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s4) var(--s16)}
.metapanel b{font-weight:bold;color:var(--muted);font-weight:400}
figure{margin:0 0 var(--s16)}
figcaption{font:12px/1.5 var(--mo);color:var(--muted);margin-top:var(--s6)}
.prose{max-width:34em}
.prose h2{font:bold 16px/1.3 var(--hd);letter-spacing:.04em;text-transform:uppercase;
  margin:var(--s24) 0 var(--s8);padding-bottom:var(--s4);border-bottom:1px solid var(--rule)}
.prose p{margin:0 0 var(--s12)}
.worked{background:var(--surface);border:1px solid var(--rule);border-left:3px solid var(--accent);
  padding:var(--s12);margin:var(--s16) 0;font-size:14px}
.worked b{display:block;font:11px/1.4 var(--mo);letter-spacing:.08em;text-transform:uppercase;
  color:var(--accent);margin-bottom:var(--s4)}
.tablewrap{overflow-x:auto;border:1px solid var(--rule);background:var(--surface);margin:var(--s16) 0}
table{border-collapse:collapse;width:100%;min-width:520px;font-size:13px}
caption{text-align:left;padding:var(--s8) var(--s12);font:12px/1.5 var(--mo);color:var(--muted);
  border-bottom:1px solid var(--rule)}
th,td{padding:var(--s6) var(--s12);border-bottom:1px solid var(--rule);text-align:left}
th{font:bold 12px/1.4 var(--hd);letter-spacing:.04em;text-transform:uppercase;background:var(--canvas)}
td{font-family:var(--mo);font-size:12px}
td:first-child{font-family:var(--bd);font-size:13px}
tr:last-child th,tr:last-child td{border-bottom:0}
.adjacent{display:grid;grid-template-columns:1fr 1fr;gap:var(--s12);margin:var(--s24) 0 0;
  border-top:1px solid var(--rule);padding-top:var(--s16)}
.adjacent div span{display:block;font:11px/1.4 var(--mo);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.adjacent a{font:bold 14px/1.35 var(--hd);text-decoration:none}
.backlink{margin:var(--s16) 0 0;font-size:13px}

/* 8. footer */
.foot{background:var(--band);color:#cfe0d5;margin-top:var(--s24);border-top:4px solid var(--accent)}
.foot .shell{padding-top:var(--s24);padding-bottom:var(--s24);display:flex;gap:var(--s16);align-items:flex-start}
.foot img{width:32px;height:32px;flex:0 0 auto}
.foot ul{list-style:none;margin:0 0 var(--s8);padding:0;display:flex;flex-wrap:wrap;gap:var(--s16)}
.foot a{color:#fff;font:bold 12px/1.4 var(--hd);letter-spacing:.06em;text-transform:uppercase;text-decoration:none}
.foot a:hover{text-decoration:underline}
.foot p{margin:0;font-size:13px;color:#a8c2b2}
.foot .rights{font:12px/1.5 var(--mo);margin-top:var(--s6)}

@media (max-width:1080px){
  .grid{grid-template-columns:200px minmax(0,1fr)}
  .railR{grid-column:1 / -1}
  .railR{display:grid;grid-template-columns:1fr 1fr;gap:var(--s16);align-items:start}
}
@media (max-width:760px){
  .grid{display:flex;flex-direction:column;gap:var(--s16)}
  .col{order:1}
  .railL{order:2}
  .railR{order:3;display:flex;flex-direction:column}
  .wordmark{font-size:28px}
  .banner img{width:44px;height:44px}
  .tiles{grid-template-columns:1fr 1fr}
  .tile .pip{width:32px;height:32px;flex-basis:32px}
  .tile .pip img{width:18px;height:18px}
  .railL .linklist{display:grid;grid-template-columns:1fr 1fr}
  .railL .linklist li{border-right:1px solid var(--rule)}
  .record{flex-wrap:wrap}
  .record .stamp{flex:1 0 100%;padding-left:56px}
  .prose,.dek{max-width:none}
  h1.title{font-size:26px}
  .metapanel{grid-template-columns:1fr}
  .adjacent{grid-template-columns:1fr}
  .foot .shell{flex-direction:column}
}
@media (prefers-reduced-motion:reduce){*{transition-duration:.01ms !important;animation-duration:.01ms !important}}
