/* ============================================================
   Solto — How We Work
   Tonal-band rhythm (mirrors About): warm-white "Shape" with a
   3-up retainer cluster → full-bleed DARK-GREEN "Process" carrying
   a flowing-arrow diagram (arrows draw on via JS, drawn by default)
   → full-bleed BLUSH "Principles". Same type system + numbered
   flavor as the rest of the site. Bands flip theme tokens via
   .panel-dark / .panel-blush, so colors below are all semantic.
   ============================================================ */

/* --- Shared band head: quiet chapter number + large section name.
   The number keeps the site's 01/02/03 thread; the name is the only
   headline (no redundant eyebrow + headline pair). ------------- */
.band-head { max-width: var(--page-max); margin-inline: auto; }
.band-num {
  font-family: var(--font-mono); font-size: 1rem; letter-spacing: 0.06em;
  color: var(--display-fg); font-variant-numeric: tabular-nums; margin-bottom: var(--space-sm);
}
.band-title {
  font-size: clamp(2.3rem, 1.5rem + 3.4vw, 4rem); color: var(--display-fg);
  line-height: var(--display-leading); letter-spacing: var(--display-tracking);
}

/* ============================================================
   01 — The Shape (warm white): the business model as two phases —
   a one-time BUILD (open prose) → an ongoing RETAINER (a contained
   panel that holds the 3 nested sub-items, so they read as belonging
   to the retainer). Chapter head + deck shared with Process/Principles.
   ============================================================ */
/* .sr-only lives in site.css (shared) */

/* extra top room so the page opens with breathing space (no intro band now) */
.shape { padding-block: clamp(5.5rem, 4rem + 5vw, 8.5rem) clamp(4.5rem, 3.5rem + 5vw, 8rem); }
.shape-body { max-width: var(--page-max); margin-inline: auto; margin-top: clamp(2rem, 1.5rem + 2vw, 3.5rem); }
.shape-deck {
  font-family: var(--font-condensed); font-weight: var(--display-weight);
  font-size: clamp(1.5rem, 1.15rem + 1.6vw, 2.3rem); line-height: 1.08;
  color: var(--display-fg); max-width: 24ch; text-wrap: balance;
}

/* two phases — build (left) then retainer (right) on desktop */
.shape-phases { margin-top: clamp(2.25rem, 1.5rem + 2.5vw, 4rem); display: grid; gap: clamp(2rem, 1.5rem + 2vw, 3rem); }
@media (min-width: 860px) {
  .shape-phases { grid-template-columns: 1fr 1fr; column-gap: clamp(1.25rem, 0.5rem + 2vw, 2.5rem); align-items: stretch; }
}
/* phase labels get a short leading tick — a small editorial detail */
.phase-label {
  display: inline-flex; align-items: center; gap: 0.65rem;
  font-family: var(--font-mono); font-size: var(--type-mono); letter-spacing: var(--tracking-mono);
  text-transform: uppercase; color: var(--display-fg); margin-bottom: var(--space-md);
}
.phase-label::before { content: ''; width: 1.6rem; height: 1px; background: currentColor; opacity: 0.55; }

/* Both phases are cards now (balanced): a muted SAGE "up front" card + the
   BLUSH "ongoing" card. Sage is a pale tint of the same green as the Process
   band, so it relates without competing with that deep full-bleed green. */
.phase-build, .retainer-panel {
  position: relative; overflow: hidden;
  border-radius: var(--radius); padding: clamp(1.75rem, 1.2rem + 2vw, 3rem);
}
.phase-build { background: color-mix(in oklab, var(--ground) 15%, var(--surface)); }
.phase-build::before, .retainer-panel::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  opacity: 0.05; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.phase-build > *, .retainer-panel > * { position: relative; z-index: 1; }

/* a key phrase lifted in green — the site's accent device (cf. About) gives
   each line an anchor so the card reads as designed points, not a text block. */
.shape .accent { color: var(--display-fg); font-weight: 500; }

/* Up front = 3 dotted points (Shannon's sentences verbatim), not a paragraph wall */
.build-list { list-style: none; display: grid; gap: clamp(1.15rem, 0.85rem + 1vw, 1.7rem); }
.build-list li {
  position: relative; padding-left: 1.5rem;
  font-size: var(--type-lead); line-height: 1.55; color: var(--muted-fg);
}
.build-list li::before {
  content: ''; position: absolute; left: 0; top: 0.6em;
  width: 0.42rem; height: 0.42rem; border-radius: 50%; background: var(--display-fg);
}
.retainer-lead { font-size: var(--type-lead); line-height: 1.5; color: var(--page-fg); max-width: 42ch; margin-bottom: var(--space-lg); }
.retainer-items { list-style: none; display: grid; }
.retainer-items li {
  position: relative; padding-left: 1.5rem; padding-block: var(--space-md);
  border-top: 1px solid var(--rule);
}
.retainer-items li:first-child { border-top: 0; }
.retainer-items li:last-child { padding-bottom: 0; }
.retainer-items li::before {
  content: ''; position: absolute; left: 0; top: calc(var(--space-md) + 0.55em);
  width: 0.42rem; height: 0.42rem; border-radius: 50%; background: var(--display-fg);
}
.r-label {
  display: block; font-family: var(--font-condensed); font-weight: var(--display-weight);
  font-size: clamp(1.2rem, 1.05rem + 0.7vw, 1.5rem); line-height: 1.04;
  color: var(--display-fg); margin-bottom: var(--space-2xs);
}
.r-text { color: var(--muted-fg); font-size: clamp(1rem, 0.97rem + 0.2vw, 1.1rem); line-height: 1.5; }

/* ============================================================
   02 — The Process (full-bleed dark green): flowing-arrow diagram
   ============================================================ */
.process { padding-block: clamp(5rem, 3.5rem + 6vw, 9rem); }

.flow {
  max-width: var(--page-max); margin-inline: auto;
  margin-top: clamp(2.75rem, 1.5rem + 4vw, 5.5rem);
  display: flex; align-items: flex-start; gap: clamp(0.75rem, 0.2rem + 2vw, 2.25rem);
}
.flow-step { flex: 1 1 0; min-width: 0; }
.flow-node {
  display: flex; align-items: center; justify-content: center;
  width: clamp(3.4rem, 3rem + 1.6vw, 4.5rem); aspect-ratio: 1; border-radius: 50%;
  border: 1px solid color-mix(in oklab, var(--display-fg) 55%, transparent);
  font-family: var(--font-mono); font-size: var(--type-mono); letter-spacing: 0.06em;
  color: var(--display-fg); font-variant-numeric: tabular-nums;
  margin-bottom: var(--space-md);
}
.flow-title {
  font-family: var(--font-condensed); font-weight: var(--display-weight);
  font-size: clamp(1.45rem, 1.1rem + 1.2vw, 2.1rem); line-height: 1.02;
  color: var(--display-fg); margin-bottom: var(--space-sm);
}
.flow-line {
  color: var(--muted-fg); line-height: 1.55; max-width: 34ch;
  font-size: clamp(1.02rem, 0.98rem + 0.3vw, 1.15rem);
}
.flow-title.slot, .flow-line.slot { color: var(--faint-fg); }

/* connector — drawn by default; JS animates the stroke on scroll.
   margin-top lifts it to the vertical center of the numbered node. */
.flow-arrow {
  flex: 0 0 auto; width: clamp(2.25rem, 5.5vw, 7rem); height: auto; overflow: visible;
  margin-top: clamp(1.4rem, 1.2rem + 0.8vw, 2.05rem);
}
.flow-arrow path {
  fill: none; stroke: var(--display-fg); stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round;
}

@media (max-width: 719px) {
  .flow { flex-direction: column; align-items: flex-start; gap: clamp(1.5rem, 1rem + 3vw, 2.5rem); }
  .flow-step { width: 100%; }
  .flow-arrow {
    transform: rotate(90deg); transform-origin: center;
    width: 2.5rem; margin: 0 0 0 clamp(1.3rem, 1.4rem, 1.75rem);
  }
}

/* ============================================================
   03 — The Principles (full-bleed blush): green-dot list
   ============================================================ */
.principles { padding-block: clamp(5rem, 3.5rem + 6vw, 9rem); }
/* manifesto rows: big green statement left, explanation right, hairline-ruled.
   Distinct from the two 3-up grids above so the page doesn't read repetitive. */
.principles-list {
  list-style: none; max-width: var(--page-max); margin-inline: auto;
  margin-top: clamp(2.5rem, 1.5rem + 3vw, 4rem);
  border-bottom: 1px solid var(--rule);
}
.principles-list li {
  display: grid; gap: var(--space-sm) clamp(2rem, 1rem + 4vw, 5rem);
  padding-block: clamp(1.85rem, 1.25rem + 2.4vw, 3rem);
  border-top: 1px solid var(--rule);
}
@media (min-width: 860px) {
  .principles-list li { grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); align-items: start; }
}
.p-statement {
  font-family: var(--font-condensed); font-weight: var(--display-weight);
  font-size: clamp(1.65rem, 1.2rem + 2vw, 2.7rem); line-height: 1.02;
  color: var(--display-fg); text-wrap: balance;
}
.p-detail {
  font-size: clamp(1.1rem, 1.02rem + 0.4vw, 1.3rem); line-height: 1.5;
  color: var(--muted-fg); max-width: 44ch;
}