/* Type in motion (assets/js/type.js) and the typography under it. Every motion here is one an engineer does: a heading
   set out in pencil and inked, a label settling on a reading, a paragraph scanned, a link dimensioned, a card selected
   with its grips, a big heading deflecting under the load of a fast scroll, the site opened as a register of sheets.
   Durations, easings, colours and spacing are the kit's tokens. Reduced motion keeps every word still and in place. */

@property --tm-ink { syntax: '<number>'; inherits: true; initial-value: 1; }
@property --tm-scan { syntax: '<percentage>'; inherits: true; initial-value: 128%; }

/* ---------- The type itself ---------- */
body { font-kerning: normal; font-variant-ligatures: common-ligatures contextual; }
:is(h1, h2, h3) { hanging-punctuation: first; }
:is(p, li, dd, figcaption) { text-wrap: pretty; }
::selection { background: var(--ice); color: var(--ink); }
.tm-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Before the type module runs, the page head waits a moment rather than appearing and then being set out; if the
   module never runs it appears on its own. */
html.js:not(.is-still):not(.tm-on) :is(.phead__h, .phead__lead) { opacity: 0; animation: tm-safe 0s linear 2.4s forwards; }
@keyframes tm-safe { to { opacity: 1; } }

/* ---------- Set-out: pencil, then ink ---------- */
.tm-h { position: relative; }
.tm-w, .tm-wi { display: inline-block; }
.tm-h:is(.tm-wait, .tm-run) .tm-w { clip-path: inset(-0.4em -0.3em -0.14em -0.3em); }
.tm-h.tm-wait .tm-wi { translate: 0 150%; }
.tm-h.tm-run .tm-ink {
  color: color-mix(in srgb, currentColor calc(var(--tm-ink) * 100%), transparent);
  -webkit-text-stroke: var(--stroke-hair) color-mix(in srgb, var(--ink-faint) calc((1 - var(--tm-ink)) * 100%), transparent);
  paint-order: stroke fill;
}
/* The construction line, with a setting-out peg at each end. */
.tm-rule { position: absolute; height: var(--stroke-hair); background: var(--ink-faint); transform-origin: left center; opacity: 0; pointer-events: none; }
[dir="rtl"] .tm-rule { transform-origin: right center; }
.tm-rule::before, .tm-rule::after { content: ''; position: absolute; top: calc(-1 * var(--space-1)); width: var(--stroke-hair); height: var(--space-2); background: inherit; }
.tm-rule::before { left: 0; }
.tm-rule::after { right: 0; }

/* ---------- Deflection: the words of a big heading share the mid-span sag of a fast scroll ---------- */
.tm-defl .tm-w, #statement h1 .w { transform: translateY(calc(var(--tm-sag, 0) * var(--k, 0) * 1px)); }

/* ---------- Scan: a read head travels down the lead ---------- */
.tm-scan { position: relative; }
.tm-scan:is(.tm-wait, .tm-run) {
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(var(--tm-scan) - 18%), transparent var(--tm-scan));
  mask-image: linear-gradient(to bottom, #000 calc(var(--tm-scan) - 18%), transparent var(--tm-scan));
}
.tm-scan.tm-wait { --tm-scan: 0%; }
.tm-scan::after { content: ''; position: absolute; inset-inline: calc(-1 * var(--space-2)); top: calc(var(--tm-scan) - 18%); height: var(--stroke-hair); background: var(--laser); opacity: 0; pointer-events: none; }

/* ---------- Roll: a button's label turns over like a readout updating ---------- */
.tm-roll { display: inline-flex; overflow: hidden; padding-block: 0.15em; margin-block: -0.15em; }
.tm-r { display: inline-block; white-space: pre; text-shadow: 0 1.45em currentColor; transition: translate var(--dur-move) var(--ease-instrument); transition-delay: calc(var(--dur-tick) / 8 * var(--ri, 0)); }
a.ei-btn:is(:hover, :focus-visible) .tm-r { translate: 0 -1.45em; }

/* ---------- Dimension lines: a link pointed at is dimensioned, end tick to end tick ---------- */
:is(.nav a, .ftr__nav > a, .lang, .card__go) { position: relative; text-decoration: none; }
:is(.nav a, .ftr__nav > a, .lang, .card__go)::after {
  content: ''; position: absolute; inset-inline: 0; bottom: calc(-1 * var(--space-2)); height: var(--space-2);
  border-inline: var(--stroke-hair) solid currentColor;
  background: linear-gradient(currentColor, currentColor) center / 100% var(--stroke-hair) no-repeat;
  transform: scaleX(0); transition: transform var(--dur-move) var(--ease-instrument); pointer-events: none;
}
:is(.nav a, .ftr__nav > a, .lang):is(:hover, :focus-visible)::after, :is(.card--link, .report-card):is(:hover, :focus-visible) .card__go::after { transform: scaleX(1); }
.nav a[aria-current="page"] { text-decoration: none; color: var(--ink); }
.nav a[aria-current="page"]::after { transform: scaleX(1); color: var(--ice-ink); }
.card__go { justify-self: start; }
.card__go [aria-hidden="true"] { display: inline-block; transition: translate var(--dur-move) var(--ease-instrument); }
:is(.card--link, .report-card):is(:hover, :focus-visible) .card__go [aria-hidden="true"] { translate: var(--space-1) 0; }
[dir="rtl"] :is(.card--link, .report-card):is(:hover, :focus-visible) .card__go [aria-hidden="true"] { translate: calc(-1 * var(--space-1)) 0; }

/* ---------- Grips: a card that opens is selected, as in a drawing ---------- */
:is(.card--link, .tc, .report-card) { position: relative; }
.tc { overflow: visible; }
.tc__fig { border-radius: var(--radius-1) var(--radius-1) 0 0; }
:is(.card--link, .tc, .report-card):hover { outline: var(--stroke-hair) dashed var(--ice-ink); outline-offset: calc(-1 * var(--stroke-hair)); }
.tm-grip { position: absolute; z-index: 2; width: var(--space-2); height: var(--space-2); margin: calc(-1 * var(--space-1)); background: var(--ice); border: var(--stroke-hair) solid var(--ice-ink); scale: 0; transition: scale var(--dur-tick) var(--ease-instrument); transition-delay: calc(var(--dur-tick) / 4 * var(--gi, 0)); pointer-events: none; }
.tm-grip--tl { top: 0; left: 0; } .tm-grip--tr { top: 0; right: 0; } .tm-grip--br { bottom: 0; right: 0; } .tm-grip--bl { bottom: 0; left: 0; }
:is(.card--link, .tc, .report-card):is(:hover, :focus-visible) .tm-grip { scale: 1; }

/* ---------- Chainage: how far down the sheet you are, along the header's section line ---------- */
.hdr__chain { position: absolute; left: 0; right: 0; bottom: calc(-1 * var(--stroke-hair)); height: var(--stroke-hair); background: var(--ice-ink); transform: scaleX(0); transform-origin: left center; pointer-events: none; }
[dir="rtl"] .hdr__chain { transform-origin: right center; }
@supports (animation-timeline: scroll()) { .hdr__chain { animation: tm-chain linear both; animation-timeline: scroll(root block); } }
@keyframes tm-chain { to { transform: scaleX(1); } }

/* ---------- The register of sheets (phones): the header's links folded into one button ---------- */
.reg-btn { display: none; }
@media (max-width: 859px) {
  .reg-btn { all: unset; box-sizing: border-box; display: inline-grid; place-items: center; width: calc(var(--space-8) + var(--space-1)); height: calc(var(--space-8) + var(--space-1)); border: var(--stroke-hair) solid var(--line-strong); border-radius: var(--radius-1); color: var(--ink); cursor: pointer; transition: border-color var(--dur-tick) var(--ease-instrument); }
  .reg-btn:hover, .reg-btn[aria-expanded="true"] { border-color: var(--ink); }
  .reg-btn:focus-visible { outline: var(--stroke-focus) solid var(--focus); outline-offset: 2px; }
  .hdr__end { gap: var(--space-3); }
}
.reg-btn svg { width: var(--space-4); height: var(--space-4); overflow: visible; }
.reg-btn path { fill: none; stroke: currentColor; stroke-width: var(--stroke-rule); transform-box: fill-box; transform-origin: center; transition: transform var(--dur-move) var(--ease-instrument), opacity var(--dur-tick) var(--ease-instrument); }
.reg-btn[aria-expanded="true"] .reg-btn__a { transform: translateY(5px) rotate(45deg); }
.reg-btn[aria-expanded="true"] .reg-btn__b { opacity: 0; }
.reg-btn[aria-expanded="true"] .reg-btn__c { transform: translateY(-5px) rotate(-45deg); }
.reg { position: fixed; inset: var(--hdr-h) 0 0 0; z-index: 9; background: var(--surface-000); overflow-y: auto; overscroll-behavior: contain; animation: tm-reg-in var(--dur-move) var(--ease-instrument) both; }
.reg[hidden] { display: none; }
@keyframes tm-reg-in { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
.reg__in { display: grid; gap: var(--space-6); padding-block: var(--space-8) var(--space-12); }
.reg__label { margin: 0; font: 500 11px/1.2 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-muted); }
.reg__list { display: grid; border-top: var(--stroke-hair) solid var(--line); }
.reg__row { display: grid; grid-template-columns: max-content minmax(0, 1fr) auto; align-items: baseline; gap: var(--space-4); padding-block: var(--space-4); border-bottom: var(--stroke-hair) solid var(--line); color: var(--ink); text-decoration: none; }
.reg__row:focus-visible { outline: var(--stroke-focus) solid var(--focus); outline-offset: 2px; }
.reg__no { font: 500 11px/1.2 var(--font-mono); letter-spacing: 0.12em; font-variant-numeric: tabular-nums; color: var(--ink-faint); }
.reg__row[aria-current="page"] .reg__no { color: var(--laser-ink); }
.reg__t { font: 600 clamp(28px, 8vw, 40px)/1.05 var(--font-sans); letter-spacing: -0.02em; }
.reg__go { color: var(--ink-faint); transition: translate var(--dur-move) var(--ease-instrument), color var(--dur-tick) var(--ease-instrument); }
.reg__row:hover .reg__go { color: var(--ink); translate: var(--space-1) 0; }
[dir="rtl"] .reg__row:hover .reg__go { translate: calc(-1 * var(--space-1)) 0; }
.reg__end { display: flex; flex-wrap: wrap; gap: var(--space-3); }
html.reg-open { overflow: hidden; }

/* ---------- Reduced motion: everything in place, nothing moving ---------- */
html.is-still .tm-r, html.is-still .tm-grip, html.is-still .card__go [aria-hidden="true"], html.is-still :is(.nav a, .ftr__nav > a, .lang, .card__go)::after { transition: none; }
html.is-still a.ei-btn:is(:hover, :focus-visible) .tm-r { translate: none; }
html.is-still .hdr__chain { display: none; }
html.is-still .reg { animation: none; }
html.is-still .reg-btn path, html.is-still .reg__go { transition: none; }