/* Stellar sub-pages (about, our story, get involved, donate). Built on /_home/rework.css: same tokens, type, buttons, nav and footer. Inter at 400-500, near-black and greys, hairlines, green only for "included" and focus. */ /* current page in the nav: the same quiet grey the dropdown buttons use when open */ .nav-link[aria-current=page]{color:var(--ink);background:var(--soft-2)} .dd-item[aria-current=page]{background:var(--soft)} @media (max-width:899px){.mm-link[aria-current=page]{color:var(--ink)}.mm-link[aria-current=page]::after{content:"";width:6px;height:6px;border-radius:var(--radius-pill);background:var(--ink)}} /* page head: centred, like the home hero but one step smaller */ .ph{padding:104px 0 88px;text-align:center} .ph .eyebrow{justify-content:center} .ph h1{max-width:920px;margin:18px auto 0;font:400 clamp(40px,5.4vw,72px)/1.06 var(--font);letter-spacing:-.04em;color:var(--ink)} .ph .lead{max-width:660px;margin:26px auto 0;font-size:19px} .ph-ctas{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:36px} .ph-ctas .btn{height:52px;padding:0 26px;font-size:16.5px} .ph-note{margin-top:22px;font:400 14.5px/1.5 var(--font);color:var(--muted)} /* a section that starts under a single hairline, like the home press, partners and closing sections */ .ruled{padding-top:56px;border-top:1px solid var(--line)} .sec.tight{padding-top:0} .sec-head .eyebrow+.h2{margin-top:14px} .sec-head.center .eyebrow{justify-content:center} /* split section head: title on the left, text on the right (home partners head) */ .split-head{display:grid;grid-template-columns:.9fr 1.1fr;gap:64px;align-items:end} .split-head .h2{margin-top:14px} .split-head .lead{margin:0;max-width:560px} .split-head .lead+.lead{margin-top:14px} /* plain arrow link, the home "Try it in the app" link */ .go{display:inline-flex;align-items:center;gap:6px;font:500 15px/1.3 var(--font);color:var(--ink);white-space:nowrap} .go svg{width:16px;height:16px;flex:none;transition:translate var(--dur-1) var(--ease)} a:hover .go svg,.go:hover svg{translate:3px 0} a:hover .go,.go:hover{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px} .go.ext svg{width:14px;height:14px} a:hover .go.ext svg,.go.ext:hover svg{translate:2px -2px} /* closing section without buttons (home final3 with type only) */ .final3 h2{max-width:720px} @media (max-width:1024px){ .split-head{grid-template-columns:1fr;gap:20px} } @media (max-width:720px){ .ph{padding:56px 0 56px} .ph h1{font-size:clamp(34px,9.6vw,44px);line-height:1.1} .ph .lead{font-size:17px;line-height:1.65;margin-top:22px} .ph-ctas{margin-top:28px} .ph-ctas .btn{flex:1 1 auto;padding:0 18px;font-size:15px} .ruled{padding-top:40px} } /* ================= about ================= */ /* Layout fix (owner 2026-10-23 00:25 "out of order and broken"): the mission head and the founders' letter share one paper band, the team sits on white, the closing on paper, so the page reads paper / white / paper like the home page. Team cards use subgrid rows so photo, name, role, school and email line up across every row. */ /* page head + letter: one band, the head centred, the letter in two balanced columns below it */ .about-top .ph-head{max-width:920px;margin:0 auto} .about-top .letter{margin-top:88px;text-align:left} /* founders' letter: a sticky statement on the left whose top lines up with the letter's first line */ .letter{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:64px;align-items:start} .letter-side{position:sticky;top:112px;padding-top:41px} .letter-h{margin-top:16px;font:400 clamp(26px,2.5vw,34px)/1.25 var(--font);letter-spacing:-.025em;color:var(--ink);max-width:460px} .letter-links{display:flex;flex-wrap:wrap;gap:12px 28px;margin-top:28px} .letter-body{min-width:0} .letter-body.sx-sheet-pop{padding:40px 44px} .letter-body p{font:400 17px/1.75 var(--font);color:var(--text);max-width:640px} .letter-body p+p{margin-top:20px} .letter-body .letter-first{font:400 22px/1.5 var(--font);letter-spacing:-.015em;color:var(--ink)} .sign{display:flex;flex-direction:column;gap:4px;margin-top:36px!important;padding-top:22px;border-top:1px solid var(--line)} .sign b{font:500 16px/1.3 var(--font);color:var(--ink)} .sign span{font:400 14.5px/1.3 var(--font);color:var(--muted)} /* team groups: a hairline header row, then people */ #people .sec-head{margin-bottom:8px} .tgroup{margin-top:80px} .tg-head{display:grid;grid-template-columns:auto 1fr auto;gap:24px;align-items:baseline;padding-bottom:18px;border-bottom:1px solid var(--line)} .tg-head h3{font:500 22px/1.25 var(--font);letter-spacing:-.02em;color:var(--ink)} .tg-head p{font:400 15px/1.5 var(--font);color:var(--muted)} .tg-n{font:400 14px/1 var(--font);color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap} .people{list-style:none;margin:0;padding:0;display:grid} .pp{min-width:0} .pp h4{font:500 16px/1.3 var(--font);letter-spacing:-.01em;color:var(--ink)} .pp-role{font:400 14.5px/1.45 var(--font);color:var(--text)} .pp-sch{font:400 13.5px/1.45 var(--font);color:var(--muted)} .pp-ph{display:block;object-fit:cover;object-position:50% 30%;background:var(--soft-2)} .pp-ini{display:grid;place-items:center;font:500 15px/1 var(--font);color:var(--text);letter-spacing:.02em} .pp-links{display:flex;gap:6px} .pp-links a{width:32px;height:32px;display:grid;place-items:center;border-radius:var(--radius-pill);color:var(--muted);border:1px solid var(--line-2);transition:color var(--dur-1) var(--ease),border-color var(--dur-1) var(--ease),background-color var(--dur-1) var(--ease),scale var(--dur-1) var(--ease)} .pp-links a:hover{color:var(--ink);border-color:var(--muted);background:var(--soft)} .pp-links a:active{scale:.96;transition-duration:calc(var(--dur-1) / 2)} .pp-links a:focus-visible{border-radius:var(--radius-pill)} .pp-links svg{width:15px;height:15px} /* core team and upper management: portrait cards on a grid of half-columns (--cols cards per row), each card spans five subgrid rows (photo, name, role, school, links) so every line sits at the same height across the row. An incomplete last row is centred by starting its first card one half-column in. */ .cards{--cols:4;grid-template-columns:repeat(calc(var(--cols) * 2),minmax(0,1fr));column-gap:24px;row-gap:48px;margin-top:36px} .cards .pp{grid-column:span 2;grid-row:span 5;display:grid;grid-template-rows:subgrid;row-gap:0} .cards .pp-t{display:contents} .cards .pp-ph{width:100%;height:auto;aspect-ratio:1;border-radius:var(--radius-m);border:1px solid var(--line)} .cards h4{margin-top:18px} .cards .pp-role{margin-top:4px} .cards .pp-sch{margin-top:3px} .cards .pp-links{margin-top:14px;align-self:end} .core h4{font-size:17px} /* 11 people in rows of 4: the last three are centred under the row above */ .mgmt .pp:nth-child(9){grid-column:2/span 2} /* volunteers and former volunteers: a directory that fills down each column, rows aligned across columns (--r3 / --r2 = rows needed at three / two columns, set on the list) */ .list{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(var(--r3),auto);grid-auto-flow:column;column-gap:32px;margin-top:4px} .list .pp{display:flex;gap:14px;align-items:flex-start;padding:18px 0;border-bottom:1px dashed var(--rule-dash)} .list .pp-ph{flex:none;width:48px;height:48px;border-radius:var(--radius-pill)} .list .pp-t{min-width:0;padding-top:2px} .list h4{font-size:15.5px} .list .pp-role{margin-top:3px;font-size:14px} .list .pp-sch{margin-top:2px;font-size:13px} @media (max-width:1100px){ .letter{grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:48px} .letter-body.sx-sheet-pop{padding:36px} .letter-side{padding-top:37px} } @media (max-width:960px){ .about-top .letter{margin-top:64px} .letter{grid-template-columns:1fr;gap:32px} .letter-side{position:static;padding-top:0;max-width:640px} .letter-h{max-width:none} .tg-head{grid-template-columns:1fr auto;gap:6px 16px} .tg-head p{grid-column:1/-1;grid-row:2} .list{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(var(--r2),auto)} } @media (max-width:720px){ .about-top .letter{margin-top:48px} .letter-body.sx-sheet-pop{padding:24px} .letter-body .letter-first{font-size:20px} .letter-body p{font-size:16px} .tgroup{margin-top:56px} .core{--cols:2;column-gap:16px;row-gap:32px} .core h4{font-size:16px} .list{grid-template-columns:1fr;grid-template-rows:none;grid-auto-flow:row} } /* narrow screens: upper management becomes a list of horizontal cards (photo left, text right), so no card is left alone */ @media (max-width:720px){ .mgmt{grid-template-columns:1fr;row-gap:0;margin-top:8px} .mgmt .pp,.mgmt .pp:nth-child(9){grid-column:auto;grid-row:auto;display:grid;grid-template-columns:72px minmax(0,1fr);grid-template-rows:none;column-gap:16px;align-items:start;padding:18px 0;border-bottom:1px dashed var(--rule-dash)} .mgmt .pp-t{display:block;min-width:0} .mgmt .pp-ph{width:72px;height:72px} .mgmt h4{margin-top:2px} .mgmt .pp-links{margin-top:10px} } /* green hint (owner 2026-10-21): the home page's hand-drawn swash under one headline word */ .gsw{position:relative;display:inline-block;padding-bottom:.1em} .gsw::after{content:"";position:absolute;inset:auto 0 0;height:.2em;background:var(--green);pointer-events:none;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'%3E%3Cpath d='M3 10.5C42 5.5 98 3.2 197 5.6' fill='none' stroke='black' stroke-width='3.4' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center/100% 100% no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'%3E%3Cpath d='M3 10.5C42 5.5 98 3.2 197 5.6' fill='none' stroke='black' stroke-width='3.4' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center/100% 100% no-repeat} /* The shared motion preference also covers page-specific links and controls. */ @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} .go svg,.pp-links a,.ytabs a,.ways a,.col,.roles a,.freq-b,.ask input{transition:none!important} .pp-links a:active{scale:none!important} a:hover .go svg,.go:hover svg,a:hover .go.ext svg,.go.ext:hover svg{translate:none!important} .ask[open]{animation:none} } /* Current home proportions for marketing page heads. */ .ph.sx-band h1{font-size:clamp(40px,5.4vw,76px)} .sx-band .split-head,.sx-band .sec-head,.sx-band .letter{min-width:0} @media(max-width:720px){.ph.sx-band h1{font-size:clamp(34px,9.6vw,44px)}} /* swarm R15/R27/R28 home-marketing: the "Read our story" / "Meet the team" links are at least 27px tall across all viewports. Padding with an equal negative margin grows the tap area without moving the layout, and :focus-visible uses --radius-s (6px). */ .go{padding-block:4px;margin-block:-4px;border-radius:var(--radius-s)} .go:focus-visible{border-radius:var(--radius-s)} /* swarm R29 home-marketing (about): headings and leads break into balanced lines, so no word sits alone on the last line ("next" in the closing title at 1440, "learners." in the letter title at 768). Scoped to /about/ only (.about-top is the first band of this page, the closing band follows it). */ .about-top h1,.about-top .lead,.letter-h,#people .sec-head .h2,#people .sec-head .lead,.about-top~.final-sec h2{text-wrap:balance} /* tablets (721 to 960px): Core Team in two 336px columns (2x2 grid) so founders' cards stay prominent, senior, and uncompressed instead of being squeezed into 158px columns where roles wrapped across 5 lines. Upper management in rows of three portraits instead of four 157px columns where titles broke into three lines. The last two of eleven are centred, like the last three at four columns. */ @media (min-width:721px) and (max-width:960px){ .core{--cols:2;column-gap:32px} .mgmt{--cols:3} .mgmt .pp:nth-child(9){grid-column:span 2} .mgmt .pp:nth-child(10){grid-column:2/span 2} } /* phones: the volunteer directories (59 rows in one column) get slightly tighter rows and 40px avatars */ @media (max-width:720px){ .list .pp{gap:12px;padding:14px 0} .list .pp-ph{width:40px;height:40px} .list .pp-ini{font-size:13.5px} .list .pp-t{padding-top:0} } /* swarm R30 home-marketing (about): the portrait cards' subgrid rows no longer absorb the parent's 48px row-gap. Chrome spread that gap into every inner row (name, role, school), which left an empty band of about 25px under each school line before the email button. The space between card rows now comes from a top margin on the photo, and the list starts the same 36px under its header as before. */ #people .cards{--cg:48px;row-gap:0;margin-top:calc(36px - var(--cg))} #people .cards .pp-ph{margin-top:var(--cg)} @media (max-width:720px){ #people .core{--cg:32px} #people .mgmt{--cg:0px;margin-top:8px} } /* swarm R31 home-marketing (about): comfortable tap targets without moving the layout. Team email and LinkedIn buttons grow from 32px to 36px circles (8px apart) and each takes an invisible 44px hit area (the inset counts from inside the 1px border), so neighbouring areas meet but never overlap. "Read our story" and "Meet the team" keep their tight focus ring and get a 44px tall hit area from a pseudo element. */ #people .pp-links{gap:8px} #people .pp-links a{position:relative;width:44px;height:44px} #people .pp-links a::before{display:none} #people .pp-links svg{width:18px;height:18px} .letter-links .go{position:relative} .letter-links .go::after{content:"";position:absolute;inset:-8px -6px} @media (max-width:720px){#people .mgmt .pp-links{margin-top:8px}} /* swarm R32 home-marketing (about), owner R29 questions on phones: 1. Upper Management rows: the email button sits at the end of the name line (a trailing list action) instead of on its own row, which saves about 44px per person. Negative block margins keep the 36px button from growing the line. 2. Former Volunteers: 49 rows were about 4,000px of scrolling. people-more.js clips the list to 8 rows and shows an outlined "Show all 49 former volunteers" pill (progressive disclosure). Without the script nothing is hidden. */ .btn.pp-more{display:none} @media (max-width:720px){ #people .mgmt .pp-t{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:12px;align-items:start} #people .mgmt .pp-t>p{grid-column:1/-1} #people .mgmt .pp-links{grid-column:2;grid-row:1;margin:-6px 0 -8px} #former-list.is-clipped>.pp:nth-child(n+9){display:none} .btn.pp-more:not([hidden]){display:flex;width:100%;margin-top:24px} } /* swarm R33 home-marketing (about): portrait cards no longer leave a blank line under one-line roles. The five-row subgrid sized every role row to the tallest role in the row (Derek Li's two-line title), so "Co-Founder & CEO" or "VP of Engineering" sat a full empty line above the school. Cards now share two subgrid rows (photo, text), the text block flows naturally (name, role, school stacked) and the contact buttons are pinned to the bottom of the text row, so photos, names and buttons still line up across each row (team-card pattern: stacked meta, actions pinned to the card foot). Upper Management on phones keeps its list rows. */ #people .core .pp{grid-row:span 2} #people .core .pp-t{display:flex;flex-direction:column;min-width:0} #people .core .pp-links{margin-top:auto;padding-top:14px;align-self:flex-start} @media (min-width:721px){ #people .mgmt .pp{grid-row:span 2} #people .mgmt .pp-t{display:flex;flex-direction:column;min-width:0} #people .mgmt .pp-links{margin-top:auto;padding-top:14px;align-self:flex-start} } /* no single word or "CA" alone on the last line of a role, school or the closing line ("us." on phones) */ #people .pp-role,#people .pp-sch,.about-top~.final-sec .final3-side p{text-wrap:pretty} /* swarm R34 home-marketing (about): touch targets and scroll offsets. 1. The hero letter links ("Read our story" and "Meet the team") now use min-height 44px with inline-flex alignment, giving them a full 44px tap target without extra pseudo-margins. 2. Team email and LinkedIn buttons on touch viewports (phones and coarse-pointer devices) expand from 36px to 44px circles with 18px icons, satisfying the 44px touch target ergonomics reference from Apple HIG and Material 3. 3. The #people section takes scroll-margin-top 80px so jumping to "Meet the team" leaves clean breathing room below the sticky header. */ #people{scroll-margin-top:80px} .letter-links .go{min-height:44px;display:inline-flex;align-items:center;margin-block:0} .letter-links .go::after{display:none} @media (max-width:720px), (pointer:coarse){ #people .pp-links a{width:44px;height:44px} #people .pp-links a::before{display:none} #people .pp-links svg{width:18px;height:18px} #people .mgmt .pp-links{margin:-8px 0 -8px} } /* swarm R36 home-marketing (about): reading copy stability, anchor alignment, and hit target precision. 1. The founders letter container (.letter-body.sx-sheet-pop) is static reading text. We ground it so it does not translate -2px or shift shadows on hover when a user moves the cursor across the copy. 2. The #people section resets scroll-margin-top to 0 because :where(html) in _style/footer.css already applies scroll-padding-top: 88px globally. Removing the duplicate 80px scroll margin prevents an excessive 168px offset that left 80px of blank whitespace above the section when following the "Meet the team" anchor. 3. Hit target pseudo-element inset on desktop team contact links (#people .pp-links a::before) is set to -4px instead of -5px. With 36px buttons and an 8px column gap, a 4px expansion creates exactly 44px hit circles that meet edge-to-edge across the 8px gap without a 2px collision overlap. */ .letter-body.sx-sheet-pop{transition:none} .letter-body.sx-sheet-pop:hover{translate:none;box-shadow:var(--shadow-raised)} #people{scroll-margin-top:0} /* swarm R38 home-marketing (about), idle audit 2026-10-26 06:01 items 2, 3 and 8. 1. Volunteer directories fill rows left to right (grid-auto-flow: row) at every width. Filling down columns split 10 people 4 / 4 / 2 at 1440, left a half-empty third column, and read the seniority order (founders and VPs first) down instead of across. Rows still line up across columns because each row is one grid row. 2. Former Volunteers collapses on every width, not only on phones (progressive disclosure): 9 people (three rows) at three columns, 8 (four rows) at two columns and on phones, then the same outlined "Show all" pill. Row order means opening the list only adds rows below, nothing that was visible moves. 3. Phones: Upper Management rows use the same round thumbnail as the volunteer rows (56px, one step larger because these are team leads), so the two list patterns under Core Team share one shape. */ .list,#former-list{grid-template-rows:none;grid-auto-flow:row} #former-list.is-clipped>.pp:nth-child(n+10){display:none} .btn.pp-more:not([hidden]){display:flex;width:max-content;margin:28px auto 0} @media (max-width:960px){#former-list.is-clipped>.pp:nth-child(9){display:none}} @media (max-width:720px){ .btn.pp-more:not([hidden]){width:100%;margin-top:24px} #people .mgmt .pp,#people .mgmt .pp:nth-child(9){grid-template-columns:56px minmax(0,1fr)} #people .mgmt .pp-ph{width:56px;height:56px;border-radius:var(--radius-pill)} } /* swarm R39 home-marketing (about) 1. Upper Management phone list rows: reset .pp-links margin to 0 so the 44px email button aligns flush with the top of the 56px thumbnail avatar and eliminates the 4px collision overlap onto the role text below. */ @media (max-width:720px){ #people .mgmt .pp-links{margin:0} } /* swarm R40 home-marketing (about): deep linking anchor alignment, target highlight, and concentric focus ring */ .pp[id]{scroll-margin-top:96px} .cards .pp:target{outline:2px solid var(--green);outline-offset:4px;border-radius:var(--radius-m)} .list .pp:target{outline:2px solid var(--green);outline-offset:4px;border-radius:var(--radius-s)} #people .pp-links a:focus-visible{outline-offset:2px;border-radius:var(--radius-pill)} /* swarm R41 home-marketing (about): Upper Management phone rows lost the blank band under each name. The 44px email button shared the name's grid row, so the name line grew to 44px and left a 25px gap above the role. The button now has its own trailing column spanning the name, role and school rows (list row with a trailing action), so name, role and school stack tightly and nothing runs under the button. */ @media (max-width:720px){ #people .mgmt .pp-t>p{grid-column:1} #people .mgmt .pp-links{grid-column:2;grid-row:1/span 3;align-self:start} } /* swarm R42 home-marketing (about): after "Show all 49 former volunteers" the pill moves about 2,000px down, so people-more.js moves focus to the first newly shown row. Keyboard users see the same green ring as a deep-linked row. */ #former-list>.pp:focus{outline:none} #former-list>.pp:focus-visible{outline:2px solid var(--green);outline-offset:4px;border-radius:var(--radius-s)} /* swarm R46 home-marketing (about), idle audit 2026-10-26 16:11 items 3 and 6. 1. One rule for short last rows: every portrait grid keeps its last row on the same columns as the rows above, left aligned like the volunteer directories (Ayden, Anderson and Jack at 1440 no longer start half a column in). 2. Tablets (721 to 960px): Core Team uses the Upper Management grid (three columns), so the four founders' photos are the same size as the leads' photos below (about 219px at 768) instead of two zoomed 336px columns. */ @media (min-width:721px){#people .mgmt .pp:nth-child(n){grid-column:span 2}} @media (min-width:721px) and (max-width:960px){ #people .core{--cols:3;column-gap:24px} } /* swarm R49 home-marketing (about): tablets (721 to 960px) showed the Core Team as three portraits plus Derek Li alone on a second row with two empty columns beside him. The four founders and VPs now sit in a 2 x 2 grid of media cards (photo beside the text, contact buttons pinned to the photo's foot), so the group reads as one block. Space between the two rows still comes from the R30 --cg top margin, now on the photo and the text alike. */ @media (min-width:721px) and (max-width:960px){ #people .core{--cols:2;--cg:32px;column-gap:24px} #people .core .pp{grid-row:auto;grid-template-rows:none;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:20px;align-items:stretch} #people .core .pp-t{padding-top:var(--cg)} #people .core h4{margin-top:2px} } /* swarm R50 home-marketing (about) 1. Tablets (721 to 960px): the second row's photos (Warren Li, Derek Li) were stretched to the height of Derek's longer text (160 x 170 at 768, 148 x 191 at 721). Photos stay square and sit at the top of the card. 2. Large phones and small tablets (481 to 720px): Core Team was two portraits per row that grew to 312px at 680. It is now a list of media rows (168px photo beside name, role and school, contact buttons pinned to the photo's foot), the same photo-beside-text pattern as the tablet cards and the Upper Management rows below. */ @media (min-width:721px) and (max-width:960px){ #people .core .pp-ph{align-self:start} } @media (min-width:481px) and (max-width:720px){ #people .core{--cols:1;--cg:24px;column-gap:0;margin-top:calc(32px - var(--cg))} #people .core .pp{grid-row:auto;grid-template-rows:none;grid-template-columns:168px minmax(0,1fr);column-gap:24px;align-items:start} #people .core .pp-t{padding-top:var(--cg);min-height:calc(168px + var(--cg))} #people .core h4{margin-top:4px;font-size:17px} } /* swarm R52 home-marketing (about), idle audit 2026-10-27 02:10 items 2 and 4. 1. Tablets (721 to 960px): the hierarchy was upside down. Core Team were 2 x 2 media cards with 160px photos while Upper Management below were three-column portraits with 219px photos, two card designs on top of each other. Upper Management now uses the Core Team media card (photo beside name, role and school, contact button at the foot of the text) in the same two columns, so both groups read as one directory, founders first, and the section is about 400px shorter. Same values as the R49/R50 Core Team rules. 2. Volunteer directories: people without a photo showed a solid grey disc next to photos, which looked unfinished. Every directory avatar now carries the same 1px hairline edge, and the initials sit on the lightest soft shade in muted ink, a quiet monogram that reads as a deliberate placeholder in light and dark. */ @media (min-width:721px) and (max-width:960px){ #people .mgmt{--cols:2;--cg:32px;column-gap:24px} #people .mgmt .pp,#people .mgmt .pp:nth-child(n){grid-column:span 2;grid-row:auto;grid-template-rows:none;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:20px;align-items:stretch} #people .mgmt .pp-t{padding-top:var(--cg)} #people .mgmt h4{margin-top:2px} #people .mgmt .pp-ph{align-self:start} } #people .list .pp-ph{box-sizing:border-box;border:1px solid var(--line)} #people .list .pp-ini{background:var(--soft);color:var(--muted);font-weight:500} /* swarm R54 home-marketing (about), idle audit 2026-10-27 07:26 item 5. The team email and LinkedIn buttons were bare icons, so a mouse user could not see which address would open. Each button now shows the site's light tooltip (white sheet, hairline, float shadow, 10px corners, Inter 500 13px) above it on hover (after a short 300ms delay, so passing over a row does not flash labels) and at once on keyboard focus. One tooltip only: no title attribute, the aria-labels stay the accessible names. Phones (no hover) skip it. */ .pp-links a[data-tip]{position:relative} .pp-links a[data-tip]::after{content:attr(data-tip);position:absolute;left:50%;bottom:calc(100% + 8px);translate:-50% 4px;z-index:5;white-space:nowrap;padding:6px 10px;border-radius:var(--radius-m);background:var(--sheet);color:var(--ink);border:1px solid var(--line);box-shadow:0 6px 20px -8px rgba(18,22,20,.14),0 1px 2px rgba(18,22,20,.05);font:500 13px/1.4 var(--font);letter-spacing:0;pointer-events:none;opacity:0;visibility:hidden;transition:opacity var(--dur-1) var(--ease),translate var(--dur-1) var(--ease),visibility 0s linear var(--dur-1)} html.dark .pp-links a[data-tip]::after{box-shadow:0 6px 20px -8px rgba(0,0,0,.6),0 1px 2px rgba(0,0,0,.35)} @media (hover:hover){ .pp-links a[data-tip]:hover::after{opacity:1;visibility:visible;translate:-50% 0;transition-delay:300ms,300ms,0s} } .pp-links a[data-tip]:focus-visible::after{opacity:1;visibility:visible;translate:-50% 0;transition-delay:0s} @media (max-width:720px){.pp-links a[data-tip]::after{display:none}} @media (prefers-reduced-motion:reduce){.pp-links a[data-tip]::after{transition:none!important;translate:-50% 0}} /* fast-owner1700 (owner 17:00): the founders' letter is a sheet of binder paper, after the punched page of the home rework (pages/_home/sections.css .sx-punch): a hole column down the left, a margin rule, ruled lines every 32px, a faint paper grain. Every line of the letter is 32px tall and every gap a whole line, so the words sit on the rules */ .letter-body.sx-sheet-pop{ --lt-row:32px;--lt-top:44px;--lt-left:84px;--lt-hole:28px;--lt-margin:60px; --lt-rule:rgba(18,22,20,.085);--lt-red:rgba(196,72,72,.34);--lt-holefill:#ecefed;--lt-holering:rgba(18,22,20,.16); position:relative;isolation:isolate;padding:var(--lt-top) 44px 40px var(--lt-left);border-radius:6px; background-color:var(--sheet); background-image: linear-gradient(var(--lt-red),var(--lt-red)), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .022 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"), repeating-linear-gradient(transparent 0 calc(var(--lt-row) - 8px),var(--lt-rule) calc(var(--lt-row) - 8px) calc(var(--lt-row) - 7px),transparent calc(var(--lt-row) - 7px) var(--lt-row)); background-size:1px 100%,160px 160px,100% 100%; background-position:var(--lt-margin) 0,0 0,0 var(--lt-top); background-repeat:no-repeat,repeat,no-repeat; background-origin:border-box} /* three punched holes in the left margin, showing the page behind the sheet */ .letter-body.sx-sheet-pop::after{content:"";position:absolute;left:calc(var(--lt-hole) - 8px);top:0;bottom:0;width:16px;pointer-events:none; --h:radial-gradient(circle,var(--lt-holefill) 6px,var(--lt-holering) 6.6px 7.4px,transparent 8px); background:var(--h) 0 12%/16px 16px no-repeat,var(--h) 0 50%/16px 16px no-repeat,var(--h) 0 88%/16px 16px no-repeat} .letter-body.sx-sheet-pop p{line-height:var(--lt-row)} .letter-body.sx-sheet-pop p+p{margin-top:var(--lt-row)} .letter-body.sx-sheet-pop .letter-first{font-size:21px;line-height:var(--lt-row)} .letter-body.sx-sheet-pop .sign{gap:0;margin-top:var(--lt-row)!important;padding-top:0;border-top:0} .letter-body.sx-sheet-pop .sign b,.letter-body.sx-sheet-pop .sign span{line-height:var(--lt-row)} html.dark .letter-body.sx-sheet-pop{--lt-rule:rgba(255,255,255,.08);--lt-red:rgba(232,120,120,.30);--lt-holefill:#0e1110;--lt-holering:rgba(255,255,255,.12)} @media (max-width:1024px){.letter-body.sx-sheet-pop{padding:var(--lt-top) 36px 36px var(--lt-left)}} @media (max-width:720px){ .letter-body.sx-sheet-pop{--lt-top:32px;--lt-left:52px;--lt-hole:18px;--lt-margin:38px;padding:var(--lt-top) 20px 28px var(--lt-left)} .letter-body.sx-sheet-pop .letter-first{font-size:19px} }