/* Company Redesign demo. The company as a floor plan: today's tangle, every step marked,
   then the plan redraws itself into fewer rooms around one corridor. */
.cr-head {display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:1.2rem 3rem}
.cr-h {flex:1 1 34rem;min-height:2.06em;max-width:21ch;font:400 clamp(2.1rem,4.2vw,4.4rem)/1.03 'Fraunces','Fraunces Fallback',Georgia,serif;letter-spacing:-.025em;color:var(--ink)}
.cr-w {display:inline-block;animation:cr-word .7s var(--ease) both}
@keyframes cr-word {from{opacity:0;filter:blur(6px);transform:translateY(.18em)}to{opacity:1;filter:none;transform:none}}
.cr-toggle {display:flex;gap:1.6rem;padding-bottom:.5rem}
.cr-toggle button {padding:.3rem 0;font:400 1.05rem/1.2 'Fraunces','Fraunces Fallback',Georgia,serif;color:var(--ink-2);background:none;border:0;cursor:pointer;text-decoration:underline;text-decoration-color:transparent;text-decoration-thickness:1px;text-underline-offset:.4em;transition:color .25s,text-decoration-color .25s}
.cr-toggle button:hover {color:var(--ink);text-decoration-color:var(--rule)}
.cr-toggle button[aria-pressed="true"] {color:var(--ink);text-decoration-color:var(--oxide)}
.cr button:focus-visible {outline:1px solid var(--oxide);outline-offset:3px}

.cr-stage {display:grid;grid-template-columns:minmax(0,1.6fr) minmax(17rem,1fr);gap:clamp(2.5rem,5vw,4.5rem);margin-top:clamp(2rem,3.5vw,3rem);padding-top:clamp(2rem,3vw,2.6rem);border-top:1px solid var(--rule)}

/* ---- The plan ---- */
.cr-plan {position:relative;aspect-ratio:900/560;align-self:start}
.cr-svg {position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.cr-line {fill:none;stroke-dasharray:1;stroke-dashoffset:0;transition:stroke-dashoffset 1.4s var(--ease),opacity .8s}
.cr-shell {stroke:var(--ink);stroke-width:1.6}
.cr-wall {stroke:var(--ink);stroke-width:1.2;stroke-linecap:round}
.cr-merge {stroke:var(--ink);stroke-width:1.2;stroke-linecap:round}
.cr-swing {fill:none;stroke:var(--ink-2);stroke-width:.7;opacity:.4;transition:opacity .8s}
.cr-tangle {fill:none;stroke:var(--ink-2);stroke-width:1;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:0;opacity:.75;transition:stroke-dashoffset 3.2s cubic-bezier(.45,.05,.55,.95),opacity .7s}
.cr-stop {fill:var(--ink);opacity:.9;transition:opacity .4s}
.cr-route {fill:none;stroke:var(--oxide);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:0;transition:stroke-dashoffset 1.6s var(--ease),opacity .5s}
.cr-joint {fill:var(--oxide);transition:opacity .4s}
.cr[data-mode="old"] .cr-joint {opacity:0}
.cr[data-mode="new"] .cr-joint {transition-delay:1.5s}
.cr-node {fill:var(--oxide);transform-box:fill-box;transform-origin:center;transition:opacity .4s,transform .6s cubic-bezier(.3,1.5,.5,1)}

.cr-rooms {position:absolute;inset:0}
.cr-room {position:absolute;display:flex;flex-direction:column;align-items:flex-start;gap:.15rem;padding:clamp(.6rem,1.4vw,1rem) clamp(.7rem,1.5vw,1.15rem);margin:0;border:0;background:none;color:var(--ink);font:inherit;text-align:left;cursor:pointer;transition:opacity .6s var(--ease)}
.cr-room[data-row="1"] {justify-content:flex-end}
.cr-rn {font-size:clamp(.8125rem,1.1vw,.95rem);font-weight:500;line-height:1.25;color:var(--ink);text-decoration:underline;text-decoration-color:transparent;text-decoration-thickness:1px;text-underline-offset:.3em;transition:color .25s,text-decoration-color .25s}
.cr-room:hover .cr-rn {text-decoration-color:var(--rule)}
.cr-room.is-sel .cr-rn {color:var(--oxide);text-decoration-color:var(--oxide)}
.cr-ppl {font-size:.75rem;color:var(--ink-2)}
.cr-steps,.cr-after,.cr-dl ol {list-style:none;margin:0;padding:0}
.cr-steps {margin-top:.35rem;display:grid;gap:.08rem}
.cr-steps li {font-size:clamp(.66rem,.82vw,.75rem);line-height:1.38;color:var(--ink-2);white-space:nowrap;opacity:0;transform:translateY(4px);transition:opacity .45s var(--ease),transform .5s var(--ease)}
.cr-old.is-listed .cr-steps li {opacity:1;transform:none}
.cr-old.is-listed .cr-steps li:nth-child(2) {transition-delay:.05s}
.cr-old.is-listed .cr-steps li:nth-child(3) {transition-delay:.1s}
.cr-old.is-listed .cr-steps li:nth-child(4) {transition-delay:.15s}
.cr-old.is-listed .cr-steps li:nth-child(5) {transition-delay:.2s}

/* Verdicts as coloured words; a struck line for the steps that go. */
.cr-st {background:linear-gradient(currentColor,currentColor) no-repeat 0 55%/0 1px;transition:background-size .45s var(--ease),color .3s}
.cr-mk {white-space:nowrap;opacity:0;font-weight:500;transition:opacity .35s}
li[data-m="go"] .cr-mk {color:var(--ink-2);font-weight:400}
li[data-m="merge"] .cr-mk {color:var(--ink)}
li[data-m="agent"] .cr-mk,li[data-d="agent"] .cr-mk {color:var(--oxide)}
li[data-d="person"] .cr-mk {color:var(--ink-2);font-weight:400}
li.is-m .cr-mk,.cr-dl li .cr-mk {opacity:1}
li.is-m[data-m="go"] .cr-st,.cr-dl li[data-m="go"] .cr-st {background-size:100% 1px;color:color-mix(in srgb,var(--ink-2) 70%,transparent)}
li.is-m[data-m="agent"] .cr-st {color:var(--ink)}
li.is-m[data-m="merge"] .cr-st {color:var(--ink)}

/* Redesigned rooms */
.cr-hrs {display:flex;align-items:baseline;gap:.45rem;margin-top:.3rem;font-size:.8125rem;color:var(--ink-2)}
.cr-hn {font:400 clamp(1.6rem,3vw,2.7rem)/1 'Fraunces','Fraunces Fallback',Georgia,serif;letter-spacing:-.02em;color:var(--oxide);font-variant-numeric:tabular-nums}
.cr-role {margin-top:.35rem;max-width:22ch;font:400 clamp(.85rem,1.05vw,1rem)/1.3 'Fraunces','Fraunces Fallback',Georgia,serif;color:var(--ink)}

/* ---- Modes. data-mode="new" (also the static markup) shows the redrawn plan. ---- */
.cr[data-mode="new"] .cr-old,.cr[data-mode="old"] .cr-new {opacity:0;pointer-events:none}
.cr[data-mode="new"] .cr-new {transition-delay:.55s}
.cr[data-mode="new"] .cr-new[data-key="finance"] {transition-delay:.7s}
.cr[data-mode="new"] .cr-new[data-key="supply"] {transition-delay:.85s}
.cr[data-mode="new"] .cr-new[data-key="people"] {transition-delay:1s}
.cr[data-mode="new"] .cr-merge {stroke-dashoffset:-1;opacity:0}
.cr[data-mode="new"] .cr-tangle {opacity:0}
.cr[data-mode="new"] .cr-stop {opacity:0}
.cr[data-mode="old"] .cr-route {stroke-dashoffset:1;opacity:0}
.cr[data-mode="old"] .cr-node {opacity:0;transform:scale(.3)}
.cr[data-mode="new"] .cr-route {transition-delay:.7s}
.cr[data-mode="new"] .cr-node {transition-delay:calc(1.6s + var(--i) * .12s)}

/* ---- Story phases (set by the script). ---- */
.cr[data-phase="pre"] .cr-line {stroke-dashoffset:1}
.cr[data-phase="pre"] .cr-swing,.cr[data-phase="pre"] .cr-room {opacity:0}
.cr[data-phase="pre"] .cr-tangle,.cr[data-phase="draw"] .cr-tangle {stroke-dashoffset:1}
.cr[data-phase="pre"] .cr-stop,.cr[data-phase="draw"] .cr-stop {opacity:0}
.cr[data-phase="route"] .cr-stop {opacity:0;animation:cr-stop .3s ease forwards;animation-delay:calc(var(--i) * .27s)}
@keyframes cr-stop {to{opacity:.9}}
.cr[data-phase="pre"] .cr-side,.cr[data-phase="draw"] .cr-side {opacity:0}
.cr-side {transition:opacity .8s var(--ease)}
.cr[data-phase="route"] .cr-detail,.cr[data-phase="mark"] .cr-detail {opacity:0}

/* ---- Side: the numbers and the room in focus ---- */
.cr-metrics {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin:0;padding-bottom:1.4rem;border-bottom:1px solid var(--rule)}
.cr-metrics dt {font-size:.8125rem;line-height:1.3;color:var(--ink-2)}
.cr-metrics dd {display:flex;align-items:baseline;gap:.45rem;margin:.45rem 0 0}
.cr-v {font:400 clamp(2rem,3.2vw,3rem)/1 'Fraunces','Fraunces Fallback',Georgia,serif;letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums}
.cr-v[data-v="hours"] {color:var(--oxide)}
.cr-was {font-size:.875rem;color:var(--ink-2);opacity:0;transition:opacity .5s}
.cr[data-mode="new"] .cr-was {opacity:1;transition-delay:1.2s}

.cr-detail {padding-top:1.4rem;transition:opacity .35s var(--ease),transform .45s var(--ease)}
.cr-detail.is-swap {opacity:0;transform:translateY(6px)}
.cr-dn {font:400 1.7rem/1.1 'Fraunces','Fraunces Fallback',Georgia,serif;letter-spacing:-.02em;color:var(--ink)}
.cr-df {margin-top:.3rem;font-size:.8125rem;color:var(--ink-2)}
.cr-dh {margin-top:.9rem;font-size:.875rem;color:var(--ink-2)}
.cr-dh b {margin-right:.3rem;font:400 1.5rem/1 'Fraunces','Fraunces Fallback',Georgia,serif;color:var(--oxide);font-variant-numeric:tabular-nums}
.cr-dr {margin-top:.4rem;font:400 1.08rem/1.4 'Fraunces','Fraunces Fallback',Georgia,serif;color:var(--ink)}
.cr-dl {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.1rem;margin-top:1.2rem}
.cr-dt {padding-bottom:.45rem;border-bottom:1px solid var(--rule);font-size:.8125rem;font-weight:500;color:var(--ink)}
.cr-dl ol {display:grid;gap:.1rem;margin-top:.5rem}
.cr-dl li {font-size:.78rem;line-height:1.4;color:var(--ink)}
.cr[data-mode="old"] .cr-dl > div:last-child {opacity:.45}
.cr[data-mode="new"] .cr-dl > div:first-child {opacity:.7}
.cr-dl > div {transition:opacity .5s}

@media(max-width:1100px){
 .cr-stage {grid-template-columns:1fr}
 .cr-side {display:grid;grid-template-columns:minmax(0,1fr);max-width:44rem}
}
@media(max-width:760px){
 .cr-steps,.cr-ppl,.cr-role {display:none}
 .cr-room {padding:.45rem .55rem}
 .cr-rn {font-size:.75rem}
 .cr-hrs {font-size:0;margin-top:.15rem}
 .cr-hn {font-size:1.5rem}
 .cr-toggle {padding-bottom:0}
 .cr-metrics {gap:.8rem}
 .cr-metrics dd {flex-direction:column;align-items:flex-start;gap:.2rem}
 .cr-dl {grid-template-columns:1fr;gap:1.2rem}
}