/* APEX site · brains & tools, how they work together, recipe → cart, daily rhythm, build loop, thank you */

/* 05 · brains & tools */
.brains__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(34px, 5vw, 92px); margin-top: 20px; }
.models, .tools { list-style: none; padding: 0; margin: 18px 0 0; }
.model { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) auto; align-items: center; gap: 16px; padding: 18px 4px; border-bottom: 1px solid var(--line); transition: padding .5s var(--ease), background .4s; }
.model:hover { padding-inline: 14px; background: rgba(236, 229, 214, .04); }
.model b { font-size: clamp(1.05rem, 1.5vw, 1.4rem); letter-spacing: -.02em; font-weight: 600; }
.model span { color: var(--cream-2); font-size: .9rem; }
.model i { display: flex; }
.model img { width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--ink); }
.model img + img { margin-left: -11px; }
.backups { margin-top: 26px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.backups__label { font-family: var(--mono); font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.backups__chain { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.backups__chain span { padding: 6px 14px; border: 1px solid var(--line-2); border-radius: 999px; font-size: .85rem; }
.backups__chain .ic { color: var(--gold); width: .9em; }
.hint { font-family: var(--mono); font-size: .64rem; text-transform: none; letter-spacing: 0; color: var(--dim); margin-left: 10px; }
.tool { position: relative; display: grid; grid-template-columns: 24px 130px minmax(0, 1fr); align-items: center; gap: 16px; padding: 20px 4px; border-bottom: 1px solid var(--line); overflow: hidden; outline: none; }
.tool .ic { width: 20px; height: 20px; color: var(--mint); }
.tool b { font-weight: 600; font-size: .95rem; }
.tool__uses, .tool__alt { grid-column: 3; grid-row: 1; font-size: .95rem; transition: transform .55s var(--ease), opacity .4s; }
.tool__uses { color: var(--mint); font-weight: 500; }
.tool__alt { color: var(--gold); transform: translateY(130%); opacity: 0; }
.tool:hover .tool__uses, .tool:focus-visible .tool__uses { transform: translateY(-130%); opacity: 0; }
.tool:hover .tool__alt, .tool:focus-visible .tool__alt { transform: none; opacity: 1; }
@media (pointer: coarse) {
  .hint { display: none; }
  .tool__alt { grid-row: 2; transform: none; opacity: 1; font-size: .8rem; }
}

/* 03 · how they work together — four layers in the caption order: you (or a
   schedule) → the soul → skills → scripts, and back round to you. It walks one
   real job, MISO's Sunday recipe: the soul picks her off the skills arc, she
   hands a JSON shopping list to a script, the script fills the Zepto cart through
   the browser tool and gets the cart back, and the result goes to Telegram.
   The tools layer runs across the top and can be switched off when the stage
   feels busy; the one tool the walk-through uses stays. */
/* The section scrolls normally through this padding before and after the pin, so
   it eases in and out instead of locking the moment it arrives. */
.orch { padding: clamp(40px, 7vh, 90px) 0 clamp(50px, 9vh, 110px); }
.orch__pin { min-height: 100vh; display: flex; flex-direction: column; padding: 100px var(--pad) 44px; }
.orch__body { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(220px, 250px) 1fr; gap: clamp(24px, 3vw, 48px); align-items: center; margin-top: 24px; }
.orch__captions { list-style: none; padding: 0; margin: 0; display: grid; gap: 24px; }
.orch__captions li { padding-left: 20px; border-left: 2px solid var(--line); color: var(--dim); font-size: clamp(1rem, 1.3vw, 1.22rem); line-height: 1.38; transition: color .5s, border-color .5s; }
.orch__captions b { font-weight: 600; text-transform: uppercase; color: rgba(233, 173, 79, .6); transition: color .5s; }
.orch__captions li.is-on { border-color: var(--gold); color: var(--cream); }
.orch__captions li.is-on b { color: var(--gold); }

/* the switch: aria-pressed is the state, the stage's data-tools follows it */
.orch__toggle {
  display: inline-flex; align-items: center; gap: 12px; margin: 34px 0 0 22px; padding: 0; border: 0; background: none; cursor: pointer;
  font-family: var(--mono); font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; color: var(--cream-2);
}
.orch__toggle i { position: relative; width: 34px; height: 18px; border-radius: 999px; border: 1px solid var(--line-2); transition: border-color .35s; }
.orch__toggle i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: var(--dim); transition: transform .35s var(--ease), background .35s; }
.orch__toggle[aria-pressed="true"] i { border-color: var(--mint); }
.orch__toggle[aria-pressed="true"] i::after { transform: translateX(16px); background: var(--mint); }
.orch__toggle:focus-visible { outline: 1px solid var(--gold); outline-offset: 6px; }

/* A query container, so the art sizes in cqw and the whole diagram scales as one
   picture: at 1024px wide, page-sized avatars ran into the wires and labels. */
.stage { position: relative; width: 100%; max-width: min(100%, calc((100vh - 310px) * 1200 / 700)); aspect-ratio: 1200 / 700; justify-self: center; container: orch / inline-size; }
.stage__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.wire { fill: none; stroke: var(--mint); stroke-width: 2; stroke-linecap: round; }
.wire--gold { stroke: var(--gold); }
/* the route before anything travels it (js/render.js): faint and dotted, so it reads
   as "the way this will go" and the drawn wire over it as "it went" */
.wire-ghost { fill: none; stroke: var(--mint); stroke-opacity: .2; stroke-width: 1.5; stroke-linecap: round; stroke-dasharray: 1 7; }
.wire-ghost--gold { stroke: var(--gold); stroke-opacity: .24; }
.skills-arc { fill: none; stroke: var(--line-2); stroke-width: 1.5; stroke-dasharray: 2 7; transition: stroke .5s; }

/* A node's box is its art alone, centred on (x, y); the label hangs below it.
   In the flow, the label would lift the art above the wires, which all run
   through the centre line. */
.node {
  position: absolute; left: calc(var(--x) / 1200 * 100%); top: calc(var(--y) / 700 * 100%); transform: translate(-50%, -50%);
  display: grid; place-items: center; transition: transform .5s var(--ease), opacity .5s;
}
.node img { width: clamp(24px, 6.2cqw, 60px); border-radius: 50%; transition: box-shadow .5s; }
.node__label {
  position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%); text-align: center;
  font-family: var(--mono); font-size: .6rem; letter-spacing: .14em; text-transform: uppercase; color: var(--cream-2); white-space: nowrap; transition: color .5s;
  padding: 0 4px; background: var(--ink); /* where the return wire passes a label on narrow stages, it goes behind */
}
.node small { display: block; font-size: .54rem; color: var(--dim); letter-spacing: .1em; }
.node--soul img { width: clamp(40px, 11.5cqw, 112px); }
.node--colony img { width: clamp(28px, 7cqw, 68px); }

/* you, or a schedule: one circle. The phone is you; the ticks round its rim are
   the clock that also starts requests, and the hand only runs once the scripts
   step shows who fires schedules. */
.youdial { position: relative; display: grid; place-items: center; width: clamp(36px, 8.6cqw, 84px); aspect-ratio: 1; border-radius: 50%; border: 1px solid var(--line-2); color: var(--cream-2); transition: color .5s, border-color .5s; }
.youdial .ic { width: 38%; height: 38%; }
.youdial__ring { position: absolute; inset: 5%; width: 90%; height: 90%; overflow: visible; }
.youdial__ring circle { fill: none; stroke: var(--line-2); stroke-width: 5; stroke-dasharray: 1.6 22.49; transition: stroke .5s; }
.youdial__hand { position: absolute; inset: 7%; border-radius: 50%; }
.youdial__hand::before { content: ""; position: absolute; left: 50%; top: 0; width: 7px; height: 7px; margin-left: -3.5px; border-radius: 50%; background: var(--gold); opacity: 0; transition: opacity .4s; box-shadow: 0 0 10px var(--gold); }

/* the skills: small avatars close together on an arc. Names and skills stay
   hidden until hovered, and the one the soul picks grows where it stands, on top
   of its neighbours, with its label out to the side - below, it would land on the
   next skill along. The wires stop at the edge she grows to. */
.node--m { transition: transform .5s var(--ease), opacity .5s; }
.node--m img { width: clamp(14px, 3.4cqw, 34px); transition: width .6s var(--ease), box-shadow .5s; }
.node--m .node__label { opacity: 0; transition: opacity .35s, color .5s; }
.node--m:hover { z-index: 3; }
.node--m:hover .node__label { opacity: 1; }
.stage[data-pick="miso"] [data-key="miso"] { z-index: 2; }
.stage[data-pick="miso"] [data-key="miso"] img { width: clamp(28px, 6.6cqw, 66px); }
/* her label goes out to the LEFT, over the gap between the soul and the arc: the
   skills above and below her are too close, and to the right the shopping-list
   tag rides the wire and the scripts' own label waits at the end of it. */
.stage[data-pick="miso"] [data-key="miso"] .node__label {
  opacity: 1; color: var(--cream);
  top: auto; bottom: calc(50% + 8px); left: auto; right: calc(100% + 10px); transform: none; text-align: right;
}
.stage[data-pick="miso"] [data-key="miso"] small { color: var(--gold); }

/* Labels are px, the diagram is cqw, so on a small stage hers would reach the
   soul: below 820px she keeps her name and drops the skill under it. */
@container orch (max-width: 820px) { .stage[data-pick="miso"] [data-key="miso"] small { display: none; } }

/* the skills layer's name sits above the arc, where the tools link meets it */
.ringlabel {
  position: absolute; left: calc(600 / 1200 * 100%); top: calc(150 / 700 * 100%); transform: translate(-50%, -50%);
  padding: 3px 10px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--ink);
  font-family: var(--mono); font-size: .6rem; letter-spacing: .14em; text-transform: uppercase; color: var(--cream-2); transition: color .5s, border-color .5s;
}

/* the tools layer: a dashed band, joined to the scripts alone and by one straight
   drop (x 1000). It ends at x=1060 so its last chip — the walk-through's browser →
   Zepto — always sits over that drop, whatever the chip's text measures. */
.toolsbar {
  position: absolute; left: calc(300 / 1200 * 100%); width: calc(760 / 1200 * 100%); top: calc(22 / 700 * 100%); height: calc(64 / 700 * 100%);
  display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 clamp(8px, 1vw, 14px) 0 clamp(10px, 1.4vw, 20px);
  border: 1px dashed var(--line-2); border-radius: 14px; background: rgba(16, 27, 25, .85);
  transition: border-color .45s, background .45s;
}
.toolsbar > * { transition: opacity .45s, visibility .45s; }
.toolsbar__label { font-family: var(--mono); font-size: .6rem; letter-spacing: .16em; text-transform: uppercase; color: var(--mint); }
.toolsbar__chip { display: inline-flex; align-items: center; gap: 7px; font-size: clamp(.66rem, .8vw, .8rem); color: var(--cream-2); white-space: nowrap; }
.toolsbar__chip .ic { width: 15px; height: 15px; color: var(--mint); }
.toolsbar__chip--flow { padding: 4px 10px; border: 1px solid transparent; border-radius: 999px; transition: color .4s, border-color .4s, background .4s, box-shadow .4s; }
.stage[data-tool="on"] .toolsbar__chip--flow { color: var(--gold); border-color: var(--gold); box-shadow: 0 0 24px rgba(233, 173, 79, .3); }
.stage[data-tool="on"] .toolsbar__chip--flow .ic { color: var(--gold); }
/* narrower stages keep the names and drop the icons; the narrowest keep icons only */
@container orch (max-width: 760px) { .toolsbar__chip .ic { display: none; } }
@container orch (max-width: 520px) {
  .toolsbar__chip .ic { display: block; width: 12px; height: 12px; }
  .toolsbar__chip span { display: none; }
  .toolsbar { border-radius: 8px; }
  .toolsbar__label { font-size: .44rem; }
}
/* switched off, the band and its sample go, but the tool the walk-through uses
   stays as a pill of its own - the script still has somewhere to send the list */
.stage[data-tools="off"] .toolsbar { border-color: transparent; background: none; }
.stage[data-tools="off"] .toolsbar > :not(.toolsbar__chip--flow) { opacity: 0; visibility: hidden; }
.stage[data-tools="off"] .toolsbar__chip--flow { border-color: var(--line-2); background: var(--ink-2); }

/* who's on at each step */
.stage:not([data-step="all"]) .node--m { opacity: .65; }
.stage[data-pick="miso"] .node--m:not([data-key="miso"]) { opacity: .3; }
.stage[data-step="0"] .node--you, .stage[data-step="1"] .node--soul, .stage[data-step="3"] .node--colony, .stage[data-step="3"] .node--you {
  transform: translate(-50%, -50%) scale(1.12);
}
.stage[data-pick="miso"] [data-key="miso"] { opacity: 1; }
.stage[data-step="1"] .node--soul img, .stage[data-step="2"] [data-key="miso"] img,
.stage[data-step="3"] .node--colony img { box-shadow: 0 0 0 3px var(--gold), 0 0 44px rgba(233, 173, 79, .5); }
.stage[data-step="0"] .node--you .node__label, .stage[data-step="1"] .node--soul .node__label, .stage[data-step="3"] .node--colony .node__label { color: var(--gold); }
.stage[data-step="0"] .youdial { color: var(--gold); border-color: var(--gold); }
.stage[data-step="1"] .skills-arc { stroke: var(--gold); }
.stage[data-step="1"] .ringlabel { color: var(--gold); border-color: var(--gold); }
.stage[data-step="3"] .youdial__ring circle { stroke: var(--gold); }
.stage[data-step="3"] .youdial__hand::before { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .stage[data-step="3"] .youdial__hand { animation: youdial-tick 4s linear infinite; }
}
@keyframes youdial-tick { to { transform: rotate(360deg); } }
.packet { position: absolute; left: 0; top: 0; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--mint); opacity: 0; box-shadow: 0 0 0 6px rgba(114, 209, 174, .2), 0 0 26px var(--mint); }
.packet--gold { background: var(--gold); box-shadow: 0 0 0 6px rgba(233, 173, 79, .2), 0 0 26px var(--gold); }
/* its halo breathes on its own clock, so a dot the reader has stopped on is still alive
   (a pseudo-element: GSAP owns the dot's own transform and opacity) */
.packet::before { content: ""; position: absolute; inset: -9px; border-radius: 50%; border: 1px solid currentColor; color: var(--mint); animation: packet-halo 1.4s ease-out infinite; }
.packet--gold::before { color: var(--gold); }
@keyframes packet-halo { from { transform: scale(.55); opacity: .9; } to { transform: scale(1.6); opacity: 0; } }
/* what a packet carries rides with it: above on the flat wires, beside on the climb to the tool */
.packet[data-tag]::after {
  content: attr(data-tag); position: absolute; left: 50%; bottom: calc(100% + 12px); transform: translateX(-50%);
  padding: 3px 8px; border: 1px solid var(--line-2); border-radius: 6px; background: var(--ink-2);
  font-family: var(--mono); font-size: .58rem; letter-spacing: .03em; color: var(--cream); white-space: nowrap;
}
.packet[data-side="left"]::after { left: auto; right: calc(100% + 14px); bottom: 50%; transform: translateY(50%); }
.packet--gold[data-tag]::after { color: var(--gold); }
/* the comet behind it: the wire's last stretch lit, a soft tail and a hot core (motion.js) */
/* the tail is whiter than the wire it runs on, or mint on mint shows nothing */
.comet { fill: none; stroke: #9ff0d2; stroke-width: 9; stroke-linecap: round; opacity: .55; filter: blur(4px); }
.comet--core { stroke: #f2fffa; stroke-width: 3; opacity: 1; filter: drop-shadow(0 0 3px #9ff0d2); }
.comet--gold { stroke: #ffd48a; }
.comet--core.comet--gold { stroke: #fff6e6; filter: drop-shadow(0 0 3px #ffd48a); }
/* a stop taking the dot in: one ring going out (GSAP scales and fades it) */
.ping {
  position: absolute; left: calc(var(--x) / 1200 * 100%); top: calc(var(--y) / 700 * 100%); z-index: 3; pointer-events: none;
  width: 9cqw; aspect-ratio: 1; margin: -4.5cqw 0 0 -4.5cqw; border-radius: 50%;
  border: 2px solid var(--mint); box-shadow: 0 0 26px rgba(114, 209, 174, .5), inset 0 0 18px rgba(114, 209, 174, .3); opacity: 0; visibility: hidden;
}
.ping--gold { border-color: var(--gold); box-shadow: 0 0 26px rgba(233, 173, 79, .55), inset 0 0 18px rgba(233, 173, 79, .3); }
/* the circle is closed: every leg it took turns gold */
.wire { transition: stroke .8s; }
.stage[data-done="1"] .wire { stroke: var(--gold); }
.stage[data-done="1"] .stage__svg { filter: drop-shadow(0 0 5px rgba(233, 173, 79, .55)); }

/* the journey strip: phones only (it has no job where the pin plays the journey) */
.jstrip { display: none; }

/* 06 · recipe → cart (left column stays put while the steps scroll) */
.task__grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(34px, 6vw, 110px); align-items: start; }
.task__sticky { position: sticky; top: 13vh; height: 74vh; display: grid; place-items: center; }
.phone {
  position: relative; height: min(74vh, 660px); aspect-ratio: 9 / 19; padding: 10px; border-radius: 44px; background: #050908;
  box-shadow: 0 0 0 1px var(--line-2), inset 0 0 0 2px #1d2a27, 0 50px 120px rgba(0, 0, 0, .6);
}
.phone__notch { position: absolute; top: 18px; left: 35%; width: 30%; height: 18px; border-radius: 999px; background: #050908; z-index: 3; }
.phone__screen { position: relative; height: 100%; border-radius: 35px; overflow: hidden; background: #101921; }
.screen { position: absolute; inset: 0; display: grid; place-items: center; padding: 42px 8px 12px; opacity: 0; transform: scale(1.05); transition: opacity .6s, transform .9s var(--ease); }
.screen.is-on { opacity: 1; transform: none; }
.screen img { width: 100%; max-height: 100%; object-fit: contain; border-radius: 14px; }
.task__steps { list-style: none; padding: 4vh 0 0; margin: 0; }
/* the recipe → cart emblem (js/recipefx.js): sticky level with the phone, and a
   negative margin so it takes no room - nothing above the pins may change height */
.task__morph { position: sticky; top: 13vh; height: 74vh; margin-bottom: -74vh; pointer-events: none; }
.task__gl { display: block; width: 100%; height: 100%; opacity: 0; transition: opacity 1.2s var(--ease); }
.task__gl.is-on { opacity: 1; }
.task__steps, .task__notes { position: relative; z-index: 1; }
/* the notes keep to the steps' measure, so the shield stands beside them, not on them */
@media (min-width: 1180px) { .task__notes { max-width: 440px; } }
@media (max-width: 1179px) { .task__morph { display: none; } }
.tstep { min-height: 54vh; display: flex; flex-direction: column; justify-content: center; padding: 30px 0; border-top: 1px solid var(--line); opacity: .25; transition: opacity .5s; }
.tstep.is-on { opacity: 1; }
.tstep__n { font-family: var(--mono); font-size: .76rem; color: var(--gold); }
.tstep h3 { font-size: clamp(1.5rem, 2.6vw, 2.4rem); line-height: 1.05; letter-spacing: -.035em; margin: .35em 0 .4em; }
.tstep p { color: var(--cream-2); font-size: clamp(.98rem, 1.15vw, 1.12rem); max-width: 36ch; margin: 0; }
.tstep__inline { display: none; }
.task__notes { display: grid; gap: 14px; padding: 40px 0 10vh; }
.guardcard { display: flex; gap: 14px; align-items: center; padding: 20px 22px; border-radius: 18px; border: 1px solid rgba(114, 209, 174, .35); background: rgba(114, 209, 174, .06); }
.guardcard .ic { width: 26px; height: 26px; color: var(--mint); }
.guardcard p { margin: 0; color: var(--cream-2); font-size: .95rem; }
.gotcha { margin: 0; padding: 18px 22px; border-radius: 16px; border: 1px dashed rgba(233, 173, 79, .5); background: rgba(233, 173, 79, .05); color: var(--cream-2); font-size: .95rem; }

/* 07 · daily rhythm (day → night) */
/* the same breathing room as .orch: the pin arrives and leaves in ordinary scrolling */
.rhythm { --bg: #efe7d6; --fg: #0b1312; --accent: #9c6512; background: var(--bg); color: var(--fg); padding: clamp(30px, 5vh, 70px) 0; transition: background 1s, color 1s; }
.rhythm.is-night { --bg: #0a0f1e; --fg: var(--cream); --accent: var(--gold); }
.rhythm__pin { position: relative; isolation: isolate; min-height: 100vh; display: flex; flex-direction: column; padding: 118px var(--pad) 52px; }

/* the sky: a big sun or moon over the top-left corner and the light it throws
   from there across the whole section. The palette already swings day↔night on
   its own; this gives the swing a source, so the light looks like it comes FROM
   somewhere instead of the page simply changing colour.
   It lives INSIDE .rhythm__pin, not in the section: the pin is what stays on
   screen while the day plays through, and anything outside it scrolls away after
   the first stop. `isolation` on the pin keeps the z-index: -1 inside the pin,
   above the section's background and below the dial and the list. */
.rhythm__sky { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.rhythm__wash { position: absolute; inset: 0; transition: opacity 1.1s var(--ease); }
/* the origin follows the orb's centre, so the light still reads as coming off it */
.rhythm__wash--day { background: radial-gradient(88% 80% at 91% 17%, rgba(255, 201, 92, .55), rgba(255, 190, 80, .17) 32%, transparent 68%); }
/* at night it is moonlight, not an absence of light: the darkness is the section's
   own background, and a dark gradient over a dark field shows nothing at all */
.rhythm__wash--night { opacity: 0; background: radial-gradient(88% 80% at 91% 17%, rgba(150, 178, 255, .3), rgba(96, 120, 220, .1) 32%, transparent 68%); }
/* the WebGL sky, desktop only (where the section is pinned) */
.rhythm__gl { position: absolute; inset: 0; width: 100%; height: 100%; }
.rhythm.has-sky .rhythm__wash, .rhythm.has-sky .rhythm__orb { display: none; }
@media (max-width: 900px) { .rhythm__gl { display: none; } }
.rhythm.is-night .rhythm__wash--day { opacity: 0; }
.rhythm.is-night .rhythm__wash--night { opacity: 1; }
/* Clear of both edges, and smaller than it was. Hung over the corner it lost a
   fifth of itself to the crop, and a cut-off circle reads as a mistake rather than
   as a body in the sky - there is no horizon here for it to be rising behind.
   Inset in px and vh, never a percentage of the sky: the pin is a screen tall on
   desktop and half as tall again on a phone, and a percentage pushed the sun most
   of the way off the top down there. */
/* In the top-RIGHT corner: over the top-left it sat on "05 The daily rhythm".
   This is the phone and reduced-motion sky; on desktop js/skyfx.js draws a real
   one (.rhythm__gl) and this steps aside (.has-sky). */
.rhythm__orb {
  --orb: clamp(72px, 7.5vw, 116px);
  position: absolute; right: clamp(18px, 3vw, 54px); top: clamp(62px, 8vh, 96px);
  width: var(--orb); aspect-ratio: 1; color: var(--accent);
}
/* bodies, not outline icons: a glowing sun that sinks and fades at night, and a
   shaded moon that rises into its place */
.rhythm__orb i { position: absolute; inset: 18%; border-radius: 50%; transition: opacity 1.1s var(--ease), transform 1.1s var(--ease); }
.rhythm__sun {
  background: radial-gradient(circle, #fff7e2 0 34%, #ffd47e 62%, #f4a93c 100%);
  box-shadow: 0 0 34px 8px rgba(255, 186, 84, .55), 0 0 110px 36px rgba(255, 176, 74, .22);
}
.rhythm__moon {
  opacity: 0; transform: translateY(40%) scale(.8);
  background: radial-gradient(circle at 36% 34%, #f6f7fc, #d3d8e8 55%, #a6aec8);
  box-shadow: inset -.9em -.35em 0 -.1em rgba(12, 18, 36, .5), 0 0 40px 6px rgba(150, 175, 255, .28);
  font-size: calc(var(--orb) / 6);
}
.rhythm.is-night .rhythm__sun { opacity: 0; transform: translateY(40%) scale(.8); }
.rhythm.is-night .rhythm__moon { opacity: 1; transform: none; }
.rhythm .shead__num { color: inherit; border-color: currentColor; opacity: .55; }
.rhythm .eyebrow, .rhythm em { color: var(--accent); }
.rhythm__body { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(34px, 5vw, 92px); align-items: center; }
.dial { position: relative; width: min(100%, calc(100vh - 290px), 540px); aspect-ratio: 1; justify-self: center; }
.dial__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.dial__ring { fill: none; stroke: currentColor; stroke-opacity: .18; stroke-width: 2; }
.tick { stroke: currentColor; stroke-opacity: .35; stroke-width: 1.5; }
.tick--major { stroke-opacity: .85; stroke-width: 2.5; }
.hour { fill: currentColor; fill-opacity: .55; font-family: var(--mono); font-size: 15px; text-anchor: middle; dominant-baseline: middle; }
.stopdot { fill: var(--bg); stroke: currentColor; stroke-opacity: .5; stroke-width: 2; transition: fill .4s, stroke .4s; }
.stopdot.is-on { fill: var(--gold); stroke: var(--gold); stroke-opacity: 1; }
.dial__hand { position: absolute; inset: 0; }
.dial__hand i { position: absolute; left: 50%; top: 11%; width: 3px; height: 39%; margin-left: -1.5px; border-radius: 3px; background: var(--gold); }
.dial__center { position: absolute; inset: 26%; display: grid; place-content: center; justify-items: center; gap: 7px; text-align: center; border-radius: 50%; background: color-mix(in oklab, var(--fg) 7%, var(--bg)); }
/* sun or moon, over the readout: on a 12-hour face 9 o'clock is two different
   times of day, so something has to say which. Both icons sit in one box, stacked,
   so the swap is a cross-fade in place and the centre's grid never reflows. */
.dial__sky { position: relative; display: block; width: clamp(19px, 2.2vw, 28px); aspect-ratio: 1; color: var(--accent); }
.dial__sky .ic { position: absolute; inset: 0; width: 100%; height: 100%; transition: opacity .9s var(--ease), transform .9s var(--ease); }
.dial__moon { opacity: 0; transform: rotate(-35deg) scale(.6); }
.rhythm.is-night .dial__sun { opacity: 0; transform: rotate(35deg) scale(.6); }
.rhythm.is-night .dial__moon { opacity: 1; transform: none; }
.dial__time { font-size: clamp(1.9rem, 3.6vw, 3.4rem); font-weight: 700; letter-spacing: -.04em; line-height: 1; margin: 0; font-variant-numeric: tabular-nums; }
.dial__time small { font-size: .4em; font-weight: 600; letter-spacing: 0; margin-left: .22em; opacity: .55; }
.dial__agent { width: clamp(46px, 5vw, 76px); border-radius: 50%; }
.dial__label { font-family: var(--serif); font-style: italic; font-size: clamp(1rem, 1.5vw, 1.4rem); margin: 0; line-height: 1.15; }
.rhythm__side .big { margin-top: 0; margin-bottom: .5em; }
/* right now, in India (js/motion.js): one line that says the dial is also today */
.rhythm__now {
  display: flex; align-items: center; gap: 10px; margin: 0 0 22px; font-family: var(--mono); font-size: .7rem; line-height: 1.5;
  letter-spacing: .02em; color: color-mix(in oklab, var(--fg) 72%, transparent);
}
.rhythm__now b { font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); margin-right: 4px; }
.rhythm__now img { display: inline-block; width: 18px; height: 18px; border-radius: 50%; vertical-align: -4px; margin-right: 5px; }
.rhythm__now > i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); animation: now-pulse 2s ease-out infinite; }
@keyframes now-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--accent) 60%, transparent); } 80%, 100% { box-shadow: 0 0 0 9px transparent; } }
.rhythm__list { list-style: none; padding: 0; margin: 0 0 26px; }
/* 78px, not 64: "10:45 PM" is three characters longer than "22:45" was */
.rhythm__list li { display: grid; grid-template-columns: 78px 30px 1fr; align-items: center; gap: 14px; padding: 9px 0; border-bottom: 1px solid color-mix(in oklab, var(--fg) 14%, transparent); opacity: .42; transition: opacity .4s; }
.rhythm__list li.is-on { opacity: 1; }
.rhythm__list b { font-family: var(--mono); font-weight: 600; font-size: .85rem; }
.rhythm__list b small { font-size: .82em; opacity: .6; margin-left: .3em; }
.rhythm__list li.is-on b { color: var(--accent); }
.rhythm__list img { width: 28px; height: 28px; border-radius: 50%; }
.rhythm__list span { font-size: .95rem; }
.rhythm__note { font-size: .92rem; opacity: .75; max-width: 48ch; margin: 0; }

/* 08 · the build loop */
.roles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 44px); margin-bottom: clamp(70px, 10vh, 130px); }
.role { border-top: 1px solid var(--line-2); padding-top: 24px; }
.role__tag { font-family: var(--mono); font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: var(--mint); margin: 0; }
.role h3 { font-size: clamp(1.4rem, 2.3vw, 2.2rem); letter-spacing: -.035em; margin: .2em 0 .4em; line-height: 1.05; }
.role p { color: var(--cream-2); font-size: .95rem; max-width: 32ch; margin: 0; }
.role--me { border-top: 2px solid var(--gold); }
.role--me h3 { color: var(--gold); }
.cycle { display: grid; place-items: center; padding: 3vh 0; }
.cycle__ring { position: relative; width: min(68vh, 84vw, 560px); aspect-ratio: 1; }
.cycle__ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.cycle__track { fill: none; stroke: var(--line-2); stroke-width: 1.5; stroke-dasharray: 3 7; }
.cycle__fill { fill: none; stroke: var(--gold); stroke-width: 3; stroke-linecap: round; }
.cycle__runner { position: absolute; inset: 0; }
.cycle__runner::after {
  content: ""; position: absolute; left: 50%; top: 10%; width: 16px; height: 16px; margin: -8px; border-radius: 50%; background: var(--gold);
  box-shadow: 0 0 0 7px rgba(233, 173, 79, .18), 0 0 30px var(--gold);
}
.cnode {
  position: absolute; left: calc(50% + cos(var(--a)) * 40%); top: calc(50% + sin(var(--a)) * 40%); transform: translate(-50%, -50%);
  min-width: 132px; padding: 11px 16px; text-align: center; background: var(--ink); border: 1px solid var(--line-2); border-radius: 16px;
  opacity: .4; transition: opacity .5s, border-color .5s, transform .5s var(--ease);
}
.cnode.is-on { opacity: 1; border-color: var(--cream-2); }
.cnode--me.is-on { border-color: var(--gold); box-shadow: 0 0 40px rgba(233, 173, 79, .18); }
.cnode__n { display: block; font-family: var(--mono); font-size: .6rem; color: var(--dim); }
.cnode b { display: block; font-size: 1.05rem; letter-spacing: -.02em; }
.cnode em { display: block; font-family: var(--mono); font-style: normal; font-size: .62rem; letter-spacing: .06em; color: var(--dim); }
.cnode--me em { color: var(--gold); }
.cycle__center { position: absolute; inset: 27%; display: grid; place-content: center; text-align: center; gap: 10px; }
.cycle__mantra { font-size: clamp(1.05rem, 1.8vw, 1.7rem); line-height: 1.3; font-weight: 600; letter-spacing: -.02em; margin: 0; text-wrap: balance; }
.cycle__note { font-family: var(--mono); font-size: .7rem; color: var(--dim); text-align: center; max-width: 66ch; margin: 48px auto 0; }

/* 09 · thank you */
.outro { padding-top: clamp(90px, 14vh, 170px); isolation: isolate; }
/* the curtain call's points of light (js/finale.js): the whole section, under the words */
.thanks__gl { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }

.thanks { display: grid; justify-items: center; gap: 26px; text-align: center; padding-bottom: 30px; }
.thanks__word { display: flex; flex-wrap: wrap; justify-content: center; gap: .18em; margin: 0; overflow: hidden; font-size: clamp(3rem, 10vw, 10rem); font-weight: 800; letter-spacing: -.06em; line-height: .9; }
.thanks__word > * { display: inline-block; padding-bottom: .07em; }
.thanks__word em { letter-spacing: -.04em; }
/* the curtain call: the whole team in a line, APEX in the middle. The entrance and
   the bow are GSAP's (on the figure and on its image); a hover lifts the figure on
   `translate`, which neither of them touches. */
.bow { display: flex; align-items: flex-end; justify-content: center; gap: clamp(6px, 1.5vw, 22px); margin: 6px 0 4px; }
.bow__m { margin: 0; display: grid; justify-items: center; gap: 12px; transition: translate .45s var(--ease); }
.bow__m img { width: clamp(38px, 4.4vw, 62px); aspect-ratio: 1; border-radius: 50%; box-shadow: 0 0 0 1.5px var(--c), 0 18px 40px rgba(0, 0, 0, .45); transform-origin: 50% 100%; }
.bow__m--lead img { width: clamp(92px, 10vw, 140px); box-shadow: 0 0 0 2px var(--c), 0 30px 90px rgba(233, 173, 79, .28); }
.bow__m figcaption { font-family: var(--mono); font-size: .56rem; letter-spacing: .14em; color: var(--c); }
.bow__m:hover { translate: 0 -8px; }
.thanks__q { font-family: var(--serif); font-style: italic; font-size: clamp(1.1rem, 1.9vw, 1.7rem); color: var(--gold); margin: 0; }
.thanks__credit { font-family: var(--mono); font-size: .72rem; color: var(--dim); max-width: 70ch; margin: 0; }
.totop { display: inline-flex; align-items: center; gap: 10px; padding: 11px 19px; border: 1px solid var(--line-2); border-radius: 999px; text-decoration: none; font-family: var(--mono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; transition: background .3s, color .3s, border-color .3s; }
.totop:hover { background: var(--gold); color: var(--ink); border-color: var(--gold); }

@media (max-width: 900px) {
  .brains__grid { grid-template-columns: 1fr; }
  .tool { grid-template-columns: 22px 104px minmax(0, 1fr); }
  .orch__pin { min-height: 0; padding-top: 96px; }
  .orch__body { grid-template-columns: minmax(0, 1fr); } /* never a bare 1fr: the strip's six cards would floor it at their width */
  .orch__captions li { color: var(--cream-2); border-color: var(--gold); }
  .task__grid { grid-template-columns: 1fr; }
  .task__sticky { display: none; }
  .task__steps { padding: 0; }
  .tstep { min-height: 0; opacity: 1; padding: 34px 0; }
  .tstep__inline { display: grid; place-items: start; margin-top: 22px; }
  .tstep__inline img { max-width: 300px; width: 100%; border-radius: 18px; }
  .rhythm__pin { min-height: 0; padding-top: 96px; }
  .rhythm__body { grid-template-columns: 1fr; }
  .dial { width: min(84vw, 420px); }
  .roles { grid-template-columns: 1fr; }
  .cycle__ring { width: 100%; aspect-ratio: auto; display: grid; gap: 18px; }
  .cycle__ring svg, .cycle__runner { display: none; }
  .cycle__nodes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .cnode { position: static; transform: none; min-width: 0; }
  .cnode:last-child { grid-column: 1 / -1; }
  .cycle__center { position: static; order: -1; }
}
@media (max-width: 900px) {
  /* The journey, one card per leg, to swipe through. It bleeds to the screen's
     edges so the next card peeks in, which is what says "swipe". */
  .jstrip { display: block; margin: 22px calc(-1 * var(--pad)) 0; }
  .jstrip__cards {
    display: flex; gap: 12px; margin: 0; padding: 4px var(--pad) 12px; list-style: none;
    overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--pad); scrollbar-width: none; overscroll-behavior-x: contain;
  }
  .jstrip__cards::-webkit-scrollbar { display: none; }
  .jcard {
    flex: 0 0 min(78%, 320px); scroll-snap-align: start; display: grid; gap: 10px; padding: 14px 16px 16px;
    border: 1px solid rgba(114, 209, 174, .4); border-radius: 16px; background: linear-gradient(170deg, #1a2723, #0f1917);
  }
  .jcard--gold { border-color: rgba(233, 173, 79, .6); }
  .jcard__leg { font-family: var(--mono); font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: var(--mint); }
  .jcard--gold .jcard__leg { color: var(--gold); }
  .jcard__body { display: flex; align-items: center; gap: 12px; }
  .jcard__body b { display: block; font-size: 1.02rem; font-weight: 600; letter-spacing: -.01em; color: var(--cream); line-height: 1.25; }
  .jcard__body span { display: block; font-size: .86rem; color: var(--cream-2); line-height: 1.35; }
  .jcard__body .ic { width: 28px; height: 28px; flex: none; color: var(--mint); }
  .jcard__av { width: 36px; height: 36px; flex: none; border-radius: 50%; box-shadow: 0 0 0 2px var(--gold); }
  .jcard__logo { width: 30px; height: 30px; flex: none; }
  .jcard ul { list-style: none; margin: 6px 0 0; padding: 0; display: grid; grid-template-columns: auto auto; gap: 3px 16px; font-family: var(--mono); font-size: .72rem; color: var(--cream-2); }
  .jcard li { display: flex; align-items: center; gap: 6px; }
  .jcard li::before { content: ""; width: 9px; height: 9px; border: 1px solid var(--mint); border-radius: 2px; }
  .jcard .jcard__stamp {
    display: inline-block; margin-top: 7px; padding: 2px 7px; border: 1px solid var(--gold); border-radius: 4px;
    font-family: var(--mono); font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gold);
  }
  .jstrip__nav { display: flex; align-items: center; gap: 7px; padding: 0 var(--pad); font-family: var(--mono); font-size: .6rem; letter-spacing: .18em; text-transform: uppercase; color: var(--dim); }
  .jstrip__nav span { margin-right: 6px; }
  .jstrip__nav i { width: 6px; height: 6px; border-radius: 50%; background: var(--line-2); transition: background .3s, transform .3s; }
  .jstrip__nav i.is-on { background: var(--gold); transform: scale(1.3); }
  /* the leg whose card is in view is lit on the stage; the rest of the route dims */
  .stage[data-leg] .wire { stroke-opacity: .3; transition: stroke-opacity .35s, stroke .35s; }
  .stage[data-leg="0"] #p-you, .stage[data-leg="1"] #p-soul, .stage[data-leg="2"] #p-skill,
  .stage[data-leg="3"] #p-tool, .stage[data-leg="4"] #p-tool-back, .stage[data-leg="5"] #p-back {
    stroke: var(--gold); stroke-opacity: 1; stroke-width: 3.5; filter: drop-shadow(0 0 4px rgba(233, 173, 79, .8));
  }
}
@media (max-width: 700px) { /* the stage gets tight: drop the skill names rather than overlap them */
  .node--m:not([data-key="miso"]) .node__label { display: none; }
  .node__label { font-size: .44rem; letter-spacing: .06em; top: calc(100% + 3px); }
  .node small { font-size: .4rem; letter-spacing: .04em; }
  .ringlabel { font-size: .44rem; padding: 1px 6px; }
}
@media (max-width: 560px) {
  .bow { gap: 5px; }
  .bow__m img { width: 27px; }
  .bow__m--lead img { width: 72px; }
  .bow__m figcaption { display: none; }
  .model { grid-template-columns: 1fr auto; }
  .model span { grid-column: 1; grid-row: 2; }
  .model i { grid-row: 1 / 3; grid-column: 2; }
}