/* Robinson Lab, UCL.
   Layout concept: white page, navy type, the rainbow stipple of the wolf logo as the one bold element. */
@font-face{font-family:"Atkinson Hyperlegible";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/atkinson-hyperlegible-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Atkinson Hyperlegible";font-style:italic;font-weight:400;font-display:swap;src:url(../fonts/atkinson-hyperlegible-latin-400-italic.woff2) format("woff2")}
@font-face{font-family:"Atkinson Hyperlegible";font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/atkinson-hyperlegible-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Atkinson Hyperlegible";font-style:italic;font-weight:700;font-display:swap;src:url(../fonts/atkinson-hyperlegible-latin-700-italic.woff2) format("woff2")}
@font-face{font-family:"Bricolage Grotesque";font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/bricolage-grotesque-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Bricolage Grotesque";font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/bricolage-grotesque-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Bricolage Grotesque";font-style:normal;font-weight:800;font-display:swap;src:url(../fonts/bricolage-grotesque-latin-800-normal.woff2) format("woff2")}
@font-face{font-family:"Luckiest Guy";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/luckiest-guy-latin-400-normal.woff2) format("woff2")}

:root{
  --paper:#ffffff;
  --mist:#f5f3fb;
  --ink:#16134a;
  --violet:#5a1fa3;
  --text:#24213f;
  --muted:#5b5875;
  --line:#dcd7ee;
  --sun:#ffe600;
  --spectrum:linear-gradient(90deg,#ec008c,#ff283c,#ff8000,#ffd400,#3cc828,#00c8e6,#285aff,#6e1ed2);
  --r:24px;
  --display:"Bricolage Grotesque","Avenir Next","Segoe UI",Arial,sans-serif;
  --body:"Atkinson Hyperlegible","Helvetica Neue",Arial,sans-serif;
  --fun:"Luckiest Guy","Arial Black",sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--text);font-family:var(--body);font-size:18px;line-height:1.6}
img{max-width:100%;display:block}
a{color:var(--violet)}
a:hover{color:var(--ink)}
a:focus-visible,button:focus-visible{outline:3px solid var(--violet);outline-offset:3px;border-radius:6px}
h1,h2,h3{color:var(--ink);text-wrap:balance}
.wrap{max-width:1180px;margin:0 auto;padding-inline:20px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;background:var(--sun);color:var(--ink);padding:8px 12px;z-index:9}

/* dotted spectrum rule: the signature detail, echoing the stippled wolf */
.dots{height:8px;border:0;margin:0;background:var(--spectrum);
  -webkit-mask:radial-gradient(circle,#000 2.4px,transparent 2.8px) 0 50%/11px 8px repeat-x;
          mask:radial-gradient(circle,#000 2.4px,transparent 2.8px) 0 50%/11px 8px repeat-x}

/* ---------- top bar ---------- */
.bar{background:rgba(255,255,255,.94);backdrop-filter:blur(6px);position:sticky;top:env(safe-area-inset-top,0px);z-index:5}
.bar::after{content:"";display:block;height:6px;background:var(--spectrum);
  -webkit-mask:radial-gradient(circle,#000 1.8px,transparent 2.2px) 0 50%/9px 6px repeat-x;mask:radial-gradient(circle,#000 1.8px,transparent 2.2px) 0 50%/9px 6px repeat-x}
.bar .wrap{display:flex;align-items:center;gap:14px 18px;min-height:64px;flex-wrap:wrap;padding-block:8px}
.mark{font-family:var(--display);font-weight:800;font-size:22px;letter-spacing:-.01em;color:var(--ink);text-decoration:none;display:flex;align-items:center;gap:8px;line-height:1}
.mark img{width:34px;height:34px}
.bar nav{display:flex;gap:4px;flex-wrap:wrap;margin-left:auto}
.bar nav a{font-family:var(--display);font-weight:700;font-size:16px;color:var(--ink);text-decoration:none;padding:6px 12px;border-radius:10px}
.bar nav a:hover{background:var(--mist)}
.bar nav a[aria-current="page"]{background:var(--ink);color:#fff}

/* ---------- hero (home) ---------- */
.hero{background:var(--paper)}
.hero .wrap{padding-block:clamp(30px,6vw,72px) clamp(28px,4vw,48px)}
.hero-grid{display:grid;grid-template-columns:1fr;gap:10px;align-items:center}
@media (min-width:860px){.hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:24px}}
.wordmark{font-family:var(--display);font-weight:800;color:var(--ink);margin:0;line-height:.92;letter-spacing:-.045em;font-size:clamp(68px,11vw,156px)}
.wordmark span{display:block}
.hero .group{margin:16px 0 6px;font-family:var(--display);font-weight:700;font-size:clamp(22px,2.6vw,32px);color:var(--violet);letter-spacing:-.01em}
.hero .inst{font-size:15px;font-weight:700;text-transform:uppercase;letter-spacing:.14em;color:var(--muted)}
.hero .wolf{width:100%;max-width:620px;justify-self:center;height:auto}
.hero .tag{font-family:var(--display);font-weight:500;font-size:clamp(21px,2.4vw,28px);line-height:1.3;margin:22px 0 22px;max-width:36ch;color:var(--ink)}
.rule{display:none}

/* ---------- buttons ---------- */
.pills{display:flex;flex-wrap:wrap;gap:10px}
.pill{display:inline-flex;align-items:center;gap:10px;min-height:50px;padding:10px 20px;border-radius:14px;background:var(--ink);color:#fff;font-family:var(--display);font-weight:700;font-size:18px;text-decoration:none;border:2px solid var(--ink);transition:background .15s,color .15s}
.pill::after{content:"\2192";transition:transform .15s}
.pill:hover{background:var(--violet);border-color:var(--violet);color:#fff}
.pill:hover::after{transform:translateX(4px)}
.pill.light{background:var(--paper);color:var(--ink)}
.pill.light:hover{background:var(--mist);color:var(--ink);border-color:var(--ink)}
.pill.inline{font-size:17px;min-height:46px}
.welcome{margin:18px 0 0;font-size:15px;color:var(--muted)}

/* ---------- sections ---------- */
section.block{padding-block:clamp(44px,7vw,84px)}
section.block.alt{background:var(--mist)}
.h-big{font-family:var(--display);font-weight:800;font-size:clamp(46px,7vw,84px);line-height:1;letter-spacing:-.035em;margin:0 0 8px}
.h-mid{font-family:var(--display);font-weight:800;font-size:clamp(32px,4.2vw,48px);line-height:1.05;letter-spacing:-.03em;margin:0 0 10px}
.kicker{font-family:var(--display);font-weight:500;color:var(--violet);font-size:clamp(19px,2vw,24px);line-height:1.3;margin:0 0 30px;max-width:46ch}
.lede{font-size:clamp(19px,2vw,22px);max-width:62ch}
.prose{max-width:68ch}
.prose p{margin:0 0 1em}
.prose h3{font-family:var(--display);font-weight:700;font-size:22px;margin:1.4em 0 .4em}
.center{text-align:left}
.mt{margin-top:34px}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:26px}
.sec-head .kicker{margin:0}

.page-head{display:flex;align-items:center;gap:14px 22px;flex-wrap:wrap;margin-bottom:4px}
.page-head .ico{width:clamp(84px,10vw,120px);height:auto;flex:none;order:-1}

/* ---------- cards ---------- */
.cards{display:grid;gap:22px;grid-template-columns:1fr}
@media (min-width:720px){.cards.c2{grid-template-columns:repeat(2,minmax(0,1fr))}.cards.c3{grid-template-columns:repeat(3,minmax(0,1fr))}}
.card{display:flex;flex-direction:column;border:1.5px solid var(--line);border-radius:var(--r);background:var(--paper);color:var(--text);text-decoration:none;overflow:hidden;transition:transform .18s,box-shadow .18s,border-color .18s}
a.card:hover{transform:translateY(-4px);border-color:var(--violet);box-shadow:0 14px 30px -18px rgba(90,31,163,.55);color:var(--text)}
.card .top{padding:24px 24px 0;display:flex;justify-content:flex-start}
.card .top img,.card .top svg{width:112px;height:112px}
.card .bottom{padding:14px 24px 24px;display:flex;flex-direction:column;align-items:flex-start;gap:6px;flex-grow:1}
.card .t{font-family:var(--display);font-weight:800;font-size:26px;line-height:1.1;letter-spacing:-.02em;color:var(--ink)}
.card p{margin:0;font-size:16px;line-height:1.5;color:var(--muted)}
a.card .bottom::after{content:"Explore \2192";margin-top:auto;padding-top:12px;font-family:var(--display);font-weight:700;font-size:16px;color:var(--violet)}
.card.k{background:var(--ink);border-color:var(--ink)}
.card.k .t,.card.k p,.card.k a{color:#fff}
.card.k p{color:#d9d6f0}
a.card.k .bottom::after{color:var(--sun)}
.card.y{background:#fffbd6;border-color:#efe08a}
.mini{display:none}

/* ---------- theme pages ---------- */
.tbox{border-radius:var(--r);background:var(--mist);padding:clamp(22px,4vw,40px);margin-top:26px}
.tbox h2{margin-top:0}
.label{display:inline-block;font-family:var(--display);font-weight:700;font-size:14px;padding:4px 12px;border-radius:999px;margin-bottom:12px;background:var(--paper);color:var(--ink);border:1.5px solid var(--line)}
.label.y,.label.b,.label.k{background:var(--ink);color:#fff;border-color:var(--ink)}
.qs{padding-left:1.2em;margin:0 0 1em}
.qs li{margin:0 0 .5em}
.qs li::marker{color:var(--violet)}
.pubs{list-style:none;padding:0;margin:0}
.pubs li{padding:13px 0;border-top:1px solid var(--line);font-size:16px;line-height:1.5}
.pubs li:last-child{border-bottom:1px solid var(--line)}
.pubs .ti{font-weight:700;color:var(--ink)}
.pubs .jr{font-style:italic}
.pubs a{word-break:break-word}
.pubs .note{display:inline-block;font-size:13px;background:var(--ink);color:#fff;padding:1px 9px;border-radius:999px;margin-left:4px;font-weight:700}
.facts{display:grid;gap:14px;grid-template-columns:1fr;margin:22px 0 0}
@media (min-width:720px){.facts{grid-template-columns:repeat(3,minmax(0,1fr))}}
.fact{border-radius:18px;padding:16px 18px;background:var(--paper);font-size:16px}
.fact b{display:block;font-family:var(--display);font-weight:800;font-size:22px;color:var(--violet);line-height:1.1;margin-bottom:4px;letter-spacing:-.01em}

/* ---------- PI feature ---------- */
.pi{display:grid;gap:34px;align-items:center;grid-template-columns:1fr}
@media (min-width:860px){.pi{grid-template-columns:5fr 7fr}}
.pi img{border-radius:var(--r);aspect-ratio:3/4;object-fit:cover;width:100%;max-width:380px;height:auto;justify-self:center}

/* ---------- play cards ---------- */
.play{display:grid;gap:22px;grid-template-columns:1fr}
@media (min-width:860px){.play{grid-template-columns:1fr 1fr}}
.pcard{border-radius:var(--r);padding:28px;text-decoration:none;color:var(--ink);display:flex;flex-direction:column;gap:10px;transition:transform .18s,box-shadow .18s;position:relative;min-height:260px;border:1.5px solid var(--line);background:var(--paper)}
.pcard:hover{transform:translateY(-4px);box-shadow:0 14px 30px -18px rgba(22,19,74,.6);color:var(--ink)}
.pcard.ninja{background:var(--sun);border-color:var(--sun)}
.pcard.ninja .t{font-family:var(--fun);font-size:clamp(34px,4.6vw,50px);line-height:1;color:#161616}
.pcard.ninja p,.pcard.ninja .go{color:#161616}
.pcard .t{font-family:var(--display);font-weight:800;font-size:clamp(32px,4vw,44px);line-height:1;letter-spacing:-.03em}
.pcard p{margin:0;font-size:17px;max-width:44ch;color:var(--muted)}
.pcard .go{margin-top:auto;font-family:var(--display);font-weight:700}
.pcard .go::after{content:" \2192"}
.badge{position:absolute;top:18px;right:18px;font-size:13px;font-weight:700;padding:4px 11px;border-radius:999px;background:var(--paper);color:var(--ink)}
.badge.dev{background:#c8102e;color:#fff}
.pcard .art{display:flex;gap:10px;margin-bottom:6px}
.pcard .art img,.pcard .art svg{width:76px;height:76px}

/* ---------- news ---------- */
.news{display:grid;gap:22px;grid-template-columns:1fr}
@media (min-width:860px){.news.c3{grid-template-columns:repeat(3,minmax(0,1fr))}}
.ncard{border:1.5px solid var(--line);border-radius:var(--r);background:var(--paper);padding:22px 24px;display:flex;flex-direction:column;gap:8px}
.ncard time{font-size:14px;color:var(--muted);font-variant-numeric:tabular-nums}
.ncard h3{font-family:var(--display);font-weight:800;font-size:24px;line-height:1.12;letter-spacing:-.02em;margin:0}
.ncard p{margin:0;font-size:16px}
.ncard .more{margin-top:auto;font-family:var(--display);font-weight:700;font-size:16px}
.ncard .more::after{content:" \2192"}
.tagpill{align-self:flex-start;font-size:13px;font-weight:700;padding:2px 10px;border-radius:999px;background:var(--mist);color:var(--ink)}
.tagpill.pub{background:#ece4fb;color:var(--violet)}.tagpill.out{background:#dff3fb;color:#0b5c7a}.tagpill.awd{background:#fff3b0;color:#5c4b00}

/* ---------- team ---------- */
.lead-card{display:grid;gap:28px;grid-template-columns:1fr;border-radius:var(--r);background:var(--ink);color:#e9e7f7;padding:clamp(22px,4vw,40px);align-items:center}
@media (min-width:860px){.lead-card{grid-template-columns:280px minmax(0,1fr)}}
.lead-card img{border-radius:50%;width:100%;max-width:280px;aspect-ratio:1;height:auto;object-fit:cover;box-shadow:0 0 0 5px var(--ink),0 0 0 9px #ffffff22}
.lead-card h2{font-family:var(--display);font-weight:800;font-size:clamp(34px,4.4vw,48px);line-height:1.05;letter-spacing:-.03em;margin:0 0 4px;color:#fff}
.lead-card .role{color:var(--sun);font-weight:700;margin:0 0 14px}
.lead-card p{margin:0 0 12px}
.links{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}
.links a{font-family:var(--display);font-weight:700;font-size:15px;padding:6px 14px;border-radius:10px;border:1.5px solid currentColor;text-decoration:none;color:#fff}
.links a:hover{background:#fff;color:var(--ink)}
.people{display:grid;gap:22px;grid-template-columns:1fr;margin-top:26px}
@media (min-width:720px){.people{grid-template-columns:repeat(3,minmax(0,1fr))}}
.person{border:1.5px solid var(--line);border-radius:var(--r);background:var(--paper);padding:24px}
.avatar{width:96px;height:96px;border-radius:50%;margin:0 0 14px;display:flex;align-items:center;justify-content:center;font-family:var(--display);font-weight:800;font-size:34px;color:var(--ink)}
.person h3{font-family:var(--display);font-weight:800;font-size:24px;line-height:1.1;margin:0 0 4px}
.person .role{font-weight:700;margin:0 0 8px;font-size:15px;color:var(--violet)}
.person p{font-size:16px;margin:0}

/* ---------- placeholders ---------- */
.todo{background:#fff4a8;color:#4a3d00;outline:1.5px dashed #8a7a00;padding:0 4px;border-radius:4px}

/* ---------- footer ---------- */
footer.foot{background:var(--ink);color:#e9e7f7;padding-block:0 30px}
footer.foot::before{content:"";display:block;height:8px;background:var(--spectrum);
  -webkit-mask:radial-gradient(circle,#000 2.4px,transparent 2.8px) 0 50%/11px 8px repeat-x;mask:radial-gradient(circle,#000 2.4px,transparent 2.8px) 0 50%/11px 8px repeat-x;margin-bottom:40px}
.foot .cols{display:grid;gap:28px;grid-template-columns:1fr}
@media (min-width:860px){.foot .cols{grid-template-columns:1.2fr 1fr 1fr}}
.foot h2{font-family:var(--display);font-weight:800;font-size:22px;margin:0 0 10px;color:#fff}
.foot p,.foot li{font-size:15px;margin:0 0 6px}
.foot ul{list-style:none;padding:0;margin:0}
.foot a{color:#fff}
.foot a:hover{color:var(--sun)}
.foot .small{margin-top:30px;padding-top:16px;border-top:1px solid #ffffff26;font-size:13px;color:#bdb9d9}
.hero .dots{margin:0 0 24px}

/* ---------- lab timeline (Gantt) ---------- */
.tl-mock{display:inline-block;font-size:14px;font-weight:700;background:#fff4a8;color:#4a3d00;padding:4px 12px;border-radius:999px;margin-bottom:16px}
.tl-scroll{overflow-x:auto;border:1.5px solid var(--line);border-radius:var(--r);background:var(--paper);padding:18px 20px 10px}
.tl{min-width:680px;font-variant-numeric:tabular-nums}
.tl-row{display:grid;grid-template-columns:190px minmax(0,1fr);gap:14px;align-items:center;min-height:40px;border-top:1px solid var(--mist)}
.tl-row.tl-axis{border-top:0;min-height:30px}
.tl-name{display:flex;flex-direction:column;line-height:1.2;min-width:0}
.tl-name b{font-family:var(--display);font-weight:700;color:var(--ink);font-size:16px}
.tl-name small{font-size:13px;color:var(--muted)}
.tl-track{position:relative;height:100%;min-height:30px;background:repeating-linear-gradient(90deg,transparent 0 calc(20% - 1px),var(--line) calc(20% - 1px) 20%)}
.tl-axis .tl-track{background:none}
.tl-axis .tl-track span{position:absolute;top:6px;transform:translateX(-50%);font-size:13px;font-weight:700;color:var(--muted)}
.tl-axis .tl-track span:first-child{transform:none}
.tl-axis .tl-now{color:#c8102e !important;transform:translateX(-50%) !important}
.tl-bar{position:absolute;top:50%;height:14px;margin-top:-7px;border-radius:999px}
.tl-bar.fade{border-radius:999px 0 0 999px;-webkit-mask:linear-gradient(90deg,#000 calc(100% - 22px),transparent);mask:linear-gradient(90deg,#000 calc(100% - 22px),transparent)}
.tl-tail{position:absolute;top:50%;transform:translateY(-50%);padding-left:8px;white-space:nowrap}
.tl-next{font-size:13px;color:var(--muted);font-style:italic}
.tl::after{content:"";display:none}
.tl-legend{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:12px;font-size:14px;color:var(--muted)}
.tl-legend span{display:inline-flex;align-items:center;gap:6px}
.tl-legend i{width:18px;height:10px;border-radius:999px;display:inline-block}
.tl-legend i.cur-dot{background:linear-gradient(90deg,var(--ink),transparent)}

.ncard.has-img{padding:0;gap:0;overflow:hidden}
.ncard .nimg{display:block;width:100%;max-width:none;aspect-ratio:16/10;object-fit:cover}
.ncard .nbody{padding:22px 24px;display:flex;flex-direction:column;gap:8px;flex:1}
@media (min-width:760px){
.news:not(.c3) .ncard.has-img{flex-direction:row}
.news:not(.c3) .ncard .nimg{width:300px;flex:none;aspect-ratio:auto;height:auto;align-self:stretch}
}
.small-note{margin:0 0 10px;color:var(--muted);font-size:15px}
.fig{margin:0 0 20px}
.fig img{display:block;width:100%;max-width:640px;height:auto;border-radius:var(--r);border:1.5px solid var(--line)}
.fig figcaption{margin-top:8px;font-size:15px;color:var(--muted)}
.person.wide{grid-column:span 2}
.person .hl{list-style:none;margin:14px 0 0;padding:14px 0 0;border-top:1px dotted var(--line);display:grid;gap:8px;font-size:15px}
.person .hl b{font-family:var(--display);color:var(--violet);margin-right:6px;white-space:nowrap}
@media (max-width:760px){.person.wide{grid-column:auto}}
@media (min-width:720px){.person.wide{grid-column:1/3;grid-row:1/3}.people .person:nth-child(2){grid-column:3;grid-row:1}.people .person:nth-child(3){grid-column:3;grid-row:2}}