/* ==========================================================================
   Xinyu Fu — personal site
   Design system extracted from CIS 4394 "Agentic AI for Business & Society"
   course deck (Arial Black + Arial; #1E102F / #274CEC / #FF7874 / #ECB8FF /
   #DCFF96 / #FFDD00). Archivo's width axis stands in for Arial Black
   condensed on the web.
   ========================================================================== */

:root{
  /* brand — lifted verbatim from the deck */
  --ink:      #1E102F;
  --paper:    #F6F4F9;
  --white:    #FFFFFF;
  --blue:     #274CEC;
  --coral:    #FF7874;
  --lav:      #ECB8FF;
  --lime:     #DCFF96;
  --yellow:   #FFDD00;

  /* neutrals biased toward the ink's hue, never a flat grey */
  --muted:    #6B5F7D;
  --muted-2:  #574A6B;   /* a notch darker, for prose that has to hold its
                            own beside a large area of photography */
  --faint:    #E4DFEC;
  --wash:     #E9E4F2;   /* a second ground, for a block addressed to someone else */
  --sage:     #EDF1E6;   /* the quietest possible relative of the deck's green */
  --rule:     #1E102F;

  --rule-w:   1px;       /* the line between blocks. It was 2px, which on a page
                            with this many blocks read as scaffolding */
  --pad:      clamp(18px, 4.2vw, 46px);
  --photo-col: clamp(150px, 20vw, 300px);   /* the front page portrait */
  --maxw:     1440px;
}

*{ box-sizing:border-box }

html{ -webkit-text-size-adjust:100% }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"Archivo","Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size:17px;
  line-height:1.6;
  font-variation-settings:"wdth" 100;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block }
a{ color:inherit }

/* One treatment for every link inside running content: brand blue with a quiet
   underline that firms up on hover. Chrome — the nav, the buttons, the brand,
   the stars on the map — keeps its own styling and is deliberately excluded.
   The map page carries no content links, so none of this reaches a dark
   background, where this blue would be unreadable. */
.prose a,
.pubs a,
.proj-links a,
.metrics a,
.venue a,
.people .p-note a,
.finding a,
.strip a,
.foot a,
.credit a,
.sec-head .count a,
.newslist a,
.news-more a,
.news-also a,
.intro a,
.cols a,
.faq a,
.mod > p a,
.cta a:not(.btn){
  color:var(--blue);
  text-decoration:none;
  border-bottom:1.5px solid rgba(39,76,236,.28);
  padding-bottom:1px;
}
.prose a:hover,
.pubs a:hover,
.proj-links a:hover,
.metrics a:hover,
.venue a:hover,
.people .p-note a:hover,
.finding a:hover,
.strip a:hover,
.foot a:hover,
.credit a:hover,
.sec-head .count a:hover,
.newslist a:hover,
.news-more a:hover,
.news-also a:hover,
.intro a:hover,
.cols a:hover,
.faq a:hover,
.mod > p a:hover,
.cta a:not(.btn):hover{ border-bottom-color:var(--blue) }

/* ---------- type roles ---------------------------------------------------- */

.display,
h1,h2,h3{
  font-family:"Archivo","Arial Black","Helvetica Neue",Arial,sans-serif;
  font-weight:800;
  font-variation-settings:"wdth" 82,"wght" 800;
  text-transform:uppercase;
  letter-spacing:-.012em;
  line-height:.94;
  margin:0;
  text-wrap:balance;
}

.mono,
.eyebrow,
.chip,
.metric-label,
.navlinks a,
.rail-links a{
  font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}

.eyebrow{
  font-size:11px;
  letter-spacing:.19em;
  text-transform:uppercase;
  color:var(--muted);
  margin:0 0 14px;
  font-weight:500;
}
.eyebrow--boxed{
  display:inline-block;
  border:var(--rule-w) solid var(--ink);
  padding:4px 9px;
  color:var(--ink);
  margin-bottom:18px;
}

p{ margin:0 0 1em; max-width:66ch }
p:last-child{ margin-bottom:0 }

/* ---------- page frame ---------------------------------------------------- */

.topbar{ height:10px; background:var(--blue) }

.shell{ max-width:var(--maxw); margin:0 auto }

.nav{
  display:flex; align-items:center; justify-content:space-between;
  gap:18px; flex-wrap:wrap;
  padding:16px var(--pad);
  border-bottom:var(--rule-w) solid var(--rule);
}
.brand{
  font-family:"Archivo",Arial,sans-serif;
  font-variation-settings:"wdth" 84,"wght" 800;
  text-transform:uppercase;
  font-size:19px; letter-spacing:.005em;
  text-decoration:none;
}
.navlinks{ display:flex; gap:6px; flex-wrap:wrap }
.navlinks a{
  font-size:12px; letter-spacing:.08em; text-transform:uppercase;
  text-decoration:none; padding:7px 12px; color:var(--muted);
  border:var(--rule-w) solid transparent;
}
.navlinks a:hover{ color:var(--ink); border-color:var(--ink) }
.navlinks a[aria-current="page"]{ background:var(--ink); color:var(--paper) }
.navlinks a.is-cta{ color:var(--ink); border-color:var(--ink) }
.navlinks a.is-cta:hover{ background:var(--ink); color:var(--paper) }
/* on its own page it is the current item, which is filled: keep the label
   readable rather than letting the outline rule paint ink on ink */
.navlinks a.is-cta[aria-current="page"]{ color:var(--paper) }

a:focus-visible,
button:focus-visible{ outline:3px solid var(--blue); outline-offset:2px }

/* ---------- hero: a greeting, and two paragraphs -------------------------
   A name in 53px display caps and a question in 33px display caps, side by
   side, were two headlines competing on the one screen whose job is to say who
   this is. It is a person introducing herself now: a round portrait, one line
   in the serif, and the research question as the last sentence of the second
   paragraph rather than a headline of its own. */

.hero{
  display:grid; grid-template-columns:1fr;
  gap:clamp(22px,3vw,44px);
  margin:0 var(--pad);
  padding:clamp(30px,3.6vw,54px) 0;
  position:relative;
}
@media(min-width:760px){
  .hero{ grid-template-columns:minmax(150px,var(--photo-col)) 1fr; align-items:start }
}
.hero::after{
  content:""; position:absolute; left:0; right:0; bottom:0;
  border-bottom:var(--rule-w) solid var(--rule);
}

.hero-me{ display:flex; flex-direction:column; align-items:center; gap:14px }
.hero-photo{
  width:100%; max-width:var(--photo-col); aspect-ratio:1; height:auto;
  border-radius:50%; object-fit:cover;
}
.hero-links{
  margin:0; padding:0; list-style:none;
  display:flex; flex-direction:column; align-items:center; gap:7px;
  font-size:13.5px; font-family:"IBM Plex Mono",monospace; letter-spacing:.01em;
  text-align:center;
}
.hero-links a{ color:#8C5A6B; text-decoration:none; border-bottom:1px solid rgba(140,90,107,.35) }
.hero-links a:hover{ color:var(--blue); border-bottom-color:var(--blue) }

.hello{
  font-family:"Playfair Display",Georgia,"Times New Roman",serif;
  font-style:italic; font-weight:700; font-variation-settings:normal;
  text-transform:none; letter-spacing:-.012em; line-height:1.05;
  font-size:clamp(30px,3.6vw,50px);
  margin:0 0 clamp(16px,1.6vw,24px); color:var(--ink);
}
/* A 60ch measure in a 900px column left a third of the band empty on the right.
   The measure goes to 70ch and the type up with it, which is still inside what
   is comfortable to read and closes most of the gap. */
.intro{
  font-size:clamp(16.5px,1.35vw,19.5px); line-height:1.68;
  color:var(--muted-2); max-width:70ch; margin:0 0 1em;
}
.intro:last-child{ margin-bottom:0 }
/* a term that must not break across lines, at any width */
.nb{ white-space:nowrap }

/* ---------- the quiet pages ----------------------------------------------
   The contact page asks three things of a reader: what they can write about,
   how a student applies, and who she is advising. None of that needs a
   fluorescent field or a wall of heavy uppercase, so on this page the display
   face steps back to sentence case at reading weights, and only the page title
   is set in the serif. */

.page-quiet h2,
.page-quiet h3{
  text-transform:none; letter-spacing:-.012em;
  font-variation-settings:"wdth" 96,"wght" 680;
}
.page-quiet h2{ font-size:clamp(21px,2vw,27px); margin:0 0 14px; line-height:1.2 }
.page-quiet h3{ font-size:16.5px; margin:0 0 12px; color:var(--ink) }

.page-head{
  display:grid; grid-template-columns:1fr; gap:clamp(26px,3vw,54px);
  margin:0 var(--pad); padding:clamp(30px,3.6vw,54px) 0;
  position:relative;
}
@media(min-width:860px){ .page-head{ grid-template-columns:1.35fr 1fr } }
/* a header with nothing in its second column should not reserve one */
.page-head--solo{ grid-template-columns:1fr !important }
.page-head--solo .intro{ max-width:66ch }
.page-head::after{
  content:""; position:absolute; left:0; right:0; bottom:0;
  border-bottom:var(--rule-w) solid var(--rule);
}
.page-title{
  font-family:"Playfair Display",Georgia,"Times New Roman",serif;
  font-weight:600; font-variation-settings:normal;
  text-transform:none; letter-spacing:-.012em; line-height:1.1;
  font-size:clamp(30px,3.4vw,46px); margin:0 0 clamp(16px,1.6vw,24px);
}

.sec{ margin:0 var(--pad); padding:clamp(30px,3.4vw,50px) 0; position:relative }
.sec::after{
  content:""; position:absolute; left:0; right:0; bottom:0;
  border-bottom:var(--rule-w) solid var(--rule);
}
.sec:last-of-type::after{ border-bottom:0 }
.sec .intro{ max-width:66ch }

/* ---------- modules -------------------------------------------------------
   Publications, teaching and mentoring are each a long single column of type
   on one ground, which reads as one undifferentiated block however well the
   type is set. A module is a band of its own colour: the ground runs the full
   width, the content inside it stays in the page's margin, so the pages break
   into parts without gaining a single box or rule.

   The tint is deliberately almost nothing — white against the paper's faint
   lilac. It should register as a change of surface, not as a highlight. */

.mod{ padding:clamp(28px,3.2vw,46px) var(--pad); position:relative }
.mod > :first-child{ margin-top:0 }
.mod > :last-child{ margin-bottom:0 }
.mod + .mod{ border-top:var(--rule-w) solid var(--rule) }
.mod--tint{ background:var(--white) }
.mod--sage{ background:var(--sage) }
/* a module replaces .sec's own margins, since its ground is the full width */
.sec.mod{ margin:0 }
/* Modules carry the reading type that .prose used to supply. */
.mod h3{ font-size:clamp(19px,1.8vw,24px); margin:0 0 16px; max-width:80ch }
.mod > p{ font-size:16.5px; line-height:1.62; max-width:74ch }
.sec.mod::after{ display:none }

/* three plain columns, no cell backgrounds and no rules between them */
.cols{ display:grid; grid-template-columns:1fr; gap:clamp(22px,2.6vw,42px); margin-top:clamp(24px,2.6vw,38px) }
@media(min-width:760px){ .cols{ grid-template-columns:repeat(3,1fr) } }
.cols ul{ margin:0; padding:0; list-style:none }
.cols li{
  font-size:15.5px; line-height:1.5; color:var(--muted-2);
  padding:9px 0; border-top:1px solid var(--faint);
}
.cols li:first-child{ border-top:0; padding-top:0 }
.cols-go{ margin:20px 0 0 }

/* questions that open when asked, rather than five paragraphs nobody scrolls */
.page-quiet .faq-h{ margin-top:clamp(34px,3.4vw,52px) }
.faq details{ border-top:1px solid var(--faint) }
.faq details:last-child{ border-bottom:1px solid var(--faint) }
.faq summary{
  cursor:pointer; padding:13px 0; font-size:16px; line-height:1.45;
  list-style:none; display:flex; justify-content:space-between; gap:16px;
}
.faq summary::-webkit-details-marker{ display:none }
.faq summary::after{ content:"+"; color:var(--muted); font-family:"IBM Plex Mono",monospace }
.faq details[open] summary::after{ content:"\2212" }
.faq summary:hover{ color:var(--blue) }
.faq details p{
  margin:0 0 16px; font-size:15.5px; line-height:1.6;
  color:var(--muted-2); max-width:70ch;
}

/* ---------- the news band -------------------------------------------------
   Four dated items down the left, where a list belongs; the press story and the
   current course stacked on the right. The course keeps its own ground so it
   reads as the standing thing rather than another item of news, but in the
   palest relative of the deck's green — a full field of it beside a dark map
   was two loud things on one screen. */

/* The band's own edges are drawn inside the page's margin, like everything
   else. A rule that runs past the block above it reads as a loose line. */
.news{
  display:grid; grid-template-columns:1fr;
  margin:0 var(--pad);
  gap:var(--rule-w); background:var(--rule);
  border-top:var(--rule-w) solid var(--rule);
  border-bottom:var(--rule-w) solid var(--rule);
}
@media(min-width:900px){ .news{ grid-template-columns:1fr 1fr } }
.news-side{ display:grid; gap:var(--rule-w); background:var(--rule) }
.news-cell{ background:var(--paper); padding:clamp(22px,2.3vw,34px) clamp(18px,1.9vw,30px) }
.news-cell--teaching{ background:var(--sage) }

/* ---- the list ---- */
/* One grid for the whole list rather than one per row: each row sized its own
   label column, so the stories started at a different x on every line. The rows
   are display:contents so their two halves become cells of the list's grid —
   max-content then holds one column as wide as the longest label and every
   story begins on the same vertical. role="list" is on the <ul> because a list
   item set to display:contents can lose its list semantics to a screen
   reader. */
.newslist{
  margin:0; padding:0; list-style:none;
  display:grid; grid-template-columns:max-content 1fr; column-gap:16px;
}
.newslist li{ display:contents }
.newslist li > *{
  padding:13px 0; border-top:1px solid var(--faint);
  font-size:16px; line-height:1.5;
}
.newslist li:first-child > *{ border-top:0; padding-top:2px }
.newslist .yr{
  font-family:"IBM Plex Mono",monospace; font-size:11px; color:var(--muted);
  letter-spacing:.06em; padding-top:4px; white-space:nowrap;
}
.news-side .newslist li{ font-size:15px }

/* ---- the press story ---- */
/* a news headline is a sentence someone wrote, not a section label, so it does
   not take the uppercase every other h3 on the site gets */
.news-h{
  font-size:clamp(19px,1.65vw,23px); line-height:1.18;
  text-transform:none; letter-spacing:-.012em;
  font-variation-settings:"wdth" 96,"wght" 700;
  margin:0 0 9px; max-width:34ch; text-wrap:balance;
}
.news-h a{ color:var(--ink); text-decoration:none; border-bottom:1px solid var(--faint) }
.news-h a:hover{ border-bottom-color:var(--blue); color:var(--blue) }
.news-outlet{
  font-family:"IBM Plex Mono",monospace; font-size:11.5px; letter-spacing:.11em;
  text-transform:uppercase; color:var(--ink); margin:0 0 8px;
}
.news-note{ font-size:15.5px; line-height:1.55; color:var(--muted-2); margin:0; max-width:52ch }
.news-more, .news-also{ font-size:13.5px; margin:12px 0 0; color:var(--muted) }

/* ---- the course ---- */
.course-name{
  font-family:"Archivo",Arial,sans-serif;
  font-variation-settings:"wdth" 84,"wght" 820;
  text-transform:uppercase; letter-spacing:-.018em; line-height:1;
  font-size:clamp(24px,2.2vw,31px); margin:0 0 10px; color:var(--ink);
  display:flex; align-items:baseline; gap:12px; flex-wrap:wrap;
}
.course-term{
  font-family:"IBM Plex Mono",monospace; font-size:11.5px; letter-spacing:.12em;
  font-variation-settings:normal; color:var(--muted); text-transform:uppercase;
}

/* ---------- the research cards -------------------------------------------
   Six photographs in a 3x2 grid. What is always visible is the least a card
   needs to be chosen between: the picture, what the study is called, and how
   far along it is. The one line of finding waits for the pointer, because a
   grid of six paragraphs is not a grid any more, it is a page of text with
   pictures on it.

   On a phone there is no pointer and nothing is revealed — the card is simply
   a link, which is what it is on a desktop too. Keyboard focus reveals it, so
   the line is not reachable by mouse alone. */

/* The grid sits in the same column as every piece of type on the page. Run
   edge to edge it was the only block flush to the shell, so the heading above
   it and the news below it both looked inset — the page read as if it narrowed
   halfway down. Margin rather than padding, so the ink ground that draws the
   rules between cards stays inside the grid. */
.cards{
  display:grid; grid-template-columns:1fr;
  margin:0 var(--pad) var(--pad);
  gap:var(--rule-w); background:var(--rule);
}
@media(min-width:620px){ .cards{ grid-template-columns:repeat(2,1fr) } }
@media(min-width:1000px){ .cards{ grid-template-columns:repeat(3,1fr) } }

.card{
  position:relative; display:block; overflow:hidden;
  aspect-ratio:4/3; background:var(--ink);
  text-decoration:none; color:var(--white); border-bottom:0;
}
.card img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  /* the same correction the hero photographs get, so the two sets match */
  filter:saturate(.88) contrast(1.04);
}
.card[href$="#edubot"] img{ filter:saturate(.88) contrast(1.04) brightness(.88) }
/* Darkening is what the hover does. It is one property, it cannot reflow
   anything, and it reads as the card coming forward rather than as movement. */
.card-wash{
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg,
    rgba(24,13,38,.10) 0%, rgba(24,13,38,.34) 46%, rgba(24,13,38,.88) 100%);
}
.card:hover .card-wash,
.card:focus-visible .card-wash{
  background:linear-gradient(180deg,
    rgba(24,13,38,.58) 0%, rgba(24,13,38,.74) 46%, rgba(24,13,38,.95) 100%);
}
.card-in{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:clamp(15px,1.5vw,22px);
}
/* the status sits at the top corner, where the category chip sat on the hero
   photographs, and the name sits at the foot in the same two-part setting */
.card-chip{
  position:absolute; top:0; left:0; z-index:2; margin:14px 0 0 16px;
  font-family:"IBM Plex Mono",monospace; font-size:10px;
  letter-spacing:.14em; text-transform:uppercase;
  background:var(--ink); color:var(--white); padding:4px 8px;
}
.card-arrow{
  position:absolute; top:0; right:0; z-index:2; margin:14px 16px 0 0;
  color:var(--white); font-size:14px; line-height:1; opacity:.6;
}
.card:hover .card-arrow, .card:focus-visible .card-arrow{ opacity:1 }
.card-t{
  display:block; font-family:"Archivo",Arial,sans-serif;
  font-variation-settings:"wdth" 82,"wght" 800;
  text-transform:uppercase; letter-spacing:-.012em; line-height:.96;
}
.card-t .plus{
  display:block; font-family:"IBM Plex Mono",monospace;
  font-variation-settings:normal; font-size:10.5px; letter-spacing:.16em;
  opacity:.74; margin-bottom:6px;
}
.card-t .dom{ display:block; font-size:clamp(20px,1.9vw,27px) }
.card-x{ display:block; max-height:0; opacity:0; overflow:hidden }
.card:hover .card-x,
.card:focus-visible .card-x{ max-height:11em; opacity:1; margin-top:11px }
.card-f{
  display:block; font-size:13.5px; line-height:1.46;
  color:rgba(255,255,255,.93);
}
.card-go{
  display:block; margin-top:9px;
  font-family:"IBM Plex Mono",monospace; font-size:10.5px;
  letter-spacing:.12em; text-transform:uppercase; color:var(--lime);
}
@media (prefers-reduced-motion: no-preference){
  .card-wash{ transition:background .32s ease }
  .card-x{ transition:max-height .32s ease, opacity .32s ease, margin-top .32s ease }
}
.card:focus-visible{ outline:3px solid var(--lime); outline-offset:-6px }

/* ---------- doorway into the research map -------------------------------- */

/* The map sits beside her rather than in a band of its own further down. It was
   doing the same job in both places — inviting you in — and one of them was
   also repeating four photographs that the cards below already carry. */
.skylink{
  position:relative; display:flex; flex-direction:column; justify-content:flex-end;
  overflow:hidden; background:#120A1F;
  text-decoration:none; color:#fff; border-bottom:0;
  padding:clamp(22px,2.4vw,32px) clamp(20px,2.2vw,34px);
  min-height:clamp(300px,34vw,460px);
}
.skylink-stars{
  position:absolute; inset:0; width:100%; height:100%;
  /* a slow drift in on hover, anchored on the cluster rather than the middle
     of the card, so the constellation is what appears to come closer */
  transform-origin:66% 50%;
  transition:transform 1.1s cubic-bezier(.22,.61,.24,1);
}
.skylink:hover .skylink-stars,
.skylink:focus-visible .skylink-stars{ transform:scale(1.055) }
@media (prefers-reduced-motion: reduce){
  .skylink-stars{ transition:none }
  .skylink:hover .skylink-stars{ transform:none }
}
/* The map runs the full width of the card and the words sit on top of it,
   so the side the words are on is dimmed and the other side is left clear. */
/* The words sit along the foot of the panel, so the wash comes up from there
   rather than in from the side. */
.skylink-scrim{
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(0deg,#120A1F 0 6%,rgba(18,10,31,.92) 34%,
                             rgba(18,10,31,.45) 62%,rgba(18,10,31,0) 100%);
}
.skylink-in{ position:relative; display:block; max-width:46ch }
.skylink-h{
  display:block;
  font-family:"Archivo",Arial,sans-serif;
  font-variation-settings:"wdth" 78,"wght" 800;
  text-transform:uppercase; letter-spacing:-.018em; line-height:.93;
  font-size:clamp(23px,2.1vw,31px);
  margin-bottom:11px; text-wrap:balance;
}
.skylink-p{
  display:block; color:#B6A9CE; font-size:15px; line-height:1.5;
  max-width:44ch; margin-bottom:18px;
}
.skylink-btn{
  display:inline-block;
  font-family:"IBM Plex Mono",monospace; font-size:12.5px;
  letter-spacing:.1em; text-transform:uppercase;
  border:var(--rule-w) solid #6B5A8C; padding:12px 20px; color:#fff;
}
.skylink:hover .skylink-btn{ background:var(--lime); color:#120A1F; border-color:var(--lime) }
.skylink:focus-visible{ outline:3px solid var(--lime); outline-offset:-6px }

/* ---------- a block addressed to a different audience ---------------------
   The contact page runs three audiences past each other: people who might
   collaborate, students who want to volunteer, and doctoral advising. Set on one
   ground they read as one continuous pitch, and a company or a colleague ends up
   reading the student terms as if they were addressed to them. So the student
   block gets its own field of colour and a tag that names its audience before
   the heading does. */
.band{ border-bottom:var(--rule-w) solid var(--rule) }
.band > *:last-child{ border-bottom:0 }
.band--students{ background:var(--wash) }
/* The audience tag sits on its own line above the heading. It needs a
   full-width line without being a full-width box, so the line is a wrapper
   and the box is the tag inside it — flex:0 0 100% on the tag itself drew a
   700px-wide border around two words. */
.sec-head .sec-tag{ flex:0 0 100%; margin:0 0 10px }
.sec-head .sec-tag .eyebrow{ margin:0 }

/* ---------- section scaffolding ------------------------------------------ */

.sec-head{
  display:flex; align-items:baseline; gap:16px; flex-wrap:wrap;
  padding:var(--pad) var(--pad) 20px;
  border-bottom:var(--rule-w) solid var(--rule);
}
/* On the front page the heading sits directly over its own grid of cards, so
   the rule under it would be a second line a few pixels above the first. */
.sec-head--bare{ border-bottom:0; padding-left:0; padding-right:0; margin:0 var(--pad) }
.sec-head h2{ font-size:clamp(28px,4.2vw,50px) }
.sec-head .count{
  font-family:"IBM Plex Mono",monospace; font-size:12px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--muted);
  margin-left:auto; min-width:0; text-align:right;
}

/* The awards are a module of their own at the top of the page now, in reading
   type. Hung off the corner of the page heading they were neither a heading nor
   a sentence, and sat in the one place nobody reads. */
ul.awards{ margin:0; padding:0; list-style:none }
ul.awards li{
  font-size:16px; line-height:1.55; color:var(--muted-2);
  padding:9px 0; border-top:1px solid var(--faint); max-width:80ch;
}
ul.awards li:first-child{ border-top:0; padding-top:0 }
ul.awards b{ color:var(--ink); font-weight:600 }
.sec-head .count.is-award{
  margin-left:0; background:none; padding:0;
  font-family:inherit; font-size:15.5px; letter-spacing:-.005em;
  text-transform:none; color:var(--ink); font-weight:600;
}

/* ---------- the recruiting block ----------------------------------------- */

.cta{
  background:var(--lime);
  border-bottom:var(--rule-w) solid var(--rule);
  padding:var(--pad);
  display:grid; grid-template-columns:1fr; gap:26px;
}
@media(min-width:920px){ .cta{ grid-template-columns:1.15fr 1fr; gap:56px } }
.cta h2{ font-size:clamp(30px,5vw,60px); margin-bottom:18px }
.cta .lede{ font-size:18.5px; line-height:1.55; max-width:52ch; margin:0 0 20px }
.cta .lede b{ font-weight:700; background:var(--white); box-shadow:4px 0 0 var(--white),-4px 0 0 var(--white) }

.send-list{ margin:0; padding:0; list-style:none; border-top:var(--rule-w) solid var(--ink) }
.send-list li{
  display:grid; grid-template-columns:auto 1fr; gap:14px;
  padding:13px 0; border-bottom:1px solid rgba(30,16,47,.28);
  font-size:15.5px; line-height:1.5;
}
.send-list .n{
  font-family:"IBM Plex Mono",monospace; font-size:11px; letter-spacing:.1em;
  padding-top:3px; color:var(--ink);
}
.send-list b{ font-weight:700 }

/* `a.btn` rather than `.btn`, and placed after the content-link rule, so a
   button inside .prose keeps its own colours instead of turning link-blue —
   which on the button's dark ground was near-unreadable. */
a.btn, .btn{
  display:inline-block;
  background:var(--ink); color:var(--paper);
  padding:16px 26px; text-decoration:none; border-bottom:0;
  font-family:"IBM Plex Mono",monospace;
  font-size:13px; letter-spacing:.09em; text-transform:uppercase;
  border:var(--rule-w) solid var(--ink);
}
a.btn:hover, .btn:hover{ background:var(--coral); color:var(--ink) }
.btn--light{ background:var(--white); color:var(--ink) }
.btn--light:hover{ background:var(--coral) }

/* ---------- generic list pages ------------------------------------------- */

.prose{ padding:var(--pad); max-width:none }
.prose > *{ max-width:74ch }
.prose h3{
  font-size:clamp(19px,2.1vw,25px);
  margin:38px 0 14px; padding-bottom:9px;
  border-bottom:var(--rule-w) solid var(--ink);
  /* The rule under a section heading ends where the text under it ends. Run to
     the full width and on a wide screen it points at half a page of nothing. */
  max-width:80ch;
}
.prose h3:first-child{ margin-top:0 }
/* the same drawn-mark idea as the teaching page, at section level: five long
   lists of citations need something to tell them apart at a glance */
.hico{
  display:inline-block; vertical-align:-3px; width:22px; height:22px;
  margin-right:11px; color:var(--ic,var(--muted));
}
.hico svg{ display:block; width:100%; height:100% }

.pubs{ list-style:none; margin:0; padding:0 }
.pubs li{
  padding:15px 0; border-bottom:1px solid var(--faint);
  font-size:16px; line-height:1.55; max-width:92ch;
}
.pubs b{ font-weight:700 }
/* where a paper has been presented, set quieter than the citation it follows */
.pubs .presented{ display:block; margin-top:5px; font-size:14px; color:var(--muted) }

.pubs .venue{ font-style:italic; color:var(--muted) }
.pubs .status{
  font-family:"IBM Plex Mono",monospace; font-size:10.5px;
  letter-spacing:.1em; text-transform:uppercase;
  border:1px solid var(--ink); padding:2px 7px; margin-left:6px;
  white-space:nowrap; display:inline-block;
}
.pubs .status.is-forthcoming{ background:var(--lime) }

.course{
  display:grid; grid-template-columns:1fr; gap:6px;
  padding:20px 0; border-bottom:1px solid var(--faint); max-width:92ch;
}
@media(min-width:720px){ .course{ grid-template-columns:130px 1fr; gap:24px } }
.course .when{
  font-family:"IBM Plex Mono",monospace; font-size:11.5px;
  letter-spacing:.08em; text-transform:uppercase; color:var(--muted); padding-top:4px;
}
/* A drawn mark per subject, so a page of terms and titles has something to
   scan by. Colours come from the same palette the research map uses, and the
   agent courses carry the very star that stands for them there. */
.course .ico{ display:block; width:26px; height:26px; margin:0 0 9px; color:var(--ic,var(--muted)) }
.course .ico svg{ display:block; width:100%; height:100%; overflow:visible }
.proj-links{
  display:flex; flex-wrap:wrap; gap:9px 20px; margin:0;
  font-family:"IBM Plex Mono",monospace; font-size:11.5px;
  letter-spacing:.09em; text-transform:uppercase;
}

.course h4{
  margin:0 0 5px; font-size:18px; font-weight:700;
  font-family:"Archivo",Arial,sans-serif; font-variation-settings:"wdth" 92,"wght" 700;
}
.course p{ margin:0; font-size:15px; color:var(--muted) }
.quote{
  border-left:var(--rule-w) solid var(--coral);
  padding:4px 0 4px 16px; margin:12px 0 0;
  font-size:15px; line-height:1.55; color:var(--ink);
}
.quote cite{ display:block; margin-top:7px; font-size:12.5px; color:var(--muted); font-style:normal }

/* ---------- people ------------------------------------------------------- */

.people{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr; gap:0 }
@media(min-width:760px){ .people{ grid-template-columns:1fr 1fr; gap:0 40px } }
.people li{ padding:16px 0; border-top:1px solid var(--faint); display:block }
.people .p-name{
  display:block; font-family:"Archivo",Arial,sans-serif;
  font-variation-settings:"wdth" 92,"wght" 700; font-size:18px; margin-bottom:3px;
}
.people .p-name a{ text-decoration:none; border-bottom:2px solid var(--blue) }
.people .p-name a:hover{ background:var(--lime); border-bottom-color:var(--ink) }
.people .p-role{
  display:block; font-family:"IBM Plex Mono",monospace; font-size:11px;
  letter-spacing:.07em; text-transform:uppercase; color:var(--blue); margin-bottom:6px;
}
.people .p-note{ display:block; font-size:14.5px; line-height:1.5; color:var(--muted) }

/* ---------- entry furniture: status chips, authors, findings, figures ----- */

.chip-row{ display:flex; flex-wrap:wrap; gap:7px }
.chip{
  font-size:10.5px; letter-spacing:.11em; text-transform:uppercase;
  padding:5px 10px; border:var(--rule-w) solid var(--ink); color:var(--ink);
  background:var(--white); white-space:nowrap;
}
.chip--venue{ background:var(--ink); color:var(--paper) }
.chip--live{ background:var(--lime) }

.authors{ font-size:14px; color:var(--muted); margin:0 }
.authors b{ color:var(--ink); font-weight:700 }

.finding{ font-size:17px; line-height:1.62; margin:0 }
.finding b{ font-weight:700; background:var(--lime); box-shadow:3px 0 0 var(--lime),-3px 0 0 var(--lime) }

.metrics{
  display:flex; flex-wrap:wrap; gap:0;
  border-top:var(--rule-w) solid var(--ink); border-left:var(--rule-w) solid var(--ink);
}
.metric{
  flex:1 1 150px; padding:11px 13px;
  border-right:var(--rule-w) solid var(--ink); border-bottom:var(--rule-w) solid var(--ink);
}
.metric-value{
  font-family:"Archivo",Arial,sans-serif;
  font-variation-settings:"wdth" 82,"wght" 800;
  font-size:clamp(22px,2.6vw,31px); line-height:1;
  display:block; margin-bottom:6px; font-variant-numeric:tabular-nums;
}
.metric-label{
  font-family:"IBM Plex Mono",monospace;
  font-size:9.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted); display:block; line-height:1.35;
}

/* ---------- the matrix --------------------------------------------------- */

.matrix{
  display:grid; grid-template-columns:1fr;
  border-top:var(--rule-w) solid var(--rule);
  border-bottom:var(--rule-w) solid var(--rule);
}
@media(min-width:900px){ .matrix{ grid-template-columns:186px repeat(3,1fr) } }

.mx-corner{ display:none }
@media(min-width:900px){
  .mx-corner{
    display:flex; align-items:flex-end; padding:14px 16px;
    border-right:var(--rule-w) solid var(--rule); border-bottom:var(--rule-w) solid var(--rule);
  }
  .mx-corner span{
    font-family:"IBM Plex Mono",monospace; font-size:9.5px; letter-spacing:.14em;
    text-transform:uppercase; color:var(--muted);
  }
}
.mx-col{
  padding:14px 18px; border-bottom:var(--rule-w) solid var(--rule);
  border-right:var(--rule-w) solid var(--rule); position:relative;
}
.mx-col:last-of-type{ border-right:0 }
.mx-col::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:6px; background:var(--c) }
.mx-col b{
  display:block; font-family:"Archivo",Arial,sans-serif;
  font-variation-settings:"wdth" 88,"wght" 800; text-transform:uppercase;
  font-size:15px; letter-spacing:.005em;
}
.mx-col i{
  display:block; font-style:normal; font-family:"IBM Plex Mono",monospace;
  font-size:9.5px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--muted); margin-top:4px;
}
.mx-row{
  padding:18px; border-right:var(--rule-w) solid var(--rule);
  border-bottom:var(--rule-w) solid var(--rule); background:var(--ink); color:var(--paper);
}
.mx-row b{
  display:block; font-family:"Archivo",Arial,sans-serif;
  font-variation-settings:"wdth" 84,"wght" 800; text-transform:uppercase;
  font-size:17px; margin-bottom:6px;
}
.mx-row i{ display:block; font-style:normal; font-size:12px; line-height:1.4; opacity:.72 }
.mx-cell{
  padding:10px 14px 14px; border-right:var(--rule-w) solid var(--rule);
  border-bottom:var(--rule-w) solid var(--rule);
  display:flex; flex-direction:column; gap:0;
}
.mx-cell:nth-of-type(4n+1){ border-right:0 }
@media(min-width:900px){ .mx-cell:nth-of-type(4n+1){ border-right:var(--rule-w) solid var(--rule) } }
.matrix > .mx-cell:last-child{ border-right:0 }
.mx-item{
  display:block; text-decoration:none; padding:11px 0;
  border-bottom:1px solid var(--faint);
}
.mx-cell .mx-item:last-child{ border-bottom:0 }
.mx-item:hover .mx-t{ background:var(--c); box-shadow:3px 0 0 var(--c),-3px 0 0 var(--c) }
.mx-t{
  display:inline; font-family:"Archivo",Arial,sans-serif;
  font-variation-settings:"wdth" 96,"wght" 600; font-size:15.5px; line-height:1.3;
}
.mx-s{
  display:block; margin-top:5px; font-family:"IBM Plex Mono",monospace;
  font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted);
}
.mx-empty{ color:var(--faint); font-size:20px; padding:8px 0 }

/* ---------- a project entry, text only for now --------------------------- */

.grp-label{
  margin:0; padding:16px var(--pad) 0;
  font-family:"IBM Plex Mono",monospace; font-size:10px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--muted); max-width:none;
}
.grp-label::before{
  content:""; display:inline-block; width:26px; height:8px;
  background:var(--c); margin-right:10px; vertical-align:middle;
}
.entry{ border-bottom:var(--rule-w) solid var(--rule) }
.entry-body{
  padding:20px var(--pad) 28px; display:flex; flex-direction:column; gap:14px;
  border-left:8px solid var(--c); max-width:none;
}
.entry-body h3{ font-size:clamp(20px,2.2vw,27px); max-width:36ch; line-height:.98 }
.entry-body .proj-links{ font-size:11px; gap:8px 18px }
.entry-body .finding{ max-width:74ch }
.entry-body .finding.is-tbc{ color:var(--muted); font-style:italic }
.entry-body .metrics{ margin-top:4px; max-width:900px }

/* an entry that has a photograph puts it alongside the text */
@media(min-width:900px){
  /* one height for every entry, so the column of them reads as a column */
  .entry.has-art{ display:grid; grid-template-columns:1fr 1fr; align-items:stretch; min-height:452px }
  .entry.has-art .entry-body{ justify-content:center }
  .entry.has-art .entry-art{ border-left:var(--rule-w) solid var(--rule) }
  /* every other entry puts its picture on the left */
  .entry.art-left .entry-art{ order:-1; border-left:0; border-right:var(--rule-w) solid var(--rule) }
}
.entry-art{ position:relative; overflow:hidden; min-height:240px; background:var(--ink) }
.entry-art img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover }
/* a whole object, a book cover say, is shown entire rather than cropped */
.entry-art.is-contain{ background:var(--ink) }
.entry-art.is-contain img{ object-fit:contain; padding:clamp(18px,3vw,40px) }

/* an emoji standing in until the photograph for this project arrives */
.entry-art.is-emoji{
  background:
    radial-gradient(120% 120% at 50% 45%, color-mix(in srgb, var(--c) 22%, var(--paper)) 0%, var(--paper) 72%);
  border-left:var(--rule-w) solid var(--rule);
  display:flex; align-items:center; justify-content:center;
  min-height:200px;
}
.entry-art.is-emoji span{
  font-size:clamp(56px,7vw,96px); line-height:1;
  filter:saturate(.9);
}
@media(max-width:899px){ .entry-art.is-emoji{ border-left:0; border-right:0; border-top:var(--rule-w) solid var(--rule) } }

/* the kind of AI, named on the entry now the page runs by maturity */
.chip--kind{ background:var(--c); border-color:var(--ink); color:var(--ink) }

/* ---------- news strip ---------------------------------------------------- */

.strip{ display:grid; grid-template-columns:1fr; border-bottom:var(--rule-w) solid var(--rule) }
@media(min-width:760px){ .strip{ grid-template-columns:repeat(3,1fr) } }
.strip-cell{ padding:var(--pad); border-right:var(--rule-w) solid var(--rule) }
.strip-cell:last-child{ border-right:0 }
@media(max-width:759px){
  .strip-cell{ border-right:0; border-bottom:var(--rule-w) solid var(--rule) }
  .strip-cell:last-child{ border-bottom:0 }
}
/* This strip carries the good news — an acceptance, an award, a course
   running now. It was set at caption size and read like a sidebar. */
.strip-cell h3{ font-size:17px; margin-bottom:16px; font-variation-settings:"wdth" 88,"wght" 800 }
.strip-cell ul{ margin:0; padding:0; list-style:none; font-size:16.5px; line-height:1.5 }
.strip-cell li{ padding:11px 0; border-top:1px solid var(--faint) }
.strip-cell li:first-child{ border-top:0 }
.strip-cell .yr{ font-family:"IBM Plex Mono",monospace; font-size:12px; color:var(--muted); margin-right:9px }

/* ---------- footer -------------------------------------------------------- */

.foot{ padding:var(--pad) 0; margin:0 var(--pad); display:grid; grid-template-columns:1fr; gap:22px }
@media(min-width:820px){ .foot{ grid-template-columns:1.4fr 1fr 1fr } }
.foot h3{ font-size:14px; margin-bottom:12px; font-variation-settings:"wdth" 88,"wght" 800 }
.foot p, .foot li{ font-size:13.5px; color:var(--muted); line-height:1.55 }
.foot ul{ list-style:none; margin:0; padding:0 }
.foot li{ padding:4px 0 }

.foot .credit{ font-size:12px; line-height:1.5 }

.cr-h{ font-family:"IBM Plex Mono",monospace; font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted); margin:28px 0 10px; font-weight:500 }

/* a publication written in a language other than the page's */
.lang{ font-family:"IBM Plex Mono",monospace; font-size:10px; letter-spacing:.09em;
  text-transform:uppercase; color:var(--muted); border:1px solid var(--rule);
  padding:1px 6px; margin-left:6px; white-space:nowrap; vertical-align:1px }

/* the service list is a short list of roles, not a bibliography */
.pubs.service li{
  padding:7px 0 7px 18px; border-bottom:0; font-size:15px; position:relative;
}
.pubs.service li::before{
  content:"\2022"; position:absolute; left:2px; top:7px; color:var(--muted);
}