/* ============================================================================
   GBM legacy site
   Palette and typeface lifted from the GBM Webflow sites so this page still
   looks like it belongs to the same company.
   ========================================================================== */

@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('/fonts/PlusJakartaSans-VariableFont_wght.ttf') format('truetype-variations');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Brand palette — do not invent new values, pull from this list. */
  --c-offwhite: #f6f5f5;
  --c-black: #241f1a;
  --c-white: #ffffff;
  --c-grey: #494949;
  --c-green: #45b8b0;
  --c-green-line: #277772;
  --c-green-d: #175c58;
  --c-green-dd: #0a3d3a;
  --c-orange: #e2412c;
  --c-yellow: #e2fd94;
  --c-line: #e5e5e5;

  /* Semantic roles — the rest of the sheet only ever refers to these. */
  --bg: var(--c-offwhite);
  --fg: var(--c-black);
  --fg-muted: var(--c-grey);
  --accent: var(--c-green-d);
  --rule: var(--c-line);

  --measure: 34rem; /* ~66 characters — the comfortable reading width */
  --step: clamp(2.5rem, 6vw, 3.75rem); /* vertical rhythm between sections */

  /*
   * Light only, deliberately. This page is a permanent record: one appearance
   * that has actually been looked at beats two that have not. `color-scheme`
   * stops the browser darkening form controls and scrollbars for readers whose
   * system is set to dark.
   */
  color-scheme: light;
}

/* ── Base ────────────────────────────────────────────────────────────────── */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: clamp(1.0625rem, 0.98rem + 0.42vw, 1.1875rem);
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

p {
  margin: 0 0 1.35em;
  max-width: var(--measure);
  hyphens: auto;
}

a {
  color: inherit;
}

.link {
  color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

.link:hover {
  text-decoration-thickness: 2px;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ── Layout ──────────────────────────────────────────────────────────────── */

.page {
  /* The measure sets reading width; the page adds room for the margin rules. */
  max-width: 46rem;
  margin: 0 auto;
  padding: clamp(2.5rem, 8vw, 6rem) clamp(1.25rem, 5vw, 2.5rem) 5rem;
}

/* ── Masthead ────────────────────────────────────────────────────────────── */

.masthead {
  padding-bottom: var(--step);
  border-bottom: 1px solid var(--rule);
}

.eyebrow {
  margin: 0 0 0.9rem;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}

.masthead__title {
  margin: 0 0 1.5rem;
  font-size: clamp(2rem, 1.3rem + 3.4vw, 3.25rem);
  line-height: 1.12;
  font-weight: 700;
  letter-spacing: -0.022em;
  max-width: 18ch;
  text-wrap: balance;
}

.standfirst {
  font-size: clamp(1.125rem, 1.03rem + 0.5vw, 1.3125rem);
  line-height: 1.55;
  color: var(--fg-muted);
  max-width: var(--measure);
  margin-bottom: 0;
}

/* ── Sections ────────────────────────────────────────────────────────────── */

.section {
  padding-top: var(--step);
  /* Anchor links land below the top edge rather than flush against it. */
  scroll-margin-top: 1.5rem;
}

/*
 * Restrained rather than shouted. With the contents list gone, the headings are
 * the only navigation, so they need to be findable while scanning without
 * competing with the standfirst.
 */
.section__title {
  margin: 0 0 1.15rem;
  font-size: clamp(1.25rem, 1.13rem + 0.6vw, 1.5rem);
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: -0.012em;
  max-width: 24ch;
  text-wrap: balance;
}

.section__anchor {
  text-decoration: none;
}

.section__anchor:hover {
  color: var(--accent);
}

/* ── Figures ─────────────────────────────────────────────────────────────── */

.figures {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  gap: 1.75rem 1.5rem;
  margin: 0 0 2.5rem;
  padding: 1.75rem 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

.figure__value {
  font-size: clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.figure__label {
  margin: 0.45rem 0 0;
  font-size: 0.9375rem;
  line-height: 1.4;
  color: var(--fg-muted);
}

/* ── Pull quote ──────────────────────────────────────────────────────────── */

.pull {
  margin: 2rem 0 2.25rem;
  padding-left: 1.4rem;
  border-left: 3px solid var(--accent);
  max-width: var(--measure);
}

.pull p {
  margin: 0;
  font-size: clamp(1.1875rem, 1.08rem + 0.55vw, 1.4375rem);
  line-height: 1.4;
  font-weight: 600;
  letter-spacing: -0.012em;
  text-wrap: balance;
}

/* ── Citation ────────────────────────────────────────────────────────────── */

/*
 * Stands in for a live social embed. Styled to this page rather than mimicking
 * the platform's chrome — it is a quotation with a source, not a fake screenshot.
 */
.citation {
  max-width: var(--measure);
  margin: 2rem 0 2.25rem;
  padding: 1.4rem 1.5rem;
  border: 1px solid var(--rule);
  border-radius: 4px;
  background: var(--c-white);
}

.citation__quote {
  margin: 0;
}

.citation__quote p {
  margin: 0;
  font-size: 1.0625rem;
  line-height: 1.5;
  font-weight: 500;
}

.citation__quote p::before { content: '“'; }
.citation__quote p::after  { content: '”'; }

.citation__source {
  margin-top: 0.85rem;
  font-size: 0.875rem;
  color: var(--fg-muted);
}

/* ── Images ──────────────────────────────────────────────────────────────── */

.media {
  margin: 2rem 0 2.25rem;
  max-width: var(--measure);
}

/*
 * Breaks the reading measure to use the full page width. For diagrams, where
 * legibility matters more than sitting flush with the prose.
 */
.media--wide {
  max-width: none;
}


/*
 * No border or radius by default. Screenshots often arrive carrying their own
 * frame and rounded corners, and a second border drawn around the bounding box
 * cuts across them. Images with real transparency show the page through instead.
 */
.media__img {
  display: block;
  width: 100%;
  height: auto;
}

.media__frame {
  display: block;
}

/*
 * Opt-in frame, for images that arrive bare — a UI screenshot cropped to its
 * own edges has nothing to separate it from the page. 8px matches the corner
 * radius of the tweet card in the section above, measured at display size, so
 * the two images sit together rather than looking like different treatments.
 */
.media__frame--boxed {
  padding: 0.7rem;
  background: var(--c-white);
  border: 1px solid var(--rule);
  border-radius: 8px;
}

.media__frame--boxed .media__img {
  border-radius: 4px;
}

/*
 * Equal columns rather than auto, so a pair keeps the same width whatever
 * their individual proportions. Stacks below the point where two columns stop
 * being legible.
 */
.gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.6rem;
  align-items: start;
}

@media (max-width: 30rem) {
  .gallery { grid-template-columns: 1fr; }
}

/*
 * A linked image needs some cue that it goes somewhere. Opacity rather than a
 * border, so the hover follows the artwork's own shape rather than its box.
 */
.media__link:hover .media__img {
  opacity: 0.88;
}

@media (prefers-reduced-motion: no-preference) {
  .media__img { transition: opacity 0.15s ease; }
}

.media__caption {
  margin-top: 0.6rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--fg-muted);
}

/* ── Lists ───────────────────────────────────────────────────────────────── */

.list,
.steps {
  max-width: var(--measure);
  margin: 0 0 1.6rem;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.9rem;
}

.list li,
.steps li {
  padding-left: 2rem;
  position: relative;
}

.list li::before {
  content: '';
  position: absolute;
  left: 0.4rem;
  top: 0.72em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

.steps {
  counter-reset: step;
}

.steps li {
  counter-increment: step;
}

.steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0;
  color: var(--accent);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* ── Press ───────────────────────────────────────────────────────────────── */

/*
 * A bibliography, not a link farm. Rows rather than cards so twenty entries
 * still scan, with the headline carrying the link and the outlet demoted.
 */
.press {
  max-width: var(--measure);
  margin: 0 0 1.5rem;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--rule);
}

.press__item {
  border-bottom: 1px solid var(--rule);
}

.press__link {
  display: flex;
  gap: 0.8rem;
  align-items: flex-start;
  padding: 0.85rem 0;
  text-decoration: none;
}

/*
 * Outlet favicons sit on a light chip. Several arrive as dark marks on a
 * transparent ground, which would disappear against the dark theme; the chip
 * gives every icon the light background it was drawn for.
 */
.press__icon {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 0.2em;
  border-radius: 3px;
  background: #fff;
  box-shadow: 0 0 0 1px var(--rule);
  object-fit: contain;
}

.press__body {
  min-width: 0;
}

.press__title {
  display: block;
  line-height: 1.4;
  color: var(--fg);
  text-wrap: pretty;
}

.press__link:hover .press__title {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.press__meta {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.875rem;
  color: var(--fg-muted);
}

/* ── Document links ──────────────────────────────────────────────────────── */

.doc {
  display: block;
  max-width: var(--measure);
  margin: 0 0 0.75rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--rule);
  border-radius: 4px;
  text-decoration: none;
  transition: border-color 0.15s ease;
}

/* With a cover: the page image sits alongside, title and meta centred on it. */
.doc--with-cover {
  display: flex;
  gap: 1rem;
  align-items: center;
}

.doc__cover {
  flex: none;
  width: 80px;
  height: 80px;
  object-fit: cover;
  object-position: top;
  border: 1px solid var(--rule);
  border-radius: 2px;
  background: var(--c-white);
}

.doc__body {
  min-width: 0;
}

.doc:hover {
  border-color: var(--accent);
}

.doc__title {
  display: block;
  font-weight: 600;
  line-height: 1.35;
  color: var(--accent);
}

.doc__meta {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.875rem;
  color: var(--fg-muted);
  font-variant-numeric: tabular-nums;
}

/* The last document in a run needs the section's normal spacing back. */
.doc + :not(.doc) {
  margin-top: 1.75rem;
}

/* ── Subhead ─────────────────────────────────────────────────────────────── */

/* Groups a run of press rows without competing with the section heading. */
.subhead {
  margin: 2rem 0 0.6rem;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-muted);
}

.subhead:first-child {
  margin-top: 0;
}

/* ── Small print ─────────────────────────────────────────────────────────── */

.note {
  max-width: var(--measure);
  padding: 1rem 1.1rem;
  border: 1px solid var(--rule);
  border-radius: 4px;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--fg-muted);
}

/* ── Footer ──────────────────────────────────────────────────────────────── */

.footer {
  margin-top: var(--step);
  padding-top: 2.25rem;
  border-top: 1px solid var(--rule);
  color: var(--fg-muted);
  font-size: 0.9375rem;
}

.footer__next {
  margin-bottom: 1.75rem;
  font-size: 1.0625rem;
  font-weight: 600;
}

.footer__note {
  max-width: var(--measure);
}

.footer__meta {
  margin-bottom: 0;
  font-size: 0.875rem;
}

/* ── Print ───────────────────────────────────────────────────────────────── */

@media print {
  :root { --bg: #fff; --fg: #000; --fg-muted: #333; --accent: #175c58; }
  .contents { display: none; }
  .page { max-width: none; padding: 0; }
  .section { break-inside: avoid-page; }
}