/* GFT tokens v1 (frozen 2026-10-30 by the orchestrator; superseded by ROOT/brand/tokens.css when the brand lane lands). Sampled from the GFT textile programme PDFs; ochre and indigo added with a material reason (see RULES.md). */ :root { --gft-night: #072d2b; --gft-deep: #0a3d3a; --gft-forest: #0e4d4a; --gft-leaf: #3f8f6b; --gft-sage: #6bb68f; --gft-mist: #e2ebe6; --gft-sand: #ece8df; --gft-paper: #f6f4ef; --gft-cotton: #ffffff; --gft-ink: #25302e; --gft-ink-2: #33403d; --gft-ochre: #c98a2b; --gft-indigo: #2c3e7a; --gft-font-display: "Inter", system-ui, sans-serif; --gft-font-serif: "Playfair Display", Georgia, serif; --gft-font-mono: "JetBrains Mono", ui-monospace, monospace; --gft-ease-out: cubic-bezier(.16, 1, .3, 1); --gft-ease-in-out: cubic-bezier(.65, 0, .35, 1); --gft-ease-thread: cubic-bezier(.22, .9, .18, 1); --gft-dur-xs: 180ms; --gft-dur-s: 420ms; --gft-dur-m: 720ms; --gft-dur-entrance: 860ms; } /* Generated by scripts/gft_palette.py. Frozen core/type/motion: control/tokens-v1.css. */ :root { --gft-night: #072d2b; --gft-deep: #0a3d3a; --gft-forest: #0e4d4a; --gft-leaf: #3f8f6b; --gft-sage: #6bb68f; --gft-mist: #e2ebe6; --gft-sand: #ece8df; --gft-paper: #f6f4ef; --gft-cotton: #ffffff; --gft-ink: #25302e; --gft-ink-2: #33403d; --gft-ochre: #c98a2b; --gft-indigo: #2c3e7a; --gft-forest-50: #f5f7f7; --gft-forest-100: #e9eeed; --gft-forest-200: #cfdad9; --gft-forest-300: #b4c5c3; --gft-forest-400: #99b0ae; --gft-forest-500: #7c9997; --gft-forest-600: #5e8280; --gft-forest-700: #396764; --gft-forest-800: #0e4d4a; --gft-forest-900: #083836; --gft-forest-950: #032221; --gft-indigo-50: #f5f7fa; --gft-indigo-100: #eaedf3; --gft-indigo-200: #d2d7e5; --gft-indigo-300: #b8c1d6; --gft-indigo-400: #9faac7; --gft-indigo-500: #8391b6; --gft-indigo-600: #6979a5; --gft-indigo-700: #495b8f; --gft-indigo-800: #2c3e7a; --gft-indigo-900: #1f2c5b; --gft-indigo-950: #111a3a; --gft-ochre-50: #fbf6ef; --gft-ochre-100: #f6ebdd; --gft-ochre-200: #ecd3b5; --gft-ochre-300: #e0b989; --gft-ochre-400: #d4a05b; --gft-ochre-500: #c98a2b; --gft-ochre-600: #a26e21; --gft-ochre-700: #7d5417; --gft-ochre-800: #61400f; --gft-ochre-900: #422b08; --gft-ochre-950: #291903; --gft-leaf-50: #f3f8f5; --gft-leaf-100: #e6f0ea; --gft-leaf-200: #c8ded2; --gft-leaf-300: #a8cab8; --gft-leaf-400: #88b79f; --gft-leaf-500: #63a283; --gft-leaf-600: #3f8f6b; --gft-leaf-700: #2e6b50; --gft-leaf-800: #21533c; --gft-leaf-900: #143828; --gft-leaf-950: #0a2217; --gft-cat-1: #0e4d4a; --gft-cat-2: #2c3e7a; --gft-cat-3: #c98a2b; --gft-cat-4: #3f8f6b; --gft-cat-5: #edd3fa; --gft-cat-6: #772e02; --gft-cat-7: #d4ea8d; --gft-cat-8: #877fe6; --gft-seq-forest-1: #f5f7f7; --gft-seq-forest-2: #e9eeed; --gft-seq-forest-3: #cfdad9; --gft-seq-forest-4: #b4c5c3; --gft-seq-forest-5: #99b0ae; --gft-seq-forest-6: #7c9997; --gft-seq-forest-7: #5e8280; --gft-seq-forest-8: #396764; --gft-seq-forest-9: #0e4d4a; --gft-seq-forest-10: #083836; --gft-seq-forest-11: #032221; --gft-seq-indigo-1: #f5f7fa; --gft-seq-indigo-2: #eaedf3; --gft-seq-indigo-3: #d2d7e5; --gft-seq-indigo-4: #b8c1d6; --gft-seq-indigo-5: #9faac7; --gft-seq-indigo-6: #8391b6; --gft-seq-indigo-7: #6979a5; --gft-seq-indigo-8: #495b8f; --gft-seq-indigo-9: #2c3e7a; --gft-seq-indigo-10: #1f2c5b; --gft-seq-indigo-11: #111a3a; --gft-div-1: #422b08; --gft-div-2: #7d5417; --gft-div-3: #c98a2b; --gft-div-4: #e0b989; --gft-div-5: #f6ebdd; --gft-div-6: #f6f4ef; --gft-div-7: #e9eeed; --gft-div-8: #b4c5c3; --gft-div-9: #7c9997; --gft-div-10: #396764; --gft-div-11: #083836; --gft-font-display: "Inter", system-ui, sans-serif; --gft-font-serif: "Playfair Display", Georgia, serif; --gft-font-mono: "JetBrains Mono", ui-monospace, monospace; --gft-ease-out: cubic-bezier(.16, 1, .3, 1); --gft-ease-in-out: cubic-bezier(.65, 0, .35, 1); --gft-ease-thread: cubic-bezier(.22, .9, .18, 1); --gft-dur-xs: 180ms; --gft-dur-s: 420ms; --gft-dur-m: 720ms; --gft-dur-entrance: 860ms; --gft-weight-display: 850; --gft-weight-body: 400; --gft-weight-ui: 600; --gft-figure-variant: tabular-nums lining-nums; } /* Apply figure variants explicitly to data containers; categorical charts also require shapes/hatches. */ .gft-data, .gft-figure, .gft-table { font-variant-numeric: tabular-nums lining-nums; } @media (prefers-reduced-motion: reduce) { :root { --gft-dur-xs: 0ms; --gft-dur-s: 0ms; --gft-dur-m: 0ms; --gft-dur-entrance: 0ms; } } @font-face{font-family:Inter;src:url('/fonts/inter-latin.woff2') format('woff2');font-style:normal;font-weight:100 900;font-display:optional} @font-face{font-family:'Inter Fallback';src:local('Arial');size-adjust:107.4%;ascent-override:90.2%;descent-override:22.48%;line-gap-override:0%} @font-face{font-family:'Playfair Display';src:url('/fonts/playfair-italic-latin.woff2') format('woff2');font-style:italic;font-weight:400;font-display:optional} @font-face{font-family:'Playfair Fallback';src:local('Georgia Italic');size-adjust:104%;ascent-override:100%;descent-override:25%;line-gap-override:0%} @font-face{font-family:'JetBrains Mono';src:url('/fonts/jetbrains-latin.woff2') format('woff2');font-style:normal;font-weight:400;font-display:optional} @font-face{font-family:'JetBrains Fallback';src:local('Courier New');size-adjust:100%;ascent-override:100%;descent-override:30%;line-gap-override:0%} :root{--gft-font-display:Inter,'Inter Fallback',Arial,sans-serif;--gft-font-serif:'Playfair Display','Playfair Fallback',Georgia,serif;--gft-font-mono:'JetBrains Mono','JetBrains Fallback',monospace} @view-transition{navigation:auto} *{box-sizing:border-box}html{scrollbar-gutter:stable;color-scheme:light;scroll-padding-top:6rem}body{margin:0;background:var(--gft-paper);color:var(--gft-ink);font-family:var(--gft-font-display);font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums}h1,h2,h3,p,figure{margin:0}h1,h2,h3{font-weight:850;letter-spacing:-.055em;line-height:1.04;text-wrap:balance}p{max-width:64ch;text-wrap:pretty}h2{font-size:clamp(2.4rem,5vw,5.2rem)}h3{font-size:clamp(1.3rem,2vw,1.9rem);letter-spacing:-.035em}a{color:inherit;text-decoration-thickness:1px;text-underline-offset:.25em}button,input,select{font:inherit}button,a,input,summary{touch-action:manipulation}button{cursor:pointer}button:disabled{cursor:default}a,button,summary,input{outline-offset:5px}a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible{outline:3px solid var(--gft-ochre)}::selection{background:var(--gft-sage);color:var(--gft-night)}svg{max-width:100%;display:block}button{color:inherit}input[type=range]{accent-color:var(--gft-forest);min-height:44px}input[type=number]{font-family:var(--gft-font-mono);font-variant-numeric:tabular-nums}section{scroll-margin-top:6rem}main{min-height:70vh}.gft-container{width:min(1440px,calc(100% - 96px));margin-inline:auto}.gft-eyebrow{display:flex;align-items:center;gap:12px;font-family:var(--gft-font-mono);font-size:12px;letter-spacing:.12em;line-height:1.6;text-transform:uppercase}.gft-eyebrow::before{content:'';width:22px;height:1px;background:currentColor}.gft-serif{font-family:var(--gft-font-serif);font-weight:400;font-style:italic;letter-spacing:-.03em}.gft-mono{font-family:var(--gft-font-mono);font-size:.77rem}.gft-muted{color:#5e6d67}.gft-lede{font-size:clamp(1.1rem,1.5vw,1.4rem);line-height:1.6}.gft-button{display:inline-flex;align-items:center;justify-content:space-between;gap:32px;min-height:50px;padding:12px 20px;border:1px solid var(--gft-forest);text-decoration:none;background:var(--gft-forest);color:white;font-size:13px;font-weight:600;letter-spacing:.01em}.gft-button::after{content:'↗';font-size:20px;font-weight:400}.gft-button--light{background:var(--gft-paper);color:var(--gft-night);border-color:var(--gft-paper)}.gft-button--ghost{background:transparent;color:inherit;border-color:currentColor}.gft-actions{display:flex;gap:16px;flex-wrap:wrap;align-items:center}.gft-sr,.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip-path:inset(50%)!important;white-space:nowrap!important;border:0!important}.gft-skip{position:fixed;z-index:200;top:8px;left:8px;padding:12px;background:var(--gft-paper);color:var(--gft-night);transform:translateY(-160%)}.gft-skip:focus{transform:none}.gft-rule{border:0;border-top:1px solid #c7d0c8;margin:0}.gft-text-link{display:inline-flex;gap:24px;align-items:center;min-height:44px;font-size:13px;font-weight:650}.gft-number{font-variant-numeric:tabular-nums;letter-spacing:-.07em}.gft-grid{display:grid;gap:36px;grid-template-columns:repeat(3,minmax(0,1fr))}.gft-prose{max-width:72ch;font-size:1.05rem}.gft-prose>*+*{margin-top:1.2rem}.gft-prose h2{font-size:2.5rem}.gft-prose h3{font-size:1.6rem}.gft-section{position:relative;padding-block:clamp(64px,9vw,136px)}.gft-section__head{display:grid;grid-template-columns:1fr 1.1fr;gap:40px;margin-bottom:56px;align-items:end}.gft-section__head .gft-eyebrow{margin-bottom:24px}.gft-section__rail{position:absolute;inset:0 auto 0 0;width:3px;background:var(--gft-sage);opacity:.65;pointer-events:none;transform-origin:top}.gft-section--dark{background:var(--gft-night);color:var(--gft-paper)}.gft-section--dark .gft-muted{color:#b4c7bd}.gft-section--sage{background:#e2ebe6}.gft-section__seam{height:32px;position:absolute;bottom:-16px;left:50%;width:1px;background:var(--gft-sage);z-index:2}.gft-card{padding:30px;border:1px solid #c6d1c9;min-width:0}.gft-card h3{margin:20px 0 14px}.gft-card p{font-size:.94rem}.gft-card__line{height:1px;background:var(--gft-leaf);width:48px;margin-top:36px}.gft-card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.gft-note{font-family:var(--gft-font-mono);font-size:12px;line-height:1.8;color:#5b6d62}.gft-section--dark .gft-note{color:#b4c7bd}dialog{max-width:min(680px,calc(100vw - 32px));width:100%;background:var(--gft-paper);color:var(--gft-night);padding:32px;border:1px solid var(--gft-sage)}dialog::backdrop{background:#072d2bcc}dialog button{min-height:44px;padding:8px 16px}dialog input{width:100%;padding:14px;border:1px solid #9bad9f;margin-block:24px}dialog .pagefind-ui__search-input{font-size:16px}dialog .pagefind-ui__result{margin-bottom:24px}.gft-popover{position:fixed;inset:auto 24px 24px auto;max-width:min(470px,calc(100vw - 48px));padding:28px;border:1px solid var(--gft-sage);background:var(--gft-paper);color:var(--gft-night);font-size:14px;box-shadow:0 12px 60px #072d2b33}.gft-popover h3{font-size:18px;letter-spacing:-.02em;margin-bottom:12px}.gft-popover p+p{margin-top:12px}.gft-cite{display:inline-flex;min-height:44px;align-items:center;padding:4px 8px;vertical-align:middle;border:1px solid currentColor;background:transparent;font:12px var(--gft-font-mono);letter-spacing:0}.gft-popover button{margin-top:14px;background:var(--gft-forest);color:white;border:0;padding:8px 14px;min-height:44px}.gft-breadcrumbs{display:flex;gap:12px;align-items:center;flex-wrap:wrap;font:12px var(--gft-font-mono);padding-block:24px}.gft-breadcrumbs a{min-height:44px;display:inline-flex;align-items:center}.gft-table-wrap{overflow-x:auto}.gft-table{border-collapse:collapse;width:100%;min-width:500px}.gft-table th,.gft-table td{padding:18px;text-align:left;border-bottom:1px solid #c6d1c9;font-size:14px}.gft-table th{font:12px var(--gft-font-mono);text-transform:uppercase}.gft-timeline{list-style:none;padding:0;margin:0;display:grid;gap:0}.gft-timeline li{display:grid;grid-template-columns:140px 1fr;gap:32px;padding:28px 0;border-top:1px solid #c6d1c9}.gft-timeline strong{font:12px var(--gft-font-mono)}.gft-timeline h3{margin-bottom:12px}.gft-exergue{font:italic clamp(2.3rem,5vw,5rem)/1.2 var(--gft-font-serif);max-width:20ch;padding-block:28px}.gft-callout{border-left:3px solid var(--gft-ochre);padding:24px 32px;background:#ece8df}.gft-callout h3{margin-bottom:12px}.gft-exhibit{border-block:1px solid #b8c8bd;padding-block:28px}.gft-exhibit figcaption{font:12px/1.8 var(--gft-font-mono);margin-top:24px}.gft-keyfigures{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-block:1px solid #ffffff29}.gft-keyfigure{padding:32px 28px 32px 0}.gft-keyfigure+.gft-keyfigure{border-left:1px solid #ffffff29;padding-left:28px}.gft-keyfigure__value{font-size:clamp(3rem,7vw,7.5rem);font-weight:850;line-height:1.1;letter-spacing:-.07em;display:inline-block;white-space:nowrap}.gft-keyfigure__label{margin:14px 0 12px;font-size:13px}.gft-keyfigure__note{font:12px/1.7 var(--gft-font-mono);max-width:36ch;color:#b4c7bd} @supports(animation-timeline:view()){ .gft-section{view-timeline-name:--gft-section;view-timeline-axis:block} :root[data-m-go] .gft-section__rail{animation-name:gft-rail;animation-duration:1ms;animation-timing-function:linear;animation-fill-mode:both;animation-timeline:--gft-section;animation-range-start:entry 0%;animation-range-end:exit 100%} @keyframes gft-rail{from{transform:scaleY(.1)}to{transform:scaleY(1)}} } @supports not (animation-timeline:view()){html{overflow-anchor:none}} @media(max-width:1000px){.gft-container{width:calc(100% - 56px)}.gft-grid,.gft-card-grid{gap:16px}.gft-card{padding:24px}.gft-section__head{gap:28px}} @media(max-width:640px){.gft-container{width:calc(100% - 40px)}body{font-size:15px}.gft-section__head{grid-template-columns:1fr;gap:24px;margin-bottom:36px}.gft-section__head h2{max-width:12ch}.gft-grid,.gft-card-grid{grid-template-columns:1fr}.gft-card{padding:24px}.gft-keyfigures{grid-template-columns:1fr}.gft-keyfigure{padding:24px 0}.gft-keyfigure+.gft-keyfigure{border-left:0;border-top:1px solid #ffffff29;padding-left:0}.gft-keyfigure__value{font-size:4.5rem}.gft-keyfigure__note{max-width:44ch}.gft-timeline li{grid-template-columns:1fr;gap:12px}.gft-eyebrow{font-size:12px}.gft-exergue{font-size:2.6rem}.gft-callout{padding:24px}.gft-button{gap:24px}} /* GFT motion kit: declarative entrances, live behaviours and widgets (README: src/components/motion/README.md). Contract - Base styles are the composed END state. Pre-states apply only under :root[data-m-go], which the head script sets when JavaScript runs, motion is allowed (no prefers-reduced-motion, no comfort-panel calm) and which is removed again if the runtime has not started within 3.5 s. No JS, reduced motion and calm therefore show every word and figure in its final place. - An entrance plays when the runtime sets [data-m-in] (one IntersectionObserver). Children of staggered entrances read their own delay from --m-d (ramped by the runtime). - Scroll-driven effects use animation longhands only (npm run check:css) and only exist under :root[data-m-go]. - Keyframes are prefixed m-. Live loops run only while their element is on screen ([data-m-on]). - One animation list per element: put a live effect (parallax, kenburns, drift…) on a different element from its entrance (a wrapper or a child). */ @property --m-rx{syntax:'';inherits:false;initial-value:100%} @property --m-ry{syntax:'';inherits:false;initial-value:100%} @property --m-ink{syntax:'';inherits:false;initial-value:100%} @property --m-play{syntax:'running | paused';inherits:false;initial-value:paused} /* Pointer lives write these on the element every frame: they do not inherit, so a frame restyles only that element (a pseudo-element that needs them says inherit). */ @property --m-mx{syntax:'';inherits:false;initial-value:50%} @property --m-my{syntax:'';inherits:false;initial-value:50%} @property --m-spot{syntax:'';inherits:false;initial-value:0%} @property --m-shine{syntax:'';inherits:false;initial-value:0} @property --m-mgx{syntax:'';inherits:false;initial-value:0px} @property --m-mgy{syntax:'';inherits:false;initial-value:0px} @property --m-rx-deg{syntax:'';inherits:false;initial-value:0deg} @property --m-ry-deg{syntax:'';inherits:false;initial-value:0deg} :root{ --m-out:cubic-bezier(.16,1,.3,1);--m-expo:cubic-bezier(.19,1,.22,1);--m-freight:cubic-bezier(.65,0,.35,1); --m-tide:cubic-bezier(.45,.05,.55,.95);--m-signal:cubic-bezier(.2,.9,.1,1);--m-snap:cubic-bezier(.34,1.56,.64,1); --m-soft:cubic-bezier(.25,.46,.45,.94); --m-accent:var(--gft-sage);--m-glow:rgba(107,182,143,.4); } /* --------------------------------------------------------------------------------------------------------------- 1 · Entrances. Element-level: [data-m=…] animates itself. Child-level: its children (or .m-k elements chosen by data-m-kids) animate with a ramped stagger. --------------------------------------------------------------------------------------------------------------- */ [data-m][data-m-in]{animation-delay:var(--m-delay,0ms);animation-fill-mode:both} /* Clipping entrances leave no clip behind once settled (italic overhangs, shadows and focus rings are never cut) */ :root[data-m-go] :is([data-m=wipe],[data-m=curtain],[data-m=iris],[data-m=slot],[data-m=scale],[data-m=horizon])[data-m-in]{animation-fill-mode:backwards} /* Pre-states move and scale blocks; they must never widen the page (no horizontal scroll at 320 px). overflow-x:clip creates no scroll container, so sticky positioning inside keeps working. */ main,.site-footer{overflow-x:clip} /* rise: a decisive arrival from below */ :root[data-m-go] [data-m=rise]:not([data-m-in]){opacity:.18;translate:0 1.4rem} :root[data-m-go] [data-m=rise][data-m-in]{animation-name:m-rise;animation-duration:var(--m-dur,650ms);animation-timing-function:var(--m-out);animation-iteration-count:1;animation-direction:normal} @keyframes m-rise{from{opacity:.18;translate:0 1.4rem}} /* wipe: a mask travelling on the freight easing (data-m-dir: right | up | down; default left to right) */ :root[data-m-go] [data-m=wipe]:not([data-m-in]){clip-path:inset(-10% 64% -10% -10%)} :root[data-m-go] [data-m=wipe][data-m-in]{animation-name:m-wipe;animation-duration:var(--m-dur,750ms);animation-timing-function:var(--m-freight);animation-iteration-count:1;animation-direction:normal} :root[data-m-go] [data-m=wipe][data-m-dir=right]:not([data-m-in]){clip-path:inset(-10% -10% -10% 64%)} :root[data-m-go] [data-m=wipe][data-m-dir=right][data-m-in]{animation-name:m-wipe-r;animation-iteration-count:1;animation-direction:normal} :root[data-m-go] [data-m=wipe][data-m-dir=down]:not([data-m-in]){clip-path:inset(-10% -10% 64% -10%)} :root[data-m-go] [data-m=wipe][data-m-dir=down][data-m-in]{animation-name:m-wipe-d;animation-iteration-count:1;animation-direction:normal} :root[data-m-go] [data-m=wipe][data-m-dir=up]:not([data-m-in]){clip-path:inset(64% -10% -10% -10%)} :root[data-m-go] [data-m=wipe][data-m-dir=up][data-m-in]{animation-name:m-wipe-u;animation-iteration-count:1;animation-direction:normal} @keyframes m-wipe{from{clip-path:inset(-10% 64% -10% -10%)}to{clip-path:inset(-10% -10% -10% -10%)}} @keyframes m-wipe-r{from{clip-path:inset(-10% -10% -10% 64%)}to{clip-path:inset(-10% -10% -10% -10%)}} @keyframes m-wipe-d{from{clip-path:inset(-10% -10% 64% -10%)}to{clip-path:inset(-10% -10% -10% -10%)}} @keyframes m-wipe-u{from{clip-path:inset(64% -10% -10% -10%)}to{clip-path:inset(-10% -10% -10% -10%)}} /* curtain: two halves part from the centre line */ :root[data-m-go] [data-m=curtain]:not([data-m-in]){clip-path:inset(-10% 32% -10% 32%)} :root[data-m-go] [data-m=curtain][data-m-in]{animation-name:m-curtain;animation-duration:var(--m-dur,750ms);animation-timing-function:var(--m-freight);animation-iteration-count:1;animation-direction:normal} @keyframes m-curtain{from{clip-path:inset(-10% 32% -10% 32%)}to{clip-path:inset(-10% -10% -10% -10%)}} /* iris: a circular aperture opening from data-m-origin (x% y%) */ :root[data-m-go] [data-m=iris]:not([data-m-in]){clip-path:circle(24% at var(--m-ox,50%) var(--m-oy,50%))} :root[data-m-go] [data-m=iris][data-m-in]{animation-name:m-iris;animation-duration:var(--m-dur,800ms);animation-timing-function:var(--m-freight);animation-iteration-count:1;animation-direction:normal} @keyframes m-iris{from{clip-path:circle(24% at var(--m-ox,50%) var(--m-oy,50%))}to{clip-path:circle(150% at var(--m-ox,50%) var(--m-oy,50%))}} /* slot: a moving horizontal slot opens while the image inside settles from 1.22 */ :root[data-m-go] [data-m=slot]:not([data-m-in]){clip-path:inset(34% 0 34% 0)} :root[data-m-go] [data-m=slot][data-m-in]{animation-name:m-slot;animation-duration:var(--m-dur,800ms);animation-timing-function:var(--m-freight);animation-iteration-count:1;animation-direction:normal} /* media carrying their own live loop (kenburns, drift…) are left to it: an entrance on the same element would mix two animation lists (the settle then replayed for ever, the picture pulsing) */ :root[data-m-go] [data-m=slot]:not([data-m-in]) :is(img,video,canvas,svg):not([data-m-live]){scale:1.12} :root[data-m-go] [data-m=slot][data-m-in] :is(img,video,canvas,svg):not([data-m-live]){animation-name:m-settle;animation-duration:calc(var(--m-dur,800ms) * 1.1);animation-timing-function:var(--m-out);animation-delay:var(--m-delay,0ms);animation-fill-mode:both;animation-iteration-count:1;animation-direction:normal} @keyframes m-slot{0%{clip-path:inset(34% 0 34% 0)}45%{clip-path:inset(20% 0 20% 0)}100%{clip-path:inset(-10% -10% -10% -10%)}} @keyframes m-settle{from{scale:1.12}to{scale:1}} /* blur: a focus pull from soft to sharp */ :root[data-m-go] [data-m=blur]:not([data-m-in]){opacity:.2;filter:blur(10px)} :root[data-m-go] [data-m=blur][data-m-in]{animation-name:m-blur;animation-duration:var(--m-dur,700ms);animation-timing-function:var(--m-soft);animation-iteration-count:1;animation-direction:normal} @keyframes m-blur{from{opacity:.2;filter:blur(10px)}to{opacity:1;filter:blur(0)}} /* scale: a zoom that settles into place behind a closing frame */ :root[data-m-go] [data-m=scale]:not([data-m-in]){opacity:.25;scale:1.06;clip-path:inset(4%)} :root[data-m-go] [data-m=scale][data-m-in]{animation-name:m-scale;animation-duration:var(--m-dur,800ms);animation-timing-function:var(--m-out);animation-iteration-count:1;animation-direction:normal} @keyframes m-scale{from{opacity:.25;scale:1.06;clip-path:inset(4%)}to{opacity:1;scale:1;clip-path:inset(-10%)}} /* unfold: display type opens from condensed. Visual width only (scaleX from the start edge): a font-axis animation would reflow the line and shift the layout (CLS budget 0). Display type only, never body text. */ [data-m=unfold]{transform-origin:0 100%} :root[data-m-go] [data-m=unfold]:not([data-m-in]){opacity:.2;scale:.8 1} :root[data-m-go] [data-m=unfold][data-m-in]{animation-name:m-unfold;animation-duration:var(--m-dur,800ms);animation-timing-function:var(--m-expo);animation-iteration-count:1;animation-direction:normal} @keyframes m-unfold{from{opacity:.2;scale:.8 1}40%{opacity:1}} /* tilt: a door swinging in on its left hinge */ :root[data-m-go] [data-m=tilt]:not([data-m-in]){opacity:.2;transform:perspective(1300px) rotateY(-18deg);transform-origin:0 50%} :root[data-m-go] [data-m=tilt][data-m-in]{animation-name:m-tilt;animation-duration:var(--m-dur,750ms);animation-timing-function:var(--m-out);transform-origin:0 50%;animation-iteration-count:1;animation-direction:normal} @keyframes m-tilt{from{opacity:.2;transform:perspective(1300px) rotateY(-18deg)}to{opacity:1;transform:perspective(1300px) rotateY(0)}} /* glide: a skewed slide from the sea side */ :root[data-m-go] [data-m=glide]:not([data-m-in]){opacity:.2;translate:.75rem 0;transform:skewX(-5deg)} :root[data-m-go] [data-m=glide][data-m-in]{animation-name:m-glide;animation-duration:var(--m-dur,650ms);animation-timing-function:var(--m-out);animation-iteration-count:1;animation-direction:normal} @keyframes m-glide{from{opacity:.2;translate:.75rem 0;transform:skewX(-5deg)}to{opacity:1;translate:0 0;transform:skewX(0)}} /* stamp: a small mark lands with overshoot (chips, dates, badges only) */ :root[data-m-go] [data-m=stamp]:not([data-m-in]){opacity:0;scale:1.35;rotate:-4deg} :root[data-m-go] [data-m=stamp][data-m-in]{animation-name:m-stamp;animation-duration:var(--m-dur,480ms);animation-timing-function:var(--m-snap);animation-iteration-count:1;animation-direction:normal} @keyframes m-stamp{from{opacity:0;scale:1.35;rotate:-4deg}to{opacity:1;scale:1;rotate:0deg}} /* horizon: the zero line draws from the mines' side to the sea, then its label lands */ :root[data-m-go] [data-m=horizon]:not([data-m-in]){clip-path:inset(-20px 64% -20px -20px)} :root[data-m-go] [data-m=horizon][data-m-in]{animation-name:m-horizon;animation-duration:var(--m-dur,850ms);animation-timing-function:var(--m-freight);animation-iteration-count:1;animation-direction:normal} @keyframes m-horizon{from{clip-path:inset(-20px 64% -20px -20px)}to{clip-path:inset(-20px -20px -20px -20px)}} /* pk: the kilometre tick travels from PK 0 to the page's post */ [data-m=pk] .pk__track::before{content:'';position:absolute;left:0;top:-1px;width:var(--pk-position,0%);height:1px;background:var(--gft-sage);transform-origin:0 50%;scale:0 1} [data-m=pk][data-m-in] .pk__track::before{scale:1 1} :root[data-m-go] [data-m=pk][data-m-in] .pk__track::before{animation-name:m-grow-x;animation-duration:var(--m-dur,600ms);animation-timing-function:var(--m-freight);animation-delay:var(--m-delay,100ms);animation-fill-mode:both;animation-iteration-count:1;animation-direction:normal} :root[data-m-go] [data-m=pk]:not([data-m-in]) .pk__tick{opacity:0;scale:1 0} :root[data-m-go] [data-m=pk][data-m-in] .pk__tick{animation-name:m-pk;animation-duration:300ms;animation-timing-function:var(--m-snap);animation-delay:calc(var(--m-delay,100ms) + var(--m-dur,600ms) * .8);animation-fill-mode:both;animation-iteration-count:1;animation-direction:normal} @keyframes m-pk{from{opacity:0;scale:1 0}} /* rule: a laterite hairline draws along the top edge (stays as the block's accent), the content follows */ /* rule, leader and ink draw their line as a background layer at zero specificity: a block's own background (dark sections, cards, plates) always wins and is never overridden */ :where([data-m=rule][data-m-in]){background-image:linear-gradient(var(--m-accent),var(--m-accent));background-repeat:no-repeat;background-position:0 0;background-size:var(--m-rx) 1px} :root[data-m-go] [data-m=rule][data-m-in]{animation-name:m-rule;animation-duration:var(--m-dur,650ms);animation-timing-function:var(--m-freight);animation-iteration-count:1;animation-direction:normal} :root[data-m-go] [data-m=rule]:not([data-m-in])>:not([data-m]){opacity:0;translate:0 1rem} :root[data-m-go] [data-m=rule][data-m-in]>:not([data-m]){animation-name:m-rise-s;animation-duration:560ms;animation-timing-function:var(--m-out);animation-delay:calc(var(--m-delay,0ms) + 100ms + var(--m-d,0ms));animation-fill-mode:both;animation-iteration-count:1;animation-direction:normal} @keyframes m-rule{from{--m-rx:0%}to{--m-rx:100%}} @keyframes m-rise-s{from{opacity:0;translate:0 1rem}} /* leader: a vertical leader grows down the left edge, the content slides out of it */ :where([data-m=leader][data-m-in]){background-image:linear-gradient(var(--m-accent),var(--m-accent));background-repeat:no-repeat;background-position:0 0;background-size:2px var(--m-ry)} :root[data-m-go] [data-m=leader][data-m-in]{animation-name:m-leader;animation-duration:var(--m-dur,600ms);animation-timing-function:var(--m-freight);animation-iteration-count:1;animation-direction:normal} :root[data-m-go] [data-m=leader]:not([data-m-in])>:not([data-m]){opacity:0;translate:-1.6rem 0} :root[data-m-go] [data-m=leader][data-m-in]>:not([data-m]){animation-name:m-from-left;animation-duration:560ms;animation-timing-function:var(--m-out);animation-delay:calc(var(--m-delay,0ms) + 120ms + var(--m-d,0ms));animation-fill-mode:both;animation-iteration-count:1;animation-direction:normal} @keyframes m-leader{from{--m-ry:0%}to{--m-ry:100%}} @keyframes m-from-left{from{opacity:0;translate:-1.6rem 0}} /* ink: links and figures underline themselves */ :where([data-m=ink][data-m-in]){background-image:linear-gradient(var(--m-accent),var(--m-accent));background-repeat:no-repeat;background-position:0 100%;background-size:var(--m-ink) 1px} :root[data-m-go] [data-m=ink][data-m-in]{animation-name:m-ink;animation-duration:var(--m-dur,700ms);animation-timing-function:var(--m-freight);animation-iteration-count:1;animation-direction:normal} @keyframes m-ink{from{--m-ink:0%}to{--m-ink:100%}} /* Child-staggered entrances: direct children by default, or the .m-k elements the runtime marks from data-m-kids. */ :root[data-m-go] :is([data-m=deal],[data-m=cascade],[data-m=grow],[data-m=assemble],[data-m=stack],[data-m=lift])[data-m-in]:not([data-m-kids])>:not([data-m]), :root[data-m-go] :is([data-m=deal],[data-m=cascade],[data-m=grow],[data-m=assemble],[data-m=stack],[data-m=lift])[data-m-in] .m-k{animation-delay:calc(var(--m-delay,0ms) + var(--m-d,0ms));animation-fill-mode:both} /* deal: cards dealt from depth, z-staggered */ [data-m=deal]{perspective:1600px} :root[data-m-go] [data-m=deal]:not([data-m-kids]):not([data-m-in])>:not([data-m]),:root[data-m-go] [data-m=deal]:not([data-m-in]) .m-k:not([data-m]){opacity:0;transform:translate3d(0,3.2rem,-12rem) rotateX(24deg)} :root[data-m-go] [data-m=deal][data-m-in]:not([data-m-kids])>:not([data-m]),:root[data-m-go] [data-m=deal][data-m-in] .m-k:not([data-m]){animation-name:m-deal;animation-duration:var(--m-dur,650ms);animation-timing-function:var(--m-out);animation-iteration-count:1;animation-direction:normal} @keyframes m-deal{from{opacity:0;transform:translate3d(0,3.2rem,-12rem) rotateX(24deg)}to{opacity:1;transform:translate3d(0,0,0) rotateX(0)}} /* cascade: rows and list items fall into line from the left */ :root[data-m-go] [data-m=cascade]:not([data-m-kids]):not([data-m-in])>:not([data-m]),:root[data-m-go] [data-m=cascade]:not([data-m-in]) .m-k:not([data-m]){opacity:0;translate:-1.8rem 0} :root[data-m-go] [data-m=cascade][data-m-in]:not([data-m-kids])>:not([data-m]),:root[data-m-go] [data-m=cascade][data-m-in] .m-k:not([data-m]){animation-name:m-cascade;animation-duration:var(--m-dur,560ms);animation-timing-function:var(--m-out);animation-iteration-count:1;animation-direction:normal} @keyframes m-cascade{from{opacity:0;translate:-1.8rem 0}} /* grow: bars and columns rise from the zero line (data-m-axis=x grows from the left) */ :root[data-m-go] [data-m=grow]:not([data-m-kids]):not([data-m-in])>:not([data-m]),:root[data-m-go] [data-m=grow]:not([data-m-in]) .m-k:not([data-m]){scale:1 0} :root[data-m-go] [data-m=grow][data-m-axis=x]:not([data-m-kids]):not([data-m-in])>:not([data-m]),:root[data-m-go] [data-m=grow][data-m-axis=x]:not([data-m-in]) .m-k:not([data-m]){scale:0 1} [data-m=grow]>*,[data-m=grow] .m-k{transform-box:fill-box;transform-origin:50% 100%} [data-m=grow][data-m-axis=x]>*,[data-m=grow][data-m-axis=x] .m-k{transform-origin:0 50%} :root[data-m-go] [data-m=grow][data-m-in]:not([data-m-kids])>:not([data-m]),:root[data-m-go] [data-m=grow][data-m-in] .m-k:not([data-m]){animation-name:m-grow;animation-duration:var(--m-dur,650ms);animation-timing-function:var(--m-freight);animation-iteration-count:1;animation-direction:normal} :root[data-m-go] [data-m=grow][data-m-axis=x][data-m-in]:not([data-m-kids])>:not([data-m]),:root[data-m-go] [data-m=grow][data-m-axis=x][data-m-in] .m-k:not([data-m]){animation-name:m-grow-x;animation-iteration-count:1;animation-direction:normal} @keyframes m-grow{from{scale:1 0}} @keyframes m-grow-x{from{scale:0 1}} /* assemble: tiles fly in from scattered positions (offsets seeded by the runtime) */ :root[data-m-go] [data-m=assemble]:not([data-m-kids]):not([data-m-in])>:not([data-m]),:root[data-m-go] [data-m=assemble]:not([data-m-in]) .m-k:not([data-m]){opacity:0;transform:translate(var(--m-ax,0px),var(--m-ay,40px)) rotate(var(--m-ar,0deg)) scale(.7)} :root[data-m-go] [data-m=assemble][data-m-in]:not([data-m-kids])>:not([data-m]),:root[data-m-go] [data-m=assemble][data-m-in] .m-k:not([data-m]){animation-name:m-assemble;animation-duration:var(--m-dur,650ms);animation-timing-function:var(--m-expo);animation-iteration-count:1;animation-direction:normal} @keyframes m-assemble{from{opacity:0;transform:translate(var(--m-ax,0px),var(--m-ay,40px)) rotate(var(--m-ar,0deg)) scale(.7)}to{opacity:1;transform:none}} /* stack: sheets drop onto the pile one after another */ :root[data-m-go] [data-m=stack]:not([data-m-kids]):not([data-m-in])>:not([data-m]),:root[data-m-go] [data-m=stack]:not([data-m-in]) .m-k:not([data-m]){opacity:0;transform:translateY(-2.4rem) scale(1.06) rotate(-1.2deg)} :root[data-m-go] [data-m=stack][data-m-in]:not([data-m-kids])>:not([data-m]),:root[data-m-go] [data-m=stack][data-m-in] .m-k:not([data-m]){animation-name:m-stack;animation-duration:var(--m-dur,600ms);animation-timing-function:var(--m-out);animation-iteration-count:1;animation-direction:normal} @keyframes m-stack{from{opacity:0;transform:translateY(-2.4rem) scale(1.06) rotate(-1.2deg)}to{opacity:1;transform:none}} /* lift: lines turn up from the floor (3D hinge on the bottom edge) */ :root[data-m-go] [data-m=lift]:not([data-m-kids]):not([data-m-in])>:not([data-m]),:root[data-m-go] [data-m=lift]:not([data-m-in]) .m-k:not([data-m]){opacity:0;transform:perspective(900px) rotateX(-78deg);transform-origin:50% 100%} :root[data-m-go] [data-m=lift][data-m-in]:not([data-m-kids])>:not([data-m]),:root[data-m-go] [data-m=lift][data-m-in] .m-k:not([data-m]){animation-name:m-lift;animation-duration:var(--m-dur,620ms);animation-timing-function:var(--m-out);transform-origin:50% 100%;animation-iteration-count:1;animation-direction:normal} @keyframes m-lift{from{opacity:0;transform:perspective(900px) rotateX(-78deg)}to{opacity:1;transform:perspective(900px) rotateX(0)}} /* split (runtime): words or characters rise out of their own masks; data-m-fx = rise | blur | wdth | turn | skew | drop | swing | zoom | track */ /* The mask's room around the glyphs is padding cancelled by an equal negative margin (layout and line breaks are unchanged): Safari has no overflow-clip-margin, so without the inline room it shaved every glyph that overhangs its advance (tight display tracking, italics) on the first and last letter of each word. */ .m-w{display:inline-block;vertical-align:top;overflow:clip;padding:.08em .1em .14em;margin:-.08em -.1em -.14em;overflow-clip-margin:.2em} .m-c{display:inline-block} :root[data-m-go] [data-m=split]:not([data-m-ready]){opacity:0} :root[data-m-go] [data-m=split]:not([data-m-in]) .m-c{translate:0 112%} :root[data-m-go] [data-m=split][data-m-in] .m-c{animation-name:m-split;animation-duration:var(--m-dur,600ms);animation-timing-function:var(--m-out);animation-delay:calc(var(--m-delay,0ms) + var(--m-d,0ms));animation-fill-mode:both;animation-iteration-count:1;animation-direction:normal} :root[data-m-go] [data-m=split][data-m-fx=blur]:not([data-m-in]) .m-c{translate:0 .35em;opacity:0;filter:blur(10px)} :root[data-m-go] [data-m=split][data-m-fx=blur][data-m-in] .m-c{animation-name:m-split-blur;animation-duration:var(--m-dur,650ms);animation-iteration-count:1;animation-direction:normal} :root[data-m-go] [data-m=split][data-m-fx=wdth]:not([data-m-in]) .m-c{translate:0 0;opacity:0;scale:.55 1;transform-origin:0 100%} :root[data-m-go] [data-m=split][data-m-fx=wdth][data-m-in] .m-c{animation-name:m-split-wdth;animation-duration:var(--m-dur,650ms);animation-timing-function:var(--m-expo);transform-origin:0 100%;animation-iteration-count:1;animation-direction:normal} :root[data-m-go] [data-m=split][data-m-fx=turn]:not([data-m-in]) .m-c{translate:0 0;opacity:0;transform:perspective(600px) rotateX(-92deg);transform-origin:50% 100%} :root[data-m-go] [data-m=split][data-m-fx=turn][data-m-in] .m-c{animation-name:m-split-turn;transform-origin:50% 100%;animation-iteration-count:1;animation-direction:normal} :root[data-m-go] [data-m=split][data-m-fx=skew]:not([data-m-in]) .m-c{translate:0 112%;transform:skewY(9deg)} :root[data-m-go] [data-m=split][data-m-fx=skew][data-m-in] .m-c{animation-name:m-split-skew;animation-iteration-count:1;animation-direction:normal} [data-m=split][data-m-fx=wdth] .m-w,[data-m=split][data-m-fx=blur] .m-w,[data-m=split][data-m-fx=turn] .m-w{overflow:visible} @keyframes m-split{from{translate:0 112%}} @keyframes m-split-blur{from{translate:0 .35em;opacity:0;filter:blur(10px)}to{translate:0 0;opacity:1;filter:blur(0)}} @keyframes m-split-wdth{from{opacity:0;scale:.55 1}50%{opacity:1}} @keyframes m-split-turn{from{opacity:0;transform:perspective(600px) rotateX(-92deg)}to{opacity:1;transform:perspective(600px) rotateX(0)}} @keyframes m-split-skew{from{translate:0 112%;transform:skewY(9deg)}to{translate:0 0;transform:skewY(0)}} /* round 7 heading variants (same API, new data-m-fx values; SectionHead's rotation uses them too): drop (words fall into their masks from above) · swing (words open on their left edge like doors) · zoom (a focus pull per word, from small and soft) · track (each word opens from its centre, visual width only). Both grow into place and never start wider than the word, so a word still entering cannot cover its neighbour (tranche-2 builds saw 'scheduledagainstthegraduation' when they started at 1.45 and 1.3) */ :root[data-m-go] [data-m=split][data-m-fx=drop]:not([data-m-in]) .m-c{translate:0 -112%} :root[data-m-go] [data-m=split][data-m-fx=drop][data-m-in] .m-c{animation-name:m-split-drop;animation-iteration-count:1;animation-direction:normal} :root[data-m-go] [data-m=split][data-m-fx=swing]:not([data-m-in]) .m-c{translate:0 0;opacity:0;transform:perspective(700px) rotateY(68deg);transform-origin:0 50%} :root[data-m-go] [data-m=split][data-m-fx=swing][data-m-in] .m-c{animation-name:m-split-swing;transform-origin:0 50%;animation-iteration-count:1;animation-direction:normal} :root[data-m-go] [data-m=split][data-m-fx=zoom]:not([data-m-in]) .m-c{translate:0 0;opacity:0;scale:.72;filter:blur(8px)} :root[data-m-go] [data-m=split][data-m-fx=zoom][data-m-in] .m-c{animation-name:m-split-zoom;animation-timing-function:var(--m-expo);animation-iteration-count:1;animation-direction:normal} :root[data-m-go] [data-m=split][data-m-fx=track]:not([data-m-in]) .m-c{translate:0 0;opacity:0;scale:.8 1;transform-origin:50% 100%} :root[data-m-go] [data-m=split][data-m-fx=track][data-m-in] .m-c{animation-name:m-split-track;animation-timing-function:var(--m-expo);transform-origin:50% 100%;animation-iteration-count:1;animation-direction:normal} [data-m=split]:is([data-m-fx=swing],[data-m-fx=zoom],[data-m-fx=track]) .m-w{overflow:visible} @keyframes m-split-drop{from{translate:0 -112%}to{translate:0 0}} @keyframes m-split-swing{from{opacity:0;transform:perspective(700px) rotateY(68deg)}to{opacity:1;transform:perspective(700px) rotateY(0)}} @keyframes m-split-zoom{from{opacity:0;scale:.72;filter:blur(8px)}to{opacity:1;scale:1;filter:blur(0)}} @keyframes m-split-track{from{opacity:0;scale:.8 1}to{opacity:1;scale:1 1}} /* split on load (server-split headings above the fold, e.g. PageHead): plays at first paint, no observer */ :root[data-m-go] [data-m=split][data-m-load] .m-c{animation-name:m-split;animation-duration:var(--m-dur,650ms);animation-timing-function:var(--m-out);animation-delay:calc(var(--m-delay,0ms) + var(--m-d,0ms));animation-fill-mode:both;animation-iteration-count:1;animation-direction:normal} :root[data-m-go] [data-m=split][data-m-load]{opacity:1} /* type (runtime): characters set in sequence, a caret blinks at 1 Hz while it types */ :root[data-m-go] [data-m=type]:not([data-m-ready]){opacity:0} :root[data-m-go] [data-m=type]:not([data-m-in]) .m-ch{opacity:0} :root[data-m-go] [data-m=type][data-m-in] .m-ch{animation-name:m-type;animation-duration:110ms;animation-timing-function:linear;animation-delay:calc(var(--m-delay,0ms) + var(--m-d,0ms));animation-fill-mode:both;animation-iteration-count:1;animation-direction:normal} @keyframes m-type{from{opacity:0}} [data-m=type][data-m-typing]::after{content:'';display:inline-block;width:.08em;height:1em;margin-inline-start:.06em;margin-inline-end:-.14em;vertical-align:-.12em;background:var(--m-accent);animation-name:m-caret;animation-duration:1s;animation-timing-function:steps(2,jump-none);animation-iteration-count:infinite} @keyframes m-caret{50%{opacity:0}} /* flip (runtime): a split-flap board turning character by character */ .m-fl{display:inline-block;transform-origin:50% 50%;backface-visibility:hidden} :root[data-m-go] [data-m=flip]:not([data-m-ready]){opacity:0} :root[data-m-go] [data-m=flip]:not([data-m-in]) .m-fl{opacity:0;transform:perspective(400px) rotateX(90deg)} :root[data-m-go] [data-m=flip][data-m-in] .m-fl{animation-name:m-flip;animation-duration:420ms;animation-timing-function:var(--m-snap);animation-delay:calc(var(--m-delay,0ms) + var(--m-d,0ms));animation-fill-mode:both;animation-iteration-count:1;animation-direction:normal} @keyframes m-flip{0%{opacity:0;transform:perspective(400px) rotateX(90deg)}55%{opacity:1;transform:perspective(400px) rotateX(-18deg)}100%{opacity:1;transform:perspective(400px) rotateX(0)}} /* scramble (runtime) keeps width while characters resolve */ /* scramble: the real text holds its box (transparent); the decoding glyphs run in an overlay (no re-wrap, CLS 0) */ [data-m=scramble][data-m-run],[data-m=scramble][data-m-run] :not(.m-scr){color:transparent} .m-scr{position:absolute;inset:0;box-sizing:border-box;padding:inherit;color:var(--m-scr-c);font-variant-numeric:tabular-nums;pointer-events:none;overflow:visible} /* type and flip glyphs: words stay unbreakable so lines break where the plain text breaks */ .m-wd{white-space:nowrap} /* draw / trace (runtime): strokes draw in order; fills and labels fade in once the line has passed */ :root[data-m-go] :is([data-m=draw],[data-m=trace]):not([data-m-ready]){opacity:0} :root[data-m-go] :is([data-m=draw],[data-m=trace]):not([data-m-in]) .m-ln{stroke-dashoffset:var(--m-len)} :root[data-m-go] :is([data-m=draw],[data-m=trace])[data-m-in] .m-ln{animation-name:m-draw;animation-duration:var(--m-dur,650ms);animation-timing-function:var(--m-freight);animation-delay:calc(var(--m-delay,0ms) + var(--m-d,0ms));animation-fill-mode:both;animation-iteration-count:1;animation-direction:normal} :root[data-m-go] :is([data-m=draw],[data-m=trace]):not([data-m-in]) .m-fd{opacity:0} :root[data-m-go] :is([data-m=draw],[data-m=trace])[data-m-in] .m-fd{animation-name:m-fade;animation-duration:420ms;animation-timing-function:ease-out;animation-delay:calc(var(--m-delay,0ms) + var(--m-d,0ms) + 500ms);animation-fill-mode:both;animation-iteration-count:1;animation-direction:normal} @keyframes m-draw{from{stroke-dashoffset:var(--m-len)}to{stroke-dashoffset:0}} @keyframes m-fade{from{opacity:0}} .m-head{fill:#FFF3E4;filter:drop-shadow(0 0 6px var(--m-glow))} /* mosaic / shutter (runtime): a tile or strip overlay in the ground colour lifts away; the image settles */ .m-mosaic{position:absolute;inset:0;z-index:2;display:grid;pointer-events:none} .m-mosaic>i{background:var(--m-tile,var(--ground));transform-origin:50% 50%} :root[data-m-go] [data-m-in] .m-mosaic>i{animation-name:m-tile;animation-duration:520ms;animation-timing-function:var(--m-freight);animation-delay:calc(var(--m-delay,0ms) + var(--m-d,0ms));animation-fill-mode:both;animation-iteration-count:1;animation-direction:normal} :root[data-m-go] [data-m-in] .m-mosaic--strips>i{animation-name:m-strip;animation-duration:520ms;animation-iteration-count:1;animation-direction:normal} :root[data-m-go] :is([data-m=mosaic],[data-m=shutter]):not([data-m-in]) :is(img,video):not([data-m-live]){scale:1.18} :root[data-m-go] :is([data-m=mosaic],[data-m=shutter])[data-m-in] :is(img,video):not([data-m-live]){animation-name:m-settle-18;animation-duration:900ms;animation-timing-function:var(--m-out);animation-delay:var(--m-delay,0ms);animation-fill-mode:both;animation-iteration-count:1;animation-direction:normal} @keyframes m-tile{from{scale:1;opacity:1}to{scale:0;opacity:0}} @keyframes m-strip{from{scale:1 1}to{scale:0 1}} @keyframes m-settle-18{from{scale:1.18}to{scale:1}} .m-mosaic,.m-mosaic>i{will-change:auto} :root:not([data-m-go]) .m-mosaic{display:none} /* odometer (runtime): digit reels roll over the real text, which stays in place (transparent) for layout and AT */ .m-odo-host{position:relative} .m-odo-host[data-m-rolling]{color:transparent!important} .m-odo{position:absolute;inset:0;white-space:pre;pointer-events:none;color:var(--m-odo-c,inherit);font:inherit;font-variant-numeric:tabular-nums;line-height:inherit} .m-odo>span{display:inline-block;vertical-align:top} .m-reel{overflow:hidden} .m-reel>span{display:block;white-space:pre-line} /* figures resolve in place: hidden until their entrance, then rolled (odometer), counted (count) or decoded (scramble) */ :root[data-m-go] :is([data-m=odometer],[data-m=count],[data-m=scramble]):not([data-m-in]){opacity:0} :root[data-m-go] :is([data-m=odometer],[data-m=count],[data-m=scramble])[data-m-in]{animation-name:m-fade;animation-duration:320ms;animation-timing-function:ease-out;animation-iteration-count:1;animation-direction:normal} :root[data-m-go] [data-m=sort]:not([data-m-in])>*{opacity:0} /* --------------------------------------------------------------------------------------------------------------- 2 · Live behaviours ([data-m-live~=…]); loops play only while [data-m-on] (on screen). --------------------------------------------------------------------------------------------------------------- */ [data-m-live][data-m-on]{--m-play:running} /* A layer whose own box keeps moving is never a scroll anchor: Firefox follows its anchor's transform, so each step of the layer pulled the page back by as much (up to 16 px at a time). Only these: a content block that merely carries a pointer effect (tilt, sheen, spotlight) stays a good anchor, and withdrawing a ledger list made Safari anchor to its redrawn wires instead (a 1 px step back on the system page). */ :is([data-m-live~=parallax],[data-m-live~=kenburns],[data-m-live~=drift],[data-m-live~=float],[data-m-live~=orbit]){overflow-anchor:none} /* Where scroll timelines are missing (Firefox today) the page never anchors at all: the browser also anchored to the pinned stages, which move with the scroll there, and threw the reader back by up to 1,900 px (climate, phone). */ @supports not (animation-timeline:view()){html{overflow-anchor:none}} @supports (animation-timeline:view()){ /* parallax: data-m-depth -1…1 (positive moves slower than the page, negative faster) */ :root[data-m-go] [data-m-live~=parallax]{animation-name:m-parallax;animation-duration:1ms;animation-timing-function:linear;animation-fill-mode:both;animation-timeline:view();animation-range-start:cover 0%;animation-range-end:cover 100%} /* wdth: display type stretches as the visitor travels down the page (visual width, scaleX; never reflows) */ :root[data-m-go] [data-m-live~=wdth]{animation-name:m-wdth-travel;animation-duration:1ms;animation-timing-function:linear;animation-fill-mode:both;animation-timeline:view();animation-range-start:entry 20%;animation-range-end:exit 40%} /* depth: depth of field, sharp in the middle of the viewport, softened at the edges */ :root[data-m-go] [data-m-live~=depth]{animation-name:m-depth;animation-duration:1ms;animation-timing-function:linear;animation-fill-mode:both;animation-timeline:view();animation-range-start:cover 0%;animation-range-end:cover 100%} /* progress: a rail filling as its section is read (place inside a [data-m-timeline] section) */ :root[data-m-go] [data-m-timeline]{view-timeline-name:--m-section;view-timeline-axis:block} :root[data-m-go] [data-m-live~=progress]{transform-origin:0 50%;animation-name:m-progress;animation-duration:1ms;animation-timing-function:linear;animation-fill-mode:both;animation-timeline:--m-section;animation-range-start:entry 60%;animation-range-end:exit 40%} :root[data-m-go] [data-m-live~=progress-y]{transform-origin:50% 0;animation-name:m-progress-y;animation-duration:1ms;animation-timing-function:linear;animation-fill-mode:both;animation-timeline:--m-section;animation-range-start:entry 60%;animation-range-end:exit 40%} /* reveal-scroll: content scrubbed in by the scroll position itself (transformation, not arrival) */ :root[data-m-go] [data-m-live~=scrub-in]{animation-name:m-scrub-in;animation-duration:1ms;animation-timing-function:linear;animation-fill-mode:both;animation-timeline:view();animation-range-start:entry 0%;animation-range-end:cover 40%} } @keyframes m-parallax{from{translate:0 calc(var(--m-depth,.15) * -9rem)}to{translate:0 calc(var(--m-depth,.15) * 9rem)}} @keyframes m-wdth-travel{from{scale:.94 1}to{scale:1.06 1}} [data-m-live~=wdth]{transform-origin:0 100%} @keyframes m-depth{0%{opacity:.35}28%,72%{opacity:1}100%{opacity:.35}} @keyframes m-progress{from{scale:0 1}to{scale:1 1}} @keyframes m-progress-y{from{scale:1 0}to{scale:1 1}} @keyframes m-scrub-in{from{opacity:.15;translate:0 3rem;scale:.96}to{opacity:1;translate:0 0;scale:1}} /* kenburns: a slow push and drift on a still (put it on the img, the entrance on its frame) */ :root[data-m-go] [data-m-live~=kenburns]{animation-play-state:var(--m-play);animation-name:m-kenburns;animation-duration:26s;animation-timing-function:var(--m-tide);animation-iteration-count:infinite;animation-direction:alternate} @keyframes m-kenburns{from{scale:1.02;translate:0 0}to{scale:1.13;translate:-2.4% -1.6%}} /* drift / float / orbit / pulse / sweep / scan / breathe: slow continuous motion (well under 3 Hz) */ :root[data-m-go] [data-m-live~=drift]{animation-play-state:var(--m-play);animation-name:m-drift;animation-duration:var(--m-period,14s);animation-timing-function:var(--m-tide);animation-iteration-count:infinite;animation-direction:alternate} @keyframes m-drift{from{translate:-1.2% .8%}to{translate:1.2% -.8%}} :root[data-m-go] [data-m-live~=float]{animation-play-state:var(--m-play);animation-name:m-float;animation-duration:var(--m-period,7s);animation-timing-function:var(--m-tide);animation-iteration-count:infinite;animation-direction:alternate} @keyframes m-float{from{translate:0 -.35rem}to{translate:0 .35rem}} :root[data-m-go] [data-m-live~=orbit]{animation-play-state:var(--m-play);animation-name:m-orbit;animation-duration:var(--m-period,60s);animation-timing-function:linear;animation-iteration-count:infinite} @keyframes m-orbit{to{rotate:360deg}} :root[data-m-go] [data-m-live~=pulse]{animation-play-state:var(--m-play);animation-name:m-pulse;animation-duration:var(--m-period,2.6s);animation-timing-function:var(--m-tide);animation-iteration-count:infinite} @keyframes m-pulse{0%,100%{box-shadow:0 0 0 0 var(--m-glow)}50%{box-shadow:0 0 0 .55rem transparent}} :root[data-m-go] [data-m-live~=breathe]{animation-play-state:var(--m-play);animation-name:m-breathe;animation-duration:var(--m-period,5s);animation-timing-function:var(--m-tide);animation-iteration-count:infinite;animation-direction:alternate} @keyframes m-breathe{from{opacity:.55}to{opacity:1}} [data-m-live~=sweep]{position:relative;overflow:hidden;isolation:isolate} [data-m-live~=sweep]::after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(100deg,transparent 30%,color-mix(in oklch,var(--m-accent) 16%,transparent) 48%,transparent 66%);background-size:250% 100%;background-position:120% 0} :root[data-m-go] [data-m-live~=sweep][data-m-on]::after{animation-name:m-sweep;animation-duration:var(--m-period,9s);animation-timing-function:var(--m-tide);animation-iteration-count:infinite} @keyframes m-sweep{from{background-position:120% 0}to{background-position:-20% 0}} [data-m-live~=scan]{position:relative} [data-m-live~=scan]::before{content:'';position:absolute;inset:0;z-index:3;pointer-events:none;background:linear-gradient(transparent,var(--m-accent),transparent) 0 0/1px 100% no-repeat;opacity:0} :root[data-m-go] [data-m-live~=scan][data-m-on]::before{animation-name:m-scan;animation-duration:var(--m-period,7s);animation-timing-function:var(--m-tide);animation-iteration-count:infinite} @keyframes m-scan{0%{translate:0 0;opacity:0}10%{opacity:.8}90%{opacity:.8}100%{translate:calc(100% - 1px) 0;opacity:0}} /* flow: material moving along drawn paths (.m-flow strokes inside a [data-m-live~=flow] element) */ .m-flow{stroke-dasharray:var(--m-dash,6 14)} :root[data-m-go] [data-m-live~=flow][data-m-on] .m-flow{animation-name:m-flow;animation-duration:var(--m-period,1.6s);animation-timing-function:linear;animation-iteration-count:infinite} @keyframes m-flow{to{stroke-dashoffset:-40}} /* tilt / magnetic / spotlight / sheen: pointer-driven (one delegated listener, spring-damped) */ [data-m-live~=tilt]{transform-style:preserve-3d;transform:perspective(1100px) rotateX(var(--m-rx-deg,0deg)) rotateY(var(--m-ry-deg,0deg)) translateZ(0)} [data-m-live~=magnetic]{translate:var(--m-mgx,0px) var(--m-mgy,0px)} [data-m-live~=spotlight]{background-image:radial-gradient(circle at var(--m-mx,50%) var(--m-my,50%),color-mix(in oklch,var(--m-accent) var(--m-spot,0%),transparent),transparent 42%)} [data-m-live~=sheen]{position:relative} [data-m-live~=sheen]::after{--m-mx:inherit;--m-my:inherit;--m-shine:inherit;content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at var(--m-mx,50%) var(--m-my,50%),rgba(255,236,214,var(--m-shine,0)),transparent 46%);mix-blend-mode:soft-light;transition:opacity 300ms} /* marquee (runtime duplicates the track for a seamless loop; a visible control pauses it) */ .m-marquee{overflow:hidden;contain:paint} .m-marquee__track{display:flex;width:max-content;gap:var(--m-gap,3rem)} :root[data-m-go] [data-m-live~=marquee][data-m-on]:not([data-m-paused]) .m-marquee__track{animation-name:m-marquee;animation-duration:var(--m-period,60s);animation-timing-function:linear;animation-iteration-count:infinite} [data-m-live~=marquee]:is(:hover,:focus-within) .m-marquee__track{animation-play-state:paused} @keyframes m-marquee{to{translate:calc(-50% - var(--m-gap,3rem) / 2) 0}} :root:not([data-m-go]) .m-marquee__track{flex-wrap:wrap;width:auto} :root:not([data-m-go]) .m-marquee [data-m-clone]{display:none} :root:not([data-m-go]) .m-marquee{overflow:visible;contain:none} :root:not([data-m-go]) .m-marquee__track{row-gap:.7rem} :root:not([data-m-go]) .mw-marquee__item{white-space:normal;flex-wrap:wrap;max-width:100%} /* particles / train: canvases and moving marks owned by the runtime */ .m-particles{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0} .m-train{fill:#FFF3E4;filter:drop-shadow(0 0 5px var(--m-glow)) drop-shadow(0 0 14px var(--m-glow))} :root:not([data-m-go]) :is(.m-particles,.m-train){display:none} /* morph: a live output rolls to its new value */ [data-m-live~=morph]{display:inline-block} /* Spring-open popovers (Fact provenance, glossary) */ @media (prefers-reduced-motion:no-preference){ :root:not([data-motion=calm]) .ui-popover:popover-open{transition-property:opacity,scale,translate,display,overlay;transition-duration:340ms;transition-timing-function:var(--m-snap);transition-behavior:allow-discrete} @starting-style{:root:not([data-motion=calm]) .ui-popover:popover-open{opacity:0;scale:.94;translate:0 8px}} } /* Server-split page titles keep a fixed width axis (a font-axis travel would reflow the words and shift the page); the travel is carried as visual width instead, on wide screens only. */ .page-head h1[data-m-load]{font-variation-settings:'wdth' 75;transform-origin:0 100%} @media (min-width:900px){:root[data-m-go] .page-head h1[data-m-load]{scale:calc(1 + var(--travel,0) * .06) 1}} /* glint: a light travelling along a hairline (the zero line) */ [data-m-live~=glint]::after{content:'';position:absolute;left:0;right:0;top:-1px;height:1px;pointer-events:none;background-image:linear-gradient(90deg,transparent,color-mix(in oklch,var(--deep) 80%,#fff) 50%,transparent);background-repeat:no-repeat;background-size:14% 100%;background-position:-30% 0;opacity:0} :root[data-m-go] [data-m-live~=glint][data-m-on]::after{animation-name:m-glint;animation-duration:var(--m-period,7s);animation-timing-function:var(--m-tide);animation-iteration-count:infinite;animation-delay:1.6s} @keyframes m-glint{0%{background-position:-30% 0;opacity:0}12%{opacity:1}88%{opacity:1}100%{background-position:130% 0;opacity:0}} /* Shared components' kit defaults ------------------------------------------------------------------------------ */ .ui-section{position:relative} .m-rail{position:absolute;left:0;top:0;bottom:0;width:1px;pointer-events:none;background:linear-gradient(var(--gft-sage),color-mix(in oklch,var(--gft-sage) 30%,transparent));transform-origin:50% 0;scale:1 0;box-shadow:0 0 10px var(--m-glow)} :root:not([data-m-go]) .m-rail{display:none} .ui-data-table tbody tr{transition:background-color 260ms var(--m-soft),box-shadow 260ms var(--m-soft)} .ui-data-table tbody tr:hover{background:color-mix(in oklch,var(--ground-2) 80%,var(--laterite) 20%);box-shadow:inset 2px 0 0 var(--gft-sage)} :root[data-m-go] .ui-tabs[data-tabs-ready] [role=tabpanel]:not([hidden]){animation-name:m-blur;animation-duration:620ms;animation-timing-function:var(--m-out);animation-fill-mode:both} .ui-fact-trigger{transition:border-color 220ms var(--m-signal),color 220ms var(--m-signal)} .ui-fact-trigger:hover{border-bottom-style:solid} .ui-fact-trigger sup{display:inline-block;transition:translate 320ms var(--m-snap)} .ui-fact-trigger:hover sup{translate:.12em -.12em} /* --------------------------------------------------------------------------------------------------------------- 3 · Widgets (src/components/motion/*.astro). Native controls first; JavaScript adds the motion. --------------------------------------------------------------------------------------------------------------- */ .mw-kicker{font:650 .72rem/1.3 var(--font-ui);letter-spacing:.14em;text-transform:uppercase;color:var(--gft-sage)} :lang(zh) .mw-kicker{letter-spacing:.06em} .mw-note{font:.78rem/1.55 var(--font-ui);color:var(--muted)} /* BigFigure: a numeral as a typographic object */ .mw-big{margin:0;display:grid;gap:.6rem;align-content:start;min-width:0} .mw-big__value{font:750 clamp(3.4rem,9vw,9.5rem)/.86 var(--font-ui);font-variation-settings:'wdth' 72;letter-spacing:-.045em;font-variant-numeric:tabular-nums;color:var(--ink);margin:0;overflow-wrap:anywhere} .mw-big--md .mw-big__value,.mw-big__value.mw-big--md{font-size:clamp(2.6rem,5.6vw,5.8rem)} .mw-big--sm .mw-big__value,.mw-big__value.mw-big--sm{font-size:clamp(1.9rem,3vw,3rem)} .mw-big--sm .mw-big__value .ui-fact-value,.mw-big__value.mw-big--sm .ui-fact-value{white-space:nowrap} .mw-big__value .ui-fact-trigger{border-bottom-width:2px;padding:0;line-height:inherit} .mw-big__value sup{font-size:.22em;vertical-align:super} .mw-big__label{font:600 .8rem/1.4 var(--font-ui);color:var(--muted);max-width:30ch} .mw-big__rule{display:block;height:2px;background:var(--laterite);transform-origin:0 50%;width:min(12rem,60%)} :lang(zh) .mw-big__value{font-family:var(--font-ui);letter-spacing:-.02em} /* SourceToggle: DEC-14 side-by-side values, one at a time with its provenance */ .mw-source{display:grid;gap:1.1rem;border-top:1px solid var(--rule);padding-top:1.2rem;min-width:0} .mw-source__head{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.8rem 1.6rem;align-items:baseline} .mw-source__options{display:flex;flex-wrap:wrap;gap:0;border:1px solid var(--rule);position:relative;isolation:isolate;margin:0;padding:0;min-width:0} .mw-source__options legend{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)} .mw-source__options label{position:relative;flex:1 1 auto;cursor:pointer} .mw-source__options input{position:absolute;opacity:0;width:1px;height:1px} .mw-source__options label>span{display:flex;align-items:center;justify-content:center;min-height:44px;padding:.55rem 1rem;font:600 .74rem/1.25 var(--font-ui);text-align:center;color:var(--muted);transition:color 220ms var(--m-signal)} .mw-source__options input:checked+span{color:var(--ground)} .mw-source__options input:focus-visible+span{outline:2px solid var(--gft-sage);outline-offset:-4px} .mw-source__thumb{position:absolute;z-index:-1;top:var(--mw-y,0);height:var(--mw-h,100%);left:var(--mw-x,0);width:var(--mw-w,0);background:var(--ink);transition:left 520ms var(--m-snap),width 520ms var(--m-snap),top 520ms var(--m-snap),height 520ms var(--m-snap)} :root:not([data-m-go]) .mw-source__thumb{display:none} :root:not([data-m-go]) .mw-source__options input:checked+span{background:var(--ink)} .mw-source__panels{display:grid;min-width:0} .mw-source__panel{grid-area:1/1;display:grid;gap:.7rem;align-content:start;min-width:0} .mw-source:has(input:checked) .mw-source__panel{visibility:hidden;opacity:0} .mw-source:has(.mw-source__options label:nth-of-type(1) input:checked) .mw-source__panel:nth-child(1), .mw-source:has(.mw-source__options label:nth-of-type(2) input:checked) .mw-source__panel:nth-child(2), .mw-source:has(.mw-source__options label:nth-of-type(3) input:checked) .mw-source__panel:nth-child(3), .mw-source:has(.mw-source__options label:nth-of-type(4) input:checked) .mw-source__panel:nth-child(4), .mw-source:has(.mw-source__options label:nth-of-type(5) input:checked) .mw-source__panel:nth-child(5), .mw-source:has(.mw-source__options label:nth-of-type(6) input:checked) .mw-source__panel:nth-child(6){visibility:visible;opacity:1} .mw-source__panel{transition:opacity 420ms var(--m-soft),visibility 0s linear 420ms} .mw-source__panel[data-on]{transition-delay:0s} /* Sliding indicator for ui Tabs and Segmented ([data-mw=tabs|segmented]) */ .mw-indicator{position:absolute;left:0;bottom:0;width:100px;height:2px;background:var(--gft-sage);box-shadow:0 0 12px var(--m-glow);pointer-events:none;transform-origin:0 50%;translate:var(--mw-x,0) 0;scale:var(--mw-sx,0) 1;transition:translate 480ms var(--m-snap),scale 480ms var(--m-snap)} [data-mw=tabs] [role=tablist],[data-mw=segmented]>div{position:relative} [data-mw=tabs][data-mw-ready] [role=tablist] button[aria-selected=true]{border-bottom-color:transparent} [data-mw=segmented] .mw-indicator{top:0;height:auto;background:var(--ink);box-shadow:none;z-index:0} [data-mw=segmented][data-mw-ready] label{z-index:1} [data-mw=segmented][data-mw-ready] input:checked+span{background:transparent;color:var(--ground);transition:color 300ms var(--m-signal)} :root:not([data-m-go]) .mw-indicator{display:none} :root:not([data-m-go]) [data-mw=tabs] [role=tablist] button[aria-selected=true]{border-bottom-color:var(--gft-sage)} :root:not([data-m-go]) [data-mw=segmented] input:checked+span{background:var(--ink)} /* Scrubber: a native range that scrubs a sequence (time, PK, steps) */ .mw-scrub{display:grid;gap:.6rem;min-width:0} .mw-scrub__row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:1rem;align-items:center} /* the range keeps its column with or without the play control (hidden under reduced motion and calm) */ .mw-scrub__row>:first-child{grid-column:1} .mw-scrub__row>input[type=range]{grid-column:2} .mw-scrub__row>output{grid-column:3} .mw-scrub input[type=range]{width:100%;min-height:44px;accent-color:var(--gft-sage);margin:0} .mw-scrub__play{min-width:44px;min-height:44px;border:1px solid var(--rule);background:transparent;color:var(--ink);font:650 .8rem var(--font-ui);cursor:pointer;clip-path:var(--slant);padding:0 .9rem} .mw-scrub__play[aria-pressed=true]{background:var(--ink);color:var(--ground)} .mw-scrub__out{font:650 .9rem/1 var(--font-ui);font-variant-numeric:tabular-nums;min-width:var(--mw-out-w,5ch);max-width:var(--mw-out-w,none);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:end} .mw-scrub__ticks{display:flex;justify-content:space-between;font:.68rem/1 var(--font-ui);color:var(--muted);padding-inline:calc(44px + 1rem) 0} /* CompareSlider: a before / after divider on a native range */ .mw-compare{position:relative;display:grid;margin:0;min-width:0;--mw-p:50%} .mw-compare__stage{position:relative;display:grid;overflow:hidden;background:var(--ground-2)} .mw-compare__a,.mw-compare__b{grid-area:1/1;min-width:0} .mw-compare__b{clip-path:inset(0 0 0 var(--mw-p))} .mw-compare__line{position:absolute;inset-block:0;left:var(--mw-p);width:2px;translate:-1px 0;background:var(--laterite);box-shadow:0 0 18px var(--m-glow);pointer-events:none} .mw-compare__line::after{content:'⟷';position:absolute;top:50%;left:50%;translate:-50% -50%;display:grid;place-items:center;width:44px;height:44px;background:var(--laterite);color:#0D1110;font:700 1rem/1 var(--font-ui);clip-path:var(--slant)} .mw-compare__range{width:100%;min-height:44px;margin:.6rem 0 0;accent-color:var(--gft-sage)} .mw-compare__labels{display:flex;justify-content:space-between;gap:1rem;font:650 .72rem/1.3 var(--font-ui);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)} /* StickySteps: a pinned visual that changes with the reading step */ .mw-steps{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(1.5rem,5vw,6rem);align-items:start} .mw-steps--flip{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)} .mw-steps--flip .mw-steps__visual{order:2} .mw-steps__visual{position:sticky;top:calc(var(--header) + 4svh);min-height:min(76svh,760px);display:grid;align-items:center;min-width:0} .mw-steps__track{display:grid;gap:0;min-width:0} .mw-steps__track>*{position:relative;min-height:62svh;display:grid;align-content:center;padding-block:6svh;padding-inline-start:1.4rem} .mw-steps__track>*::before{content:'';position:absolute;left:0;top:6svh;bottom:6svh;width:1px;background:var(--rule)} .mw-steps__track>*::after{content:'';position:absolute;left:0;top:6svh;bottom:6svh;width:2px;translate:-.5px 0;background:var(--gft-sage);box-shadow:0 0 12px var(--m-glow);transform-origin:50% 0;scale:1 0;transition:scale 700ms var(--m-out)} .mw-steps__track>[data-active]::after{scale:1 1} [data-mw-show]{transition:opacity 700ms var(--m-soft),translate 900ms var(--m-out),scale 900ms var(--m-out),visibility 0s} :root[data-m-go] .mw-steps[data-mw-ready] [data-mw-show]:not([data-shown]){opacity:0;translate:0 1rem;visibility:hidden;transition:opacity 500ms var(--m-soft),translate 600ms var(--m-out),scale 600ms var(--m-out),visibility 0s linear 500ms} @media (max-width:900px){ .mw-steps,.mw-steps--flip{grid-template-columns:1fr} .mw-steps__visual{top:var(--header);min-height:0;z-index:1;background:var(--ground)} .mw-steps--flip .mw-steps__visual{order:0} .mw-steps__track>*{min-height:0;padding-block:2.2rem} } /* StickySteps overlay (cinema): a sticky full-viewport stage, the steps floating over it as cards */ .mw-steps--overlay{display:block;position:relative} .mw-steps--overlay>.mw-steps__visual{position:sticky;top:0;height:100svh;min-height:0;display:block;z-index:0} .mw-steps--overlay>.mw-steps__track{position:relative;z-index:2;margin-top:-100svh;pointer-events:none} .mw-steps--overlay>.mw-steps__track>*{min-height:100svh;padding:12svh var(--gutter);display:grid;align-content:center;justify-items:start} .mw-steps--overlay>.mw-steps__track>*::before,.mw-steps--overlay>.mw-steps__track>*::after{display:none} .mw-steps--overlay>.mw-steps__track>* :is(a,button,input,select,textarea,[tabindex],.mw-card,[data-mw-card]){pointer-events:auto} .mw-steps--overlay.mw-steps--flip>.mw-steps__track>*{justify-items:end} @media (max-width:900px){ .mw-steps--overlay>.mw-steps__visual{position:sticky;top:0;height:100svh;background:none} .mw-steps--overlay>.mw-steps__track>*{min-height:100svh;align-content:end;padding:0 var(--gutter) 5svh} .mw-steps--overlay.mw-steps--flip>.mw-steps__track>*{justify-items:stretch} } /* HGallery: a pinned horizontal gallery driven by vertical scroll (native horizontal scroll without motion) */ .mw-hg{position:relative;min-width:0} .mw-hg__pin{min-width:0} .mw-hg__track{position:relative;display:flex;gap:clamp(1rem,2.5vw,2.5rem);overflow-x:auto;scroll-snap-type:x mandatory;padding-block:1rem;scrollbar-width:thin} .mw-hg__track>*{scroll-snap-align:start;flex:0 0 min(78vw,30rem)} @supports (animation-timeline:view()){ :root[data-m-go] .mw-hg[data-mw-pin]{height:calc(100svh + var(--mw-shift,0px));view-timeline-name:--mw-hg;view-timeline-axis:block;view-timeline-inset:0px 0px} :root[data-m-go] .mw-hg[data-mw-pin] .mw-hg__pin{position:sticky;top:0;height:100svh;display:grid;grid-template-columns:minmax(0,1fr);align-content:center;overflow:hidden} :root[data-m-go] .mw-hg[data-mw-pin] .mw-hg__track{overflow:visible;scroll-snap-type:none;animation-name:m-hg;animation-duration:1ms;animation-timing-function:linear;animation-fill-mode:both;animation-timeline:--mw-hg;animation-range-start:contain 0%;animation-range-end:contain 100%} } @keyframes m-hg{from{translate:0 0}to{translate:calc(-1 * var(--mw-shift,0px)) 0}} .mw-hg__count{font:650 .75rem/1 var(--font-ui);font-variant-numeric:tabular-nums;color:var(--muted)} /* IndexRail: a section index that tracks the active block, with a PK reading */ .mw-index{position:sticky;top:calc(var(--header) + 2rem);display:grid;gap:.2rem;align-content:start;font:600 .74rem/1.3 var(--font-ui)} .mw-index ol{list-style:none;margin:0;padding:0 0 0 1rem;position:relative;display:grid} .mw-index ol::before{content:'';position:absolute;left:0;top:0;bottom:0;width:1px;background:var(--rule)} .mw-index__bar{position:absolute;left:0;top:0;width:1px;height:100%;background:var(--gft-sage);transform-origin:0 0;scale:1 var(--mw-p,0);box-shadow:0 0 10px var(--m-glow);transition:scale 400ms var(--m-out)} .mw-index a{display:flex;align-items:center;gap:.6rem;min-height:40px;text-decoration:none;color:var(--muted);transition:color 220ms var(--m-signal),translate 320ms var(--m-snap)} .mw-index a[aria-current]{color:var(--ink)} .mw-index a{position:relative} .mw-index a[aria-current]::before{content:'';position:absolute;left:-.9rem;top:50%;width:.6rem;height:1px;background:var(--gft-sage)} .mw-index__pk{font-variation-settings:'wdth' 62;letter-spacing:.1em;color:var(--deep);font-variant-numeric:tabular-nums} /* TiltCard: a card with depth, a specular sheen and a magnetic arrow */ .mw-card{position:relative;display:grid;gap:.8rem;align-content:space-between;min-height:12rem;padding:1.4rem 1.4rem 1.2rem;text-decoration:none;color:var(--ink);background:var(--ground-2);border-top:2px solid var(--laterite);overflow:hidden;transition:background-color 300ms var(--m-soft),box-shadow 400ms var(--m-out)} .mw-card:hover,.mw-card:focus-visible{box-shadow:0 30px 60px -30px rgba(0,0,0,.55);background:color-mix(in oklch,var(--ground-2) 85%,var(--laterite) 15%)} .mw-card__kicker{font:650 .68rem/1.3 var(--font-ui);letter-spacing:.12em;text-transform:uppercase;color:var(--gft-sage)} .mw-card__title{font:650 clamp(1.15rem,1.7vw,1.6rem)/1.15 var(--font-ui);letter-spacing:-.02em} .mw-card__note{font:400 .86rem/1.5 var(--font-serif);color:var(--muted)} .mw-card__arrow{justify-self:end;font:600 1.2rem/1 var(--font-ui);color:var(--gft-sage)} /* Marquee of Facts */ .mw-marquee{border-block:1px solid var(--rule);padding-block:.9rem;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:1rem;min-width:0} .mw-marquee__item{display:inline-flex;align-items:baseline;gap:.7rem;white-space:nowrap;font:600 .8rem/1.3 var(--font-ui);color:var(--muted)} .mw-marquee__item strong{font-size:1.25rem;color:var(--ink);font-weight:650} /* links and buttons riding the track keep a 24 px target (WCAG 2.5.8): the moving track passes under the pause button's column, and a short inline link there would fall under the minimum */ .mw-marquee__item :is(a,button){display:inline-flex;align-items:center;min-height:24px} .mw-marquee__item::after{content:'';width:.4rem;height:.4rem;background:var(--laterite);transform:skewX(-14deg);margin-inline-start:1.6rem} /* above the track (its paint containment makes it a stacking context, so moving items could otherwise read as covering the button) */ .mw-marquee__pause{position:relative;z-index:1;min-width:44px;min-height:44px;background:transparent;border:1px solid var(--rule);color:var(--ink);cursor:pointer;font:650 .7rem var(--font-ui)} :root:not([data-m-go]) .mw-marquee__pause{display:none} /* Interlude: a full-bleed band between sections, layered type over data over atmosphere */ .mw-interlude{position:relative;isolation:isolate;overflow:clip;min-height:clamp(22rem,62svh,40rem);display:grid;align-items:center;background:#070A09;color:#F3EFE7;color-scheme:dark;--ink:#F3EFE7;--muted:#C9C4B8;--rule:rgba(243,239,231,.18);--laterite-text:#E8954A;--deep:#7EBEDA} .mw-interlude__atmos,.mw-interlude__data{position:absolute;inset:0;pointer-events:none} .mw-interlude__atmos{z-index:0} .mw-interlude__data{z-index:1} .mw-interlude__data svg{position:absolute;inset:0;width:100%;height:100%} .mw-interlude__type{position:relative;z-index:2;padding-block:clamp(3rem,8vw,7rem);min-width:0} .mw-interlude__line{font:750 clamp(2.4rem,6.4vw,6.8rem)/.95 var(--font-ui);font-variation-settings:'wdth' 78;letter-spacing:-.04em;margin:0;max-width:18ch;text-wrap:balance} :lang(zh) .mw-interlude__line{font-family:var(--font-cjk);font-weight:700;letter-spacing:0;line-height:1.15;font-variation-settings:normal} .mw-interlude__note{margin-top:1.4rem;max-width:56ch;font:400 1rem/1.6 var(--font-serif);color:var(--muted)} /* MarginFigure: a figure hung in the margin on a leader line */ .mw-margin{position:relative;display:grid;gap:.4rem;padding:0 0 0 1.2rem;margin:0;border-left:1px solid var(--rule);min-width:0} .mw-margin::before{content:'';position:absolute;left:-1px;top:0;width:2.6rem;height:1px;background:var(--gft-sage);translate:-100% 1.1rem} .mw-margin .mw-big__value{font-size:clamp(2rem,3.2vw,3.2rem)} /* Readout: a live instrument cell */ .mw-readout{display:grid;gap:.35rem;min-width:0} .mw-readout__label{font:600 .66rem/1.3 var(--font-ui);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)} .mw-readout__value{font:650 1.35rem/1 var(--font-ui);font-variant-numeric:tabular-nums;font-variation-settings:'wdth' 84} @media (max-width:640px){ .mw-scrub__ticks{padding-inline:0} .mw-marquee__item strong{font-size:1.05rem} } @media print{ .m-mosaic,.m-odo,.m-particles,.m-train,.mw-compare__line,.mw-scrub__play,.mw-marquee__pause{display:none!important} .mw-hg__track{flex-wrap:wrap} .mw-steps__visual{position:static} .mw-source__panel{visibility:visible!important;opacity:1!important;grid-area:auto} } /* A figure lit by its source (source register, article stage): the Fact glows where it stands in the text. */ .ui-fact[data-lit] .ui-fact-trigger{background:color-mix(in oklch,var(--gft-sage) 24%,transparent);box-shadow:0 0 0 3px color-mix(in oklch,var(--gft-sage) 24%,transparent),0 0 18px var(--m-glow);border-bottom-style:solid;transition:background-color 220ms var(--m-signal),box-shadow 220ms var(--m-signal)} /* Textile grammars extend the ported kit. Each is an element entrance, not a loop. */ :root[data-m-go] :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=spin],[data-m=ply],[data-m=wind],[data-m=thread],[data-m=shed],[data-m=reed],[data-m=heddle]):not([data-m-in]){opacity:.28;transform:translateY(16px)} :root[data-m-go] :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=spin],[data-m=ply],[data-m=wind],[data-m=thread],[data-m=shed],[data-m=reed],[data-m=heddle])[data-m-in]{animation-duration:720ms;animation-timing-function:var(--gft-ease-out);animation-iteration-count:1;animation-direction:normal;animation-fill-mode:backwards} :root[data-m-go] [data-m=warp][data-m-in]{animation-name:gft-warp} :root[data-m-go] [data-m=weft][data-m-in]{animation-name:gft-weft} :root[data-m-go] [data-m=pick][data-m-in]{animation-name:gft-pick} :root[data-m-go] [data-m=beat-up][data-m-in]{animation-name:gft-beat-up} :root[data-m-go] [data-m=unspool][data-m-in]{animation-name:gft-unspool} :root[data-m-go] [data-m=knot][data-m-in]{animation-name:gft-knot} :root[data-m-go] [data-m=twill-shift][data-m-in]{animation-name:gft-twill-shift} :root[data-m-go] [data-m=satin-float][data-m-in]{animation-name:gft-satin-float} :root[data-m-go] [data-m=selvedge-draw][data-m-in]{animation-name:gft-selvedge-draw} :root[data-m-go] [data-m=card][data-m-in]{animation-name:gft-card} :root[data-m-go] [data-m=comb][data-m-in]{animation-name:gft-comb} :root[data-m-go] [data-m=spin][data-m-in]{animation-name:gft-spin} :root[data-m-go] [data-m=ply][data-m-in]{animation-name:gft-ply} :root[data-m-go] [data-m=wind][data-m-in]{animation-name:gft-wind} :root[data-m-go] [data-m=thread][data-m-in]{animation-name:gft-thread} :root[data-m-go] [data-m=shed][data-m-in]{animation-name:gft-shed} :root[data-m-go] [data-m=reed][data-m-in]{animation-name:gft-reed} :root[data-m-go] [data-m=heddle][data-m-in]{animation-name:gft-heddle} @keyframes gft-warp{from{opacity:.28;transform:translateY(20px) scaleY(.98)}} @keyframes gft-weft{from{opacity:.28;transform:translateX(-26px)}} @keyframes gft-pick{from{opacity:.28;transform:translateX(18px) skewX(-2deg)}} @keyframes gft-beat-up{from{opacity:.28;transform:translateY(12px) scaleY(.96)}} @keyframes gft-unspool{from{opacity:.28;clip-path:inset(-5% 24% -5% -5%)}} @keyframes gft-knot{from{opacity:.28;transform:scale(.96) rotate(-1deg)}} @keyframes gft-twill-shift{from{opacity:.28;transform:translate(-18px,12px)}} @keyframes gft-satin-float{from{opacity:.28;transform:translateY(24px)}} @keyframes gft-selvedge-draw{from{opacity:.28;clip-path:inset(-5% -5% -5% 24%)}} @keyframes gft-card{from{opacity:.28;transform:translateY(14px) rotateX(3deg)}} @keyframes gft-comb{from{opacity:.28;transform:translateY(-12px)}} @keyframes gft-spin{from{opacity:.28;transform:rotate(-2deg) scale(.98)}} @keyframes gft-ply{from{opacity:.28;transform:translateX(-14px) scale(.99)}} @keyframes gft-wind{from{opacity:.28;transform:translateX(22px) rotate(1deg)}} @keyframes gft-thread{from{opacity:.28;clip-path:inset(0 18% 0 0)}} @keyframes gft-shed{from{opacity:.28;transform:translateY(18px) skewY(.6deg)}} @keyframes gft-reed{from{opacity:.28;transform:scaleX(.97)}} @keyframes gft-heddle{from{opacity:.28;transform:translateY(-18px) scaleY(.98)}} /* Live effects are on dedicated decorations or pseudo-elements. */ [data-m-live~=shuttle],[data-m-live~=breathe],[data-m-live~=scan],[data-m-live~=drift],[data-m-live~=pulse-node],[data-m-live~=flow]{overflow-anchor:none} :root[data-m-go] [data-m-live~=shuttle][data-m-on]{animation-name:gft-shuttle;animation-duration:9s;animation-timing-function:ease-in-out;animation-iteration-count:infinite;animation-direction:alternate} :root[data-m-go] [data-m-live~=breathe][data-m-on]{animation-name:gft-breathe;animation-duration:7s;animation-timing-function:ease-in-out;animation-iteration-count:infinite;animation-direction:alternate} :root[data-m-go] [data-m-live~=scan][data-m-on]{animation-name:gft-scan;animation-duration:11s;animation-timing-function:linear;animation-iteration-count:infinite} :root[data-m-go] [data-m-live~=drift][data-m-on]{animation-name:gft-drift;animation-duration:13s;animation-timing-function:ease-in-out;animation-iteration-count:infinite;animation-direction:alternate} :root[data-m-go] [data-m-live~=pulse-node][data-m-on]{animation-name:gft-pulse;animation-duration:5s;animation-timing-function:ease-in-out;animation-iteration-count:infinite;animation-direction:alternate} :root[data-m-go] [data-m-live~=flow][data-m-on]{animation-name:gft-flow;animation-duration:8s;animation-timing-function:linear;animation-iteration-count:infinite;animation-direction:alternate} @keyframes gft-shuttle{from{transform:translateX(-8px)}to{transform:translateX(8px)}} @keyframes gft-breathe{from{opacity:.5}to{opacity:.9}} @keyframes gft-scan{from{transform:translateY(-4px)}to{transform:translateY(4px)}} @keyframes gft-drift{from{transform:translate(0,-3px)}to{transform:translate(5px,3px)}} @keyframes gft-pulse{from{opacity:.55;transform:scale(.97)}to{opacity:1;transform:scale(1.03)}} @keyframes gft-flow{from{transform:translateX(-4px)}to{transform:translateX(4px)}} @media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-name:none!important;animation-timeline:auto!important;transition-duration:.01ms!important}} :root[data-motion=calm] *, :root[data-motion=calm] *::before,:root[data-motion=calm] *::after{animation-name:none!important;animation-timeline:auto!important} .gft-header[data-astro-cid-lth3ydfl] { height: 88px; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-inline: 48px; background: var(--gft-night); color: var(--gft-paper); border-bottom: 1px solid #ffffff20; position: relative; z-index: 40; view-transition-name: gft-header; } .gft-brand[data-astro-cid-lth3ydfl] { display: flex; align-items: center; gap: 11px; text-decoration: none; flex-shrink: 0; line-height: 1.05; font-size: 11px; font-weight: 700; letter-spacing: .11em; } .gft-brand__tech[data-astro-cid-lth3ydfl] { display: block; font-size: 21px; letter-spacing: .06em; margin-top: 3px; } .gft-brand__dot[data-astro-cid-lth3ydfl] { color: var(--gft-sage); } .gft-desktop-nav[data-astro-cid-lth3ydfl] { display: flex; align-items: center; gap: 22px; } .gft-nav-group[data-astro-cid-lth3ydfl] summary[data-astro-cid-lth3ydfl], .gft-nav-all[data-astro-cid-lth3ydfl] summary[data-astro-cid-lth3ydfl] { display: flex; gap: 10px; align-items: center; list-style: none; cursor: pointer; min-height: 44px; font-size: 12px; } .gft-nav-group[data-astro-cid-lth3ydfl] summary[data-astro-cid-lth3ydfl]::-webkit-details-marker, .gft-nav-all[data-astro-cid-lth3ydfl] summary[data-astro-cid-lth3ydfl]::-webkit-details-marker { display: none; } .gft-nav-group[data-astro-cid-lth3ydfl] summary[data-astro-cid-lth3ydfl] > span[data-astro-cid-lth3ydfl] { color: var(--gft-sage); } .gft-header__controls[data-astro-cid-lth3ydfl] { display: flex; align-items: center; gap: 12px; } .gft-icon-button[data-astro-cid-lth3ydfl], .gft-calm[data-astro-cid-lth3ydfl] { border: 0; background: none; color: inherit; min-height: 44px; min-width: 44px; display: flex; align-items: center; justify-content: center; } .gft-calm[data-astro-cid-lth3ydfl] { gap: 8px; font-size: 12px; } .gft-calm__dot[data-astro-cid-lth3ydfl] { border: 1px solid #b5cabe; width: 10px; height: 10px; border-radius: 50%; } .gft-calm[data-astro-cid-lth3ydfl][aria-pressed="true"] .gft-calm__dot[data-astro-cid-lth3ydfl] { background: var(--gft-sage); } .gft-nav-panel[data-astro-cid-lth3ydfl] { position: absolute; top: 100%; left: 0; right: 0; background: var(--gft-paper); color: var(--gft-night); padding: 36px 48px 48px; max-height: 75svh; overflow: auto; border-bottom: 2px solid var(--gft-sage); box-shadow: 0 24px 48px #072d2b35; } .gft-nav-panel__list[data-astro-cid-lth3ydfl] { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 32px; margin-top: 20px; } .gft-nav-panel__list[data-astro-cid-lth3ydfl] > a[data-astro-cid-lth3ydfl], .gft-nav-pending[data-astro-cid-lth3ydfl] { display: flex; justify-content: space-between; gap: 16px; align-items: center; padding: 14px 0; border-top: 1px solid #c6d1c9; font-size: 13px; text-decoration: none; min-height: 54px; } .gft-nav-panel__list[data-astro-cid-lth3ydfl] > a[data-astro-cid-lth3ydfl]:hover { color: var(--gft-forest); text-decoration: underline; } .gft-nav-pending[data-astro-cid-lth3ydfl] { color: #617067; } .gft-nav-pending[data-astro-cid-lth3ydfl] small[data-astro-cid-lth3ydfl] { font: 12px var(--gft-font-mono); text-transform: uppercase; letter-spacing: .03em; flex-shrink: 0; } .gft-nav-panel--all[data-astro-cid-lth3ydfl] { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px; } .gft-nav-panel--all[data-astro-cid-lth3ydfl] .gft-nav-panel__list[data-astro-cid-lth3ydfl] { grid-template-columns: 1fr; } .gft-mobile-label[data-astro-cid-lth3ydfl] { display: none; } .gft-nav-all[data-astro-cid-lth3ydfl] summary[data-astro-cid-lth3ydfl] { font-size: 21px; justify-content: center; min-width: 44px; } @media (width <= 1250px) { .gft-header[data-astro-cid-lth3ydfl] { padding-inline: 28px; gap: 18px; } .gft-desktop-nav[data-astro-cid-lth3ydfl] { gap: 14px; } .gft-nav-group[data-astro-cid-lth3ydfl] summary[data-astro-cid-lth3ydfl] { gap: 6px; font-size: 12px; } .gft-brand[data-astro-cid-lth3ydfl] { font-size: 10px; } .gft-brand__tech[data-astro-cid-lth3ydfl] { font-size: 19px; } } @media (width <= 1050px) { .gft-desktop-nav[data-astro-cid-lth3ydfl] { display: none; } .gft-mobile-label[data-astro-cid-lth3ydfl] { display: inline; font-size: 12px; } .gft-nav-all[data-astro-cid-lth3ydfl] summary[data-astro-cid-lth3ydfl] { gap: 14px; } .gft-nav-panel--all[data-astro-cid-lth3ydfl] { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 28px; } } @media (width <= 640px) { .gft-header[data-astro-cid-lth3ydfl] { height: 76px; padding-inline: 20px; gap: 12px; } .gft-brand[data-astro-cid-lth3ydfl] { font-size: 9px; gap: 8px; } .gft-brand[data-astro-cid-lth3ydfl] svg[data-astro-cid-lth3ydfl] { width: 34px; height: 34px; } .gft-brand__tech[data-astro-cid-lth3ydfl] { font-size: 18px; } .gft-header__controls[data-astro-cid-lth3ydfl] { gap: 0; } .gft-calm[data-astro-cid-lth3ydfl] { font-size: 12px; gap: 5px; } .gft-mobile-label[data-astro-cid-lth3ydfl] { display: none; } .gft-nav-panel--all[data-astro-cid-lth3ydfl] { grid-template-columns: 1fr; padding: 28px 20px; } .gft-nav-pending[data-astro-cid-lth3ydfl] small[data-astro-cid-lth3ydfl] { font-size: 12px; } .gft-nav-panel__list[data-astro-cid-lth3ydfl] { margin-top: 12px; } .gft-icon-button[data-astro-cid-lth3ydfl] { min-width: 36px; } } .gft-footer[data-astro-cid-jo6i4kqk] { background: var(--gft-night); color: var(--gft-paper); padding-block: 0 28px; border-top: 1px solid #ffffff25; } .gft-footer__next[data-astro-cid-jo6i4kqk] { display: grid; grid-template-columns: minmax(0, auto) minmax(40px, 1fr) auto; grid-template-areas: "k k k" "t line go"; align-items: center; gap: 10px 28px; padding-block: 44px 40px; margin-bottom: 56px; border-bottom: 1px solid #ffffff25; text-decoration: none; color: inherit; } .gft-footer__next-k[data-astro-cid-jo6i4kqk] { grid-area: k; font: 600 12px var(--gft-font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--gft-sage); } .gft-footer__next-t[data-astro-cid-jo6i4kqk] { grid-area: t; font-size: clamp(1.6rem, 3.4vw, 3.2rem); font-weight: 800; letter-spacing: -.045em; line-height: 1.05; } .gft-footer__next-line[data-astro-cid-jo6i4kqk] { grid-area: line; position: relative; height: 2px; background: #ffffff1f; overflow: hidden; } .gft-footer__next-line[data-astro-cid-jo6i4kqk] i[data-astro-cid-jo6i4kqk] { position: absolute; inset: 0; background: var(--gft-ochre); transform-origin: 0; transform: scaleX(.35); } .gft-footer__next-go[data-astro-cid-jo6i4kqk] { grid-area: go; font-size: clamp(1.6rem, 3vw, 2.6rem); color: var(--gft-sage); transition: transform .35s var(--gft-ease-out); } .gft-footer__next[data-astro-cid-jo6i4kqk]:hover .gft-footer__next-t[data-astro-cid-jo6i4kqk], .gft-footer__next[data-astro-cid-jo6i4kqk]:focus-visible .gft-footer__next-t[data-astro-cid-jo6i4kqk] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .15em; } .gft-footer__next[data-astro-cid-jo6i4kqk]:hover .gft-footer__next-go[data-astro-cid-jo6i4kqk] { transform: translate(4px, -4px); } .gft-footer__top[data-astro-cid-jo6i4kqk] { display: flex; justify-content: space-between; align-items: center; gap: 32px; padding-bottom: 64px; } .gft-footer__statement[data-astro-cid-jo6i4kqk] { font-size: clamp(1.5rem, 3vw, 3.5rem); line-height: 1.16; letter-spacing: -.04em; margin-top: 24px; } .gft-footer__mark[data-astro-cid-jo6i4kqk] { color: var(--gft-sage); } .gft-footer__bottom[data-astro-cid-jo6i4kqk] { display: flex; align-items: center; justify-content: space-between; gap: 24px; border-top: 1px solid #ffffff29; padding-top: 24px; } .gft-footer__bottom[data-astro-cid-jo6i4kqk] nav[data-astro-cid-jo6i4kqk] { display: flex; gap: 24px; align-items: center; } .gft-footer__bottom[data-astro-cid-jo6i4kqk] a[data-astro-cid-jo6i4kqk], .gft-footer__bottom[data-astro-cid-jo6i4kqk] button[data-astro-cid-jo6i4kqk] { min-height: 44px; display: inline-flex; align-items: center; font-size: 12px; background: none; border: 0; color: inherit; padding: 0; text-decoration: none; } .gft-footer__motif[data-astro-cid-jo6i4kqk] { color: var(--gft-sage); letter-spacing: .1em; } @media (width <= 640px) { .gft-footer[data-astro-cid-jo6i4kqk] { padding-top: 0; } .gft-footer__next[data-astro-cid-jo6i4kqk] { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "k k" "t go" "line line"; padding-block: 32px 28px; margin-bottom: 40px; } .gft-footer__top[data-astro-cid-jo6i4kqk] { padding-bottom: 40px; gap: 18px; } .gft-footer__mark[data-astro-cid-jo6i4kqk] svg[data-astro-cid-jo6i4kqk] { width: 64px; height: 64px; } .gft-footer__bottom[data-astro-cid-jo6i4kqk] { flex-wrap: wrap; } .gft-footer__bottom[data-astro-cid-jo6i4kqk] nav[data-astro-cid-jo6i4kqk] { gap: 20px; flex-wrap: wrap; } .gft-footer__motif[data-astro-cid-jo6i4kqk] { display: none; } } .gft-search__head[data-astro-cid-z4jru4n3] { display: flex; justify-content: space-between; gap: 24px; align-items: center; margin-bottom: 24px; } #gft-search-results[data-astro-cid-z4jru4n3] { padding-left: 22px; } #gft-search-results[data-astro-cid-z4jru4n3] li { padding-block: 12px; } #gft-search-results[data-astro-cid-z4jru4n3] a { font-weight: 650; } #gft-search-results[data-astro-cid-z4jru4n3] p { font-size: 13px; margin-top: 8px; }