/* ============================================================
   Ways of Healing — hub.css
   Shared layout for the browse/hub pages (cases.html, concepts.html):
   page header, note-cards, filter rail, toolbar, list-view shell,
   end strip, footnote. Card-grid internals stay in each page's
   own <style> block. Loaded AFTER case-study.css; pages may
   override individual rules in their inline <style>.
   ============================================================ */

.home{max-width:1240px;margin:0 auto;padding:28px 22px 70px}

/* page header */
.ch{display:flex;flex-wrap:wrap;align-items:flex-start;gap:18px;justify-content:space-between;margin-bottom:8px}
.ch .lead h1{font-family:'IM Fell English',serif;font-size:2.6rem;line-height:1.05}
.ch .lead .sub{font-family:'Crimson Text',serif;font-size:1.4rem;color:var(--ink-soft)}
.ch .notes{display:flex;gap:12px;flex-wrap:wrap}
.note-card{background:#fbf1b8;border:1px solid #d8c468;box-shadow:2px 4px 8px rgba(60,45,20,.16);padding:11px 14px;max-width:230px;transform:rotate(-1deg)}
.note-card:nth-child(2){background:var(--panel);border:1px solid var(--panel-edge);transform:rotate(1deg)}
.note-card b{font-family:'Special Elite',monospace;font-size:.56rem;letter-spacing:1.5px;text-transform:uppercase;color:var(--red);display:block;margin-bottom:4px}
.note-card p{font-family:'Crimson Text',serif;font-size:1.02rem;color:var(--ink-soft);line-height:1.35}
.note-card.howto b{color:var(--ink-soft)}
.note-card.howto p{font-family:'Crimson Text',serif;font-size:.86rem}

/* two-column layout with filter rail */
.layout{display:grid;grid-template-columns:210px minmax(0,1fr);gap:26px;align-items:start;margin-top:22px}
.filters{position:sticky;top:78px}
.search{width:100%;border:1px solid var(--panel-edge);background:var(--panel);font-family:'Crimson Text',serif;font-size:.95rem;color:var(--ink);padding:9px 11px;margin-bottom:16px}
.search:focus{outline:none;border-color:var(--olive)}
.fgroup{margin-bottom:16px}
.fgroup .flab{display:block;font-family:'Special Elite',monospace;font-size:.73rem;letter-spacing:2px;text-transform:uppercase;color:var(--ink-soft);border-bottom:1px solid var(--line);padding-bottom:5px;margin-bottom:9px}
.frow{display:flex;flex-wrap:wrap;gap:6px}
.chip{font-family:'Special Elite',monospace;font-size:.7rem;letter-spacing:.5px;text-transform:uppercase;background:var(--paper);border:1px solid var(--panel-edge);color:var(--ink-soft);padding:5px 9px;cursor:pointer;transition:.15s}
.chip:hover{background:var(--tag);border-color:var(--ink-faint);color:var(--ink)}
.resetbtn{font-family:'Special Elite',monospace;font-size:.7rem;letter-spacing:1px;text-transform:uppercase;background:none;border:1px dashed var(--ink-faint);color:var(--ink-soft);padding:6px 10px;cursor:pointer;width:100%}
.resetbtn:hover{border-color:var(--red);color:var(--red)}

/* toolbar */
.toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:12px;justify-content:space-between;border-bottom:2px solid var(--line);padding-bottom:10px;margin-bottom:18px}
.toolbar .count{font-family:'Special Elite',monospace;font-size:.62rem;letter-spacing:1.5px;text-transform:uppercase;color:var(--ink-soft)}
.toolbar .right{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.toolbar label{font-family:'Special Elite',monospace;font-size:.56rem;letter-spacing:1px;text-transform:uppercase;color:var(--ink-soft)}
.toolbar select{font-family:'Crimson Text',serif;font-size:.9rem;border:1px solid var(--panel-edge);background:var(--panel);color:var(--ink);padding:5px 8px}
.vtoggle{display:flex;border:1px solid var(--panel-edge)}
.vtoggle button{font-family:'Special Elite',monospace;font-size:.56rem;letter-spacing:1px;text-transform:uppercase;background:var(--panel);border:none;border-left:1px solid var(--panel-edge);color:var(--ink-soft);padding:6px 11px;cursor:pointer}
.vtoggle button:first-child{border-left:none}
.vtoggle button.on{background:var(--ink);color:var(--paper)}

/* shared grid/list shell */
.cc.hide{display:none}
.grid.list{grid-template-columns:1fr;gap:0}
.noresults{grid-column:1/-1;text-align:center;font-family:'Crimson Text',serif;font-size:1.2rem;color:var(--ink-faint);padding:40px}

/* bottom strip */
.endstrip{display:flex;gap:16px;flex-wrap:wrap;margin-top:34px}
.endcard{flex:1;min-width:240px;background:var(--panel);border:1px solid var(--panel-edge);box-shadow:2px 2px 0 var(--shadow);padding:18px 20px;display:flex;align-items:center;justify-content:space-between;gap:14px}
.endcard .t{font-family:'IM Fell English',serif;font-size:1.1rem}
.endcard .d{font-size:.9rem;color:var(--ink-soft)}
.endbtn{font-family:'Special Elite',monospace;font-size:.6rem;letter-spacing:1.5px;text-transform:uppercase;text-decoration:none;padding:9px 14px;background:var(--paper);border:1px solid var(--panel-edge);box-shadow:2px 2px 0 var(--shadow);color:var(--ink-soft);cursor:pointer;white-space:nowrap}
.endbtn:hover{border-color:var(--red);color:var(--red)}
.footnote{text-align:center;font-family:'Crimson Text',serif;font-size:1.05rem;color:var(--ink-faint);margin-top:36px}

@media (max-width:880px){
  .layout{grid-template-columns:1fr}
  .filters{position:static}
  .filters .fgroup{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
  .filters .flab{border:none;margin:0;padding:0}
  .ch{flex-direction:column}
}

@media (max-width:520px){
  .home{padding:22px 14px 56px}
  .ch .lead h1{font-size:2rem}
  .ch .lead .sub{font-size:1.2rem}
  .note-card{max-width:100%}
  .layout{gap:18px;margin-top:16px}
  .toolbar .right{justify-content:flex-start}
  .endstrip{gap:12px}
  .endcard{min-width:0;flex:1 1 100%}
}