.about-root { scroll-snap-type: none; background: var(--canvas); }

.about-page {
  min-height: 100%;
  overflow-x: hidden;
  background: var(--canvas);
  color: var(--body);
}

.about-main { padding-top: var(--header-height); }
.about-shell { width: min(calc(100% - 64px), var(--shell)); margin-inline: auto; }

.about-intro,
.about-project,
.about-newsletter,
.about-elsewhere { border-bottom: 1px solid var(--line); }

.about-intro {
  display: grid;
  grid-template-columns: minmax(260px, 0.58fr) minmax(0, 1.42fr);
  gap: clamp(54px, 9vw, 128px);
  align-items: start;
  padding: clamp(86px, 11vw, 150px) 0 clamp(94px, 11vw, 148px);
}

.about-intro__heading > span,
.about-project__meta {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.about-intro__heading > span { display: block; margin-bottom: 20px; color: var(--accent); }

.about-intro h1 {
  margin: 0;
  color: var(--ink);
  font-size: clamp(4rem, 8vw, 6rem);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 0.9;
}

.about-intro__body { min-width: 0; padding-top: 31px; }

.about-intro.has-image .about-intro__body {
  display: grid;
  grid-template-columns: minmax(190px, 0.58fr) minmax(0, 1.42fr);
  gap: clamp(34px, 5vw, 68px);
}

.about-intro__image {
  margin: 0;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--surface-raised);
}

.about-intro__image img { width: 100%; height: 100%; object-fit: cover; }
.about-intro__copy { min-width: 0; }

.about-intro__copy p {
  max-width: 67ch;
  margin: 0;
  color: var(--muted);
  font-size: clamp(1.02rem, 1.35vw, 1.14rem);
  line-height: 1.78;
}

.about-intro__copy p + p { margin-top: 30px; }

.about-intro__copy .about-intro__lead {
  max-width: 50ch;
  color: var(--ink);
  font-size: clamp(1.55rem, 2.6vw, 2.2rem);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.35;
}

.about-project {
  display: grid;
  grid-template-columns: minmax(220px, 0.52fr) minmax(0, 1.48fr);
  gap: clamp(50px, 8vw, 112px);
  padding: clamp(88px, 10vw, 132px) 0;
}

.about-project > h2,
.about-elsewhere h2 {
  margin: 0;
  color: var(--ink);
  font-size: clamp(2.6rem, 4.5vw, 4.2rem);
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 0.96;
}

.about-project__body {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: clamp(30px, 5vw, 64px);
  align-items: center;
}

.about-project.is-text-only .about-project__body { grid-template-columns: minmax(0, 650px); }
.about-project__media { display: block; width: 280px; overflow: hidden; aspect-ratio: 16 / 9; background: var(--surface-raised); }
.about-project__media img { width: 100%; height: 100%; object-fit: cover; transition: filter 260ms ease, transform 650ms var(--ease); }
.about-project__media:hover img { filter: brightness(1.08); transform: scale(1.025); }
.about-project__copy { min-width: 0; }
.about-project__meta { display: flex; flex-wrap: wrap; gap: 7px 16px; margin-bottom: 14px; color: var(--muted); }
.about-project__meta span:first-child { color: var(--accent); }

.about-project__copy h3 {
  margin: 0;
  color: var(--ink);
  font-size: clamp(2.2rem, 4vw, 3.5rem);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 0.98;
}

.about-project__copy p { max-width: 48ch; margin: 17px 0 0; color: var(--muted); font-size: 14px; line-height: 1.65; }
.about-project__link { display: inline-flex; min-height: 44px; align-items: center; gap: 8px; margin-top: 23px; color: var(--accent); font-family: var(--mono); font-size: 9px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.about-project__link span { display: inline-block; transition: transform 180ms ease; }
.about-project__link:hover span { transform: translate(3px, -2px); }

.about-newsletter {
  padding: clamp(88px, 10vw, 132px) 0;
  background: linear-gradient(90deg, var(--surface) 0 68%, transparent 68%);
}

.about-newsletter .home-newsletter { align-self: auto; padding: 34px 0; border-block: 1px solid var(--line); }

.about-elsewhere {
  display: grid;
  grid-template-columns: minmax(220px, 0.65fr) minmax(0, 1.35fr);
  gap: clamp(50px, 8vw, 112px);
  padding: clamp(88px, 10vw, 132px) 0;
}

.about-elsewhere__heading p { max-width: 40ch; margin: 21px 0 0; color: var(--muted); font-size: 14px; line-height: 1.7; }
.about-elsewhere__links { border-top: 1px solid var(--line); }

.about-elsewhere__links a {
  display: flex;
  min-height: 58px;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  transition: color 180ms ease, padding 220ms var(--ease);
}

.about-elsewhere__links a > span:last-child { color: var(--accent); }
.about-elsewhere__links a:hover { padding-inline: 8px; color: var(--accent); }

@media (max-width: 900px) {
  .about-intro { grid-template-columns: minmax(220px, 0.5fr) minmax(0, 1.5fr); gap: 54px; }
  .about-project { grid-template-columns: 1fr; gap: 42px; }
  .about-project__body { grid-template-columns: 240px minmax(0, 1fr); }
  .about-project__media { width: 240px; }
}

@media (max-width: 680px) {
  .about-shell { width: min(calc(100% - 40px), var(--shell)); }
  .about-intro { grid-template-columns: 1fr; gap: 28px; padding-block: 72px 84px; }
  .about-intro__body { padding-top: 0; }
  .about-intro.has-image .about-intro__body { grid-template-columns: 1fr; }
  .about-intro__image { max-width: 360px; }
  .about-intro__copy .about-intro__lead { font-size: clamp(1.4rem, 7vw, 1.9rem); }
  .about-project__body { grid-template-columns: 1fr; }
  .about-project__media { width: min(100%, 280px); }
  .about-newsletter { background: var(--surface); }
  .about-elsewhere { grid-template-columns: 1fr; gap: 38px; }
}

@media (prefers-reduced-motion: reduce) {
  .about-project__media img,
  .about-project__link span,
  .about-elsewhere__links a { transition: none; }
}