/* =========================================================================== legal-doc.css — the PARALEGAL FINISH for the legal pages (2026-09-15). Worn by eula.html, terms-of-service.html and privacy-policy.html; every rule is fenced behind `.doc` on , so the landing page's own legal chrome (.legal* in v2.css) is untouched and any page that does not opt in keeps it. These three opt out of the instrument dress and into a printed- document one. WHAT CHANGES, and why: an agreement is read the way a contract is read — top to bottom, in one column, looking for a numbered clause. So the page stops being an instrument plate and becomes a SHEET: 1 A serif text face. The console/mono faces are chrome and data faces (contract §7.15 bars Departure Mono from anything that is not short uppercase chrome); running legal prose is neither. The stack is system-resident — no new webfont is downloaded. 2 One measure, one column, one rag. ~72 characters, justified with hyphenation at desktop, ragged-right below the phone break where justification opens rivers. 3 Caps-and-rules title block, uppercase clause headings, hanging (a)/(b) enumerations — the structural cues a reader skims for. 4 Section hairlines REMOVED. A contract separates clauses with whitespace and numbering, not with ruled rows. 5 Full ink. Body prose is --text, not --dim: a document is read, not glanced at. COLOR IS STILL TOKENS. Nothing here invents a hue, radius or spacing value; the sheet is the plate and it reads in both finishes (cave and paper) exactly as every other surface does. A print block at the bottom takes it to black-on-white for the filing cabinet. =========================================================================== */ .doc { /* Charter and Iowan ship with macOS/iOS; Georgia is everywhere else. Every fallback in the stack is a text serif with real numerals — none of them is a display face, so the document sets the same way on every machine. */ --doc-face: Charter, 'Bitstream Charter', 'Iowan Old Style', 'Palatino Linotype', Palatino, 'Book Antiqua', Georgia, 'Times New Roman', Times, serif; --doc-size: 16.5px; --doc-lead: 1.72; } /* ------------------------------------------------------------- the sheet -- */ .doc .legal { margin: 64px 0 0; } /* the sheet is the plate, at document width, with document margins */ .doc .legal.instr { /* the sheet is sized so its own gutters put the text column at the measure — the column is never a narrow ribbon floating in a wide plate */ max-width: 800px; margin-inline: auto; padding: 0 0 12px; border-radius: var(--r-panel); } .doc .legal-body, .doc .legal > .np ~ h1 { max-width: none; } /* everything inside the sheet lives on one set of gutters */ .doc .legal h1, .doc .legal-body { padding: 0 clamp(22px, 6vw, 68px); } /* ------------------------------------------------------- the docket head -- */ /* The nameplate stays — it is the same strip every surface on the site wears — but it is re-set in the document's own face, as a file stamp rather than an instrument label. */ .doc .legal .np { padding: 14px clamp(22px, 6vw, 68px); } .doc .legal .np .t, .doc .legal .np .q { font-family: var(--doc-face); font-size: 11.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); } /* --------------------------------------------------------- the title block -- */ .doc .legal h1 { margin: 52px 0 0; font-family: var(--doc-face); font-weight: 600; font-size: clamp(21px, 2.4vw, 27px); line-height: 1.3; letter-spacing: .06em; text-transform: uppercase; text-align: center; color: var(--text); } /* the double rule is the one ornament a contract is allowed */ .doc .legal h1::after { content: ''; display: block; width: 100%; height: 4px; margin: 26px auto 0; border-top: var(--hair) solid var(--seam); border-bottom: var(--hair) solid var(--seam); } .doc .legal-body { margin-top: 0; padding-top: 34px; padding-bottom: 8px; } /* the recital line under the title (terms-of-service / privacy-policy). It is the preamble, not a clause, so it is set a size up and sits centred under the rule on a shorter measure — the way a contract's "WHEREAS" block does. */ .doc .legal-lede { margin: 26px auto 0; padding: 0 clamp(22px, 6vw, 68px); max-width: 62ch; font-family: var(--doc-face); font-size: 17px; line-height: 1.7; color: var(--text); text-align: center; text-wrap: balance; /* a centred preamble wants even lines, not a rag */ } .doc .legal-lede + .legal-body { padding-top: 30px; } .doc .legal-lede b { font-weight: 700; } .doc .legal-lede a { color: var(--sage); text-underline-offset: 3px; } /* ------------------------------------------------------------ the clauses -- */ .doc .legal-sec, .doc .legal-contact { border-top: 0; /* clause 4 — whitespace separates, not rules */ padding: 0; margin: 0 0 30px; } .doc .legal-sec h2, .doc .legal-contact h2 { margin: 0 0 12px; font-family: var(--doc-face); font-weight: 700; font-size: 14.5px; line-height: 1.5; letter-spacing: .075em; text-transform: uppercase; color: var(--text); } /* the clause number hangs in the margin so a skimming eye finds §17 fast */ .doc .legal-sec h2, .doc .legal-contact h2 { padding-left: 2.3em; text-indent: -2.3em; } .doc .legal-sec p, .doc .legal-contact p, .doc .legal-list li { font-family: var(--doc-face); font-size: var(--doc-size); line-height: var(--doc-lead); color: var(--text); text-align: justify; hyphens: auto; -webkit-hyphens: auto; } .doc .legal-sec p, .doc .legal-contact p { margin: 0 0 13px; } .doc .legal-sec p:last-child, .doc .legal-contact p:last-child { margin-bottom: 0; } .doc .legal-sec b, .doc .legal-contact b, .doc .legal-list b { font-weight: 700; color: var(--text); } /* enumerated restrictions: the letter sits in the margin, the text blocks */ .doc .legal-list { margin: 0 0 13px; } .doc .legal-list li { margin: 0 0 11px; padding-left: 2.4em; text-indent: -2.4em; } /* the ALL-CAPS statutory blocks (warranty, liability). Caps set at running size read as a wall; a notch of tracking and a notch off the size is how a printed contract sets them. */ .doc .legal-sec p.caps { font-size: 15px; line-height: 1.66; letter-spacing: .012em; color: var(--dim); } /* --------------------------------------------------------- the notice box -- */ /* The three IMPORTANT NOTICES are the clauses a regulator expects to find conspicuous, so they get the one boxed treatment on the page. */ .doc .doc-notice { margin: 22px 0 0; padding: 22px 26px 24px; border: var(--hair) solid var(--seam); border-radius: var(--r-module); background: var(--deep); } .doc .doc-notice > .doc-notice-k { margin: 0 0 12px; font-family: var(--doc-face); font-weight: 700; font-size: 12.5px; letter-spacing: .13em; text-transform: uppercase; color: var(--text); } /* Inside the box the notices are flush-left blocks: there is no clause letter to hang, so the hanging indent the numbered lists use would only look like a second, competing margin. */ .doc .doc-notice .legal-list { margin: 0; } .doc .doc-notice .legal-list li { margin: 0 0 13px; padding-left: 0; text-indent: 0; font-size: 15.5px; line-height: 1.62; text-align: left; hyphens: none; } .doc .doc-notice .legal-list li:last-child { margin-bottom: 0; } /* ------------------------------------------------------------- the ending -- */ /* Contact block: an address is set as an address — ragged, not justified. */ .doc .legal-contact { margin-top: 40px; padding-top: 28px; border-top: var(--hair) solid var(--divider); } .doc .legal-contact p { text-align: left; hyphens: none; } .doc .legal-sec a, .doc .legal-contact a { color: var(--sage); text-underline-offset: 3px; } /* ---------------------------------------------------------------- mobile -- */ @media (max-width: 760px) { .doc { --doc-size: 16px; --doc-lead: 1.68; } .doc .legal { margin-top: 40px; } .doc .legal h1 { margin-top: 36px; } .doc .legal-lede { font-size: 16.5px; text-align: left; } /* justification needs a measure it cannot get on a phone */ .doc .legal-sec p, .doc .legal-contact p, .doc .legal-list li { text-align: left; hyphens: none; } } @media (max-width: 420px) { /* the file stamp runs out of rail before the type does: let the date drop under the label rather than shrink the whole strip */ .doc .legal .np { flex-wrap: wrap; row-gap: 4px; } .doc .legal .np .grow { flex-basis: 100%; height: 0; } } /* ----------------------------------------------------------------- print -- */ /* A licence agreement gets printed and filed. This is that copy: black ink, white paper, no chrome, clause numbers intact, URLs spelled out. */ @media print { .doc .nav, .doc .foot, .doc .skip { display: none !important; } .doc, .doc .legal.instr { background: #fff !important; color: #000 !important; border: 0 !important; } .doc .col { width: 100%; } .doc .legal { margin: 0; } .doc .legal h1, .doc .legal-body, .doc .legal-lede { padding-inline: 0; } .doc .legal .np { border-bottom: 1px solid #000; padding-inline: 0; } .doc .legal .np .t, .doc .legal .np .q, .doc .legal h1, .doc .legal-sec h2, .doc .legal-contact h2, .doc .legal-lede, .doc .legal-sec p, .doc .legal-contact p, .doc .legal-list li, .doc .doc-notice .doc-notice-k { color: #000 !important; } .doc .doc-notice { background: none; border-color: #000; } .doc .legal-sec, .doc .legal-contact { break-inside: auto; } .doc .legal-sec h2, .doc .legal-contact h2 { break-after: avoid; } .doc .legal-sec a, .doc .legal-contact a { color: #000 !important; text-decoration: underline; } .doc .legal-sec a[href^="http"]::after, .doc .legal-contact a[href^="http"]::after { content: ' (' attr(href) ')'; font-size: 11px; } }