/* assets/rn/pages/approach.css — Approach (3-approach-prototypes). Linked LAST on approach.html.
   The audit family: no signal hue. Marks follow the text colour (paper on ink, ink on paper); red appears only in the
   H1's one phrase (base.css 6) and inside the Example readout (the Fix now chip and the finding rule).
   The page tells one story: the belief (hero, the name), the method (the audit loop and one Example finding), who does
   it (Tom, plus an offline model for the maths), then the closing band.
   Signature motion: the loop draws itself round the ring (data-rn-draw, one quarter per beat) while its stages light up
   in turn, then one Example finding lands like the hero's red finding row (data-rn-stagger-rows + data-rn-finding).
   Everything else is the plain reveal. Transform and opacity only (the ring's stroke draw is the SVG exception), final
   states under reduced motion and html[data-motion=paused] (motion.css), nothing loops.

   1. Hero        3. The audit loop (ring, steps)     5. Who does the work     7. Motion
   2. The name    4. The Example finding               6. Closing band                                       */

body.studio-approach-page {
  --ap-ring-size: clamp(232px, 25vw, 340px);
  /* The 88px grid, as the hero and the closing band draw it: the hero's --rn-grid-line on ink, 4.5% ink on paper. */
  --ap-grid-ink: linear-gradient(var(--rn-grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--rn-grid-line) 1px, transparent 1px);
  --ap-grid-paper: linear-gradient(rgba(9, 11, 13, 0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(9, 11, 13, 0.045) 1px, transparent 1px);
}

/* 1. Hero ─────────────────────────────────────────────────────────────────────────────────────────────────────
   The display H1 on the left, the lede, the one-reviewer line and the actions on the right, their last lines on one
   baseline. No route map (the loop is stated once, in #audit-route) and no disclaimer. */
.ap-hero {
  min-height: 0;
  padding: calc(var(--rn-header-top) + var(--rn-header-h) + clamp(48px, 8vw, 128px)) 0 clamp(56px, 7vw, 112px);
  border-bottom: 1px solid var(--rn-ring);
  background-color: var(--rn-ink);
}

.ap-hero::before {
  opacity: 1;
  background-image: var(--ap-grid-ink);
  background-size: var(--rn-grid) var(--rn-grid);
  background-position: -1px -1px;
}

.ap-hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 420px);
  align-items: end;
  gap: var(--rn-space-7) clamp(40px, 6vw, 96px);
}

/* Three phrases on three lines: the first answer / is rarely / the whole answer. The break after "answer" is in the
   markup; the red phrase is a block. The longest line, "the whole answer.", is 7.49em at the display size (Bricolage's
   optical size widens it to about 8.1em at phone sizes), so the H1 is the display size or 13% of its column (12% on
   phones), whichever is smaller: a narrow column steps the size down instead of breaking the red phrase. From 600px
   the phrase never breaks. */
.ap-hero-copy {
  container-type: inline-size;
}

.ap-hero .ap-hero-copy h1 {
  margin: var(--rn-space-5) 0 0;
  color: var(--rn-text-on-ink);
  font-size: min(var(--rn-fs-display), 12cqi);
}

.ap-hero-copy h1 em {
  display: block;
}

@media (min-width: 600px) {
  .ap-hero .ap-hero-copy h1 {
    font-size: min(var(--rn-fs-display), 13cqi);
  }

  .ap-hero-copy h1 em {
    white-space: nowrap;
  }
}

.ap-hero-aside {
  display: grid;
  gap: var(--rn-space-4);
  justify-self: end;
  width: 100%;
  max-width: 420px;
  padding-bottom: 0.4em;
}

.ap-hero-aside > p {
  max-width: none;
  margin: 0;
  color: var(--rn-muted-on-ink);
  font: 500 var(--rn-fs-lead)/var(--rn-lh-lead) var(--rn-font-body);
}

.ap-hero-aside > .ap-hero-who {
  padding-top: var(--rn-space-4);
  border-top: 1px solid var(--rn-ring);
  color: var(--rn-text-on-ink);
  font: 600 var(--rn-fs-body-lg)/1.45 var(--rn-font-body);
}

.ap-hero-aside .rn-actions {
  margin-top: var(--rn-space-3);
}

.ap-hero .studio-text-link {
  color: var(--rn-text-on-ink);
}

/* 2. The name ─────────────────────────────────────────────────────────────────────────────────────────────────
   Paper on the 88px grid. The H2 on four lines with the lead under it; three white cards with a hairline ring. */
.ap-name {
  padding-block: var(--rn-section);
  background-color: var(--rn-paper);
  background-image: var(--ap-grid-paper);
  background-size: var(--rn-grid) var(--rn-grid);
  background-position: -1px -1px;
  color: var(--rn-text-on-paper);
}

.ap-name-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: start;
  gap: var(--rn-space-7) clamp(40px, 6vw, 96px);
}

.ap-name-head h2 {
  max-width: 11ch;
  margin: var(--rn-space-4) 0 0;
}

.ap-lead {
  max-width: 34ch;
  margin: var(--rn-space-5) 0 0;
  color: var(--rn-muted-on-paper);
  font: 500 var(--rn-fs-lead)/var(--rn-lh-lead) var(--rn-font-body);
}

.ap-principles {
  display: grid;
  gap: var(--rn-space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ap-principle {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  align-items: baseline;
  gap: var(--rn-space-2) var(--rn-space-6);
  padding: clamp(24px, 2.6vw, 36px);
  border: 1px solid rgba(9, 11, 13, 0.12);
  border-radius: var(--rn-radius-card);
  background: var(--rn-paper-hi);
}

.ap-principle h3 {
  margin: 0;
  font-size: var(--rn-fs-title);
}

.ap-principle p {
  max-width: 46ch;
  margin: 0;
  color: var(--rn-muted-on-paper);
}

/* 3. The audit loop ───────────────────────────────────────────────────────────────────────────────────────────
   One ink (the hero's stage colour, its 88px grid) for the whole section. On desktop the four steps sit in the four
   quadrants round the ring, read in order (01 top left, then clockwise); at 900px and below the ring sits above the
   list. The ring: a faint full track, four quarter arcs that draw themselves one beat apart, and four nodes that
   light up (a paper disc fades in and settles from 60%) as the line reaches them, with the step's text rising in on
   the same beat. "Next round" lands in the middle when the loop closes. */
.ap-loop-section {
  padding-block: var(--rn-section);
  border-top: 1px solid var(--rn-ring);
  background-color: var(--rn-stage);
  background-image: var(--ap-grid-ink);
  background-size: var(--rn-grid) var(--rn-grid);
  background-position: -1px -1px;
  color: var(--rn-text-on-ink);
}

.ap-section-head {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  align-items: end;
  gap: var(--rn-space-5) clamp(40px, 6vw, 96px);
  margin-bottom: clamp(56px, 7vw, 104px);
}

.ap-section-head h2 {
  max-width: 14ch;
  margin: var(--rn-space-4) 0 0;
}

.ap-section-head > p {
  max-width: 42ch;
  margin: 0;
  color: var(--rn-muted-on-ink);
  font: 500 var(--rn-fs-body-lg)/1.55 var(--rn-font-body);
}

/* The hero's "See the loop" lands here (#the-loop), so the whole ring and its four steps are in view on arrival.
   html's scroll-padding-top already clears the header; this adds the breathing room. */
.ap-loop {
  position: relative;
  scroll-margin-top: var(--rn-space-5);
}

.ap-ring {
  position: relative;
  width: var(--ap-ring-size);
  aspect-ratio: 1;
}

.ap-ring svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: none;
}

.ap-ring-base circle {
  stroke: var(--rn-ring);
  stroke-width: 1.5;
}

.ap-arc path {
  stroke: var(--rn-text-on-ink);
  stroke-width: 1.75;
  stroke-linecap: round;
}

.ap-node {
  position: absolute;
  display: grid;
  width: 36px;
  height: 36px;
  margin: -18px 0 0 -18px;
  place-items: center;
  box-sizing: border-box;
  border: 1px solid var(--rn-ring);
  border-radius: 50%;
  background: var(--rn-stage);
  color: var(--rn-muted-on-ink);
  font: 500 var(--rn-fs-label)/1 var(--rn-font-mono);
  letter-spacing: 0;
}

.ap-node.is-nw { top: 19.07%; left: 19.07%; }
.ap-node.is-ne { top: 19.07%; left: 80.93%; }
.ap-node.is-se { top: 80.93%; left: 80.93%; }
.ap-node.is-sw { top: 80.93%; left: 19.07%; }

.ap-node-lit {
  position: absolute;
  inset: -1px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--rn-text-on-ink);
  color: var(--rn-ink);
  font-style: normal;
}

.ap-ring-centre {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  color: var(--rn-muted-on-ink);
  font: 500 var(--rn-fs-label)/1.3 var(--rn-font-mono);
  letter-spacing: var(--rn-track-label);
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
}

.ap-ring-centre::before {
  display: block;
  margin: 0 auto 6px;
  color: var(--rn-text-on-ink);
  font: 400 1.25rem/1 var(--rn-font-body);
  content: "\21BB";
}

.ap-steps {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ap-steps > li {
  display: grid;
  gap: var(--rn-space-2);
  align-content: start;
}

.ap-step-no {
  color: var(--rn-muted-on-ink);
  font: 500 var(--rn-fs-label)/1.3 var(--rn-font-mono);
  letter-spacing: var(--rn-track-label);
}

.ap-steps h3 {
  margin: 0;
  color: var(--rn-text-on-ink);
  font-size: var(--rn-fs-h3);
}

.ap-steps p {
  max-width: 34ch;
  margin: var(--rn-space-1) 0 0;
  color: var(--rn-muted-on-ink);
}

@media (min-width: 901px) {
  .ap-steps {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--ap-ring-size) minmax(0, 1fr);
    grid-template-rows: minmax(calc(var(--ap-ring-size) / 2), auto) minmax(calc(var(--ap-ring-size) / 2), auto);
    gap: var(--rn-space-7) clamp(40px, 5vw, 88px);
  }

  .ap-steps > li:nth-child(1) { grid-area: 1 / 1; align-self: start; }
  .ap-steps > li:nth-child(2) { grid-area: 1 / 3; align-self: start; }
  .ap-steps > li:nth-child(3) { grid-area: 2 / 3; align-self: end; }
  .ap-steps > li:nth-child(4) { grid-area: 2 / 1; align-self: end; }

  /* The left-hand steps sit against the ring, so the diagram reads as one piece. */
  .ap-steps > li:is(:nth-child(1), :nth-child(4)) {
    justify-self: end;
    text-align: right;
  }

  .ap-steps > li:is(:nth-child(1), :nth-child(4)) p {
    margin-left: auto;
  }

  .ap-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
  }
}

/* 4. The Example finding ──────────────────────────────────────────────────────────────────────────────────────
   Step 03's output, one line of the readout: a paper rn-example card on the ink. Its rows land one after another and
   the finding's red rule draws once it has landed (motion.css 5), like the hero's findings list. */
.ap-example-row {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: center;
  gap: var(--rn-space-6) clamp(40px, 6vw, 96px);
  margin-top: clamp(72px, 9vw, 128px);
  padding-top: clamp(40px, 5vw, 64px);
  border-top: 1px solid var(--rn-ring);
}

.ap-example-copy h3 {
  max-width: 18ch;
  margin: 0;
  color: var(--rn-text-on-ink);
  font-size: var(--rn-fs-h3);
}

.ap-example-copy p {
  max-width: 38ch;
  margin: var(--rn-space-3) 0 0;
  color: var(--rn-muted-on-ink);
}

.ap-example .rn-readout > li {
  grid-template-columns: 4.5em minmax(0, 1fr) auto;
  gap: var(--rn-space-4);
  padding: var(--rn-space-4) 0;
}

.ap-example .rn-readout > li:first-child .rn-readout-finding {
  font-weight: 700;
}

.ap-example .ap-note {
  color: var(--rn-muted);
  font-weight: 500;
}

.ap-loop-actions {
  margin-top: clamp(48px, 6vw, 72px);
}

/* 5. Who does the work ─────────────────────────────────────────────────────────────────────────────────────────
   Paper. The H2 and a link to Tom's background on the left; three plain facts on a white card on the right. */
.ap-who {
  padding-block: var(--rn-section) var(--rn-section-tight);
  background: var(--rn-paper);
  color: var(--rn-text-on-paper);
}

.ap-who-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: start;
  gap: var(--rn-space-6) clamp(40px, 6vw, 96px);
}

.ap-who-head h2 {
  max-width: 12ch;
  margin: var(--rn-space-4) 0 var(--rn-space-4);
}

.ap-who-list {
  margin: 0;
  padding: 0 clamp(24px, 2.6vw, 36px);
  border: 1px solid rgba(9, 11, 13, 0.12);
  border-radius: var(--rn-radius-card);
  background: var(--rn-paper-hi);
}

.ap-who-list > div {
  display: grid;
  grid-template-columns: 9.5em minmax(0, 1fr);
  align-items: baseline;
  gap: var(--rn-space-2) var(--rn-space-5);
  padding: var(--rn-space-5) 0;
  border-top: 1px solid var(--rn-line-on-paper);
}

.ap-who-list > div:first-child {
  border-top: 0;
}

.ap-who-list dt {
  color: var(--rn-muted-on-paper);
  font: 500 var(--rn-fs-label)/1.4 var(--rn-font-mono);
  letter-spacing: var(--rn-track-label);
  text-transform: uppercase;
}

.ap-who-list dd {
  max-width: 48ch;
  margin: 0;
  color: var(--rn-text-on-paper);
  font: 500 var(--rn-fs-body-lg)/1.5 var(--rn-font-body);
}

/* 6. Closing band ───────────────────────────────────────────────────────────────────────────────────────────────
   The shared rn-band (components.css 13). The copy and the button share the top row; the four project routes (the
   old services row) sit under a hairline as small ringed chips, after the button in reading order. */
.ap-who + .rn-band {
  padding-top: var(--rn-space-5);
}

.rn-band .studio-cta-grid > div:first-child > p:not(.studio-kicker) {
  margin: var(--rn-space-5) 0 0;
}

.ap-band-actions {
  display: contents;
}

.ap-band-actions > .studio-button {
  grid-column: 2;
  grid-row: 1;
  align-self: end;
}

.ap-band-routes {
  display: flex;
  flex-wrap: wrap;
  grid-column: 1 / -1;
  align-items: center;
  gap: var(--rn-space-3) var(--rn-space-5);
  padding-top: var(--rn-space-5);
  border-top: 1px solid var(--rn-ring);
}

.rn-band .ap-band-routes > p {
  margin: 0;
  color: var(--rn-muted-on-ink);
  font: 500 var(--rn-fs-label)/1.3 var(--rn-font-mono);
  letter-spacing: var(--rn-track-label);
  text-transform: uppercase;
}

.ap-band-routes ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rn-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ap-band-routes .rn-chip {
  border-color: var(--rn-ring);
  color: var(--rn-text-on-ink);
}

@media (hover: hover) {
  .ap-band-routes .rn-chip:hover {
    border-color: var(--rn-text-on-ink);
  }
}

/* Breakpoints ─────────────────────────────────────────────────────────────────────────────────────────────────── */
@media (min-width: 901px) and (max-width: 1180px) {
  .ap-principle {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Below 1280 the H1 cannot hold the display size beside the aside, so the hero stacks as it does on tablets (as AI
   Alchemy's does, base.css 10): the H1 keeps its full size on three lines. The aside follows in two columns under
   one hairline each, the lede on the left, the one-reviewer line and the actions on the right, so the whole hero
   (its Brief an audit pill included) sits inside a 1024x768 or 1280x720 screen. */
@media (min-width: 901px) and (max-width: 1279px) {
  .ap-hero {
    padding-top: calc(var(--rn-header-top) + var(--rn-header-h) + 40px);
  }

  .ap-hero-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .ap-hero-aside {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto 1fr;
    justify-self: stretch;
    max-width: none;
    column-gap: clamp(40px, 6vw, 96px);
    padding-bottom: 0;
  }

  .ap-hero-aside > p:first-child {
    grid-row: 1 / span 2;
    max-width: 36ch;
    padding-top: var(--rn-space-4);
    border-top: 1px solid var(--rn-ring);
  }

  .ap-hero-aside > .ap-hero-who {
    grid-column: 2;
  }

  .ap-hero-aside .rn-actions {
    grid-column: 2;
    align-self: end;
  }
}

@media (max-width: 900px) {
  .ap-hero-grid,
  .ap-name-grid,
  .ap-section-head,
  .ap-example-row,
  .ap-who-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .ap-hero-aside {
    justify-self: start;
    padding-bottom: 0;
  }

  .ap-ring {
    margin: 0 auto var(--rn-space-7);
  }

  .ap-steps > li {
    grid-template-columns: 2.75em minmax(0, 1fr);
    gap: var(--rn-space-1) var(--rn-space-3);
    padding: var(--rn-space-5) 0;
    border-top: 1px solid var(--rn-ring);
  }

  .ap-step-no {
    grid-row: span 2;
    padding-top: 0.45em;
  }

  .ap-band-actions > .studio-button {
    grid-column: 1;
    grid-row: auto;
    justify-self: start;
  }
}

/* Tablet: the ring sits above the list, and the four steps pair up two by two so each row fills the width, in the
   same measure as the Example card below. */
@media (min-width: 720px) and (max-width: 900px) {
  .ap-steps {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--rn-space-6);
  }
}

@media (max-width: 640px) {
  body.studio-approach-page {
    --ap-ring-size: min(248px, 68vw);
  }

  .ap-who-list > div,
  .ap-principle {
    grid-template-columns: minmax(0, 1fr);
  }

  .ap-example .rn-readout > li {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--rn-space-1) var(--rn-space-3);
  }

  .ap-example .rn-readout-area {
    grid-column: 1 / -1;
    grid-row: 1;
    text-align: left;
  }
}

/* 7. Motion ──────────────────────────────────────────────────────────────────────────────────────────────────────
   A lit node lands on the UI spring from 60% while it fades in, on its beat (motion.js sets --rn-delay). Reduced
   motion and the site pause show every node lit and every arc drawn (motion.css 2, 4 and 5). */
@media (prefers-reduced-motion: no-preference) {
  html.js:not([data-motion="paused"]) .ap-node-lit.is-visible:not(.rn-shown) {
    animation:
      rn-reveal-fade var(--rn-dur-fade) var(--rn-ease-critical) backwards,
      ap-node-pop var(--rn-dur-ui) var(--rn-ease-ui) backwards;
    animation-delay: var(--rn-delay, 0ms);
  }
}

@keyframes ap-node-pop {
  from {
    scale: 0.6;
  }
}