/* Visual reference: Alexfolio (Craftwork). High contrast, near monochrome,
   one accent. The violet is kept from the PDF documents as the thread
   between the site and the CV. */
:root {
  --bg: #0D0D0D;
  --bg-raised: #161616;
  --bg-panel: #1C1C1C;
  --line: #2B2B2B;
  --text: #F2F2F0;
  --text-soft: #A9A9A6;   /* 8:1 on --bg */
  --accent: #A58CFF;      /* 7:1 on --bg */
  --accent-ink: #5B34C7;  /* violet for light surfaces */

  --light: #E6E6E3;
  --light-ink: #0D0D0D;
  --light-soft: #4A4A48;  /* 7.6:1 on --light */

  --live: #6FDBA2;
  --wip: #A58CFF;
  --idle: #8A8A87;

  --sans: "Geist", "Helvetica Neue", Arial, sans-serif;
  --mono: "Geist Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;

  --wrap: 82rem;
  --measure: 40rem;
  --gutter: clamp(1rem, 4vw, 3rem);
  --radius: 14px;
}

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

html { -webkit-text-size-adjust: 100%; scroll-padding-top: 1rem; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

a { color: var(--accent); text-underline-offset: .2em; text-decoration-thickness: 1px; }
a:hover { color: var(--text); }

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

h1, h2, h3, h4 { margin: 0; font-weight: 500; line-height: 1.1; letter-spacing: -.03em; }
p { margin: 0 0 1rem; }

.skip-link {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 20;
  padding: .6rem 1rem;
  border-radius: 8px;
  background: var(--text);
  color: var(--bg);
  font-weight: 500;
}
.skip-link:focus { top: 1rem; color: var(--bg); }

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.sprite { display: none; }

.icon {
  width: 1.1em;
  height: 1.1em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Mono label, the "[2024]" and "01" voice of the reference. */
.label {
  margin: 0 0 1.25rem;
  font-family: var(--mono);
  font-size: .8rem;
  font-weight: 400;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--accent);
}

/* ---------- site header ---------- */

.site-header .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .5rem 2rem;
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}

.site-name {
  font-size: .95rem;
  font-weight: 500;
  color: var(--text);
  text-decoration: none;
}

.site-nav ul {
  display: flex;
  gap: .25rem 1.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.site-nav a {
  display: inline-block;
  padding: .3rem 0;
  font-size: .95rem;
  color: var(--text);
  text-decoration: none;
}
.site-nav a:hover { color: var(--accent); }
.site-nav a[aria-current="page"] { box-shadow: inset 0 -1px 0 currentColor; }

/* Home page header sits on the light hero. */
.site-header--light { background: var(--light); }
.site-header--light .site-name,
.site-header--light .site-nav a { color: var(--light-ink); }
.site-header--light .site-nav a:hover { color: var(--accent-ink); }
.site-header--light :focus-visible { outline-color: var(--accent-ink); }

/* ---------- site footer ---------- */

.site-footer {
  margin-top: clamp(4rem, 10vw, 8rem);
  border-top: 1px solid var(--line);
  font-size: .9rem;
  color: var(--text-soft);
}
.site-footer .wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .5rem 2rem;
  padding-top: 1.5rem;
  padding-bottom: 2rem;
}
.site-footer p { margin: 0; }
.site-footer a { color: var(--text-soft); }
.site-footer a:hover { color: var(--text); }

/* ---------- chips ---------- */

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .2rem .65rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: .72rem;
  line-height: 1.6;
  color: var(--text-soft);
  white-space: nowrap;
}
.chip--type { border-color: #4B3F7A; color: var(--text); }
.chip--live::before,
.chip--wip::before,
.chip--idle::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--idle);
}
.chip--live { color: var(--live); }
.chip--live::before { background: var(--live); }
.chip--wip { color: var(--wip); }
.chip--wip::before { background: var(--wip); }

/* ---------- buttons and arrows ---------- */

.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-weight: 500;
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  padding-bottom: .2rem;
}
.arrow-link:hover { color: var(--accent); border-color: var(--accent); }

/* ---------- home: hero ---------- */

.hero {
  position: relative;
  overflow: hidden;
  background: var(--light);
  color: var(--light-ink);
}

.hero .wrap {
  position: relative;
  display: grid;
  justify-items: center;
  padding-top: clamp(1.5rem, 5vw, 4.5rem);
  padding-bottom: 0;
}

/* The cut-out portrait stands on the bottom edge of the hero, with no frame. */
.hero-stack {
  position: relative;
  width: min(48rem, 68vw);
}
.hero-photo { margin: 0; }
.hero-photo img { width: 100%; }

/* The name crosses the portrait at about jaw height. Difference blending
   reads near black on the light ground and on the white shirt, and inverts
   where it passes over darker areas. */
.hero-name {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  transform: translate(-50%, -50%);
  margin: 0;
  color: #fff;
  mix-blend-mode: difference;
  font-size: clamp(3.5rem, 12.6vw, 13.5rem);
  font-weight: 500;
  line-height: .9;
  letter-spacing: -.055em;
  text-align: center;
  white-space: nowrap;
  pointer-events: none;
}

.hero-foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1.5rem;
  width: 100%;
  padding: 1.5rem 0 2rem;
}

@media (min-width: 64rem) {
  .hero-foot {
    position: absolute;
    left: var(--gutter);
    right: var(--gutter);
    bottom: 0;
    z-index: 2;
    width: auto;
    padding: 0 0 clamp(2rem, 4vw, 3rem);
    pointer-events: none;
  }
  .hero-foot a { pointer-events: auto; }
}

.hero-links {
  display: flex;
  gap: .9rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.hero-links a {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid #BDBDBA;
  border-radius: 50%;
  color: var(--light-ink);
}
.hero-links a:hover { background: var(--light-ink); color: var(--light); border-color: var(--light-ink); }
.hero-links :focus-visible { outline-color: var(--accent-ink); }

.hero-role {
  margin: 0;
  font-size: clamp(1.6rem, 3.6vw, 2.9rem);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -.035em;
  text-align: right;
}
.hero-role span { display: block; color: var(--light-soft); }

@media (max-width: 40rem) {
  /* On a phone the name sits above the portrait, and the top of the head
     rises into the second line. */
  .hero-stack { display: flex; flex-direction: column; width: 92vw; }
  .hero-name { position: relative; left: auto; top: auto; order: -1; transform: none; font-size: 21vw; line-height: .86; white-space: normal; }
  .hero-name span { display: block; }
  .hero-photo { margin-top: -6vw; }
  .hero-role { text-align: left; }
}

/* ---------- home: sections ---------- */

.band { padding-top: clamp(4rem, 10vw, 8rem); }

.statement {
  max-width: 22ch;
  margin-bottom: 2.5rem;
  font-size: clamp(2.1rem, 5.4vw, 4.6rem);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -.045em;
}
.statement em { font-style: normal; color: var(--accent); }

.about-split { display: grid; gap: 2rem; }
.about-split p { max-width: 34rem; color: var(--text-soft); }
@media (min-width: 56rem) {
  .about-split { grid-template-columns: 1fr 1fr; }
  .about-split > div { grid-column: 2; }
}

.section-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1rem 2rem;
  margin-bottom: 2.5rem;
}
.section-head h2 {
  font-size: clamp(2.2rem, 5.5vw, 4.5rem);
  letter-spacing: -.05em;
}
.section-head .label { margin: 0; }

/* Case study cards, after the reference's project panels. */
.work-list { display: grid; gap: 1.25rem; margin: 0; padding: 0; list-style: none; }

.work-card {
  position: relative;
  display: grid;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-raised);
  transition: border-color .2s ease;
}
.work-card:hover { border-color: #4B3F7A; }

.work-card .work-text {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: clamp(1.25rem, 3vw, 2.5rem);
}
.work-card .label { margin: 0; color: var(--text-soft); }
.work-card h3 {
  font-size: clamp(2rem, 4vw, 3.2rem);
  letter-spacing: -.05em;
}
.work-card h3 a { color: var(--text); text-decoration: none; }
.work-card h3 a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.work-card .work-line { margin: 0; font-size: 1.15rem; line-height: 1.35; color: var(--text); max-width: 26rem; }
.work-card .work-more { margin-top: auto; padding-top: 1rem; font-weight: 500; color: var(--accent); }

.work-card figure {
  margin: 0;
  min-height: 16rem;
  background: var(--bg-panel);
  overflow: hidden;
}
.work-card figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top left;
  transition: transform .5s ease;
}
.work-card:hover figure img { transform: scale(1.025); }

@media (min-width: 56rem) {
  .work-card { grid-template-columns: 5fr 7fr; min-height: 30rem; }
  .work-card figure { border-left: 1px solid var(--line); }
}

/* What I do, after the reference's numbered services. */
.services { margin: 0; padding: 0; list-style: none; }
.service {
  display: grid;
  gap: 1rem 2rem;
  padding: 2rem 0;
  border-top: 1px solid var(--line);
}
.service:last-child { border-bottom: 1px solid var(--line); }
.service-n {
  font-family: var(--mono);
  font-size: clamp(3.5rem, 8vw, 6.5rem);
  line-height: .9;
  color: transparent;
  -webkit-text-stroke: 1px var(--text-soft);
}
.service h3 { font-size: clamp(1.6rem, 3vw, 2.3rem); margin-bottom: 1rem; }
.service ul { margin: 0; padding: 0; list-style: none; }
.service li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .6rem 0;
  border-top: 1px solid var(--line);
  color: var(--text-soft);
}
.service li span { font-family: var(--mono); font-size: .8rem; }
@media (min-width: 56rem) {
  .service { grid-template-columns: 1fr 1.4fr 1.6fr; align-items: start; }
  .service h3 { margin-bottom: 0; }
}

/* Recent clients table. */
.table-scroll { overflow-x: auto; }
.clients { width: 100%; border-collapse: collapse; font-size: .95rem; }
.clients th {
  padding: 0 1rem .8rem 0;
  font-family: var(--mono);
  font-size: .72rem;
  font-weight: 400;
  letter-spacing: .02em;
  text-align: left;
  text-transform: uppercase;
  color: var(--text-soft);
}
.clients td {
  padding: 1rem 1rem 1rem 0;
  border-top: 1px solid var(--line);
  vertical-align: top;
  color: var(--text-soft);
}
.clients td:first-child { color: var(--text); font-weight: 500; }
.clients td:last-child, .clients th:last-child { padding-right: 0; text-align: right; font-family: var(--mono); font-size: .8rem; }
@media (max-width: 40rem) {
  .clients .col-kind { display: none; }
}

/* Contact. */
.contact-big {
  display: inline-block;
  margin: 0 0 2rem;
  font-size: clamp(1.6rem, 5.4vw, 4.4rem);
  font-weight: 500;
  letter-spacing: -.045em;
  line-height: 1.05;
  color: var(--text);
  text-decoration: none;
  overflow-wrap: anywhere;
  border-bottom: 2px solid var(--line);
}
.contact-big:hover { color: var(--accent); border-color: var(--accent); }

.contact-list {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem 2.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--text-soft);
}
.contact-list li { display: flex; align-items: center; gap: .6rem; }
.contact-list a { color: var(--text); }
.contact-list a:hover { color: var(--accent); }
.contact-list .icon { color: var(--accent); }

/* ---------- case study ---------- */

.back-link {
  display: inline-block;
  margin-top: 1.5rem;
  font-family: var(--mono);
  font-size: .8rem;
  text-transform: uppercase;
  color: var(--text-soft);
  text-decoration: none;
}
.back-link:hover { color: var(--text); }

.cs-header { padding-top: clamp(2.5rem, 7vw, 5.5rem); }

.cs-header h1 {
  max-width: 17ch;
  margin-bottom: 1.75rem;
  font-size: clamp(2.4rem, 6.6vw, 5.8rem);
  line-height: .98;
  letter-spacing: -.05em;
}

.cs-header .chips { margin-bottom: 2rem; }

.standfirst {
  max-width: 44rem;
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  line-height: 1.45;
  color: var(--text-soft);
}

.facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
  margin: clamp(2rem, 5vw, 3.5rem) 0 0;
  padding: 1.25rem 0 0;
  border-top: 1px solid var(--line);
}
.facts div { min-width: 0; }
.facts dt {
  margin-bottom: .35rem;
  font-family: var(--mono);
  font-size: .72rem;
  text-transform: uppercase;
  color: var(--text-soft);
}
.facts dd { margin: 0; line-height: 1.4; }
@media (min-width: 48rem) { .facts { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.cover {
  margin: clamp(2.5rem, 6vw, 4.5rem) 0 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-panel);
}

/* Each section: number and heading on the left, content on the right. */
.cs-body { counter-reset: section; }

.cs-section {
  display: grid;
  gap: 1rem 3rem;
  margin-top: clamp(4rem, 9vw, 7rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  counter-increment: section;
}
.cs-section > h2 {
  font-size: clamp(1.7rem, 3.2vw, 2.5rem);
  letter-spacing: -.04em;
}
.cs-section > h2::before {
  content: counter(section, decimal-leading-zero);
  display: block;
  margin-bottom: .8rem;
  font-family: var(--mono);
  font-size: .8rem;
  letter-spacing: 0;
  color: var(--accent);
}
.cs-content { min-width: 0; }
.cs-content > :last-child { margin-bottom: 0; }

@media (min-width: 60rem) {
  .cs-section { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
  .cs-section > h2 { position: sticky; top: 2rem; align-self: start; }
}

.prose p, .cs-content > p { max-width: var(--measure); color: var(--text-soft); }
.cs-content h3 {
  margin: 2.5rem 0 1rem;
  font-size: 1.25rem;
  letter-spacing: -.02em;
}
.cs-content > h3:first-child { margin-top: 0; }

.two-col { display: grid; gap: 0 2.5rem; }
.two-col h3 { margin-top: 2rem; }
.two-col p { color: var(--text-soft); }
@media (min-width: 48rem) { .two-col { grid-template-columns: 1fr 1fr; } }

.pull {
  max-width: 34rem;
  margin: 2.5rem 0;
  font-size: clamp(1.45rem, 2.6vw, 2rem);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -.03em;
  color: var(--text);
}
.pull::before { content: ""; display: block; width: 2.5rem; height: 2px; margin-bottom: 1.25rem; background: var(--accent); }

/* Decision lists: bold label, then the reasoning, one per row. */
.decisions { max-width: 44rem; margin: 0 0 1rem; padding: 0; list-style: none; counter-reset: decision; }
.decisions li {
  position: relative;
  padding: 1.1rem 0 1.1rem 3rem;
  border-top: 1px solid var(--line);
  color: var(--text-soft);
  counter-increment: decision;
}
.decisions li:last-child { border-bottom: 1px solid var(--line); }
.decisions li::before {
  content: counter(decision, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 1.25rem;
  font-family: var(--mono);
  font-size: .78rem;
  color: var(--accent);
}
.decisions b { display: block; margin-bottom: .3rem; font-weight: 500; color: var(--text); }

.plain-list { max-width: 44rem; margin: 0 0 1rem; padding-left: 1.2rem; color: var(--text-soft); }
.plain-list li { margin-bottom: .6rem; }
.plain-list li::marker { color: var(--accent); }

.cs-body figure { margin: 2.5rem 0; }
.cs-body figure a { display: block; border-radius: var(--radius); }
.cs-body figure img {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-panel);
}
.cs-body figure.narrow { max-width: 34rem; }
.cs-body figure.tall { max-width: 30rem; }
figcaption {
  max-width: var(--measure);
  margin-top: .9rem;
  font-size: .92rem;
  line-height: 1.5;
  color: var(--text-soft);
}
figcaption b { font-weight: 500; color: var(--text); }

.fig-row { display: grid; gap: 0 1.25rem; }
.fig-row figure { margin-top: 0; }
@media (min-width: 48rem) { .fig-row { grid-template-columns: 1fr 1fr; align-items: start; } }

/* Figures that sit outside the two column grid and use the full width. */
.cs-wide { margin-top: 2.5rem; }
.cs-wide figure:first-child { margin-top: 0; }

.stat-row {
  display: grid;
  gap: 0 1.5rem;
  margin: 0 0 2rem;
  padding: 0;
  list-style: none;
}
.stat-row li { padding: 1.25rem 0; border-top: 1px solid var(--line); }
.stat-n {
  display: block;
  margin-bottom: .5rem;
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -.05em;
  color: var(--accent);
}
.stat-t { display: block; font-size: .92rem; line-height: 1.45; color: var(--text-soft); }
@media (min-width: 40rem) { .stat-row { grid-template-columns: repeat(3, 1fr); } }

.reflection {
  margin: 0;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-raised);
}
.reflection p { max-width: none; margin: 0; font-size: clamp(1.1rem, 1.8vw, 1.3rem); line-height: 1.55; color: var(--text); }

.next-case {
  margin-top: clamp(4rem, 9vw, 7rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}
.next-case .label { margin-bottom: .75rem; }
.next-case a {
  font-size: clamp(2rem, 6vw, 5rem);
  font-weight: 500;
  letter-spacing: -.05em;
  line-height: 1;
  color: var(--text);
  text-decoration: none;
}
.next-case a:hover { color: var(--accent); }

/* ---------- about and CV ---------- */

/* The page opens on the intro: tagline as the headline, then the two CV
   paragraphs and the contact details. */
.masthead { padding-top: clamp(2.5rem, 7vw, 5rem); }
.masthead h1 {
  max-width: 20ch;
  font-size: clamp(2.4rem, 6vw, 5.2rem);
  line-height: 1;
  letter-spacing: -.05em;
}
.masthead h1 em { font-style: normal; color: var(--accent); }
.masthead .contact-list { margin-top: 1rem; font-size: .95rem; }
.masthead .contact-list a { overflow-wrap: anywhere; }

.ledes { display: grid; gap: 0 3rem; margin-top: clamp(2rem, 5vw, 3.5rem); }
.ledes p { color: var(--text-soft); }
.ledes p:first-child { color: var(--text); font-size: 1.2rem; line-height: 1.5; }
@media (min-width: 56rem) { .ledes { grid-template-columns: 1fr 1fr; } }

.cv-section { margin-top: clamp(4rem, 9vw, 6.5rem); }

.employer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: .5rem 2rem;
  padding-bottom: 1rem;
}
.employer h3 { font-size: clamp(1.6rem, 3vw, 2.2rem); letter-spacing: -.04em; }
.employer p { margin: 0; color: var(--text-soft); }
.employer .dates { font-family: var(--mono); font-size: .8rem; color: var(--accent); text-transform: uppercase; }
.employer-block + .employer-block { margin-top: 3.5rem; }

/* Each client is a row that opens to show the detail. */
.client { border-top: 1px solid var(--line); }
.client:last-child { border-bottom: 1px solid var(--line); }

.client summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .6rem 1.5rem;
  align-items: center;
  padding: 1.1rem 0;
  cursor: pointer;
  list-style: none;
}
.client summary::-webkit-details-marker { display: none; }
.client summary::after {
  content: "+";
  grid-column: 2;
  grid-row: 1;
  font-family: var(--mono);
  font-size: 1.2rem;
  line-height: 1;
  color: var(--text-soft);
  transition: transform .2s ease;
}
.client[open] summary::after { transform: rotate(45deg); color: var(--accent); }
.client summary:hover h4 { color: var(--accent); }
.client h4 { grid-column: 1; font-size: 1.15rem; letter-spacing: -.02em; transition: color .15s ease; }
.client summary .chips { grid-column: 1 / -1; }

@media (min-width: 56rem) {
  .client summary { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto; }
  .client summary .chips { grid-column: 2; grid-row: 1; justify-content: flex-end; }
  .client summary::after { grid-column: 3; }
}

.client-body { padding: 0 0 1.5rem; }
.client-body ul { max-width: 46rem; margin: 0 0 1rem; padding-left: 1.1rem; color: var(--text-soft); }
.client-body li { margin-bottom: .6rem; }
.client-body li::marker { color: var(--accent); }
.client-body li b { font-weight: 500; color: var(--text); }
.client-body p { margin: 0; }

/* Skills, education and the rest, as a grid of panels. */
.panels { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); align-items: start; }
.panel {
  padding: 1.5rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-raised);
  font-size: .95rem;
}
.panel h3 {
  margin-bottom: 1.1rem;
  font-family: var(--mono);
  font-size: .8rem;
  font-weight: 400;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--accent);
}
.panel h4 { margin: 1.1rem 0 .4rem; font-size: 1rem; letter-spacing: -.01em; }
.panel h4:first-of-type { margin-top: 0; }
.panel ul { margin: 0; padding: 0; list-style: none; }
.panel li { padding: .35rem 0; border-top: 1px solid var(--line); color: var(--text-soft); }
.panel p { color: var(--text-soft); margin-bottom: .8rem; }
.panel p:last-child { margin-bottom: 0; }
.panel strong { font-weight: 500; color: var(--text); }
.panel--wide { grid-column: 1 / -1; }
@media (min-width: 56rem) {
  .panel--wide { display: grid; grid-template-columns: 12rem repeat(3, 1fr); gap: 0 2rem; }
  .panel--wide h3 { grid-row: 1 / span 2; }
  .panel--wide h4:first-of-type { margin-top: 0; }
  .panel--wide > div h4 { margin-top: 0; }
}

.skills { margin: 0; }
.skill + .skill { margin-top: .7rem; }
.skill-top { display: flex; justify-content: space-between; gap: 1rem; }
.skill-top dd { margin: 0; font-family: var(--mono); font-size: .78rem; color: var(--text-soft); }
.track { height: 3px; margin-top: .4rem; background: var(--line); }
.fill { height: 100%; background: var(--accent); }
.fill--90 { width: 90%; }
.fill--80 { width: 80%; }
.fill--70 { width: 70%; }
.fill--60 { width: 60%; }
.fill--50 { width: 50%; }

.pairs { margin: 0; }
.pairs div { display: flex; justify-content: space-between; gap: 1rem; padding: .35rem 0; border-top: 1px solid var(--line); }
.pairs dd { margin: 0; color: var(--text-soft); text-align: right; }

.stack > div { padding: .6rem 0; border-top: 1px solid var(--line); }
.stack > div:first-child { padding-top: 0; border-top: 0; }
.stack strong { display: block; font-weight: 500; }
.stack span { display: block; color: var(--text-soft); }

/* ---------- 404 ---------- */

.not-found { padding: 6rem var(--gutter) 2rem; }
.not-found h1 { margin-bottom: 1rem; font-size: clamp(2.4rem, 7vw, 5rem); letter-spacing: -.05em; }
.not-found p { color: var(--text-soft); }

/* ---------- motion ---------- */

/* Sections rise in as they scroll into view, where the browser supports
   scroll-driven animation. Everywhere else they are simply visible. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .reveal {
      animation: rise linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 35%;
    }
    @keyframes rise {
      from { opacity: 0; transform: translateY(2.5rem); }
      to { opacity: 1; transform: none; }
    }

    /* Hero parallax. As the hero scrolls away, its three layers move at
       different rates: the grey container trails furthest behind, the
       portrait less so, and the name moves faster than the page. The
       individual translate property is used so the name keeps its own
       centring transform. */
    .hero { background: transparent; view-timeline-name: --hero; }
    .hero::before {
      content: "";
      position: absolute;
      inset: 0;
      background: var(--light);
      animation: parallax-container linear both;
    }
    .hero .wrap { position: relative; }
    .hero-foot { animation: parallax-container linear both; }
    .hero-photo { animation: parallax-photo linear both; }
    .hero-name { animation: parallax-name linear both; }

    .hero::before, .hero-foot, .hero-photo, .hero-name {
      animation-timeline: --hero;
      animation-range: exit 0% exit 100%;
    }

    @keyframes parallax-container { to { translate: 0 30vh; } }
    @keyframes parallax-photo { to { translate: 0 15vh; } }
    @keyframes parallax-name { to { translate: 0 -12vh; } }
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
}

@media print {
  body { background: #fff; color: #000; }
  .site-header, .site-footer, .skip-link, .next-case, .back-link { display: none; }
}