@font-face {
font-family: 'Barlow Condensed';
font-style: normal;
font-weight: 700 900;
font-display: swap;
src: url(../fonts/gf/barlow-condensed-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Atkinson Hyperlegible Mono';
font-style: normal;
font-weight: 400 700;
font-display: swap;
src: url(../fonts/gf/atkinson-hyperlegible-mono-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Atkinson Hyperlegible Mono';
font-style: normal;
font-weight: 400 700;
font-display: swap;
src: url(../fonts/gf/atkinson-hyperlegible-mono-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Caveat';
font-style: normal;
font-weight: 500 700;
font-display: swap;
src: url(../fonts/gf/caveat-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Caveat';
font-style: normal;
font-weight: 500 700;
font-display: swap;
src: url(../fonts/gf/caveat-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Fraunces';
font-style: normal;
font-weight: 300 800;
font-display: swap;
src: url(../fonts/gf/fraunces-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Fraunces';
font-style: normal;
font-weight: 300 800;
font-display: swap;
src: url(../fonts/gf/fraunces-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root {
--asphalt: #0A0B0D;
--tar: #13161A;
--tar-2: #1B1F25;
--chalk: #F2EFE6;
--mute: #98A1AB;
--line: rgba(242, 239, 230, .14);
--signal: #FF4B1F;          
--ice: #8FB4D0;             
--paper: #EEE5D1;
--paper-2: #E4D9C0;
--sheet: #F7F1E2;
--polaroid: #FBF8EF;
--ink: #231E18;
--graphite: #5A5245;
--rule: #C9BDA3;
--pen: #2F4A6B;             
--signal-g: #C73A10;        
--signal-t: #9A3513;        
--tape: #E1C779;
--tape-edge: #CDB063;
--lift-sheet: 0 1px 0 rgba(255, 255, 255, .6) inset, 0 18px 30px -16px rgba(0, 0, 0, .55);
--lift-sheet-on-paper: 0 1px 0 rgba(255, 255, 255, .7) inset, 0 12px 24px -14px rgba(60, 40, 10, .38);
--lift-polaroid: 0 12px 22px -12px rgba(0, 0, 0, .5);
--lift-polaroid-on-paper: 0 10px 18px -12px rgba(60, 40, 10, .45);
--f-caps: "Barlow Condensed", "Barlow Condensed Fallback", "Arial Narrow", Impact, sans-serif;    
--f-serif: "Fraunces", "Fraunces Fallback", Georgia, serif;                         
--f-hand: "Caveat", "Caveat Fallback", "Bradley Hand", "Segoe Print", cursive;      
--f-mono: "Atkinson Hyperlegible Mono", "Mono Fallback", ui-monospace, Menlo, monospace; 
--f-mark: "Krengo Wordmark", "Barlow Condensed", Arial, sans-serif;                          
--m: 16px;                  
--g: 12px;                  
--cols: 4;
--maxw: 1328px;
--header-h: 56px;
--sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px; --sp-5: 24px;
--sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px; --sp-10: 144px;
--sec-pad: clamp(72px, 45.26px + 6.857vw, 144px);
--seam-h: 28px;
--radius: 2px;
--tap: 44px;                
--z-bg: 0; --z-grain: 1; --z-content: 2; --z-paper: 3; --z-tape: 4; --z-seam: 5;
--z-sheet: 30; --z-header: 50; --z-menu: 60; --z-skip: 99;
--ease-speed: cubic-bezier(.22, 1, .36, 1);         
--ease-settle: cubic-bezier(.3, 1.25, .5, 1);       
--ease-pen: cubic-bezier(.3, .1, .2, 1);            
--ease-snap: cubic-bezier(.7, 0, .2, 1);            
--ease-fall: cubic-bezier(.55, 0, 1, .45);          
--ease-inout: cubic-bezier(.45, 0, .55, 1);         
--d-press: 90ms; --d-hover: 160ms; --d-ui: 240ms; --d-small: 420ms; --d-paper: 520ms;
--d-head: 700ms; --d-roll: 900ms; --d-develop: 1100ms; --d-draw: 1400ms;
--fs-d1: clamp(72px, 33.37px + 9.905vw, 176px);
--fs-d1b: clamp(30px, 5.49px + 6.286vw, 96px);
--fs-h2-road: clamp(46px, 30.4px + 4vw, 88px);
--fs-h2-proof: clamp(46px, 21.49px + 6.286vw, 112px);
--fs-h2-paper: clamp(38px, 19.43px + 4.762vw, 88px);
--fs-h3-road: clamp(20px, 16.29px + .952vw, 30px);
--fs-h3-paper: clamp(22px, 19.03px + .762vw, 30px);
--fs-num-xl: clamp(80px, 35.43px + 11.43vw, 200px);
--fs-num-l: clamp(56px, 23.31px + 8.381vw, 144px);
--fs-readout: clamp(88px, 58.29px + 7.619vw, 168px);
--fs-num-sheet: clamp(34px, 11cqi, 64px);
--fs-lede: clamp(19px, 17.14px + .476vw, 24px);
--fs-body: clamp(17px, 16.26px + .19vw, 19px);
--fs-small: clamp(15px, 14.63px + .095vw, 16px);
--fs-hand-l: clamp(28px, 22.06px + 1.524vw, 44px);
--fs-hand-m: clamp(22px, 19.77px + .571vw, 28px);
--fs-kicker: clamp(12px, 11.63px + .095vw, 13px);
--fs-mono: clamp(13px, 12.63px + .095vw, 14px);
--fs-btn: clamp(15px, 14.63px + .095vw, 16px);
--fs-nav: clamp(13px, 12.63px + .095vw, 14px);
--sk-w: 2.5;                
}
@supports (transition-timing-function: linear(0, 1)) {
:root {
--ease-pen: linear(0, .10 7%, .30 20%, .42 29%, .46 36%, .50 41%, .78 64%, .94 82%, 1);
}
}
@media (min-width: 600px) {
:root { --m: 32px; --g: 16px; --cols: 8; }
}
@media (min-width: 960px) {
:root { --m: 56px; --g: 24px; --cols: 12; --header-h: 64px; }
}
:root,
[data-surface="asphalt"] {
--bg: var(--asphalt);  --bg-2: var(--tar);  --bg-3: var(--tar-2);
--fg: var(--chalk);    --fg-2: var(--mute); --hair: var(--line);
--lean-r: var(--signal); --lean-l: var(--ice); --accent-t: var(--signal);
--hand: var(--chalk);  --focus: var(--signal);
--sk-line: var(--chalk); --sk-fill: var(--tar-2); --sk-hot: var(--signal); --sk-pen: var(--ice);
--sk-bottom: var(--tar-2); --sk-bottom-hi: var(--chalk);   
--on-accent: var(--asphalt);                       
--grain: var(--tex-grain-asphalt); --grain-size: 180px; --grain-o: .035;
--grain-blend: screen;
color-scheme: dark;
}
[data-surface="paper"] {
--bg: var(--paper);    --bg-2: var(--sheet); --bg-3: var(--paper-2);
--fg: var(--ink);      --fg-2: var(--graphite); --hair: var(--rule);
--lean-r: var(--signal-g); --lean-l: var(--pen); --accent-t: var(--signal-t);
--hand: var(--pen);    --focus: var(--pen);
--sk-line: var(--ink); --sk-fill: var(--paper-2); --sk-hot: var(--signal-g); --sk-pen: var(--pen);
--sk-bottom: var(--ink); --sk-bottom-hi: var(--paper-2);
--on-accent: var(--ink);
--grain: var(--tex-grain-paper); --grain-size: 220px; --grain-o: .06;
--grain-blend: multiply;
color-scheme: light;
}
:root{
--tex-grain-paper:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 220' preserveAspectRatio='xMidYMid slice'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.14 0 0 0 0 0.11 0 0 0 0 0.07 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
--tex-grain-asphalt:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 180' preserveAspectRatio='xMidYMid slice'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.3' numOctaves='1' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.95 0 0 0 0 0.94 0 0 0 0 0.9 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
--tex-fibre-paper:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 320' preserveAspectRatio='xMidYMid slice'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.05 .8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.3 0 0 0 0 0.22 0 0 0 0 0.12 0 0 0 .16 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
--tex-tone-paper:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 900 900' preserveAspectRatio='xMidYMid slice'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.0035' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.45 0 0 0 0 0.32 0 0 0 0 0.15 0 0 0 .17 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
--tex-aggregate-asphalt:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 260 260' preserveAspectRatio='xMidYMid slice'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.33' numOctaves='1' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.95 0 0 0 0 0.94 0 0 0 0 0.9 0 0 0 1.4 0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='discrete' tableValues='0 0 0 0 0 0 0 0 0 .07'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
--mask-torn-a:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 960 28' preserveAspectRatio='none'%3E%3Cpath d='M0,7.7 L11.4,11.9 L24.5,10.1 L32.8,9 L44,8.8 L55.5,8 L64.1,9.5 L77.1,6.3 L88.8,4 L100.8,7.8 L107.6,5.2 L119.8,8.7 L129.5,6.8 L144.9,10.9 L155.2,8.7 L162.3,6.9 L178.9,8.3 L189.8,9.3 L198.9,12.5 L209.7,11.9 L217.9,12.9 L228.1,16.5 L242.2,16.9 L250.4,17 L262.1,11.6 L273.5,15.5 L283.2,10.3 L296.8,8.4 L307.6,12.5 L321.1,12 L330.1,12.6 L341.8,15.5 L352,14.5 L364,10.8 L373.7,12.6 L383.7,11 L399,9.3 L410,12.6 L420,12.8 L430.2,13.3 L438.9,11 L449.4,13.2 L460.7,9.3 L470.4,9.7 L485.6,6.5 L494.4,4.8 L508.1,4 L516.3,6.5 L530.7,6.3 L541.1,8 L547,8.1 L559.3,7.4 L574.5,7.7 L582.8,10 L596.9,10.8 L604.4,10.1 L613.4,11.9 L627.8,11 L639.7,9.1 L647.6,12.3 L657.5,13.8 L670,12.4 L684.8,10.5 L694.5,12.1 L701.7,8.8 L713.5,8.5 L723.6,10.3 L734.4,13.8 L749.8,16.3 L757.1,14 L770.4,15.7 L780.7,16.6 L790.1,16.3 L804.4,16.9 L811.8,13.4 L825.9,10 L833.7,9.3 L846.5,11.7 L856.3,16 L867.6,15.4 L882.8,9 L892.8,7.1 L900.8,7.9 L915.3,8 L922.3,9.1 L934.4,5.4 L948.1,10.1 L960,7.7 L960,28 L0,28 Z' fill='%23000'/%3E%3C/svg%3E");
--mask-lip-a:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 960 28' preserveAspectRatio='none'%3E%3Cpath d='M0,7.7 L11.4,11.9 L24.5,10.1 L32.8,9 L44,8.8 L55.5,8 L64.1,9.5 L77.1,6.3 L88.8,4 L100.8,7.8 L107.6,5.2 L119.8,8.7 L129.5,6.8 L144.9,10.9 L155.2,8.7 L162.3,6.9 L178.9,8.3 L189.8,9.3 L198.9,12.5 L209.7,11.9 L217.9,12.9 L228.1,16.5 L242.2,16.9 L250.4,17 L262.1,11.6 L273.5,15.5 L283.2,10.3 L296.8,8.4 L307.6,12.5 L321.1,12 L330.1,12.6 L341.8,15.5 L352,14.5 L364,10.8 L373.7,12.6 L383.7,11 L399,9.3 L410,12.6 L420,12.8 L430.2,13.3 L438.9,11 L449.4,13.2 L460.7,9.3 L470.4,9.7 L485.6,6.5 L494.4,4.8 L508.1,4 L516.3,6.5 L530.7,6.3 L541.1,8 L547,8.1 L559.3,7.4 L574.5,7.7 L582.8,10 L596.9,10.8 L604.4,10.1 L613.4,11.9 L627.8,11 L639.7,9.1 L647.6,12.3 L657.5,13.8 L670,12.4 L684.8,10.5 L694.5,12.1 L701.7,8.8 L713.5,8.5 L723.6,10.3 L734.4,13.8 L749.8,16.3 L757.1,14 L770.4,15.7 L780.7,16.6 L790.1,16.3 L804.4,16.9 L811.8,13.4 L825.9,10 L833.7,9.3 L846.5,11.7 L856.3,16 L867.6,15.4 L882.8,9 L892.8,7.1 L900.8,7.9 L915.3,8 L922.3,9.1 L934.4,5.4 L948.1,10.1 L960,7.7 L960,11.4 L948.1,12.7 L934.4,8 L922.3,12.8 L915.3,10.6 L900.8,10.5 L892.8,10.8 L882.8,11.6 L867.6,18 L856.3,19.7 L846.5,14.3 L833.7,11.9 L825.9,13.7 L811.8,16 L804.4,19.5 L790.1,20 L780.7,19.2 L770.4,18.3 L757.1,17.7 L749.8,18.9 L734.4,16.4 L723.6,14 L713.5,11.1 L701.7,11.4 L694.5,15.8 L684.8,13.1 L670,15 L657.5,17.5 L647.6,14.9 L639.7,11.7 L627.8,14.7 L613.4,14.5 L604.4,12.7 L596.9,14.5 L582.8,12.6 L574.5,10.3 L559.3,11.1 L547,10.7 L541.1,10.6 L530.7,10 L516.3,9.1 L508.1,6.6 L494.4,8.5 L485.6,9.1 L470.4,12.3 L460.7,13 L449.4,15.8 L438.9,13.6 L430.2,17 L420,15.4 L410,15.2 L399,13 L383.7,13.6 L373.7,15.2 L364,14.5 L352,17.1 L341.8,18.1 L330.1,16.3 L321.1,14.6 L307.6,15.1 L296.8,12.1 L283.2,12.9 L273.5,18.1 L262.1,15.3 L250.4,19.6 L242.2,19.5 L228.1,20.2 L217.9,15.5 L209.7,14.5 L198.9,16.2 L189.8,11.9 L178.9,10.9 L162.3,10.6 L155.2,11.3 L144.9,13.5 L129.5,10.5 L119.8,11.3 L107.6,7.8 L100.8,11.5 L88.8,6.6 L77.1,8.9 L64.1,13.2 L55.5,10.6 L44,11.4 L32.8,12.7 L24.5,12.7 L11.4,14.5 L0,11.4 Z' fill='%23000'/%3E%3C/svg%3E");
--mask-torn-b:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 960 28' preserveAspectRatio='none'%3E%3Cpath d='M0,13.7 L13.7,11.9 L24.4,14.6 L30.5,10.6 L44.6,12.1 L54.5,11.1 L66.2,11.6 L74.8,12.5 L86.2,12.4 L98.7,16.5 L108.3,16.4 L120.7,14.3 L129.1,14.8 L140.5,16.1 L155.3,15.1 L164.5,11.7 L176.1,9 L188.4,9.7 L197.2,14.5 L206.3,10.9 L221.7,10.8 L231.5,8.9 L242.9,6.6 L253.7,4 L266.8,5.2 L274.2,5.8 L287.6,6.7 L296.2,10.1 L308.4,11.6 L320,10.8 L328.9,12.1 L338.5,9.7 L351.8,8.8 L364.3,10.6 L374.5,6.6 L384.7,8.3 L396.9,7.2 L405.1,6.6 L416.1,7.4 L427.9,11.7 L441.9,8.5 L449.2,8.8 L459.7,10.6 L470.6,9.9 L481.2,10.5 L493.7,17 L506.4,13.3 L518.9,14.1 L527,14.8 L538.2,16.5 L548.7,15.2 L559.8,16.9 L573.7,11.1 L583.3,13.2 L592.6,7.4 L602.6,7.7 L617.7,9.8 L628.2,11.1 L640,13.1 L647.4,12.3 L660.3,9.7 L673.5,12.9 L682.6,9.9 L695.7,10.4 L702,11.5 L717.9,9.1 L723.3,11.5 L736.5,9.5 L745.1,12.6 L760.9,7.2 L771.1,9 L783.8,4 L793.8,5.5 L805.7,4 L814.2,7 L827.9,4.7 L837.5,7.4 L846.1,7.5 L860.8,11.2 L868.3,9.5 L878.2,11.9 L888.5,11.5 L901.8,10.8 L911.2,13.4 L926.6,12.5 L937.7,10.1 L944.3,12.5 L960,13.7 L960,28 L0,28 Z' fill='%23000'/%3E%3C/svg%3E");
--mask-lip-b:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 960 28' preserveAspectRatio='none'%3E%3Cpath d='M0,13.7 L13.7,11.9 L24.4,14.6 L30.5,10.6 L44.6,12.1 L54.5,11.1 L66.2,11.6 L74.8,12.5 L86.2,12.4 L98.7,16.5 L108.3,16.4 L120.7,14.3 L129.1,14.8 L140.5,16.1 L155.3,15.1 L164.5,11.7 L176.1,9 L188.4,9.7 L197.2,14.5 L206.3,10.9 L221.7,10.8 L231.5,8.9 L242.9,6.6 L253.7,4 L266.8,5.2 L274.2,5.8 L287.6,6.7 L296.2,10.1 L308.4,11.6 L320,10.8 L328.9,12.1 L338.5,9.7 L351.8,8.8 L364.3,10.6 L374.5,6.6 L384.7,8.3 L396.9,7.2 L405.1,6.6 L416.1,7.4 L427.9,11.7 L441.9,8.5 L449.2,8.8 L459.7,10.6 L470.6,9.9 L481.2,10.5 L493.7,17 L506.4,13.3 L518.9,14.1 L527,14.8 L538.2,16.5 L548.7,15.2 L559.8,16.9 L573.7,11.1 L583.3,13.2 L592.6,7.4 L602.6,7.7 L617.7,9.8 L628.2,11.1 L640,13.1 L647.4,12.3 L660.3,9.7 L673.5,12.9 L682.6,9.9 L695.7,10.4 L702,11.5 L717.9,9.1 L723.3,11.5 L736.5,9.5 L745.1,12.6 L760.9,7.2 L771.1,9 L783.8,4 L793.8,5.5 L805.7,4 L814.2,7 L827.9,4.7 L837.5,7.4 L846.1,7.5 L860.8,11.2 L868.3,9.5 L878.2,11.9 L888.5,11.5 L901.8,10.8 L911.2,13.4 L926.6,12.5 L937.7,10.1 L944.3,12.5 L960,13.7 L960,17.4 L944.3,15.1 L937.7,12.7 L926.6,16.2 L911.2,16 L901.8,13.4 L888.5,15.2 L878.2,14.5 L868.3,12.1 L860.8,14.9 L846.1,10.1 L837.5,10 L827.9,8.4 L814.2,9.6 L805.7,6.6 L793.8,9.2 L783.8,6.6 L771.1,11.6 L760.9,10.9 L745.1,15.2 L736.5,12.1 L723.3,15.2 L717.9,11.7 L702,14.1 L695.7,14.1 L682.6,12.5 L673.5,15.5 L660.3,13.4 L647.4,14.9 L640,15.7 L628.2,14.8 L617.7,12.4 L602.6,10.3 L592.6,11.1 L583.3,15.8 L573.7,13.7 L559.8,20.6 L548.7,17.8 L538.2,19.1 L527,18.5 L518.9,16.7 L506.4,15.9 L493.7,20.7 L481.2,13.1 L470.6,12.5 L459.7,14.3 L449.2,11.4 L441.9,11.1 L427.9,15.4 L416.1,10 L405.1,9.2 L396.9,10.9 L384.7,10.9 L374.5,9.2 L364.3,14.3 L351.8,11.4 L338.5,12.3 L328.9,15.8 L320,13.4 L308.4,14.2 L296.2,13.8 L287.6,9.3 L274.2,8.4 L266.8,8.9 L253.7,6.6 L242.9,9.2 L231.5,12.6 L221.7,13.4 L206.3,13.5 L197.2,18.2 L188.4,12.3 L176.1,11.6 L164.5,15.4 L155.3,17.7 L140.5,18.7 L129.1,18.5 L120.7,16.9 L108.3,19 L98.7,20.2 L86.2,15 L74.8,15.1 L66.2,15.3 L54.5,13.7 L44.6,14.7 L30.5,14.3 L24.4,17.2 L13.7,14.5 L0,17.4 Z' fill='%23000'/%3E%3C/svg%3E");
--mk-underline-double-pen:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 24' preserveAspectRatio='none'%3E%3Cpath d='M3.9,10.1 C60.8,5.9 130,13.2 235.4,7' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M22.3,18.6 C79.2,13.6 149.2,20.6 212.4,14.1' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
--mk-underline-wave-pen:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 20' preserveAspectRatio='none'%3E%3Cpath d='M4.6,15.2 Q18.8,4.1 25.8,10.6 Q32.8,17.1 39.7,9.6 Q46.6,2.2 54.7,8.4 Q62.7,14.6 69.3,9.6 Q75.8,4.5 83.8,9.6 Q91.8,14.7 98.6,9.4 Q105.4,4.2 112.5,10.5 Q119.7,16.8 126.8,10.7 Q133.9,4.6 141,10.1 Q148.2,15.6 156.1,9.9 Q164.1,4.3 171,9.7 Q177.9,15.2 185.2,9.4 Q192.5,3.6 199.3,9.5 Q206.2,15.5 214.2,10.7 Q222.3,6 229.3,10.3 L236.3,14.5' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
--mk-strike-pen:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 20' preserveAspectRatio='none'%3E%3Cpath d='M1.5,12.4 C70.4,6.7 159.4,13.5 237.3,6.5' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M24.5,8.3 C90.1,13.4 169.6,5.9 222.7,12.2' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
--mk-circle-double-pen:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 120' preserveAspectRatio='none'%3E%3Cpath d='M28.9,32.1 Q48.5,20.1 61.9,17.1 Q75.3,14.2 89.7,12.8 Q104.1,11.4 117.4,12.9 Q130.7,14.4 142.5,17.5 Q154.3,20.6 163.6,24.8 Q172.9,29 179.8,34.7 Q186.6,40.4 188.8,47.9 Q190.9,55.4 190.5,62.4 Q190.2,69.4 183.7,76.5 Q177.3,83.7 167.8,90.1 Q158.3,96.4 144.4,100.1 Q130.5,103.8 116.7,105.2 Q103,106.5 89.3,107 Q75.6,107.5 63.7,104.6 Q51.8,101.7 41.5,97.7 Q31.2,93.7 23,88.5 Q14.8,83.4 10.6,76.4 Q6.4,69.5 7.5,62.1 Q8.6,54.6 13,47.1 Q17.4,39.6 26.9,33.7 Q36.4,27.7 49.6,23.1 L62.8,18.5' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M67.1,21 Q92.5,17.3 105.2,18.7 Q117.9,20.1 129.2,23.6 Q140.4,27.2 151,31.2 Q161.7,35.2 168.7,40.8 Q175.8,46.4 179.7,52.5 Q183.6,58.5 184,65 Q184.4,71.5 181,77.9 Q177.6,84.4 170.5,89.8 Q163.4,95.3 151.4,98.2 Q139.4,101 126.7,101.8 Q114,102.6 101.8,101.8 Q89.6,100.9 77.5,98.5 Q65.4,96.1 55.5,92.2 Q45.5,88.4 37.2,83.4 Q28.9,78.5 23.7,72.1 Q18.5,65.6 17.6,59 Q16.7,52.3 19.4,46.4 Q22,40.5 28.6,34.6 Q35.1,28.7 46.5,25.7 L58,22.7' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
--mk-arrow-curve-down-pen:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 150' preserveAspectRatio='none'%3E%3Cpath d='M10.9,11 C120.5,-0.7 206,39 188.8,126.4' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M168.6,102.9 L186.5,131.7' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M213.4,107.6 L187.6,132.5' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
--mk-arrow-right-pen:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 60' preserveAspectRatio='none'%3E%3Cpath d='M3.7,32 C69.8,24.9 149.8,37.3 230.5,30.3' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M209.1,11.6 L231.7,29.4' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M216.4,49.7 L231.5,31.8' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
--mk-arrow-bend-pen:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 140' preserveAspectRatio='none'%3E%3Cpath d='M8,16.6 C100.9,7.6 165.5,34.4 150.3,117.2' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M129.1,95.8 L150.4,123.6' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M176,99.7 L151.6,124.8' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
--mk-tick-pen:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' preserveAspectRatio='none'%3E%3Cpath d='M5.4,27.3 Q17.7,40.5 30.3,23.2 L43,6' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M9,23.9 Q18.6,39.6 32,24.1 L45.3,8.7' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
--mk-box-pen:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' preserveAspectRatio='none'%3E%3Cpath d='M8.3,6.5 Q34,4 34.9,19.5 Q35.8,34.9 20.2,34.6 Q4.6,34.4 4.1,22 L3.6,9.6' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M2.7,11.6 Q3.3,5.7 6,4.9 L8.7,4.1' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
--mask-stamp-pen:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 64' preserveAspectRatio='none'%3E%3Cpath d='M2.6,4.2 Q60.2,2.5 89.9,3.2 Q119.6,3.9 150,3 Q180.4,2.2 209.2,2.9 Q238,3.7 237.2,12.8 Q236.4,21.8 237.7,30.6 Q239.1,39.5 237.7,49.6 Q236.4,59.7 208,60.3 Q179.7,60.9 150.1,60.6 Q120.6,60.3 90.5,61 Q60.5,61.6 31.9,60.7 Q3.4,59.8 3,49.7 Q2.5,39.5 3.5,29.7 Q4.6,19.8 3.6,11.6 L2.6,3.4' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M9.5,3.5 Q89.9,1.7 129.9,2.4 Q169.8,3.2 197.7,2.2 L225.6,1.2' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
--mk-underline-double-chalk:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 24' preserveAspectRatio='none'%3E%3Cpath d='M3.9,10.1 C60.8,5.9 130,13.2 235.4,7' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M22.3,18.6 C79.2,13.6 149.2,20.6 212.4,14.1' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
--mk-underline-wave-chalk:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 20' preserveAspectRatio='none'%3E%3Cpath d='M4.6,15.2 Q18.8,4.1 25.8,10.6 Q32.8,17.1 39.7,9.6 Q46.6,2.2 54.7,8.4 Q62.7,14.6 69.3,9.6 Q75.8,4.5 83.8,9.6 Q91.8,14.7 98.6,9.4 Q105.4,4.2 112.5,10.5 Q119.7,16.8 126.8,10.7 Q133.9,4.6 141,10.1 Q148.2,15.6 156.1,9.9 Q164.1,4.3 171,9.7 Q177.9,15.2 185.2,9.4 Q192.5,3.6 199.3,9.5 Q206.2,15.5 214.2,10.7 Q222.3,6 229.3,10.3 L236.3,14.5' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
--mk-strike-chalk:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 20' preserveAspectRatio='none'%3E%3Cpath d='M1.5,12.4 C70.4,6.7 159.4,13.5 237.3,6.5' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M24.5,8.3 C90.1,13.4 169.6,5.9 222.7,12.2' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
--mk-circle-double-chalk:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 120' preserveAspectRatio='none'%3E%3Cpath d='M28.9,32.1 Q48.5,20.1 61.9,17.1 Q75.3,14.2 89.7,12.8 Q104.1,11.4 117.4,12.9 Q130.7,14.4 142.5,17.5 Q154.3,20.6 163.6,24.8 Q172.9,29 179.8,34.7 Q186.6,40.4 188.8,47.9 Q190.9,55.4 190.5,62.4 Q190.2,69.4 183.7,76.5 Q177.3,83.7 167.8,90.1 Q158.3,96.4 144.4,100.1 Q130.5,103.8 116.7,105.2 Q103,106.5 89.3,107 Q75.6,107.5 63.7,104.6 Q51.8,101.7 41.5,97.7 Q31.2,93.7 23,88.5 Q14.8,83.4 10.6,76.4 Q6.4,69.5 7.5,62.1 Q8.6,54.6 13,47.1 Q17.4,39.6 26.9,33.7 Q36.4,27.7 49.6,23.1 L62.8,18.5' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M67.1,21 Q92.5,17.3 105.2,18.7 Q117.9,20.1 129.2,23.6 Q140.4,27.2 151,31.2 Q161.7,35.2 168.7,40.8 Q175.8,46.4 179.7,52.5 Q183.6,58.5 184,65 Q184.4,71.5 181,77.9 Q177.6,84.4 170.5,89.8 Q163.4,95.3 151.4,98.2 Q139.4,101 126.7,101.8 Q114,102.6 101.8,101.8 Q89.6,100.9 77.5,98.5 Q65.4,96.1 55.5,92.2 Q45.5,88.4 37.2,83.4 Q28.9,78.5 23.7,72.1 Q18.5,65.6 17.6,59 Q16.7,52.3 19.4,46.4 Q22,40.5 28.6,34.6 Q35.1,28.7 46.5,25.7 L58,22.7' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
--mk-arrow-curve-down-chalk:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 150' preserveAspectRatio='none'%3E%3Cpath d='M10.9,11 C120.5,-0.7 206,39 188.8,126.4' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M168.6,102.9 L186.5,131.7' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M213.4,107.6 L187.6,132.5' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
--mk-arrow-right-chalk:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 60' preserveAspectRatio='none'%3E%3Cpath d='M3.7,32 C69.8,24.9 149.8,37.3 230.5,30.3' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M209.1,11.6 L231.7,29.4' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M216.4,49.7 L231.5,31.8' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
--mk-arrow-bend-chalk:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 140' preserveAspectRatio='none'%3E%3Cpath d='M8,16.6 C100.9,7.6 165.5,34.4 150.3,117.2' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M129.1,95.8 L150.4,123.6' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M176,99.7 L151.6,124.8' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
--mk-tick-chalk:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' preserveAspectRatio='none'%3E%3Cpath d='M5.4,27.3 Q17.7,40.5 30.3,23.2 L43,6' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M9,23.9 Q18.6,39.6 32,24.1 L45.3,8.7' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
--mk-box-chalk:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' preserveAspectRatio='none'%3E%3Cpath d='M8.3,6.5 Q34,4 34.9,19.5 Q35.8,34.9 20.2,34.6 Q4.6,34.4 4.1,22 L3.6,9.6' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M2.7,11.6 Q3.3,5.7 6,4.9 L8.7,4.1' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
--mask-stamp-chalk:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 64' preserveAspectRatio='none'%3E%3Cpath d='M2.6,4.2 Q60.2,2.5 89.9,3.2 Q119.6,3.9 150,3 Q180.4,2.2 209.2,2.9 Q238,3.7 237.2,12.8 Q236.4,21.8 237.7,30.6 Q239.1,39.5 237.7,49.6 Q236.4,59.7 208,60.3 Q179.7,60.9 150.1,60.6 Q120.6,60.3 90.5,61 Q60.5,61.6 31.9,60.7 Q3.4,59.8 3,49.7 Q2.5,39.5 3.5,29.7 Q4.6,19.8 3.6,11.6 L2.6,3.4' fill='none' stroke='%23000' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M9.5,3.5 Q89.9,1.7 129.9,2.4 Q169.8,3.2 197.7,2.2 L225.6,1.2' fill='none' stroke='%23000' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
--mask-chevrons:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 24' preserveAspectRatio='xMidYMid meet'%3E%3Cpolygon points='6,2 15,2 12,22 3,22' fill='%23000'/%3E%3Cpolygon points='20,2 29,2 26,22 17,22' fill='%23000'/%3E%3Cpolygon points='34,2 43,2 40,22 31,22' fill='%23000'/%3E%3C/svg%3E");
}
@font-face { font-family: "Barlow Condensed Fallback"; src: local("Arial Narrow Bold"), local("ArialNarrow-Bold"), local("Arial Narrow"); font-weight: 700 900; size-adjust: 98%; ascent-override: 100%; descent-override: 20%; line-gap-override: 0%; }   
@font-face { font-family: "Krengo Wordmark"; src: url("../fonts/krengo-wordmark.woff2") format("woff2"); font-weight: 500; font-display: block; }
@font-face { font-family: "Fraunces Fallback"; src: local("Georgia"); font-weight: 300 800; size-adjust: 85.3%; }
@font-face { font-family: "Fraunces Fallback H"; src: local("Georgia Bold"), local("Georgia-Bold"), local("Georgia"); font-weight: 300 800; size-adjust: 79.4%; }
@font-face { font-family: "Caveat Fallback"; src: local("Bradley Hand"), local("BradleyHandITCTT-Bold"), local("Segoe Print"); font-weight: 500 700; size-adjust: 79.5%; }
@font-face { font-family: "Mono Fallback"; src: local("Menlo"), local("Consolas"), local("DejaVu Sans Mono"); font-weight: 400 700; size-adjust: 105%; }
*, *::before, *::after { box-sizing: border-box; }
html {
-webkit-text-size-adjust: 100%; text-size-adjust: 100%;
overflow-x: clip;
scroll-padding-top: calc(var(--header-h) + 16px);
background: var(--asphalt);
}
body {
margin: 0; overflow-x: clip; min-height: 100vh;
background: var(--bg); color: var(--fg);
font-family: var(--f-serif); font-size: var(--fs-body); line-height: 1.58; font-weight: 400;
font-variation-settings: "SOFT" 0; font-optical-sizing: auto; font-style: normal;
-webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5, h6, p, figure, blockquote, ol, ul, dl, dd { margin: 0; }
ol, ul { padding: 0; list-style: none; }
img, svg, canvas, video { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; text-decoration-skip-ink: auto; }
em, i, cite, address { font-style: normal; }    
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
::selection { background: var(--signal); color: var(--asphalt); }
[data-surface="paper"] ::selection { background: var(--pen); color: var(--sheet); }
.sr-only {
position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.skip-link {
position: fixed; top: 8px; left: 8px; z-index: var(--z-skip);
padding: 14px 20px; min-height: var(--tap);
background: var(--chalk); color: var(--asphalt); border-radius: var(--radius);
font: 800 var(--fs-btn)/1 var(--f-caps); text-transform: uppercase; letter-spacing: .04em; text-decoration: none;
transform: translateY(-220%);
}
.skip-link:focus { transform: none; outline: 3px solid var(--signal); outline-offset: 3px; }
html:not(.js) .js-only { display: none !important; }
:root, [data-surface="asphalt"] {
--mk-underline-double: var(--mk-underline-double-chalk); --mk-underline-wave: var(--mk-underline-wave-chalk);
--mk-strike: var(--mk-strike-chalk); --mk-circle-double: var(--mk-circle-double-chalk);
--mk-arrow-curve-down: var(--mk-arrow-curve-down-chalk); --mk-arrow-right: var(--mk-arrow-right-chalk);
--mk-arrow-bend: var(--mk-arrow-bend-chalk); --mk-tick: var(--mk-tick-chalk); --mk-box: var(--mk-box-chalk);
--mask-stamp: var(--mask-stamp-chalk);
}
[data-surface="paper"] {
--mk-underline-double: var(--mk-underline-double-pen); --mk-underline-wave: var(--mk-underline-wave-pen);
--mk-strike: var(--mk-strike-pen); --mk-circle-double: var(--mk-circle-double-pen);
--mk-arrow-curve-down: var(--mk-arrow-curve-down-pen); --mk-arrow-right: var(--mk-arrow-right-pen);
--mk-arrow-bend: var(--mk-arrow-bend-pen); --mk-tick: var(--mk-tick-pen); --mk-box: var(--mk-box-pen);
--mask-stamp: var(--mask-stamp-pen);
}
.t-d1, .t-d1b, .t-h2-road, .t-h3-road, .t-num-xl, .t-num-l, .t-readout, .t-num-sheet, .t-btn, .t-nav {
font-family: var(--f-caps); text-transform: uppercase; font-optical-sizing: auto;
}
.t-d1 { word-spacing: .08em; font-family: "Barlow Condensed", "Barlow Condensed Fallback", "Arial Narrow", Impact, sans-serif; font-weight: 900; font-stretch: 62%; font-size: var(--fs-d1); line-height: .82; letter-spacing: -.015em; }
.t-d1b { word-spacing: .06em; font-family: "Barlow Condensed", "Barlow Condensed Fallback", "Arial Narrow", Impact, sans-serif; font-weight: 900; font-stretch: 75%; font-size: var(--fs-d1b); line-height: .96; }   
.t-h2-road { word-spacing: .07em; font-family: "Barlow Condensed", "Barlow Condensed Fallback", "Arial Narrow", Impact, sans-serif; font-weight: 900; font-stretch: 70%; font-size: var(--fs-h2-road); line-height: .9; letter-spacing: -.01em; }
.t-h2-paper { font-family: "Fraunces", "Fraunces Fallback H", Georgia, serif; font-weight: 760; font-variation-settings: "SOFT" 30, "opsz" 144; font-size: var(--fs-h2-paper); line-height: 1.03; letter-spacing: -.012em; word-spacing: .12em; }
.t-h3-road { font-family: "Barlow Condensed", "Barlow Condensed Fallback", Arial, sans-serif; font-weight: 800; font-stretch: 85%; font-size: var(--fs-h3-road); line-height: 1; }
.t-h3-paper { font-family: "Fraunces", "Fraunces Fallback H", Georgia, serif; font-weight: 620; font-variation-settings: "SOFT" 30; font-size: var(--fs-h3-paper); line-height: 1.15; }
.t-num-xl, .t-num-l, .t-readout, .t-num-sheet {
font-family: "Barlow Condensed", "Barlow Condensed Fallback", "Arial Narrow", Impact, sans-serif;
font-weight: 900; font-stretch: 75%; font-variant-numeric: tabular-nums lining-nums;
}
.t-num-xl { font-size: var(--fs-num-xl); line-height: .8; }
.t-num-l { font-size: var(--fs-num-l); line-height: .85; }
.t-readout { font-size: var(--fs-readout); line-height: .85; }
.t-num-sheet { font-size: var(--fs-num-sheet); line-height: .9; }
.t-lede { font-size: var(--fs-lede); line-height: 1.45; max-width: 46ch; text-wrap: pretty; }
.t-body { font-size: var(--fs-body); line-height: 1.58; max-width: 62ch; text-wrap: pretty; }
.t-small { font-size: var(--fs-small); line-height: 1.5; text-wrap: pretty; }
.t-hand-l, .t-hand-m, .hand { font-family: "Caveat", "Caveat Fallback", "Bradley Hand", "Segoe Print", cursive; color: var(--hand); font-variation-settings: normal; font-weight: 600; }
.t-hand-l { font-weight: 700; font-size: var(--fs-hand-l); line-height: 1.05; }
.t-hand-m { font-size: var(--fs-hand-m); line-height: 1.1; }
.t-kicker, .t-mono, .kicker {
font-family: "Atkinson Hyperlegible Mono", "Mono Fallback", ui-monospace, Menlo, monospace; font-variation-settings: normal;
}
.t-kicker, .kicker { font-weight: 600; font-size: var(--fs-kicker); line-height: 1.3; letter-spacing: .08em; text-transform: uppercase; color: var(--fg-2); }
.t-mono { font-weight: 400; font-size: var(--fs-mono); line-height: 1.45; letter-spacing: .02em; }
.t-btn { font-family: "Barlow Condensed", "Barlow Condensed Fallback", Arial, sans-serif; font-weight: 800; font-stretch: 100%; font-size: var(--fs-btn); line-height: 1; letter-spacing: .04em; }
.t-nav { font-family: "Barlow Condensed", "Barlow Condensed Fallback", Arial, sans-serif; font-weight: 700; font-stretch: 100%; font-size: var(--fs-nav); line-height: 1; letter-spacing: .06em; }
.t-mute { color: var(--fg-2); }
.t-hot { color: var(--accent-t); }
h1, h2, h3, .t-d1, .t-d1b, .t-h2-road, .t-h2-paper { text-wrap: balance; }
.t-hot-num { color: var(--lean-r); }                       
.t-pen { color: var(--lean-l); }
.ln { display: block; overflow: clip; padding-block: .05em; margin-block: -.05em; }
.ln > span { display: block; }
.w { display: inline-block; }                              
.tnum { font-variant-numeric: tabular-nums lining-nums; }
.prose > * + * { margin-top: 1em; }
.prose a, .link {
text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: .2em;
text-decoration-color: var(--accent-t);
transition: text-decoration-thickness var(--d-hover) var(--ease-speed);
}
.prose a:hover, .link:hover { text-decoration-thickness: 3px; }
.link--plain { text-decoration-color: currentColor; }
.wrap {
position: relative;                                       
width: min(100% - 2 * var(--m), var(--maxw)); margin-inline: auto;
display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); column-gap: var(--g);
}
.wrap > * { min-width: 0; }
.sec { position: relative; padding-block: var(--sec-pad); color: var(--fg); }
.sec--asphalt {
background: var(--tex-aggregate-asphalt) 0 0 / 260px 260px, var(--asphalt);
}
.sec--paper {
background: var(--tex-fibre-paper) 0 0 / 320px 320px, var(--tex-tone-paper) 0 0 / 900px 900px, var(--paper);
}
.sec::before {
content: ""; position: absolute; inset: 0; z-index: var(--z-bg); pointer-events: none;
background-image: var(--grain); background-size: var(--grain-size);
opacity: var(--grain-o); mix-blend-mode: var(--grain-blend);
}
.sec--asphalt, .sec--paper { overflow-x: clip; }
.sec--overhang { overflow-x: clip; overflow-y: visible; }   
.rail-grid { --spine-pad: 24px; }
.rail-grid > .rail, .rail-grid > .main { grid-column: 1 / -1; }
.rail-grid > .rail { margin-bottom: var(--sp-4); padding-left: var(--spine-pad); }
.rail-grid > .main { padding-left: var(--spine-pad); }
.rail-grid > .spine, .spine { position: absolute; z-index: 1; top: 0; bottom: 0; left: 0; width: 2px; background: var(--ink); transform-origin: top; transform: scaleY(var(--p, 1)); border-radius: 1px; }
@media (min-width: 960px) {
.rail-grid > .rail { grid-column: 1 / 3; margin-bottom: 0; padding-left: 0; }
.rail-grid > .main { grid-column: 3 / -1; padding-left: 0; }
.rail-grid > .spine { left: calc((100% - 11 * var(--g)) / 12 * 2 + 2 * var(--g) - 16px); }
}
.spine__dot {
position: absolute; left: -7px; width: 16px; height: 16px; border-radius: 50%;
border: 2px solid var(--ink); background: var(--paper);
}
.spine__dot::after {
content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--ink);
transform: scale(var(--inked, 1));
}
.spine__dot--hot { border-color: var(--signal-g); } .spine__dot--hot::after { background: var(--signal-g); }
.seam {
position: absolute; left: 0; right: 0; height: var(--seam-h); z-index: var(--z-seam);
pointer-events: none;
color: var(--seam-fill, color-mix(in srgb, var(--paper) 90%, #5d3b08));
--torn: var(--mask-torn-a); --lip: var(--mask-lip-a);
}
.seam--b { --torn: var(--mask-torn-b); --lip: var(--mask-lip-b); }
.seam--top { top: calc(-1 * var(--seam-h) + 1px); }
.seam--bottom { bottom: calc(-1 * var(--seam-h) + 1px); transform: scaleY(-1); }
.seam::before, .seam::after {
content: ""; position: absolute; inset: 0;
-webkit-mask-size: 960px 100%; mask-size: 960px 100%; -webkit-mask-repeat: repeat-x; mask-repeat: repeat-x;
}
.seam::before { background: currentColor; -webkit-mask-image: var(--torn); mask-image: var(--torn); }
.seam::after { background: var(--polaroid); opacity: .7; -webkit-mask-image: var(--lip); mask-image: var(--lip); }
.seam > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.seam:has(> svg)::before, .seam:has(> svg)::after { display: none; }   
.site-header {
position: sticky; top: 0; z-index: var(--z-header); height: var(--header-h);
background: var(--bg); color: var(--fg);
transition: background-color 220ms var(--ease-speed), color 220ms var(--ease-speed), box-shadow 220ms var(--ease-speed);
}
.site-header.is-scrolled { box-shadow: 0 1px 0 var(--hair); }
.nav { height: 100%; width: min(100% - 2 * var(--m), var(--maxw)); margin-inline: auto; display: flex; align-items: center; gap: var(--sp-4); }
.brand { display: inline-flex; align-items: center; gap: 8px; margin-right: auto; text-decoration: none; min-height: var(--tap); }
.brand__mark { width: 28px; height: 28px; }
.brand__mark--paper { display: none; }
[data-surface="paper"] .brand__mark--dark { display: none; }
[data-surface="paper"] .brand__mark--paper { display: block; }
.brand__word { font-family: var(--f-mark); font-weight: 500; font-size: 20px; line-height: 1; letter-spacing: .01em; text-transform: lowercase; }
.nav__panel {
position: fixed; inset: 0; z-index: var(--z-menu); display: flex; flex-direction: column; justify-content: center;
gap: var(--sp-1); padding: calc(var(--header-h) + var(--sp-5)) var(--m) var(--sp-7);
visibility: hidden; transform: translateX(100%);
transition: transform var(--d-ui) var(--ease-speed), visibility 0s linear var(--d-ui);
}
.nav__panel.is-open { visibility: visible; transform: none; transition: transform var(--d-ui) var(--ease-speed), visibility 0s; }
@media (max-width: 1179.98px) {
.nav__panel { background: var(--asphalt); color: var(--chalk); --fg: var(--chalk); --fg-2: var(--mute); --hair: var(--line); --accent-t: var(--signal); --focus: var(--signal); }
.nav__panel .nav__link { font: 900 var(--fs-h2-road)/1 "Barlow Condensed", "Barlow Condensed Fallback", "Arial Narrow", sans-serif; font-stretch: 70%; letter-spacing: -.01em; min-height: 56px; }
.nav__panel .nav__link::after { display: none; }
}
.nav__link {
position: relative; display: inline-flex; align-items: center; min-height: var(--tap); padding-inline: 2px;
font-family: "Barlow Condensed", "Barlow Condensed Fallback", Arial, sans-serif; font-weight: 700; font-stretch: 100%; font-size: var(--fs-nav); letter-spacing: .06em;
text-transform: uppercase; text-decoration: none; color: var(--fg);
}
.nav__link::after {
content: ""; position: absolute; left: 0; right: 0; bottom: 6px; height: 3px; background: var(--lean-r);
transform: scaleX(0) skewX(-20deg); transform-origin: left; transition: transform var(--d-ui) var(--ease-speed);
}
.nav__link:hover::after, .nav__link:focus-visible::after, .nav__link[aria-current]::after { transform: scaleX(1) skewX(-20deg); }
.nav__menu-btn {
position: relative; width: var(--tap); height: var(--tap); flex: none; margin-right: -10px; z-index: calc(var(--z-menu) + 1);
}
.nav__menu-btn span, .nav__menu-btn::before, .nav__menu-btn::after {
content: ""; position: absolute; left: 10px; right: 10px; height: 2.5px; background: currentColor; border-radius: 1px;
transition: transform var(--d-ui) var(--ease-speed), opacity var(--d-hover) linear;
}
.nav__menu-btn::before { top: 15px; } .nav__menu-btn span { top: 21px; } .nav__menu-btn::after { top: 27px; }
.nav__menu-btn[aria-expanded="true"] { color: var(--chalk); }
.nav__menu-btn[aria-expanded="true"]::before { transform: translateY(6px) rotate(45deg); }
.nav__menu-btn[aria-expanded="true"]::after { transform: translateY(-6px) rotate(-45deg); }
.nav__menu-btn[aria-expanded="true"] span { opacity: 0; }
@media (min-width: 1180px) {
.nav { gap: var(--sp-5); }
.nav__menu-btn { display: none; }
.nav__panel {
position: static; inset: auto; z-index: auto; flex-direction: row; align-items: center; justify-content: flex-end; gap: var(--sp-5);
padding: 0; visibility: visible; transform: none; background: none; transition: none;
}
}
@media (max-width: 1179.98px) {
.site-header:has(.nav__panel.is-open) .brand { position: relative; z-index: calc(var(--z-menu) + 1); color: var(--chalk); }
.site-header:has(.nav__panel.is-open) .brand__mark--dark { display: block; }
.site-header:has(.nav__panel.is-open) .brand__mark--paper { display: none; }
}
@media (max-width: 1179.98px) { .nav .btn--cta { margin-left: auto; } .nav .brand { margin-right: 0; } .nav__menu-btn { margin-left: var(--sp-2); } }
.btn {
position: relative; display: inline-flex; align-items: center; justify-content: center;
min-height: 48px; padding: 0 22px; border-radius: var(--radius); border: 1.5px solid transparent;
font-family: "Barlow Condensed", "Barlow Condensed Fallback", Arial, sans-serif;   
font-weight: 800; font-stretch: 100%; font-size: var(--fs-btn); line-height: 1;
letter-spacing: .04em; text-transform: uppercase; text-decoration: none; white-space: nowrap; cursor: pointer;
transition: transform var(--d-press) var(--ease-speed), background-color var(--d-hover) linear, color var(--d-hover) linear;
-webkit-tap-highlight-color: transparent;
}
.btn__in { display: inline-flex; align-items: center; transition: transform var(--d-hover) var(--ease-speed); }
.btn--signal { background: var(--signal); color: var(--asphalt); }
.btn--ghost { border-color: var(--fg); color: var(--fg); background: transparent; }
.btn--ink { background: var(--ink); color: var(--sheet); }
.btn--sm { min-height: var(--tap); padding: 0 14px; }
.btn--block { display: flex; width: 100%; }
.btn--go .btn__in::after {
content: ""; width: 1.7em; height: .85em; margin-left: .7em; background: currentColor;
-webkit-mask: var(--mask-chevrons) center / contain no-repeat; mask: var(--mask-chevrons) center / contain no-repeat;
}
.btn:active { transform: scale(.98); transition-duration: var(--d-press); }
@media (hover: hover) {
.btn:hover .btn__in { transform: translateX(4px) skewX(-6deg); }
.btn--ghost:hover { background: var(--fg); color: var(--bg); }
}
.btn:focus-visible .btn__in { transform: translateX(4px) skewX(-6deg); }
.field { display: grid; gap: 6px; }
.field__label { font: 600 var(--fs-kicker)/1.3 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--fg-2); }
.field__help { font: 400 var(--fs-mono)/1.45 var(--f-mono); letter-spacing: .02em; color: var(--fg-2); }
.input {
width: 100%; min-height: 48px; padding: 10px 2px 8px; background: transparent; color: var(--fg);
border: 0; border-bottom: 2px solid var(--fg); border-radius: 0;
font-family: var(--f-serif); font-size: var(--fs-body); line-height: 1.3;
}
.input::placeholder { color: var(--fg-2); opacity: .8; }
.input:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-bottom-color: var(--focus); }
.input[aria-invalid="true"] { border-bottom-style: dashed; }
.field__error { font: 600 var(--fs-mono)/1.4 var(--f-mono); color: var(--accent-t); }
.field__error::before { content: "Not sent: "; }          
.check { position: relative; display: grid; grid-template-columns: 28px 1fr; gap: 12px; align-items: start; min-height: var(--tap); padding-block: 8px; cursor: pointer; font-size: var(--fs-small); line-height: 1.45; }
.check input { position: absolute; left: -8px; top: 0; width: var(--tap); height: var(--tap); margin: 0; opacity: 0; cursor: pointer; }
.check__box { position: relative; width: 28px; height: 28px; margin-top: 1px; }
.check__box::before {
content: ""; position: absolute; inset: 0; background: var(--fg);
-webkit-mask: var(--mk-box) center / 100% 100% no-repeat; mask: var(--mk-box) center / 100% 100% no-repeat;
}
.check__box::after {
content: ""; position: absolute; inset: -6px -4px 2px -2px; background: var(--hand);
-webkit-mask: var(--mk-tick) center / contain no-repeat; mask: var(--mk-tick) center / contain no-repeat;
clip-path: inset(0 100% 0 0); transition: clip-path var(--d-small) var(--ease-pen);
}
.check input:checked + .check__box::after { clip-path: inset(0); }
.check input:focus-visible + .check__box { outline: 3px solid var(--focus); outline-offset: 4px; }
.range { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: var(--tap); margin: 0; padding: 0; background: transparent; cursor: pointer; touch-action: pan-y; }
.range::-webkit-slider-runnable-track {
height: 4px; border-radius: 2px;
background: linear-gradient(to right, var(--hair) 0 var(--from, 0%), var(--lean-r) var(--from, 0%) var(--to, 50%), var(--hair) var(--to, 50%));
}
.range::-moz-range-track {
height: 4px; border-radius: 2px;
background: linear-gradient(to right, var(--hair) 0 var(--from, 0%), var(--lean-r) var(--from, 0%) var(--to, 50%), var(--hair) var(--to, 50%));
}
.range::-webkit-slider-thumb {
-webkit-appearance: none; appearance: none; width: 44px; height: 56px; margin-top: -26px;
border: 11px solid transparent; border-radius: 4px; background: var(--lean-r); background-clip: padding-box;
transform: skewX(-8deg); transition: transform var(--d-hover) var(--ease-speed);
}
.range::-moz-range-thumb {
width: 22px; height: 34px; border: 11px solid transparent; border-radius: 4px; background: var(--lean-r); background-clip: padding-box;
box-sizing: content-box; transform: skewX(-8deg);
}
.range:active::-webkit-slider-thumb { transform: skewX(-8deg) scale(.96); }
.range:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.tabs { display: flex; gap: var(--sp-1); overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; max-width: 100%; }
.tabs::-webkit-scrollbar { display: none; }
.tabs__tab {
flex: none; min-height: var(--tap); padding: 0 16px; position: relative;
font-family: var(--f-caps); font-weight: 800; font-stretch: 100%; font-size: var(--fs-btn); letter-spacing: .04em; text-transform: uppercase;
color: var(--fg-2); transition: color var(--d-hover) linear;
}
.tabs__tab::after {
content: ""; position: absolute; left: 8px; right: 8px; bottom: 4px; height: 3px; background: var(--lean-r);
transform: scaleX(0) skewX(-20deg); transform-origin: left; transition: transform var(--d-ui) var(--ease-speed);
}
.tabs__tab[aria-selected="true"] { color: var(--fg); }
.tabs__tab[aria-selected="true"]::after { transform: scaleX(1) skewX(-20deg); }
@media (hover: hover) { .tabs__tab:hover { color: var(--fg); } }
.sheet, .polaroid, .index-card, .instrument, .log-strip { position: relative; isolation: isolate; border-radius: var(--radius); rotate: var(--rot, 0deg); }
.sheet::before, .polaroid::before, .index-card::before, .log-strip::before {
content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
background-image: var(--tex-grain-paper), var(--tex-fibre-paper); background-size: 220px, 320px;
opacity: .08; mix-blend-mode: multiply;
}
.instrument::before {
content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
background-image: var(--tex-grain-asphalt); background-size: 180px; opacity: .05; mix-blend-mode: screen;
}
.sheet { background: var(--sheet); color: var(--ink); padding: 28px; box-shadow: var(--lift-sheet); }
.sheet--cq { container-type: inline-size; }
.sheet--ruled {
background-image: repeating-linear-gradient(to bottom, transparent 0 31px, var(--rule) 31px 32px);
background-position: 0 56px; background-size: 100% calc(100% - 56px); background-repeat: no-repeat;
}
.sec--paper .sheet, .sec--paper .instrument, .sec--paper .index-card, .sec--paper .log-strip { box-shadow: var(--lift-sheet-on-paper); }
.sec--paper .polaroid { box-shadow: var(--lift-polaroid-on-paper); }
.polaroid { background: var(--polaroid); color: var(--ink); padding: 12px 12px 0; box-shadow: var(--lift-polaroid); width: var(--w, 320px); max-width: 100%; }
.polaroid__img { width: 100%; height: auto; aspect-ratio: var(--ar, 4 / 3); object-fit: cover; background: var(--paper-2); }
.polaroid__cap { min-height: 44px; display: flex; align-items: center; padding: 4px 2px 6px; font-family: var(--f-hand); font-weight: 600; font-size: 22px; line-height: 1.05; color: var(--pen); }
.index-card {
background-color: var(--sheet); color: var(--ink); padding: 18px 20px 20px; border-top: 3px solid var(--signal-g);
box-shadow: var(--lift-sheet);
background-image: linear-gradient(var(--rule), var(--rule)); background-repeat: no-repeat;
background-size: calc(100% - 40px) 1px; background-position: 20px calc(100% - 20px);
}
a.index-card, .index-card--link { display: block; text-decoration: none; transition: transform var(--d-paper) var(--ease-settle), translate var(--d-paper) var(--ease-settle), rotate var(--d-paper) var(--ease-settle); }
.index-card__cat { display: inline-block; position: relative; font-family: var(--f-hand); font-weight: 600; font-size: 22px; line-height: 1.1; color: var(--pen); }
.index-card__cat::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 3px; background: var(--pen); clip-path: inset(0 100% 0 0); transition: clip-path 280ms var(--ease-pen); }
@media (hover: hover) {
a.index-card:hover, .index-card--link:hover { rotate: 0deg; translate: 0 -8px; }
a.index-card:hover .index-card__cat::after { clip-path: inset(0); }
}
a.index-card:focus-visible { rotate: 0deg; translate: 0 -8px; }
a.index-card:focus-visible .index-card__cat::after { clip-path: inset(0); }
.instrument { background: var(--tar); color: var(--chalk); padding: 24px; box-shadow: 0 0 0 1px rgba(242, 239, 230, .1) inset, var(--lift-sheet); }
.sec--paper .instrument { box-shadow: 0 0 0 1px rgba(242, 239, 230, .1) inset, 0 12px 24px -14px rgba(60, 40, 10, .5); }
.log-strip { background: var(--sheet); color: var(--ink); padding: 14px 10px; font: 400 12px/32px var(--f-mono); white-space: nowrap; letter-spacing: .02em; box-shadow: var(--lift-sheet);
background-image: repeating-linear-gradient(to bottom, transparent 0 31px, var(--rule) 31px 32px); }
.ticket { position: relative; rotate: var(--rot, 0deg); filter: drop-shadow(0 10px 12px rgba(60, 40, 10, .28)); }
.ticket__paper {
position: relative; isolation: isolate; background: var(--sheet); color: var(--ink); padding: 28px 28px 28px 44px;
-webkit-mask: radial-gradient(circle 6px at 0 11px, #0000 5.5px, #000 6.5px) 0 0 / 100% 22px repeat-y;
mask: radial-gradient(circle 6px at 0 11px, #0000 5.5px, #000 6.5px) 0 0 / 100% 22px repeat-y;
}
.ticket__paper::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: var(--tex-grain-paper), var(--tex-fibre-paper); background-size: 220px, 320px; opacity: .08; mix-blend-mode: multiply; pointer-events: none; }
.ticket__paper::after { content: ""; position: absolute; left: 22px; top: 12px; bottom: 12px; border-left: 1.5px dashed var(--rule); pointer-events: none; }
@media (max-width: 959.98px) {
.ticket__paper {
padding: 44px 24px 28px;
-webkit-mask: radial-gradient(circle 6px at 11px 0, #0000 5.5px, #000 6.5px) 0 0 / 22px 100% repeat-x;
mask: radial-gradient(circle 6px at 11px 0, #0000 5.5px, #000 6.5px) 0 0 / 22px 100% repeat-x;
}
.ticket__paper::after { left: 12px; right: 12px; top: 22px; bottom: auto; border-left: 0; border-top: 1.5px dashed var(--rule); }
}
.tape {
position: absolute; z-index: var(--z-tape); width: var(--w, 110px); height: var(--h, 30px); rotate: var(--rot, -4deg);
pointer-events: none; opacity: .88;
background:
repeating-linear-gradient(90deg, rgba(120, 90, 20, .32) 0 2px, transparent 2px 6px) 0 3px / 100% 1px repeat-x,
repeating-linear-gradient(90deg, rgba(120, 90, 20, .32) 0 2px, transparent 2px 6px) 0 calc(100% - 3px) / 100% 1px repeat-x,
repeating-linear-gradient(0deg, rgba(120, 90, 20, .10) 0 1px, transparent 1px 4px),
linear-gradient(180deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 40%),
var(--tape);
clip-path: polygon(0 0, 100% 0, calc(100% - 3px) 14%, 100% 28%, calc(100% - 4px) 42%, 100% 57%, calc(100% - 3px) 71%, 100% 85%, calc(100% - 2px) 100%, 0 100%, 3px 86%, 0 72%, 4px 57%, 0 43%, 3px 28%, 0 14%);
}
.sec--paper .tape, [data-surface="paper"] .tape { mix-blend-mode: multiply; }
.instrument .tape { mix-blend-mode: normal; }                
.tape--a { --w: 120px; --h: 34px; } .tape--b { --w: 92px; --h: 30px; } .tape--c { --w: 220px; --h: 34px; }
.tape--tl { top: -14px; left: -26px; --rot: -8deg; }
.tape--tr { top: -14px; right: -22px; --rot: 5deg; }
.tape--tc { top: -16px; left: calc(50% - var(--w) / 2); --rot: -2deg; }
.tape--bl { bottom: -12px; left: -22px; --rot: 6deg; }
.tape--br { bottom: -12px; right: -26px; --rot: -5deg; }
.tape > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.tape:has(> svg) { background: none; clip-path: none; }
.stamp, .chip {
position: relative; display: inline-flex; align-items: center; isolation: isolate; rotate: var(--rot, 0deg);
padding: .55em 1em .5em; color: var(--hand);
font-family: var(--f-mono); font-weight: 700; font-size: var(--fs-kicker); line-height: 1.2; letter-spacing: .1em; text-transform: uppercase;
}
.stamp::before, .chip::before {
content: ""; position: absolute; inset: 0; z-index: -1; background: currentColor;
-webkit-mask: var(--mask-stamp) 0 0 / 100% 100% no-repeat; mask: var(--mask-stamp) 0 0 / 100% 100% no-repeat;
}
.stamp { white-space: nowrap; }
.chip { font-size: 12px; padding: .5em .85em .45em; }
.chip[data-state="built"] { color: var(--fg); }
.note { font-family: var(--f-hand); font-weight: 600; font-size: var(--fs-hand-m); line-height: 1.1; color: var(--hand); max-width: 16ch; }
.mk {
position: absolute; pointer-events: none; background: var(--mk-color, var(--hand));
-webkit-mask: var(--mk) 0 0 / 100% 100% no-repeat; mask: var(--mk) 0 0 / 100% 100% no-repeat;
clip-path: inset(0 calc((1 - var(--p, 1)) * 100%) 0 0);
}
.mk--underline-double { --mk: var(--mk-underline-double); aspect-ratio: 240 / 24; }
.mk--underline-wave { --mk: var(--mk-underline-wave); aspect-ratio: 240 / 20; }
.mk--strike { --mk: var(--mk-strike); aspect-ratio: 240 / 20; }
.mk--circle-double { --mk: var(--mk-circle-double); aspect-ratio: 200 / 120; }
.mk--arrow-curve-down { --mk: var(--mk-arrow-curve-down); aspect-ratio: 220 / 150; }
.mk--arrow-right { --mk: var(--mk-arrow-right); aspect-ratio: 240 / 60; }
.mk--arrow-bend { --mk: var(--mk-arrow-bend); aspect-ratio: 200 / 140; }
.mk--tick { --mk: var(--mk-tick); aspect-ratio: 1; }
.mk--box { --mk: var(--mk-box); aspect-ratio: 1; }
.mk--hot { --mk-color: var(--lean-r); }                    
.u { position: relative; display: inline-block; }
.u::after {
content: ""; position: absolute; left: -2%; width: 104%; bottom: -.34em; height: .36em; background: var(--mk-color, var(--hand));
-webkit-mask: var(--mk) 0 0 / 100% 100% no-repeat; mask: var(--mk) 0 0 / 100% 100% no-repeat;
clip-path: inset(0 calc((1 - var(--p, 1)) * 100%) 0 0);
}
.u--double { --mk: var(--mk-underline-double); } .u--wave { --mk: var(--mk-underline-wave); }
.u--strike::after { --mk: var(--mk-strike); bottom: .28em; height: .3em; }
.u--strike { --mk-color: var(--hand); }
.graph { display: block; width: 100%; height: auto; overflow: visible; }
.graph__zero { stroke: var(--fg-2); stroke-width: 1; opacity: .7; vector-effect: non-scaling-stroke; }
.graph__lap { stroke: var(--fg-2); opacity: .55; stroke-width: 1; stroke-dasharray: 2 5; vector-effect: non-scaling-stroke; }
.graph__grid { stroke: var(--hair); stroke-width: 1; stroke-dasharray: 1 7; vector-effect: non-scaling-stroke; }
.graph__r, .graph__l { fill: none; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.graph__r { stroke: var(--lean-r); } .graph__l { stroke: var(--lean-l); }
.graph__fill-r { fill: var(--lean-r); opacity: .16; } .graph__fill-l { fill: var(--lean-l); opacity: .16; }
.graph__win { fill: none; stroke: var(--fg-2); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.graph__tick { font: 400 12px var(--f-mono); fill: var(--fg-2); }
.playhead line { stroke: var(--fg); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.playhead__flag { fill: var(--fg); }
.readout { display: inline-flex; align-items: baseline; gap: .12em; color: var(--fg); }
.readout__num { display: inline-block; min-width: var(--ch, 3ch); font-variant-numeric: tabular-nums lining-nums; }
.readout__dir { font: 700 var(--fs-kicker)/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--lean-r); }
.strip { position: relative; z-index: 2; display: flex; align-items: center; min-height: 64px; overflow: hidden; padding-inline: var(--m); background: var(--tar-2); color: var(--chalk); white-space: nowrap; }
.strip__track { display: flex; align-items: center; flex: none; will-change: auto; }
.strip__item { font-family: var(--f-caps); font-weight: 800; font-stretch: 75%; font-size: 22px; letter-spacing: .02em; text-transform: uppercase; line-height: 1; }
.strip__item + .strip__item::before {
content: ""; display: inline-block; width: 34px; height: 17px; margin-inline: 24px; vertical-align: -1px; background: currentColor;
-webkit-mask: var(--mask-chevrons) center / contain no-repeat; mask: var(--mask-chevrons) center / contain no-repeat;
}
.pause-btn {
position: relative; width: var(--tap); height: var(--tap); border: 1.5px solid var(--chalk); border-radius: var(--radius);
background: rgba(10, 11, 13, .72); color: var(--chalk); display: grid; place-items: center;
}
.pause-btn::before { content: ""; width: 14px; height: 16px; background: linear-gradient(90deg, currentColor 0 5px, transparent 5px 9px, currentColor 9px); }
.pause-btn[aria-pressed="true"]::before { background: currentColor; clip-path: polygon(0 0, 100% 50%, 0 100%); width: 14px; }
.site-footer { --ghost-fs: clamp(112px, 19.4vw, 280px); position: relative; overflow: clip; background: var(--asphalt); color: var(--chalk); padding-block: var(--sp-9) calc(var(--sp-6) + var(--ghost-fs) * .66); }
.site-footer .wrap { row-gap: var(--sp-6); }
.footer__ghost { position: absolute; inset: auto 0 0; display: flex; justify-content: center; overflow: clip; pointer-events: none; user-select: none; line-height: .72; }
.footer__ghost span { font-family: "Barlow Condensed", "Barlow Condensed Fallback", "Arial Narrow", Impact, sans-serif; font-weight: 900; font-stretch: 62%; text-transform: uppercase; letter-spacing: -.01em; font-size: var(--ghost-fs); color: var(--chalk); opacity: .06; white-space: nowrap; translate: 0 .1em; }
.footer__sign { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--sp-4) var(--sp-6); padding-bottom: var(--sp-6); border-bottom: 1px solid var(--hair); }
.footer__note { font-size: clamp(36px, 22.6px + 3.43vw, 72px); line-height: 1.02; font-weight: 700; max-width: 14em; text-wrap: balance; }
.footer__dry { color: var(--chalk); }
.footer__arc { flex: none; width: clamp(150px, 20vw, 260px); color: var(--chalk); --sk-w: 2.6; opacity: .92; }
.footer__arc-svg { display: block; width: 100%; height: auto; overflow: visible; }
.footer__id { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-3); }
.footer__brand { display: flex; align-items: center; gap: 12px; }
.footer__brand .brand__mark { width: 40px; height: 40px; } .footer__brand .brand__word { font-size: 32px; }
.footer__date { color: var(--fg-2); }
.footer__ig { margin-top: var(--sp-2); }
.footer__col { grid-column: span 2; }
.footer__title { margin-bottom: var(--sp-2); }
.footer__list a { display: flex; align-items: center; min-height: var(--tap); text-decoration: none; font-size: var(--fs-small); }
.footer__list a:hover { text-decoration: underline; text-decoration-color: var(--signal); text-underline-offset: .2em; text-decoration-thickness: 2px; }
.footer__base { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-5); padding-top: var(--sp-5); border-top: 1px solid var(--hair); }
.motion-toggle { margin-left: auto; min-height: var(--tap); padding: 0 14px; border: 1.5px solid var(--hair); border-radius: var(--radius); font: 600 var(--fs-mono)/1 var(--f-mono); color: var(--fg); }
@media (max-width: 599.98px) { .footer__col { grid-column: 1 / -1; } }
@media (min-width: 960px) { .footer__id { grid-column: span 3; align-self: start; } .footer__col { grid-column: span 3; } }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
}
html[data-motion="off"] *, html[data-motion="off"] *::before, html[data-motion="off"] *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
html[data-motion="off"], html.still { scroll-behavior: auto !important; }
html.still *, html.still *::before, html.still *::after { animation: none !important; transition: none !important; }   
@media (prefers-contrast: more) {
:root { --mute: #C9D0D7; --graphite: #3D362B; --rule: #8E8268; }
.sec--asphalt, .sec--paper { background-image: none; }
.sec::before, .sheet::before, .polaroid::before, .index-card::before, .log-strip::before, .instrument::before, .ticket__paper::before { display: none; }
.tape { mix-blend-mode: normal; opacity: 1; }
}
@media (forced-colors: active) {
.tape, .seam::before, .seam::after, .mk, .u::after, .stamp::before, .chip::before { forced-color-adjust: none; }
.btn { border-color: ButtonText; }
.range::-webkit-slider-thumb { background: Highlight; }
}
@media print {
.site-header, .tape, .seam, .skip-link, .pause-btn { display: none !important; }
.sec--asphalt, .sec--paper { background: #fff; color: #000; } .sec::before { display: none; }
}
#s1 {
--s1-vh: 100svh;                        
--s1-vid-h: max(420px, calc(var(--s1-vh) * .56));   
--s1-pb: 0px;                          
--s1-sheet-rot: 1deg;
--s1-echo-x: 3px; --s1-echo-y: -2.4px; 
padding: 0;
}
html.js:not([data-motion="off"]) #s1 .s1-hide { visibility: hidden; animation: s1-unhide 0s linear 3s forwards; }
@keyframes s1-unhide { to { visibility: visible; } }
#s1 .s1__stage { position: relative; }
#s1 .s1__media { position: absolute; top: 0; left: 0; right: 0; height: var(--s1-vid-h); overflow: hidden; background: var(--asphalt); }
#s1 .s1__poster, #s1 .s1__canvas {
position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 60% 55%;
filter: brightness(.9) contrast(1.04);
}
#s1 .s1__scrim {
position: absolute; inset: 0; pointer-events: none;
background: linear-gradient(180deg, rgba(10, 11, 13, .75) 0, rgba(10, 11, 13, 0) 30%, rgba(10, 11, 13, 0) 48%, rgba(10, 11, 13, .45) 55%, var(--asphalt) 100%);   
}
@media (max-width: 1099.98px) {
#s1 .s1__media { -webkit-mask-image: linear-gradient(180deg, #000 0, #000 62%, transparent 100%); mask-image: linear-gradient(180deg, #000 0, #000 62%, transparent 100%); }
}
#s1 .s1__dip { position: absolute; inset: 0; background: var(--asphalt); opacity: 0; pointer-events: none; }
#s1 .s1__ovl { position: absolute; top: 0; left: 0; right: 0; height: var(--s1-vid-h); z-index: 3; pointer-events: none; }
#s1 .s1__ovl-grid { height: 100%; grid-template-rows: auto 1fr auto; padding-block: 16px; }
#s1 .s1__stamp { grid-row: 1; grid-column: 1 / -1; justify-self: start; align-self: start; margin: 0; color: var(--chalk); font-size: 12px; max-width: calc(100% - 52px); background: rgba(10, 11, 13, .55); border-radius: 2px; text-shadow: 0 1px 2px rgba(10, 11, 13, .8); }
#s1 .s1__stamp-x { display: none; }
#s1 .s1__pause { grid-row: 1; grid-column: 1 / -1; justify-self: end; align-self: start; pointer-events: auto; margin: -4px 0 0 0; }
#s1 .pause-btn[data-paused="true"]::before { background: currentColor; clip-path: polygon(0 0, 100% 50%, 0 100%); width: 14px; }
@media (min-width: 600px) { #s1 .s1__stamp-x { display: inline; } #s1 .s1__stamp { font-size: var(--fs-kicker); } }
#s1 .s1__wrap { position: relative; row-gap: 0; }
#s1 .s1__head, #s1 .s1__body, #s1 .s1__sheet { grid-column: 1 / -1; }
#s1 .s1__head { min-height: var(--s1-vid-h); display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: 64px; }
#s1 .s1__titlewrap { position: relative; }
#s1 .s1__h1 { position: relative; z-index: 1; margin: 0; }
#s1 .line { display: block; overflow: clip; padding-block: .1em; margin-block: -.1em; }
#s1 .line__in { display: block; }
#s1 .line--a { white-space: nowrap; color: var(--chalk); height: calc(.82em + .1em + .26em); padding-bottom: .26em; margin-bottom: -.26em;   
text-shadow: 0 2px 14px rgba(10, 11, 13, .55); }
#s1 .line--b { --lines: 1; margin-top: calc(var(--fs-d1b) * .16 - .1em); color: var(--chalk); text-wrap: balance; height: calc(var(--lines) * .9em + .2em); text-shadow: 0 2px 14px rgba(10, 11, 13, .55); }
#s1 .s1__lean { color: var(--signal); -webkit-text-stroke: 1.2px var(--asphalt); paint-order: stroke fill; }
#s1 .s1__echo { position: absolute; left: 0; top: 0; z-index: 0; pointer-events: none; }
#s1 .s1__echo > span {
position: absolute; left: 0; top: 0; display: block; white-space: nowrap; color: transparent;
-webkit-text-stroke: 1.3px var(--signal);
opacity: calc(.52 - var(--k) * .17);
transform: translate(calc(var(--k) * var(--s1-echo-x)), calc(var(--k) * var(--s1-echo-y)));
}
html[data-motion="off"] #s1 .s1__echo, html:not(.js) #s1 .s1__echo { display: none; }
#s1 .s1__gap { -webkit-text-stroke: 0; color: transparent; }
#s1 .s1__body { position: relative; z-index: 2; padding: 40px 0 56px; }
@font-face { font-family: "Fraunces Fallback S1"; src: local("Georgia"); font-weight: 300 800; size-adjust: 104.7%; ascent-override: 93.41%; descent-override: 24.38%; line-gap-override: 0%; }
#s1 .s1__lede { margin: 0; color: var(--chalk); max-width: 27.5em; font-family: "Fraunces", "Fraunces Fallback S1", Georgia, serif; }   
#s1 .s1__cta { display: grid; gap: 16px; margin: 32px 0 0; }
#s1 .s1__cta .btn { width: 100%; }
@media (min-width: 600px) {
#s1 .s1__cta { display: flex; flex-wrap: wrap; gap: 16px; }
#s1 .s1__cta .btn { width: auto; justify-content: flex-start; padding-inline: 24px 18px; }   
#s1 .s1__cta .btn--signal { min-width: 268px; }
#s1 .s1__cta .btn--ghost { min-width: 232px; }
}
#s1 .s1__sheet {
position: relative; z-index: var(--z-sheet); margin-top: -40px; padding: 20px 18px 18px;
rotate: var(--s1-sheet-rot); box-shadow: none; width: min(100%, 560px); justify-self: end;
}
#s1 .s1__sheet {
--s1-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='2.6 0 0 0 -.8 2.6 0 0 0 -.8 2.6 0 0 0 -.8 0 0 0 0 1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
--s1-fibre: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.035 .7' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='1.8 0 0 0 -.4 1.8 0 0 0 -.4 1.8 0 0 0 -.4 0 0 0 0 1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
#s1 .s1__sheet::before {
opacity: .62; mix-blend-mode: overlay; background-size: 220px 220px, 320px 320px, 100% 100%;
background-image: var(--s1-grain), var(--s1-fibre), linear-gradient(100deg, transparent 48%, rgba(60, 40, 10, .05) 50%, transparent 52%);
}
#s1 .s1__shadow {
position: absolute; inset: 0; z-index: -2; border-radius: inherit; pointer-events: none;
box-shadow: var(--lift-sheet); opacity: .65;                    
}
#s1 .s1__sheet .tape--tl { top: -15px; left: -10px; }
#s1 .s1__sheet .tape--tr { top: -13px; right: -8px; }
#s1 .s1__nums { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; }
#s1 .s1__lbl { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; color: var(--fg-2); }
#s1 .s1__bar { display: block; width: 20px; height: 5px; background: var(--lean-r); transform: skewX(-24deg); flex: none; }
#s1 .s1__num--l .s1__bar { background: var(--lean-l); }
#s1 .s1__val { position: relative; margin: 0; white-space: nowrap; width: fit-content; }
#s1 .s1__roll { position: relative; display: inline-block; }
#s1 .s1__ul { position: absolute; left: -2%; width: 104%; bottom: -.34em; aspect-ratio: 240 / 24; pointer-events: none; }
#s1 .s1__ul svg { display: block; width: 100%; height: 100%; overflow: visible; }
#s1 .s1__chart { position: relative; margin: 58px 0 0; }
#s1 .s1__plot { position: relative; }
#s1 .s1__plot .graph { overflow: visible; }
#s1 .graph__r, #s1 .graph__l { vector-effect: none; stroke-width: 3.1; }       
#s1 .graph__zero { stroke-width: 1.2; opacity: .8; }
#s1 .graph__lap { opacity: .7; }
#s1 .graph__win { stroke: var(--fg); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; vector-effect: none; }
#s1 .graph__peak { stroke: var(--sheet); stroke-width: 1.8; }
#s1 .graph__peak--r { fill: var(--lean-r); }
#s1 .graph__peak--l { fill: var(--lean-l); }
#s1 .playhead line { stroke: var(--fg); stroke-width: 1.4; vector-effect: none; }
#s1 .s1__axis { position: absolute; right: -15px; font: 700 12px/1 var(--f-mono); letter-spacing: .06em; pointer-events: none; }
#s1 .s1__axis--r { top: 4px; color: var(--accent-t); }
#s1 .s1__axis--l { bottom: 4px; color: var(--lean-l); }
#s1 .s1__flag { position: absolute; top: 0; left: calc(var(--x) * 1%); width: 14px; height: 19px; margin-left: -3.2px; pointer-events: none; }
#s1 .s1__flag svg { display: block; width: 100%; height: 100%; overflow: visible; }
#s1 .s1__plot .graph { position: relative; z-index: 1; }
#s1 .s1__scale { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; overflow: visible; pointer-events: none; }
#s1 .s1__scale line { stroke: var(--hair); stroke-width: 1; stroke-dasharray: 2 4; vector-effect: non-scaling-stroke; }
#s1 .s1__tick { position: absolute; right: 2px; z-index: 2; font-size: 12px; line-height: 1; color: var(--fg-2); letter-spacing: 0; pointer-events: none; text-shadow: 0 0 3px var(--sheet), 0 0 3px var(--sheet); }
#s1 .s1__tick--up { top: 16.667%; margin-top: 4px; }       
#s1 .s1__tick--dn { top: 83.333%; margin-top: 3px; }      
#s1 .s1__pk { position: absolute; z-index: 2; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); margin: 0; font-size: 19px; line-height: 1; white-space: nowrap; pointer-events: none; font-weight: 700; }
#s1 .s1__pk--r { color: var(--accent-t); transform: translate(9px, -50%); }
#s1 .s1__pk--l { color: var(--lean-l); transform: translate(10px, -10%); }
#s1 .s1__arrow { position: absolute; left: 7.3%; top: -25.8%; width: 20.7%; aspect-ratio: 220 / 150; transform: scaleX(-1); pointer-events: none; }
#s1 .s1__arrow svg { display: block; width: 100%; height: 100%; overflow: visible; }
#s1 .s1__note { position: absolute; left: 29%; top: -30%; margin: 0; font-size: var(--fs-hand-m); line-height: 1; white-space: nowrap; pointer-events: none; }
#s1 .s1__note-in { display: inline-block; }
#s1 .s1__nib { position: absolute; left: 0; top: 0; width: 30px; height: 30px; opacity: 0; pointer-events: none; z-index: 3; }
#s1 .s1__nib svg { display: block; width: 100%; height: 100%; }
#s1 .s1__laps { position: relative; height: 20px; margin-top: 8px; color: var(--fg-2); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
#s1 .s1__laps span { position: absolute; left: calc(var(--x) * 1%); top: 0; padding-left: 4px; line-height: 20px; }
#s1 .s1__cap { margin: 8px 0 0; }
#s1 .s1__method { margin: 0; color: var(--fg); font-size: 12px; letter-spacing: 0; line-height: 1.35; text-wrap: balance; min-height: calc(2 * 1.35em); }
#s1 .s1__facts { margin: 4px 0 0; color: var(--fg-2); }
#s1 .s1__strip { position: relative; z-index: 2; }
#s1 .s1__track { display: flex; flex: none; transform-origin: 0 50%; }
#s1 .s1__group { display: flex; align-items: center; flex: none; margin: 0; padding: 0; list-style: none; }
#s1 .strip__item { font-size: clamp(17px, 12px + 1.4vw, 24px); }
#s1 .strip__item + .strip__item::before { content: none; }
#s1 .strip__item:not(:last-child)::after, #s1 .s1__group::after {
content: ""; display: inline-block; width: 34px; height: 17px; margin-inline: 22px; vertical-align: -1px; background: currentColor;
-webkit-mask: var(--mask-chevrons) center / contain no-repeat; mask: var(--mask-chevrons) center / contain no-repeat;
}
#s1 .s1__group::after { margin-inline: 22px 22px; flex: none; }
html:not(.js) #s1 .s1__track, html[data-motion="off"] #s1 .s1__track { flex: 1 1 auto; min-width: 0; flex-wrap: wrap; padding-block: 12px; }
html:not(.js) #s1 .s1__group, html[data-motion="off"] #s1 .s1__group { flex: 0 1 auto; min-width: 0; flex-wrap: wrap; row-gap: 6px; }
html:not(.js) #s1 .s1__group::after, html[data-motion="off"] #s1 .s1__group::after,
html:not(.js) #s1 .s1__group--dup, html[data-motion="off"] #s1 .s1__group--dup { display: none; }
html:not(.js) #s1 .strip__item:not(:last-child)::after, html[data-motion="off"] #s1 .strip__item:not(:last-child)::after { margin-inline: 16px; }
@media (max-width: 599.98px) {
html:not(.js) #s1 .s1__track, html[data-motion="off"] #s1 .s1__track { padding-block: 14px 44px; }   
html:not(.js) #s1 .strip__item, html[data-motion="off"] #s1 .strip__item { font-size: 16px; }
html:not(.js) #s1 .strip__item:not(:last-child)::after, html[data-motion="off"] #s1 .strip__item:not(:last-child)::after { width: 24px; height: 12px; margin-inline: 12px; }
}
@media (min-width: 600px) {
#s1 { --s1-sheet-rot: 1.2deg; }
#s1 .s1__sheet { padding: 24px 24px 22px; }
#s1 .s1__sheet .tape--tl { left: -22px; } #s1 .s1__sheet .tape--tr { right: -20px; }
}
@media (min-width: 1100px) {
#s1 {
--s1-pb: 36px; --s1-sheet-rot: 1.6deg;
--s1-strip-h: 64px;
--fs-d1: min(clamp(72px, 33.37px + 9.905vw, 176px), 22vh);
--fs-d1b: min(clamp(30px, 2.9px + 6.95vw, 104px), 12.2vh);       
--s1-pt: clamp(76px, 10.5vh, 124px);
--s1-block-h: calc(.82 * var(--fs-d1) + 1.92 * var(--fs-d1b) + 6.1 * var(--fs-lede) + 121px);
--s1-stage-h: max(calc(var(--s1-pt) + var(--s1-block-h) + var(--s1-pb)), calc(100svh - var(--header-h) - var(--s1-strip-h)));
min-height: calc(100svh - var(--header-h));
}
#s1 .s1__stage {
display: block; min-height: var(--s1-stage-h);
padding-top: max(var(--s1-pt), calc(var(--s1-stage-h) - var(--s1-pb) - var(--s1-block-h)));
padding-bottom: var(--s1-pb);
}
#s1 .s1__media { bottom: 0; height: auto; }
#s1 .s1__scrim {
background:
linear-gradient(90deg, rgba(10, 11, 13, .68) 0, rgba(10, 11, 13, .45) 38%, rgba(10, 11, 13, 0) 60%),
linear-gradient(180deg, rgba(10, 11, 13, .45) 0, rgba(10, 11, 13, 0) 30%, rgba(10, 11, 13, 0) 62%, rgba(10, 11, 13, .55) 88%, var(--asphalt) 100%);
}
#s1 .s1__scrim::after {
content: ""; position: absolute; inset: 0; background: rgba(10, 11, 13, .38);
-webkit-mask-image: linear-gradient(90deg, #000 0, #000 30%, transparent 45%), linear-gradient(180deg, transparent 6%, #000 18%, #000 78%, transparent 94%);
-webkit-mask-composite: source-in;
mask-image: linear-gradient(90deg, #000 0, #000 30%, transparent 45%), linear-gradient(180deg, transparent 6%, #000 18%, #000 78%, transparent 94%);
mask-composite: intersect;
}
#s1 .s1__poster, #s1 .s1__canvas { filter: brightness(1.04) contrast(1.05); }
#s1 .s1__wrap { position: static; }          
#s1 .s1__ovl { height: auto; bottom: 0; }
#s1 .s1__ovl-grid { padding-block: 24px; }
#s1 .s1__stamp { font-size: var(--fs-kicker); }
#s1 .s1__pause { grid-row: 3; grid-column: 12 / 13; justify-self: end; align-self: end; margin: 0; }   
#s1 .s1__head { grid-column: 1 / 8; min-height: 0; padding-bottom: 0; }
#s1 .line--b { --lines: 2; }
#s1 .s1__body { grid-column: 1 / 8; padding: 32px 0 0; }
#s1 .s1__lede { max-width: min(27.5em, 652px); }
#s1 .s1__sheet {
--cw: min(100% - 2 * var(--m), var(--maxw));
position: absolute; right: calc((100% - var(--cw)) / 2); top: clamp(64px, 11vh, 128px); bottom: auto; margin: 0; justify-self: auto;
width: calc((var(--cw) - 11 * var(--g)) / 12 * 5 + 4 * var(--g)); padding: 28px;
}
#s1 .s1__sheet .tape--tl { top: -17px; left: -26px; }
#s1 .s1__sheet .tape--tr { top: -15px; right: -24px; }
#s1 .s1__nums { gap: 8px 20px; }
#s1 .s1__chart { margin-top: 66px; }
}
@media (min-width: 1100px) and (max-height: 820px) {
#s1 .s1__sheet { padding: 22px 26px 20px; }
#s1 .s1__chart { margin-top: 56px; }
}
@media (max-width: 599.98px) {
#s1 .s1__note-more { display: none; }
#s1 .s1__chart { margin-top: 50px; }
}
@media (max-width: 599.98px) {
#s1 { --s1-vid-h: max(340px, calc(var(--s1-vh) * .43)); --fs-d1b: clamp(24px, 7.69vw, 44px); }   
#s1 .s1__lede { font-size: 18px; line-height: 1.42; max-width: none; }
#s1 .s1__lede-more { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
#s1 .s1__cta { margin-top: 24px; gap: 8px; }
}
@media (max-width: 1099.98px) {
#s1 .s1__head { padding-bottom: 32px; }
#s1 .s1__body { order: 2; padding: 24px 0 0; }
#s1 .s1__sheet { order: 3; margin-top: 48px; }
}
@media (max-width: 599.98px) {
#s1 .s1__head { padding-bottom: 16px; }
#s1 .s1__body { padding-top: 16px; }
#s1 .s1__sheet { margin-top: 48px; }
}
@media (max-width: 359.98px) { #s1 { --fs-d1: 60px; } #s1 .s1__stamp { font-size: 10.5px; letter-spacing: .02em; } }   
#s1 .s1__lede-dot { display: none; }
@media (max-width: 599.98px) { #s1 .s1__lede-dot { display: inline; } }
@media (prefers-contrast: more) {
#s1 .s1__scrim { background: rgba(10, 11, 13, .8); }
#s1 .s1__echo { display: none; }
}
#s1 .btn:focus-visible, #s1 .pause-btn:focus-visible { outline-color: var(--chalk); }
@media print { #s1 .s1__media, #s1 .s1__ovl { display: none; } }
#main > #s1e.sec--asphalt.sec { padding-block: clamp(48px, 5vw, 72px) calc(clamp(40px, 4vw, 56px) + var(--seam-h)); }
#s1e .s1e__wrap { row-gap: 40px; align-items: center; }
#s1e .s1e__copy, #s1e .s1e__pol { grid-column: 1 / -1; }
#s1e .s1e__h { margin-top: 14px; }
#s1e .s1e__body { margin-top: 20px; max-width: 40ch; }
#s1e .s1e__cta { margin-top: 28px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
#s1e .s1e__note { color: var(--fg-2); margin: 0; }
#s1e .s1e__pol { position: relative; width: min(100%, 640px); margin: 0 0 0 4px; rotate: var(--rot, 0deg); }
#s1e .s1e__pol .polaroid__img { aspect-ratio: 1200 / 750; }
#s1e .s1e__shot { display: block; }
#s1e .s1e__tape { --rot: -4deg; left: -22px; top: -13px; }
@media (min-width: 960px) {
#s1e .s1e__wrap { column-gap: 48px; }
#s1e .s1e__copy { grid-column: 1 / 7; }
#s1e .s1e__h { font-size: calc(var(--fs-h2-road) * .8); white-space: nowrap; }
#s1e .s1e__pol { grid-column: 7 / -1; margin: 0; justify-self: end; width: 100%; max-width: 700px; }
}
@media (forced-colors: active) { #s1e .s1e__pol { border: 1px solid CanvasText; } }
#s1 .s1__lede-more { color: var(--chalk); opacity: .86; }                      
#s1 .s1__alt { border-color: transparent; padding-inline: 0; min-width: 0; text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1.5px; justify-content: flex-start; }
#s1 .s1__alt:hover { background: transparent; color: var(--chalk); }
@media (min-width: 600px) { #s1 .s1__cta .btn--ghost.s1__alt { min-width: 0; padding-inline: 8px; } }
#s1 .s1__sheet .t-hot-num { color: var(--ink); }                
#s1 .s1__sheet .t-pen { color: var(--ink); }
@media (min-width: 1100px) {
#s1 .s1__media, #s1 .s1__ovl { bottom: auto; height: var(--s1-stage-h); }
#s1 .s1__stage { padding-bottom: 0; }
#s1 .s1__body { padding-bottom: var(--s1-pb); }
#s1 .s1__sheet {
--cw: min(100% - 2 * var(--m), var(--maxw));
order: 3; position: relative; right: auto; top: auto; margin: 48px 0 64px; grid-column: 6 / -1; width: auto;
}
#s1 .s1__chart { margin-top: 56px; }
}
@media (min-width: 1100px) { #s1 .s1__note, #s1 .s1__arrow { display: none; } }   
#s1 .s1__card, #s1 .s1__floor { display: none; }
@media (min-width: 1100px) {
#s1 .s1__card { display: block; order: 3; grid-column: 1 / 6; align-self: start; position: relative; z-index: 1; margin: calc(48px + 56px) 0 0; color: var(--chalk); }
#s1 .s1__floor {
display: block; position: absolute; left: 0; right: 0; top: var(--s1-stage-h); bottom: 0; z-index: 0; pointer-events: none;
background: url("../pov/floor-asphalt-screen.webp") center / cover no-repeat; mix-blend-mode: screen; opacity: .55;   
-webkit-mask-image: linear-gradient(180deg, transparent 0, #000 22%, #000 78%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 22%, #000 78%, transparent 100%);
}
}
@media print, (prefers-contrast: more), (forced-colors: active) { #s1 .s1__floor { display: none; } }
#s2 {
--s2-track: 140svh;
--s2-top: calc(var(--header-h) + 12px);
--s2-hfs: clamp(44px, 28px + 4.1vw, 80px);          
--sk-w: 2.5;
}
@media (min-width: 960px) {
#s2 { --s2-track: 180svh; --s2-top: calc(var(--header-h) + clamp(16px, 5vh, 56px)); }
}
#s2 svg { max-width: none; }                                  
#s2 .s2__grid { grid-template-rows: auto auto minmax(var(--s2-track), auto); row-gap: var(--sp-5); align-items: start; }
#s2 .s2__rail, #s2 .s2__copy { position: relative; }
#s2 .s2__rail { grid-row: 1; margin-bottom: 0; }
#s2 .s2__copy { grid-row: 2; }
#s2 .s2__stage { grid-column: 1 / -1; grid-row: 3; position: sticky; top: var(--s2-top); z-index: var(--z-paper); }
@media (min-width: 960px) {
#s2 .s2__grid { grid-template-rows: minmax(var(--s2-track), auto); row-gap: 0; }
#s2 .s2__rail, #s2 .s2__copy, #s2 .s2__stage { grid-row: 1; position: sticky; top: var(--s2-top); }
#s2 .s2__rail { grid-column: 1 / 3; padding-top: calc(var(--s2-hfs) * .34); }
#s2 .s2__copy { grid-column: 3 / 8; }
#s2 .s2__stage { grid-column: 8 / 13; }
}
html[data-motion="off"] #s2 .s2__grid, html:not(.js) #s2 .s2__grid { grid-template-rows: auto auto auto; }
html[data-motion="off"] #s2 .s2__rail, html[data-motion="off"] #s2 .s2__copy, html[data-motion="off"] #s2 .s2__stage,
html:not(.js) #s2 .s2__rail, html:not(.js) #s2 .s2__copy, html:not(.js) #s2 .s2__stage { position: relative; top: auto; }
@media (min-width: 960px) {
html[data-motion="off"] #s2 .s2__grid, html:not(.js) #s2 .s2__grid { grid-template-rows: auto; }
}
#s2 .s2__spine { top: calc(-1 * var(--sec-pad)); bottom: calc(-1 * var(--sec-pad)); }
#s2 .s2__dot { top: calc(var(--s2-hfs) * .5 - 9px); left: -7px; z-index: 2; }
@media (min-width: 960px) { #s2 .s2__dot { left: -23px; } }
#s2 .s2__kicker { margin: 0; }
#s2 .s2__rail-hand { margin: 2px 0 0; display: inline-block; rotate: -2.5deg; transform-origin: 0 100%; }
#s2 .s2__h { font-size: var(--s2-hfs); }
#s2 .s2__u { position: relative; display: inline-block; }
#s2 .s2__wave { position: absolute; left: -1.5%; bottom: -.3em; width: 103%; height: auto; overflow: visible; --sk-w: 3.4; }
#s2 .s2__body { margin-top: var(--sp-6); }
#s2 .s2__thoughts { margin-top: var(--sp-6); display: grid; gap: 6px; justify-items: start; --sk-w: 2.6; }
#s2 .s2__t {
position: relative; display: inline-block; margin-left: var(--ind, 0); rotate: var(--rot, 0deg);
font-family: var(--f-hand); font-weight: 600; font-size: clamp(26px, 22px + 1vw, 34px); line-height: 1.12; color: var(--hand);
white-space: nowrap;
}
#s2 .s2__strike { position: absolute; left: -3%; top: 56%; width: 107%; height: auto; translate: 0 -50%; overflow: visible; pointer-events: none; }
#s2 .s2__t-val { position: relative; display: inline-block; min-width: 3.1ch; }
#s2 .s2__thought-circle { position: absolute; left: 53%; top: 54%; width: 138%; height: auto; translate: -50% -50%; overflow: visible; opacity: 0; pointer-events: none; --sk-w: 2.4; }
#s2 .s2__thought-circle.is-on { opacity: 1; }
#s2 .s2__inst { --sk-w: 3.4; padding: 16px 16px 16px; }
#s2 .s2__stage { --s2-ex: 9px; --s2-ey: -7px; }
#s2 .s2__echo { position: absolute; inset: 0; pointer-events: none; rotate: 1deg; }
#s2 .s2__echo > span {
position: absolute; inset: 0; border: 1.4px solid var(--lean-r); border-radius: var(--radius);
opacity: calc(1 - var(--k) * .14);
translate: calc(var(--k) * var(--s2-ex) * var(--ep, 1)) calc(var(--k) * var(--s2-ey) * var(--ep, 1));
}
@media (max-width: 959.98px) { #s2 .s2__stage { --s2-ex: 5px; --s2-ey: -4px; } }
@media (prefers-contrast: more) { #s2 .s2__echo { display: none; } }
@media (min-width: 600px) { #s2 .s2__inst { padding: 22px 22px 20px; } }
@media (min-width: 960px) { #s2 .s2__inst { padding: 22px 24px 20px; } }
#s2 .s2__scene {
--rs: .8; --ks: 1.8;                                      
position: relative; aspect-ratio: 480 / 390; width: 100%;
touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent;
}
html:not(.js) #s2 .s2__scene { cursor: default; }
#s2 .s2__scene.is-drag { cursor: grabbing; }
#s2 .s2__proto { position: absolute; z-index: 1; --sk-w: 1.9;
left: calc((240 - 200 * var(--ks)) / 480 * 100%); top: calc((348 - 212 * var(--ks)) / 390 * 100%); width: calc(400 * var(--ks) / 480 * 100%); }
#s2 .s2__proto svg { width: 100%; height: auto; overflow: visible; }
#s2 .s2__proto .d[data-order="2"], #s2 .s2__proto .d[data-order="3"], #s2 .s2__proto .d[data-order="4"], #s2 .s2__proto .d[data-order="5"], #s2 .s2__proto .d[data-order="6"] { transform: translate(33px, -23px); }
#s2 .s2__proto .d[data-order="7"] { transform: translateY(5px); }
#s2 .s2__proto .d[data-order="8"], #s2 .s2__proto .d[data-order="9"], #s2 .s2__proto .d[data-order="10"], #s2 .s2__proto .d[data-order="11"], #s2 .s2__proto .d[data-order="12"], #s2 .s2__proto .d[data-order="13"], #s2 .s2__proto .d[data-order="14"] { transform: translate(-33px, -23px); }
#s2 .s2__proto .tick { transition: stroke var(--d-hover) linear; }
#s2 .s2__overlay { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
#s2 .s2__arc { fill: none; stroke-linecap: round; }
#s2 .s2__rider { position: absolute; z-index: 3;
left: calc((240 - 160 * var(--rs)) / 480 * 100%); top: calc((348 - 352 * var(--rs)) / 390 * 100%); width: calc(320 * var(--rs) / 480 * 100%); }
#s2 .s2__rider svg { width: 100%; height: auto; overflow: visible; }
html:not(.js) #s2 [id$="__bike"] { transform-origin: 160px 352px; transform: rotate(24deg); }
html:not(.js) #s2 [id$="__torso"] { transform-origin: 160px 104px; transform: translate(2.4px, 0) rotate(2.4deg); }
html:not(.js) #s2 [id$="__head"] { transform-origin: 160px 44px; transform: rotate(-9.6deg); }
html:not(.js) #s2 [id$="__legs-level"] { opacity: 0; }
html:not(.js) #s2 [id$="__legs-inside-up"] { opacity: 1; }
html:not(.js) #s2 .s2__proto .tick[data-deg="25"] { stroke: var(--lean-r); }
#s2 .s2__hint { position: absolute; z-index: 4; left: 71%; top: 55%; width: 26%; max-width: 9ch; margin: 0; pointer-events: none; }
#s2 .s2__hint-txt { display: block; font-size: clamp(21px, 18.6px + .6vw, 26px); line-height: .98; rotate: -3deg; transform-origin: 0 100%; white-space: normal; text-wrap: balance; }
#s2 .s2__hint-arrow { position: absolute; left: -22%; top: -66%; width: 44%; height: auto; transform: rotate(78deg) scaleX(-1); transform-origin: 50% 50%; overflow: visible; --sk-w: 4.6; }
#s2 .s2__peak { position: absolute; z-index: 4; left: 1%; bottom: -3px; margin: 0; max-width: none; font-size: clamp(20px, 17px + .7vw, 25px); line-height: 1; white-space: nowrap; opacity: 0; pointer-events: none; rotate: -1.2deg; transform-origin: 0 100%; }
#s2 .s2__peak.is-on { opacity: 1; }
html:not(.js) #s2 .s2__hint { display: none; }
#s2 .s2__row {
display: grid; grid-template-columns: 1fr; margin-top: 22px; row-gap: 6px; column-gap: 28px; align-items: end;
grid-template-areas: "readout" "range" "tilt" "label";
}
@media (min-width: 600px) { #s2 .s2__row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "readout tilt" "range range" "label label"; } }
#s2 .s2__readout { grid-area: readout; margin: 0; display: inline-flex; align-items: baseline; gap: 12px; position: relative; color: var(--fg); justify-self: start; }
#s2 .s2__numwrap { position: relative; display: inline-block; }
#s2 .s2__num { font-size: clamp(88px, 73.1px + 3.81vw, 116px); width: 1.45em; min-width: 0; white-space: nowrap; text-align: right; line-height: .86; color: var(--fg); display: inline-block; }
#s2 .s2__dir {
font: 800 clamp(22px, 18px + 1vw, 30px)/1 var(--f-caps); font-stretch: 100%; letter-spacing: .06em; text-transform: uppercase;
color: var(--lean-r); white-space: nowrap;
}
#s2 .s2__dir[data-dir="l"] { color: var(--lean-l); }
#s2 .s2__dir[data-dir="u"] { color: var(--fg-2); }
#s2 .s2__read-circle { position: absolute; left: 50%; top: 52%; width: 114%; height: auto; translate: -50% -50%; overflow: visible; opacity: 0; pointer-events: none; --sk-w: 3.2; }
#s2 .s2__read-circle.is-on { opacity: 1; }
#s2 .s2__tilt { grid-area: tilt; min-height: 48px; justify-self: stretch; align-self: end; padding: 0 12px; white-space: nowrap; font-size: 13.5px; letter-spacing: .03em; }
@media (min-width: 600px) { #s2 .s2__tilt { justify-self: end; } }
#s2 .s2__tilt .btn__in { gap: 10px; }
#s2 .s2__tilt[aria-pressed="true"] { background: var(--fg); color: var(--bg); }
#s2 .s2__phone { width: 22px; height: 22px; flex: none; overflow: visible; --sk-w: 3; }
#s2 .s2__rangewrap { grid-area: range; margin: 6px 0 4px; }
#s2 .s2__range { --from: 50%; --to: 50%; --hair: color-mix(in srgb, var(--fg) 42%, transparent); }   
#s2 .s2__range[data-dir="l"] { --lean-r: var(--lean-l); }      
#s2 .s2__label { grid-area: label; margin: 10px 0 0; min-height: calc(var(--fs-mono) * 1.45 * 2); color: var(--fg-2); max-width: none; text-wrap: balance; }
@media (min-width: 600px) { #s2 .s2__label { min-height: calc(var(--fs-mono) * 1.45); } }
#s2 .s2__range:focus-visible { outline: 3px solid var(--fg); outline-offset: 5px; border-radius: 4px; }
#s2 .s2__seam-tape { top: -20px; left: 9%; z-index: 6; --rot: -3deg; }
#s3 {
--sk-w: 3.2;                                   
--stage-w: 560px;
--s3-wheel: clamp(44px, 12px + 6.1vw, 100px);
--pin-top: 6vh;
--below: 48px;
--track-h: 300svh;
padding-bottom: 96px;
}
#s3 .s3__head { row-gap: var(--sp-4); }
#s3 .s3__kicker, #s3 .s3__h2, #s3 .s3__intro { grid-column: 1 / -1; }
#s3 .s3__h2 { margin-top: var(--sp-2); }
#s3 .s3__intro { margin-top: var(--sp-3); color: var(--fg); }
@media (min-width: 960px) { #s3 .s3__intro { grid-column: 1 / span 6; } }
#s3 .line__in { display: block; }
#s3 .s3__track { margin-top: var(--sp-8); }
#s3 .s3__grid { display: block; }
#s3 .s3__right { display: none; }
#s3 .s3-steps { display: grid; row-gap: var(--sp-8); }
#s3 .s3-step { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: var(--sp-3); align-content: start; justify-items: start; padding-top: var(--sp-5); border-top: 1px solid var(--hair); }
#s3 .s3-step__t { display: flex; align-items: baseline; gap: .6em; color: var(--fg); }
#s3 .s3-step__n { font: 600 var(--fs-kicker)/1 var(--f-mono); letter-spacing: .08em; color: var(--signal); }
#s3 .s3-step__p { color: var(--fg); max-width: 46ch; }
#s3 .s3-step__chip { margin-top: var(--sp-1); }
#s3 .s3-step .s3-fig { margin-top: var(--sp-5); }
@media (min-width: 960px) {
#s3 .s3-step { grid-template-columns: minmax(0, 1fr) minmax(0, var(--stage-w)); column-gap: var(--g); grid-template-rows: 1fr auto auto auto 1fr; align-content: stretch; }
#s3 .s3-step > :not(.s3-fig) { grid-column: 1; }
#s3 .s3-step__t { grid-row: 2; } #s3 .s3-step__p { grid-row: 3; } #s3 .s3-step__chip { grid-row: 4; }
#s3 .s3-step .s3-fig { grid-column: 2; grid-row: 1 / span 5; margin-top: 0; justify-self: end; width: min(100%, var(--stage-w)); }
#s3 .s3-step__t { font-size: clamp(30px, 2.4vw, 40px); }
}
#s3 .s3-wheel, #s3 .s3-rail { display: none; }
#s3 .s3-fig { position: relative; margin: 0; width: 100%; max-width: var(--stage-w); aspect-ratio: 1; container-type: inline-size; }
#s3 .s3-fig__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
#s3 .s3-sprite { overflow: visible; }
#s3 .s3-lab { position: absolute; font: 600 max(12px, 2.3cqi)/1.3 var(--f-mono); letter-spacing: .08em; color: var(--fg-2); white-space: nowrap; pointer-events: none; }
#s3 .s3-lab--chip2 { left: 7.5%; top: 56.5%; }
#s3 .s3-lab--card { left: 66.5%; top: 67.8%; }
#s3 .s3-lab--rate { left: 50%; top: 74%; transform: translateX(-50%); color: var(--signal); }
#s3 .s3-key { position: absolute; right: 2%; top: 4.5%; margin: 0; padding: 0; list-style: none; display: grid; gap: .5em; justify-items: start;
font: 600 max(12px, 2.2cqi)/1.25 var(--f-mono); letter-spacing: .08em; color: var(--fg-2); white-space: nowrap; }
#s3 .s3-key li { display: flex; align-items: center; gap: .8em; }
#s3 .s3-key__g, #s3 .s3-key__d { display: block; width: 3.2em; height: 0; flex: none; }
#s3 .s3-key__g { border-top: 2.5px dashed var(--chalk); }
#s3 .s3-key__d { border-top: 3.5px solid var(--signal); }
#s3 .s3-key li:last-child { color: var(--signal); }
#s3 .s3-note1 { position: absolute; right: 2%; top: 17%; width: 42%; margin: 0; text-align: right; font-size: max(22px, 5.4cqi); line-height: 1.02; color: var(--hand); }
#s3 .s3-plumb { fill: none; stroke: var(--fg-2); stroke-width: 1.6; stroke-dasharray: 1 8; stroke-linecap: round; opacity: .55; }
#s3 .s3-arc { fill: none; stroke: var(--sk-hot); stroke-width: 3.4; stroke-linecap: round; }
#s3 .s3-grav__shaft { fill: none; }
#s3 .s3-g--ring path, #s3 .s3-g--loupe path { vector-effect: none; }
#s3:not([data-s3]) .s3-rider [id$="__bike"] { transform: rotate(33deg); transform-origin: 160px 352px; }
#s3:not([data-s3]) .s3-rider [id$="__torso"] { transform: translate(3.3px, 0) rotate(3.3deg); transform-origin: 160px 104px; }
#s3:not([data-s3]) .s3-rider [id$="__head"] { transform: rotate(-13.2deg); transform-origin: 160px 44px; }
#s3:not([data-s3]) .s3-rider [id$="__legs-level"] { opacity: 0; }
#s3:not([data-s3]) .s3-rider [id$="__legs-inside-up"] { opacity: 1; }
#s3 .s3-num { position: absolute; left: 4.5%; top: 51%; width: 28%; z-index: 2; }
#s3 .s3-num__k { display: block; font: 600 max(12px, 2.2cqi)/1.2 var(--f-mono); letter-spacing: .08em; color: var(--fg-2); margin-bottom: 1.45em; white-space: nowrap; }
#s3 .s3-num__v { display: block; font-size: 13.4cqi; line-height: .82; color: var(--signal); min-width: 3ch; text-align: left; }
#s3 .s3-num__w { position: relative; display: inline-block; }
#s3 .s3-num__ring { --mk-color: var(--chalk); left: -26%; right: -34%; top: -26%; bottom: -30%; aspect-ratio: auto; width: auto; height: auto; }
#s3 .s3-row { position: absolute; left: 14%; right: 0; top: 79%; margin: 0; text-align: center; display: grid; justify-items: center; gap: .55em; }
#s3 .s3-row__v { font: 700 max(20px, 6.1cqi)/1 var(--f-mono); letter-spacing: 0; color: var(--chalk); font-variant-numeric: tabular-nums; white-space: nowrap; min-width: 14ch; text-align: center; }
#s3 .s3-row__k { font: 600 max(12px, 2.2cqi)/1.2 var(--f-mono); letter-spacing: .08em; color: var(--fg-2); }
#s3 .s3-note2 { position: absolute; right: 2%; top: 6%; width: 62%; margin: 0; text-align: right; text-wrap: balance; font-size: max(22px, 5.2cqi); line-height: 1.02; color: var(--hand); }
#s3 .s3-note2__ar { right: 14%; top: 13.5%; width: 15%; --mk-color: var(--chalk); }
#s3 .s3-endnote { position: absolute; left: 46%; top: 8%; width: 52%; margin: 0; text-wrap: balance; font-size: max(22px, 5.6cqi); line-height: 1.02; color: var(--hand); }
#s3 .s3-nocloud { position: absolute; left: 22%; top: 84.5%; width: 46%; margin: 0; text-align: right; font-size: max(22px, 5.2cqi); line-height: 1; color: var(--hand); }
#s3 .s3-onesec { position: absolute; left: auto; right: 0; top: 49%; margin: 0; font-size: max(22px, 5.2cqi); line-height: 1; color: var(--hand); white-space: nowrap; transform: translateY(-50%); }
#s3 .s3-g--cloud path, #s3 .s3-g--bracket path { vector-effect: none; }
#s3 .s3-curve__r, #s3 .s3-curve__l { fill: none; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
#s3 .s3-curve__r { stroke: var(--lean-r); } #s3 .s3-curve__l { stroke: var(--lean-l); }
#s3 .s3-curve__fill-r { fill: var(--lean-r); opacity: .16; } #s3 .s3-curve__fill-l { fill: var(--lean-l); opacity: .16; }
#s3 .s3-curve__lap { stroke: var(--fg-2); stroke-width: 1; stroke-dasharray: 2 5; opacity: .5; }
#s3 .s3-curve__dot { fill: var(--chalk); opacity: 0; }
#s3 .s3-leader { fill: none; stroke: var(--fg-2); stroke-width: 1.5; stroke-dasharray: 1 6; stroke-linecap: round; }
#s3 .s3-bead-path { fill: none; stroke: var(--fg-2); stroke-width: 2; stroke-dasharray: 1 8; stroke-linecap: round; }
#s3 .s3-bead { fill: var(--signal); }
#s3 [id$="__bead-path"] { display: none; }                        
#s3 [id*="__tick-"] { stroke-width: 1.15; }
#s3 .s3-fig--2 .s3-sprite g[style*="opacity:.4"] { opacity: .95 !important; }
#s3 .chip { color: var(--fg); }
@media (max-width: 599.98px) {                      
#s3 .s3-step__chip { letter-spacing: .04em; max-width: 100%; white-space: nowrap; }
}
#s3 .s3-card { grid-column: 1 / -1; width: min(100%, 300px); margin: var(--sp-5) auto 0 0; padding: 26px 22px 34px; z-index: 2; }
#s3 .s3-card__t { margin: 0; font-size: clamp(26px, 5.4vw, 32px); line-height: 1.08; color: var(--hand); text-wrap: balance; }
#s3 .s3-card .tape { top: -15px; }
@media (min-width: 960px) {
#s3 .s3__head { align-items: start; }
#s3 .s3__h2 { grid-column: 1 / span 8; }
#s3 .s3-card { grid-column: 9 / -1; grid-row: 2 / span 2; width: 220px; margin: 0 0 0 auto; justify-self: end; align-self: center; padding: 24px 18px 30px; }
#s3 .s3-card__t { font-size: 27px; }
}
#s3 .s3-pol { margin: var(--sp-5) 0 0; justify-self: start; }
#s3 .s3-pol--3 { width: 200px; padding: 18px 16px 24px; }
#s3 .s3-slip { margin: 0; font-size: 25px; line-height: 1.1; color: var(--hand); }
@media (min-width: 960px) {
#s3 .s3-pol { grid-column: 1; grid-row: 5; align-self: start; }
}
@media (prefers-reduced-motion: no-preference) {
html.js:not([data-motion="off"]) #s3 .s3__track { height: var(--track-h); }
html.js:not([data-motion="off"]) #s3 .s3__pin { position: sticky; top: calc(var(--header-h) + var(--pin-top)); }
html.js:not([data-motion="off"]) #s3 .s3__pin { min-height: calc(100svh - var(--header-h) - var(--pin-top) - 16px); display: flex; flex-direction: column; justify-content: center; }
html.js:not([data-motion="off"]) #s3 .s3__right { display: block; position: relative; order: -1; }
html.js:not([data-motion="off"]) #s3 .s3-stage[hidden] { display: block !important; }
html.js:not([data-motion="off"]) #s3 .s3-stage { position: relative; width: var(--stage-s); aspect-ratio: 1; margin-inline: auto; }
html.js:not([data-motion="off"]) #s3 .s3-stage .s3-fig { position: absolute; inset: 0; width: 100%; max-width: none; margin: 0; }
html.js:not([data-motion="off"]) #s3 .s3-static-only { display: none; }
html.js:not([data-motion="off"]) #s3 .s3-wheel, html.js:not([data-motion="off"]) #s3 .s3-rail { display: block; }
html.js:not([data-motion="off"]) #s3 { --stage-s: min(var(--stage-w), 100%, calc(100svh - var(--header-h) - var(--pin-top) - var(--below))); }
html.js:not([data-motion="off"]) #s3 .s3__left { display: block; }
html.js:not([data-motion="off"]) #s3 .s3-steps { display: grid; row-gap: 0; }
html.js:not([data-motion="off"]) #s3 .s3-step { grid-area: 1 / 1; grid-template-columns: minmax(0, 1fr); grid-template-rows: none; border-top: 0; padding-top: 0; opacity: 0; pointer-events: none; transition: opacity var(--d-ui) linear; align-content: start; display: grid; }
html.js:not([data-motion="off"]) #s3 .s3-step.is-active { opacity: 1; pointer-events: auto; }
html.js:not([data-motion="off"]) #s3 .s3-step > .s3-fig { display: none; }          
html.js:not([data-motion="off"]) #s3 .s3-step__t { color: var(--fg); }
#s3 .s3-wheel { --lh: calc(var(--s3-wheel) * .96); position: relative; height: calc(var(--lh) * 2); overflow: clip; margin-bottom: var(--sp-4); }
#s3 .s3-wheel__col { position: absolute; left: 0; top: 0; display: grid; transform: none; }
#s3 .s3-wheel__w { display: block; height: var(--lh); line-height: var(--lh); font-family: "Barlow Condensed", "Barlow Condensed Fallback", "Arial Narrow", Impact, sans-serif; font-weight: 900; font-stretch: 70%; font-size: var(--s3-wheel); letter-spacing: -.01em; text-transform: uppercase; color: var(--chalk); opacity: .14; white-space: nowrap; }
#s3 .s3-wheel__w:first-child { opacity: 1; }
#s3 .s3-rail { display: none; margin-top: var(--sp-5); max-width: 580px; }
html.js:not([data-motion="off"]) #s3 .s3-rail { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); }
#s3 .s3-rail__b { position: relative; min-height: 48px; padding: 10px 0 12px; text-align: left; color: var(--fg-2); cursor: pointer; border-radius: var(--radius); display: block; }
#s3 .s3-rail__t { display: block; font: 600 var(--fs-kicker)/1.3 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; transition: color var(--d-hover) linear; }
#s3 .s3-rail__t span { color: var(--fg-2); margin-right: .4em; }
#s3 .s3-rail__b::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--hair); }
#s3 .s3-rail__f { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--signal); transform: scaleX(var(--f, 0)); transform-origin: left; }
#s3 .s3-rail__b[aria-current="step"] .s3-rail__t { color: var(--fg); }
#s3 .s3-rail__b[aria-current="step"] .s3-rail__t span { color: var(--signal); }
@media (hover: hover) { #s3 .s3-rail__b:hover .s3-rail__t { color: var(--fg); } }
@media (min-width: 960px) {
html.js:not([data-motion="off"]) #s3 .s3__grid { display: grid; align-items: center; min-height: calc(var(--stage-s) + 8px); }
html.js:not([data-motion="off"]) #s3 .s3__left { grid-column: 1 / span 6; grid-row: 1; padding-right: var(--g); }
html.js:not([data-motion="off"]) #s3 .s3__right { grid-column: 7 / -1; grid-row: 1; order: 0; display: flex; justify-content: flex-end; }
html.js:not([data-motion="off"]) #s3 .s3-stage { margin-inline: 0; }
html.js:not([data-motion="off"]) #s3 .s3-step__t { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
html.js:not([data-motion="off"]) #s3 .s3-step__p { font-size: clamp(19px, 1.5vw, 22px); max-width: 40ch; }
html.js:not([data-motion="off"]) #s3 .s3-step { row-gap: var(--sp-4); min-height: 190px; }
}
@media (min-width: 960px) and (max-width: 1199.98px) {
html.js:not([data-motion="off"]) #s3 .s3-row { left: 34%; }
}
@media (min-width: 1200px) {
html.js:not([data-motion="off"]) #s3 { --stage-w: 780px; --pin-top: 2.8vh; --below: 3.5vh; }
html.js:not([data-motion="off"]) #s3 .s3__track { margin-top: -36px; }
html.js:not([data-motion="off"]) #s3 .s3__left { grid-column: 1 / span 5; margin-bottom: 8svh; }   
html.js:not([data-motion="off"]) #s3 .s3__right { grid-column: 6 / -1; }
}
html.js:not([data-motion="off"]) #s3 .s3-pol { display: none; }
@media (min-width: 1400px) {
html.js:not([data-motion="off"]) #s3 .s3__grid { position: relative; }
html.js:not([data-motion="off"]) #s3 .s3-pol { display: block; position: absolute; right: calc(var(--stage-s) - 56px); top: 34px; left: auto; translate: none; margin: 0; z-index: 3; }
html.js:not([data-motion="off"]) #s3 .s3-pol--3 { width: 168px; }
html.js:not([data-motion="off"]) #s3 .s3-slip { font-size: 23px; }
}
@media (max-width: 959.98px) {
#s3 { --pin-top: 8px; --below: 292px; --track-h: 260svh; }
html.js:not([data-motion="off"]) #s3 .s3-wheel { display: none; }
html.js:not([data-motion="off"]) #s3 .s3__grid { display: flex; flex-direction: column; gap: var(--sp-3); }
html.js:not([data-motion="off"]) #s3 .s3__left { width: 100%; }
html.js:not([data-motion="off"]) #s3 .s3-step { min-height: 156px; row-gap: var(--sp-2); }
html.js:not([data-motion="off"]) #s3 .s3-step__p { font-size: 16.5px; line-height: 1.5; }
html.js:not([data-motion="off"]) #s3 .s3-rail { margin-top: var(--sp-3); }
}
@media (max-width: 599.98px) {
html.js:not([data-motion="off"]) #s3 .s3-rail__t span { display: none; }
}
@media (min-width: 600px) and (max-width: 959.98px) {
#s3 { --below: 300px; }
}
}
@media (forced-colors: active) {
#s3 .s3-fig__svg * { forced-color-adjust: none; }
}
#s4 {
--spine-x: 0px;                                   
--dot-x: -7px;                                    
--tail: calc(var(--sec-pad) + 56px);              
--s4-tail-in: 56px;
padding-bottom: var(--sec-pad);
}
@media (min-width: 960px) {
#s4 {
--spine-x: calc((100% - 11 * var(--g)) / 12 * 2 + 2 * var(--g) - 16px);
--dot-x: calc(var(--spine-x) - 7px);
}
}
@font-face { font-family: "Fraunces Fallback S4"; src: local("Georgia"); font-weight: 300 800; size-adjust: 104.7%; ascent-override: 93.41%; descent-override: 24.38%; line-gap-override: 0%; }
@font-face { font-family: "Fraunces Fallback S4 H2"; src: local("Georgia Bold"), local("Georgia-Bold"), local("Georgia"); font-weight: 300 800; size-adjust: 79.7%; ascent-override: 122.71%; descent-override: 32.03%; line-gap-override: 0%; }
@font-face { font-family: "Fraunces Fallback S4 H3"; src: local("Georgia Bold"), local("Georgia-Bold"), local("Georgia"); font-weight: 300 800; size-adjust: 91.9%; ascent-override: 106.42%; descent-override: 27.78%; line-gap-override: 0%; }
@font-face { font-family: "Caveat Fallback S4"; src: local("Bradley Hand"), local("BradleyHandITCTT-Bold"), local("Segoe Print"); font-weight: 500 700; size-adjust: 79.8%; ascent-override: 120.3%; descent-override: 37.8%; line-gap-override: 0%; }
@font-face { font-family: "Mono Fallback S4"; src: local("Menlo Regular"), local("Menlo-Regular"), local("DejaVu Sans Mono"); font-weight: 400 700; size-adjust: 105%; ascent-override: 93.3%; descent-override: 30.5%; line-gap-override: 0%; }
@font-face { font-family: "Mono Fallback S4 C"; src: local("Consolas"); font-weight: 400 700; size-adjust: 114.9%; ascent-override: 85.3%; descent-override: 27.9%; line-gap-override: 0%; }
#s4 { --f-serif: "Fraunces", "Fraunces Fallback S4", Georgia, serif; --f-hand: "Caveat", "Caveat Fallback S4", cursive; --f-mono: "Atkinson Hyperlegible Mono", "Mono Fallback S4", "Mono Fallback S4 C", ui-monospace, monospace; font-family: var(--f-serif); }
#s4 .hand, #s4 .t-hand-m, #s4 .t-hand-l { font-family: var(--f-hand); }
#s4 .t-mono, #s4 .kicker, #s4 .t-kicker { font-family: var(--f-mono); }
#s4 .t-h2-paper { font-family: "Fraunces", "Fraunces Fallback S4 H2", Georgia, serif; }
#s4 .t-h3-paper { font-family: "Fraunces", "Fraunces Fallback S4 H3", Georgia, serif; }
#s4 .t-body { max-width: 40.1em; }
#s4 .rail .hand { margin-top: 2px; }
#s4 .s4-head { display: grid; gap: var(--sp-4); align-content: start; }
#s4 .s4-sub { max-width: 25.8em; color: var(--fg); }
@media (min-width: 960px) {
#s4 .s4-head { grid-template-columns: repeat(10, minmax(0, 1fr)); column-gap: var(--g); align-items: end; }
#s4 .s4-head .t-h2-paper { grid-column: 1 / 8; max-width: 8.36em; }
#s4 .s4-head .s4-sub { grid-column: 8 / -1; padding-bottom: .5em; font-size: clamp(19px, 17.14px + .476vw, 24px); }
}
#s4 .spine { background: var(--ink); }
#s4 .s4-ruler { display: none; }
@media (min-width: 960px) {
#s4 .s4-ruler {
display: block; position: absolute; z-index: 1; top: 0; bottom: 0; left: calc(var(--spine-x) - 11px); width: 9px; pointer-events: none;
background:
linear-gradient(to bottom, var(--graphite) 1px, transparent 1px) right top / 9px 72px repeat-y,
linear-gradient(to bottom, var(--rule) 1px, transparent 1px) right top / 5px 12px repeat-y;
clip-path: inset(0 0 calc((1 - var(--p, 1)) * 100%) 0);
}
}
#s4 .s4-nib { display: none; }
@media (min-width: 960px) {
html[data-motion="on"] #s4 .s4-nib {
display: block; position: absolute; z-index: 7; left: 0; top: 0; width: 40px; height: 40px; pointer-events: none; opacity: 0;
}
#s4 .s4-nib svg { width: 40px; height: 40px; --sk-w: 2.5; }
}
#s4 .s4-dot { position: absolute; z-index: 2; left: var(--dot-x); top: 14px; width: 16px; height: 16px; }
#s4 .s4-dot svg { display: block; overflow: visible; }
#s4 .s4-dot__bg { fill: var(--bg); }
#s4 .s4-dot__core { fill: var(--ink); transform-box: fill-box; transform-origin: center; }
#s4 .s4-dot__ring { fill: none; stroke: var(--ink); stroke-width: 1.9; stroke-linecap: round; }
#s4 .s4-dot--hot .s4-dot__core { fill: var(--signal-g); }
#s4 .s4-dot--hot .s4-dot__ring { stroke: var(--signal-g); }
#s4 .spine-hot {
position: absolute; z-index: 6; left: calc(var(--dot-x) + 7px); top: 22px; bottom: calc(-1 * var(--tail)); width: 2px;
transform-origin: top; transform: scaleY(var(--p, 1)); pointer-events: none;
}
#s4 .spine-hot i { position: absolute; left: 0; right: 0; display: block; border-radius: 1px; }
#s4 .spine-hot__a { top: 0; bottom: 36px; background: var(--signal-g); }   
#s4 .spine-hot__b { bottom: 0; height: 36px; background: var(--signal); }  
#s4 .journal { grid-column: 1 / -1; margin-top: clamp(40px, 5vw, 72px); display: grid; grid-template-columns: minmax(0, 1fr); row-gap: clamp(48px, 8vh, 96px); }
#s4 .entry { position: relative; padding-left: 24px; }
#s4 .entry__in { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-5); }
#s4 .entry__day { display: flex; align-items: baseline; flex-wrap: nowrap; gap: 2px 14px; height: 48px; }   
#s4 .entry__day > * { white-space: nowrap; }
#s4 .day { font: 900 clamp(40px, 8vw + 8px, 56px)/.86 "Barlow Condensed", "Barlow Condensed Fallback", "Arial Narrow", Impact, sans-serif; font-stretch: 62%; letter-spacing: -.01em; font-variant-numeric: tabular-nums lining-nums; color: var(--signal-g); }
#s4 .nick { color: var(--hand); }
#s4 .entry__text > * + * { margin-top: var(--sp-3); }
#s4 .entry__text .t-body { color: var(--ink); }
#s4 .entry__vis { min-width: 0; }
@media (min-width: 960px) {
#s4 .entry { padding-left: 0; }
#s4 .entry__in { grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); column-gap: var(--g); gap: 0 var(--g); align-items: start; }
#s4 .entry__day { grid-column: 1 / 3; grid-row: 1; height: auto; flex-direction: column; align-items: stretch; gap: 2px; padding-right: 0; }
#s4 .day { display: flex; align-items: center; gap: 12px; font-size: clamp(48px, 5vw, 72px); }
#s4 .day::after { content: ""; flex: 1; border-bottom: 1.5px dotted var(--rule); margin-top: 4px; margin-right: 6px; }
#s4 .entry__text { grid-column: 3 / 8; grid-row: 1; }
#s4 .entry__vis { grid-column: 8 / -1; grid-row: 1; }
#s4 .entry__text .t-h3-paper { max-width: 12.15em; }
#s4 .entry--build .entry__text { grid-column: 3 / 7; }
#s4 .entry--build .entry__vis { grid-column: 7 / -1; }
}
#s4 .s4-sheet {
padding: 18px 20px 10px; margin: 0;
background-image:
linear-gradient(to right, rgba(201, 189, 163, .5) 1px, transparent 1px),
linear-gradient(to bottom, rgba(201, 189, 163, .5) 1px, transparent 1px);
background-size: 22px 22px; background-position: 11px 6px;
}
#s4 .draw { position: relative; }
#s4 .draw__svg { display: block; width: 100%; height: auto; overflow: visible; --sk-w: 2.6; }
@media (min-width: 960px) {
#s4 .s4-sheet--b .draw { max-width: min(400px, calc((100svh - var(--header-h) - 5svh - 300px) * 4 / 3)); margin-inline: auto; }
}
#s4 .s4-sheet--a, #s4 .s4-sheet--post { max-width: 380px; }
#s4 .s4-sheet--b { max-width: 460px; }
#s4 .s4-cap { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 8px; padding: 6px 2px 4px; border-top: 1px solid var(--rule); background: var(--sheet); color: var(--fg-2); }
#s4 .draw--bench [id$="__board"], #s4 .draw--bench [id$="__holes"], #s4 .draw--bench [id*="__trace-"],
#s4 .draw--bench [id*="__dim-"] { display: none; }
#s4 .draw--board [id$="__breadboard"] { opacity: .12; }
#s4 .draw--board [id*="__wire-"]:not([id$="-end"]) { opacity: .38; }
#s4 .draw--board [id*="__wire-"]:not([id$="-end"]) .d { stroke-dasharray: .014 .034; }
#s4 .draw__ring { position: absolute; left: 65.9%; top: 59%; width: 19%; translate: -50% -50%; pointer-events: none; }
#s4 .draw__ring svg { display: block; width: 100%; height: auto; overflow: visible; --sk-w: 5.4; }
#s4 .draw__arrow { left: 60.5%; top: 73%; width: 10.5%; aspect-ratio: 220 / 150; scale: -1 -1; transform-origin: center; }
#s4 .s4-note { font-size: var(--fs-hand-m); line-height: 1.1; white-space: nowrap; max-width: none; }
#s4 .s4-note--a { position: absolute; left: 44%; top: 84%; rotate: -2deg; }
#s4 .entry__vis--build { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 0; padding-bottom: 6px; }   
#s4 .entry__vis--build .s4-pol--render { position: relative; margin: 14px -4px 0 auto; z-index: 2; }
@media (min-width: 960px) {
#s4 .entry--build .entry__vis--build { display: contents; }
#s4 .entry--build .s4-sheet--b { grid-column: 7 / -1; grid-row: 1 / span 2; align-self: start; }
#s4 .entry--build .entry__text { grid-row: 1; }
#s4 .entry--build .s4-pol--render { grid-column: 3 / 7; grid-row: 2; justify-self: start; margin: var(--sp-6) 0 0 clamp(0px, calc((100vw - 960px) * .12), 28px); }
}
#s4 .s4-aside { position: relative; display: flex; align-items: center; gap: 10px; margin-top: var(--sp-6); }
#s4 .s4-note--b { rotate: -3deg; flex: none; }
#s4 .s4-aside__arrow { position: relative; flex: none; width: clamp(84px, 9vw, 150px); aspect-ratio: 240 / 60; translate: 0 4px; }
html[data-motion="on"] #s4 .s4-aside__arrow { --p: 0; }   
#s4 .s4-pol { margin: 0; }
#s4 .cluster { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: start; }
#s4 .cluster .s4-pol + .s4-pol { margin-top: 6px; justify-self: end; width: min(var(--w), 232px, 70%); }   
#s4 .cluster--box { margin-top: var(--sp-5); }
#s4 .s4-pol--velcro .polaroid__cap { min-height: 58px; }   
#s4 .s4-curtain { position: absolute; z-index: 2; left: 12px; right: 12px; top: 12px; aspect-ratio: var(--ar, 4 / 3); display: flex; overflow: hidden; pointer-events: none; }
#s4 .s4-curtain i { display: block; flex: 1 0 calc(8.3334% + .6px); margin-right: -.6px; background: var(--polaroid); transform-origin: 100% 50%; }
@media (min-width: 600px) and (max-width: 959.98px) {
#s4 .cluster { display: flex; align-items: flex-start; }
#s4 .cluster .s4-pol + .s4-pol { margin: 48px 0 0 -28px; width: var(--w); }
#s4 .s4-sheet { max-width: 600px; }
}
@media (min-width: 960px) and (max-width: 1099.98px) {
#s4 .cluster--box { margin-right: 32px; margin-top: 0; }
#s4 .entry--box .entry__vis > .s4-sheet { margin-top: var(--sp-6); }
}
@media (min-width: 1100px) {
#s4 {
--s4-wrap: min(100vw - 2 * var(--m), var(--maxw));
--s4-col: calc((var(--s4-wrap) - 11 * var(--g)) / 12);
--s4-vis6: calc(var(--s4-col) * 6 + 5 * var(--g));
}
#s4 .entry__text { grid-column: 3 / 7; }
#s4 .entry__vis { grid-column: 7 / -1; }
#s4 .entry--build .entry__text { grid-column: 3 / 7; }
#s4 .entry--build .entry__vis { grid-column: 7 / -1; }
#s4 .entry--wires .entry__vis .s4-sheet { margin-top: 10px; }
#s4 .entry--wires .slab { margin-top: var(--sp-8); position: relative; z-index: 3; }   
#s4 .cluster--came { --fw: min(380px, calc(var(--s4-vis6) * .58)); --cw: min(380px, calc(var(--s4-vis6) * .58)); position: relative; display: block; height: calc((var(--fw) - 24px) * 1.3338 + 76px); }
#s4 .cluster--came .s4-pol, #s4 .cluster--box .s4-pol { position: absolute; margin: 0; }
#s4 .s4-pol--flat { left: 0; top: 0; z-index: 2; width: var(--fw); }   
#s4 .s4-pol--close { right: 0; top: calc(var(--fw) * .43); z-index: 1; width: var(--cw); }
#s4 .entry--box .entry__in { grid-template-rows: auto 1fr; }
#s4 .entry--box .entry__text { grid-row: 1; }
#s4 .entry--box .entry__vis { display: contents; }
#s4 .entry--box .cluster--box {
--tw: min(380px, calc(var(--s4-vis6) * .58)); --vw: min(344px, calc(var(--s4-vis6) * .52));
grid-column: 7 / -1; grid-row: 1 / span 2; position: relative; display: block; margin: 0;
height: calc((var(--tw) - 24px) * 1.2025 + 66px + var(--tw) * .2 + 40px);
}
#s4 .s4-pol--taped { left: 0; top: 0; z-index: 2; width: var(--tw); }
#s4 .cluster .s4-pol.s4-pol--velcro { left: calc(var(--tw) - 84px); top: calc(var(--tw) * .2); z-index: 1; width: var(--vw); margin: 0; justify-self: auto; }
#s4 .cluster .s4-pol.s4-pol--close { margin: 0; justify-self: auto; width: var(--cw); }
#s4 .s4-pol--close .polaroid__cap { justify-content: flex-end; }
#s4 .entry--box .s4-sheet--post { grid-column: 3 / 7; grid-row: 2; align-self: start; margin-top: var(--sp-6); }
}
#s4 .draw--post { width: min(300px, 62%); margin: 4px 0 0 6%; }
#s4 .lead { -webkit-text-stroke: 5px var(--sheet); paint-order: stroke fill; position: absolute; left: var(--lx); top: var(--ly); translate: 0 -82%; white-space: nowrap; font-size: var(--fs-hand-m); line-height: 1; }
#s4 .lead--1 { --lx: calc(64% + 4px); --ly: 59.3%; rotate: -2deg; }
#s4 .lead--2 { --lx: calc(70.7% + 4px); --ly: 72.6%; rotate: 1deg; }
#s4 .lead--3 { --lx: calc(75.3% + 4px); --ly: 88.2%; rotate: -1.5deg; }
#s4 .slab {
position: relative; isolation: isolate; rotate: var(--rot, -1.5deg);
margin-top: clamp(56px, 7vw, 104px);
display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4) clamp(16px, 2.6vw, 44px);
padding: clamp(26px, 3.4vw, 48px) clamp(20px, 3.4vw, 56px);
background: var(--signal); color: var(--ink); border-radius: 2px;
box-shadow: 0 1px 0 rgba(255, 255, 255, .28) inset, 0 14px 26px -14px rgba(90, 30, 10, .55);
}
#s4 .slab::before {
content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
background-image: var(--tex-grain-paper), var(--tex-fibre-paper); background-size: 220px, 320px; opacity: .14; mix-blend-mode: multiply;
}
#s4 .slab__battery { display: block; width: clamp(112px, 11vw, 150px); height: auto; --sk-line: var(--ink); --sk-w: 3.2; overflow: visible; }
#s4 .slab__txt { min-width: 0; }
#s4 .slab__num { display: flex; align-items: baseline; margin: 0; color: var(--ink); white-space: nowrap; font-size: clamp(80px, 9vw, 132px); }
#s4 .slab__n { display: inline-block; }
#s4 .slab__u { font-size: .32em; letter-spacing: .03em; margin-inline: .22em .34em; text-transform: lowercase; }
#s4 .slab__cap { margin-top: .9em; color: var(--ink); font-weight: 600; }
#s4 .slab__chev {
position: absolute; right: clamp(14px, 2.6vw, 44px); top: clamp(14px, 2.4vw, 28px); width: clamp(52px, 7.5vw, 124px); aspect-ratio: 2 / 1;
background: var(--ink); opacity: .9;
-webkit-mask: var(--mask-chevrons) center / contain no-repeat; mask: var(--mask-chevrons) center / contain no-repeat;
}
@media (min-width: 960px) {
#s4 .slab { margin-left: calc(var(--spine-x) + 28px); flex-wrap: nowrap; max-width: 760px; }
#s4 .slab__chev { top: 16px; right: 22px; width: 84px; }
}
@media (max-width: 599.98px) {
#s4 .slab__battery { width: 112px; }
}
@media (min-width: 960px) {
html.js[data-motion="on"] #s4 .entry--build::after { content: ""; display: block; height: var(--hold, 55svh); }
html.js[data-motion="on"] #s4 .entry--build .entry__in { position: sticky; top: calc(var(--header-h) + 5svh); }
}
#s4 .s4-pov {
position: relative; z-index: 8; margin: clamp(48px, 7vw, 96px) 0 0 calc(-1 * (var(--m) + 24px)); width: 100vw; max-width: none;
aspect-ratio: 4 / 5; overflow: hidden; background: var(--asphalt); color: var(--chalk);
}
@media (min-width: 600px) { #s4 .s4-pov { aspect-ratio: 16 / 9; } }
@media (min-width: 960px) { #s4 .s4-pov { margin-left: calc((100% - 100vw) / 2); } }
#s4 .s4-pov__img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 62% 50%; filter: brightness(.94) contrast(1.04); transform-origin: 60% 50%; }
#s4 .s4-pov__shade { position: absolute; inset: 0; pointer-events: none;
background: linear-gradient(180deg, rgba(10, 11, 13, .42) 0, rgba(10, 11, 13, 0) 28%, rgba(10, 11, 13, 0) 52%, rgba(10, 11, 13, .74) 100%), linear-gradient(90deg, rgba(10, 11, 13, .38) 0, rgba(10, 11, 13, 0) 55%); }
#s4 .s4-pov__cap { position: absolute; inset: 0; margin: 0; padding: clamp(16px, 3vw, 44px) var(--m); pointer-events: none; }
#s4 .s4-pov__stamp { position: absolute; top: clamp(16px, 2.6vw, 40px); left: var(--m); margin: 0; color: var(--chalk); font-size: var(--fs-kicker); background: rgba(10, 11, 13, .55); border-radius: 2px; max-width: calc(100% - 2 * var(--m)); }
#s4 .s4-pov__big { position: absolute; left: var(--m); bottom: clamp(20px, 3.6vw, 56px); margin: 0; font-size: clamp(64px, 11.5vw, 188px); line-height: .82; color: var(--chalk); text-shadow: 0 2px 18px rgba(10, 11, 13, .5); text-wrap: balance; max-width: 9em; }
#s4 .s4-pov__w--hot { color: var(--signal); -webkit-text-stroke: 1.2px var(--asphalt); paint-order: stroke fill; }
#s4 .s4-pov__hand { position: absolute; right: var(--m); top: 44%; margin: 0; rotate: -3deg; font-size: var(--fs-hand-l); line-height: 1; color: var(--chalk); text-shadow: 0 1px 10px rgba(10, 11, 13, .7); }
@media (max-width: 599.98px) {
#s4 .s4-pov__big { font-size: 22vw; max-width: 5.5em; }
#s4 .s4-pov__hand { right: auto; left: var(--m); bottom: auto; top: 18%; }
}
#s4 .seam { translate: 0 var(--par, 0px); }
@media (max-width: 959.98px) {
#s4 .s4-aside__arrow { --mk: var(--mk-arrow-curve-down); aspect-ratio: 220 / 150; width: 52px; translate: 0 6px; }
#s4 .entry__vis--build .s4-pol--render { margin-top: 14px; }
}
@media (max-width: 599.98px) {
#s4 .s4-note--a { left: 38%; top: 86%; }
#s4 .entry__vis--build .s4-pol--render { width: min(var(--w), calc(100% - 16px)); margin-right: 8px; }   
#s4 .cluster .s4-pol:first-child { width: min(var(--w), calc(100% - 24px)); margin-left: 6px; }
#s4 .cluster .s4-pol + .s4-pol { margin-right: 10px; }
#s4 .t-h2-paper { max-width: none; }
#s4 .draw--post { width: 88%; margin: 4px auto 0; }
#s4 .lead { font-size: 22px; }
}
@media (hover: none) { #s4 .s4-pol { transition: none; } }
@media (prefers-contrast: more) {
#s4 .slab::before { display: none; }
#s4 .s4-sheet { background-image: none; }
}
@media print { #s4 .s4-nib, #s4 .s4-ruler { display: none !important; } }
#s5 {
--s5-gh: clamp(120px, 21svh, 168px);           
--s5-rw: 112px;                                 
padding-block: var(--sec-pad) calc(var(--sec-pad) + var(--seam-h));
}
@media (min-width: 960px) {
#s5 { --s5-gh: clamp(150px, 23svh, 232px); --s5-rw: clamp(150px, 15vw, 200px); }
}
#s5 .s5-intro { row-gap: var(--sp-5); padding-bottom: var(--sp-7); }
#s5 .s5-intro > * { grid-column: 1 / -1; }
#s5 .s5-kicker { text-wrap: balance; }
#s5 .s5-h { font-size: clamp(46px, 22px + 6.3vw, 112px); }   
#s5 .s5-h { position: relative; --spread: 1; }
html[data-motion="on"] #s5 .s5-h { --spread: 0; }
#s5 .s5-wet { color: var(--signal); position: relative; z-index: 1; }
#s5 .s5-echo {
position: absolute; left: 0; top: .9em; z-index: 0; pointer-events: none; user-select: none; white-space: nowrap;
font: inherit; line-height: .9; text-transform: inherit; color: transparent;
text-shadow: calc(var(--spread) * 3px) 0 0 color-mix(in srgb, var(--signal) 35%, transparent),
calc(var(--spread) * 6px) 0 0 color-mix(in srgb, var(--signal) 18%, transparent);
}
#s5 .s5-echo.is-settled, html:not([data-motion="on"]) #s5 .s5-echo { display: none; }
#s5 .s5-lede { color: var(--fg); }
@media (min-width: 960px) {
#s5 .s5-h { grid-column: 1 / 9; }
#s5 .s5-lede { grid-column: 1 / 7; }
}
#s5 .s5-wire { position: absolute; left: 0; top: 0; width: 100%; height: 0; z-index: 1; pointer-events: none; }
#s5 .s5-wire svg, #s5 .s5-wire2 svg { position: absolute; left: 0; top: 0; overflow: visible; display: block; max-width: none; }
#s5 .s5-wire2 { position: absolute; left: 0; top: 0; width: 0; height: 0; z-index: 1; pointer-events: none; }
#s5 .s5-wire path, #s5 .s5-wire2 path { fill: none; stroke: var(--signal); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
#s5 .s5-wire2 circle { fill: var(--signal); }
#s5 .s5-track { position: relative; }
html[data-motion="on"] #s5 .s5-track { height: 200svh; }
@media (min-width: 960px) { html[data-motion="on"] #s5 .s5-track { height: 260svh; } }
#s5 .s5-stage {
position: relative; z-index: 2; row-gap: var(--sp-4); align-content: start; padding-block: var(--sp-4);
}
html[data-motion="on"] #s5 .s5-stage {
position: sticky; top: var(--header-h); height: calc(100svh - var(--header-h));
grid-template-rows: minmax(110px, 340px) auto auto; align-content: start;
}
@media (min-width: 600px) and (max-width: 959.98px) { html[data-motion="on"] #s5 .s5-stage { grid-template-rows: minmax(110px, 420px) auto auto; } }
@media (min-width: 960px) {
html[data-motion="on"] #s5 .s5-stage { grid-template-rows: minmax(0, 1fr) auto; align-content: stretch; }
}
#s5 .s5-pov {
position: relative; grid-column: 1 / -1; min-height: 0; overflow: hidden; border-radius: var(--radius);
background: var(--tar); aspect-ratio: 960 / 672; isolation: isolate;
}
html[data-motion="on"] #s5 .s5-pov { aspect-ratio: auto; height: auto; }
@media (min-width: 960px) {
#s5 .s5-pov { grid-column: 1 / 8; }
}
#s5 .s5-pov__poster, #s5 .s5-pov__cv { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
#s5 .s5-pov__poster { object-fit: cover; object-position: 60% 55%; }
#s5 .s5-pov__cv { z-index: 1; }
#s5 .s5-pov::after {
content: ""; position: absolute; inset: 10px; z-index: 3; pointer-events: none; opacity: .55;
--c: linear-gradient(var(--chalk), var(--chalk));
background:
var(--c) top left / 18px 2px no-repeat, var(--c) top left / 2px 18px no-repeat,
var(--c) top right / 18px 2px no-repeat, var(--c) top right / 2px 18px no-repeat,
var(--c) bottom left / 18px 2px no-repeat, var(--c) bottom left / 2px 18px no-repeat,
var(--c) bottom right / 18px 2px no-repeat, var(--c) bottom right / 2px 18px no-repeat;
}
#s5 .s5-pov__tag { position: absolute; z-index: 4; left: 22px; top: 22px; display: flex; flex-wrap: wrap; gap: 6px; max-width: calc(100% - 44px); }
#s5 .s5-pov__lab {
display: inline-block; padding: 7px 9px 6px; border-radius: 1px; background: rgba(10, 11, 13, .74); color: var(--chalk);
font: 600 12px/1 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap;
}
#s5 .s5-pov__tag { transition: opacity var(--d-ui) linear; }
#s5 .s5-pov.is-off .s5-pov__tag { opacity: 0; }
@media (max-width: 599.98px) {
#s5 .s5-pov__tag { left: 18px; top: 18px; }
}
#s5 .s5-side {
grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "board rider" "play rider";
column-gap: var(--sp-4); row-gap: var(--sp-3); align-items: end;
}
#s5 .s5-board { grid-area: board; align-self: start; }
#s5 .s5-boardrow { display: flex; gap: 14px; align-items: baseline; font: 600 var(--fs-kicker)/1.3 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--fg-2); }
#s5 .s5-lapnow b { color: var(--fg); font-weight: 700; }
#s5 .s5-log { min-width: 11ch; }
#s5 .s5-readout { margin-top: var(--sp-2); display: flex; }
#s5 .s5-num { min-width: 4ch; white-space: nowrap; }
#s5 .s5-readout.is-r { color: var(--lean-r); }
#s5 .s5-readout.is-l { color: var(--lean-l); }
#s5 .s5-readout.is-0 { color: var(--fg); }
#s5 .s5-dirrow { margin-top: var(--sp-2); }
#s5 .s5-dir { display: inline-block; min-width: 18ch; font-size: var(--fs-kicker); font-weight: 700; letter-spacing: .1em; }
#s5 .s5-readout.is-r + .s5-dirrow .s5-dir { color: var(--lean-r); }
#s5 .s5-readout.is-l + .s5-dirrow .s5-dir { color: var(--lean-l); }
#s5 .s5-readout.is-0 + .s5-dirrow .s5-dir { color: var(--fg-2); }
#s5 .s5-rider { grid-area: rider; position: relative; width: var(--s5-rw); align-self: end; }
#s5 .s5-rider svg { width: 100%; height: auto; overflow: visible; --sk-w: 3; }
#s5 .s5-ground { position: absolute; left: -22%; right: -22%; bottom: 2.1%; height: 2px; background: var(--chalk); opacity: .45; }
#s5 .s5-play { grid-area: play; justify-self: start; }
#s5 .s5-rider { margin-right: 18px; }
#s5 .s5-times { display: none; grid-area: times; }
@media (max-width: 959.98px) { #s5 .s5-readout { margin-top: 6px; } }
@media (min-width: 960px) {
#s5 .s5-side { grid-column: 8 / -1; grid-template-areas: "board board" "times rider" "play rider"; grid-template-rows: auto minmax(0, 1fr) auto; align-items: stretch; padding-block: 2px; min-height: 0; }
#s5 .s5-times { display: table; align-self: center; border-collapse: collapse; }
#s5 .s5-board { align-self: start; }
#s5 .s5-readout { margin-top: var(--sp-3); }
#s5 .s5-play { align-self: end; }
#s5 .s5-rider { justify-self: end; align-self: end; margin-right: clamp(0px, 3vw, 48px); }
}
#s5 .s5-plot { grid-column: 1 / -1; display: grid; gap: var(--sp-2); min-width: 0; }
#s5 .s5-controls { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--sp-1) var(--sp-4); min-width: 0; }
#s5 .s5-hint { display: block; flex: 1 0 100%; font-size: 22px; line-height: 1; opacity: .8; padding-bottom: 0; }
@media (min-width: 600px) { #s5 .s5-hint { flex: 0 1 auto; font-size: 24px; padding-bottom: 8px; } }
#s5 .s5-tabs { margin-left: auto; min-width: 0; }
#s5 .tabs__tab { padding-inline: 14px; }
#s5 .s5-graphbox { position: relative; margin-bottom: 34px; }
#s5 .s5-graphbox .graph {
position: relative; z-index: 1; width: 100%; height: var(--s5-gh); overflow: hidden;
border-block: 1px solid var(--hair);
}
#s5 .s5-graphbox:has(.s5-range:focus-visible) { outline: 3px solid var(--focus); outline-offset: 4px; }
#s5 .graph__r, #s5 .graph__l { stroke-width: 3; }
#s5 .graph__grid { stroke: var(--hair); stroke-width: 1; stroke-dasharray: 1 6; vector-effect: non-scaling-stroke; }
#s5 .graph__lap { stroke-dasharray: 2 5; }
#s5 .graph__dim { opacity: .3; }
#s5 .graph .playhead line { stroke: var(--chalk); stroke-width: 2; }
#s5 .graph .playhead__flag, #s5 .graph .graph__peaks, #s5 .graph .graph__win { display: none; }
#s5 .s5-rain { position: absolute; left: 0; right: 0; top: 0; height: var(--s5-gh); z-index: 0; opacity: .16; pointer-events: none; overflow: hidden; }
#s5 .s5-rain__svg { display: block; --sk-w: 2.5; }
#s5 .s5-method { max-width: 70ch; color: var(--fg-2); }
#s5 .s5-over { position: absolute; left: 0; right: 0; top: 0; height: var(--s5-gh); z-index: 3; pointer-events: none; container-type: size; }
#s5 .s5-pin { position: absolute; left: 0; top: 0; translate: calc(var(--x, 0) * 1cqw) 0; }
#s5 .s5-pin.is-out { visibility: hidden; }
#s5 .s5-axis { position: absolute; right: 6px; top: calc(var(--y) * 1%); font: 500 12px/1 var(--f-mono); letter-spacing: .06em; color: var(--fg-2); opacity: .8; }
#s5 .s5-axis--r { translate: 0 calc(-100% - 3px); }
#s5 .s5-axis--l { translate: 0 3px; }
#s5 .s5-flag { top: calc(100% - 33px); margin-left: -5.5px; }
#s5 .s5-flag svg { display: block; width: 24px; height: 32px; --sk-w: 3; }
#s5 .s5-laplab { top: calc(100% - 22px); margin-left: 22px; font: 600 12px/1 var(--f-mono); letter-spacing: .08em; color: var(--fg-2); white-space: nowrap; }
#s5 .s5-win { top: 100%; margin-top: 6px; width: max(8px, calc(var(--w) * 1cqw)); height: 7px; border: 1.5px solid var(--fg-2); border-top: 0; transition: border-color var(--d-hover) linear; }
#s5 .s5-win.is-on { border-color: var(--chalk); }
#s5 .s5-winlab { top: 100%; margin-top: 18px; font: 500 12px/1 var(--f-mono); letter-spacing: .04em; color: var(--fg-2); white-space: nowrap; }
#s5 .s5-winlab[data-anchor="r"] { margin-left: -12.5ch; }
#s5 .s5-peak { top: calc(var(--y) * 1cqh); width: 0; height: 0; }
#s5 .s5-peak__ring { position: absolute; left: 0; top: 0; width: 58px; height: 35px; translate: -50% -50%; --sk-w: 7; }
#s5 .s5-peak__ring svg { display: block; width: 100%; height: 100%; overflow: visible; }
#s5 .s5-peak--hero .s5-peak__ring { --hand: var(--signal); }
#s5 .s5-peak__txt {
position: absolute; left: 36px; top: 0; translate: 0 -52%; font: 700 26px/1 var(--f-hand); color: var(--hand); white-space: nowrap;
text-shadow: 0 0 2px var(--bg), 0 0 4px var(--bg), 0 0 7px var(--bg), 1px 1px 0 var(--bg), -1px -1px 0 var(--bg), 1px -1px 0 var(--bg), -1px 1px 0 var(--bg);
}
#s5 .s5-peak--hero .s5-peak__txt { color: var(--signal); font-size: 32px; }
#s5 .s5-peak--l .s5-peak__txt { left: -60px; width: 120px; text-align: center; top: 19px; translate: none; }
@media (max-width: 599.98px) {
#s5 .s5-axis { display: none; }
#s5 .s5-peak__ring { width: 38px; height: 24px; --sk-w: 8; }
#s5 .s5-peak__txt { left: 24px; font-size: 18px; }
#s5 .s5-peak--l .s5-peak__txt { left: -66px; width: 120px; top: 13px; translate: none; }
#s5 .s5-peak--l[data-i="82"] .s5-peak__txt { left: -84px; }   
#s5 .s5-laplab__w { display: none; }
#s5 .s5-peak--hero .s5-peak__txt { font-size: 24px; }
}
#s5 .s5-handle { top: -7px; width: 14px; height: 16px; margin-left: -7px; background: var(--chalk); clip-path: polygon(0 0, 100% 0, 100% 55%, 50% 100%, 0 55%); }
#s5 .s5-nib { width: 30px; height: 30px; margin: -27px 0 0 -3px; translate: calc(var(--x, 0) * 1cqw) calc(var(--y, 50) * 1cqh); opacity: 0; --sk-w: 3; }
#s5 .s5-nib svg { display: block; width: 100%; height: 100%; }
#s5 .s5-range-cap { display: none; margin-top: 40px; }
#s5 .s5-range { margin-top: 2px; }
html[data-motion="on"] #s5 .s5-range {
position: absolute; left: 0; top: 0; width: 100%; height: var(--s5-gh); margin: 0; opacity: 0; z-index: 6; cursor: ew-resize; touch-action: pan-y;
}
html[data-motion="on"] #s5 .s5-range::-webkit-slider-runnable-track { height: 100%; background: none; }
html[data-motion="on"] #s5 .s5-range::-moz-range-track { height: 100%; background: none; }
html[data-motion="on"] #s5 .s5-range::-webkit-slider-thumb { width: 2px; height: var(--s5-gh); margin-top: 0; border: 0; border-radius: 0; transform: none; }
html[data-motion="on"] #s5 .s5-range::-moz-range-thumb { width: 2px; height: var(--s5-gh); border: 0; border-radius: 0; transform: none; }
html:not([data-motion="on"]) #s5 .s5-range-cap { display: block; }
html:not([data-motion="on"]) #s5 .s5-play, html:not([data-motion="on"]) #s5 .s5-hint { display: none; }
#s5 .s5-after { row-gap: var(--sp-8); padding-top: var(--sp-8); }
#s5 .s5-after > * { grid-column: 1 / -1; }
#s5 .s5-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
#s5 .s5-stat { position: relative; padding: var(--sp-5) 0 var(--sp-5) var(--sp-4); border-top: 1px solid var(--hair); display: grid; grid-template-rows: 48px auto auto; row-gap: var(--sp-2); align-content: start; }
#s5 .s5-stat:nth-child(odd) { padding-left: 0; }
#s5 .s5-stat:nth-child(even) { border-left: 1px solid var(--hair); }
#s5 .s5-stat__art { display: flex; align-items: flex-end; gap: 4px; height: 48px; opacity: .85; --sk-w: 3; }
#s5 .s5-stat__art svg { display: block; height: 100%; width: auto; }
#s5 .s5-stat__art--tick svg { width: 48px; }
#s5 .s5-stat__art--flags { gap: 6px; }
#s5 .s5-stat__art--flags svg { height: 40px; }
#s5 .s5-stat__art .s5-angle { width: auto; }
#s5 .s5-stat__n { display: block; min-width: 3ch; color: var(--fg); }
#s5 .s5-stat--hot .s5-stat__n { color: var(--signal); }
#s5 .s5-stat__l { margin: 0; }
@media (min-width: 960px) {
#s5 .s5-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
#s5 .s5-stat { grid-template-rows: 64px auto auto; padding: var(--sp-6) 0 var(--sp-6) var(--sp-5); }
#s5 .s5-stat:nth-child(odd) { padding-left: var(--sp-5); }
#s5 .s5-stat:first-child { padding-left: 0; }
#s5 .s5-stat + .s5-stat { border-left: 1px solid var(--hair); }
#s5 .s5-stat__art { height: 64px; }
#s5 .s5-stat__art--tick svg { width: 64px; }
#s5 .s5-stat__art--flags svg { height: 54px; }
}
#s5 .s5-polas {
display: flex; gap: var(--sp-4); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
padding: var(--sp-4) 0 var(--sp-5); margin-top: calc(-1 * var(--sp-4)); overscroll-behavior-x: contain;
}
#s5 .s5-polas::-webkit-scrollbar { display: none; }
#s5 .s5-pol { flex: none; width: min(72vw, 340px); scroll-snap-align: center; rotate: calc(var(--rot, 0deg) / 2); }
#s5 .s5-polas:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
#s5 .s5-polas .polaroid__img { aspect-ratio: 960 / 672; }
#s5 .s5-polas .polaroid__cap { min-height: 52px; font-size: 22px; padding-block: 6px; }
#s5 .s5-note { margin-top: var(--sp-2); padding: var(--sp-6) var(--sp-5) var(--sp-5); display: grid; gap: var(--sp-4); }
#s5 .s5-note__txt { display: grid; gap: var(--sp-3); }
#s5 .s5-note__art { width: min(180px, 50%); justify-self: end; margin-top: calc(-1 * var(--sp-3)); --sk-w: 3; }
#s5 .s5-note__art svg { display: block; width: 100%; height: auto; overflow: visible; }
#s5 .s5-note h3 { color: var(--ink); }
@media (max-width: 959.98px) { #s5 .s5-note { order: 2; } #s5 .s5-polas { order: 3; } }
@media (min-width: 960px) {
#s5 .s5-after { grid-template-rows: auto auto; }
#s5 .s5-polas {
grid-column: 1 / 8; grid-row: 2; position: relative; display: block; overflow: visible; padding: 0; margin: 0; aspect-ratio: 765 / 470;
scroll-snap-type: none;
}
#s5 .s5-pol { position: absolute; width: 41%; rotate: var(--rot, 0deg); }
#s5 .s5-pol--1 { left: 1%; top: 1%; z-index: 1; }
#s5 .s5-pol--2 { left: 49%; top: 4%; z-index: 2; }
#s5 .s5-pol--3 { left: 27%; top: 43%; z-index: 0; }
#s5 .s5-polas .polaroid__cap { font-size: clamp(20px, 1.9vw, 25px); min-height: 56px; }
#s5 .s5-note { grid-column: 8 / -1; grid-row: 2; align-self: center; margin-top: 0; padding: 40px 36px 32px; grid-template-columns: minmax(0, 1fr) minmax(120px, 190px); align-items: end; gap: var(--sp-5); }
#s5 .s5-note__art { width: 100%; margin: 0; }
}
html:not([data-motion="on"]) #s5 .s5-pov { aspect-ratio: 960 / 672; }
#s5 .s5-times th, #s5 .s5-times td { padding: 7px 18px 6px 0; text-align: left; font: 600 var(--fs-kicker)/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; }
#s5 .s5-times thead th { color: var(--fg-2); font-weight: 500; border-bottom: 1px solid var(--hair); padding-bottom: 8px; }
#s5 .s5-times tbody th { color: var(--fg-2); width: 4ch; }
#s5 .s5-times td { font: 900 34px/1 var(--f-caps); font-stretch: 75%; font-variant-numeric: tabular-nums lining-nums; letter-spacing: 0; text-transform: none; min-width: 4.4ch; }
#s5 .s5-times td.r { color: var(--lean-r); } #s5 .s5-times td.l { color: var(--lean-l); }
#s5 .s5-times tbody tr { opacity: .6; transition: opacity var(--d-ui) var(--ease-speed), background-color var(--d-ui) var(--ease-speed); }
#s5 .s5-times tbody tr.is-now { opacity: 1; background: color-mix(in srgb, var(--signal) 14%, transparent); }
#s5 .s5-times tbody tr.is-now th { color: var(--fg); box-shadow: inset 3px 0 0 var(--signal); padding-left: 8px; }
#s5 .s5-times tbody th { padding-left: 8px; }
@media (min-width: 960px) and (max-height: 860px) { #s5 .s5-times { display: none; } }
@media (max-width: 599.98px) {
#s5 .s5-note .tape--tl { left: -8px; }
#s5 .s5-note .tape--tr { right: -8px; }
}
@media (max-width: 959.98px) and (max-height: 800px) {
#s5 .s5-play { display: none; }
#s5 .s5-side { grid-template-areas: "board rider"; row-gap: 0; }
#s5 { --s5-rw: clamp(84px, 15svh, 112px); }
#s5 .s5-hint__or { display: none; }
}
@media (max-width: 959.98px) and (max-height: 700px) {
#s5 { --s5-gh: clamp(112px, 18svh, 168px); }
html[data-motion="on"] #s5 .s5-stage { row-gap: var(--sp-2); padding-block: var(--sp-3); }
}
@media (min-width: 960px) {
#s5 { --bleed: max(var(--m), calc((100vw - var(--maxw)) / 2)); --s5-rw: clamp(150px, 16vw, 236px); }
#s5 .s5-pov { grid-column: 1 / 10; grid-row: 1; z-index: 2; margin-left: calc(-1 * var(--bleed)); border-radius: 0 var(--radius) var(--radius) 0; }
#s5 .s5-pov__poster { object-position: 62% 56%; }
#s5 .s5-pov::before {
content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
background: linear-gradient(to top, rgba(10, 11, 13, .86) 0, rgba(10, 11, 13, .62) 26%, rgba(10, 11, 13, 0) 58%),
linear-gradient(to right, rgba(10, 11, 13, .55) 0, rgba(10, 11, 13, 0) 46%);
}
#s5 .s5-pov::after { inset: 10px 10px 10px calc(var(--bleed) - 14px); }
#s5 .s5-pov__tag { left: calc(var(--bleed) + 2px); top: 24px; max-width: calc(100% - var(--bleed) - 24px); }
#s5 .s5-side {
grid-column: 1 / -1; grid-row: 1; z-index: 3; position: relative; pointer-events: none; padding: 0;
display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); grid-template-areas: none;
grid-template-rows: minmax(0, 1fr) auto; align-items: stretch;
}
#s5 .s5-board { grid-area: auto; grid-column: 1 / 8; grid-row: 1 / 3; align-self: end; padding: 0 0 26px 2px; }
#s5 .s5-times { grid-area: auto; grid-column: 10 / 13; grid-row: 1; align-self: start; justify-self: end; margin-top: 2px; }
#s5 .s5-rider { grid-area: auto; grid-column: 10 / 13; grid-row: 1 / 3; align-self: end; justify-self: end; margin-right: 0; }
#s5 .s5-play { grid-area: auto; grid-column: 10 / 12; grid-row: 2; align-self: end; justify-self: start; pointer-events: auto; margin-bottom: 4px; background: var(--asphalt); }
#s5 .s5-ground { left: -8%; right: 0; opacity: .55; }
#s5 .s5-plot { grid-row: 2; }
}
@media (min-width: 960px) and (max-width: 1279.98px) {
#s5 .s5-play { grid-row: 1; align-self: start; margin: 0; }
}
@media (min-width: 960px) and (max-width: 1279.98px) and (min-height: 861px) {
#s5 .s5-play { margin-top: 210px; }   
}
#s6 { --ln: 32px; padding-block: calc(var(--sec-pad) + 8px); }
#s6 .rail__hand { margin-top: 2px; font-size: var(--fs-hand-m); }
#s6 .s6__h { max-width: 14ch; }
#s6 .s6__h .w { margin-right: .02em; }
#s6 .s6__intro { margin-top: var(--sp-4); max-width: 40ch; color: var(--fg); }
@media (min-width: 960px) {
#s6 .s6__h { max-width: none; text-align: center; margin-inline: auto; }
#s6 .s6__intro { margin-inline: auto; text-align: center; text-wrap: balance; }
}
#s6 .s6__stage { margin-top: var(--sp-7); display: grid; grid-template-columns: minmax(0, 1fr); row-gap: var(--sp-6); align-items: start; }
#s6 .bench { display: contents; }
#s6 .calc { z-index: 1; padding: 88px 20px 0; --rot: -.8deg; }
#s6 .calc__note {
position: absolute; left: 20px; right: 20px; top: 22px; max-width: none; font-size: 24px; line-height: 28px; rotate: -1.2deg; transform-origin: 0 100%; text-wrap: balance;
}
#s6 .calc__result { display: none; }
html.js #s6 .calc__result {
display: flex; align-items: center; gap: 8px; position: sticky; top: calc(var(--header-h) + 8px); z-index: 4; width: fit-content; height: 52px; box-sizing: border-box;
margin: -66px auto 14px 0; padding: 6px 12px; background: var(--ink); color: var(--sheet); font: 900 40px/1 var(--f-caps); font-stretch: 75%; rotate: 1deg;
box-shadow: var(--lift-sheet-on-paper); pointer-events: none;
}
#s6 .calc__result-n { display: inline-block; min-width: 58px; text-align: center; font-variant-numeric: tabular-nums lining-nums; }
#s6 .calc__result .t-mono { width: min-content; font: 600 11px/1.2 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--sheet); opacity: .85; }
@media (min-width: 700px) { html.js #s6 .calc__result { display: none; } }
#s6 .calc__rows { display: grid; row-gap: 0; }
#s6 .calc__row { position: relative; }
#s6 .calc__head { height: calc(var(--ln) * 2); display: flex; flex-wrap: wrap; align-content: flex-end; align-items: baseline; justify-content: space-between; padding: 0 0 6px; }
#s6 .calc__label { font-size: var(--fs-kicker); letter-spacing: .12em; color: var(--fg); font-weight: 700; }
#s6 .calc__val { display: flex; flex: none; align-items: baseline; gap: 6px; line-height: 1; }
#s6 .calc__n {
display: inline-block; flex: none; width: 58px; text-align: right; font-family: var(--f-caps); font-weight: 900; font-stretch: 75%;
font-size: 44px; line-height: 40px; font-variant-numeric: tabular-nums lining-nums; color: var(--fg);
}
#s6 .calc__u { font: 600 var(--fs-kicker)/1 var(--f-mono); letter-spacing: .06em; color: var(--fg-2); width: 4.2ch; flex: none; }
#s6 .calc__slider { position: relative; height: calc(var(--ln) * 2); }
#s6 .calc__slider .range { height: calc(var(--ln) * 2); }   
#s6 .range { --lean-r: var(--ink); position: relative; z-index: 1; }
#s6 .range::-webkit-slider-runnable-track { background: linear-gradient(to right, var(--ink) 0 var(--to, 50%), var(--rule) var(--to, 50%)); height: 4px; }
#s6 .range::-moz-range-track { background: linear-gradient(to right, var(--ink) 0 var(--to, 50%), var(--rule) var(--to, 50%)); height: 4px; }
#s6 .ruler { position: absolute; left: 22px; right: 22px; top: calc(var(--ln) + 1px); height: calc(var(--ln) - 1px); pointer-events: none; }   
#s6 .ruler__t { position: absolute; top: 0; left: calc(var(--f) * 100%); width: 1.5px; height: 6px; margin-left: -.75px; background: var(--graphite); opacity: .75; }
#s6 .ruler__t--major { height: 11px; background: var(--ink); opacity: 1; }
#s6 .ruler__n { position: absolute; top: auto; bottom: 6px; left: calc(var(--f) * 100%); transform: translateX(-50%); font: 600 12px/1 var(--f-mono); letter-spacing: .02em; color: var(--fg-2); white-space: nowrap; }
#s6 .calc__lower { margin-top: 0; display: grid; row-gap: 0; padding-bottom: 66px; }
#s6 .plan-wrap { height: 192px; display: flex; align-items: flex-start; }
#s6 .plan { display: block; width: 100%; max-width: 340px; height: auto; overflow: visible; }
#s6 .plan__fill { fill: var(--sk-fill); stroke: none; transform: translate(1.2px, .8px); }
#s6 .plan__fill--a { fill-opacity: .55; }
#s6 .plan__fill--b { fill-opacity: .25; }
#s6 .plan__e { fill: none; stroke: var(--sk-line); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
#s6 .plan__e--thin { stroke-width: .9; opacity: .8; }
#s6 .plan__trail { fill: none; stroke: var(--sk-line); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }   
#s6 .plan__centre { fill: none; stroke: var(--graphite); stroke-width: 1.6; stroke-dasharray: 7 7; stroke-linecap: round; opacity: .55; }
#s6 .plan__streak { fill: none; stroke: var(--sk-line); stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 14 6; stroke-opacity: .7; }
#s6 .plan__bike path { fill: none; stroke: var(--sk-hot); stroke-width: 4.4; stroke-linecap: round; }
#s6 .plan__bike path:nth-child(2) { stroke-width: 1.8; }
#s6 .plan__bike path:nth-child(3) { stroke-width: 5.8; }
#s6 .plan__bike path:nth-child(4) { stroke-width: 1.5; }
#s6 .plan__radius { fill: none; stroke: var(--sk-pen); stroke-width: 1.9; stroke-dasharray: 3 6; stroke-linecap: round; }
#s6 .plan__cross { fill: none; stroke: var(--sk-pen); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
#s6 .plan__label { font: 600 23px var(--f-hand); fill: var(--sk-pen); paint-order: stroke; stroke: var(--sheet); stroke-width: 7px; stroke-linejoin: round; }
#s6 .calc__work { margin-top: 0; font: 600 24px/32px var(--f-hand); color: var(--hand); min-height: 96px; }
#s6 .calc__work span { display: block; width: fit-content; white-space: nowrap; }
#s6 .calc__formula { margin-top: 12px; color: var(--fg); max-width: 52ch; }
#s6 .calc__formula b { font-weight: 600; color: var(--fg-2); }
#s6 .gauge {
--rot: 1.2deg; --sk-w: 3.4; position: relative; z-index: 3; width: 272px; max-width: 100%; padding: 20px 24px 36px; margin-top: -40px; justify-self: center;
}
#s6 .gauge__label { color: var(--fg-2); letter-spacing: .14em; }
#s6 .gauge::after {
content: ""; position: absolute; z-index: 4; right: 0; top: 0; width: 26px; height: 26px; pointer-events: none;
background: linear-gradient(225deg, var(--paper) 0 50%, color-mix(in srgb, var(--chalk) 22%, var(--tar)) 50% 100%);
box-shadow: -2px 2px 3px rgba(0, 0, 0, .35);
border-bottom-left-radius: 2px;
}
#s6 .gauge__dial { position: relative; width: 224px; height: 160px; margin: 8px auto 0; overflow: clip; }
#s6 .gauge__svg { position: absolute; left: -3px; top: -30px; width: 230px; height: 230px; overflow: visible; }
#s6 .gauge__read { position: relative; width: 224px; height: 112px; margin: 8px auto 0; }
#s6 .gauge__num {
position: absolute; left: 0; bottom: 22px; display: inline-block; min-width: 3ch; font-family: var(--f-caps); font-weight: 900; font-stretch: 75%;
font-size: 84px; line-height: .8; letter-spacing: -.01em; color: var(--chalk); font-variant-numeric: tabular-nums lining-nums;
}
#s6 .gauge__wave { position: absolute; left: 2px; bottom: 0; width: 124px; height: 12px; --hand: var(--chalk); }
#s6 .gauge__wave svg { display: block; width: 100%; height: 100%; overflow: visible; }
#s6 .gauge__over { position: absolute; left: 0; bottom: -26px; font: 700 13px/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--signal); visibility: hidden; }
#s6 .gauge__over[data-on="1"] { visibility: visible; }
#s6 .gauge__ground { position: absolute; left: 134px; right: 0; bottom: 6px; height: 0; border-top: 1.5px solid var(--chalk); opacity: .55; }
#s6 .gauge__rider { position: absolute; width: 96px; height: 108px; left: 123px; bottom: 4px; --sk-w: 5.2; overflow: visible; }
#s6 .guides-wrap { position: relative; z-index: 2; }
#s6 .guides { display: grid; row-gap: 8px; }
#s6 .guides li { position: relative; }
#s6 .guides__card { position: relative; padding-bottom: 54px; }
#s6 .guides__card .index-card__cat { display: block; width: fit-content; }
#s6 .guides__title { display: block; margin-top: 6px; max-width: 18ch; color: var(--ink); }
#s6 .guides__go {
position: absolute; right: 18px; bottom: 30px; width: 30px; height: 15px; background: var(--ink);
-webkit-mask: var(--mask-chevrons) center / contain no-repeat; mask: var(--mask-chevrons) center / contain no-repeat;
transition: transform var(--d-ui) var(--ease-speed);
}
#s6 a.guides__card { transition: transform var(--d-ui) var(--ease-settle), translate var(--d-ui) var(--ease-settle), rotate var(--d-ui) var(--ease-settle); }
#s6 .guides li:nth-child(1) .guides__card { margin-left: 0; margin-right: 6px; --rot: .4deg; }
#s6 .guides li:nth-child(2) .guides__card {
margin-left: 14px; --rot: -.6deg; padding-bottom: 72px; border-top: 0; padding-top: 21px; background-color: var(--polaroid);
background-image: linear-gradient(var(--pen), var(--pen)), repeating-linear-gradient(to bottom, transparent 0 33px, var(--rule) 33px 34px);
background-size: calc(100% - 40px) 2px, 100% calc(100% - 54px); background-position: 20px 45px, 0 54px; background-repeat: no-repeat;
}
#s6 .guides li:nth-child(2) .index-card__cat { margin-bottom: 12px; }
#s6 .guides li:nth-child(2) .guides__title {
display: inline; margin-top: 0; max-width: none; line-height: 34px; padding: 3px 5px; margin-left: -5px;
background: var(--polaroid); box-decoration-break: clone; -webkit-box-decoration-break: clone;
}
#s6 .guides li:nth-child(3) .guides__card {
margin-left: 5px; margin-right: 2px; --rot: .4deg; padding: 21px 20px 50px 44px; border-top: 0; background-color: var(--paper-2);
background-image: radial-gradient(circle 4px at 0 50%, var(--paper) 96%, #0000 100%);
background-size: 8px 16px; background-position: 0 0; background-repeat: repeat-y;
}
#s6 .guides li:nth-child(3) .guides__card::after {
content: ""; position: absolute; left: 17px; top: 24px; width: 12px; height: 12px; border-radius: 50%; background: var(--paper);
box-shadow: inset 0 1.5px 2px rgba(60, 40, 10, .45), 0 1px 0 rgba(255, 255, 255, .5);
}
#s6 .guides__card:focus-visible { outline: 3px solid var(--pen); outline-offset: 4px; }
#s6 .guides__card:hover { z-index: 5; }
#s6 .guides__card:focus-visible { z-index: 5; }
#s6 .guides__card:focus-visible .guides__go { transform: translateX(5px); }
@media (hover: hover) { #s6 .guides__card:hover .guides__go { transform: translateX(5px); } }
#s6 .guides__all {
display: inline-flex; align-items: center; gap: 10px; min-height: var(--tap); margin-top: var(--sp-5); font-family: var(--f-caps); font-weight: 800;
font-stretch: 100%; font-size: var(--fs-btn); letter-spacing: .04em; text-transform: uppercase; text-decoration: none; color: var(--ink);
border-bottom: 2px solid var(--signal-g); padding-bottom: 2px;
}
#s6 .guides__all::after {
content: ""; width: 26px; height: 13px; background: currentColor;
-webkit-mask: var(--mask-chevrons) center / contain no-repeat; mask: var(--mask-chevrons) center / contain no-repeat;
transition: transform var(--d-ui) var(--ease-speed);
}
#s6 .guides__all:focus-visible::after { transform: translateX(5px); }
@media (hover: hover) { #s6 .guides__all:hover::after { transform: translateX(5px); } }
@media (max-width: 699.98px) {
html.js #s6 .calc__note { left: 166px; right: 14px; top: 20px; font-size: 22px; line-height: 26px; }
#s6 .calc .tape--tl { left: -10px; }
}
@media (max-width: 420px) {
#s6 .calc { padding-inline: 16px; }
#s6 .gauge { width: min(272px, 100%); }
}
@media (min-width: 700px) {
#s6 .s6__stage { grid-template-columns: minmax(0, 1fr) 272px; column-gap: var(--g); row-gap: 0; }
#s6 .calc { grid-column: 1 / -1; padding: 56px 32px 132px; }
#s6 .calc__lower { padding-bottom: 0; }
#s6 .calc__note { right: auto; left: calc(50% + 6px); top: -4px; width: 17ch; max-width: none; }
#s6 .calc__rows { grid-template-columns: 1fr 1fr; column-gap: 40px; }
#s6 .calc__lower { grid-template-columns: minmax(0, 340px) minmax(0, 1fr); column-gap: 32px; grid-template-areas: "plan work" "formula formula"; }
#s6 .plan-wrap { grid-area: plan; }
#s6 .calc__work { grid-area: work; padding-top: 32px; }
#s6 .calc__formula { grid-area: formula; max-width: calc(100% - 340px); }
#s6 .gauge { grid-column: 2; grid-row: 2; margin-top: -112px; justify-self: end; }
#s6 .guides-wrap { grid-column: 1; grid-row: 2; padding-top: 44px; max-width: 360px; }
#s6 .guides { row-gap: 16px; }                       
#s6 .guides li:nth-child(1) .guides__card { --rot: -1.2deg; }
#s6 .guides li:nth-child(2) .guides__card { --rot: .5deg; }
#s6 .guides li:nth-child(3) .guides__card { --rot: 1.2deg; }
}
@media (min-width: 1360px) {
#s6 .s6__stage { grid-template-columns: minmax(0, 1fr) clamp(280px, 22vw, 314px); column-gap: clamp(20px, 2vw, 32px); }
#s6 .bench { display: block; position: relative; grid-column: 1; grid-row: 1; margin-right: 150px; }
#s6 .calc { padding: 56px 28px 36px; }
#s6 .calc__rows { column-gap: 36px; }
#s6 .calc__lower { grid-template-columns: minmax(0, 1fr); grid-template-areas: "plan" "work" "formula"; padding-right: 140px; row-gap: 0; }
#s6 .calc__work { padding-top: 0; }
#s6 .calc__formula { max-width: none; }
#s6 .gauge { position: absolute; right: -150px; top: 214px; margin: 0; }
#s6 .guides-wrap { grid-column: 2; grid-row: 1; padding-top: 64px; max-width: none; }
}
html:not(.js) #s6 [id$="__needle"] { transform: rotate(16deg); transform-origin: 130px 200px; }
html:not(.js) #s6 .gauge__rider [id$="__bike"] { transform: rotate(16deg); transform-origin: 160px 352px; }
html:not(.js) #s6 .gauge__rider [id$="__torso"] { transform: translate(1.6px, 0) rotate(1.6deg); transform-origin: 160px 104px; }
html:not(.js) #s6 .gauge__rider [id$="__head"] { transform: rotate(-6.4deg); transform-origin: 160px 44px; }
html:not(.js) #s6 .gauge__rider [id$="__legs-level"] { opacity: 0; }
html:not(.js) #s6 .gauge__rider [id$="__legs-inside-up"] { opacity: 1; }
html:not(.js) #s6 .calc__note { rotate: -1.2deg; }
@media (prefers-contrast: more) {
#s6 .ruler__t { opacity: 1; }
#s6 .plan__centre { opacity: 1; }
}
#s7 {
--rows: 6;                       
--row-h: 32px;
--sw: 128px;                     
--sk-w: 3.2;                     
padding-block: clamp(52px, 4.2vw, 60px) clamp(76px, 5.4vw, 82px);   
}
#s7 { position: relative; }
#s7 .s7__wrap { row-gap: 0; position: relative; z-index: 1; }
#s7 .s7__kicker, #s7 .s7__h, #s7 .s7__body, #s7 .s7__stage { grid-column: 1 / -1; }
#s7 .s7__no { color: var(--fg); font-weight: 700; }
#s7 .s7__h { margin-top: 14px; }
#s7 .s7__h .line { display: block; overflow: clip; padding-block: .06em; margin-block: -.06em; }
#s7 .s7__h .line__in { display: block; }
#s7 .s7__body { margin-top: 24px; max-width: 34ch; text-wrap: pretty; }
@media (max-width: 480px) { #s7 .s7__body { min-height: calc(var(--fs-lede) * 1.45 * 4); } }   
#s7 .s7__stage {
position: relative; margin-top: 64px; max-width: 820px;
container: s7 / inline-size;
}
@media (min-width: 600px) { #s7 .s7__stage { margin-top: 196px; } }   
@media (min-width: 1280px) {
#s7 .s7__kicker { grid-column: 1 / 10; grid-row: 1; }
#s7 .s7__h { grid-column: 1 / 10; grid-row: 2; }
#s7 .s7__body { grid-column: 1 / 6; grid-row: 3; margin-top: 24px; align-self: start; }
#s7 .s7__stage { grid-column: 6 / -1; grid-row: 3; margin-top: 24px; max-width: none; }
}
#s7 .s7-film {
position: absolute; z-index: 0; left: 0; right: 0; bottom: 0; height: 372px; display: flex; overflow: hidden; pointer-events: none;
background: var(--tar); border-block: 1px solid var(--hair);
}
#s7 .s7-film__f { flex: 1 1 0; min-width: 0; width: 33.4%; height: 100%; max-width: none; object-fit: cover; opacity: .62; filter: grayscale(.4) contrast(1.06); }
#s7 .s7-film__f + .s7-film__f { border-left: 2px solid var(--asphalt); }
#s7 .s7-film__ph { display: flex; flex: 1 1 100%; min-width: 0; height: 100%; }
#s7 .s7-film__veil { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .62; pointer-events: none; }
#s7 .s7-film.is-veil .s7-film__ph {
opacity: 0; transition: opacity 600ms cubic-bezier(.22, 1, .36, 1);
-webkit-mask-image: radial-gradient(circle 120px at var(--vx, -999px) var(--vy, -999px), #000 0, #000 50%, transparent 100%);
mask-image: radial-gradient(circle 120px at var(--vx, -999px) var(--vy, -999px), #000 0, #000 50%, transparent 100%);
}
#s7 .s7-film.is-veil .s7-film__ph.is-hot { opacity: 1; transition-duration: 140ms; }
#s7 .s7-film::after {
content: ""; position: absolute; inset: 0;
background: linear-gradient(to right, rgba(10, 11, 13, .9) 0, rgba(10, 11, 13, .72) 38%, rgba(10, 11, 13, .34) 100%);
}
@media (max-width: 599.98px) {
#s7 .s7-film { height: 360px; }
#s7 .s7-film__f:nth-child(3) { display: none; }
#s7 .s7-film::after { background: rgba(10, 11, 13, .62); }
}
#s7 .s7-pol { position: relative; z-index: 2; width: min(264px, 74%); margin: 0 0 58px 6px; }
#s7 .s7-pol .polaroid__img { aspect-ratio: 960 / 672; }
#s7 .s7-pol .polaroid__cap { min-height: 52px; font-size: 22px; }
#s7 .s7-pol__tape { --rot: 4deg; left: auto; right: -24px; top: -13px; }
@container s7 (min-width: 600px) {
#s7 .s7-pol { position: absolute; right: -14px; bottom: calc(100% - 40px); width: min(244px, 34cqi); margin: 0; }
}
#s7 .zone {
position: relative; display: grid; isolation: isolate;
grid-template-columns: 1fr; row-gap: 14px; align-items: center; justify-items: start;
min-height: 0; padding: 22px 18px 18px;
color: var(--chalk); text-decoration: none; -webkit-tap-highlight-color: transparent;
--sk-fill: var(--asphalt);
transition: transform var(--d-press) var(--ease-speed);
}
#s7 .zone:active { transform: scale(.994); }
#s7 .zone__bg { position: absolute; inset: 0; z-index: -2; background: var(--tar-2); border-radius: var(--radius); pointer-events: none; }
#s7 .zone__frame {
position: absolute; inset: 9px; width: calc(100% - 18px); height: calc(100% - 18px);
opacity: .62; --sk-line: var(--chalk);
transition: opacity var(--d-hover) linear;
}
#s7 .zone__frame g { transition: stroke var(--d-hover) linear; }
#s7 .zone:hover .zone__frame, #s7 .zone:focus-visible .zone__frame, #s7 .zone.is-over .zone__frame { opacity: 1; --sk-line: var(--signal); }
#s7 .zone__sd { display: block; grid-row: 1; grid-column: 1; width: 78px; transform-origin: 50% 92%;
rotate: 0deg; translate: 0 0; transition: rotate 200ms var(--ease-speed), translate 200ms var(--ease-speed); }
#s7 .zone__sdsvg { display: block; width: 100%; height: auto; overflow: visible; }
#s7 .zone__sdsvg g[style*="opacity"] { opacity: 1 !important; }                  
#s7 .zone__sdsvg [id*="__tick-"] {
opacity: .34; stroke-width: .9;
transition: opacity var(--d-hover) linear, stroke var(--d-hover) linear, stroke-width var(--d-hover) linear;
}
#s7 .zone__sdsvg [id*="__tick-"].is-lit { opacity: 1; stroke: var(--signal); stroke-width: 2.3; }
#s7 .zone:not([data-lit]) .zone__sdsvg :is([id$="__tick-1"], [id$="__tick-2"], [id$="__tick-3"], [id$="__tick-4"], [id$="__tick-5"], [id$="__tick-6"]) {
opacity: 1; stroke: var(--signal); stroke-width: 2.3;
}
#s7 .zone__slot { position: absolute; top: 0; right: 24px; width: 1px; height: 1px; z-index: 3; }
#s7 .s7-strip-wrap {
position: absolute; top: -26px; left: 50%; width: var(--sw); margin-left: calc(var(--sw) / -2);
rotate: -3deg; transform-origin: 50% 0;
filter: drop-shadow(0 14px 11px rgba(0, 0, 0, .55));
}
#s7 .s7-tape { mix-blend-mode: normal; --rot: -3deg; top: -15px; }
#s7 .s7-strip {
display: block; padding: 0 12px 15px; rotate: 0deg; box-shadow: none; background-image: none;
font: 400 12px/var(--row-h) var(--f-mono); letter-spacing: .02em; white-space: nowrap; color: var(--ink);
clip-path: polygon(0 0, 100% 0, 100% calc(100% - 9px), 95% calc(100% - 3px), 90% calc(100% - 9px), 85% calc(100% - 4px), 80% calc(100% - 8px),
74% calc(100% - 2px), 69% calc(100% - 8px), 63% calc(100% - 4px), 57% calc(100% - 9px), 51% calc(100% - 3px), 45% calc(100% - 8px),
39% calc(100% - 1px), 33% calc(100% - 7px), 27% calc(100% - 3px), 21% calc(100% - 9px), 15% calc(100% - 2px), 9% calc(100% - 8px), 4% calc(100% - 4px), 0 calc(100% - 8px));
}
#s7 .s7-strip__head {
display: block; height: 38px; padding-top: 12px; font: 600 22px/1 var(--f-hand); color: var(--hand);
border-bottom: 1.5px solid var(--hair);
}
#s7 .s7-strip__win { display: block; height: calc(var(--rows) * var(--row-h)); overflow: clip; margin-inline: -10px; padding-inline: 10px; }   
#s7 .s7-rows { display: block; }
#s7 .r {
position: relative; display: flex; align-items: center; justify-content: space-between; gap: 8px;
height: var(--row-h); border-bottom: 1px solid var(--hair);
}
#s7 .r .t { color: var(--fg-2); }
#s7 .r .v { font-weight: 700; font-variant-numeric: tabular-nums; }
#s7 .r--r .v { color: var(--accent-t); }
#s7 .r--l .v { color: var(--lean-l); }
#s7 .r::after {                                     
content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; border-radius: 1px;
background: var(--lean-r); opacity: .85; transform-origin: 0 50%;
transform: scaleX(calc(var(--b, 0) * var(--gr, 1)));
}
#s7 .r--l::after { background: var(--lean-l); }
#s7 .r--peak .v { font-weight: 800; }
#s7 .r .v { position: relative; }
#s7 .s7-ring { left: 50%; top: 50%; width: calc(100% + 30px); height: 34px; translate: -50% -52%; --mk-color: var(--hand); }
#s7 .zone__cta { display: contents; }
#s7 .zone__label {
grid-row: 2; grid-column: 1; margin-top: 10px; max-width: 9em;
font-size: calc(var(--fs-h3-road) * 1.75); font-weight: 900; font-stretch: 70%; line-height: .92; letter-spacing: -.005em;
font-family: "Barlow Condensed", "Barlow Condensed Fallback", "Arial Narrow", Impact, sans-serif; color: var(--chalk); text-wrap: balance;
word-spacing: .14em;                              
}
#s7 .zl { display: block; white-space: nowrap; }
#s7 .zone__btn { grid-row: 3; grid-column: 1; display: flex; width: 100%; }
#s7 .zone:hover .btn__in, #s7 .zone:focus-visible .btn__in, #s7 .zone.is-over .btn__in { transform: translateX(4px) skewX(-6deg); }
#s7 .s7__note { display: flex; flex-direction: row-reverse; align-items: center; justify-content: flex-end; gap: 6px; margin: 14px 0 0 38px; pointer-events: none; }
#s7 .s7__note-t { display: block; white-space: nowrap; color: var(--hand); max-width: none; }
#s7 .s7__arrow { display: block; width: 70px; height: auto; flex: none; overflow: visible; rotate: 180deg; margin-top: -26px; }
#s7 .s7__arrow g { stroke: var(--hand); }
@container s7 (max-width: 599px) {
#s7 .zone { --rows: 4; --row-h: 28px; --sw: 108px; grid-template-columns: 62px minmax(0, 1fr); column-gap: 10px; row-gap: 12px; padding: 20px 14px 16px; }
#s7 .s7__stage { margin-top: 74px; }
#s7 .zone__sd { grid-row: 1; grid-column: 1; justify-self: start; align-self: center; width: 62px; margin: 0; }
#s7 .zone__slot { right: calc(var(--sw) / 2 + 12px); }
#s7 .s7-strip-wrap { top: -50px; }
#s7 .s7-strip { font-size: 11px; padding-inline: 10px; }
#s7 .s7-ring { width: calc(100% + 18px); height: 28px; translate: calc(-50% + 2px) -52%; }
#s7 .s7-strip__head { height: 34px; padding-top: 9px; font-size: 20px; }
#s7 .zone__label { grid-row: 1; grid-column: 2; align-self: center; margin: 0; max-width: none; padding-right: calc(var(--sw) + 2px);
font-size: calc(var(--fs-h3-road) * 1.3); }
#s7 .zone__btn { grid-row: 2; grid-column: 1 / -1; }
}
@container s7 (min-width: 600px) {
#s7 .zone {
grid-template-columns: clamp(112px, 20cqi, 156px) clamp(128px, 23cqi, 176px) minmax(0, 1fr); grid-template-rows: auto; column-gap: 0; row-gap: 0;
min-height: 236px; padding: 28px 44px 28px 36px; align-items: center;
}
#s7 .zone__sd { grid-row: 1; grid-column: 1; justify-self: center; width: clamp(104px, 17.5cqi, 134px); }
#s7 .zone__slot { position: relative; grid-row: 1; grid-column: 2; right: auto; width: auto; height: 100%; align-self: stretch; justify-self: stretch; }
#s7 .s7-strip-wrap { top: -36px; left: 50%; }
#s7 .s7-strip { font-size: 13px; }
#s7 .zone__cta { display: grid; grid-row: 1; grid-column: 3; justify-items: start; row-gap: 22px; padding-left: clamp(8px, 4cqi, 32px); }
#s7 .zone__label { grid-row: auto; grid-column: auto; margin-top: 0; max-width: 8em; }
#s7 .zone__btn { grid-row: auto; grid-column: auto; display: inline-flex; width: auto; }
#s7 .s7__note {
position: absolute; left: 49%; top: -92px; margin: 0; width: 240px; height: 150px; display: block;
}
#s7 .s7__note-t { position: absolute; left: 0; top: 0; }
#s7 .s7__arrow { position: absolute; left: 14px; top: 46px; width: 118px; rotate: 0deg; margin: 0; }
}
@container s7 (min-width: 600px) { #s7 .zone { --rows: 6; --sw: 140px; } }
@media (prefers-reduced-motion: no-preference) {
@keyframes s7-march { to { stroke-dashoffset: -16; } }
html:not([data-motion="off"]) #s7 .zone:hover .zone__frame g,
html:not([data-motion="off"]) #s7 .zone.is-over .zone__frame g,
html:not([data-motion="off"]) #s7 .zone:focus-visible .zone__frame g { animation: s7-march 1.2s linear infinite; }
html:not([data-motion="off"]) #s7 .zone:hover .zone__sd,
html:not([data-motion="off"]) #s7 .zone.is-over .zone__sd,
html:not([data-motion="off"]) #s7 .zone:focus-visible .zone__sd { rotate: 6deg; translate: 5px 0; }
}
@media (prefers-reduced-motion: reduce) {
#s7 .zone, #s7 .zone__sd { transition: none; }
#s7 .zone:hover .zone__frame g, #s7 .zone:focus-visible .zone__frame g { animation: none; }
}
html[data-motion="off"] #s7 .zone__frame g { animation: none !important; }
@media (prefers-contrast: more) {
#s7 .zone__frame { opacity: 1; }
#s7 .zone__sdsvg [id*="__tick-"] { opacity: .7; }
}
@media (forced-colors: active) {
#s7 .zone { forced-color-adjust: none; outline: 1px solid LinkText; }
}
@font-face { font-family: "Fraunces Fallback S8"; src: local("Georgia"); font-weight: 300 800; size-adjust: 106.4%; ascent-override: 91.9%; descent-override: 24%; line-gap-override: 0%; }
@font-face { font-family: "Fraunces Fallback S8 b"; src: local("Georgia"); font-weight: 300 800; size-adjust: 107.4%; ascent-override: 91.1%; descent-override: 23.7%; line-gap-override: 0%; }   
@font-face { font-family: "Fraunces Fallback H S8"; src: local("Georgia Bold"), local("Georgia-Bold"), local("Georgia"); font-weight: 300 800; size-adjust: 92%; ascent-override: 106.3%; descent-override: 27.7%; line-gap-override: 0%; }
@font-face { font-family: "Fraunces Fallback H2 S8"; src: local("Georgia Bold"), local("Georgia-Bold"), local("Georgia"); font-weight: 300 800; size-adjust: 81.5%; ascent-override: 120%; descent-override: 31.3%; line-gap-override: 0%; }   
@font-face { font-family: "Caveat Fallback S8"; src: local("Bradley Hand"), local("BradleyHandITCTT-Bold"), local("Segoe Print"); font-weight: 500 700; size-adjust: 79.5%; ascent-override: 120.8%; descent-override: 37.7%; line-gap-override: 0%; }
@font-face { font-family: "Mono Fallback S8"; src: local("Menlo Regular"), local("Menlo-Regular"), local("Menlo"), local("Consolas"), local("DejaVu Sans Mono"); font-weight: 400 700; size-adjust: 105%; ascent-override: 93.7%; descent-override: 30.1%; line-gap-override: 0%; }
#s8, #footer {
--f-serif: "Fraunces", "Fraunces Fallback S8", Georgia, serif;
--f-hand: "Caveat", "Caveat Fallback S8", "Bradley Hand", "Segoe Print", cursive;
--f-mono: "Atkinson Hyperlegible Mono", "Mono Fallback S8", ui-monospace, Menlo, monospace;
--f-caps: "Barlow Condensed", "Barlow Condensed Fallback", "Arial Narrow", Impact, sans-serif;
font-family: var(--f-serif);
}
#s8 .s8-item--next:nth-child(4) .s8-item__text { font-family: "Fraunces", "Fraunces Fallback S8 b", Georgia, serif; }
#s8 .t-h3-paper { font-family: "Fraunces", "Fraunces Fallback H S8", Georgia, serif; font-variation-settings: "SOFT" 30, "opsz" 32; }   
#s8 .t-h2-paper { font-family: "Fraunces", "Fraunces Fallback H2 S8", Georgia, serif; }
#s8 .t-hand-l, #s8 .t-hand-m, #s8 .hand, #footer .hand { font-family: var(--f-hand); }
#s8 .t-kicker, #s8 .t-mono, #s8 .kicker, #footer .t-mono, #footer .kicker { font-family: var(--f-mono); }
#s8 .t-btn, #s8 .btn, #s8 .btn__in { font-family: "Barlow Condensed", "Barlow Condensed Fallback", Arial, sans-serif; }
#s8 .s8-main { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: var(--sp-6); align-items: start; }
#s8 .s8-h { grid-column: 1 / -1; }
#s8 .s8-h .w { white-space: nowrap; }
#s8 .s8-h .u::after { bottom: -.26em; }
#s8 .s8-h { min-height: 1.03em; }
@media (min-width: 600px) { #s8 .s8-main { row-gap: var(--sp-7); } }
@media (min-width: 600px) {
#s8 .s8-sheet { max-width: 780px; }
#s8 .s8-main > .s8-ticket { justify-self: end; }
}
@media (min-width: 1400px) {
#s8 .s8-main { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); column-gap: var(--g); }
#s8 .s8-sheet { grid-column: 1; max-width: none; }
#s8 .s8-main > .s8-ticket { grid-column: 2; margin-top: 72px; justify-self: stretch; max-width: none; }
}
#s8 .seam--bottom { --seam-fill: color-mix(in srgb, var(--paper) 90%, #5d4f44); }      
#s8 .s8-dot { left: -7px; z-index: 2; }
#s8 .s8-dot--top { top: 4px; }
#s8 .s8-dot--end { bottom: -8px; }
#s8 .s8-dot--top::after { transition: transform var(--d-ui) var(--ease-settle); }
#s8 .s8-dot--end::after { transform: scale(0); }
@media (min-width: 960px) {
#s8 .s8-dot { left: calc((100% - 11 * var(--g)) / 12 * 2 + 2 * var(--g) - 16px - 7px); }
}
#s8 .s8-sheet { z-index: 0; padding: 72px 18px 40px 18px; background-position: 0 72px; background-size: 100% calc(100% - 72px); }
#s8 .s8-tape { z-index: var(--z-tape); }
#s8 .s8-sheet__head {
position: absolute; left: 20px; right: 20px; top: 12px; height: 48px;
display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
line-height: 48px; pointer-events: none;
}
#s8 .s8-head-title { font-weight: 700; font-size: 36px; line-height: 48px; margin: 0; }
#s8 .s8-head-date { font-weight: 600; font-size: 24px; line-height: 48px; margin: 0; }
#s8 .s8-tally { display: none; margin: 0; font-family: var(--f-caps); font-weight: 900; font-stretch: 62%; font-size: 64px; line-height: 48px; letter-spacing: -.01em;
color: var(--fg-2); font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; }
#s8 .s8-tally b { color: var(--lean-r); font-weight: 900; }
#s8 .s8-tally__k { margin-left: 8px; font: 600 var(--fs-kicker)/1 var(--f-mono); font-stretch: 100%; letter-spacing: .12em; text-transform: uppercase; color: var(--fg-2); }
@media (min-width: 600px) { #s8 .s8-tally { display: block; margin-left: auto; margin-right: 6px; } }
#s8 .s8-list { margin: 0; padding: 0; list-style: none; }
#s8 .s8-item {
--lw: 24px; --bw: 30px;
position: relative; display: grid; grid-template-columns: var(--lw) var(--bw) minmax(0, 1fr); column-gap: 8px;
line-height: 32px; font-size: var(--fs-body);   
}
#s8 .s8-item--next { margin-top: 32px; }
#s8 .s8-item--done + .s8-item--done { margin-top: 32px; }   
#s8 .s8-item__l {
font-family: var(--f-hand); font-weight: 700; font-size: 30px; line-height: 32px; color: var(--hand); text-align: right; position: relative; top: 5px;
}
#s8 .s8-item__box { position: relative; top: 7px; width: var(--bw); height: var(--bw); margin-top: 1px; }   
#s8 .s8-box { position: absolute; inset: 0; width: 100%; height: 100%; --sk-w: 2.8; }
#s8 .s8-tick { position: absolute; left: 0; top: -9px; width: 36px; height: 36px; --sk-w: 3.2; }
#s8 .s8-item__text { grid-column: 3; font-weight: 400; position: relative; top: 2px; }   
#s8 .s8-item--done .s8-item__text { color: var(--fg-2); }
#s8 .s8-item--next .s8-item__text { color: var(--fg); font-weight: 520; }
#s8 .s8-note {
display: block; font-weight: 600; font-size: 24px; line-height: 32px; color: var(--hand);
text-wrap: balance;
}
#s8 .s8-art { margin: 0; color: var(--fg); position: relative; z-index: 1; --patch: color-mix(in srgb, var(--sheet) 98%, #2a1c06); background: var(--patch); box-shadow: 0 0 0 6px var(--patch); border-radius: 2px; }   
#s8 .s8-art__svg { display: block; width: 100%; height: auto; overflow: visible; }
@media (max-width: 959.98px) {
#s8 .s8-art { grid-column: 3; display: flex; align-items: center; margin-top: 0; box-shadow: 0 0 0 2px var(--patch); }   
#s8 .s8-art--mount { height: 96px; }
#s8 .s8-art--mount .s8-art__svg { width: 144px; }
#s8 .s8-art--edge { height: 160px; }
#s8 .s8-art--edge .s8-art__svg { width: 80px; }
}
@media (min-width: 600px) and (max-width: 959.98px) {
#s8 .s8-sheet { padding-inline: 28px; }
#s8 .s8-sheet__head { left: 30px; right: 30px; }
#s8 .s8-item { --lw: 30px; --bw: 32px; column-gap: 10px; }
}
@media (min-width: 960px) {
#s8 .s8-sheet { padding: 72px 226px 40px 24px; }
#s8 .s8-sheet__head { left: 26px; right: 26px; }
#s8 .s8-item { --lw: 26px; --bw: 30px; column-gap: 8px; font-size: 19px; }
#s8 .s8-art { position: absolute; left: calc(100% + 18px); }
#s8 .s8-item--next { min-height: 64px; }                      
#s8 .s8-item--next:has(.s8-art--mount) { min-height: 96px; }
#s8 .s8-item--next:has(.s8-art--edge) { min-height: 160px; }
#s8 .s8-art--mount { top: -8px; width: 192px; }                              
#s8 .s8-art--edge { top: -2px; width: 112px; left: calc(100% + 44px); }
}
#s8 .s8-ticket { scroll-margin-top: calc(var(--header-h) + 40px); display: grid; grid-template-columns: 52px minmax(0, 1fr); width: 100%; max-width: 520px; margin-left: 0; z-index: 1; }
#s8 .s8-ticket > .s8-tape { top: -16px; right: 34px; --rot: 4deg; }
#s8 .s8-stub, #s8 .s8-ticket__main { position: relative; isolation: isolate; background: var(--sheet); color: var(--ink); }
#s8 .s8-stub::before, #s8 .s8-ticket__main::before {
content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
background-image: var(--tex-grain-paper), var(--tex-fibre-paper); background-size: 220px, 320px; opacity: .08; mix-blend-mode: multiply;
}
#s8 .s8-stub {
display: grid; place-items: center; transform-origin: 0 100%;
-webkit-mask: radial-gradient(circle 5px at 100% 11px, #0000 4.5px, #000 5.5px) 0 0 / 100% 22px repeat-y;
mask: radial-gradient(circle 5px at 100% 11px, #0000 4.5px, #000 5.5px) 0 0 / 100% 22px repeat-y;
box-shadow: inset -1.5px 0 0 rgba(60, 40, 10, .1);
transition: translate 320ms var(--ease-settle), rotate 320ms var(--ease-settle);
}
#s8 .s8-stub__txt {
display: block; writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap;
font: 700 12px/1 var(--f-mono); letter-spacing: .26em; text-transform: uppercase; color: var(--fg-2);
}
#s8 .s8-ticket__main {
padding: 30px 26px 26px 26px;
-webkit-mask: radial-gradient(circle 5px at 0 11px, #0000 4.5px, #000 5.5px) 0 0 / 100% 22px repeat-y;
mask: radial-gradient(circle 5px at 0 11px, #0000 4.5px, #000 5.5px) 0 0 / 100% 22px repeat-y;
}
#s8 .s8-ticket__h { margin-bottom: 6px; font-size: clamp(28px, 24px + 1vw, 38px); text-wrap: balance; }   
#s8 .s8-ticket__p { color: var(--fg-2); max-width: 38ch; min-height: 4.5em; }   
#s8 .s8-form { display: grid; gap: 12px; margin-top: 16px; }
#s8 .s8-step { display: grid; gap: 12px; }
#s8 .s8-nojs { display: none; margin: 0; }
html:not(.js) #s8 .s8-nojs { display: block; }
#s8 .s8-notice, #s8 .s8-fine, #s8 .s8-del { margin: 0; color: var(--fg-2); max-width: 44ch; }
#s8 .s8-live { margin: 0; color: var(--fg); letter-spacing: .02em; }
#s8 .s8-live:empty { display: none; }
html:not(.js) #s8 .s8-live { display: none; }
#s8 .s8-submit[aria-disabled="true"] { background: transparent; color: var(--ink); border-color: var(--ink); cursor: default; transform: none; }
#s8 .s8-submit[aria-disabled="true"] .btn__in { transform: none; }
#s8 .s8-submit[aria-disabled="true"] .btn__in::after { opacity: 0; }
#s8 .btn__in { position: relative; }
#s8 .s8-form .field__error[hidden] { display: none; }
#s8 .s8-after { display: grid; gap: 14px; }
#s8 .s8-after[hidden], #s8 .s8-q[hidden] { display: none; }
#s8 .s8-done { margin: 0; font: 600 var(--fs-small)/1.4 var(--f-serif); color: var(--ink); text-wrap: balance; }
#s8 .s8-done:focus { outline: none; }
#s8 .s8-q { margin: 0; padding: 0; border: 0; min-width: 0; display: grid; gap: 12px; justify-items: start; }
#s8 .s8-q__l { padding: 0; margin: 0 0 2px; font: 600 var(--fs-small)/1.35 var(--f-serif); color: var(--ink); }
#s8 .s8-qs { display: grid; gap: 14px; }
#s8 .s8-qs[hidden], #s8 .s8-step[hidden] { display: none; }
#s8 .s8-lead { margin: 0; font: 600 var(--fs-small)/1.4 var(--f-serif); color: var(--ink); }
#s8 .s8-lead:focus { outline: none; }
#s8 .s8-opts { display: flex; flex-wrap: wrap; gap: 8px; }
#s8 .s8-opt { flex: 0 0 auto; }
#s8 .s8-skip { background: none; border: 0; padding: 0 4px; min-height: var(--tap); font: inherit; font-size: var(--fs-small); color: var(--ink); cursor: pointer; }
#s8 .s8-del .link { padding-block: 12px; }
#s8 .s8-stub__short, #s8 .s8-stub__done { display: none; }
#s8 .s8-ticket.is-torn .s8-stub__long, #s8 .s8-ticket.is-torn .s8-stub__short { display: none; }
#s8 .s8-ticket.is-torn .s8-stub__done { display: inline; }
#s8 .s8-ticket.is-torn .s8-stub { translate: 2px 46px; rotate: -5deg; transform-origin: 50% 50%; }   
#s8 .s8-ticket.is-torn .s8-stub__txt { font-family: var(--f-caps); font-stretch: 75%; font-weight: 900; font-size: 20px; letter-spacing: .08em; color: var(--ink); }
@media (max-width: 959.98px) {
#s8 .s8-ticket { grid-template-columns: minmax(0, 1fr); grid-template-rows: 44px auto; }
#s8 .s8-ticket > .s8-tape { top: -14px; right: -6px; --rot: 34deg; }   
#s8 .s8-sheet .tape--tr { right: -8px; }
#s8 .s8-stub__long { display: none; }
#s8 .s8-stub__short { display: inline; }
#s8 .s8-stub__txt { letter-spacing: .14em; }
#s8 .s8-stub {
transform-origin: 100% 100%;
-webkit-mask: radial-gradient(circle 5px at 11px 100%, #0000 4.5px, #000 5.5px) 0 0 / 22px 100% repeat-x;
mask: radial-gradient(circle 5px at 11px 100%, #0000 4.5px, #000 5.5px) 0 0 / 22px 100% repeat-x;
box-shadow: inset 0 -1.5px 0 rgba(60, 40, 10, .1);
place-items: center start; padding-left: 24px; padding-right: 64px;
}
#s8 .s8-stub__txt { writing-mode: horizontal-tb; transform: none; }
#s8 .s8-ticket__main {
padding: 26px 24px 26px 24px;
-webkit-mask: radial-gradient(circle 5px at 11px 0, #0000 4.5px, #000 5.5px) 0 0 / 22px 100% repeat-x;
mask: radial-gradient(circle 5px at 11px 0, #0000 4.5px, #000 5.5px) 0 0 / 22px 100% repeat-x;
}
#s8 .s8-ticket.is-torn .s8-stub { translate: -8px -6px; rotate: -2.5deg; transform-origin: 100% 100%; }
}
#s8 .s8-seam-tape { z-index: 6; left: calc(var(--m) + 44%); bottom: -34px; --rot: -5deg; mix-blend-mode: normal; }
@media (min-width: 960px) { #s8 .s8-seam-tape { left: calc(var(--m) + 58%); } }
@media (forced-colors: active) { #s8 .s8-stub, #s8 .s8-ticket__main { border: 1px solid CanvasText; } }
#footer .footer__base a { display: inline-flex; align-items: center; min-height: var(--tap); padding-inline: 4px; }
#s8 .s8-consent .link { padding-block: 12px; }
#s8 .link { text-decoration-color: var(--hand); }      
#footer .motion-toggle { min-width: calc(11ch + 28px); }   
@media (max-width: 599.98px) {
#footer .footer__base > span { flex-basis: 100%; }
#footer .footer__base .motion-toggle { margin-left: 0; }
}
#s8.join { min-height: 100svh; padding-block: 0 var(--sp-6, 48px); }
.join__bar { position: static; }
#s8.join .join__wrap { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; padding-top: 12px; }
#s8.join .join__img { margin: 0; overflow: hidden; border-radius: 2px; aspect-ratio: 5 / 2; max-height: 168px; }
#s8.join .join__img img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; }
#s8.join .join__copy { display: grid; gap: 12px; }
#s8.join .join__h { font-size: clamp(36px, 30px + 3vw, 64px); }
#s8.join .join__p { color: var(--chalk); max-width: 40ch; }
#s8.join .s8-ticket { margin-block: 8px 0; }
#s8.join .s8-ticket__p { min-height: 0; }
@media (max-width: 899.98px) { #s8.join .s8-ticket__p { display: none; } #s8.join .join__img { aspect-ratio: auto; height: 132px; max-height: none; } #s8.join .join__wrap { gap: 20px; } }
@media (min-width: 900px) {
#s8.join { display: grid; align-items: center; }
#s8.join .join__wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 520px); column-gap: 64px; row-gap: 24px; padding-top: 48px; align-items: center; }
#s8.join .join__img { grid-column: 1; grid-row: 2; max-height: none; aspect-ratio: 5 / 3; }
#s8.join .join__copy { grid-column: 1; grid-row: 1; }
#s8.join .s8-ticket { grid-column: 2; grid-row: 1 / span 2; }
}
#main:focus { outline: none; }                        
.page-top { position: absolute; top: 0; left: 0; width: 1px; height: 1px; }
html.menu-open { overflow: hidden; }
.nav__panel-foot { display: none; }
@media (max-width: 1179.98px) {
.nav__panel-foot { display: block; margin-top: var(--sp-6); color: var(--mute); }
.site-header:has(.nav__panel.is-open) .btn--cta { position: relative; z-index: calc(var(--z-menu) + 1); }
}
#main > .sec--paper + .sec--asphalt { padding-top: calc(var(--sec-pad) + var(--seam-h)); }
#main > .sec--asphalt:not(#s1):has(+ .sec--paper) { padding-bottom: calc(var(--sec-pad) + var(--seam-h)); }
#main > #s3.sec--asphalt.sec { padding-bottom: var(--sec-pad); }
#main > #s7.sec--asphalt.sec { padding-block: calc(var(--sec-pad) * .66 + var(--seam-h)); }
.site-footer { padding-top: calc(var(--sp-9) + var(--seam-h)); }
#s6 .seam--top::before, #s6 .seam--top::after { -webkit-mask-position: -310px 0; mask-position: -310px 0; }
#s6 .seam--bottom::before, #s6 .seam--bottom::after { -webkit-mask-position: -620px 0; mask-position: -620px 0; }
#s8 .seam--top::before, #s8 .seam--top::after { -webkit-mask-position: -150px 0; mask-position: -150px 0; }
#s8 .seam--bottom::before, #s8 .seam--bottom::after { -webkit-mask-position: -470px 0; mask-position: -470px 0; }
#s2 .seam, #s6 .seam, #s8 .seam { translate: 0 var(--par, 0px); }
.nav__link { white-space: nowrap; }
@media (min-width: 960px) and (max-width: 1139.98px) {
.nav, .nav__panel { gap: 14px; }
.nav__link { letter-spacing: .03em; }
.nav .btn--cta { padding-inline: 12px; }
}
.cta__short { display: none; }
@media (max-width: 599.98px) {
.nav .btn--cta { padding-inline: 14px; font-size: 13px; letter-spacing: .05em; }
.nav .btn--cta .cta__long { display: none; }
.nav .btn--cta .cta__short { display: inline; }
}
#s4 .s4-sheet::after, #s8 .s8-sheet::after {
content: ""; position: absolute; right: 0; bottom: 0; width: 28px; height: 28px; z-index: 2; pointer-events: none;
background:
linear-gradient(to top left, var(--fold-bg, color-mix(in srgb, var(--paper) 90%, #5d3b08)) 49.5%, transparent 50.5%),
linear-gradient(to top left, transparent 49.5%, rgba(60, 40, 10, .3) 50%, var(--paper-2) 58%, var(--polaroid) 100%);
border-bottom-right-radius: var(--radius);
}
#s5 .s5-h { font-size: var(--fs-h2-proof); }
.kw {
font-family: "Barlow Condensed", "Barlow Condensed Fallback", "Arial Narrow", Impact, sans-serif; font-weight: 900; font-stretch: 70%;
font-variation-settings: normal; text-transform: uppercase; letter-spacing: -.005em; word-spacing: .07em;
color: var(--signal-g);
}
.kw.u::after { bottom: -.22em; height: .3em; }   
.chalk-note { display: none; }
@media (min-width: 1200px) {
.chalk-note { display: block; position: absolute; z-index: 1; pointer-events: none; user-select: none; color: var(--hand); transform: rotate(-3deg); transform-origin: 0 50%; }
.chalk-note__t { display: block; font-family: "Caveat", "Caveat Fallback", "Bradley Hand", "Segoe Print", cursive; font-weight: 600; font-size: var(--fs-hand-l); line-height: 1; max-width: 8em; text-wrap: balance; text-transform: none; letter-spacing: 0; word-spacing: 0; }
.chalk-note__a { position: static; display: block; width: 84px; margin: 4px 0 0 -6px; aspect-ratio: 240 / 60; transform: scaleX(-1) rotate(-6deg); transform-origin: 50% 50%; --mk-color: var(--hand); }
}
#s3 .s3__intro { position: relative; }
@media (min-width: 1200px) {
#s3 .s3-chalk { left: calc(100% + 36px); top: 6px; }
#s3 .s3-chalk .chalk-note__t { font-size: var(--fs-hand-m); max-width: none; white-space: nowrap; }
}
html.fw .site-header .nav, html.fw #s1 .s1__wrap, html.fw #s1 .s1__ovl, html.fw #s1 .strip { visibility: hidden; animation: fw-lift 0s 1.2s forwards; }
@keyframes fw-lift { to { visibility: visible; } }
html[lang="nb"] { --fs-d1: clamp(60px, 28px + 8.3vw, 148px); }
@media (min-width: 1100px) { html[lang="nb"] #s1 { --fs-d1: min(clamp(60px, 28px + 8.3vw, 148px), 18.5vh); } }
@media (max-width: 359.98px) { html[lang="nb"] #s1 { --fs-d1: 50px; } }
@media (max-width: 599.98px) { html[lang="nb"] #s1 { --fs-d1b: clamp(22px, 6.9vw, 40px); } }
@media (min-width: 600px) { html[lang="nb"] #s1 { --fs-d1b: clamp(26px, 4.4px + 5vw, 77px); } }
@media (min-width: 1100px) { html[lang="nb"] #s1 { --fs-d1b: min(clamp(26px, 2.3px + 5.56vw, 83px), 10vh); } }
@supports (font: -apple-system-body) { #s1 .line--b { text-wrap: wrap; } }
.site-header .btn--cta.btn--signal { background: transparent; color: var(--fg); border-color: var(--fg); }
@media (hover: hover) { .site-header .btn--cta.btn--signal:hover { background: var(--fg); color: var(--bg); } }