@font-face{font-family:"Mluvka";src:url("/assets/fonts/mluvka-300.woff2") format("woff2");font-weight:300;font-display:swap}
@font-face{font-family:"Mluvka";src:url("/assets/fonts/mluvka-400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Mluvka";src:url("/assets/fonts/mluvka-500.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Mluvka";src:url("/assets/fonts/mluvka-600.woff2") format("woff2");font-weight:600;font-display:swap}

:root{
  --ink:#0E0F11;
  --fire:#E05538;
  --fire-text:#C2402A;
  --purple-text:#8A3299;
  --lavender-text:#6E5A94;
  --cobalt:#2743C8;
  --pine:#1E6E52;
  --quiet:#55585E;
  --hairline:#E5E5E8;
}
*{box-sizing:border-box;margin:0;padding:0}
body{
  background:#FFFFFF;color:var(--ink);
  font-family:"Mluvka",-apple-system,system-ui,"Helvetica Neue",sans-serif;
  font-weight:400;-webkit-font-smoothing:antialiased;
}
a{color:var(--fire-text);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
a:focus-visible{outline:2px solid var(--fire-text);outline-offset:3px;border-radius:2px}
.shell{max-width:1180px;margin:0 auto;padding:0 28px}
.skip{position:absolute;left:-9999px}
.skip:focus{position:static;display:inline-block;padding:8px 0}

/* CHROME:BEGIN masthead */
/* masthead */
html{scroll-padding-top:140px}
@media (max-width:700px){html{scroll-padding-top:96px}}
.masthead{
  display:flex;align-items:baseline;justify-content:space-between;
  flex-wrap:wrap;gap:12px 32px;padding:40px 0 28px;
  border-bottom:1px solid var(--hairline);
;position:sticky;top:0;z-index:50;background:#fff}
.wordmark{display:flex;align-items:center;gap:10px;font-weight:600;font-size:24px;letter-spacing:-.01em;color:var(--ink)}
.wordmark:hover{text-decoration:none}
.wordmark .logo{display:block;flex:none}
.masthead nav{display:flex;gap:28px;font-size:15px;font-weight:400;align-items:baseline}
.masthead nav a{color:var(--ink)}
.masthead nav a:hover{color:var(--fire-text);text-decoration:none}
.masthead nav a[aria-current="page"]{color:var(--fire-text);font-weight:500}
/* the hamburger: hidden everywhere until the mobile block below reveals it (JS-gated) */
.nav-toggle{
  display:none;background:#fff;border:1px solid var(--hairline);border-radius:7px;
  width:40px;height:36px;align-items:center;justify-content:center;
  color:var(--ink);cursor:pointer;padding:0;
}
.nav-toggle:hover{color:var(--fire-text);border-color:var(--fire)}
.nav-toggle:focus-visible{outline:2px solid var(--fire-text);outline-offset:2px}
/* CHROME:END */

/* intro */
.intro{
  padding:76px 0 0;font-weight:400;
  font-size:clamp(27px,3.6vw,38px);line-height:1.25;letter-spacing:-.015em;
  max-width:17em;text-wrap:balance;
}

/* legend */
.legend{display:flex;flex-wrap:wrap;gap:14px 28px;padding:56px 0 40px;align-items:center}
.legend-item{
  display:flex;align-items:center;gap:10px;
  font:inherit;background:none;border:1px solid transparent;border-radius:999px;
  padding:7px 14px 7px 10px;cursor:pointer;opacity:.55;
  transition:opacity .18s ease,border-color .18s ease;
}
.legend-item:hover{opacity:1}
.legend-item.is-on{opacity:1;border-color:var(--hairline)}
.legend-item:focus-visible{outline:2px solid var(--fire-text);outline-offset:2px}
.legend-item svg{display:block}
.legend-item .cat-word{font-size:13px;font-weight:500;letter-spacing:.02em}
.legend-item[data-filter="all"]{padding-left:14px}
.entry[hidden]{display:none}
.sheet-empty{padding:16px 0 96px;color:var(--quiet);font-family:"Spectral",Georgia,serif}

/* specimen sheet */
.sheet{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  column-gap:48px;row-gap:64px;padding:16px 0 96px;
}
.entry{display:block}
.entry .mark{display:block;margin-bottom:18px}
.entry h3{font-weight:500;font-size:19px;line-height:1.35;letter-spacing:-.005em;max-width:24em}
.entry h3 a{color:var(--ink)}
.entry h3 a:hover{color:var(--fire-text);text-decoration:none}
.entry .meta{margin-top:8px;font-size:13px;color:var(--quiet);font-weight:400}
.entry .meta .cat-word{font-weight:500}
.meta .sep{color:var(--quiet);padding:0 6px}
.entry .ex{
  margin-top:10px;font-family:"Spectral",Georgia,serif;
  font-size:15px;line-height:1.55;color:var(--quiet);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;
  overflow:hidden;max-width:42ch;
}
.mdlink{color:#565963;font-size:13px;font-weight:400}
.mdlink:hover{color:var(--fire-text)}

.cat-Leadership{color:var(--fire-text)}
.cat-Org-design{color:var(--purple-text)}
.cat-Innovation{color:var(--lavender-text)}
.cat-Go-to-market{color:var(--cobalt)}
.cat-Fundraising{color:var(--pine)}
.cat-Strategy{color:#0F766E}
.cat-Operations{color:#4A5561}
.cat-Growth{color:#8A6208}

/* marks: draw-on + hover */
.mark .s{transition:stroke-dashoffset 400ms cubic-bezier(.4,0,.2,1);transition-delay:var(--d,0ms)}
.var{transition:transform 300ms ease;transform-box:fill-box;transform-origin:center}
.entry:hover .var,.entry:focus-within .var{transform:rotate(9deg)}
.legend-item .var{transition:none}

/* article */
.article{padding:64px 0 96px}
.article .mark{display:block;margin-bottom:32px}
.article h1{
  font-weight:500;font-size:clamp(30px,4.4vw,44px);
  line-height:1.18;letter-spacing:-.015em;max-width:18em;text-wrap:balance;
}
.article .meta{margin-top:18px;font-size:14px;color:var(--quiet)}
.article .meta .cat-word{font-weight:500}
.article-body{
  font-family:"Spectral",Georgia,serif;font-weight:400;
  font-size:17.5px;line-height:1.7;max-width:68ch;margin-top:48px;text-wrap:pretty;
}
.article-body h2,.article-body h3,.article-body h4,.article-body h5{
  font-family:"Mluvka",sans-serif;font-weight:500;letter-spacing:-.005em;
}
.article-body h2{font-size:25px;line-height:1.3;margin:44px 0 16px}
.article-body h3{font-size:22px;line-height:1.35;margin:40px 0 16px}
.article-body h4{font-size:21px;line-height:1.4;margin:0 0 24px}
.article-body h5{font-size:18px;margin:40px 0 16px}
.article-body p{margin:0 0 24px}
.article-body a{color:var(--fire-text);text-decoration:underline;text-underline-offset:3px}
.article-body ul,.article-body ol{margin:0 0 24px;padding-left:24px}
.article-body li{margin-bottom:12px}
.article-body blockquote{
  margin:32px 0;padding-left:20px;border-left:2px solid var(--fire);color:var(--quiet);
}
.article-body img{max-width:100%;height:auto;display:block}
.article-body figure{margin:36px 0}
.article-body figure img{width:100%}
.article-body figcaption{font-family:"Mluvka",sans-serif;font-size:13px;color:var(--quiet);margin-top:12px}
.article-body iframe{max-width:100%}
.article-body.wide{max-width:none}
.asfiro-note{
  margin-top:40px;padding-top:20px;border-top:1px solid var(--hairline);
  font-family:"Mluvka",sans-serif;font-size:14px;color:var(--quiet);
}
.asfiro-note a{color:var(--fire-text);text-decoration:underline;text-underline-offset:3px}
.article-foot{
  margin-top:56px;padding-top:24px;border-top:1px solid var(--hairline);
  font-size:13px;color:#565963;max-width:68ch;
}
.article-foot a{color:#565963;text-decoration:underline;text-underline-offset:3px}
.article-foot a:hover{color:var(--fire-text)}

/* agents page */
.advisor{
  display:grid;grid-template-columns:auto 1fr;gap:48px;align-items:start;
  border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline);
  margin-top:64px;padding:56px 0 52px;
}
.advisor-copy h2{font-weight:500;font-size:clamp(24px,3vw,30px);letter-spacing:-.01em}
.advisor-copy .lead{
  margin-top:16px;font-family:"Spectral",Georgia,serif;
  font-size:17px;line-height:1.65;color:var(--ink);max-width:48ch;
}
.advisor-cta{
  display:inline-block;margin-top:28px;padding:13px 26px;border-radius:6px;
  background:var(--fire);color:#FFFFFF;font-weight:600;font-size:17px;
}
.advisor-cta:hover{background:var(--fire-text);color:#FFFFFF;text-decoration:none}
.advisor details{margin-top:24px}
.advisor summary{cursor:pointer;font-size:14px;font-weight:500;color:var(--quiet)}
.advisor summary:focus-visible{outline:2px solid var(--fire-text);outline-offset:3px}
.advisor details ol{margin:14px 0 0 20px;font-size:15px;line-height:1.6;color:var(--quiet);max-width:52ch}
.advisor details li{margin-bottom:8px}
.advisor .later{margin-top:28px;font-size:13px;color:var(--quiet);max-width:38em}
.agents-band{border-bottom:1px solid var(--hairline);padding:52px 0 44px}
.band-head{display:flex;align-items:center;gap:20px;margin-bottom:40px}
.band-head .mark{flex:none}
.band-head h2{font-weight:500;font-size:19px;letter-spacing:-.005em}
.doors{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));column-gap:48px;row-gap:36px}
.door h3{font-weight:500;font-size:16px;line-height:1.4;letter-spacing:-.005em}
.door p{margin-top:8px;font-family:"Spectral",Georgia,serif;font-size:15px;line-height:1.55;color:#565963;max-width:42ch}
.door .door-link{display:inline-block;margin-top:10px;font-size:14px;font-weight:500}
.band-note{margin-top:40px;font-size:13px;color:#565963}

/* about: the one page that is about a person, so the prose keeps a reading measure even
   though the page is .wide — only the doors band is allowed the full width. */
.article-body.wide > p,
.article-body.wide > ol,
.article-body.wide > h2{max-width:34em}
.about-lede{
  font-family:"Mluvka",-apple-system,system-ui,sans-serif;
  font-weight:400;font-size:clamp(24px,3vw,32px);line-height:1.28;
  letter-spacing:-.015em;max-width:19em !important;text-wrap:balance;
  margin-bottom:36px;
}
.about-band{
  margin:56px 0;padding:40px 0 48px;
  border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline);
}
.about-band h2{margin-top:0}
/* The door cards carry a mark like every other card on the site, so About stops being
   the one page that looks like it came from somewhere else. */
.about-band .door .mark{display:block;margin-bottom:14px}
/* The three blurbs are different lengths, so without this the links sit at three
   different heights and the row reads as ragged rather than as a set. */
.about-band .door{display:flex;flex-direction:column;align-items:flex-start}
.about-band .door .door-link{margin-top:auto;padding-top:14px}
.about-past{font-size:16px;color:#565963}
.about-sign{margin-top:36px}
@media (max-width:640px){
  .about-band{margin:44px 0;padding:32px 0 36px}
  .about-band .door .door-link{margin-top:0}
}

/* investment portfolio: a calm logo wall */
.portfolio-intro{
  font-family:"Spectral",Georgia,serif;font-size:17.5px;line-height:1.7;
  color:var(--quiet);max-width:56ch;margin-top:20px;
}
.portfolio{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:8px;align-items:stretch;margin:52px 0 8px;padding:0;list-style:none;
  border-top:1px solid var(--hairline);border-left:1px solid var(--hairline);
}
.portfolio li{
  display:flex;align-items:center;justify-content:center;
  min-height:132px;padding:26px 30px;
  border-right:1px solid var(--hairline);border-bottom:1px solid var(--hairline);
  margin:-1px 0 0 -1px;
}
/* --h is set per logo by build.py from the artwork's own aspect ratio, so every cell
   carries about the same amount of ink: see logo_height(). */
.portfolio img{
  max-width:100%;max-height:var(--h,80px);width:auto;height:auto;
  object-fit:contain;display:block;
}

/* most cells link to the company. The hover cue is on the ARTWORK, not the cell
   background: half these logos are opaque white JPEGs, so a background wash would
   tint the padding and leave a white rectangle floating in the middle of it. A small
   scale reads the same whether the logo has an alpha channel or not. */
.portfolio li.pf-linked{padding:0}
.portfolio .pf-logo{
  display:flex;align-items:center;justify-content:center;
  width:100%;height:100%;padding:26px 30px;text-decoration:none;
}
.portfolio .pf-logo:hover{text-decoration:none}
.portfolio .pf-logo:focus-visible{outline:2px solid var(--fire-text);outline-offset:-4px}
.portfolio .pf-logo img{transition:transform .18s ease}
.portfolio .pf-logo:hover img{transform:scale(1.045)}
@media (prefers-reduced-motion:reduce){
  .portfolio .pf-logo img{transition:none}
  .portfolio .pf-logo:hover img{transform:none}
}

/* the last cell is a door, not a holding: 97212 Ventures, whose own portfolio sits
   off-site. It keeps the wall's box and hairlines, and earns its difference from a
   faint wash plus a caption — loud enough to say "this one is a link", quiet enough
   not to outrank the fifteen logos above it. */
.portfolio li.pf-door-cell{padding:0}
.portfolio .pf-door{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:13px;
  width:100%;height:100%;padding:26px 30px;
  background:#FBFBFC;color:var(--ink);text-decoration:none;
  transition:background .18s ease;
}
.portfolio .pf-door:hover{background:#F4F4F6;text-decoration:none}
.portfolio .pf-door:focus-visible{outline:2px solid var(--fire-text);outline-offset:-4px}
.portfolio .pf-door img{max-width:142px;max-height:62px;width:auto;height:auto;object-fit:contain}
/* Block, not flex: in a narrow cell the caption has to wrap, and a flex row would
   strand the arrow off to the right of two stacked lines. As text it wraps centred,
   and the nowrap span keeps the arrow glued to the word it belongs to. */
.portfolio .pf-door-label{
  display:block;text-align:center;
  /* .article-body sets Spectral for prose; this is a UI label, so it takes the
     site's sans like every other caption and door link does. */
  font-family:"Mluvka",-apple-system,system-ui,sans-serif;
  font-size:12.5px;line-height:1.45;font-weight:500;letter-spacing:.01em;
  color:var(--quiet);transition:color .18s ease;
}
.portfolio .pf-door-end{white-space:nowrap}
.portfolio .pf-door:hover .pf-door-label{color:var(--fire-text)}
.portfolio .pf-arrow{display:inline-block;vertical-align:-1px;margin-left:6px;
  transition:transform .18s ease}
.portfolio .pf-door:hover .pf-arrow{transform:translate(2px,-2px)}
@media (prefers-reduced-motion:reduce){
  .portfolio .pf-door,.portfolio .pf-door-label,.portfolio .pf-arrow{transition:none}
  .portfolio .pf-door:hover .pf-arrow{transform:none}
}

@media (max-width:640px){
  .portfolio{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));margin-top:40px}
  .portfolio li{min-height:108px;padding:20px}
  .portfolio img{max-height:calc(var(--h,80px) * .76)}
  .portfolio .pf-logo{padding:20px}
  .portfolio li.pf-door-cell{padding:0}
  .portfolio .pf-door{padding:20px;gap:10px}
  .portfolio .pf-door img{max-width:104px;max-height:44px}
  .portfolio .pf-door-label{font-size:11.5px}
}

/* the notes button: restyle feedback.js's own chrome to match the site */
.fb-bar{right:20px !important;bottom:20px !important;font-family:"Mluvka",-apple-system,system-ui,sans-serif !important}
.fb-btn{
  border:1px solid var(--hairline) !important;background:#fff !important;color:var(--quiet) !important;
  border-radius:999px !important;padding:9px 15px !important;font-size:12.5px !important;
  font-weight:500 !important;letter-spacing:.01em !important;
  box-shadow:0 1px 4px rgba(14,15,17,.06) !important;min-height:0 !important;
  transition:color .18s ease,border-color .18s ease;
}
.fb-btn:hover{color:var(--fire-text) !important;border-color:var(--fire) !important}
.fb-btn.on{background:#fff !important;color:var(--fire-text) !important;border-color:var(--fire) !important}
.fb-btn.copy{background:var(--fire) !important;color:#fff !important;border-color:var(--fire) !important}
@media print{.fb-bar{display:none !important}}

/* CHROME:BEGIN footer */
/* footer */
.footer{
  border-top:1px solid var(--hairline);padding:36px 0 56px;
  display:flex;flex-wrap:wrap;gap:12px 36px;justify-content:space-between;
  align-items:baseline;font-size:14px;
}
.footer .who{color:var(--quiet)}
.footer .plumbing{margin-top:10px;font-size:13px;color:#565963}
.footer .plumbing a{color:#565963;text-decoration:underline;text-underline-offset:3px}
.footer .plumbing a:hover{color:var(--fire-text)}
.footer nav{display:flex;gap:24px}
.footer nav a{color:var(--quiet)}
/* CHROME:END */

@media (prefers-reduced-motion: reduce){
  .mark .s{transition:none !important}
  .var{transition:none !important}
  .entry:hover .var,.entry:focus-within .var{transform:none}
}
@media (max-width:640px){
  .shell{padding:0 22px}
  /* CHROME-MOBILE:BEGIN */
  .masthead{padding-top:26px;padding-bottom:20px;gap:10px 16px;align-items:center;position:sticky;top:0;z-index:50;background:#fff}
  .masthead nav{gap:8px 16px;flex-wrap:wrap;font-size:14px}
  /* Hamburger (JS-gated via the <html> class, so no-JS keeps the wrapping nav).
     One line of masthead instead of three: wordmark left, menu button right, and
     the nav becomes a full-width panel that drops below the hairline. */
  .has-navjs .masthead nav{display:none}
  .has-navjs .nav-toggle{display:inline-flex}
  .has-navjs .masthead.nav-open nav{
    display:flex;flex-direction:column;align-items:stretch;gap:0;
    position:absolute;left:0;right:0;top:100%;z-index:40;background:#fff;
    border-bottom:1px solid var(--hairline);padding:2px 0 16px;font-size:16px;
  }
  .has-navjs .masthead.nav-open nav a{padding:13px 2px;border-top:1px solid var(--hairline)}
  .has-navjs .masthead.nav-open nav a:first-of-type{border-top:0}
  /* CHROME-MOBILE:END */
  .intro{padding-top:44px}
  /* The filter is one wrapping block, never a sideways scroller: a row you have to
     swipe hides categories off-screen and drags the whole page horizontally. Small
     marks and tight chips keep all nine on three rows, ~15% of a 390x844 screen. */
  .legend{flex-wrap:wrap;overflow:visible;gap:9px 6px;padding:26px 0 18px;align-items:center}
  /* 32px chips, not the 27px the width budget alone would allow: these are the only
     controls on the page and a thumb still has to hit them. */
  .legend-item{flex:none;gap:5px;padding:6px 9px 6px 6px}
  .legend-item svg{width:20px;height:20px}
  .legend-item .cat-word{font-size:12px;letter-spacing:.01em;white-space:nowrap}
  .legend-item[data-filter="all"]{padding-left:11px}
  /* The mark stays above the title, as on desktop — it just stops shouting. At 64px
     on a 346px column it reads as the entry's headline instead of its label; 42px
     sits under the title's own weight, which is the order the eye should take them
     in. Type is untouched. */
  .entry .mark{width:42px;height:42px;margin-bottom:14px}
  .sheet{row-gap:40px;padding-bottom:72px}
  .article{padding:48px 0 72px}
  .advisor{grid-template-columns:1fr;gap:24px;margin-top:56px;padding:48px 0 46px}
}