/* ==========================================================================
   USAIndiaCFO — v27 · Services "rising city" (/indiacfo/)

   One isometric scene on a clay plate that builds itself as the reader scrolls
   a pinned 100svh stage (site/stack_city.py lays it out, assets/js/stack-city.js
   drives it). Same rules as clay.css: one light, top-left; casts +x +y; matte,
   no glow; everything that moves is transform / opacity / stroke-dashoffset.

   Three layouts share one DOM:
     .city--pin    (≥941px, ≥600px tall, motion allowed)  the pinned stage
     .city--stack  (narrower, shorter, or reduced motion) three stacked scenes,
                   one per phase, each above its text (the JS clones the scene)
     no JS         the finished city, the three texts stacked, nothing pinned
   ========================================================================== */

.city { --sh: 100svh; --lx: 0; --ly: 0; }
.city__track { position: relative; }
.city__stage { position: relative; }

/* ── section head: label → heading → one line ─────────────────────────── */
.city__head .chapter__rule { padding-bottom: 14px; margin-bottom: 22px; }
.city__head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; }
.city__head h2 { max-width: 18ch; }
.city__sub { max-width: 34ch; margin-bottom: 8px; text-wrap: pretty; }

/* ── the split: copy left, scene right ────────────────────────────────── */
.city__grid { display: grid; grid-template-columns: minmax(0, 42fr) minmax(0, 58fr);
  gap: clamp(28px, 4vw, 64px); align-items: center; margin-top: clamp(26px, 3.4vw, 44px); }

/* rail — 01 BUILD / 02 NURTURE / 03 GROW, the active one bold */
.city__rail { display: grid; gap: 0; margin-bottom: 20px; border-left: 1px solid var(--line); }
.city__rail-it { position: relative; display: flex; align-items: baseline; gap: 14px; padding: 8px 0 8px 18px;
  border: 0; background: none; cursor: pointer; text-align: left;
  font: 500 12px/1 Inter, sans-serif; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-faint);
  transition: color .4s var(--ease); }
.city__rail-it::before { content: ""; position: absolute; left: -1px; top: 6px; bottom: 6px; width: 2px;
  background: var(--bronze-deep); opacity: 0; transition: opacity .4s var(--ease); }
.city__rail-it:hover { color: var(--ink-muted); }
.city__rail-it[aria-current="true"] { color: var(--ink); font-weight: 700; }
.city__rail-it[aria-current="true"]::before { opacity: 1; }
.city__rail-no { font-weight: 500; color: var(--bronze-deep); font-variant-numeric: tabular-nums; }
.city__rail-it:focus-visible { outline: 2px solid var(--bronze-bright); outline-offset: 2px; }

/* panels — the active phase's title, body, every bullet, the link */
.city__panels { display: grid; }
.city__panel { grid-area: 1 / 1; opacity: 0; visibility: hidden; transform: translate3d(0, 10px, 0);
  transition: opacity .5s var(--ease), transform .6s var(--ease), visibility 0s .5s; }
.city__panel[data-on="true"] { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.city__title { font-size: clamp(1.375rem, 1.8vw, 1.75rem); line-height: 1.18; }
.city__phase { font: 500 .58em/1 Inter, sans-serif; letter-spacing: .24em; color: var(--bronze-deep); vertical-align: .22em; }
.city__dash { font-weight: 200; color: var(--ink-faint); }
.city__body { margin-top: 12px; font: 400 15px/1.62 Inter, sans-serif; color: var(--ink-muted); max-width: 46ch; }
.city__list { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 18px; }
.city__list li { position: relative; padding-left: 18px; font: 400 14.5px/1.45 Inter, sans-serif; color: var(--ink);
  cursor: default; opacity: 0; transform: translate3d(0, 10px, 0);
  transition: opacity .5s var(--ease) calc(.08s + var(--i, 0) * .045s), transform .6s var(--ease) calc(.08s + var(--i, 0) * .045s),
              color .3s var(--ease); }
.city__panel[data-on="true"] .city__list li { opacity: 1; transform: none; }
.city__list li::before { content: ""; position: absolute; left: 1px; top: 7px; width: 6px; height: 6px; border-radius: 50%;
  border: 1px solid var(--bronze-deep); transition: background-color .3s var(--ease); }
.city__list li.is-hl { color: var(--bronze-deep); }
.city__list li.is-hl::before { background: var(--bronze-bright); }
.city[data-hl] .city__panel[data-on="true"] li[data-piece]:not(.is-hl) { opacity: .45; }
.city__link { margin-top: 22px; display: inline-flex; }

/* scene column */
.city__scene { position: relative; perspective: 1600px; }
.city__lean { transform: rotateX(calc(var(--ly) * -4deg)) rotateY(calc(var(--lx) * 5deg));
  transform-style: preserve-3d; transition: transform .9s var(--ease); }
.ci-svg { display: block; width: 100%; height: auto; max-height: calc(var(--sh) - var(--head-h) - 236px); }
.city__caps { display: grid; margin-top: 8px; min-height: 2.6em; }
.city__cap { grid-area: 1 / 1; margin: 0; text-align: center; opacity: 0; transition: opacity .5s var(--ease); text-wrap: balance; }
.city__cap[data-on="true"] { opacity: 1; transition-delay: .1s; }

/* ── pin mode ─────────────────────────────────────────────────────────── */
.city--pin { padding: 0; }
.city--pin .city__track { height: calc(var(--sh) * 3.2); }
.city--pin .city__stage { position: sticky; top: 0; height: var(--sh); overflow: hidden; box-sizing: border-box;
  display: flex; flex-direction: column; justify-content: center; padding: calc(var(--head-h) + 6px) 0 14px; }
.city--pin .city__head h2 { font-size: clamp(1.75rem, 2.9vw, 2.75rem); }
.city--pin .city__stack { display: none; }
@media (max-height: 840px) {
  .city--pin .city__head .chapter__rule { padding-bottom: 10px; margin-bottom: 14px; }
  .city--pin .city__head h2 { font-size: clamp(1.5rem, 2.4vw, 2.125rem); }
  .city--pin .city__grid { margin-top: 16px; }
  .city--pin .city__rail-it { padding: 6px 0 6px 16px; }
  .city--pin .city__body { margin-top: 8px; font-size: 14.5px; }
  .city--pin .city__list { margin-top: 12px; gap: 6px 16px; }
  .city--pin .city__list li { font-size: 14px; }
  .city--pin .city__link { margin-top: 14px; }
  .city--pin .ci-svg { max-height: calc(var(--sh) - var(--head-h) - 200px); }
}

/* ── stack mode: one scene per phase, above its text ──────────────────── */
.city__stack { display: none; }
.city--stack .city__stage { position: static; height: auto; padding: 0; }
.city--stack .city__grid { display: none; }
.city--stack .city__stack { display: block; }
.city__ph { margin-top: clamp(44px, 7vw, 72px); }
.city__ph-scene { width: 100%; max-width: min(100%, calc(72svh * 1.28)); aspect-ratio: 640 / 500; margin: 0 auto; }
.city__ph-scene .ci-svg { width: 100%; height: 100%; max-height: none; }
.city__ph .city__cap { text-align: left; margin-top: 14px; opacity: 1; }
.city__ph-panel { margin-top: 18px; }
.city__ph-panel .city__list li { opacity: 1; transform: none; }
.city__ph-panel .city__list { grid-template-columns: 1fr 1fr; }
@media (max-width: 600px) {
  .city__ph-scene { max-width: min(100%, calc(60svh * 1.28)); }
  .city__ph-panel .city__list { grid-template-columns: 1fr; }
}
@media (max-width: 940px) {
  .city__head-row { flex-direction: column; align-items: flex-start; gap: 14px; }
}

/* ── no JS: the finished city, the three texts stacked ────────────────── */
.city:not(.city--js) .city__rail, .city:not(.city--js) .city__caps, .city:not(.city--js) .city__stack { display: none; }
.city:not(.city--js) .city__panels { display: grid; gap: 40px; }
.city:not(.city--js) .city__panel { grid-area: auto; opacity: 1; visibility: visible; transform: none; }
.city:not(.city--js) .city__panel .city__list li { opacity: 1; transform: none; }
.city:not(.city--js) .city__grid { align-items: start; }
.city:not(.city--js) .ci-svg { max-height: none; position: sticky; top: calc(var(--head-h) + 20px); }

/* ── the drawing ──────────────────────────────────────────────────────── */
.ci-svg text { pointer-events: none; }
.ci-e { stroke: rgba(23, 18, 12, .55); stroke-width: 1; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.ci-plate { stroke: rgba(23, 18, 12, .4); }
.ci-inset { stroke: rgba(255, 255, 255, .6); stroke-width: 1; vector-effect: non-scaling-stroke; }
.ci-cast { stroke: none; }
.ci-w { stroke: rgba(23, 18, 12, .32); stroke-width: .8; vector-effect: non-scaling-stroke; }
.ci-i { stroke: #17120c; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.ci-s { stroke: rgba(23, 18, 12, .45); stroke-width: 1.1; stroke-linecap: round; }
.ci-b { stroke: #a8762f; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.ci-b2 { stroke: #a8762f; stroke-width: 1.8; stroke-linecap: round; }
.ci-r { stroke: #782A37; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.ci-b-dash { stroke: #a8762f; stroke-width: 2; stroke-dasharray: 1.5 3; }
.ci-b-dash-s { stroke: #a8762f; stroke-width: 1; stroke-dasharray: 2 3; }
.ci-dash { stroke: rgba(168, 118, 47, .85); stroke-width: 1.2; stroke-linecap: round; }
.ci-teal { stroke: #3f6f6a; stroke-width: 1.2; fill: rgba(63, 111, 106, .22); stroke-linejoin: round; }
.ci-dot { fill: #d8a24a; }
.ci-sdot { fill: rgba(23, 18, 12, .3); }
.ci-shadow { fill: rgba(104, 90, 66, .22); }
.ci-cap { font-family: Inter, sans-serif; font-size: 8.5px; font-weight: 500; letter-spacing: 2px; fill: #5d5850; }
.ci-cap--lg { font-size: 11px; letter-spacing: 3.2px; fill: #17120c; }
.ci-cap--b { fill: #a8762f; }
.ci-mk { font-family: Inter, sans-serif; font-size: 7px; font-weight: 600; letter-spacing: 1.4px; fill: #17120c; }
.ci-mk-r { font-family: Inter, sans-serif; font-size: 7px; font-weight: 600; letter-spacing: 1.6px; fill: #782A37; }
.ci-serif { font-family: Newsreader, Georgia, serif; font-weight: 300; fill: #17120c; }
.ci-land { stroke: rgba(23, 18, 12, .62); stroke-width: 1.2; stroke-linejoin: round; }
.ci-land-fill { fill: rgba(233, 214, 175, .55); }
.ci-ops, .ci-arc { stroke: #d8a24a; stroke-width: 1.8; stroke-linecap: round; }
.ci-pulse { fill: #d8a24a; }
/* GROW — overseas expansion: the sea band, the corridor arc, the India / Overseas pair */
.ci-sea { stroke: none; }
.ci-swell { stroke: rgba(var(--ink-rgb), .24); stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.ci-corr { stroke: var(--bronze-bright); stroke-width: 4.2; stroke-linecap: round; fill: none; }
.ci-node { fill: var(--bronze-bright); stroke: var(--cream); stroke-width: 2; }
.ci-tick { stroke: var(--bronze-deep); stroke-width: 1.2; stroke-linecap: round; }
.ci-place { font-family: Inter, sans-serif; font-size: 12.5px; font-weight: 600; letter-spacing: 3.6px; fill: var(--ink); }
@media (max-width: 600px) {
  /* phones: the scene draws at ~0.55 of its viewBox — the pair and the arc keep their weight */
  .ci-place { font-size: 19px; letter-spacing: 4.6px; }
  .ci-corr { stroke-width: 6.4; }
}
[data-fx="draw"] { stroke-dasharray: 1 2; }           /* offset written by the JS; 0 = drawn */
.ci-a[data-fx="pop"], .ci-piece, .ci-lift { transform-box: fill-box; transform-origin: 50% 100%; }
.ci-a[data-o], [data-fx="draw"][data-o] { opacity: 0; }  /* left the scene by the end (no-JS state) */

/* bullet ↔ piece: hovering a bullet lifts its card; hovering a card lights its bullet */
.ci-piece { pointer-events: bounding-box; }
.ci-piece.is-off { pointer-events: none; }
.ci-lift { transition: transform .45s var(--ease), opacity .3s var(--ease); }
.ci-piece.is-hl .ci-lift { transform: translateY(-8px); }
.ci-piece.is-hl .ci-card { stroke: #a8762f; stroke-width: 1.6; }
.ci-piece.is-hl .ci-cap { fill: #a8762f; }
.city[data-hl] .ci-piece:not(.is-hl) .ci-lift { opacity: .42; }
@media (hover: hover) and (pointer: fine) { .ci-piece { cursor: default; } }