/* ------------------------------------------------------------
   Kyle Campbell – portfolio styles
   ------------------------------------------------------------ */

/* ---------- Tokens ---------- */
:root {
  /* Backgrounds */
  --bg-light: #ffffff;
  --bg-mid: #fafafa;
  --bg-dark: #12211d;

  /* Text */
  --text: #0f1f1a;
  --text-muted: #5a6b64;
  --text-on-dark: #f6f8f6;
  --text-muted-on-dark: #b7c5bf;

  /* Accent */
  /* Brand green is 3.2:1 on white: large text, graphics, and focus rings only.
     Strong is the closest green that reaches 4.5:1 on white and on --bg-mid,
     so it carries small text and button fills. */
  --accent: #549e79;
  --accent-strong: #447f62;
  --accent-deep: #386a52;
  --accent-on-dark: #7cc49f;

  /* Rules & surfaces */
  --rule: #d3dad6;
  --rule-strong: rgba(0, 0, 0, 0.4);
  --rule-on-dark: #2a3d37;
  --surface: #ffffff;
  --tint: #edf1ee;
  --filler: #839e91; /* home: empty green cells */
  --placeholder: #e4e9e6;

  /* Type */
  --font: "Fira Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fs-body: 1.0625rem; /* 17px */
  --lh-body: 1.55;
  --fs-h1: clamp(2.6rem, 6vw, 5.5rem);
  --fs-h2: clamp(2rem, 4.2vw, 4.5rem);
  --fs-subhead: clamp(1.125rem, 1.6vw, 1.375rem);
  --fs-h3: 1rem;
  --fs-small: 0.9375rem; /* 15px */
  --fs-caption: 0.875rem;
  --fs-hero: clamp(
    1.25rem,
    1.67vw,
    1.5rem
  ); /* home intro copy: 24px at 1440, 20px on small screens */

  /* Layout */
  --container: 1080px;
  --nav-h: 56px;
  --gutter: 32px;
  --col-gap: 32px;
  --band-y: clamp(72px, 10vw, 140px);

  /* Home grid */
  --grid-margin: 32px;
  --grid-gap: 12px;
  /* Width of one column, for padding that should match the grid */
  --grid-col: calc(
    (100vw - var(--grid-margin) * 2 - var(--grid-gap) * 11) / 12
  );

  /* Home spacing: one unit is 16px at 1440 and scales with the viewport.
     Steps are named for their size at 1440 */
  --u: clamp(12px, 1.1111vw, 20px);
  --sp-8: calc(var(--u) * 0.5);
  --sp-16: var(--u);
  --sp-32: calc(var(--u) * 2);
  --sp-64: calc(var(--u) * 4);
  --sp-96: calc(var(--u) * 6);
  --sp-128: calc(var(--u) * 8);
  --sp-192: calc(var(--u) * 12);

  /* Radii */
  --radius-phone: 18px;
  --radius-tablet: 10px;
}

/* ---------- Reset ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
  }
}
body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text);
  background: var(--bg-light);
}
img,
svg {
  max-width: 100%;
  height: auto;
  display: block;
}
h1,
h2,
h3,
p,
ul,
dl,
figure,
blockquote {
  margin: 0;
}
ul {
  padding: 0;
  list-style: none;
}
a {
  color: inherit;
}
button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.skip {
  position: absolute;
  left: 16px;
  top: -100px;
  z-index: 100;
  padding: 10px 14px;
  background: var(--accent-strong);
  color: #fff;
  text-decoration: none;
}
.skip:focus {
  top: 12px;
}

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

/* ---------- Layout primitives ---------- */
.container {
  width: min(var(--container), 100% - var(--gutter) * 2);
  margin-inline: auto;
}

/* Bands */
.band {
  padding-block: var(--band-y);
  border-top: 1px solid var(--rule);
}
.band--light {
  background: var(--bg-light);
}
.band--mid {
  background: var(--bg-mid);
}
.band--dark {
  background: var(--bg-dark);
  color: var(--text-on-dark);
  border-top-color: var(--rule-on-dark);
}
/* The rule after a dark band sits against the dark edge */
.band--dark + .band {
  border-top-color: var(--rule-on-dark);
}

/* Vertical rhythm inside a band */
.band > .container > * + * {
  margin-top: clamp(32px, 6vw, 64px);
}
.band > .container > .section-head + * {
  margin-top: clamp(24px, 4vw, 40px);
}

/* Column systems */
.cols-2,
.cols-3,
.cols-2-1,
.cols-1-2 {
  display: grid;
  gap: var(--col-gap);
  align-items: start;
}
.cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.cols-2-1 {
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
}
.cols-1-2 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
}

/* Stack inside a column */
.cols-2 > * > * + *,
.cols-3 > * > * + *,
.cols-2-1 > * > * + *,
.cols-1-2 > * > * + *,
.data-split > * > * + *,
.data-split__text > * > * + * {
  margin-top: 14px;
}
.cols-2 > * > h3 + *,
.cols-3 > * > h3 + *,
.cols-2-1 > * > h3 + *,
.cols-1-2 > * > h3 + *,
.data-split > * > h3 + *,
.data-split__text > * > h3 + * {
  margin-top: 10px;
}
.cols-2 > * > * + h3,
.cols-3 > * > * + h3,
.cols-2-1 > * > * + h3,
.cols-1-2 > * > * + h3,
.data-split > * > * + h3,
.data-split__text > * > * + h3 {
  margin-top: 40px;
}

.cols-2--bottom > :last-child {
  align-self: end;
}

/* Three columns stack first. Text beside a phone still fits down to 720px */
@media (max-width: 900px) {
  .cols-3 {
    grid-template-columns: 1fr;
  }
  .cols-2-1 {
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  }
  .cols-1-2 {
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  }
}
@media (max-width: 720px) {
  .cols-2,
  .cols-2-1,
  .cols-1-2 {
    grid-template-columns: 1fr;
  }
  .cols-2-1 > .gallery {
    justify-self: start;
    width: 100%;
    min-width: 0;
  }
}

/* ---------- Type ---------- */
h1 {
  font-size: var(--fs-h1);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.02em;
  max-width: 14ch;
}
h2 {
  font-size: var(--fs-h2);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.015em;
  max-width: 22ch;
}
.h2--small {
  font-size: clamp(1.5rem, 2.4vw, 1.875rem);
}

/* Subhead */
.subhead {
  font-size: var(--fs-subhead);
  font-weight: 500;
  line-height: 1.35;
  max-width: 34ch;
  margin-top: 12px;
}

h3 {
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: 1.3;
  color: var(--accent-strong);
}
.band--dark h3 {
  color: var(--accent-on-dark);
}

p {
  max-width: 62ch;
}
strong {
  font-weight: 600;
}

/* Bulleted lists inside content columns */
.cols-2 ul:not([class]),
.cols-3 ul:not([class]),
.cols-2-1 ul:not([class]),
.cols-1-2 ul:not([class]) {
  list-style: disc;
  padding-left: 1.2em;
  max-width: 62ch;
}
.cols-2 ul:not([class]) li + li,
.cols-3 ul:not([class]) li + li,
.cols-2-1 ul:not([class]) li + li,
.cols-1-2 ul:not([class]) li + li {
  margin-top: 8px;
}

.caption,
figcaption {
  font-size: var(--fs-caption);
  line-height: 1.4;
  color: var(--text-muted);
  margin-top: 10px;
  max-width: none;
}
.band--dark .caption,
.band--dark figcaption {
  color: var(--text-muted-on-dark);
}

/* Pull quote */
.pull {
  font-size: clamp(1.2rem, 2vw, 1.5rem);
  font-weight: 500;
  line-height: 1.35;
  padding-left: 20px;
  border-left: 3px solid var(--accent);
  max-width: 30ch;
}
.band--dark .pull {
  border-left-color: var(--accent-on-dark);
}

/* Section heading rows */
.section-head.cols-2 {
  align-items: end;
}

/* ---------- Nav ---------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--bg-light);
  border-bottom: 1px solid var(--rule);
}
.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: var(--nav-h);
}
.nav__back {
  font-weight: 600;
  font-size: 0.9375rem;
  text-decoration: none;
  white-space: nowrap;
}
.nav__back:hover {
  color: var(--accent-strong);
}
.nav__menu {
  display: flex;
  gap: 22px;
}
.nav__menu a {
  font-size: 0.9375rem;
  text-decoration: none;
  padding: 6px 0;
  border-bottom: 2px solid transparent;
}
.nav__menu a:hover {
  border-bottom-color: var(--accent);
}
.nav__toggle {
  display: none;
  width: 44px;
  height: 44px;
  position: relative;
  margin-right: -10px;
}
.nav__toggle-bar,
.nav__toggle-bar::before,
.nav__toggle-bar::after {
  content: "";
  position: absolute;
  left: 12px;
  width: 20px;
  height: 2px;
  background: var(--text);
}
.nav__toggle-bar {
  top: 21px;
}
.nav__toggle-bar::before {
  top: -6px;
  left: 0;
}
.nav__toggle-bar::after {
  top: 6px;
  left: 0;
}

@media (max-width: 900px) {
  .nav__toggle {
    display: block;
  }
  .nav__menu {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    flex-direction: column;
    gap: 0;
    background: var(--bg-light);
    border-bottom: 1px solid var(--rule);
    padding: 8px var(--gutter) 16px;
  }
  .nav__menu.is-open {
    display: flex;
  }
  .nav__menu a {
    padding: 12px 0;
    border-bottom: 1px solid var(--rule);
  }
  .nav__menu a:last-child {
    border-bottom: 0;
  }
}

/* ---------- Hero ---------- */
.hero {
  border-top: 0;
  padding-top: clamp(48px, 7vw, 88px);
  position: relative;
  z-index: 1;
}
.hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
  gap: var(--col-gap);
  align-items: start;
}
.hero__text > * + * {
  margin-top: 20px;
}

/* Facts */
.facts {
  margin-top: 40px;
  border-top: 1px solid var(--rule);
}
.facts__row {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr);
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--rule);
}
.facts dt {
  font-weight: 600;
  color: var(--accent-strong);
}
.facts dd {
  margin: 0;
  max-width: 52ch;
}

/* Hero image */
.hero__art {
  position: relative;
  align-self: stretch;
  --hero-rise: 150px;
  --hero-drop: 45px;
  --hero-shift: 180px;
}
.hero__art img {
  position: absolute;
  top: calc(-1 * var(--hero-rise));
  left: calc(-1 * var(--hero-shift));
  z-index: 2;
  height: calc(100% + var(--hero-rise) + var(--band-y) + var(--hero-drop));
  width: auto;
  max-width: none;
}
@media (max-width: 900px) {
  .hero {
    padding-top: 0;
  }
  .hero__inner {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .hero__art {
    order: -1;
    align-self: start;
    width: 100vw;
    margin-inline: calc(50% - 50vw);
    margin-bottom: clamp(28px, 6vw, 48px);
  }

  .band > .container > .hero__art {
    margin-top: 0;
  }

  .hero__art img {
    position: static;
    width: 100%;
    height: auto;
  }
}

/* ---------- Screens ---------- */

.screenshot {
  width: 100%;
  border: 6px solid var(--surface);
  border-radius: var(--radius-phone);
  box-shadow: 0 0 0 1px var(--rule);
}
.band--dark .screenshot {
  border-color: #1b2c27;
  box-shadow: 0 0 0 1px var(--rule-on-dark);
}

.screenshot--tablet {
  border-radius: var(--radius-tablet);
}

/* ---------- Borders ---------- */

.border {
  box-shadow: 0 0 0 1px var(--rule);
}

/* ---------- Figures ---------- */
.figure > img {
  width: 100%;
}

@media (max-width: 900px) {
  .figure {
    width: fit-content;
    max-width: 100%;
    margin-inline: auto;
  }
  .figure:has(.bar-chart) {
    width: 100%;
  }
}

/* ---------- Gallery ---------- */
.gallery {
  width: 100%;
  --slide: 75%;
  --fade: 25px;
  --gallery-gap: 16px;
}

.gallery--plain {
  --slide: 100%;
  --gallery-gap: 0px;
}
.gallery--plain .gallery__track {
  mask-image: none;
}

.gallery__track {
  display: flex;
  gap: var(--gallery-gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 var(--fade),
    #000 calc(100% - var(--fade)),
    transparent 100%
  );
  cursor: grab;
}
/* Spacers */
.gallery__track::before,
.gallery__track::after {
  content: "";
  flex: 0 0 calc((100% - var(--slide)) / 2 - var(--gallery-gap));
}

.gallery__track::-webkit-scrollbar {
  display: none;
}
.gallery__slide {
  flex: 0 0 var(--slide);
  min-width: 0;
  scroll-snap-align: center;
  padding: 2px; /* room for the selection ring, which the track would clip */
}
.gallery__slide figcaption {
  width: 100%;
  overflow-wrap: break-word;
}

.gallery__slide > * + * {
  margin-top: 10px;
}
.gallery__slide > h3 {
  margin-top: 32px;
}
.gallery__slide > h3 + p {
  margin-top: 6px;
}

.gallery__dots {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-top: 14px;
}
.gallery__dots button {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--rule);
  position: relative;
}
.gallery__dots button::before {
  /* 44px tap target */
  content: "";
  position: absolute;
  inset: -16px;
}
.gallery__dots button[aria-current="true"] {
  background: var(--accent);
}
.band--dark .gallery__dots button {
  background: var(--rule-on-dark);
}
.band--dark .gallery__dots button[aria-current="true"] {
  background: var(--accent-on-dark);
}

@media (min-width: 901px) {
  .gallery--desk-grid .gallery__track {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--col-gap);
    overflow: visible;
    scroll-snap-type: none;
    mask-image: none;
    cursor: auto;
  }

  .gallery--desk-grid .gallery__track::before,
  .gallery--desk-grid .gallery__track::after {
    display: none;
  }
  .gallery--desk-grid .gallery__dots {
    display: none;
  }
}
@media (max-width: 900px) {
  .gallery {
    /* Slide width set so a whole screenshot fits in the viewport */
    --screen-h: 70vh;
    --slide: calc(var(--screen-h) * 9 / 19.5);
    margin-inline: auto;
    --fade: calc((100% - var(--slide)) / 15);
  }
  .gallery__slide .screenshot {
    height: var(--screen-h);
    width: auto;
    margin-inline: auto;
  }
  .gallery__slide figcaption {
    text-align: center;
  }
}
@media (min-width: 721px) and (max-width: 900px) {
  .cols-2-1 > .gallery {
    min-width: 0;
    --slide: 70%;
    --fade: calc((100% - var(--slide)) / 4);
  }
  .cols-2-1 > .gallery .screenshot {
    height: auto;
    width: 100%;
    margin-inline: 0;
  }
}

@media (max-width: 900px) {
  .gallery--plain {
    --slide: 100%;
  }
  .gallery--plain .screenshot {
    height: auto;
    width: 100%;
    margin-inline: 0;
  }
}

/* ---------- Cards ---------- */
.card {
  background: var(--surface);
  border: 1px solid var(--rule);
  padding: 22px 24px 26px;
  color: var(--text);
}
.card > * + * {
  margin-top: 10px;
}
.band--dark .card {
  background: #182b26;
  border-color: var(--rule-on-dark);
  color: var(--text-on-dark);
}

.card--link {
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: 12px;
  text-decoration: none;
  padding: 8px 8px 16px;
}
.card--link > * + * {
  margin-top: 0;
}
.card--link .card__title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text);
  padding-inline: 8px;
}
.card--link p {
  padding-inline: 8px;
  font-size: var(--fs-small);
}
.card__arrow {
  justify-self: end;
  padding-inline: 8px;
  font-size: 1.25rem;
  color: var(--text);
}
.card--link:hover .card__title {
  color: var(--accent-strong);
}

/* ---------- Design system ---------- */
.components {
  display: grid;
  gap: 20px;
}
.components--small {
  grid-template-columns: 1fr;
  margin-bottom: 24px;
}
.component {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}
.components--large {
  grid-template-columns: 1fr;
  margin-top: 40px;
}
.component--stack {
  grid-template-columns: 1fr;
  gap: 0;
}
.component--stack > * + * {
  margin-top: 8px;
}

@media (min-width: 720px) {
  .components--large {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}
.swatch {
  display: grid;
  gap: 2px;
  width: 132px;
  font-size: 0.8125rem;
  line-height: 1.3;
}
.swatch__chip {
  display: block;
  height: 56px;
  border-radius: 3px;
  background: var(--chip, #ccc);
  border: var(--chip-border, 0);
  margin-bottom: 6px;
}
.swatch__name {
  font-weight: 600;
}
.swatch__hex,
.swatch__ratio {
  color: var(--text-muted);
}

/* ---------- Results ---------- */
@media (min-width: 721px) {
  .cols-2:has(.stats) {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  }
}

.stats {
  display: grid;
  gap: 8px;
}
.stats li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0 0.6em;
  align-items: baseline;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--rule);
}
.stats__n {
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.1;
}

@media (max-width: 900px) {
  .stats li {
    grid-template-columns: 1fr;
    gap: 2px;
  }
}

.data-split {
  display: grid;
  gap: 32px var(--col-gap);
  align-items: start;
}

.data-split__text > * + * {
  margin-top: 40px;
}

@media (min-width: 901px) {
  .data-split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

@media (max-width: 900px) {
  .data-split__text {
    display: contents;
  }
  .data-split__text > :nth-child(1) {
    order: 1;
  }
  .data-split > :nth-child(2) {
    order: 2;
  } /* charts */
  .data-split__text > :nth-child(2) {
    order: 3;
  }
}

/* ---------- Charts ---------- */

.bar-chart {
  --teal: #006166;
  --grey: #7d868c;
  --track: var(--tint); /* --bg-mid would vanish on the white card */
  --ink: var(--text);
  --ink-soft: var(--text-muted);

  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.5rem;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 8px;
  color: var(--ink);
}

.bar-chart__title {
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.3;
}

.bar-chart__list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.bar-chart__label {
  display: block;
  margin-bottom: 0.35rem;
  font-size: var(--fs-small);
  color: var(--ink-soft);
}
.bar-chart__track {
  position: relative;
  display: block;
  height: 1.75rem;
  background: var(--track);
  border-radius: 4px;
}
.bar-chart__bar {
  position: absolute;
  inset-block: 0;
  left: 0;
  width: calc(var(--value) * 1%);
  min-width: 3px;
  background: var(--grey);
  border-radius: 4px;
}
.bar-chart__bar--primary {
  background: var(--teal);
}
.bar-chart__value {
  position: absolute;
  top: 50%;
  left: calc(var(--value) * 1% + 0.5rem);
  transform: translateY(-50%);
  font-weight: 600;
  font-size: var(--fs-small);
  white-space: nowrap;
}

/* ---------- Footer ---------- */
.footer {
  padding-block: clamp(40px, 6vw, 72px);
}
.footer__inner {
  display: flex;
  justify-content: space-between;
  gap: 40px;
  align-items: start;
}
.wordmark {
  display: inline-block;
  text-decoration: none;
  text-transform: uppercase;
  font-weight: 800;
  font-size: 1.6rem;
  line-height: 0.92;
  letter-spacing: -0.01em;
  color: var(--accent);
}
.footer__note {
  max-width: 42ch;
  font-size: var(--fs-small);
  color: var(--text-muted);
  margin-top: 16px;
}
.footer__nav {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  text-align: right;
}
.footer__nav a {
  text-decoration: none;
  font-weight: 600;
  text-transform: uppercase;
}
.footer__nav .button {
  margin-top: 8px;
}
.button {
  display: inline-block;
  background: var(--accent-strong);
  color: #fff;
  padding: 12px 20px;
  text-decoration: none;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: 0.875rem;
  border-radius: 3px;
}
.button:hover {
  background: var(--accent-deep);
}
@media (max-width: 720px) {
  .footer__inner {
    flex-direction: column;
  }
  .footer__nav {
    align-items: flex-start;
    text-align: left;
  }
}

/* ------------------------------------------------------------
   HOME
   ------------------------------------------------------------ */

/* ---------- Grid ---------- */

/* Fixed points from the Figma file, with straight lines between them:
   900 wide:  margin 32,  gap 12
   1440 wide: margin 170, gap 20
   1800 wide: margin 320, gap 32 (gap stops here)
   2200 wide: margin 420, content stops growing at 1360 */
@media (min-width: 900px) {
  :root {
    --grid-margin: calc(32px + (100vw - 900px) * 0.25556);
    --grid-gap: calc(12px + (100vw - 900px) * 0.014815);
  }
}
@media (min-width: 1440px) {
  :root {
    --grid-margin: calc(170px + (100vw - 1440px) * 0.41667);
    --grid-gap: calc(20px + (100vw - 1440px) * 0.033333);
  }
}
@media (min-width: 1800px) {
  :root {
    --grid-margin: calc(320px + (100vw - 1800px) * 0.25);
    --grid-gap: 32px;
  }
}
@media (min-width: 2200px) {
  :root {
    --grid-margin: calc((100vw - 1360px) / 2);
  }
}

/* The margin tracks subtract one gap because the grid adds it back */
.g12 {
  display: grid;
  grid-template-columns:
    [full-start] calc(var(--grid-margin) - var(--grid-gap))
    repeat(12, [col] minmax(0, 1fr))
    [col] calc(var(--grid-margin) - var(--grid-gap))
    [full-end];
  column-gap: var(--grid-gap);
}

/* Same side margins for anything that isn't on the grid */
.wrap {
  padding-inline: var(--grid-margin);
}

.row {
  border-top: 1px solid var(--rule-strong);
}

/* Anchors land below the sticky nav */
.home {
  --nav-h: clamp(68px, var(--u) * 5.5, 88px);
}
.home [id] {
  scroll-margin-top: var(--nav-h);
}

/* ---------- Home type ---------- */
.home h1 {
  font-size: clamp(2.5rem, 4.45vw, 4rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0;
  max-width: none;
  color: var(--accent);
}
.home h2 {
  font-size: clamp(1.75rem, 2.78vw, 2.5rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0;
  max-width: none;
}
.eyebrow {
  font-size: var(--fs-caption);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Shared rhythm for a label, heading, paragraph, and button */
.blurb > .eyebrow + h2 {
  margin-top: var(--sp-8);
}
.blurb > h2 + p {
  margin-top: var(--sp-16);
}
.blurb > p + .cta {
  margin-top: var(--sp-32);
}

/* ---------- Flags ---------- */

/* Chrome and Edge on Windows have no flag emoji. This font only contains
   flags and comes last, so everything else keeps its own emoji */
@font-face {
  font-family: "Twemoji Country Flags";
  src: url("https://cdn.jsdelivr.net/npm/country-flag-emoji-polyfill@0.1/dist/TwemojiCountryFlags.woff2")
    format("woff2");
  unicode-range:
    U+1F1E6-1F1FF, U+1F3F4, U+E0062-E0063, U+E0065, U+E0067, U+E006C, U+E006E,
    U+E0073-E0074, U+E0077, U+E007F;
  font-display: swap;
}
.flag {
  font-family:
    "Apple Color Emoji", "Noto Color Emoji", "Twemoji Country Flags", sans-serif;
}

/* ---------- Home nav ---------- */
.nav--home {
  border-bottom-color: var(--rule-strong);
}
.wordmark--lg {
  font-size: 2rem;
  line-height: 0.85;
}
.nav__links {
  display: flex;
  align-items: center;
  gap: var(--sp-32);
}
.nav__links a {
  font-size: 1.0625rem;
  font-weight: 600;
  text-transform: uppercase;
  text-decoration: none;
}
.nav__links a:not(.button):hover {
  color: var(--accent-strong);
}
@media (max-width: 720px) {
  /* Wordmark and Contact only. The other links are in the footer */
  .nav__links a:not(.button) {
    display: none;
  }
}

/* ---------- Contact button ---------- */

/* Brand green behind white text passes AA only as large text:
   19px bold needs 3:1, and this is 3.2:1. Keep the weight at 700. */
.button.button--large {
  background: var(--accent);
  font-size: 1.1875rem;
  font-weight: 700;
}
.button.button--large:hover {
  background: var(--accent-strong);
}

/* ---------- Image slots ---------- */

/* The image fills the slot and crops to fit */
.slot {
  position: relative;
  overflow: hidden;
  background: var(--placeholder);
}
.slot img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Faded: not published yet */
.slot--soon img {
  opacity: 0.35;
}

/* ---------- Masonry ---------- */

/* Two columns that each stack their own cells, so the seams on the left
   and right don't have to line up. The left one runs through one gutter,
   so its border lands on a column line */
.top__a,
.lower__a {
  display: flex;
  flex-direction: column;
  margin-right: calc(var(--grid-gap) * -1);
  border-right: 1px solid var(--rule-strong);
}
.top__a {
  grid-column: full-start / col 8;
}
.top__b {
  grid-column: col 8 / full-end;
  display: flex;
  flex-direction: column;
}
.lower__a {
  grid-column: full-start / col 7;
}
/* subgrid, so the content can sit on the page columns.
   The second row is the green block */
.lower__b {
  grid-column: col 7 / full-end;
  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: auto minmax(var(--sp-128), 1fr);
}
.lower {
  border-bottom: 1px solid var(--rule-strong);
}

/* ---------- Intro ---------- */

/* Left padding is the page margin, so the text starts on column 1 */
.intro__text {
  padding: var(--sp-64) var(--sp-64) var(--sp-64) var(--grid-margin);
}
.intro__text p {
  max-width: 19em;
  font-size: var(--fs-hero);
  line-height: 1.4;
}
.intro__text > * + * {
  margin-top: var(--sp-16);
}
.intro__text > h1 + * {
  margin-top: var(--sp-32);
}
/* Takes whatever height the boxes below it leave */
.intro__media {
  flex: 1;
  min-height: calc(var(--u) * 20);
}

/* ---------- Study ---------- */

.study {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.top__a .study {
  border-top: 1px solid var(--rule-strong);
}
.study__media {
  aspect-ratio: 16 / 9;
}
.study__body {
  padding: var(--sp-64) var(--sp-64) var(--sp-64) var(--grid-margin);
}
/* In the right column the text sits on columns 8 to 12 */
.lower__b .study {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
}
.lower__b .study__media {
  grid-column: 1 / -1;
}
.lower__b .study__body {
  grid-column: 2 / span 5;
  padding-inline: 0;
}
/* Not published yet: heading and text at 70% strength. On white that
   still measures 6.3:1, above the 4.5:1 that AA asks for. */
.study--soon h2,
.study--soon .study__body > p:not(.pill):not(.eyebrow) {
  color: rgb(15 31 26 / 0.7);
}
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: var(--sp-16);
  padding: 4px 10px;
  border: 1px dashed var(--rule-strong);
  font-size: var(--fs-caption);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.pill svg {
  width: 1.2em;
  height: 1.2em;
}

/* ---------- Boxes ---------- */

/* The 1px gap shows the grey behind it, which draws the lines
   between boxes in either arrangement. */
.boxes {
  display: grid;
  border-top: 1px solid var(--rule-strong);
  gap: 1px;
  background: var(--rule-strong);
}
/* Left padding is one column, so the text starts on column 9 */
.box {
  padding: var(--sp-32) var(--sp-32) var(--sp-32)
    calc(var(--grid-col) + var(--grid-gap));
  background: var(--bg-mid);
}
.box__icon {
  width: 32px;
  height: 32px;
  margin-bottom: var(--sp-16);
}

.box p,
.box ul {
  max-width: 34ch;
  font-size: var(--fs-small);
  line-height: 1.4;
}
.box ul {
  list-style: disc;
  padding-left: 1.2em;
}
.box--filler {
  display: none;
  background: var(--filler);
}
/* From 1440: four squares, the fourth one green. The content sits in
   the middle of each square as a block, still left-aligned */
@media (min-width: 1440px) {
  .boxes {
    grid-template-columns: 1fr 1fr;
  }
  .box {
    display: grid;
    place-items: center;
    aspect-ratio: 1;
    padding: var(--sp-32);
  }
  .box__in {
    width: 100%;
    max-width: 20rem;
  }
  .box--filler {
    display: block;
  }
}

/* ---------- CTA ---------- */
.cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: min(100%, 22rem);
  padding: var(--sp-16) var(--sp-32);
  border: 1px solid var(--text);
  background: var(--bg-mid);
  text-decoration: none;
}
.cta svg {
  flex: none;
  width: 1.25em;
  height: 1.25em;
}
.cta:hover {
  background: var(--text);
  color: var(--text-on-dark);
}

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

/* Fills the left column. If the right column is taller, the extra
   becomes space above and below the content */
.about {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--sp-128) var(--sp-64) var(--sp-128) var(--grid-margin);
  background: var(--bg-mid);
}
.about__text {
  max-width: 28rem;
  margin-top: var(--sp-32);
}
.about__text > * + * {
  margin-top: var(--sp-16);
}
.about .jobs {
  margin-top: var(--sp-64);
}

/* ---------- Green block ---------- */

/* The two columns must end level, so this takes whatever height About
   has beyond the host portal */
.filler {
  grid-column: 1 / -1;
  background: var(--filler);
  border-top: 1px solid var(--rule-strong);
}

/* ---------- Jobs ---------- */

/* Each row borrows the list's two columns (subgrid), so the years
   column is as wide as the longest date */
.jobs {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  column-gap: var(--sp-64);
}
.job {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
  row-gap: 2px;
  padding-block: var(--sp-16);
  border-top: 1px solid var(--rule);
}
.job:first-child {
  padding-top: 0;
  border-top: 0;
}
.job__years {
  font-weight: 300;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--text-muted);
}
.job__org {
  font-weight: 500;
}
.job__what {
  grid-column: 2;
  font-size: var(--fs-small);
  line-height: 1.4;
  color: var(--text-muted);
}

/* ---------- Closer ---------- */

.closer {
  display: flex;
  align-items: center;
  gap: var(--sp-64);
  padding: var(--sp-96) var(--grid-margin);
  background: var(--bg-light);
  border-bottom: 1px solid var(--rule-strong);
}
.home .closer h2 {
  flex: none;
  font-size: clamp(2.75rem, 5.5vw, 5rem);
  line-height: 1.05;
}
.closer p {
  max-width: 24rem;
}

/* ---------- Home footer ---------- */
.footer--home {
  padding-block: var(--sp-96) var(--sp-64);
  background: var(--bg-mid);
}
.footer--home .footer__note {
  margin-top: 0;
}
.footer--home .footer__nav {
  gap: var(--sp-16);
}
.footer--home .footer__nav a:hover {
  color: var(--accent-strong);
}

/* ---------- Home: tablet ---------- */

/* Columns get narrow, so text that sat one column in moves up to the divider */
@media (max-width: 900px) {
  .box {
    padding-left: var(--sp-32);
  }
  .lower__b .study__body {
    grid-column: 1 / span 6;
    padding-left: var(--sp-32);
  }
  .about {
    padding-block: var(--sp-64);
    padding-right: var(--sp-32);
  }
}

/* ---------- Home: mobile ---------- */

/* One column, except the intro: text with the photo as a strip beside it.
   display: contents dissolves the masonry columns, so their cells become
   rows of the page grid */
@media (max-width: 720px) {
  .top__a,
  .top__b,
  .lower__a,
  .lower__b {
    display: contents;
  }

  .intro__text {
    grid-column: col 1 / span 8;
    grid-row: 1;
    padding: var(--sp-32) 0;
  }
  .home .intro__text h1 {
    font-size: clamp(2rem, 10vw, 2.5rem);
  }
  .intro__media {
    grid-column: col 9 / full-end;
    grid-row: 1;
    min-height: 0;
    border-left: 1px solid var(--rule-strong);
  }

  .study,
  .lower__b .study {
    grid-column: full-start / full-end;
    border-top: 1px solid var(--rule-strong);
  }
  .study__body {
    padding-right: var(--grid-margin);
  }
  .lower__b .study__body {
    grid-column: 2 / span 12;
    padding-inline: 0;
  }
  .cta {
    width: 100%;
  }

  .boxes,
  .about {
    grid-column: full-start / full-end;
  }
  .box {
    padding-inline: var(--grid-margin);
  }
  .about {
    padding: var(--sp-64) var(--grid-margin);
  }
  /* Heading above the copy */
  .closer {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-32);
    padding-block: var(--sp-64);
  }
  /* Nothing to fill on one column */
  .filler {
    display: none;
  }
  .jobs {
    column-gap: var(--sp-32);
  }
}