/* ==========================================================================
   existentials:LAB — site stylesheet
   One file, commented by section. Edit values in :root to change the whole site.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* colour */
  --ink:        #17171A;
  --ink-soft:   #3A3A3E;
  --muted:      #69655D;   /* passes AA on both paper tones */
  --paper:      #F5F3EE;
  --paper-deep: #EAE6DD;
  --rule:       #D8D3C7;
  /* a barely-there wash, used to lift the structured blocks off the page
     without turning them into boxes. Two steps, one for each paper tone. */
  --tint:       #EFECE3;
  --tint-deep:  #E3DFD4;
  --rule-dark:  #3A3A3E;
  --ember:      #A84E2A;

  /* type */
  --serif: "Source Serif 4", "Source Serif Pro", Charter, "Bitstream Charter", Georgia, "Times New Roman", serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Carlito, Helvetica, Arial, sans-serif;

  /* measure + rhythm */
  --measure: 38em;
  --page-max: 1240px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --section-y: clamp(4.5rem, 10vw, 8.5rem);

  /* motion */
  --ease: cubic-bezier(.2, .6, .2, 1);

  /* the colon mark, as a mask so it can take any colour */
  --colon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 57 141'%3E%3Ccircle cx='28.5' cy='28.5' r='28.5'/%3E%3Ccircle cx='28.5' cy='112.5' r='28.5'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   2. Reset
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.0625rem;
  line-height: 1.72;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { display: block; max-width: 100%; height: auto; }
button, input { font: inherit; color: inherit; }
a { color: inherit; }

::selection { background: var(--ink); color: var(--paper); }

/* focus — visible, never removed */
:focus-visible {
  outline: 2px solid var(--ember);
  outline-offset: 3px;
}
.on-ink :focus-visible { outline-color: var(--paper); }

.skip-link {
  position: absolute; left: 0; top: -100%;
  background: var(--ink); color: var(--paper);
  padding: .75rem 1.25rem; z-index: 200;
  font-family: var(--sans); font-size: .875rem;
}
.skip-link:focus { top: 0; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------------------
   3. Layout
   -------------------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.prose { max-width: var(--measure); }
.prose > * + * { margin-top: 1.15em; }
.prose h3 { margin-top: 2.25em; }

/* Section rhythm.

   Sections used to carry padding top AND bottom, so the space between any two
   of them was twice --section-y — a hole big enough to read as a mistake. They
   now carry margins instead, which collapse against each other: the gap
   between two sections is one --section-y, exactly as intended.

   A section that carries its own colour is the exception. There the space has
   to be real padding, because the tint needs room around the words, and the
   change of colour is itself the separator. */
.section { padding-block: 0; margin-block: var(--section-y); }
.section--tight { padding-block: 0; margin-block: clamp(3rem, 6vw, 5rem); }
.section--deep { background: var(--paper-deep); }
.section.section--deep, .section.on-ink,
.section--tight.section--deep, .section--tight.on-ink {
  padding-block: var(--section-y);
}
/* first and last sections still need clearance from the header and footer */
main > .section:first-child, main > .section--tight:first-child { margin-top: var(--section-y); }

/* dark band */
.on-ink {
  background: var(--ink);
  color: var(--paper);
  --rule: var(--rule-dark);
  --muted: #9A958B;
}

/* section head: hairline + numbered label, the site's main structural device */
.section-head {
  border-top: 1px solid var(--rule);
  padding-top: 1.25rem;
  margin-bottom: clamp(2rem, 4vw, 3.25rem);
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  align-items: baseline;
  justify-content: space-between;
}
.eyebrow {
  font-family: var(--sans);
  font-size: .875rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}

.cols {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}
/* a column that should take two tracks on wide screens — and only one on narrow,
   otherwise it forces an implicit second track and the page scrolls sideways */
.cols__wide { grid-column: span 2; }
@media (max-width: 52rem) { .cols__wide { grid-column: auto; } }

/* The hero's moving background: slow-motion footage of walking figures
   ("Walkers Warm"). The slow motion and softening are baked into the file;
   the warm grade and the darkening veil live here, so the page's text always
   sits on near-ink ground. The video starts for everyone except
   reduced-motion or data-saver users — everyone else keeps the plain ink hero. */
.hero-band { position: relative; overflow: hidden; }
.hero-band > .wrap { position: relative; z-index: 1; }
.hero-motion { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hero-motion video {
  width: 100%; height: 100%; object-fit: cover;
  filter: sepia(.35) saturate(.75) brightness(.45) contrast(1.08);
  opacity: 0;
  transition: opacity 2.2s var(--ease);
}
.hero-motion video.is-on { opacity: 1; }
.hero-motion::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(23,23,26,.9) 0%, rgba(23,23,26,.45) 48%,
    rgba(23,23,26,.25) 72%, rgba(23,23,26,.65) 100%);
}
@media (prefers-reduced-motion: reduce) { .hero-motion { display: none; } }

/* --------------------------------------------------------------------------
   4. Type
   -------------------------------------------------------------------------- */
h1, h2, h3, h4 { font-weight: 400; line-height: 1.14; letter-spacing: -.012em; }

.display {
  font-size: clamp(2.4rem, 6vw, 4.75rem);
  line-height: 1.04;
  letter-spacing: -.022em;
}
.h1 { font-size: clamp(2rem, 4.4vw, 3.4rem); line-height: 1.08; }
.h2 { font-size: clamp(1.7rem, 3vw, 2.5rem); }
.h3 { font-size: 1.25rem; line-height: 1.3; }
.lede { font-size: clamp(1.15rem, 1.7vw, 1.3rem); line-height: 1.6; }
.small { font-size: 1rem; }
.meta {
  font-family: var(--sans);
  font-size: .9375rem;
  line-height: 1.5;
  color: var(--muted);
}
.label {
  font-family: var(--sans);
  font-size: .875rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}
em, i { font-style: italic; }
strong { font-weight: 600; }

/* links: underline draws in on hover */
.link {
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 100% 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  padding-bottom: .08em;
  transition: background-size .35s var(--ease), color .2s;
}
.link:hover { color: var(--ember); }
.on-ink .link:hover { color: #E9A183; }

.prose a:not(.link):not(.arrow) {
  color: inherit;
  text-underline-offset: .18em;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--rule);
  transition: text-decoration-color .2s, color .2s;
}
.prose a:not(.link):not(.arrow):hover { color: var(--ember); text-decoration-color: currentColor; }

/* the one call-to-action style on the site: a quiet button */
.arrow {
  display: inline-flex; align-items: center; gap: .55em;
  font-family: var(--sans);
  font-size: .875rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  padding: .6rem 1.05rem;
  border: 1px solid var(--rule);
  background: transparent;
  transition: background .25s var(--ease), border-color .25s, color .25s;
}
.arrow::after { content: "→"; transition: transform .25s var(--ease); }
.arrow:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.arrow:hover::after { transform: translateX(3px); }
.on-ink .arrow { border-color: rgba(245, 243, 238, .38); }
.on-ink .arrow:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); }

/* the mark, used as an element */
.mark {
  width: auto;
  aspect-ratio: 57 / 141;
  display: inline-block;
}
.mark-divider {
  display: flex;
  justify-content: center;
  padding-block: clamp(2.5rem, 6vw, 4rem);
}
.mark-divider svg { height: 2.2rem; }

/* pull quote */
.pull {
  font-size: clamp(1.35rem, 2.6vw, 2rem);
  line-height: 1.32;
  font-style: italic;
  max-width: 22em;
}

/* --------------------------------------------------------------------------
   5. Header
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s, background .3s;
}
.site-header.is-stuck { border-bottom-color: var(--rule); }

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 4.5rem;
}
.brand { display: flex; align-items: center; gap: .75rem; text-decoration: none; }
.brand img { height: 1.35rem; width: auto; }
@media (max-width: 26rem) { .brand img { height: 1.15rem; } }

.nav { display: flex; align-items: center; gap: clamp(1.25rem, 2.5vw, 2.25rem); }
.nav a {
  font-family: var(--sans);
  font-size: .875rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink-soft);
  padding-block: .35rem;
  border-bottom: 1px solid transparent;
  transition: color .2s, border-color .2s;
}
.nav a:hover { color: var(--ink); }
.nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--ink); }

.nav-toggle { display: none; background: none; border: 0; padding: .5rem; cursor: pointer; }
.nav-toggle span {
  display: block; width: 20px; height: 1px; background: var(--ink);
  transition: transform .3s var(--ease), opacity .2s;
}
.nav-toggle span + span { margin-top: 5px; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 46rem) {
  .nav-toggle { display: block; }
  .nav {
    position: fixed; inset: 4.5rem 0 auto 0;
    background: var(--paper);
    border-bottom: 1px solid var(--rule);
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 1rem var(--gutter) 2rem;
    transform: translateY(-8px);
    opacity: 0; visibility: hidden;
    transition: opacity .25s, transform .25s var(--ease), visibility .25s;
  }
  .nav.is-open { opacity: 1; visibility: visible; transform: none; }
  .nav a { width: 100%; padding-block: .9rem; border-bottom: 1px solid var(--rule); font-size: 1rem; }
}

/* --------------------------------------------------------------------------
   6. Hero
   -------------------------------------------------------------------------- */
.hero {
  min-height: min(86vh, 46rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: clamp(4rem, 12vh, 8rem);
  position: relative;
}
.hero__logo { width: min(46rem, 88%); margin-bottom: clamp(2rem, 5vw, 3.25rem); }
.hero__statement { max-width: 18em; font-size: clamp(1.35rem, 2.6vw, 2.1rem); line-height: 1.28; }
.hero__meta {
  margin-top: clamp(2rem, 5vw, 3.5rem);
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule);
  display: flex; flex-wrap: wrap; gap: .5rem 2rem;
}
.hero__cue {
  position: absolute;
  bottom: clamp(1.5rem, 4vh, 3rem);
  right: var(--gutter);
}
.hero__cue svg { height: 1.6rem; opacity: .55; animation: breathe 4s ease-in-out infinite; }
@keyframes breathe { 0%,100% { opacity:.3 } 50% { opacity:.75 } }

/* page header for interior pages */
.page-head { padding-block: clamp(3.5rem, 9vw, 7rem) clamp(2rem, 4vw, 3rem); }
.page-head .lede { margin-top: 1.5rem; max-width: 32em; }

/* --------------------------------------------------------------------------
   7. Dictionary entry
   -------------------------------------------------------------------------- */
.entry { border-block: 1px solid var(--rule); padding-block: clamp(2rem, 4vw, 3rem); }
.entry__word { font-size: clamp(1.8rem, 3.4vw, 2.75rem); }
.entry__pron { font-family: var(--sans); font-size: 1rem; color: var(--muted); margin-left: .6rem; }
.entry__def { margin-top: 1rem; max-width: 40em; font-size: clamp(1.0625rem, 1.4vw, 1.125rem); }
.entry__def i { color: var(--muted); }

/* --------------------------------------------------------------------------
   8. Numbered items (lines of inquiry, goals)
   -------------------------------------------------------------------------- */
.numbered { list-style: none; padding: 0; }
.numbered > li { border-top: 1px solid var(--rule); padding-top: 1.25rem; }
.numbered > li + li { margin-top: 2.25rem; }
.numbered__n {
  font-family: var(--sans); font-size: .875rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted); display: block; margin-bottom: .75rem;
}
.numbered h3 { margin-bottom: .6rem; }

/* architecture table, rendered as hairline rows */
.rows { border-top: 1px solid var(--rule); }
.rows__row {
  display: grid;
  grid-template-columns: minmax(9rem, 1fr) 3fr;
  gap: 1rem 2.5rem;
  padding-block: 1.5rem;
  border-bottom: 1px solid var(--rule);
}
@media (max-width: 40rem) { .rows__row { grid-template-columns: 1fr; gap: .5rem; } }
.rows__row dt { font-family: var(--sans); font-size: .875rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.rows__row dd { margin: 0; }
.rows__row dd + dd { margin-top: .9rem; }

/* --------------------------------------------------------------------------
   9. Project tiles
   -------------------------------------------------------------------------- */
.tiles {
  display: grid;
  gap: clamp(1.25rem, 2.2vw, 1.75rem);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
}
.tile { position: relative; text-decoration: none; display: block; }
.tile__frame {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--paper-deep);
}
.tile__img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .7s var(--ease);
}
/* The caption sits under the picture, close to it, so the two read as one
   thing rather than two. */
.tile__caption { margin-top: .8rem; }

.tile__veil {
  position: absolute; inset: 0;
  background: rgba(23, 23, 26, .82);
  color: var(--paper);
  padding: 1.5rem;
  display: flex; flex-direction: column; justify-content: flex-end;
  opacity: 0;
  transition: opacity .3s var(--ease);
}
/* the colon, watermarked over the picture on hover */
.tile__veil::before {
  content: "";
  position: absolute; top: 1.25rem; right: 1.25rem;
  width: clamp(2.2rem, 18%, 3.6rem); aspect-ratio: 57 / 141;
  background: currentColor;
  opacity: .3;
  -webkit-mask: var(--colon) center / contain no-repeat;
          mask: var(--colon) center / contain no-repeat;
}
.tile__veil p {
  font-size: 1rem; line-height: 1.55;
  transform: translateY(10px);
  transition: transform .35s var(--ease);
}
.tile__veil .arrow { margin-top: 1.1rem; align-self: flex-start; color: var(--paper); border-color: rgba(245,243,238,.4); }
.tile__title { font-size: 1.25rem; line-height: 1.28; }
.tile__line {
  margin-top: .35rem;
  font-family: var(--sans); font-size: .9375rem; line-height: 1.45;
  color: var(--muted);
}

/* Titles run to different lengths, so without this the pictures in a row start
   at different heights. Letting each tile share the grid's rows lines the
   captions, the pictures and the descriptions up across the whole row. Where
   the browser cannot do that, the tiles simply stack as before. */
@supports (grid-template-rows: subgrid) {
  .tile {
    display: grid; grid-template-rows: subgrid; grid-row: span 3;
    /* a subgrid inherits the parent's gap, which would push the picture away
       from its own title. The spacing inside a tile is set by the caption's
       own margin, not by the gap between tiles. */
    row-gap: 0;
  }
}
/* the short description sits below the tile on touch/narrow screens … */
.tile__desc { margin-top: .6rem; font-size: 1rem; line-height: 1.55; color: var(--ink-soft); }

/* On a screen without hover there is no veil, so nothing says "this opens".
   The Read chip inside the description does: the same button the veil shows
   on desktop, sitting under every tile. On hover screens the description is
   hidden and the veil takes over, so the chip never appears twice. */
.tile__more { display: flex; width: max-content; margin-top: .85rem; color: var(--ink); }

/* … and moves into the hover veil only where hover genuinely exists */
@media (hover: hover) and (pointer: fine) {
  .tile__desc { display: none; }
  .tile:hover .tile__img,
  .tile:focus-visible .tile__img { transform: scale(1.035); }
  .tile:hover .tile__veil,
  .tile:focus-visible .tile__veil { opacity: 1; }
  .tile:hover .tile__veil p,
  .tile:focus-visible .tile__veil p { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .tile__img, .tile__veil p { transition: none !important; transform: none !important; }
}

/* (the "archive" tile variant was removed: every project on the site now has
   a page of its own, and the caption occupies the foot of the frame) */
.tiles--archive { grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr)); }
.tiles--archive .tile__frame { aspect-ratio: 3 / 2; }
.tiles--archive .tile__title { font-size: 1.0625rem; }

/* --------------------------------------------------------------------------
   10. Project detail
   -------------------------------------------------------------------------- */
.breadcrumb { font-family: var(--sans); font-size: .875rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.breadcrumb a { text-decoration: none; }
.breadcrumb a:hover { color: var(--ember); }

/* text on the left, the facts on the right — the right column stops the page
   from running out to an empty margin on wide screens */
.project-grid {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: start;
}
/* Both columns scroll with the page. The facts panel used to be sticky, so it
   hung in place while the words moved past it — two different scrolls on one
   page, which reads as a fault rather than a feature. */
@media (min-width: 60rem) {
  .project-grid { grid-template-columns: minmax(0, 1.55fr) minmax(17rem, .9fr); }
}

/* the picture strip, one slide at a time, always the same shape */
.slides { position: relative; margin-bottom: clamp(2.5rem, 5vw, 3.5rem); }
.slides__stage {
  position: relative;
  aspect-ratio: 3 / 2;
  background: var(--paper-deep);
  overflow: hidden;
}
.slides__stage img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  opacity: 0;
  transition: opacity .45s var(--ease);
}
.slides__stage img.is-on { opacity: 1; }
/* The bar under the pictures: progress dashes on one side, the count and the
   two arrows on the other. On a wide screen they share a line. On a phone
   there is not room for all of it at once, so the dashes take a line of their
   own and the count and arrows sit under them — nothing squeezed, nothing cut
   off, and the arrows large enough to hit with a thumb. */
.slides__bar {
  display: flex; align-items: center; gap: 1rem;
  margin-top: .9rem;
}
.slides__dots { display: flex; gap: .45rem; flex: 1 1 auto; flex-wrap: wrap; }
.slides__dot {
  width: 2.25rem; height: 2px; padding: 0; border: 0;
  background: var(--rule); cursor: pointer;
  transition: background .25s;
}
.slides__dot.is-on { background: var(--ink); }
.slides__meta { display: flex; align-items: center; gap: 1rem; flex: 0 0 auto; }
.slides__count {
  font-family: var(--sans); font-size: .875rem; color: var(--muted);
  white-space: nowrap;               /* "1 / 6" must never break across lines */
  font-variant-numeric: tabular-nums;
}
.slides__nav { display: flex; gap: .4rem; }
.slides__btn {
  width: 2.5rem; height: 2.5rem; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--rule); background: transparent; cursor: pointer;
  font-size: 1rem;
  transition: background .2s, border-color .2s, color .2s;
}
.slides__btn:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }

@media (max-width: 34rem) {
  .slides__bar {
    flex-direction: column; align-items: stretch;
    gap: .9rem; margin-top: 1rem;
  }
  /* the dashes shrink to fit however many pictures there are, on one line */
  .slides__dots { flex-wrap: nowrap; gap: .35rem; }
  .slides__dot { width: auto; flex: 1 1 0; min-width: .75rem; height: 3px; }
  .slides__meta { justify-content: space-between; }
  .slides__btn { width: 2.75rem; height: 2.75rem; }   /* 44px: a thumb-sized target */
}

/* the facts, as a readable list rather than a squeezed table */
.facts { border-top: 1px solid var(--ink); }
.facts dl { margin: 0; }
.facts__row { padding-block: 1rem; border-bottom: 1px solid var(--rule); }
.facts dt {
  font-family: var(--sans); font-size: .875rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted); margin-bottom: .35rem;
}
.facts dd { margin: 0; font-size: 1rem; line-height: 1.6; }
.facts__names { display: flex; flex-wrap: wrap; gap: .35rem .5rem; }
.facts__names span { font-size: 1rem; }
.facts__names span:not(:last-child)::after { content: "·"; margin-left: .5rem; color: var(--muted); }

.hero-img { margin-block: clamp(2.5rem, 5vw, 4rem); }
.hero-img img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.hero-img figcaption { margin-top: .75rem; }

.pager {
  display: flex; justify-content: space-between; gap: 2rem;
  border-top: 1px solid var(--rule);
  padding-top: 1.5rem; margin-top: var(--section-y);
  font-family: var(--sans); font-size: .875rem; letter-spacing: .06em; text-transform: uppercase;
}
.pager a { text-decoration: none; }
.pager a:hover { color: var(--ember); }

/* bullets that use the mark */
.marked { list-style: none; padding: 0; }
.marked li { position: relative; padding-left: 1.5rem; }
.marked li + li { margin-top: .7rem; }
.marked li::before {
  content: ""; position: absolute; left: .25rem; top: .62em;
  width: 3px; height: 11px;
  background-image: radial-gradient(circle at 1.5px 1.5px, currentColor 1.5px, transparent 1.6px),
                    radial-gradient(circle at 1.5px 1.5px, currentColor 1.5px, transparent 1.6px);
  background-size: 3px 3px; background-repeat: no-repeat;
  background-position: 0 0, 0 8px;
  opacity: .75;
}

/* --------------------------------------------------------------------------
   11. Publications
   -------------------------------------------------------------------------- */
/* filter panel — one bordered cluster so the controls read as a unit */
.filters-panel {
  border: 1px solid var(--rule);
  background: var(--paper-deep);
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.filters-panel__search {
  display: flex; align-items: center; gap: .85rem;
  padding: 1rem clamp(1rem, 2.5vw, 1.5rem);
  border-bottom: 1px solid var(--rule);
}
.filters-panel__icon { height: 1.05rem; width: auto; flex: 0 0 auto; opacity: .5; }
.filters-panel__row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  gap: 1rem clamp(1rem, 2.5vw, 2rem);
  align-items: end;
  padding: 1.1rem clamp(1rem, 2.5vw, 1.5rem) 1.25rem;
}
@media (max-width: 34rem) {
  .filters-panel__row { grid-template-columns: 1fr; }
  .filters-panel__search { flex-wrap: wrap; }
  .filters-panel__search .search { flex: 1 1 8rem; }
  .filters-panel__search .count { flex: 1 0 100%; margin-top: .3rem; }
}

.search {
  flex: 1 1 auto; min-width: 0;
  border: 0; background: transparent; padding: .35rem 0;
  font-family: var(--serif); font-size: 1.0625rem;
}
.search::placeholder { color: var(--muted); }
.search:focus { outline: none; }
.filters-panel__search:focus-within { box-shadow: inset 0 -2px 0 var(--ink); }

.field { display: flex; flex-direction: column; gap: .35rem; min-width: 0; }
.select {
  appearance: none; -webkit-appearance: none;
  font-family: var(--sans); font-size: .9375rem; color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--rule);
  padding: .6rem 1.9rem .6rem .7rem;
  width: 100%; min-height: 2.6rem; cursor: pointer; border-radius: 0;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right 12px center, right 7px center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.select:hover { border-color: var(--ink); }
.select:focus-visible { outline: 2px solid var(--ember); outline-offset: 1px; }
@media (pointer: coarse) { .select { min-height: 2.9rem; font-size: 1rem; } }

.count { font-family: var(--sans); font-size: .875rem; color: var(--muted); white-space: nowrap; }

.clear-btn {
  font-family: var(--sans); font-size: .875rem; color: var(--muted);
  background: none; border: 0; padding: .6rem 0; cursor: pointer;
  border-bottom: 1px solid var(--rule); align-self: end; justify-self: start;
}
.clear-btn:hover { color: var(--ember); border-color: var(--ember); }

.linkish {
  font: inherit; background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--ember); text-decoration: underline; text-underline-offset: .2em;
}

.pubgroup { margin-top: clamp(2.5rem, 5vw, 4rem); }
.pubgroup > h2 {
  font-size: 1.35rem; border-top: 1px solid var(--ink);
  padding-top: 1rem; margin-bottom: .5rem;
}
.pub {
  display: grid;
  grid-template-columns: 4.5rem 1fr;
  gap: 0 1.5rem;
  padding-block: 1.25rem;
  border-bottom: 1px solid var(--rule);
}
@media (max-width: 40rem) { .pub { grid-template-columns: 1fr; gap: .35rem; } }
.pub__year { font-family: var(--sans); font-size: .875rem; color: var(--muted); padding-top: .2rem; }
/* the whole reference on one run of text, as it reads in a bibliography;
   the lab's own names are set in bold so a reader can find them at a glance */
.pub__cite { font-size: 1.0625rem; line-height: 1.6; }
.pub__cite strong { font-weight: 600; }
.pub__tags { margin-top: .5rem; display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.pub__role {
  font-family: var(--sans); font-size: .875rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted); border: 1px solid var(--rule); padding: .15rem .45rem;
}
.pub__tag {
  font-family: var(--sans); font-size: .875rem; letter-spacing: .06em;
  color: var(--muted); background: none; border: 0; cursor: pointer; padding: .15rem 0;
  text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: .25em;
}
.pub__tag:hover { color: var(--ember); }
.pub a.pub__link { text-decoration: none; border-bottom: 1px solid var(--rule); }
.pub a.pub__link:hover { color: var(--ember); border-color: var(--ember); }

.pub--auto { background: linear-gradient(90deg, color-mix(in srgb, var(--ember) 6%, transparent), transparent 60%); }
.autonote {
  font-family: var(--sans); font-size: .875rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ember);
}
.empty { padding-block: 3rem; color: var(--muted); }

/* --------------------------------------------------------------------------
   12. People
   -------------------------------------------------------------------------- */
.person {
  display: grid;
  grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: start;
  border-top: 1px solid var(--rule);
  padding-top: clamp(2rem, 4vw, 3rem);
}
.person + .person { margin-top: clamp(3rem, 7vw, 5.5rem); }
@media (max-width: 48rem) { .person { grid-template-columns: 1fr; } .person__portrait { max-width: 16rem; } }
.person__portrait img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.person__role { margin-top: .9rem; }
.person__name { font-size: clamp(1.7rem, 3vw, 2.3rem); }
.person__creds { margin-top: .5rem; }
.person__blocks {
  display: block;
  margin-top: clamp(2rem, 4vw, 2.75rem);
  max-width: var(--measure);
}
.person__blocks > div { padding-top: 1.4rem; border-top: 1px solid var(--rule); }
.person__blocks > div + div { margin-top: 1.75rem; }
.person__blocks h3 { font-family: var(--sans); font-size: .875rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: .6rem; }
.person__blocks ul { list-style: none; padding: 0; font-size: 1rem; line-height: 1.6; }
.person__blocks li { position: relative; padding-left: 1.05rem; }
.person__blocks li + li { margin-top: .5rem; }
.person__blocks li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--rule);
}
.person__blocks li a::before { content: none; }
/* the contact links sit under the portrait, so they need no bullet */
.person__portrait .person__links { margin-top: 1rem; }
.person__portrait .person__links a { display: inline-block; margin-right: .9rem; }
.person__blocks li + li { margin-top: .5rem; }

/* founders strip on home */
.founders { display: grid; gap: clamp(1.5rem, 3vw, 3rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.founder img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.founder h3 { margin-top: 1rem; font-size: 1.2rem; }

/* --------------------------------------------------------------------------
   13. Footer
   -------------------------------------------------------------------------- */
.site-footer { background: var(--ink); color: var(--paper); --rule: var(--rule-dark); --muted: #9A958B; margin-top: 0; }
.site-footer .wrap { padding-block: clamp(3rem, 6vw, 5rem); }
.site-footer__grid {
  display: grid; gap: 2.5rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
}
.site-footer img.wordmark { height: 1.1rem; width: auto; }
.site-footer h3 { font-family: var(--sans); font-size: .875rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: .9rem; }
.site-footer ul { list-style: none; padding: 0; font-size: 1rem; }
.site-footer li + li { margin-top: .55rem; }
.site-footer a { text-decoration: none; }
.site-footer a:hover { color: #E9A183; }
.site-footer__base {
  margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--rule);
  display: flex; flex-wrap: wrap; gap: .75rem 2rem; justify-content: space-between;
}

/* invitation band */
.invite { border-top: 1px solid var(--rule); padding-block: clamp(3rem, 6vw, 5rem); }

/* --------------------------------------------------------------------------
   14. Reveal on scroll — deliberately switched off

   This used to fade each section in as you reached it. It also meant that if
   anything at all went wrong — a slow script, a browser that reports an empty
   box, a print or a screenshot — a section could stay invisible and the page
   would look half-empty. Nothing on this site is worth that risk, so the class
   is kept (the markup still carries it) but it now does nothing at all: every
   section is visible from the moment the page loads.
   -------------------------------------------------------------------------- */
.reveal, .reveal.is-in { opacity: 1; transform: none; transition: none; }
@media (prefers-reduced-motion: reduce) { .hero__cue svg { animation: none; } }

/* --------------------------------------------------------------------------
   15. Print
   -------------------------------------------------------------------------- */
@media print {
  .site-header, .site-footer, .controls, .hero__cue, .tile__veil, .tile__more { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .reveal { opacity: 1 !important; transform: none !important; }
}

/* --------------------------------------------------------------------------
   16. Project grid
   -------------------------------------------------------------------------- */
.pgrid {
  display: grid;
  gap: 1px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
}
.pcard {
  box-shadow: 0 0 0 1px var(--rule);
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  display: flex; flex-direction: column; gap: .55rem;
}
.pcard__meta {
  font-family: var(--sans); font-size: .875rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted);
}
.pcard__title { font-size: 1.125rem; line-height: 1.3; }
.pcard__role { font-family: var(--sans); font-size: .875rem; color: var(--ink-soft); }
.pcard__setting { font-family: var(--sans); font-size: .875rem; color: var(--muted); }
.pcard__summary { font-size: 1rem; line-height: 1.6; margin-top: .35rem; }
.pcard a.pcard__link {
  font-family: var(--sans); font-size: .875rem; letter-spacing: .08em;
  text-transform: uppercase; text-decoration: none; margin-top: auto; padding-top: .75rem;
  border-bottom: 1px solid var(--rule); align-self: flex-start;
}
.pcard a.pcard__link:hover { color: var(--ember); border-color: var(--ember); }

/* --------------------------------------------------------------------------
   17. Project page: pictures and links
   -------------------------------------------------------------------------- */
.gallery {
  display: grid;
  gap: clamp(.75rem, 1.5vw, 1.25rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  margin-top: clamp(2.5rem, 5vw, 4rem);
}
.gallery img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.gallery:empty { display: none; }

.linklist { list-style: none; padding: 0; margin-top: 1rem; }
.linklist li + li { margin-top: .55rem; }
#p-links:not(:empty) { margin-top: clamp(2.5rem, 5vw, 3.5rem); }
#p-side + #p-links:empty + * { margin-top: 0; }
#p-links .eyebrow { border-top: 1px solid var(--rule); padding-top: 1.25rem; }

/* --------------------------------------------------------------------------
   18. About page furniture
   Everything on About sits on one of two widths: a reading column (--measure)
   or the full grid. Nothing runs edge to edge as loose text.
   -------------------------------------------------------------------------- */
.section-head__link { flex: 0 0 auto; }

/* numbered statements — used for the goals and the lines of inquiry */
.numbered { display: grid; gap: 1px; background: var(--rule); border-block: 1px solid var(--rule); }
@media (min-width: 52rem) { .numbered { grid-template-columns: repeat(3, 1fr); } }
.numbered__item {
  background: var(--tint);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  display: flex; flex-direction: column; gap: .6rem;
}
.section--deep .numbered__item { background: var(--tint-deep); }
.numbered__n {
  font-family: var(--sans); font-size: .875rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted);
}
.numbered__title { font-size: 1.25rem; line-height: 1.3; }
.numbered__body { font-size: 1rem; line-height: 1.65; color: var(--ink-soft); }

/* the intellectual architecture, as five stacked levels rather than a table.
   The wash marks it out as a structure to be read across rather than down,
   which is what a table does — without drawing a single box. */
.levels {
  background: var(--tint);
  border-top: 1px solid var(--ink);
  padding-inline: clamp(1.1rem, 3vw, 2.25rem);
}
.section--deep .levels { background: var(--tint-deep); }
.level {
  display: grid; gap: .5rem 2.5rem;
  padding-block: clamp(1.4rem, 2.5vw, 1.9rem);
  border-bottom: 1px solid var(--rule);
}
.level:last-child { border-bottom: 0; }
@media (min-width: 46rem) {
  .level { grid-template-columns: minmax(9rem, 14rem) minmax(0, 1fr); gap: 0 2.5rem; }
}
.level__name {
  font-family: var(--sans); font-size: .875rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted);
}
.level__body { font-size: 1rem; line-height: 1.65; max-width: 44em; }
.level__body > * + * { margin-top: .85rem; }
.pillar { display: grid; gap: .25rem; }
.pillar__name { font-weight: 600; }
.pillar__sub { color: var(--muted); font-family: var(--sans); font-size: .875rem; }

/* a quiet framed note — used for the source list and other asides */
.note {
  background: var(--tint);
  border-left: 2px solid var(--rule);
  padding: clamp(1rem, 2vw, 1.4rem) clamp(1rem, 2vw, 1.5rem);
  font-size: 1rem; line-height: 1.65; color: var(--ink-soft);
  max-width: var(--measure);
}
.section--deep .note { background: var(--tint-deep); }

/* the one prose column used across the site: a single continuous measure,
   never split into parallel columns — an argument should read straight down */
.reading { max-width: 38em; }
.reading > * + * { margin-top: 1.15em; }
.reading > .lede + * { margin-top: 1.4em; }

/* The project page opens with its summary as a standfirst. It has to read as
   a deliberate tier between the title and the body — clearly larger, a little
   tighter, with air beneath it — not as body text that came out slightly
   wrong. */
#p-body .lede {
  font-size: clamp(1.35rem, 2.4vw, 1.625rem);
  line-height: 1.45;
  letter-spacing: -.012em;
}
#p-body > .lede + * { margin-top: 1.6em; }

/* footer: the social column */
.site-footer .social a { display: inline-block; }

/* --------------------------------------------------------------------------
   19. Contact page
   -------------------------------------------------------------------------- */
/* The contact page is deliberately bare: a sentence, an address to write to,
   and an address to post to. Nothing else belongs on it — the people are on
   the team page and the argument is on the About page. */
.contact-simple { display: grid; gap: clamp(2rem, 4vw, 3rem); max-width: 34rem; }
.contact-email { font-size: clamp(1.25rem, 2.4vw, 1.75rem); line-height: 1.35; }
.contact-address {
  font-style: normal; line-height: 1.8;
  color: var(--ink-soft);
}

/* --------------------------------------------------------------------------
   20. Rhythm fixes
   -------------------------------------------------------------------------- */
/* the projects page: filters sit close to the first row of tiles */
#tiles-root .section--tight { padding-block: 0; margin-block: 0; }
#tiles-root > section + section { margin-top: clamp(2.25rem, 4vw, 3.25rem); }
#tiles-root > section:first-child .section-head { border-top: 0; padding-top: 0; }
#tiles-root .section-head { margin-bottom: clamp(1.1rem, 2vw, 1.6rem); }
.filters-panel { margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }

/* --------------------------------------------------------------------------
   21. Small type on small screens
   Every label, eyebrow and caption steps up on phones, where the same size
   reads noticeably smaller than it does on a laptop.
   -------------------------------------------------------------------------- */
@media (max-width: 48rem) {
  .eyebrow,
  .label,
  .level__name,
  .numbered__n,
  .facts dt,
  .site-footer h3,
  .person__blocks h3,
  .breadcrumb,
  .pub__tags,
  .pub__link { font-size: .875rem; }

  .meta, .count, .slides__count, .tile__line,
  .site-footer ul, .person__blocks ul,
  .facts dd, .pub__cite, .pub__year,
  .tile__desc, .numbered__body, .level__body { font-size: 1rem; }

  body { font-size: 1.09375rem; }   /* 17.5px */
}