/* ============================================================
   CONCORD SOFTWARE — landing
   Editorial, monochrome, photography-driven.
   ============================================================ */

:root {
  --paper: #f3f0e9;
  --paper-dim: #eae6dc;
  --ink: #141310;
  --ink-60: rgba(20, 19, 16, 0.6);
  --ink-40: rgba(20, 19, 16, 0.4);
  --line: rgba(20, 19, 16, 0.16);
  --line-soft: rgba(20, 19, 16, 0.09);
  --paper-60: rgba(243, 240, 233, 0.6);
  --paper-line: rgba(243, 240, 233, 0.18);

  --font-sans: "General Sans", "Helvetica Neue", Arial, sans-serif;
  --font-serif: "Instrument Serif", Georgia, serif;

  --gutter: clamp(1rem, 4vw, 4rem);
  --section-gap: clamp(6rem, 13vw, 12.5rem);

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

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

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

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

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.55;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

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

/* Clip decorative bleed (tilted marquee, story overdraw) at the content edge
   without breaking position: sticky (clip creates no scroll container) */
main { overflow-x: clip; }
a { color: inherit; text-decoration: none; }
ul[role="list"], ol[role="list"] { list-style: none; }
em { font-family: var(--font-serif); font-style: italic; font-weight: 400; }
sup { font-size: 0.45em; vertical-align: super; letter-spacing: 0; }

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

/* Hidden visually, still read by screen readers and crawlers — used to give
   the SVG wordmark headings a real, indexable text equivalent. */
.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;
}

:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

/* ---------- Shared pieces ---------- */
.meta-label {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-60);
}

.meta-label--ghost { color: var(--paper-60); }

.section-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--line);
  margin-bottom: clamp(3rem, 6vw, 5.5rem);
}

.section-head--invert { border-top-color: var(--paper-line); }
.section-head--invert .meta-label { color: var(--paper-60); }

.link-arrow {
  display: inline-flex;
  align-items: center;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding-bottom: 3px;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-size: 100% 1px;
  background-position: 0 100%;
  transition: background-size 0.45s var(--ease-out), background-position 0s 0.45s;
}

.link-arrow span { transition: transform 0.3s var(--ease-out); }
.link-arrow:hover { background-size: 0% 1px; background-position: 100% 100%; transition: background-size 0.45s var(--ease-out); }
.link-arrow:hover span { transform: translateX(4px); }
.link-arrow--static { background-image: none; color: var(--ink-60); cursor: default; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--ink);
  border-radius: 999px;
  font-weight: 500;
  letter-spacing: 0.04em;
  transition: background 0.35s var(--ease-out), color 0.35s var(--ease-out);
}

.btn:hover { background: var(--ink); color: var(--paper); }
.btn--small { font-size: 0.78rem; padding: 0.55em 1.3em; }

/* ---------- Preloader ---------- */
.preloader {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--paper);
  display: none;
}

.js .preloader { display: block; }

.preloader__center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(1.2rem, 3vh, 2rem);
}

.preloader__logo {
  font-size: clamp(2.2rem, 6vw, 4.2rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1;
  display: flex;
}

.preloader__logo span {
  opacity: 0;
  transform: translateY(0.3em);
  transition: opacity 0.3s var(--ease-out), transform 0.35s var(--ease-out);
}

.preloader__logo span.on {
  opacity: 1;
  transform: none;
}

.preloader__logo .pl-alt {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
}

.preloader__logo .pl-alt2 {
  font-family: "Melodrama", Georgia, serif;
  font-weight: 500;
}

.preloader__bar {
  width: clamp(10rem, 26vw, 20rem);
  height: 1px;
  background: var(--line);
  overflow: hidden;
}

.preloader__bar-fill {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: left;
}

.preloader__foot {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: var(--gutter);
}

.preloader__count {
  font-variant-numeric: tabular-nums;
}

/* ---------- Header ---------- */
.header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.1rem var(--gutter);
  transition: background 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out), transform 0.45s var(--ease-out);
}

.header.is-scrolled {
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 var(--line-soft);
}

.header.is-hidden { transform: translateY(-110%); }

/* While the overlay menu is open, the header sits on ink — flip to paper */
.header.is-menu-open {
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
  color: var(--paper);
}

.header.is-menu-open .header__toggle { border-color: var(--paper); }

.header__brand {
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.header__nav {
  display: flex;
  gap: 2.2rem;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.header__nav a {
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-60);
  transition: color 0.3s var(--ease-out);
}

.header__nav a:hover { color: var(--ink); }

.header__meta {
  display: flex;
  align-items: center;
  gap: 1.4rem;
}

.header__clock {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-60);
  font-variant-numeric: tabular-nums;
}

.header__toggle {
  display: none;
  background: none;
  border: 1px solid var(--ink);
  border-radius: 999px;
  padding: 0.5em 1.2em;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: inherit;
  cursor: pointer;
}

/* ---------- Mobile menu ---------- */
.menu {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: var(--ink);
  color: var(--paper);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 6.5rem var(--gutter) 2.5rem;
  opacity: 0;
  transform: translateY(-3%);
  pointer-events: none;
  transition: opacity 0.45s var(--ease-out), transform 0.45s var(--ease-out);
}

.menu.is-open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.menu__nav { display: flex; flex-direction: column; }

.menu__nav a {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  font-size: clamp(2.4rem, 9vw, 4rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.25;
  padding: 0.35rem 0;
  border-bottom: 1px solid var(--paper-line);
}

.menu__index {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: var(--paper-60);
}

.menu__footer {
  display: flex;
  gap: 1.6rem;
  flex-wrap: wrap;
}

.menu__footer a {
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--paper-60);
}

/* ---------- Layout wrapper ---------- */
main > section,
.footer {
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

/* Anchored sections breathe below the fixed header (native fallback) */
[id] { scroll-margin-top: 5.25rem; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  padding-top: clamp(6rem, 14vh, 9rem);
  padding-bottom: clamp(1.6rem, 4vh, 3rem);
}

.hero > :not(.hero__bg) { position: relative; z-index: 1; }

/* Background: interactive engineering dot field (canvas) */
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.hero__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Sandy high-ISO texture over the wave field */
.hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.3' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
  opacity: 0.09;
  pointer-events: none;
}

/* Foreground */
.hero__meta {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 1rem;
}

.hero__wordmark {
  line-height: 0;
  margin-top: clamp(1rem, 3vh, 2.5rem);
}

.hero__wordmark svg {
  width: 100%;
  height: auto;
  display: block;
  /* clips the per-letter rise so glyphs emerge from the baseline edge */
  overflow: hidden;
}

.hero__wordmark text {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 196px;
  letter-spacing: -0.01em;
  fill: var(--ink);
}

/* Two letters keep a serif voice: the first O (Instrument italic) and the R
   (Melodrama). During the intro every letter wears the italic (.wm-flip wins
   over .wm-alt2 by rule order), then settles into its final face. */
.hero__wordmark tspan {
  transition: fill-opacity 0.32s var(--ease-out);
}

.hero__wordmark tspan.wm-alt2 {
  font-family: "Melodrama", Georgia, serif;
  font-weight: 500;
  font-style: normal;
}

.hero__wordmark tspan.wm-alt,
.hero__wordmark tspan.wm-flip {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
}

.hero__statement {
  margin-top: auto;
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  gap: clamp(2rem, 6vw, 8rem);
  align-items: end;
  padding-top: clamp(2.5rem, 5vw, 4rem);
}

.hero__tagline {
  font-size: clamp(1.5rem, 2.8vw, 2.6rem);
  line-height: 1.25;
  letter-spacing: -0.015em;
  font-weight: 500;
  text-wrap: balance;
}

.hero__aside {
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
}

.hero__aside p {
  font-size: 0.95rem;
  color: var(--ink-60);
  max-width: 34ch;
}

/* ---------- Marquee: tilted print ribbon ---------- */
.marquee {
  margin-top: var(--section-gap);
  width: 104vw;
  margin-left: -2vw;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--paper);
  overflow: hidden;
  padding: clamp(1.1rem, 2.2vw, 1.8rem) 0;
  transform: rotate(-1.5deg);
}

.marquee__track {
  display: flex;
  width: max-content;
  animation: marquee 28s linear infinite;
}

.marquee:hover .marquee__track { animation-play-state: paused; }

.marquee__track span {
  display: flex;
  align-items: center;
  white-space: nowrap;
  font-size: clamp(2rem, 5vw, 4.2rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

/* Type specimen: every phrase in its own typeface, all solid ink */
.marquee__track [class^="mq-"] { color: var(--ink); }

.marquee__track .mq-a { font-weight: 600; }

.marquee__track .mq-b {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  padding-right: 0.06em;
}

.marquee__track .mq-c {
  font-family: "Clash Display", var(--font-sans);
  font-weight: 600;
  letter-spacing: 0;
}

.marquee__track .mq-d {
  font-family: "Zodiak", Georgia, serif;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
}

.marquee__track .mq-e {
  font-family: "Cabinet Grotesk", var(--font-sans);
  font-weight: 800;
  letter-spacing: 0;
}

.marquee__track .mq-f {
  font-family: "Melodrama", Georgia, serif;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
}

.marquee__track .mq-g {
  font-family: "Space Grotesk", var(--font-sans);
  font-weight: 500;
  letter-spacing: -0.01em;
}

.marquee__track .mq-h {
  font-family: "Bricolage Grotesque", var(--font-sans);
  font-weight: 600;
  text-transform: none;
  letter-spacing: -0.01em;
}

.marquee__track i {
  font-style: normal;
  font-family: var(--font-serif);
  margin: 0 0.55em;
  color: var(--ink-40);
}

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

@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; }
}

/* ---------- Manifesto ---------- */
.manifesto { margin-top: var(--section-gap); }

.manifesto__text {
  font-size: clamp(1.8rem, 4.4vw, 4.2rem);
  line-height: 1.14;
  letter-spacing: -0.025em;
  font-weight: 500;
  max-width: 20em;
}

.manifesto__text em { letter-spacing: -0.01em; }

.manifesto__cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.5rem, 4vw, 4rem);
  max-width: 46rem;
  margin-left: auto;
  margin-top: clamp(3rem, 6vw, 5rem);
}

.manifesto__cols p {
  font-size: 0.95rem;
  color: var(--ink-60);
}

/* ---------- Work: sticky stacking card deck ---------- */
.work { margin-top: var(--section-gap); }

.work .section-head { margin-bottom: clamp(2rem, 4vw, 3rem); }

.project {
  --stack-top: clamp(5rem, 10vh, 6.5rem);
  position: sticky;
  top: var(--stack-top);
  z-index: 1;
  background: var(--paper);
  border: 1px solid var(--line);
  padding: clamp(1.4rem, 3vw, 2.75rem);
  overflow: hidden;
  box-shadow: 0 -0.35rem 1.25rem rgba(20, 19, 16, 0.035);
  will-change: transform;
}

.project:nth-of-type(2) { top: calc(var(--stack-top) + 18px); z-index: 2; }
.project:nth-of-type(3) { top: calc(var(--stack-top) + 36px); z-index: 3; }
.project:nth-of-type(4) { top: calc(var(--stack-top) + 54px); z-index: 4; }

/* P.04 carries a mobile-only copy of the preceding tabs. It overlays the
   live cards at the final stack position so the deck exits as one unit. */
.project__stack-summary { display: none; }
.project__stack-summary[hidden] { display: none !important; }

/* Non-sticky spacers between cards; also serve as stable scroll-trigger
   anchors (sticky cards measure wrong when stuck during a refresh) */
.project-marker { height: clamp(2.5rem, 5vw, 4rem); }

.project__top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding-bottom: clamp(1rem, 2vw, 1.4rem);
  border-bottom: 1px solid var(--line-soft);
  margin-bottom: clamp(1.4rem, 3vw, 2.2rem);
}

.project__main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(14rem, 26vw, 27rem);
  gap: clamp(1.5rem, 4vw, 4.5rem);
  align-items: end;
}

.project__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.2rem;
}

.project__media {
  display: block;
  overflow: hidden;
  aspect-ratio: 3 / 2;
  width: 100%;
}

.project__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.55s var(--ease-out);
}

.project__media:hover img,
a.project__media:focus-visible img { transform: scale(1.045); }

.project__title {
  font-size: clamp(2.2rem, 4.2vw, 4rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
  transition: transform 0.4s var(--ease-out);
}

@media (hover: hover) {
  .project:hover .project__title { transform: translateX(6px); }
}

.project__desc {
  font-size: 0.95rem;
  color: var(--ink-60);
  max-width: 52ch;
}

/* Dispatch link sits between the description and the tag chips */
.project__content > .link-arrow { margin-top: 0.2rem; }

.project__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.project__tags li {
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.45em 1em;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink-60);
}

/* ---------- Services ---------- */
.services { margin-top: var(--section-gap); }

.service {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 7fr) minmax(0, 3fr);
  gap: clamp(1rem, 3vw, 3rem);
  align-items: start;
  padding: clamp(1.6rem, 3vw, 2.6rem) 0;
  border-top: 1px solid var(--line);
  transition: padding-left 0.4s var(--ease-out);
}

.service:last-child { border-bottom: 1px solid var(--line); }

@media (hover: hover) {
  .service:hover { padding-left: 1.2rem; }
}

.service__index {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.15rem;
  letter-spacing: 0.02em;
  color: var(--ink-40);
  padding-top: 0.35rem;
}

.service__main {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.service__title {
  font-size: clamp(2rem, 3.4vw, 3.2rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.05;
}

.service__desc {
  font-size: 0.95rem;
  color: var(--ink-60);
  max-width: 52ch;
}

.service__tags {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-60);
  justify-self: end;
  text-align: right;
  padding-top: 0.5rem;
}

/* ---------- Story (inverted) ---------- */
.story {
  position: relative;
  margin-top: var(--section-gap);
  background: var(--ink);
  color: var(--paper);
  padding-top: clamp(4rem, 8vw, 7rem);
  padding-bottom: clamp(4rem, 8vw, 7rem);
}

/* High-ISO "sandy" grain on the ink */
.story::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.3' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
  opacity: 0.2;
  pointer-events: none;
}

/* Overdraw the ink past both edges: pinning bakes a rounded integer width,
   which can leave a hairline paper sliver at fractional viewport widths
   (e.g. Windows 125% display scaling) */
.story::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -6px;
  right: -6px;
  background: var(--ink);
  z-index: -1;
}

.story > * { position: relative; z-index: 1; }

.story__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 3rem);
}

.chapter {
  border-top: 1px solid var(--paper-line);
  padding-top: 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.chapter__index {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(2.8rem, 4.5vw, 4.5rem);
  line-height: 1;
  color: rgba(243, 240, 233, 0.22);
  transition: color 0.4s var(--ease-out);
}

@media (hover: hover) {
  .chapter:hover .chapter__index { color: rgba(243, 240, 233, 0.5); }
}

.chapter__title {
  font-size: clamp(1.4rem, 2vw, 1.9rem);
  font-weight: 600;
  letter-spacing: -0.02em;
}

.chapter__text {
  font-size: 0.9rem;
  color: var(--paper-60);
  max-width: 36ch;
}

/* Pinned horizontal mode (added by JS on desktop when motion is allowed) */
.story--pin {
  height: 100vh;
  height: 100svh;
  display: flex;
  flex-direction: column;
  padding-top: clamp(4rem, 9vh, 6.5rem);
  padding-bottom: clamp(2rem, 5vh, 3.5rem);
  overflow: hidden;
}

.story--pin .section-head { margin-bottom: 0; }

.story--pin .story__list {
  display: flex;
  gap: clamp(2.5rem, 5vw, 5rem);
  width: max-content;
  margin: auto 0;
  will-change: transform;
}

.story--pin .chapter {
  width: clamp(22rem, 34vw, 38rem);
  flex: none;
}

.story--pin .chapter__title { font-size: clamp(1.6rem, 2.4vw, 2.2rem); }

.story--pin .chapter__text {
  font-size: 0.95rem;
  max-width: 44ch;
}

.story__progress { display: none; }

.story--pin .story__progress {
  display: block;
  height: 1px;
  background: var(--paper-line);
}

.story__progress-bar {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--paper);
  transform: scaleX(0);
  transform-origin: left;
}

/* ---------- Studio / founder ---------- */
.studio { margin-top: var(--section-gap); }

.studio__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(2rem, 6vw, 7rem);
  align-items: start;
}

.studio__portrait { position: sticky; top: 6rem; }

.studio__portrait img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

.studio__portrait figcaption { margin-top: 0.8rem; }

.studio__bio {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
}

.studio__lead {
  font-size: clamp(1.5rem, 2.6vw, 2.4rem);
  line-height: 1.22;
  letter-spacing: -0.02em;
  font-weight: 500;
  text-wrap: balance;
}

.studio__bio > p:not(.studio__lead) {
  font-size: 0.95rem;
  color: var(--ink-60);
  max-width: 58ch;
}

.studio__principles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.2rem 2rem;
  margin-top: 0.8rem;
}

.studio__principles li {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  border-top: 1px solid var(--line);
  padding-top: 0.9rem;
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.studio__links {
  display: flex;
  gap: 1.6rem;
  margin-top: 0.6rem;
}

/* ---------- Footer ---------- */
.footer {
  margin-top: var(--section-gap);
  background: var(--ink);
  color: var(--paper);
  padding-top: clamp(5rem, 10vw, 9rem);
  padding-bottom: 2rem;
}

.footer__cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(1.5rem, 3vw, 2.5rem);
}

.footer__title {
  font-size: clamp(3rem, 9.5vw, 9.5rem);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 0.98;
}

.footer__title em { letter-spacing: -0.01em; }

.footer__mail {
  font-size: clamp(1.3rem, 3vw, 2.4rem);
  font-weight: 500;
  letter-spacing: -0.01em;
  border-bottom: 1px solid var(--paper-line);
  padding-bottom: 0.2em;
  transition: border-color 0.3s var(--ease-out);
}

.footer__mail:hover { border-color: var(--paper); }
.footer__mail span { display: inline-block; transition: transform 0.3s var(--ease-out); }
.footer__mail:hover span { transform: translateX(6px); }

.footer__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)) minmax(0, 1.4fr);
  gap: 2rem;
  margin-top: clamp(4rem, 8vw, 7rem);
  padding-top: 2.2rem;
  border-top: 1px solid var(--paper-line);
}

.footer__col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.55rem;
}

.footer__col .meta-label { margin-bottom: 0.5rem; }

.footer__col a {
  font-size: 0.92rem;
  color: var(--paper);
  opacity: 0.85;
  transition: opacity 0.3s var(--ease-out);
}

.footer__col a:hover { opacity: 1; }

.footer__col p {
  font-size: 0.92rem;
  color: var(--paper-60);
}

.footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: clamp(3rem, 6vw, 5rem);
  padding-top: 1.4rem;
  border-top: 1px solid var(--paper-line);
  font-size: 0.78rem;
  color: var(--paper-60);
}

.footer__bottom a { color: var(--paper-60); transition: color 0.3s var(--ease-out); }
.footer__bottom a:hover { color: var(--paper); }

.footer__strap {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.92rem;
}

/* ---------- Reveal states (only when JS is ready; class-driven) ----------
   Elements hide only under .anim-ready and show via .is-in, so no scroll
   library or restored-scroll position can ever leave content invisible. */
.anim-ready [data-reveal],
.anim-ready [data-reveal-lines] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
}

.anim-ready [data-reveal].is-in,
.anim-ready [data-reveal-lines].is-in {
  opacity: 1;
  transform: none;
}

.anim-ready [data-reveal-group] .project__media {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 0.8s cubic-bezier(0.65, 0, 0.35, 1);
}

.anim-ready [data-reveal-group].is-in .project__media {
  clip-path: inset(0 0 0% 0);
}

.anim-ready [data-reveal-group] .project__top,
.anim-ready [data-reveal-group] .project__content > * {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.55s var(--ease-out), transform 0.55s var(--ease-out);
}

.anim-ready [data-reveal-group].is-in .project__top,
.anim-ready [data-reveal-group].is-in .project__content > * {
  opacity: 1;
  transform: none;
}

.anim-ready [data-reveal-group] .project__content > *:nth-child(1) { transition-delay: 0.06s; }
.anim-ready [data-reveal-group] .project__content > *:nth-child(2) { transition-delay: 0.12s; }
.anim-ready [data-reveal-group] .project__content > *:nth-child(3) { transition-delay: 0.18s; }
.anim-ready [data-reveal-group] .project__content > *:nth-child(4) { transition-delay: 0.24s; }

/* ============================================================
   Responsive
   ============================================================ */

@media (max-width: 1024px) {
  .story__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .header__nav, .header__clock { display: none; }
  .header__meta .btn { display: none; }
  .header__toggle { display: inline-flex; }

  .hero__statement { grid-template-columns: 1fr; align-items: start; }
  .hero__aside { max-width: 34rem; }

  .project__main {
    grid-template-columns: 1fr;
    gap: 1.4rem;
  }
  /* Full-bleed banner on top: a 30rem-capped image left-aligned in a
     full-width card leaves an awkward void beside it. Matches the news
     feature card's treatment at this breakpoint. */
  .project__media { max-width: none; order: -1; aspect-ratio: 16 / 10; }

  /* Each covered card leaves one clean header tab visible. The larger,
     regular offset and opaque surfaces keep the deck legible on touch screens. */
  .project {
    --stack-top: clamp(4.75rem, 9vh, 5.5rem);
    padding: clamp(1.15rem, 3vw, 1.65rem);
    box-shadow: 0 -0.65rem 1.5rem rgba(20, 19, 16, 0.065);
  }
  .project:nth-of-type(2) { top: calc(var(--stack-top) + 56px); }
  .project:nth-of-type(3) { top: calc(var(--stack-top) + 112px); }
  .project:nth-of-type(4) { top: calc(var(--stack-top) + 168px); }

  .project:nth-of-type(4) { overflow: visible; }

  .project__stack-summary {
    position: absolute;
    left: -1px;
    right: -1px;
    bottom: 100%;
    height: 168px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-bottom: 0;
    box-shadow: 0 -0.65rem 1.5rem rgba(20, 19, 16, 0.065);
  }

  .project.is-final-stacked .project__stack-summary { display: block; }

  .project__stack-row {
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0 clamp(1.15rem, 3vw, 1.65rem);
    border-bottom: 1px solid var(--line-soft);
    color: var(--ink-60);
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .project__stack-row:last-child { border-bottom: 1px solid var(--line); }

  .project__stack-link {
    color: var(--ink);
    padding-bottom: 3px;
    border-bottom: 1px solid currentColor;
  }

  .project__top {
    min-height: 2.1rem;
    align-items: flex-start;
  }

  .project__index,
  .project__top .link-arrow {
    white-space: nowrap;
  }

  .service {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.9rem;
  }
  .service__tags { justify-self: start; text-align: left; padding-top: 0; }

  .studio__grid { grid-template-columns: 1fr; }
  .studio__portrait { position: static; max-width: 30rem; }

  .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer__col--wide { grid-column: 1 / -1; }
}

@media (max-width: 560px) {
  .hero__meta .hero__meta-mid { display: none; }

  .manifesto__cols { grid-template-columns: 1fr; }

  .project {
    padding: 1.15rem;
  }
  .project:nth-of-type(2) { top: calc(var(--stack-top) + 48px); }
  .project:nth-of-type(3) { top: calc(var(--stack-top) + 96px); }
  .project:nth-of-type(4) { top: calc(var(--stack-top) + 144px); }

  .project__stack-summary { height: 144px; }

  .project__stack-row {
    height: 48px;
    padding-inline: 1.15rem;
    gap: 0.65rem;
    font-size: 0.64rem;
  }

  .project__top {
    gap: 0.65rem;
    padding-bottom: 0.85rem;
    margin-bottom: 1.15rem;
  }

  .project__top .meta-label,
  .project__top .link-arrow {
    font-size: 0.64rem;
    letter-spacing: 0.08em;
  }

  .story__list { grid-template-columns: 1fr; }

  .studio__principles { grid-template-columns: 1fr; }

  .footer__grid { grid-template-columns: 1fr; }

  .footer__bottom { flex-direction: column; align-items: flex-start; }
}

/* ============================================================
   Micro-interactions
   ============================================================ */

/* ---------- Rollover links: sans slides up, serif italic slides in ---------- */
.roll {
  position: relative;
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
}

.roll > span {
  display: block;
  transition: transform 0.4s var(--ease-out);
}

.roll::after {
  content: attr(data-text);
  position: absolute;
  left: 0;
  top: 100%;
  display: block;
  white-space: nowrap;
  font-family: var(--font-serif);
  font-style: italic;
  letter-spacing: 0.02em;
  transition: transform 0.4s var(--ease-out);
}

.roll:hover > span,
.roll:focus-visible > span,
.roll:hover::after,
.roll:focus-visible::after {
  transform: translateY(-100%);
}

/* ---------- Scrollspy: current section in the nav ---------- */
.header__nav a.is-active { color: var(--ink); }

/* Hero wordmark entrance is handled per-letter in JS (see main.js) */

/* ---------- Story chapters: stagger across the row ---------- */
.anim-ready .story__list .chapter:nth-child(2) { transition-delay: 0.08s; }
.anim-ready .story__list .chapter:nth-child(3) { transition-delay: 0.16s; }
.anim-ready .story__list .chapter:nth-child(4) { transition-delay: 0.24s; }

/* ---------- Project tag chips ---------- */
.project__tags li {
  transition: border-color 0.3s var(--ease-out), color 0.3s var(--ease-out);
}

.project__tags li:hover {
  border-color: var(--ink);
  color: var(--ink);
}

/* ---------- Studio principles: nudge on hover ---------- */
.studio__principles li {
  transition:
    opacity 0.6s var(--ease-out),
    transform 0.6s var(--ease-out),
    padding-left 0.35s var(--ease-out),
    border-color 0.35s var(--ease-out);
}

@media (hover: hover) {
  .studio__principles li:hover {
    padding-left: 0.55rem;
    border-top-color: var(--ink-40);
  }
}

/* ---------- "View" cursor chip over project links ---------- */
.cursor-chip {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 31;
  pointer-events: none;
  will-change: transform;
}

.cursor-chip__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 5.5rem;
  height: 5.5rem;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transform: translate(-50%, -50%) scale(0);
  transition: transform 0.35s var(--ease-out);
}

.cursor-chip.is-on .cursor-chip__inner {
  transform: translate(-50%, -50%) scale(1);
}

/* ---------- Masked text reveals (hero title, footer title) ----------
   Descender room lives on the MASK box (that's what clips), with negative
   outer margins so line spacing is unchanged. The hidden state translates
   past the enlarged window so nothing peeks before the reveal. */
[data-mask] .w {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding-bottom: 0.28em;
  margin-bottom: -0.28em;
  padding-right: 0.1em;
  margin-right: -0.1em;
}

[data-mask] .line {
  display: block;
  overflow: hidden;
  padding-bottom: 0.28em;
  margin-bottom: -0.28em;
}

[data-mask] .w > span,
[data-mask] .line > span {
  display: inline-block;
}

.anim-ready [data-mask] .w > span,
.anim-ready [data-mask] .line > span {
  transform: translateY(145%);
  transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: calc(var(--i, 0) * 0.11s);
}

.anim-ready [data-mask].is-in .w > span,
.anim-ready [data-mask].is-in .line > span {
  transform: translateY(0);
}

/* ---------- Services: ink wipe on hover ---------- */
.service { position: relative; }

.service::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--ink);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.45s cubic-bezier(0.65, 0, 0.35, 1);
}

.service > * { position: relative; z-index: 1; }

.service__title,
.service__desc,
.service__index,
.service__tags {
  transition: color 0.4s var(--ease-out);
}

@media (hover: hover) {
  .service:hover::before { transform: scaleY(1); }
  .service:hover { padding-right: 1.2rem; }
  .service:hover .service__title { color: var(--paper); }
  .service:hover .service__desc,
  .service:hover .service__index,
  .service:hover .service__tags { color: var(--paper-60); }
}

/* Title swaps to serif italic as the row inverts.
   The mask's own line-height (1.3) fits full ascenders/descenders; negative
   block margins give the excess back so the layout rhythm is unchanged. */
.svc-roll {
  display: inline-block;
  position: relative;
  overflow: hidden;
  vertical-align: bottom;
  line-height: 1.3;
  margin-block: -0.125em;
  padding-right: 0.08em;
  margin-right: -0.08em;
}

.svc-roll > span {
  display: block;
  transition: transform 0.5s var(--ease-out);
}

.svc-roll::after {
  content: attr(data-text);
  position: absolute;
  left: 0;
  top: 100%;
  white-space: nowrap;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0.01em;
  transition: transform 0.5s var(--ease-out);
}

@media (hover: hover) {
  .service:hover .svc-roll > span,
  .service:hover .svc-roll::after {
    transform: translateY(-100%);
  }
}

/* Arrow glides in at the bottom-right of the hovered row */
.service__arrow {
  position: absolute;
  right: clamp(1rem, 2.5vw, 2.5rem);
  bottom: clamp(1.2rem, 2.5vw, 2.2rem);
  font-size: clamp(1.5rem, 2.2vw, 2.2rem);
  line-height: 1;
  color: var(--paper);
  opacity: 0;
  transform: translateX(-14px);
  transition: opacity 0.4s var(--ease-out), transform 0.4s var(--ease-out);
  pointer-events: none;
}

@media (hover: hover) {
  .service:hover .service__arrow {
    opacity: 1;
    transform: translateX(0);
  }
}

@media (max-width: 900px) {
  .service__arrow { display: none; }
}

/* Reveal + hover transitions must coexist once .anim-ready is set */
.anim-ready .service {
  transition:
    opacity 0.6s var(--ease-out),
    transform 0.6s var(--ease-out),
    padding 0.4s var(--ease-out);
}

.anim-ready .studio__principles li {
  transition:
    opacity 0.6s var(--ease-out),
    transform 0.6s var(--ease-out),
    padding-left 0.35s var(--ease-out),
    border-color 0.35s var(--ease-out);
}

/* ---------- Footer: availability status ---------- */
.footer__status {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.85rem;
  color: var(--paper-60);
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #676767;
  animation: pulse 2.4s ease-out infinite;
}

@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(143, 174, 133, 0.5); }
  70% { box-shadow: 0 0 0 9px rgba(143, 174, 133, 0); }
  100% { box-shadow: 0 0 0 0 rgba(143, 174, 133, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .status-dot { animation: none; }
}

/* ---------- Grain overlay ---------- */
.grain {
  position: fixed;
  inset: -50%;
  z-index: 90;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.05;
  animation: grain 7s steps(10) infinite;
}

@keyframes grain {
  0%, 100% { transform: translate(0, 0); }
  10% { transform: translate(-5%, -8%); }
  20% { transform: translate(-12%, 4%); }
  30% { transform: translate(6%, -12%); }
  40% { transform: translate(-4%, 14%); }
  50% { transform: translate(-10%, 6%); }
  60% { transform: translate(12%, 0%); }
  70% { transform: translate(0%, 10%); }
  80% { transform: translate(-12%, -4%); }
  90% { transform: translate(8%, 6%); }
}

@media (prefers-reduced-motion: reduce) {
  .grain { animation: none; }
}