/* //VENTURE Talent IP: Step 1 (venture/talent/start.php), the editor in "My venture profile" (venture/talent/hub.php,
   talent-editor.js) and a talent's page (venture/talent/page.php). From the Claude Design "Personal brand":
   ink, paper, the green, two-pixel rules, Archivo. No artwork: empty places get type and hatching. */

.tl, .tl-hub, .tl-tabs, .tl-cta { --tl-ink: var(--ink, #0a0a0a); --tl-paper: #f5f5f3; --tl-g: var(--g, #00FF50); --tl-mute: #4a4a46; --tl-soft: #fafaf8; --tl-red: #b3261e; }
.tl, .tl-hub { font-family: 'Archivo', sans-serif; color: var(--tl-ink); }
.tl [hidden], .tl-hub [hidden], .tl-tabs [hidden] { display: none !important; }
.tl button, .tl-hub button, .tl-hub select, .tl-hub input, .tl-hub textarea, .tl select, .tl textarea, .tl input { font-family: inherit; }
.tl a, .tl-hub a, .tl-tabs a { text-decoration: none; color: inherit; }
.tl-in { max-width: 1400px; margin: 0 auto; padding-left: var(--gut, clamp(16px, 3vw, 36px)); padding-right: var(--gut, clamp(16px, 3vw, 36px)); }

/* - shared pieces - */
.tl-kick { margin: 0 0 10px; font: 800 10.5px 'Archivo', sans-serif; letter-spacing: .16em; color: var(--tl-mute); }
.tl-kick.is-g { color: var(--tl-g); margin-bottom: 14px; font-size: 11px; }
.tl-lab { margin: 0 0 8px; font: 800 10px 'Archivo', sans-serif; letter-spacing: .14em; }
.tl-h1 { margin: 0 0 24px; font: 900 clamp(40px, 5vw, 76px)/.88 'Archivo', sans-serif; letter-spacing: -.055em; }
.tl-lede { max-width: 60ch; font: 600 15px/1.5 'Archivo', sans-serif; color: var(--tl-mute); }
.tl-go, .tl-dark, .tl-line, .tl-ghostb { display: inline-flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer; border: 2px solid var(--tl-ink); font: 800 11.5px 'Archivo', sans-serif; letter-spacing: .12em; padding: 11px 15px; text-align: center; }
.tl-go { background: var(--tl-g); color: var(--tl-ink); }
.tl-go:hover { background: var(--tl-ink); color: var(--tl-g); }
.tl-go.is-live { background: var(--tl-ink); color: var(--tl-g); }
.tl-go:disabled, .tl-dark:disabled, .tl-line:disabled { opacity: .45; cursor: not-allowed; }
.tl-dark { background: var(--tl-ink); color: var(--tl-g); }
.tl-dark:hover { background: var(--tl-g); color: var(--tl-ink); }
.tl-line { background: transparent; color: var(--tl-ink); }
.tl-line:hover { background: var(--tl-g); }
.tl-sm { padding: 7px 10px; font-size: 10px; border-width: 1px; }
.tl-chip { display: inline-block; padding: 2px 7px; border: 1px solid currentColor; font: 800 9px 'Archivo', sans-serif; letter-spacing: .12em; font-style: normal; }
.tl-chip.is-g { background: var(--tl-g); color: var(--tl-ink); border-color: var(--tl-g); }
.tl-priv { margin-left: auto; padding: 1px 6px; border: 1px solid var(--tl-ink); font: 800 8.5px 'Archivo', sans-serif; letter-spacing: .12em; white-space: nowrap; background: #fff; color: var(--tl-ink); }
.tl-st { display: inline-block; padding: 2px 6px; font: 800 8.5px 'Archivo', sans-serif; letter-spacing: .1em; font-style: normal; background: #fff; color: var(--tl-ink); border: 1px solid var(--tl-ink); white-space: nowrap; }
.tl-st.is-verified, .tl-st.is-linked { background: var(--tl-g); }
.tl-cat { display: inline-block; padding: 3px 7px; font: 800 9.5px 'Archivo', sans-serif; letter-spacing: .13em; border: 1px solid var(--tl-ink); }
.tl-bst { display: inline-block; padding: 1px 6px; margin-right: 8px; font: 800 8.5px 'Archivo', sans-serif; letter-spacing: .1em; font-style: normal; background: #fff; color: var(--tl-ink); border: 1px solid var(--tl-ink); }
.tl-bst.is-live { background: var(--tl-g); }
.tl-hatch { display: block; height: 14px; background: repeating-linear-gradient(-45deg, var(--tl-ink) 0 2px, transparent 2px 8px); }
.tl-hatchbar { height: 5px; background: repeating-linear-gradient(-45deg, var(--tl-g) 0 4px, var(--tl-ink) 4px 8px); }
.tl-empty-s { margin: 6px 0; font: 600 12.5px 'Archivo', sans-serif; color: var(--tl-mute); }
.tl-note { margin-top: 5px; font: 600 11.5px/1.45 'Archivo', sans-serif; color: var(--tl-mute); }
.tl-note.is-miss { color: var(--tl-red); }
.tl-plan { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 14px 0 0; padding: 12px 14px; border: 2px dashed var(--tl-ink); font: 700 13px/1.45 'Archivo', sans-serif; }
.tl-plan a { text-decoration: underline; font-weight: 800; }

/* ============================== Step 1 ============================== */
.tl-start { background: #ededea; min-height: 70vh; margin-top: 74px; }
.hp-has-sub .tl-start, .hp-has-sub .tl-page { margin-top: 126px; }
.tl-step { max-width: 1240px; margin: 0 auto; padding: clamp(28px, 4vw, 56px) var(--gut, clamp(16px, 3vw, 36px)) 80px; }
.tl-kinds { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 22px; }
.tl-kind { display: flex; flex-direction: column; align-items: flex-start; text-align: left; cursor: pointer; padding: 22px; min-height: 220px; background: #fff; color: var(--tl-ink); border: 2px solid var(--tl-ink); transition: box-shadow .15s; }
.tl-kind.is-on { background: var(--tl-ink); color: var(--tl-paper); box-shadow: 8px 8px 0 var(--tl-g); }
.tl-kind-k { font: 800 10.5px 'Archivo', sans-serif; letter-spacing: .16em; margin-bottom: 24px; opacity: .75; }
.tl-kind-t { font: 900 clamp(30px, 3vw, 44px)/.92 'Archivo', sans-serif; letter-spacing: -.045em; }
.tl-kind-d { font: 600 14.5px/1.5 'Archivo', sans-serif; margin-top: 10px; opacity: .85; }
.tl-kind-x { font: 800 11px 'Archivo', sans-serif; letter-spacing: .12em; margin-top: auto; padding-top: 16px; }
.tl-subs { background: #fff; border: 2px solid var(--tl-ink); padding: 18px 20px; }
.tl-subs-g { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.tl-sub { min-width: 0; cursor: pointer; text-align: left; padding: 12px; background: var(--tl-soft); color: var(--tl-ink); border: 2px solid var(--tl-ink); }
.tl-sub.is-on { background: var(--tl-g); }
.tl-sub b { display: block; font: 900 15px 'Archivo', sans-serif; }
.tl-sub span { display: block; font: 600 11.5px/1.4 'Archivo', sans-serif; margin-top: 4px; opacity: .8; }
.tl-subs-f { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 16px; }
.tl-subs-f > span { font: 600 12.5px/1.45 'Archivo', sans-serif; color: var(--tl-mute); flex: 1 1 260px; }
.tl-subs-f .tl-go { margin-left: auto; padding: 13px 18px; font-size: 12px; }
.tl-proj { padding: 16px 18px; background: #fff; border: 2px dashed var(--tl-ink); font: 700 14px/1.5 'Archivo', sans-serif; }
.tl-proj a { text-decoration: underline; margin-left: 4px; }
.tl-gate { min-height: 50vh; }

/* ============================== "My venture profile": the tabs and the call to start ============================== */
.tl-tabs { position: sticky; top: 126px; z-index: 20; background: var(--tl-ink); color: var(--tl-paper); border-top: 1px solid #2a2a2a; }
.hp-scrolled .tl-tabs { top: 82px; }
.tl-tabs-in { display: flex; align-items: center; gap: 0; overflow-x: auto; scrollbar-width: none; }
.tl-tabs-in::-webkit-scrollbar { display: none; }
.tl-tabs-in > a { flex: none; white-space: nowrap; padding: 13px 14px; font: 800 10.5px 'Archivo', sans-serif; letter-spacing: .1em; color: #bdbdb8; }
.tl-tabs-in > a:hover { color: var(--tl-paper); }
.tl-tabs-in > a.is-on { background: var(--tl-g); color: var(--tl-ink); }
.tl-tabs-new { color: var(--tl-g) !important; }
.tl-tabs-st { margin-left: auto; flex: none; display: flex; align-items: center; gap: 10px; padding-left: 14px; font: 700 12px 'Archivo', sans-serif; color: #9a9a95; white-space: nowrap; }
.tl-tabs-st em { font-style: normal; }
.tl-cta { display: grid; grid-template-columns: 220px minmax(0, 1fr); margin-bottom: 34px; background: #fff; border: 2px solid var(--tl-ink); }
.tl-cta-art { position: relative; overflow: hidden; background: repeating-linear-gradient(-45deg, var(--tl-ink) 0 2px, #fff 2px 9px); border-right: 2px solid var(--tl-ink); min-height: 180px; }
.tl-cta-art span { position: absolute; left: 12px; bottom: 6px; font: 900 54px/.8 'Archivo', sans-serif; letter-spacing: -.06em; color: var(--tl-g); -webkit-text-stroke: 1px var(--tl-ink); }
.tl-cta-t { padding: 22px 24px; }
.tl-cta-t h2 { margin: 0 0 8px; font: 900 clamp(28px, 3vw, 42px)/.95 'Archivo', sans-serif; letter-spacing: -.05em; }
.tl-cta-t p { margin: 0 0 16px; max-width: 64ch; font: 600 14.5px/1.5 'Archivo', sans-serif; color: var(--tl-mute); }
.tl-cta-t .tl-kick { margin-bottom: 10px; }

/* ============================== the editor ============================== */
.tl-hub { background: #ededea; }
.tl-pane { padding-bottom: 60px; }
.tl-ed-head { background: #fff; border-bottom: 2px solid var(--tl-ink); }
.tl-ed-head-in { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding-top: 12px; padding-bottom: 12px; }
.tl-type { padding: 3px 8px; background: var(--tl-g); color: var(--tl-ink); font: 800 9.5px 'Archivo', sans-serif; letter-spacing: .13em; }
.tl-aud { display: flex; align-items: center; gap: 8px; font: 800 10px 'Archivo', sans-serif; letter-spacing: .12em; }
.tl-aud select { height: 34px; border: 1px solid var(--tl-ink); background: var(--tl-soft); padding: 0 8px; font: 700 13px 'Archivo', sans-serif; }
.tl-saved { margin-left: auto; font: 700 12px 'Archivo', sans-serif; color: var(--tl-mute); }
.tl-saved.is-dirty, .tl-saved.is-busy { color: #8a6d00; }
.tl-saved.is-bad { color: var(--tl-red); }
.tl-ed-g { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 18px; align-items: start; padding-top: 20px; }
.tl-br-g { grid-template-columns: 320px minmax(0, 1fr); }
.tl-secs { position: sticky; top: 190px; display: flex; flex-direction: column; gap: 6px; }
.hp-scrolled .tl-secs { top: 146px; }
.tl-sec { display: flex; align-items: flex-start; gap: 11px; padding: 13px; cursor: pointer; text-align: left; background: #fff; color: var(--tl-ink); border: 2px solid var(--tl-ink); }
.tl-sec.is-on { background: var(--tl-ink); color: var(--tl-paper); }
.tl-sec-box { width: 24px; height: 24px; flex: none; display: grid; place-items: center; font: 900 11px 'Archivo', sans-serif; border: 2px solid currentColor; }
.tl-sec.is-ok .tl-sec-box { background: var(--tl-g); color: var(--tl-ink); border-color: var(--tl-g); }
.tl-sec-t { min-width: 0; flex: 1; }
.tl-sec-t b { display: block; font: 900 14.5px/1.15 'Archivo', sans-serif; }
.tl-sec-m { display: block; margin-top: 3px; font: 700 11.5px 'Archivo', sans-serif; color: var(--tl-mute); }
.tl-sec.is-on .tl-sec-m { color: #9a9a95; }
.tl-panel { min-width: 0; background: #fff; border: 2px solid var(--tl-ink); }
.tl-panel-h { padding: 20px 22px 16px; border-bottom: 2px solid var(--tl-ink); }
.tl-panel-k { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 8px; font: 800 11px 'Archivo', sans-serif; letter-spacing: .18em; color: var(--tl-mute); }
.tl-vis { padding: 2px 7px; font: 800 9px 'Archivo', sans-serif; letter-spacing: .12em; font-style: normal; border: 1px solid var(--tl-ink); background: #f4fff7; color: var(--tl-ink); }
.tl-vis.is-mixed { background: #fff; }
.tl-panel-h h2 { margin: 0 0 8px; font: 900 clamp(28px, 3vw, 42px)/.95 'Archivo', sans-serif; letter-spacing: -.05em; }
.tl-panel-h p { margin: 0; max-width: 64ch; font: 600 14.5px/1.5 'Archivo', sans-serif; color: var(--tl-mute); }
.tl-fg { padding: 20px 22px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.tl-f { min-width: 0; }
.tl-f.is-wide { grid-column: 1 / -1; }
.tl-f.is-miss .tl-inp, .tl-f.is-miss .tl-list { outline: 2px solid var(--tl-red); outline-offset: 1px; }
.tl-fh { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.tl-fl { font: 800 10px 'Archivo', sans-serif; letter-spacing: .14em; }
.tl-rq { font: 800 8.5px 'Archivo', sans-serif; letter-spacing: .12em; color: #9a9a95; }
.tl-rq.is-rq { color: var(--tl-red); }
.tl-inp { display: block; width: 100%; box-sizing: border-box; height: 44px; border: 1px solid var(--tl-ink); border-radius: 0; background: var(--tl-soft); padding: 0 12px; outline: none; font: 600 14px 'Archivo', sans-serif; color: var(--tl-ink); }
.tl-inp:focus { box-shadow: inset 0 -3px 0 var(--tl-g); }
.tl-ta { height: auto; min-height: 96px; padding: 11px 12px; resize: vertical; font: 500 14px/1.55 'Archivo', sans-serif; }
.tl-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.tl-opt { cursor: pointer; padding: 7px 10px; font: 800 12px 'Archivo', sans-serif; background: #fff; color: var(--tl-ink); border: 1px solid var(--tl-ink); }
.tl-opt.is-on { background: var(--tl-ink); color: var(--tl-g); }
.tl-chips.is-read .tl-opt { cursor: default; }
.tl-list { display: flex; flex-direction: column; gap: 6px; }
.tl-item { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 10px 12px; border: 1px solid var(--tl-ink); background: var(--tl-soft); }
.tl-grip { cursor: grab; color: #9a9a95; font: 900 13px 'Archivo', sans-serif; user-select: none; }
.tl-item-t { min-width: 0; flex: 1 1 180px; font: 800 13.5px 'Archivo', sans-serif; overflow-wrap: anywhere; }
.tl-item-m { font: 600 11.5px 'Archivo', sans-serif; color: var(--tl-mute); }
.tl-item-m.is-miss { color: var(--tl-red); }
.tl-x { cursor: pointer; border: 0; background: none; padding: 2px 4px; font: 800 11px 'Archivo', sans-serif; letter-spacing: .06em; color: var(--tl-mute); }
.tl-x:hover { color: var(--tl-ink); text-decoration: underline; }
.tl-addb { display: block; width: 100%; margin-top: 6px; cursor: pointer; padding: 10px; text-align: center; border: 1px dashed var(--tl-ink); background: transparent; font: 800 11px 'Archivo', sans-serif; letter-spacing: .12em; color: var(--tl-ink); }
.tl-addb:hover { background: var(--tl-g); }
.tl-addp { margin-top: 6px; padding: 12px; border: 2px solid var(--tl-ink); background: #fff; }
.tl-addt { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 10px; }
.tl-addt button { cursor: pointer; padding: 6px 9px; border: 1px solid var(--tl-ink); background: #fff; font: 800 10px 'Archivo', sans-serif; letter-spacing: .1em; }
.tl-addt button.is-on { background: var(--tl-ink); color: var(--tl-g); }
.tl-addpane { display: flex; flex-direction: column; gap: 6px; max-height: 320px; overflow: auto; }
.tl-addf { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 6px; }
.tl-addpane .tl-dark { align-self: flex-start; }
.tl-pick { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; cursor: pointer; text-align: left; padding: 9px 11px; border: 1px solid var(--tl-ink); background: var(--tl-soft); }
.tl-pick:hover { background: #f4fff7; box-shadow: inset 4px 0 0 var(--tl-g); }
.tl-pick b { flex: 1 1 180px; min-width: 0; font: 800 13px 'Archivo', sans-serif; }
.tl-pick em { font: 600 11.5px 'Archivo', sans-serif; font-style: normal; color: var(--tl-mute); }
.tl-ports { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }
.tl-port { position: relative; aspect-ratio: 3 / 4; background: #e3e2df center / cover no-repeat; border: 1px solid var(--tl-ink); }
.tl-port .tl-x { position: absolute; top: 4px; right: 4px; background: #fff; border: 1px solid var(--tl-ink); line-height: 1; padding: 3px 6px; }
.tl-port-add { cursor: pointer; display: grid; place-items: center; padding: 8px; border-style: dashed; background: repeating-linear-gradient(-45deg, #e3e2df 0 2px, transparent 2px 9px); font: 800 10px/1.3 'Archivo', sans-serif; letter-spacing: .1em; color: var(--tl-ink); }
.tl-port-add:hover { background: var(--tl-g); }
.tl-panel-f { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 22px; border-top: 2px solid var(--tl-ink); background: var(--tl-paper); }
.tl-panel-f [data-next], .tl-panel-f .tl-line[href] { margin-left: auto; }
.tl-panel-f [data-prev] + [data-next] { margin-left: 0; }
.tl-panel-empty { padding: 30px 24px; }
.tl-panel-empty h2 { margin: 18px 0 8px; font: 900 clamp(26px, 3vw, 38px)/.95 'Archivo', sans-serif; letter-spacing: -.05em; }
.tl-panel-empty p { margin: 0; font: 600 14px/1.5 'Archivo', sans-serif; color: var(--tl-mute); }

/* - the briefs - */
.tl-bnav { gap: 6px; }
.tl-bintro { padding: 14px 16px; background: var(--tl-ink); color: var(--tl-paper); }
.tl-bintro b { display: block; margin-bottom: 6px; font: 800 10px 'Archivo', sans-serif; letter-spacing: .16em; color: var(--tl-g); }
.tl-bintro span { font: 600 12.5px/1.45 'Archivo', sans-serif; color: #bdbdb8; }
.tl-blist { display: flex; flex-direction: column; gap: 6px; }
.tl-bi { display: block; width: 100%; cursor: pointer; text-align: left; padding: 13px; background: #fff; color: var(--tl-ink); border: 2px solid var(--tl-ink); }
.tl-bi.is-on { box-shadow: inset 5px 0 0 var(--tl-g); }
.tl-bi.is-arch { opacity: .55; }
.tl-bi b { display: block; margin-top: 8px; font: 900 15px/1.2 'Archivo', sans-serif; overflow-wrap: anywhere; }
.tl-bi > span { display: flex; align-items: center; margin-top: 6px; font: 700 11.5px 'Archivo', sans-serif; color: var(--tl-mute); }
.tl-new { background: #fff; border: 2px dashed var(--tl-ink); padding: 12px; }
.tl-new b { display: block; margin-bottom: 8px; font: 800 10px 'Archivo', sans-serif; letter-spacing: .16em; }
.tl-new > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; }
.tl-newc { cursor: pointer; text-align: left; padding: 8px; border: 1px solid var(--tl-ink); background: #fff; font: 800 11px/1.25 'Archivo', sans-serif; }
.tl-newc:hover { background: var(--tl-g); }
.tl-bact { margin-left: auto; display: flex; gap: 6px; }
.tl-btitle { display: block; width: 100%; box-sizing: border-box; border: 0; border-bottom: 2px solid var(--tl-ink); padding: 4px 0 8px; margin-bottom: 8px; outline: none; background: transparent; font: 900 clamp(24px, 2.8vw, 38px) 'Archivo', sans-serif; letter-spacing: -.04em; color: var(--tl-ink); }
.tl-linked { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 16px 22px 0; padding: 12px 14px; background: var(--tl-ink); color: var(--tl-paper); }
.tl-linked-art { width: 56px; height: 40px; flex: none; display: grid; place-items: center; background: repeating-linear-gradient(-45deg, #2a2a2a 0 2px, transparent 2px 7px); border: 1px solid #3a3a3a; font: 900 14px 'Archivo', sans-serif; color: var(--tl-g); }
.tl-linked-t { min-width: 0; flex: 1 1 200px; }
.tl-linked-t b { display: block; font: 800 10px 'Archivo', sans-serif; letter-spacing: .14em; color: var(--tl-g); }
.tl-linked-t strong { display: block; margin-top: 3px; font: 900 15px 'Archivo', sans-serif; }
.tl-linked-t span { display: block; font: 600 11.5px 'Archivo', sans-serif; color: #bdbdb8; }
.tl-linked select { max-width: 100%; height: 34px; border: 1px solid #3a3a3a; background: #141414; color: var(--tl-paper); padding: 0 8px; font: 700 12.5px 'Archivo', sans-serif; }
.tl-linked .tl-line { color: var(--tl-paper); border-color: #3a3a3a; }
.tl-linked .tl-line:hover { color: var(--tl-ink); }
.tl-who { padding: 14px 22px 18px; border-top: 1px solid #e3e2df; }
.tl-visg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.tl-visb { min-width: 0; cursor: pointer; text-align: left; padding: 10px; background: #fff; color: var(--tl-ink); border: 2px solid var(--tl-ink); }
.tl-visb.is-on { background: var(--tl-ink); color: var(--tl-paper); }
.tl-visb b { display: block; font: 900 13.5px 'Archivo', sans-serif; }
.tl-visb span { display: block; margin-top: 3px; font: 600 11px/1.4 'Archivo', sans-serif; opacity: .8; }
.tl-inv { margin-top: 12px; padding: 12px; border: 2px dashed var(--tl-ink); background: var(--tl-soft); }
.tl-inv-row { display: flex; flex-wrap: wrap; gap: 6px; }
.tl-inv-row .tl-inp { flex: 1 1 240px; height: 36px; font-size: 12.5px; }
.tl-bdone { font: 700 12px 'Archivo', sans-serif; color: var(--tl-mute); }
.tl-panel-f .tl-bdone + .tl-line { margin-left: auto; }
.tl-props { margin-top: 18px; padding: 16px 18px; background: #fff; border: 2px solid var(--tl-ink); }
.tl-prop { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 10px 0; border-top: 1px solid #e3e2df; }
.tl-prop b { font: 900 14px 'Archivo', sans-serif; }
.tl-prop span { flex: 1 1 200px; font: 600 12.5px 'Archivo', sans-serif; color: var(--tl-mute); }
.tl-prop em { font: 700 11.5px 'Archivo', sans-serif; font-style: normal; color: #9a9a95; }

/* ============================== a talent's page ============================== */
.tl-page { background: #ededea; margin-top: 74px; padding-bottom: 80px; }
.tl-ownbar { background: var(--tl-g); color: var(--tl-ink); border-bottom: 2px solid var(--tl-ink); }
.tl-ownbar.is-inv { background: #fff; }
.tl-ownbar .tl-in { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding-top: 10px; padding-bottom: 10px; font: 700 12.5px 'Archivo', sans-serif; }
.tl-ownbar .tl-in > span { flex: 1 1 260px; }
.tl-ownbar a { font: 800 11px 'Archivo', sans-serif; letter-spacing: .12em; border-bottom: 2px solid var(--tl-ink); }
.tl-hero { background: var(--tl-ink); color: var(--tl-paper); overflow: clip; }
.tl-hero-g { max-width: 1400px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) 420px; min-height: 520px; }
.tl-hero-t { position: relative; display: flex; flex-direction: column; justify-content: flex-end; padding: clamp(28px, 4vw, 56px) var(--gut, clamp(16px, 3vw, 36px)); }
.tl-ghost { position: absolute; right: -2%; top: 10px; font: 900 clamp(120px, 16vw, 260px)/.8 'Archivo', sans-serif; letter-spacing: -.07em; color: transparent; -webkit-text-stroke: 1px rgba(0,255,80,.22); pointer-events: none; white-space: nowrap; }
.tl-hero-in { position: relative; }
.tl-hero h1 { margin: 0 0 16px; font: 900 clamp(48px, 7vw, 120px)/.84 'Archivo', sans-serif; letter-spacing: -.06em; overflow-wrap: anywhere; }
.tl-head { max-width: 40ch; margin: 0 0 18px; font: 800 clamp(16px, 1.5vw, 21px)/1.4 'Archivo', sans-serif; }
.tl-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 22px; }
.tl-tags span { padding: 6px 10px; border: 1px solid #3a3a3a; font: 800 11.5px 'Archivo', sans-serif; }
.tl-ctas { display: flex; flex-wrap: wrap; gap: 8px; }
.tl-ctas .tl-go { padding: 15px 20px; border-color: var(--tl-g); font-size: 12px; letter-spacing: .14em; }
.tl-ctas .tl-go:hover { background: var(--tl-paper); color: var(--tl-ink); border-color: var(--tl-paper); }
.tl-ghostb { background: transparent; color: var(--tl-paper); border-color: var(--tl-paper); padding: 13px 18px; font-size: 12px; letter-spacing: .14em; }
.tl-ghostb.is-on { background: var(--tl-paper); color: var(--tl-ink); }
.tl-hero-p { position: relative; min-height: 420px; background: #141414 center / cover no-repeat; border-left: 2px solid var(--tl-g); }
.tl-hero-p.is-type { background: repeating-linear-gradient(-45deg, #1d1d1d 0 2px, #141414 2px 10px); display: grid; place-items: center; }
.tl-hero-ini { font: 900 clamp(110px, 12vw, 200px)/.8 'Archivo', sans-serif; letter-spacing: -.07em; color: var(--tl-g); }
.tl-rep { position: absolute; left: 14px; bottom: 14px; padding: 5px 9px; background: var(--tl-ink); color: var(--tl-paper); font: 800 10px 'Archivo', sans-serif; letter-spacing: .12em; }
.tl-main { padding-top: clamp(28px, 3vw, 44px); }
.tl-sh { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px; padding-bottom: 12px; border-bottom: 2px solid var(--tl-ink); margin: 34px 0 16px; }
.tl-main > .tl-sh:first-child { margin-top: 0; }
.tl-sh h2 { margin: 0; font: 900 clamp(28px, 3vw, 44px)/.9 'Archivo', sans-serif; letter-spacing: -.05em; }
.tl-sh span { font: 600 13px 'Archivo', sans-serif; color: var(--tl-mute); }
.tl-main > .tl-chips { margin-bottom: 14px; }
.tl-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.tl-card { display: flex; flex-direction: column; background: #fff; border: 2px solid var(--tl-ink); padding: 18px; transition: box-shadow .15s; scroll-margin-top: 150px; }
.tl-card:hover, .tl-card:target { box-shadow: 7px 7px 0 var(--tl-g); }
.tl-card.is-off { opacity: .7; border-style: dashed; }
.tl-card-k { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.tl-card-vis { font: 700 11px 'Archivo', sans-serif; font-style: normal; color: var(--tl-mute); }
.tl-card h3 { margin: 12px 0 8px; font: 900 22px/1.05 'Archivo', sans-serif; letter-spacing: -.03em; overflow-wrap: anywhere; }
.tl-card-s { margin: 0 0 10px; font: 600 13.5px/1.5 'Archivo', sans-serif; color: var(--tl-mute); }
.tl-card-p { margin: 0 0 10px; font: 700 12.5px 'Archivo', sans-serif; }
.tl-card-p b { font-size: 9.5px; letter-spacing: .13em; margin-right: 4px; }
.tl-card-p a { text-decoration: underline; }
.tl-card-f { margin: 0 0 12px; display: grid; gap: 8px; }
.tl-card-f dt { display: flex; flex-wrap: wrap; gap: 6px; font: 800 9.5px 'Archivo', sans-serif; letter-spacing: .13em; }
.tl-card-f dt .tl-priv { margin-left: 0; }
.tl-card-f dd { margin: 2px 0 0; font: 600 13px/1.45 'Archivo', sans-serif; }
.tl-card-cta { margin-top: auto; display: flex; flex-wrap: wrap; gap: 6px; }
.tl-empty { margin-top: 12px; padding: 24px; border: 2px dashed var(--tl-ink); font: 700 14px 'Archivo', sans-serif; }
.tl-empty .tl-hatch { width: 80px; margin-bottom: 12px; }
.tl-story { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 24px; }
.tl-pos { margin: 0; font: 800 clamp(20px, 2vw, 28px)/1.3 'Archivo', sans-serif; letter-spacing: -.02em; }
.tl-story-c { display: grid; gap: 16px; }
.tl-story-c p { margin: 0; font: 500 15px/1.6 'Archivo', sans-serif; }
.tl-story-c .tl-lab { margin-bottom: 4px; }
.tl-blocks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.tl-block { min-width: 0; background: #fff; border: 2px solid var(--tl-ink); padding: 16px; }
.tl-block.is-wide { grid-column: 1 / -1; }
.tl-block .tl-lab { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.tl-block p { margin: 0; font: 500 14.5px/1.55 'Archivo', sans-serif; }
.tl-items { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.tl-items li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 10px 12px; border: 1px solid var(--tl-ink); background: var(--tl-soft); }
.tl-items b { flex: 1 1 200px; min-width: 0; font: 800 14px 'Archivo', sans-serif; overflow-wrap: anywhere; }
.tl-items b a { text-decoration: underline; }
.tl-items span { font: 600 12px 'Archivo', sans-serif; color: var(--tl-mute); }
.tl-reel { display: inline-flex; align-items: center; gap: 8px; padding: 12px 16px; background: var(--tl-ink); color: var(--tl-g) !important; font: 800 11.5px 'Archivo', sans-serif; letter-spacing: .12em; }
.tl-gal { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; }
.tl-gal a { aspect-ratio: 3 / 4; background: #e3e2df center / cover no-repeat; border: 2px solid var(--tl-ink); }
.tl-hidden-note { margin-top: 22px; font: 600 12px 'Archivo', sans-serif; color: var(--tl-mute); }
.tl-dlg { width: min(560px, calc(100vw - 32px)); padding: 0; border: 2px solid var(--tl-ink); box-shadow: 10px 10px 0 var(--tl-g); }
.tl-dlg::backdrop { background: rgba(10,10,10,.6); }
.tl-dlg-in { padding: 18px 20px; display: grid; gap: 12px; font-family: 'Archivo', sans-serif; }
.tl-dlg-h { display: flex; align-items: center; justify-content: space-between; font: 800 12px 'Archivo', sans-serif; letter-spacing: .14em; }
.tl-dlg-h .tl-x { font-size: 22px; }
.tl-fl2 { display: grid; gap: 6px; }
.tl-fl2 span { font: 800 10px 'Archivo', sans-serif; letter-spacing: .14em; }
.tl-fl2 select, .tl-fl2 textarea { width: 100%; box-sizing: border-box; border: 1px solid var(--tl-ink); background: var(--tl-soft); padding: 10px 12px; font: 600 14px/1.5 'Archivo', sans-serif; }
.tl-dlg-f { display: flex; justify-content: flex-end; gap: 8px; }

/* ============================== narrower ============================== */
@media (max-width: 1100px){
    .tl-ed-g, .tl-br-g { grid-template-columns: minmax(0, 1fr); }
    .tl-secs { position: static; flex-direction: row; overflow-x: auto; padding-bottom: 4px; }
    .tl-secs > .tl-sec { flex: none; width: 210px; }
    .tl-bnav { flex-direction: column; overflow: visible; }
    .tl-blist { flex-direction: row; overflow-x: auto; padding-bottom: 4px; }
    .tl-blist > .tl-bi { flex: none; width: 240px; }
    .tl-kinds, .tl-hero-g, .tl-story { grid-template-columns: minmax(0, 1fr); }
    .tl-hero-p { min-height: 360px; border-left: 0; border-top: 2px solid var(--tl-g); }
}
@media (max-width: 760px){
    .tl-tabs { top: 112px; }
    .hp-scrolled .tl-tabs { top: 112px; }
}
@media (max-width: 640px){
    .tl-fg { grid-template-columns: minmax(0, 1fr); padding: 16px; }
    .tl-f.is-wide { grid-column: auto; }
    .tl-subs-g, .tl-new > div { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .tl-visg { grid-template-columns: minmax(0, 1fr); }
    .tl-blocks { grid-template-columns: minmax(0, 1fr); }
    .tl-cta { grid-template-columns: minmax(0, 1fr); }
    .tl-cta-art { min-height: 90px; border-right: 0; border-bottom: 2px solid var(--tl-ink); }
    .tl-panel-h, .tl-panel-f, .tl-who { padding-left: 16px; padding-right: 16px; }
    .tl-linked { margin: 14px 16px 0; }
    .tl-kind { min-height: 0; }
    .tl-ed-head-in .tl-saved { margin-left: 0; }
    .tl-ed-head-in .tl-go { width: 100%; }
}

/* links drawn as buttons keep their button colours (.tl a inherits otherwise) */
.tl a.tl-go, .tl-hub a.tl-go, .tl-cta a.tl-go { color: var(--tl-ink); }
.tl a.tl-go:hover, .tl-cta a.tl-go:hover { color: var(--tl-g); }
.tl a.tl-dark, .tl-hub a.tl-dark { color: var(--tl-g); }
.tl a.tl-dark:hover, .tl-hub a.tl-dark:hover { color: var(--tl-ink); }
.tl-hero a.tl-ghostb { color: var(--tl-paper); }
.tl-hero a.tl-go:hover { color: var(--tl-ink); }

/* ============================== the vitals (identity: height, weight, birthday) ============================== */
.tl-pv { margin-left: auto; cursor: pointer; padding: 1px 6px; border: 1px solid var(--tl-ink); font: 800 8.5px 'Archivo', sans-serif; letter-spacing: .12em; white-space: nowrap; background: var(--tl-g); color: var(--tl-ink); }
.tl-pv.is-priv { background: #fff; }
.tl-pv:focus-visible, .tl-unit:focus-visible { outline: 2px solid var(--tl-ink); outline-offset: 2px; }
.tl-vrow { display: flex; flex-wrap: wrap; align-items: stretch; gap: 6px; }
.tl-vbox { position: relative; flex: 1 1 70px; min-width: 0; max-width: 120px; }
.tl-vbox .tl-inp { padding-right: 34px; }
.tl-vbox span { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font: 800 11px 'Archivo', sans-serif; color: var(--tl-mute); pointer-events: none; }
.tl-units { display: inline-flex; border: 1px solid var(--tl-ink); height: 44px; box-sizing: border-box; }
.tl-unit { cursor: pointer; padding: 0 10px; border: 0; background: #fff; color: var(--tl-ink); font: 800 10.5px 'Archivo', sans-serif; letter-spacing: .08em; }
.tl-unit + .tl-unit { border-left: 1px solid var(--tl-ink); }
.tl-unit.is-on { background: var(--tl-ink); color: var(--tl-g); }
.tl-vdate { flex: 1 1 160px; max-width: 200px; }
.tl-pv.tl-pv-age { margin-left: 0; display: inline-flex; align-items: center; gap: 6px; height: 44px; box-sizing: border-box; padding: 0 12px; font-size: 10px; }
.tl-pv-age i { display: inline-grid; place-items: center; width: 14px; height: 14px; border: 1px solid var(--tl-ink); background: #fff; font-style: normal; font-size: 10px; }
.tl-vf.is-bad .tl-vin { outline: 2px solid var(--tl-red); outline-offset: 1px; }
.tl-vitals { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: -10px 0 22px; }
.tl-vitals dt { margin-right: 4px; font: 800 10px 'Archivo', sans-serif; letter-spacing: .16em; color: var(--tl-g); }
.tl-vitals dd { margin: 0; display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid var(--tl-g); font: 800 12.5px 'Archivo', sans-serif; }
.tl-vitals .tl-priv { margin-left: 0; background: transparent; color: var(--tl-paper); border-color: var(--tl-paper); }

/* ============================== the roster (2026-10-19): the account's profiles, its own and the people it represents ============================== */
.tl-tabs-back { color: var(--tl-g) !important; }
.tl-tabs-n { display: inline-block; margin-left: 4px; padding: 0 5px; border: 1px solid currentColor; font: 800 9px/1.5 'Archivo', sans-serif; }
.tl-sw { flex: none; display: flex; align-items: center; padding: 0 8px; }
.tl-sw select { height: 30px; max-width: 220px; border: 1px solid #3a3a3a; border-radius: 0; background: #141414; color: var(--tl-paper); padding: 0 8px; font: 700 12px 'Archivo', sans-serif; }
.tl-sw select:focus-visible { outline: 2px solid var(--tl-g); outline-offset: 1px; }
.tl-ros { padding-top: 26px; }
.tl-ros-h { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px 24px; margin-bottom: 18px; }
.tl-ros-h h2 { margin: 0 0 8px; font: 900 clamp(28px, 3vw, 42px)/.95 'Archivo', sans-serif; letter-spacing: -.05em; }
.tl-ros-h p:not(.tl-kick) { margin: 0; max-width: 64ch; font: 600 14.5px/1.5 'Archivo', sans-serif; color: var(--tl-mute); }
.tl-ros .tl-plan { margin: 0 0 18px; background: #fff; }
.tl-ros-g { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); gap: 12px; }
.tl-rc { display: grid; grid-template-columns: 116px minmax(0, 1fr); min-width: 0; background: #fff; color: var(--tl-ink); border: 2px solid var(--tl-ink); }
.tl-rc-p { display: grid; place-items: center; min-height: 150px; background: #e3e2df center / cover no-repeat; border-right: 2px solid var(--tl-ink); }
.tl-rc-p.is-type { background: repeating-linear-gradient(-45deg, var(--tl-ink) 0 2px, #fff 2px 9px); }
.tl-rc-p span { padding: 4px 6px; background: #fff; border: 2px solid var(--tl-ink); font: 900 26px/1 'Archivo', sans-serif; letter-spacing: -.04em; }
.tl-rc-t { min-width: 0; display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; }
.tl-rc-k { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; }
.tl-rc h3 { margin: 2px 0 0; font: 900 22px/1.05 'Archivo', sans-serif; letter-spacing: -.03em; overflow-wrap: anywhere; }
.tl-rc-who { display: inline-block; align-self: flex-start; margin: 0; padding: 2px 7px; border: 1px solid var(--tl-ink); font: 800 9px 'Archivo', sans-serif; letter-spacing: .12em; background: #fff; color: var(--tl-ink); }
.tl-rc-who.is-me { background: var(--tl-ink); color: var(--tl-g); }
.tl-rc-m { margin: 0; font: 700 12px 'Archivo', sans-serif; color: var(--tl-mute); }
.tl-rc-a { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 6px; }
.tl-rc-a .tl-dark, .tl-rc-a .tl-line { padding: 9px 12px; font-size: 10.5px; }
.tl-rc-add { display: flex; flex-direction: column; justify-content: center; gap: 8px; min-height: 150px; padding: 18px 20px; border-style: dashed; background: repeating-linear-gradient(-45deg, #e3e2df 0 2px, transparent 2px 9px); }
.tl-rc-add:hover { background: var(--tl-g); }
.tl-rc-add b { font: 800 12px 'Archivo', sans-serif; letter-spacing: .12em; }
.tl-rc-add span { max-width: 40ch; font: 600 13px/1.45 'Archivo', sans-serif; color: var(--tl-mute); }
.tl-ed-head-in .tl-rc-who { align-self: center; }
/* Step 1: who is this profile for */
.tl-fors { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
.tl-forb:disabled { opacity: .5; cursor: not-allowed; }
.tl-forc { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 10px; margin-bottom: 18px; padding: 12px; border: 2px solid var(--tl-ink); background: var(--tl-soft); }
.tl-forc .tl-inp { background: #fff; }
/* a represented person's page: who represents them */
.tl-mgr { margin: -12px 0 20px; font: 700 13px/1.45 'Archivo', sans-serif; color: #bdbdb8; }
.tl-mgr a { color: var(--tl-g); border-bottom: 1px solid currentColor; }
.tl-mgr a:hover { color: var(--tl-paper); }
@media (max-width: 640px){
    .tl-rc { grid-template-columns: 84px minmax(0, 1fr); }
    .tl-rc-p { min-height: 120px; }
    .tl-rc-p span { font-size: 20px; }
    .tl-fors, .tl-forc { grid-template-columns: minmax(0, 1fr); }
}
.tl-hub a.tl-line, .tl-hub a.tl-line:hover, .tl-rc h3 a:hover { color: var(--tl-ink); }

/* the roster card's MANAGE menu (talent-roster.js) */
.tl-rc-mg { position: relative; }
.tl-rc-mg > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; padding: 9px 12px; font: 800 10.5px 'Archivo', sans-serif; letter-spacing: .12em; border: 2px solid var(--tl-ink); }
.tl-rc-mg > summary::-webkit-details-marker { display: none; }
.tl-rc-mg[open] > summary { background: var(--tl-ink); color: var(--tl-g); }
.tl-rc-menu { position: absolute; z-index: 30; right: 0; top: calc(100% + 6px); width: min(300px, 80vw); background: #fff; border: 2px solid var(--tl-ink); box-shadow: 6px 6px 0 var(--tl-ink); }
.tl-rc-menu > a, .tl-rc-menu > button { display: block; width: 100%; padding: 11px 14px; text-align: left; background: #fff; color: var(--tl-ink); border: 0; border-top: 1px solid #e3e2df; cursor: pointer; text-decoration: none; font: inherit; }
.tl-rc-menu > :first-child { border-top: 0; }
.tl-rc-menu > a:hover, .tl-rc-menu > button:hover, .tl-rc-menu > a:focus-visible, .tl-rc-menu > button:focus-visible { background: var(--tl-g); outline: none; }
.tl-rc-menu b { display: block; font: 800 13px 'Archivo', sans-serif; }
.tl-rc-menu span { display: block; margin-top: 2px; font: 600 11.5px/1.4 'Archivo', sans-serif; color: var(--tl-mute); }
.tl-rc-menu .is-bad b { color: #c1121f; }
.tl-rc-menu .is-bad:hover { background: #ffe5e5; }
.tl-rc-role { display: flex; align-items: flex-end; gap: 8px; padding: 10px 14px 12px; background: #f6f6f3; border-top: 1px solid #e3e2df; }
.tl-rc-role label { flex: 1; min-width: 0; }
.tl-rc-role label span { font: 800 9.5px 'Archivo', sans-serif; letter-spacing: .14em; color: var(--tl-ink); margin: 0 0 4px; }
.tl-rc-role select { width: 100%; height: 38px; border: 2px solid var(--tl-ink); background: #fff; font: 600 13px 'Archivo', sans-serif; padding: 0 8px; }
.tl-rc-role .tl-dark { padding: 0 14px; height: 38px; border: 2px solid var(--tl-ink); font: 800 10.5px 'Archivo', sans-serif; letter-spacing: .12em; cursor: pointer; }
@media (max-width: 560px){ .tl-rc-menu { right: auto; left: 0; } }

/* the public page's portraits as the shared gallery (shared/adapt-gallery.css): in the hero it fills the panel
   (cropped to fit; full screen shows each picture whole), below it is a 16:10 stage with the pictures whole */
.tl-hero-p.has-ag { background: #141414; }
.tl-hero-p .tl-hero-ag { position: absolute; inset: 0; }
.tl-hero-p .tl-hero-ag .ag-stage { position: absolute; inset: 0; aspect-ratio: auto; height: 100%; overflow: hidden; }
.tl-hero-p .tl-hero-ag.ag-n1 .ag-slide { position: absolute; inset: 0; }
.tl-hero-p .tl-hero-ag .ag-img { width: 100%; height: 100%; object-fit: cover; object-position: center 25%; }
.tl-hero-p .tl-hero-ag .ag-count { bottom: auto; top: 10px; right: 58px; }
.tl-hero-p .tl-rep { z-index: 3; pointer-events: none; }
.tl-gal-ag { max-width: 900px; border: 2px solid var(--tl-ink); }
.tl-gal-ag .ag { --ag-bg: #e3e2df; }

/* the representative's line and "At a glance" one under the other, never overlapping */
.tl-mgr { margin: 0 0 14px; }
.tl-tags + .tl-mgr { margin-top: -6px; }
.tl-mgr + .tl-vitals { margin-top: 0; }

/* why "Publish" did not publish, kept next to the button (talent-editor.js why()) */
.tl-pubwhy { flex-basis: 100%; margin: 4px 0 0; padding: 9px 12px; background: #fff8e5; border-left: 4px solid #ffb020; color: var(--tl-ink); font: 700 13px/1.4 'Archivo', sans-serif; }
.tl-pubwhy[hidden] { display: none; }

/* ===================== the public page in motion (2026-10-19) =====================
   On load (.tl-hero.tl-anim): the hatch bar runs across, the kicker, name, headline, tags, representative line,
   "At a glance" and the buttons rise one after the other, the name wipes in, the portrait panel opens from the
   right with its picture settling from a slight zoom, and the ghost first name drifts in (then follows the scroll:
   data-pxx, shell.js). Below, the section heads rise and the chips, opportunity cards and blocks arrive in a
   stagger as they scroll into view (data-rv, shell.js / shell.css). Nothing moves for prefers-reduced-motion. */
@media (prefers-reduced-motion: no-preference){
    @keyframes tlRise  { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
    @keyframes tlWipe  { from { clip-path: polygon(0 -20%, 0 -20%, -20% 120%, -20% 120%); } to { clip-path: polygon(0 -20%, 130% -20%, 110% 120%, -20% 120%); } }
    @keyframes tlOpen  { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0 0 0 0); } }
    @keyframes tlZoom  { from { transform: scale(1.14); } to { transform: scale(1); } }
    @keyframes tlGhost { from { opacity: 0; translate: 8% 0; } to { opacity: 1; translate: 0 0; } }
    @keyframes tlBar   { from { transform: scaleX(0); } to { transform: scaleX(1); } }

    .tl-hatchbar { transform-origin: left; animation: tlBar .9s cubic-bezier(.7,0,.2,1) both; }
    .tl-anim .tl-hero-in > * { animation: tlRise .85s cubic-bezier(.2,.7,.2,1) both; }
    .tl-anim .tl-hero-in > :nth-child(1) { animation-delay: .10s; }
    .tl-anim .tl-hero-in > :nth-child(2) { animation: tlWipe 1.1s cubic-bezier(.7,0,.2,1) .18s both; }
    .tl-anim .tl-hero-in > :nth-child(3) { animation-delay: .38s; }
    .tl-anim .tl-hero-in > :nth-child(4) { animation-delay: .48s; }
    .tl-anim .tl-hero-in > :nth-child(5) { animation-delay: .58s; }
    .tl-anim .tl-hero-in > :nth-child(6) { animation-delay: .68s; }
    .tl-anim .tl-hero-in > :nth-child(n+7) { animation-delay: .78s; }
    .tl-anim .tl-tags > span, .tl-anim .tl-vitals > dd { animation: tlRise .6s cubic-bezier(.2,.7,.2,1) both; }
    .tl-anim .tl-tags > span:nth-child(2), .tl-anim .tl-vitals > dd:nth-of-type(2) { animation-delay: .62s; }
    .tl-anim .tl-tags > span:nth-child(3), .tl-anim .tl-vitals > dd:nth-of-type(3) { animation-delay: .70s; }
    .tl-anim .tl-tags > span:nth-child(1), .tl-anim .tl-vitals > dd:nth-of-type(1) { animation-delay: .54s; }
    .tl-anim .tl-hero-p { animation: tlOpen 1.15s cubic-bezier(.7,0,.2,1) .25s both; }
    .tl-anim .tl-hero-p .ag-slide.is-on .ag-img, .tl-anim .tl-hero-p .tl-hero-ini { animation: tlZoom 1.8s cubic-bezier(.2,.7,.2,1) .25s both; }
    .tl-anim .tl-hero-p .tl-rep { animation: tlRise .7s cubic-bezier(.2,.7,.2,1) 1.1s both; }
    .tl-anim .tl-ghost { animation: tlGhost 1.6s cubic-bezier(.2,.7,.2,1) .1s both; will-change: transform; }

    /* below the hero: a little life on the cards */
    .tl-card { transition: box-shadow .2s, transform .2s; }
    .tl-card:hover { transform: translate(-3px, -3px); }
    .tl-chips.is-read .tl-opt { transition: background .15s, transform .15s; }
    .tl-chips.is-read .tl-opt:hover { transform: translateY(-2px); }
}