/* ============================================================================
   Weave — the Problems + Flow argument as one scroll-authored section.
   Desktop drawing above 860px, portrait drawing at/below it (weave.js picks).

   Depends only on existing Rubicon tokens:
     --bg --text --text-muted --text-subtle --border --border-strong
     --accent --font-display --fw-heading --ls-heading --gutter --container
   Everything else it needs it defines for itself, below. No token file is
   modified by this feature.
   ========================================================================== */
:root{
  --wv-ease:cubic-bezier(.22,1,.36,1);
  --wv-ghost:rgba(12,12,13,.16);
  --wv-ghost-2:rgba(12,12,13,.30);
}
.theme-dark{
  --wv-ghost:rgba(255,255,255,.16);
  --wv-ghost-2:rgba(255,255,255,.32);
}

/* the pinned stage the drawing plays inside */
.wv-stage{position:relative}
.wv-pin{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;
  justify-content:center;overflow:hidden}

/* =====================================================================
   WEAVE — one section. The problems fray out, the same six gather back
   into the service. Fray's drawing language, carried through the turn.
   ===================================================================== */
.wv__pin{padding:0 var(--gutter) clamp(28px,6vh,72px);gap:0;justify-content:flex-end}
.wv__head{position:relative;width:100%;max-width:var(--container);margin:0 auto clamp(14px,2.4vh,30px);
  height:clamp(78px,11vh,120px)}
.wv__h{position:absolute;left:0;top:0;font-size:clamp(1.7rem,3.6vw,2.6rem);font-weight:var(--fw-heading);
  letter-spacing:-.03em;line-height:1.05;max-width:20ch;text-wrap:balance;
  opacity:0;translate:0 12px;transition:opacity .5s var(--wv-ease),translate .5s var(--wv-ease)}
.wv__h.is-on{opacity:1;translate:0 0}

.wv__board{position:relative;width:100%;max-width:var(--container);height:min(620px,64vh);margin:0 auto}
.wv__svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.wv__svg .fray{fill:none;stroke:var(--accent);stroke-width:1.2}
.wv__svg .gather{fill:none;stroke:var(--accent);stroke-width:1.2}
.wv__svg .trunk{fill:none;stroke:var(--border-strong);stroke-width:1.5}
.wv__svg .out{fill:none;stroke:var(--text);stroke-width:1.6}
.wv__svg .back{fill:none;stroke:var(--wv-ghost-2);stroke-width:1;stroke-dasharray:2 7}
.wv__svg .head{fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* the two problem statements — read first, then step aside */
.wv__stmt{position:absolute;left:0;width:26%;transform:translateY(-50%);
  font-size:clamp(1.02rem,1.7vw,1.42rem);font-weight:var(--fw-heading);letter-spacing:-.02em;line-height:1.24;
  opacity:0;transition:opacity .55s var(--wv-ease)}
.wv__stmt.is-on{opacity:1}
.wv__stmt b{display:block;font-weight:400;font-size:11px;color:var(--accent);margin-bottom:10px;letter-spacing:0}

/* the six — the only thing that survives the turn */
/* anchored on its FIRST LINE, not its centre — so the title never moves
   when the description underneath collapses */
.wv__pin6{position:absolute;transform:translateY(-.62em);width:21%;
  font-size:clamp(.85rem,1.15vw,1rem);font-weight:var(--fw-heading);letter-spacing:var(--ls-heading);line-height:1.25;
  opacity:0;transition:opacity .45s var(--wv-ease)}
.wv__pin6.is-on{opacity:1}
.wv__pin6 em{display:block;font-style:normal;font-weight:400;font-size:.78rem;color:var(--text-subtle);
  line-height:1.45;margin-top:1px;overflow:hidden;width:185%}

/* the answer */
.wv__blk{position:absolute;transform:translateY(-50%);opacity:0;translate:-10px 0;
  transition:opacity .55s var(--wv-ease),translate .55s var(--wv-ease)}
.wv__blk.is-on{opacity:1;translate:0 0}
.wv__st{font-size:clamp(.98rem,1.4vw,1.2rem);font-weight:var(--fw-heading);letter-spacing:var(--ls-heading);line-height:1.2}
.wv__run{margin:1px 0 14px;font-size:12px;color:var(--text-subtle);line-height:1.5}
.wv__blk .wv__run{display:flex;flex-wrap:wrap;align-items:baseline;row-gap:2px;padding-right:clamp(30px,3.6vw,52px)}
.wv__run:last-child{margin-bottom:0}
.wv__run s{text-decoration:none;color:var(--wv-ghost);padding:0 .3em}

.wv__end{position:absolute;transform:translateY(0);padding-top:13px;opacity:0;translate:-10px 0;
  transition:opacity .55s var(--wv-ease),translate .55s var(--wv-ease)}
.wv__end.is-on{opacity:1;translate:0 0}
.wv__et{font-size:clamp(.98rem,1.4vw,1.2rem);font-weight:var(--fw-heading);letter-spacing:var(--ls-heading);line-height:1.2}
.wv__note{position:absolute;font-size:11px;color:var(--text-subtle);white-space:nowrap;
  transform:translate(-50%,0);translate:0 -14px;opacity:0;transition:opacity .5s var(--wv-ease)}
.wv__note.is-on{opacity:1}

/* =====================================================================
   WEAVE — portrait. The same argument rotated: one spine running down the
   page, problems branching off it, then the spine carrying the answer.
   ===================================================================== */
.wm__pin{padding:clamp(56px,9vh,108px) var(--gutter) 0;display:flex;flex-direction:column;justify-content:flex-start}
.wm__head{position:relative;height:clamp(76px,10vh,96px);margin:clamp(18px,4vh,34px) 0 clamp(4px,1vh,10px);flex:none}
.wm__h{position:absolute;left:0;top:0;right:0;font-size:clamp(1.42rem,6.4vw,1.9rem);font-weight:var(--fw-heading);
  letter-spacing:-.03em;line-height:1.08;text-wrap:balance;
  opacity:0;translate:0 10px;transition:opacity .45s var(--wv-ease),translate .45s var(--wv-ease)}
.wm__h.is-on{opacity:1;translate:0 0}

.wm__board{position:relative;flex:1;min-height:0}
.wm__svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.wm__svg .fray{fill:none;stroke:var(--accent);stroke-width:1.2}
.wm__svg .spine{fill:none;stroke:var(--accent);stroke-width:1.3}
.wm__svg .rail{fill:none;stroke:var(--border-strong);stroke-width:1.3}
.wm__svg .out{fill:none;stroke:var(--text);stroke-width:1.5}
.wm__svg .back{fill:none;stroke:var(--wv-ghost-2);stroke-width:1;stroke-dasharray:2 6}
.wm__svg .head{fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}

.wm__stmt{position:absolute;left:0;right:30px;top:0;
  font-size:clamp(1.02rem,4.6vw,1.24rem);font-weight:var(--fw-heading);letter-spacing:-.02em;line-height:1.26;
  opacity:0;transition:opacity .38s var(--wv-ease),translate .38s var(--wv-ease)}
.wm__stmt.is-on{opacity:1}
.wm__stmt b{display:block;font-weight:400;font-size:11px;color:var(--accent);margin-bottom:8px;letter-spacing:0}

/* the six — anchored on their first line so collapsing the description
   underneath never moves the title */
.wm__row{position:absolute;left:0;right:30px;transform:translateY(-.62em);
  font-size:clamp(.86rem,3.9vw,.98rem);font-weight:var(--fw-heading);letter-spacing:var(--ls-heading);line-height:1.24;
  opacity:0;transition:opacity .34s var(--wv-ease),translate .34s var(--wv-ease)}
.wm__row.is-on{opacity:1}
.wm__row em{display:block;font-style:normal;font-weight:400;font-size:.76rem;color:var(--text-subtle);
  line-height:1.42;margin-top:3px;overflow:hidden}

.wm__blk{position:absolute;left:0;right:30px;opacity:0;translate:0 8px;
  transition:opacity .45s var(--wv-ease),translate .45s var(--wv-ease)}
.wm__blk.is-on{opacity:1;translate:0 0}
.wm__st{font-size:clamp(.9rem,4vw,1.02rem);font-weight:var(--fw-heading);letter-spacing:var(--ls-heading);line-height:1.2}
.wm__run{margin:3px 0 11px;font-size:11px;color:var(--text-subtle);line-height:1.45}
.wm__run:last-child{margin-bottom:0}
.wm__run s{text-decoration:none;color:var(--wv-ghost);padding:0 .28em}

.wm__end{position:absolute;left:0;right:30px;opacity:0;translate:0 8px;
  transition:opacity .45s var(--wv-ease),translate .45s var(--wv-ease)}
.wm__end.is-on{opacity:1;translate:0 0}
.wm__note{position:absolute;left:0;right:30px;font-size:10.5px;color:var(--text-subtle);line-height:1.45;
  opacity:0;transition:opacity .45s var(--wv-ease)}
.wm__note.is-on{opacity:1}

/* very small phones: buy back vertical room */
@media(max-width:380px){
  .wm__head{height:clamp(64px,11vh,86px);margin:clamp(12px,3vh,22px) 0 8px}
  .wm__run{font-size:10px;line-height:1.4;margin:3px 0 9px}
  .wm__row{font-size:.84rem}
  .wm__note{font-size:10px}
}

/* Reduced motion: weave.js paints the finished diagram once and never moves it,
   so only the element transitions need silencing here. */
@media(prefers-reduced-motion:reduce){
  .wv-stage *{transition-duration:.001ms!important;animation-duration:.001ms!important}
}