/* Perpetuum · growth refinement (5 Oct 2026). Loaded last.
   Chapter 04 shows one connected story: experience, content, community, reputation, opportunity. */

/* ---------- scene: the growth arc under the chapter heading ---------- */
.gw__arc{position:relative;display:grid;gap:10px;margin:18px 0 0;padding:0 0 0 22px;list-style:none}
.gw__arc::before{content:"";position:absolute;left:4px;top:8px;bottom:8px;width:2px;border-radius:2px;background:rgba(210,241,84,.85);transform-origin:50% 0}
.gw__arc li{position:relative;font-size:clamp(15px,1.15cqi,18px);line-height:1.3;color:#EDE6D8}
.gw__arc li::before{content:"";position:absolute;left:-22px;top:.42em;width:10px;height:10px;border-radius:50%;background:#12110F;box-shadow:inset 0 0 0 2px var(--lime)}
.gw__arc li:first-child::before,.gw__arc li:last-child::before{background:var(--lime)}
.gw__arc li:last-child{color:var(--ivory);font-weight:500}

/* ---------- phone: her Trail, then how it grows ---------- */
.gq-you .gq-cover{height:31%}
.gq-grow{position:relative;display:grid;gap:0;margin:0;padding:1.6cqi 4.6cqi 0;list-style:none}
.gq-grow::before{content:"";position:absolute;left:calc(4.6cqi + 7.5cqi - 1px);top:4cqi;bottom:7cqi;width:2px;border-radius:2px;background:rgba(210,241,84,.7);transform-origin:50% 0}
.gq-st{position:relative;display:grid;grid-template-columns:15cqi minmax(0,1fr);gap:3.4cqi;align-items:center;padding:2cqi 0}
.gq-st+.gq-st{border-top:1px solid rgba(250,248,242,.08)}
.gq-st__v{position:relative;z-index:1;justify-self:center;display:block;width:15cqi;height:15cqi;border-radius:3.4cqi;overflow:hidden;background:#211F1C}
.gq-st__v.gq-faces{width:15cqi;height:15cqi;border-radius:50%;overflow:visible;background:#0D0C0B}
.gq-st .gq-faces>.sw{left:50%;top:50%;transform:translate(-50%,-50%)}
.gq-st .gq-faces .ga-av{width:7.4cqi;height:7.4cqi;margin-left:-3cqi;box-shadow:0 0 0 .5cqi #0D0C0B}
.gq-st__mk{display:grid;place-items:center;width:11cqi;height:11cqi;border-radius:50%;background:#0D0C0B;color:var(--lime);box-shadow:inset 0 0 0 .45cqi var(--lime)}
.gq-st__mk svg{width:5.6cqi;height:5.6cqi}
.gq-st__mk--o{background:var(--lime);color:#14130F;box-shadow:none}
.gq-st p{display:grid;gap:.7cqi;min-width:0}
.gq-st i{display:flex;align-items:center;gap:1.6cqi;font-style:normal;font-size:3.3cqi;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--lime)}
.gq-st b{font-size:3.9cqi;line-height:1.25;font-weight:600;color:var(--ivory);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.gq-st p>span{font-size:3.5cqi;line-height:1.3;color:#B9B1A3}
.gq-st p>span em{font-style:normal;color:#E6DFD2}
.gq-pos{padding:.4cqi 1.8cqi;border-radius:99px;background:rgba(210,241,84,.16);font-style:normal;font-weight:500;letter-spacing:.02em;text-transform:none}
.gq-you>.gq-by{padding:2.2cqi 4.6cqi 0}

/* ---------- motion: the line draws as each step arrives, in the scene and the phone together ---------- */
html.motion-ok:not(.motion-paused) .gw .gw__arc::before{transform:scaleY(0);transition:transform .3s}
html.motion-ok:not(.motion-paused) .gw.is-on .gw__arc::before{transform:none;transition:transform 1.5s var(--ease-io) .55s}
html.motion-ok:not(.motion-paused) .gw .gw__arc li{opacity:0;transform:translateX(-8px);transition:opacity .25s,transform .25s}
html.motion-ok:not(.motion-paused) .gw.is-on .gw__arc li{opacity:1;transform:none;transition:opacity .6s var(--ease-out),transform .7s var(--ease-out)}
html.motion-ok:not(.motion-paused) .gw.is-on .gw__arc li:nth-child(1){transition-delay:.5s}
html.motion-ok:not(.motion-paused) .gw.is-on .gw__arc li:nth-child(2){transition-delay:.8s}
html.motion-ok:not(.motion-paused) .gw.is-on .gw__arc li:nth-child(3){transition-delay:1.1s}
html.motion-ok:not(.motion-paused) .gw.is-on .gw__arc li:nth-child(4){transition-delay:1.4s}
html.motion-ok:not(.motion-paused) .gw.is-on .gw__arc li:nth-child(5){transition-delay:1.7s}
html.motion-ok:not(.motion-paused) .gq-grow::before{transform:scaleY(0);transition:transform .25s}
html.motion-ok:not(.motion-paused) .gq-you.is-on .gq-grow::before{transform:none;transition:transform 1.4s var(--ease-io) .7s}
html.motion-ok:not(.motion-paused) .gq-st{opacity:0;transform:translateY(3cqi);transition:opacity .25s,transform .25s}
html.motion-ok:not(.motion-paused) .gq-you.is-on .gq-st{opacity:1;transform:none;transition:opacity .55s var(--ease-out),transform .7s var(--ease-out)}
html.motion-ok:not(.motion-paused) .gq-you.is-on .gq-st:nth-child(1){transition-delay:.8s}
html.motion-ok:not(.motion-paused) .gq-you.is-on .gq-st:nth-child(2){transition-delay:1.1s}
html.motion-ok:not(.motion-paused) .gq-you.is-on .gq-st:nth-child(3){transition-delay:1.4s}
html.motion-ok:not(.motion-paused) .gq-you.is-on .gq-st:nth-child(4){transition-delay:1.7s}
html.motion-ok:not(.motion-paused) .gq-you.is-on>.gq-by{transition-delay:2s}
html.motion-ok:not(.motion-paused) .gq-you.is-on .gq-st__mk{animation:grPop .6s cubic-bezier(.2,.9,.3,1.3) both}
html.motion-ok:not(.motion-paused) .gq-you.is-on .gq-st--rep .gq-st__mk{animation-delay:1.45s}
html.motion-ok:not(.motion-paused) .gq-you.is-on .gq-st--fit .gq-st__mk{animation-delay:1.75s}
@keyframes grPop{0%{transform:scale(.5)}70%{transform:scale(1.1)}100%{transform:none}}

/* ---------- tablet: tighter arc ---------- */
@container site (max-width:1079.98px){
  .gw__arc{gap:6px;margin-top:12px}
  .gw__arc li{font-size:14.5px}
}

/* ---------- phones: the scene keeps its heading; the phone carries the steps at readable size ---------- */
@container site (max-width:719.98px){
  .gw__arc{display:none}
  .gq-you .gq-cover{height:auto;aspect-ratio:16/11}
  .gq-grow{padding:6px 14px 0}
  .gq-grow::before{left:calc(14px + 28px - 1px);top:24px;bottom:30px}
  .gq-st{grid-template-columns:56px minmax(0,1fr);gap:12px;padding:10px 0}
  .gq-st__v,.gq-st__v.gq-faces{width:56px;height:56px;border-radius:12px}
  .gq-st__v.gq-faces{border-radius:50%}
  .gq-st .gq-faces .ga-av{width:28px;height:28px;margin-left:-11px}
  .gq-st__v.gq-st__mk{width:42px;height:42px;border-radius:50%;box-shadow:inset 0 0 0 2px var(--lime)}
  .gq-st b{-webkit-line-clamp:unset;display:block}
  .gq-st__v.gq-st__mk--o{box-shadow:none}
  .gq-st__mk svg{width:20px;height:20px}
  .gq-st i{font-size:12px;gap:6px}
  .gq-st b{font-size:15px;line-height:1.3}
  .gq-st p>span{font-size:14px}
  .gq-pos{font-size:12px;padding:1px 7px}
  .gq-you>.gq-by{padding:12px 14px 0}
}

[data-venue-link]{color:inherit;text-decoration:underline;text-decoration-color:rgba(210,241,84,.5);text-underline-offset:3px}.venue-note{font-size:14px;line-height:1.5;color:#B9B1A3;max-width:760px;margin-top:20px}