/* Gruow site styles. Values come from the approved home page design ("Gruow v3"). */

/* ---------- Fonts (served from this site, not Google) ---------- */

@font-face {
  font-family: "Work Sans";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/fonts/work-sans-latin-wght-normal.woff2) format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Work Sans";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/fonts/work-sans-latin-ext-wght-normal.woff2) format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Work Sans";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url(/fonts/work-sans-latin-wght-italic.woff2) format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Work Sans";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url(/fonts/work-sans-latin-ext-wght-italic.woff2) format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- Tokens ---------- */

:root {
  --bg-rgb: 25, 23, 19;
  --bg: #191713;
  --s1: #211f1a;
  --s2: #2a2722;
  --ink: 237, 232, 220;          /* used as rgb(var(--ink)) / rgba(var(--ink), a) */
  --shadow: 0, 0, 0;
  --blue: #5d69ff;
  --blue-hover: #7480ff;
  --blue-rgb: 93, 105, 255;
  --on-color: #f4f1ea;           /* text on the coloured work cards */

  --max: 1440px;
  --gutter: 48px;
  --hero-top: 84px;    /* space above every page's main heading */
  --section-gap: 72px; /* space between sections */

  color-scheme: dark;
}

@media (max-width: 760px) {
  :root { --gutter: 20px; --hero-top: 56px; --section-gap: 52px; }
}

/* ---------- Base ---------- */

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

html, body { margin: 0; padding: 0; }

body {
  background: var(--bg);
  color: rgb(var(--ink));
  font-family: "Work Sans", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

a { color: rgb(var(--ink)); text-decoration: none; }
a:hover {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

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

::selection { background: rgba(var(--blue-rgb), 0.22); }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: 16px; top: 12px;
  z-index: 10;
  padding: 8px 14px;
  border-radius: 8px;
  background: var(--blue);
  color: #fff;
  transform: translateY(-200%);
}
.skip-link:focus { transform: none; }

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

/* ---------- Page frame: aurora background, grain ---------- */

.page {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  overflow-x: clip;
}

.grain {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  mix-blend-mode: overlay;
  opacity: 0.25;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/></filter><rect width='180' height='180' filter='url(%23n)' opacity='0.55'/></svg>");
  background-size: 180px 180px;
}

/* The animated background (public/js/aurora.js). Fades in once the first frame is drawn. */
.aurora {
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.2s ease;
}
.aurora.is-ready { opacity: 1; }

/* ---------- Shared pieces ---------- */

.wordmark {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.045em;
}
.wordmark:hover { text-decoration: none; }

.button {
  display: inline-block;
  padding: 9px 16px;
  border-radius: 9px;
  background: var(--blue);
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  white-space: nowrap;
  transition: background 0.18s ease;
}
.button:hover { text-decoration: none; background: var(--blue-hover); color: #fff; }
/* A button whose label slides to a second one on hover (the nav's "Build with us" → "Book a call"). */
.button--swap { display: inline-grid; overflow: hidden; vertical-align: middle; }
.button--swap > span { grid-area: 1 / 1; text-align: center; transition: transform 0.25s ease, opacity 0.25s ease; }
.button--swap .button__alt { transform: translateY(110%); opacity: 0; }
.button--swap:hover .button__label,
.button--swap:focus-visible .button__label { transform: translateY(-110%); opacity: 0; }
.button--swap:hover .button__alt,
.button--swap:focus-visible .button__alt { transform: none; opacity: 1; }

.eyebrow {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(var(--ink), 0.52);
}

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

/* The header sits straight on the background. Once the page has scrolled (site.js adds .is-scrolled),
   a blur softens whatever passes underneath so the links stay readable; it adds no colour of its own. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 5;
  transition: transform 0.3s ease, -webkit-backdrop-filter 0.3s ease, backdrop-filter 0.3s ease;
}
.site-header.is-scrolled {
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}
.site-header.is-hidden { transform: translateY(-100%); }
.site-header:focus-within { transform: none; }

.site-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  padding-block: 20px 12px;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 36px;
  font-size: 16px;
  font-weight: 500;
}

.site-nav__links {
  display: flex;
  align-items: center;
  gap: 36px;
}
.site-nav__links a[aria-current="page"] { color: rgba(var(--ink), 0.5); }

/* Phones: the four page links become a strip that scrolls sideways between the logo and the button.
   No scrollbar; instead the edge with more links beyond it fades out (site.js sets the classes). */
@media (max-width: 760px) {
  .site-header__bar { gap: 16px; }
  .wordmark, .site-nav .button { flex: none; }
  .site-nav .button { padding-inline: 12px; }
  .site-nav {
    flex: 1;
    min-width: 0;
    justify-content: flex-end;
    gap: 12px;
  }
  .site-nav__links {
    /* Fade width, and the eased fades for each edge (mostly gone well before the edge, so the cut-off reads clearly). */
    --fade: min(56px, 30%);
    --fade-end: linear-gradient(to right, #000 calc(100% - var(--fade)), rgba(0, 0, 0, 0.15) calc(100% - var(--fade) * 0.45), transparent);
    --fade-start: linear-gradient(to right, transparent, rgba(0, 0, 0, 0.15) calc(var(--fade) * 0.45), #000 var(--fade));
    --fade-both: linear-gradient(to right, transparent, rgba(0, 0, 0, 0.15) calc(var(--fade) * 0.45), #000 var(--fade), #000 calc(100% - var(--fade)), rgba(0, 0, 0, 0.15) calc(100% - var(--fade) * 0.45), transparent);
    flex: 0 1 auto;
    min-width: 0;
    gap: 16px; /* same as the space between the logo and the strip */
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    white-space: nowrap;
    font-size: 15px;
    /* Without JS: always hint at more on the right. */
    -webkit-mask-image: var(--fade-end);
    mask-image: var(--fade-end);
  }
  .site-nav__links::-webkit-scrollbar { display: none; }
  .site-nav__links a { display: block; padding: 10px 0; }
  .js .site-nav__links { -webkit-mask-image: none; mask-image: none; }
  .js .site-nav__links.is-scrollable-end { -webkit-mask-image: var(--fade-end); mask-image: var(--fade-end); }
  .js .site-nav__links.is-scrollable-start { -webkit-mask-image: var(--fade-start); mask-image: var(--fade-start); }
  .js .site-nav__links.is-scrollable-start.is-scrollable-end { -webkit-mask-image: var(--fade-both); mask-image: var(--fade-both); }
}

/* ---------- Main ---------- */

.main {
  position: relative;
  z-index: 1;
  flex: 1;
  padding-bottom: 16px;
}

.section { padding-top: var(--section-gap); scroll-margin-top: 80px; }

.section-head {
  display: flex;
  align-items: baseline;
  gap: 22px;
}
.section-head::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(var(--ink), 0.18);
}
.section-head h2 {
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -0.038em;
}

/* ---------- Hero ---------- */

.hero { padding-top: var(--hero-top); }

.hero h1 {
  font-size: clamp(34px, 4.8vw, 68px);
  line-height: 0.98;
  font-weight: 600;
  letter-spacing: -0.05em;
}

.hero p {
  margin-top: 22px;
  max-width: 92ch;
  font-size: 17px;
  line-height: 1.62;
  color: rgba(var(--ink), 0.76);
}

.hero__cta {
  display: inline-flex;
  margin-top: 36px;
  font-size: clamp(22px, 2.1vw, 28px);
  font-weight: 600;
  letter-spacing: -0.03em;
  transition: opacity 0.18s ease;
}
.hero__cta span {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}
.hero__cta:hover { opacity: 0.75; }

/* ---------- Recent work (bento) ---------- */

.bento {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: 300px 300px;
  grid-template-areas:
    "a a a a a a a b b b b b"
    "c c c c c c c b b b b b";
  gap: 22px;
  margin-top: 30px;
}

.work-card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
  padding: 26px;
  border-radius: 16px;
  color: var(--on-color);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.work-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 40px rgba(var(--shadow), 0.22);
}
.work-card--blue   { background: linear-gradient(135deg, #3b4bb8 0%, #5d69ff 55%, #8d95ff 100%); }
.work-card--stone  { background: linear-gradient(170deg, #22201b 0%, #2f2b24 60%, #3a352c 100%); }
.work-card--violet { background: linear-gradient(135deg, #6a5a8c 0%, #8a76ac 60%, #b3a3cf 100%); }
.work-card--teal   { background: linear-gradient(160deg, #1f3b3a 0%, #2f5a55 60%, #4f7d74 100%); }
.work-card--slate  { background: linear-gradient(150deg, #2b3654 0%, #43578a 60%, #7086c2 100%); }

.work-card__media {
  position: absolute;
  right: 22px;
  bottom: 20px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(244, 241, 234, 0.72);
}

.work-card__sector {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(244, 241, 234, 0.7);
}

.work-card h3 {
  margin-top: 10px;
  font-size: 26px;
  line-height: 1.08;
  font-weight: 600;
  letter-spacing: -0.035em;
}

.work-card__summary {
  margin-top: 10px;
  font-size: 15px;
  line-height: 1.5;
  color: rgba(244, 241, 234, 0.78);
}

.work-card__link {
  display: inline-block;
  padding: 8px 14px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.92);
  color: #1a1a18;
  font-size: 13.5px;
  font-weight: 500;
  transition: background 0.18s ease;
}
.work-card__link:hover { text-decoration: none; background: #fff; color: #1a1a18; }

@media (max-width: 900px) {
  .bento {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    grid-template-areas: "a" "b" "c";
  }
  .work-card { min-height: 280px; }
}

/* ---------- Services ---------- */

.services {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 36px 40px;
  margin-top: 30px;
}

/* No box: the illustration, heading and text sit straight on the page. */
.service-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ---------- What we build: a white line icon, then the text, then a Learn more link ---------- */

.service-card__icon { display: block; margin-bottom: 14px; color: rgb(var(--ink)); }
.service-card__more {
  align-self: flex-start;
  margin-top: 6px;
  font-size: 15px;
  font-weight: 500;
  border-bottom: 1px solid rgba(var(--ink), 0.28);
  transition: border-color 0.18s ease;
}
.service-card__more:hover { text-decoration: none; border-bottom-color: rgb(var(--ink)); }

.service-card h3 {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.035em;
}

.service-card p {
  flex: 1;
  font-size: 15.5px;
  line-height: 1.55;
  color: rgba(var(--ink), 0.78);
}

/* ---------- Writing ---------- */

.posts { margin-top: 24px; }

.post-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "text date";
  gap: 24px;
  padding: 20px 0;
  border-bottom: 1px solid rgba(var(--ink), 0.12);
}
.post-row:hover { text-decoration: none; }
.post-row:hover .post-row__title {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.post-row__text { grid-area: text; }

.post-row__title {
  display: block;
  font-size: 20px;
  line-height: 1.3;
  font-weight: 500;
  letter-spacing: -0.02em;
}

.post-row__dek {
  display: -webkit-box;
  max-width: 72ch;
  margin-top: 6px;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-size: 15.5px;
  line-height: 1.55;
  color: rgba(var(--ink), 0.7);
}

.post-row__date {
  grid-area: date;
  align-self: end;
  font-size: 14px;
  line-height: 24px;
  color: rgba(var(--ink), 0.5);
}

@media (max-width: 640px) {
  .post-row {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "text" "date";
    gap: 6px;
  }
  .post-row__date { align-self: start; }
}

/* ---------- Inner pages: shared ---------- */

/* Same top spacing as the home and Writing heroes. */
.page-hero { padding-top: var(--hero-top); }
.page-hero + .photo-band { margin-top: var(--section-gap); }
.page-hero h1 {
  font-size: clamp(34px, 4.8vw, 68px);
  line-height: 0.98;
  font-weight: 600;
  letter-spacing: -0.05em;
  text-wrap: balance;
}

.section--roomy { padding-top: var(--section-gap); }

.section-intro {
  margin-top: 18px;
  max-width: 64ch;
  font-size: 17px;
  line-height: 1.6;
  color: rgba(var(--ink), 0.76);
}

/* Three ruled columns of heading + paragraph. */
.trio {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px;
  margin-top: 34px;
}
.trio article {
  padding-top: 18px;
  border-top: 1px solid rgba(var(--ink), 0.14);
  scroll-margin-top: 100px;
}
/* With icons (Services "What we build"): no rule above each item. */
.trio--icons article { padding-top: 0; border-top: 0; }
.trio h3 {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.03em;
}
.trio p {
  margin-top: 10px;
  font-size: 16px;
  line-height: 1.65;
  color: rgba(var(--ink), 0.84);
}

@media (max-width: 900px) {
  .trio { grid-template-columns: minmax(0, 1fr); gap: 28px; }
}

/* ---------- Services: photo band ---------- */

/* Full-bleed: breaks out of the page column to the window edges. */
.photo-band {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  overflow: hidden;
  background: var(--s1);
}

.photo-band__image {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
}

.photo-band__shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(var(--bg-rgb), 0.25) 0%, rgba(var(--bg-rgb), 0.45) 45%, rgba(var(--bg-rgb), 0.88) 100%),
    linear-gradient(90deg, rgba(var(--bg-rgb), 0.55) 0%, rgba(var(--bg-rgb), 0) 70%);
}

.photo-band__content {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  max-width: var(--max);
  min-height: 480px;
  margin: 0 auto;
  padding: 72px var(--gutter);
}
.photo-band h2 {
  font-size: clamp(28px, 3.4vw, 46px);
  line-height: 1.04;
  font-weight: 600;
  letter-spacing: -0.045em;
  text-wrap: balance;
}
.photo-band p {
  margin-top: 22px;
  max-width: 100ch; /* two lines on desktop */
  text-wrap: balance;
  font-size: 18px;
  line-height: 1.62;
  color: rgba(var(--ink), 0.88);
}

@media (max-width: 760px) {
  .photo-band__content { min-height: 420px; padding-block: 48px; }
  .photo-band p { font-size: 17px; }
}

/* ---------- Services: the layers table ---------- */

.layers {
  width: 100%;
  margin-top: 26px;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 16px;
  line-height: 1.55;
}
.layers th,
.layers td {
  padding: 18px 20px 18px 0;
  vertical-align: top;
  text-align: left;
}
.layers thead tr { border-bottom: 1px solid rgba(var(--ink), 0.18); }
.layers thead td { width: 18%; }
.layers thead th {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(var(--ink), 0.5);
}
.layers tbody tr { border-bottom: 1px solid rgba(var(--ink), 0.12); }
.layers tbody th {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.layers td { color: rgba(var(--ink), 0.84); }

/* Phones: four columns won't fit, so each row becomes a block with its column named above each cell. */
@media (max-width: 760px) {
  .layers, .layers tbody, .layers tr, .layers th, .layers td { display: block; width: auto; }
  .layers thead { display: none; }
  .layers tbody tr { padding: 22px 0 8px; }
  .layers tbody th { padding: 0 0 6px; }
  .layers td { padding: 10px 0; }
  .layers td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 4px;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(var(--ink), 0.52);
  }
}

/* ---------- Services: closing note ---------- */

.closing { margin-top: 44px; }
.closing__lead {
  font-size: 23px;
  line-height: 1.24;
  font-weight: 600;
  letter-spacing: -0.03em;
}
.closing p + p {
  margin-top: 18px;
  font-size: 17px;
  line-height: 1.7;
  color: rgba(var(--ink), 0.88);
}
.closing a {
  border-bottom: 1px solid rgba(var(--ink), 0.28);
  transition: border-color 0.18s ease;
}
.closing a:hover { text-decoration: none; border-bottom-color: rgb(var(--ink)); }

@media (max-width: 640px) {
  .closing { margin-top: 36px; }
  .closing__lead { font-size: 21px; }
}

/* ---------- Work index: projects stacked, each a large picture with its details underneath ---------- */

.project-stack {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr)); /* every project spans 6: equal tiles, two per row */
  gap: 56px 22px;
  margin-top: 52px;
}
.project { grid-column: span 6; }
.project__media {
  display: grid;
  place-items: center;
  height: 408px; /* 20% taller than the original 340px */
  overflow: hidden;
  padding: 36px 40px 0;
  border-radius: 16px;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.project__media:hover { text-decoration: none; transform: translateY(-3px); box-shadow: 0 18px 40px rgba(var(--shadow), 0.28); }
/* Inset: the screenshot sits on the product's colour, cut off at the bottom edge like a window. */
.project__media img {
  align-self: end;
  width: 100%;
  height: auto;
  border-radius: 10px 10px 0 0;
  box-shadow: 0 -2px 30px rgba(0, 0, 0, 0.25);
}
/* Full: the picture already has its own frame, so it fills the card. */
.project__media--full { padding: 0; }
.project__media--full img { align-self: stretch; height: 100%; object-fit: cover; border-radius: 0; box-shadow: none; }
.project__mark {
  align-self: center;
  margin-top: -36px;
  font-size: clamp(36px, 6vw, 72px);
  font-weight: 600;
  letter-spacing: -0.04em;
  color: rgba(244, 241, 234, 0.9);
}
.project__meta {
  display: flex;
  gap: 12px;
  margin-top: 20px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(var(--ink), 0.55);
}
.project__tagline {
  margin-top: 8px;
  font-size: 22px;
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.project__tagline a:hover {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
.project__summary {
  margin-top: 6px;
  max-width: 64ch;
  font-size: 16px;
  line-height: 1.6;
  color: rgba(var(--ink), 0.76);
}
.project__links { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 14px; font-size: 15px; font-weight: 500; }
.project__links a {
  border-bottom: 1px solid rgba(var(--ink), 0.28);
  transition: border-color 0.18s ease;
}
.project__links a:hover { text-decoration: none; border-bottom-color: rgb(var(--ink)); }

@media (max-width: 900px) {
  .project-stack { grid-template-columns: minmax(0, 1fr); }
  .project, .project:nth-child(n) { grid-column: 1 / -1; }
  .project__media { height: auto; aspect-ratio: 4 / 3; padding: 6% 7% 0; }
}
@media (max-width: 640px) {
  .project-stack { gap: 44px; margin-top: 36px; }
  .project__media { border-radius: 12px; }
  .project__tagline { font-size: 19px; }
}

/* ---------- Case study ---------- */

.breadcrumb {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 40px;
  font-size: 14px;
  font-weight: 500;
}
.breadcrumb a { color: rgba(var(--ink), 0.5); }
.breadcrumb span[aria-hidden] { color: rgba(var(--ink), 0.3); }
.breadcrumb [aria-current] { color: var(--blue-hover); }

/* Phones: long titles wrap badly beside the parent link, so put the title on its own line. */
@media (max-width: 640px) {
  .breadcrumb { flex-direction: column; align-items: flex-start; gap: 4px; }
  .breadcrumb span[aria-hidden] { display: none; }
}

.case-hero { padding-top: 24px; }
.case-hero h1 {
  margin-top: 14px;
  font-size: clamp(32px, 4.6vw, 64px);
  line-height: 0.98;
  font-weight: 600;
  letter-spacing: -0.048em;
}
.case-hero p {
  margin-top: 12px;
  max-width: 68ch;
  font-size: 19px;
  line-height: 1.62;
  color: rgba(var(--ink), 0.76);
}

.case-figure { margin: 0; }
.case-top {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)); /* cover left, title right, half each */
  gap: 56px;
  align-items: center;
  margin-top: 28px;
}
.case-top .case-figure { grid-column: 1; grid-row: 1; }
.case-top .case-hero { grid-column: 2; grid-row: 1; padding-top: 0; }
.case-top .case-hero h1 { margin-top: 0; }
@media (max-width: 900px) {
  .case-top { grid-template-columns: minmax(0, 1fr); gap: 28px; margin-top: 20px; }
  .case-top .case-figure, .case-top .case-hero { grid-column: 1; grid-row: auto; }
}
.case-figure__media {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px;
  box-shadow: inset 0 0 0 1px rgba(var(--ink), 0.12);
  background: var(--s1);
}
.case-hero .case-hero__credit {
  margin-top: 14px;
  font-size: 15px;
  color: rgba(var(--ink), 0.7);
}

/* Galleries inside a case study: up to four screenshots side by side, the text explaining them below.
   Each tile shows the top of its screen; clicking opens the full screenshot (site.js). */
.case-body .gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 22px 0 20px;
}
.case-body .gallery--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.case-body .gallery--1 { grid-template-columns: minmax(0, 1fr); max-width: 640px; }
.case-body .gallery a {
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border: 0;
  border-radius: 10px;
  background: var(--s1);
  box-shadow: 0 0 0 1px rgba(var(--ink), 0.12);
  cursor: zoom-in;
}
.case-body .gallery a:hover { border: 0; }
.case-body .gallery img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top left;
  transition: transform 0.3s ease;
}
.case-body .gallery a:hover img { transform: scale(1.03); }
.case-body .gallery video { display: block; width: 100%; border-radius: 10px; background: var(--s1); }
@media (max-width: 640px) {
  .case-body .gallery, .case-body .gallery--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
}

/* Full-size screenshot viewer. */
.lightbox {
  width: min(1400px, 94vw);
  max-width: none;
  max-height: 92vh;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: transparent;
  overflow: visible;
}
.lightbox::backdrop { background: rgba(10, 9, 8, 0.86); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.lightbox img { display: block; width: 100%; max-height: 86vh; object-fit: contain; border-radius: 12px; }
.lightbox__caption { margin-top: 10px; text-align: center; font-size: 14px; color: rgba(var(--ink), 0.8); }
.lightbox__close {
  position: absolute;
  top: -44px;
  right: 0;
  padding: 6px 12px;
  border: 0;
  border-radius: 8px;
  background: rgba(var(--ink), 0.12);
  color: rgb(var(--ink));
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}
.lightbox__close:hover { background: rgba(var(--ink), 0.2); }
.case-body em { font-style: italic; }
/* Stand-in for the screenshot: the project's card colour (a .work-card--* class), caption bottom right. */
.case-figure__placeholder {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  aspect-ratio: 16 / 9;
  padding: 20px 22px;
  border-radius: 16px;
}
.case-figure__placeholder span {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(244, 241, 234, 0.72);
}

.case-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 0 56px;
  align-items: start;
  margin-top: 56px;
}

.case-main {
  padding-right: 56px;
  border-right: 1px solid rgba(var(--ink), 0.22);
}

/* The case study's Markdown: each "## heading" opens a ruled section. */
.case-body h2 {
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid rgba(var(--ink), 0.18);
  font-size: 18px;
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.case-body > :first-child { margin-top: 0; }
.case-body p,
.case-body li {
  max-width: 76ch;
  font-size: 17px;
  line-height: 1.7;
  color: rgba(var(--ink), 0.9);
}
.case-body p { margin-top: 14px; }
.case-body ul {
  display: grid;
  gap: 12px;
  margin-top: 14px;
  padding-left: 1.1em;
  list-style: disc;
}
.case-body li::marker { color: rgba(var(--ink), 0.4); }
.case-body strong { font-weight: 600; color: rgb(var(--ink)); }
.case-body a {
  border-bottom: 1px solid rgba(var(--ink), 0.28);
  transition: border-color 0.18s ease;
}
.case-body a:hover { text-decoration: none; border-bottom-color: rgb(var(--ink)); }

.decisions {
  margin-top: 56px;
  padding-top: 24px;
  border-top: 1px solid rgba(var(--ink), 0.18);
}
.decisions h2 {
  font-size: 26px;
  line-height: 1.08;
  font-weight: 600;
  letter-spacing: -0.035em;
}
.decisions ol {
  display: grid;
  gap: 26px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
}
.decisions li {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 22px;
  align-items: baseline;
}
.decisions__num {
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.13em;
  color: rgba(var(--ink), 0.52);
}
.decisions h3 {
  font-size: 18px;
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.decisions p {
  margin-top: 8px;
  max-width: 76ch;
  font-size: 17px;
  line-height: 1.7;
  color: rgba(var(--ink), 0.9);
}

.case-facts {
  position: sticky;
  top: 92px;
  padding-top: 24px;
  border-top: 1px solid rgba(var(--ink), 0.18);
}
.case-facts dl { margin: 0; }
.case-facts dl > div {
  padding: 14px 0;
  border-bottom: 1px solid rgba(var(--ink), 0.14);
}
.case-facts dt {
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: rgba(var(--ink), 0.52);
}
.case-facts dd {
  margin: 6px 0 0;
  font-size: 16px;
  line-height: 1.35;
}
.case-facts__links {
  display: grid;
  justify-items: start;
  gap: 14px;
  margin-top: 22px;
  font-size: 16px;
  font-weight: 500;
}
.case-facts__links a {
  border-bottom: 1px solid rgba(var(--ink), 0.28);
  transition: border-color 0.18s ease;
}
.case-facts__links a:hover { text-decoration: none; border-bottom-color: rgb(var(--ink)); }
.case-facts__links .case-facts__cta {
  color: var(--blue-hover);
  border-bottom-color: rgba(var(--blue-rgb), 0.4);
}
.case-facts__links .case-facts__cta:hover { border-bottom-color: var(--blue-hover); }

@media (max-width: 900px) {
  .case-layout { grid-template-columns: minmax(0, 1fr); gap: 56px; }
  .case-main { padding-right: 0; border-right: 0; }
  .case-facts { position: static; }
}

@media (max-width: 640px) {
  .decisions li { grid-template-columns: 32px minmax(0, 1fr); gap: 12px; }
}

/* ---------- Writing index ---------- */

.writing-hero { padding-top: var(--hero-top); }

.post-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 44px;
  margin-top: 52px;
}

.post-card {
  display: block;
  padding-top: 18px;
  border-top: 1px solid rgba(var(--ink), 0.18);
  transition: border-color 0.18s ease;
}
.post-card:hover { text-decoration: none; border-top-color: rgba(var(--blue-rgb), 0.5); }
.post-card:hover h2 {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.post-card__meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  font-size: 13px;
  color: rgba(var(--ink), 0.52);
}
.post-card__meta span {
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.post-card h2 {
  margin-top: 10px;
  font-size: 23px;
  line-height: 1.1;
  font-weight: 600;
  letter-spacing: -0.032em;
}
.post-card p {
  display: -webkit-box;
  margin-top: 10px;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; /* excerpts stop at two lines */
  line-clamp: 2;
  font-size: 15.5px;
  line-height: 1.56;
  color: rgba(var(--ink), 0.7);
}

@media (max-width: 1000px) {
  .post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .post-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; margin-top: 40px; }
}

/* ---------- Post ---------- */

.post { padding-top: 24px; }

.post__meta {
  display: flex;
  align-items: baseline;
  gap: 18px;
  font-size: 13px;
  color: rgba(var(--ink), 0.52);
}
.post__meta span {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.post h1 {
  margin-top: 14px;
  font-size: clamp(32px, 4.6vw, 64px);
  line-height: 0.98;
  font-weight: 600;
  letter-spacing: -0.048em;
  text-wrap: balance;
}

.post__lede {
  margin-top: 26px;
  font-size: 19px;
  line-height: 1.62;
  color: rgba(var(--ink), 0.76);
}

.post__body {
  display: grid;
  gap: 24px;
  margin-top: 44px;
}
.post__body p,
.post__body li {
  font-size: 17px;
  line-height: 1.75;
  color: rgba(var(--ink), 0.92);
}
.post__body h2 {
  margin-top: 16px;
  font-size: 22px;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: -0.03em;
}
.post__body h3 {
  margin-top: 8px;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.post__body ul,
.post__body ol { display: grid; gap: 10px; padding-left: 1.2em; }
.post__body ul { list-style: disc; }
.post__body li::marker { color: rgba(var(--ink), 0.4); }
.post__body strong { font-weight: 600; color: rgb(var(--ink)); }
.post__body blockquote {
  margin: 0;
  padding-left: 20px;
  border-left: 2px solid rgba(var(--blue-rgb), 0.6);
}
.post__body img { display: block; max-width: 100%; height: auto; border-radius: 12px; }
.post__body a {
  border-bottom: 1px solid rgba(var(--ink), 0.28);
  transition: border-color 0.18s ease;
}
.post__body a:hover { text-decoration: none; border-bottom-color: rgb(var(--ink)); }
.post__body .post__soon { color: rgba(var(--ink), 0.52); }

/* ---------- Charts in posts (bars drawn in HTML so they stay legible on phones) ---------- */

.chart {
  --chart-coworker: #7480ff;
  --chart-ai: #8a8478;
  margin: 16px 0;
  padding: 24px;
  border-radius: 14px;
  /* A slightly lighter frosted panel with a thin edge, so it holds its own on the moving background. */
  background:
    linear-gradient(rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.045)),
    rgba(var(--bg-rgb), 0.72);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: inset 0 0 0 1px rgba(var(--ink), 0.14);
}
.chart .chart__title {
  font-size: 16px;
  line-height: 1.4;
  font-weight: 600;
  color: rgb(var(--ink));
}
.chart .chart__sub {
  margin-top: 4px;
  font-size: 14px;
  line-height: 1.5;
  color: rgba(var(--ink), 0.7);
}
.chart .chart__legend {
  display: flex;
  gap: 18px;
  margin-top: 16px;
  font-size: 13px;
  color: rgb(var(--ink));
}
.chart__key { display: inline-flex; align-items: center; gap: 6px; }
.chart__key::before { content: ""; width: 12px; height: 12px; border-radius: 3px; }
.chart__key--coworker::before { background: var(--chart-coworker); }
.chart__key--ai::before { background: var(--chart-ai); }

.chart__rows { display: grid; gap: 18px; margin-top: 20px; }
.chart__row {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
}
.chart__label { font-size: 14px; color: rgb(var(--ink)); }
.chart__bars { display: grid; gap: 2px; }
.chart__track { display: flex; align-items: center; gap: 8px; }
/* The axis runs 0–50% across 85% of the track (the rest leaves room for the value label).
   Rounded end only, anchored at the baseline. */
.chart__bar {
  width: calc(var(--v) * 2% * 0.85);
  height: 18px;
  border-radius: 0 4px 4px 0;
}
.chart__bar--coworker { background: var(--chart-coworker); }
.chart__bar--ai { background: var(--chart-ai); }
.chart__value { font-size: 13px; color: rgb(var(--ink)); font-variant-numeric: tabular-nums; }
.chart__value--muted { color: rgba(var(--ink), 0.62); }
.chart .chart__source {
  margin-top: 18px;
  font-size: 13px;
  line-height: 1.5;
  color: rgba(var(--ink), 0.52);
}

/* Diverging bars: grow right (positive) or left (negative) from a "no change" line.
   Per chart: --zero is where the line sits across the track (default the middle), and --max is the value
   that fills the whole side to the right of it (default 30). Both sides use the same scale. */
.chart--diverging { --zero: 50%; --max: 30; }
.chart--diverging .chart__row { grid-template-columns: 200px minmax(0, 1fr); }
.chart__axis-track {
  position: relative;
  height: 26px;
}
/* The "no change" line: each track draws its piece, reaching into the gaps so the pieces join up,
   and the label row draws the last piece down to "No change". Bars sit on top of it. */
.chart__axis-track::before,
.chart__axis-label::before {
  content: "";
  position: absolute;
  left: var(--zero);
  width: 1px;
  background: rgba(var(--ink), 0.35);
}
.chart__axis-track::before { top: -9px; bottom: -9px; }
.chart__axis-label::before { top: 0; height: 10px; }
.chart__dbar {
  position: absolute;
  z-index: 1;
  top: 0;
  bottom: 0;
  left: var(--zero);
  width: calc(var(--v) / var(--max) * (100% - var(--zero)));
  border-radius: 0 4px 4px 0;
}
.chart__dbar.is-negative { left: auto; right: calc(100% - var(--zero)); border-radius: 4px 0 0 4px; }
.chart__dbar--belief { background: var(--chart-ai); }
.chart__dbar--measured { background: var(--chart-coworker); }
.chart__dbar--gain { background: var(--chart-coworker); }
.chart__dbar--loss { background: #c27a46; }
.chart__dvalue {
  position: absolute;
  top: 50%;
  left: calc(100% + 8px);
  transform: translateY(-50%);
  white-space: nowrap;
  font-size: 13px;
  color: rgb(var(--ink));
  font-variant-numeric: tabular-nums;
}
.chart__dbar.is-negative .chart__dvalue { left: auto; right: calc(100% + 8px); }
.chart__row--axis { margin-top: -18px; }
.chart__axis-label {
  position: relative;
  display: block;
  height: 30px;
  font-size: 12px;
  color: rgba(var(--ink), 0.62);
}
.chart__axis-label span {
  position: absolute;
  top: 12px;
  left: var(--zero);
  transform: translateX(-50%);
  white-space: nowrap;
}
/* Optional group headings inside a diverging chart, with the bar labels indented under them. */
.chart .chart__group {
  margin-top: 6px;
  font-size: 14px;
  font-weight: 600;
  color: rgb(var(--ink));
}
.chart--grouped .chart__label { padding-left: 14px; }

/* Dot chart: a grey dot for before, a blue dot for after, joined by a line; the axis runs 0–2,000. */
.chart--dots .chart__rows { gap: 0; }
.chart--dots .chart__row { grid-template-columns: 100px minmax(0, 1fr); }
.dots__track { position: relative; height: 44px; }
.dots__scale {
  position: absolute;
  inset: 0 56px 0 0;
  background: repeating-linear-gradient(to right, rgba(var(--ink), 0.1) 0 1px, transparent 1px 25%);
  box-shadow: inset -1px 0 rgba(var(--ink), 0.1);
}
.dots__link {
  position: absolute;
  top: 50%;
  left: calc(var(--a) / 2000 * 100%);
  width: calc((var(--b) - var(--a)) / 2000 * 100%);
  height: 2px;
  transform: translateY(-50%);
  background: rgba(var(--ink), 0.4);
}
.dots__dot {
  position: absolute;
  top: 50%;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 2px rgba(var(--bg-rgb), 0.9);
}
.dots__dot--before { left: calc(var(--b) / 2000 * 100%); background: var(--chart-ai); }
.dots__dot--after { left: calc(var(--a) / 2000 * 100%); background: var(--chart-coworker); }
.dots__cut {
  position: absolute;
  top: 50%;
  left: calc(var(--b) / 2000 * 100% + 14px);
  transform: translateY(-50%);
  font-size: 13px;
  color: rgb(var(--ink));
  font-variant-numeric: tabular-nums;
}
.dots__axis .dots__track { height: 24px; }
.dots__axis .dots__scale { background: none; box-shadow: none; }
.dots__tick {
  position: absolute;
  top: 6px;
  left: calc(var(--t) / 2000 * 100%);
  transform: translateX(-50%);
  font-size: 11.5px;
  color: rgba(var(--ink), 0.62);
  font-variant-numeric: tabular-nums;
}
.chart__key--dot-before::before { border-radius: 50%; background: var(--chart-ai); }
.chart__key--dot-after::before { border-radius: 50%; background: var(--chart-coworker); }

/* One bar split into shares (each segment and its label set --s, a percentage). */
.share { margin-top: 22px; }
.share__bar { display: flex; gap: 2px; height: 44px; }
.share__seg { flex: 0 0 calc(var(--s) * 1% - 2px); border-radius: 4px; }
.share__seg--low { background: var(--chart-ai); opacity: 0.5; }
.share__seg--mid { background: var(--chart-ai); }
.share__seg--top { background: var(--chart-coworker); }
.share__seg--muted { background: rgba(var(--ink), 0.18); }
.share__labels { position: relative; display: flex; gap: 2px; margin-top: 12px; }
.share__label {
  flex: 0 0 calc(var(--s) * 1% - 2px);
  padding-left: 10px;
  font-size: 13px;
  line-height: 1.4;
  color: rgba(var(--ink), 0.62);
}
.share__label b { display: block; font-size: 15px; font-weight: 600; color: rgb(var(--ink)); }
/* The thin last segment's label is pinned under its right edge, reading leftwards. */
.share__label--top { position: absolute; right: 0; top: 0; padding-left: 0; white-space: nowrap; text-align: right; }

/* A step-by-step flow: boxes joined by arrows, in rows of up to five. */
.chart--flow .flow__lane { margin-top: 22px; font-size: 13px; color: rgba(var(--ink), 0.62); }
.chart--flow .flow__lane b { margin-right: 8px; font-weight: 600; color: rgb(var(--ink)); }
/* ".chart .flow" so the post's general list styles (gap, indent, numbers) don't apply here. */
.chart .flow {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 28px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}
.flow li {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 60px;
  padding: 10px 12px;
  border-radius: 8px;
  box-shadow: inset 0 0 0 1px rgba(var(--ink), 0.24);
  text-align: center;
  font-size: 13px;
  line-height: 1.35;
  color: rgb(var(--ink));
}
.flow li + li::before {
  content: "→";
  position: absolute;
  left: -28px;
  top: 50%;
  width: 28px;
  transform: translateY(-50%);
  text-align: center;
  color: rgba(var(--ink), 0.45);
}
.flow--fitted li { background: rgba(var(--blue-rgb), 0.12); box-shadow: inset 0 0 0 1.5px rgba(var(--blue-rgb), 0.7); }
.chart--flow .flow__loop { margin-top: 12px; text-align: center; font-size: 12.5px; color: rgba(var(--ink), 0.62); }

/* A data table inside a post. On phones each row becomes a block, its column named above each cell. */
.data-table {
  width: 100%;
  margin: 8px 0;
  border-collapse: collapse;
  font-size: 15px;
  line-height: 1.5;
}
.data-table th, .data-table td { padding: 14px 16px 14px 0; vertical-align: top; text-align: left; }
.data-table thead th {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(var(--ink), 0.55);
  border-bottom: 1px solid rgba(var(--ink), 0.18);
}
.data-table tbody tr { border-bottom: 1px solid rgba(var(--ink), 0.12); }
.data-table tbody th { font-weight: 600; white-space: nowrap; }
.data-table td { color: rgba(var(--ink), 0.88); }
.data-table td:last-child { color: rgba(var(--ink), 0.7); font-size: 14px; }

@media (max-width: 640px) {
  .share__labels { flex-direction: column; gap: 8px; }
  .share__label, .share__label--top { padding-left: 18px; position: relative; direction: ltr; text-align: left; white-space: normal; }
  .share__label::before { content: ""; position: absolute; left: 0; top: 4px; width: 10px; height: 10px; border-radius: 3px; }
  .share__label--low::before { background: var(--chart-ai); opacity: 0.5; }
  .share__label--mid::before { background: var(--chart-ai); }
  .share__label--top::before { background: var(--chart-coworker); }
  .share__label--muted::before { background: rgba(var(--ink), 0.18); }
  .share__label b { display: inline; margin-right: 6px; }
  .chart .flow { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .flow li { min-height: 0; }
  .flow li + li::before { content: "↓"; left: 50%; top: -24px; width: 24px; height: 24px; line-height: 24px; transform: translateX(-50%); }
  .share__label--top { position: relative; }
  .data-table, .data-table tbody, .data-table tr, .data-table th, .data-table td { display: block; }
  .data-table thead { display: none; }
  .data-table tbody tr { padding: 14px 0; }
  .data-table tbody th { padding: 0 0 6px; }
  .data-table td { padding: 6px 0; }
  .data-table td::before {
    content: attr(data-label);
    display: block;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(var(--ink), 0.55);
  }
}

@media (max-width: 640px) {
  .chart { padding: 18px; }
  .chart__row,
  .chart--diverging .chart__row { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  /* Leave room at both ends of the track for the value labels. */
  .chart__axis-track, .chart__axis-label { margin-inline: 72px; }
  .chart--dots .chart__row { grid-template-columns: 64px minmax(0, 1fr); gap: 8px; }
  .dots__scale { right: 44px; }
  .chart__axis-track::before { top: -4px; bottom: -4px; }
  .chart__row--axis { margin-top: -6px; }
  .chart__axis-label::before { top: -6px; height: 14px; }
  .chart--grouped .chart__label { padding-left: 0; }
}

/* Previous (newer) on the left, Next (older) on the right; either may be missing. */
.post__pager {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px 40px;
  margin-top: 64px;
  padding-top: 24px;
  border-top: 1px solid rgba(var(--ink), 0.12);
}
.post__pager-link { display: grid; gap: 10px; align-content: start; }
.post__pager-link--next { grid-column: 2; text-align: right; }
.post__pager-link:hover { text-decoration: none; }
.post__pager-title {
  font-size: 20px;
  line-height: 1.3;
  font-weight: 500;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.post__pager-link:hover .post__pager-title {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
@media (max-width: 640px) {
  .post__pager { grid-template-columns: minmax(0, 1fr); margin-top: 48px; }
  .post__pager-link--next { grid-column: auto; text-align: left; }
  .post__pager-title { font-size: 18px; }
}

/* ---------- Long-form pages: Privacy, Legal ---------- */

.doc-hero { padding-top: var(--hero-top); }
.doc-hero h1 {
  font-size: clamp(32px, 4vw, 56px);
  line-height: 1;
  font-weight: 600;
  letter-spacing: -0.045em;
}

.doc-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 0 56px;
  align-items: start;
}

.doc-body { padding: 34px 56px 0 0; }
.doc-body p {
  max-width: 72ch;
  margin-top: 20px;
  font-size: 18px;
  line-height: 1.68;
  color: rgba(var(--ink), 0.92);
}
/* The opening summary sits brighter than the sections. */
.doc-body > p:first-child { margin-top: 0; color: rgb(var(--ink)); }
.doc-body h2 {
  margin-top: 40px;
  font-size: 18px;
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: -0.02em;
  scroll-margin-top: 100px;
}
.doc-body h2 + p { margin-top: 14px; }
.doc-body a {
  border-bottom: 1px solid rgba(var(--ink), 0.2);
  padding-bottom: 1px;
  transition: border-color 0.18s ease;
}
.doc-body a:hover { text-decoration: none; border-bottom-color: rgb(var(--ink)); }
.doc-body .doc-updated {
  margin-top: 40px;
  font-size: 16px;
  line-height: 1.6;
  color: rgba(var(--ink), 0.52);
}

.doc-contents {
  position: sticky;
  top: 92px;
  padding: 34px 0 24px;
}
.doc-contents__label {
  padding-bottom: 18px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}
.doc-contents a {
  display: block;
  padding: 12px 0;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.3;
}
.doc-contents li:first-child a { padding-top: 0; }

/* Phones and tablets: one column, with the contents list above the text. */
@media (max-width: 900px) {
  .doc-layout { grid-template-columns: minmax(0, 1fr); }
  .doc-body { padding-right: 0; }
  .doc-contents {
    position: static;
    order: -1;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(var(--ink), 0.12);
  }
  .doc-contents a { padding: 8px 0; }
}

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

.lost h1 { margin-top: 12px; }
.lost__links {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px;
  margin-top: 48px;
}
.lost__links a {
  display: grid;
  gap: 8px;
  align-content: start;
  padding-top: 18px;
  border-top: 1px solid rgba(var(--ink), 0.16);
  transition: border-color 0.18s ease;
}
.lost__links a:hover { text-decoration: none; border-top-color: rgb(var(--ink)); }
.lost__title { font-size: 22px; font-weight: 600; letter-spacing: -0.03em; }
.lost__text { font-size: 15.5px; line-height: 1.55; color: rgba(var(--ink), 0.76); }
.lost__more { margin-top: 48px; font-size: 16px; color: rgba(var(--ink), 0.76); }

@media (max-width: 760px) {
  .lost__links { grid-template-columns: minmax(0, 1fr); gap: 24px; margin-top: 36px; }
  .lost__more { margin-top: 36px; }
}

/* Inline link inside running text. */
.text-link {
  border-bottom: 1px solid rgba(var(--ink), 0.28);
  transition: border-color 0.18s ease;
}
.text-link:hover { text-decoration: none; border-bottom-color: rgb(var(--ink)); }

.page-hero .section-intro { margin-top: 28px; }

/* ---------- Footer ---------- */

.site-footer {
  position: relative;
  z-index: 1;
  margin-top: 40px;
}

.site-footer__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px;
  padding-bottom: 80px;
}

.site-footer__brand p {
  margin-top: 14px;
  max-width: 24ch;
  font-size: 16px;
  line-height: 1.5;
  color: rgba(var(--ink), 0.5);
}
.heart { color: rgb(224, 65, 60); }

.site-footer__links {
  display: grid;
  justify-items: start;
  gap: 20px;
  margin-top: 18px;
  font-size: 16px;
}

.site-footer__bar {
  display: flex;
  flex-direction: row-reverse; /* copyright left, Privacy/Legal right (they come first in the markup) */
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 80px;
  border-top: 1px solid rgba(var(--ink), 0.08);
  font-size: 16px;
  color: rgba(var(--ink), 0.5);
}
.site-footer__legal { display: flex; gap: 24px; }
.site-footer__legal a { color: rgba(var(--ink), 0.5); }

@media (max-width: 900px) {
  .site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 32px; }
  .site-footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 760px) {
  .site-footer__grid { gap: 32px 24px; padding-bottom: 48px; }
  /* Privacy and Legal above the copyright. */
  .site-footer__bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    height: auto;
    padding: 24px 0;
  }
}


/* ---------- Phones: a little more compact ---------- */

@media (max-width: 760px) {
  .hero p { margin-top: 16px; }
  .hero__cta { margin-top: 26px; }
  .bento, .services, .trio, .layers { margin-top: 22px; }
  .posts { margin-top: 16px; }
  .section-intro { margin-top: 14px; }
  .breadcrumb { padding-top: 28px; }
  .case-layout { margin-top: 40px; gap: 40px; }
  .decisions { margin-top: 40px; }
  .post-grid { margin-top: 36px; }
  .post__body { margin-top: 32px; gap: 20px; }
  .doc-body h2 { margin-top: 32px; }
  .site-footer { margin-top: 24px; }

  /* Headings a step smaller on phones. */
  .hero h1, .page-hero h1 { font-size: 30px; }
  .case-hero h1, .post h1, .doc-hero h1 { font-size: 30px; }
  .photo-band h2 { font-size: 25px; }
  .section-head h2 { font-size: 25px; }
  .work-card h3 { font-size: 23px; }
  .service-card h3 { font-size: 20px; }
  .trio h3 { font-size: 19px; }
  .decisions h2 { font-size: 22px; }
  .post-card h2 { font-size: 21px; }
  .post__body h2 { font-size: 20px; }
  .post__lede, .case-hero p { font-size: 17px; }
  .hero__cta { font-size: 21px; }
}

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