@font-face{font-family:"Inter Tight";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/inter-tight-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Inter Tight";font-style:normal;font-weight:700;font-display:swap;src:url(fonts/inter-tight-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Inter Tight";font-style:normal;font-weight:900;font-display:swap;src:url(fonts/inter-tight-latin-900-normal.woff2) format("woff2")}
/*
  Design tokens for the website and PDFs, direction C, Score, chosen by Eric on 2026-09-25.
  Every font, colour, line and space the website, the CV and the PDFs use comes from here (rule 12),
  and changing a value here changes every page. The portal keeps its own tokens in tokens.css.
*/
:root {
  /* Type. One family, Inter Tight, used heavy and in capitals for headings and plain for reading. */
  --font-family: "Inter Tight", system-ui, sans-serif;
  --font-weight-body: 400;
  --font-weight-bold: 700;
  --font-weight-heavy: 900;
  --text-size-body: 16px;
  --text-size-small: 13px;
  --text-size-tiny: 12px;
  --text-size-card-title: 22px;
  --text-size-page-title: 60px;
  --text-size-banner: 88px;
  --line-height-body: 1.5;
  --line-height-tight: 0.95;
  --letter-spacing-heading: -0.03em;
  --letter-spacing-banner: -0.045em;
  --reading-width: 66ch;

  /* Colour. An off-white page, black ink and lines, and two colour blocks. */
  --colour-page: #fffdf7;
  --colour-ink: #111111;
  --colour-muted: #555555;
  --colour-line: #111111;
  --colour-accent: #ff4a1c; /* orange: the banner, hovers */
  --colour-block: #2b50ff; /* blue: title panels, labels */
  --colour-on-colour: #fffdf7; /* text on orange or blue */
  --colour-video: #000000;

  /* Lines and space. Thick black rules divide everything, like a score's staves. */
  --line-weight: 3px;
  --space-1: 8px;
  --space-2: 14px;
  --space-3: 18px;
  --space-4: 28px;
  --space-5: 48px;

  /* Images. Cards crop to 16:10, gallery tiles to squares, the lead image to at most 78% of the screen. */
  --image-card-ratio: 16 / 10;
  --image-tile-ratio: 1 / 1;
  --image-lead-max-height: 78vh;
  --video-ratio: 16 / 9;
}

/*
  The CV's layout, shared by the portal's preview, the website's CV page and the CV PDF.
  Every font, colour and line comes from site-tokens.css.
*/
.cv {
  background: var(--colour-page);
  color: var(--colour-ink);
  font: var(--font-weight-body) var(--text-size-body) / var(--line-height-body) var(--font-family);
  border-top: var(--line-weight) solid var(--colour-line);
}
.cv a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.cv a:hover { color: var(--colour-accent); }
.cv p { margin: 0; }
.cv-intro { padding: var(--space-3) var(--space-4); border-bottom: var(--line-weight) solid var(--colour-line); font-weight: var(--font-weight-bold); }
.cv-section { display: grid; grid-template-columns: 260px 1fr; border-bottom: var(--line-weight) solid var(--colour-line); }
.cv-section h2 {
  font: var(--font-weight-heavy) var(--text-size-small) / 1.3 var(--font-family);
  text-transform: uppercase;
  margin: 0;
  padding: var(--space-3) var(--space-4);
  border-right: var(--line-weight) solid var(--colour-line);
}
.cv-section > div { padding: 6px var(--space-4); }
.cv-section ul { margin: 0; padding: 0; list-style: none; }
.cv-section li { padding: 9px 0; border-bottom: 1px solid var(--colour-line); }
.cv-section li:last-child { border-bottom: 0; }
.cv-section li ul li { border: 0; padding: 4px 0 0; color: var(--colour-muted); font-size: var(--text-size-small); }

/* On paper: narrower heading column, smaller type, and no row split across pages where it can be helped. */
@media print {
  @page { margin: 14mm; }
  .cv { font-size: 10pt; border-top-width: 2px; }
  .cv-section { grid-template-columns: 38mm 1fr; border-bottom-width: 2px; }
  .cv-section h2 { padding: 8px 10px; border-right-width: 2px; font-size: 8pt; }
  .cv-section > div { padding: 2px 10px; }
  .cv-section li { padding: 4px 0; break-inside: avoid; }
  .cv-intro { padding: 8px 10px; border-bottom-width: 2px; }
  .cv a { text-decoration: none; }
}

/*
  Running text such as the About page, shared by the website and the portal's preview.
  Every font, colour and line comes from site-tokens.css.
*/
.prose {
  background: var(--colour-page);
  color: var(--colour-ink);
  font: var(--font-weight-body) var(--text-size-body) / var(--line-height-body) var(--font-family);
  padding: var(--space-5) var(--space-4);
  border-bottom: var(--line-weight) solid var(--colour-line);
  columns: 2 32ch;
  column-gap: var(--space-5);
}
.prose p { margin: 0 0 1em; break-inside: avoid; }
.prose h2 {
  font: var(--font-weight-heavy) var(--text-size-small) / 1 var(--font-family);
  text-transform: uppercase;
  margin: 0 0 var(--space-2);
  column-span: all;
}
.prose h2:not(:first-child) { margin-top: var(--space-4); }
.prose a { color: inherit; }

/*
  The website's layout in direction C, Score. Every font, colour, line and space comes from
  site-tokens.css (rule 12). The CV's rows are in cv.css.
*/
* { box-sizing: border-box; }
body {
  background: var(--colour-page);
  color: var(--colour-ink);
  font: var(--font-weight-body) var(--text-size-body) / var(--line-height-body) var(--font-family);
  margin: 0;
  overflow-x: hidden;
}
a { color: inherit; }
img { max-width: 100%; }

/* Header and menu */
.site-header { display: grid; grid-template-columns: 1fr auto; border-bottom: var(--line-weight) solid var(--colour-line); }
.site-name {
  font: var(--font-weight-heavy) 34px / 1 var(--font-family);
  padding: 22px var(--space-4);
  text-transform: uppercase;
  letter-spacing: -0.02em;
  border-right: var(--line-weight) solid var(--colour-line);
  text-decoration: none;
}
.site-nav { display: flex; }
.site-nav a {
  padding: 0 22px;
  display: flex;
  align-items: center;
  border-left: var(--line-weight) solid var(--colour-line);
  text-decoration: none;
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  font-size: var(--text-size-small);
}
.site-nav a[aria-current="page"] { background: var(--colour-ink); color: var(--colour-page); }
.site-nav a:hover:not([aria-current="page"]) { color: var(--colour-accent); }

/* The orange banner at the top of section pages */
.banner {
  font: var(--font-weight-heavy) var(--text-size-banner) / 0.92 var(--font-family);
  padding: var(--space-5) var(--space-4);
  letter-spacing: var(--letter-spacing-banner);
  text-transform: uppercase;
  background: var(--colour-accent);
  color: var(--colour-on-colour);
  border-bottom: var(--line-weight) solid var(--colour-line);
  margin: 0;
}

/* Filters above the works grid */
.filters {
  padding: var(--space-2) var(--space-4);
  border-bottom: var(--line-weight) solid var(--colour-line);
  font-weight: var(--font-weight-bold);
  font-size: var(--text-size-small);
  text-transform: uppercase;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
  align-items: center;
}
.filters button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
  text-transform: inherit;
  padding: 3px var(--space-1);
  margin-left: calc(-1 * var(--space-1));
}
.filters button:hover { color: var(--colour-accent); }
.filters button[aria-pressed="true"], .filters button[aria-pressed="true"]:hover { background: var(--colour-ink); color: var(--colour-page); }
.filters .count { margin-left: var(--space-1); opacity: 0.6; }

/* Grids of cards and tiles. Each draws its own right and bottom rule, so a part-filled row leaves plain page. */
.grid { display: grid; grid-template-columns: repeat(3, 1fr); margin-right: calc(-1 * var(--line-weight)); }
.card {
  background: var(--colour-page);
  text-decoration: none;
  display: block;
  border-right: var(--line-weight) solid var(--colour-line);
  border-bottom: var(--line-weight) solid var(--colour-line);
}
.card[hidden] { display: none; }
.card img, .card .no-image {
  width: 100%;
  aspect-ratio: var(--image-card-ratio);
  object-fit: cover;
  display: block;
  border-bottom: var(--line-weight) solid var(--colour-line);
}
.card .no-image { background: var(--colour-block); }
.card h3 { font: var(--font-weight-bold) var(--text-size-card-title) / 1.1 var(--font-family); margin: var(--space-2) var(--space-3) 4px; letter-spacing: -0.01em; }
.card:hover h3 { color: var(--colour-accent); }
.card p {
  margin: 0 var(--space-3) var(--space-3);
  font-size: var(--text-size-tiny);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  color: var(--colour-block);
}

/* A work, group or persona page */
.back {
  display: block;
  padding: var(--space-2) var(--space-4);
  border-bottom: var(--line-weight) solid var(--colour-line);
  font-weight: var(--font-weight-bold);
  font-size: var(--text-size-small);
  text-transform: uppercase;
  text-decoration: none;
}
.back:hover { color: var(--colour-accent); }
.lead { display: block; width: 100%; max-height: var(--image-lead-max-height); object-fit: cover; border-bottom: var(--line-weight) solid var(--colour-line); }
.record { display: grid; grid-template-columns: 1fr 1.5fr; align-items: start; border-bottom: var(--line-weight) solid var(--colour-line); }
.record > div { padding: var(--space-5) var(--space-4); }
/* The title panel stays its own size and follows the reader down a long description. */
.record > .panel {
  position: sticky;
  top: 0;
  background: var(--colour-block);
  color: var(--colour-on-colour);
  border-bottom: var(--line-weight) solid var(--colour-line);
  margin-right: calc(-1 * var(--line-weight));
}
.record > .text { border-left: var(--line-weight) solid var(--colour-line); min-height: 100%; }
.record h1 {
  font: var(--font-weight-heavy) var(--text-size-page-title) / var(--line-height-tight) var(--font-family);
  margin: 0 0 24px;
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-heading);
  overflow-wrap: anywhere;
}
.meta { font-weight: var(--font-weight-bold); font-size: var(--text-size-small); text-transform: uppercase; line-height: 2; }
.meta a { color: inherit; }
.text p { max-width: var(--reading-width); margin: 0 0 1em; white-space: pre-line; }

.section-title {
  font: var(--font-weight-heavy) var(--text-size-small) / 1 var(--font-family);
  text-transform: uppercase;
  padding: var(--space-2) var(--space-4);
  border-bottom: var(--line-weight) solid var(--colour-line);
  margin: 0;
}
.videos { display: grid; grid-template-columns: repeat(2, 1fr); margin-right: calc(-1 * var(--line-weight)); }
.videos .video:first-child { grid-column: 1 / -1; }
.video {
  background: var(--colour-video);
  aspect-ratio: var(--video-ratio);
  border-right: var(--line-weight) solid var(--colour-line);
  border-bottom: var(--line-weight) solid var(--colour-line);
}
.video iframe { width: 100%; height: 100%; border: 0; display: block; }
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); margin-right: calc(-1 * var(--line-weight)); }
.gallery figure {
  margin: 0;
  background: var(--colour-page);
  border-right: var(--line-weight) solid var(--colour-line);
  border-bottom: var(--line-weight) solid var(--colour-line);
}
.gallery img { width: 100%; aspect-ratio: var(--image-tile-ratio); object-fit: cover; display: block; }
.gallery figcaption { font-size: var(--text-size-tiny); padding: var(--space-1) 12px; font-weight: var(--font-weight-bold); }

/* Lists of events */
.rows { margin: 0; padding: 0; list-style: none; border-bottom: var(--line-weight) solid var(--colour-line); }
.rows li { display: grid; grid-template-columns: 150px 1fr 1fr; gap: var(--space-3); padding: var(--space-2) var(--space-4); border-bottom: 1px solid var(--colour-line); }
.rows li:last-child { border-bottom: 0; }
.rows .date { font-weight: var(--font-weight-bold); }
.rows .where { color: var(--colour-muted); }
.rows a { font-weight: var(--font-weight-bold); text-decoration: none; }
.rows a:hover { color: var(--colour-accent); }


.download {
  display: block;
  padding: var(--space-2) var(--space-4);
  border-bottom: var(--line-weight) solid var(--colour-line);
  font-weight: var(--font-weight-bold);
  font-size: var(--text-size-small);
  text-transform: uppercase;
  text-decoration: none;
}
.download:hover { color: var(--colour-accent); }
.empty { padding: var(--space-4); border-bottom: var(--line-weight) solid var(--colour-line); color: var(--colour-muted); margin: 0; }
.site-cv .cv { border-top: 0; }

/* The contact form */
.contact-form { display: grid; gap: var(--space-3); max-width: 640px; padding: var(--space-5) var(--space-4); }
.contact-form label span { display: block; font-weight: var(--font-weight-bold); font-size: var(--text-size-small); text-transform: uppercase; margin-bottom: 6px; }
.contact-form input, .contact-form textarea {
  width: 100%;
  font: inherit;
  padding: 12px;
  background: var(--colour-page);
  color: var(--colour-ink);
  border: var(--line-weight) solid var(--colour-line);
  border-radius: 0;
}
.contact-form input:focus, .contact-form textarea:focus { outline: var(--line-weight) solid var(--colour-accent); outline-offset: 0; }
.contact-form button {
  justify-self: start;
  font: var(--font-weight-heavy) var(--text-size-small) / 1 var(--font-family);
  text-transform: uppercase;
  padding: 14px 28px;
  background: var(--colour-ink);
  color: var(--colour-page);
  border: 0;
  cursor: pointer;
}
.contact-form button:hover { background: var(--colour-accent); }
.contact-form button:disabled { opacity: 0.5; cursor: wait; }
.contact-form .trap { position: absolute; left: -9999px; width: 1px; height: 1px; }
.contact-status { margin: 0; font-weight: var(--font-weight-bold); }

/* Narrow screens: one column, smaller headings. */
@media (max-width: 760px) {
  .site-header { grid-template-columns: 1fr; }
  .site-name { border-right: 0; border-bottom: var(--line-weight) solid var(--colour-line); font-size: 26px; }
  .site-nav a { flex: 1; justify-content: center; padding: 12px 6px; }
  .site-nav a:first-child { border-left: 0; }
  .banner { font-size: 48px; }
  .grid, .gallery { grid-template-columns: 1fr 1fr; }
  .record { grid-template-columns: 1fr; }
  .record > .panel { position: static; margin-right: 0; }
  .record > .text { border-left: 0; }
  .record h1 { font-size: 40px; }
  .videos { grid-template-columns: 1fr; }
  .rows li { grid-template-columns: 1fr; gap: 2px; }
  .cv-section { grid-template-columns: 1fr; }
  .cv-section h2 { border-right: 0; border-bottom: 1px solid var(--colour-line); }
}