/* Lawrence Lab. Swiss/minimal, Lawrence Lab visual system tokens. */
:root{
  --ink:#1D1D1F; --graphite:#6E6E73; --rule:#D2D2D7; --mist:#F5F5F7; --page:#fff;
  --blue:#0071E3; --teal:#00A3A1; --card:#fff;
  --f:"Helvetica Neue",Helvetica,Arial,sans-serif;
  --gap:24px; --ease:cubic-bezier(.2,.7,.2,1);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ink:#F5F5F7; --graphite:#A1A1A6; --rule:#3A3A3C; --mist:#1C1C1E; --page:#111113;
    --blue:#2997FF;
  }
}
:root[data-theme="dark"]{
  --ink:#F5F5F7; --graphite:#A1A1A6; --rule:#3A3A3C; --mist:#1C1C1E; --page:#111113; --blue:#2997FF;
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-font-smoothing:antialiased; scroll-behavior:smooth}
body{font-family:var(--f);background:var(--page);color:var(--ink);font-size:17px;line-height:1.55}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
sup,sub{line-height:0}

/* ---------- 12-col grid ---------- */
.grid{
  display:grid; min-width:0; grid-template-columns:repeat(12,1fr); gap:var(--gap);
  max-width:1320px; margin:0 auto; padding:0 48px;
}

/* ---------- masthead ---------- */
header.top{position:sticky; top:0; z-index:10; border-bottom:1px solid var(--ink);
  background:color-mix(in srgb, var(--page) 88%, transparent);
  -webkit-backdrop-filter:saturate(180%) blur(16px); backdrop-filter:saturate(180%) blur(16px)}
header.top .grid{align-items:center; padding-top:22px; padding-bottom:20px; transition:padding .3s var(--ease)}
header.top.scrolled .grid{padding-top:13px; padding-bottom:12px}
.wordmark{grid-column:1/6; line-height:1}
.wordmark .brand{display:inline-flex; align-items:center; gap:14px; color:inherit}
.wordmark .mark{height:46px; width:auto; flex:0 0 auto; transition:height .3s var(--ease)}
.wordmark .mark .bb{stroke:var(--ink); stroke-width:4.2; stroke-linecap:round}
.wordmark .mark .bd{fill:var(--blue)}
.wordmark .nm{display:block; font-size:28px; font-weight:700; letter-spacing:-.03em; color:var(--ink)}
.wordmark .sub{display:block; font-size:13px; font-weight:400; color:var(--graphite); margin-top:5px}
header.top.scrolled .wordmark .mark{height:38px}
nav.main{grid-column:6/13; display:flex; gap:34px; justify-content:flex-end; min-width:0}
nav.main::-webkit-scrollbar{display:none}
nav.main a{font-size:15px; color:var(--graphite); position:relative; padding:4px 0; transition:color .2s}
nav.main a::after{content:""; position:absolute; left:0; right:0; bottom:-2px; height:1.5px;
  background:var(--ink); transform:scaleX(0); transform-origin:left; transition:transform .35s var(--ease)}
nav.main a:hover,nav.main a[aria-current]{color:var(--ink)}
nav.main a:hover::after,nav.main a[aria-current]::after{transform:scaleX(1)}

/* ---------- hero ---------- */
.hero{padding:112px 48px 40px; align-items:center}
.hero-text{grid-column:1/7}
.eyebrow{font-size:13px; letter-spacing:.12em; text-transform:uppercase; font-weight:600;
  color:var(--graphite)}
.hero h1{font-size:clamp(50px,6.6vw,96px); line-height:.98; letter-spacing:-.042em;
  font-weight:700; margin-top:22px; text-wrap:balance}
.hero .sub{margin-top:30px; font-size:22px; line-height:1.45; color:var(--graphite); max-width:25em}
.hero .where{margin-top:30px; font-size:14px; color:var(--graphite); line-height:1.6}
.brushfig{grid-column:7/13; padding-left:24px}
svg.brush{width:100%; height:auto; overflow:visible}
svg.brush .bb{stroke:var(--graphite); stroke-width:2; transform-box:fill-box; transform-origin:center;
  transition:transform .8s var(--ease)}
svg.brush .col{transition:transform .8s var(--ease), opacity .5s ease}
svg.brush .col.gone{opacity:0}
svg.brush .b, svg.brush .bk{fill:var(--blue); transform-box:fill-box; transform-origin:center;
  transition:opacity .45s var(--ease), transform .45s var(--ease), fill .6s ease}
svg.brush .b.off{opacity:0; transform:scale(.25)}
.brushfig[data-state="bbp"] .b,
.brushfig[data-state="bbp"] .bk,
.brushfig[data-state="pbp"] .bk{fill:var(--graphite)}
.brushcap{margin-top:12px; text-align:center; font-size:13.5px; color:var(--graphite); min-height:1.5em}
.brushctl{display:flex; justify-content:center; margin-top:18px}
.brushctl button{font:inherit; font-size:13px; color:var(--graphite); background:none;
  border:1px solid var(--rule); padding:8px 16px; cursor:pointer; transition:all .25s}
.brushctl button + button{border-left:0}
.brushctl button:hover{color:var(--ink)}
.brushctl button[aria-pressed="true"]{background:var(--ink); color:var(--page); border-color:var(--ink)}
.brushctl i{font-style:italic}

/* entrance */
@keyframes rise{from{opacity:0; transform:translateY(22px)} to{opacity:1; transform:none}}
.hero-text > *, .brushfig{animation:rise .9s var(--ease) both}
.hero .eyebrow{animation-delay:.05s} .hero h1{animation-delay:.15s}
.hero .sub{animation-delay:.3s} .hero .where{animation-delay:.4s} .brushfig{animation-delay:.35s}

/* ---------- section scaffolding ---------- */
section{padding:112px 0; border-top:1px solid var(--rule); margin-top:96px}
section > .grid{align-items:start}
.sechead{grid-column:1/4; font-size:12px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--graphite); font-weight:600; padding-top:9px; position:sticky; top:104px}
.statement{grid-column:4/12}
.statement p{font-size:clamp(23px,2.3vw,31px); line-height:1.3; letter-spacing:-.016em; font-weight:500}
.statement p + p{margin-top:22px}
.statement p.quiet{color:var(--graphite)}
.statement .links{font-size:17px; font-weight:500; letter-spacing:0; display:flex; gap:32px; flex-wrap:wrap}
.statement .links a{color:var(--blue)}
.statement .links a:hover{text-decoration:underline; text-underline-offset:4px}
figure.wide{grid-column:4/13; margin-top:64px}
#group figure.wide{margin-top:0; grid-row:1}
#group .statement{margin-top:40px}
.card{background:var(--card); border:1px solid var(--rule); padding:28px}
.figcap{grid-column:4/11; margin-top:-8px; font-size:14px; color:var(--graphite); line-height:1.55}
.figcap b{color:var(--ink); font-weight:600}
.groupimg{width:100%; aspect-ratio:16/9; object-fit:cover; object-position:center 35%}

/* ---------- numbered aims ---------- */
.aims{grid-column:4/13; display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap); margin-top:56px}
.aims div{border-top:1px solid var(--ink); padding-top:16px}
.aims .n{font-size:12px; color:var(--graphite); font-variant-numeric:tabular-nums}
.aims p{font-size:18px; margin-top:8px; line-height:1.4; font-weight:500; letter-spacing:-.01em}

/* ---------- research areas ---------- */
.areas{grid-column:4/13; display:grid; grid-template-columns:1fr 1fr; gap:64px 40px}
.area .card{aspect-ratio:4/3; display:grid; place-items:center; overflow:hidden; padding:22px;
  transition:border-color .3s}
.area .card img{max-height:100%; width:auto; object-fit:contain; transition:transform .6s var(--ease)}
.area:hover .card{border-color:var(--ink)}
.area:hover .card img{transform:scale(1.035)}
.area .idx{font-size:12px; color:var(--graphite); font-variant-numeric:tabular-nums; display:block; margin-top:20px}
.area h3{font-size:20px; font-weight:600; letter-spacing:-.016em; line-height:1.25; margin-top:6px}
.area p{font-size:15.5px; color:var(--graphite); margin-top:8px; line-height:1.5}
.area.more{border-top:1px solid var(--ink); align-self:end; padding-top:4px}
.area.more h3{color:var(--blue)}
.area.more .idx{margin-top:12px; font-size:18px; color:var(--blue); transition:transform .3s var(--ease)}
.area.more:hover .idx{transform:translateX(6px)}

/* ---------- support ---------- */
.support{grid-column:4/13; display:grid; grid-template-columns:1fr 1fr; gap:40px}
.support h3{font-size:15px; font-weight:600; padding-bottom:12px; border-bottom:1px solid var(--ink)}
.support ul{list-style:none}
.support li{font-size:17px; padding:11px 0; border-bottom:1px solid var(--rule)}
.support p{font-size:17px; line-height:1.55; padding-top:12px; color:var(--graphite); max-width:28em}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--ink); margin-top:96px; padding:32px 0 80px}
footer .a{grid-column:1/5; font-size:13px; color:var(--graphite); line-height:1.7}
footer .b{grid-column:6/9; font-size:13px; color:var(--graphite); line-height:1.7}
footer .c{grid-column:10/13; font-size:13px; color:var(--graphite); line-height:1.7}
footer strong{display:block; color:var(--ink); font-weight:600; margin-bottom:4px}
footer a:hover{color:var(--ink)}

/* ---------- scroll reveal (only when JS runs) ---------- */
html.js [data-reveal]{opacity:0; transform:translateY(26px);
  transition:opacity .9s var(--ease), transform .9s var(--ease)}
html.js [data-reveal].in{opacity:1; transform:none}
.areas > :nth-child(2n){transition-delay:.08s}
.aims > :nth-child(2){transition-delay:.08s} .aims > :nth-child(3){transition-delay:.16s}

/* ---------- inner pages ---------- */
.pagehead{padding-top:96px}
.pagehead h1{grid-column:1/10; font-size:clamp(42px,5.6vw,76px); line-height:1.02;
  letter-spacing:-.038em; font-weight:700; animation:rise .9s var(--ease) both}
.pagehead .lede{grid-column:1/8; margin-top:24px; font-size:20px; color:var(--graphite);
  line-height:1.5; animation:rise .9s .12s var(--ease) both}
.block{padding:64px 0; border-top:1px solid var(--rule); margin-top:64px}
.block > .grid{align-items:start}
.blockhead{grid-column:1/4; font-size:12px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--graphite); font-weight:600; padding-top:5px}
.blockbody{grid-column:4/13}

/* roster lists */
ul.roster{list-style:none; display:grid; grid-template-columns:1fr 1fr; gap:0 56px}
ul.roster li{border-top:1px solid var(--rule); padding:13px 0; display:flex;
  justify-content:space-between; align-items:baseline; gap:16px}
ul.roster li:nth-child(1),ul.roster li:nth-child(2){border-top:1px solid var(--ink)}
ul.roster .nm{font-size:16px; font-weight:600; letter-spacing:-.01em}
ul.roster .rl{font-size:13px; color:var(--graphite); text-align:right; flex:0 1 auto; min-width:0}

/* publications */
ol.pubs{list-style:none}
ol.pubs li{border-top:1px solid var(--rule); display:grid; grid-template-columns:168px 1fr;
  gap:28px; align-items:start; padding:24px 0; font-size:15.5px; line-height:1.5}
ol.pubs li:first-child{border-top:1px solid var(--ink)}
ol.pubs .j{font-style:italic}
ol.pubs .yr{font-weight:600}
ol.pubs .note{color:var(--graphite)}
ol.pubs .thumb{border:1px solid var(--rule); background:var(--card); aspect-ratio:3/2;
  display:grid; place-items:center; overflow:hidden; padding:6px; transition:border-color .3s}
ol.pubs .thumb img{max-width:100%; max-height:100%; object-fit:contain; transition:transform .5s var(--ease)}
ol.pubs a.thumb:hover{border-color:var(--ink)}
ol.pubs a.thumb:hover img{transform:scale(1.05)}
ol.pubs .thumb.none{background:var(--mist); font-size:10px; color:var(--graphite);
  letter-spacing:.06em; text-transform:uppercase; text-align:center}
ol.pubs .meta{margin-top:8px; font-size:13px}
ol.pubs .meta a{color:var(--blue)}
ol.pubs .meta a:hover{text-decoration:underline}
ol.pubs .meta span{color:var(--rule); margin:0 7px}

/* news */
ul.news{list-style:none}
ul.news li{border-top:1px solid var(--rule); padding:16px 0; display:grid;
  grid-template-columns:116px 1fr; gap:20px; font-size:16px; line-height:1.5}
ul.news li:first-child{border-top:1px solid var(--ink)}
ul.news time{font-size:13px; color:var(--graphite); font-variant-numeric:tabular-nums}

.prose{grid-column:4/10}
.prose p{font-size:18px; line-height:1.6} .prose p+p{margin-top:16px}
.prose a{color:var(--blue)}

/* people */
.groupfig{margin-top:48px}
.groupfig figure{grid-column:1/13; animation:rise .9s .2s var(--ease) both}
.groupfig img{width:100%; aspect-ratio:16/8; object-fit:cover; object-position:center 35%}
.ph{width:100%; aspect-ratio:640/496; object-fit:cover; background:var(--mist); display:block}
.ph.ini{display:grid; place-items:center; font-size:28px; font-weight:600; color:var(--graphite);
  letter-spacing:.02em}
.pi2{display:grid; grid-template-columns:260px 1fr; gap:36px; align-items:start}
.pi2 h3{font-size:24px; font-weight:600; letter-spacing:-.02em}
.pi2 .tt{font-size:14px; color:var(--graphite); margin-top:4px}
.pi2 p{font-size:16.5px; line-height:1.55; margin-top:14px; max-width:36em}
ul.cv{list-style:none; margin-top:18px; max-width:42em}
ul.cv li{border-top:1px solid var(--rule); padding:9px 0; font-size:14px; display:grid;
  grid-template-columns:64px 1fr; gap:12px}
ul.cv b{font-weight:600}
.pi2 .links{margin-top:16px; font-size:14px}
.pi2 .links a{color:var(--blue)}
.pi2 .links span{color:var(--rule); margin:0 8px}
ul.members{list-style:none; display:grid; grid-template-columns:repeat(3,1fr); gap:44px 28px}
ul.members li{overflow:hidden}
ul.members .ph{transition:transform .6s var(--ease)}
ul.members li:hover .ph{transform:scale(1.03)}
ul.members h3{font-size:17px; font-weight:600; letter-spacing:-.012em; margin-top:14px}
ul.members p{font-size:13.5px; color:var(--graphite); margin-top:2px; line-height:1.45}
ul.members p.ed{color:var(--ink); margin-top:6px}
h4.sub{font-size:13px; font-weight:600; margin:36px 0 10px}
h4.sub:first-child{margin-top:0}
.gallery{display:grid; grid-template-columns:repeat(4,1fr); gap:12px}
.gallery img{width:100%; aspect-ratio:1; object-fit:cover; transition:transform .6s var(--ease)}
.gallery img:hover{transform:scale(1.025)}

/* ---------- narrow screens ---------- */
@media(max-width:900px){
  .grid{padding:0 20px; gap:16px}
  header.top .grid{padding-top:14px; padding-bottom:10px}
  .wordmark{grid-column:1/13}
  .wordmark .mark{height:38px}
  .wordmark .nm{font-size:24px}
  .wordmark .brand{gap:12px}
  nav.main{grid-column:1/13; justify-content:flex-start; flex-wrap:nowrap; gap:22px;
    margin-top:12px; overflow-x:auto; scrollbar-width:none; padding-bottom:4px; min-width:0}
  nav.main a{flex:0 0 auto; font-size:15px}
  .hero{padding:56px 20px 8px}
  .hero-text,.brushfig{grid-column:1/13}
  .brushfig{margin-top:28px; padding-left:0}
  .hero .sub{font-size:19px}
  section{padding:64px 0; margin-top:56px}
  .sechead{position:static}
  .sechead,.statement,figure.wide,.figcap,.aims,.areas,.support{grid-column:1/13}
  figure.wide{margin-top:32px}
  .card{padding:16px}
  .figcap{margin-top:0}
  .aims{grid-template-columns:1fr; gap:0; margin-top:32px}
  .aims div{margin-top:18px}
  .areas{grid-template-columns:1fr; gap:48px}
  .support{grid-template-columns:1fr}
  footer .a,footer .b,footer .c{grid-column:1/13}
  .pagehead{padding-top:52px}
  .pagehead h1,.pagehead .lede,.blockhead,.blockbody,.prose{grid-column:1/13}
  .block{padding:40px 0; margin-top:40px}
  ul.roster{grid-template-columns:1fr}
  ul.roster li:nth-child(2){border-top:1px solid var(--rule)}
  ul.roster li{display:block}
  ul.roster .rl{display:block; text-align:left; margin-top:2px}
  ul.news li{grid-template-columns:1fr; gap:2px}
  ol.pubs li{grid-template-columns:96px 1fr; gap:16px}
  .pi2{grid-template-columns:1fr; gap:20px}
  .pi2 .ph{max-width:260px}
  ul.members{grid-template-columns:1fr 1fr; gap:28px 16px}
  .gallery{grid-template-columns:1fr 1fr; gap:8px}
  .groupfig img{aspect-ratio:4/3}
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none !important; transition:none !important; scroll-behavior:auto !important}
  html.js [data-reveal]{opacity:1; transform:none}
}

/* support: thanks list */
.support ul.thanks li{display:flex; justify-content:space-between; gap:16px; align-items:baseline}
.support ul.thanks span{font-size:13.5px; color:var(--graphite); text-align:right}
.support ul.thanks + p{font-size:14px; padding-top:12px}

/* animated figures inside cards (cards stay white in both themes) */
.area .card.anim{padding:10px}
.card.anim svg{width:100%; height:100%; display:block}
.card.anim text{font-family:var(--f); fill:#1D1D1F}
.card.anim text.g{fill:#6E6E73}

/* news: talks and posters tally */
table.tally{border-collapse:collapse; width:100%; max-width:560px; font-variant-numeric:tabular-nums}
table.tally th{font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--graphite);
  font-weight:600; text-align:left; padding:0 0 10px; border-bottom:1px solid var(--ink)}
table.tally td{padding:10px 16px 10px 0; border-bottom:1px solid var(--rule); font-size:15px; white-space:nowrap}
table.tally td:first-child{width:72px; font-weight:600}
table.tally tfoot td{border-bottom:0; border-top:1px solid var(--ink); font-weight:600}
table.tally .bar{display:inline-block; height:8px; width:calc(var(--n) * 9px); max-width:180px;
  background:var(--blue); margin-right:10px; vertical-align:middle}
table.tally .bar.alt{background:var(--graphite)}
.tallynote{margin-top:14px; font-size:14px; color:var(--graphite); max-width:40em}

/* MD videos */
.mdfig{position:relative; padding:20px}
.mdgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.mdgrid video{width:100%; aspect-ratio:3/2; display:block; background:#fff; object-fit:cover}
.mdgrid .lab{margin-top:10px; font-size:14px; font-weight:600; color:#1D1D1F}
.mdgrid .lab.dis{color:#6E6E73} .mdgrid .lab.disc{color:#0071E3}
.mdtoggle{position:absolute; right:20px; bottom:16px; font:inherit; font-size:12px; color:#6E6E73;
  background:#fff; border:1px solid #D2D2D7; padding:4px 10px; cursor:pointer}
.mdtoggle:hover{color:#1D1D1F; border-color:#1D1D1F}
@media(max-width:900px){
  .mdgrid{grid-template-columns:1fr; gap:20px}
  .mdfig{padding:14px}
}

/* group photo: keep the full frame, nobody cropped */
.groupimg.wide-photo{aspect-ratio:auto; object-fit:contain}
.groupfig img[src*="group-2026"]{aspect-ratio:auto; object-fit:contain}

/* ---------- gallery treatment (Apple-style): mist band, white rounded tiles, no borders ---------- */
#areas{background:var(--mist); border-top:0}
#areas .area .card{border:0; border-radius:18px}
#areas .area:hover .card img{transform:scale(1.035)}
.mdfig.card{background:var(--mist); border:0; border-radius:22px; padding:22px}
.mdgrid video{border-radius:12px; background:#fff}
.mdgrid .lab{color:var(--ink)}
.mdgrid .lab.dis{color:var(--graphite)} .mdgrid .lab.disc{color:var(--blue)}
.mdtoggle{border-radius:999px; background:var(--page); color:var(--graphite); border-color:var(--rule)}
.groupimg,.groupfig img{border-radius:18px}
.gallery img{border-radius:12px}
ul.members .ph{border-radius:14px}
.pi2 .ph{border-radius:14px}
ol.pubs .thumb{border-radius:10px}
.brushctl button:first-child{border-radius:999px 0 0 999px}
.brushctl button:last-child{border-radius:0 999px 999px 0}
@media(max-width:900px){ .mdfig.card{padding:14px; border-radius:18px} }

.tallyline{font-size:17px; color:var(--graphite); max-width:40em}

/* ---------- photos page: albums, 4:3 grid, full-size viewer ---------- */
.photos .blockhead{position:sticky; top:96px; text-transform:none; letter-spacing:0}
.albums{display:flex; flex-direction:column; align-items:flex-start; gap:4px}
.albums button{font:inherit; font-size:15px; color:var(--graphite); background:none; cursor:pointer;
  border:1px solid transparent; border-radius:999px; padding:7px 14px}
.albums button span{font-size:12.5px; margin-left:4px; opacity:.75}
.albums button:hover{background:var(--mist); color:var(--ink)}
.albums button[aria-pressed="true"]{color:var(--ink); background:var(--page); border-color:var(--rule)}
.albumhead{font-size:22px; font-weight:600; letter-spacing:-.015em; margin:0 0 18px}
.pgrid + .albumhead{margin-top:64px}
.pgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:28px 16px}
.pgrid figure{margin:0}
.pgrid a{display:block; overflow:hidden; border-radius:12px; background:var(--mist)}
.pgrid img{display:block; width:100%; aspect-ratio:4/3; object-fit:cover; transition:transform .6s var(--ease)}
.pgrid a:hover img{transform:scale(1.03)}
.pgrid a:focus-visible{outline:2px solid var(--blue); outline-offset:3px}
.pgrid figcaption{font-size:13.5px; line-height:1.45; color:var(--graphite); margin-top:10px}
.pgrid [hidden],.albumhead[hidden],.pgrid[hidden]{display:none}
.lb{position:fixed; inset:0; width:100%; height:100%; max-width:none; max-height:none; margin:0; padding:0;
  border:0; background:#0B0B0C; color:#F5F5F7}
.lb::backdrop{background:#0B0B0C}
.lb figure{position:absolute; inset:60px 80px 56px; margin:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center}
.lb img{max-width:100%; max-height:calc(100% - 44px); object-fit:contain; border-radius:6px}
.lb figcaption{margin-top:16px; font-size:14px; line-height:1.45; color:#A1A1A6; text-align:center; max-width:42em}
.lb button{position:absolute; width:48px; height:48px; border:0; border-radius:999px; background:none;
  color:#F5F5F7; font:inherit; font-size:26px; line-height:1; cursor:pointer}
.lb button:hover{background:rgba(255,255,255,.1)}
.lb .x{top:10px; right:12px} .lb .prev{left:16px; top:50%; margin-top:-24px} .lb .next{right:16px; top:50%; margin-top:-24px}
.lb .count{position:absolute; top:24px; left:28px; font-size:13px; color:#A1A1A6}
.photolink{margin-top:20px; font-size:15px} .photolink a{color:var(--blue)}
@media(max-width:900px){
  .photos .blockhead{position:static}
  .albums{flex-direction:row; flex-wrap:wrap}
  .pgrid{grid-template-columns:1fr 1fr; gap:20px 10px}
  .lb figure{inset:60px 8px 56px}
  .lb .prev,.lb .next{top:auto; bottom:6px; margin-top:0}
}