/* ==========================================================================
   The Fellowship program — /fellows/ and /ideas/ — as a page layer on top of
   the house stylesheet (/style.css). Tokens and typefaces live there; nothing
   here names a colour or a typeface directly.
   ========================================================================== */

/* sections stack on whitespace alone — no dividers, matching the homepage */
section{padding:34px 0}
section:first-of-type{padding-top:0}
.backlink{font-size:14px;margin-bottom:10px;display:inline-block}

/* .lead on a section is a spacing wrapper here, never body copy */
section.lead{padding-top:22px}
/* the title starts at the same offset on every arm: the content column's own
   top padding places it, and the hero adds nothing of its own */
section.hero{padding-top:0}
.hero>p.muted{font-size:14.5px;line-height:1.55;color:var(--muted);letter-spacing:0}
section>h2:first-child,section>.label+h2{margin:0 0 18px}

.progs{margin-top:18px}
.terms{margin-top:22px}
.four{margin-top:8px}
.four .step{margin-top:24px}
.four .step .label{margin-bottom:3px}

/* faq */
.faq dt{margin-top:24px;font-size:16px;font-weight:500;letter-spacing:-.005em}
.faq dd{margin-top:6px;color:var(--muted)}

footer{margin-top:8px;padding-top:38px;border-top:1px solid var(--rule)}

/* --------------------------------------------------------------------------
   Ideas index — briefs, directions, matcher, brief drawer
   -------------------------------------------------------------------------- */
.ideas h3{margin-top:24px}
.ideas .d{color:var(--muted);margin-top:3px;font-size:15px}
.ideas .meta{display:block;margin-top:5px}
.count{color:var(--muted)}

.frame{margin-top:22px}
.frame b{font-weight:500}
.frame .d{color:var(--muted);margin-top:3px;font-size:15px}

.tl{margin-top:16px}
.tl .n{display:block}
.tl .o{color:var(--muted);font-size:15px}

/* the 258 directions, by category: a hairline row per category, shut until
   the reader asks for it, so the page is not a wall of 258 lines */
.cat{border-top:1px solid var(--rule)}
.cat:first-of-type{margin-top:26px}
.cat:last-of-type{border-bottom:1px solid var(--rule)}
.cat>summary{display:flex;align-items:baseline;gap:7px;padding:15px 0;cursor:pointer;list-style:none}
.cat>summary::-webkit-details-marker{display:none}
.cat>summary::after{
  content:"";flex:0 0 auto;margin-left:auto;align-self:center;width:7px;height:7px;
  border-right:1px solid var(--faint);border-bottom:1px solid var(--faint);
  transform:translateY(-2px) rotate(45deg);transition:transform .2s,border-color .2s;
}
.cat[open]>summary::after{transform:translateY(2px) rotate(225deg)}
.cat>summary:hover .catn{color:var(--ink)}
.cat>summary:hover::after{border-color:var(--ink)}
.cat>summary:focus-visible{outline:1px solid var(--ink);outline-offset:3px}
.catn{font-size:15px;color:var(--ink-soft)}
.cat .count{font-size:13px}
.catbody{padding:0 0 24px}
.catbody .tl:first-child{margin-top:4px}

.brf{border-top:1px solid var(--rule);padding:26px 0}
.brf:last-of-type{border-bottom:1px solid var(--rule)}
/* number + for-profit/nonprofit label row on every card */
.irow{display:flex;align-items:center;gap:9px;margin-bottom:10px}
.idno{font-size:12px;letter-spacing:.06em;color:var(--faint)}
.idno::before{content:"#"}
.itype{font-size:12px;letter-spacing:.02em;padding:2px 8px 1px;border-radius:2px;white-space:nowrap}
.itype.fp{background:var(--ink);color:var(--paper)}
.itype.np{background:var(--chip);color:var(--ink-soft)}
a.bt{font-weight:500;font-size:16px;color:var(--ink);text-decoration:none;cursor:pointer;border-bottom:1px solid var(--rule-ink);padding-bottom:1px}
a.bt:hover{border-bottom-color:var(--ink)}
.readbrief{display:inline-block;margin-top:8px;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--rule-ink);padding-bottom:2px}
.readbrief:hover{border-bottom-color:var(--ink)}

/* matcher — no heading of its own, so it sits straight under the intro */
.ideas.lead{padding-bottom:0}
.ideas.match{padding-top:0}
.match .mform{display:flex;gap:8px;margin-top:20px;align-items:stretch;max-width:520px}
.match .mform input{flex:1;margin:0}
.match .mform button{justify-self:auto;white-space:nowrap;flex-shrink:0}
.mres{margin-top:26px}
.mres[hidden]{display:none}
.mcard{margin-top:14px;padding:16px 18px;background:var(--surface);border:1px solid var(--rule);border-radius:2px}
.mcard.isbrief{cursor:pointer;transition:border-color .15s}
.mcard.isbrief:hover{border-color:var(--ink)}
.mbar{height:2px;background:var(--rule);overflow:hidden;margin-bottom:12px}
.mbar span{display:block;height:100%;background:var(--ink)}
.mt{font-size:16px;line-height:1.25;font-weight:500;letter-spacing:-.005em}
.md{color:var(--muted);font-size:15px;margin-top:4px}
.mmeta{display:block;margin-top:9px}
.mopen{display:inline-block;margin-top:9px;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--rule-ink);padding-bottom:2px}
.mopen:hover{border-bottom-color:var(--ink)}
@media(max-width:520px){.match .mform{flex-direction:column}.match .mform button{justify-self:stretch;width:100%}}

/* the brief popout: a right-hand sidebar on a wide screen, a bottom sheet on a
   narrow one. Every full writeup — nonprofit brief and for-profit alike —
   opens here, so the list behind it never moves. */
.scrim{position:fixed;inset:0;background:rgba(26,26,26,.28);opacity:0;visibility:hidden;transition:opacity .25s;z-index:60}
.scrim.on{opacity:1;visibility:visible}
.drawer{
  position:fixed;top:0;right:0;height:100vh;width:min(560px,94vw);
  display:flex;flex-direction:column;
  background:var(--paper);border-left:1px solid var(--rule);
  transform:translateX(100%);
  transition:transform .32s cubic-bezier(.16,1,.3,1),visibility 0s linear .32s;
  visibility:hidden;
  z-index:70;box-shadow:-24px 0 60px rgba(26,26,26,.08);
}
.drawer.on{
  transform:none;visibility:visible;
  transition:transform .32s cubic-bezier(.16,1,.3,1),visibility 0s;
}
/* while a finger is on the sheet it tracks the finger, with no easing */
.drawer.dragging{transition:none}
.dbar{display:flex;align-items:center;justify-content:flex-end;flex:0 0 auto;padding:14px 22px 0}
.dgrab{display:none}
.drawerclose{
  font-family:inherit;font-size:21px;line-height:1;color:var(--muted);cursor:pointer;
  background:0;border:1px solid transparent;border-radius:2px;
  width:34px;height:34px;display:grid;place-items:center;padding:0;
  transition:color .15s,border-color .15s;
}
.drawerclose:hover{color:var(--ink);border-color:var(--rule)}
.drawerclose:focus-visible{outline:1px solid var(--ink);outline-offset:2px}
.dinner{flex:1 1 auto;overflow-y:auto;overscroll-behavior:contain;padding:6px 32px 72px;border:0}
.dinner:focus{outline:0}
.brief h2{font-weight:400;font-size:24px;line-height:1.2;letter-spacing:-.018em;margin:6px 0 0;padding:0;border-top:0}
.brief .d{color:var(--muted);margin-top:10px}
.brief .facts{margin-top:14px}
.brief .sec{margin-top:26px}
.brief .slab{display:block;margin-bottom:6px}
.brief .sec p{margin:0 0 9px}
.brief .mbody{padding:0;max-width:none}
.brief .mbody .sec:first-child{margin-top:26px}

@media(max-width:699px){
  .drawer{
    top:auto;right:0;bottom:0;left:0;width:auto;height:auto;max-height:86vh;
    border-left:0;border-top:1px solid var(--rule);border-radius:10px 10px 0 0;
    transform:translateY(100%);box-shadow:0 -18px 50px rgba(26,26,26,.13);
  }
  /* the whole header strip is the grab area; the close button floats over it */
  .dbar{display:block;position:relative;padding:0;height:38px}
  .dgrab{display:block;position:absolute;inset:0;touch-action:none;cursor:grab}
  .dgrab::after{
    content:"";position:absolute;left:50%;top:15px;width:38px;height:3px;margin-left:-19px;
    border-radius:2px;background:var(--rule-ink);
  }
  .drawerclose{position:absolute;right:8px;top:2px;z-index:1}
  .dinner{padding:2px 22px 56px}
}

/* --------------------------------------------------------------------------
   /ideas — the two tracks: for-profit ideas and nonprofit briefs
   -------------------------------------------------------------------------- */

.fpnone{color:var(--muted);margin-top:22px}
.mno{color:var(--faint)}

/* a for-profit idea: the card is the <summary>, the writeup is the disclosure */
.fpgrid{margin-top:8px}
.fp{border-top:1px solid var(--rule);padding:0}
.fp>summary{
  display:block;cursor:pointer;padding:22px 0;list-style:none;
}
.fp>summary::-webkit-details-marker{display:none}
.fp>summary .label{display:block;margin-bottom:7px}
.fp>summary .fpt{display:block;font-size:17px;font-weight:500;letter-spacing:-.01em;line-height:1.3}
.fp>summary .d{display:block;color:var(--muted);font-size:15px;line-height:1.5;margin-top:5px}
.fp>summary .d:first-of-type{color:var(--ink-soft)}
.fp>summary .meta{display:block;margin-top:9px}
.fp>summary .tagrow{display:flex;flex-wrap:wrap;gap:6px;margin-top:11px}
.fp>summary .fpmore{
  display:inline-block;margin-top:12px;
  font-size:13px;color:var(--ink);border-bottom:1px solid var(--rule-ink);padding-bottom:2px;
}
.fp>summary:hover .fpmore{border-bottom-color:var(--ink)}
.fp[open]>summary .fpmore{visibility:hidden}
.fp>summary:focus-visible{outline:1px solid var(--ink);outline-offset:3px}

/* the writeup: inline when JS is off, in the popout when it is on */
.mbody{padding:2px 0 30px;max-width:42rem}
.popout .fp>.mbody{display:none}
.mbody .sec{margin-top:24px}
.mbody .sec:first-child{margin-top:6px}
.mbody .slab{
  display:block;margin-bottom:6px;
  font-size:13px;color:var(--muted);
}
.mbody p{margin:0 0 10px}
.mbody p:last-child{margin-bottom:0}
.mbody b{font-weight:500}
/* the catch is the one place the accent appears */
.mbody .sec.caveat{border-left:2px solid var(--accent);padding-left:15px}
.mbody .cvquote,.mbody .cvnote{color:var(--muted)}
.mbody .comps,.mbody .valn,.mbody .gate,.mbody .helps{
  display:block;background:var(--surface);border:1px solid var(--rule);border-radius:2px;
  padding:13px 15px;margin-top:10px;font-size:15px;line-height:1.55;
}
.mbody .valn{background:none;border:0;border-left:1px solid var(--rule);border-radius:0;padding:0 0 0 15px}

@media(max-width:600px){
  .fp>summary{padding:18px 0}
}