/* Colours and type */
:root {
  --bg: #ffffff;
  --text: #222222;
  --muted: #555555;
  --rule: #e2e2e2;
  --accent: #a4502f; /* muted terracotta */
  --hover: #767676; /* hover states are a grey, not a colour */
  --serif: "Playfair Display", Georgia, serif;
  --sans: "Karla", system-ui, -apple-system, sans-serif;

  /* Type scale (2 Nov 2026): every font size on the site comes from this list.
     Steps are about 1.25x apart. The larger steps shrink on phones (see the 720px rule). */
  --fs-display: clamp(1.75rem, 7.2vw, 3rem); /* 48px: page headlines */
  --fs-xl: clamp(1.75rem, 5vw, 2.5rem);      /* 40px: "I love a map.", "Let's talk..." */
  --fs-l: 2rem;                              /* 32px: case study section lines, Back to all work */
  --fs-m: 1.5rem;                            /* 24px: tile headlines, outcomes */
  --fs-s: 1.125rem;                          /* 18px: nav name, company names, pull quote, footer line */
  --fs-body: 1rem;                           /* 16px: intros and body */
  --fs-body-sm: 0.875rem;                    /* 14px: case study paragraphs, footer note */
  --fs-small: 0.8125rem;                     /* 13px: section labels, nav links, facts, back link */
  --fs-label: 0.6875rem;                     /* 11px: small labels, captions and dates */
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 2rem; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0;
}

p { margin: 0 0 1rem; }

a { color: var(--accent); text-underline-offset: 0.2em; }
a:hover { color: var(--hover); }

/* Site margins: 80px each side on desktop (24px on phones). Content stops widening on very large screens. */
:root {
  --pad: 5rem;
  --max: 110rem;
  --content: calc(min(100vw, var(--max)) - 2 * var(--pad));
}
.wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--pad);
}

/* Nav */
.nav {
  position: sticky;
  top: 0;
  background: var(--bg);
  border-bottom: 1px solid var(--rule);
  z-index: 10;
  transition: transform 0.3s ease;
}
/* Hides when scrolling down, comes back when scrolling up (see site.js) */
.nav.nav-hidden { transform: translateY(-100%); }
.nav-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 5.5rem;
}
.nav-name {
  font-family: var(--serif);
  font-size: var(--fs-s);
  color: var(--text);
  text-decoration: none;
}
.nav ul {
  display: flex;
  gap: 1.85rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav ul a {
  color: var(--text);
  text-decoration: none;
  font-size: var(--fs-small);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.nav ul a:hover { color: var(--hover); }

/* Intro */
.intro {
  padding-top: 8rem;
  padding-bottom: 7rem;
}
.intro h1 {
  font-size: var(--fs-display); /* scales down on phones so the three lines hold */
  letter-spacing: -0.03em;
  margin-bottom: 3rem;
}
.lede {
  font-size: var(--fs-body);
  max-width: 31rem;
}

/* Sections */
.section {
  padding-top: 5rem;
  padding-bottom: 5rem;
}
.section > h2,
.work-head h2 {
  font-family: var(--sans);
  font-size: var(--fs-small);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 2rem;
}

/* Clicking Work lands with the section label near the top, so the whole tile is in view */
#work { scroll-margin-top: -3.5rem; }

/* Selected work: peek carousel. Each tile is about three quarters of the
   content width and the next one peeks in from the right edge of the screen. */
.work-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem; }
.work-head h2 { margin: 0; }
.carousel-controls { display: flex; gap: 0.5rem; }
.carousel-controls button {
  width: 2.5rem; height: 2.5rem;
  border: 1px solid var(--rule); border-radius: 50%;
  background: var(--bg); color: var(--text);
  font: inherit; font-size: var(--fs-body); line-height: 1;
  cursor: pointer;
}
.carousel-controls button:hover:not(:disabled) { border-color: var(--text); }
.carousel-controls button:disabled { color: #c4c4c4; cursor: default; }
.tiles {
  --tile: calc((var(--content) - 2.5rem) * 777 / 1240); /* 777px at 1440px; matched the case study image column until it was reduced 10% on 2 Nov 2026 */
  display: flex;
  gap: 2.5rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  /* Bleeds to both screen edges, so the next tile peeks in on the right at the start and the
     previous one on the left at the end. Tiles still line up on the page margins: the first
     on the left margin, the last on the right margin (2 Nov 2026). */
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-left: calc(50vw - var(--content) / 2);
  padding-right: calc(50vw - var(--content) / 2);
  scroll-padding: 0 calc(50vw - var(--content) / 2);
}
.tiles::-webkit-scrollbar { display: none; }
.tiles:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.tile { flex: 0 0 var(--tile); scroll-snap-align: start; display: flex; flex-direction: column; }
.tile:last-child { scroll-snap-align: end; }
.tile-media { aspect-ratio: 16 / 9; overflow: hidden; background: #f3f1ee; margin-bottom: 1.25rem; }
.tile-media { position: relative; }
.tile-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Small label on tiles whose case study isn't ready yet */
.tile-soon {
  position: absolute; top: 1rem; left: 1rem;
  background: var(--bg); color: var(--text);
  font-size: var(--fs-label); letter-spacing: 0.06em; text-transform: uppercase;
  padding: 0.35rem 0.6rem;
}
.tile h3 { font-size: var(--fs-m); line-height: 1.2; margin-bottom: 0.5rem; }
/* The whole tile is the link when a case study exists */
.tile-hit { display: block; color: inherit; text-decoration: none; }
.tile-media img { transition: transform 0.5s ease; }
a.tile-hit:hover .tile-media img { transform: scale(1.03); }
a.tile-hit:hover h3 { color: var(--hover); }
a.tile-hit:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; }
.card-meta {
  font-size: var(--fs-label);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0;
}
.card-meta .sep { margin: 0 0.4em; }

/* Case study pages */
.cs-back { display: inline-block; margin-top: 3rem; font-size: var(--fs-small); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); text-decoration: none; }
.cs-back:hover { color: var(--hover); }
.cs-header { padding-top: 8rem; padding-bottom: 3rem; } /* same top space as the home intro, now there is no back link above it */
.cs-label { font-family: var(--sans); font-size: var(--fs-small); font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 1.5rem; }
.cs-header h1 { font-size: var(--fs-display); letter-spacing: -0.03em; max-width: 52rem; margin-bottom: 2rem; }
.cs-facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem 2rem; margin: 3rem 0 0; padding-top: 1.5rem; border-top: 1px solid var(--rule); } /* sits between the intro and the hero image */
.cs-facts dt { font-size: var(--fs-label); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.35rem; }
.cs-facts dd { margin: 0; font-size: var(--fs-small); }
.cs-hero { aspect-ratio: 16 / 9; overflow: hidden; background: #f3f1ee; } /* 16:9 to match the hero image (decided 22 Oct 2026) */
.cs-hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tile-media picture, .cs-hero picture { display: contents; } /* lets the img inside <picture> fill its frame */
/* Outcomes and closing sections: label on the left margin, content block pushed to the right margin */
.cs-section { display: grid; grid-template-columns: 1fr min(42rem, 100%); gap: 2rem; align-items: start; padding-top: 6rem; padding-bottom: 1rem; }
.cs-section > h2 { margin: 0; padding-top: 0.5rem; }
.cs-section > h2 { font-family: var(--sans); font-size: var(--fs-small); font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 2rem; }
.cs-body { max-width: 42rem; }
.cs-body h3 { font-size: var(--fs-m); margin: 0 0 1.25rem; }
.cs-outcomes { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--rule); }
.cs-outcomes li { font-family: var(--serif); font-size: var(--fs-m); line-height: 1.25; letter-spacing: -0.01em; padding: 1.1rem 0; border-bottom: 1px solid var(--rule); }
.cs-next { padding-top: 3rem; padding-bottom: 4rem; } /* tightened 2 Nov 2026, now the link is small */
.cs-next a { font-family: var(--sans); font-size: var(--fs-small); color: var(--text); text-decoration: none; letter-spacing: 0.04em; text-transform: uppercase; } /* same style as the nav links (2 Nov 2026) */
.cs-next a:hover { color: var(--hover); }
/* Thin left chevron before "Back to all work", drawn with two 1px borders so it matches the site's rules */
.cs-next a::before {
  content: "";
  display: inline-block;
  width: 0.45em; height: 0.45em;
  border-left: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(45deg);
  margin: 0 0.6em 0 0.15em; /* the left nudge keeps the rotated tip on the page margin */
  vertical-align: 0.12em;
}
/* The work: full-width mirrored sections. A large image (about 699 x 685 on a
   1440px screen) on one side, text on the other with a 40px gutter, alternating
   sides, and the text anchored to the bottom of the image. */
.cs-work { padding-top: 6rem; }
.cs-work .cs-label { margin-bottom: 3rem; }
.cs-feature {
  display: grid;
  grid-template-columns: 699fr 541fr; /* 699 x 685 image at 1440px with 80px margins (10% smaller than 777 x 761, 2 Nov 2026) */
  gap: 2.5rem; /* 40px gutter */
  align-items: end;
}
.cs-feature + .cs-feature { margin-top: 8rem; }
.cs-feature--flip { grid-template-columns: 541fr 699fr; }
.cs-feature--flip .cs-feature-media { order: 2; }
.cs-feature-media { width: 100%; aspect-ratio: 777 / 761; overflow: hidden; background: #f3f1ee; }
.cs-feature-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Diagrams on a dark square: shown whole, never cropped, on a matching background */
.cs-feature-media--dark { background: #222; }
.cs-feature-media--dark img { object-fit: contain; }
.cs-placeholder {
  display: flex; align-items: center; justify-content: center;
  padding: 2rem; text-align: center; font-size: var(--fs-small); color: var(--muted);
}
.cs-feature-text { max-width: 32rem; }
.cs-feature--flip .cs-feature-text { justify-self: end; }
.cs-feature-text .cs-label { font-size: var(--fs-label); margin-bottom: 1rem; }
.cs-feature-text h3 {
  font-size: var(--fs-l);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: 1.5rem;
}
.cs-feature-text p { font-size: var(--fs-body-sm); line-height: 1.6; }
.cs-feature-text p:last-child { margin-bottom: 0; }
/* Pull quote under a work paragraph: serif, smaller than the section's large line */
.cs-quote { margin: 2rem 0 0; padding-top: 1.5rem; border-top: 1px solid var(--rule); }
.cs-quote p {
  font-family: var(--serif);
  font-size: var(--fs-s);
  line-height: 1.35;
  letter-spacing: -0.01em;
  margin: 0 0 0.75rem;
}
.cs-quote footer {
  font-size: var(--fs-label);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.draft { background: #fff3cd; padding: 0 0.2em; }

/* About */
.bio {
  font-size: var(--fs-body);
  max-width: 42rem;
  margin-bottom: 10rem; /* Experience reads as its own block */
}
/* About reads as the heading for the section rather than a small label */
#about > h2 { margin-bottom: 5rem; }
#about .contact-title { margin-bottom: 2rem; }
.sub {
  font-family: var(--sans);
  font-size: var(--fs-small);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 5rem;
}
.experience {
  list-style: none;
  margin: 0 0 2rem;
  padding: 0;
  border-top: 1px solid var(--rule);
}
.experience li {
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--rule);
}
.experience strong { font-family: var(--serif); font-weight: 400; font-size: var(--fs-s); letter-spacing: -0.01em; }
.experience .exp-company { border-bottom: none; padding-bottom: 0.25rem; }
.experience .exp-role {
  padding: 0.35rem 0 0.35rem 1.25rem;
  border-bottom: none;
  font-size: var(--fs-body);
}
.experience .exp-role:has(+ li:not(.exp-role)) { border-bottom: 1px solid var(--rule); padding-bottom: 1rem; }
.dates {
  color: #767676; /* lightest grey that keeps AA contrast on white */
  white-space: nowrap;
  font-size: var(--fs-label); /* so the dates read as quiet metadata */
  letter-spacing: 0.06em;
  text-transform: uppercase;
  align-self: center;
}
.education,
.muted {
  color: var(--muted);
  font-size: var(--fs-body-sm);
}

/* Contact */
#contact { padding-bottom: 6rem; }
.contact-title {
  font-family: var(--serif);
  font-size: var(--fs-xl);
  line-height: 1.1;
  letter-spacing: -0.03em;
  margin-bottom: 2rem;
}
.contact-details { margin: 3rem 0 0; }
.contact-details div + div { margin-top: 1.5rem; }
.contact-details dt {
  font-size: var(--fs-label);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 0.25rem;
}
.contact-details dd { margin: 0; }
.contact-details a {
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: var(--rule);
}
.contact-details a:hover { text-decoration-color: var(--text); }

/* Footer */
.footer {
  background: #262626;
  color: #ffffff;
  padding: 4rem 0 2rem;
}
.footer-cta {
  font-size: var(--fs-s);
  font-weight: 700;
  margin: 0;
}
.footer-note {
  color: #b5b5b5;
  font-size: var(--fs-body-sm);
  margin: 0.5rem 0 0;
}
.footer-note a { color: inherit; text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
.footer-note a:hover { color: #ffffff; } /* white on the dark footer, where the usual grey hover would be too faint */
.footer-link {
  color: #ffffff;
  text-decoration: none;
  font-size: var(--fs-body-sm);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.footer-link span { margin-left: 0.5em; }
.footer-link:hover { color: #ffffff; text-decoration: underline; }
.footer-bottom {
  margin-top: 3.5rem;
  padding-top: 1.75rem;
  border-top: 1px solid #8a8a8a;
}
.footer-bottom p {
  margin: 0;
  font-size: var(--fs-small);
}

/* Smaller laptops and tablets: margins step down */
@media (max-width: 1100px) {
  :root { --pad: 3rem; }
}

/* Below 1100px the work sections stack (image first), so text never runs taller than the image */
@media (max-width: 1099px) {
  .cs-feature, .cs-feature--flip { grid-template-columns: 1fr; gap: 1.5rem; }
  .cs-feature--flip .cs-feature-media { order: 0; }
  .cs-feature--flip .cs-feature-text { justify-self: start; }
  .cs-feature-text { max-width: 40rem; }
  .cs-feature + .cs-feature { margin-top: 5rem; }
}

/* Tablet widths */
@media (max-width: 900px) {
  .tiles { --tile: 82vw; gap: 1.25rem; }
  .tile-media { aspect-ratio: 1 / 1; } /* square on phones, for the square mobile images */
  .cs-hero { aspect-ratio: 1 / 1; }
}

/* Phone widths */
@media (max-width: 720px) {
  :root { --pad: 1.5rem; --fs-l: 1.5rem; --fs-m: 1.25rem; } /* larger type steps shrink on phones */
  .intro { padding-top: 4.5rem; padding-bottom: 4rem; }
  .cs-header { padding-top: 4.5rem; }
  .section { padding-top: 3rem; padding-bottom: 3rem; }
  #about > h2 { margin-bottom: 3rem; }
  .bio { margin-bottom: 6rem; }
  .sub { margin-bottom: 3rem; }
  .cs-facts { grid-template-columns: 1fr 1fr; gap: 1rem 1.25rem; margin-top: 2rem; padding-top: 1.25rem; }
  .cs-facts dt { margin-bottom: 0.2rem; }
  .cs-facts dd { line-height: 1.4; }
  .cs-header .lede { font-size: var(--fs-body-sm); } /* smaller intro on case study pages */
  .cs-section { grid-template-columns: 1fr; gap: 1.5rem; padding-top: 4rem; }
  .cs-work { padding-top: 4rem; }
  .cs-feature, .cs-feature--flip { grid-template-columns: 1fr; gap: 1.5rem; }
  .cs-feature--flip .cs-feature-text { justify-self: start; }
  /* phones keep the same near-square shape as desktop, so diagrams are not cropped */
  .cs-feature-text { max-width: none; }
  .cs-feature--flip .cs-feature-media { order: 0; }
  .cs-feature + .cs-feature { margin-top: 4.5rem; }
  .experience li { flex-direction: column; gap: 0.25rem; }
  .experience .dates { align-self: flex-start; }
  .desktop-break { display: none; }
  .nav-name { font-size: var(--fs-body); }
  .nav ul { gap: 1.1rem; }
}

@media (max-width: 380px) {
  .nav-name { font-size: var(--fs-body-sm); }
  .nav ul { gap: 0.8rem; }
  .nav ul a { font-size: var(--fs-label); }
}