/* Szolyd Concrete — site styles
   Design language per ../Design/DESIGN-BRIEF.md: concrete neutrals, monochrome,
   photography-led, hairline rules, spec-sheet motif, restrained motion.
   Accent = true brand orange from Trevor's vector masters (LOGO zip,
   2026-07-22). Headings/UI still the system grotesque stack — the zip's font
   PDF is a candidates sheet, not a decision; brand font remains a Trevor Q. */

:root {
  --ink: #1b1a18;
  --ink-soft: #4a4741;
  --grey: #6b665d;       /* small text on paper — WCAG AA (~5:1 on --paper) */
  --grey-dim: #8b867d;   /* small text on the dark footer/bands — AA on --ink */
  --paper: #f3f1ed;
  --paper-deep: #e9e6e0;
  --orange: #f6892f;      /* Szolyd brand orange (vector-master fill) — graphic/mark/fill only (fails AA as text on paper) */
  --orange-deep: #ad540b; /* darkened brand orange for the rare orange-on-paper text/hover (4.6:1 AA) */
  --hairline: rgba(27, 26, 24, 0.16);
  --hairline-light: rgba(243, 241, 237, 0.22);
  --sans: system-ui, -apple-system, "Segoe UI Variable Text", "Segoe UI",
          Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif;
  --sans-display: system-ui, -apple-system, "Segoe UI Variable Display", "Segoe UI",
          Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif;
  --measure: 34em;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --grid-gap: clamp(1rem, 2.2vw, 1.75rem);
  --section: clamp(4.5rem, 12vh, 8rem);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* settle curve — all motion uses this */
  /* display type scale — hero > page opener > closing CTA > section head */
  --size-hero:    clamp(2.25rem, 7.5vw, 6rem);
  --size-page:    clamp(2rem, 4.4vw, 3.5rem);
  --size-close:   clamp(2.25rem, 5vw, 4rem);
  --size-section: clamp(1.875rem, 3.6vw, 3rem);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* 16px root through laptop widths, easing to 17px by ~1920px; every rem-based
     size (incl. heading clamp bounds) scales in lockstep, never below today */
  font-size: clamp(100%, 89.6% + 0.14vw, 106.25%);
}

/* anchored sections land below the fixed header, not under it */
[id] { scroll-margin-top: 6.5rem; }

body {
  font-family: var(--sans);
  background: var(--paper);
  color: var(--ink);
  font-size: 1.0625rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { display: block; max-width: 100%; height: auto; }

a { color: inherit; }
a, button { -webkit-tap-highlight-color: rgba(246, 137, 47, 0.18); }

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

/* keyboard focus — one deliberate ring, everywhere */
:focus-visible { outline: 2px solid var(--orange-deep); outline-offset: 3px; }
.band-dark :focus-visible, .site-footer :focus-visible, .hero :focus-visible { outline-color: var(--orange); }

/* 2008–2015 archive photography — pull the mixed colour casts toward the
   site's concrete neutrals so old frames sit beside the new work */
.img-archive { filter: saturate(0.75) sepia(0.10) contrast(1.05) brightness(1.02); }

.wrap {
  max-width: 84rem;
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

/* ---------- type ---------- */

h1, h2 {
  font-family: var(--sans-display);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.04;
  text-wrap: balance;
}
h3 {
  font-family: var(--sans-display);
  font-weight: 600;
  letter-spacing: -0.008em;
  line-height: 1.25;
  text-wrap: balance;
}

.kicker {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--grey);
  display: block;
  margin-bottom: 1.25rem;
}

/* cap-centred punctuation (·, –, ®) in permanently-uppercase labels */
.kicker, .btn, .site-nav a, .nav-toggle, .skip-link, .photo-credit,
.spec-sheet dt, .site-footer .col .label, .backlink, .marquee-item .meta,
.monument-caption .spec, .proj-tag, .proj-more, .ct-aside .label {
  font-feature-settings: "case";
}

.lede {
  font-size: clamp(1.125rem, 1.6vw, 1.375rem);
  line-height: 1.45;
  max-width: var(--measure);
  color: var(--ink-soft);
}

p { max-width: var(--measure); }

/* better rag: avoid orphans in running text (progressive enhancement) */
p, li, dd, figcaption { text-wrap: pretty; }

/* ---------- header ---------- */

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  color: var(--ink);
  /* transparent wrapper — the concrete tile floats inside (hero shows above it
     and to both sides) and stays pinned as you scroll. The surround is
     click-through so it never blocks content beside the tile. */
  padding: clamp(1.1rem, 2.5vh, 1.85rem) var(--gutter) 0;
  pointer-events: none;
  transition: padding-top 0.28s ease, background-color 0.28s ease;
}

/* notched phones (viewport-fit=cover): type clears the sensor housing */
.wrap {
  padding-left: max(var(--gutter), env(safe-area-inset-left));
  padding-right: max(var(--gutter), env(safe-area-inset-right));
}
.site-header {
  padding-left: max(var(--gutter), env(safe-area-inset-left));
  padding-right: max(var(--gutter), env(safe-area-inset-right));
}

/* once scrolled, the tile docks to the top edge (keeps its side float) */
/* docked: frost the wrapper so content passing the float gaps reads intentional */
.scrolled .site-header {
  padding-top: 0.4rem;
  background-color: rgba(243, 241, 237, 0.82);
  /* 5px, not 10: the backdrop re-blurs on every scrolled frame, and the
     radius is the cost — half the blur reads the same, scrolls smoother
     on image-heavy pages */
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  box-shadow: 0 1px 0 rgba(27, 26, 24, 0.10);
}
.scrolled .site-header .bar {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 1px 2px rgba(20, 19, 17, 0.22),
    0 8px 20px rgba(20, 19, 17, 0.22);
}

@media (prefers-reduced-motion: reduce) {
  .site-header { transition: none; }}

/* The nav sits in a floating tile cut from a real Szolyd UHPC surface — the
   fluted (ribbed) cast face from the UVic shoot, darkened. Drop shadow so it
   reads as a physical slab hovering over the hero; hard cast edges. */
.site-header .bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.85rem 1.5rem;
  pointer-events: auto;
  background-color: #a9a9a9;
  background-image:
    linear-gradient(rgba(243, 241, 237, 0.10), rgba(27, 26, 24, 0.07)),
    url(/assets/img/concrete-nav.webp);
  background-size: cover;
  background-position: center;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 1px 2px rgba(20, 19, 17, 0.30),
    0 12px 32px rgba(20, 19, 17, 0.35);
  transition: box-shadow 0.28s ease;
  border-bottom: 2px solid var(--orange);
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.26em;
  font-size: 0.9375rem;
  text-decoration: none;
  text-transform: uppercase;
}

.wordmark .mark { width: 2.35em; height: 2.35em; object-fit: contain; display: block; flex: none; }

/* Header lockup sits over the hero photo — give it a soft shadow so the thin
   orange mark and wordmark stay legible over any part of the image. */
/* light concrete tile — dark text needs no legibility shadow */

.site-nav { display: flex; gap: 1.75rem; }

.site-nav a {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  opacity: 0.85;
}

.site-nav a:hover, .site-nav a[aria-current="page"] { opacity: 1; }
.site-nav a { transition: opacity 0.2s var(--ease-out); }
/* fallback current-page marker (overridden both sides of 960px below) */
.site-nav a[aria-current="page"] { border-bottom: 1px solid currentColor; padding-bottom: 2px; }
@media (min-width: 961px) {
  .site-nav a { position: relative; }
  .site-nav a::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 1px;
    background: currentColor; transform: scaleX(0); transform-origin: left;
    transition: transform 0.3s var(--ease-out);
  }
  .site-nav a:hover::after { transform: scaleX(1); }
  .site-nav a[aria-current="page"]::after {
    transform: scaleX(1); height: 2px; background: var(--orange);
  }
  .site-nav a[aria-current="page"] { border-bottom: none; padding-bottom: 0; }
}
@media (prefers-reduced-motion: reduce) { .site-nav a::after { transition: none; } }

.nav-toggle { display: none; }

/* 960, not 900: with Home added the bar carries seven items, and at 905px the
   nav ran flush into the wordmark — space-between left exactly 0px between them.
   Collapse to the toggle while there is still room to breathe. */
@media (max-width: 960px) {
  .nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    background: none;
    border: 1px solid rgba(27, 26, 24, 0.35); /* --hairline vanished on the photo tile */
    color: inherit;
    font: inherit;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 0.5rem 1rem;
    cursor: pointer;
    transition: background-color 0.15s ease;
  }
  .nav-toggle:hover { background: rgba(27, 26, 24, 0.08); }
  .nav-toggle[aria-expanded="true"] {
    background: var(--ink);
    color: var(--paper);
    border-color: var(--ink);
  }
  .site-nav {
    display: none;
    position: absolute;
    top: 100%;
    /* hang the sheet from the concrete tile, not the viewport — same inset as
       the header padding; the bar's orange border reads as the seam between them */
    left: var(--gutter);
    right: var(--gutter);
    flex-direction: column;
    gap: 0;
    background: var(--paper);
    padding: 0.25rem 1.5rem 0.9rem;  /* matches .bar's inner padding — links align with the wordmark */
    border-bottom: 2px solid var(--orange);
    box-shadow: 0 16px 30px rgba(20, 19, 17, 0.4);
    max-height: calc(100vh - 7.5rem);
    max-height: calc(100dvh - 7.5rem);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .site-nav.open { display: flex; }
  .js .site-nav.open { animation: nav-drop 0.28s var(--ease-out); }
  .site-nav a {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 0.6rem 0;
    font-size: 0.8125rem;
    border-bottom: 1px solid var(--hairline);
  }
  .site-nav a:last-child { border-bottom: 0; }
  .site-nav a[aria-current="page"] {
    padding-bottom: 0.6rem;
    border-bottom: 1px solid var(--hairline);
    color: var(--orange-deep);   /* AA on paper per the token comment */
    opacity: 1;
  }
  .site-nav a[aria-current="page"]:last-child { border-bottom: 0; }}
@keyframes nav-drop { from { opacity: 0; transform: translateY(-8px); } }
@media (prefers-reduced-motion: reduce) { .js .site-nav.open { animation: none; } }

/* ---------- hero ---------- */

.hero {
  position: relative;
  background: var(--ink);
  min-height: 92vh;   /* fallback for browsers without svh units */
  min-height: 92svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  color: #fff;
  isolation: isolate;
  /* the hero mark hangs off the right edge by design — clip it here so it
     can't widen the document and hand the page a horizontal scrollbar */
  overflow: hidden;
}

.hero img.hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top,
    rgba(20,19,17,0.78) 0%, rgba(20,19,17,0.56) 16%,
    rgba(20,19,17,0.32) 34%, rgba(20,19,17,0.14) 52%,
    rgba(20,19,17,0.08) 68%, rgba(20,19,17,0.16) 84%,
    rgba(20,19,17,0.30) 100%);
}

.hero .hero-content { width: 100%; padding-bottom: clamp(2.5rem, 6vh, 4rem); }

/* home only: shorter hero + tighter first-section padding so the §01
   Feature stairs / StepClad picker crests the fold and prompts the scroll */
.hero-tease { min-height: 86vh; min-height: 86svh; }
.hero-tease .hero-content { padding-bottom: clamp(1.25rem, 3vh, 2rem); }
.section.cap-section { padding-top: clamp(1.25rem, 2.5vh, 2rem); }

.hero h1 {
  font-size: var(--size-hero);
  letter-spacing: -0.03em;
  max-width: 11em;
  margin-bottom: clamp(1.25rem, 3vh, 2rem);
}

.hero .kicker { color: #fff; }

.hero .lede { color: rgba(255, 255, 255, 0.95); margin-bottom: 2.25rem; }

/* hero focal mark (behind the text) + orange headline accent */
.hero .hero-content { position: relative; z-index: 2; }
.hero .hero-marquee { position: relative; z-index: 2; }
.hero-mark {
  position: absolute;
  right: -11%;
  top: 52%;
  transform: translateY(-50%);
  width: clamp(18rem, 40vw, 32rem); /* hi-res mark (1024px) stays sharp up to ~512px display */
  z-index: 1;
  opacity: 0.8;
  pointer-events: none;
  filter: drop-shadow(0 8px 28px rgba(20, 19, 17, 0.4));
}
.hero h1 .hl { color: var(--orange); }

@media (max-width: 760px) {
  .hero-mark { top: auto; bottom: 7rem; right: -16%; width: 17rem; opacity: 0.45; transform: none; }}

.hero .photo-credit {
  margin-top: 3rem;
  padding-top: 1rem;
  border-top: 1px solid var(--hairline-light);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 2.5rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
}

@media (max-width: 560px) {
  .hero .lede { margin-bottom: 1.75rem; }
  .hero .photo-credit { margin-top: 1.75rem; gap: 0.35rem 1.5rem; }}

/* ---------- buttons ---------- */

.btn {
  display: inline-block;
  border: 1px solid currentColor;
  /* right padding minus the 0.14em trailing letter-space = optically centred label */
  padding: 0.9375rem calc(2rem - 0.14em) 0.9375rem 2rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 0.25s var(--ease-out), color 0.25s var(--ease-out), border-color 0.25s var(--ease-out);
}

.btn:hover { background: #fff; color: var(--ink); border-color: #fff; }

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

.hero-cta { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }

/* ---------- sections ---------- */

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

.section-head { margin-bottom: clamp(2.5rem, 6vh, 4.5rem); }

.section-head h2 { font-size: var(--size-section); max-width: 18em; }

/* typographic page opener — the depth pages (contact, design-assist,
   heritage, about, stepclad) all start with kicker → H1 → lede on paper */
.page-hero { padding-top: clamp(7.5rem, 14vh, 10rem); padding-bottom: 0; }
.page-hero h1 { font-size: var(--size-page); max-width: 15em; margin-bottom: 1.25rem; }
.page-hero .lede { max-width: 34em; }
.page-hero .lede a { color: var(--ink); }

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

/* ---------- material case (why UHPC) ---------- */

.material-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}

.material-points { display: grid; gap: 0; counter-reset: none; }

.material-point {
  border-top: 1px solid var(--hairline);
  padding: 1.75rem 0;
  display: grid;
  grid-template-columns: 3.5rem 1fr;
  gap: 1rem;
}

.material-point .num {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--grey);
  font-variant-numeric: tabular-nums;
  padding-top: 0.3rem;
}

.material-point h3 { font-size: 1.1875rem; margin-bottom: 0.5rem; }

.material-point p { color: var(--ink-soft); font-size: 0.9375rem; }

.material-license {
  border-top: 1px solid var(--hairline);
  padding-top: 1.75rem;
  font-size: 0.9375rem;
  color: var(--ink-soft);
}

.material-figures { display: grid; gap: var(--grid-gap); grid-template-columns: 1fr 1fr; }

.material-figures figure:last-child { padding-top: clamp(2rem, 6vh, 4rem); }

figcaption {
  font-size: 0.8125rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--grey);
  padding-top: 0.65rem;
  max-width: 44em;
}
figcaption .credit, figcaption .dwg-cred {
  display: inline-block;
  margin-top: 0.35rem;
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: inherit;
}

@media (max-width: 900px) {
  .material-grid { grid-template-columns: 1fr; }}

/* ---------- spec sheet ---------- */

.spec-sheet {
  border-top: 1px solid var(--ink);
  font-variant-numeric: tabular-nums;
}

.spec-sheet .row {
  display: grid;
  grid-template-columns: 11rem 1fr;
  gap: 1rem;
  padding: 0.875rem 0;
  border-bottom: 1px solid var(--hairline);
  font-size: 0.9375rem;
}

.spec-sheet dt {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--grey);
  padding-top: 0.2rem;
}

.spec-sheet dd { margin: 0; }

@media (max-width: 560px) {
  .spec-sheet .row {
    grid-template-columns: 1fr;
    gap: 0.3rem;
    padding: 0.8rem 0;
  }
  .spec-sheet dt { padding-top: 0; }}

/* ---------- case study ---------- */

.case-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
  margin-bottom: clamp(3rem, 7vh, 5rem);
}

.case-intro .body p + p { margin-top: 1.25rem; }

@media (max-width: 900px) {
  .case-intro { grid-template-columns: 1fr; }}

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

.gallery figure.w2 { grid-column: span 2; }
.gallery figure.w3 { grid-column: span 3; }
.gallery figure.w6 { grid-column: span 6; }

/* Grid stretches each figure to the row height. With `height: 100%` the image ate
   the whole figure and the figcaption was laid out *past* the bottom edge — it
   overflowed onto the next row, and on a last row onto whatever section followed.
   Flex column instead: caption takes its natural height, image fills the rest. */
.gallery figure { display: flex; flex-direction: column; min-width: 0; }
.gallery img { width: 100%; flex: 1 1 auto; min-height: 0; object-fit: cover; background: var(--paper-deep); }

@media (max-width: 760px) {
  .gallery { grid-template-columns: repeat(2, 1fr); }
  .gallery figure.w2, .gallery figure.w3 { grid-column: span 2; }
  .gallery figure.w6 { grid-column: span 2; }}

/* ---------- dark band (Telus teaser) ---------- */

.band-dark {
  background: var(--ink);
  color: var(--paper);
}

.band-dark .kicker { color: var(--grey-dim); }

.band-dark h2 { font-size: var(--size-section); max-width: 16em; margin-bottom: 1.25rem; }

.band-dark p { color: rgba(243, 241, 237, 0.72); }

.band-dark .spec-sheet { border-top-color: var(--paper); }
.band-dark .spec-sheet .row { border-bottom-color: var(--hairline-light); }

/* ---------- origin ---------- */

.origin-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: clamp(2rem, 5vw, 5rem);
}

.origin-grid .year {
  font-size: clamp(3.5rem, 8vw, 6.5rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--grey);
}
@supports (-webkit-text-stroke: 1px black) {
  .origin-grid .year { color: var(--paper-deep); -webkit-text-stroke: 1px var(--grey); }
}

@media (max-width: 760px) { .origin-grid { grid-template-columns: 1fr; }}

/* ---------- process ---------- */

.process-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--ink);
}

.process-step {
  border-bottom: 1px solid var(--hairline);
  border-right: 1px solid var(--hairline);
  padding: 1.75rem 1.5rem 2.25rem 0;
}

.process-step:last-child { border-right: none; }

.process-step .num {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--grey);
  font-variant-numeric: tabular-nums;
  display: block;
  margin-bottom: 2.5rem;
}

.process-step h3 { font-size: 1.0625rem; margin-bottom: 0.5rem; }

.process-step p { font-size: 0.875rem; color: var(--ink-soft); }

@media (max-width: 900px) {
  .process-grid { grid-template-columns: 1fr 1fr; }
  .process-step { border-right: none; }}

/* text sits centred between column hairlines, not flush against them */
.process-step + .process-step { padding-left: 1.5rem; }
@media (max-width: 900px) {
  .process-step + .process-step { padding-left: 0; }
}
@media (max-width: 560px) {
  .process-grid { grid-template-columns: 1fr; }
  .process-step { padding: 1.4rem 0 1.6rem; }
  .process-step .num { margin-bottom: 0.6rem; }}

/* ---------- CTA ---------- */

.cta { text-align: left; }

.cta h2 { font-size: var(--size-close); max-width: 14em; margin-bottom: 1.5rem; }

.cta .lede { margin-bottom: 2.5rem; }

.cta .alt-contact { margin-top: 1.75rem; font-size: 0.9375rem; color: var(--grey); }

.cta .alt-contact a { color: var(--ink-soft); }

/* ---------- pronunciation gloss (szolyd = "solid") ---------- */
/* Dictionary-entry motif: quiet serif italic beside the grotesque wordmark.
   Footer site-wide; the homepage hero gets the fuller treatment. */

/* center, not baseline: the wordmark's flex baseline comes from the mark image's
   bottom edge, which dropped the phonetic ~12px below the SZOLYD text */
.brand-line { display: flex; align-items: center; gap: 0.875rem; flex-wrap: wrap; }

.phonetic {
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-size: 0.875rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--grey-dim);
  white-space: nowrap;
}

/* ---------- footer ---------- */

.site-footer {
  background: var(--ink);
  color: var(--paper);
  border-top: 2px solid var(--orange);
  padding-top: clamp(3rem, 7vh, 5rem);
  padding-bottom: clamp(3rem, 6vh, 4rem);
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: clamp(2.5rem, 4vw, 3.5rem);
  padding-bottom: clamp(3.5rem, 7vh, 5rem);
}

.site-footer .wordmark { color: var(--paper); }

.footer-blurb { margin-top: 1rem; max-width: 26em; }

.site-footer .col p, .site-footer address {
  font-style: normal;
  font-size: 0.9375rem;
  line-height: 1.7;
  color: rgba(243, 241, 237, 0.72);
}

.site-footer .col .label {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--grey-dim);
  display: block;
  margin-bottom: 0.875rem;
}

.site-footer a { color: rgba(243, 241, 237, 0.85); text-decoration: none; }
.site-footer a:hover { color: #fff; }
.site-footer .col p a, .site-footer .col address a {
  border-bottom: 1px solid var(--hairline-light);
  padding-bottom: 1px;
}
.site-footer .col p a:hover, .site-footer .col address a:hover {
  border-bottom-color: rgba(243, 241, 237, 0.6);
}

.footer-legal {
  border-top: 1px solid var(--hairline-light);
  padding-top: 2rem;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  font-size: 0.75rem;
  color: var(--grey-dim);
}

@media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr; }}

/* ---------- reveal motion (restraint; disabled for reduced motion) ---------- */

/* Content is visible by default; motion is layered on only when JS confirms
   it can reveal (the .js class). No-JS / failed-JS users see everything. */
.reveal { transition: opacity 0.45s var(--ease-out), transform 0.6s var(--ease-out); }
.js .reveal { opacity: 0; transform: translateY(14px); }
.reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; transition: none; }}

/* ---------- back to the projects index ----------
   Replaces an earlier prev/next pager. That chained page-to-page through the whole
   site, which was never the point: the ask was a way back to /projects after clicking
   into one of its cards. Every page in that chain is one click away in the main nav. */
.backlink { display: inline-flex; align-items: baseline; gap: 0.5rem;
  font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--grey); text-decoration: none;
  margin-bottom: clamp(1.5rem, 3.5vh, 2.25rem); min-height: 24px; }
.backlink:hover { color: var(--orange-deep); }
.backlink .chev { font-size: 0.9375rem; line-height: 1; color: var(--orange); font-weight: 400; }
.backlink .lbl { border-bottom: 1px solid transparent; padding-bottom: 1px; }
.backlink:hover .lbl { border-bottom-color: var(--hairline); }
/* injected into a case-study heading when you arrived from the index — sits above
   the kicker, so it reads before the section title you just jumped to */
.backlink-injected { margin-bottom: 0.9rem; }

/* ---------- a11y utilities ---------- */

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  left: 0; top: -3rem;
  background: var(--ink);
  color: var(--paper);
  padding: 0.75rem 1.25rem;
  z-index: 100;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 2px solid var(--orange);
  transition: top 0.15s ease;
}
.skip-link:focus { top: 0; }

/* ---------- showcase: the stair range up front, before the case studies ----------
   Same 6-col band-packing as .gallery, but captioned per frame — each stair names its
   own project, because this section pulls work from three of them into one grid and
   an uncredited showcase would read as one portfolio. Rows are orientation-consistent
   (no row height is set, so a portrait beside a landscape crops the landscape hard). */
.showcase { display: grid; grid-template-columns: repeat(6, 1fr);
  gap: clamp(1rem, 2.4vw, 1.75rem); margin-top: clamp(2rem, 5vh, 3rem); }
.showcase figure { margin: 0; grid-column: span 3;
  display: flex; flex-direction: column; min-width: 0; }
.showcase figure.s2 { grid-column: span 2; }
.showcase img { display: block; width: 100%; flex: 1 1 auto; min-height: 0;
  object-fit: cover; background: var(--paper-deep); }
.showcase figcaption { padding-top: 0.7rem; letter-spacing: 0; text-transform: none; }
.showcase .proj { display: block; font-size: 0.6875rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink); }
.showcase .what { display: block; margin-top: 0.3rem; font-size: 0.8125rem;
  font-weight: 400; color: var(--grey); max-width: 34em; }
@media (max-width: 760px) {
  .showcase { grid-template-columns: repeat(2, 1fr); }
  .showcase figure, .showcase figure.s2 { grid-column: span 2; }
}
@media (min-width: 761px) {
  .showcase img { aspect-ratio: 4 / 5; flex: none; }
}
/* rhythm: head owns the gap above the showcase; the license rule gets real air */
.section-head + .showcase { margin-top: 0; }
.showcase + .material-license { margin-top: clamp(2.25rem, 5vh, 3.25rem); }

/* ---------- spacing / small-print utilities ---------- */
/* Promoted out of per-page inline style attributes so the values live in one place. */
.section-flush { padding-top: 0; padding-bottom: 0; }
.mt   { margin-top: 1rem; }
.mt-lg { margin-top: clamp(2rem, 5vh, 3rem); }
.pt-lg { padding-top: clamp(2rem, 5vh, 3rem); }
.meta-note { font-size: 0.8125rem; color: var(--grey); margin-top: 1rem; }
.note-warm { color: var(--orange-deep); }
.note-dim  { color: var(--grey-dim); font-size: 0.9375rem; }  /* dark bands only — AA on --ink */

/* ---------- trusted-by: flowing marquee (overlaid on the hero) ---------- */

.hero-marquee {
  position: relative;
  padding: 1rem 0 1.25rem;
  border-top: 1px solid var(--hairline-light);
  background: linear-gradient(to top, rgba(20, 19, 17, 0.55), rgba(20, 19, 17, 0));
}

.hero-marquee .marquee-item { border-right-color: var(--hairline-light); }
.hero-marquee .marquee-item .name { color: #fff; }
.hero-marquee .marquee-item .meta { color: rgba(255, 255, 255, 0.72); }

.marquee {
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent);
}
.marquee::-webkit-scrollbar { display: none; }

.js .marquee { overflow: hidden; }

.marquee-track { display: flex; width: max-content; }
.js .marquee-track { animation: marquee 48s linear infinite; }
.js .marquee:hover .marquee-track,
.js .marquee:focus-within .marquee-track { animation-play-state: paused; }

.marquee-group {
  display: flex;
  align-items: baseline;
  margin: 0;
  padding: 0;
  list-style: none;
}

.marquee-item {
  display: inline-flex;
  align-items: baseline;
  gap: 0.65rem;
  padding: 0 2.5rem;
  white-space: nowrap;
  border-right: 1px solid var(--hairline);
}

.marquee-item .name { font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); }

.marquee-item .meta {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--grey);
}

@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .js .marquee { overflow-x: auto; }
  .js .marquee-track { animation: none; }}

/* ============================================================
   Redesign — drawing-sheet system: numbered plates, orange
   tread-line ("rib") seams, monument flagship photo, trajectory
   band, dark contact title-block. Orange = graphic accent only.
   ============================================================ */

/* --- orange tread-line seam (rib abstracted from the ribbed treads) --- */
.seam { height: 9px; position: relative; }
.seam::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--orange); }
.seam::after {
  content: "";
  position: absolute; left: 0; right: 0; top: 4px; height: 5px;
  background: repeating-linear-gradient(90deg, var(--orange) 0 1px, transparent 1px 8px);
  opacity: 0.4;
}

/* --- plate index (drawing-sheet numbering) --- */
.plate { margin-bottom: clamp(2rem, 5vh, 3.5rem); }
.plate .num {
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.16em;
  color: var(--orange-deep); font-variant-numeric: tabular-nums;
  display: inline-flex; align-items: center; gap: 0.5rem; margin-bottom: 1rem;
}
.plate .num::before { content: ""; width: 7px; height: 7px; background: var(--orange); flex: none; }
.plate h2 { font-size: var(--size-section); max-width: 16em; }

/* --- capabilities + material (merged index) --- */
/* §01 band: copy beside the Telus section drawing (synthesized, dimension-true) */
/* §01 pane toggle — two large tabs, an even pair centred on the page axis,
   the split landing exactly on the centreline (per Theo's annotation 08-08) */
.cap-tabs { display: grid; grid-template-columns: 1fr 1fr; max-width: 52rem;
  margin: 0 auto clamp(2.75rem, 6vh, 4.25rem);
  border-bottom: 1px solid var(--hairline); }
.cap-tabs [role="tab"] { appearance: none; background: none; border: 0; cursor: pointer;
  font: inherit; font-size: clamp(1.0625rem, 1.7vw, 1.375rem); font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--grey);
  text-align: center; padding: 1.2rem 0 1.25rem;
  border-bottom: 3px solid transparent; margin-bottom: -1px;
  transition: color 0.15s ease, border-color 0.15s ease; }
.cap-tabs [role="tab"]:hover { color: var(--ink); }
.cap-tabs [role="tab"][aria-selected="true"] { color: var(--ink); border-bottom-color: var(--orange); }
html:not(.js) .cap-tabs { display: none; }

/* incoming pane rises in; instant under reduced motion */
.js [role="tabpanel"]:not([hidden]) { animation: pane-in 0.45s var(--ease-out) both; }
@keyframes pane-in { from { opacity: 0; transform: translateY(10px); } }
@media (prefers-reduced-motion: reduce) { .js [role="tabpanel"]:not([hidden]) { animation: none; } }
@media (max-width: 480px) {
  .cap-tabs [role="tab"] { font-size: 0.875rem; letter-spacing: 0.08em; padding: 0.95rem 0 1rem; }}

.cap-band { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  /* start, not center: both §01 panes must open with their plate heading at
     the same height, or the tab toggle jumps (Theo, 08-08) */
  align-items: start; }
/* Orca Masonry partner lockup beside the StepClad quote CTAs — trademark
   display, nod through Corey with the photos (CQ 13 #2) */
.btn-orca { display: inline-flex; align-items: center; gap: 0.9rem; }
.btn-orca img { height: 1.35rem; width: auto; display: block; }
.btn-orca .lg-light { display: none; }
.btn-orca:hover .lg-dark { display: none; }
.btn-orca:hover .lg-light { display: block; }

/* cap tall pane figures so a portrait image can't tower over the text column */
.cap-draw img { max-height: 36rem; width: 100%; object-fit: cover; }
@media (max-width: 880px) { .cap-band { grid-template-columns: 1fr; } }
.cap-draw { margin: 0; min-width: 0; }
.cap-draw svg, .cap-draw img { display: block; width: 100%; height: auto; }
.cap-draw figcaption { font-size: 0.8125rem; color: var(--grey); padding-top: 0.75rem;
  max-width: 44em; }
.cap-draw .dwg-cred { display: block; margin-top: 0.3rem; font-size: 0.75rem;
  letter-spacing: 0.06em; text-transform: uppercase; }
/* drawing line-work */
.dwg-ink   { stroke: var(--ink); fill: none; stroke-width: 2.5; }
.dwg-tread { stroke: var(--orange); fill: none; stroke-width: 5.5; }
.dwg-rail  { stroke: var(--ink); fill: none; stroke-width: 1.8; }
.dwg-soff  { stroke: var(--hairline); stroke-width: 1.5; }
.dwg-post line { stroke: var(--grey-dim, #b9b4a8); stroke-width: 1; }
.dwg-datum { stroke: var(--grey); stroke-width: 1; stroke-dasharray: 10 8; opacity: 0.55; }
.dwg-dim line { stroke: var(--grey); stroke-width: 1; opacity: 0.8; }
.dwg-label { fill: var(--grey); font: 600 19px/1 "Helvetica Neue", Helvetica, Arial, sans-serif;
  letter-spacing: 0.08em; }
.dwg-level { fill: var(--ink); font: 700 21px/1 "Helvetica Neue", Helvetica, Arial, sans-serif;
  letter-spacing: 0.1em; }
/* the drawing draws itself in when revealed; static under reduced motion */
.js .cap-draw .draw { stroke-dasharray: 1; stroke-dashoffset: 1; }
.cap-draw.in .draw { stroke-dashoffset: 0; transition: stroke-dashoffset 1.7s ease 0.25s; }
.cap-draw.in .dwg-tread.draw { transition-delay: 0.9s; transition-duration: 1.4s; }
@media (prefers-reduced-motion: reduce) {
  .js .cap-draw .draw { stroke-dashoffset: 0; transition: none; } }
.cap-material p { color: var(--ink-soft); font-size: 0.9375rem; }
/* outbound links on the dark Telus band — orange reads poorly on --ink, so these
   use the light accent with a hairline underline instead */
.to-links { margin-top: 1.5rem; display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; }
.to-links a { font-size: 0.9375rem; color: var(--orange); text-decoration: none;
  border-bottom: 1px solid rgba(246, 137, 47, 0.4); padding-bottom: 1px; }
.to-links a:hover { border-bottom-color: var(--orange); }
.band-dark .spec-sheet dt { color: var(--grey-dim); }

/* visible scope caveat on an uncleared section — must survive a screenshot */
.ap-note { margin-top: 1.25rem; padding-left: 0.85rem; border-left: 3px solid var(--orange);
  font-size: 0.9375rem; color: var(--orange-deep); }

/* §01 is now a feature-stairs pitch: the material credential rides as an inline
   claim under the capability list rather than a display number above it */
.cap-material-note { margin-top: clamp(1.75rem, 4vh, 2.5rem); padding-top: 1.25rem;
  border-top: 1px solid var(--hairline); font-size: 0.9375rem; color: var(--ink-soft);
  max-width: 34em; }
.note-lead { font-size: 1.125rem; font-weight: 600; letter-spacing: -0.01em;
  color: var(--ink); margin-right: 0.15rem; }
.cap-more { margin-top: 1rem; font-size: 0.9375rem; color: var(--grey); max-width: 34em; }
.cap-more a { color: var(--orange-deep); text-decoration: none; border-bottom: 1px solid var(--hairline); }
.cap-more a:hover { border-bottom-color: var(--orange-deep); }

/* .cap-material p (0,1,1) outranked .lede (0,1,0), so §01's opening paragraph
   rendered at body size with no type step — re-assert it at higher specificity */
.cap-material p.lede { font-size: clamp(1.125rem, 1.6vw, 1.375rem); line-height: 1.45; }

/* the three capability points, full width in a 3-across row (was a vertical list
   inside the text column, which forced that column tall and orphaned the visual) */
.cap-points { display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 3vw, 3rem); margin-top: clamp(2.5rem, 6vh, 4rem);
  padding-top: clamp(1.75rem, 4vh, 2.5rem); border-top: 1px solid var(--ink); }
@media (max-width: 860px) {
  .cap-points { grid-template-columns: 1fr; gap: 2rem; }
  /* the row is one column here, so cap the measure or it runs to ~82 characters */
  .cap-point p { max-width: 40em; }}
.cap-point .idx { display: block; font-size: 0.75rem; font-weight: 600; color: var(--orange-deep);
  font-variant-numeric: tabular-nums; margin-bottom: 0.75rem; }
.cap-point h3 { font-size: clamp(1.125rem, 1.8vw, 1.375rem); letter-spacing: -0.01em;
  margin-bottom: 0.6rem; }
.cap-point p { font-size: 0.9375rem; color: var(--ink-soft); max-width: none; }

/* case-study figure rows — was duplicated in the heritage and design-assist page
   <style> blocks, and design-assist's copy was missing the .two modifier it uses,
   so those rows silently rendered single-column */
.case-figs { display: grid; gap: var(--grid-gap); margin-top: clamp(2rem, 5vh, 3.25rem); }
.case-figs.two { grid-template-columns: 1fr 1fr; align-items: start; }
@media (max-width: 700px) { .case-figs.two { grid-template-columns: 1fr; }}
.case-figs figure { margin: 0; }
.case-figs img { display: block; width: 100%; height: auto; background: var(--paper-deep); }
.case-figs figcaption { font-size: 0.8125rem; letter-spacing: 0; text-transform: none;
  font-weight: 400; color: var(--grey); padding-top: 0.6rem; max-width: 44em; }
/* attribution line under someone else's drawing — quieter than the caption it follows */
.case-figs figcaption .credit { display: inline-block; margin-top: 0.35rem;
  font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--grey); }
/* engineering drawings mount as document plates — white sheet, hairline frame */
.img-plate { background: #fff; border: 1px solid var(--hairline); padding: clamp(0.75rem, 2.5vw, 1.5rem); }
.case-figs img.img-plate { width: auto; max-width: 100%; margin: 0 auto; }
.material-figures .fig-wide { grid-column: 1 / -1; }

/* the two Perkins&Will frames, full width beneath the grid */
.cap-proof-row { display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--grid-gap); margin-top: clamp(2.5rem, 6vh, 4rem); align-items: start; }
@media (max-width: 700px) { .cap-proof-row { grid-template-columns: 1fr; }}
/* the pair has slightly different source ratios (1.25 vs 1.33), which left the two
   captions 28px out of line — normalise to a shared 5:4 so they sit level */
.cap-proof-row .cap-proof img { aspect-ratio: 5 / 4; object-fit: cover; }

.cap-proof { margin: 0; }
.cap-proof img { display: block; width: 100%; height: auto; background: var(--paper-deep);
  border: 1px solid var(--hairline); }
.cap-proof figcaption { font-size: 0.8125rem; letter-spacing: 0; text-transform: none;
  font-weight: 400; color: var(--grey); padding-top: 0.6rem; }

/* --- monument (full-bleed flagship photo) --- */
.monument { padding-top: var(--section); }
.monument .plate { margin-bottom: clamp(1.5rem, 4vh, 2.5rem); }
.monument-figure {
  position: relative; width: 100%; background: var(--ink);
  height: clamp(24rem, 66vh, 42rem);
  overflow: hidden; isolation: isolate;
}
.monument-figure img { width: 100%; height: 100%; object-fit: cover; }
.monument-figure::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top,
    rgba(20,19,17,0.80) 0%, rgba(20,19,17,0.55) 18%,
    rgba(20,19,17,0.25) 38%, rgba(20,19,17,0.06) 58%,
    rgba(20,19,17,0.10) 80%, rgba(20,19,17,0.16) 100%);
}
.monument-caption { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; color: #fff; padding-bottom: clamp(1.75rem, 4vh, 2.75rem); }
.monument-caption .btn { color: #fff; border-color: rgba(255,255,255,0.55); }
.monument-caption .spec {
  display: flex; flex-wrap: wrap; gap: 0.5rem 2.5rem; margin-top: 1.5rem;
  padding-top: 1.1rem; border-top: 1px solid rgba(255,255,255,0.22);
  font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(255,255,255,0.85); font-variant-numeric: tabular-nums;
}
.monument-caption .spec .k { color: var(--orange); margin-right: 0.5rem; }

/* --- trajectory band (vision roadmap) --- */
.trajectory-row { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--ink); }
.traj-step { padding: 1.5rem 1.25rem 1.75rem 0; border-bottom: 1px solid var(--hairline); }
.traj-step .n { font-size: 0.75rem; font-weight: 600; color: var(--orange-deep); font-variant-numeric: tabular-nums; display: block; margin-bottom: 1.75rem; }
.traj-step h3 { font-size: clamp(1.125rem, 2vw, 1.375rem); letter-spacing: -0.01em; }
.trajectory .vision-line { margin-top: 2rem; max-width: 40em; color: var(--ink-soft); }
@media (max-width: 700px) { .trajectory-row { grid-template-columns: 1fr 1fr; }}

/* --- contact / footer title-block (dark closing) --- */
.contact-block { position: relative; overflow: hidden; }
.contact-block .mark-ghost {
  position: absolute; right: -7%; top: 46%; transform: translateY(-50%);
  width: clamp(15rem, 36vw, 32rem); opacity: 0.1; pointer-events: none; z-index: 0;
}
.contact-block .inner { position: relative; z-index: 1; }
.site-footer.contact-block { padding-top: 0; }
.contact-cta { padding-top: clamp(3rem, 7vh, 5.5rem); padding-bottom: clamp(3rem, 7vh, 4.5rem); border-bottom: 1px solid var(--hairline-light); margin-bottom: clamp(2.5rem, 6vh, 4rem); }
.contact-cta .kicker { color: var(--orange); }
.contact-cta h2 { font-size: var(--size-close); letter-spacing: -0.02em; line-height: 1.03; max-width: 13em; margin-bottom: 1.5rem; }
.contact-cta .lede { color: rgba(243, 241, 237, 0.75); margin-bottom: 2.25rem; }
.contact-cta .alt-contact { margin-top: 1.75rem; font-size: 0.9375rem; color: var(--grey-dim); }
.contact-cta .alt-contact a { color: rgba(243, 241, 237, 0.9); }

.btn-orange { background: var(--orange); border-color: var(--orange); color: var(--ink); }
.btn-orange:hover { background: #fff; border-color: #fff; color: var(--ink); }

/* ---------- cross-document view transitions (progressive enhancement) ---------- */
@view-transition { navigation: auto; }
.site-header { view-transition-name: site-header; }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}

/* ---------- entrance — hero settles on load (JS-gated) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js .hero .hero-img { animation: hero-img-settle 1.6s var(--ease-out) both; }
  .js .hero .kicker, .js .hero h1, .js .hero .lede, .js .hero .hero-cta,
  .js .hero .photo-credit,
  .js .page-hero .kicker, .js .page-hero h1, .js .page-hero .lede {
    animation: hero-rise 0.7s var(--ease-out) both;
  }
  .js .hero h1, .js .page-hero h1 { animation-delay: 0.08s; }
  .js .hero .lede, .js .page-hero .lede { animation-delay: 0.16s; }
  .js .hero .hero-cta { animation-delay: 0.24s; }
  .js .hero .photo-credit { animation-delay: 0.32s; }
}
@keyframes hero-rise { from { opacity: 0; transform: translateY(16px); } }
@keyframes hero-img-settle { from { transform: scale(1.035); } }

/* ---------- deep-link arrival — the tread-line draws across the target ---------- */
section[id]:target { position: relative; }
section[id]:target::before {
  content: ""; position: absolute; top: -1px; left: 0; right: 0; height: 2px;
  background: var(--orange); transform-origin: left; z-index: 1;
}
@media (prefers-reduced-motion: no-preference) {
  section[id]:target::before { animation: target-draw 0.9s var(--ease-out) 0.2s both; }
}
@keyframes target-draw { from { transform: scaleX(0); } }

/* ---------- every quiet link eases instead of snapping ---------- */
.backlink, .to-links a, .cap-more a, .site-footer a, .ct-aside a {
  transition: color 0.2s ease, border-color 0.2s ease; }
.backlink .lbl { transition: border-color 0.2s ease; }

/* linked figure images share the card zoom (StepClad before/after on home) */
.cap-draw a { display: block; overflow: hidden; }
.cap-draw a img { transition: transform 0.7s var(--ease-out); }
.cap-draw a:hover img, .cap-draw a:focus-visible img { transform: scale(1.02); }
@media (prefers-reduced-motion: reduce) {
  .cap-draw a:hover img, .cap-draw a:focus-visible img { transform: none; }
}