/* Archivo, SIL Open Font License 1.1, self hosted. One variable file covers every weight the site uses, so the page makes no third party request. That matters here: the site promises a firm that its searches are not shared, and a font call to a third party on every page load reads against that. */ @font-face{ font-family:'Archivo'; font-style:normal; font-weight:400 700; font-stretch:100%; font-display:swap; src:url('fonts/archivo-latin-var.woff2') format('woff2-variations'), url('fonts/archivo-latin-var.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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212, U+2215,U+FEFF,U+FFFD; } /* ===================================================================== Collecteral. Shared stylesheet for all pages. Everything is built on four scales, declared once in :root. space 4px base, --s1 .. --s12 type two registers. Prose reads at 17px, the report UI reads at 15px, because a data table and a paragraph want different densities and pretending otherwise makes both worse. leading --lh-tight for display, --lh-body for prose, --lh-snug for UI radius --r-sm controls, --r-md cards Rules: no bare pixel values for spacing outside the scale, one horizontal padding for every band inside a report card, one section rhythm for every band on the page. ===================================================================== */ :root{ /* ---- colour ---- */ --page:#F4F4F6; --surface:#FFFFFF; --ink:#000000; --body:#4E4E56; /* 7.50:1 on the page, 8.24:1 on a card, AAA */ --muted:#52525A; /* 7.05:1 on the page, 7.74:1 on a card, AAA */ --yours:#F07306; /* fills, bars, rules. Never small text */ --yours-lg:#B45400; /* accent on figures 24px and up, 4.5:1, AAA-lg */ --yours-ink:#8D3900; /* accent on body sized text, 7.0:1, AAA */ --yours-wash:#FEF3EA; /* the tint a linked-to note lands on. --body is 7.54:1 on it and --muted 7.08:1, both AAA */ --hilite:#F2C096; /* THE HIGHLIGHTER. Not a new colour: it is what the hand-drawn .mark stroke actually composites to on the page, sampled off a rendered one. Anything else that means "highlighted" uses it, so the marks, the selection and the graphics agree. Ink on it is 12.76:1. The solid accent is too heavy for this job: a highlighter tints, it does not paint over. */ --rule:#E2E2E6; --rule-strong:#C6C6CD; /* decorative hairlines only */ --field:#8A8A92; /* edges of inputs and controls, 3.1:1 */ /* ---- space, 4px base ---- */ --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s7:32px; --s8:40px; --s9:56px; --s10:72px; --s11:96px; --s12:128px; /* ---- type, prose register ---- */ --fs-micro:11.5px; --fs-cap:13px; --fs-sm:15px; --fs-base:17px; --fs-lede:18.5px; --fs-h3:19px; --fs-h2:clamp(26px,3.4vw,34px); --fs-h1:clamp(30px,4.6vw,46px); --fs-display:clamp(35px,5.4vw,58px); /* ---- type, report UI register ---- */ --ui-micro:11.5px; --ui-xs:12.5px; --ui-sm:13.5px; --ui-base:15px; --ui-lg:17px; --ui-title:22px; /* ---- leading ---- */ --lh-tight:1.06; --lh-head:1.16; --lh-snug:1.4; --lh-ui:1.45; --lh-body:1.58; /* ---- tracking ---- */ --tr-display:-0.042em; --tr-h:-0.03em; --tr-sm:-0.018em; /* ---- shape ---- */ --r-sm:6px; --r-md:9px; /* ---- measure. Six line lengths, and no others. ---- */ --m-display:18ch; /* the hero headline's break points */ --m-head:22ch; --m-head-lg:28ch; --m-xs:34ch; /* copy inside a narrow card column */ --m-sm:46ch; --m-md:58ch; /* the default measure for prose */ --m-lg:66ch; /* long form body copy */ /* ---- layout. A 12 column grid: 60px columns, 24px gutters. 12 * 60 + 11 * 24 = 984, so halves, thirds and quarters are all whole numbers and every block edge lands on a column. ---- */ --col:60px; --gut-col:24px; /* space between grid columns */ --content:984px; --gut:32px; /* page gutter */ --max:1048px; /* --content plus two page gutters */ --pad-x:24px; /* padding inside a report band, = one gutter */ --pad-y:20px; --sec:96px; /* space above and below a page section */ /* grid true block widths: n * 60 + (n - 1) * 24 */ --w5:396px; --w7:564px; --w8:648px; --ease:cubic-bezier(.2,.7,.3,1); } @media(max-width:640px){ :root{ --gut:20px; --gut-col:16px; --pad-x:18px; --pad-y:16px; --sec:56px; --fs-base:16.5px; --fs-lede:17px; } } /* A sentence on its own line, where the sentences are beats rather than prose. A
would force the break at every width including ones where the line already fits; a block-level span breaks between sentences and still wraps inside one. Used on the short asks and on the paragraphs that were leaving a word or two alone on a last line: ten blocks on this page had a last line under 30% full, one of them the single word "not". */ .sent{display:block;text-wrap:balance} .sent + .sent{margin-top:0} /* Wrapping. `pretty` asks the browser to avoid leaving one or two words alone on a last line. Ten prose blocks on the homepage had a last line under 30% full and one of them was the single word "not."; this fixes them without a
in the markup, which would force a break at widths where the line already fits. Unsupported browsers ignore it and wrap as before. `balance` is for headings only: it evens out the lines of a short block, and browsers cap it at a handful of lines, so it is wrong for body copy. */ p,li,.col-p,.limit-p,.chain-a,.band-lede,.cmp-note,.tier-p,.versus-p, .blind-notice,.stack-hint,.search-note,.optin-fine{ text-wrap:pretty; } /* Short enough to balance: a claim and its detail, three lines at the most. `pretty` left a quarter-full last line on two of these; `balance` evens them. Body copy is deliberately not in this list, because browsers cap balance at a handful of lines and it is the wrong tool for a long paragraph. */ .trust-l li{text-wrap:balance} h1,h2,.col-h,.limit-h,.chain-q,.cta-band-h,.peak-h,.versus-h,.tier-n,.kb-title{ text-wrap:balance; } /* ============================== base ============================== */ *{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} body{ margin:0;background:var(--page);color:var(--ink); font-family:'Archivo',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; font-size:var(--fs-base);line-height:var(--lh-body); -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility; } /* Selecting text should look like running a highlighter over it, because that is what the reader is doing. The solid accent read as a block of paint. */ ::selection{background:var(--hilite);color:var(--ink)} ::-moz-selection{background:var(--hilite);color:var(--ink)} .wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gut)} a{color:inherit} /* word-spacing gives back what the negative tracking takes out of the space between words: at 26px the gap had closed to about 4px. */ h1,h2,h3{margin:0;font-weight:600;letter-spacing:var(--tr-h);word-spacing:.07em} p{margin:0} img,svg{display:block} .sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} :focus-visible{outline:2px solid var(--ink);outline-offset:2px;border-radius:2px} /* keyboard users land on five nav links and a CTA before any content */ .skip{ position:absolute;left:var(--s3);top:-100px;z-index:60; background:var(--ink);color:var(--surface); font-size:var(--fs-sm);font-weight:600;line-height:1; padding:12px var(--s4);border-radius:var(--r-sm);text-decoration:none; transition:top .18s var(--ease); } .skip:focus{top:var(--s3)} /* tabular figures everywhere a number must line up with another number */ .c-amt,.c-year,.fact-v,.tier-fig,.tl-date,.cov .num,.lead-count b, .seg-amt,.bar-head-v,.bar-axis,.bar-legend,.verdict-v,.marker-tag,.tf-v, .stat-fig,.pull-fig,.cmp-v,.cmp-axis,.jur-c{ font-feature-settings:"tnum" 1;font-variant-numeric:tabular-nums; } /* ============================= header ============================= */ .masthead{ border-bottom:1px solid var(--rule);position:sticky;top:0;z-index:30; background:rgba(244,244,246,.88);backdrop-filter:saturate(1.6) blur(10px); } .masthead-in{ max-width:var(--max);margin:0 auto;padding:0 var(--gut); height:64px;display:flex;align-items:center;gap:var(--s6); } @media(max-width:640px){.masthead-in{height:58px}} .brand{display:flex;align-items:center;gap:10px;text-decoration:none;flex:0 0 auto} .brand svg{width:24px;height:24px} .brand-name{font-size:20px;font-weight:600;letter-spacing:-0.04em;line-height:1} /* primary nav, centre of the bar */ .nav{flex:1 1 auto;min-width:0;display:flex;justify-content:center} .nav-list{ list-style:none;margin:0;padding:0; display:flex;align-items:center;gap:var(--s6); } .nav-list a{ display:inline-block;text-decoration:none;color:var(--body); font-size:var(--fs-sm);font-weight:500;line-height:1; padding:6px 0;border-bottom:2px solid transparent; transition:color .18s var(--ease),border-color .18s var(--ease); white-space:nowrap; } .nav-list a:hover{color:var(--ink)} .nav-list a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--yours)} .masthead-end{flex:0 0 auto;display:flex;align-items:center;gap:var(--s3)} .top-cta{ font-size:var(--fs-sm);font-weight:600;text-decoration:none; color:var(--surface);background:var(--ink);border:1px solid var(--ink); border-radius:5px;padding:8px 15px;line-height:1.3;white-space:nowrap; transition:background .18s var(--ease); } .top-cta:hover{background:#22222a} /* menu button, phones only */ .nav-toggle{ display:none;width:38px;height:38px;padding:0;cursor:pointer; background:var(--surface);border:1px solid var(--field); border-radius:5px;color:var(--ink); align-items:center;justify-content:center; } .nav-toggle:hover{border-color:var(--ink)} .nav-toggle i{ position:relative;display:block;width:16px;height:1.5px; background:currentColor;transition:background .18s var(--ease); } .nav-toggle i:before,.nav-toggle i:after{ content:"";position:absolute;left:0;width:16px;height:1.5px;background:currentColor; transition:transform .22s var(--ease),top .22s var(--ease); } .nav-toggle i:before{top:-5px} .nav-toggle i:after{top:5px} .nav-toggle[aria-expanded="true"] i{background:transparent} .nav-toggle[aria-expanded="true"] i:before{top:0;transform:rotate(45deg)} .nav-toggle[aria-expanded="true"] i:after{top:0;transform:rotate(-45deg)} @media(max-width:860px){ .nav{ position:absolute;left:0;right:0;top:100%; display:block;background:var(--surface); border-bottom:1px solid var(--rule-strong); max-height:0;overflow:hidden; transition:max-height .26s var(--ease); } .nav.open{max-height:340px} .nav-list{ flex-direction:column;align-items:stretch;gap:0; max-width:var(--max);margin:0 auto;padding:var(--s2) var(--gut) var(--s4); } .nav-list li + li{border-top:1px solid var(--rule)} .nav-list a{ display:block;padding:var(--s3) 0;font-size:var(--fs-base); border-bottom:0;border-left:2px solid transparent; } .nav-list a[aria-current="page"]{border-left-color:var(--yours);padding-left:var(--s3)} .nav-toggle{display:flex} } @media(max-width:400px){ .top-cta{padding:8px 11px;font-size:14px} .brand-name{font-size:18px} } /* at 320 the wordmark, the button and the menu came to 19px more than the screen, and the whole page scrolled sideways */ @media(max-width:350px){ .top-cta{padding:7px 9px;font-size:13px} .brand-name{font-size:16px} .masthead-end{gap:var(--s2)} } /* ============================== hero ============================== */ .hero{padding:var(--s11) 0 0} @media(max-width:640px){.hero{padding:var(--s8) 0 0}} .eyebrow{ font-size:var(--ui-micro);font-weight:700;letter-spacing:.01em; color:var(--muted);line-height:1.5; margin-bottom:var(--s4); } /* the headline runs the full 984, the same span the masthead brackets, and the row underneath splits into the form on the left and the two numbers that answer "why should I care" on the right */ .hero h1{ font-size:var(--fs-display);line-height:var(--lh-tight);font-weight:600; letter-spacing:var(--tr-display);max-width:none; } .hero-body{ display:grid;grid-template-columns:repeat(12,minmax(0,1fr)); gap:var(--s8) var(--gut-col);align-items:start;margin-top:var(--s7); } .hero-main{grid-column:1 / span 6} .hero-aside{grid-column:8 / span 5} @media(max-width:900px){ .hero-body{grid-template-columns:1fr;gap:var(--s7)} .hero-main,.hero-aside{grid-column:1} } .hero-sub{ margin-top:0;max-width:none; font-size:var(--fs-lede);line-height:1.48;color:var(--body); } .hero-main .searchbar,.hero-main .optin,.hero-main .form-done, .hero-main .search-note{max-width:none} /* ---- the proof loop ---- A rendered video, not a CSS animation, because the motion is a sequence of states with counted figures and easing that would be a large amount of hand-written keyframes to keep in step with the report it illustrates. It is built from the same numbers in motion/, so the two cannot drift. width and height are on the element as attributes as well, so the box is reserved before the first byte of video arrives and the hero does not jump. */ .proof{margin:0;position:relative} .proof-v{ display:block;width:100%;height:auto; background:var(--surface);border-radius:var(--r-md); } /* The caption carries both figures in text, not only in the video. Essential information inside a video has to exist outside it too: it is what a screen reader, a search engine and a visitor with the video paused actually get. */ .proof-cap{ margin-top:var(--s3);font-size:var(--ui-sm);line-height:1.5; color:var(--muted);max-width:none; } .proof-cap b{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums} /* The article's explainer. It sits between the film and the writing, full width of the body column, and it is decoration in the strict sense: every fact in it is also in the prose below, and its alt text carries the whole thing in reading order. Nothing here is the only place something is said. width and height are attributes on the img as well, so the box is reserved and the writing below does not jump when the picture arrives. */ .doc-fig{margin:var(--s7) 0 0} .doc-fig img{ display:block;width:100%;height:auto; background:var(--surface);border-radius:var(--r-md); } /* A DRAWN diagram, inlined so it can use the page's own type and tokens. It is not an image: its text is real text, selectable and in the accessibility tree, and it stays sharp at any zoom on any screen. width 100% with the viewBox doing the work means it needs no breakpoint and no pan box: it reflows to whatever column it is given. */ .doc-fig-svg{margin:var(--s8) 0 0} .doc-fig-svg .dg{display:block;width:100%;height:auto;overflow:visible} .doc-fig-svg .dg text{font-family:inherit} /* Two drawings, one shown. The narrow one is authored at the width a phone has, so its type is the size it says rather than a third of it. */ .doc-fig-svg .dg-narrow{display:none} @media (max-width:760px){ .doc-fig-svg .dg-wide{display:none} .doc-fig-svg .dg-narrow{display:block;max-width:360px} } /* A four column chart on a phone. Measured rather than guessed: the smallest line of type in the graphic is 22px tall in a 2048px image, so the image has to render about 1024px wide for that to reach 11px. At 390px of viewport it was rendering at 350px, which put that type at 2.6px. It did not overflow anything. It was simply there and useless. So on a narrow screen the figure gets its own horizontal scroller and the image keeps a legible width inside it. overscroll-behavior-x stops a sideways swipe at the end of the graphic turning into a back gesture. site.js makes the scroller focusable only where it actually scrolls, so desktop does not collect a tab stop that does nothing. */ /* Declared BEFORE the media query, not after: the two rules have the same specificity, so the later one wins and putting the default last hid the hint on every screen. */ .doc-fig .pan-hint{display:none} @media (max-width:820px){ .doc-fig-pan{ overflow-x:auto;overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch;border-radius:var(--r-md); } .doc-fig-pan img{width:1040px;max-width:none;border-radius:0} .doc-fig-pan:focus-visible{outline:2px solid var(--ink);outline-offset:3px} .doc-fig .pan-hint{display:inline} } .doc-fig figcaption{ margin-top:var(--s3);font-size:var(--ui-sm);line-height:1.5;color:var(--muted); } /* THE APPARATUS: note markers, outgoing links, and the glossary. scripts/annotate-page.py writes all of it. */ /* The marker is a number and nothing else. It is deliberately quiet: a reader following the argument should be able to ignore every one of them, and a reader checking the law should be able to find them. --body is 7.50:1 on the page, which is AAA at this size, and the 44px tap target is added with padding rather than by making the number bigger. */ /* No padding around the number. WCAG 2.5.8 exempts a target inside a sentence from the 24px minimum, and padding here opened a visible gap between the marker and the punctuation after it. */ .fn-ref{font-size:0.66em;line-height:0;vertical-align:super} .fn-ref a{ color:var(--body);text-decoration:none;font-weight:600; font-variant-numeric:tabular-nums;padding:0 0 0 1px; } .fn-ref a:hover,.fn-ref a:focus-visible{color:var(--ink);text-decoration:underline} .fn-list li:target{ background:var(--yours-wash);border-radius:var(--r-sm); box-shadow:0 0 0 var(--s2) var(--yours-wash); } .doc-notes{border-top:1px solid var(--rule);padding-top:var(--s7)} .doc-notes-lede{color:var(--body)} .fn-list{ margin:var(--s5) 0 0;padding-left:var(--s5); font-size:var(--fs-sm);line-height:1.6;color:var(--body); } .fn-list li{margin-top:var(--s4);padding-left:var(--s2)} .fn-list li::marker{color:var(--muted);font-variant-numeric:tabular-nums} .fn-list b{color:var(--ink);font-weight:600} .fn-back{color:var(--muted);text-decoration:none;font-size:var(--ui-sm);white-space:nowrap} .fn-back:hover,.fn-back:focus-visible{color:var(--ink);text-decoration:underline} /* OUTGOING LINKS. The marker is a small open box rather than an arrow, and the phrase "opens in a new tab" is in the accessible name, because a link that silently replaces the reader's context and says nothing about it is a change of context on activation, which WCAG 3.2.5 asks us not to do unannounced. */ .out{color:var(--ink);text-decoration:underline;text-underline-offset:2px;white-space:nowrap} /* A small open box, not an arrow. Two of its four sides drawn is a corner and reads as a stray glyph; all four reads as a window. */ .out::after{ content:"";display:inline-block;width:.46em;height:.46em;margin-left:.36em; border:1.5px solid currentColor;border-radius:1px; transform:translateY(-.02em); } .out:hover,.out:focus-visible{color:var(--yours-ink)} /* THE GLOSSARY TERM is a button so that it exists for a keyboard and for a touch screen. Everything that makes a button look like a button is removed; what is left is the sentence, with a dotted rule under the word. */ .gloss{ appearance:none;background:none;border:0;padding:0;margin:0; font:inherit;color:inherit;text-align:inherit;cursor:help; border-bottom:1px dotted var(--rule-strong); } .gloss:hover,.gloss:focus-visible{border-bottom-color:var(--yours);color:var(--ink)} .gloss-pop{ position:absolute;z-index:50;max-width:min(36ch,calc(100vw - 24px)); background:var(--ink);color:var(--surface); font-size:var(--ui-sm);line-height:1.55;font-weight:400; padding:var(--s3) var(--s4) calc(var(--s3) + 2px);border-radius:var(--r-sm); box-shadow:0 6px 24px rgba(0,0,0,.18); } /* The headword. A card that only answers is a card you have to remember the question for. */ .gloss-term{ display:block;margin-bottom:var(--s2); color:var(--surface);font-weight:600;font-size:var(--fs-sm); letter-spacing:-.005em; } /* The highlighter, on the dark card. Ink on the stroke is 12.76:1, and the stroke on the card is what makes it read as a mark rather than a swatch. */ .gloss-hi{ background:var(--hilite);color:var(--ink); padding:.06em .22em;border-radius:2px; box-decoration-break:clone;-webkit-box-decoration-break:clone; } .gloss-pop[hidden]{display:none} @media (prefers-reduced-motion:no-preference){ .gloss-pop{animation:gloss-in .12s ease-out} @keyframes gloss-in{from{opacity:0;transform:translateY(-2px)}to{opacity:1}} } /* Sits over the card's own top right corner. Always visible, not revealed on hover: a hover-only control is unreachable on a touch screen, and WCAG 2.2.2 asks for a mechanism that is actually available. It is a real button with a 3:1 border rather than a glyph floating on the artwork. */ .proof-toggle{ position:absolute;top:var(--s3);right:var(--s3); font:inherit;font-size:var(--ui-micro);font-weight:600; letter-spacing:.06em;text-transform:uppercase;line-height:1; color:var(--body);background:var(--surface); border:1px solid var(--field);border-radius:var(--r-sm); padding:6px 9px;cursor:pointer; transition:color .18s var(--ease),border-color .18s var(--ease); } .proof-toggle:hover{color:var(--ink);border-color:var(--ink)} @media(max-width:900px){ /* One column. The cap goes on the FIGURE, not on the video inside it: the pause button is positioned against .proof, so capping only the video left the button floating in the empty column beside the card, 208px clear of the thing it controls. Left aligned rather than centred, because every other block on the page starts at the gutter. */ .proof{max-width:var(--w5)} } .hero-body .stat-strip{grid-template-columns:1fr;margin-top:var(--s7)} .hero-body .stat{border-right:0;border-bottom:1px solid var(--rule)} .hero-body .stat:last-child{border-bottom:0} .hero-body .stat-fig{font-size:clamp(32px,3.8vw,42px)} .hero-body .stat{padding:var(--s6)} .hero-body .stat-k,.hero-body .stat-p{max-width:none} /* the close column is narrower than the hero, so the field and its button stay on one line instead of wrapping by a few pixels */ .close-act .searchbar input{flex:1 1 200px} /* ---- search / email controls ---- */ .searchbar{margin-top:var(--s7);display:flex;gap:var(--s2);max-width:var(--w7);flex-wrap:wrap} .searchbar input{ flex:1 1 270px;min-width:0;font:inherit;font-size:16px;line-height:1.4; padding:13px var(--s4);border:1px solid var(--field);border-radius:var(--r-sm); background:var(--surface);color:var(--ink); transition:border-color .18s var(--ease),box-shadow .18s var(--ease); } .searchbar input::placeholder{color:var(--muted)} .searchbar input:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px rgba(0,0,0,.07)} .btn{ font:inherit;font-size:16px;font-weight:600;line-height:1.4;cursor:pointer; padding:13px var(--s6);border-radius:var(--r-sm);border:1px solid var(--ink); background:var(--ink);color:var(--surface); transition:transform .12s var(--ease),background .18s var(--ease); } .btn:hover{background:#22222a} .btn:active{transform:translateY(1px)} /* on a narrow screen a half width button orphaned on its own row reads as a mistake, so the control stacks full width instead */ @media(max-width:520px){ .searchbar,.optin-row{flex-direction:column;align-items:stretch} .searchbar input,.optin-row input{flex:1 1 auto} .searchbar .btn,.optin-row .btn{width:100%} } .search-note{margin-top:var(--s4);font-size:14px;line-height:1.55;color:var(--muted);max-width:var(--w7)} /* ---- two step opt in ---- */ .optin{max-width:var(--w7)} .optin-step2{ display:none;margin-top:var(--s3);padding:var(--s4) var(--s5); background:var(--surface);border:1px solid var(--ink);border-radius:7px; } .optin.is-open .optin-step2{display:block} .optin-echo{font-size:var(--fs-sm);line-height:1.5;margin-bottom:var(--s3)} .optin-echo b{font-weight:600} .optin-echo span{color:var(--body)} .optin-row{display:flex;gap:var(--s2);flex-wrap:wrap} .optin-row input{ flex:1 1 240px;min-width:0;font:inherit;font-size:16px;line-height:1.4; padding:12px 14px;border:1px solid var(--field);border-radius:var(--r-sm); background:var(--page);color:var(--ink); transition:border-color .18s var(--ease),box-shadow .18s var(--ease); } .optin-row input::placeholder{color:var(--muted)} .optin-row input:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px rgba(0,0,0,.07)} .optin-fine{margin-top:var(--s3);font-size:var(--fs-cap);line-height:1.5;color:var(--muted)} .optin-fine a{color:var(--body)} .form-done,.form-fail{ display:none;padding:var(--s5) var(--s6);background:var(--surface); border:1px solid var(--ink);border-radius:7px;max-width:var(--w7); } .form-fail{border-color:var(--field)} .is-done .form-done,.is-failed .form-fail{display:block} .is-done .optin,.is-done .searchbar,.is-done .search-note{display:none} /* a bot fills every field it can find; a person never reaches this one */ .trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} /* a submit in flight must not look clickable or accept a second press */ .btn[aria-busy="true"]{opacity:.7;cursor:progress} .btn:disabled{cursor:not-allowed} .form-done-h{font-size:var(--ui-lg);font-weight:600;line-height:1.35} .form-done-p{margin-top:var(--s2);font-size:var(--fs-sm);line-height:1.5;color:var(--body);max-width:var(--m-sm)} /* the mark in front of "Sent": three bars set down one on another, widest first, once. Still for a reader who asked for less motion. */ .sent-mark{display:inline-block;width:1.05em;height:1.05em;margin-right:.45em;vertical-align:-.16em;overflow:visible} @media(prefers-reduced-motion:no-preference){ .is-done .sent-mark rect{animation:set-down .34s cubic-bezier(.3,1.3,.6,1) both} .is-done .sent-mark rect:nth-child(3){animation-delay:.08s} .is-done .sent-mark rect:nth-child(2){animation-delay:.24s} .is-done .sent-mark rect:nth-child(1){animation-delay:.4s} @keyframes set-down{from{opacity:0;transform:translateY(-9px)}} } /* ============================= report ============================= */ .report-frame{margin-top:var(--s9);padding-bottom:var(--s11)} @media(max-width:640px){.report-frame{margin-top:var(--s7);padding-bottom:var(--s9)}} .report-caption{margin-bottom:var(--s3)} .report-caption p{font-size:var(--ui-sm);line-height:1.5;color:var(--muted);max-width:var(--m-md)} .report{ background:var(--surface);border:1px solid var(--rule-strong);border-radius:var(--r-md); box-shadow:0 1px 0 rgba(0,0,0,.03);overflow:hidden; font-size:var(--ui-base);line-height:var(--lh-ui); } .report-head{ padding:var(--s5) var(--pad-x);border-bottom:1px solid var(--rule); display:flex;justify-content:space-between;align-items:baseline; gap:var(--s4);flex-wrap:wrap; } .debtor{font-size:var(--ui-title);font-weight:600;letter-spacing:var(--tr-h);line-height:1.2} .debtor-meta{font-size:var(--ui-sm);line-height:1.45;color:var(--body);margin-top:var(--s1);max-width:var(--m-sm)} .jurisdiction{font-size:var(--ui-sm);color:var(--body);text-align:right;line-height:1.45} @media(max-width:640px){.jurisdiction{text-align:left}} .report-facts{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid var(--rule)} @media(max-width:700px){.report-facts{grid-template-columns:1fr}} .fact{padding:var(--s4) var(--pad-x);border-right:1px solid var(--rule)} .fact:last-child{border-right:0} @media(max-width:700px){ .fact{border-right:0;border-bottom:1px solid var(--rule)} .fact:last-child{border-bottom:0} } .fact-k{font-size:var(--ui-xs);color:var(--muted);font-weight:500;line-height:1.4} .fact-v{font-size:var(--ui-lg);font-weight:600;line-height:1.3;margin-top:3px} .fact-v small{font-weight:400;font-size:var(--ui-xs);line-height:1.4;color:var(--body);display:block;margin-top:3px} /* ---- mode switch ---- */ .mode{ padding:var(--s4) var(--pad-x);border-bottom:1px solid var(--rule);background:var(--page); display:flex;justify-content:space-between;align-items:center; gap:var(--s4);flex-wrap:wrap; } .mode-copy{max-width:var(--m-sm)} .mode-h{font-size:var(--ui-base);font-weight:600;line-height:1.35} .mode-p{font-size:var(--ui-sm);line-height:1.45;color:var(--body);margin-top:2px} .switch{ display:inline-flex;border:1px solid var(--field);border-radius:var(--r-sm); overflow:hidden;background:var(--surface);flex:0 0 auto; } .switch button{ font:inherit;font-size:var(--ui-sm);font-weight:600;line-height:1.3;cursor:pointer; padding:9px 14px;border:0;background:transparent;color:var(--body); transition:background .18s var(--ease),color .18s var(--ease); } .switch button + button{border-left:1px solid var(--field)} .switch button[aria-pressed="true"]{background:var(--ink);color:var(--surface)} .switch button:hover:not([aria-pressed="true"]){color:var(--ink)} /* four buttons overflow a phone, so the switch becomes a 2x2 grid */ @media(max-width:640px){ .switch{display:grid;grid-template-columns:1fr 1fr;width:100%} .switch button{padding:11px var(--s2)} .switch button + button{border-left:0} .switch button:nth-child(even){border-left:1px solid var(--field)} .switch button:nth-child(n+3){border-top:1px solid var(--field)} } /* ---- priority stack ---- */ .stack{padding:var(--s6) var(--pad-x) var(--s1);border-top:1px solid var(--rule)} .report > .stack:first-of-type,.transfer:first-of-type{border-top:0} .stack-title{font-size:var(--ui-base);font-weight:600;line-height:1.35} .stack-hint{font-size:var(--ui-sm);line-height:1.45;color:var(--muted);margin-top:3px;margin-bottom:var(--s4);max-width:var(--m-md)} .claims{list-style:none;margin:0;padding:0 0 0 var(--s6);position:relative} .claims:before{content:"";position:absolute;left:3px;top:12px;bottom:26px;width:1px;background:var(--rule-strong)} .claim{ position:relative;padding:var(--s3) 0;border-bottom:1px solid var(--rule); display:grid;grid-template-columns:56px minmax(0,1fr) 120px 140px; align-items:baseline;column-gap:var(--s4);font-size:var(--ui-base);line-height:1.4; transition:opacity .3s var(--ease),color .3s var(--ease); } @media(max-width:760px){ .claim{grid-template-columns:52px minmax(0,1fr) auto;row-gap:2px} .claim .c-status{grid-column:2 / -1;text-align:left} /* the file line under a claim takes the amount's column as well: squeezed beside the amount it broke a file number away from its CRFN. The name stays an anonymous item in row 1, so everything else is placed by hand. */ .claim .c-what{display:contents} .claim .c-year{grid-row:1;grid-column:1} .claim .c-amt{grid-row:1;grid-column:3} .claim .c-what small{grid-row:2;grid-column:2 / -1} .claim .c-status{grid-row:3} } @media(max-width:400px){ /* too narrow for a name and an amount side by side: the amount goes under the name, so neither has to break into single words */ .claim{grid-template-columns:52px minmax(0,1fr)} .claim .c-amt{grid-row:2;grid-column:2;text-align:left} .claim .c-what small{grid-row:3} .claim .c-status{grid-row:4} } .claim:before{ content:"";position:absolute;left:calc(var(--s6) * -1);top:19px;width:7px;height:7px; border-radius:50%;background:var(--muted);transition:background .3s var(--ease); } .c-year{color:var(--body);font-weight:500} .c-what{font-weight:500} .c-what small{display:block;font-weight:400;font-size:var(--ui-xs);line-height:1.45;color:var(--muted);margin-top:2px} .c-amt{text-align:right;font-weight:500;white-space:nowrap} .c-status{text-align:right;font-size:var(--ui-sm);line-height:1.4;color:var(--body);white-space:nowrap} @media(max-width:760px){.c-status{white-space:normal}} .is-resolved .claim.retirable{color:var(--muted)} .is-resolved .claim.retirable:before{background:var(--rule-strong)} .is-resolved .claim.retirable .c-what, .is-resolved .claim.retirable .c-amt{color:var(--muted)} .is-resolved .claim.retirable .c-amt{text-decoration:line-through} .is-resolved .claim.retirable .c-what small{color:var(--muted)} .is-raw .claim.retirable .c-status{color:var(--ink);font-weight:500} .claim.is-yours{border-bottom:0} .claim.is-yours:before{background:var(--yours)} .claim.is-yours .c-what,.claim.is-yours .c-year,.claim.is-yours .c-status{color:var(--yours-ink)} .claim.is-yours .c-what{font-weight:600} .claim.is-yours .c-what small{color:var(--yours-ink)} /* ---- value bar ---- */ .bar-zone{padding:var(--s5) var(--pad-x) var(--s6)} .bar-head{ display:flex;justify-content:space-between;align-items:baseline; gap:var(--s4);flex-wrap:wrap;margin-bottom:var(--s2); } .bar-head-k{font-size:var(--ui-sm);font-weight:600;line-height:1.4} .bar-head-v{font-size:var(--ui-sm);color:var(--body);line-height:1.4} .bar-track{position:relative;padding-top:var(--s6)} .bar{ display:flex;height:58px;width:100%;border-radius:4px;overflow:hidden; background:var(--page);border:1px solid var(--rule-strong); } @media(max-width:640px){.bar{height:50px}} .seg{ height:100%;flex:0 0 auto;position:relative;overflow:hidden; display:flex;flex-direction:column;justify-content:flex-end; padding:0 10px 8px;min-width:0; transition:flex-basis .6s var(--ease),background .3s var(--ease); } .seg-name{ font-size:10.5px;font-weight:500;line-height:1.25;white-space:nowrap; opacity:.85;letter-spacing:.005em; } .seg-amt{ font-size:var(--ui-sm);font-weight:600;line-height:1.2;white-space:nowrap; letter-spacing:-0.015em; } .seg.tight .seg-name,.seg.tight .seg-amt{display:none} .seg.zero{padding-left:0;padding-right:0;border:0} .seg + .seg{box-shadow:inset 1px 0 0 rgba(255,255,255,.28)} .seg-a{background:#22222A;color:#fff} .seg-b{background:#3D3D47;color:#fff} .seg-c{background:#585864;color:#fff} .seg-d{background:var(--muted);color:#fff} .seg-free{background:var(--yours);color:#030308} .seg-over{background:repeating-linear-gradient(135deg,#43434C 0 5px,#26262D 5px 10px);color:#fff} .seg-over + .seg,.seg-over{box-shadow:none} .seg-unknown{ background:repeating-linear-gradient(135deg,#C6C6CD 0 6px,#B4B4BC 6px 12px); color:#33333B; } .seg-unknown .seg-name{opacity:.9} /* The effects layer over the bar (fx/retire.js). It takes no pointer, holds no text and has room above the bar for what lifts away. A segment the effects are standing in for is unseen but keeps its place. */ .bar-fx{position:absolute;left:0;right:0;top:-72px;bottom:-24px;pointer-events:none;z-index:2} .bar-fx canvas{display:block;width:100%;height:100%} .seg.fx-gone{visibility:hidden} .bar.fx-retire .seg{transition:flex-basis .62s cubic-bezier(.3,1.2,.6,1) .8s,background .3s var(--ease)} /* the marker's words change at once and its place only after the bar has closed, so it steps out while the claims are being retired */ .bar.has-fx ~ .marker{transition:left .6s var(--ease),opacity .25s var(--ease)} .bar.fx-retire ~ .marker{opacity:0;transition:none} .bar-track.thud .bar{animation:thud .18s var(--ease)} @keyframes thud{40%{transform:translateY(2px)}} /* judgment coverage marker */ .marker{ position:absolute;top:0;bottom:0;width:0; transition:left .6s var(--ease);pointer-events:none; } .marker-line{ position:absolute;top:var(--s6);left:-1px;width:2px;height:14px; background:rgba(255,255,255,.92); box-shadow:0 0 0 .5px rgba(0,0,0,.18); } .marker-line:after{ content:"";position:absolute;top:-7px;left:-3px; border-left:4px solid transparent;border-right:4px solid transparent; border-top:6px solid var(--ink); } .marker-tag{ position:absolute;top:0;left:0;transform:translateX(-50%); white-space:nowrap;font-size:var(--ui-micro);font-weight:600;line-height:1.2; } @media(max-width:460px){.marker-tag{font-size:10.5px;max-width:70vw}} .marker.at-end .marker-tag{transform:translateX(-100%)} .marker.at-start .marker-tag{transform:translateX(0)} .marker.is-short .marker-line,.marker.is-short .marker-line:after{background:var(--ink);border-top-color:var(--ink)} .bar-axis{ display:flex;justify-content:space-between;margin-top:var(--s2); font-size:var(--ui-xs);color:var(--muted);line-height:1.4; } .bar-legend{ margin-top:var(--s3);display:flex;flex-wrap:wrap; gap:var(--s2) var(--s5);font-size:var(--ui-xs);line-height:1.5;color:var(--body); } .bar-legend span{display:inline-flex;align-items:center;gap:var(--s2)} .bar-legend b{font-weight:600;color:var(--ink)} .dot{width:9px;height:9px;border-radius:2px;flex:0 0 auto} /* ---- verdict ---- */ .verdict{ padding:var(--s5) var(--pad-x);border-top:1px solid var(--rule); display:flex;justify-content:space-between;align-items:center; gap:var(--s6);flex-wrap:wrap; } .verdict-k{font-size:var(--ui-base);font-weight:600;line-height:1.35;transition:color .3s var(--ease)} .verdict-p{font-size:var(--ui-sm);line-height:1.5;color:var(--body);margin-top:var(--s1);max-width:var(--m-md)} .verdict-v{ font-size:clamp(30px,4.4vw,40px);font-weight:700;line-height:1; letter-spacing:-0.04em;white-space:nowrap; font-feature-settings:"tnum" 1;font-variant-numeric:tabular-nums; } .is-resolved .verdict-k{color:var(--yours-ink)} .is-resolved .verdict-v{color:var(--yours-lg)} .is-raw .verdict-k,.is-raw .verdict-v{color:var(--ink)} .is-blind .verdict-k,.is-blind .verdict-v{color:var(--body)} .report-note{ padding:var(--s4) var(--pad-x);border-top:1px solid var(--rule); background:var(--page);font-size:var(--ui-xs);line-height:1.55; color:var(--body);max-width:none; } /* ---- blind mode ---- */ .blind-notice{ display:none;margin-bottom:var(--s4);padding:var(--s3) var(--s4); border:1px dashed var(--rule-strong);border-radius:var(--r-sm); font-size:var(--ui-sm);line-height:1.5;color:var(--body);background:var(--page); } .is-blind .blind-notice{display:block} .is-blind .claims{opacity:.3;filter:grayscale(1)} .is-blind .marker{display:none} /* ---- compare all three ---- */ .compare{display:none;padding:var(--s5) var(--pad-x) var(--s6)} .is-compare .compare{display:block} .is-compare .bar-zone,.is-compare .verdict,.is-compare .stack,.is-compare #r-note{display:none} .cmp-head{font-size:var(--ui-sm);font-weight:600;line-height:1.4;margin-bottom:var(--s4)} .cmp-row{padding:var(--s3) 0;border-bottom:1px solid var(--rule)} .cmp-row:last-child{border-bottom:0;padding-bottom:0} .cmp-top{ display:flex;justify-content:space-between;align-items:baseline; gap:var(--s3);margin-bottom:var(--s2);flex-wrap:wrap; } .cmp-n{font-size:var(--ui-base);font-weight:600;line-height:1.35} .cmp-v{font-size:var(--ui-base);font-weight:600;line-height:1.35;white-space:nowrap} .cmp-row.win .cmp-n,.cmp-row.win .cmp-v{color:var(--yours-ink)} .cmp-track{height:26px;background:var(--page);border:1px solid var(--rule);border-radius:4px;display:flex;overflow:hidden} .cmp-seg{height:100%} .cmp-seg.s-stale{background:#22222A} .cmp-seg.s-live{background:#3D3D47} .cmp-seg.s-ucc{background:#585864} .cmp-seg.s-warr{background:var(--muted)} .cmp-seg.s-free{background:var(--yours)} .cmp-seg.s-unknown{background:#BDBDC4} .dot.s-live{background:#3D3D47} .dot.s-warr{background:var(--muted)} .dot.s-free{background:var(--yours)} .cmp-note{margin-top:var(--s2);font-size:var(--ui-sm);line-height:1.5;color:var(--body);max-width:var(--m-lg)} .cmp-axis{ display:flex;justify-content:space-between;margin-top:var(--s3); font-size:var(--ui-xs);color:var(--muted);line-height:1.4; } /* ---- peak conviction ask ---- */ .peak{ max-height:0;opacity:0;overflow:hidden; transition:max-height .5s var(--ease),opacity .4s var(--ease),margin .5s var(--ease); } .peak.show{max-height:420px;opacity:1;margin-top:var(--s5)} .peak-in{ padding:var(--s5) var(--s6);background:var(--surface); border:1px solid var(--ink);border-radius:var(--r-md); display:flex;justify-content:space-between;align-items:center; gap:var(--s6);flex-wrap:wrap; } .peak-h{font-size:var(--fs-h3);font-weight:600;letter-spacing:var(--tr-sm);line-height:1.3;max-width:var(--m-xs)} .peak-p{margin-top:var(--s1);font-size:var(--fs-sm);line-height:1.5;color:var(--body);max-width:var(--m-sm)} .peak .btn{flex:0 0 auto;text-decoration:none;display:inline-block} /* the hand from the demo to the ask (site.js handOff): the figure the reader ended on is marked once, and the button catches the light once */ @media(prefers-reduced-motion:no-preference){ .verdict-v.is-struck{animation:struck .5s cubic-bezier(.3,1.4,.6,1)} @keyframes struck{35%{transform:scale(1.07)}} .peak .btn{position:relative;overflow:hidden} .peak .btn.is-lit::after{ content:"";position:absolute;top:0;bottom:0;left:0;width:34%; background:linear-gradient(100deg,transparent,rgba(255,255,255,.34),transparent); transform:translateX(-120%);animation:lit .8s var(--ease) forwards;pointer-events:none; } @keyframes lit{to{transform:translateX(320%)}} } /* ---- promoted statistics ---- */ .pull{ margin-top:var(--s7);padding:var(--s5) var(--s6);background:var(--surface); border:1px solid var(--rule-strong);border-left:3px solid var(--yours); border-radius:var(--r-md); } .pull-fig{ font-size:clamp(27px,4.2vw,38px);font-weight:700;line-height:1.08; letter-spacing:-0.038em; } .pull-p{margin-top:var(--s3);font-size:var(--fs-sm);line-height:1.55;color:var(--body);max-width:var(--w8)} .pull-p strong{color:var(--ink);font-weight:600} .stat-strip{ display:grid;grid-template-columns:1fr 1fr; margin-top:var(--s7);border:1px solid var(--rule-strong); border-radius:var(--r-md);overflow:hidden;background:var(--page); } @media(max-width:700px){.stat-strip{grid-template-columns:1fr}} .stat{padding:var(--s5) var(--s6);border-right:1px solid var(--rule)} .stat:last-child{border-right:0} @media(max-width:700px){ .stat{border-right:0;border-bottom:1px solid var(--rule)} .stat:last-child{border-bottom:0} } .stat-fig{ font-size:clamp(32px,4.6vw,44px);font-weight:700;line-height:1; letter-spacing:-0.042em; } .stat-fig.accent{color:var(--yours-lg)} .stat-k{margin-top:var(--s3);font-size:var(--fs-sm);font-weight:600;line-height:1.4;max-width:var(--m-xs)} .stat-p{margin-top:var(--s1);font-size:var(--ui-sm);line-height:1.5;color:var(--body);max-width:var(--m-sm)} /* ---- second report: transfer leads ---- */ .lead-report{margin-top:var(--s8)} .lead-head{ padding:var(--s5) var(--pad-x);border-bottom:1px solid var(--rule);background:var(--page); display:flex;justify-content:space-between;align-items:baseline; gap:var(--s4);flex-wrap:wrap; } .lead-h{ font-size:var(--fs-h3);font-weight:600;letter-spacing:var(--tr-sm); line-height:1.3;display:flex;align-items:center;gap:var(--s2); } .lead-h i{width:8px;height:8px;border-radius:50%;background:var(--yours);flex:0 0 auto} .lead-sub{font-size:var(--ui-sm);line-height:1.45;color:var(--body);margin-top:var(--s1);max-width:var(--m-md)} .lead-count{font-size:var(--ui-sm);color:var(--body);text-align:right;line-height:1.45} .lead-count b{display:block;font-size:var(--ui-title);font-weight:700;color:var(--ink);letter-spacing:var(--tr-h);line-height:1.2} @media(max-width:640px){.lead-count{text-align:left}} .case-strip{ padding:var(--s3) var(--pad-x);border-bottom:1px solid var(--rule); font-size:var(--ui-sm);line-height:1.5;color:var(--body); display:flex;gap:var(--s2);align-items:baseline;flex-wrap:wrap; } .case-strip b{color:var(--ink);font-weight:600;white-space:nowrap;font-size:var(--ui-micro);letter-spacing:.01em} .transfer{padding:var(--s6) var(--pad-x);border-top:1px solid var(--rule)} /* the middle column takes a share of the row and its rules flex to fill it, so the connector reads at any card width instead of stranding mid gap */ .tl{ display:grid;grid-template-columns:minmax(0,1fr) minmax(110px,.7fr) minmax(0,1fr); align-items:center;gap:var(--s4); } @media(max-width:620px){.tl{grid-template-columns:1fr;gap:var(--s3)}} .tl-node{max-width:var(--m-xs)} .tl-node.right{text-align:right;justify-self:end} @media(max-width:620px){.tl-node.right{text-align:left;justify-self:start}} .tl-date{font-size:var(--ui-sm);font-weight:600;line-height:1.35} .tl-what{font-size:var(--ui-sm);line-height:1.45;color:var(--body);margin-top:2px} .tl-what b{color:var(--ink);font-weight:600} .tl-gap{display:flex;align-items:center;gap:var(--s3)} .tl-gap span{ flex:0 0 auto;font-size:var(--ui-micro);font-weight:600;color:var(--yours-ink); letter-spacing:.03em;white-space:nowrap; } .tl-gap:before,.tl-gap:after{ content:"";flex:1 1 auto;min-width:var(--s3);height:1px;background:var(--rule-strong); } @media(max-width:620px){ .tl-gap{justify-content:flex-start} .tl-gap:before,.tl-gap:after{display:none} } .transfer-facts{ display:grid;grid-template-columns:repeat(3,1fr); gap:var(--s5) var(--gut-col);margin-top:var(--s6); padding-top:var(--s5);border-top:1px solid var(--rule); } @media(max-width:700px){.transfer-facts{grid-template-columns:repeat(2,1fr)}} @media(max-width:440px){.transfer-facts{grid-template-columns:1fr}} .tf-k{font-size:var(--ui-xs);color:var(--muted);font-weight:500;line-height:1.4} .tf-v{font-size:var(--ui-base);font-weight:600;line-height:1.35;margin-top:3px} .tf-v small{display:block;font-weight:400;font-size:var(--ui-xs);line-height:1.45;color:var(--body);margin-top:3px} /* ============================ sections ============================ */ .band{border-top:1px solid var(--rule);padding:var(--sec) 0} .band h2{font-size:var(--fs-h2);letter-spacing:var(--tr-h);max-width:var(--m-head-lg);line-height:var(--lh-head)} .band-lede{margin-top:var(--s4);max-width:var(--w8);color:var(--body);font-size:var(--fs-base);line-height:var(--lh-body)} /* ---- section head: a real 12 column row, so the heading block spans the same 984 the masthead and the cards do, instead of stopping at 650. Heading takes columns 1 to 5, the lede takes 6 to 12. ---- */ /* align-items:start, not end. Bottom-aligning the two cells sat the heading on the lede's last line, which put the top of a 58px H1 thirty-five pixels below the top of the band it is in while the lede started at the edge. The page then read as though the heading had been nudged down. Top aligned, the two columns start together, which is what the grid is for. */ .band-head{ display:grid;grid-template-columns:repeat(12,minmax(0,1fr)); gap:var(--s5) var(--gut-col);align-items:start; } .band-head > h1,.band-head > h2{grid-column:1 / span 5;max-width:none} .band-head > .band-lede,.band-head > .page-lede{ grid-column:6 / span 7;max-width:none;margin-top:0; } @media(max-width:820px){ .band-head{grid-template-columns:1fr;align-items:start} .band-head > h1,.band-head > h2{grid-column:1;max-width:var(--m-head-lg)} .band-head > .band-lede,.band-head > .page-lede{grid-column:1;max-width:var(--w8)} } /* ---- the four questions ---- */ /* the list runs full width so an embedded report card is not squeezed; the measure belongs on the prose inside it, not on the container */ /* question left, answer right, on the same 12 columns as the section head. The old vertical rail forced a 24px indent and capped the row at 648; a rule per row says "in order" without costing the width. The numbers that used to sit above each question are gone: the heading says four, the lede says each depends on the one above it, and position carries the rest. */ .chain{list-style:none;margin:var(--s7) 0 0;padding:0} .chain > li{ display:grid;grid-template-columns:repeat(12,minmax(0,1fr)); gap:var(--s4) var(--gut-col);align-items:start; padding:var(--s7) 0;border-top:1px solid var(--rule); } .chain > li:last-child{padding-bottom:0} .chain-q{ grid-column:1 / span 4;max-width:none; font-size:var(--fs-h3);font-weight:600;letter-spacing:var(--tr-sm);line-height:1.3; } .chain-a{grid-column:6 / span 7;max-width:none;margin-top:0;color:var(--body);line-height:var(--lh-body)} .chain-a b{color:var(--ink);font-weight:600} .chain .report-caption,.chain .report{grid-column:1 / -1;max-width:none} /* Question four's evidence sits in a drawer, and the drawer is the grid item rather than the card inside it: otherwise the
lands in one of twelve columns and the card inside it is 60px wide. The summary is offset into the answer column with padding rather than by making the
a grid. That was the first attempt and it does not work: a
with display:grid puts its content into a ::details-content box, so that box is the grid item and the .drawer-body inside it is not. grid-column on the body was inert, the anonymous box took one column, and the card rendered 60px wide and 2784px tall. The offset is the grid arithmetic, not a magic 420px: five columns and five gutters of a twelve column grid. Fixed pixels would be right at 984 and wrong at every other width, because the columns are fractions. */ .chain > li > .drawer{grid-column:1 / -1;margin-top:0;border-top:0} .chain > li > .drawer > summary{ padding:0 var(--s8) 0 calc((100% - 11 * var(--gut-col)) / 12 * 5 + 5 * var(--gut-col)); } .chain > li > .drawer .drawer-body{padding-bottom:0} .chain > li > .drawer .lead-report{margin-top:var(--s5)} @media(max-width:820px){ /* one column: the answer starts at the gutter, so the summary does too */ .chain > li > .drawer > summary{padding-left:0} } @media(max-width:820px){ .chain > li{grid-template-columns:1fr;gap:var(--s2)} .chain-q{grid-column:1;max-width:var(--m-head-lg)} .chain-a{grid-column:1;max-width:var(--w8)} } /* ---- coverage table ---- */ /* a table that follows a heading sits closer to it than one that opens a section */ .doc-sec .cov-wrap{margin-top:var(--s6)} .cov-wrap{ overflow-x:auto;border:1px solid var(--rule-strong);border-radius:var(--r-md); margin-top:var(--s7);background:var(--surface); } .cov{width:100%;min-width:680px;border-collapse:collapse;font-size:var(--ui-base);line-height:var(--lh-ui)} .cov th,.cov td{padding:var(--s3) var(--s4);text-align:left;border-bottom:1px solid var(--rule);vertical-align:top} .cov thead th{ font-size:var(--ui-xs);font-weight:600;color:var(--body);line-height:1.4; border-bottom:1px solid var(--rule-strong);background:var(--page); padding-top:var(--s3);padding-bottom:var(--s3); } .cov tbody th{font-weight:600;width:34%} .cov tbody th small{display:block;font-weight:400;color:var(--muted);font-size:var(--ui-xs);margin-top:3px;line-height:1.45} .cov .num{text-align:right;white-space:nowrap;font-weight:500} .cov tbody tr:last-child th,.cov tbody tr:last-child td{border-bottom:0} .cov .cov-key th{box-shadow:inset 3px 0 0 var(--yours)} .cov-note{margin-top:var(--s4);font-size:var(--fs-sm);line-height:1.55;color:var(--body);max-width:var(--w8)} /* ---- two column prose ---- */ /* Two columns of six, on the same grid everything else uses. The column gap was calc(--gut-col * 2), which gave 468px columns with a 48px gutter: off the grid in both directions, and inconsistent with .limit-list twenty lines below, which is the same two-column shape at the correct 24. One gutter puts the columns at 480 and their edges on columns 6 and 7. */ .cols{ display:grid;grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s8) var(--gut-col);margin-top:var(--s8); } @media(max-width:760px){.cols{grid-template-columns:1fr;gap:var(--s7)}} .col-h{font-size:var(--ui-lg);font-weight:600;letter-spacing:var(--tr-sm);line-height:1.35} .col-p{margin-top:var(--s2);color:var(--body);max-width:var(--m-md);font-size:var(--fs-sm);line-height:1.58} .col-p b{color:var(--ink);font-weight:600} /* ---- limits ---- */ .limits{background:var(--surface);border-top:1px solid var(--rule-strong)} /* two columns on the page grid. A single column capped at a readable measure left a third of the row empty, and a rule under each item then had to stop short of the container or run past its own text. */ /* on limits.html the list opens the page, so it needs no lead-in space */ .page-body > .limit-list{margin-top:0} .limit-list{ list-style:none;margin:var(--s7) 0 0;padding:0;max-width:none; display:grid;grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s7) var(--gut-col); } @media(max-width:820px){.limit-list{grid-template-columns:1fr;gap:var(--s6)}} .limit-list li{padding:0} .limit-h{font-weight:600;font-size:var(--fs-base);line-height:1.4;display:block} .limit-p{color:var(--body);font-size:var(--fs-base);line-height:var(--lh-body);display:block;margin-top:var(--s2)} .limit-p b{color:var(--ink);font-weight:600} /* ---- pricing ---- */ .price-grid{ display:grid;grid-template-columns:repeat(3,1fr); margin-top:var(--s8);border:1px solid var(--rule-strong);border-radius:var(--r-md); background:var(--surface);overflow:hidden; } @media(max-width:760px){.price-grid{grid-template-columns:1fr}} .tier{position:relative;padding:var(--s6);border-right:1px solid var(--rule);display:flex;flex-direction:column} .tier:last-child{border-right:0} @media(max-width:760px){ .tier{border-right:0;border-bottom:1px solid var(--rule)} .tier:last-child{border-bottom:0} } .tier-badge{ display:block;font-size:var(--ui-micro);font-weight:700;letter-spacing:.01em; line-height:1.5;color:var(--yours-ink);margin-bottom:var(--s2); } /* reserve the badge's height in every tier so the three figures share a baseline */ .tier:not(.lead) .tier-n:first-child::before{content:"";display:block;height:calc(var(--ui-micro) * 1.5 + var(--s2))} .tier-n{font-size:var(--ui-sm);font-weight:600;line-height:1.4} .tier-fig{ font-size:29px;font-weight:700;letter-spacing:-0.035em; margin-top:var(--s2);line-height:1.05; } .tier-fig span{font-size:var(--ui-sm);font-weight:500;color:var(--body);letter-spacing:0} .tier-unit{margin-top:var(--s2);font-size:var(--ui-sm);line-height:1.45;color:var(--body);max-width:var(--m-xs)} .tier-unit b{color:var(--ink);font-weight:600;white-space:nowrap} .tier-p{font-size:var(--ui-sm);line-height:1.5;color:var(--body);margin-top:var(--s4);max-width:var(--m-xs)} .tier.lead{box-shadow:inset 0 3px 0 var(--yours)} .pilot{ margin-top:auto;padding-top:var(--s4); font-size:var(--ui-sm);line-height:1.5;color:var(--body); } .pilot:before{ content:"";display:block;height:1px;background:var(--rule); margin-bottom:var(--s3); } .pilot b{color:var(--ink);font-weight:600} /* ---- repeated CTA band ---- */ .cta-band{padding:var(--s9) 0;border-top:1px solid var(--rule)} /* the band that closes a supporting page needs air above it; the ones between sections on the home page do not */ .page-body + .cta-band{margin-top:var(--s10)} .cta-band-in{ display:flex;justify-content:space-between;align-items:center; gap:var(--s6) var(--s8);flex-wrap:wrap; } .cta-band-copy{flex:1 1 440px;min-width:0} .cta-band-h{font-size:21px;font-weight:600;letter-spacing:-0.026em;line-height:1.3;max-width:var(--m-xs)} .cta-band-p{margin-top:var(--s2);font-size:var(--fs-sm);line-height:1.55;color:var(--body);max-width:var(--m-md)} .cta-band .btn{flex:0 0 auto;text-decoration:none;display:inline-block} /* ---- confidentiality ---- */ .trust{ margin-top:var(--s6);padding:var(--s5) var(--s6);background:var(--surface); border:1px solid var(--rule-strong);border-radius:var(--r-md);max-width:none; } .trust-h{font-size:var(--fs-sm);font-weight:600;line-height:1.4} .trust-l{list-style:none;margin:var(--s3) 0 0;padding:0} .trust-l li{ font-size:var(--fs-sm);color:var(--body);line-height:1.55; padding:0 0 var(--s3) var(--s5);position:relative; } .trust-l li:last-child{padding-bottom:0} .trust-l li:before{ content:"";position:absolute;left:2px;top:9px;width:6px;height:6px; border-radius:50%;background:var(--rule-strong); } .trust-l b{color:var(--ink);font-weight:600} /* ---- close ---- */ /* the pitch and the thing you do about it, side by side on the page grid, instead of a 648px column with a third of the row empty beside it */ .close-grid{ display:grid;grid-template-columns:repeat(12,minmax(0,1fr)); gap:var(--s8) var(--gut-col);align-items:start; } .close-pitch{grid-column:1 / span 6} .close-act{grid-column:7 / span 6} @media(max-width:820px){ .close-grid{grid-template-columns:1fr;gap:var(--s7)} .close-pitch,.close-act{grid-column:1} } .close{border-top:1px solid var(--rule);padding:var(--s11) 0} @media(max-width:640px){.close{padding:var(--s9) 0}} .close h2{font-size:var(--fs-h1);max-width:none;line-height:var(--lh-tight);letter-spacing:-0.038em} .close-p{margin-top:var(--s5);color:var(--body);max-width:none;font-size:var(--fs-base);line-height:var(--lh-body)} .close-act .searchbar,.close-act .optin,.close-act .form-done, .close-act .search-note{max-width:none} /* ============================== drawers ============================== Native
, so keyboard and screen reader semantics come free. The marker is drawn with pseudo elements rather than a glyph. Print is forced open by site.js, because a collapsed section must not silently vanish from the PDF a buyer forwards to a partner. ===================================================================== */ .drawer{border-top:1px solid var(--rule)} .drawer > summary{ position:relative;list-style:none;cursor:pointer; padding:var(--s4) var(--s8) var(--s4) 0; font-size:var(--fs-sm);font-weight:600;line-height:1.4;color:var(--ink); transition:color .18s var(--ease); } .drawer > summary::-webkit-details-marker{display:none} .drawer > summary:hover{color:var(--yours-ink)} .drawer > summary:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:2px} .drawer > summary::before,.drawer > summary::after{ content:"";position:absolute;right:0;top:50%;background:var(--body); } .drawer > summary::before{width:13px;height:1.5px;margin-top:-1px} .drawer > summary::after{ width:1.5px;height:13px;right:5.75px;margin-top:-7px; transition:opacity .2s var(--ease),transform .2s var(--ease); } .drawer[open] > summary::after{opacity:0;transform:rotate(90deg)} .drawer-note{ display:block;margin-top:3px;font-size:var(--ui-sm);font-weight:400; line-height:1.45;color:var(--body);max-width:var(--m-md); } .drawer-body{padding-bottom:var(--s6)} /* a drawer holding prose stays in the prose column, so the reading edge does not jump. Only one holding a full width object breaks out. */ .page-body .doc-sec > .drawer-wide{grid-column:1 / -1} .page-body .doc-sec > .drawer .drawer-body > *{max-width:none} /* jurisdiction cards: the card itself is the drawer */ .jur.drawer{ margin-top:var(--s3);padding:0 var(--s6);border:1px solid var(--rule-strong); border-radius:var(--r-md);background:var(--surface); } .jur.drawer > summary{padding:var(--s5) var(--s8) var(--s5) 0} .jur.drawer .jur-h{padding-bottom:0;border-bottom:0} .jur.drawer .drawer-body{padding-top:var(--s4);border-top:1px solid var(--rule)} /* inside a report card the drawer takes the card's own band geometry */ .report > .drawer{border-top:1px solid var(--rule)} .report > .drawer > summary{padding:var(--s5) var(--pad-x)} .report > .drawer > summary::before{right:var(--pad-x)} .report > .drawer > summary::after{right:calc(var(--pad-x) + 5.75px)} .report > .drawer .drawer-body > .stack{border-top:0;padding-top:0} /* naming the category the reader is already paying for. If they do not see it named they go and search for it, and the act of searching makes them rate what they were reading lower. */ .versus{ margin-top:var(--s7);padding-top:var(--s6);border-top:1px solid var(--rule-strong); display:grid;grid-template-columns:repeat(12,minmax(0,1fr)); gap:var(--s3) var(--gut-col);align-items:start; } .versus-h{ grid-column:1 / span 4;font-size:var(--ui-lg);font-weight:600; letter-spacing:var(--tr-sm);line-height:1.35; } .versus-p{ grid-column:6 / span 7;font-size:var(--fs-sm);line-height:1.58;color:var(--body); } .versus-p b{color:var(--ink);font-weight:600} @media(max-width:820px){ .versus{grid-template-columns:1fr} .versus-h,.versus-p{grid-column:1} } /* ---- private memo pages. Not linked from the site. ---- */ .memo{max-width:none} .memo .page-body p{max-width:var(--w8)} .memo-flag{ margin:var(--s6) 0 0;padding:var(--s5) var(--s6); background:var(--surface);border:1px solid var(--ink); border-left:4px solid var(--yours);border-radius:var(--r-md);max-width:var(--w8); } .memo-flag b{font-weight:600} .memo-flag p{margin-top:var(--s2);font-size:var(--fs-sm);line-height:1.58;color:var(--body)} .memo-num{ counter-reset:step;list-style:none;margin:var(--s6) 0 0;padding:0;max-width:none; } .memo-num > li{ counter-increment:step;position:relative;padding:var(--s6) 0; border-top:1px solid var(--rule); display:grid;grid-template-columns:repeat(12,minmax(0,1fr)); gap:var(--s3) var(--gut-col);align-items:start; } .memo-num > li > h3{ grid-column:1 / span 4;margin:0;font-size:var(--fs-h3);font-weight:600; letter-spacing:var(--tr-sm);line-height:1.3; } .memo-num > li > h3:before{ content:counter(step);display:block;font-size:var(--ui-micro);font-weight:700; letter-spacing:.08em;color:var(--muted);line-height:1.5;margin-bottom:var(--s2); } .memo-num > li > *:not(h3){grid-column:6 / span 7;max-width:none} .memo-num > li > p{margin-top:0} .memo-num > li > p + p{margin-top:var(--s3)} @media(max-width:820px){ .memo-num > li{grid-template-columns:1fr} .memo-num > li > h3,.memo-num > li > *:not(h3){grid-column:1} } .quote{ margin-top:var(--s4);padding-left:var(--s5); border-left:2px solid var(--rule-strong); font-size:var(--fs-sm);line-height:1.6;color:var(--body);max-width:var(--w8); } .quote cite{display:block;margin-top:var(--s2);font-style:normal;font-size:var(--ui-sm);color:var(--muted)} .tbl{width:100%;border-collapse:collapse;margin-top:var(--s5);font-size:var(--fs-sm)} .tbl th,.tbl td{text-align:left;padding:var(--s3) var(--s4) var(--s3) 0;border-bottom:1px solid var(--rule);vertical-align:top;line-height:1.5} .tbl thead th{font-size:var(--ui-xs);color:var(--body);font-weight:600;border-bottom:1px solid var(--rule-strong)} .tbl td:last-child,.tbl th:last-child{padding-right:0} /* a three column table needs the page, not the prose column */ .page-body .doc-sec > .tbl,.page-body .doc-sec > .memo-num{grid-column:1 / -1} @media(max-width:700px){ .tbl,.tbl tbody,.tbl tr,.tbl th,.tbl td{display:block;width:auto} .tbl thead{display:none} .tbl tr{padding:var(--s4) 0;border-bottom:1px solid var(--rule)} .tbl th,.tbl td{border-bottom:0;padding:0 0 var(--s2) 0} } /* ---- inline links ---- */ .src{ color:var(--body);text-decoration:none; border-bottom:1px solid var(--rule-strong); transition:color .18s var(--ease),border-color .18s var(--ease); } .src:hover{color:var(--ink);border-color:var(--ink)} .more{ display:inline-block;margin-top:var(--s6);font-size:var(--fs-sm);font-weight:600; line-height:1.4;text-decoration:none;color:var(--ink); border-bottom:2px solid var(--yours);padding-bottom:2px; } .more:hover{border-color:var(--ink)} /* ========================= supporting pages ========================= */ .page-head{padding-top:var(--s10)} .page-head h1{ font-size:var(--fs-h1);line-height:var(--lh-tight);font-weight:600; letter-spacing:-0.038em;max-width:var(--w8); } .page-lede{margin-top:var(--s5);max-width:var(--w8);font-size:var(--fs-lede);line-height:1.5;color:var(--body)} .page-body{padding-top:var(--s9)} .page-body:last-child{padding-bottom:var(--s11)} /* a documentation section: the heading holds the left rail while its prose runs down the right column, so the page occupies the same 984 the masthead brackets without stretching any line past a readable measure */ .doc-sec{ display:grid;grid-template-columns:repeat(12,minmax(0,1fr)); gap:0 var(--gut-col);align-items:start;margin-top:var(--s10); } .doc-sec:first-child{margin-top:0} .page-body .doc-sec > *{grid-column:6 / span 7;max-width:none} .page-body .doc-sec > h2{grid-column:1 / span 4;margin-top:0;max-width:none} .page-body .doc-sec > .cov-wrap,.page-body .doc-sec > .jur, .page-body .doc-sec > .report,.page-body .doc-sec > .checker{grid-column:1 / -1} .page-body .doc-sec > *:first-child, .page-body .doc-sec > *:nth-child(2){margin-top:0} .page-head .btn{margin-top:var(--s5)} @media(max-width:820px){ .doc-sec{grid-template-columns:minmax(0,1fr);margin-top:var(--s9)} .page-body .doc-sec > *{grid-column:1;max-width:var(--w8)} .page-body .doc-sec > h2{grid-column:1;max-width:var(--m-head-lg);margin-bottom:var(--s3)} } .page-body h2{ font-size:var(--fs-h2);letter-spacing:var(--tr-h); max-width:var(--m-head-lg);line-height:var(--lh-head);margin-top:var(--s10); } .page-body > h2:first-child{margin-top:0} .page-body h3{font-size:var(--fs-h3);font-weight:600;letter-spacing:var(--tr-sm);line-height:1.35;margin-top:var(--s7)} /* only unclassed prose takes the page measure; a component that happens to contain a

keeps its own geometry (this was capping the report card's own footnote at 648 inside a 984 card) */ .page-body p:not([class]),.page-body p.lead-p{ margin-top:var(--s3);color:var(--body);max-width:var(--w8); font-size:var(--fs-base);line-height:var(--lh-body); } .page-body p.lead-p{color:var(--ink)} .page-body ul:not([class]){margin:var(--s4) 0 0;padding:0 0 0 var(--s5);max-width:var(--w8)} .page-body > ul:not([class]) > li{color:var(--body);font-size:var(--fs-base);line-height:var(--lh-body);margin-top:var(--s2)} .page-body li b,.page-body p b{color:var(--ink);font-weight:600} .page-body .cov-wrap{margin-top:var(--s6)} /* per jurisdiction cards */ .jur{ margin-top:var(--s5);padding:var(--s5) var(--s6);background:var(--surface); border:1px solid var(--rule-strong);border-radius:var(--r-md); } .jur-h{ display:flex;justify-content:space-between;align-items:baseline; gap:var(--s4);flex-wrap:wrap; padding-bottom:var(--s3);border-bottom:1px solid var(--rule); } .jur-n{font-size:var(--ui-lg);font-weight:600;letter-spacing:var(--tr-sm);line-height:1.35} .jur-c{font-size:var(--ui-sm);color:var(--body);white-space:nowrap;line-height:1.4} .jur-answers{list-style:none;margin:var(--s3) 0 0;padding:0;display:grid;gap:var(--s2);max-width:none} .jur-answers li{ font-size:var(--ui-base);color:var(--body);line-height:1.5; padding-left:var(--s7);position:relative;margin:0; } .jur-answers li b{color:var(--ink);font-weight:600} .jur-answers li:before{ position:absolute;left:0;top:0;font-size:var(--ui-micro);font-weight:700; letter-spacing:.05em;text-transform:uppercase;line-height:1.9; } .jur-answers li.y:before{content:"Yes";color:var(--yours-ink)} .jur-answers li.n:before{content:"No";color:var(--muted)} /* coverage self check */ .checker{ margin-top:0;padding:var(--s6);background:var(--surface); border:1px solid var(--rule-strong);border-radius:var(--r-md);max-width:var(--w8); } .checker-h{font-size:var(--ui-lg);font-weight:600;letter-spacing:var(--tr-sm);line-height:1.35} .checker-p{margin-top:var(--s2);font-size:var(--fs-sm);line-height:1.5;color:var(--body);max-width:var(--m-md)} .checker .searchbar{margin-top:var(--s4)} .checker-out{display:none;margin-top:var(--s4);padding-top:var(--s4);border-top:1px solid var(--rule)} .checker.is-out .checker-out{display:block} .checker-verdict{font-size:var(--fs-sm);font-weight:600;line-height:1.45} .checker-verdict.full{color:var(--yours-ink)} .checker-detail{margin-top:var(--s2);font-size:var(--fs-sm);line-height:1.55;color:var(--body)} /* ========================== knowledge base ========================== Pages rendered by the CMS (templates/knowledge/*.ejs). The article body is editor output, so the selectors below have to work on bare tags rather than classes: .kb-prose is the one hook, and everything inside it is styled by element. Deliberately scoped, so an editor's

    cannot inherit the .limit-list geometry the hand written pages rely on. */ /* Every selector below is scoped to .page-body on purpose. The editor emits bare

    and

      , and .page-body p:not([class]) / ul:not([class]) sit at specificity (0,2,1): an unscoped .kb-prose p (0,1,1) loses to them no matter where it appears in the file, and the article silently rendered at the supporting-page rhythm instead of its own. The measure sits on the text, not on the container, so a table or a code block can take the full 984 the masthead brackets while a paragraph still breaks at 648. Capping .kb-prose itself squeezed every table into the reading column, which is the mistake the hand written pages already learned once (see .page-body p:not([class]) above). */ .page-body .kb-prose{max-width:none} .page-body .kb-prose > *:first-child{margin-top:0} .page-body .kb-prose p, .page-body .kb-prose ul, .page-body .kb-prose ol, .page-body .kb-prose blockquote, .page-body .kb-prose hr, .page-body .kb-prose figcaption{max-width:var(--w8)} .page-body .kb-prose p{ margin-top:var(--s5);color:var(--body); font-size:var(--fs-base);line-height:var(--lh-body); } .page-body .kb-prose h2{ font-size:var(--fs-h2);font-weight:600;letter-spacing:var(--tr-h); line-height:var(--lh-head);max-width:var(--m-head-lg);margin-top:var(--s10); } .page-body .kb-prose h3{ font-size:var(--fs-h3);font-weight:600;letter-spacing:var(--tr-sm); line-height:1.35;max-width:var(--m-head-lg);margin-top:var(--s8); } .page-body .kb-prose h4{ font-size:var(--fs-base);font-weight:600;letter-spacing:var(--tr-sm); line-height:1.4;margin-top:var(--s7); } .page-body .kb-prose h2 + p, .page-body .kb-prose h3 + p, .page-body .kb-prose h4 + p{margin-top:var(--s3)} .page-body .kb-prose ul, .page-body .kb-prose ol{margin:var(--s5) 0 0;padding:0 0 0 var(--s5)} .page-body .kb-prose li{ color:var(--body);font-size:var(--fs-base); line-height:var(--lh-body);margin-top:var(--s2); } .page-body .kb-prose li > ul, .page-body .kb-prose li > ol{margin-top:var(--s2)} .page-body .kb-prose li p{max-width:none;margin-top:var(--s2)} .page-body .kb-prose li::marker{color:var(--muted)} .page-body .kb-prose b, .page-body .kb-prose strong{color:var(--ink);font-weight:600} .page-body .kb-prose a{ color:var(--ink);text-decoration:none; border-bottom:1px solid var(--rule-strong); transition:color .18s var(--ease),border-color .18s var(--ease); } .page-body .kb-prose a:hover{border-color:var(--ink)} .page-body .kb-prose hr{border:0;border-top:1px solid var(--rule);margin:var(--s9) 0 0} .page-body .kb-prose img{ display:block;max-width:100%;height:auto; border-radius:var(--r-md);margin-top:var(--s7); } .page-body .kb-prose figure{margin:var(--s7) 0 0} .page-body .kb-prose figure img{margin-top:0} .page-body .kb-prose figcaption{margin-top:var(--s3);font-size:var(--ui-sm);line-height:1.5;color:var(--muted)} /* a quotation is a claim somebody else made; the rule marks where our voice stops, which on a page about what the record proves is worth the ink */ .page-body .kb-prose blockquote{ margin:var(--s7) 0 0;padding:var(--s2) 0 var(--s2) var(--s5); border-left:3px solid var(--yours); } .page-body .kb-prose blockquote p{margin-top:var(--s3);color:var(--ink);max-width:none} .page-body .kb-prose blockquote > p:first-child{margin-top:0} .page-body .kb-prose code{ font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:.88em;background:var(--page);border:1px solid var(--rule); border-radius:var(--r-sm);padding:1px 5px; } .page-body .kb-prose pre{ margin-top:var(--s6);padding:var(--s5) var(--s6);overflow-x:auto; background:var(--page);border:1px solid var(--rule-strong);border-radius:var(--r-md); } .page-body .kb-prose pre code{background:none;border:0;padding:0;font-size:var(--ui-sm);line-height:1.6} /* a table earns the full page the way .tbl does elsewhere, because three columns inside a 648 measure sets every cell wrapping */ .page-body .kb-prose table{ width:100%;border-collapse:collapse;margin-top:var(--s6); font-size:var(--ui-base);line-height:var(--lh-ui); } .page-body .kb-prose th, .page-body .kb-prose td{ text-align:left;padding:var(--s3) var(--s4) var(--s3) 0; border-bottom:1px solid var(--rule);vertical-align:top; } .page-body .kb-prose th{ font-size:var(--ui-xs);font-weight:600;color:var(--muted); letter-spacing:.05em;text-transform:uppercase; border-bottom:1px solid var(--rule-strong); } .page-body .kb-prose td{color:var(--body)} .page-body .kb-prose td b{color:var(--ink)} /* ---- the article's own head ---- */ .kb-eyebrow{ display:flex;gap:var(--s2) var(--s4);flex-wrap:wrap;align-items:baseline; font-size:var(--ui-sm);line-height:1.45;color:var(--muted); } .kb-eyebrow a{color:var(--muted);text-decoration:none;border-bottom:1px solid var(--rule-strong)} .kb-eyebrow a:hover{color:var(--ink);border-color:var(--ink)} .kb-eyebrow .kb-tag{color:var(--yours-ink);font-weight:600} .page-head .kb-eyebrow{margin-bottom:var(--s5)} /* max-width, not width. width:100% upscaled a 600px image to the full 984 and published it soft: the template emits the intrinsic width and height, so the browser already knows how big the picture really is and should not be told to exceed it. max-height keeps a portrait photograph from taking a whole screen before the first paragraph. */ .kb-hero{ display:block;max-width:100%;max-height:78vh;width:auto;height:auto; margin-top:var(--s8);border-radius:var(--r-md); } /* ---- the listing ---- Same 12 column row as .chain: the date and tag hold columns 1 to 3 and the entry takes 4 to 12, so an index of thirty articles scans down two hard edges instead of a ragged one. */ /* ---- the index ---- TWO COLUMNS, because one column cannot use this container honestly. A comfortable measure for 15px body copy is about 564px. The container is 984px. One column therefore leaves 420px of air down the right of the whole page, and every arrangement of a single column either wastes it or widens the prose past the point where it is pleasant to read. Two columns of 468px use the full width, keep the measure at about 64 characters, and halve the height of an index that is fifteen entries long and growing. The first version put the date in columns 1 to 3 and the entry in 4 to 12, so a fourteen-character date held a 250px gutter open down the page while the text stopped 170px short of the right edge. */ .kb-list{ list-style:none;margin:0;padding:0; display:grid;grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:calc(var(--gut-col) * 2); } /* Row gap rather than a rule between rows: with an image in every cell the hairlines became a grid of boxes, and the pictures already separate one entry from the next. */ .kb-list{row-gap:var(--s9)} .kb-list > li{padding:0;border-top:0;transition:background-color .12s ease} /* No tint behind the cell any more. With an image in every entry the wash read as a coloured box around a photograph, and the picture lifting under the cursor is a better affordance than a background change. The title keeps its own underline on hover. */ /* The meta is a footer line on the cell rather than a right-hand column: in a 468px cell there is no right-hand column to put it in. It sits under the summary, so an entry reads title, then what it says, then how long it takes, which is the order somebody decides in. The reading time leads and is set in the ink. It is the only number here that varies, from five minutes to nine, and the only one anybody chooses on. The date follows in the muted grey: eleven of the fifteen pieces carry the same date, so at full strength it would be one string repeated eleven times at the top of the reader's attention. */ .kb-meta{ display:flex;align-items:baseline;gap:var(--s3);flex-wrap:wrap; margin-top:var(--s3); font-size:var(--ui-xs);line-height:1.4;color:var(--muted); font-variant-numeric:tabular-nums; } .kb-meta .kb-tag{color:var(--yours-ink);font-weight:600} .kb-meta .kb-read{color:var(--ink);font-weight:600} .kb-entry{min-width:0} /* ---- the card image ---- One image per entry, generated, and the rule it lives under is narrow on purpose: an image model may never make anything on this site that carries text or a number. These carry neither, which is why they are allowed where the diagrams are not. See the docstring in scripts/index-images.py. 3:2, because that is what the generator is asked for, and the box holds the ratio with aspect-ratio rather than a fixed height so the two columns stay level whatever the image turns out to be. A missing image collapses the box to nothing instead of leaving a grey hole: fifteen exist, and the sixteenth article will not have one on the day it is written. */ .kb-shot{ display:block;aspect-ratio:3 / 2;margin-bottom:var(--s4); background:var(--rule);border-radius:var(--r-sm);overflow:hidden; } .kb-shot img{display:block;width:100%;height:100%;object-fit:cover} /* the entry heading sits inside .page-body, so it inherits that section's rhythm: --s10 above an h2, --s7 above an h3. Inside a list cell both are dead space. Reset it here. Set a step above the body rhythm rather than at it: on an index the titles ARE the content, and fifteen of them at paragraph weight read as a wall. */ .page-body .kb-title{ margin-top:0;font-size:20px;font-weight:600; letter-spacing:-.022em;line-height:1.28;max-width:none; } .kb-title a{color:var(--ink);text-decoration:none;border-bottom:2px solid transparent;padding-bottom:1px} .kb-title a:hover{border-color:var(--yours)} .kb-ex{ margin-top:var(--s3);font-size:var(--fs-sm);line-height:1.55; color:var(--body);max-width:none; } @media(max-width:980px){ /* One column below the width where two cells still hold a readable measure. 468px is the cell at 984; under about 900 the cell drops through 420 and the titles start breaking badly. */ .kb-list{grid-template-columns:1fr;row-gap:var(--s8)} .kb-ex{max-width:var(--w7)} .kb-shot{max-width:var(--w7)} } /* ---- the two briefs ---- The knowledge base is written to two opposite briefs and the hub says so, because the difference is the first thing a reader needs. The library teaches the register and never mentions this company; the product pages are about Collecteral and keep their first person. Fifteen identical entries in one run gave a reader nothing to navigate by, and hid the fact that twelve of them are not selling anything. The label is small and quiet on purpose. Set at heading size it would be a third level of large type on a page that already has a masthead and an h1, and the entries are what the reader came for. */ .kb-group{margin-top:var(--s10)} .kb-group:first-of-type{margin-top:0} /* The jump list above the categories: a hundred and twenty pages in eleven groups need a table of contents, and a reader arriving with one question should reach its category in one move. */ /* Category navigation for the knowledge hub. One list, two shapes: a sticky sidebar beside the sections on a wide screen, a sticky row of tabs under the masthead on a narrow one. site.js sets aria-current on the section in view. */ .kb-nav-title{display:none} .kb-nav-list{list-style:none;margin:0;padding:0} .kb-nav a{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s3); color:var(--ink);text-decoration:none;font-size:var(--ui-sm);line-height:1.35} .kb-nav-n{color:var(--muted);font-variant-numeric:tabular-nums;font-size:var(--ui-xs)} .kb-nav a[aria-current="true"]{font-weight:600} .kb-group{scroll-margin-top:calc(64px + var(--s6))} @media(min-width:1100px){ .kb-layout{display:grid;grid-template-columns:208px minmax(0,1fr);column-gap:var(--s9);align-items:start} .kb-nav{position:sticky;top:calc(64px + var(--s7));max-height:calc(100vh - 64px - var(--s9));overflow-y:auto} .kb-nav-title{display:block;margin:0 0 var(--s3);font-size:var(--ui-xs);font-weight:600; letter-spacing:.01em;color:var(--muted)} .kb-nav a{padding:7px 0 7px var(--s3);border-left:2px solid var(--rule)} .kb-nav a:hover{border-left-color:var(--muted)} .kb-nav a[aria-current="true"]{border-left-color:var(--ink)} /* the state series and the product pages sit apart from the library's nine */ .kb-nav-states{margin-top:var(--s4)} .kb-nav-product{margin-top:var(--s4)} } @media(max-width:1099px){ .kb-nav{position:sticky;top:64px;z-index:20;margin:0 calc(var(--gut) * -1) var(--s8); background:rgba(244,244,246,.94);backdrop-filter:saturate(1.6) blur(10px); border-bottom:1px solid var(--rule)} .kb-nav-list{display:flex;gap:var(--s1);overflow-x:auto;padding:0 var(--gut); scrollbar-width:none;-webkit-overflow-scrolling:touch} .kb-nav-list::-webkit-scrollbar{display:none} .kb-nav li{flex:0 0 auto} .kb-nav a{padding:var(--s3) var(--s3);white-space:nowrap;border-bottom:2px solid transparent} .kb-nav a[aria-current="true"]{border-bottom-color:var(--ink)} .kb-nav-states,.kb-nav-product{margin-left:var(--s3);padding-left:var(--s3);border-left:1px solid var(--rule)} .kb-group{scroll-margin-top:calc(64px + 48px + var(--s5))} } @media(max-width:640px){ .kb-nav{top:58px} .kb-group{scroll-margin-top:calc(58px + 48px + var(--s5))} } /* The state pages, one name a state. Fifty-one cards with fifty-one near identical summaries would bury the library under them; a grid of names is the index a reader with a state in mind actually wants. */ .kb-states{list-style:none;margin:var(--s6) 0 0;padding:0;display:grid; grid-template-columns:repeat(auto-fill,minmax(9rem,1fr));gap:var(--s2) var(--s6)} .kb-states li{font-size:var(--ui-base);line-height:1.5} .kb-states a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--rule)} .kb-states a:hover{border-bottom-color:var(--ink)} .kb-group-head{padding-bottom:var(--s5);border-bottom:2px solid var(--ink)} .page-body .kb-group-head h2{ /* max-width:none because .page-body h2 caps at --m-head-lg, a measure meant for a 34px heading. At 12.5px that cap is about eleven characters and broke "The reference library" across two lines with the whole container standing free beside it. */ margin:0;max-width:none; font-size:var(--ui-xs);font-weight:700;letter-spacing:.01em; color:var(--ink);line-height:1.4; } /* The count rides inside the heading rather than in a column of its own: two words and a numeral do not earn a column, and on the narrow layout a column becomes a stranded line. Inside the h2 it also reads correctly out loud. */ .page-body .kb-group-count{ margin-left:var(--s4);font-weight:400;letter-spacing:.02em; text-transform:none;color:var(--muted);font-variant-numeric:tabular-nums; } .page-body .kb-group-note{ margin:var(--s3) 0 0;font-size:var(--fs-sm);line-height:1.55; color:var(--body);max-width:var(--w8); } .kb-group .kb-list{margin-top:var(--s6)} /* an index with nothing in it is a state, not a bug, and it should say which */ .kb-empty{ padding:var(--s8) var(--s6);background:var(--surface); border:1px solid var(--rule-strong);border-radius:var(--r-md); } .page-body .kb-empty h2{ margin:0;font-size:var(--fs-h3);font-weight:600; letter-spacing:var(--tr-sm);line-height:1.35; } .page-body .kb-empty p{ margin-top:var(--s3);font-size:var(--fs-sm);line-height:1.55; color:var(--body);max-width:var(--m-md); } /* ---- what comes next ---- */ .kb-next{margin-top:var(--s10);padding-top:var(--s7);border-top:1px solid var(--rule)} .page-body .kb-next h2{ margin:0;font-size:var(--ui-xs);font-weight:600;letter-spacing:.01em; color:var(--muted); } .kb-next .kb-list{margin-top:var(--s5)} /* Related reading on a hand-built article: four titles, written by scripts/seo-build.py. Titles only, so the list reads as a way on and not as a second index. */ .kb-more{ list-style:none;margin:var(--s5) 0 0;padding:0; display:grid;grid-template-columns:1fr 1fr;gap:var(--s5) var(--gut-col); } @media(max-width:640px){.kb-more{grid-template-columns:1fr}} .kb-more a{ font-size:var(--fs-sm);font-weight:600;line-height:1.45;color:var(--ink); text-decoration:none;border-bottom:2px solid var(--yours);padding-bottom:2px; } .kb-more a:hover{border-color:var(--ink)} /* The fifty states and DC, on the page that compares them. */ .page-body .kb-states{ list-style:none;margin:0;padding:0;max-width:none; display:grid;grid-template-columns:repeat(auto-fill,minmax(10em,1fr)); gap:var(--s3) var(--s5); } .kb-states a{color:var(--body);text-decoration:none;border-bottom:1px solid var(--rule-strong)} .kb-states a:hover{color:var(--ink);border-color:var(--ink)} .kb-pager{ display:grid;grid-template-columns:1fr 1fr;gap:var(--gut-col); margin-top:var(--s9);padding-top:var(--s6);border-top:1px solid var(--rule); } @media(max-width:640px){.kb-pager{grid-template-columns:1fr;gap:var(--s6)}} .kb-pager > div:last-child:nth-child(2){text-align:right} @media(max-width:640px){.kb-pager > div:last-child:nth-child(2){text-align:left}} .kb-pager-k{font-size:var(--ui-xs);color:var(--muted);line-height:1.4} .kb-pager a{ display:inline-block;margin-top:var(--s2);font-size:var(--fs-sm);font-weight:600; line-height:1.45;color:var(--ink);text-decoration:none; border-bottom:2px solid var(--yours);padding-bottom:2px;max-width:var(--m-sm); } .kb-pager a:hover{border-color:var(--ink)} /* ====================== the highlighter ====================== Ported from eifohakesef.com, where tools/build-marks.js draws the strokes. Four hands, so two marked phrases near each other are never the same shape, and a phrase keeps its hand because the class is written into the markup. A stroke is a background on the WORDS, not a layer behind them: a positioned layer is placed against the whole inline box, so a highlight that wraps gets one stroke stretched across both fragments instead of one on each. box-decoration-break draws it again for every fragment, the way a pen would. The ink stands proud of the letters by a set distance in millimetres at any type size, which is what the padding-block arithmetic is for; the SVG is stretched to the padding box, so the ink's height is a fraction of that box and cannot be stated directly. The numbers come from the source project and are not to be nudged by eye. No cursor:pointer here. On that site a mark is something a reader made and can click; here it is emphasis, and a pointer would promise an interaction that does not exist. ============================================================ */ .mark{ padding-inline:0.18em; padding-block:calc(0.1319em + 0.7600mm); -webkit-box-decoration-break:clone; box-decoration-break:clone; background-repeat:no-repeat; background-size:100% 100%; background-image:var(--swipe); background-position:0 0; /* Measured, not assumed. On --body grey the hero's mark was 3.98:1, under even AA; on ink over this stroke it is 12.8:1, clear of AAA's 7:1 for normal text. website-pages/BUILD-NOTES.md carries the numbers. */ color:var(--ink); } .mark.hand-0{--swipe:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 44' preserveAspectRatio='none'%3E%3Cpath d='M0.0 5.1L8.3 5.1L16.6 4.7L24.8 4.4L33.1 3.9L41.4 3.5L49.7 2.8L57.9 2.2L66.2 2.0L74.5 1.8L82.8 1.9L91.0 2.0L99.3 1.8L107.6 2.0L115.9 2.1L124.1 2.2L132.4 2.3L140.7 2.3L149.0 2.0L157.2 1.6L165.5 2.3L173.8 3.1L182.1 4.1L190.3 4.8L198.6 5.0L206.9 5.1L215.2 4.9L223.4 4.5L231.7 4.1L240.0 4.0L240.0 39.1L231.7 39.0L223.4 39.0L215.2 39.2L206.9 39.3L198.6 39.8L190.3 39.8L182.1 39.3L173.8 39.0L165.5 39.0L157.2 39.0L149.0 38.8L140.7 38.4L132.4 38.2L124.1 38.0L115.9 37.9L107.6 37.8L99.3 37.9L91.0 37.9L82.8 37.9L74.5 37.6L66.2 37.8L57.9 37.8L49.7 37.8L41.4 38.1L33.1 38.4L24.8 38.4L16.6 38.7L8.3 39.1L0.0 39.4Z' fill='rgb(240,115,6)' fill-opacity='0.296'/%3E%3Cpath d='M0.0 8.5L8.3 8.2L16.6 8.2L24.8 7.9L33.1 7.6L41.4 7.4L49.7 7.1L57.9 6.6L66.2 6.6L74.5 7.2L82.8 7.4L91.0 7.6L99.3 7.7L107.6 8.1L115.9 8.2L124.1 8.2L132.4 8.2L140.7 8.1L149.0 8.2L157.2 8.2L165.5 8.2L173.8 7.9L182.1 7.7L190.3 7.6L198.6 7.7L206.9 7.8L215.2 7.8L223.4 7.6L231.7 7.4L240.0 7.0L240.0 35.5L231.7 35.3L223.4 35.1L215.2 34.9L206.9 34.7L198.6 34.6L190.3 34.2L182.1 34.6L173.8 34.9L165.5 35.2L157.2 35.5L149.0 35.9L140.7 36.3L132.4 36.5L124.1 36.9L115.9 37.2L107.6 37.4L99.3 37.2L91.0 36.8L82.8 36.6L74.5 36.5L66.2 36.6L57.9 37.0L49.7 37.4L41.4 37.2L33.1 37.1L24.8 36.9L16.6 36.8L8.3 36.7L0.0 36.6Z' fill='rgb(240,115,6)' fill-opacity='0.148'/%3E%3C/svg%3E")} .mark.hand-1{--swipe:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 44' preserveAspectRatio='none'%3E%3Cpath d='M0.0 3.7L8.3 4.1L16.6 4.7L24.8 5.3L33.1 5.5L41.4 5.3L49.7 5.4L57.9 5.7L66.2 5.7L74.5 6.0L82.8 6.0L91.0 6.2L99.3 6.4L107.6 6.4L115.9 6.1L124.1 5.6L132.4 5.4L140.7 5.1L149.0 4.6L157.2 4.2L165.5 3.7L173.8 3.2L182.1 2.6L190.3 2.3L198.6 1.8L206.9 1.6L215.2 2.5L223.4 3.0L231.7 3.3L240.0 3.3L240.0 40.0L231.7 40.4L223.4 40.5L215.2 40.1L206.9 39.8L198.6 40.0L190.3 40.1L182.1 39.9L173.8 39.8L165.5 39.9L157.2 39.9L149.0 40.1L140.7 39.9L132.4 39.7L124.1 39.3L115.9 39.1L107.6 39.2L99.3 38.8L91.0 38.5L82.8 37.6L74.5 37.7L66.2 38.5L57.9 39.2L49.7 39.5L41.4 39.6L33.1 39.8L24.8 40.0L16.6 39.9L8.3 39.9L0.0 40.0Z' fill='rgb(240,115,6)' fill-opacity='0.296'/%3E%3Cpath d='M0.0 8.3L8.3 8.0L16.6 7.8L24.8 7.8L33.1 7.8L41.4 7.8L49.7 8.0L57.9 8.1L66.2 8.4L74.5 8.5L82.8 8.7L91.0 8.6L99.3 8.4L107.6 8.3L115.9 8.0L124.1 7.5L132.4 7.3L140.7 7.0L149.0 6.6L157.2 6.8L165.5 7.2L173.8 7.4L182.1 7.5L190.3 7.8L198.6 7.8L206.9 7.9L215.2 7.9L223.4 7.8L231.7 8.0L240.0 8.0L240.0 36.5L231.7 36.5L223.4 36.8L215.2 37.0L206.9 37.0L198.6 36.9L190.3 36.9L182.1 36.9L173.8 36.7L165.5 36.4L157.2 36.3L149.0 36.3L140.7 36.6L132.4 36.6L124.1 36.5L115.9 36.6L107.6 37.0L99.3 37.1L91.0 37.3L82.8 37.4L74.5 37.3L66.2 37.0L57.9 36.9L49.7 36.7L41.4 36.5L33.1 36.3L24.8 36.2L16.6 36.1L8.3 35.9L0.0 35.9Z' fill='rgb(240,115,6)' fill-opacity='0.148'/%3E%3C/svg%3E")} .mark.hand-2{--swipe:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 44' preserveAspectRatio='none'%3E%3Cpath d='M0.0 4.0L8.3 3.8L16.6 3.8L24.8 4.0L33.1 4.3L41.4 4.5L49.7 4.7L57.9 4.7L66.2 4.6L74.5 4.2L82.8 4.1L91.0 3.9L99.3 4.0L107.6 4.1L115.9 4.2L124.1 4.3L132.4 4.4L140.7 4.7L149.0 5.2L157.2 5.9L165.5 6.4L173.8 5.9L182.1 5.7L190.3 5.7L198.6 5.9L206.9 5.7L215.2 5.7L223.4 5.3L231.7 5.4L240.0 5.7L240.0 40.0L231.7 39.8L223.4 40.0L215.2 40.0L206.9 39.6L198.6 39.5L190.3 39.3L182.1 39.5L173.8 39.4L165.5 39.0L157.2 38.7L149.0 38.8L140.7 38.6L132.4 38.5L124.1 38.8L115.9 38.6L107.6 38.7L99.3 39.0L91.0 39.5L82.8 39.9L74.5 40.0L66.2 40.3L57.9 40.4L49.7 40.7L41.4 40.7L33.1 40.7L24.8 40.6L16.6 40.8L8.3 40.4L0.0 40.3Z' fill='rgb(240,115,6)' fill-opacity='0.296'/%3E%3Cpath d='M0.0 7.8L8.3 8.2L16.6 8.6L24.8 9.2L33.1 9.5L41.4 9.4L49.7 9.7L57.9 9.8L66.2 9.4L74.5 8.9L82.8 8.5L91.0 8.1L99.3 8.0L107.6 7.7L115.9 7.7L124.1 7.4L132.4 7.5L140.7 7.7L149.0 7.9L157.2 8.2L165.5 8.5L173.8 8.7L182.1 8.6L190.3 8.5L198.6 8.4L206.9 8.4L215.2 8.6L223.4 8.9L231.7 8.8L240.0 8.9L240.0 37.0L231.7 37.4L223.4 37.3L215.2 37.1L206.9 36.9L198.6 36.9L190.3 36.9L182.1 36.9L173.8 37.0L165.5 37.1L157.2 37.1L149.0 36.8L140.7 36.6L132.4 36.3L124.1 36.0L115.9 36.0L107.6 36.1L99.3 36.1L91.0 36.2L82.8 36.2L74.5 36.3L66.2 36.2L57.9 36.3L49.7 36.3L41.4 36.1L33.1 36.0L24.8 36.1L16.6 36.0L8.3 35.8L0.0 35.6Z' fill='rgb(240,115,6)' fill-opacity='0.148'/%3E%3C/svg%3E")} .mark.hand-3{--swipe:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 44' preserveAspectRatio='none'%3E%3Cpath d='M0.0 2.8L8.3 3.2L16.6 3.3L24.8 3.8L33.1 4.2L41.4 4.5L49.7 5.0L57.9 5.0L66.2 4.7L74.5 4.2L82.8 3.7L91.0 3.1L99.3 2.5L107.6 1.7L115.9 1.6L124.1 1.6L132.4 1.9L140.7 2.4L149.0 2.7L157.2 2.8L165.5 2.6L173.8 2.7L182.1 2.5L190.3 1.9L198.6 1.7L206.9 2.0L215.2 2.0L223.4 2.1L231.7 2.4L240.0 2.4L240.0 39.1L231.7 38.8L223.4 38.7L215.2 38.2L206.9 37.6L198.6 37.6L190.3 37.7L182.1 37.6L173.8 37.6L165.5 37.7L157.2 37.8L149.0 37.8L140.7 37.6L132.4 37.8L124.1 38.0L115.9 38.2L107.6 38.2L99.3 38.0L91.0 37.9L82.8 37.6L74.5 37.8L66.2 38.0L57.9 38.5L49.7 39.1L41.4 39.5L33.1 40.1L24.8 40.4L16.6 40.2L8.3 40.1L0.0 39.6Z' fill='rgb(240,115,6)' fill-opacity='0.296'/%3E%3Cpath d='M0.0 8.0L8.3 8.3L16.6 8.4L24.8 8.5L33.1 8.6L41.4 8.5L49.7 8.4L57.9 8.2L66.2 8.1L74.5 8.1L82.8 7.9L91.0 7.8L99.3 7.6L107.6 7.2L115.9 7.0L124.1 7.0L132.4 6.9L140.7 7.0L149.0 7.0L157.2 6.8L165.5 6.6L173.8 7.0L182.1 7.0L190.3 7.3L198.6 7.7L206.9 7.9L215.2 7.9L223.4 7.8L231.7 8.0L240.0 8.0L240.0 35.0L231.7 34.8L223.4 34.9L215.2 35.0L206.9 35.1L198.6 34.8L190.3 34.5L182.1 34.2L173.8 34.3L165.5 34.5L157.2 34.7L149.0 34.5L140.7 34.6L132.4 34.5L124.1 34.4L115.9 34.5L107.6 34.5L99.3 34.6L91.0 34.8L82.8 34.8L74.5 34.8L66.2 35.0L57.9 35.0L49.7 34.7L41.4 34.2L33.1 34.6L24.8 34.9L16.6 35.1L8.3 35.3L0.0 35.5Z' fill='rgb(240,115,6)' fill-opacity='0.148'/%3E%3C/svg%3E")} /* Printing: a highlighter is ink on paper, so it should print. But the two translucent passes render as a flat grey wash on a mono printer and swallow the words, so on paper it becomes a rule under them instead. */ @media print{ .mark{ background-image:none;padding-inline:0;padding-block:0; border-bottom:2px solid #000; } } /* ============================= footer ============================= */ footer{border-top:1px solid var(--rule);background:var(--surface);margin-top:0} .foot-top{ display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr; gap:var(--s7) var(--gut-col);padding:var(--s9) 0 var(--s8); } @media(max-width:820px){.foot-top{grid-template-columns:1fr 1fr}} @media(max-width:520px){.foot-top{grid-template-columns:1fr;gap:var(--s6)}} .foot-brand{display:flex;align-items:center;gap:10px;text-decoration:none} .foot-brand svg{width:22px;height:22px} .foot-brand span{font-size:var(--ui-lg);font-weight:600;letter-spacing:-0.04em;line-height:1} .foot-tag{margin-top:var(--s3);font-size:var(--ui-sm);line-height:1.55;color:var(--body);max-width:var(--m-xs)} .foot-col h2{ font-size:var(--ui-micro);font-weight:700;letter-spacing:.01em; color:var(--muted);line-height:1.4; } .foot-col ul{list-style:none;margin:var(--s3) 0 0;padding:0} .foot-col li + li{margin-top:var(--s2)} .foot-col a{ font-size:var(--ui-base);line-height:1.5;color:var(--body);text-decoration:none; transition:color .18s var(--ease); } .foot-col a:hover{color:var(--ink)} .foot-col a[aria-current="page"]{color:var(--ink);font-weight:500} .foot-legal{ display:flex;justify-content:space-between;align-items:baseline; gap:var(--s4) var(--s6);flex-wrap:wrap; padding:var(--s4) 0 var(--s8);border-top:1px solid var(--rule); } .foot-legal p{font-size:var(--ui-xs);line-height:1.55;color:var(--muted);max-width:var(--m-lg)} .foot-legal span{font-size:var(--ui-xs);line-height:1.55;color:var(--muted);white-space:nowrap} /* The 404 page's toy: the mark's three bars, fallen (toys/fallen-bars.js). The stage has a floor line and a fixed height, so nothing on the page moves when the canvas arrives. */ .fallen{ position:relative;height:300px;margin-top:var(--s8); border-bottom:1px solid var(--rule-strong);overflow:hidden;touch-action:pan-y; } .fallen canvas{position:absolute;inset:0;display:block} .fallen-still{position:absolute;left:50%;bottom:var(--s5);width:160px;height:160px;transform:translateX(-50%)} .fallen.is-live .fallen-still{display:none} .fallen-do{ font:inherit;font-size:var(--fs-sm);font-weight:600;line-height:1.45;color:var(--ink); background:none;border:0;border-bottom:2px solid var(--yours);padding:0 0 2px; margin-top:var(--s4);cursor:pointer; } .fallen-do:hover{border-color:var(--ink)} @media(max-width:640px){.fallen{height:240px}} @media print{.fallen,.fallen-do{display:none}} .foot-measure{ font:inherit;font-size:var(--ui-xs);line-height:1.55;color:var(--muted); background:none;border:0;padding:0;cursor:pointer;white-space:nowrap; border-bottom:1px solid var(--rule-strong); } .foot-measure:hover{color:var(--ink);border-color:var(--ink)} /* The question about measurement, asked once of a reader in Europe and again by anyone from the footer. Two answers of equal weight: declining must be as easy as allowing, so neither button is the dark one. */ .consent{ position:fixed;left:var(--s4);right:var(--s4);bottom:var(--s4);z-index:70; max-width:560px;margin:0 auto;padding:var(--s5); display:flex;align-items:center;gap:var(--s4) var(--s6);flex-wrap:wrap; background:var(--surface);border:1px solid var(--ink);border-radius:var(--r-sm); } .consent p{flex:1 1 16em;margin:0;font-size:var(--fs-sm);line-height:1.5;color:var(--body)} .consent-do{display:flex;gap:var(--s3);flex:0 0 auto} .consent-do button{ font:inherit;font-size:var(--fs-sm);font-weight:600;line-height:1.4;cursor:pointer; padding:var(--s2) var(--s4);border-radius:var(--r-sm); border:1px solid var(--ink);background:var(--surface);color:var(--ink); } .consent-do button:hover{background:var(--ink);color:var(--surface)} @media print{.consent,.foot-measure{display:none}} /* ============================ utilities ============================ */ @media(prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *{transition-duration:.001ms !important;animation-duration:.001ms !important} } @media print{ /* .proof is a twelve second animation; on paper it is a single arbitrary frame of it, and the real report is printed in full further down the page anyway. Its pause control would print as a stray button. */ .masthead,.searchbar,.search-note,.mode,.close,footer, .cta-band,.optin,.form-done,.checker,.top-cta,.no-print,.peak,.skip, .kb-pager,.kb-next,.proof{display:none} body{background:#fff;font-size:11pt} .report{border:1px solid #999;box-shadow:none;border-radius:0} .report-frame{padding-bottom:0;margin-top:0} /* keep the atomic units whole. The card itself is longer than a page, so the break has to fall between its bands rather than through one. */ .band,.jur,.limit-list li,.tier,.report-head,.report-facts, .bar-zone,.verdict,.claim,.cmp-row,.transfer-facts > div{ page-break-inside:avoid;break-inside:avoid; } .stack-title,.bar-head-k,.doc-sec > h2, .kb-prose h2,.kb-prose h3,.kb-prose h4{page-break-after:avoid;break-after:avoid} .kb-prose blockquote,.kb-prose pre,.kb-prose figure, .kb-prose tr,.kb-list > li{page-break-inside:avoid;break-inside:avoid} .page-head h1{font-size:22pt} .page-body{padding-top:0} a[href^="http"]:after{content:" (" attr(href) ")";font-size:8pt;color:#555;word-break:break-all} } /* The film band under the header: "The stack", the one minute homepage film. */ .film-band{padding:var(--s7) 0 0} .film{margin:0} /* on the home page the film sits in the hero, between the headline and the search, with the line saying who it is for underneath */ .hero .film{margin-top:var(--s7)} /* keeps a case number whole: a browser may break at its hyphens */ .nobr{white-space:nowrap} .film-v{display:block;width:100%;height:auto;aspect-ratio:16/9;background:#0B0B0E;border-radius:6px} .film-cap{display:flex;flex-wrap:wrap;gap:var(--s3) var(--s6);justify-content:space-between;align-items:baseline;margin-top:var(--s3);font-size:15px;color:#52525A} .film-cap b{color:#000} .film-t summary{cursor:pointer;text-decoration:underline;text-underline-offset:3px} .film-t[open]{flex-basis:100%} .film-t p{max-width:68ch;margin:var(--s3) 0 0;color:#000;font-size:16px;line-height:1.55} .film-t .film-fine{color:#52525A;font-size:14px} @media(prefers-reduced-motion:reduce){.film-v{scroll-behavior:auto}} /* Headings balance their lines rather than leave one word on the last: a no-break space in a heading set this large can be wider than a phone. */ .page-head h1,.doc-sec h2,.band-head h1{text-wrap:balance}