/* About page — same tokens and chrome as the home page (site.css). */
body.about { background: var(--paper); }
@media (max-width: 700px) { body.about { --pad: 12px; --gap: 10px; } }
body.about .scroll-space { display: none; }

.ab-meta {
  display: flex;
  justify-content: space-between;
  padding-top: 0.55vh;
  font-size: max(11px, 0.68vw);
  letter-spacing: -0.03em;
}

/* ---------- hero ---------- */
.ab-hero {
  position: relative;
  height: 100vh;
  min-height: 520px;
}
.ab-hero__title {
  position: absolute;
  left: 0.3vw; top: -2.15vw;
  font-size: 14.1vw;
  line-height: 1;
  letter-spacing: -0.068em;
  white-space: nowrap;
}
.ab-hero__tag {
  position: absolute;
  left: 0.75vw; top: 45.6vh;
  font-size: 1.16vw;
  line-height: 1.42;
  letter-spacing: -0.035em;
}
.ab-hero__tag span { display: block; }
.ab-hero__year {
  position: absolute;
  right: 0.45vw; top: 46.5vh;
  font-size: 14.6vw;
  line-height: 1;
  letter-spacing: -0.06em;
  color: var(--red-text);
}
.ab-hero .ch { display: inline-block; will-change: filter, opacity, transform; }

/* ---------- wide studio image ---------- */
.ab-wide { margin: 0 var(--pad); }
.ab-wide__frame {
  height: 92vh;
  overflow: hidden;
  background: #fff;
}
.ab-wide__frame img, .ph__frame img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  will-change: transform;
}

/* ---------- intro ---------- */
.ab-intro { padding: 22vh var(--pad) 16vh; }
.ab-lead {
  max-width: 78vw;
  font-size: 3.55vw;
  line-height: 1.04;
  letter-spacing: -0.055em;
}
[data-words] .w { display: inline-block; will-change: filter, opacity; }

/* ---------- facts ---------- */
.ab-facts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap);
  margin: 0 var(--pad);
  padding-bottom: 22vh;
}
.fact { border-top: 1px solid var(--ink); padding-top: 1vh; display: flex; flex-direction: column; gap: 3vh; }
.fact__k { font-size: max(11px, 0.68vw); letter-spacing: -0.03em; }
.fact__v { font-size: 6.2vw; line-height: 0.9; letter-spacing: -0.065em; }

/* ---------- section heading ---------- */
.ab-h {
  margin: 0 var(--pad) 6vh;
  font-size: 3.45vw;
  line-height: 1.1;
  letter-spacing: -0.06em;
}
.ab-h .ch { display: inline-block; }

/* ---------- how we work ---------- */
.ab-how { background: var(--fog); padding: 18vh 0 22vh; }
.ab-how__cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap);
  margin: 0 var(--pad);
}
.how { border-top: 1px solid var(--ink); padding-top: 1vh; }
.how__n { font-size: max(11px, 0.68vw); color: var(--red-text); }
.how__t { font-weight: 400; font-size: 4.6vw; letter-spacing: -0.065em; line-height: 1; margin: 5vh 0 3vh; }
.how__p { font-size: max(15px, 1.35vw); line-height: 1.22; letter-spacing: -0.035em; max-width: 26vw; }

/* ---------- studio grid ---------- */
.ab-studio { background: var(--fog); padding-bottom: 24vh; }
.ab-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 9vh var(--gap);
  margin: 0 var(--pad);
  align-items: start;
}
.ph { margin: 0; }
.ph__frame { overflow: hidden; background: #fff; }
.ph--a { grid-column: 1 / span 4; }
.ph--a .ph__frame { aspect-ratio: 3 / 4; }
.ph--b { grid-column: 5 / span 8; margin-top: 18vh; }
.ph--b .ph__frame { aspect-ratio: 16 / 9; }
.ph--c { grid-column: 2 / span 3; }
.ph--c .ph__frame { aspect-ratio: 3 / 4; }
.ph--d { grid-column: 6 / span 4; margin-top: 12vh; }
.ph--d .ph__frame { aspect-ratio: 4 / 5; }
.ph--e { grid-column: 10 / span 3; margin-top: 30vh; }
.ph--e .ph__frame { aspect-ratio: 3 / 4; }

/* ---------- timeline ---------- */
.ab-time { padding: 20vh 0 18vh; }
.tl-list { list-style: none; margin: 0 var(--pad); padding: 0; }
.tl-row {
  display: grid;
  grid-template-columns: 25% 1fr;
  gap: var(--gap);
  border-top: 1px solid var(--ink);
  padding: 1.2vh 0 7vh;
}
.tl-y { font-size: 6.2vw; line-height: 0.9; letter-spacing: -0.065em; color: var(--red-text); }
.tl-t { font-size: 2.3vw; line-height: 1.06; letter-spacing: -0.05em; max-width: 52vw; }

/* ---------- open call ---------- */
.ab-call { background: var(--red); color: #fff; padding: 16vh var(--pad) 18vh; }
.ab-call__k { font-size: max(11px, 0.68vw); letter-spacing: -0.03em; margin-bottom: 5vh; }
.ab-call__big { font-size: 5.4vw; line-height: 0.98; letter-spacing: -0.065em; max-width: 84vw; }
.ab-call__btn {
  display: inline-flex; align-items: center; justify-content: center;
  margin-top: 7vh;
  height: max(34px, 4vh);
  padding: 0 max(18px, 1.4vw);
  background: #000; color: #fff;
  font-size: max(12px, 0.75vw);
  letter-spacing: -0.035em;
  transition: background-color 0.25s, color 0.25s;
}
.ab-call__btn:hover { background: #fff; color: #000; }

/* ---------- footer ---------- */
.ab-foot { padding: 6vh var(--pad) 12vh; overflow: hidden; }
.ab-foot__mark {
  font-size: 19.4vw;
  line-height: 0.9;
  letter-spacing: -0.075em;
  margin-left: -0.6vw;
  white-space: nowrap;
}
.ab-foot__mark .ch { display: inline-block; }
.ab-foot__row {
  display: flex; justify-content: space-between;
  border-top: 1px solid var(--ink);
  padding-top: 1vh; margin-top: 3vh;
  font-size: max(11px, 0.68vw);
  letter-spacing: -0.03em;
}

.cta__btn--red { transition: background-color 0.35s, color 0.35s; }
body.on-red .cta__btn--red { background: #fff; color: var(--red-text); }

@media (max-width: 700px) {
  .ab-hero { height: 100svh; min-height: 560px; }
  .ab-hero__title { left: 1.4vw; top: var(--m-top); font-size: 28vw; }
  .ab-hero__tag { top: auto; bottom: 122px; left: 3vw; width: 56vw; font-size: 13px; line-height: 1.38; }
  .ab-hero__year { top: auto; bottom: 104px; right: 2vw; font-size: 20vw; }
  .ab-wide__frame { height: auto; aspect-ratio: 4 / 5; }
  .ab-intro { padding: 12vh var(--pad) 10vh; }
  .ab-facts { padding-bottom: 14vh; }
  .ab-how { padding: 12vh 0 14vh; }
  .ab-studio { padding-bottom: 14vh; }
  .ab-time { padding: 12vh 0 10vh; }
  .ab-call { padding: 12vh var(--pad) 14vh; }
  .ab-foot { padding-bottom: 80px; }
  .ab-meta, .ab-foot__row { font-size: 11px; }
  .ab-lead { font-size: 7vw; max-width: none; }
  .ab-facts, .ab-how__cols { grid-template-columns: 1fr 1fr; row-gap: 5vh; }
  .ab-how__cols { grid-template-columns: 1fr; }
  .how__t { font-size: 11vw; }
  .how__p { max-width: none; }
  .fact__v { font-size: 12vw; }
  .ab-h { font-size: 9vw; }
  .ab-grid { grid-template-columns: 1fr 1fr; }
  .ph--a, .ph--c, .ph--d, .ph--e { grid-column: auto; margin-top: 0; }
  .ph--b { grid-column: 1 / -1; margin-top: 0; }
  .tl-row { grid-template-columns: 1fr; }
  .tl-y { font-size: 14vw; }
  .tl-t { font-size: 6vw; max-width: none; }
  .ab-call__big { font-size: 10vw; }
}