/* ============================================================
   STACKALITY — sub-site layer
   Everything a subfolder page needs that the home page doesn't:
   the tier-2 bar, the section intro, and a prose block.

   The two-bar rule:
     tier 1 (.sk-parent)  sticks to top:0                  — the site
     tier 2 (.sk-sub)     sticks to top:var(--parent-h)    — the section
   A section owns tier 2 and can put whatever it likes in it.
   Nothing is allowed to restyle tier 1.
   ============================================================ */

.sk-sub{
  position:sticky;top:var(--parent-h);z-index:60;
  background:rgba(30,26,49,.90);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--edge-soft);
}
.sk-sub-in{
  max-width:var(--shell);margin:0 auto;padding:12px 20px;
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;
}
.sk-sub-brand{display:flex;align-items:baseline;gap:9px;flex:0 0 auto}
.sk-sub-brand b{
  font-family:var(--disp);font-weight:800;font-size:19px;letter-spacing:-.03em;
}
.sk-sub-brand b i{font-style:normal;color:var(--signal)}
.sk-sub-brand span{
  font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--dimmer);
}
.sk-sub-nav{display:flex;gap:2px;margin-left:auto;flex-wrap:wrap}
.sk-sub-nav a,
.sk-sub-nav button{
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--dim);padding:8px 13px;border-radius:var(--r-s);
  border:1px solid transparent;text-decoration:none;
  transition:color .15s,background .15s;
}
.sk-sub-nav a:hover,
.sk-sub-nav button:hover{color:var(--ink);background:var(--near)}
.sk-sub-nav a[aria-current="true"],
.sk-sub-nav button[aria-current="true"]{
  color:#170F00;background:var(--signal);font-weight:600;
}
@media(max-width:640px){
  .sk-sub-brand span{display:none}
  .sk-sub-nav{margin-left:0;width:100%}
}

/* ---- section body ---- */
.sk-main{max-width:var(--shell);margin:0 auto;padding:30px 20px 40px}
.sk-intro{padding:14px 12px 6px}
.sk-h1{
  font-family:var(--disp);font-weight:800;
  font-size:clamp(30px,5vw,52px);line-height:.96;letter-spacing:-.038em;margin:0;
  text-wrap:balance;
}
.sk-h1 em{font-style:normal;color:var(--signal)}
.sk-lede{color:var(--dim);max-width:62ch;font-size:15.5px;margin:14px 0 0}

/* ---- prose ---- */
.prose{font-family:var(--serif);font-size:17px;line-height:1.68;color:#DDD6EE}
.prose h2{
  font-family:var(--disp);font-weight:800;font-size:clamp(21px,2.8vw,29px);
  letter-spacing:-.03em;margin:0 0 14px;color:var(--ink);
}
.prose h3{
  font-family:var(--disp);font-weight:700;font-size:19px;letter-spacing:-.02em;
  margin:26px 0 8px;color:var(--ink);
}
.prose p{margin:0 0 16px;max-width:68ch}
.prose a{color:var(--know)}
.prose code{
  font-family:var(--mono);font-size:14px;background:var(--far);
  border:1px solid var(--edge-soft);border-radius:var(--r-s);padding:1px 5px;
}

/* ============================================================
   SECTION INDEX PAGES  -  /workshops/ and /tools/
   Rendered by js/section.js from SK_INDEX.
   ============================================================ */

/* ---------- the discipline filter ---------- */
.sec-filter{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 22px}
.sec-fil{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--dim);
  background:var(--near);border:1px solid var(--edge);
  border-radius:var(--r-pill);padding:7px 14px;cursor:pointer;
  transition:color .15s,background .15s,border-color .15s;
}
.sec-fil:hover{color:var(--ink)}
.sec-fil[aria-pressed="true"]{
  color:#170F00;background:var(--signal);border-color:var(--signal);
}

/* ---------- a tier band ---------- */
.sec-tier{margin:0 0 var(--stack-gap)}
.sec-tier-head{
  display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;
  padding:0 0 12px;margin:0 0 18px;
  border-bottom:1px solid var(--edge-soft);
}
.sec-tier-n{
  font-family:var(--disp);font-weight:800;font-size:15px;
  letter-spacing:.02em;color:var(--ink);
}
.sec-tier-say{
  font-family:var(--serif);font-size:14px;color:var(--dim);font-style:italic;
}

/* An empty tier is deliberately visible but quiet - it says the
   path continues without pretending something is there. */
.sec-tier.is-empty{opacity:.55}
.sec-empty{
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--dimmer);margin:0;padding:6px 0 2px;
}

/* ---------- the cards ---------- */
.sec-grid{
  display:grid;gap:14px;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
}
.sec-card{
  display:flex;gap:14px;text-decoration:none;color:inherit;
  background:var(--near);border:1px solid var(--edge-soft);
  border-radius:var(--r-l);padding:12px;
  transition:border-color .16s ease,background .16s ease,transform .16s ease;
}
.sec-card:hover{
  border-color:var(--signal);background:var(--lift);transform:translateY(-2px);
}
.sec-thumb{
  flex:0 0 72px;width:72px;height:72px;border-radius:var(--r-m);
  overflow:hidden;display:block;background:var(--mid);
}
.sec-thumb svg{width:100%;height:100%;display:block}
.sec-body{display:block;min-width:0}

.sec-cat{
  display:inline-block;margin:0 0 6px;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--know);
}
.sec-card h3{
  margin:0 0 4px;font-family:var(--disp);font-weight:800;
  font-size:17px;letter-spacing:-.02em;color:var(--ink);
}
.sec-tag{
  margin:0 0 8px;font-family:var(--mono);font-size:10px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--dim);
}
.sec-blurb{
  margin:0 0 10px;font-family:var(--serif);font-size:14px;
  line-height:1.55;color:#CFC7E4;
}
.sec-go{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--signal);
}

@media(max-width:620px){
  .sec-grid{grid-template-columns:1fr}
  .sec-card{gap:11px;padding:11px}
  .sec-thumb{flex-basis:56px;width:56px;height:56px}
  .sec-blurb{font-size:13.5px}
}