/* generated by tools/css.py from design/ns.css and design/fopl.css */
/* The new sections (26 Oct): one container per section, so a frame at 390, 768 or 1440 lays it out the same way the
   site will (container queries, not the window). Copy lives in ns.json. Tokens are pty.css's. */
.ns{container-type:inline-size;width:100%;box-sizing:border-box;background:var(--bg);color:var(--fg);font-family:var(--body);-webkit-font-smoothing:antialiased}
.ns *,.ns *::before,.ns *::after{box-sizing:border-box}
.ns-in{max-width:1180px;margin:0 auto;padding:clamp(64px,9cqi,128px) clamp(20px,5.5cqi,80px)}
.ns-h{margin:0;font:700 clamp(34px,4.4cqi,60px)/1.02 var(--display);letter-spacing:-.035em;color:var(--fg);text-wrap:balance}
.ns-lede{margin:20px 0 0;max-width:58ch;font-size:clamp(16.5px,1.5cqi,19px);line-height:1.6;color:var(--muted)}
.ns-b{color:var(--fg);font-weight:600}
.ns-note{display:inline-flex;align-items:center;gap:8px;margin:0;font:600 14px/1.35 var(--body);color:var(--muted)}
.ns-note svg{flex:none;color:var(--primary)}
.ns-flag{display:inline-block;margin-left:6px;padding:3px 7px;border-radius:6px;background:var(--promo-tint);color:var(--promo);font:600 11px/1.2 var(--body);letter-spacing:.02em;vertical-align:middle}

/* MONO-2381 (28 Oct): the founders block (FO.a to FO.c) and the Program Lead section (PL.a to PL.c), raw drafts.
   Tokens are pty.css's, the section frame is ns.css's (one container per section, so 1440, 768 and 390 lay out as the
   site will). Words in fopl.json. Photos: Dima's and Bence's approved portraits only; every other person is a
   labelled empty frame with its shot code. Icons are the cut-paper paper of R7.a, inline beside the words. */
.fpl{container-name:fp}
.fp-eye{margin:0 0 18px;font:600 13px/1.3 var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--primary)}
.fp-ic{flex:none;display:block;width:44px;height:44px;overflow:visible}
.fp-link{display:inline-flex;align-items:center;gap:12px;font:600 16.5px/1.3 var(--body);color:var(--fg)}
.fp-link:hover{color:var(--primary)}
.fp-link .fp-ic{width:40px;height:40px}
.fp-lbl{display:inline}
.fp-arrow{flex:none;color:var(--primary)}
.fp-ph{display:block;margin-top:10px;font:600 13.5px/1.4 var(--body);color:var(--promo)}
.fp-mail{font:400 15.5px/1.5 var(--body);color:var(--muted)}
.fp-mail a{font-weight:600;color:var(--primary)}
.fp-photo{position:relative;overflow:hidden;background:var(--band)}
.fp-photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 30%}
/* a person we have no approved photo of: an empty frame that says which shot fills it */
.fp-shot{position:relative;display:grid;place-items:center;align-content:center;gap:6px;overflow:hidden;border:2px dashed rgb(16 32 27 / .24);background:var(--band);color:var(--faint);text-align:center;padding:16px}
.fp-shot b{font:700 26px/1 var(--display);letter-spacing:-.02em;color:var(--muted)}
.fp-shot .fp-sl{font:600 13.5px/1.35 var(--body)}
.fp-shot em{font:500 12px/1.3 var(--body);font-style:normal;letter-spacing:.04em;text-transform:uppercase}
.fp-face{flex:none;border-radius:999px;overflow:hidden;background:var(--band)}
.fp-face img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 28%}
.fp-face.fp-shot{padding:4px;gap:0;border-width:1.5px}
.fp-face.fp-shot b{font-size:15px}
/* canvas only: which page a Program Lead fill sits on (not part of the section) */
.fp-on{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;padding:12px 24px;background:#0c231b;color:#dff0e7;font:600 12px/1.4 var(--body);letter-spacing:.06em;text-transform:uppercase}
.fp-on i{font-style:normal;color:#9dbcae;letter-spacing:.02em;text-transform:none;font-weight:500}

/* FO.a Letter: the words lead; the two faces are the signature; the ways to reach them close it */
.foa-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(40px,7cqi,112px);align-items:start}
.foa .ns-h{max-width:11ch}
.foa-body p{margin:0 0 22px;max-width:44ch;font-size:clamp(17px,1.55cqi,19.5px);line-height:1.65;color:var(--muted);text-wrap:pretty}
.foa-body p:first-child{font:500 clamp(21px,2.1cqi,27px)/1.42 var(--display);letter-spacing:-.012em;color:var(--fg);max-width:30ch}
.foa-sign{display:flex;align-items:center;gap:18px;margin-top:34px}
.foa-faces{display:flex}
.foa-faces .fp-face{width:64px;height:64px;box-shadow:0 0 0 3px var(--bg)}
.foa-faces .fp-face + .fp-face{margin-left:-14px}
.foa-sign b{display:block;font:600 20px/1.2 var(--display);letter-spacing:-.015em;color:var(--fg)}
.foa-sign .fp-sub{display:block;margin-top:3px;font-size:14.5px;color:var(--faint)}
.foa-reach{list-style:none;margin:40px 0 0;padding:30px 0 0;border-top:1px solid var(--hair);display:flex;flex-wrap:wrap;gap:20px 44px}
@container fp (max-width:900px){
  .foa-grid{grid-template-columns:minmax(0,1fr);gap:36px}
  .foa .ns-h{max-width:14ch}
}
@container fp (max-width:560px){
  .foa-reach{flex-direction:column;gap:18px}
  .foa-faces .fp-face{width:56px;height:56px}
}

/* FO.b Two portraits: the faces lead, each with its own note and its own direct line */
.fob-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px 56px;flex-wrap:wrap}
.fob-head .ns-h{flex:1 1 420px;max-width:13ch}
.fob-head .ns-lede{flex:0 1 42ch;margin:0}
.fob-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,3.4cqi,48px);margin-top:clamp(40px,5.5cqi,72px)}
.fob-photo{aspect-ratio:1/1;border-radius:28px}
.fob-who{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-top:26px}
.fob-who h3{margin:0;font:600 clamp(26px,2.4cqi,32px)/1.08 var(--display);letter-spacing:-.025em;color:var(--fg)}
.fob-who .fp-sub{font-size:14.5px;color:var(--faint);white-space:nowrap}
.fob-note{margin:12px 0 0;max-width:50ch;font-size:16px;line-height:1.62;color:var(--muted);text-wrap:pretty}
.fob-wa{margin-top:22px}
.fob-mail{margin:clamp(36px,4.5cqi,56px) 0 0;text-align:center}
@container fp (max-width:900px){
  .fob-photo{border-radius:22px}
  .fob-note{font-size:15px}
}
@container fp (max-width:560px){
  .fob-pair{grid-template-columns:minmax(0,1fr);gap:48px}
  .fob-photo{aspect-ratio:4/3.4}
  .fob-mail{text-align:left}
}

/* FO.c Conversation: show what reaching them looks like, the student's own first line, already typed */
.foc-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(40px,6.5cqi,104px);align-items:center}
.foc .ns-h{max-width:12ch}
.foc-belief{margin:34px 0 0;padding:0;max-width:40ch}
.foc-belief p{margin:0;font:500 17px/1.55 var(--body);color:var(--fg);text-wrap:pretty}
.foc-belief p::before{content:"\201C";display:block;height:30px;margin-bottom:4px;font:700 56px/1 var(--display);color:var(--primary)}
.foc-belief footer{margin-top:12px;font-size:14px;color:var(--faint)}
.foc-stage{position:relative;border-radius:32px;background:var(--band);padding:clamp(28px,4cqi,56px) clamp(22px,3.6cqi,52px);display:flex;flex-direction:column;gap:22px}
.foc-you{align-self:flex-end;max-width:min(420px,88%)}
.foc-you small,.foc-them small{display:block;margin:0 6px 7px;font:600 12.5px/1.3 var(--body);color:var(--faint)}
.foc-you small{text-align:right}
.foc-you p{margin:0;padding:16px 20px;border-radius:22px 22px 6px 22px;background:#fff;box-shadow:var(--elev-card);font:400 17px/1.45 var(--body);color:var(--fg)}
.foc-them{display:flex;align-items:flex-end;gap:12px}
.foc-them .fp-face{width:46px;height:46px}
.foc-dots{display:inline-flex;gap:7px;padding:17px 20px;border-radius:22px 22px 22px 6px;background:var(--primary)}
.foc-dots i{width:9px;height:9px;border-radius:999px;background:var(--highlight);opacity:.9}
.foc-dots i:nth-child(2){opacity:.65}.foc-dots i:nth-child(3){opacity:.4}
.foc-pick{list-style:none;margin:28px 0 0;padding:0}
.foc-pick li{border-top:1px solid var(--hair)}
.foc-pick li:last-child{border-bottom:1px solid var(--hair)}
.foc-pick a{display:flex;align-items:center;gap:16px;padding:16px 4px;color:var(--fg)}
.foc-pick .fp-face{width:52px;height:52px}
.foc-pick b{flex:1;font:600 20px/1.2 var(--display);letter-spacing:-.015em}
.foc-pick .fp-ic{width:40px;height:40px}
.foc-mail{margin:20px 4px 0}
@container fp (max-width:900px){
  .foc-grid{grid-template-columns:minmax(0,1fr);gap:40px}
  .foc .ns-h{max-width:16ch}
}
@container fp (max-width:560px){
  .foc-you p{font-size:16px}
  .foc-pick b{font-size:18px}
}

/* PL.a Portrait: the person leads; what to come to them for sits under the bio, each line with its own paper */
.pla-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(36px,6cqi,96px);align-items:start}
.pla-photo{aspect-ratio:4/5;border-radius:28px}
.pla-name{margin:0;font:700 clamp(40px,4.8cqi,66px)/1 var(--display);letter-spacing:-.035em;color:var(--fg)}
.pla-line{margin:14px 0 0;font:600 17px/1.4 var(--body);color:var(--primary)}
.pla-bio{margin:20px 0 0;max-width:54ch;font-size:clamp(16px,1.4cqi,17.5px);line-height:1.65;color:var(--muted);text-wrap:pretty}
.pla-asks{margin:36px 0 0}
.pla-asks h3{margin:0 0 6px;font:600 13px/1.3 var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
.pla-asks ul{list-style:none;margin:0;padding:0}
.pla-asks li{display:flex;align-items:center;gap:20px;padding:18px 0;border-bottom:1px solid var(--hair)}
.pla-asks .fp-ic{width:54px;height:54px}
.pla-asks b{display:block;font:600 18px/1.3 var(--body);color:var(--fg)}
.pla-asks .fp-sub{display:block;margin-top:3px;font-size:15.5px;line-height:1.5;color:var(--muted)}
.pla-reach{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px;margin-top:34px}
@container fp (max-width:900px){
  .pla-grid{grid-template-columns:240px minmax(0,1fr);gap:36px}
  .pla-photo{border-radius:22px}
}
@container fp (max-width:560px){
  .pla-grid{grid-template-columns:minmax(0,1fr);gap:28px}
  .pla-photo{aspect-ratio:1/1;max-width:100%}
  .pla-asks .fp-ic{width:46px;height:46px}
  .pla-asks li{gap:16px}
  .pla-reach .btn{width:100%}
}

/* PL.b Note: a short first-person hello, the three reasons inside one sentence, one button */
.plb-in{max-width:780px;margin:0 auto}
.plb-top{display:flex;align-items:center;gap:20px}
.plb-top .fp-face{width:92px;height:92px}
.plb-top .fp-eye{margin:0 0 6px}
.plb-top b{display:block;font:600 22px/1.15 var(--display);letter-spacing:-.02em;color:var(--fg)}
.plb-top .fp-sub{display:block;margin-top:4px;font-size:14.5px;line-height:1.4;color:var(--faint)}
.plb-hello{margin:38px 0 0;font:600 clamp(27px,3.1cqi,40px)/1.2 var(--display);letter-spacing:-.025em;color:var(--fg);text-wrap:balance}
.plb-ask{margin:26px 0 0;font-size:clamp(18px,1.65cqi,21px);line-height:2;color:var(--muted)}
.plb-ask .fp-ic{display:inline-block;width:36px;height:36px;margin:0 6px 0 3px;vertical-align:-11px}
.plb-ask b{font-weight:600;color:var(--fg)}
.plb-reach{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px;margin-top:34px}
.plb-about{margin:44px 0 0;padding-top:22px;border-top:1px solid var(--hair);font-size:15px;line-height:1.6;color:var(--faint);max-width:68ch}
.plb-about b{color:var(--fg);font-weight:600}
@container fp (max-width:560px){
  .plb-top .fp-face{width:72px;height:72px}
  .plb-ask{line-height:1.85}
  .plb-ask .fp-ic{width:30px;height:30px;vertical-align:-9px}
  .plb-reach .btn{width:100%}
}

/* PL.c Questions: the student's own questions lead, each opens the chat with it typed; the person who answers sits
   beside the headline */
.plc-head{display:flex;align-items:flex-end;justify-content:space-between;gap:28px 56px;flex-wrap:wrap}
.plc-head .ns-h{max-width:13ch}
.plc-who{display:flex;align-items:center;gap:16px;flex:none}
.plc-who .fp-face{width:76px;height:76px}
.plc-who small{display:block;font:600 12px/1.3 var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
.plc-who b{display:block;margin-top:4px;font:600 21px/1.15 var(--display);letter-spacing:-.02em;color:var(--fg)}
.plc-who .fp-sub{display:block;margin-top:3px;max-width:30ch;font-size:14px;line-height:1.4;color:var(--muted)}
.plc-qs{list-style:none;margin:clamp(48px,6cqi,80px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3.6cqi,52px)}
.plc-qs li{padding-top:30px;border-top:1px solid var(--hair)}
.plc-qs .fp-ic{width:76px;height:76px}
.plc-qs h3{margin:22px 0 0;font:600 clamp(21px,1.9cqi,25px)/1.22 var(--display);letter-spacing:-.02em;color:var(--fg);text-wrap:balance}
.plc-qs .fp-link{margin-top:16px;font-size:15.5px;color:var(--primary)}
.plc-about{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px 56px;align-items:end;margin-top:clamp(44px,5.5cqi,72px);padding-top:26px;border-top:1px solid var(--hair)}
.plc-about p{margin:0;max-width:70ch;font-size:15.5px;line-height:1.62;color:var(--muted)}
.plc-about p b{color:var(--fg);font-weight:600}
@container fp (max-width:900px){
  .plc-qs{grid-template-columns:minmax(0,1fr);gap:0}
  .plc-qs li{display:grid;grid-template-columns:64px minmax(0,1fr);column-gap:22px;align-items:start;padding:24px 0}
  .plc-qs .fp-ic{grid-row:span 2;width:64px;height:64px}
  .plc-qs h3{margin:2px 0 0}
  .plc-qs .fp-link{margin-top:10px}
  .plc-about{grid-template-columns:minmax(0,1fr)}
}
@container fp (max-width:560px){
  .plc-qs li{grid-template-columns:50px minmax(0,1fr);column-gap:16px}
  .plc-qs .fp-ic{width:50px;height:50px}
  .plc-qs h3{font-size:19px}
}

.yp > .foc > .ns-in{max-width:none;padding-left:0;padding-right:0}
.yp > .plb > .ns-in{max-width:none;padding-left:0;padding-right:0}
.yp > .plb .plb-in{max-width:none;margin:0}
.yp > .plb .plb-hello{max-width:24ch}
.yp > .plb .plb-ask{max-width:60ch}
.yp > .plb .plb-about{max-width:none;padding-right:max(0px,calc(100% - 72ch))}