/* =========================================================
   main.css — Shared structural styles for the portfolio.
   Imports the reset + design tokens, then builds every page
   from those tokens. NO hardcoded colors, fonts, type sizes,
   spacing, radii, or transitions live here.
   ========================================================= */
@import url('reset.css');
@import url('tokens.css');

/* --- Base ------------------------------------------------------------- */
body {
  position: relative;
  background-color: var(--color-bg);
  color: var(--color-text-primary);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
}

/* --- Layout helpers --------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-5);
}

/* --- Navigation ------------------------------------------------------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 10;
  background-color: var(--color-yellow);
  border-bottom: var(--border-width-thick) solid var(--color-text-primary);
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  padding-block: var(--space-4);
}

.nav__logo {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-display);
  letter-spacing: var(--tracking-tight);
}

.nav__links {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
}

.nav__links a {
  padding: var(--space-2) var(--space-4);
  color: var(--color-text-primary);
  background-color: var(--color-bg);
  border: var(--border-width) solid var(--color-text-primary);
  border-radius: var(--radius-pill);
  transition: background-color var(--transition-base), color var(--transition-base),
    transform var(--transition-base);
}

.nav__links a:hover {
  background-color: var(--color-accent);
  color: var(--color-accent-contrast);
  border-color: var(--color-accent);
  transform: translateY(-1px);
}

/* --- Buttons ---------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  background-color: var(--color-accent);
  color: var(--color-accent-contrast);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  border: var(--border-width-thick) solid var(--color-text-primary);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-pop);
  cursor: pointer;
  transition: background-color var(--transition-base), color var(--transition-base),
    transform var(--transition-base), box-shadow var(--transition-base);
}

.btn:hover {
  background-color: var(--color-yellow);
  color: var(--color-text-primary);
  transform: translate(2px, 2px);
  box-shadow: var(--shadow-pop-sm);
}

/* --- Home hero ---------------------------------------------------------
   Full-bleed yellow band: wordmark + nav on the left, a center portrait/
   collage image, and a rotated strip of copy running down the right edge.
   ------------------------------------------------------------------- */
.home-hero {
  position: relative;
  background-image: linear-gradient(
    var(--gradient-hero-angle),
    var(--gradient-hero-start) 0%,
    var(--gradient-hero-end) 100%
  );
  border-bottom: var(--border-width-thick) solid var(--color-text-primary);
  overflow: hidden;
}

/* Subtle grain overlay — keeps the hero's flat color field from feeling too digital. */
.home-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 999;
  opacity: 0.6;
  mix-blend-mode: multiply;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.home-hero__grid {
  display: grid;
  grid-template-columns: minmax(14rem, 18rem) 1fr minmax(3rem, 4rem);
  align-items: stretch;
  min-height: 100svh;
}

.home-hero__side {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--space-7) var(--space-6);
}

.home-hero__brand {
  font-family: var(--font-display);
  font-size: 2.25rem;
  font-weight: var(--weight-display);
  line-height: 0.95;
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
}

.home-hero__nav {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-5);
  font-family: var(--font-body);
  font-size: var(--text-lg);
  font-weight: var(--weight-medium);
}

.home-hero__nav a {
  position: relative;
  transition: color var(--transition-base), transform var(--transition-base);
}

.home-hero__nav a:hover {
  color: var(--color-accent-contrast);
  -webkit-text-stroke: 0.5px var(--color-text-primary);
  transform: translateX(var(--space-2));
}

.home-hero__social {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
}

.home-hero__social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 5.5rem;
  height: 5.5rem;
  color: var(--color-text-primary);
  background-color: var(--color-bg);
  border: var(--border-width) solid var(--color-text-primary);
  border-radius: var(--radius-pill);
  transition: background-color var(--transition-base), color var(--transition-base);
}

.home-hero__social-icon:hover {
  background-color: var(--color-accent);
  color: var(--color-accent-contrast);
}

.home-hero__social-icon svg {
  width: 1.35rem;
  height: 1.35rem;
}

.home-hero__social-icon img {
  width: 4.5rem;
  height: 4.5rem;
  object-fit: contain;
}

.home-hero__more {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-1);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-primary);
}

.home-hero__more span:first-child {
  font-size: var(--text-lg);
}

.home-hero__figure {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
}

.home-hero__img {
  width: 100%;
  max-width: 34rem;
  height: auto;
}

.home-hero__rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-8) var(--space-3);
  border-left: var(--border-width) solid
    color-mix(in oklab, var(--color-text-primary) 25%, transparent);
}

.home-hero__rail-text {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  white-space: nowrap;
}

.home-hero__rail-text svg {
  width: 1.1rem;
  height: 1.1rem;
}

@media (max-width: 60rem) {
  .home-hero__grid {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .home-hero__rail {
    flex-direction: row;
    justify-content: space-between;
    border-left: none;
    border-top: var(--border-width) solid
      color-mix(in oklab, var(--color-text-primary) 25%, transparent);
    padding: var(--space-4) var(--space-6);
  }

  .home-hero__rail-text {
    writing-mode: horizontal-tb;
    transform: none;
  }

  .home-hero__side {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-6);
  }

  .home-hero__nav {
    flex-direction: row;
    flex-wrap: wrap;
  }
}

/* --- Section scaffold -------------------------------------------------
   Sections pad on top only. The gap *below* the last section comes from
   the footer's margin — so two spacings can never stack into one huge
   gap, and every seam on the site measures the same. */
.section {
  padding-block: var(--space-section) 0;
}

.section__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-5);
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-3);
  border-bottom: var(--border-width) solid
    color-mix(in oklab, var(--color-text-primary) 15%, transparent);
}

.section__title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

.section__meta {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-secondary);
}

/* --- Work grid -------------------------------------------------------- */
.work__more {
  display: inline-flex;
  margin-top: var(--space-block);
}

/* Selected work — an editorial index, media alternating left/right. */
.work-list {
  display: flex;
  flex-direction: column;
}

.work-row {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: var(--space-7);
  align-items: center;
  padding-block: var(--space-block);
  border-top: var(--border-width) solid
    color-mix(in oklab, var(--color-text-primary) 18%, transparent);
  color: var(--color-text-primary);
}

/* The section header already draws a rule; don't double it on the first row. */
.section__header + .work-list .work-row:first-child {
  border-top: 0;
}

.work-row:last-of-type {
  border-bottom: var(--border-width) solid
    color-mix(in oklab, var(--color-text-primary) 18%, transparent);
}

/* Flip the column proportions and media side on alternating rows. */
.work-row:nth-child(even) {
  grid-template-columns: 0.85fr 1.15fr;
}

.work-row:nth-child(even) .work-row__media {
  order: 2;
}

.work-row__media {
  aspect-ratio: 5 / 4;
  border-radius: var(--radius-base);
  border: var(--border-width) solid var(--color-text-primary);
  transition: opacity var(--transition-base);
}

.work-row:hover .work-row__media {
  opacity: 0.9;
}

.work-row__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
}

.work-row__index {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-secondary);
}

.work-row__title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  transition: color var(--transition-base);
}

.work-row:hover .work-row__title {
  color: var(--color-accent);
}

.work-row__tag {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-accent);
}

.work-row__desc {
  max-width: 38ch;
  margin-top: var(--space-2);
  color: var(--color-text-secondary);
}

/* --- Footer ----------------------------------------------------------- */
.footer {
  margin-top: var(--space-section);
  background-color: var(--color-yellow);
  border-top: var(--border-width-thick) solid var(--color-text-primary);
}

.footer__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  padding-block: var(--space-7);
}

.footer__name {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
}

.footer__links {
  display: flex;
  gap: var(--space-4);
}

.footer__links a {
  display: inline-flex;
  padding: var(--space-2);
  border-radius: var(--radius-base);
  color: var(--color-text-secondary);
  transition: color var(--transition-base),
    background-color var(--transition-base);
}

.footer__links a:hover {
  color: var(--color-accent);
  background-color: color-mix(in oklab, var(--color-accent) 12%, transparent);
}

.footer__links svg {
  width: var(--space-5);
  height: var(--space-5);
}

/* --- Responsive ------------------------------------------------------- */
@media (max-width: 52rem) {
  .work-row,
  .work-row:nth-child(even) {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }

  .work-row__media,
  .work-row:nth-child(even) .work-row__media {
    order: -1;
  }

  .nav__links {
    gap: var(--space-4);
  }

  .section__header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
  }
}

/* =========================================================
   Shared editorial primitives (used across inner pages)
   ========================================================= */

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-accent);
}

.lead {
  max-width: 48ch;
  font-size: var(--text-lg);
  color: var(--color-text-secondary);
}

/* Comfortable reading column for body copy. */
.prose {
  max-width: 62ch;
}

.prose > p + p {
  margin-top: var(--space-stack);
}

.prose strong {
  color: var(--color-text-primary);
  font-weight: var(--weight-bold);
}

/* Inline accent link with an animated underline. */
.link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-accent);
  font-weight: var(--weight-medium);
  border-bottom: var(--border-width-thick) solid
    color-mix(in oklab, var(--color-accent) 35%, transparent);
  transition: border-color var(--transition-base), gap var(--transition-base);
}

.link:hover {
  border-bottom-color: var(--color-accent);
  gap: var(--space-3);
}

/* Page top spacing for hero-less inner pages (clears sticky nav). */
.page {
  padding-block: var(--space-section) 0;
}

.page__header {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-width: 52ch;
  margin-bottom: var(--space-block);
}

.page__title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--weight-display);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

/* Generic vertical rhythm stack. */
.stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-stack);
}

/* Color-block placeholders — all three tones derived from tokens. */
.block {
  width: 100%;
  border-radius: var(--radius-base);
  border: var(--border-width) solid var(--color-text-primary);
}

.block--accent {
  background-color: var(--color-accent);
}

.block--soft {
  background-color: color-mix(in oklab, var(--color-accent) 32%, var(--color-surface));
}

.block--ink {
  background-color: color-mix(in oklab, var(--color-text-primary) 85%, var(--color-accent));
}

/* =========================================================
   index.html — about teaser
   ========================================================= */

.teaser__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-block);
  align-items: end;
}

.teaser__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-stack);
  align-items: flex-start;
}

.teaser__title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

.teaser__portrait {
  aspect-ratio: 4 / 5;
  overflow: hidden;
}

.teaser__portrait-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* =========================================================
   about.html
   ========================================================= */

.about__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-block);
  align-items: start;
}

.about__portrait {
  aspect-ratio: 3 / 4;
  overflow: hidden;
}

.about__portrait-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.subsection {
  margin-top: var(--space-block);
}

.subsection__title {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-secondary);
  padding-bottom: var(--space-3);
  margin-bottom: var(--space-5);
  border-bottom: var(--border-width) solid
    color-mix(in oklab, var(--color-text-primary) 15%, transparent);
}

.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.tag {
  padding: var(--space-2) var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--color-text-primary);
  background-color: var(--color-surface);
  border: var(--border-width) solid var(--color-text-primary);
  border-radius: var(--radius-pill);
}

.fact-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.fact {
  display: grid;
  grid-template-columns: 10rem 1fr;
  gap: var(--space-5);
  padding-bottom: var(--space-4);
  border-bottom: var(--border-width) solid
    color-mix(in oklab, var(--color-text-primary) 10%, transparent);
}

.fact dt {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-secondary);
}

.fact dd {
  color: var(--color-text-primary);
}

/* =========================================================
   contact.html
   ========================================================= */

.contact__email {
  display: inline-block;
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
  color: var(--color-accent);
  border-bottom: var(--border-width-thick) solid
    color-mix(in oklab, var(--color-accent) 30%, transparent);
  transition: border-color var(--transition-base);
}

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

.social-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-block);
}

.social-list a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-5);
  max-width: 32rem;
  padding-block: var(--space-4);
  border-top: var(--border-width) solid
    color-mix(in oklab, var(--color-text-primary) 14%, transparent);
  color: var(--color-text-primary);
  transition: color var(--transition-base), padding-left var(--transition-base);
}

.social-list a:last-child {
  border-bottom: var(--border-width) solid
    color-mix(in oklab, var(--color-text-primary) 14%, transparent);
}

.social-list a:hover {
  color: var(--color-accent);
  padding-left: var(--space-3);
}

.social-list span:last-child {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

/* =========================================================
   gallery.html
   ========================================================= */

.gallery {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-block) var(--space-6);
}

.gallery__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  color: var(--color-text-primary);
}

.gallery__item--wide {
  grid-column: 1 / -1;
}

.gallery__media {
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-base);
  border: var(--border-width) solid var(--color-text-primary);
  transition: opacity var(--transition-base);
}

.gallery__item--wide .gallery__media {
  aspect-ratio: 16 / 9;
}

a.gallery__item {
  transition: color var(--transition-base);
}

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

a.gallery__item:hover .gallery__media {
  opacity: 0.9;
}

.gallery__caption {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
}

.gallery__title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

.gallery__tag {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-secondary);
}

/* =========================================================
   case-study pages
   ========================================================= */

.cs-hero {
  padding-block: var(--space-section) 0;
}

.cs-hero__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-stack);
  align-items: flex-start;
}

.cs-hero__title {
  max-width: 18ch;
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--weight-display);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

.cs-meta {
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: var(--space-7);
  margin-top: var(--space-block);
  padding-top: var(--space-5);
  border-top: var(--border-width) solid
    color-mix(in oklab, var(--color-text-primary) 15%, transparent);
}

.cs-meta dt {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-2);
}

.cs-meta dd {
  font-size: var(--text-base);
  color: var(--color-text-primary);
}

/* Margin, not padding, so a section's gap collapses with the figure or quote
   above it instead of adding to it — one seam, always the same height. */
.cs-section {
  margin-top: var(--space-section);
}

.cs-section__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-stack);
}

.cs-section__title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

/* Centered variant — for image-led sections where the left rail leaves the
   column lopsided (a lone portrait phone with half a page of air beside it).
   Head, copy, figures and captions all sit on the page's center line. */
.cs-section--center .cs-section__head {
  align-items: center;
  text-align: center;
}

/* Centered text reads better on a shorter measure than a left-aligned column. */
.cs-section--center .prose {
  max-width: 54ch;
  margin-inline: auto;
  text-align: center;
}

.cs-section--center .figure__mat {
  margin-inline: auto;
}

.cs-section--center .figure figcaption {
  text-align: center;
}

.media {
  margin-block: var(--space-block);
}

.media__frame {
  aspect-ratio: 16 / 9;
}

.media__frame--tall {
  aspect-ratio: 4 / 5;
}

.media__caption {
  margin-top: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

.media-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
  margin-block: var(--space-block);
}

.media-pair .media__frame {
  aspect-ratio: 1 / 1;
}

.pull-quote {
  max-width: 20ch;
  margin-block: var(--space-block);
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-primary);
  text-indent: -0.04em;
}

/* Centered on the page rather than hung on the left rail. text-indent is the
   optical nudge for a left-aligned quote mark — it skews a centered line. */
.pull-quote--center {
  max-width: 24ch;
  /* Centered under a stat panel it needs air on both sides, and a step down
     from display size — at --text-2xl it out-shouts the section title. */
  margin-block: var(--space-9);
  margin-inline: auto;
  font-size: var(--text-xl);
  text-align: center;
  text-indent: 0;
}

/* Testing-method stats: a number or an icon pair over a short label. The fixed
   figure height keeps every label on one line regardless of what sits above it. */
.stat-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  margin-block: var(--space-block);
  padding: 0;
  list-style: none;
}

.stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  text-align: center;
}

.stat__figure {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  min-height: 3.25rem;
  color: var(--color-text-primary);
}

.stat__figure svg {
  width: auto;
  height: 2.25rem;
}

.stat__value {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-display);
  line-height: 1;
  letter-spacing: var(--tracking-tight);
}

.stat__label {
  max-width: 14ch;
  font-size: var(--text-base);
  line-height: var(--leading-tight);
  color: var(--color-text-primary);
}

/* Panel variant — the three stats share one bordered card so they read as a
   single "how it was tested" summary instead of three items floating loose. */
.stat-row--panel {
  gap: 0;
  padding: var(--space-7) var(--space-5);
  background-color: var(--color-surface);
  border: var(--border-width) solid var(--color-text-primary);
  border-radius: var(--radius-base);
}

.stat-row--panel .stat {
  padding-inline: var(--space-4);
}

/* Room for "Face to face / online" on one line, so all three labels sit on
   the same baseline. */
.stat-row--panel .stat__label {
  max-width: 22ch;
}

.stat-row--panel .stat + .stat {
  border-left: var(--border-width) solid var(--color-text-primary);
}

/* Prev / Next case-study navigation. */
.cs-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
  margin-top: var(--space-section);
  padding-top: var(--space-block);
  border-top: var(--border-width) solid
    color-mix(in oklab, var(--color-text-primary) 15%, transparent);
}

.cs-nav a {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  color: var(--color-text-primary);
  transition: color var(--transition-base);
}

.cs-nav a:hover {
  color: var(--color-accent);
}

.cs-nav__dir {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-secondary);
}

.cs-nav__title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
}

.cs-nav__next {
  text-align: right;
}

/* =========================================================
   Real imagery
   ========================================================= */

/* Thumbnails (work index + gallery) crop to fill their frame. height:auto lets
   the frame's aspect-ratio drive the box, even though the <img> carries width
   and height attributes (those are there to reserve space before load). */
img.work-row__media,
img.gallery__media {
  width: 100%;
  height: auto;
  object-fit: cover;
  background-color: var(--color-surface);
}

/* Wide sketch sheets read better whole — sit them inside the frame instead. */
img.work-row__media--contain,
img.gallery__media--contain {
  object-fit: contain;
  padding: var(--space-4);
}

/* Case-study figures show an artifact in full on a surface "mat". */
.figure {
  margin-block: var(--space-block);
}

/* The mat hugs its artwork rather than stretching it. Most of these images are
   ~600–950px of real pixels, so forcing them to fill a 950px column upscaled
   them and made them look soft. fit-content keeps every artifact at (or below)
   its natural size — sharp — and centers it in the column. */
.figure__mat {
  width: fit-content;
  max-width: 100%;
  margin-inline: 0;      /* left rail, shared with the prose column */
  padding: var(--space-5);
  /* Pure white, not --color-surface: the cream tinted the artwork sitting on
     it, and most of these images have white or transparent backgrounds. */
  background-color: #ffffff;
  border: var(--border-width) solid var(--color-text-primary);
  border-radius: var(--radius-base);
}

.figure__mat img {
  width: auto;
  max-width: 100%;
  height: auto;
}

/* Framed variant — a poster-on-a-wall treatment. The wrapper is a plain white
   stage spanning the column; the mat inside is the artwork, centered and
   floating on a soft drop shadow. Keeps the site's ink border.
   Adjust --figure-framed-max to resize the artwork. */
.figure--framed {
  --figure-framed-max: 30rem;
  padding: var(--space-block) var(--space-6);
  background-color: #ffffff;
  border-radius: var(--radius-base);
}

/* No mat, no outline — just the image itself, centered and floating. */
.figure--framed .figure__mat {
  max-width: var(--figure-framed-max);
  margin-inline: auto;
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
}

.figure--framed .figure__mat img {
  display: block;
  box-shadow: var(--shadow-soft);
}

.figure--framed figcaption {
  margin-top: var(--space-stack);
  text-align: center;
}

@media (max-width: 640px) {
  .figure--framed {
    padding: var(--space-6) var(--space-4);
  }

  .stat-row {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }

  /* Stacked, so the divider between stats becomes a rule above, not beside. */
  .stat-row--panel {
    gap: 0;
    padding: var(--space-6) var(--space-5);
  }

  .stat-row--panel .stat + .stat {
    margin-top: var(--space-6);
    padding-top: var(--space-6);
    border-left: none;
    border-top: var(--border-width) solid var(--color-text-primary);
  }
}

.figure figcaption {
  margin-top: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

.figure-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
  margin-block: var(--space-block);
  align-items: start;
}

.figure-pair .figure {
  margin-block: 0;
}

/* Phone-screen recordings read as one matched pair, so cap both to the same
   height and let each mat hug whatever width that implies. */
.figure-pair--devices {
  justify-items: center;
}

/* Phone recordings are portrait and tall — at natural size they tower over the
   landscape artifacts. One shared height keeps every screen the same size,
   paired or standalone. */
.figure-pair--devices .figure__mat img,
.figure--device .figure__mat img,
.device-row .figure__mat img {
  height: var(--device-height, clamp(16rem, 34vw, 26rem));
  width: auto;
}

/* Three or more phone recordings shown as one centered row — a set of screens
   rather than a stack of stranded portraits. Wraps before it ever squeezes. */
.device-row {
  /* Three of these fit across the 63rem content column at close to the size a
     lone screen used to get (~1.77 x height in mats, plus gaps ≈ 852px at the
     25rem cap). Shrinking them further makes the UI text inside go mushy. */
  --device-height: clamp(15rem, 30vw, 25rem);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: var(--space-6) var(--space-5);
  margin-block: var(--space-block);
}

.device-row .figure {
  margin-block: 0;
}

.device-row .figure__mat {
  margin-inline: auto;
  padding: var(--space-4);
}

.device-row figcaption {
  max-width: 24ch;
  margin-inline: auto;
  text-align: center;
}

/* Three GIFs looping side by side is a lot of motion at once (and ~22MB of
   payload), so each screen sits still on its first frame until it's played.
   The button holds the poster; main.js swaps in the animated file and stops
   whichever screen was playing before, so only one ever moves. */
.device__play {
  position: relative;
  display: block;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0.5rem;
  line-height: 0;
  cursor: pointer;
  color: inherit;
}

.device__play:focus-visible {
  outline: var(--border-width-thick) solid var(--color-accent);
  outline-offset: var(--space-2);
}

.device__badge {
  position: absolute;
  left: 50%;
  bottom: var(--space-4);
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background-color: var(--color-yellow);
  border: var(--border-width) solid var(--color-text-primary);
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  line-height: 1;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-primary);
  transition: transform var(--transition-base), opacity var(--transition-base);
}

/* max-width from the reset resolves against a shrink-to-fit absolute parent
   and collapses the icon to 0 — pin the size explicitly instead. */
.device__badge svg {
  flex: 0 0 auto;
  width: 0.75rem;
  max-width: none;
  height: 0.75rem;
}

.device__play:hover .device__badge {
  transform: translateX(-50%) translateY(-2px);
}

/* Once it's running the badge steps back so it doesn't compete with the
   animation — it returns on hover or keyboard focus, ready to stop it. */
.device__play.is-playing .device__badge {
  opacity: 0;
}

.device__play.is-playing:hover .device__badge,
.device__play.is-playing:focus-visible .device__badge {
  opacity: 1;
}

/* Some screen recordings ship with a device frame baked into their pixels
   (3DPlant.gif carries a ~2.3% lavender ring). Zoom just past it so the frame
   is clipped away and the pair reads as one set. */
.figure__crop {
  overflow: hidden;
  border-radius: 0.5rem;
  line-height: 0;
}

.figure__crop img {
  display: block;
  transform: scale(1.06);
}

/* =========================================================
   404.html
   ========================================================= */

.error {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-stack);
  min-height: 70svh;
  justify-content: center;
}

.error__code {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-accent);
}

.error__title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--weight-display);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

/* =========================================================
   Responsive — inner pages
   ========================================================= */

@media (max-width: 52rem) {
  /* Tighten the whole rhythm one step on small screens. Every gap on the site
     reads from these three, so this is the only place it needs saying. */
  :root {
    --space-section: var(--space-8);   /* 3.5rem */
    --space-block: var(--space-6);     /* 2rem */
    --space-stack: var(--space-4);     /* 1rem */
  }

  .teaser__inner,
  .about__grid,
  .gallery {
    grid-template-columns: 1fr;
    gap: var(--space-block);
  }

  .cs-meta {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }

  .media-pair,
  .figure-pair {
    grid-template-columns: 1fr;
  }

  .fact {
    grid-template-columns: 1fr;
    gap: var(--space-1);
  }
}

/* =========================================================
   index.html — polaroid photo-box modal
   ========================================================= */

.polaroid-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
}

.polaroid-modal.is-open {
  display: flex;
}

.polaroid-modal__backdrop {
  position: absolute;
  inset: 0;
  background-color: color-mix(in oklab, var(--color-text-primary) 70%, transparent);
}

.polaroid-modal__panel {
  position: relative;
  width: 100%;
  max-width: 30rem;
  background-color: var(--color-bg);
  border: var(--border-width-thick) solid var(--color-text-primary);
  border-radius: 0.4rem;
  box-shadow: 0 0.75rem 1.5rem -0.5rem color-mix(in oklab, var(--color-text-primary) 35%, transparent);
  padding: var(--space-7) var(--space-6) var(--space-6);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
}

.polaroid-modal__close {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  width: 2.25rem;
  height: 2.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 1;
  color: var(--color-text-primary);
  background-color: var(--color-surface);
  border: var(--border-width) solid var(--color-text-primary);
  border-radius: var(--radius-pill);
  transition: background-color var(--transition-base), color var(--transition-base);
}

.polaroid-modal__close svg {
  width: 1.1rem;
  height: 1.1rem;
  display: block;
}

.polaroid-modal__close:hover {
  background-color: var(--color-accent);
  color: var(--color-accent-contrast);
}

.polaroid-modal__stage {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.polaroid-modal__nav {
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-primary);
  background-color: var(--color-surface);
  border: var(--border-width) solid var(--color-text-primary);
  border-radius: var(--radius-pill);
  transition: background-color var(--transition-base), color var(--transition-base);
}

.polaroid-modal__nav svg {
  width: 1.35rem;
  height: 1.35rem;
}

.polaroid-modal__nav:hover {
  background-color: var(--color-accent);
  color: var(--color-accent-contrast);
}

.polaroid-modal__track {
  flex: 1;
  overflow: hidden;
}

.polaroid-modal__list {
  display: flex;
  list-style: none;
  transition: transform var(--transition-base);
}

.photo-box {
  flex: 0 0 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}

.photo-box__image {
  width: 100%;
  height: 18rem;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  cursor: pointer;
}

.photo-box__image img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  border: var(--border-width) solid var(--color-text-primary);
  border-radius: 0.25rem;
}

.photo-box__caption {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-secondary);
  text-align: center;
}

.polaroid-modal__counter {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-secondary);
}

@media (max-width: 30rem) {
  .polaroid-modal__panel {
    padding: var(--space-6) var(--space-4) var(--space-5);
  }

  .polaroid-modal__nav {
    width: 2.25rem;
    height: 2.25rem;
  }
}