/* Directory pages and profiles (12 Nov 2026): /directory/, profiles, /ask/<slug>/, /directory/review/ and
   /directory/join/ load it, after rb.css. */

/* Moved from rb.css, rules unchanged (E0) */
/* Today's member list (launch.json directory.v2 off) */
.member-list{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:14px}
@media (min-width:720px){.member-list{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1080px){.member-list{grid-template-columns:repeat(3,1fr)}}
.member-card a{display:grid;grid-template-columns:72px 1fr;gap:16px;padding:20px;background:var(--white);border-radius:20px;text-decoration:none;color:var(--plum);height:100%}
.member-card a:hover{outline:2px solid var(--plum-2);outline-offset:0}
.member-card h3{font-size:20px}
.member-card p{margin-top:4px;font-size:16px;color:var(--plum-2)}
.member-card .meta{font-size:14px;margin-top:8px}
/* Companies or People view (9 Nov 2026): each card carries both; the list's data-view picks one. */
.member-list:not([data-view="people"]) .v-pe,.member-list[data-view="people"] .v-co{display:none !important}
.member-card .co-line{font-weight:600;color:var(--plum);margin-top:2px}
.dir-view{margin:32px 0 24px}
/* Profile head, also on /ask/<slug>/ and the review preview. The photo keeps its tint (.logo-box.photo came later in rb.css). */
.profile-head{display:grid;gap:24px;align-items:center}
@media (min-width:720px){.profile-head{grid-template-columns:128px 1fr}}
.profile-head .logo-box{width:128px;height:128px;border-radius:24px;background:var(--white);border:2px solid var(--tint)}
.profile-head h1{font-size:clamp(36px,4.6vw,64px)}
.profile-head .lede{margin-top:10px;color:var(--plum-2);font-size:22px}
.profile-head .logo-box.mono{font-size:44px;background:var(--tint)}
.profile-media{display:flex;gap:14px}
.profile-head.two{grid-template-columns:none}
@media (min-width:720px){.profile-head.two{grid-template-columns:270px 1fr}}
.profile-head .logo-box.photo{border-radius:50%;border-color:var(--tint);background:var(--tint)}
/* Proof on hand-written profiles */
.profile-ratings{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:8px;font-size:19px}
.profile-note{margin-top:10px;font-size:15px;color:var(--plum-2);max-width:62ch}
.profile-quote{margin:16px 0 0;padding:18px 22px;background:var(--white);border-radius:16px;border-left:4px solid var(--tint);max-width:62ch}
.profile-quote blockquote{margin:0;font-size:19px;line-height:1.5}
.profile-quote blockquote p{margin:0}
.profile-quote figcaption{margin-top:8px;font-size:15px;color:var(--plum-2)}
/* Member badge on a profile page */
.badge-section{max-width:44em;padding:24px;background:var(--white);border-radius:20px}
.badge-section>h2{margin-bottom:8px}
.badge-section p{color:var(--plum-2)}
.badge-preview{margin-top:16px}
.badge-preview img{display:block;max-width:100%;height:auto}
.badge-actions{margin-top:12px}
.badge-actions:has(button[hidden]){display:none}
/* /directory/review/ */
.review-preview{margin-top:32px}
.review-frame{margin-top:14px;padding:clamp(20px,3vw,40px);border:2px dashed var(--plum-2);border-radius:24px;background:var(--blush)}
.review-frame .preview-name{font-size:clamp(32px,4vw,56px);line-height:1;letter-spacing:-0.03em;font-weight:800}
.review-frame .profile-section h4{margin:0;font-size:clamp(24px,3vw,32px);line-height:1.1;letter-spacing:-0.02em;font-weight:750}
.review-frame .profile-section + .profile-section{margin-top:24px}
.review-frame .profile-body{margin-top:28px}
.review .join-page{margin-top:32px}
.review .dir-empty .btn{margin-left:6px}

/* Nothing wider than the phone (change 1): a long unbroken name shrinks and breaks */
.member-list>li,.member-card a>div,.profile-head>*,.dir-search>*{min-width:0}
.member-card h3,.member-card p,.profile-head h1,.profile-head .lede,.crumbs li,.profile-visit .btn{overflow-wrap:anywhere}

/* v2 (launch.json directory.v2): people first */
:root{--line:#EEDDEB;--line-strong:#9E89A2;--soft:#E9EBFF;--soft-ink:#2A3AC9;--hl:#FFDF94;--ring:rgb(43 18 64/.13)}
/* Icons are CSS masks on ::before, so no page carries an SVG sprite. */
.dir-q::before,.fl::before,.x::before,.where::before,.sh::before,.more summary::before{content:"";flex:none;width:20px;height:20px;background:currentColor;-webkit-mask:var(--i) center/contain no-repeat;mask:var(--i) center/contain no-repeat}
.sh{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8M16 6l-4-4-4 4M12 2v13'/%3E%3C/svg%3E")}
.more summary{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Ccircle cx='5' cy='12' r='2'/%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3Ccircle cx='19' cy='12' r='2'/%3E%3C/svg%3E")}
.dir-q{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E")}
.fl{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 4h-7M10 4H3M21 12h-9M8 12H3M21 20h-5M12 20H3M14 2v4M8 10v4M16 18v4'/%3E%3C/svg%3E")}
.x{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E")}
.where{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 5-5.5 10.2-7.4 11.8a1 1 0 0 1-1.2 0C9.5 20.2 4 15 4 10a8 8 0 0 1 16 0'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E")}

/* Media (15 Nov 2026): a person's photo is a circle. A logo always sits whole on a white tile with a hairline ring
   and padding, so wide, dark or full-bleed marks all read. With neither, the business's initials on a brand tile. */
.av{--s:56px;position:relative;display:inline-grid;place-items:center;flex:none;width:var(--s);height:var(--s);border-radius:50%;overflow:hidden;background:var(--soft);color:var(--soft-ink);font:750 calc(var(--s)*.34)/1 var(--font);letter-spacing:-.02em;outline:1px solid var(--ring);outline-offset:-1px}
.av img{width:100%;height:100%;object-fit:cover}
.av.biz,.m1,.m2,.m3,.m4,.m5,.m6{border-radius:calc(var(--s)*.26)}
.av.biz{padding:calc(var(--s)*.13);background:var(--white)}
.av.biz img{object-fit:contain;border-radius:calc(var(--s)*.1)}
.m1{background:var(--plum);color:var(--petal)} .m2{background:var(--cobalt);color:var(--white)} .m3{background:#0B7A5F;color:var(--white)}
.m4{background:var(--marigold);color:var(--plum)} .m5{background:var(--pink);color:var(--plum)} .m6{background:var(--tint);color:var(--plum)}
.face{position:relative;display:grid;width:fit-content;height:fit-content}
.face .logo{position:absolute;right:-4px;bottom:-4px;display:grid;width:26px;height:26px;padding:2px;border-radius:8px;background:var(--white);box-shadow:inset 0 0 0 1px var(--ring),0 0 0 2px var(--white)}
.face .logo img{width:100%;height:100%;object-fit:contain;border-radius:5px}

/* The index: the head, a sticky bar (search, city chips), the cards */
.dir-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 32px}
.dir-head>div{min-width:0}
.dir-head h1{font-size:clamp(34px,4.4vw,64px);text-wrap:balance;overflow-wrap:anywhere}
.dir-head .lede{margin-top:8px;font-size:clamp(17px,1.5vw,21px);color:var(--plum-2)}
.dir-bar{position:sticky;top:0;z-index:5;margin:16px calc(-1 * var(--gut)) 0;padding:10px var(--gut) 8px;background:var(--blush)}
.dir-q{position:relative;display:flex;align-items:center;max-width:640px;color:var(--plum-2)}
.dir-q::before{position:absolute;left:16px;pointer-events:none}
.dir-q input{min-height:48px;padding-left:46px;border-radius:999px;border-color:var(--line-strong)}
.chip-row{display:flex;align-items:center;gap:8px;margin:4px calc(-1*var(--gut)) -6px;padding:6px var(--gut);overflow-x:auto;scrollbar-width:none}
.chip-row::-webkit-scrollbar{display:none}
@media (min-width:900px){.chip-row{flex-wrap:wrap;overflow:visible}}
.chip{flex:none;display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 16px;border:1px solid var(--line-strong);border-radius:999px;background:var(--white);color:var(--plum);font:600 15px/1 var(--font);cursor:pointer}
.chip:hover{background:var(--tint)}
.chip[aria-pressed="true"]{background:var(--plum);border-color:var(--plum);color:var(--blush)}
/* "More cities": from 900 px only the eight busiest show until it's ticked or a hidden one is chosen. */
.more-t,.more-l{display:none}
.more-l span+span,.more-t:checked+.more-l span{display:none}
.more-t:checked+.more-l span+span{display:inline}
@media (min-width:900px){.more-t{display:block;position:absolute;width:1px;height:1px;opacity:0}.more-l{display:inline-flex;border-style:dashed}
.xc{display:none}.more-t:checked~.xc,.chip-row:has(.xc[aria-pressed="true"]) .xc{display:inline-flex}
.chip-row:has(.xc[aria-pressed="true"]) .more-l{display:none}.more-t:focus-visible+.more-l{outline:3px solid var(--cobalt);outline-offset:3px}
.dir-bar:has(.more-t:checked){position:static}}
.fl::before{width:18px;height:18px}
.on{width:8px;height:8px;border-radius:50%;background:var(--cobalt)}
.dir-status{margin-top:10px;font-size:15px;color:var(--plum-2);min-height:1.4em;overflow-wrap:anywhere}
.pgrid{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr))}
.pgrid>li{min-width:0}
.pgrid>.wide{grid-column:1 / -1}
/* The card: who (media, name, business), what (two lines), then where and what they do on a footer that sits at the
   foot, so cards in a row are one height and their footers line up. The whole card is the link. */
.pcard{display:flex;flex-direction:column;height:100%;padding:18px 18px 14px;background:var(--white);border:1px solid var(--line);border-radius:20px;color:var(--plum);text-decoration:none}
.pcard:hover{border-color:var(--line-strong);box-shadow:0 14px 28px -18px rgb(43 18 64/.45)}
.pcard:focus-visible{outline-offset:2px;border-radius:20px}
@media (prefers-reduced-motion:no-preference){.pcard{transition:box-shadow .2s,border-color .2s,translate .2s}.pcard:hover{translate:0 -2px}}
.pc-top{display:flex;align-items:center;gap:14px;min-width:0}
.pc-top>div{min-width:0}
.pcard h3{font-size:18px;line-height:1.25;letter-spacing:-.015em;overflow-wrap:anywhere}
.pcard .role{margin-top:2px;font-size:15px;font-weight:550;color:var(--plum-2);overflow-wrap:anywhere}
.pcard .sum{margin:14px 0 16px;font-size:15px;line-height:1.5;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pc-foot{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin-top:auto;padding-top:12px;border-top:1px solid var(--line);font-size:14px;color:var(--plum-2)}
.pc-foot>*{min-width:0;overflow-wrap:anywhere}
.pc-foot .where{margin:0}
.kind{margin-left:auto;padding:3px 10px;border-radius:999px;background:var(--blush);color:var(--plum);font-size:13px;font-weight:600}
.where{display:flex;align-items:center;gap:4px;margin-top:8px;font-size:14px;color:var(--plum-2);overflow-wrap:anywhere}
.where::before{width:16px;height:16px}
.tile{display:flex;flex-direction:column;justify-content:center;gap:12px;height:100%;padding:20px;border:2px dashed var(--line-strong);border-radius:20px;background:var(--tint);font-size:16px;line-height:1.45}
.band{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 20px;padding:16px 20px;border-radius:20px;background:var(--plum);color:var(--blush)}
.band p{font-size:16px;line-height:1.4;max-width:40em}
.band b{display:block;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--petal)}
.band a:not(.btn){color:var(--blush)}
.band .btn{border-color:var(--blush);color:var(--blush)}
.band .btn:hover{background:rgba(255,255,255,.12)}
.acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.acts .btn{min-width:0;overflow-wrap:anywhere}
.dir-empty .small{margin-top:14px}
@media (max-width:719px){.wide-only{display:none}.prof-acts>a{flex:1 1 auto}.prof-acts>[data-sheet]{flex-basis:100%}.sh,.more summary{width:48px;padding:0}.prof-acts .lbl{position:absolute;clip-path:inset(50%)}}

/* The profile: the face, who, what, where, then the actions */
.prof-head{display:grid;grid-template-columns:minmax(0,1fr);gap:20px;align-items:start;margin-top:12px}
@media (min-width:720px){.prof-head{grid-template-columns:128px minmax(0,1fr);gap:36px}}
.prof-head>div{min-width:0}
.av-xl{--s:88px}
@media (min-width:720px){.av-xl{--s:128px}.prof-head>.av,.prof-head>.face{margin-top:6px}}
.prof-head .face .logo{right:-6px;bottom:-6px;width:calc(var(--s,88px)*.4);height:calc(var(--s,88px)*.4);padding:calc(var(--s,88px)*.05);border-radius:calc(var(--s,88px)*.12);box-shadow:inset 0 0 0 1px var(--ring),0 0 0 4px var(--blush)}
.prof-head .face{--s:88px}
@media (min-width:720px){.prof-head .face{--s:128px}}
.prof-head h1,.prof-head .preview-name{font-size:clamp(34px,4.4vw,60px);line-height:1.02;letter-spacing:-.03em;text-wrap:balance;overflow-wrap:anywhere}
.prof-role{margin-top:8px;font-size:18px;font-weight:650;overflow-wrap:anywhere}
.prof-sum{margin-top:10px;max-width:38em;font-size:clamp(18px,1.6vw,21px);line-height:1.45;color:var(--plum-2);overflow-wrap:anywhere}
.prof-head .where,.since{margin-top:10px;font-size:15px;color:var(--plum-2)}
.prof-acts{position:relative;display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.prof-acts .btn{min-width:0;min-height:48px;overflow-wrap:anywhere;line-height:1.2}
.more summary{list-style:none}
.more summary::-webkit-details-marker{display:none}
.more .menu{position:absolute;z-index:6;left:0;top:calc(100% + 8px);width:min(340px,100%);padding:6px;background:var(--white);border:1px solid var(--line);border-radius:16px;box-shadow:0 12px 32px rgb(23 8 35/.16)}
.more .menu a{display:block;padding:12px;border-radius:10px;color:var(--plum);overflow-wrap:anywhere}
.more .menu a:hover{background:var(--tint)}
@media (min-width:720px){.prof-acts{width:fit-content}.more .menu{left:auto;right:0}}
.toast{position:fixed;z-index:30;left:50%;bottom:calc(20px + env(safe-area-inset-bottom));translate:-50% 0;max-width:calc(100% - 32px);padding:12px 20px;border-radius:999px;background:var(--plum);color:var(--blush);font-weight:650;pointer-events:none}
.toast:empty{opacity:0}
.prof-head~.profile-body dd a{padding:2px 0}
/* "More founders" and, in Bali, the chapter band */
.near,.profile-body .band{margin-top:28px}
.near h2{font-size:21px}
.near ul{display:grid;gap:8px;margin:10px 0 0;padding:0;list-style:none}
.near li a{display:flex;align-items:center;gap:12px;padding:10px 12px;background:var(--white);border:1px solid var(--line);border-radius:16px;color:var(--plum);text-decoration:none}
.near span{min-width:0}
.near b,.near small{display:block;overflow-wrap:anywhere}
.near small{font-size:14px;color:var(--plum-2)}
.near .all{display:inline-block;margin-top:10px}
.av-sm{--s:44px}
/* The member's own words (launch.json directory.extras) */
.prof-proof{margin-top:14px;max-width:34em;font-size:18px;font-weight:600;line-height:1.4;overflow-wrap:anywhere}
.prof-proof mark{background:linear-gradient(transparent 58%,var(--hl) 0);color:inherit}
.prof-proof small{display:block;margin-top:2px;font-size:14px;font-weight:400;color:var(--plum-2)}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 0;padding:0;list-style:none}
.tags li{min-width:0;padding:8px 12px;border-radius:999px;background:var(--tint);font-size:15px;font-weight:600;overflow-wrap:anywhere}
/* The ask sheet: the steps, then the page's own join form without its heading and list */
.steps{counter-reset:s;display:grid;gap:10px;margin:14px 0 0;padding:0;list-style:none}
.steps li{counter-increment:s;display:grid;grid-template-columns:28px minmax(0,1fr);gap:10px;font-size:15px;line-height:1.45}
.steps li::before{content:counter(s);display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--soft);color:var(--soft-ink);font:700 14px/1 var(--font)}
.sheet .join-inline{margin:14px 0 0;padding:0;border:0}
.sheet .head,.sheet .join-gets-block{display:none}
.alt{margin-top:12px;font-size:15px}

/* Sheets: a bottom sheet on phones (its background draws the grab bar), a dialog from 720px. Only the body scrolls,
   so a click on the sheet itself is on its backdrop. */
.sheet{position:fixed;inset:auto 0 0 0;width:100%;max-width:none;max-height:92dvh;margin:0;padding:0;border:0;border-radius:24px 24px 0 0;background:linear-gradient(var(--line-strong),var(--line-strong)) 50% 8px/40px 5px no-repeat var(--white);color:var(--plum);overflow:hidden}
.sheet[open]{display:flex;flex-direction:column}
.sheet::backdrop{background:rgb(23 8 35 / .45)}
.sheet-head{display:flex;align-items:center;gap:12px;padding:22px 12px 0 20px}
.sheet-head h2{flex:1;min-width:0;font-size:22px;line-height:1.2;letter-spacing:-.01em;overflow-wrap:anywhere}
.x{display:grid;place-items:center;flex:none;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:var(--blush);color:var(--plum);cursor:pointer}
.sheet-body{flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain;padding:8px 20px 12px}
.wset{display:flex;flex-wrap:wrap;gap:8px;min-width:0;margin:8px 0 0;padding:0;border:0}
.wset legend{margin-bottom:10px;padding:0;font-size:15px;font-weight:600}
.sheet-foot{display:grid;gap:8px;padding:12px 20px calc(16px + env(safe-area-inset-bottom));border-top:1px solid var(--line)}
.sheet-foot .btn{width:100%;min-height:48px}
@media (min-width:720px){.sheet{inset:50% auto auto 50%;translate:-50% -50%;width:min(520px,calc(100% - 48px));max-height:min(760px,calc(100dvh - 48px));border-radius:24px;background:var(--white)}
.sheet-head{padding-top:12px}}
@media (prefers-reduced-motion:no-preference){.sheet[open]{animation:dir-up .25s cubic-bezier(.22,.8,.3,1)}
.sheet[open]::backdrop{animation:dir-fade .2s ease-out}}
@media (prefers-reduced-motion:no-preference) and (min-width:720px){.sheet[open]{animation-name:dir-fade}}
@keyframes dir-up{from{translate:0 100%}}
@keyframes dir-fade{from{opacity:0}}