:root{--field:#f6c62b;--field-glow:#fbdf74;--field-deep:#e9b612;--ink:#151310;--ink-soft:#4a3d12;--ink-line:#15131059;--paper:#fffdf7;--paper-glass:#fffdf78c;--paper-edge:#e6d9c3;--paper-deep:#d8c9ae;--rule:#2c5aa014;--placeholder:#9a917c;--red-pen:#c0392b;--blue-pen:#2c5aa0;--pencil:#6b665e;--star-gold:#e0a915;--stamp-gold:#b98a12;--stamp-red:#c0392b;--clip:#a9adb0;--coffee:#8b5a2b;--shadow:#5c4300;--font-display:ArchivoNarrow, 'Arial Narrow', 'Helvetica Neue', sans-serif;--font-text:Archivo, 'Helvetica Neue', Arial, sans-serif;--font-print:Libre, Georgia, 'Times New Roman', serif;--font-hand:Caveat, cursive;--t-tiny:8px;--t-micro:10px;--t-label:11px;--t-small:13px;--t-body:16px;--t-lead:22px;--t-title:24px;--t-kicker:30px;--t-figure:64px;--t-display:clamp(40px, (100vw - 2 * var(--gutter)) / 7.4, 112px);--t-display-wide:clamp(60px, (100vw - 560px) / 7.4, 104px);--st-label:11;--st-body:14;--st-title:24;--s-xs:4px;--s-s:8px;--s-m:16px;--s-l:32px;--s-xl:64px;--z-head:56px;--z-head-wide:80px;--z-kicker:60px;--z-control:48px;--z-capsule:40px;--z-bar:60px;--z-bar-wide:68px;--r-slip:3px;--r-badge:4px;--r-button:7px;--r-field:10px;--r-pill:999px;--shadow-paper:0 1px 0 #e6d9c3, 0 2px 0 #d8c9ae, -14px 30px 44px #5c43006b, -3px 6px 8px #5c43004d;--shadow-paper-small:0 1px 0 #d8c9ae, -4px 10px 14px #5c430061, -1px 2px 3px #5c430040;--shadow-hard:4px 6px 0 #151310;--shadow-press:0 4px 0 #15131059;--w-slip:420px;--w-slip-min:280px;--w-slip-desk-min:340px;--w-column:560px;--w-input:560px;--w-page:1312px;--slip-ratio:1.62}
/* Report Card styles, concept 1 "bold field". Every color, font, size, space, radius and shadow is a token from src/config/tokens.ts (served above this file as :root). See docs/design-system.md. Mobile first: the base rules are the phone; min-width queries add the tablet and the desktop. */
@font-face{font-family:ArchivoNarrow;src:url('/fonts/ArchivoNarrow-Bold.woff') format('woff');font-weight:700;font-display:swap}
@font-face{font-family:Archivo;src:url('/fonts/Archivo.woff') format('woff');font-weight:400;font-display:swap}
@font-face{font-family:Archivo;src:url('/fonts/Archivo-Bold.woff') format('woff');font-weight:700;font-display:swap}
@font-face{font-family:Libre;src:url('/fonts/LibreBaskerville.woff') format('woff');font-weight:400;font-display:swap}
@font-face{font-family:Libre;src:url('/fonts/LibreBaskerville-Bold.woff') format('woff');font-weight:700;font-display:swap}
@font-face{font-family:Caveat;src:url('/fonts/Caveat.woff') format('woff');font-display:swap}
*{box-sizing:border-box}
:root{--gutter:var(--s-m);--fold-chrome:calc(var(--z-head) + var(--z-kicker) + var(--z-control) + var(--s-l) + var(--s-m))}
html{background:var(--field)}
body{margin:0;min-height:100vh;background:radial-gradient(ellipse at 78% 12%,var(--field-glow) 0,var(--field) 55%) fixed,var(--field);color:var(--ink);font:var(--t-body)/1.5 var(--font-text);-webkit-text-size-adjust:100%}
a{color:inherit}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.defs{position:absolute;width:0;height:0;overflow:hidden}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.eyebrow{margin:0;font:700 var(--t-label)/1.2 var(--font-text);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft)}
.hand-note{margin:0;font:var(--t-title)/1.15 var(--font-hand);color:var(--ink-soft)}

/* Page frame */
.site-head{display:flex;align-items:center;justify-content:space-between;gap:var(--s-m);max-width:var(--w-page);height:var(--z-head);margin:0 auto;padding:0 var(--gutter)}
.brand{display:flex;align-items:center;gap:var(--s-s)}
.wordmark{display:inline-flex;align-items:center;gap:var(--s-xs);text-decoration:none}
.logo-mark{width:28px;height:28px;border-radius:6px}
.wordmark b{font:700 var(--t-lead)/1 var(--font-text);letter-spacing:-.01em}
.badge{display:inline-block;padding:var(--s-xs) var(--s-s);border-radius:var(--r-badge);background:var(--ink);color:var(--field);font:700 var(--t-micro)/1.2 var(--font-text);letter-spacing:.16em;text-transform:uppercase}
.head-note{display:none;font-size:var(--t-small);color:var(--ink-soft)}
.head-link{font-size:var(--t-small);text-decoration:none}
.head-link:hover{text-decoration:underline}
.site-foot{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:var(--s-xs) var(--s-m);width:calc(100% - 2 * var(--gutter));max-width:calc(var(--w-page) - 2 * var(--gutter));margin:var(--s-xl) auto 0;padding:var(--s-m) 0 var(--s-l);border-top:1px solid var(--ink-line);font-size:var(--t-small);color:var(--ink-soft)}
.site-foot b{font-size:var(--t-body);color:var(--ink)}

/* Headline */
.headline{margin:var(--s-s) 0 var(--s-m);font:700 var(--t-display)/.9 var(--font-display);letter-spacing:-.02em;text-transform:uppercase;color:var(--ink)}
.lead{margin:0;font-size:calc(var(--t-body) + 2px);line-height:1.35}
.wink{margin:var(--s-xs) 0 var(--s-m);font:var(--t-title)/1.2 var(--font-hand);color:var(--ink-soft)}

/* Input bar */
.input-bar{display:flex;align-items:stretch;gap:var(--s-s);max-width:var(--w-input);height:var(--z-bar);padding:calc(var(--s-xs) + 2px);background:var(--paper);border:3px solid var(--ink);border-radius:var(--r-field);box-shadow:var(--shadow-hard)}
.input-bar input{flex:1;min-width:0;padding:0 var(--s-s);border:0;background:transparent;font:var(--t-lead) var(--font-text);color:var(--ink)}
.input-bar input:focus{outline:none}
.input-bar:focus-within{outline:3px solid var(--paper);outline-offset:3px}
.input-bar input::placeholder{color:var(--placeholder)}
.input-note{margin:var(--s-s) 0 0;font-size:var(--t-small);color:var(--ink-soft)}

/* Buttons */
.btn-black,.btn-red,.post-button,.btn-outline{display:inline-flex;align-items:center;justify-content:center;gap:var(--s-s);min-height:var(--z-control);padding:0 var(--s-m);border:0;font:700 var(--t-body)/1 var(--font-text);text-decoration:none;white-space:nowrap;cursor:pointer;transition:transform .1s}
.btn-black{background:var(--ink);color:var(--field);border-radius:var(--r-button)}
.input-bar .btn-black{min-height:0}
.btn-black .arrow{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.btn-black:disabled{opacity:.55;cursor:wait}
.btn-red,.post-button{background:var(--red-pen);color:var(--paper);border-radius:var(--r-pill);box-shadow:var(--shadow-press)}
.btn-red:before,.post-button:before{content:'';flex:none;width:18px;height:18px;background:var(--star-gold);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5l2.8 6.3 6.9.7-5.2 4.6 1.5 6.8-6-3.6-6 3.6 1.5-6.8-5.2-4.6 6.9-.7z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5l2.8 6.3 6.9.7-5.2 4.6 1.5 6.8-6-3.6-6 3.6 1.5-6.8-5.2-4.6 6.9-.7z'/%3E%3C/svg%3E") center/contain no-repeat}
.btn-black:hover,.btn-red:hover,.post-button:hover,.btn-outline:hover{transform:translateY(-1px)}
.btn-red:active,.post-button:active{transform:translateY(3px);box-shadow:none}
.btn-outline{background:transparent;color:var(--ink);border:2px solid var(--ink);border-radius:var(--r-pill)}

/* Platform capsules */
.platform-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-s);margin-top:var(--s-m)}
.platform-row .eyebrow{flex-basis:100%}
.ph-badge{margin-top:var(--s-m)}
.ph-badge img{display:block;width:250px;height:54px}
.capsule{display:inline-flex;align-items:center;gap:var(--s-s);height:var(--z-capsule);padding:0 var(--s-m) 0 calc(var(--s-m) - 2px);border:1.5px solid var(--ink-line);border-radius:var(--r-pill);background:transparent;color:var(--ink);font:700 var(--t-body)/1 var(--font-text);cursor:pointer}
.capsule .icon{width:18px;height:18px;fill:currentColor}
.capsule[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.capsule[aria-pressed=false]:hover{border-color:var(--ink)}
.capsule .badge{padding:0;background:none;color:var(--field);letter-spacing:.12em}
.capsule[aria-pressed=false] .badge{color:var(--ink-soft)}

/* Waiting and error notes */
.waiting{margin:var(--s-s) 0 0;font:var(--t-title)/1.2 var(--font-hand);color:var(--ink)}
.notice{margin:var(--s-s) 0 0;max-width:var(--w-input);padding:var(--s-s) var(--s-m);background:var(--paper);border:2px solid var(--ink);border-left:6px solid var(--red-pen);border-radius:var(--r-button);color:var(--red-pen);font-weight:700}
.notice[hidden],.waiting[hidden]{display:none}

/* Landing */
.hero{max-width:var(--w-page);margin:0 auto;padding:0 var(--gutter)}
.hero-slip{margin:var(--s-xl) auto 0;max-width:var(--w-slip)}
.hero-slip .slip-frame{width:calc(100% - var(--s-m));margin:0 auto}
.hero-slip .slip{--tilt:2deg}
.sample-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-s) var(--s-m);margin-top:var(--s-l)}
.band{display:grid;gap:var(--s-l);max-width:var(--w-page);margin:var(--s-xl) auto 0;padding:0 var(--gutter)}
.counter{display:flex;flex-direction:column;margin:0}
.counter strong{font:700 calc(var(--t-figure) * .7)/1 var(--font-display);letter-spacing:-.01em}
.counter span{font-size:var(--t-body)}
.cost-line{margin:var(--s-s) 0 0;font-size:var(--t-small);color:var(--ink-soft)}

/* Slip. Drawn at 420 slip units and scaled to its frame: --u is one unit. */
.slip-frame{container-type:inline-size;width:min(var(--w-slip),100%);perspective:1100px}
.slip{--u:calc(100cqw / 420);position:relative;padding:calc(30 * var(--u)) calc(30 * var(--u)) calc(14 * var(--u));color:var(--ink);background:repeating-linear-gradient(to bottom,transparent 0,transparent calc(27 * var(--u)),var(--rule) calc(27 * var(--u)),var(--rule) calc(28 * var(--u))),var(--paper);border-radius:var(--r-slip);box-shadow:var(--shadow-paper);font:calc(var(--st-body) * var(--u))/1.6 var(--font-print);transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) rotate(var(--tilt,1deg));transition:transform .3s ease-out}
.signing .slip{transform:rotate(var(--tilt,1deg));transition:none}
.slip small{display:block;font-size:calc(var(--st-label) * var(--u));font-weight:700;letter-spacing:.14em;color:var(--pencil)}
.paperclip{position:absolute;right:calc(26 * var(--u));top:calc(-22 * var(--u));width:calc(22 * var(--u));height:calc(56 * var(--u));fill:none;stroke:var(--clip);stroke-width:3;stroke-linecap:round;transform:rotate(8deg);z-index:3}
.slip-top{text-align:center;padding-bottom:calc(8 * var(--u));border-bottom:calc(2 * var(--u)) solid var(--ink)}
.slip-top h1,.slip-top h2{margin:0;font-size:calc(var(--st-body) * var(--u));font-weight:700;line-height:1.35;letter-spacing:.1em;text-transform:uppercase}
.slip-top p{margin:calc(4 * var(--u)) 0 0;font-size:calc(var(--st-label) * var(--u));letter-spacing:.12em;color:var(--pencil)}
.slip-top .address{font-size:calc(var(--st-body) * var(--u));font-weight:700;letter-spacing:.02em;color:var(--ink)}
.student-line{display:flex;justify-content:space-between;gap:calc(16 * var(--u));padding:calc(8 * var(--u)) 0;border-bottom:1px solid var(--paper-deep)}
.student-line div{min-width:0}
.student-line div:last-child{text-align:right}
.student-line b{font-size:calc(var(--st-body) * var(--u));line-height:1.3;overflow-wrap:break-word;word-break:break-word}
.grades{position:relative;padding:calc(6 * var(--u)) 0 calc(14 * var(--u));border-bottom:calc(2 * var(--u)) solid var(--ink)}
.table-head{display:flex;justify-content:space-between;padding-right:calc(8 * var(--u));font-size:calc(var(--st-label) * var(--u));font-weight:700;letter-spacing:.16em;color:var(--pencil)}
.grade-row{display:flex;align-items:baseline;gap:calc(8 * var(--u));line-height:1.9}
.dots{flex:1;border-bottom:calc(2 * var(--u)) dotted var(--pencil);opacity:.35;transform:translateY(calc(-4 * var(--u)))}
.mark{position:relative;flex:none;width:calc(44 * var(--u));text-align:center}
.grade{display:inline-block;font:400 calc(var(--st-title) * var(--u))/1 var(--font-hand);transform:rotate(-4deg)}
.grade.red{color:var(--red-pen);font-weight:700}
.grade.blue{color:var(--blue-pen)}
.grade.pencil{color:var(--pencil)}
.grade sup{font:calc(var(--st-label) * var(--u)) var(--font-print);vertical-align:super;color:var(--red-pen)}
.grade sup a{color:inherit;text-decoration:none}
.pen-circle{position:absolute;left:50%;top:50%;width:calc(44 * var(--u));height:calc(34 * var(--u));transform:translate(-50%,-54%) rotate(-7deg);fill:none;stroke:var(--red-pen);stroke-width:2.2;stroke-linecap:round;pointer-events:none}
.gold-star{position:absolute;right:calc(-8 * var(--u));top:calc(-2 * var(--u));width:calc(18 * var(--u));height:calc(18 * var(--u));fill:var(--star-gold);stroke:var(--paper);stroke-width:1.5;paint-order:stroke;transform:rotate(14deg)}

/* Stamp */
.stamp{position:absolute;right:calc(64 * var(--u));bottom:calc(-16 * var(--u));z-index:2;transform:rotate(-8deg);opacity:.8;mix-blend-mode:multiply;pointer-events:none}
.stamp-ink{width:min-content;padding:calc(4 * var(--u)) calc(8 * var(--u));border:calc(6 * var(--u)) double currentColor;border-radius:var(--r-slip);text-align:center;font:700 calc(var(--st-title) * var(--u))/1.05 var(--font-print);letter-spacing:.06em;filter:url(#ink-bleed)}
.stamp.honor-roll{color:var(--stamp-gold)}
.stamp.summer-school{color:var(--stamp-red)}

.gpa-line{display:flex;align-items:center;justify-content:space-between;padding:calc(8 * var(--u)) 0;border-bottom:1px solid var(--paper-deep)}
.gpa-line span{font-size:calc(var(--st-label) * var(--u));font-weight:700;letter-spacing:.14em}
.gpa-line strong{font-size:calc(var(--st-title) * var(--u));color:var(--blue-pen)}
.teacher{padding-top:calc(8 * var(--u))}
.teacher p{margin:calc(4 * var(--u)) 0 0;font:calc(var(--st-title) * var(--u))/1.1 var(--font-hand);color:var(--blue-pen)}
.flip-note{font-weight:700}
.slip-notes{margin-top:calc(8 * var(--u));padding-top:calc(4 * var(--u));border-top:1px dashed var(--paper-deep);font-size:calc(var(--st-label) * var(--u));line-height:1.45;color:var(--pencil)}
.slip-notes p{margin:calc(3 * var(--u)) 0}
.slip-notes span{color:var(--red-pen)}
.signature{display:flex;align-items:flex-end;justify-content:space-between;gap:calc(8 * var(--u));margin-top:calc(8 * var(--u))}
.signature small{white-space:nowrap;margin-bottom:calc(4 * var(--u))}
.signature canvas,.squiggle{flex:1;min-width:0;max-width:calc(220 * var(--u));height:calc(40 * var(--u));border-bottom:1px solid var(--pencil);color:var(--pencil)}
.signature canvas{touch-action:none;cursor:crosshair}
.squiggle{fill:none;stroke:var(--ink);stroke-width:1.6;stroke-linecap:round}
.slip-bottom{display:flex;justify-content:space-between;align-items:baseline;gap:calc(8 * var(--u));margin-top:calc(14 * var(--u));padding-top:calc(8 * var(--u));border-top:1px solid var(--paper-deep);font-size:calc(var(--st-label) * var(--u));letter-spacing:.08em;color:var(--pencil)}
.slip-domain{font-size:calc(var(--st-body) * var(--u));font-weight:700;letter-spacing:.02em;color:var(--ink)}

/* Report page. On a phone the header, the kicker, the slip and the share row make one screen: the slip takes whatever height is left, capped by the width. */
.report-main{display:flex;flex-direction:column;align-items:center;padding:0 var(--gutter)}
.fold{display:flex;flex-direction:column;align-items:center;width:100%;min-height:calc(100svh - var(--z-head))}
.page-kicker{display:flex;flex-direction:column;justify-content:center;width:100%;max-width:var(--w-slip);height:var(--z-kicker)}
.page-kicker h2{margin:0;font:700 var(--t-kicker)/1 var(--font-display);letter-spacing:-.01em;text-transform:uppercase}
.page-kicker span{margin-top:var(--s-xs);font:700 var(--t-micro)/1.2 var(--font-text);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft)}
.report-main .slip-frame{width:min(var(--w-slip),100%,max(var(--w-slip-min),(100svh - var(--fold-chrome)) / var(--slip-ratio)));margin-top:var(--s-s)}
.share-row{display:flex;flex-wrap:wrap;gap:var(--s-s);width:100%;max-width:var(--w-slip);margin-top:var(--s-m)}
.share-row .post-button{flex:1 1 100%}
.share-row .btn-outline{flex:1 1 40%}
.post-button.nudge{font-size:calc(var(--t-body) + 1px)}
.below{width:100%;max-width:var(--w-slip);margin-top:var(--s-l)}
.caption{display:flex;flex-direction:column;gap:var(--s-xs);margin:0 0 var(--s-m);padding:var(--s-m);background:var(--paper-glass);border-radius:var(--r-field)}
.caption small{font:700 var(--t-micro)/1.2 var(--font-text);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft)}
.share-text{font-size:var(--t-body)}
.caption-url{font-size:var(--t-small);color:var(--ink-soft);overflow-wrap:anywhere}
.below .eyebrow{margin:var(--s-l) 0 var(--s-s)}
.how{margin-top:var(--s-xl);padding-top:var(--s-m);border-top:1px solid var(--ink-line);font-size:var(--t-small);color:var(--ink-soft)}
.how h2{margin:0 0 var(--s-s);font:700 var(--t-title)/1.1 var(--font-display);text-transform:uppercase;color:var(--ink)}

/* Not found */
.not-found{max-width:var(--w-page);margin:0 auto;padding:var(--s-l) var(--gutter) 0}
.not-found p{max-width:var(--w-column);margin:0 0 var(--s-l);font-size:calc(var(--t-body) + 2px)}

/* The wall: small slips, the handle as the biggest line on each. */
.wall-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;gap:var(--s-xs) var(--s-m);margin:0 0 var(--s-m);font-size:inherit}
.wall-more{text-align:center;margin:var(--s-m) 0 0}
.wall-more a{font:600 var(--t-body)/1.2 var(--font-text);color:var(--ink);text-decoration:underline}
.wall-sub{font-size:var(--t-small);font-weight:400;color:var(--ink-soft)}
.wall-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:var(--s-m) var(--s-m);margin:0;padding:0;list-style:none}
.wall-slip{--r:-1.5deg;container-type:inline-size;display:flex;flex-direction:column;gap:2px;height:100%;padding:var(--s-s) calc(var(--s-s) + 2px);background:var(--paper);color:var(--ink);border-radius:var(--r-slip);box-shadow:var(--shadow-paper-small);text-decoration:none;font-family:var(--font-print);transform:rotate(var(--r));transition:transform .15s}
.wall-grid li:nth-child(4n+2) .wall-slip{--r:1.5deg}
.wall-grid li:nth-child(4n+3) .wall-slip{--r:-.8deg}
.wall-grid li:nth-child(4n+4) .wall-slip{--r:2deg}
.wall-slip:hover,.wall-slip:focus-visible{transform:rotate(0) translateY(-3px)}
.ws-school{padding-bottom:3px;border-bottom:1.5px solid var(--ink);font-size:min(var(--t-tiny),100cqw / 21);font-weight:700;letter-spacing:.04em;text-transform:uppercase;text-align:center;white-space:nowrap;overflow:hidden}
.ws-handle{margin:var(--s-xs) 0 2px;font-size:min(calc(var(--t-body) - 1px),100cqw / (var(--len,12) * .62));white-space:nowrap;font-weight:700;line-height:1.2}
.ws-row{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s-xs);font-size:var(--t-label);color:var(--ink);border-bottom:1px dotted var(--paper-deep)}
.ws-grade{font:400 calc(var(--t-title) - 2px)/1.1 var(--font-hand)}
.ws-grade.blue{color:var(--blue-pen)}
.ws-grade.red{color:var(--red-pen)}
.ws-grade.pencil{color:var(--pencil)}
.ws-bottom{display:flex;align-items:center;justify-content:space-between;gap:var(--s-xs);margin-top:auto;padding-top:var(--s-xs)}
.ws-gpa{font-size:var(--t-body);font-weight:700;color:var(--blue-pen)}
.ws-gpa small{display:block;font-size:var(--t-tiny);letter-spacing:.1em;color:var(--pencil)}
.ws-rank{position:static;display:block;margin:-2px 0 3px;padding:3px 0 2px;text-align:center;font:700 min(var(--t-tiny),100cqw / 16)/1 var(--font-display);letter-spacing:.14em;text-transform:uppercase;color:var(--field);background:var(--ink);border-radius:3px}
.ws-rank.top{color:var(--ink);background:var(--star-gold)}
.wall-slip{position:relative}
.ws-stamp{max-width:64px;padding:2px var(--s-xs);border:3px double currentColor;border-radius:var(--r-slip);font-size:var(--t-tiny);font-weight:700;line-height:1.1;letter-spacing:.06em;text-align:center;transform:rotate(-6deg);opacity:.85}
.ws-stamp.honor-roll{color:var(--stamp-gold)}
.ws-stamp.summer-school{color:var(--stamp-red)}

/* Tablet */
@media(min-width:600px){
:root{--gutter:var(--s-l)}
.platform-row .eyebrow{flex-basis:auto;margin-right:var(--s-xs)}
.head-note{display:inline}
.wordmark b{font-size:var(--t-title)}
.lead{font-size:var(--t-lead)}
.wink{font-size:calc(var(--t-title) + 4px)}
.input-bar{height:var(--z-bar-wide)}
.input-bar .btn-black{font-size:calc(var(--t-body) + 2px);padding:0 var(--s-l)}
.counter strong{font-size:var(--t-figure)}
}

/* Desktop: the headline left and the slip right; on the report page the slip left and the share column right. */
@media(min-width:1024px){
:root{--fold-chrome:calc(var(--z-head-wide) + var(--s-xl))}
.site-head{height:var(--z-head-wide)}
.hero{display:grid;grid-template-columns:minmax(0,1fr) calc(var(--w-slip) + var(--s-l));gap:var(--s-l);align-items:start;padding-top:var(--s-l)}
.headline{margin:0 0 var(--s-l);font-size:var(--t-display-wide)}
.wink{margin-bottom:var(--s-l)}
.hero-slip{margin:0}
.hero-slip .slip{--tilt:4deg}
.band{grid-template-columns:minmax(0,1fr);gap:var(--s-l);margin-top:var(--s-xl)}
.band-copy{text-align:center;justify-self:center;max-width:520px}
.counter{align-items:center}
.fold{display:contents}
.report-main{display:grid;grid-template-columns:auto minmax(0,var(--w-slip));grid-template-rows:auto auto 1fr;grid-template-areas:"slip kicker" "slip share" "slip below";column-gap:var(--s-xl);justify-content:center;align-items:start;padding-top:var(--s-m)}
.report-main .slip-frame{grid-area:slip;margin:0;width:min(var(--w-slip),max(var(--w-slip-desk-min),(100svh - var(--fold-chrome)) / var(--slip-ratio)))}
.page-kicker{grid-area:kicker;height:auto}
.page-kicker h2{font-size:calc(var(--t-kicker) * 1.3)}
.share-row{grid-area:share;margin-top:var(--s-l)}
.below{grid-area:below;margin-top:var(--s-l)}
}
@media(prefers-reduced-motion:reduce){.slip,.wall-slip{transition:none}}