/*
  The Blount Lab — shared styles for every page.

  Layout: black page, white type. A wide frame (header, page title)
  sits around a narrower reading column, as on the original site.

  To change a colour, font or width across the whole site, edit the tokens
  in :root below; nothing else needs touching.
*/

:root {
  color-scheme: dark;

  /* Colour */
  --bg: #000000;          /* page background */
  --fg: #ffffff;          /* text and rules */
  --muted: #bdb8ae;       /* roles, dates, secondary text */
  --rule: #33302b;        /* hairlines between list rows */
  --band-bg: #ffffff;     /* white strip behind the partner logos */
  --band-fg: #000000;
  --neon: #ffc94a;        /* the neon-sign amber; focus rings and hover */

  /* Type */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans,
          Ubuntu, Cantarell, "Helvetica Neue", sans-serif;

  /* Widths */
  --wide: 1240px;         /* header, page title */
  --column: 44rem;        /* running text */
  --gutter: clamp(16px, 5vw, 48px);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-padding-top: 6.5rem; }  /* keeps in-page jumps clear of the fixed header */

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  font-size: clamp(1.0625rem, 0.96rem + 0.5vw, 1.25rem);
  line-height: 1.7;
}

img { display: block; max-width: 100%; height: auto; }

a { color: inherit; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
a:hover { color: var(--neon); }
a:focus-visible { outline: 2px solid var(--neon); outline-offset: 4px; }

p, ul, h1, h2, h3 { margin: 0; }
ul { padding: 0; list-style: none; }

/* ---------- Frame ---------- */

.wrap {
  width: 100%;
  max-width: calc(var(--wide) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.column { max-width: var(--column); margin-inline: auto; }
.column-wide { max-width: 50rem; }  /* a little wider, for the People lists */

/* Present for screen readers and search engines, not shown on screen */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: -9999px;
}
.skip-link:focus {
  left: var(--gutter);
  top: 8px;
  background: var(--fg);
  color: var(--bg);
  padding: 4px 12px;
  z-index: 30;
}

/* ---------- Header ---------- */

/* The bar stays fixed at the top of the screen while the page scrolls.
   It is kept slim so it doesn't take much room. */
.site-header {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 20;
  background: var(--bg);
  border-bottom: 1px solid var(--rule);
}

.site-header-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 2px 40px;
  padding-block: clamp(12px, 2vw, 20px);
}

.site-title {
  font-size: 1.2em;
  line-height: 1.3;
  text-transform: uppercase;
  text-decoration: none;
}

.site-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 2px clamp(14px, 3.5vw, 28px);
}
.site-nav a { text-decoration: none; }
.site-nav a:hover,
.site-nav a[aria-current="page"] { text-decoration: underline; }

/* ---------- Page title (About, People) ---------- */

.page-title {
  font-size: clamp(3rem, 2rem + 7vw, 6rem);
  font-weight: 300;
  line-height: 1.1;
  text-wrap: balance;
  padding-block: clamp(28px, 6vw, 72px) clamp(32px, 6vw, 60px);
  border-bottom: 3px solid var(--fg);
  margin-bottom: clamp(40px, 8vw, 90px);
}

/* ---------- Running text ---------- */

.section-gap { margin-top: clamp(48px, 8vw, 90px); }

/* ---------- About section ---------- */

/* The opening paragraphs */
.intro { display: grid; gap: 1.2em; }
.intro > * { min-width: 0; }
.intro .lead { font-size: 1.2em; line-height: 1.5; text-wrap: balance; }
.intro .affil { color: var(--muted); }

/* The small amber heading above each row ("Why?", "What we work on") */
.about-heading {
  font-size: 0.8em;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--neon);
  margin-top: clamp(48px, 7vw, 80px);
  padding-bottom: 0.8em;
  border-bottom: 1px solid var(--rule);
}

/* "Why?" — four short reasons across the page. One <li> per reason. */
.uses {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 40px);
  padding-top: clamp(24px, 3vw, 32px);
}
.uses li {
  min-width: 0;
  font-size: 1.05em;
  line-height: 1.4;
  text-wrap: balance;
  padding-top: 0.7em;
  border-top: 2px solid var(--neon);
}
@media (max-width: 1100px) {
  .uses { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .uses { grid-template-columns: minmax(0, 1fr); }
}

/* "What we work on" — three illustrated themes. One <li> per theme:
   an inline <svg> drawing, an <h3> heading, then a <p> of text. */
.themes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(32px, 4vw, 56px);
  padding-top: clamp(24px, 4vw, 40px);
}
.themes li { display: grid; gap: 0.7em; align-content: start; min-width: 0; }
.themes svg { display: block; width: 100%; height: auto; max-width: 22rem; margin-bottom: 0.4em; }
.themes h3 { font-size: 1.2em; font-weight: 400; line-height: 1.3; text-wrap: balance; }
.themes p { font-size: 0.9em; line-height: 1.6; }
@media (max-width: 860px) {
  .themes { grid-template-columns: minmax(0, 1fr); }
}

/* The drawings: thin amber lines, like the neon sign */
.themes svg .blk  { fill: none; stroke: var(--neon); stroke-width: 2; }
.themes svg .lbl  { fill: var(--fg); font-family: var(--font); font-weight: 600; }
.themes svg .dim  { opacity: 0.45; }
.themes svg .win  { filter: drop-shadow(0 0 3px var(--neon)); }
.themes svg .ring { fill: none; stroke: var(--fg); stroke-width: 1.5; stroke-dasharray: 4 4; }
.themes svg .tick { fill: none; stroke: var(--fg); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.themes svg .line { fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.themes svg .ess  { fill: var(--neon); stroke: var(--neon); stroke-width: 2; filter: drop-shadow(0 0 3px var(--neon)); }
.themes svg .cell { fill: none; stroke: var(--neon); stroke-width: 2; filter: drop-shadow(0 0 3px var(--neon)); }
.themes svg .cell.thin { stroke-width: 1.5; stroke-linecap: round; filter: none; }

/* Label on the left, links on the right (About page) */
.link-group {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: 16px 40px;
}
.link-group + .link-group { margin-top: clamp(40px, 6vw, 64px); }
.link-group h2 { font-size: 1em; font-weight: 700; line-height: 1.7; }
.link-group ul { display: grid; gap: 1.2em; }

/* ---------- People ---------- */

.people li {
  display: grid;
  grid-template-columns: minmax(0, 9fr) minmax(0, 11fr);
  gap: 0 32px;
  padding-block: 0.6em;
  border-bottom: 1px solid var(--rule);
}
.people .role { color: var(--muted); font-variant-numeric: tabular-nums; }

.people-current { font-size: 1.2em; line-height: 1.5; }

.people-heading { font-size: 1em; font-weight: 700; margin-bottom: 0.6em; }

/* ---------- Home ---------- */

/* Neon sign photo: runs edge to edge, the full width of the screen.
   On wide screens its height is capped and the top and bottom are trimmed
   equally, so the sign in the middle always stays whole. The cap never goes
   below half the photo's height (27.4vw), however wide the screen. */
.hero img {
  width: 100%;
  max-height: max(700px, 27.4vw);
  object-fit: cover;
  object-position: center;
}

.tagline {
  font-size: 1.2em;
  line-height: 1.4;
  text-wrap: balance;
  padding-block: clamp(32px, 6vw, 56px);
}

/* White strip with the partner logos */
.partners { background: var(--band-bg); color: var(--band-fg); }
.partners ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 28px clamp(32px, 6vw, 80px);
  padding-block: clamp(28px, 4vw, 40px);
}
.partners img { height: clamp(64px, 9vw, 96px); width: auto; }
.partners a:hover { color: inherit; opacity: 0.7; }
.partners a:focus-visible { outline-color: var(--band-fg); }

/* About text and press links, below the logo strip */
.about { padding-top: clamp(40px, 7vw, 72px); }

/* Small LinkedIn icon above the address */
.social-icon { display: inline-block; }
.social-icon img { height: 36px; width: auto; }
.social-icon:hover { opacity: 0.75; }

.contact {
  display: grid;
  gap: 1em;
  justify-items: center;
  text-align: center;
  padding-block: clamp(36px, 5vw, 56px) 0;
}

/* ---------- Bottom of page ---------- */

/* No footer: just some breathing room after the last line of each page */
main { padding-bottom: clamp(40px, 6vw, 72px); }

/* ---------- Phone ---------- */

@media (max-width: 640px) {
  .link-group { grid-template-columns: minmax(0, 1fr); }
  .people li { grid-template-columns: minmax(0, 1fr); }
}