/* ============================================================
   AXION — construction group
   Ariana CMS theme · brand: Nim Studio 2025
   Palette from the brand book: #FF5611 / #000000 / #5D5D5C
   ============================================================ */

/* ---------- Font (self-hosted, variable 300–900) ---------- */
@font-face {
  font-family: 'Figtree';
  src: url('../fonts/figtree-var.woff2?v=183818') format('woff2-variations');
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  --accent: #FF5611;          /* brand main color */
  --accent-deep: #b83c05;     /* gradient tail, from the container livery */
  --black: #000000;           /* brand black */
  --ink: #0b0b0c;             /* primary dark surface */
  --ink-2: #131315;           /* raised dark surface */
  --steel: #5d5d5c;           /* brand gray */
  --fog: #a3a3a1;             /* muted copy on dark */
  --white: #ffffff;
  --paper: #ebecec;           /* light band, echoes the book's white pages */
  --line: rgba(255, 255, 255, .12);
  --line-strong: rgba(255, 255, 255, .24);
  --paper-line: rgba(11, 11, 12, .14);

  --font: 'Figtree', 'Avenir', 'Avenir Next', system-ui, sans-serif;

  /* Header, footer and page content all share one measure, so every element
     lines up on the same vertical rule at any viewport width. */
  --w-main: 1240px;
  --w-wide: var(--w-main);
  --w-text: 760px;
  --gutter: clamp(1.25rem, 4vw, 3.5rem);

  --ease-out: cubic-bezier(.19, 1, .22, 1);
  --dur: .9s;

  --header-h: 84px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-weight: 400;
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--white);
  background: var(--ink);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
::selection { background: var(--accent); color: var(--white); }

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

.skip-link {
  position: fixed; top: -100%; left: 1rem; z-index: 200;
  background: var(--accent); color: var(--white);
  padding: .6rem 1.1rem; font-weight: 700; border-radius: 0 0 6px 6px;
  transition: top .2s;
}
.skip-link:focus { top: 0; }

/* ---------- Shared layout ---------- */
@media (min-width: 1600px) { :root { --w-main: 1380px; } }
@media (min-width: 2000px) { :root { --w-main: 1520px; } }
@media (min-width: 2400px) { :root { --w-main: 1660px; } }

.wrap       { width: min(var(--w-main), 100% - var(--gutter) * 2); margin-inline: auto; }
.wrap--wide { width: min(var(--w-wide), 100% - var(--gutter) * 2); margin-inline: auto; }
.wrap--text { width: min(var(--w-text), 100% - var(--gutter) * 2); margin-inline: auto; }

.section { padding-block: clamp(4.5rem, 10vw, 9rem); position: relative; }
.section--flush-top { padding-top: 0; }

/* Eyebrow: the brand's small orange dash + spaced caps, everywhere in the book */
.eyebrow {
  display: flex; align-items: center; gap: .8rem;
  font-size: .72rem; font-weight: 700;
  letter-spacing: .26em; text-transform: uppercase;
  color: var(--fog);
  margin-bottom: 1.4rem;
}
.eyebrow::before {
  content: ''; width: 26px; height: 3px; background: var(--accent); flex: none;
}
.on-paper .eyebrow { color: var(--steel); }

/* Display type */
.display {
  font-weight: 800;
  font-size: clamp(2.1rem, 7.2vw, 6.8rem);
  line-height: .98;
  letter-spacing: -.025em;
  text-transform: uppercase;
}
.h2 {
  font-weight: 800;
  font-size: clamp(1.9rem, 4.2vw, 3.4rem);
  line-height: 1.04;
  letter-spacing: -.02em;
  text-transform: uppercase;
}
.h3 {
  font-weight: 700;
  font-size: clamp(1.2rem, 2vw, 1.5rem);
  line-height: 1.2;
}
.lede {
  font-size: clamp(1.15rem, 1.8vw, 1.45rem);
  line-height: 1.55;
  font-weight: 350;
  color: var(--fog);
  max-width: 46ch;
}
.on-paper .lede { color: var(--steel); }
.accent { color: var(--accent); }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: .7rem;
  padding: 1rem 1.9rem;
  font-weight: 700; font-size: .95rem; letter-spacing: .04em;
  background: var(--accent); color: var(--white);
  border: 1px solid var(--accent);
  transition: background .25s, border-color .25s, transform .25s var(--ease-out);
}
.btn svg { transition: transform .25s var(--ease-out); }
.btn:hover { background: #e64a0c; border-color: #e64a0c; }
.btn:hover svg { transform: translateX(4px); }
.btn--ghost { background: transparent; border-color: var(--line-strong); }
.btn--ghost:hover { background: transparent; border-color: var(--accent); color: var(--accent); }
.on-paper .btn--ghost { border-color: var(--paper-line); color: var(--ink); }
.on-paper .btn--ghost:hover { border-color: var(--accent); color: var(--accent); }

.text-link {
  display: inline-flex; align-items: center; gap: .5rem;
  font-weight: 700; font-size: .95rem;
  color: var(--accent);
}
.text-link svg { transition: transform .25s var(--ease-out); }
.text-link:hover svg { transform: translateX(4px); }

/* ============================================================
   Header
   ============================================================ */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  height: var(--header-h);
  display: flex; align-items: center;
  transition: background .35s, border-color .35s, height .35s;
  border-bottom: 1px solid transparent;
}
.site-header.is-solid {
  background: rgba(9, 9, 10, .82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: var(--line);
  height: 68px;
}
.site-header .wrap--wide {
  display: flex; align-items: center; justify-content: space-between; gap: 2rem;
}

.brand { display: inline-flex; align-items: center; gap: .9rem; }
.brand__logo, .brand__custom { height: 30px; width: auto; display: block; }
.brand__custom { max-height: 34px; width: auto; }

/* Nav — styles Ariana's .menu markup */
.site-nav { display: flex; align-items: center; gap: 2.2rem; }
.site-nav .menu {
  display: flex; gap: 2rem; margin: 0; padding: 0; list-style: none;
}
.site-nav .menu li { position: relative; }
.site-nav .menu a {
  display: inline-block; padding: .4rem 0;
  font-size: .95rem; font-weight: 600; color: var(--white);
  position: relative;
}
.site-nav .menu a::after {
  content: ''; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 2px; background: var(--accent);
  transform: scaleX(0); transform-origin: left;
  transition: transform .3s var(--ease-out);
}
.site-nav .menu a:hover::after,
.site-nav .menu a[aria-current="page"]::after { transform: scaleX(1); }
.site-nav .menu .menu__submenu {
  position: absolute; top: 100%; left: -1rem; min-width: 220px;
  padding: .6rem 0; margin: 0; list-style: none;
  background: var(--ink-2); border: 1px solid var(--line);
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .25s, transform .25s, visibility .25s;
}
.site-nav .menu li:hover > .menu__submenu,
.site-nav .menu li:focus-within > .menu__submenu {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.site-nav .menu .menu__submenu a { display: block; padding: .5rem 1.2rem; }
.site-nav .menu .menu__submenu a::after { display: none; }
.site-nav .menu .menu__submenu a:hover { color: var(--accent); }
.header-cta { flex: none; }

/* Mobile nav */
.nav-toggle {
  display: none;
  width: 44px; height: 44px; padding: 0;
  background: none; border: 0; cursor: pointer;
  flex-direction: column; align-items: center; justify-content: center; gap: 6px;
}
.nav-toggle span {
  width: 24px; height: 2px; background: var(--white);
  transition: transform .3s var(--ease-out), opacity .2s;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

@media (max-width: 899px) {
  .nav-toggle { display: flex; }
  .header-cta { display: none; }
  .site-nav {
    position: fixed; inset: 0; z-index: -1;
    background: var(--black);
    flex-direction: column; justify-content: center;
    opacity: 0; visibility: hidden; transition: opacity .35s, visibility .35s;
  }
  .site-header.nav-open .site-nav { opacity: 1; visibility: visible; }
  .site-header.nav-open { background: var(--black); }
  .site-nav .menu { flex-direction: column; align-items: center; gap: 1.4rem; }
  .site-nav .menu a { font-size: 1.6rem; font-weight: 700; text-transform: uppercase; }
  .site-nav .menu .menu__submenu {
    position: static; opacity: 1; visibility: visible; transform: none;
    background: none; border: 0; text-align: center;
  }
  .site-nav .menu .menu__submenu a { font-size: 1rem; text-transform: none; color: var(--fog); }
}

/* ============================================================
   Hero
   ============================================================ */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: calc(var(--header-h) + 4rem) 0 0;
  background:
    radial-gradient(120% 90% at 85% 0%, rgba(255, 86, 17, .14), transparent 55%),
    var(--ink);
  overflow: clip;
}
.hero__slashes {
  position: absolute; top: 0; right: -6%; height: 118%; width: auto;
  opacity: .9; pointer-events: none;
  will-change: transform;
}
.hero__grid {
  position: absolute; inset: 0;
  background-image: url('../img/blueprint-grid.svg?v=183818');
  background-size: 640px;
  opacity: .35;
  mask-image: linear-gradient(to bottom, transparent, #000 30%, transparent 95%);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 30%, transparent 95%);
  pointer-events: none;
}
.hero__inner { position: relative; z-index: 2; padding-bottom: clamp(3rem, 7vh, 6rem); }
.hero__kicker { margin-bottom: 2rem; }
.hero__title { max-width: 12ch; }
.hero__title .line { display: block; overflow: hidden; }
.hero__title .line > span {
  display: block;
  transform: translateY(110%);
  animation: hero-rise 1.1s var(--ease-out) forwards;
}
.hero__title .line:nth-child(2) > span { animation-delay: .12s; }
.hero__title .line:nth-child(3) > span { animation-delay: .24s; color: var(--accent); }
@keyframes hero-rise { to { transform: translateY(0); } }

.hero__foot {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 2.5rem; margin-top: clamp(2.2rem, 4vh, 3.6rem);
  animation: hero-fade 1s .55s var(--ease-out) both;
}
@keyframes hero-fade { from { opacity: 0; transform: translateY(16px); } }
.hero__lede { max-width: 52ch; }
.hero__scroll {
  display: inline-flex; align-items: center; gap: .8rem; flex: none;
  font-size: .72rem; font-weight: 700; letter-spacing: .26em; text-transform: uppercase;
  color: var(--fog);
}
.hero__scroll i {
  width: 1px; height: 56px; background: var(--line-strong);
  position: relative; overflow: hidden; display: block;
}
.hero__scroll i::after {
  content: ''; position: absolute; inset: 0;
  background: var(--accent);
  transform: translateY(-100%);
  animation: scroll-drip 2.2s ease-in-out infinite;
}
@keyframes scroll-drip { 60% { transform: translateY(100%); } 100% { transform: translateY(100%); } }

/* Ticker */
.ticker {
  position: relative; z-index: 2;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: rgba(0, 0, 0, .4);
  overflow: hidden;
  padding-block: 1rem;
}
.ticker__track {
  display: flex; gap: 4rem; width: max-content;
  animation: ticker 36s linear infinite;
}
.ticker:hover .ticker__track { animation-play-state: paused; }
@keyframes ticker { to { transform: translateX(-50%); } }
.ticker__item {
  display: inline-flex; align-items: center; gap: 4rem; white-space: nowrap;
  font-size: .82rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  color: var(--fog);
}
.ticker__item b { color: var(--white); font-weight: 800; }
.ticker__item::after { content: '//'; color: var(--accent); font-weight: 800; letter-spacing: 0; }

/* ============================================================
   Statement (the "axis" manifesto)
   ============================================================ */
.statement__quote {
  font-size: clamp(1.5rem, 3.4vw, 2.7rem);
  line-height: 1.3; font-weight: 350; letter-spacing: -.01em;
  max-width: 26ch;
}
.statement__quote strong { font-weight: 800; color: var(--accent); }
.statement { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
@media (min-width: 900px) {
  .statement { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: end; gap: 5rem; }
}
.statement__aside { color: var(--fog); max-width: 40ch; }
.statement__aside p + p { margin-top: 1rem; }

/* ============================================================
   Capabilities
   ============================================================ */
.caps { border-top: 1px solid var(--line); }
.caps__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1.5rem; margin-bottom: clamp(2.5rem, 5vw, 4.5rem); }
.caps__grid {
  display: grid; grid-template-columns: minmax(0, 1fr); border-top: 1px solid var(--line);
}
@media (min-width: 720px)  { .caps__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (min-width: 1100px) { .caps__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.cap {
  padding: 2.2rem 1.8rem 2.6rem;
  border-bottom: 1px solid var(--line);
  border-right: 1px solid var(--line);
  position: relative;
  transition: background .35s;
}
.cap:hover { background: rgba(255, 86, 17, .05); }
.caps__grid .cap:first-child { border-left: 1px solid var(--line); }
@media (max-width: 719px) { .caps__grid .cap { border-left: 1px solid var(--line); } }
@media (min-width: 720px) and (max-width: 1099px) {
  .caps__grid .cap:nth-child(odd) { border-left: 1px solid var(--line); }
}
.cap__num {
  font-size: .78rem; font-weight: 700; letter-spacing: .2em;
  color: var(--accent); margin-bottom: 2.6rem; display: block;
}
.cap__title { margin-bottom: .9rem; text-transform: uppercase; letter-spacing: .02em; }
.cap__body { color: var(--fog); font-size: .98rem; }
.cap::after {
  content: ''; position: absolute; left: 0; bottom: -1px;
  width: 100%; height: 2px; background: var(--accent);
  transform: scaleX(0); transform-origin: left;
  transition: transform .45s var(--ease-out);
}
.cap:hover::after { transform: scaleX(1); }

/* ============================================================
   Scrollytelling — the axis line builds a truss
   ============================================================ */
.scrolly {
  background: var(--paper); color: var(--ink);
  background-image: url('../img/blueprint-grid-dark.svg?v=183818');
  background-size: 640px;
}
.scrolly__intro { padding-top: clamp(4.5rem, 10vw, 8rem); margin-bottom: clamp(2rem, 5vh, 4rem); }
.scrolly__layout {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 3rem;
  padding-bottom: clamp(4.5rem, 10vw, 8rem);
}
@media (min-width: 980px) {
  .scrolly__layout { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 5rem; }
}
.scrolly__sticky {
  position: sticky; top: calc(var(--header-h) + 2vh);
  align-self: start;
  padding-block: 1rem;
}
@media (max-width: 979px) {
  /* The header shrinks from --header-h to 68px once scrolled, so any fixed
     top offset leaves a strip where the step text shows through. Pinning to 0
     and padding the panel instead means the cover is always continuous,
     whatever height the header currently is. */
  .scrolly__sticky {
    top: 0;
    padding-top: calc(var(--header-h) + .75rem);
    padding-bottom: 1rem;
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    background: var(--paper);
    z-index: 3;
    border-bottom: 1px solid var(--paper-line);
  }
  /* Keep the drawing compact so the copy beside it stays on screen. */
  .scrolly__sticky .truss { max-height: 34vh; width: auto; max-width: 100%; margin-inline: auto; display: block; }
  .scrolly__layout { gap: 1.5rem; }
}
.truss { width: 100%; height: auto; }
.truss .truss-stroke {
  fill: none; stroke: var(--ink); stroke-width: 2.5;
  stroke-linecap: square;
}
.truss .truss-accent { stroke: var(--accent); stroke-width: 3.5; }
.truss .truss-node { fill: var(--accent); opacity: 0; transition: opacity .4s; }
.truss.is-done .truss-node { opacity: 1; }
.scrolly__progress {
  display: flex; align-items: center; gap: 1rem; margin-top: 1.4rem;
  font-size: .72rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--steel);
}
.scrolly__bar { flex: 1; height: 2px; background: var(--paper-line); position: relative; }
.scrolly__bar i {
  position: absolute; inset: 0; background: var(--accent);
  transform: scaleX(0); transform-origin: left;
}

.scrolly__steps { display: flex; flex-direction: column; }
.step {
  padding: clamp(2.4rem, 6vh, 4rem) 0 clamp(2.4rem, 6vh, 4rem) 2rem;
  border-left: 2px solid var(--paper-line);
  position: relative;
  opacity: .35;
  transition: opacity .45s;
}
@media (min-width: 980px) {
  /* Each stage owns a generous slice of scroll, so the copy is on screen
     and fully legible for its whole reading length before the next stage
     takes over. */
  .step { min-height: 58vh; display: flex; flex-direction: column; justify-content: center; }
  .step:first-child { min-height: 46vh; }
}
.step.is-active { opacity: 1; }
.step.is-done { opacity: .62; }
.step::before {
  content: ''; position: absolute; left: -2px; top: 0;
  width: 2px; height: 100%; background: var(--accent);
  transform: scaleY(0); transform-origin: top;
  transition: transform .5s var(--ease-out);
}
.step.is-active::before { transform: scaleY(1); }
.step__num {
  font-size: .78rem; font-weight: 700; letter-spacing: .2em; color: var(--accent);
  display: block; margin-bottom: .8rem;
}
.step__title { text-transform: uppercase; margin-bottom: .8rem; }
.step__body { color: var(--steel); max-width: 42ch; }

/* ============================================================
   Projects
   ============================================================ */
.projects__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1.5rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.project-grid { display: grid; gap: 1.5rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px) { .project-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.project-card {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 420px; padding: 2.2rem;
  background:
    linear-gradient(to top, rgba(0, 0, 0, .78) 0%, rgba(0, 0, 0, .18) 55%, rgba(0, 0, 0, .05)),
    var(--card-bg, var(--ink-2));
  border: 1px solid var(--line);
  overflow: clip;
  transition: border-color .35s;
}
.project-card:hover { border-color: var(--accent); }
.project-card__art {
  position: absolute; inset: 0; z-index: 0;
  background-image: url('../img/truss-pattern.svg?v=183818');
  background-size: 420px;
  opacity: .5;
  transition: transform .8s var(--ease-out), opacity .35s;
}
.project-card:hover .project-card__art { transform: scale(1.05); opacity: .75; }
.project-card--tall { min-height: 540px; }
.project-card > * { position: relative; z-index: 1; }
.project-card__meta {
  display: flex; gap: 1rem; flex-wrap: wrap;
  font-size: .74rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: var(--fog); margin-bottom: .9rem;
}
.project-card__meta b { color: var(--accent); font-weight: 700; }
.project-card__title {
  font-size: clamp(1.5rem, 2.6vw, 2.2rem); font-weight: 800;
  text-transform: uppercase; letter-spacing: -.01em; line-height: 1.05;
  margin-bottom: .7rem;
}
.project-card__body { color: var(--fog); font-size: .96rem; max-width: 52ch; }

/* Project detail rows (projects page) */
.project-row {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem;
  padding-block: clamp(2.8rem, 6vw, 4.5rem);
  border-top: 1px solid var(--line);
}
@media (min-width: 900px) {
  .project-row { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 4rem; }
}
.project-row__facts { display: flex; flex-direction: column; gap: 1.1rem; align-content: start; }
.fact { border-left: 2px solid var(--accent); padding-left: 1rem; }
.fact dt { font-size: .72rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--fog); }
.fact dd { margin: .15rem 0 0; font-weight: 700; font-size: 1.05rem; }
.project-row__body { color: var(--fog); }
.project-row__body p + p { margin-top: 1rem; }
.project-row__title { margin-bottom: 1.2rem; }

/* ============================================================
   Legacy band / counters
   ============================================================ */
.legacy {
  background: var(--black);
  background-image: url('../img/truss-pattern.svg?v=183818');
  background-size: 520px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.legacy__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2.5rem 1.5rem; }
@media (min-width: 900px) { .legacy__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.stat__value {
  font-size: clamp(2.6rem, 5.6vw, 4.6rem);
  font-weight: 800; letter-spacing: -.02em; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.stat__value small { font-size: .45em; font-weight: 700; color: var(--accent); margin-left: .1em; }
.stat__label { margin-top: .6rem; font-size: .8rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--fog); }

/* ============================================================
   CTA band
   ============================================================ */
.cta {
  position: relative; overflow: clip;
  background: linear-gradient(118deg, var(--accent-deep), var(--accent) 65%);
}
.cta .eyebrow { color: rgba(255, 255, 255, .85); }
.cta .eyebrow::before { background: var(--white); }
.cta__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2.5rem; }
.cta__title { max-width: 16ch; }
.cta .btn { background: var(--black); border-color: var(--black); }
.cta .btn:hover { background: var(--white); border-color: var(--white); color: var(--black); }
.cta__slashes { position: absolute; right: -4%; top: -20%; height: 150%; width: auto; opacity: .25; pointer-events: none; }

/* ============================================================
   Page hero (inner pages)
   ============================================================ */
.page-hero {
  padding: calc(var(--header-h) + clamp(4rem, 10vh, 7rem)) 0 clamp(3rem, 7vh, 5rem);
  border-bottom: 1px solid var(--line);
  position: relative; overflow: clip;
  background:
    radial-gradient(100% 120% at 90% -10%, rgba(255, 86, 17, .13), transparent 55%),
    var(--ink);
}
.page-hero__slashes { position: absolute; top: -10%; right: -4%; height: 130%; width: auto; opacity: .5; pointer-events: none; }
.page-hero__inner { position: relative; z-index: 1; }
.page-hero .lede { margin-top: 1.6rem; }

/* ============================================================
   Content prose (articles, static copy)
   ============================================================ */
.prose { color: #d6d6d4; overflow-wrap: break-word; }
.prose pre { max-width: 100%; }
.prose table { display: block; overflow-x: auto; }
.prose h2, .prose h3, .prose h4 { color: var(--white); font-weight: 800; line-height: 1.15; margin: 2.4em 0 .7em; letter-spacing: -.01em; }
.prose h2 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); }
.prose h3 { font-size: clamp(1.2rem, 2vw, 1.5rem); }
.prose p, .prose ul, .prose ol { margin-block: 1.1em; }
.prose li { margin-block: .4em; }
.prose a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.prose img { margin-block: 2em; border: 1px solid var(--line); }
.prose blockquote {
  margin: 2em 0; padding: 1.2em 1.6em;
  border-left: 3px solid var(--accent);
  background: var(--ink-2);
  font-size: 1.1em; font-weight: 350;
}
.prose figure figcaption { font-size: .85rem; color: var(--fog); margin-top: .6rem; }
.prose hr { border: 0; border-top: 1px solid var(--line); margin: 3em 0; }
.prose table { width: 100%; border-collapse: collapse; margin-block: 2em; font-size: .95rem; }
.prose th, .prose td { border: 1px solid var(--line); padding: .7em .9em; text-align: left; }
.prose th { background: var(--ink-2); }
.prose code { background: var(--ink-2); border: 1px solid var(--line); padding: .1em .4em; border-radius: 4px; font-size: .9em; }
.prose pre { background: var(--black); border: 1px solid var(--line); padding: 1.2em; overflow-x: auto; }
.prose pre code { background: none; border: 0; padding: 0; }

/* Ariana summary box, restyled (its own rules are zero-specificity) */
.ariana-summary {
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: 0;
  padding: 1.4rem 1.6rem;
  margin-block: 2rem;
}
.ariana-summary__title {
  font-size: .74rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase;
  color: var(--accent);
}
.ariana-summary__text, .ariana-summary__list { color: #d6d6d4; }

/* Ariana author box */
.ariana-author-box {
  background: var(--ink-2); border: 1px solid var(--line);
  padding: 1.6rem; margin-top: 3rem;
}
.ariana-author-box__label { font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--fog); }
.ariana-author-box__name a { color: var(--white); font-weight: 800; }
.ariana-author-box__name a:hover { color: var(--accent); }
.ariana-author-box__bio { color: var(--fog); }
.ariana-author-box__more a { color: var(--accent); font-weight: 700; }

/* Table of contents */
/* Article layout: the block fills the site container exactly like every other
   page — no capped width, so its left and right edges match the header and
   footer at any viewport. Line length is kept readable by scaling the article's
   own type with the column rather than by narrowing the block. */
.post-layout {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: clamp(2.5rem, 5vw, 4rem);
  align-items: start;
  padding-bottom: clamp(3.5rem, 8vw, 6rem);
}
@media (min-width: 980px) {
  .post-layout {
    grid-template-columns: minmax(0, 1fr) clamp(240px, 21vw, 460px);
    column-gap: clamp(2.5rem, 4.5vw, 6rem);
  }
}
.post-main { min-width: 0; }
.post-main .prose,
.post-main .ariana-summary { font-size: clamp(1.0625rem, .85rem + .55vw, 1.7rem); }
.post-main .prose h2 { font-size: clamp(1.5rem, 1.05rem + 1.25vw, 3rem); }
.post-main .prose h3 { font-size: clamp(1.2rem, .95rem + .75vw, 2.1rem); }

.post-summary { margin-block: clamp(2rem, 4vw, 2.8rem); }
.post-summary .eyebrow { margin-bottom: .9rem; }
/* The theme supplies the "In short" label, so the box's own heading is hidden
   rather than repeating it. */
.post-summary .ariana-summary__title { display: none; }

.post-aside { min-width: 0; }
@media (min-width: 980px) {
  .post-aside { position: sticky; top: calc(var(--header-h) + 1.5rem); }
}
.toc-wrap { border: 1px solid var(--line); background: var(--ink-2); padding: clamp(1.4rem, 1.6vw, 2rem) clamp(1.5rem, 1.8vw, 2.2rem); font-size: clamp(.92rem, .86rem + .12vw, 1.05rem); }
.toc-wrap .eyebrow { margin-bottom: 1rem; }
.toc-wrap a:hover { color: var(--accent); }
.toc-wrap .toc__list { list-style: none; margin: 0; padding: 0; counter-reset: toc; }
.toc-wrap .toc__item { margin: 0; }
.toc-wrap .toc__item a {
  display: block; padding: .45rem 0;
  color: var(--fog); text-decoration: none;
  border-left: 2px solid transparent; padding-left: .9rem;
  transition: color .3s, border-color .3s;
  line-height: 1.45;
}
.toc-wrap .toc__item a:hover { color: var(--white); border-left-color: var(--accent); }
.toc-wrap .toc__item--h3 a { padding-left: 1.8rem; font-size: .86rem; }
.toc-wrap .toc__item--h4 a { padding-left: 2.6rem; font-size: .82rem; }

/* ============================================================
   Blog / archives
   ============================================================ */
.archive-head { margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.archive-head__desc { color: var(--fog); max-width: 60ch; margin-top: 1rem; }
.archive-head__desc p { margin: 0; }
.post-grid { display: grid; gap: 1.5rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 700px)  { .post-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (min-width: 1100px) { .post-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); } }

.post-card {
  display: flex; flex-direction: column;
  background: var(--ink-2); border: 1px solid var(--line);
  transition: border-color .35s, transform .35s var(--ease-out);
}
.post-card:hover { border-color: var(--accent); transform: translateY(-4px); }
.post-card__media { aspect-ratio: 16 / 10; overflow: hidden; background: var(--black); }
.post-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease-out); }
.post-card:hover .post-card__media img { transform: scale(1.04); }
.post-card__media--empty {
  display: grid; place-items: center;
  background-image: url('../img/truss-pattern.svg?v=183818'); background-size: 300px;
}
.post-card__media--empty svg { width: 74px; opacity: .8; }
.post-card__body { padding: 1.5rem 1.5rem 1.7rem; display: flex; flex-direction: column; gap: .8rem; flex: 1; }
.post-card__meta { display: flex; flex-wrap: wrap; gap: .9rem; font-size: .74rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--fog); }
.post-card__meta b { color: var(--accent); font-weight: 700; }
.post-card__title { overflow-wrap: break-word; font-size: 1.25rem; font-weight: 800; line-height: 1.25; letter-spacing: -.01em; }
.post-card__title a:hover { color: var(--accent); }
.post-card__excerpt { color: var(--fog); font-size: .95rem; flex: 1; }
.post-card--pinned { border-color: var(--accent); }

/* Pagination — styles Ariana's .pagination markup */
.pagination { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: clamp(3rem, 6vw, 4.5rem); flex-wrap: wrap; }
.pagination__pages { display: flex; gap: .4rem; list-style: none; margin: 0; padding: 0; }
.pagination__page a, .pagination__page.is-current, .pagination__gap {
  display: grid; place-items: center; min-width: 44px; height: 44px; padding-inline: .5rem;
  border: 1px solid var(--line); font-weight: 700; font-size: .95rem;
}
.pagination__page a:hover { border-color: var(--accent); color: var(--accent); }
.pagination__page.is-current { background: var(--accent); border-color: var(--accent); }
.pagination__gap { border: 0; }
.pagination__prev, .pagination__next { font-weight: 700; font-size: .9rem; letter-spacing: .06em; text-transform: uppercase; }
.pagination__prev:hover, .pagination__next:hover { color: var(--accent); }
.pagination .is-disabled { opacity: .35; }

/* Single post */
.post-hero { padding: calc(var(--header-h) + clamp(3.5rem, 8vh, 6rem)) 0 clamp(2rem, 4vh, 3rem); border-bottom: 1px solid var(--line); }
.post-hero__meta { display: flex; flex-wrap: wrap; gap: 1.1rem; font-size: .78rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--fog); margin-bottom: 1.4rem; }
.post-hero__meta b { color: var(--accent); font-weight: 700; }
.post-hero__title { font-size: clamp(2rem, 5vw, 3.6rem); font-weight: 800; line-height: 1.05; letter-spacing: -.02em; max-width: 24ch; }
.post-figure { margin: 0 0 clamp(1rem, 2vw, 1.6rem); }
.post-figure img {
  width: 100%; height: auto; display: block;
  max-height: 62vh; object-fit: cover;
  border: 1px solid var(--line);
}
.post-figure figcaption { font-size: .85rem; color: var(--fog); margin-top: .7rem; }
.post-body { padding-block: clamp(3rem, 7vh, 5rem); }
.post-tags { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 2.5rem; }
.tag-chip {
  display: inline-block; padding: .4rem .9rem;
  border: 1px solid var(--line); font-size: .8rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  transition: border-color .25s, color .25s;
}
.tag-chip:hover { border-color: var(--accent); color: var(--accent); }

.related { border-top: 1px solid var(--line); }
.related__title { margin-bottom: 2rem; }

/* Search */
.search-form { display: flex; gap: 0; max-width: 560px; margin-top: 2rem; }
.search-form input {
  flex: 1; min-width: 0;
  background: var(--ink-2); border: 1px solid var(--line); border-right: 0;
  color: var(--white); padding: .95rem 1.2rem; font: inherit;
}
.search-form input:focus { outline: none; border-color: var(--accent); }
.search-form button { flex: none; cursor: pointer; }

/* Author archive */
.ariana-author-profile { margin-bottom: 3rem; }

/* 404 */
.err {
  min-height: 100svh; display: grid; place-items: center; text-align: center;
  padding: calc(var(--header-h) + 3rem) 0 3rem;
  position: relative; overflow: clip;
}
.err__code {
  font-size: clamp(6rem, 22vw, 16rem); font-weight: 800; line-height: 1; letter-spacing: -.04em;
  color: var(--steel);
}
@supports (-webkit-text-stroke: 2px #000) {
  .err__code { color: transparent; -webkit-text-stroke: 2px var(--steel); }
}
.err__code b { color: var(--accent); -webkit-text-stroke: 0; font-weight: 800; }
.err__actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin-top: 2.4rem; }

/* ============================================================
   Contact page
   ============================================================ */
.offices { display: grid; gap: 1.5rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 860px) { .offices { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.office { border: 1px solid var(--line); background: var(--ink-2); padding: 2.2rem; }
.office__tag { font-size: .72rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--accent); display: block; margin-bottom: 1rem; }
.office__name { text-transform: uppercase; margin-bottom: 1.2rem; }
.office address { font-style: normal; color: var(--fog); line-height: 1.8; }
.office a { color: var(--white); font-weight: 600; }
.office a:hover { color: var(--accent); }
.contact-list { list-style: none; margin: 2rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .8rem; }
.contact-list a { display: inline-flex; gap: .7rem; align-items: baseline; font-weight: 600; }
.contact-list a:hover { color: var(--accent); }
.contact-list span { font-size: .72rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--fog); min-width: 64px; }

/* ============================================================
   About page — timeline
   ============================================================ */
.timeline { border-left: 2px solid var(--line); margin-left: .5rem; }
.tl-item { position: relative; padding: 0 0 clamp(2.2rem, 5vh, 3.2rem) 2.2rem; }
.tl-item::before {
  content: ''; position: absolute; left: -7px; top: .45rem;
  width: 12px; height: 12px; background: var(--ink); border: 2px solid var(--accent);
  transform: rotate(45deg);
}
.tl-item__year { font-weight: 800; color: var(--accent); letter-spacing: .06em; font-size: 1rem; display: block; margin-bottom: .4rem; }
.tl-item h3 { text-transform: uppercase; margin-bottom: .5rem; }
.tl-item p { color: var(--fog); max-width: 56ch; }

.values { display: grid; gap: 1.5rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 860px) { .values { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); } }
.value { border-top: 2px solid var(--accent); padding-top: 1.4rem; }
.value h3 { text-transform: uppercase; margin-bottom: .7rem; }
.value p { color: var(--fog); font-size: .97rem; }

/* Two-column split used on about/services */
.split { display: grid; gap: 2.5rem; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 900px) { .split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 5rem; } }
.split__body { color: var(--fog); }
.split__body p + p { margin-top: 1.1rem; }
.split--sticky-head > :first-child { position: sticky; top: calc(var(--header-h) + 2rem); }
@media (max-width: 899px) { .split--sticky-head > :first-child { position: static; } }

/* ============================================================
   Footer
   ============================================================ */
.site-footer { background: var(--black); border-top: 1px solid var(--line); overflow: clip; }
.site-footer__top {
  display: grid; gap: 3rem; grid-template-columns: minmax(0, 1fr);
  padding-block: clamp(3.5rem, 8vw, 6rem) clamp(2.5rem, 5vw, 4rem);
}
@media (min-width: 900px) { .site-footer__top { grid-template-columns: minmax(0, 5fr) repeat(2, minmax(0, 3fr)); gap: 4rem; } }
.site-footer__brand p { color: var(--fog); max-width: 34ch; margin-top: 1.2rem; }
.site-footer__brand .brand__logo { height: 30px; }
.site-footer__brand .brand__logo--full { height: 52px; }
.site-footer h4 {
  font-size: .74rem; font-weight: 700; letter-spacing: .24em; text-transform: uppercase;
  color: var(--fog); margin-bottom: 1.3rem;
}
.site-footer .menu { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .7rem; }
.site-footer .menu a { color: #d6d6d4; font-weight: 500; }
.site-footer .menu a:hover, .site-footer .menu a[aria-current="page"] { color: var(--accent); }
.site-footer .menu .menu__submenu { list-style: none; padding: .4rem 0 0 1rem; display: flex; flex-direction: column; gap: .5rem; }
.site-footer address { font-style: normal; color: var(--fog); line-height: 1.9; }
.site-footer address a { color: #d6d6d4; }
.site-footer address a:hover { color: var(--accent); }

.site-footer__mark { padding-block: 1rem 0; }
.site-footer__mark svg { width: 100%; height: auto; display: block; overflow: visible; }
.site-footer__mark .mark-outline {
  fill: none;
  stroke: rgba(255, 255, 255, .18);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.site-footer__legal {
  display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: center; justify-content: space-between;
  border-top: 1px solid var(--line);
  padding-block: 1.4rem 1.8rem;
  font-size: .85rem; color: var(--fog);
}
.site-footer__legal a { color: var(--white); text-decoration: none; border-bottom: 1px solid var(--line); transition: color .3s, border-color .3s; }
.site-footer__legal a:hover { color: var(--accent); border-color: var(--accent); }
.site-footer__credit { color: var(--steel); }
.site-footer__credit i { font-style: normal; color: var(--accent); margin: 0 .5rem; }

/* Social links */
.social {
  display: flex; gap: .7rem; list-style: none; margin: 1.6rem 0 0; padding: 0;
}
.social a {
  display: grid; place-items: center;
  width: 42px; height: 42px;
  border: 1px solid var(--line);
  color: var(--fog);
  transition: color .3s, border-color .3s, background .3s, transform .3s var(--ease-out);
}
.social a svg, .social span svg { width: 19px; height: 19px; }
/* Networks without a URL yet: present, but plainly inactive. */
.social .is-empty {
  display: grid; place-items: center;
  width: 42px; height: 42px;
  border: 1px dashed var(--line);
  color: var(--steel); opacity: .45;
  cursor: default;
}
.social a:hover,
.social a:focus-visible {
  color: var(--ink);
  background: var(--accent);
  border-color: var(--accent);
  transform: translateY(-3px);
}
.social a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .social a:hover { transform: none; }
}

/* ============================================================
   Reveal-on-scroll
   ============================================================ */
[data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out); }
[data-reveal].is-in { opacity: 1; transform: none; }
[data-reveal="fade"] { transform: none; }
[data-reveal-stagger] > * { opacity: 0; transform: translateY(24px); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); }
[data-reveal-stagger].is-in > * { opacity: 1; transform: none; }
[data-reveal-stagger].is-in > :nth-child(2) { transition-delay: .08s; }
[data-reveal-stagger].is-in > :nth-child(3) { transition-delay: .16s; }
[data-reveal-stagger].is-in > :nth-child(4) { transition-delay: .24s; }
[data-reveal-stagger].is-in > :nth-child(5) { transition-delay: .32s; }
[data-reveal-stagger].is-in > :nth-child(6) { transition-delay: .4s; }

/* ============================================================
   Reduced motion — everything settles instantly
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important; }
  [data-reveal], [data-reveal-stagger] > * { opacity: 1 !important; transform: none !important; }
  .hero__title .line > span { transform: none; animation: none; }
  .hero__foot { animation: none; }
  .ticker__track { animation: none; }
  .step { opacity: 1; }
  .truss .truss-node { opacity: 1; }
}

/* ============================================================
   Print
   ============================================================ */
@media print {
  body { background: #fff; color: #000; }
  .site-header, .site-footer, .ticker, .cta, .hero__slashes, .hero__scroll { display: none; }
}


/* ============================================================
   Hero slash field: continuous drift + scroll parallax
   ============================================================ */
.hero__slashfield {
  position: absolute; inset: 0;
  overflow: hidden;
  pointer-events: none;
}
/* Each layer bleeds past every edge, so the cursor parallax can move it
   freely without ever exposing a cut end. */
.hero__slashes {
  position: absolute; top: -8%; right: -10%; height: 124%; width: auto;
  opacity: .9;
  will-change: transform;
}
.hero__slashes--back { right: 4%; height: 116%; opacity: .28; }

/* Mobile: the two layers are sized off the artwork's own aspect ratio, so on a
   tall narrow screen their differing heights and offsets met inside the frame
   and left a visible horizontal seam across the field. Below the tablet
   breakpoint a single layer covers the hero edge to edge instead, and a scrim
   keeps the headline readable over it. */
@media (max-width: 819px) {
  .hero__slashes--back { display: none; }
  .hero__slashes--front {
    top: 0; right: 0; bottom: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: right center;
    opacity: .55;
    transform: none !important;
  }
  .hero__slashfield::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(105deg,
      var(--ink) 12%,
      rgba(11, 11, 12, .78) 46%,
      rgba(11, 11, 12, .34) 78%,
      rgba(11, 11, 12, .12) 100%);
  }
  .hero__grid { opacity: .18; }

  /* Inner-page and CTA slash fields are single layers, so they never seamed,
     but on a narrow screen the artwork's own ratio left them oversized and
     lopsided. Same edge-to-edge treatment. */
  .page-hero__slashes,
  .cta__slashes {
    top: 0; right: 0; bottom: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: right center;
  }
  .page-hero__slashes { opacity: .38; }
  .cta__slashes { opacity: .2; }
}

/* ============================================================
   Horizontal project scrub
   ============================================================ */
.hscroll { position: relative; background: var(--ink); }
.hscroll__pin { display: flex; flex-direction: column; justify-content: center; gap: clamp(1.6rem, 3vh, 2.6rem); padding-block: clamp(4.5rem, 10vw, 7rem); }
.hscroll__head {
  display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between;
  gap: 1.5rem;
}
.hscroll__side { display: flex; flex-direction: column; align-items: flex-end; gap: .9rem; }
.hscroll__hint { font-size: .72rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--steel); }
.hscroll__track { display: flex; flex-direction: column; gap: 1.5rem; padding-inline: var(--gutter, 20px); }
.hscroll__bar { display: none; height: 2px; background: color-mix(in srgb, var(--steel) 30%, transparent); position: relative; margin-top: .4rem; }
.hscroll__bar i { position: absolute; inset: 0; background: var(--accent); transform: scaleX(0); transform-origin: left; }

@media (min-width: 980px) {
  .hscroll__pin {
    position: sticky; top: 0; min-height: 100vh;
    overflow: hidden;
  }
  .hscroll__track {
    flex-direction: row; align-items: stretch; gap: clamp(1.5rem, 2.5vw, 2.5rem);
    width: max-content;
    padding-inline: max(var(--gutter), calc((100% - min(var(--w-main), 100% - var(--gutter) * 2)) / 2)) 12vw;
    will-change: transform;
  }
  .hscroll__hint::after { content: ' //'; color: var(--accent); }
  .hscroll__bar { display: block; }
}

.pcard {
  display: flex; flex-direction: column;
  border: 1px solid var(--line); background: var(--black);
  text-decoration: none; color: inherit;
  transition: border-color .35s, transform .35s var(--ease-out);
}
.pcard:hover { border-color: var(--accent); transform: translateY(-6px); }
@media (min-width: 980px) { .pcard { width: clamp(420px, 34vw, 540px); flex: none; } }
.pcard__media {
  position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: var(--ink);
}
.pcard__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .8s var(--ease-out);
}
.pcard:hover .pcard__media img { transform: scale(1.045); }
/* Clip reveal: photos open like a curtain as they enter the viewport. */
.pcard__media[data-reveal] { opacity: 1; transform: none; }
.pcard__media[data-reveal] img { clip-path: inset(0 100% 0 0); transition: clip-path 1s var(--ease-out), transform .8s var(--ease-out); }
.pcard__media[data-reveal].is-in img { clip-path: inset(0 0 0 0); }
.pcard__body { display: flex; flex-direction: column; gap: .7rem; padding: 1.4rem 1.5rem 1.6rem; }
.pcard__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1.1rem;
  font-size: .74rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--steel);
}
.pcard__meta b { color: var(--accent); }
.pcard__award {
  flex-basis: 100%;
  color: var(--paper); letter-spacing: .12em;
}
.pcard__award::before { content: ''; display: inline-block; width: 16px; height: 3px; background: var(--accent); vertical-align: middle; margin-right: .5rem; }
.pcard__title { text-transform: uppercase; }
.pcard__text { color: var(--fog); font-size: .95rem; line-height: 1.6; }
.pcard--more { justify-content: center; background: transparent; border-style: dashed; }
.pcard--more:hover { transform: none; }
.pcard__moreinner { display: flex; flex-direction: column; gap: 1rem; padding: 2.4rem 2rem; align-items: flex-start; }
.pcard__morecount { color: var(--accent); font-size: clamp(3.4rem, 6vw, 5.2rem); }

/* ============================================================
   Journal on home
   ============================================================ */
.journal__head {
  display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between;
  gap: 1.5rem; margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
/* The home teaser shows one row only. Ariana hands the page its latest posts
   and the template cannot slice the list, so the row is capped here. */
.journal .post-grid > :nth-child(n + 5) { display: none; }
@media (min-width: 1100px) {
  .journal .post-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.journal .post-card__title { font-size: 1.05rem; }

/* ============================================================
   Reduced motion: switch the new systems off
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .pcard__media[data-reveal] img { clip-path: none; }
  .hscroll__pin { position: static; min-height: 0; }
  .hscroll__track { flex-direction: column; width: auto; transform: none !important; }
  .hscroll__bar, .hscroll__hint { display: none; }
  .step { min-height: 0; }
}


/* Project rows with photography */
.project-row__figure {
  margin: 0 0 1.4rem; overflow: hidden; border: 1px solid var(--line); background: var(--black);
}
.project-row__figure img { display: block; width: 100%; height: auto; }
.project-row__figure[data-reveal] { opacity: 1; transform: none; }
.project-row__figure[data-reveal] img { clip-path: inset(0 100% 0 0); transition: clip-path 1.1s var(--ease-out); }
.project-row__figure[data-reveal].is-in img { clip-path: inset(0 0 0 0); }
.project-row--photo { scroll-margin-top: calc(var(--header-h) + 1rem); }
.award-line {
  display: flex; align-items: center; gap: .6rem;
  font-size: .78rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: var(--accent); margin: -0.4rem 0 1.4rem;
}
.award-line b { flex: none; width: 22px; height: 3px; background: var(--accent); }
@media (prefers-reduced-motion: reduce) {
  .project-row__figure[data-reveal] img { clip-path: none; }
}


/* Header call-to-action: compact and sharp */
.site-header .header-cta {
  padding: .58em 1.15em;
  font-size: .82rem;
  letter-spacing: .04em;
  gap: .5rem;
}
.site-header .header-cta svg { width: 13px; height: 13px; }

/* ============================================================
   Contact form (composes an email in the visitor's mail app)
   ============================================================ */
.contact-form { display: grid; gap: 1.1rem; max-width: 620px; }
.contact-form .field { display: grid; gap: .45rem; }
.contact-form label {
  font-size: .74rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--fog);
}
.contact-form input,
.contact-form textarea {
  width: 100%;
  background: var(--black);
  border: 1px solid var(--line);
  color: var(--white);
  font: inherit;
  padding: .85rem 1rem;
  border-radius: 0;
  transition: border-color .3s;
}
.contact-form input:focus,
.contact-form textarea:focus { outline: none; border-color: var(--accent); }
.contact-form textarea { min-height: 150px; resize: vertical; }
.contact-form .contact-form__foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1.1rem; margin-top: .3rem;
}
.contact-form__note { font-size: .82rem; color: var(--steel); }


/* Brand lockup sizing across breakpoints */
@media (max-width: 640px) {
  .brand__logo { height: 24px; }
  .site-footer__brand .brand__logo--full { height: 44px; }
}


/* ============================================================
   The axis — bars that fall into the brand's slash
   ============================================================ */
.axis-rule { width: min(340px, 64%); height: auto; display: block; margin: 0 0 1.8rem; overflow: visible; }
.axis-rule__slashes path {
  stroke: var(--accent);
  stroke-width: 9;
  stroke-linecap: butt;
  /* Upright to begin with; each bar pivots on its own foot. */
  transform: rotate(0deg);
  transform-origin: center bottom;
  transform-box: fill-box;
}
/* Domino: every bar leans into the brand angle, one after the next. */
.axis-rule.is-in .axis-rule__slashes path {
  animation: axis-tilt .85s cubic-bezier(.22, 1.15, .36, 1) forwards;
}
.axis-rule.is-in path:nth-child(1)  { animation-delay: .00s; }
.axis-rule.is-in path:nth-child(2)  { animation-delay: .07s; }
.axis-rule.is-in path:nth-child(3)  { animation-delay: .14s; }
.axis-rule.is-in path:nth-child(4)  { animation-delay: .21s; }
.axis-rule.is-in path:nth-child(5)  { animation-delay: .28s; }
.axis-rule.is-in path:nth-child(6)  { animation-delay: .35s; }
.axis-rule.is-in path:nth-child(7)  { animation-delay: .42s; }
.axis-rule.is-in path:nth-child(8)  { animation-delay: .49s; }
.axis-rule.is-in path:nth-child(9)  { animation-delay: .56s; }
.axis-rule.is-in path:nth-child(10) { animation-delay: .63s; }
.axis-rule.is-in path:nth-child(11) { animation-delay: .70s; }
.axis-rule.is-in path:nth-child(12) { animation-delay: .77s; }
@keyframes axis-tilt {
  from { transform: rotate(0deg); }
  to   { transform: rotate(28deg); }
}

.statement__quote .ln { display: block; overflow: hidden; }
.statement__quote .ln > span {
  display: block;
  transform: translateY(105%);
  transition: transform .9s var(--ease-out);
}
.statement__quote[data-lines].is-in .ln > span { transform: translateY(0); }
.statement__quote[data-lines].is-in .ln:nth-child(2) > span { transition-delay: .1s; }
.statement__quote[data-lines].is-in .ln:nth-child(3) > span { transition-delay: .2s; }

/* ============================================================
   What we do — disciplines that respond
   ============================================================ */
.cap { overflow: hidden; }
.cap:focus-visible { outline: 2px solid var(--accent); outline-offset: -4px; }
/* An accent rule sweeps across the top of each card as it is read. */
.cap__rule {
  position: absolute; top: -1px; left: 0; right: 0; height: 2px;
  background: var(--accent);
  transform: scaleX(0); transform-origin: left;
  transition: transform .55s var(--ease-out);
}
.cap.is-lit .cap__rule { transform: scaleX(1); }
.cap:hover .cap__rule,
.cap:focus-visible .cap__rule { transform: scaleX(1); transition-duration: .35s; }
/* The number lifts and the card lightens while the discipline is active. */
.cap__num { transition: transform .45s var(--ease-out), color .45s; }
.cap.is-lit .cap__num,
.cap:hover .cap__num { transform: translateY(-4px); }
.cap__title { transition: transform .45s var(--ease-out); }
.cap.is-lit .cap__title,
.cap:hover .cap__title { transform: translateX(6px); }
/* A faint slash field washes in behind the active card. */
.cap::after {
  content: ''; position: absolute; inset: 0;
  background-image: url('../img/truss-pattern.svg?v=183818');
  background-size: 260px;
  opacity: 0; transition: opacity .5s;
  pointer-events: none;
}
.cap.is-lit::after { opacity: .05; }
.cap:hover::after { opacity: .09; }

.journal__empty {
  margin-top: 1.5rem; color: var(--steel); max-width: 62ch;
}
.journal__empty .text-link { margin-left: .4rem; }

@media (prefers-reduced-motion: reduce) {
  .axis-rule__slashes path { transform: rotate(28deg); animation: none !important; }
  .statement__quote .ln > span { transform: none; transition: none; }
  .cap__rule { transform: scaleX(1); }
  .cap__num, .cap__title { transition: none; }
}


/* ============================================================
   Project category rail
   ============================================================ */
.filter-bar { padding-bottom: clamp(2rem, 4vw, 3rem); }
.filter-bar__head {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: .8rem 1.5rem; margin-bottom: 1.4rem;
}
.filter-bar__count {
  font-size: .72rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--steel);
}
.filter-bar__count [data-filter-count] { color: var(--accent); }

/* A single rail with one moving accent bar under the active tab. It never
   wraps: past the viewport width it scrolls sideways, so the ink bar always
   has one row to travel along and no tab is ever cut off. */
.filter-rail {
  position: relative;
  display: flex; flex-wrap: nowrap;
  gap: 0 clamp(1.4rem, 3vw, 2.6rem);
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}
.filter-rail::-webkit-scrollbar { display: none; }
/* Fade the trailing edge so it reads as scrollable rather than clipped. */
@media (max-width: 979px) {
  .filter-rail {
    -webkit-mask-image: linear-gradient(to right, #000 88%, transparent);
    mask-image: linear-gradient(to right, #000 88%, transparent);
  }
  .filter-rail.is-end {
    -webkit-mask-image: none;
    mask-image: none;
  }
}
.filter-rail__ink {
  position: absolute; bottom: 0; left: 0;
  height: 2px; width: 0;
  background: var(--accent);
  transition: transform .45s var(--ease-out), width .45s var(--ease-out);
  pointer-events: none;
}
.filter {
  position: relative;
  flex: none;
  scroll-snap-align: start;
  white-space: nowrap;
  display: inline-flex; align-items: baseline; gap: .5rem;
  font: inherit; font-size: .82rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--steel); background: none; border: 0;
  padding: 0 0 1.1rem; cursor: pointer;
  transition: color .3s;
  -webkit-tap-highlight-color: transparent;
}
@media (max-width: 639px) {
  .filter { font-size: .78rem; letter-spacing: .1em; padding-bottom: .95rem; }
  .filter__n { font-size: .6rem; }
  /* Trailing room so the last tab never sits flush against the fade. */
  .filter-rail { gap: 0 1.3rem; padding-inline-end: 2rem; scroll-padding-inline: 1.5rem; }
  .filter-bar__head { margin-bottom: 1.1rem; }
  .filter-bar__count { margin-left: auto; }
}
.filter__n {
  font-size: .64rem; letter-spacing: .1em;
  color: var(--steel); opacity: .7;
  transition: color .3s, opacity .3s, transform .3s var(--ease-out);
}
.filter:hover { color: var(--white); }
.filter:hover .filter__n { opacity: 1; }
.filter.is-on { color: var(--white); }
.filter.is-on .filter__n { color: var(--accent); opacity: 1; transform: translateY(-3px); }
.filter:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
/* Hairline under the hovered tab, so the rail responds before the click. */
.filter::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: currentColor; opacity: 0;
  transform: scaleX(0); transform-origin: left;
  transition: transform .3s var(--ease-out), opacity .3s;
}
.filter:hover::after { opacity: .28; transform: scaleX(1); }
.filter.is-on::after { opacity: 0; }

.project-row[hidden] { display: none; }
/* The tab rail already draws a line, so the first visible row starts clean. */
.project-row.is-first { border-top: 0; padding-top: 0; }
/* Rows fade back in when a category is chosen. */
.project-row { animation: row-in .5s var(--ease-out) both; }

@keyframes row-in { from { opacity: 0; transform: translateY(12px); } }

/* The two office buttons on the contact page reuse the rail styling. */
.map-switch {
  display: flex; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
  position: relative; gap: 0 1.8rem;
  border-bottom: 1px solid var(--line);
  margin-bottom: 1.4rem;
}
.map-switch::-webkit-scrollbar { display: none; }
.map-switch .filter__n { text-transform: none; letter-spacing: .06em; }
.map-switch .filter.is-on::after { opacity: 1; transform: scaleX(1); background: var(--accent); }

@media (prefers-reduced-motion: reduce) {
  .filter-rail__ink { transition: none; }
  .project-row { animation: none; }
}

/* ============================================================
   Contact: form beside the map
   ============================================================ */
.contact-grid {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(2.5rem, 5vw, 4rem);
  margin-top: clamp(3rem, 6vw, 4.5rem);
  align-items: start;
}
@media (min-width: 980px) {
  .contact-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4.5rem; }
}
.contact-form-wrap__title { margin-bottom: 1.8rem; }
.contact-form { max-width: none; }
.map-frame {
  border: 1px solid var(--line);
  background: var(--black);
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.map-frame iframe { width: 100%; height: 100%; border: 0; display: block; filter: grayscale(1) contrast(1.05); transition: filter .5s; }
.map-frame:hover iframe { filter: none; }
.map-note { margin-top: 1rem; color: var(--steel); font-size: .9rem; line-height: 1.65; }
@media (max-width: 979px) { .map-frame { aspect-ratio: 3 / 2; } }


/* ============================================================
   Overflow safety
   ============================================================ */
/* Grid and flex children default to min-width: auto, which lets a long word,
   URL or wide media push a column past its track and put the page into
   horizontal scroll. These are the containers whose children hold free text
   or editor content. */
.statement > *, .caps__grid > *, .scrolly__layout > *, .project-row > *,
.legacy__grid > *, .post-grid > *, .offices > *, .values > *, .split > *,
.site-footer__top > *, .contact-grid > *, .post-layout > *,
.project-grid > *, .hscroll__head > * { min-width: 0; }

/* Nothing may create sideways scroll at any width. `clip` rather than
   `hidden`: hidden on html/body creates a scroll container and breaks every
   position: sticky in the theme. */
iframe { max-width: 100%; }

/* Headings are jump targets from the contents rail, so they must clear the
   fixed header when linked to. */
.prose h2, .prose h3, .prose h4,
[id] { scroll-margin-top: calc(var(--header-h) + 1.5rem); }

/* Short laptop screens: the pinned project card must fit the viewport it is
   pinned to, or the card bottom is cut off. */
@media (min-width: 980px) and (max-height: 860px) {
  .pcard { width: clamp(360px, 28vw, 470px); }
  .pcard__media { aspect-ratio: 16 / 10; }
  .hscroll__pin { padding-block: clamp(3rem, 6vw, 4.5rem); }
}