:root {
  /* the palette of the So What visual: deep blue, light that warms to amber */
  --bg:#0a1729;
  --card:#0d1d33;
  --card-raised:#11253f;
  --border:#1d3452;
  --border-hover:#36577e;
  --ink:#f2ead6;
  --text:#e3ded2;
  --text-soft:#a7b2c1;
  --text-dim:#6b7c92;
  --text-faint:#2c4260;
  --accent:#d4a53a;
  --accent-hover:#e3b954;
  --teal:#6cc3b0;
  --indigo:var(--accent);
  --indigo-hover:var(--accent-hover);
  --edge:#2a4466;
  --edge-hot:var(--accent);

  --musician:#d4a53a;
  --programmer:#f2ead6;
  --multimedia:#b9c47c;
  --technician:#6cc3b0;

  --radius:0;
  --ease:cubic-bezier(0.4,0,0.2,1);
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
* { box-sizing:border-box; }
/* the field: a voronoi of light behind everything, drawn in WebGL */
.field { position:fixed; inset:0; width:100%; height:100%; z-index:-1; pointer-events:none; display:block; }
body {
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
}
body.has-modal { overflow:hidden; }
a { color:inherit; }
button { font:inherit; color:inherit; }
:focus-visible { outline:2px solid var(--indigo); outline-offset:3px; }

:root { --gutter:clamp(1rem, 3vw, 3rem); }
.wrap { padding-left:var(--gutter); padding-right:var(--gutter); }

/* identity colouring for the map nodes */
.id--musician   { --c:var(--musician); }
.id--programmer { --c:var(--programmer); }
.id--multimedia { --c:var(--multimedia); }
.id--technician { --c:var(--technician); }

/* ── Header ───────────────────────────────────────────── */
.intro { position:relative; z-index:1; padding-top:clamp(2.5rem, 7vh, 5rem); padding-bottom:clamp(2rem, 6vh, 4rem); max-width:44rem; }
/* a dark veil behind the header only, so the text reads over the field; it fades out below */
.intro::before {
  content:""; position:absolute; z-index:-1; left:0; top:0; bottom:-7rem; width:100vw; pointer-events:none;
  background:linear-gradient(to bottom, rgba(2,6,12,.92) 0%, rgba(2,6,12,.85) 55%, rgba(2,6,12,0) 100%);
}
html { overflow-x:clip; }
.intro__name { margin:0; font-size:clamp(1.5rem, 2.4vw, 2rem); font-weight:600; letter-spacing:-0.015em; color:var(--ink); }
.intro__role { margin:0.3rem 0 0; font-family:var(--mono); font-size:0.78rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--accent); }
.intro__line { margin:1.4rem 0 0; max-width:36rem; font-size:1rem; line-height:1.65; color:var(--text-soft); }
.intro__links { display:flex; flex-wrap:wrap; gap:0.4rem 1.6rem; margin-top:1.6rem; font-family:var(--mono); font-size:0.78rem; letter-spacing:0.03em; }
.intro__links a, .sound { color:var(--text); text-decoration:none; border:0; background:none; padding:0; cursor:pointer; font:inherit; letter-spacing:inherit; border-bottom:1px solid var(--border-hover); padding-bottom:1px; }
.follow.intro__follow { margin-top:1.4rem; gap:1.1rem; }
.intro__links a:hover, .sound:hover, .sound[aria-pressed="true"] { color:var(--accent); border-bottom-color:var(--accent); }
.btn {
  display:inline-flex; align-items:center; gap:0.45rem;
  min-height:2.75rem; padding:0 1.1rem; border-radius:0;
  border:1px solid var(--border); background:var(--card);
  text-decoration:none; font-size:0.88rem; font-weight:600; cursor:pointer;
  transition:border-color .15s, background .15s;
}
.btn:hover { border-color:var(--border-hover); }
.btn--pill { border-radius:999px; }
.btn--primary { background:var(--accent); border-color:var(--accent); color:var(--bg); }
.btn--primary:hover { background:var(--accent-hover); border-color:var(--accent-hover); }

/* ── Works: points in the field ─────────────────────────
   Each work is a point of light with its title beside it. Hover or focus enlarges
   the title and shows the image. Narrow screens get a plain list. */
.cells { position:relative; margin:0 var(--gutter) 4rem; }
.cells.is-field { height:clamp(440px, 60vh, 640px); }
.cell { display:flex; flex-direction:column; gap:0.15rem; text-decoration:none; color:var(--ink); }
.cells.is-field .cell { position:absolute; transform:translate(0, -50%); padding-left:1.1rem; width:max-content; max-width:20rem; }
.cells.is-field .cell::before {
  content:""; position:absolute; left:-3px; top:calc(50% - 3px); width:6px; height:6px; border-radius:50%;
  background:var(--ink); box-shadow:0 0 10px rgba(212,165,58,.6);
  transition:background .3s, box-shadow .3s;
}
.cell__year { font-family:var(--mono); font-size:0.66rem; letter-spacing:0.08em; color:var(--text-dim); }
.cell__title { font-size:1rem; font-weight:500; line-height:1.2; transition:font-size .35s var(--ease), color .3s; }
.cell__shown { font-family:var(--mono); font-size:0.64rem; letter-spacing:0.04em; color:var(--text-soft); max-width:18rem; }
.cell__img {
  position:absolute; left:1.1rem; top:calc(100% + 0.6rem); width:16rem; aspect-ratio:16/10; object-fit:cover;
  opacity:0; transform:translateY(-4px); pointer-events:none;
  transition:opacity .3s var(--ease), transform .4s var(--ease);
}
.cell:hover .cell__title, .cell:focus-visible .cell__title { font-size:1.7rem; color:var(--accent); }
.cell:hover::before, .cell:focus-visible::before { background:var(--accent); box-shadow:0 0 18px rgba(212,165,58,.9); }
.cell:hover .cell__img, .cell:focus-visible .cell__img { opacity:1; transform:none; }
.cell:hover, .cell:focus-visible { z-index:2; }
.cell:focus-visible { outline:none; }
@media (max-width:760px) {
  .cells { display:grid; gap:1.1rem; }
  .cell { display:grid; grid-template-columns:5.5rem 1fr; column-gap:1rem; align-items:center; }
  .cell__img { position:static; grid-row:1 / span 3; width:5.5rem; opacity:1; transform:none; }
  .cell:hover .cell__title { font-size:1rem; }
}

.media { position:relative; overflow:hidden; background:var(--card-raised); }
.cover { position:absolute; inset:0; background:var(--card-raised); }
/* a logo sits alone in the top-left pane, clear of the grout */
.cover--logo { display:block; }
.cover--logo img,
.tile .media .cover--logo img,
.tile:hover .media .cover--logo img {
  position:absolute; left:25%; top:25%; width:28%; height:auto; transform:translate(-50%, -50%);
  object-fit:contain; filter:none;
}
.badge {
  position:absolute; top:0.7rem; left:0.7rem; z-index:3;
  padding:0.2rem 0.5rem; border-radius:0;
  background:rgba(6,14,26,0.85);
  font-family:var(--mono); font-size:0.62rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--text-soft);
}
.tags { display:flex; flex-wrap:wrap; gap:0.35rem; }
.tag {
  display:inline-flex; align-items:center;
  padding:0.18rem 0.5rem; border-radius:0;
  border:1px solid var(--border);
  font-family:var(--mono); font-size:0.66rem; letter-spacing:0.04em; text-transform:uppercase; color:var(--text-soft);
}

/* ── Section headings ───────────────────────────────── */
.listen__desc { margin:0 0 1.6rem; font-size:0.95rem; line-height:1.6; color:var(--text-soft); }
.listen__title {
  position:relative; margin:0 0 1.2rem;
  font-family:var(--mono); font-size:0.78rem; font-weight:400; letter-spacing:0.08em; text-transform:uppercase; color:var(--accent);
}
/* ── Code and Worked with: plain rows, year · what · role ── */
.news-list { display:flex; flex-direction:column; gap:0.35rem; margin-bottom:clamp(2rem, 6vh, 3.5rem); }
.news-list:empty { display:none; }
.news { display:flex; flex-wrap:wrap; gap:0.2rem 1rem; font-size:0.85rem; color:var(--text); text-decoration:none; }
.news__tag { font-family:var(--mono); font-size:0.72rem; letter-spacing:0.06em; color:var(--accent); padding-top:0.1rem; }
.news:hover span:not(.news__tag) { color:var(--accent); }
.news__go { color:var(--accent); }
.badge--event { background:var(--accent); color:var(--bg); font-weight:700; }
.icon { width:1.05em; height:1.05em; flex:none; vertical-align:-0.15em; }
.btn .icon, .row__links .icon, .footer a .icon { margin-right:0.45em; }
.footer__channels { display:inline-flex; align-items:center; gap:1.1rem; }
.footer__channels .icon { width:1.15rem; height:1.15rem; margin:0 !important; }
.follow a .icon { width:1.2rem; height:1.2rem; }
.follow a { border-bottom:0 !important; display:inline-flex; }
.footer { align-items:center; }
.follow { display:flex; flex-wrap:wrap; align-items:center; gap:0.4rem 1.2rem; margin:0; font-family:var(--mono); font-size:0.78rem; }
.follow__head { font-size:0.7rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--accent); }
.follow a { color:var(--ink); text-decoration:none; border-bottom:1px solid var(--border-hover); }
.follow a:hover { color:var(--accent); border-bottom-color:var(--accent); }
.shown { padding-top:0.4rem; }
.shown__head { margin:0 0 0.5rem; font-family:var(--mono); font-size:0.7rem; font-weight:400; letter-spacing:0.08em; text-transform:uppercase; color:var(--accent); }
.shown__list { list-style:none; margin:0; padding:0; border-top:1px solid var(--border); }
.shown__item { display:grid; grid-template-columns:8.5rem 1fr; gap:1rem; padding:0.6rem 0; border-bottom:1px solid var(--border); font-size:0.9rem; }
.shown__when { font-family:var(--mono); font-size:0.72rem; color:var(--text-soft); padding-top:0.15rem; }
.shown__kind { display:block; font-family:var(--mono); font-size:0.62rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--text-dim); }
.shown__item a { color:var(--ink); text-decoration:none; border-bottom:1px solid var(--border-hover); }
.shown__item a:hover { color:var(--accent); border-bottom-color:var(--accent); }
.shown__place { display:block; color:var(--text-soft); font-size:0.82rem; }
@media (max-width:760px) { .shown__item { grid-template-columns:1fr; gap:0.2rem; } }
.modal__callout { margin:0; padding:0.8rem 1rem; border-left:2px solid var(--accent); background:rgba(212,165,58,0.08); font-size:0.95rem; line-height:1.5; color:var(--ink); }
.rows { padding-top:1rem; padding-bottom:4rem; }
.rows > * { max-width:46rem; }
.rows__list { list-style:none; margin:0; padding:0; border-top:1px solid var(--border); }
.rows { position:relative; }
.rows::before { display:none; content:""; position:absolute; inset:0 0 0 0; z-index:-1; background:linear-gradient(90deg, rgba(10,23,41,.82) 0, rgba(10,23,41,.82) min(52rem, 100%), rgba(10,23,41,0) min(64rem, 100%)); pointer-events:none; }
.row { display:grid; grid-template-columns:6.5rem 1fr; gap:0.3rem 1.2rem; padding:1.1rem 0.2rem; border-bottom:1px solid var(--border); }
.row__year { font-family:var(--mono); font-size:0.72rem; color:var(--text-dim); padding-top:0.25rem; }
.row__title { margin:0; font-size:1rem; font-weight:500; color:var(--ink); }
.row__role { margin:0.15rem 0 0; font-family:var(--mono); font-size:0.68rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--text-soft); }
.row__text { margin:0.5rem 0 0; font-size:0.92rem; line-height:1.6; color:var(--text-soft); }
.row__links { display:flex; flex-wrap:wrap; gap:0.4rem 1rem; margin-top:0.55rem; font-family:var(--mono); font-size:0.72rem; }
.row__links a { color:var(--accent); text-decoration:none; }
.row__links a:hover { color:var(--accent-hover); }
.row__private { color:var(--text-dim); }
@media (max-width:760px) {
  .row { grid-template-columns:1fr; }
}

.footer { padding-top:2rem; padding-bottom:3rem; border-top:1px solid var(--border); display:flex; flex-wrap:wrap; gap:0.5rem 1.4rem; font-size:0.85rem; color:var(--text-dim); }
.footer a { color:var(--text-soft); text-decoration:none; }
.footer a:hover { color:var(--text); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration:.01ms !important; animation-duration:.01ms !important; }
}

/* ── A work's page ──────────────────────────────────────── */
@view-transition { navigation:auto; }
.crumb { position:relative; z-index:1; padding-top:2rem; font-family:var(--mono); font-size:0.78rem; }
.crumb a { color:var(--text-soft); text-decoration:none; border-bottom:1px solid var(--border-hover); }
.crumb a:hover { color:var(--accent); border-bottom-color:var(--accent); }
.work { position:relative; z-index:1; max-width:calc(46rem + 2 * var(--gutter)); padding-top:2.4rem; padding-bottom:4rem; display:flex; flex-direction:column; gap:1.3rem; }
.work::before {
  content:""; position:absolute; z-index:-1; inset:0 0 0 0; pointer-events:none;
  background:linear-gradient(90deg, rgba(5,12,22,.86), rgba(5,12,22,.86) 70%, rgba(5,12,22,.5));
}
.work__meta { margin:0; font-family:var(--mono); font-size:0.75rem; line-height:1.5; color:var(--accent); }
.work__title { margin:-0.6rem 0 0; font-size:clamp(1.8rem, 3.4vw, 2.6rem); font-weight:600; line-height:1.1; letter-spacing:-0.02em; color:var(--ink); }
.work__video { position:relative; aspect-ratio:16/9; background:#000; }
.work__video iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }
.work__image { width:100%; aspect-ratio:16/9; object-fit:cover; display:block; }
.work__summary { margin:0; font-size:1.05rem; line-height:1.7; color:var(--text); }
.work__links { display:flex; flex-wrap:wrap; gap:0.5rem; }
.work__text { border-top:1px solid var(--border); padding-top:0.6rem; font-size:0.98rem; line-height:1.75; color:var(--text-soft); }
.work__text h2 { margin:1.8rem 0 0.5rem; font-family:var(--mono); font-size:0.75rem; font-weight:400; letter-spacing:0.08em; text-transform:uppercase; color:var(--accent); }
.work__text h3 { margin:1.4rem 0 0.4rem; font-size:1rem; color:var(--ink); }
.work__text p { margin:0 0 0.9rem; }
.work__text ul { margin:0 0 0.9rem; padding-left:1.1rem; }
.work__text em, .work__text strong { color:var(--text); font-style:normal; font-weight:600; }
.work__text a { color:var(--accent); }
.work__nav { display:flex; justify-content:space-between; gap:1rem; padding-top:1.2rem; border-top:1px solid var(--border); font-family:var(--mono); font-size:0.78rem; }
.work__nav a { color:var(--text); text-decoration:none; border-bottom:1px solid var(--border-hover); }
.work__nav a:hover { color:var(--accent); border-bottom-color:var(--accent); }
.lineup { display:grid; grid-template-columns:auto 1fr; gap:0.35rem 1rem; margin:0; padding:0.8rem 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.lineup dt { font-family:var(--mono); font-size:0.68rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--text-dim); padding-top:0.15rem; }
.lineup dd { margin:0; font-size:0.88rem; color:var(--text); }