/* Critical Computing Cadre — site styles. A plain lab site in the logo's palette: deep green chrome, warm off-white pages, ochre accents. No JavaScript, no textures, no effects. */ :root{ --green:#1E2A28; --green-2:#16201F; --paper:#F6F2E9; --paper-2:#EDE6D6; --card:#FCFAF5; --ink:#1B1614; --ink-2:#3B3531; --ink-3:#675E57; --rule:rgba(27,22,20,.13); --cream:#F1EAD9; --ochre:#C9922F; --ochre-lt:#E2BB68; --ochre-dp:#8E6415; --celadon:#6E8C82; --celadon-dp:#37544C; --alert:#8E2F24; --sans:'Archivo',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif; --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; --radius:10px; } *{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:76px} body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.6; -webkit-font-smoothing:antialiased} img{max-width:100%} a{color:var(--celadon-dp);text-underline-offset:2px} a:hover{color:var(--ink)} a:focus-visible{outline:2px solid var(--ochre);outline-offset:2px;border-radius:2px} .wrap{max-width:1120px;margin:0 auto;padding:0 24px} .wrap.narrow{max-width:900px} .skip{position:absolute;left:-9999px;top:8px;background:var(--cream);color:var(--ink);padding:8px 12px;z-index:20} .skip:focus{left:8px} /* ---- top bar ---- */ .topbar{background:var(--green-2);position:sticky;top:0;z-index:10;border-bottom:1px solid rgba(226,187,104,.16)} .topbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:10px 24px;min-height:62px;flex-wrap:wrap;padding-block:8px} .brand{display:flex;align-items:center;gap:11px;color:var(--cream);text-decoration:none;font-weight:700;font-size:15.5px;letter-spacing:.01em} .brand:hover{color:var(--cream)} .brand .mark{color:var(--cream);flex:none} .topbar nav{display:flex;flex-wrap:wrap;gap:2px;margin-right:-10px} .topbar nav a{color:rgba(241,234,217,.78);text-decoration:none;font-size:14.5px;font-weight:500;padding:7px 10px;border-radius:6px} .topbar nav a:hover{color:var(--cream);background:rgba(241,234,217,.08)} .topbar nav a[aria-current="page"]{color:var(--ochre-lt)} /* Home page: the brand joins the top bar only after the hero, which carries the full logo, has scrolled away. .js comes from an inline script, so without JavaScript the brand simply stays visible. Phones have a static top bar that scrolls off with the hero, so there the brand is dropped instead. */ .js .topbar.has-hero .brand{opacity:0;visibility:hidden;transform:translateY(6px); transition:opacity .25s ease,transform .25s ease,visibility 0s linear .25s} .js .topbar.has-hero.past-hero .brand{opacity:1;visibility:visible;transform:none; transition:opacity .25s ease,transform .25s ease,visibility 0s} @media (max-width:720px){.js .topbar.has-hero .brand{display:none}} /* ---- hero ---- */ .hero{background:var(--green);color:var(--cream);padding:clamp(56px,9vw,104px) 0 clamp(52px,8vw,92px)} .hero h1{margin:0} .hero .lock{display:block;width:min(560px,100%);height:auto;aspect-ratio:352.3/145.86;color:var(--cream)} .hero .sub{margin:clamp(26px,4vw,38px) 0 0;padding-top:18px;border-top:2px solid var(--ochre);display:inline-block; font-size:clamp(15px,1.8vw,17.5px);color:rgba(241,234,217,.8)} /* ---- sections ---- */ .band{padding:clamp(52px,7vw,80px) 0} .band.alt{background:var(--paper-2)} .h-sec{font-size:clamp(26px,3vw,32px);line-height:1.2;font-weight:700;letter-spacing:-.01em;margin:0 0 26px} .h-sec::before{content:"";display:block;width:34px;height:3px;background:var(--ochre);margin-bottom:14px} .h-sub{font-size:20px;font-weight:700;line-height:1.3;margin:44px 0 14px;padding-bottom:9px;border-bottom:1px solid var(--rule)} .h-sub:first-child{margin-top:0} .h-grp{font-size:12.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);margin:24px 0 4px} .lead{font-size:clamp(18.5px,2.2vw,22px);line-height:1.5;color:var(--ink);margin:0 0 20px;max-width:46ch} .prose p{margin:0 0 16px;font-size:16.5px;line-height:1.7;color:var(--ink-2);max-width:68ch} .prose p:last-child{margin-bottom:0} .prose ul{margin:0 0 16px;padding-left:20px;max-width:68ch} .prose li{margin:0 0 7px;color:var(--ink-2);line-height:1.55} .more{display:inline-block;margin-top:24px;font-weight:600;text-decoration:none} .more:hover{text-decoration:underline} .about{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:48px;align-items:start} .about .lead{max-width:none} /* ---- page header (subpages) ---- */ .pagehead{background:var(--green);color:var(--cream);padding:clamp(36px,5vw,52px) 0 clamp(34px,5vw,48px)} .crumbs{margin:0 0 12px;font-size:14px;color:rgba(241,234,217,.6)} .crumbs a{color:rgba(241,234,217,.86);text-decoration:none} .crumbs a:hover{color:var(--cream);text-decoration:underline} .crumbs span{margin:0 5px;opacity:.6} .pagehead h1{margin:0;font-size:clamp(28px,4.2vw,44px);line-height:1.15;font-weight:700;letter-spacing:-.015em;max-width:26ch} .pagehead .sub{margin:12px 0 0;font-size:clamp(16px,1.9vw,18.5px);line-height:1.5;color:rgba(241,234,217,.78);max-width:62ch} /* ---- tables (projects, funding) ---- */ .table{width:100%;border-collapse:separate;border-spacing:0;background:var(--card);border:1px solid var(--rule);border-radius:var(--radius);overflow:hidden} .table th{text-align:left;font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);font-weight:600; padding:12px 18px;border-bottom:1px solid var(--rule);background:rgba(27,22,20,.03)} .table td{padding:17px 18px;border-bottom:1px solid var(--rule);vertical-align:top;font-size:15px;line-height:1.5;color:var(--ink-2)} .table tbody tr:last-child td{border-bottom:0} .ptable td.pn{width:30%} .ptable td.pn a{font-weight:700;font-size:16px;color:var(--ink);text-decoration:none} .ptable td.pn a::after{content:" →";color:var(--ochre-dp)} .ptable td.pn a:hover{color:var(--celadon-dp);text-decoration:underline} .ptable td.pp{width:26%;font-size:14px;color:var(--ink-3)} .ftable td.fn{color:var(--ink);width:56%} .ftable td.per{white-space:nowrap;font-family:var(--mono);font-size:13.5px} .award{font-family:var(--mono);font-size:12.5px;white-space:nowrap;margin-left:4px} .badge{display:inline-block;font-size:12px;font-weight:600;color:var(--alert);background:rgba(142,47,36,.08); border-radius:4px;padding:1px 7px;margin-left:4px;white-space:nowrap} @media (max-width:720px){ .table thead{display:none} .table,.table tbody,.table tr,.table td{display:block;width:auto!important} .table tr{padding:14px 16px;border-bottom:1px solid var(--rule)} .table tbody tr:last-child{border-bottom:0} .table td{padding:2px 0;border:0} .ptable td.pp,.ftable td.per{margin-top:6px} } /* ---- publications ---- */ .pubs{list-style:none;margin:0;padding:0} .pubs li{display:grid;grid-template-columns:52px minmax(0,1fr) auto;gap:14px;padding:13px 0;border-bottom:1px solid var(--rule)} .pubs .yr{font-family:var(--mono);font-size:13px;color:var(--ink-3);padding-top:2px} .pubs .ttl{margin:0;font-weight:600;font-size:15.5px;line-height:1.4;color:var(--ink)} .pubs .who{margin:4px 0 0;font-size:14px;line-height:1.5;color:var(--ink-3)} .pubs li.pending .ttl{font-weight:500;color:var(--ink-2)} .plink{align-self:start;font-family:var(--mono);font-size:12.5px;text-decoration:none;white-space:nowrap; border:1px solid rgba(55,84,76,.4);border-radius:5px;padding:2px 8px} .plink:hover{background:rgba(55,84,76,.07)} @media (max-width:560px){ .pubs li{grid-template-columns:40px minmax(0,1fr)} .plink{grid-column:2;justify-self:start} } .recent{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 40px} .recent li{padding:16px 0;border-bottom:1px solid var(--rule)} .recent .tag{display:block;font-size:12.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ochre-dp);margin-bottom:5px} .recent .ttl{margin:0;font-weight:600;font-size:16px;line-height:1.4} .recent .ttl a{color:var(--ink);text-decoration:none} .recent .ttl a:hover{color:var(--celadon-dp);text-decoration:underline} .recent .who{margin:5px 0 0;font-size:14px;line-height:1.5;color:var(--ink-3)} @media (max-width:760px){.recent{grid-template-columns:1fr}} /* ---- member cards ---- */ .cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px} .card{display:block;background:var(--card);border:1px solid var(--rule);border-radius:var(--radius);padding:18px 20px; text-decoration:none;color:inherit;transition:border-color .15s ease} .card:hover{border-color:var(--celadon);color:inherit} .card b{display:block;font-size:16.5px;color:var(--ink)} .card .role{display:block;font-size:13px;font-weight:600;color:var(--ochre-dp);margin-top:2px} .card p{margin:8px 0 0;font-size:14px;line-height:1.5;color:var(--ink-3)} .alumni{list-style:none;margin:0;padding:0} .alumni li{padding:12px 0;border-bottom:1px solid var(--rule)} .alumni b{display:block;font-size:15.5px} .alumni span{display:block;font-size:14px;color:var(--ink-3);margin-top:2px} /* ---- project & person pages ---- */ .cols{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:56px;align-items:start} .side{background:var(--card);border:1px solid var(--rule);border-radius:var(--radius);padding:20px 22px;position:sticky;top:86px} .side h3{font-size:12.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);margin:0 0 9px;font-weight:600} .side h3:not(:first-child){margin-top:24px} .side ul{list-style:none;margin:0;padding:0} .side li{font-size:14.5px;line-height:1.45;margin:0 0 10px} .side .meta{display:block;font-size:13px;color:var(--ink-3);margin-top:1px} .themes{list-style:none;margin:0;padding:0} .themes li{padding:11px 0;border-bottom:1px solid var(--rule);font-size:15.5px;line-height:1.5;color:var(--ink)} .themes .also{display:block;font-size:13.5px;color:var(--ink-3);margin-top:3px} .profile{display:grid;grid-template-columns:260px minmax(0,1fr);gap:56px;align-items:start} .photo{aspect-ratio:4/5;max-width:260px;border-radius:var(--radius);overflow:hidden;background:var(--paper-2); border:1px solid var(--rule);display:grid;place-items:center} .photo img{width:100%;height:100%;object-fit:cover;display:block} .photo .mark{color:var(--celadon);opacity:.45} .facts{margin:22px 0 0} .facts dt{font-size:12.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);font-weight:600;margin-top:16px} .facts dt:first-child{margin-top:0} .facts dd{margin:4px 0 0;font-size:14.5px;line-height:1.5} @media (max-width:880px){ .cols,.profile,.about{grid-template-columns:1fr;gap:36px} .side{position:static} } /* ---- join ---- */ .join{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:48px;align-items:start} .contact{background:var(--card);border:1px solid var(--rule);border-radius:var(--radius);padding:20px 22px} .contact h3{font-size:12.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);margin:0 0 8px;font-weight:600} .contact p{margin:0;font-size:15px;line-height:1.6} .contact p + p{margin-top:10px;color:var(--ink-3);font-size:14px} @media (max-width:820px){.join{grid-template-columns:1fr;gap:24px}} /* ---- footer ---- */ .foot{background:var(--green-2);color:rgba(241,234,217,.72);padding:48px 0 56px} .foot .wrap{display:grid;grid-template-columns:1.3fr 1fr 1fr 1.3fr;gap:32px} .foot .lock{color:var(--cream);display:block} .foot h2{font-size:12.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--ochre-lt);margin:0 0 8px;font-weight:600} .foot p{margin:0;font-size:14px;line-height:1.65} .foot a{color:var(--cream)} .foot a:hover{color:var(--ochre-lt)} @media (max-width:880px){.foot .wrap{grid-template-columns:1fr 1fr}} @media (max-width:520px){.foot .wrap{grid-template-columns:1fr}} @media (max-width:720px){html{scroll-padding-top:0}.topbar{position:static}} @media (max-width:560px){ .wrap{padding:0 16px} .topbar nav{margin-right:-8px} .topbar nav a{padding:6px 8px;font-size:14px} } @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.card,.js .topbar.has-hero .brand{transition:none!important;transform:none!important}}