.hubs-page{--hubs-rule:#0e4d4a33;overflow-x:clip}.hubs-page [hidden]{display:none!important}.hubs-page .gft-section--dark{--hubs-rule:#6bb68f40}.hubs-page .gft-section__head h2{max-width:12ch}.hubs-page .gft-section__rail{width:2px}.hubs-page .gft-splash h1{max-width:9.5ch;font-size:clamp(4rem,6.5vw,7rem)}.hubs-page .gft-splash__content{padding-top:80px}.hubs-page .gft-splash__structure{inset:0 -2% 0 40%}.hubs-page .gft-splash__structure::after{background:linear-gradient(90deg,#072d2ba8,transparent 30%)}.hubs-page .gft-splash__lede{max-width:39ch}.hubs-page .gft-splash__bottom{position:relative;z-index:1}.hubs-structure{width:100%;height:100%;display:grid;place-items:center;perspective:1200px;overflow-anchor:none}.hubs-diagram{width:100%;height:100%;max-height:780px;overflow:visible}.hubs-structure--library .hubs-diagram{transform:perspective(1200px) rotateY(-12deg) rotateX(8deg)}.hubs-svg-label{fill:#b4cfc0;font:10px var(--gft-font-mono);letter-spacing:.07em}.hubs-svg-code{fill:#e2ebe6;font:13px var(--gft-font-mono)}.hubs-svg-large{fill:#6bb68f;font:850 68px var(--gft-font-display);letter-spacing:-4px}.hubs-svg-tiny{fill:#c5d8cc;font:8px var(--gft-font-mono)}.hubs-svg-publisher{fill:#c5d8cc;font:11px var(--gft-font-mono)}.hubs-svg-grade{fill:#6bb68f;font:850 38px var(--gft-font-display)}.hubs-spine,.hubs-mini,.hubs-evidence-node,.hubs-gate{transform-box:fill-box;transform-origin:center}.hubs-mini [data-m-live]{transform-box:fill-box;transform-origin:center} :root[data-m-go] .hubs-spine{animation-name:hubs-shelf-index;animation-duration:700ms;animation-delay:var(--hubs-delay);animation-timing-function:cubic-bezier(.2,.7,.2,1);animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal} :root[data-m-go] .hubs-mini{animation-name:hubs-instrument-seat;animation-duration:600ms;animation-delay:var(--hubs-delay);animation-timing-function:cubic-bezier(.2,.7,.2,1);animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal} :root[data-m-go] .hubs-evidence-node{animation-name:hubs-node-settle;animation-duration:650ms;animation-delay:var(--hubs-delay);animation-timing-function:cubic-bezier(.2,.7,.2,1);animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal} :root[data-m-go] .hubs-gate{animation-name:hubs-gate-rise;animation-duration:600ms;animation-delay:var(--hubs-delay);animation-timing-function:cubic-bezier(.2,.7,.2,1);animation-fill-mode:backwards;animation-iteration-count:1;animation-direction:normal} @keyframes hubs-shelf-index{from{opacity:.4;transform:translate(var(--hubs-fx),var(--hubs-fy)) rotate(85deg) scale(.45,1)}to{opacity:1;transform:none}} @keyframes hubs-instrument-seat{from{opacity:.25;transform:perspective(500px) rotateX(-30deg) translateY(16px)}to{opacity:1;transform:none}} @keyframes hubs-node-settle{from{opacity:.3;transform:translate(var(--hubs-dx),var(--hubs-dy))}to{opacity:1;transform:none}} @keyframes hubs-gate-rise{from{opacity:.3;transform:rotateY(70deg) translateY(26px)}to{opacity:1;transform:none}} .hubs-kicker{font:10px/1.8 var(--gft-font-mono);text-transform:uppercase;letter-spacing:.09em}.hubs-note{font:11px/1.8 var(--gft-font-mono);color:#52655c;max-width:90ch}.gft-section--dark .hubs-note{color:#bed2c6}.hubs-intro{display:grid;grid-template-columns:1fr 1fr;gap:48px;margin-block:32px}.hubs-intro p{font-size:16px}.hubs-filter{display:flex;flex-wrap:wrap;align-items:end;gap:16px;border-block:1px solid var(--hubs-rule);padding:24px 0}.hubs-filter label{display:grid;gap:8px;flex:1;min-width:150px;font:11px var(--gft-font-mono)}.hubs-filter label:first-child{flex:2;min-width:240px}.hubs-filter input,.hubs-filter select,.hubs-next select{width:100%;min-height:50px;padding:12px;border:1px solid #8ca79a;border-radius:0;color:#072d2b;background:#fff;font:13px var(--gft-font-display)}.hubs-filter button{min-height:50px;background:transparent;border:1px solid #8ca79a;padding:10px 20px;font-size:12px}.hubs-filter__count{flex-basis:100%;font:11px/1.8 var(--gft-font-mono);min-height:20px}.hubs-statline{display:grid;grid-template-columns:repeat(3,1fr);border-block:1px solid var(--hubs-rule)}.hubs-statline>div{padding:24px;border-right:1px solid var(--hubs-rule)}.hubs-statline>div:first-child{padding-left:0}.hubs-statline>div:last-child{border-right:0}.hubs-statline strong{display:block;font-size:clamp(3rem,7vw,6rem);line-height:1.15;letter-spacing:-.07em}.hubs-statline span{display:block;font:11px/1.8 var(--gft-font-mono);margin-top:14px;max-width:25ch}.hubs-register{border-top:1px solid var(--hubs-rule);margin-top:32px}.hubs-paper{display:grid;grid-template-columns:86px 1fr 1fr;gap:32px;padding:32px 0;border-bottom:1px solid var(--hubs-rule);align-items:start}.hubs-paper__spine{display:grid;place-items:center;aspect-ratio:2/3;border:1px solid #769c89;background:repeating-linear-gradient(0deg,#6bb68f1a 0 1px,transparent 1px 8px),var(--gft-night);color:#b9d5c5;font:12px var(--gft-font-mono);position:relative}.hubs-paper__spine::after{content:'';position:absolute;inset:12px;border:1px solid #6bb68f40}.hubs-paper h3{margin:10px 0 14px;font-size:clamp(1.3rem,2.2vw,2.1rem)}.hubs-paper p{font-size:14px;line-height:1.75}.hubs-paper__summary{border-left:1px solid var(--hubs-rule);padding-left:28px}.hubs-paper__status{display:block;font:10px/1.8 var(--gft-font-mono);margin-top:14px;color:#4b6257}.hubs-paper .gft-text-link{margin-top:16px}.hubs-tools-register{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-top:1px solid var(--hubs-rule);margin-top:32px}.hubs-tool{min-width:0;padding:28px;border:1px solid var(--hubs-rule);border-top:0;position:relative}.hubs-tool h3{font-size:22px;line-height:1.15;margin:24px 0 16px}.hubs-tool p{font-size:14px}.hubs-tool__icon{width:60px;height:60px;color:var(--gft-forest);margin-bottom:24px}.hubs-tool__status{display:inline-flex;align-items:center;gap:8px;font:10px var(--gft-font-mono)}.hubs-tool__status::before{content:'';width:6px;height:6px;background:#0e4d4a;border-radius:50%}.hubs-tool__status[data-status=planned]::before{background:#9a641a}.hubs-tool a{margin-top:24px}.hubs-scene{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}.hubs-scene__stage{position:sticky;top:120px;padding:32px;border:1px solid var(--hubs-rule);background:repeating-linear-gradient(90deg,#6bb68f0a 0 1px,transparent 1px 24px);color:var(--gft-forest)}.hubs-scene__stage svg{width:100%;max-height:350px}.hubs-scene__stage output{display:block;min-height:80px;font-size:22px;line-height:1.3;font-weight:750;max-width:28ch;margin-bottom:20px}.hubs-scene__stage [data-hubs-state]{transition:opacity 260ms}.hubs-step{padding:20px 0 44px;border-top:1px solid var(--hubs-rule);min-height:220px}.hubs-step button{display:grid;grid-template-columns:1fr 20px;gap:16px;width:100%;text-align:left;background:transparent;border:0;border-left:3px solid transparent;padding:12px;color:inherit;min-height:64px}.hubs-step button[aria-pressed=true]{border-left-color:#2c3e7a;background:#2c3e7a0a}.hubs-step button>span:first-child{font:10px var(--gft-font-mono);grid-column:1/-1}.hubs-step strong{font-size:25px;font-weight:800;letter-spacing:-.035em;line-height:1.1}.hubs-step p{font-size:15px;margin:20px 12px 0}.hubs-band{display:grid;grid-template-columns:.9fr 1.2fr;gap:80px;align-items:center}.hubs-band__number{font-size:clamp(5rem,11vw,11rem);line-height:1;color:var(--gft-sage);letter-spacing:-.08em;font-weight:850}.hubs-band__label{font:12px/1.7 var(--gft-font-mono);margin-top:20px;max-width:34ch}.hubs-band p+p{margin-top:20px}.hubs-band svg{margin-top:30px;width:100%;height:130px}.hubs-columns{display:grid;grid-template-columns:repeat(3,1fr);gap:40px}.hubs-columns article{border-top:1px solid var(--hubs-rule);padding-top:24px}.hubs-columns h3{margin:18px 0;font-size:24px}.hubs-columns p{font-size:15px}.hubs-columns svg{height:100px;width:100%;margin-top:24px;color:var(--gft-forest)}.hubs-programme{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}.hubs-programme article{border-top:1px solid var(--hubs-rule);padding-top:24px;min-width:0}.hubs-programme h3{font-size:27px;margin:20px 0}.hubs-programme p{font-size:15px}.hubs-programme__line{display:block;width:50px;height:2px;background:var(--gft-sage);margin-top:28px}.hubs-next{display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center}.hubs-next__graphic{grid-column:1/-1}.hubs-next label{grid-column:1/-1;font:12px var(--gft-font-mono)}.hubs-next p{grid-column:1/-1;max-width:82ch;font-size:14px;color:#c5d8cc}.hubs-evidence{margin-top:24px}.hubs-fact{display:grid;grid-template-columns:100px 1.3fr .9fr;gap:32px;padding:28px 0;border-bottom:1px solid var(--hubs-rule);min-width:0}.hubs-fact__id{display:flex;gap:12px;align-items:start}.hubs-grade{display:grid;place-items:center;width:40px;height:40px;border:1px solid currentColor;font:18px var(--gft-font-mono);color:#0e4d4a;flex-shrink:0}.hubs-grade--D{color:#7d5417;border-style:dashed}.hubs-fact h3{font-size:19px;margin-bottom:12px;letter-spacing:-.02em}.hubs-fact p{font-size:14px;overflow-wrap:anywhere}.hubs-fact__meta{border-left:1px solid var(--hubs-rule);padding-left:24px}.hubs-fact__meta p{font:10px/1.9 var(--gft-font-mono);margin-bottom:8px}.hubs-fact__meta a{font-size:11px;display:block;min-height:44px;padding-block:10px;overflow-wrap:anywhere}.hubs-grade-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}.hubs-grade-strip>div{border-top:1px solid var(--hubs-rule);padding:20px 0}.hubs-grade-strip strong{font-size:4.5rem;font-weight:850;line-height:1}.hubs-grade-strip p{font-size:13px;margin-top:16px}.hubs-grade-strip span{display:block;font:11px var(--gft-font-mono);margin-top:16px}.hubs-missing{border:1px dashed #9a641a;padding:28px;background:#c98a2b0a;margin-top:24px}.hubs-missing h3{font-size:23px;margin-bottom:16px}.hubs-missing p{font-size:14px}.hubs-missing__ids{display:flex;gap:16px;flex-wrap:wrap;margin-top:20px}.hubs-missing__ids span{border:1px dashed #9a641a;padding:12px;font:12px var(--gft-font-mono)}.hubs-workbench{border:1px solid var(--hubs-rule);padding:32px;display:grid;grid-template-columns:1fr 1fr;gap:32px}.hubs-workbench fieldset{border:0;margin:0;padding:0;min-width:0}.hubs-workbench legend{font-size:23px;font-weight:800;line-height:1.2;margin-bottom:24px;letter-spacing:-.025em}.hubs-workbench label{display:flex;align-items:center;gap:12px;min-height:50px;border-bottom:1px solid var(--hubs-rule);font-size:14px;cursor:pointer}.hubs-workbench input{width:20px;height:20px;accent-color:var(--gft-forest)}.hubs-workbench__result{padding:24px;background:#e2ebe6;display:flex;flex-direction:column;justify-content:space-between;gap:24px}.hubs-workbench output{display:block;font-size:22px;line-height:1.4;font-weight:700}.hubs-workbench svg{height:100px;width:100%;color:var(--gft-forest)}.hubs-inline-links{display:flex;gap:24px;flex-wrap:wrap;margin-top:28px} @media(max-width:1100px){.hubs-page .gft-splash__structure{inset:8% -12% 2% 38%}.hubs-page .gft-splash h1{font-size:clamp(3.5rem,7vw,6rem)}.hubs-tools-register{grid-template-columns:repeat(2,minmax(0,1fr))}.hubs-paper{grid-template-columns:65px 1fr 1fr;gap:24px}.hubs-scene{gap:32px}.hubs-band{gap:40px}.hubs-fact{grid-template-columns:80px 1.2fr 1fr;gap:24px}} @media(max-width:800px){.hubs-page .gft-splash__structure{inset:20% -26% 0 35%}.hubs-page .gft-splash__structure::after{background:linear-gradient(90deg,#072d2bdd,transparent 60%)}.hubs-columns,.hubs-programme{grid-template-columns:1fr}.hubs-columns article{display:grid;grid-template-columns:1fr 1fr;gap:0 32px}.hubs-columns h3{grid-column:1}.hubs-columns p{grid-column:2;grid-row:1/4}.hubs-columns svg{grid-column:1}.hubs-paper{grid-template-columns:60px 1fr}.hubs-paper__summary{grid-column:2;border-left:0;padding-left:0}.hubs-scene{grid-template-columns:.9fr 1fr;gap:24px}.hubs-scene__stage{padding:20px}.hubs-scene__stage output{font-size:18px;min-height:100px}.hubs-scene__stage svg{height:240px}.hubs-workbench{gap:24px;padding:24px}.hubs-fact{grid-template-columns:70px 1fr}.hubs-fact__meta{grid-column:2;border-left:0;padding-left:0}.hubs-intro{gap:28px}} @media(max-width:640px){.hubs-page .gft-splash h1{font-size:clamp(3rem,12.4vw,5rem);max-width:10ch}.hubs-page .gft-splash__content{padding-top:68px;padding-bottom:310px}.hubs-page .gft-splash__structure{inset:auto -4% 82px -4%;height:310px}.hubs-page .gft-splash__structure::after{background:none}.hubs-page .gft-splash__lede{max-width:36ch}.hubs-svg-label{font-size:11px}.hubs-intro,.hubs-band,.hubs-columns,.hubs-workbench{grid-template-columns:1fr;gap:28px}.hubs-statline strong{font-size:2.8rem}.hubs-statline>div{padding:20px 12px}.hubs-statline span{font-size:9px;line-height:1.8}.hubs-filter label:first-child{min-width:100%;flex-basis:100%}.hubs-filter label{min-width:130px}.hubs-filter button{width:100%}.hubs-filter{gap:16px}.hubs-tools-register{grid-template-columns:1fr}.hubs-tool{padding:24px 0;border-inline:0}.hubs-tool__icon{float:right;width:50px;height:50px}.hubs-tool h3{max-width:20ch}.hubs-scene{grid-template-columns:1fr}.hubs-scene__stage{position:relative;top:auto}.hubs-scene__stage svg{height:220px}.hubs-scene__stage output{min-height:0;font-size:22px}.hubs-step{min-height:0;padding-bottom:28px}.hubs-step strong{font-size:23px}.hubs-paper{gap:20px;grid-template-columns:48px 1fr}.hubs-paper p{font-size:13px}.hubs-paper h3{font-size:22px}.hubs-paper__spine{font-size:9px}.hubs-columns article{display:block}.hubs-columns svg{height:70px}.hubs-band__number{font-size:6rem}.hubs-band__label{font-size:11px}.hubs-next{grid-template-columns:1fr}.hubs-next .gft-button{width:100%}.hubs-grade-strip{grid-template-columns:repeat(2,minmax(0,1fr))}.hubs-grade-strip strong{font-size:3.6rem}.hubs-fact{grid-template-columns:1fr;gap:16px}.hubs-fact__id{align-items:center}.hubs-fact__meta{grid-column:1}.hubs-fact__meta p{margin-bottom:0}.hubs-workbench{padding:20px}.hubs-workbench__result{padding:20px}.hubs-workbench output{font-size:20px}.hubs-programme h3{font-size:26px}} @media(prefers-reduced-motion:reduce){.hubs-page .hubs-spine,.hubs-page .hubs-mini,.hubs-page .hubs-evidence-node,.hubs-page .hubs-gate{animation-name:none;animation-timeline:auto;transform:none}.hubs-page [data-hubs-state]{transition:none}} :root[data-motion=calm] .hubs-page .hubs-spine,:root[data-motion=calm] .hubs-page .hubs-mini,:root[data-motion=calm] .hubs-page .hubs-evidence-node,:root[data-motion=calm] .hubs-page .hubs-gate{animation-name:none;animation-timeline:auto;transform:none} @media(max-width:640px){.hubs-structure--library .hubs-diagram{transform:none}.hubs-page .gft-splash__structure{overflow:visible}.hubs-structure--library{padding-bottom:12px}} /* Reserve text metrics before the optional font swap. The explicit title break is the only break. */ .hubs-page .gft-splash h1{max-width:none;white-space:nowrap;height:2.3em} .hubs-page .gft-splash__lede{width:min(430px,100%);max-width:none;min-height:128px} .hubs-page .gft-splash__content>.gft-eyebrow{min-height:18px} .hubs-page .gft-splash__bottom{min-height:94px;flex-shrink:0} @media(max-width:640px){.hubs-page .gft-splash h1{font-size:clamp(2.5rem,11.6vw,3rem)}.hubs-page .gft-splash__content{padding-top:48px;padding-bottom:280px}.hubs-page .gft-splash__content>.gft-eyebrow{min-height:32px}.hubs-page .gft-splash__lede{min-height:96px;margin-top:16px}.hubs-page .gft-splash__actions{margin-top:20px}.hubs-page .gft-splash__bottom{height:72px;min-height:72px}.hubs-page .gft-splash__caption{width:150px;max-width:150px}.hubs-page .gft-splash__structure{bottom:82px;height:280px}} @media(max-width:360px){.hubs-page .gft-splash__lede{min-height:120px}.hubs-page .gft-splash__caption{width:120px;max-width:120px}.hubs-page .gft-splash__cue{gap:12px}} /* A changing reading-stage caption never changes the page's scroll geometry. */ @media(max-width:640px){.hubs-scene__stage output{min-height:4em}} :root[data-motion=calm] .hubs-page [data-hubs-state]{transition:none} /* /data/sources/ : "Follow the citation thread". Imported only by this route. Motif: one thread carried down the page. Splash strands (28 recorded, four snapped at R19 to R22) become the board's 33 threads, then the ledger's sticky read-outs, a frayed cut with four hollow nodes, a four-state pinned stage, a thickened URL arrow, three boundary instruments, three strands that join at a decision, and a closing selector that moves one amber node to a chosen R-id. Animated properties: transform, opacity, clip-path, filter only. Loops run through the kit's on-screen flag. */ .hsrc { --header: 0px; --ink: #25302e; --ground: #f6f4ef; --ground-2: #ece8df; --rule: #b8c8bd; --muted: #4d6057; --font-ui: var(--gft-font-display); --laterite: #c98a2b; --hsrc-bg: #f6f4ef; --hsrc-night: #072d2b; --hsrc-night-2: #0c3f3b; --hsrc-lt: #d6e8de; --hsrc-ochre: #8c5a12; --hsrc-amber: #e3a64a; --hsrc-indigo: #2c3e7a; } .hsrc .gft-section--sage { --hsrc-bg: #e2ebe6; } .hsrc .gft-section--dark { --hsrc-bg: #072d2b; } /* ---------- section grammar ---------- */ .hsrc .gft-section__head { grid-template-columns: 1.15fr .85fr; align-items: start; } .hsrc .gft-section__head h2 { max-width: 17ch; font-size: clamp(2.2rem, 4.4vw, 4.6rem); } .hsrc .gft-lede { font-size: clamp(1rem, 1.3vw, 1.25rem); max-width: 44ch; } .hsrc .gft-section--dark .gft-lede { color: var(--hsrc-lt); } .hsrc .gft-section__seam { height: 96px; bottom: -48px; width: 2px; background: linear-gradient(#c98a2b, #6bb68f); z-index: 3; } .hsrc .gft-section__seam::after { content: ''; position: absolute; left: 50%; top: 50%; width: 11px; height: 11px; border-radius: 50%; background: #c98a2b; translate: -50% -50%; box-shadow: 0 0 0 4px #c98a2b33; } .hsrc-kicker { font: 12px/1.7 var(--gft-font-mono); letter-spacing: .1em; text-transform: uppercase; } .hsrc-note { font: 13px/1.75 var(--gft-font-mono); color: var(--muted); max-width: 78ch; margin-top: 20px; } .hsrc-note--dark { color: #cfe3d8; margin: 0; } .hsrc .gft-section--dark .hsrc-note { color: #cfe3d8; } .hsrc-t { fill: #cfe8dc; font: 14px var(--gft-font-mono); letter-spacing: .06em; } .hsrc-t--lt { fill: #f6f4ef; } .hsrc-t--lg { font-size: 16px; } .hsrc-t--ink { fill: #25302e; font-size: 15px; } .hsrc-t--ochre { fill: #8c5a12; font-size: 15px; } .hsrc-code { fill: #e8f3ec; font: 18px var(--gft-font-mono); } .hsrc-code--xl { font-size: 26px; font-weight: 700; fill: #f6f4ef; } .hsrc-code--sel { font-size: 18px; fill: #fff; font-weight: 700; } .hsrc-pub { fill: #e8f3ec; font: 15px var(--gft-font-mono); } .hsrc [data-m-live], .hsrc-reader, .hsrc-stamp2 { transform-box: fill-box; transform-origin: center; } /* ---------- stronger entrances: each neighbour has its own move, visible from the first frame ---------- */ :root[data-m-go] .hsrc :is([data-m=warp],[data-m=weft],[data-m=pick],[data-m=beat-up],[data-m=unspool],[data-m=knot],[data-m=twill-shift],[data-m=satin-float],[data-m=selvedge-draw],[data-m=card],[data-m=comb],[data-m=wind],[data-m=thread],[data-m=shed],[data-m=reed],[data-m=heddle])[data-m-in] { animation-duration: 840ms; animation-iteration-count: 1; animation-direction: normal; animation-fill-mode: backwards; } :root[data-m-go] .hsrc [data-m=warp][data-m-in] { animation-name: hsrc-e-warp; } :root[data-m-go] .hsrc [data-m=weft][data-m-in] { animation-name: hsrc-e-weft; } :root[data-m-go] .hsrc [data-m=pick][data-m-in] { animation-name: hsrc-e-pick; } :root[data-m-go] .hsrc [data-m=beat-up][data-m-in] { animation-name: hsrc-e-beat; } :root[data-m-go] .hsrc [data-m=unspool][data-m-in] { animation-name: hsrc-e-unspool; } :root[data-m-go] .hsrc [data-m=knot][data-m-in] { animation-name: hsrc-e-knot; } :root[data-m-go] .hsrc [data-m=twill-shift][data-m-in] { animation-name: hsrc-e-twill; } :root[data-m-go] .hsrc [data-m=satin-float][data-m-in] { animation-name: hsrc-e-satin; } :root[data-m-go] .hsrc [data-m=selvedge-draw][data-m-in] { animation-name: hsrc-e-selvedge; } :root[data-m-go] .hsrc [data-m=comb][data-m-in] { animation-name: hsrc-e-comb; animation-duration: 700ms; } :root[data-m-go] .hsrc [data-m=thread][data-m-in] { animation-name: hsrc-e-thread; animation-duration: 700ms; } :root[data-m-go] .hsrc [data-m=wind][data-m-in] { animation-name: hsrc-e-wind; } :root[data-m-go] .hsrc [data-m=shed][data-m-in] { animation-name: hsrc-e-shed; } :root[data-m-go] .hsrc [data-m=reed][data-m-in] { animation-name: hsrc-e-reed; } :root[data-m-go] .hsrc [data-m=heddle][data-m-in] { animation-name: hsrc-e-heddle; } @keyframes hsrc-e-warp { from { opacity: 0; transform: translateY(48px) scaleY(.97); } } @keyframes hsrc-e-weft { from { opacity: 0; transform: translateX(-72px); } } @keyframes hsrc-e-pick { from { opacity: 0; transform: translateX(64px) skewX(-4deg); } } @keyframes hsrc-e-beat { from { opacity: 0; transform: translateY(40px) scaleY(.94); } } @keyframes hsrc-e-unspool { from { opacity: 0; clip-path: inset(-6% 50% -6% 50%); } } @keyframes hsrc-e-knot { from { opacity: 0; transform: scale(.88) rotate(-1.6deg); } } @keyframes hsrc-e-twill { from { opacity: 0; transform: translate(-56px, 36px); } } @keyframes hsrc-e-satin { from { opacity: 0; transform: translateY(64px); filter: blur(6px); } } @keyframes hsrc-e-selvedge { from { opacity: 0; clip-path: inset(-6% -6% -6% 100%); } } @keyframes hsrc-e-comb { from { opacity: 0; clip-path: inset(0 100% 0 0); } } @keyframes hsrc-e-thread { from { opacity: 0; transform: translateX(-44px); } } @keyframes hsrc-e-wind { from { opacity: 0; transform: scale(.92); filter: blur(4px); } } @keyframes hsrc-e-shed { from { opacity: 0; transform: translateX(60px); } } @keyframes hsrc-e-reed { from { opacity: 0; clip-path: inset(-6% -6% 100% -6%); } } @keyframes hsrc-e-heddle { from { opacity: 0; transform: translateY(-40px); } } /* segmented native radios */ .hsrc-seg { display: flex; flex-wrap: wrap; border: 1px solid #8ca79a; margin: 0; padding: 0; min-width: 0; position: relative; } .hsrc-seg legend { font: 12px var(--gft-font-mono); padding: 0 6px; margin-left: 8px; } .hsrc-seg label { flex: 1 1 auto; position: relative; cursor: pointer; } .hsrc-seg input { position: absolute; opacity: 0; width: 1px; height: 1px; } .hsrc-seg span { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 8px 12px; font: 650 13px/1.25 var(--gft-font-display); text-align: center; transition: background-color 260ms, color 260ms; } .hsrc-seg input:checked + span { background: var(--gft-forest); color: #fff; } .hsrc-seg input:focus-visible + span { outline: 3px solid var(--gft-ochre); outline-offset: -3px; } .hsrc-seg--lt { border-color: #6bb68f99; color: #e2ebe6; } .hsrc-seg--lt input:checked + span { background: #6bb68f; color: #072d2b; } .hsrc-seg--pill { border: 0; gap: 8px; align-content: start; } .hsrc-seg--pill legend { display: block; width: 100%; margin: 0 0 10px; padding: 0; float: left; } .hsrc-seg--pill legend + * { clear: left; } .hsrc-seg--pill label { flex: 0 0 auto; } .hsrc-seg--pill span { min-height: 42px; padding: 8px 20px; border: 1.5px solid #6f8e80; border-radius: 22px; font-size: 14px; } .hsrc-seg--pill input:checked + span { border-color: var(--gft-forest); } .hsrc-seg--pill input:focus-visible + span { outline-offset: 2px; } .hsrc-field { display: grid; gap: 8px; font: 12px var(--gft-font-mono); } .hsrc-field input, .hsrc-field select { width: 100%; min-height: 52px; padding: 10px 14px; border: 1.5px solid #6f8e80; border-radius: 0; background: #fff; color: #072d2b; font: 15px var(--gft-font-display); } .hsrc-reset { min-height: 44px; background: transparent; border: 1.5px solid #6f8e80; padding: 8px 20px; font-size: 13px; justify-self: start; } /* ---------- 0. the splash: 28 strands, four of them snapped ---------- */ .hubs-page.hsrc .gft-splash__structure { inset: 0; } .hubs-page.hsrc .gft-splash__structure::after { background: linear-gradient(90deg, #072d2bd9 0%, #072d2b88 24%, #072d2b00 50%); } .hsrc .gft-splash__data { top: 22px; right: 48px; font-size: 12px; color: #cfe3d8; } .hsrc .gft-splash__caption, .hsrc .gft-splash__position { font-size: 12px; color: #cfe3d8; } .hsrc .gft-splash__cue { font-size: 14px; } .hsrc .gft-splash__actions .gft-button { min-height: 56px; padding-inline: 30px; font-size: 15px; } .hsrc .gft-splash__lede { font-size: clamp(16px, 1.35vw, 20px); } @media (min-width: 1001px) { .hubs-page.hsrc .gft-splash h1 { font-size: clamp(4.4rem, 8.3vw, 8.4rem); text-shadow: 0 0 34px #072d2b, 0 0 10px #072d2b; } } .hsrc-sp { position: absolute; inset: 0; overflow-anchor: none; } .hsrc-sp__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; } .hsrc-sp__warp path, .hsrc-sp__thread path { fill: none; vector-effect: non-scaling-stroke; transition: stroke-opacity 300ms, stroke 300ms; } .hsrc-sp__warp path { stroke: #7cc7a0; stroke-opacity: .3; stroke-width: 1.1; } .hsrc-sp__thread path { stroke: #9bdcb9; stroke-opacity: .55; stroke-width: 1.3; } .hsrc-sp__warp path[data-on], .hsrc-sp__thread path[data-on] { stroke: var(--hsrc-amber); stroke-opacity: 1; stroke-width: 2.6; } .hsrc-sp__flow path { fill: none; stroke: #f6f4ef; stroke-width: 3.4; stroke-linecap: round; stroke-opacity: .85; vector-effect: non-scaling-stroke; } .hsrc-sp__nodes circle { fill: #7cc7a0; transform-box: fill-box; transform-origin: center; transition: fill 260ms, transform 260ms; } .hsrc-sp__nodes [data-on] circle { fill: var(--hsrc-amber); transform: scale(2.1); } .hsrc-sp__t { fill: #cfe8dc; font: 13px var(--gft-font-mono); letter-spacing: .04em; } .hsrc-sp__t--pub { fill: #e8f3ec; font-size: 13px; } .hsrc-sp__t--cap { fill: #9bdcb9; font-size: 13px; letter-spacing: .14em; } .hsrc-sp__t--cut, .hsrc-sp__t--miss { fill: var(--hsrc-amber); letter-spacing: .12em; } .hsrc-sp__nodes [data-on] .hsrc-sp__t { fill: #fff; } .hsrc-sp__stub { fill: none; stroke: var(--hsrc-amber); stroke-opacity: .75; stroke-width: 1.3; stroke-dasharray: 6 5; vector-effect: non-scaling-stroke; } .hsrc-sp__tail path { stroke: var(--hsrc-amber); stroke-width: 1.8; stroke-linecap: round; fill: none; vector-effect: non-scaling-stroke; } .hsrc-sp__tail { transform-box: fill-box; transform-origin: 100% 50%; } .hsrc-sp__hollow { fill: #072d2b; stroke: var(--hsrc-amber); stroke-dasharray: 3 3; stroke-width: 1.4; vector-effect: non-scaling-stroke; } :root[data-m-go] .hsrc-sp__tail[data-m-live~=snap] { animation-name: hsrc-snap; animation-duration: 2.6s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-direction: alternate; animation-delay: var(--sp-delay, 0s); animation-play-state: var(--m-play, paused); } @keyframes hsrc-snap { from { transform: rotate(-16deg); opacity: 1; } 55% { opacity: .5; } to { transform: rotate(12deg) translateX(4px); opacity: .9; } } .hsrc-sp__panel { position: absolute; inset: 0; pointer-events: none; } .hsrc-sp__stats { position: absolute; top: 52px; right: 48px; display: flex; gap: clamp(20px, 3vw, 44px); margin: 0; } .hsrc-sp__stats div { display: flex; flex-direction: column-reverse; gap: 4px; align-items: flex-end; } .hsrc-sp__stats dt { font: 12px var(--gft-font-mono); letter-spacing: .1em; text-transform: uppercase; color: #cfe3d8; } .hsrc-sp__stats dd { margin: 0; font-size: clamp(2.2rem, 3.4vw, 3.4rem); font-weight: 850; letter-spacing: -.05em; line-height: 1; color: #f6f4ef; } .hsrc-sp__read { position: absolute; left: 41%; bottom: 112px; width: min(260px, 20vw); display: grid; gap: 4px; padding: 12px 16px; border-left: 3px solid var(--hsrc-amber); background: #072d2bee; } .hsrc-sp__read b { font: 700 22px var(--gft-font-mono); color: var(--hsrc-amber); } .hsrc-sp__read span { font: 14px/1.4 var(--gft-font-mono); color: #e8f3ec; overflow-wrap: anywhere; } @media (max-width: 1000px) { .hsrc-sp__read { display: none; } } @media (min-width: 641px) and (max-width: 1000px) { .hsrc-sp__stats { top: 52px; right: 28px; } } @media (max-width: 640px) { .hubs-page.hsrc .gft-splash__structure { inset: auto 0 82px 0; height: 300px; } .hsrc-sp__stats { top: 34px; left: 20px; right: auto; gap: 24px; } .hsrc-sp__svg { top: 104px; height: calc(100% - 104px); } .hsrc-sp__stats div { align-items: flex-start; } .hsrc-sp__stats dd { font-size: 2.2rem; } .hsrc .gft-splash__data { top: 22px; left: 20px; right: 20px; } .hsrc-sp__t { display: none; } } /* ---------- 1. the thread board: a full-width console ---------- */ .hsrc-board { display: grid; gap: clamp(28px, 3.6vw, 56px); } .hsrc-console { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.2fr); gap: clamp(24px, 4vw, 72px); align-items: end; padding-bottom: clamp(24px, 3vw, 44px); border-bottom: 1px solid var(--rule); } .hsrc-console__read { display: grid; gap: 14px; } .hsrc-count { display: flex; align-items: baseline; gap: 18px; max-width: none; } .hsrc-count strong { font-size: clamp(6rem, 11vw, 10.5rem); line-height: .92; letter-spacing: -.07em; font-weight: 850; color: var(--gft-forest); min-width: 2ch; } .hsrc-count span { font: 13px/1.5 var(--gft-font-mono); max-width: 16ch; } .hsrc-stats { display: grid; grid-template-columns: repeat(3, 1fr); border-block: 1px solid var(--rule); margin: 0; } .hsrc-stats div { padding: 12px 0; } .hsrc-stats div + div { padding-left: 16px; border-left: 1px solid var(--rule); } .hsrc-stats dt { font: 12px/1.5 var(--gft-font-mono); } .hsrc-stats dd { margin: 4px 0 0; font-size: 2.2rem; font-weight: 800; letter-spacing: -.04em; } .hsrc-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 24px; align-content: end; } .hsrc-controls .hsrc-field { grid-column: 1 / -1; } .hsrc-controls__foot { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 16px; } .hsrc-state { font: 13px/1.5 var(--gft-font-mono); min-height: 3em; max-width: 46ch; margin: 0; } .hsrc-board__body { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(320px, .85fr); gap: clamp(24px, 4vw, 64px); align-items: start; } .hsrc-card { position: sticky; top: 24px; border: 1.5px solid var(--gft-forest); border-left: 6px solid var(--gft-ochre); background: #fff; padding: 26px 28px; display: grid; gap: 12px; } .hsrc-card__id { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; max-width: none; } .hsrc-card__id b { font: 700 3rem/1 var(--gft-font-mono); color: var(--hsrc-ochre); } .hsrc-card__id span { font: 12px var(--gft-font-mono); } .hsrc-card h3 { font-size: clamp(1.4rem, 2vw, 1.9rem); min-height: 2.5em; display: flex; align-items: center; } .hsrc-card__meta { font-size: 15px; min-height: 3.4em; } .hsrc-card__where { font: 13px/1.6 var(--gft-font-mono); overflow-wrap: anywhere; min-height: 3.4em; } .hsrc-card__nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .hsrc-card__nav button { min-width: 48px; min-height: 48px; border: 1.5px solid #6f8e80; background: transparent; font-size: 20px; } .hsrc-field--select select { font-size: 14px; } .hsrc-stage { min-width: 0; } .hsrc-map { position: relative; height: var(--hsrc-h); margin-top: 34px; background: var(--hsrc-night); color: #e2ebe6; display: grid; grid-template-columns: 84px minmax(48px, 1fr) minmax(190px, .9fr); isolation: isolate; } .hsrc-axis { position: absolute; top: -26px; font: 12px var(--gft-font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--gft-ink); max-width: none; } .hsrc-axis--l { left: 0; } .hsrc-axis--r { right: 0; } .hsrc-map__grid { position: absolute; inset: -20px; z-index: 0; clip-path: inset(20px); background-image: linear-gradient(#b4d4c50d 1px, transparent 1px), linear-gradient(90deg, #b4d4c50d 1px, transparent 1px); background-size: 42px 42px; pointer-events: none; overflow-anchor: none; } .hsrc-col { list-style: none; margin: 0; padding: 0; position: relative; height: var(--hsrc-h); z-index: 2; } .hsrc-col li { height: 0; } .hsrc-id, .hsrc-dom { position: absolute; top: 0; left: 0; display: flex; align-items: center; gap: 9px; border: 0; border-left: 2px solid transparent; background: transparent; color: #d6e8de; font: 12px var(--gft-font-mono); text-align: left; transition: opacity 300ms, background-color 260ms, color 260ms; } .hsrc-id { width: calc(100% - 12px); margin-left: 12px; height: 28px; padding: 0 8px; transform: translateY(var(--y)); transition: transform 650ms var(--m-freight), opacity 300ms, background-color 260ms; } .hsrc-id i { width: 7px; height: 7px; border-radius: 50%; background: #6bb68f; flex: none; } .hsrc-id i[data-g='B'] { background: transparent; border: 1.5px solid #6bb68f; } .hsrc-dom { width: calc(100% - 12px); height: var(--h); transform: translateY(var(--y)); padding-left: 14px; border-left: 0; } .hsrc-dom i { width: 8px; height: 8px; border-radius: 50%; background: #6bb68f; flex: none; margin-left: -4px; } .hsrc-id:hover, .hsrc-dom:hover { background: #ffffff14; color: #fff; } .hsrc-id:focus-visible, .hsrc-dom:focus-visible { outline: 2px solid var(--gft-ochre); outline-offset: -2px; } .hsrc-id[aria-pressed='true'] { border-left-color: #c98a2b; background: #ffffff1a; color: #fff; } .hsrc-dom[aria-pressed='true'] { color: #fff; background: #ffffff1a; } .hsrc-dom[aria-pressed='true'] i, .hsrc-dom[data-on] i { background: #c98a2b; } .hsrc-id[data-dim], .hsrc-dom[data-dim] { opacity: .3; } .hsrc-threads { grid-column: 2; grid-row: 1; width: 100%; height: var(--hsrc-h); z-index: 1; overflow: visible; transition: opacity 200ms; } .hsrc-threads path { fill: none; stroke: #6bb68f; stroke-opacity: .45; stroke-width: 1.2; vector-effect: non-scaling-stroke; transition: stroke-opacity 300ms; } .hsrc-threads path[data-dim] { stroke-opacity: .06; } .hsrc-threads path[data-soft] { stroke-opacity: .95; stroke-width: 1.8; } .hsrc-threads path[data-on] { stroke: #c98a2b; stroke-opacity: 1; stroke-width: 2.6; } .hsrc-threads path.hsrc-glow { stroke: #c98a2b; stroke-width: 7; stroke-opacity: .4; filter: blur(3px); } /* the provenance chain (replaces the two-paragraph strip) */ .hsrc-chain { margin-top: clamp(56px, 7vw, 112px); display: grid; gap: 32px; } .hsrc-chain__links { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); } .hsrc-chain__links li { position: relative; padding: 38px 28px 0 0; border-top: 2px solid var(--gft-forest); display: grid; gap: 8px; align-content: start; } .hsrc-chain__links li::before { content: ''; position: absolute; left: 0; top: -9px; width: 16px; height: 16px; border-radius: 50%; background: #c98a2b; } .hsrc-chain__links li[data-open] { border-top: 2px dashed var(--hsrc-ochre); } .hsrc-chain__links li[data-open]::before { background: var(--hsrc-bg); border: 2px solid var(--hsrc-ochre); } .hsrc-chain__ping { position: absolute; left: 0; top: -9px; width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--hsrc-ochre); } .hsrc-chain__n { font: 12px var(--gft-font-mono); color: var(--muted); } .hsrc-chain__v { font-size: clamp(1.3rem, 2.1vw, 2.1rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.12; overflow-wrap: anywhere; max-width: none; } .hsrc-chain__lab { font: 12px var(--gft-font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); max-width: none; } .hsrc-chain__t { font-size: 15px; max-width: 30ch; } .hsrc-chain__foot { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 4vw, 64px); border-top: 1px solid var(--rule); padding-top: 20px; } .hsrc-chain__foot p { font-size: 15px; max-width: 54ch; } .hsrc-chain__foot p + p { border-left: 1px solid #c98a2b; padding-left: clamp(16px, 3vw, 40px); } /* ---------- 2 and 4. the ledgers: a sticky panel with three states, three stages of rows ---------- */ .hsrc-ledger { display: grid; grid-template-columns: minmax(340px, .9fr) minmax(0, 1.5fr); gap: clamp(24px, 4vw, 72px); align-items: start; } .hsrc-ledger--flip { grid-template-columns: minmax(0, 1.5fr) minmax(340px, .9fr); } .hsrc-ledger--flip .hsrc-lpanel { order: 2; } .hsrc-lpanel { position: sticky; top: 24px; max-height: calc(100svh - 48px); background: var(--hsrc-night); color: #e2ebe6; padding: 26px 28px 22px; display: grid; gap: 14px; align-content: start; overflow: clip; isolation: isolate; align-self: start; } .hsrc-lpanel__mesh { position: absolute; inset: -20px; z-index: -1; clip-path: inset(20px); background-image: linear-gradient(#b4d4c50d 1px, transparent 1px), linear-gradient(90deg, #b4d4c50d 1px, transparent 1px); background-size: 34px 34px; overflow-anchor: none; } .hsrc-lpanel .hsrc-kicker { color: #7fcba3; } .hsrc-lread { display: grid; gap: 4px; } .hsrc-lmap__id { font-size: clamp(3.4rem, 5vw, 5rem); font-weight: 850; letter-spacing: -.06em; line-height: 1; color: var(--hsrc-amber); max-width: none; } .hsrc-lmap__pub { font-size: 17px; font-weight: 700; line-height: 1.3; min-height: 2.7em; max-width: none; } .hsrc-lmap__flag { font: 12px var(--gft-font-mono); color: #cfe3d8; max-width: none; } .hsrc-lviews { display: grid; min-height: 262px; border-top: 1px solid #6bb68f55; padding-top: 12px; } .hsrc-lview { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity 140ms linear, visibility 0s linear 140ms; } .hsrc-lpanel[data-view='bars'] .hsrc-lview[data-v='bars'], .hsrc-lpanel[data-view='ring'] .hsrc-lview[data-v='ring'], .hsrc-lpanel[data-view='map'] .hsrc-lview[data-v='map'] { opacity: 1; visibility: visible; transition: opacity 340ms var(--m-soft) 170ms, visibility 0s linear 170ms; } .hsrc-lview__t { font: 12px var(--gft-font-mono); letter-spacing: .08em; text-transform: uppercase; color: #cfe3d8; margin-bottom: 10px; max-width: none; } .hsrc-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; } .hsrc-bars li { display: grid; grid-template-columns: minmax(0, 9.6em) 1fr 1.6em; align-items: center; gap: 10px; font: 12px var(--gft-font-mono); color: #d6e8de; } .hsrc-bars__l { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hsrc-bars i { display: block; height: 12px; background: #6bb68f; transform-origin: left; transform: scaleX(0); transition: transform 700ms var(--m-out) calc(var(--i) * 70ms + 200ms), background-color 260ms; } .hsrc-lpanel[data-view='bars'] .hsrc-bars i { transform: scaleX(var(--w)); } .hsrc-bars li[data-on] { color: #fff; } .hsrc-bars li[data-on] i { background: var(--hsrc-amber); } .hsrc-bars b { text-align: right; font-weight: 700; } .hsrc-ring { display: block; width: 100%; max-width: 260px; height: auto; margin-inline: auto; } .hsrc-ring__ticks rect { fill: #6bb68f; fill-opacity: .6; transform-box: view-box; transform-origin: 120px 120px; transition: fill 260ms, fill-opacity 260ms; } .hsrc-ring__ticks rect[data-f='1'] { fill: var(--hsrc-amber); fill-opacity: 1; } .hsrc-ring__ticks rect[data-on] { fill: #fff; fill-opacity: 1; } .hsrc-ring__dot { transform-box: view-box; transform-origin: 120px 120px; transition: transform 700ms var(--m-freight); } .hsrc-ring__dot circle { fill: #fff; stroke: var(--hsrc-amber); stroke-width: 3; } .hsrc-ring__n { fill: #f6f4ef; font: 850 58px var(--gft-font-display); letter-spacing: -.05em; } .hsrc-ring__c { fill: #cfe3d8; font: 13px var(--gft-font-mono); } .hsrc-lmap__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; } .hsrc-lmap__list li { display: flex; align-items: center; gap: 9px; min-height: 26px; font: 12px var(--gft-font-mono); color: #a9cdba; transition: color 260ms; min-width: 0; } .hsrc-lmap__list li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hsrc-lmap__list i { width: 7px; height: 7px; border-radius: 50%; background: #6bb68f99; flex: none; transition: transform 300ms, background-color 260ms; } .hsrc-lmap__list li[data-on] { color: #fff; } .hsrc-lmap__list li[data-on] i { background: var(--hsrc-amber); transform: scale(1.7); } .hsrc-lpips { list-style: none; margin: 0; padding: 10px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; border-top: 1px solid #6bb68f55; } .hsrc-lpips li { display: grid; gap: 2px; position: relative; padding-top: 8px; color: #a9cdba; transition: color 260ms; } .hsrc-lpips li::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: #6bb68f55; } .hsrc-lpips li::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--hsrc-amber); transform: scaleX(0); transform-origin: left; transition: transform 500ms var(--m-out); } .hsrc-lpips li[data-on]::after { transform: scaleX(1); } .hsrc-lpips li[data-on] { color: #fff; } .hsrc-lpips b { font: 700 13px var(--gft-font-mono); } .hsrc-lpips span { font: 12px/1.3 var(--gft-font-mono); } .hsrc-lstages { display: grid; gap: clamp(44px, 6vw, 88px); min-width: 0; } .hsrc-lstage__head { display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: end; padding-bottom: 16px; border-bottom: 2px solid var(--gft-forest); } .hsrc-lstage__n { font-size: clamp(3.4rem, 6.4vw, 6rem); font-weight: 850; letter-spacing: -.07em; line-height: .86; color: var(--gft-forest); max-width: none; } .hsrc-lstage__head h3 { font-size: clamp(1.5rem, 2.4vw, 2.2rem); } .hsrc-lstage__head .hsrc-kicker { color: var(--muted); } .hsrc-rows { list-style: none; margin: 0; padding: 0; } .hsrc-row { position: relative; display: grid; grid-template-columns: 72px minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start; padding: 16px 12px; min-height: 96px; outline: 0; transition: background-color 260ms; } .hsrc-row::before { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--gft-forest); opacity: .35; transform-origin: left; } .hsrc-row::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: linear-gradient(90deg, #c98a2b, transparent 80%); transform: scaleX(0); transform-origin: left; transition: transform 520ms var(--m-out); } .hsrc-row[data-active] { background: #0e4d4a14; } .hsrc-row[data-active]::after { transform: scaleX(1); } :root[data-m-go] .hsrc-row[data-m-in]::before { animation-name: hsrc-draw-x; animation-duration: 700ms; animation-timing-function: var(--m-out); animation-fill-mode: backwards; animation-iteration-count: 1; animation-direction: normal; } @keyframes hsrc-draw-x { from { transform: scaleX(0); } } .hsrc-row__id { display: flex; align-items: center; gap: 10px; padding-top: 4px; } .hsrc-row__id b { font: 700 15px var(--gft-font-mono); } .hsrc-grade { display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid #0e4d4a; font: 13px var(--gft-font-mono); color: #0e4d4a; flex: none; } .hsrc-grade[data-g='B'] { background: #0e4d4a; color: #fff; } .hsrc-row__pub h4 { font-size: 18px; line-height: 1.2; letter-spacing: -.02em; margin-bottom: 4px; overflow-wrap: anywhere; } .hsrc-row__pub p { font-size: 14px; line-height: 1.5; color: var(--muted); max-width: none; } .hsrc-row__pub .hsrc-row__flag { font: 12px/1.5 var(--gft-font-mono); margin-top: 6px; color: var(--muted); } .hsrc-row__flag[data-flag='on'] { color: var(--hsrc-ochre) !important; font-weight: 700; } .hsrc-row__where { display: grid; gap: 0; min-width: 0; font: 13px var(--gft-font-mono); } .hsrc-row__where > a, .hsrc-row__where > span { display: flex; align-items: center; min-height: 44px; overflow-wrap: anywhere; } .hsrc-row__where > a { text-decoration-color: #0e4d4a66; } .hsrc-row__src { display: flex; flex-wrap: wrap; align-items: center; gap: 0 12px; margin-top: 4px; } .hsrc-row__src .gft-text-link { font-size: 12px; gap: 8px; } /* ---------- 3. the cut thread (dark, full bleed, one screen) ---------- */ .hsrc-sec--bleed .gft-container { width: 100%; padding-inline: clamp(20px, 4vw, 64px); } .hsrc-sec--bleed .gft-section__head { width: min(1440px, 100%); margin-inline: auto; } .hsrc-sec--gap { min-height: 100svh; } .hsrc-gap { display: grid; gap: clamp(28px, 4.4vw, 60px); width: min(1440px, 100%); margin-inline: auto; margin-top: clamp(20px, 3vw, 40px); } .hsrc-gap__stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 0; border-block: 1px solid #6bb68f66; } .hsrc-gap__stats > div { padding: 18px 16px 18px 0; display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 6px; } .hsrc-gap__stats > div + div { padding-left: 20px; border-left: 1px solid #6bb68f40; } .hsrc-gap__stats dt { font: 12px var(--gft-font-mono); letter-spacing: .1em; text-transform: uppercase; color: #d6e8de; } .hsrc-gap__stats dd { margin: 0; font-size: clamp(3rem, 6.6vw, 6.4rem); font-weight: 850; letter-spacing: -.06em; line-height: 1; color: #f6f4ef; } .hsrc-gap__stat--miss dd { color: var(--hsrc-amber); } .hsrc-gap__scene { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; position: relative; } .hsrc-gap__thread { width: 100%; height: 200px; overflow: visible; } .hsrc-gap__main { stroke: #6bb68f; stroke-width: 3; } .hsrc-gap__main--r { stroke-opacity: .5; } .hsrc-gap__lead { stroke: #f6f4ef; stroke-width: 3.4; stroke-linecap: round; --m-dash: 3 37; --m-period: 1.7s; } .hsrc-gap__fray { stroke: #6bb68f; stroke-width: 2; stroke-opacity: .7; transform-box: fill-box; transform-origin: 0% 50%; } :root[data-m-go] .hsrc-gap__frays[data-m-live~=snap] .hsrc-gap__fray { animation-name: hsrc-flutter; animation-duration: 2.8s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-direction: alternate; animation-delay: calc(var(--i) * -.55s); animation-play-state: var(--m-play, paused); } @keyframes hsrc-flutter { from { transform: rotate(-3deg); } to { transform: rotate(3.5deg); } } .hsrc-gap__thread circle { fill: #6bb68f; } .hsrc-gap__nodes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(128px, 176px)); gap: 16px; } .hsrc-gap__node { position: relative; width: 100%; min-height: 200px; display: grid; align-content: center; justify-items: center; gap: 10px; padding: 16px; border: 2px dashed var(--hsrc-amber); background: transparent; color: #f6f4ef; transition: background-color 300ms, border-color 300ms; } .hsrc-gap__node b { font: 850 clamp(2rem, 3.4vw, 3.2rem) var(--gft-font-display); letter-spacing: -.05em; color: var(--hsrc-amber); transition: color 300ms; } .hsrc-gap__st { font: 14px/1.3 var(--gft-font-mono); letter-spacing: .06em; text-transform: uppercase; text-align: center; } .hsrc-gap__node i { width: 14px; height: 14px; border: 2px dashed var(--hsrc-amber); transition: background-color 300ms, border-color 300ms; } .hsrc-gap__node:hover { background: #ffffff12; } .hsrc-gap__node:focus-visible { outline: 3px solid #fff; outline-offset: 3px; } .hsrc-gap__node[data-state='resource'] { border: 2px solid #6bb68f; background: #6bb68f26; } .hsrc-gap__node[data-state='resource'] b { color: #8fdcb2; } .hsrc-gap__node[data-state='resource'] i { border: 2px solid #8fdcb2; background: #8fdcb2; } .hsrc-gap__console { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: clamp(24px, 4vw, 64px); align-items: center; } .hsrc-scrub { display: grid; gap: 6px; font: 13px var(--gft-font-mono); } .hsrc-scrub input { width: 100%; min-height: 48px; accent-color: #6bb68f; } .hsrc-scrub--lt label { font: 700 16px/1.4 var(--gft-font-display); color: #f6f4ef; } .hsrc-scrub__ticks { display: flex; justify-content: space-between; margin: 0; padding-inline: 8px; color: #d6e8de; max-width: none; } .hsrc-gap__out { display: block; font-size: clamp(1.15rem, 1.7vw, 1.55rem); line-height: 1.4; font-weight: 650; min-height: 4.2em; max-width: 52ch; color: #f6f4ef; } .hsrc-gap__copy { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: clamp(24px, 4vw, 64px); align-items: start; border-top: 1px solid #6bb68f55; padding-top: 24px; } .hsrc-gap__copy p { font-size: clamp(1.1rem, 1.4vw, 1.3rem); line-height: 1.6; color: var(--hsrc-lt); } .hsrc-gap__copy .hsrc-gap__note { font: 14px/1.6 var(--gft-font-mono); color: #d6e8de; border-left: 3px solid var(--hsrc-amber); padding-left: 16px; } /* ---------- 5. the pinned four-state stage ---------- */ .hsrc-steps { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 72px); } .hsrc-s2 { top: 24px; min-height: 0; align-items: start; } .hsrc-s2__panel { position: relative; isolation: isolate; overflow: clip; background: var(--hsrc-night); color: #e2ebe6; padding: clamp(20px, 2.4vw, 36px); display: grid; gap: 18px; min-height: min(78svh, 720px); align-content: start; } .hsrc-s2__mesh { position: absolute; inset: -20px; z-index: -1; clip-path: inset(20px); background-image: linear-gradient(#b4d4c50d 1px, transparent 1px), linear-gradient(90deg, #b4d4c50d 1px, transparent 1px); background-size: 38px 38px; overflow-anchor: none; } .hsrc-rail { list-style: none; margin: 0; padding: 0 0 14px; display: grid; grid-template-columns: repeat(4, 1fr); position: relative; border-bottom: 1px solid #6bb68f55; } .hsrc-rail a { display: flex; align-items: center; gap: 10px; min-height: 44px; text-decoration: none; font: 12px var(--gft-font-mono); letter-spacing: .08em; text-transform: uppercase; color: #a9cdba; transition: color 260ms; } .hsrc-rail b { font-size: 1.5rem; letter-spacing: -.04em; color: #6bb68f99; transition: color 260ms; } .hsrc-rail__fill { position: absolute; left: 0; bottom: -1px; width: 100%; height: 3px; background: #c98a2b; transform: scaleX(var(--hsrc-p, .25)); transform-origin: left; transition: transform 650ms var(--m-out); } .hsrc-steps[data-step='0'] { --hsrc-p: .25; } .hsrc-steps[data-step='1'] { --hsrc-p: .5; } .hsrc-steps[data-step='2'] { --hsrc-p: .75; } .hsrc-steps[data-step='3'] { --hsrc-p: 1; } .hsrc-steps[data-step='0'] [data-hsrc-r='0'] a, .hsrc-steps[data-step='1'] [data-hsrc-r='1'] a, .hsrc-steps[data-step='2'] [data-hsrc-r='2'] a, .hsrc-steps[data-step='3'] [data-hsrc-r='3'] a { color: #fff; } .hsrc-steps[data-step='0'] [data-hsrc-r='0'] b, .hsrc-steps[data-step='1'] [data-hsrc-r='1'] b, .hsrc-steps[data-step='2'] [data-hsrc-r='2'] b, .hsrc-steps[data-step='3'] [data-hsrc-r='3'] b { color: var(--hsrc-amber); } .hsrc-s2__canvas { display: grid; } .hsrc-s2__canvas svg { grid-area: 1 / 1; width: 100%; height: auto; max-height: 46svh; min-width: 0; } /* Only one state is ever visible: the outgoing state fades out first, the incoming one fades in after it. */ .hsrc-steps [data-mw-show]:not([data-shown]) { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 150ms linear, visibility 0s linear 150ms; } .hsrc-steps [data-mw-show][data-shown] { transition: opacity 360ms var(--m-soft) 180ms, visibility 0s linear 180ms; } :root[data-m-go] .hsrc .hsrc-steps[data-mw-ready] [data-mw-show] { transition: opacity 360ms var(--m-soft) 180ms, translate 520ms var(--m-out) 180ms, visibility 0s linear 180ms; } :root[data-m-go] .hsrc .hsrc-steps[data-mw-ready] [data-mw-show]:not([data-shown]) { opacity: 0; translate: 0 10px; visibility: hidden; transition: opacity 150ms linear, translate 150ms linear, visibility 0s linear 150ms; } .hsrc-steps:not([data-mw-ready]) [data-mw-show]:not([data-mw-show='0']) { display: none; } .hsrc-s2__signal { display: grid; min-height: 2.8em; font-size: clamp(1.1rem, 1.7vw, 1.5rem); font-weight: 750; letter-spacing: -.02em; line-height: 1.25; max-width: none; } .hsrc-s2__signal span { grid-area: 1 / 1; } .hsrc-draw { clip-path: inset(0); } :root[data-m-go] .hsrc-steps [data-shown] .hsrc-draw { animation-name: hsrc-draw-clip; animation-duration: 900ms; animation-delay: 200ms; animation-timing-function: var(--m-freight); animation-fill-mode: backwards; animation-iteration-count: 1; animation-direction: normal; } @keyframes hsrc-draw-clip { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0); } } .hsrc-steps__track > li { gap: 14px; } .hsrc-steps__track > li .hsrc-kicker { color: var(--gft-forest); } .hsrc-steps__track h3 { font-size: clamp(1.7rem, 2.6vw, 2.6rem); max-width: 16ch; } .hsrc-steps__track p:not(.hsrc-kicker) { font-size: clamp(1rem, 1.15vw, 1.1rem); max-width: 44ch; } /* ---------- 6. the URL interlude ---------- */ .hsrc-url { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: center; width: min(1440px, 100%); margin-inline: auto; } .hsrc-url__glyph { font-size: clamp(6.5rem, 16vw, 17rem); font-weight: 850; letter-spacing: -.08em; line-height: .9; color: var(--gft-sage); max-width: none; display: flex; align-items: center; gap: .08em; } .hsrc-url__glyph span { color: #c98a2b; } .hsrc-url__art svg { width: 100%; height: auto; margin-top: 10px; overflow: visible; } .hsrc-url__label { font: 14px/1.7 var(--gft-font-mono); color: var(--hsrc-lt); max-width: 40ch; margin-top: 14px; } .hsrc-url__copy p { font-size: clamp(1.02rem, 1.25vw, 1.15rem); line-height: 1.7; color: var(--hsrc-lt); } .hsrc-url__copy p + p { margin-top: 20px; } /* ---------- 7. boundaries: three instruments on a dark panel ---------- */ .hsrc-bounds { background: var(--hsrc-night); color: #e2ebe6; padding: clamp(20px, 3vw, 44px); display: grid; gap: 28px; position: relative; isolation: isolate; } .hsrc-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; position: relative; } .hsrc-tabs button { display: grid; grid-template-columns: auto 1fr; grid-template-areas: 'n s' 'n t'; column-gap: 16px; row-gap: 4px; align-content: center; text-align: left; min-height: 96px; padding: 14px 20px; background: transparent; border: 1.5px solid #6bb68f99; color: #d6e8de; transition: color 260ms, background-color 260ms, border-color 260ms; } .hsrc-tabs button .hsrc-tabs__n { grid-area: n; align-self: center; font: 850 2.4rem var(--gft-font-display); letter-spacing: -.05em; color: #7fcba3; transition: color 260ms; } .hsrc-tabs button span { grid-area: s; align-self: end; font: 12px var(--gft-font-mono); letter-spacing: .1em; text-transform: uppercase; } .hsrc-tabs button strong { grid-area: t; align-self: start; font-size: clamp(1.05rem, 1.5vw, 1.4rem); letter-spacing: -.02em; line-height: 1.15; } .hsrc-tabs button[aria-selected='true'] { background: #6bb68f; border-color: #6bb68f; color: #072d2b; } .hsrc-tabs button[aria-selected='true'] .hsrc-tabs__n { color: #072d2b; } .hsrc-tabs button:focus-visible { outline: 3px solid #fff; outline-offset: 3px; } .hsrc-tabs__bar { position: absolute; left: 0; bottom: -14px; width: 33.333%; height: 4px; background: var(--hsrc-amber); transition: transform 520ms var(--m-snap); } .hsrc-bounds[data-i='1'] .hsrc-tabs__bar { transform: translateX(100%); } .hsrc-bounds[data-i='2'] .hsrc-tabs__bar { transform: translateX(200%); } .hsrc-tabs__idx { display: flex; align-items: baseline; gap: 10px; margin: 8px 0 0; font: 14px var(--gft-font-mono); color: #d6e8de; max-width: none; } .hsrc-tabs__idx b { font: 850 2.6rem var(--gft-font-display); letter-spacing: -.05em; color: #fff; } .hsrc-panel { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.5fr); gap: clamp(24px, 4vw, 64px); padding-top: 8px; align-items: stretch; min-height: min(56svh, 520px); } .hsrc-bounds[data-js] .hsrc-panel:not([data-on]) { display: none; } .hsrc-bounds:not([data-js]) .hsrc-panel + .hsrc-panel { border-top: 1px solid #6bb68f55; margin-top: 40px; padding-top: 40px; } .hsrc-panel__copy h3 { font-size: clamp(1.7rem, 2.6vw, 2.6rem); margin-bottom: 18px; color: #fff; } .hsrc-panel__copy p { font-size: 17px; color: #d6e8de; max-width: none; } .hsrc-panel__stage { background: var(--hsrc-night-2); border: 1px solid #6bb68f55; color: #e2ebe6; padding: clamp(18px, 2.4vw, 32px); display: grid; gap: 16px; align-content: start; position: relative; overflow: clip; isolation: isolate; } .hsrc-panel__stage svg { width: 100%; height: auto; } .hsrc-out { display: block; font-size: 1.15rem; line-height: 1.45; font-weight: 650; min-height: 3.1em; } .hsrc-scrub input { accent-color: #6bb68f; } .hsrc-reader { transform: translate(calc(60px + var(--hsrc-i, 2) * 96px), 0); transition: transform 450ms var(--m-out); } .hsrc-c { fill-opacity: .14; stroke-width: 2; opacity: .3; transition: opacity 400ms; } .hsrc-c--textile { fill: #6bb68f; stroke: #6bb68f; } .hsrc-c--apparel { fill: #9fb0d8; stroke: #9fb0d8; } .hsrc-c--cameroon { fill: #c98a2b; stroke: #c98a2b; } [data-scope='textile'] .hsrc-c--textile, [data-scope='apparel'] .hsrc-c--apparel, [data-scope='cameroon'] .hsrc-c--cameroon { opacity: 1; fill-opacity: .3; } .hsrc-slip, .hsrc-rcpt { transition: opacity 450ms; } .hsrc-slip__n { fill: #f6f4ef; font: 850 64px var(--gft-font-display); letter-spacing: -.06em; } .hsrc-stamp2 { transition: transform 500ms var(--m-snap), opacity 300ms; } [data-state='detached'] .hsrc-rcpt { opacity: .22; } [data-state='detached'] .hsrc-stamp2 { opacity: 0; transform: scale(1.7) rotate(-14deg); } [data-state='receipt'] .hsrc-slip { opacity: .3; } [data-state='receipt'] .hsrc-stamp2 { opacity: 1; transform: rotate(-8deg); } /* ---------- 8. three strands: cards sit beside the plot with leader lines ---------- */ .hsrc-strands { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr); gap: clamp(28px, 4.4vw, 72px); align-items: stretch; } .hsrc-strands__fig { position: relative; margin: 0; background: var(--gft-paper); border: 1px solid var(--rule); padding: 20px 24px 24px; display: grid; gap: 16px; min-width: 0; } .hsrc-strands__fig svg { width: 100%; height: auto; } .hsrc-strand { transition: opacity 350ms; } .hsrc-strand path { fill: none; transition: opacity 500ms; } .hsrc-strand--0 path { stroke: #0e4d4a; } .hsrc-strand--0 circle { fill: #0e4d4a; } .hsrc-strand--1 path { stroke: #2c3e7a; } .hsrc-strand--1 circle { fill: #2c3e7a; } .hsrc-strand--2 path { stroke: #8c5a12; } .hsrc-strand--2 circle { fill: #8c5a12; } .hsrc-strand__join--dash { stroke-dasharray: 6 7; } .hsrc-gap-line { stroke: #8c5a12; stroke-dasharray: 6 7; fill: none; transition: opacity 500ms; } .hsrc-gate { opacity: .6; } .hsrc-gate-node { fill: #c98a2b; } .hsrc-strands[data-state='apart'] .hsrc-strand__join { opacity: 0; } .hsrc-strands[data-state='join'] .hsrc-strand__apart, .hsrc-strands[data-state='join'] .hsrc-gap-line { opacity: 0; } .hsrc-strands[data-focus='0'] .hsrc-strand:not(.hsrc-strand--0), .hsrc-strands[data-focus='1'] .hsrc-strand:not(.hsrc-strand--1), .hsrc-strands[data-focus='2'] .hsrc-strand:not(.hsrc-strand--2) { opacity: .2; } .hsrc-chips { display: flex; flex-wrap: wrap; gap: 12px; } .hsrc-chip { position: relative; display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 18px; background: #fff; border: 1.5px solid currentColor; font: 650 14px var(--gft-font-display); text-decoration: none; transition: background-color 260ms, color 260ms; } .hsrc-chip:hover, .hsrc-chip:focus-visible { background: var(--gft-forest); color: #fff; } .hsrc-chip--0, .hsrc-chip--2 { color: #0e4d4a; } .hsrc-chip--1 { color: #2c3e7a; } .hsrc-legend { display: none; list-style: none; margin: 0; padding: 0; gap: 8px; font-size: 14px; } .hsrc-legend li { display: flex; gap: 10px; align-items: center; } .hsrc-legend i { width: 18px; height: 3px; flex: none; background: #0e4d4a; } .hsrc-legend i[data-s='1'] { background: #2c3e7a; } .hsrc-legend i[data-s='2'] { background: #8c5a12; } .hsrc-strands__cards { display: grid; gap: 28px; align-content: space-between; padding-block: 12% 6%; } .hsrc-card2 { position: relative; background: #fff; border-left: 3px solid var(--gft-ochre); padding: 24px; box-shadow: 0 18px 44px #072d2b22; } .hsrc-card2::before { content: ''; position: absolute; right: 100%; top: 50%; width: clamp(28px, 4.4vw, 72px); height: 0; border-top: 1.5px solid #8c5a12; margin-right: 3px; } .hsrc-card2::after { content: ''; position: absolute; right: calc(100% + clamp(28px, 4.4vw, 72px)); top: 50%; width: 9px; height: 9px; margin: -4px -4px 0 0; border-radius: 50%; background: #c98a2b; } .hsrc-card2 p { font-size: 15px; } /* ---------- 9. closing instrument ---------- */ .hsrc-sec--close { padding-top: clamp(96px, 14svh, 168px); } .hsrc-close { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.5fr); gap: clamp(28px, 5vw, 80px); align-items: center; width: min(1440px, 100%); margin-inline: auto; } .hsrc-close__read { display: grid; gap: 12px; } .hsrc-close__read .hsrc-kicker { color: var(--gft-sage); } .hsrc-close__id { font-size: clamp(5rem, 11vw, 11rem); line-height: .96; padding-top: .06em; font-weight: 850; letter-spacing: -.07em; color: var(--hsrc-amber); max-width: none; } .hsrc-close__pub { font-size: clamp(1.2rem, 2vw, 1.7rem); font-weight: 750; letter-spacing: -.02em; min-height: 2.5em; max-width: none; } .hsrc-close__where { font: 14px/1.6 var(--gft-font-mono); color: var(--hsrc-lt); min-height: 3.3em; overflow-wrap: anywhere; } .hsrc-close__open { justify-self: start; min-height: 56px; padding-inline: 32px; font-size: 16px; margin-top: 8px; } .hsrc-close__note { font-size: 15px; color: var(--hsrc-lt); max-width: 48ch; margin-top: 8px; } .hsrc-close__fig { margin: 0; min-width: 0; } .hsrc-close__fig svg { width: 100%; height: auto; overflow: visible; } .hsrc-close__all path { stroke: #7cc7a0; stroke-opacity: .5; stroke-width: 1.2; fill: none; transition: stroke-opacity 400ms; } .hsrc-close__all path[data-sel] { stroke-opacity: .08; } .hsrc-close__sel { stroke: #c98a2b; stroke-width: 2.8; fill: none; } .hsrc-close__dots { fill: none; stroke: #fff; stroke-width: 3.4; stroke-linecap: round; } .hsrc-close__node { transition: transform 650ms var(--m-freight); } :root[data-m-go] .hsrc-close__sway[data-m-live~=sway] { animation-name: hsrc-sway; animation-duration: 6s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-direction: alternate; animation-play-state: var(--m-play, paused); } @keyframes hsrc-sway { from { transform: translateY(-7px); opacity: .85; } to { transform: translateY(7px); opacity: 1; } } .hsrc-close__end { font: 14px var(--gft-font-mono); color: var(--hsrc-lt); margin-top: 12px; max-width: none; } .hsrc-close__form { grid-column: 1 / -1; } .hsrc-close__list { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 8px; } .hsrc-close__list legend { grid-column: 1 / -1; float: left; width: 100%; padding: 0; margin-bottom: 12px; font: 14px var(--gft-font-mono); color: var(--hsrc-lt); } .hsrc-close__list legend + * { clear: left; } .hsrc-close__list label { position: relative; cursor: pointer; } .hsrc-close__list input { position: absolute; opacity: 0; width: 1px; height: 1px; } .hsrc-close__list span { display: grid; place-items: center; min-height: 52px; border: 1.5px solid #6bb68f99; font: 700 15px var(--gft-font-mono); color: #e8f3ec; transition: background-color 260ms, color 260ms, border-color 260ms; } .hsrc-close__list label:hover span { background: #ffffff14; } .hsrc-close__list input:checked + span { background: var(--hsrc-amber); border-color: var(--hsrc-amber); color: #072d2b; } .hsrc-close__list input:focus-visible + span { outline: 3px solid #fff; outline-offset: 2px; } /* ---------- phones and narrow screens ---------- */ @media (max-width: 1180px) { .hsrc-console { grid-template-columns: 1fr; align-items: start; } .hsrc-board__body { grid-template-columns: 1fr; } .hsrc-card { position: static; order: -1; } } @media (max-width: 1000px) { .hsrc .gft-section__head { grid-template-columns: 1fr; gap: 20px; } .hsrc-chain__links { grid-template-columns: 1fr 1fr; row-gap: 32px; } .hsrc-chain__foot { grid-template-columns: 1fr; } .hsrc-chain__foot p + p { border-left: 0; padding-left: 0; } .hsrc-ledger, .hsrc-ledger--flip { grid-template-columns: 1fr; gap: 0; } .hsrc-ledger--flip .hsrc-lpanel { order: 0; } .hsrc-lpanel { position: sticky; top: 0; z-index: 6; grid-template-columns: auto 1fr; gap: 0 18px; align-items: center; padding: 10px 16px; margin-bottom: 8px; max-height: none; } .hsrc-lpanel .hsrc-kicker, .hsrc-lviews, .hsrc-lpips { display: none; } .hsrc-lread { grid-column: 1 / -1; grid-template-columns: auto 1fr; gap: 0 18px; align-items: center; } .hsrc-lmap__id { font-size: 2.2rem; } .hsrc-lmap__pub { font-size: 14px; min-height: 0; } .hsrc-lmap__flag { grid-column: 2; } .hsrc-row { grid-template-columns: 64px minmax(0, 1fr) minmax(0, 1fr); } .hsrc-gap__stats { grid-template-columns: repeat(3, 1fr); } .hsrc-gap__stats > div:nth-child(4) { padding-left: 0; border-left: 0; } .hsrc-gap__scene { grid-template-columns: 1fr; } .hsrc-gap__thread { display: none; } .hsrc-gap__nodes { grid-template-columns: repeat(4, minmax(0, 1fr)); } .hsrc-gap__console, .hsrc-gap__copy { grid-template-columns: 1fr; } .hsrc-steps { grid-template-columns: 1fr; } .hsrc-s2 { top: 0; z-index: 5; } .hsrc-s2__panel { min-height: 0; padding: 14px 16px; gap: 10px; } .hsrc-s2__canvas svg { max-height: 30svh; } .hsrc-rail a span { display: none; } .hsrc-s2__signal { font-size: 15px; min-height: 2.6em; } .hsrc-s2 .hsrc-note { display: none; } .hsrc-steps__track > li { min-height: 0; padding-block: 2.4rem; } .hsrc-url, .hsrc-close, .hsrc-panel, .hsrc-strands { grid-template-columns: 1fr; } .hsrc-tabs { grid-template-columns: 1fr; } .hsrc-tabs__bar { display: none; } .hsrc-strands__cards { padding-block: 0; } .hsrc-card2::before, .hsrc-card2::after { display: none; } } @media (max-width: 640px) { .hsrc .gft-section__head h2 { font-size: clamp(2rem, 9vw, 2.8rem); } .hsrc-controls { grid-template-columns: 1fr; } .hsrc-controls__foot { flex-direction: column; align-items: flex-start; } .hsrc-count strong { font-size: 5.6rem; } .hsrc-stats dd { font-size: 1.6rem; } .hsrc-map { grid-template-columns: 72px minmax(36px, 1fr) minmax(172px, 1.5fr); } .hsrc-id { font-size: 12px; padding: 0 4px; gap: 6px; } .hsrc-dom { font-size: 12px; padding-left: 10px; } .hsrc-card { padding: 20px; } .hsrc-card__id b { font-size: 2.4rem; } .hsrc-chain__links { grid-template-columns: 1fr; } .hsrc-row { grid-template-columns: 56px minmax(0, 1fr); padding-inline: 4px; } .hsrc-row__pub, .hsrc-row__where { grid-column: 2; } .hsrc-lstage__head { grid-template-columns: 1fr; gap: 6px; } .hsrc-gap__stats { grid-template-columns: 1fr 1fr; } .hsrc-gap__stats > div:nth-child(odd) { padding-left: 0; border-left: 0; } .hsrc-gap__stats > div:nth-child(n+3) { border-top: 1px solid #6bb68f40; } .hsrc-gap__nodes { grid-template-columns: 1fr 1fr; } .hsrc-gap__node { min-height: 140px; } .hsrc-url__glyph { font-size: 7.5rem; } .hsrc-tabs button { min-height: 72px; } .hsrc-t { font-size: 21px; } .hsrc-t--lg { font-size: 22px; } .hsrc-code { font-size: 24px; } .hsrc-code--sel { display: none; } .hsrc-pub { font-size: 22px; } .hsrc-ring__c { font-size: 14px; } .hsrc-out { min-height: 5.6em; font-size: 1rem; } .hsrc-strands__fig { padding: 12px; } .hsrc-strands__fig .hsrc-t--ink, .hsrc-strands__fig .hsrc-t--ochre { display: none; } .hsrc-legend { display: grid; } .hsrc-close__id { font-size: 6rem; } .hsrc-close__fig .hsrc-t { display: none; } .hsrc-close__list { grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); } } @media (min-width: 1181px) and (min-height: 820px) { .hsrc-card { top: 24px; } } /* ---------- reduced motion and Calm ---------- */ @media (prefers-reduced-motion: reduce) { .hsrc *, .hsrc *::before, .hsrc *::after { transition-duration: .01ms !important; transition-delay: 0s !important; animation-name: none !important; } } :root[data-motion='calm'] .hsrc *, :root[data-motion='calm'] .hsrc *::before, :root[data-motion='calm'] .hsrc *::after { transition-duration: .01ms !important; transition-delay: 0s !important; animation-name: none !important; } /* ===================================================================================================== Round 4. Instruments read in a still, prose is attached to a visual, hand-overs are bridged. Everything here animates transform, opacity or clip-path only. Lives run through --m-play. ===================================================================================================== */ /* ---------- hand-overs: a diagonal wipe and a longer amber thread between sections ---------- */ .hsrc { --hsrc-wedge: var(--gft-paper); } .hsrc .gft-section--sage { --hsrc-wedge: #e2ebe6; } .hsrc .gft-section--dark { --hsrc-wedge: #072d2b; } .hsrc .gft-section__seam { height: 150px; bottom: -75px; } .hsrc .gft-section + .gft-section::before { content: ''; position: absolute; left: 0; right: 0; top: -56px; height: 56px; background: var(--hsrc-wedge); clip-path: polygon(0 100%, 100% 0, 100% 100%); pointer-events: none; z-index: 1; } .hsrc .gft-section + .gft-section:nth-of-type(even)::before { clip-path: polygon(0 0, 100% 100%, 0 100%); } .hsrc .gft-section + .gft-section--dark::after { content: ''; position: absolute; left: 0; right: 0; top: -56px; height: 56px; background: linear-gradient(90deg, transparent 10%, #c98a2b 50%, transparent 90%); clip-path: polygon(0 100%, 100% 0, 100% calc(0% + 3px), 0 calc(100% + 3px)); opacity: .8; pointer-events: none; z-index: 1; } .hsrc .gft-section + .gft-section--dark:nth-of-type(even)::after { clip-path: polygon(0 0, 100% 100%, 100% calc(100% + 3px), 0 3px); } @media (max-width: 640px) { .hsrc .gft-section + .gft-section::before, .hsrc .gft-section + .gft-section--dark::after { top: -36px; height: 36px; } .hsrc .gft-section__seam { height: 100px; bottom: -50px; } } /* ---------- 0. splash: a slower, staggered draw and a ticking ledger ---------- */ :root[data-m-go] .hsrc-sp__warp[data-splash-draw] { animation-duration: 900ms; } :root[data-m-go] .hsrc-sp__thread[data-splash-draw] { animation-duration: 900ms; } :root[data-m-go] .hsrc-sp__cut[data-splash-draw] { animation-duration: 520ms; } .hsrc-sp__log { position: absolute; left: 41%; bottom: 206px; width: min(260px, 20vw); list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; font: 12px/1.5 var(--gft-font-mono); } .hsrc-sp__log li { padding: 2px 16px 2px 19px; background: #072d2bdd; color: #e8f3ec; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hsrc-sp__log li:empty { display: none; } .hsrc-sp__log li:nth-child(1) { opacity: .62; } .hsrc-sp__log li:nth-child(2) { opacity: .78; } .hsrc-sp__log li:nth-child(3) { opacity: .92; } @media (max-width: 1000px) { .hsrc-sp__log { display: none; } } /* ---------- 1. the board: a faint thread behind the 28, a wide search with its own counter ---------- */ .hsrc-sec--board { padding-top: clamp(36px, 4.4vw, 64px); } .hsrc-console { position: relative; isolation: isolate; } .hsrc-console__thread { position: absolute; left: -4vw; right: -4vw; top: -36px; width: calc(100% + 8vw); height: calc(100% + 36px); z-index: -1; pointer-events: none; overflow: visible; } .hsrc-console__thread path { stroke: #0e4d4a; stroke-opacity: .13; stroke-width: 1.2; vector-effect: non-scaling-stroke; } .hsrc-console__thread .hsrc-console__amber { stroke: #c98a2b; stroke-opacity: .55; stroke-width: 2.4; } :root[data-m-go] .hsrc-console__thread[data-m-on] path { animation-name: hsrc-thread-sway; animation-duration: 7s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-direction: alternate; animation-delay: calc(var(--k, 3) * -.5s); } @keyframes hsrc-thread-sway { from { transform: translateY(-5px); } to { transform: translateY(6px); } } .hsrc-field__box { position: relative; display: block; } .hsrc-field__box input { padding-right: 118px; min-height: 60px; font-size: 17px; } .hsrc-field__box input[type=search]::-webkit-search-cancel-button { appearance: none; display: none; } .hsrc-field__n { position: absolute; right: 14px; top: 50%; translate: 0 -50%; font: 700 13px var(--gft-font-mono); color: #0e4d4a; border: 1.5px solid #6f8e80; padding: 3px 10px; border-radius: 14px; background: #f6f4ef; pointer-events: none; } .hsrc-field > span:first-child { font-size: 13px; } /* ---------- 1b. the provenance chain: the prose sits on a dark thread with the four states lit in turn ---------- */ .hsrc-chain__foot { position: relative; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(20px, 4vw, 64px); align-items: start; background: var(--hsrc-night); color: #f6f4ef; border-top: 0; padding: 108px clamp(24px, 4vw, 64px) clamp(28px, 3.4vw, 48px); } .hsrc-chain__trace { position: absolute; left: clamp(24px, 4vw, 64px); right: clamp(24px, 4vw, 64px); top: 28px; height: 56px; } .hsrc-chain__rail { position: absolute; left: 0; right: 0; top: 9px; height: 2px; background: linear-gradient(90deg, #6bb68f 0 72%, #e3a64a 72%); } .hsrc-chain__dot { position: absolute; top: 0; left: calc(var(--i) * 25%); padding-top: 24px; font: 12px/1.4 var(--gft-font-mono); letter-spacing: .06em; text-transform: uppercase; color: #e8f3ec; white-space: nowrap; } .hsrc-chain__dot b { color: #e3a64a; margin-right: 8px; font-weight: 700; } .hsrc-chain__dot::before { content: ''; position: absolute; left: 0; top: 2px; width: 16px; height: 16px; border-radius: 50%; background: #6bb68f; } .hsrc-chain__dot:last-of-type::before { background: #072d2b; border: 2px dashed #e3a64a; } .hsrc-chain__dot::after { content: ''; position: absolute; left: -6px; top: -4px; width: 28px; height: 28px; border-radius: 50%; border: 2px solid #e3a64a; opacity: 0; } :root[data-m-go] .hsrc-chain__foot[data-m-live] .hsrc-chain__dot::after { animation-name: hsrc-chain-ping; animation-duration: 8s; animation-timing-function: ease-out; animation-iteration-count: infinite; animation-delay: calc(var(--i) * 2s); animation-play-state: var(--m-play, paused); } @keyframes hsrc-chain-ping { 0% { opacity: 1; transform: scale(.7); } 14% { opacity: 1; transform: scale(1.15); } 26%, 100% { opacity: 0; transform: scale(1.3); } } .hsrc-chain__foot .hsrc-chain__lead { font-size: clamp(1.2rem, 1.9vw, 1.7rem); font-weight: 700; line-height: 1.35; letter-spacing: -.02em; max-width: 32ch; color: #f6f4ef; border: 0; padding: 0; } .hsrc-chain__foot .hsrc-chain__aside { font-size: 15px; line-height: 1.65; color: #e1eee6; max-width: 48ch; border-left: 2px solid #e3a64a; padding-left: clamp(16px, 2.6vw, 36px); } @media (max-width: 1000px) { .hsrc-chain__foot { grid-template-columns: 1fr; padding-top: 104px; } .hsrc-chain__foot .hsrc-chain__aside { border-left: 0; padding-left: 0; border-top: 1px solid #6bb68f66; padding-top: 16px; } } @media (max-width: 640px) { .hsrc-chain__dot { letter-spacing: 0; } .hsrc-chain__dot b { display: block; margin: 0; } } /* ---------- 2. ledgers: a wider sticky panel, single-line rows with glyphs, a stage selector you can see ---------- */ @media (min-width: 1001px) { .hsrc-ledger { grid-template-columns: minmax(0, .82fr) minmax(0, 1fr); } .hsrc-ledger--flip { grid-template-columns: minmax(0, 1fr) minmax(0, .82fr); } .hsrc-row { grid-template-columns: 92px minmax(0, 1fr) 48px minmax(0, 1.05fr); gap: 14px; align-items: center; min-height: 76px; padding: 10px 12px; } .hsrc-row__spark { display: block; } } .hsrc-lpanel .hsrc-kicker { font-size: 13px; } .hsrc-lmap__pub { font-size: 19px; } .hsrc-lmap__flag { font-size: 13px; } .hsrc-lmap__attr { font: 12px/1.5 var(--gft-font-mono); color: #cfe3d8; max-width: none; } .hsrc-lview__t { font-size: 13px; } .hsrc-bars li { font-size: 13px; grid-template-columns: minmax(0, 11em) 1fr 1.6em; } .hsrc-lmap__list li { font-size: 13px; color: #d3e6db; } .hsrc-lpips__hint { display: flex; align-items: center; gap: 8px; margin: 0; font: 12px/1.4 var(--gft-font-mono); color: #d6e8de; max-width: none; letter-spacing: .04em; } .hsrc-lpips__hint::before { content: '↓'; color: var(--hsrc-amber); font-size: 14px; } .hsrc-lpips { padding-top: 0; border-top: 0; gap: 8px; } .hsrc-lpips li { padding-top: 0; } .hsrc-lpips li::before, .hsrc-lpips li::after { content: none; } .hsrc-lpips button { width: 100%; display: grid; gap: 2px; text-align: left; padding: 10px 10px 9px; background: transparent; border: 1.5px solid #6bb68f99; color: #d6e8de; cursor: pointer; transition: background-color 260ms, color 260ms, border-color 260ms; } .hsrc-lpips button:hover { background: #ffffff14; border-color: #6bb68f; color: #fff; } .hsrc-lpips button:focus-visible { outline: 3px solid #fff; outline-offset: 2px; } .hsrc-lpips li[data-on] button { background: #6bb68f; border-color: #6bb68f; color: #072d2b; } .hsrc-lpips b { font-size: 13px; } .hsrc-lpips span { font-size: 12px; } .hsrc-lstage__key { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 12px 0 0; font: 12px/1.5 var(--gft-font-mono); color: var(--muted); max-width: none; } .hsrc-lstage__key i { display: inline-block; width: 9px; height: 9px; margin-right: 8px; border-radius: 50%; border: 1.5px solid var(--muted); vertical-align: -1px; } .hsrc-lstage__key i[data-f='1'] { background: var(--hsrc-ochre); border-color: var(--hsrc-ochre); } .hsrc-row__pub h4 { font-size: 17px; margin-bottom: 2px; } .hsrc-row__pub .hsrc-row__flag { display: flex; align-items: center; gap: 8px; margin-top: 2px; font: 12px/1.4 var(--gft-font-mono); position: relative; } .hsrc-row__flag i { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--muted); flex: none; } .hsrc-row__flag[data-flag='on'] i { background: var(--hsrc-ochre); border-color: var(--hsrc-ochre); } .hsrc-row__spark { display: block; width: 44px; height: 18px; overflow: visible; } .hsrc-row__spark path { stroke: var(--gft-forest); stroke-opacity: .55; stroke-width: 1.3; } .hsrc-row__spark circle { fill: var(--hsrc-ochre); } .hsrc-row[data-active] .hsrc-row__spark path { stroke: var(--hsrc-ochre); stroke-opacity: 1; } .hsrc-row__where > a, .hsrc-row__where > span { min-height: 36px; } @media (max-width: 1000px) { .hsrc-lpips__hint, .hsrc-lmap__attr, .hsrc-row__spark { display: none; } .hsrc-lread { min-height: 3.4rem; align-content: center; } .hsrc-lmap__pub, .hsrc-lmap__flag { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; line-height: 1.4; } .hsrc-lmap__pub { grid-column: 2; } .hsrc-lmap__id { grid-row: 1 / span 2; } } /* ---------- 3. the cut thread: a live read-out as heavy as the tiles, and one asymmetric block of prose ---------- */ .hsrc-scrub--lt label { font-size: 17px; } .hsrc-scrub__ticks { font: 14px var(--gft-font-mono); } .hsrc-scrub input[type=range] { appearance: none; -webkit-appearance: none; background: transparent; min-height: 48px; } .hsrc-scrub input[type=range]::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: #6bb68f80; } .hsrc-scrub input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 28px; height: 28px; margin-top: -11px; border-radius: 50%; background: #e3a64a; border: 3px solid #f6f4ef; } .hsrc-scrub input[type=range]::-moz-range-track { height: 6px; border-radius: 3px; background: #6bb68f80; } .hsrc-scrub input[type=range]::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: #e3a64a; border: 3px solid #f6f4ef; } .hsrc-scrub input[type=range]:focus-visible { outline: 3px solid #fff; outline-offset: 4px; } .hsrc-gap__read { display: grid; gap: 10px; } .hsrc-gap__big { display: flex; align-items: baseline; gap: 18px; margin: 0; max-width: none; } .hsrc-gap__big strong { font-size: clamp(5rem, 10vw, 9rem); line-height: .9; font-weight: 850; letter-spacing: -.07em; color: var(--hsrc-amber); min-width: 1ch; } .hsrc-gap__big span { font: 14px/1.5 var(--gft-font-mono); letter-spacing: .08em; text-transform: uppercase; color: #e1eee6; max-width: 20ch; } .hsrc-gap[data-n='4'] .hsrc-gap__big strong { color: #8fdcb2; } .hsrc-gap__copy .hsrc-gap__lead { font-size: clamp(1.4rem, 2.3vw, 2.1rem); line-height: 1.3; font-weight: 700; letter-spacing: -.02em; color: #f6f4ef; max-width: 30ch; } .hsrc-gap__side { display: grid; gap: 16px; } .hsrc-gap__copy .hsrc-gap__side p { font-size: 16px; line-height: 1.6; color: rgba(255, 255, 255, .88); max-width: 52ch; } .hsrc-gap__copy .hsrc-gap__side .hsrc-gap__note { font: 14px/1.6 var(--gft-font-mono); color: #e1eee6; border-left: 3px solid var(--hsrc-amber); padding-left: 16px; } @media (min-width: 1001px) { .hsrc-gap__console { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); } .hsrc-gap__copy { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(28px, 6vw, 96px); } } /* ---------- 5. the pinned stage: wider panel, step cards layered over its edge, a readable rail ---------- */ .hsrc-steps { --hsrc-g: clamp(24px, 4vw, 72px); } .hsrc-rail a { font-size: 12px; color: rgba(255, 255, 255, .74); position: relative; } .hsrc-rail a::after { content: ''; position: absolute; left: 0; right: 14px; bottom: -14px; height: 3px; background: var(--hsrc-amber); transform: scaleX(0); transform-origin: left; transition: transform 420ms var(--m-out); } .hsrc-rail a:hover { color: #fff; } .hsrc-rail a:focus-visible { outline: 3px solid #fff; outline-offset: 2px; } .hsrc-rail b { display: grid; place-items: center; min-width: 34px; height: 34px; border: 1.5px solid #6bb68f99; border-radius: 50%; font-size: 14px; letter-spacing: 0; color: #d6e8de; transition: color 260ms, background-color 260ms, border-color 260ms; } .hsrc-steps[data-step='0'] [data-hsrc-r='0'] a::after, .hsrc-steps[data-step='1'] [data-hsrc-r='1'] a::after, .hsrc-steps[data-step='2'] [data-hsrc-r='2'] a::after, .hsrc-steps[data-step='3'] [data-hsrc-r='3'] a::after { transform: scaleX(1); } .hsrc-steps[data-step='0'] [data-hsrc-r='0'] b, .hsrc-steps[data-step='1'] [data-hsrc-r='1'] b, .hsrc-steps[data-step='2'] [data-hsrc-r='2'] b, .hsrc-steps[data-step='3'] [data-hsrc-r='3'] b { background: var(--hsrc-amber); border-color: var(--hsrc-amber); color: #072d2b; } .hsrc-tracer { fill: none; stroke: #f6f4ef; stroke-width: 3.4; stroke-linecap: round; stroke-opacity: .9; } .hsrc-tracer--amber { stroke: #e3a64a; } .hsrc-stepcard { position: relative; z-index: 3; background: var(--gft-paper); border-left: 4px solid #6bb68f; padding: clamp(20px, 2.2vw, 32px); box-shadow: 0 24px 60px #072d2b30; display: grid; gap: 14px; transition: border-color 420ms, box-shadow 420ms; } .mw-steps__track > [data-active] .hsrc-stepcard { border-left-color: #c98a2b; border-left-width: 8px; box-shadow: 0 30px 70px #072d2b45; } .hsrc-steps__track > li { padding-inline-start: 0; } .hsrc-steps__track > li::before, .hsrc-steps__track > li::after { content: none; } @media (min-width: 1001px) { .hsrc-steps { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); } .hsrc-s2__panel { padding-right: clamp(44px, 4vw, 60px); } .hsrc-s2__canvas svg { max-height: min(54svh, 480px); } .hsrc-s2 .hsrc-t { font-size: 15px; } .hsrc-s2 .hsrc-code { font-size: 20px; } .hsrc-s2 .hsrc-pub { font-size: 17px; } .hsrc-stepcard { margin-left: calc(var(--hsrc-g) * -1 - 36px); } } /* ---------- 6. boundaries: the tab bar and its stage share one screen ---------- */ .hsrc-sec--bounds { padding-top: clamp(40px, 5vw, 72px); } .hsrc-sec--bounds .gft-section__head { margin-bottom: 28px; } .hsrc-bounds { padding: clamp(18px, 2.2vw, 32px); gap: 20px; } .hsrc-bounds[data-js] .hsrc-panel__copy h3 { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .hsrc-panel { min-height: 0; } .hsrc-panel__stage .hsrc-t { font-size: 15px; } .hsrc-tabs__bar { bottom: -12px; } /* ---------- 7. three lanes on a dark band: a tracer travels lane to lane, each lane re-orders the cards ---------- */ .hsrc-strands__fig { background: var(--hsrc-night); border-color: #0c3f3b; color: #e8f3ec; padding: clamp(20px, 2.4vw, 36px); box-shadow: 0 30px 70px #072d2b33; } .hsrc-strand--0 path { stroke: #6bb68f; } .hsrc-strand--0 circle { fill: #6bb68f; } .hsrc-strand--1 path { stroke: #9fb0d8; } .hsrc-strand--1 circle { fill: #9fb0d8; } .hsrc-strand--2 path { stroke: #e3a64a; } .hsrc-strand--2 circle { fill: #e3a64a; } .hsrc-strand .hsrc-strand__tracer path { stroke: #fff; stroke-width: 4; stroke-linecap: round; stroke-opacity: .95; } .hsrc-gap-line { stroke: #e3a64a; } .hsrc-gate { stroke: #e8f3ec; opacity: .7; } .hsrc-gate-node { fill: #e3a64a; } .hsrc-strands__fig .hsrc-t--ink { fill: #e8f3ec; } .hsrc-strands__fig .hsrc-t--ochre { fill: #e3a64a; } .hsrc-strand__tracer > [data-m-live] { opacity: .1; } :root[data-m-go] .hsrc-strand__tracer > [data-m-live] { animation-name: hsrc-lane; animation-duration: 6s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-fill-mode: both; animation-delay: calc(var(--i) * 2s); animation-play-state: var(--m-play, paused); } .hsrc-strand__tracer { --i: 0; } @keyframes hsrc-lane { 0% { opacity: .1; } 8%, 30% { opacity: 1; } 40%, 100% { opacity: .1; } } .hsrc-strands[data-state='apart'] .hsrc-tr--join, .hsrc-strands[data-state='join'] .hsrc-tr--apart { display: none; } .hsrc-strands[data-lane='0'] .hsrc-strand:not(.hsrc-strand--0), .hsrc-strands[data-lane='1'] .hsrc-strand:not(.hsrc-strand--1), .hsrc-strands[data-lane='2'] .hsrc-strand:not(.hsrc-strand--2) { opacity: .2; } .hsrc-lanes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .hsrc-lane { --c: #6bb68f; display: grid; grid-template-columns: auto 1fr; grid-template-areas: 'i b' 'i s'; gap: 2px 12px; align-items: center; text-align: left; min-height: 68px; padding: 10px 14px; background: transparent; border: 1.5px solid #6bb68f66; color: #e8f3ec; transition: background-color 260ms, border-color 260ms; } .hsrc-lane--1 { --c: #9fb0d8; } .hsrc-lane--2 { --c: #e3a64a; } .hsrc-lane i { grid-area: i; width: 22px; height: 4px; background: var(--c); } .hsrc-lane b { grid-area: b; font: 700 15px var(--gft-font-display); } .hsrc-lane span { grid-area: s; font: 13px/1.4 var(--gft-font-display); color: #d6e8de; } .hsrc-lane:hover { background: #ffffff12; border-color: var(--c); } .hsrc-lane[aria-pressed='true'] { background: #ffffff1c; border-color: var(--c); } .hsrc-lane:focus-visible { outline: 3px solid #fff; outline-offset: 2px; } .hsrc-strands__toggle legend { color: #d6e8de; } .hsrc-card2 { transition: opacity 420ms var(--m-soft); } .hsrc-card2[data-dim] { opacity: .5; } .hsrc-strands__fig .hsrc-legend { display: none; } @media (max-width: 1000px) { .hsrc-lanes { grid-template-columns: 1fr; } } /* ---------- 8. the closing: the read-out, the full thread and the pills share one screen ---------- */ .hsrc-sec--close { padding-top: clamp(72px, 9svh, 112px); padding-bottom: clamp(72px, 9svh, 120px); } .hsrc-sec--close .gft-section__head { margin-bottom: 28px; } .hsrc-close { grid-template-columns: minmax(0, .72fr) minmax(0, 1.6fr); gap: clamp(20px, 3.4vw, 56px); } .hsrc-close__id { font-size: clamp(4.2rem, 8vw, 8rem); } .hsrc-close__pub { min-height: 2.2em; } .hsrc-close__note { font-size: 14px; } .hsrc-sec--close .gft-container { position: relative; } .hsrc-sec--close { border-bottom: 3px solid; border-image: linear-gradient(90deg, #072d2b 4%, #6bb68f 30%, #e3a64a 70%, #072d2b 96%) 1; } @media (max-width: 1000px) { .hsrc-close { grid-template-columns: 1fr; } } /* ===================================================================================================== Round 10. The ledgers become one operable, layered thread: a gutter thread and a tie from the active row to the sticky map, a hover read-out on every domain, a dark full-bleed interlude between the second and third stage, and a second ledger with its own grammar (a ribbon that picks the cut up at R23). Entrances differ by section. Animated properties: transform, opacity and clip-path only. Reduced motion and Calm stop all of it (rules above). ===================================================================================================== */ /* ---------- ledgers: shared gap, the gutter thread and the tie ---------- */ .hsrc-ledger { --hsrc-lgap: clamp(24px, 4vw, 72px); gap: var(--hsrc-lgap); } .hsrc-lstages { position: relative; } .hsrc-lgut, .hsrc-row__tie { display: none; } .hsrc-row[data-hit] { background: #c98a2b1c; } .hsrc-row[data-hit] .hsrc-row__id b { color: var(--hsrc-ochre); } .hsrc-row[data-hit]::after { transform: scaleX(1); } @media (min-width: 1001px) { .hsrc-ledger { gap: var(--hsrc-lgap); } .hsrc-lpanel { z-index: 3; box-shadow: 0 0 0 1px #6bb68f59, 0 30px 70px #072d2b2e; } .hsrc-lgut { display: block; position: absolute; top: 0; bottom: 0; left: calc(var(--hsrc-lgap) * -.5 - 1px); width: 2px; background: #0e4d4a29; z-index: 2; pointer-events: none; overflow-anchor: none; } .hsrc-ledger--flip .hsrc-lgut { left: auto; right: calc(var(--hsrc-lgap) * -.5 - 1px); } .hsrc-lgut__fill { position: absolute; inset: 0; background: linear-gradient(#c98a2b, #e3a64a); transform-origin: 50% 0; transform: scaleY(0); transition: transform 760ms var(--m-out); } .hsrc-lgut__node { position: absolute; left: 50%; top: -8px; width: 16px; height: 16px; margin-left: -8px; border-radius: 50%; background: #e3a64a; border: 3px solid var(--hsrc-bg); box-shadow: 0 0 0 1px #c98a2b; transform: translate3d(0, 0, 0); transition: transform 760ms var(--m-out); } .hsrc-row__tie { display: block; position: absolute; top: 50%; right: 100%; width: var(--hsrc-lgap); height: 2px; margin-top: -1px; background: linear-gradient(90deg, #e3a64a, #c98a2b); transform: scaleX(0); transform-origin: 100% 50%; transition: transform 520ms var(--m-out); pointer-events: none; } .hsrc-ledger--flip .hsrc-row__tie { right: auto; left: 100%; transform-origin: 0 50%; background: linear-gradient(90deg, #c98a2b, #e3a64a); } .hsrc-row[data-active] .hsrc-row__tie { transform: scaleX(1); } } /* ---------- the panel's domains answer a pointer ---------- */ .hsrc-bars li, .hsrc-lmap__list li { cursor: crosshair; } .hsrc-bars i { transition: transform 700ms var(--m-out) calc(var(--i) * 70ms + 200ms), background-color 260ms, opacity 260ms; } .hsrc-lpanel[data-hovering] .hsrc-bars li:not([data-hover]) i { opacity: .3; } .hsrc-bars li[data-hover], .hsrc-lmap__list li[data-hover] { color: #fff; } .hsrc-bars li[data-hover] i { background: #f6f4ef; } .hsrc-lmap__list li[data-hover] i { background: #f6f4ef; transform: scale(1.7); } .hsrc-lhover { margin: 0; max-width: none; min-height: 3em; padding-left: 12px; border-left: 3px solid var(--hsrc-amber); font: 13px/1.5 var(--gft-font-mono); color: #e1eee6; } @media (max-width: 1000px) { .hsrc-lhover { display: none; } } /* ---------- first ledger: rows wipe in from the thread side ---------- */ :root[data-m-go] .hsrc-ledger:not(.hsrc-ledger--flip) .hsrc-row[data-m-in] { animation-name: hsrc-row-wipe; animation-duration: 900ms; animation-timing-function: var(--m-out); } @keyframes hsrc-row-wipe { from { opacity: .2; clip-path: inset(0 100% 0 0); } 30% { opacity: 1; } to { opacity: 1; clip-path: inset(0 0 0 0); } } /* ---------- the interlude: a dark full-bleed band crossing behind the sticky map ---------- */ .hsrc-lband { position: relative; z-index: 1; color: #e8f3ec; padding-block: clamp(64px, 8vw, 112px); display: grid; gap: clamp(28px, 3.4vw, 44px); } .hsrc-lband::before { content: ''; position: absolute; top: 0; bottom: 0; left: -100vw; right: -100vw; background: var(--hsrc-night); clip-path: polygon(0 28px, 100% 0, 100% calc(100% - 28px), 0 100%); z-index: -1; pointer-events: none; } .hsrc-lband__copy { display: grid; gap: 12px; } .hsrc-lband .hsrc-kicker { color: #8fdcb2; } .hsrc-lband__big { font-size: clamp(1.6rem, 2.8vw, 2.6rem); font-weight: 820; letter-spacing: -.035em; line-height: 1.1; color: #f6f4ef; max-width: 22ch; } .hsrc-lband__sub { font-size: 16px; line-height: 1.6; color: #d6e8de; max-width: 56ch; } .hsrc-lband__nodes { list-style: none; margin: 0; padding: 0; position: relative; display: grid; grid-template-columns: repeat(var(--hsrc-n), minmax(0, 1fr)); align-items: end; row-gap: 22px; overflow: clip; } .hsrc-lband__nodes > li:not(.hsrc-lband__run) { position: relative; display: grid; justify-items: center; gap: 6px; } .hsrc-lband__nodes > li:not(.hsrc-lband__run)::before { content: ''; position: absolute; left: 0; right: 0; bottom: 30px; height: 2px; background: #6bb68f8c; } .hsrc-lband__fan { display: flex; gap: 3px; align-items: flex-end; height: 36px; } .hsrc-lband__fan i { display: block; width: 2px; height: 100%; background: #6bb68f; } .hsrc-lband__fan i + i { height: 72%; } .hsrc-lband__fan i + i + i { height: 50%; } .hsrc-lband__node { position: relative; z-index: 1; width: 12px; height: 12px; border-radius: 50%; background: var(--hsrc-night); border: 2px solid #6bb68f; } .hsrc-lband__nodes > li[data-f='1'] .hsrc-lband__node { background: var(--hsrc-amber); border-color: var(--hsrc-amber); box-shadow: 0 0 0 4px #e3a64a33; } .hsrc-lband__nodes > li[data-f='1'] .hsrc-lband__fan i { background: var(--hsrc-amber); } .hsrc-lband__nodes b { font: 400 12px/18px var(--gft-font-mono); color: #d6e8de; } .hsrc-lband__run { position: absolute; left: 0; right: 0; bottom: 28px; height: 6px; z-index: 2; background: linear-gradient(90deg, transparent calc(100% - 140px), #e3a64a calc(100% - 6px), transparent 100%); transform: translateX(-100%); pointer-events: none; overflow-anchor: none; } .hsrc-lband__run[data-m-live~=shuttle][data-m-on] { animation-name: hsrc-run; animation-duration: 5.6s; animation-timing-function: cubic-bezier(.45, 0, .55, 1); animation-iteration-count: infinite; animation-direction: normal; } @keyframes hsrc-run { from { transform: translateX(-100%); } to { transform: translateX(100%); } } :root[data-m-go] .hsrc-lband[data-m-in] .hsrc-lband__nodes > li:not(.hsrc-lband__run) { animation-name: hsrc-node-in; animation-duration: 640ms; animation-timing-function: var(--m-out); animation-delay: calc(var(--i, 0) * 13ms + 160ms); animation-fill-mode: backwards; animation-iteration-count: 1; animation-direction: normal; } @keyframes hsrc-node-in { from { opacity: 0; transform: translateY(-22px); } } @media (max-width: 640px) { .hsrc-lband__nodes { grid-template-columns: repeat(9, minmax(0, 1fr)); } .hsrc-lband__run { display: none; } .hsrc-lband::before { clip-path: polygon(0 16px, 100% 0, 100% calc(100% - 16px), 0 100%); } } /* ---------- second ledger: its own grammar. The map rises beside the heading as a ribbon from the cut ---------- */ .hsrc-lnote { font-size: clamp(1.05rem, 1.35vw, 1.25rem); line-height: 1.6; max-width: 52ch; color: var(--ink); margin: 0; } .hsrc-rib { border-top: 1px solid #6bb68f55; padding-top: 12px; } .hsrc-rib__list { list-style: none; margin: 0; padding: 0; display: grid; } .hsrc-rib__list li { position: relative; display: grid; grid-template-columns: 22px 3.6em minmax(0, 1fr); align-items: center; gap: 10px; min-height: 26px; font: 13px var(--gft-font-mono); color: #b8d6c6; transition: color 300ms; } .hsrc-rib__list li::before { content: ''; position: absolute; left: 10px; top: 0; bottom: 0; width: 2px; background: #6bb68f66; } .hsrc-rib__list li:last-child::before { bottom: 50%; } .hsrc-rib__list li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hsrc-rib__list li i { position: relative; z-index: 1; justify-self: center; width: 11px; height: 11px; border-radius: 50%; border: 2px solid #6bb68f; background: var(--hsrc-night); transition: transform 360ms var(--m-out), background-color 300ms, border-color 300ms; } .hsrc-rib__list li[data-f='1'] i { border-color: var(--hsrc-amber); } .hsrc-rib__list li[data-lit] { color: #e1eee6; } .hsrc-rib__list li[data-lit] i { background: #6bb68f; } .hsrc-rib__list li[data-lit][data-f='1'] i { background: var(--hsrc-amber); } .hsrc-rib__list li[data-on] { color: #fff; } .hsrc-rib__list li[data-on] b { color: var(--hsrc-amber); } .hsrc-rib__list li[data-on] i { transform: scale(1.55); background: var(--hsrc-amber); border-color: #f6f4ef; } .hsrc-rib__list .hsrc-rib__cut { color: #e1eee6; grid-template-columns: 22px auto minmax(0, 1fr); min-height: 34px; } .hsrc-rib__list .hsrc-rib__cut::before { background: repeating-linear-gradient(#e3a64a 0 5px, transparent 5px 10px); } .hsrc-rib__list .hsrc-rib__cut i { border: 2px dashed var(--hsrc-amber); border-radius: 0; background: var(--hsrc-night); } .hsrc-rib__key { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 10px 0 0; max-width: none; font: 12px var(--gft-font-mono); color: #d6e8de; } .hsrc-rib__key i { display: inline-block; width: 9px; height: 9px; margin-right: 8px; border-radius: 50%; border: 2px solid #6bb68f; vertical-align: -1px; } .hsrc-rib__key i[data-f='1'] { border-color: var(--hsrc-amber); background: var(--hsrc-amber); } :root[data-m-go] .hsrc-lpanel[data-m=ply][data-m-in] { animation-name: hsrc-panel-draw; animation-duration: 900ms; animation-timing-function: var(--m-out); } @keyframes hsrc-panel-draw { from { opacity: 0; clip-path: inset(0 0 100% 0); } 25% { opacity: 1; } to { opacity: 1; clip-path: inset(0 0 0 0); } } :root[data-m-go] .hsrc-lpanel[data-m-in] .hsrc-rib__list li { animation-name: hsrc-rib-in; animation-duration: 560ms; animation-timing-function: var(--m-out); animation-delay: calc(var(--i, -1) * 22ms + 180ms); animation-fill-mode: backwards; animation-iteration-count: 1; animation-direction: normal; } @keyframes hsrc-rib-in { from { opacity: 0; transform: translateX(22px); } } :root[data-m-go] .hsrc-ledger--flip .hsrc-row[data-m-in] { animation-name: hsrc-row-slide; animation-duration: 860ms; animation-timing-function: var(--m-out); } @keyframes hsrc-row-slide { from { opacity: 0; transform: translateX(64px); } 35% { opacity: 1; } } :root[data-m-go] #hubs-sources-ledger-b[data-m-in] .gft-section__head h2 { animation-name: hsrc-lines; animation-duration: 880ms; animation-delay: 80ms; animation-timing-function: var(--m-out); animation-fill-mode: backwards; animation-iteration-count: 1; animation-direction: normal; } @keyframes hsrc-lines { 0% { clip-path: inset(0 0 100% 0); transform: translateY(18px); } 48% { clip-path: inset(0 0 50% 0); transform: translateY(8px); } 100% { clip-path: inset(-10% 0 -14% 0); transform: none; } } @media (min-width: 1001px) { .hsrc-sec--ledger-b .gft-container { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(340px, .9fr); column-gap: clamp(24px, 4vw, 72px); align-items: start; } .hsrc-sec--ledger-b .gft-section__head { grid-column: 1; grid-row: 1; grid-template-columns: 1fr; margin-bottom: 36px; } .hsrc-ledger--ribbon { display: contents; } .hsrc-ledger--ribbon .hsrc-lpanel { grid-column: 2; grid-row: 1 / span 2; order: 0; } .hsrc-ledger--ribbon .hsrc-lstages { grid-column: 1; grid-row: 2; } } @media (max-width: 1000px) { .hsrc-rib { display: none; } } /* ---------- the gap: four hollow boxes drop onto the cut thread ---------- */ :root[data-m-go] .hsrc-gap__nodes[data-m=spin][data-m-in] { animation-name: hsrc-fade; animation-duration: 420ms; } @keyframes hsrc-fade { from { opacity: .28; } } :root[data-m-go] .hsrc-gap__nodes[data-m-in] > li { animation-name: hsrc-drop; animation-duration: 820ms; animation-timing-function: cubic-bezier(.2, 1.2, .4, 1); animation-delay: calc(var(--i, 0) * 70ms); animation-fill-mode: backwards; animation-iteration-count: 1; animation-direction: normal; } @keyframes hsrc-drop { from { opacity: 0; transform: translateY(-96px) rotate(-5deg); } 60% { opacity: 1; } } /* ---------- the pinned stage: a wider diagram, cards layered further over it, a ruled field and a margin thread (static: a scroll-linked field measured as TREMBLE in Chromium) ---------- */ .hsrc-sec--stage { isolation: isolate; } .hsrc-s2rule { position: absolute; inset: 0; z-index: -1; overflow: clip; pointer-events: none; } .hsrc-s2rule__lines { position: absolute; inset: 0; background-image: repeating-linear-gradient(0deg, #0e4d4a17 0 1px, transparent 1px 48px), repeating-linear-gradient(90deg, #0e4d4a10 0 1px, transparent 1px 192px); overflow-anchor: none; } .hsrc-s2rule__thread { position: absolute; top: 0; bottom: 0; right: clamp(16px, 2.2vw, 36px); width: 2px; background: linear-gradient(#c98a2b00, #c98a2b 10%, #c98a2b 90%, #c98a2b00); opacity: .6; } .hsrc-s2rule__thread::after { content: ''; position: absolute; left: -7px; top: 0; width: 16px; height: 100%; background: radial-gradient(circle at 8px 8px, #e3a64a 6px, #f6f4ef 6.5px, #f6f4ef 8px, transparent 8.5px) no-repeat; transform: translateY(calc(var(--hsrc-p, .25) * 88% - 8%)); transition: transform 760ms var(--m-out); overflow-anchor: none; } @media (min-width: 1001px) { .hsrc-steps { grid-template-columns: minmax(0, 2.5fr) minmax(0, 1fr); } .hsrc-s2__panel { padding-right: clamp(96px, 8vw, 124px); } .hsrc-s2__canvas svg { max-height: min(58svh, 520px); } .hsrc-stepcard { margin-left: calc(var(--hsrc-g) * -1 - clamp(80px, 7vw, 104px)); } .hsrc-rail b { min-width: 44px; height: 44px; font-size: 16px; } .hsrc-rail a { font-size: 13px; } } /* ---------- boundaries: chart labels sit on a halo, so a moving line never runs through a word ---------- */ .hsrc-halo text { paint-order: stroke; stroke: #0c3f3b; stroke-width: 6px; stroke-linejoin: round; }