/* index.html: the company. Black and white, except A5. */

.machine { overflow: visible; --sw: 2.6; }
.machine .m-lines { stroke: var(--ink); stroke-width: var(--sw); }
.machine .m-keys line { stroke: var(--ink); stroke-width: calc(var(--sw) * .72); stroke-linecap: round; }
.machine .m-keys { transition: none; }
.machine .m-cursor { fill: var(--ink); }
.machine .m-code { font: 400 21px var(--mono); fill: var(--ink); white-space: pre; }

/* ---------- A1 ---------- */
.a1 { position: relative; z-index: 1; display: flex; align-items: center; min-height: min(calc(var(--vh) - var(--nav)), 920px); padding-block: 48px; }
.a1-grid { align-items: end; }
.a1-text { grid-column: 1 / 6; padding-bottom: 4px; }
.a1-lede { font-size: 20px; line-height: 1.5; margin-top: 24px; max-width: 32ch; }
.a1-text .btns { margin-top: 40px; }
.a1-fig { grid-column: 6 / 13; display: flex; justify-content: center; align-items: flex-end; }
.a1-fig svg { width: min(100%, calc(72 * var(--vh) / 100 * 600 / 520)); height: auto; aspect-ratio: 600 / 520; }

/* ---------- A2, static (reduced motion / no JS / short screens) ---------- */
.a2-static { padding-block: 48px clamp(72px, 8vw, 128px); }
.a2-pair { margin: 0; display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(32px, 5vw, 96px); row-gap: 28px; }
.a2-frame { display: contents; }
.a2-frame svg { grid-row: 1; align-self: end; justify-self: center; height: min(56svh, 520px); width: auto; aspect-ratio: 600 / 520; }
.a2-frame:nth-of-type(1) svg { grid-column: 1; height: calc(min(56svh, 520px) * .6); }
.a2-frame:nth-of-type(2) svg { grid-column: 2; }
.a2-frame .fact { grid-row: 2; align-self: start; }
.a2-frame:nth-of-type(1) .fact { grid-column: 1; }
.a2-frame:nth-of-type(2) .fact { grid-column: 2; }
.a2-frame { text-align: center; }
.a2-frame .flow { font-size: 32px; margin: 24px auto 0; max-width: 24ch; }
.a2-run { display: none; }
.stage { display: none; }

/* ---------- A1 + A2 in motion: one sticky stage, one travelling drawing ---------- */
.story.live .stage {
  display: block; position: sticky; top: var(--nav); height: calc(var(--vh) - var(--nav));
  z-index: 0; pointer-events: none;
}
.story.live .stage .machine { position: absolute; left: 0; top: 0; width: 100px; height: auto; aspect-ratio: 600 / 520; }
.story.live .a1 { margin-top: calc(var(--nav) - var(--vh)); }
.story.live #hero-machine { visibility: hidden; }
.story.live .a2-static { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); padding: 0; }
.story.live .a2-run { display: block; height: calc(1.5 * var(--vh)); }
.stage-facts {
  position: absolute; left: var(--pad); right: var(--pad); bottom: clamp(36px, 8vh, 80px);
  display: flex; justify-content: center; align-items: baseline; gap: 24px;
}
.fact-date { font: 400 clamp(40px, 4.4vw, 72px)/1 var(--mono); letter-spacing: -0.02em; }
.fact-stmts { display: grid; width: min(30ch, 100%); font: 500 clamp(24px, 2.4vw, 38px)/1.2 var(--sans); }
.fact-stmt { font: 500 clamp(24px, 2.4vw, 38px)/1.2 var(--sans); letter-spacing: -0.015em; }
.stage-facts .fact-stmt { font: inherit; letter-spacing: -0.015em; }
.fact-stmts .fact-stmt { grid-area: 1 / 1; transition: opacity .2s ease, transform .2s ease; }
.fact-stmts .s2 { opacity: 0; transform: translateY(6px); }
.stage-facts.two .s1 { opacity: 0; transform: translateY(-6px); }
.stage-facts.two .s2 { opacity: 1; transform: none; transition: opacity .26s ease .1s, transform .26s ease .1s; }
.a2-frame .fact { margin: 28px auto 0; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.a2-frame .fact-date { font-size: clamp(36px, 3.4vw, 56px); }
.a2-frame .fact-stmt { font-size: clamp(22px, 2vw, 30px); max-width: 24ch; }

.after { position: relative; }

/* ---------- A3 ---------- */
.a3 { padding-block: clamp(112px, 13vw, 192px) clamp(96px, 12vw, 176px); }
.a3-grid h2 { grid-column: 1 / 6; }
.a3-body { grid-column: 7 / 13; font-size: 19px; line-height: 1.6; max-width: 36em; }
.a3-body p + p { margin-top: 32px; }

/* ---------- A5 ---------- */
.a5 { padding-block: clamp(48px, 6vw, 96px) clamp(48px, 4vw, 72px); }
.panel { border: 1.5px solid var(--ink); display: grid; grid-template-columns: 5fr 7fr; }
.p-text { padding: 40px; display: flex; flex-direction: column; align-items: flex-start; }
.a5-word { font: italic 500 clamp(72px, 7vw, 112px)/0.85 var(--serif); letter-spacing: -0.03em; color: var(--purple); padding-bottom: .08em; }
.a5-body { margin-top: 24px; max-width: 40ch; font-size: 18px; line-height: 1.6; }
.numline { margin: 32px 0; display: flex; align-items: baseline; gap: 8px 20px; }
.num.mid { font-size: clamp(56px, 5.6vw, 88px); line-height: .95; letter-spacing: -0.04em; }
.nl-text { display: flex; flex-direction: column; gap: 4px; max-width: 34ch; }
.nl-text strong { font: 600 17px/1.3 var(--sans); }
.nl-label { font-size: 15px; line-height: 1.45; }
.nl-rc { margin-top: 4px; }
.p-viz { border-left: 1px solid var(--ink); padding: 48px; display: flex; flex-direction: column; justify-content: center; gap: 40px; min-width: 0; }
.a5-chart { height: 220px; }

@media (max-width: 1239px) {
  .numline { flex-direction: column; align-items: flex-start; gap: 12px; }
}

/* ---------- A6 ---------- */
.contact .display { max-width: 16ch; }
.contact .body { font-size: 19px; max-width: 46ch; }
.contact .c-text { grid-column: 1 / 9; }
.contact .c-act { margin-top: 32px; }

/* ---------- footer ---------- */
.foot-word { width: 100%; height: auto; overflow: visible; }
.foot-word text { font: 500 100px var(--sans); letter-spacing: -0.03em; fill: none; stroke: var(--ink); stroke-width: 1.25px; vector-effect: non-scaling-stroke; }
.foot-hint { text-align: right; margin-top: 10px; }

/* ---------- tablet ---------- */
@media (min-width: 760px) and (max-width: 1023px) {
  .a1-text { grid-column: 1 / 7; }
  .a1-fig { grid-column: 7 / 13; }
  .panel { grid-template-columns: 1fr; }
  .p-viz { border-left: 0; border-top: 1px solid var(--ink); }
}

/* ---------- phone ---------- */
@media (max-width: 759px) {
  .a1 { min-height: 0; padding-block: 40px 56px; }
  .a1-text, .a1-fig { text-align: center; }
  .a1-text { display: contents; }
  .a1-grid { display: flex; flex-direction: column; align-items: center; }
  .a1-text h1 { order: 0; }
  .a1-lede { order: 1; font-size: 17px; margin-inline: auto; }
  .a1-fig { order: 2; width: 72%; margin-top: 36px; }
  .a1-fig svg { width: 100%; margin-bottom: 0; }
  .a1-text .btns { order: 3; margin-top: 36px; }

  .a2-pair { grid-template-columns: 1fr; gap: 64px; }
  .a2-frame { text-align: center; }
  .a2-pair { grid-template-columns: 1fr; }
  .a2-frame { display: block; }
  .a2-frame svg { width: 80%; height: auto; margin-inline: auto; }
  .a2-frame:nth-of-type(1) svg { width: 48%; height: auto; }
  .a2-frame + .a2-frame { margin-top: 64px; }
  .machine .m-keys line:nth-child(2), .machine .m-keys line:nth-child(4) { display: none; }
  .machine .m-code { font-size: 30px; }
  .a2-frame .flow { font-size: 28px; margin-inline: auto; max-width: 20ch; }
  .stage-facts { flex-direction: column; align-items: center; gap: 10px; bottom: 40px; text-align: center; }
  .fact-date { font-size: 40px; }
  .fact-stmts { width: min(22ch, 100%); min-height: calc(3 * 1.25em); font-size: 22px; line-height: 1.25; }
  .fact-stmt { font-size: 22px; line-height: 1.25; }
  .a2-frame .fact-date { font-size: 36px; }
  .a2-frame .fact-stmt { font-size: 22px; }

  .a3 { padding-block: 96px 72px; }
  .a3-grid h2 { text-align: center; max-width: 13ch; margin: 0 auto 48px; }
  .a3-body { font-size: 17px; }
  .a3-body p + p { margin-top: 24px; }

  .a5 { padding-block: 24px 48px; }
  .panel { grid-template-columns: 1fr; }
  .p-viz { border-left: 0; border-top: 1px solid var(--ink); padding: 24px 24px 20px 20px; gap: 24px; }
  .a5-chart { height: 150px; }
  .p-text { padding: 28px 20px 24px; align-items: stretch; text-align: center; }
  .a5-word { font-size: 72px; }
  .a5-body { font-size: 17px; }
  .numline { margin: 28px 0; flex-direction: column; align-items: center; }
  .nl-text { align-items: center; margin-inline: auto; }
  .num.mid { font-size: 56px; }
  .p-text .btn { width: 100%; }
}
}