/* The home page (round 25), taken out of the demo bundle. DESIGN.md line 11: the home page follows its own design rounds, so these inks are not the report's tokens. */
@font-face{font-family:'Cormorant Garamond';src:url(/static/fonts/CormorantGaramond-Regular.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap} /* ds-allow-hardcode: the face name */
@font-face{font-family:'Cormorant Garamond';src:url(/static/fonts/CormorantGaramond-Medium.woff2) format('woff2');font-weight:500;font-style:normal;font-display:swap} /* ds-allow-hardcode: the face name */
@font-face{font-family:'Cormorant Garamond';src:url(/static/fonts/CormorantGaramond-Italic.woff2) format('woff2');font-weight:400;font-style:italic;font-display:swap} /* ds-allow-hardcode: the face name */
@font-face{font-family:'Cormorant Garamond';src:url(/static/fonts/CormorantGaramond-MediumItalic.woff2) format('woff2');font-weight:500;font-style:italic;font-display:swap} /* ds-allow-hardcode: the face name */
@font-face{font-family:'JetBrains Mono';src:url(/static/fonts/JetBrainsMono-Regular.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap} /* ds-allow-hardcode: the face name */
@font-face{font-family:'JetBrains Mono';src:url(/static/fonts/JetBrainsMono-Medium.woff2) format('woff2');font-weight:500;font-style:normal;font-display:swap} /* ds-allow-hardcode: the face name */
@font-face{font-family:'JetBrains Mono';src:url(/static/fonts/JetBrainsMono-SemiBold.woff2) format('woff2');font-weight:600;font-style:normal;font-display:swap} /* ds-allow-hardcode: the face name */
@font-face{font-family:'JetBrains Mono';src:url(/static/fonts/JetBrainsMono-Bold.woff2) format('woff2');font-weight:700;font-style:normal;font-display:swap} /* ds-allow-hardcode: the face name */
@font-face{font-family:'JetBrains Mono';src:url(/static/fonts/JetBrainsMono-Italic.woff2) format('woff2');font-weight:400;font-style:italic;font-display:swap} /* ds-allow-hardcode: the face name */
:root{--ink:#151412;--ink-press:#2B2925;--paper:#D7D3CB;--mid:#55514B;--faint:#8E8A82;--mono:'JetBrains Mono',ui-monospace,monospace;--serif:'Cormorant Garamond',Garamond,'Times New Roman',serif}
body{margin:0;background:var(--paper)}
.r8{--pm:clamp(1rem, calc(-0.785714rem + 4.761905vw), 3.5rem);--sv:clamp(1.5rem, calc(-0.285714rem + 4.761905vw), 4rem);--gs:clamp(4rem, calc(2.571429rem + 3.809524vw), 6rem);--gc:clamp(1.5rem, calc(0.428571rem + 2.857143vw), 3rem);--hit:44px}
@media (pointer:coarse){.r8{--hit:48px}}
.r8 a{color:var(--ink);text-underline-offset:6px;transition:text-underline-offset .25s ease-out}
.r8 a:hover{text-underline-offset:3px}
html,body{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cg fill='none' stroke-linecap='round'%3E%3Cpath d='M3 12h6M15 12h6M12 3v6M12 15v6' stroke='%23D7D3CB' stroke-width='3.4'/%3E%3Cpath d='M3 12h6M15 12h6M12 3v6M12 15v6' stroke='%23151412' stroke-width='1.2'/%3E%3C/g%3E%3C/svg%3E") 12 12, crosshair}
.r8,.r8 *{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cg fill='none' stroke-linecap='round'%3E%3Cpath d='M3 12h6M15 12h6M12 3v6M12 15v6' stroke='%23D7D3CB' stroke-width='3.4'/%3E%3Cpath d='M3 12h6M15 12h6M12 3v6M12 15v6' stroke='%23151412' stroke-width='1.2'/%3E%3C/g%3E%3C/svg%3E") 12 12, crosshair !important}
.r8 input:focus{outline:none}
.r8 input:not(:placeholder-shown) + .ph{display:none}
.r8 .fieldwrap .ph{max-width:100%}
.r8 .hero-pad{margin-top:clamp(2rem, calc(1.285714rem + 1.904762vw), 3rem) !important}
@media (max-width:720px){.r8 .lotpad{padding:0 14px !important}.r8 .btn{padding:0 16px}}
.r8 input:focus + .ph .cur{display:none}
.r8 .lotpad input:focus-visible{box-shadow:inset 0 -1px 0 var(--ink)}
.r8 .plain:focus-within{outline:2px solid var(--ink);outline-offset:4px}
.r8 .btn{border:0;background:var(--ink);color:var(--paper);font:inherit;font-size:14px;font-weight:500;line-height:1.3;padding:0 24px;min-height:44px;box-shadow:inset 0 0 0 0 var(--ink),inset 0 0 0 0 var(--paper);transition:box-shadow .28s ease-out,transform .12s ease-out,background-color .2s ease-out}
.r8 .btn:hover{box-shadow:inset 0 0 0 4px var(--ink),inset 0 0 0 5px var(--paper)}
.r8 .btn:active{transform:translateY(1px) scale(.985);background:var(--ink-press)}
.r8 .btn:focus-visible,.r8 .chip:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.r8 .chip{border:1px solid var(--ink);background:var(--paper);color:var(--ink);font:inherit;font-size:12px;padding:0 14px;min-height:40px;transition:box-shadow .25s ease-out}
.r8 .chip:hover{box-shadow:inset 0 0 0 3px var(--paper),inset 0 0 0 4px var(--ink)}
.r8 .chip.on{background:var(--ink);color:var(--paper)}
.r8 .fade{transition:opacity .7s ease-out,transform .7s ease-out}
.r8 .quick{transition:opacity .25s ease-out}
.r8 .rev{opacity:0;transform:translateY(8px);transition:opacity .8s ease-out,transform .8s ease-out}
.r8 .rev.on{opacity:1;transform:none}
.r8 .no{position:absolute;left:clamp(8px,1.4vw,20px);top:18px;z-index:3;font-size:11px;font-weight:500;line-height:1.4;letter-spacing:.08em;color:var(--mid);border:1px solid var(--faint);padding:3px 7px;background:var(--paper)}
@keyframes blink{50%{opacity:0}}
.r8 .cur{display:inline-block;width:1px;height:1.1em;background:var(--ink);vertical-align:-0.2em;margin-left:3px;animation:blink 1.1s steps(1) infinite}
.r8 .tests-row{display:grid;grid-template-columns:minmax(0,60fr) minmax(0,40fr);grid-template-rows:minmax(0,1fr);align-items:stretch;gap:var(--gc)}
.r8 .tests-art{position:relative;height:100%;min-height:0}
.r8 .tests-text{position:relative;min-width:0;display:grid;align-content:center}
.r8 .tests-stack{display:grid}
.r8 .tests-stack > .layer{grid-area:1 / 1}
.r8 .layer{transition:opacity .25s ease-out,transform .25s ease-out}
.r8 .layer.on{transition:opacity .3s ease-out .3s,transform .3s ease-out .3s}
.r8 .t-title{margin:0}
@media (max-width:720px){.r8 .tests-row{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);align-items:stretch}.r8 .tests-text{order:-1;align-content:start}.r8 .ex-row{flex-direction:column !important;align-items:stretch !important}.r8 .ex-row > [data-quiet]{flex:0 0 auto !important}.r8 .ex-art{flex:1 1 auto !important;min-height:0;height:auto !important}}
@media (max-width:720px){.r8 .who-row{flex-direction:column !important;align-items:stretch !important;gap:var(--gc) !important}.r8 .who-rep{flex:0 0 24vh !important;height:24vh !important;width:min(72vw,320px);align-self:center}.r8 .who-col{flex:1 1 auto !important;height:auto !important;min-height:0;width:100%}.r8 .who-line p{max-width:none !important;padding:0 4px}}
.r8 .ty-display{font-family:var(--serif) !important;font-weight:500 !important;font-size:clamp(3.25rem, calc(1.107143rem + 5.714286vw), 6.25rem) !important;line-height:1 !important;letter-spacing:-0.02em !important;color:var(--ink);text-align:center}
.r8 .ty-sec{font-family:var(--serif) !important;font-weight:500 !important;font-size:clamp(2.25rem, calc(1rem + 3.333333vw), 4rem) !important;line-height:1.08 !important;letter-spacing:-0.015em !important;color:var(--ink);text-align:left}
.r8 .ty-aud{font-family:var(--mono) !important;font-weight:600 !important;font-size:clamp(1.125rem, calc(1.035714rem + 0.238095vw), 1.25rem) !important;line-height:1.25 !important;letter-spacing:0 !important;color:var(--ink) !important;text-align:center}
.r8 .ty-stmt{font-family:var(--serif) !important;font-weight:400 !important;font-size:clamp(1.5rem, calc(0.875rem + 1.666667vw), 2.375rem) !important;line-height:1.2 !important;letter-spacing:0 !important;color:var(--ink);text-align:center}
.r8 .ty-ans{font-family:var(--serif) !important;font-weight:500 !important;font-size:clamp(1.875rem, calc(1.696429rem + 0.476190vw), 2.125rem) !important;line-height:1.15 !important;letter-spacing:-0.01em !important;color:var(--ink);text-align:left}
.r8 .ty-body{font-family:var(--mono) !important;font-weight:400 !important;font-size:0.9375rem !important;line-height:1.65 !important;letter-spacing:0 !important;color:var(--ink)}
.r8 .ty-detail{font-family:var(--mono) !important;font-weight:400 !important;font-size:clamp(0.75rem, calc(0.705357rem + 0.119048vw), 0.8125rem) !important;line-height:1.6 !important;letter-spacing:0 !important;color:var(--ink)}
.r8 .ty-meta{font-family:var(--mono) !important;font-weight:500 !important;font-size:0.6875rem !important;line-height:1.4 !important;letter-spacing:0.08em !important;text-transform:uppercase;color:var(--mid) !important}
.r8 .ty-input{font-family:var(--mono) !important;font-weight:400 !important;font-size:1rem !important;line-height:1.5 !important}
.r8 .c2{color:var(--mid) !important}
.r8 .tnum{font-variant-numeric:tabular-nums}
.r8 .gap-h{gap:clamp(0.75rem, calc(0.571429rem + 0.476190vw), 1rem) !important}.r8 .gap-g{gap:clamp(1.25rem, calc(1.071429rem + 0.476190vw), 1.5rem) !important}.r8 .who-fig{--lab-gap:clamp(12px, calc(9.142857px + 0.476190vw), 16px)}
.r8.short .ty-display{font-size:clamp(2.25rem, calc(0.75rem + 4vw), 3.25rem) !important}.r8.short .ty-sec{font-size:clamp(1.75rem, calc(1rem + 2vw), 2.25rem) !important}
.r8 .btn{font-size:0.875rem !important}
.r8 .strip{display:flex;gap:18px;overflow-x:auto;padding-bottom:12px;scroll-snap-type:x mandatory}
.r8 .strip > div{flex:0 0 min(560px,86vw);scroll-snap-align:start}
.r8 .rc{container-type:inline-size;border:1px solid var(--ink);background:var(--paper);box-sizing:border-box}
.r8 .rc-in{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:52px;padding:56px 52px;align-items:center}
@container (max-width:600px){.r8 .rc-in{grid-template-columns:minmax(0,1fr);gap:32px;padding:32px 24px}.r8 .rc-h{font-size:32px !important}}
@media (prefers-reduced-motion: reduce){.r8 .layer,.r8 .layer.on{transition:none}.r8 .cur{animation:none}.r8 .fade,.r8 .rev,.r8 .btn,.r8 .quick,.r8 .chip{transition:none}}
.r8 .hit{display:inline-flex;align-items:center;justify-content:center;min-height:var(--hit);min-width:var(--hit);box-sizing:border-box;white-space:nowrap}
/* ---- CHANGE 1: the report card, as tall as its words ---- */
.r8 .rep-stick{position:sticky;top:0;height:100vh;box-sizing:border-box;padding:var(--sv) var(--pm);display:flex;align-items:center;justify-content:center}
.r8 .rep-wrap{width:min(960px, 100%);margin:0 auto;display:flex;flex-direction:column;gap:24px}
.r8 .rep-wrap h2{margin:0}
.r8 .rep-card{position:relative;border:1px solid var(--ink);box-sizing:border-box;display:grid;grid-template-columns:minmax(0,1fr);gap:24px;padding:clamp(1rem, calc(0.642857rem + 0.952381vw), 1.5rem)}
.r8 .rep-art{display:flex;justify-content:center;min-width:0}
.r8 .rep-plot{position:relative;width:min(100%, 360px);aspect-ratio:4 / 3}
.r8 .rep-text{display:flex;flex-direction:column;gap:20px;min-width:0}
.r8 .rep-text .grp{display:flex;flex-direction:column;gap:6px}
.r8 .rep-list{display:grid;grid-template-columns:minmax(0,1fr);gap:2px 28px}
@media (max-width:359.98px){.r8 .rep-card{padding:12px}.r8 .rep-plot{width:100%}}
@media (min-width:600px){.r8 .rep-plot{width:min(100%, 480px)}.r8 .rep-list{grid-template-columns:repeat(2, minmax(0,1fr))}}
@media (min-width:960px){.r8 .rep-card{grid-template-columns:minmax(0,6fr) minmax(0,4fr);gap:var(--gc);align-items:start}.r8 .rep-plot{width:100%}.r8 .rep-list{grid-template-columns:minmax(0,1fr)}}
/* ---- short screens and a report that cannot fit: normal scrolling, complete still drawings ---- */
.r8 .flow .ex-row,.r8 .flow .rep-stick{position:relative !important;height:auto !important;min-height:0}
.r8 .flow .ex-row{padding-top:calc(var(--gs) * 0.5);padding-bottom:calc(var(--gs) * 0.5)}
.r8 .flow .ex-art{height:auto !important;aspect-ratio:4 / 3;max-width:calc((100vh - 32px) * 4 / 3)}
.r8 .flow-in{max-width:1440px;margin:0 auto;box-sizing:border-box;padding:calc(var(--gs) * 0.5) var(--pm)}
.r8 .tests-flow{display:flex;flex-direction:column;gap:var(--gs)}
.r8 .tgroup{display:flex;flex-direction:column;gap:var(--gc)}
.r8 .tgroup .tf-art{position:relative;width:min(100%, 800px, calc((100vh - 32px) * 4 / 3));aspect-ratio:4 / 3;margin:0 auto}
.r8 .who-flow{display:flex;flex-direction:column;align-items:center;gap:var(--gs)}
.r8 .who-flow .who-rep{position:relative;width:min(240px, 60%);aspect-ratio:4 / 3;border:1px solid var(--ink);box-sizing:border-box}
.r8 .who-blk{display:flex;flex-direction:column;align-items:center;gap:clamp(0.75rem, calc(0.642857rem + 0.285714vw), 1rem);width:100%}
.r8 .who-blk .who-fig{position:relative;margin:0;width:min(100%, 640px, calc((100vh - 32px) * 4 / 3));aspect-ratio:4 / 3}
.r8 .who-blk p{margin:0;max-width:720px}
.r8 .rep-plot{max-width:calc((100vh - 32px) * 4 / 3)}
.r8.measuring .rev{transform:none !important;transition:none !important}
/* ---- round 17, PROBLEM 1: on computers every size is the 1440 x 900 size ---- */
@media (min-width:1024px){
.r8{--pm:56px;--sv:64px;--gs:96px;--gc:48px}
.r8 .ty-display{font-size:6.25rem !important}
.r8 .ty-sec{font-size:4rem !important}
.r8 .ty-aud{font-size:1.25rem !important}
.r8 .ty-stmt{font-size:2.375rem !important}
.r8 .ty-ans{font-size:2.125rem !important}
.r8 .ty-detail{font-size:0.8125rem !important}
.r8 .gap-h{gap:1rem !important}
.r8 .gap-g{gap:1.5rem !important}
.r8 .who-fig{--lab-gap:16px}
.r8 .hero-pad{margin-top:48px !important}
.r8 .rep-card{padding:24px}
.r8 [data-jsec="who"][data-pin] .who-rep{flex:0 0 316.8px !important;height:270px !important}
.r8.short .ty-display{font-size:3.25rem !important}
.r8.short .ty-sec{font-size:2.25rem !important}
.r8 .who-blk .who-fig{width:770.4px;max-width:100%}
.r8 .flow .ex-art{flex:0 0 auto !important;width:844.8px;height:772px !important;max-width:100%;aspect-ratio:auto}
}
@media (min-width:1280px){
.r8 .tests-row{grid-template-columns:768px minmax(0,1fr) !important}
.r8 .tgroup .tf-art{width:800px;height:772px;aspect-ratio:auto;max-width:100%}
}
@media (min-width:1024px) and (max-width:1279.98px){
.r8 .tests-row{grid-template-columns:480px minmax(0,1fr) !important}
.r8 .tgroup .tf-art{width:520px;height:660px;aspect-ratio:auto;max-width:100%}
.r8 [data-jsec="who"][data-pin] .who-row{flex-direction:column !important;align-items:stretch !important}
.r8 [data-jsec="who"][data-pin] .who-rep{align-self:center}
.r8 [data-jsec="who"][data-pin] .who-col{flex:1 1 auto !important;height:auto !important;min-height:0;width:100%}
}
/* ---- round 18, PROBLEMS 3 and 4: on computers 1280 px and wider, the lot and its sheet are one group in the left column, the words in a 600 px column beside it ---- */
@media (min-width:1280px){
.r8 .tests-row{grid-template-columns:552px minmax(560px,600px) !important;justify-content:center}
.r8 [data-jsec="tests"] .t-title{white-space:nowrap}
.r8 [data-jsec="tests"] .t-body,.r8 .tgroup .ty-body{text-wrap:balance}
.r8 .tgroup > div:first-child{width:600px;max-width:100%;margin:0 auto}
}
/* ---- round 19 ---- */
/* change 6: For [party] on computers: one centred column, label 32 px over its drawing, statement 40 px under it, the group centred in the screen */
@media (min-width:1280px){
.r8 [data-jsec="who"][data-pin] .who-row{display:grid !important;grid-template-columns:316.8px 770.4px;justify-content:center;align-content:center;align-items:center;column-gap:48px;padding-bottom:calc(var(--sv) + 29px) !important}
.r8 [data-jsec="who"][data-pin] .who-rep{flex:none !important;width:316.8px;height:270px !important}
.r8 [data-jsec="who"][data-pin] .who-col{flex:none !important;height:454.5px !important;display:block !important}
.r8 [data-jsec="who"][data-pin] .who-fig{flex:none !important;height:454.5px !important;--lab-gap:32px}
.r8 [data-jsec="who"][data-pin] .who-lab span{left:-364.8px !important}
.r8 [data-jsec="who"][data-pin] .who-line{position:absolute !important;left:-364.8px;right:0;top:0;width:auto !important;height:0;display:block !important}
.r8 [data-jsec="who"][data-pin] .who-line p{position:absolute !important;left:0;right:0;top:calc(var(--sb) + 40px);width:fit-content;max-width:none !important;white-space:nowrap;margin:0 auto !important;text-align:center}
}
/* change 7: the demo */
/* ---- round 21 ---- */
/* change 4: the example line sits above "What stands here" without moving the heading */
.r8 .t-eye{position:absolute;left:0;bottom:100%;margin-bottom:14px;white-space:nowrap}
.r8 .t-eye:empty{display:none}
/* change 5: For [party]: the stage and its words, one centred group; 40 px from drawing to label; the words fixed in place */
.r8 .who3-grp{position:relative;display:flex;flex-direction:column;align-items:center;gap:40px;width:100%}
.r8 .who3-stage{position:relative;width:100%;aspect-ratio:16 / 10;max-height:calc(100vh - 220px)}
.r8 .who3-cap{display:grid;justify-items:center;text-align:center;width:100%;min-height:5.6rem}
.r8 .who3-c{grid-area:1 / 1;display:flex;flex-direction:column;align-items:center;gap:10px;transition:opacity .35s ease-out}
@media (min-width:1024px){.r8 .who3-stage{width:min(960px, 100%);height:min(520px, calc(100vh - 230px));aspect-ratio:auto;max-height:none}}
@media (min-width:1280px){.r8 .who3-stage{width:min(1200px, 100%);height:min(620px, calc(100vh - 230px))}.r8 .who3-c .ty-stmt{white-space:nowrap}}
@media (max-width:720px){.r8 .t-eye{position:static;display:block;margin:0 0 8px;white-space:normal}}