/* FOiL — Future of Information Lab
   Site stylesheet. Colours and fonts come from the FOiL Design Language v1
   (Plum & Lime colourway). Components use the role tokens below, never hex
   values, so a colourway change only touches this block.

   Layout: one reading column, text first, in the style of an academic
   homepage. Plum carries text, rules and buttons; lime is used only as a
   fill (active nav underline, section rules, portrait offset). */

:root {
  /* palette — design language tokens */
  --foil-ink: #2B2229;
  --foil-plum: #5D4954;
  --foil-plum-700: #754F5B;
  --foil-plum-500: #7D6167;
  --foil-slate: #3B7080;
  --foil-lime: #ADE25D;
  --foil-butter: #F2E47E;
  --foil-blush: #F9E0D9;
  --foil-ground: #FCFAF7;
  --foil-line: #E6DEDA;

  /* roles (light) */
  --ground: var(--foil-ground);
  --line: var(--foil-line);
  --rule: #5A3F4D; /* the plum of the logo artwork, so the mark and the rule read as one */
  --text: var(--foil-ink);
  --text-2: var(--foil-plum-700);
  --text-3: var(--foil-plum-500);
  --heading: var(--foil-plum);
  --link: var(--foil-slate);
  --accent: var(--foil-lime);
  --btn-bg: var(--foil-plum);
  --btn-text: #FFFFFF;
  --btn-hover: var(--foil-plum-700);
  --photo: var(--foil-blush);
  --selection: var(--foil-butter);
  --card: #F4EFEB;
  --shadow: rgba(43, 34, 41, .35);


  /* type */
  --display: "Newsreader", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --body: "Inter", "Helvetica Neue", Arial, system-ui, sans-serif;

  --page: 880px;
  --gutter: clamp(16px, 4vw, 32px);
  --radius: 4px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground: #2B2229; --line: #4A3D43; --rule: #F8DFD8;
    --text: #F3ECE8; --text-2: #D9CBC9; --text-3: #B9A7A8; --heading: #F9E0D9; --link: #9CCFD9;
    --btn-bg: #F9E0D9; --btn-text: #2B2229; --btn-hover: #FFFFFF;
    --photo: #3A2F35;
    --selection: rgba(242, 228, 126, .35);
    --card: #362B31; --shadow: rgba(0, 0, 0, .7);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --ground: #2B2229; --line: #4A3D43; --rule: #F8DFD8;
  --text: #F3ECE8; --text-2: #D9CBC9; --text-3: #B9A7A8; --heading: #F9E0D9; --link: #9CCFD9;
  --btn-bg: #F9E0D9; --btn-text: #2B2229; --btn-hover: #FFFFFF;
  --photo: #3A2F35;
  --selection: rgba(242, 228, 126, .35);
  --card: #362B31; --shadow: rgba(0, 0, 0, .7);
  color-scheme: dark;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--text);
  font: 400 17px/1.65 var(--body);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; }
a { color: var(--link); text-underline-offset: .18em; }
::selection { background: var(--selection); }
:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
p { margin: 0 0 1em; max-width: 70ch; }
h1, h2, h3 { color: var(--heading); margin: 0; text-wrap: balance; }
h1 { font: 500 34px/1.15 var(--display); letter-spacing: -0.01em; margin-bottom: 28px; }
h2 { font: 500 25px/1.25 var(--display); }
h3 { font: 600 17px/1.4 var(--body); margin: 24px 0 10px; }

.wrap { max-width: var(--page); margin-inline: auto; padding-inline: var(--gutter); }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 8px; top: 8px; z-index: 10; background: var(--ground); padding: 8px 12px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.btn {
  display: inline-block; padding: 11px 20px; border-radius: var(--radius);
  background: var(--btn-bg); color: var(--btn-text); text-decoration: none;
  font: 600 15px/1.2 var(--body);
}
.btn:hover { background: var(--btn-hover); }

/* ---------- header ----------
   Two rows: the masthead (full name) and the bar (menu + toggle). The whole
   header is sticky with a negative top equal to the masthead height, so the
   masthead scrolls away and the bar pins to the top. The header never changes
   height, so the page never jumps. Once pinned, a script adds .is-stuck and
   the compact logo + "FOiL" slides into the bar.
   The bar's bottom padding lifts the menu, logo and toggle onto one line and
   leaves a clear gap between the lime current-page underline and the plum
   rule, so the two never touch. */
:root { --masthead-h: 92px; --bar-h: 56px; }
html { scroll-padding-top: calc(var(--bar-h) + 16px); }
.site-header {
  position: sticky; top: calc(env(safe-area-inset-top, 0px) - var(--masthead-h)); z-index: 20;
  background: var(--ground); border-bottom: 2px solid var(--rule);
  transition: box-shadow .2s ease;
}
.site-header.is-stuck { box-shadow: 0 6px 16px -12px var(--shadow); }
.masthead { height: var(--masthead-h); display: flex; align-items: center; }

.brand { display: inline-flex; align-items: center; text-decoration: none; color: var(--heading); }
.brand img { width: auto; }
.brand .logo-dark { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .brand .logo-light { display: none; }
  :root:not([data-theme="light"]) .brand .logo-dark { display: inline; }
}
:root[data-theme="dark"] .brand .logo-light { display: none; }
:root[data-theme="dark"] .brand .logo-dark { display: inline; }

.brand-full { gap: 14px; }
.brand-full img { height: 52px; }
/* the name has no descenders, so its line box sits high: nudge it down so the
   capitals sit on the row's centre line */
.wordmark { font: 500 clamp(26px, 4.2vw, 36px)/1.1 var(--display); letter-spacing: -0.01em; white-space: nowrap; position: relative; top: 0.13em; }

.bar { display: flex; align-items: center; gap: 0 22px; height: var(--bar-h); padding-bottom: 8px; }
.brand-compact {
  gap: 8px; flex: none; overflow: hidden;
  max-width: 0; margin-right: -22px; opacity: 0; visibility: hidden;
  transition: max-width .3s ease, margin-right .3s ease, opacity .2s ease, visibility .3s;
}
.is-stuck .brand-compact { max-width: 140px; margin-right: 0; opacity: 1; visibility: visible; }
.brand-compact img { height: 34px; }
.wordmark-short { font: 500 25px/1 var(--display); letter-spacing: 0.01em; white-space: nowrap; }
/* the i in FOiL: a dotless i with a lime dot, as in the logo */
.foil-i { position: relative; display: inline-block; }
.foil-i::after {
  content: ""; position: absolute; left: 50%; top: -0.06em; width: 0.24em; height: 0.24em;
  border-radius: 50%; background: var(--accent); transform: translateX(-50%);
}

.site-nav { min-width: 0; }
.site-nav ul {
  display: flex; gap: 0 28px; list-style: none; margin: 0; padding: 0;
  overflow-x: auto; scrollbar-width: none;
}
.site-nav ul::-webkit-scrollbar { display: none; }
.site-nav li { flex: none; display: flex; }
.site-nav a {
  display: block; padding: 9px 2px 6px; color: var(--text); text-decoration: none;
  font-size: 17px; font-weight: 500; line-height: 1.2; border-bottom: 3px solid transparent; white-space: nowrap;
}
.site-nav a:hover { border-bottom-color: var(--line); }
.site-nav a[aria-current="page"] { border-bottom-color: var(--accent); }

.theme-toggle {
  margin-left: auto; flex: none;
  display: inline-grid; place-items: center; width: 38px; height: 38px; padding: 0; cursor: pointer;
  background: transparent; color: var(--text); border: 1.5px solid var(--line); border-radius: 50%;
}
.theme-toggle:hover { border-color: var(--text-3); }
.theme-toggle svg { display: block; flex: none; }
.theme-toggle .icon-sun { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .icon-sun { display: block; }
  :root:not([data-theme="light"]) .theme-toggle .icon-moon { display: none; }
}
:root[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }

/* wider screens: the mark stands in its own column on the left, spanning both
   rows, with the name and the menu left-aligned beside it. When the bar pins,
   the mark fades out and the compact logo takes its place in the same column,
   so the menu never moves. */
@media (min-width: 561px) {
  :root { --masthead-h: 68px; --bar-h: 62px; --mark: 120px; --mark-col: calc(var(--mark) + 22px); }
  .masthead, .bar { position: relative; padding-left: calc(var(--gutter) + var(--mark-col)); }
  /* extra room under the menu keeps the foot of the mark clear of the rule */
  .bar { padding-bottom: 14px; }
  /* a heavier rule to carry the larger mark standing on it */
  .site-header { border-bottom-width: 3px; }
  .brand-full img {
    /* the foot of the stem stands on the rule, as if growing out of it (the
       image has a sliver of empty space under the stem, hence the fraction) */
    position: absolute; left: var(--gutter); height: var(--mark);
    bottom: calc(-1 * var(--bar-h) - 1px - var(--mark) * 4 / 256);
    transition: opacity .2s ease;
  }
  /* drop the name towards the menu so the two read as one block beside the mark */
  .wordmark { top: calc(0.13em + 10px); }
  .is-stuck .brand-full img { opacity: 0; }
  .brand-compact {
    position: absolute; left: var(--gutter); top: 0; bottom: 14px;
    max-width: none; margin-right: 0; overflow: visible;
    transition: opacity .2s ease, visibility .2s;
  }
  .is-stuck .brand-compact { max-width: none; }
}

/* small tablets: a slightly smaller mark and tighter menu so all four items fit */
@media (min-width: 561px) and (max-width: 680px) {
  :root { --mark: 100px; }
  .site-nav ul { gap: 0 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .site-header, .brand-compact, .brand-full img { transition: none; }
}

/* ---------- page body ---------- */
main { padding-block: 40px 48px; }
section + section { margin-top: 48px; }
.section-title { padding-bottom: 8px; margin-bottom: 18px; border-bottom: 3px solid var(--accent); }

/* about */
.lead { font-size: 19px; line-height: 1.6; }
.dir-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; counter-reset: dir; }
@media (min-width: 840px) { .dir-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.dir-card { background: var(--card); border-top: 3px solid var(--accent); border-radius: 0 0 var(--radius) var(--radius); padding: 18px 18px 20px; display: flex; flex-direction: column; gap: 8px; min-width: 0; counter-increment: dir; }
.dir-card h3 { margin: 0; font: 500 21px/1.25 var(--display); color: var(--heading); }
.dir-card h3::before { content: counter(dir) ". "; color: var(--text-3); }
.dir-card p { margin: 0; font-size: 15px; line-height: 1.55; }
.dir-card .dir-themes { font-size: 13px; color: var(--text-3); }
.dir-card .more { margin-top: auto; padding-top: 6px; font-size: 15px; font-weight: 500; }

.news { list-style: none; margin: 0; padding: 0; }
.news li { padding-block: 12px; border-bottom: 1px solid var(--line); }
.news li:first-child { padding-top: 0; }
.news li:last-child { padding-bottom: 0; border-bottom: 0; }
.news time { display: block; font-size: 14px; font-weight: 600; color: var(--text-2); font-variant-numeric: tabular-nums; }
.news p { margin: 2px 0 0; }

/* research */
.direction { scroll-margin-top: 16px; }
.direction .num { color: var(--text-3); }
.themes { font-size: 15px; color: var(--text-2); }
.themes span { font-weight: 600; color: var(--text); margin-right: 6px; }
.label { font: 600 15px/1.4 var(--body); color: var(--text); margin: 8px 0 12px; }
.papers { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 16px; }
.papers.single { grid-template-columns: minmax(0, 1fr); max-width: 620px; }
.paper { background: var(--card); border-radius: var(--radius); padding: 18px 18px 20px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.paper h4 { margin: 0; font: 600 16px/1.4 var(--body); color: var(--heading); }
.paper .venue { margin: 0; font-size: 13px; font-style: italic; color: var(--text-3); }
.paper p { margin: 0; font-size: 15px; line-height: 1.55; }
.btn-paper {
  align-self: flex-start; margin-top: auto; padding: 7px 14px; border: 1.5px solid currentColor; border-radius: var(--radius);
  color: var(--link); font: 600 14px/1.2 var(--body); text-decoration: none;
}
.paper p:last-of-type { margin-bottom: 10px; }
.btn-paper:hover { background: var(--ground); }

/* members */
.people { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 48px 40px; }
.person { min-width: 0; }
.portrait {
  display: block; width: 200px; aspect-ratio: 1 / 1; height: auto; object-fit: cover;
  background: var(--photo); box-shadow: 8px 8px 0 var(--accent); margin: 0 8px 26px 0;
}
.person h2 { font-size: 24px; }
.person .role { font-size: 15px; font-weight: 500; color: var(--text-2); margin: 4px 0 10px; }
.person p { font-size: 16px; line-height: 1.55; }
.links { display: flex; flex-wrap: wrap; gap: 4px 16px; list-style: none; margin: 0; padding: 0; font-size: 15px; }

/* join */
.steps { margin: 0 0 24px; padding-left: 1.4em; max-width: 70ch; }
.steps li { padding-left: 4px; }
.steps li + li { margin-top: 8px; }

/* ---------- footer ---------- */
.site-footer { border-top: 1px solid var(--line); font-size: 14px; color: var(--text-3); }
.site-footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 24px; padding-block: 20px 32px; }
.site-footer p { margin: 0; }
.site-footer a { color: inherit; }

@media (max-width: 560px) {
  h1 { font-size: 30px; }
  .lead { font-size: 18px; }
  /* phones: the day/night button moves up beside the full name, so the
     pinned bar only has to fit FOiL and the four menu items */
  :root { --masthead-h: 80px; }
  .masthead { padding-right: calc(var(--gutter) + 46px); }
  .brand-full { gap: 10px; }
  .brand-full img { height: 46px; }
  /* as large as the row allows beside the mark and the day/night button */
  .wordmark { font-size: clamp(19px, calc((100vw - 140px) / 11.2), 26px); }
  .theme-toggle { position: absolute; right: var(--gutter); top: calc((var(--masthead-h) - 38px) / 2); }
  .bar { gap: 0 12px; }
  .brand-compact { gap: 6px; margin-right: -12px; }
  .brand-compact img { height: 28px; }
  .wordmark-short { font-size: 21px; }
  .site-nav ul { gap: 0 14px; }
  .site-nav a { font-size: 15px; }
}
/* narrow phones: the pinned bar shows just the mark, so all four menu items fit */
@media (max-width: 420px) {
  .wordmark-short { display: none; }
}