/* "What Later Levels Reuse": a full-width white section between the two data sections. Like them it
   opens on the light title band; the deck and the figure sit on white below it. */
.carry{--t-data:#3f6aa1;--t-tools:#347764;--t-strategy:#915f30;--t-user:#a34a62;--t-domain:#715c95;--c:var(--t-tools);--ease:cubic-bezier(.25,1,.5,1);
  position:relative;margin:0 calc(50% - 50vw) 0;padding:0 calc(50vw - 50%) 64px;background:#fff}
[data-kind-word=data],.carry-kinds [data-type=data],.carry-arc[data-type=data]{--k:var(--t-data)}
[data-kind-word=tools],.carry-kinds [data-type=tools],.carry-arc[data-type=tools]{--k:var(--t-tools)}
[data-kind-word=strategy],.carry-kinds [data-type=strategy],.carry-arc[data-type=strategy]{--k:var(--t-strategy)}
[data-kind-word=user],.carry-kinds [data-type=user],.carry-arc[data-type=user]{--k:var(--t-user)}
[data-kind-word=domain],.carry-kinds [data-type=domain],.carry-arc[data-type=domain]{--k:var(--t-domain)}
.carry-head{margin-bottom:40px}
/* The band is the same block as the other two Home sections' (home.css, .data-section>.section-heading). */
.carry-head h2{margin:0;padding:72px 0 80px;border-image:linear-gradient(var(--band) 0 0) fill 0/0/0 100vmax;font:800 var(--fs-2xl)/1.08 var(--display);letter-spacing:-.045em;color:var(--ink)}
.carry-deck{max-width:62ch;margin:48px 0 0;font-size:var(--fs-md);line-height:1.75;color:#545350}
.carry-deck a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--link-rule);text-underline-offset:4px}
.carry-deck a:hover{text-decoration-color:var(--ink)}
.carry-deck strong{color:var(--ink);font-weight:650;font-variant-numeric:tabular-nums}
.kind-word{display:inline;padding:0 1px;border:0;border-radius:var(--radius);background:none;font:inherit;font-weight:600;color:var(--k);cursor:pointer;text-decoration:underline dotted;text-decoration-thickness:1.5px;text-underline-offset:4px;transition:background .15s ease}
.kind-word:hover{background:color-mix(in srgb,var(--k) 9%,transparent)}
.kind-word[aria-pressed=true]{text-decoration-style:solid;background:color-mix(in srgb,var(--k) 10%,transparent)}
.kind-word:focus-visible{outline:2px solid var(--k);outline-offset:1px}
.carry-body{display:grid;grid-template-columns:minmax(260px,5fr) minmax(0,7fr);grid-template-areas:'fig fig' 'kinds note';gap:40px 72px;align-items:start}
.carry-figure{grid-area:fig;margin:0;min-width:0}.carry-kinds{grid-area:kinds}.carry-note{grid-area:note}
.carry-plot{position:relative}
/* Kinds: the key to the five colours. The kind shown forward takes its colour and its definition. */
.carry-kinds{margin:0;padding:0;list-style:none;border-top:1px solid var(--line)}
.carry-kinds li{border-bottom:1px solid var(--line)}
.carry-kinds button{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:auto 0fr;column-gap:12px;align-items:baseline;width:100%;padding:15px 2px 15px 0;border:0;background:none;text-align:left;color:var(--ink);cursor:pointer;transition:grid-template-rows .45s var(--ease)}
.carry-kinds button:focus-visible{outline:2px solid var(--k);outline-offset:2px}
.kind-swatch{align-self:center;width:16px;height:3px;border-radius:2px;background:var(--k)}
.kind-name{font:650 var(--fs-md)/1.3 var(--display);letter-spacing:-.015em;transition:color .2s}
.kind-count{font:500 var(--fs-xs)/1 var(--sans);font-variant-numeric:tabular-nums;color:var(--muted)}
.kind-def{grid-column:2/4;overflow:hidden;min-height:0;font-size:var(--fs-sm);line-height:1.55;color:#62625f;opacity:0;transition:opacity .3s,padding .45s var(--ease)}
.carry-kinds button:hover .kind-name,.carry-kinds .is-shown .kind-name{color:var(--k)}
.carry-kinds .is-shown{grid-template-rows:auto 1fr}
.carry-kinds .is-shown .kind-def{opacity:1;padding-top:7px}
/* A kept kind carries a solid rule beneath it. */
.carry-kinds [aria-pressed=true]::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--k)}
/* Figure */
.carry-arcs{display:block;width:100%;height:280px;overflow:visible}
.arc-line{fill:none;stroke:#d8d7d4;stroke-width:1.1;stroke-linecap:round;transition:stroke .2s ease,stroke-width .3s ease,opacity .2s ease}
.arc-hit{fill:none;stroke:transparent;stroke-width:14;pointer-events:none}
.carry-arc.is-on .arc-hit{pointer-events:stroke;cursor:pointer}
.carry-arc:not(.is-on) .arc-line{opacity:.7}
/* All five kinds at once: every link in its own colour. One kind forward: its links in colour, the rest grey. */
.carry-arc.is-on .arc-line{stroke:var(--k);stroke-width:1.5;opacity:.72}
.carry:not(.is-all) .carry-arc.is-on .arc-line{stroke-width:1.8;opacity:.8}
.carry-arc.is-feature .arc-line{stroke-width:2.4;opacity:1}
.carry-arc.is-hover .arc-line{stroke-width:3.2;opacity:1}
.arc-comet{fill:none;stroke:var(--c);stroke-width:6;stroke-linecap:round;opacity:0;pointer-events:none}
.carry.is-probing .arc-comet{visibility:hidden}
.arc-node{fill:#fff;stroke:#a7a7a3;stroke-width:1.4;transition:fill .25s var(--lit-delay,0s),stroke .25s var(--lit-delay,0s)}
.arc-node.is-on{fill:var(--c);stroke:var(--c)}
.arc-ring{fill:none;stroke:var(--c);stroke-width:1.5;opacity:0;transform-box:fill-box;transform-origin:center;pointer-events:none}
/* The five cards share two rows through subgrid: a name that wraps makes the name row taller in
   every card, so the five descriptions still start on one line. */
.carry-levels{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));grid-template-rows:auto auto;gap:0 14px;margin:0;padding:0;list-style:none}
.carry-levels li{--lit-delay:0s;display:grid;grid-row:span 2;grid-template-rows:subgrid;justify-items:center;min-width:0}
.carry-levels a{display:grid;grid-row:span 2;grid-template-rows:subgrid;grid-template-columns:auto 1fr;column-gap:8px;align-items:baseline;width:100%;max-width:210px;padding:10px 12px 11px;border:1px solid var(--line);border-radius:var(--radius);background:#fff;color:var(--ink);text-decoration:none;transition:border-color .25s ease var(--lit-delay,0s)}
.carry-levels a:hover{border-color:#a7a7a3}
.carry-levels b{font:700 var(--fs-xs)/1 var(--mono);color:var(--muted);transition:color .25s var(--lit-delay,0s)}
.carry-levels strong{font:650 var(--fs-sm)/1.2 var(--display);letter-spacing:-.01em}
.carry-levels span{grid-column:1/-1;margin-top:6px;font:400 var(--fs-xs)/1.4 var(--sans);color:var(--muted)}
.carry-levels .is-on a{border-color:var(--ink)}
.carry-levels .is-on b{color:var(--c)}
/* Note */
.carry-note{min-height:228px;padding-top:16px;border-top:1px solid var(--line)}
.note-kind{margin:0 0 12px;font:600 var(--fs-xs)/1.5 var(--sans);color:var(--c)}
.note-track{position:relative;width:min(100%,340px);margin:0 0 10px}
.note-route{margin:0 0 16px;font:500 var(--fs-sm)/1.5 var(--sans);color:var(--ink)}
.note-route b{font:600 var(--fs-xs)/1 var(--mono);color:var(--c)}
.note-route>span{white-space:nowrap}
.note-route i{margin-right:4px;font-style:normal;color:var(--muted)}
.note-track ol{position:relative;z-index:1;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));margin:0;padding:0;list-style:none}
.note-track ol::before{content:'';position:absolute;z-index:-1;top:5px;left:10%;right:10%;height:1.5px;background:#e5e4e1}
.note-track li{display:flex;flex-direction:column;align-items:center;min-width:0;text-align:center}
.note-track i{width:11px;height:11px;border:1.5px solid #ccccc9;border-radius:50%;background:#fff;box-sizing:border-box}
.note-track b{margin-top:8px;font:600 var(--fs-xs)/1 var(--mono);color:var(--muted)}
.note-track .is-between i{border-color:color-mix(in srgb,var(--c) 45%,#fff)}
.note-track .is-from i,.note-track .is-to i{border-color:var(--c);background:var(--c)}
.note-track .is-from i{background:#fff;border-width:2.5px}
.note-track .is-from b,.note-track .is-to b{color:var(--c)}
.note-track s{position:absolute;top:5px;left:calc((var(--a) + .5) * 20%);width:calc((var(--b) - var(--a)) * 20%);height:2px;margin-top:-.25px;background:var(--c);transform-origin:left}
.carry-note h3{margin:0;font:700 var(--fs-lg)/1.25 var(--display);letter-spacing:-.025em;color:var(--ink)}
.carry-note blockquote{margin:16px 0 0;padding:0 0 0 16px;border-left:2px solid var(--c)}
.carry-note blockquote p{margin:0;max-width:46ch;font:500 var(--fs-lg)/1.5 var(--display);letter-spacing:-.01em;color:var(--ink)}
.carry-note blockquote footer{margin-top:7px;font:600 var(--fs-xs)/1.4 var(--sans);color:var(--ink)}
.carry-note blockquote footer span{font-weight:400;color:var(--muted)}
.note-detail{max-width:62ch;margin:14px 0 0;font-size:var(--fs-sm);line-height:1.6;color:#62625f}
/* Footer */
.carry-foot{display:flex;align-items:center;gap:26px;margin-top:44px}
.carry-cta{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:12px 18px;border-radius:var(--radius);background:var(--ink);color:#fff;font:600 var(--fs-sm)/1 var(--sans);text-decoration:none;transition:background .15s}
.carry-cta:hover{background:#3b3b38}
.carry-cta span{transition:transform .2s var(--ease)}
.carry-cta:hover span{transform:translateX(3px)}
/* Entrance: the deck and the figure only. The title band is there from the start, and only this
   section's caption waits for it (the other Home figures keep theirs). */
.carry-js .carry-deck,.carry-js .carry-levels li,.carry-js .carry .fig-label{opacity:0;transform:translateY(14px);filter:blur(4px);transition:opacity .7s var(--ease),transform .7s var(--ease),filter .7s var(--ease)}
.carry-js .carry.is-head-in .carry-deck,.carry-js .carry.is-in .carry-levels li,.carry-js .carry.is-in .fig-label{opacity:1;transform:none;filter:none}
.carry-js .carry.is-in .carry-levels li:nth-child(n){transition:opacity .6s var(--ease),transform .6s var(--ease),filter .6s var(--ease)}
.carry-js .carry.is-in .carry-levels li:nth-child(1){transition-delay:.25s}.carry-js .carry.is-in .carry-levels li:nth-child(2){transition-delay:.33s}.carry-js .carry.is-in .carry-levels li:nth-child(3){transition-delay:.41s}.carry-js .carry.is-in .carry-levels li:nth-child(4){transition-delay:.49s}.carry-js .carry.is-in .carry-levels li:nth-child(5){transition-delay:.57s}
@media(max-width:900px){
  .carry{padding-bottom:48px}
  .carry-head{margin-bottom:36px}
  .carry-body{grid-template-columns:1fr;grid-template-areas:'fig' 'kinds' 'note';gap:30px}
  /* Stacked, the key's last rule already sits above the note; a second rule would double it. */
  .carry-note{padding-top:0;border-top:0}
  .carry-levels{gap:0 8px}
  .carry-levels a{padding:9px 9px 10px}
}
@media(max-width:600px){
  .carry{padding-bottom:40px}
  .carry-head h2{padding:48px 0 52px}
  .carry-deck{margin-top:32px}
  .carry-deck{font-size:var(--fs-md)}
  .fig-label{flex-direction:column;gap:2px}
  .carry-arcs{height:150px}
  .carry-levels{gap:0 5px}
  .carry-levels a{display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 0}
  /* Phones show the level numbers only, as the Tasks level tabs do. */
  .carry-levels a{min-height:40px;justify-content:center}
  .carry-levels b{font-size:var(--fs-sm)}
  .carry-levels strong,.carry-levels span{display:none}
  .carry-note{min-height:280px}
  .carry-note h3{font-size:var(--fs-lg)}
  .carry-note blockquote p{font-size:var(--fs-md)}
  .carry-foot{flex-wrap:wrap;gap:16px 20px;margin-top:30px}
}
@media(prefers-reduced-motion:reduce){
  .carry *{transition:none!important}
  .carry-js .carry-deck,.carry-js .carry-levels li,.carry-js .carry .fig-label{opacity:1;transform:none;filter:none}
}