/* ==========================================================================
   SITE — Serge Bajic Portfolio
   Depends on tokens.css. No colour, size or timing literals below.
   ========================================================================== */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body,
h1, h2, h3, h4, p, figure, blockquote, dl, dd, ol, ul {
  margin: 0;
  padding: 0;
}

ol[role="list"], ul[role="list"] { list-style: none; }

img, picture, video, svg {
  display: block;
  max-width: 100%;
  height: auto;
}

button, input, select, textarea { font: inherit; color: inherit; }

/* --- Base ----------------------------------------------------------------- */
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--step-body);
  font-weight: 400;
  line-height: var(--lh-relaxed);
  letter-spacing: var(--ls-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-weight: 300;
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-heading);
  text-wrap: balance;
}

p { text-wrap: pretty; }

a { color: inherit; }

::selection {
  background: var(--ink);
  color: var(--bg);
}

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

/* --- Layout primitives ---------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--width-content);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container--wide { max-width: var(--width-wide); }
.container--text { max-width: calc(var(--width-text) + var(--gutter) * 2); }

.section { padding-block: var(--space-3xl); }
.section--tight { padding-block: var(--space-2xl); }

.stack > * + * { margin-top: var(--flow, var(--space-s)); }

.prose { max-width: var(--measure); }

.prose p + p { margin-top: 1.15em; }

.prose p {
  color: var(--ink-2);
  font-size: var(--step-body);
}

/* --- Typography roles ----------------------------------------------------- */
.display {
  font-size: var(--step-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  font-weight: 300;
}

.h1 { font-size: var(--step-h1); }
.h2 { font-size: var(--step-h2); }
.h3 { font-size: var(--step-h3); }

.lede {
  font-size: var(--step-lede);
  line-height: var(--lh-normal);
  font-weight: 300;
  color: var(--ink-2);
  letter-spacing: -0.012em;
  max-width: 46ch;
}

.label {
  font-size: var(--step-label);
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  color: var(--ink-3);
  font-weight: 400;
  line-height: 1.2;
}

.small { font-size: var(--step-small); color: var(--ink-2); }

.muted { color: var(--ink-3); }

/* Visible to screen readers only */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Hairline rule used as a section opener */
.rule {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: 0;
}

/* --- Skip link ------------------------------------------------------------ */
.skip-link {
  position: absolute;
  top: 0;
  left: var(--gutter);
  transform: translateY(-120%);
  z-index: 100;
  background: var(--ink);
  color: var(--bg);
  padding: var(--space-xs) var(--space-m);
  font-size: var(--step-small);
  text-decoration: none;
  transition: transform var(--dur-fast) var(--ease-out);
}

.skip-link:focus { transform: translateY(0); }

/* --- Header --------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-fast) var(--ease-out),
    background-color var(--dur-fast) var(--ease-out);
}

.site-header[data-scrolled="true"] { border-bottom-color: var(--rule); }

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-m);
  min-height: var(--header-h);
}

.brand {
  display: flex;
  align-items: baseline;
  gap: var(--space-xs);
  text-decoration: none;
  white-space: nowrap;
}

.brand__name {
  font-size: 0.9375rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  font-weight: 400;
}

.brand__role {
  font-size: var(--step-label);
  letter-spacing: 0.07em;
  color: var(--ink-3);
}

@media (max-width: 40em) {
  .brand__role { display: none; }
}

/* --- Nav ------------------------------------------------------------------ */
.nav { display: flex; align-items: center; gap: clamp(1rem, 2.5vw, 2.25rem); }

.nav__link {
  position: relative;
  font-size: var(--step-small);
  text-decoration: none;
  color: var(--ink-2);
  padding-block: var(--space-2xs);
  transition: color var(--dur-fast) var(--ease-out);
}

.nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 2px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-mid) var(--ease-out);
}

.nav__link:hover { color: var(--ink); }
.nav__link:hover::after { transform: scaleX(1); }

.nav__link[aria-current="page"] { color: var(--ink); }
.nav__link[aria-current="page"]::after { transform: scaleX(1); }

.nav__link--cv { display: inline-flex; align-items: center; gap: 0.4em; }

.nav__link--cv svg { width: 0.75em; height: 0.75em; opacity: 0.55; }

@media (max-width: 34em) {
  .nav { gap: var(--space-s); }
  .nav__link { font-size: 0.8125rem; }
}

/* --- Hero ----------------------------------------------------------------- */
.hero { padding-top: clamp(3.5rem, 8vw, 7rem); padding-bottom: var(--space-2xl); }

.hero__label { margin-bottom: var(--space-m); }

.hero__title { margin-bottom: var(--space-m); max-width: 18ch; }

.hero__title em {
  font-style: normal;
  color: var(--ink-3);
}

.hero__lede { max-width: 54ch; margin-bottom: var(--space-xl); }

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s);
  align-items: center;
}

/* --- Buttons -------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.85em 1.5em;
  font-size: var(--step-small);
  text-decoration: none;
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out);
}

.btn:hover { background: var(--ink); color: var(--bg); }

.btn--primary { background: var(--ink); color: var(--bg); }

.btn--primary:hover {
  background: transparent;
  color: var(--ink);
}

.btn--ghost {
  border-color: var(--rule-strong);
  color: var(--ink-2);
}

.btn--ghost:hover {
  border-color: var(--ink);
  background: transparent;
  color: var(--ink);
}

.btn svg { width: 0.85em; height: 0.85em; flex: none; }

/* Copy-link button ---------------------------------------------------------- */
.copy-link {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0;
  padding: 0.8em 1.1em;
  border: 1px dashed var(--rule-strong);
  border-radius: var(--radius);
  background: transparent;
  color: var(--ink-2);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out);
}

.copy-link:hover { border-color: var(--ink); color: var(--ink); }

.copy-link[data-copied="true"] {
  border-style: solid;
  border-color: var(--ink);
  color: var(--ink);
}

.copy-link__icon { width: 0.9em; height: 0.9em; flex: none; }

/* --- Metrics bar ---------------------------------------------------------- */
.metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

/* No vertical dividers between items — the numbers sit too close to a rule. */
.metrics__item {
  padding: var(--space-l) var(--space-m) var(--space-l) 0;
}

@media (max-width: 52em) {
  .metrics__item {
    border-bottom: 1px solid var(--rule);
    padding-block: var(--space-m);
  }
  .metrics__item:last-child { border-bottom: 0; }
}

.metrics__value {
  font-size: clamp(2rem, 1.2rem + 2.4vw, 3.25rem);
  line-height: 1;
  letter-spacing: var(--ls-display);
  font-weight: 300;
  display: block;
  margin-bottom: var(--space-xs);
}

.metrics__label {
  font-size: var(--step-small);
  color: var(--ink-2);
  line-height: 1.4;
  display: block;
  max-width: 24ch;
}

/* --- Section heading ------------------------------------------------------ */
.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-m);
  padding-bottom: var(--space-m);
  margin-bottom: var(--space-xl);
  border-bottom: 0px solid var(--rule);
}

.section-head__count { font-variant-numeric: tabular-nums; }

/* --- Work grid ------------------------------------------------------------ */
.work-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(2rem, 4vw, 4.5rem) clamp(1.5rem, 3vw, 3rem);
}

@media (max-width: 46em) {
  .work-grid { grid-template-columns: 1fr; }
}

/* Every 5th card runs full width — breaks the rhythm, gives the eye a rest. */
.work-card--feature { grid-column: 1 / -1; }

.work-card { position: relative; }

.work-card__link {
  display: block;
  text-decoration: none;
  color: inherit;
}

.work-card__media {
  position: relative;
  overflow: hidden;
  background: var(--bg-sunk);
  border-radius: var(--radius);
  aspect-ratio: 4 / 3;
  margin-bottom: var(--space-m);
}

.work-card--feature .work-card__media { aspect-ratio: 16 / 7; }

@media (max-width: 46em) {
  .work-card--feature .work-card__media { aspect-ratio: 4 / 3; }
}

.work-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out),
    filter var(--dur-slow) var(--ease-out);
  will-change: transform;
}

.work-card__link:hover .work-card__img,
.work-card__link:focus-visible .work-card__img {
  transform: scale(1.035);
}

/* Subtle veil that lifts on hover — keeps the grid calm at rest. */
.work-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--bg-ink);
  opacity: 0.05;
  transition: opacity var(--dur-mid) var(--ease-out);
  pointer-events: none;
}

.work-card__link:hover .work-card__media::after,
.work-card__link:focus-visible .work-card__media::after { opacity: 0; }

.work-card__meta {
  display: flex;
  flex-wrap: wrap; /* longer client names drop the tag to its own line rather than crushing it */
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2xs) var(--space-s);
  margin-bottom: var(--space-2xs);
}

.work-card__client { font-size: var(--step-h3); font-weight: 300; }

.work-card__title {
  color: var(--ink-2);
  font-size: var(--step-body);
  font-weight: 400;
  line-height: 1.45;
  max-width: 42ch;
}

.work-card__tag {
  font-size: var(--step-label);
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  color: var(--ink-3);
  white-space: nowrap;
}

/* Every card except the hero/feature one always folds the tag onto its own
   line under the client name, at any viewport width — not just on mobile.
   The feature card has room to spare and keeps the right-aligned tag. */
.work-card:not(.work-card--feature) .work-card__meta {
  justify-content: flex-start;
}

.work-card:not(.work-card--feature) .work-card__tag {
  flex-basis: 100%;
}

.work-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  margin-top: var(--space-s);
  font-size: var(--step-small);
  color: var(--ink);
}

.work-card__cta svg {
  width: 0.8em;
  height: 0.8em;
  transition: transform var(--dur-mid) var(--ease-out);
}

.work-card__link:hover .work-card__cta svg { transform: translateX(4px); }

/* --- Case study layout ---------------------------------------------------- */
.case-hero { padding-block: clamp(2.5rem, 6vw, 5rem); }

.case-hero__label { margin-bottom: var(--space-m); }

.case-hero__title { margin-bottom: var(--space-m); max-width: 20ch; }

.case-hero__lede { margin-bottom: var(--space-xl); }

/* Case note: short title + paragraph explaining the plate directly above it.
   Distinct from .work-card (the homepage grid item) even though the two
   started from the same markup shape — this one never links or shows media. */
.case-note { padding-top: calc(var(--space-xl) / 2); padding-bottom: var(--space-xl); }

.case-note__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2xs) var(--space-s);
  margin-bottom: var(--space-2xs);
}

.case-note__client { font-size: var(--step-h3); font-weight: 300; }

.case-note__title {
  color: var(--ink-2);
  font-size: var(--step-body);
  font-weight: 400;
  line-height: 1.45;
  max-width: 42ch;
  margin-bottom: var(--space-2xs);
}

.case-note__tag {
  font-size: var(--step-label);
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  color: var(--ink-3);
  white-space: nowrap;
}

/* Metadata bar.
   Client / Role / Period read as a row of short facts; the long Scope line
   gets its own full-width row rather than orphaning into a narrow column. */
.meta-bar {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-m) var(--space-l);
  padding-block: var(--space-l);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

.meta-bar > :nth-child(4) { grid-column: 1 / -1; }

.meta-bar > :nth-child(4) .meta-bar__val { max-width: 72ch; }

@media (max-width: 44em) {
  .meta-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 26em) {
  .meta-bar { grid-template-columns: 1fr; }
}

.meta-bar__key { margin-bottom: var(--space-3xs); }

.meta-bar__val {
  font-size: var(--step-small);
  color: var(--ink);
  line-height: 1.45;
}

/* Two-column case body with sticky jump nav */
.case-body {
  display: grid;
  grid-template-columns: minmax(0, 14rem) minmax(0, 1fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: start;
}

@media (max-width: 60em) {
  .case-body { grid-template-columns: 1fr; }
}

.jump-nav {
  position: sticky;
  top: calc(var(--header-h) + var(--space-l));
  align-self: start;
}

@media (max-width: 60em) {
  .jump-nav {
    position: static;
    padding-bottom: var(--space-l);
    border-bottom: 1px solid var(--rule);
  }
}

.jump-nav__title { margin-bottom: var(--space-s); }

.jump-nav__list { list-style: none; display: grid; gap: 0.15rem; }

.jump-nav__link {
  display: block;
  padding: 0.4em 0 0.4em 0.9em;
  border-left: 1px solid var(--rule);
  font-size: var(--step-small);
  text-decoration: none;
  color: var(--ink-3);
  transition: color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out);
}

.jump-nav__link:hover { color: var(--ink); border-left-color: var(--rule-strong); }

.jump-nav__link[aria-current="true"] {
  color: var(--ink);
  border-left-color: var(--ink);
}

@media (max-width: 60em) {
  .jump-nav__list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2xs) var(--space-s);
  }
  .jump-nav__link {
    border-left: 0;
    border-bottom: 1px solid var(--rule);
    padding: 0.3em 0;
  }
  .jump-nav__link[aria-current="true"] { border-bottom-color: var(--ink); }
}

/* Case sections */
.case-section + .case-section { margin-top: var(--space-3xl); }

.case-section__label { margin-bottom: var(--space-s); }

.case-section__title { margin-bottom: var(--space-m); max-width: 24ch; }

/* Scroll-margin so anchors clear the sticky header */
.case-section, .anchor-offset { scroll-margin-top: calc(var(--header-h) + 2rem); }

/* Role & collaboration block — the "who did what" the research asked for */
.ownership {
  display: grid;
  gap: var(--space-m);
  padding: var(--space-l);
  background: var(--bg-elev);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}

@media (min-width: 42em) {
  .ownership { grid-template-columns: 1fr 1fr; gap: var(--space-l); }
}

.ownership__key { margin-bottom: var(--space-2xs); }

.ownership__val { font-size: var(--step-small); color: var(--ink-2); line-height: 1.55; }

.ownership__val strong { color: var(--ink); font-weight: 400; }

/* Key-point list */
.points { list-style: none; display: grid; gap: var(--space-m); }

.points__item {
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  gap: var(--space-s);
  align-items: start;
}

.points__num {
  font-variant-numeric: tabular-nums;
  font-size: var(--step-label);
  letter-spacing: var(--ls-label);
  color: var(--ink-3);
  padding-top: 0.45em;
}

.points__body { color: var(--ink-2); font-size: var(--step-body); }

.points__body strong { color: var(--ink); font-weight: 400; }

/* --- Figures / image plates ----------------------------------------------- */
.plate { margin-block: var(--space-xl); }

.plate__img {
  width: 100%;
  border-radius: var(--radius);
  background: var(--bg-elev);
  border: 1px solid var(--rule);
}

.plate__caption {
  margin-top: var(--space-s);
  font-size: var(--step-small);
  color: var(--ink-3);
  max-width: 60ch;
  line-height: 1.5;
}

/* Full-bleed band that escapes the text column */
.plate--bleed {
  margin-inline: calc(50% - 50vw);
  padding-inline: var(--gutter);
  max-width: 100vw;
}

.plate--bleed .plate__img { max-width: var(--width-wide); margin-inline: auto; }

.plate--bleed .plate__caption {
  max-width: var(--width-wide);
  margin-inline: auto;
}

/* Image grid inside a case study */
.plate-grid {
  display: grid;
  gap: var(--space-s);
  margin-block: var(--space-xl);
}

.plate-grid--2 { grid-template-columns: repeat(2, 1fr); }
.plate-grid--3 { grid-template-columns: repeat(3, 1fr); }

@media (max-width: 40em) {
  .plate-grid--3 { grid-template-columns: repeat(2, 1fr); }
}

.plate-grid img {
  width: 100%;
  border-radius: var(--radius);
  border: 1px solid var(--rule);
  background: var(--bg-elev);
}

/* --- Inverted band -------------------------------------------------------- */
.band-dark {
  background: var(--bg-ink);
  color: var(--ink-on-dark);
  padding-block: var(--space-3xl);
}

.band-dark .label { color: var(--ink-2-on-dark); }
.band-dark .lede { color: var(--ink-2-on-dark); }
.band-dark .prose p { color: var(--ink-2-on-dark); }
.band-dark .rule { border-top-color: var(--rule-on-dark); }

.band-dark .metrics {
  border-top-color: var(--rule-on-dark);
  border-bottom-color: var(--rule-on-dark);
}

.band-dark .metrics__item {
  border-right-color: var(--rule-on-dark);
  border-bottom-color: var(--rule-on-dark);
}

.band-dark .metrics__label { color: var(--ink-2-on-dark); }

.band-dark .btn { border-color: var(--ink-on-dark); color: var(--ink-on-dark); }
.band-dark .btn:hover { background: var(--ink-on-dark); color: var(--bg-ink); }

/* --- 50% grey band ---------------------------------------------------------
   Sits between the paper page and the black footer: contact section and the
   About closing quote. Same anatomy as .band-dark, grey palette. */
.band-grey {
  background: var(--bg-grey);
  color: var(--ink-on-grey);
  padding-block: var(--space-3xl);
}

.band-grey .label { color: var(--ink-2-on-grey); }
.band-grey .lede { color: var(--ink-2-on-grey); }
.band-grey .prose p { color: var(--ink-2-on-grey); }
.band-grey .small,
.band-grey .muted { color: var(--ink-2-on-grey); }
.band-grey .rule { border-top-color: var(--rule-on-grey); }

.band-grey .contact-list__val a { border-bottom-color: var(--rule-on-grey); }

.band-grey .btn { border-color: var(--ink-on-grey); color: var(--ink-on-grey); }
.band-grey .btn:hover { background: var(--ink-on-grey); color: var(--ink); }

/* --- About page ----------------------------------------------------------- */
.capability {
  display: grid;
  gap: var(--space-s);
  padding-block: var(--space-l);
  border-bottom: 1px solid var(--rule);
}

@media (min-width: 48em) {
  .capability {
    grid-template-columns: minmax(0, 18rem) minmax(0, 1fr);
    gap: var(--space-l);
    align-items: start;
  }
}

.capability:first-of-type { border-top: 1px solid var(--rule); }

.capability__title { font-size: var(--step-h3); font-weight: 300; }

.capability__body { color: var(--ink-2); }

/* Experience timeline */
.timeline { list-style: none; }

.timeline__item {
  display: grid;
  gap: var(--space-2xs) var(--space-l);
  padding-block: var(--space-l);
  border-bottom: 1px solid var(--rule);
}

@media (min-width: 48em) {
  .timeline__item {
    grid-template-columns: minmax(0, 11rem) minmax(0, 1fr);
    align-items: start;
  }
}

.timeline__item:first-child { border-top: 1px solid var(--rule); }

.timeline__period {
  font-variant-numeric: tabular-nums;
  font-size: var(--step-small);
  color: var(--ink-3);
}

.timeline__role { font-size: var(--step-h3); font-weight: 300; margin-bottom: var(--space-3xs); }

.timeline__org {
  font-size: var(--step-small);
  color: var(--ink-3);
  margin-bottom: var(--space-s);
}

.timeline__body { color: var(--ink-2); font-size: var(--step-body); }

.timeline__list {
  list-style: none;
  margin-top: var(--space-s);
  display: grid;
  gap: var(--space-2xs);
}

.timeline__list li {
  position: relative;
  padding-left: 1.1em;
  color: var(--ink-2);
  font-size: var(--step-small);
  line-height: 1.55;
}

.timeline__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 4px;
  height: 1px;
  background: var(--rule-strong);
}

/* Tag row */
.tags { display: flex; flex-wrap: wrap; gap: var(--space-2xs); margin-top: var(--space-s); }

.tag {
  font-size: var(--step-label);
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  color: var(--ink-2);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 0.45em 0.75em;
  background: var(--bg-elev);
}

/* --- Next project --------------------------------------------------------- */
.next-project { border-top: 1px solid var(--rule); }

.next-project__link {
  display: grid;
  gap: var(--space-m);
  padding-block: var(--space-2xl);
  text-decoration: none;
  color: inherit;
  align-items: center;
}

@media (min-width: 48em) {
  .next-project__link { grid-template-columns: 1fr auto; }
}

.next-project__title {
  font-size: var(--step-h1);
  font-weight: 300;
  transition: transform var(--dur-mid) var(--ease-out);
}

.next-project__link:hover .next-project__title { transform: translateX(0.5rem); }

.next-project__arrow {
  width: 3rem;
  height: 3rem;
  border: 1px solid var(--rule-strong);
  border-radius: 50%;
  display: grid;
  place-items: center;
  transition: background-color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out);
}

.next-project__link:hover .next-project__arrow {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--bg);
}

.next-project__arrow svg { width: 1rem; height: 1rem; }

/* --- Contact -------------------------------------------------------------- */
.contact__email {
  display: inline-block;
  font-size: clamp(1.5rem, 0.9rem + 2.6vw, 3rem);
  font-weight: 300;
  letter-spacing: var(--ls-heading);
  text-decoration: none;
  position: relative;
  word-break: break-word;
}

.contact__email::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.06em;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-mid) var(--ease-out);
}

.contact__email:hover::after { transform: scaleX(1); }

.contact-list {
  display: grid;
  gap: var(--space-m);
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  margin-top: var(--space-xl);
}

.contact-list__key { margin-bottom: var(--space-3xs); }

.contact-list__val { font-size: var(--step-small); }

.contact-list__val a { text-decoration: none; border-bottom: 1px solid var(--rule-strong); }

.contact-list__val a:hover { border-bottom-color: currentColor; }

/* --- Footer ----------------------------------------------------------------
   Inverted: black ground, white type. Grounds the page after the grey band. */
.site-footer {
  background: var(--bg-ink);
  color: var(--ink-on-dark);
  padding-block: var(--space-xl) var(--space-l);
  /* No top margin: the black ground meets whatever band precedes it. */
}

.site-footer .label { color: var(--ink-2-on-dark); }
.site-footer .small,
.site-footer .muted { color: var(--ink-2-on-dark); }

.site-footer .copy-link {
  border-color: var(--rule-on-dark);
  color: var(--ink-2-on-dark);
}

.site-footer .copy-link:hover,
.site-footer .copy-link[data-copied="true"] {
  border-color: var(--ink-on-dark);
  color: var(--ink-on-dark);
}

.site-footer__grid {
  display: grid;
  gap: var(--space-l);
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  margin-bottom: var(--space-xl);
}

.site-footer__links { list-style: none; display: grid; gap: var(--space-2xs); }

.site-footer__links a {
  font-size: var(--step-small);
  text-decoration: none;
  color: var(--ink-2-on-dark);
  transition: color var(--dur-fast) var(--ease-out);
}

.site-footer__links a:hover { color: var(--ink-on-dark); }

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s) var(--space-m);
  align-items: center;
  justify-content: space-between;
  padding-top: var(--space-m);
  border-top: 1px solid var(--rule-on-dark);
}

.site-footer__fine { font-size: var(--step-label); color: var(--ink-2-on-dark); letter-spacing: 0.04em; }

/* --- Reveal on scroll -----------------------------------------------------
   Everything here is scoped to html.js, a class set by an inline script in
   <head>. If scripting is off or site.js fails to load, that class is never
   added, these rules never apply, and the content is simply visible. Content
   must never depend on JavaScript to be readable.
   -------------------------------------------------------------------------- */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--dur-slow) var(--ease-out),
    transform var(--dur-slow) var(--ease-out);
}

.js [data-reveal].is-visible { opacity: 1; transform: none; }

/* Staggered children */
.js [data-reveal-stagger] > * {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--dur-slow) var(--ease-out),
    transform var(--dur-slow) var(--ease-out);
}

.js [data-reveal-stagger].is-visible > * { opacity: 1; transform: none; }

.js [data-reveal-stagger].is-visible > *:nth-child(1) { transition-delay: 0ms; }
.js [data-reveal-stagger].is-visible > *:nth-child(2) { transition-delay: 70ms; }
.js [data-reveal-stagger].is-visible > *:nth-child(3) { transition-delay: 140ms; }
.js [data-reveal-stagger].is-visible > *:nth-child(4) { transition-delay: 210ms; }
.js [data-reveal-stagger].is-visible > *:nth-child(5) { transition-delay: 280ms; }
.js [data-reveal-stagger].is-visible > *:nth-child(6) { transition-delay: 350ms; }

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal],
  .js [data-reveal-stagger] > * {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* --- Placeholder ---------------------------------------------------------- */
/* Used where final artwork is still to be supplied. Deliberately obvious. */
.placeholder {
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 9;
  background: repeating-linear-gradient(
    45deg,
    var(--bg-sunk),
    var(--bg-sunk) 12px,
    var(--bg) 12px,
    var(--bg) 24px
  );
  border: 1px dashed var(--rule-strong);
  border-radius: var(--radius);
  text-align: center;
  padding: var(--space-l);
}

.placeholder__text {
  font-size: var(--step-small);
  color: var(--ink-3);
  max-width: 34ch;
}

.placeholder__text strong {
  display: block;
  color: var(--ink-2);
  font-weight: 400;
  margin-bottom: var(--space-3xs);
}

/* --- Full-width case variant ----------------------------------------------
   Same case sections, no jump nav: the prose gets the horizontal room the
   nav column used to occupy. Kept as an alternative to compare against the
   two-column layout — delete whichever loses. */
.case-full { --measure: 88ch; }

.case-full .case-section__title { max-width: 32ch; }

/* --- Project pager ---------------------------------------------------------
   Previous / next project with a small thumbnail each side. */
.project-pager { border-top: 1px solid var(--rule); }

.project-pager__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-m);
}

@media (max-width: 40em) {
  .project-pager__grid { grid-template-columns: 1fr; }
}

.pager-link {
  display: flex;
  align-items: center;
  gap: var(--space-m);
  padding-block: var(--space-xl);
  text-decoration: none;
  color: inherit;
}

.pager-link--next {
  flex-direction: row-reverse;
  text-align: right;
}

@media (max-width: 40em) {
  .pager-link { padding-block: var(--space-m); }
  .pager-link--prev { border-bottom: 1px solid var(--rule); }
}

.pager-link__thumb {
  width: clamp(5.5rem, 10vw, 8rem);
  aspect-ratio: 4 / 3;
  object-fit: cover;
  flex: none;
  border-radius: var(--radius);
  border: 0px solid var(--rule);
  background: transparent;
  transition: transform var(--dur-mid) var(--ease-out);
}

.pager-link:hover .pager-link__thumb { transform: scale(1.04); }

.pager-link__label { margin-bottom: var(--space-3xs); }

.pager-link__title {
  font-size: var(--step-h3);
  font-weight: 300;
  line-height: var(--lh-snug);
}

.pager-link__arrow {
  width: 2.5rem;
  height: 2.5rem;
  flex: none;
  border: 1px solid var(--rule-strong);
  border-radius: 50%;
  display: grid;
  place-items: center;
  transition: background-color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out);
}

.pager-link:hover .pager-link__arrow {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--bg);
}

.pager-link__arrow svg { width: 0.9rem; height: 0.9rem; }

/* --- Contact form ----------------------------------------------------------
   Lives on the grey band. In Framer, swap this for the native Form component
   (or keep the markup and point action at a form endpoint). */
.contact-form {
  max-width: 46rem;
  margin-top: var(--space-l);
}

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

@media (max-width: 40em) {
  .form-grid { grid-template-columns: 1fr; }
}

.field { display: grid; gap: var(--space-2xs); align-content: start; }

.field--full { grid-column: 1 / -1; }

.field__label {
  font-size: var(--step-label);
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  color: var(--ink-2-on-grey);
}

.field__label em {
  font-style: normal;
  text-transform: none;
  letter-spacing: 0.02em;
  opacity: 0.75;
}

.field__input {
  width: 100%;
  padding: 0.8em 1em;
  font-size: var(--step-small);
  color: var(--ink-on-grey);
  background: color-mix(in srgb, #ffffff 9%, transparent);
  border: 1px solid var(--rule-on-grey);
  border-radius: var(--radius);
  transition: border-color var(--dur-fast) var(--ease-out),
    background-color var(--dur-fast) var(--ease-out);
}

.field__input::placeholder { color: color-mix(in srgb, var(--ink-2-on-grey) 65%, transparent); }

.field__input:hover { border-color: var(--ink-2-on-grey); }

.field__input:focus {
  outline: none;
  border-color: var(--ink-on-grey);
  background: color-mix(in srgb, #ffffff 14%, transparent);
}

textarea.field__input { min-height: 9rem; resize: vertical; }

select.field__input {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23ffffff' stroke-width='1.5'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9em center;
  background-size: 0.8em;
  padding-right: 2.4em;
}

select.field__input option { color: var(--ink); background: #ffffff; }

.form-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-m);
  margin-top: var(--space-m);
}

.form-note {
  font-size: var(--step-small);
  color: var(--ink-2-on-grey);
  max-width: 38ch;
  line-height: 1.5;
}

/* Honeypot: hidden from people, visible to naive bots. Server/Framer side
   should discard any submission where this field has a value. */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --- Print ---------------------------------------------------------------- */
@media print {
  .site-header, .site-footer, .jump-nav, .next-project { display: none; }
  body { background: #fff; color: #000; }
  .plate--bleed { margin-inline: 0; }
}