/* Risk, compliance, and privacy (site v3), this page's own design, 2026-09-24. Hand-authored: the words
   live in index.html beside this file, edited directly. Shared pieces (nav, hero grid, the other-areas
   tiles, contact band, footer) come from site.css, site-local.css, art.css and practice.css.
   Tokens only, never hex, so dark mode follows. No eyebrows: hierarchy is font weight. Every gold
   streak is round-ended. Gold marks what works; what fails is drawn in plain rules. */

/* ---------- Bands ---------- */
.rk-band { padding-block: var(--space-24); }
.rk-band--ground { background: var(--ground); color: var(--ink); }
.rk-band--alt { background: var(--ground-alt); color: var(--ink); }
.rk-band--stone { background: var(--stone); color: var(--on-stone); }

.rk-h2 { font-family: var(--font-serif); font-size: 56px; line-height: 1.04; font-weight: 600; letter-spacing: -.02em; margin: 0; text-wrap: balance; }
.rk-head { max-width: 22ch; margin-bottom: var(--space-6); }
.rk-lede { font-size: 21px; line-height: 1.5; color: var(--body); max-width: 56ch; margin: 0 0 var(--space-12); }
.rk-band--stone .rk-lede, .rk-band--stone .rk-after { color: var(--on-stone-muted); }

/* ---------- Hero: the area name and the promise are one title at two weights ---------- */
.rk-area { display: block; font-size: .5em; line-height: 1.1; font-weight: 250; letter-spacing: -.01em; color: var(--on-stone-muted); margin-bottom: var(--space-3); }

/* ---------- Confidentiality comes first: what an agency holds, then step zero ---------- */
.rk-split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-16); align-items: start; }
.rk-split__head { position: sticky; top: calc(var(--site-nav-h) + var(--space-12)); }
.rk-held { list-style: none; margin: 0 0 var(--space-12); padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.rk-held li { font-family: var(--font-serif); font-size: 40px; line-height: 1.15; font-weight: 300; font-style: italic; letter-spacing: -.01em; color: var(--ink); }
.rk-prose { display: flex; flex-direction: column; gap: var(--space-6); }
.rk-prose p { font-size: 19px; line-height: 1.6; color: var(--body); margin: 0; max-width: 60ch; }
.rk-prose b { color: var(--ink); font-weight: 650; }

/* ---------- Where risk work fails: three fates in plain rules, then the one line in gold ---------- */
.rk-fates { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-12); }
.rk-fates li { border-top: var(--streak) solid var(--line-strong); padding-top: var(--space-5); font-family: var(--font-serif); font-size: 24px; line-height: 1.3; font-weight: 400; color: var(--ink); text-wrap: pretty; }
.rk-worse { margin-top: var(--space-16); }
.rk-worse p { font-family: var(--font-serif); font-size: 48px; line-height: 1.12; font-weight: 300; letter-spacing: -.015em; color: var(--ink); margin: 0; max-width: 24ch; text-wrap: balance; }
.rk-worse b { font-weight: 650; }
.rk-worse p.rk-worse__why { font-family: var(--font-sans); font-size: 19px; line-height: 1.6; font-weight: 400; letter-spacing: 0; color: var(--body); max-width: 60ch; margin-top: var(--space-6); }

/* ---------- Measure, fix, measure again: a tailor's tape unrolls under the three steps ----------
   The tape lays down left to right from its zero end while the roll travels ahead of it, turning
   and shrinking as it gives up tape, and rests at the far end. The tape itself never moves: the roll
   carries a stone cover over the tape still to come, so one transform lays it down and its leading
   edge is always under the roll. The steps are read off the tape, each marked by a gold post. Ticks
   and numbers are on-gold, dark in both themes. The band clips the cover where it runs past the wrap. */
.rk-band--stone { overflow: hidden; }
.rk-cycle { --tape-h: 40px; --coil: 72px; --tape-ease: cubic-bezier(.25,.6,.25,1); --tape-time: 2.2s; --give: 1.35; position: relative; padding-top: var(--coil); }
.rk-tape { position: absolute; top: 0; left: 0; right: 0; height: var(--coil); }
.rk-tape__band { position: absolute; left: 0; right: calc(var(--coil) / 2); bottom: 0; height: var(--tape-h); overflow: hidden; border-radius: var(--radius-card) 0 0 var(--radius-card); background-color: var(--gold); background-image: linear-gradient(to right, var(--on-gold) 2px, transparent 2px), linear-gradient(to right, var(--on-gold) 1.5px, transparent 1.5px), linear-gradient(to right, var(--on-gold) 1px, transparent 1px); background-size: 48px 16px, 24px 11px, 6px 6px; background-position: 12px 100%; background-repeat: repeat-x; }
.rk-tape__nums { position: absolute; top: 5px; left: 36px; display: flex; }
.rk-tape__nums i { flex: none; width: 48px; text-align: center; font-family: var(--font-mono); font-size: 12px; line-height: 1; font-weight: 500; font-style: normal; color: var(--on-gold); }
.rk-tape__roller { position: absolute; top: 0; bottom: 0; left: 0; right: var(--coil); animation: rk-roll var(--tape-time) var(--tape-ease) both; }
.rk-tape__roller::before { content: ""; position: absolute; left: calc(100% + var(--coil) / 2); bottom: -1px; width: 100%; height: calc(var(--tape-h) + 2px); background: var(--stone); }
.rk-tape__coil { position: absolute; left: 100%; bottom: 0; width: var(--coil); height: var(--coil); transform-origin: 50% 100%; animation: rk-give var(--tape-time) var(--tape-ease) both; }
.rk-tape__coil svg { display: block; width: 100%; height: 100%; animation: rk-turn var(--tape-time) var(--tape-ease) both; }
.rk-tape__disc { fill: var(--gold); }
.rk-tape__wind { fill: none; stroke: var(--on-gold); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; opacity: .55; }
.rk-tape__hub { fill: var(--stone); }
@keyframes rk-roll { from { transform: translateX(-100%); } }
@keyframes rk-give { from { transform: scale(var(--give)); } }
@keyframes rk-turn { from { transform: rotate(-4turn); } }
.rk-cycle__steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-12); }
.rk-cycle__steps li { position: relative; padding: var(--space-12) var(--space-8) 0 0; }
.rk-cycle__steps li::before { content: ""; position: absolute; top: var(--space-3); left: 0; width: var(--streak); height: var(--space-6); border-radius: var(--radius-streak); background: var(--gold); }
.rk-cycle__steps b { display: block; font-family: var(--font-serif); font-size: 32px; line-height: 1.1; font-weight: 600; color: var(--on-stone); margin-bottom: var(--space-2); }
.rk-cycle__steps span { display: block; font-size: 19px; line-height: 1.5; color: var(--on-stone); max-width: 32ch; }
.rk-after { font-size: 19px; line-height: 1.6; max-width: 62ch; margin: var(--space-16) 0 0; }

/* ---------- Where risk lives: four fronts, each marked by one gold post (the hero art's ring) ---------- */
.rk-fronts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-16) var(--space-16); margin-top: var(--space-6); }
.rk-front { display: grid; grid-template-columns: var(--space-4) minmax(0, 1fr); column-gap: var(--space-6); align-content: start; }
.rk-front::before { content: ""; grid-row: 1 / span 4; width: 6px; height: 44px; margin-top: 4px; background: var(--gold); border-radius: var(--radius-streak); }
.rk-front h3 { grid-column: 2; font-family: var(--font-serif); font-size: 30px; line-height: 1.15; font-weight: 600; color: var(--ink); margin: 0 0 var(--space-4); }
.rk-front p { grid-column: 2; font-size: 19px; line-height: 1.6; color: var(--body); margin: 0 0 var(--space-4); max-width: 52ch; }
.rk-front p:last-child { margin-bottom: 0; }

/* ---------- Breakpoints: the design system's (1023, 899, 719) ---------- */
@media (max-width: 1023px) {
  .rk-split { grid-template-columns: 1fr; gap: var(--space-8); }
  .rk-split__head { position: static; }
  .rk-fates { grid-template-columns: 1fr; gap: var(--space-6); max-width: 60ch; }
  .rk-fronts { grid-template-columns: 1fr; gap: var(--space-12); max-width: 68ch; }
}
@media (max-width: 899px) {
  .rk-band { padding-block: var(--space-16); }
  .rk-h2 { font-size: 44px; }
  .rk-held li { font-size: 32px; }
  .rk-worse p { font-size: 38px; }
  /* The tape turns upright: it unrolls down the left, the roll comes to rest at the foot, the steps
     hang off it to the right. */
  .rk-cycle { --tape-h: 40px; --coil: 64px; --give: 1.15; padding-top: 0; padding-left: calc(var(--coil) + var(--space-6)); }
  .rk-tape { bottom: 0; right: auto; width: calc(var(--coil) * 1.4); height: auto; overflow: hidden; }
  .rk-tape__band { right: auto; top: 0; bottom: calc(var(--coil) / 2); width: var(--tape-h); height: auto; border-radius: var(--radius-card) var(--radius-card) 0 0; background-image: linear-gradient(var(--on-gold) 2px, transparent 2px), linear-gradient(var(--on-gold) 1.5px, transparent 1.5px), linear-gradient(var(--on-gold) 1px, transparent 1px); background-size: 16px 48px, 11px 24px, 6px 6px; background-position: 0 12px; background-repeat: repeat-y; }
  .rk-tape__nums { top: 36px; left: auto; right: 5px; flex-direction: column; }
  .rk-tape__nums i { width: auto; height: 48px; line-height: 48px; text-align: right; }
  .rk-tape__roller { right: 0; bottom: var(--coil); animation-name: rk-roll-down; }
  .rk-tape__roller::before { left: -1px; top: calc(100% + var(--coil) / 2); bottom: auto; width: calc(var(--tape-h) + 2px); height: 100%; }
  .rk-tape__coil { left: 0; top: 100%; bottom: auto; transform-origin: 0 0; }
  .rk-cycle__steps { grid-template-columns: 1fr; gap: var(--space-8); padding-block: var(--space-6) calc(var(--coil) + var(--space-2)); }
  .rk-cycle__steps li { padding: 0; }
  .rk-cycle__steps li::before { top: 13px; left: calc(var(--tape-h) + var(--space-2) - var(--coil) - var(--space-6)); width: var(--space-4); height: var(--streak); }
}
@keyframes rk-roll-down { from { transform: translateY(-100%); } }
@media (max-width: 719px) {
  .rk-h2 { font-size: 34px; }
  .rk-held li { font-size: 26px; }
  .rk-fates li { font-size: 21px; }
  .rk-worse p { font-size: 28px; }
  .rk-cycle__steps b { font-size: 26px; }
  .rk-front h3 { font-size: 26px; }
}

@media (prefers-reduced-motion: reduce) { .rk-tape, .rk-tape * { animation: none !important; } }