/* ============================================================ legal.css — long-form legal prose. Loaded after yuzutrace.css, which owns the shell. This sheet only styles the content injected from i18n/content/legal-policies..html, which carries its own class names (legal-shell, toc, last-updated…). A legal document is read in two ways: skimmed for one clause, or read through under pressure. Both need a visible hierarchy and a measure short enough to follow — hence the table of contents and the 68ch cap. ============================================================ */ /* The hero and the document are one continuous block here. Left alone, the overture's bottom padding and the section's top padding stack into ~130px of emptiness that reads as the end of the page. */ .overture--legal { padding-bottom: 1.25rem; } .overture--legal .overture__lede { margin-bottom: 0; } .legalbody { padding-block: 0 clamp(4rem, 8vw, 6rem); } /* The reading column is wider here than elsewhere on the site. A legal page is consulted, not read linearly: the table of contents and the tables need room, and the running prose fills it too. Line height is raised to 1.75 to compensate: on long lines the eye needs more vertical separation to find the start of the next one. */ @media (min-width: 1180px) { .legalbody .col, .overture--legal .col { max-width: 900px; } } /* ---------- Rhythm ---------- */ .legalbody h1 { font-family: var(--display); font-weight: 400; font-size: clamp(1.9rem, 4vw, 2.6rem); line-height: 1.08; letter-spacing: -.015em; margin: 4rem 0 1.25rem; padding-top: 2.5rem; border-top: 1px solid var(--hair-firm); } .legalbody h1:first-child { margin-top: 0; padding-top: 0; border-top: 0; } .legalbody h2 { font-family: var(--display); font-weight: 400; font-size: clamp(1.35rem, 2.6vw, 1.7rem); line-height: 1.2; margin: 2.75rem 0 .9rem; } .legalbody h3 { font-size: 1.02rem; font-weight: 600; letter-spacing: -.005em; margin: 2rem 0 .6rem; } .legalbody h4 { font-family: var(--mono); font-size: .68rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--bone-3); margin: 1.75rem 0 .6rem; } /* Justified, but only because hyphenation is on. Without it the browser can only stretch word spaces, and on a 115-character measure that opens white rivers down the paragraph. hyphens:auto relies on , which is correctly set on all three locales. Headings and lists of links stay ragged-right: justifying short lines is what produces the worst gaps. */ .legalbody p, .legalbody li { font-size: .95rem; line-height: 1.75; color: var(--bone-2); max-width: none; text-align: justify; -webkit-hyphens: auto; hyphens: auto; hyphenate-limit-chars: 6 3 3; /* never split a word shorter than 6 letters */ } /* A justified last line of a paragraph must not be stretched. */ .legalbody p { text-align-last: left; } .legalbody p { margin: 0 0 1rem; } .legalbody strong { color: var(--bone); font-weight: 600; } .legalbody ul, .legalbody ol { margin: 0 0 1.25rem; padding-left: 1.1rem; } .legalbody li { margin-bottom: .5rem; } .legalbody li::marker { color: var(--pen); } .legalbody a { color: var(--pen); text-decoration: underline; text-underline-offset: 2px; } .legalbody a:hover { color: var(--chalk-ink); } .legalbody table { width: 100%; border-collapse: collapse; margin: 0 0 1.5rem; font-size: .92rem; } .legalbody th, .legalbody td { padding: .8rem 1rem; text-align: left; border-bottom: 1px solid var(--hair); vertical-align: top; } .legalbody th { font-family: var(--mono); font-size: .66rem; font-weight: 500; letter-spacing: .13em; text-transform: uppercase; color: var(--bone-3); } /* ---------- Table of contents ---------- */ .table-of-contents { background: var(--panel); border: 1px solid var(--hair-firm); padding: 1.75rem 1.75rem 1.25rem; margin: 0 0 3rem; } .table-of-contents h2 { margin-top: 0; } .toc { display: grid; gap: 2rem; } @media (min-width: 760px) { .toc { grid-template-columns: 1fr 1fr; } } .toc-column h3 { font-family: var(--mono); font-size: .66rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--bone-3); margin: 0 0 .75rem; } .toc-column ul { list-style: none; margin: 0; padding: 0; } .toc-column li { margin: 0; border-bottom: 1px solid var(--hair); } .toc-column li:last-child { border-bottom: 0; } .toc-column a { display: block; padding: .55rem 0; font-size: .9rem; color: var(--bone-2); text-decoration: none; } .toc-column a:hover { color: var(--pen); } /* Anchored headings must clear the sticky masthead when jumped to. */ .legalbody [id] { scroll-margin-top: 90px; } /* ---------- Print ---------- */ .print-section { margin: 2rem 0 0; } .print-btn { display: inline-flex; align-items: center; gap: .6rem; font-family: var(--mono); font-size: .72rem; letter-spacing: .13em; text-transform: uppercase; background: transparent; color: var(--bone); border: 1px solid var(--hair-firm); padding: .8rem 1.3rem; border-radius: 0; cursor: pointer; } .print-btn:hover { border-color: var(--pen); color: var(--pen); } .last-updated { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--hair-firm); } .last-updated p { font-family: var(--mono); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--bone-3); margin-bottom: .4rem; max-width: none; } @media print { .masthead, .colophon, .print-section, .gutter, .cookie-consent-banner { display: none !important; } .legalbody { padding: 0; } .legalbody p, .legalbody li { color: #000; max-width: none; } .legalbody a { color: #000; text-decoration: none; } .legalbody a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .8em; } }