/* ============================================================
   Page sections
   ============================================================ */

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

/* Full-bleed photograph with the type laid over it. */
.hero {
  position: relative;
  display: grid;
  align-items: center;
  min-height: clamp(24rem, 52svh, 36rem);
  /* The bottom pad reserves the strip the caption and dots sit in -
     they are absolutely placed, so without it the CTA buttons land
     on top of them on short screens. */
  padding-block: var(--space-2xl) calc(var(--space-2xl) + 4rem);
  background: var(--coal);
  color: var(--paper);
  isolation: isolate;
  overflow: hidden;
}

/* The scrim alpha is not a taste call. Against a blown-out white
   photograph, 0.78 black is what puts body text at 11.3:1 and the
   terracotta accent at 4.9:1 - both clear AA with the worst possible
   image behind them. The type column is held inside that zone; the
   right-hand side is free to fade out and show the photograph. */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgb(30 27 24 / 0.78);
}

@media (min-width: 60rem) {
  .hero::after {
    background: linear-gradient(
      90deg,
      /* The 0.78 plateau runs to 52%: on a 2560px screen the centred
         wrap pushes the headline out to ~46%, and a stop at 45% left
         the accent colour with no margin. */
      rgb(30 27 24 / 0.86) 0%,
      rgb(30 27 24 / 0.78) 52%,
      rgb(30 27 24 / 0.40) 74%,
      rgb(30 27 24 / 0.20) 100%
    );
  }
}

.hero__text { position: relative; }

.hero__eyebrow {
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--accent-dark);
  margin-bottom: var(--space-lg);
}

/* Capped so the headline never runs past the 0.78 band of the scrim.
   It also runs a step smaller than the global display size: three
   lines of Hangul at --fs-display made the hero 900px tall. */
.hero__title {
  font-size: clamp(2.25rem, 1.3rem + 3.3vw, 4rem);
  max-width: 16ch;
  margin-bottom: var(--space-lg);
}

.hero__lead {
  max-width: 34ch;
  color: rgb(253 251 247 / 0.88);
  margin-bottom: var(--space-xl);
}

.hero__ctas { display: flex; flex-wrap: wrap; gap: var(--space-sm); }

@media (min-width: 60rem) {
  .hero__text > * { max-width: 34rem; }
}

.hero__media { position: absolute; inset: 0; z-index: -2; background: var(--coal); }

/* Slides are stacked and cross-faded inside the absolutely placed
   media layer, so every one of them fills the frame. */
.hero__slides { position: relative; height: 100%; }

.hero__slide { position: absolute; inset: 0; margin: 0; }
.hero__slide img { width: 100%; height: 100%; object-fit: cover; }

/* Only fade once there is more than one frame — a lone slide should
   never be able to sit at opacity 0. */
.hero__slides .hero__slide:not(:only-child) {
  opacity: 0;
  transition: opacity 1.1s var(--ease-out);
}
.hero__slides .hero__slide.is-active { opacity: 1; }

/* Caption and dots share one flex row pinned to the bottom of the
   frame. Anchoring them to opposite corners instead meant they
   collided whenever the caption text or the media column changed
   width - one breakpoint could not cover ko/en/vi at every size. */
.hero__bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--space-md);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
}

.hero__caption {
  /* min-width:0 lets the caption shrink instead of shoving the dots. */
  min-width: 0;
  flex: 0 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0.45rem 0.9rem;
  background: rgb(46 42 38 / 0.68);
  color: var(--paper);
  font-size: var(--fs-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.hero__caption:empty { display: none; }

.hero__dots { display: flex; flex: none; }
.hero__dot {
  /* A 44px hit area around an 8px mark. The marks still read as a
     tight row because the padding is invisible. */
  width: 2.75rem; height: 2.75rem;
  display: grid;
  place-items: center;
}
.hero__dot::after {
  content: "";
  width: 0.5rem; height: 0.5rem;
  border-radius: 50%;
  background: rgb(250 251 247 / 0.45);
  box-shadow: 0 0 0 1px rgb(46 42 38 / 0.25);
  transition: background var(--dur-fast), transform var(--dur-fast);
}
.hero__dot:hover::after { background: var(--paper); }
.hero__dot[aria-current="true"]::after {
  background: var(--accent-dark);
  transform: scale(1.3);
}

@media (prefers-reduced-motion: reduce) {
  .hero__slides .hero__slide:not(:only-child) { transition: none; }
}

/* -- What we do ---------------------------------------------- */

.capabilities {
  background: var(--paper);
  padding-block: var(--space-3xl);
}

.capabilities__inner {
  display: grid;
  gap: var(--space-xl);
}

.capabilities__grid {
  display: grid;
  gap: var(--space-xl);
  grid-template-columns: 1fr;
}
@media (min-width: 34rem) { .capabilities__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 60rem) { .capabilities__grid { grid-template-columns: repeat(4, 1fr); } }

/* Hairline dividers between columns, never before the first one. */
.cap {
  display: grid;
  gap: var(--space-sm);
  align-content: start;
  padding-left: var(--space-lg);
  border-left: 1px solid var(--rule);
}
.cap:first-child { padding-left: 0; border-left: 0; }

.cap__icon { width: 2rem; height: 2rem; color: var(--accent); }

.cap__title {
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-top: var(--space-xs);
}
.cap__desc {
  font-size: var(--fs-small);
  line-height: 1.7;
  color: var(--ink-60);
  max-width: 26ch;
}

@media (min-width: 60rem) {
  .capabilities__inner {
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--space-2xl);
    align-items: start;
  }
  .vlabel { justify-self: center; }
}
@media (max-width: 59.99rem) {
  .vlabel { writing-mode: horizontal-tb; transform: none; }
  .cap { padding-left: 0; border-left: 0; }
}

/* -- Selected work ------------------------------------------- */

.work {
  background: var(--sand-200);
  padding-block: var(--space-3xl);
}

.work__inner { display: grid; gap: var(--space-2xl); }

.work__head { display: grid; gap: var(--space-md); align-content: start; justify-items: start; }
.work__title { max-width: 11ch; }
.work__head .link-rule { margin-top: var(--space-sm); }

/* Four narrow portraits in a row. They stay portrait all the way
   down to two-up so the row keeps its rhythm. */
.work__row {
  display: grid;
  gap: var(--space-lg) var(--space-md);
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 52rem) { .work__row { grid-template-columns: repeat(4, 1fr); } }

@media (min-width: 64rem) {
  .work__inner {
    grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
    gap: var(--space-3xl);
    align-items: start;
  }
}

/* -- Project cards ------------------------------------------- */

.card { display: block; }

.card__cap { display: grid; gap: 0.15rem; padding-top: var(--space-sm); }
.card__title {
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: color var(--dur-fast);
}
.card__meta { font-size: var(--fs-small); color: var(--accent-text); }
.card:hover .card__title { color: var(--accent-text); }

/* Portfolio page grid */
.folio {
  display: grid;
  gap: var(--space-2xl) var(--gutter);
}
@media (min-width: 48rem) { .folio { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 75rem) { .folio { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 48rem) { .folio .card--wide { grid-column: span 2; } }

.folio.is-empty::after {
  content: attr(data-empty);
  display: block;
  padding: var(--space-3xl) 0;
  color: var(--ink-60);
}

/* Filter chips */
.filters { display: grid; gap: var(--space-md); padding-bottom: var(--space-2xl); }
.chips { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.chip {
  padding: 0.5rem 1.05rem;
  font-size: var(--fs-small);
  color: var(--ink-60);
  border: 1px solid var(--ink-20);
  border-radius: 0;
  transition: color var(--dur-fast), background var(--dur-fast),
              border-color var(--dur-fast);
}
.chip:hover { color: var(--ink); border-color: var(--ink-40); }
.chip[aria-pressed="true"] {
  background: var(--coal);
  color: var(--paper);
  border-color: var(--coal);
}

.filters__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
}

/* -- Philosophy ---------------------------------------------- */

/* Still-life image on the left, the claim and its tenets on the
   right. The image column is deliberately the smallest of the three. */
.philosophy {
  display: grid;
  background: var(--sand-100);
  align-items: center;
  gap: var(--space-xl);
  padding-bottom: var(--space-3xl);
}

.philosophy__media { background: var(--sand-300); }
.philosophy__media img { width: 100%; height: 100%; object-fit: cover; }

.philosophy__body {
  display: grid;
  gap: var(--space-md);
  align-content: center;
  padding-inline: var(--gutter);
}
.philosophy__title { max-width: 20ch; }
.philosophy__text {
  max-width: 48ch;
  font-size: var(--fs-small);
  line-height: 1.8;
  color: var(--ink-60);
  margin-top: var(--space-sm);
}

/* Em-dash tenets, stacked. */
.tenets {
  display: grid;
  gap: var(--space-md);
  align-content: center;
  padding-inline: var(--gutter);
  font-size: var(--fs-small);
}
.tenets li {
  display: grid;
  grid-template-columns: 1.5rem 1fr;
  color: var(--ink-80);
}
.tenets li::before {
  content: "\2014";
  color: var(--accent);
}

@media (min-width: 64rem) {
  .philosophy {
    grid-template-columns: minmax(0, 30fr) minmax(0, 46fr) minmax(0, 24fr);
    gap: var(--space-2xl);
    padding-bottom: 0;
    min-height: 34rem;
  }
  .philosophy__media { height: 100%; }
  .philosophy__body { padding-left: 0; }
  .philosophy__text { margin-bottom: var(--space-xl); }
}

/* -- Process ------------------------------------------------- */

/* --sec-bg is read by .process__no, which knocks a gap in the rule it
   straddles. Override it (not `background`) to retint the section. */
.process-sec {
  --sec-bg: var(--paper);
  background: var(--sec-bg);
  padding-block: var(--space-3xl);
}
.process-sec__inner { display: grid; gap: var(--space-2xl); }
.process-sec__head { display: grid; gap: var(--space-md); align-content: start; }
.process-sec__title { max-width: 12ch; }

.process {
  display: grid;
  gap: var(--space-xl) var(--space-lg);
  grid-template-columns: 1fr;
}
@media (min-width: 34rem) { .process { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 52rem) { .process { grid-template-columns: repeat(3, 1fr); } }

.process__step {
  display: grid;
  gap: var(--space-xs);
  align-content: start;
  /* The rule sits under the numerals and runs the width of the row,
     which is what reads as a single connected sequence. */
  padding-top: var(--space-md);
  border-top: 1px solid var(--rule);
}

.process__no {
  font-family: var(--font-display);
  font-size: 1.5rem;
  line-height: 1;
  color: var(--accent-text);
  /* Lift the numeral above the rule so it straddles it. */
  margin-top: calc(-1 * var(--space-md) - 2.1rem);
  margin-bottom: var(--space-sm);
  background: var(--sec-bg);
  padding-right: 0.5rem;
  width: fit-content;
}

.process__name {
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.process__body {
  font-size: var(--fs-small);
  line-height: 1.7;
  color: var(--ink-60);
  max-width: 22ch;
}

@media (min-width: 64rem) {
  .process-sec__inner {
    grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
    gap: var(--space-3xl);
    align-items: start;
  }
  .process { grid-template-columns: repeat(5, 1fr); }
  /* Extra top room for the numerals that straddle the rule. */
  .process-sec__inner > .process { margin-top: 2.1rem; }
}

/* -- Dark band ----------------------------------------------- */

.band {
  background: var(--coal);
  color: var(--sand-200);
  padding-block: var(--space-3xl);
}
.band__inner { display: grid; gap: var(--space-2xl); align-items: center; }

.band__quote { position: relative; padding-left: 2.75rem; }
.band__mark {
  position: absolute;
  left: 0; top: -0.6rem;
  font-family: var(--font-display);
  font-size: 4rem;
  line-height: 1;
  color: var(--accent-dark);
}
.band__text {
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 1rem + 1.6vw, 2.125rem);
  line-height: 1.4;
  color: var(--paper);
  max-width: 26ch;
}
.band__attr {
  margin-top: var(--space-lg);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink-40);
}

.band__aside {
  font-size: var(--fs-small);
  line-height: 1.85;
  color: var(--ink-20);
  max-width: 44ch;
}

.band__stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-xl) var(--space-lg);
}
.band__stats dt {
  font-size: var(--fs-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-40);
}
.band__stats dd {
  margin-top: var(--space-2xs);
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.2rem + 2.2vw, 3rem);
  line-height: 1;
  color: var(--paper);
  font-variant-numeric: tabular-nums;
}
.band__stats dd span {
  font-size: 0.42em;
  margin-left: 0.12em;
  color: var(--accent-dark);
}

@media (min-width: 64rem) {
  .band__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); gap: var(--space-4xl); }
  .band__stats { grid-template-columns: repeat(4, 1fr); gap: var(--space-lg); }
}

/* -- Stats block (inner pages) ------------------------------- */

.stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-xl) var(--space-lg);
  margin-top: var(--space-3xl);
  padding-top: var(--space-xl);
  border-top: 1px solid var(--rule);
}
@media (min-width: 52rem) { .stats { grid-template-columns: repeat(4, 1fr); } }

.stat__label {
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink-60);
}
.stat__value {
  margin-top: var(--space-xs);
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 1rem + 3.4vw, 3.5rem);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.stat__value span {
  font-size: 0.4em;
  margin-left: 0.15em;
  color: var(--accent-text);
}

/* -- Section heading row (inner pages) ----------------------- */

.section-head { display: grid; gap: var(--space-md); padding-bottom: var(--space-2xl); }
.section-head .h2 { max-width: 20ch; }

@media (min-width: 52rem) {
  .section-head { grid-template-columns: 1fr auto; align-items: end; }
  .section-head .eyebrow { grid-column: 1 / -1; }
}

.split { display: grid; gap: var(--space-xl); padding-top: var(--space-lg); }
.split .h2 { max-width: 18ch; }

@media (min-width: 62rem) {
  .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-3xl); }
}

/* -- Service list (services page) ---------------------------- */

.service-list { border-top: 1px solid var(--rule); }

.service-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-xs) var(--space-lg);
  padding-block: var(--space-xl);
  border-bottom: 1px solid var(--rule);
  transition: background var(--dur-med) var(--ease-out);
}
.service-row:hover { background: var(--sand-100); }
.service-row__no { color: var(--ink-60); padding-top: 0.5em; }
.service-row__desc { max-width: 52ch; }
.service-row__tags { grid-column: 2; letter-spacing: 0.04em; }

@media (min-width: 62rem) {
  .service-row {
    grid-template-columns: 5rem minmax(0, 20rem) minmax(0, 1fr) minmax(0, 16rem);
    align-items: start;
    gap: var(--gutter);
  }
  .service-row__tags { grid-column: auto; text-align: right; }
}

/* Scope lists. base.css strips list markers, so these get an em-dash
   bullet instead of a disc. */
.prose ul.stack li {
  position: relative;
  padding-left: 1.5rem;
  color: var(--ink-80);
}
.prose ul.stack li::before {
  content: "\2014";
  position: absolute;
  left: 0;
  color: var(--accent);
}

/* -- Timeline (about) ---------------------------------------- */

.timeline { display: grid; gap: 0; }

.timeline__item {
  display: grid;
  grid-template-columns: 4.5rem 1fr;
  gap: var(--space-lg);
  padding-block: var(--space-xl);
  border-top: 1px solid var(--rule);
}
.timeline__item:last-child { border-bottom: 1px solid var(--rule); }
.timeline__year {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  color: var(--accent-text);
  font-variant-numeric: tabular-nums;
}
.timeline__body { max-width: 56ch; }

@media (min-width: 52rem) {
  .timeline__item { grid-template-columns: 8rem minmax(0, 24ch) minmax(0, 1fr); }
}

/* -- Value cards --------------------------------------------- */

.cards {
  display: grid;
  gap: var(--gutter);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}

.card-plain {
  display: grid;
  gap: var(--space-sm);
  align-content: start;
  padding: var(--space-xl);
  background: var(--sand-200);
}
.card-plain__no { color: var(--accent-text); }

/* -- Project detail ------------------------------------------ */

.project-cover {
  position: relative;
  height: 68svh;
  min-height: 22rem;
  background: var(--sand-300);
  overflow: hidden;
}
.project-cover img { width: 100%; height: 100%; object-fit: cover; }

.spec {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-lg);
  padding-top: var(--space-xl);
  border-top: 1px solid var(--rule);
}
@media (min-width: 52rem) { .spec { grid-template-columns: repeat(4, 1fr); } }

.spec__label {
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink-60);
}
.spec__value { margin-top: var(--space-2xs); font-size: var(--fs-lead); }

.shots { display: grid; gap: var(--space-lg) var(--gutter); }
@media (min-width: 52rem) { .shots { grid-template-columns: repeat(2, 1fr); } }

.shot { margin: 0; background: var(--sand-200); overflow: hidden; }
.shot img { width: 100%; height: auto; }
@media (min-width: 52rem) { .shot--full { grid-column: 1 / -1; } }

/* No before/after slider yet: the migrated data has no labelled
   before/after pairs, and pulling two arbitrary gallery frames would be
   captioning a photo as something it isn't. Add the component once real
   pairs exist in projects.json. */

/* -- Journal ------------------------------------------------- */

.posts { display: grid; gap: var(--space-2xl) var(--gutter); }
.posts[hidden] { display: none; }
@media (min-width: 48rem) { .posts { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 72rem) { .posts { grid-template-columns: repeat(3, 1fr); } }

.post { display: grid; gap: var(--space-md); align-content: start; }
.post__body { display: grid; gap: var(--space-xs); }
.post__meta {
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--accent-text);
}
.post__title { transition: color var(--dur-fast); }
.post:hover .post__title { color: var(--accent-text); }
.post__excerpt {
  font-size: var(--fs-small);
  line-height: 1.7;
  color: var(--ink-60);
}

/* -- Journal post -------------------------------------------- */

.post-page__meta {
  margin-top: var(--space-md);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--accent-text);
}
.post-page__cover { margin-bottom: var(--space-3xl); }

/* The body is authored markup, not components, so it is styled by
   element rather than by class. */
.post-body {
  max-width: 68ch;
  margin-inline: auto;
  padding-bottom: var(--space-3xl);
}

.post-body > * + * { margin-top: var(--space-md); }

.post-body .lede {
  font-size: var(--fs-lead);
  line-height: 1.7;
  color: var(--ink-80);
  padding-bottom: var(--space-lg);
  border-bottom: 1px solid var(--rule);
}

.post-body h2 {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: var(--fs-h2);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  margin-top: var(--space-2xl);
}
.post-body h3 {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 600;
  margin-top: var(--space-xl);
}

.post-body p { color: var(--ink-80); line-height: var(--lh-body); }
.post-body strong { font-weight: 600; color: var(--ink); }
.post-body a {
  border-bottom: 1px solid var(--accent);
  transition: color var(--dur-fast);
}
.post-body a:hover { color: var(--accent-text); }

.post-body ul, .post-body ol { display: grid; gap: 0.45rem; }
.post-body li {
  position: relative;
  padding-left: 1.5rem;
  color: var(--ink-80);
  line-height: 1.75;
}
.post-body ul > li::before {
  content: "\2014";
  position: absolute; left: 0;
  color: var(--accent);
}
.post-body ol { counter-reset: step; }
.post-body ol > li { counter-increment: step; }
.post-body ol > li::before {
  content: counter(step);
  position: absolute; left: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  color: var(--accent-text);
  top: 0.35em;
}

.post-table {
  width: 100%;
  border-collapse: collapse;
  margin-block: var(--space-lg);
  font-size: var(--fs-small);
}
.post-table th, .post-table td {
  text-align: left;
  padding: 0.65rem 0.75rem 0.65rem 0;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}
.post-table th {
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink-60);
  font-weight: 500;
  border-bottom-color: var(--ink-40);
}
.post-table td { color: var(--ink-80); font-variant-numeric: tabular-nums; }
.post-table td:first-child { color: var(--ink); font-weight: 500; }

.post-body .caption {
  font-size: var(--fs-small);
  color: var(--ink-60);
  line-height: 1.7;
}

.post-body hr.rule { margin-block: var(--space-2xl); }

.post-cta {
  margin-top: var(--space-2xl);
  padding: var(--space-xl);
  background: var(--sand-200);
  display: grid;
  gap: var(--space-md);
}
.post-cta h2 { margin-top: 0; font-size: var(--fs-h3); }
.post-cta .row { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.post-cta .mt-3 { margin-top: var(--space-xs); }

/* A price table is the one thing here that cannot reflow. */
@media (max-width: 36rem) {
  .post-table, .post-table thead, .post-table tbody,
  .post-table tr, .post-table th, .post-table td { display: block; }
  .post-table thead { display: none; }
  .post-table tr {
    padding-block: var(--space-sm);
    border-bottom: 1px solid var(--rule);
  }
  .post-table td { border: 0; padding: 0.15rem 0; }
  .post-table td:first-child {
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 0.2rem;
  }
}

/* -- Team ---------------------------------------------------- */

/* 18rem rather than 14rem so a six-person roster lands as 3 + 3 on
   desktop instead of 4 + 2. auto-fit still handles other counts. */
.team {
  display: grid;
  gap: var(--space-2xl) var(--gutter);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
}

.person { margin: 0; display: grid; gap: var(--space-md); align-content: start; }
.person__photo { background: var(--sand-200); }

/* Shown until a real photograph exists, and if one ever 404s. */
.person__photo--empty {
  display: grid;
  place-items: center;
  background: var(--sand-300);
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: clamp(2rem, 5vw, 3rem);
  color: var(--ink-60);
  letter-spacing: 0.02em;
}
.person__body { display: grid; gap: 0.2rem; }

.person__name { font-size: var(--fs-body); font-weight: 600; }
.person__name span {
  font-weight: 400;
  color: var(--ink-60);
  font-size: var(--fs-small);
}
.person__role {
  font-size: var(--fs-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-text);
}
.person__bio {
  margin-top: var(--space-xs);
  font-size: var(--fs-small);
  line-height: 1.7;
  color: var(--ink-60);
}
.person__langs {
  font-size: var(--fs-label);
  letter-spacing: 0.08em;
  color: var(--ink-40);
}

.empty-state {
  display: grid;
  gap: var(--space-md);
  justify-items: start;
  padding: var(--space-3xl);
  background: var(--sand-200);
}

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

.contact-layout { display: grid; gap: var(--space-3xl); }
@media (min-width: 64rem) {
  .contact-layout {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: var(--space-4xl);
  }
}

/* Messenger channels. These stand in for the enquiry form until a
   backend exists, so they are full-width rows rather than buttons. */
.channels { display: grid; gap: var(--space-sm); }

.channel {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  background: var(--sand-100);
  border: 1px solid var(--rule);
  transition: background var(--dur-fast), border-color var(--dur-fast);
}
.channel:hover { background: var(--sand-200); border-color: var(--ink-40); }

.channel__icon { width: 2.25rem; height: 2.25rem; flex: none; border-radius: 50%; }
.channel__body { display: grid; gap: 0.1rem; min-width: 0; }
.channel__name { font-size: var(--fs-body); }
.channel__hint { font-size: var(--fs-small); color: var(--ink-60); }
.channel__arrow { color: var(--accent-text); transition: transform var(--dur-med) var(--ease-out); }
.channel:hover .channel__arrow { transform: translateX(4px); }

.note {
  margin-top: var(--space-2xl);
  padding: var(--space-lg);
  border-left: 2px solid var(--accent);
  background: var(--sand-200);
}
.note ul { display: grid; gap: 0.35rem; margin-top: var(--space-sm); }
.note li { position: relative; padding-left: 1rem; }
.note li::before { content: "\2014"; position: absolute; left: 0; color: var(--accent-text); }

.field { display: grid; gap: var(--space-2xs); margin-bottom: var(--space-lg); }
.field > label {
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink-60);
}
.field input,
.field textarea,
.field select {
  width: 100%;
  padding: 0.85rem 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--ink-20);
  border-radius: 0;
  transition: border-color var(--dur-fast);
}
.field textarea { resize: vertical; min-height: 7rem; }
.field input:focus,
.field textarea:focus,
.field select:focus { outline: none; border-bottom-color: var(--ink); }
.field input:focus-visible,
.field textarea:focus-visible,
.field select:focus-visible {
  outline: 2px solid var(--accent-text);
  outline-offset: 4px;
}

.field-row { display: grid; gap: 0 var(--gutter); }
@media (min-width: 40rem) { .field-row { grid-template-columns: repeat(2, 1fr); } }

/* Honeypot: off-screen, never focusable, invisible to real users. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}

.form-status {
  margin-top: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  font-size: var(--fs-small);
  border-left: 2px solid var(--ink-20);
}
.form-status[data-state="ok"]      { border-color: #2f7a4f; background: #eff6f1; }
.form-status[data-state="error"]   { border-color: #a3372b; background: #fbeeec; }
.form-status[data-state="sending"] { border-color: var(--ink-40); background: var(--sand-200); }
.form-status[hidden] { display: none; }

.info-list { display: grid; gap: var(--space-xl); }
.info-list__item { display: grid; gap: var(--space-2xs); }

.map-frame { aspect-ratio: 4 / 3; background: var(--sand-300); overflow: hidden; }
.map-frame iframe { width: 100%; height: 100%; border: 0; display: block; }

/* -- Legal document ------------------------------------------ */

.legal { max-width: 68ch; }
.legal section { padding-block: var(--space-xl); border-top: 1px solid var(--rule); }
.legal section:first-child { border-top: 0; padding-top: 0; }

.legal h2 {
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  gap: var(--space-sm);
  align-items: baseline;
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: var(--fs-h3);
  line-height: var(--lh-heading);
  margin-bottom: var(--space-md);
}
.legal h2 span {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  color: var(--accent-text);
}

.legal h3 {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 600;
  margin-top: var(--space-lg);
  margin-bottom: var(--space-xs);
}

.legal p { margin-bottom: var(--space-sm); color: var(--ink-80); }
.legal > section > p:last-child { margin-bottom: 0; }

.legal ul { display: grid; gap: 0.4rem; margin-block: var(--space-sm); }
.legal li {
  position: relative;
  padding-left: 1.1rem;
  color: var(--ink-80);
  font-size: var(--fs-small);
  line-height: 1.75;
}
.legal li::before {
  content: "\2014";
  position: absolute;
  left: 0;
  color: var(--accent);
}

.legal table {
  width: 100%;
  border-collapse: collapse;
  margin-block: var(--space-md);
  font-size: var(--fs-small);
}
.legal th, .legal td {
  text-align: left;
  padding: 0.6rem 0.75rem 0.6rem 0;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}
.legal th {
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink-60);
  font-weight: 500;
}
.legal td { color: var(--ink-80); }

.legal .legal__note {
  margin-top: var(--space-md);
  padding: var(--space-md);
  background: var(--sand-200);
  font-size: var(--fs-small);
}

/* Tables are the one thing that genuinely cannot reflow below ~30rem. */
@media (max-width: 34rem) {
  .legal table, .legal thead, .legal tbody, .legal tr, .legal th, .legal td { display: block; }
  .legal thead { display: none; }
  .legal tr { padding-block: var(--space-sm); border-bottom: 1px solid var(--rule); }
  .legal td { border: 0; padding: 0.15rem 0; }
  .legal td:first-child { font-weight: 600; color: var(--ink); }
}

/* -- Page intro (inner pages) -------------------------------- */

.page-head {
  background: var(--sand-100);
  padding-top: var(--space-3xl);
  padding-bottom: var(--space-3xl);
  margin-bottom: var(--space-3xl);
}
.page-head .display { max-width: 16ch; margin-top: var(--space-md); }
.page-head .lead { margin-top: var(--space-lg); color: var(--ink-60); }