/* legal.css — shared prose layout for the three legal/policy pages (privacy.html, terms.html, policies.html). Their body content is the same design: a centred hero, numbered content blocks, diamond-bullet lists, an occasional callout / group label and a contact card. One file, since all three share it (privacy and terms are byte-identical; policies adds .group-label and omits the callout — both inert where unused, so the union is safe for all). Chrome (nav, footer, mobile menu, to-top, body treatment) is in site.css. Depends on tokens.css + base.css + site.css. Cascade per page: tokens.css -> base.css -> site.css -> animations.css -> legal.css. */ /* Narrower reading measure than the shared 1120px container; 28px inset is intentionally off the spacing scale — kept literal so it never shifts. */ .container{max-width:820px} /* The longest columns on the site: up to 49 clauses indexed in DOM order, so the tail carries the largest accumulated delay anywhere. Half the shared step again - a reader scrolling through a policy is reading, not watching a cascade. Reduced motion still drops every delay to 0 (animations.css). */ :root{--stagger:25ms} /* ---------- hero ---------- */ /* .eyebrow (the gold label with side rules) is shared across content pages and lives in site.css; the rest of the hero below is legal-family specific. */ header{padding:150px 0 50px;text-align:center} h1{font-family:var(--serif);font-weight:300;font-size:clamp(2.2rem,5.5vw,3.4rem);line-height:1.04;letter-spacing:-.015em;margin-bottom:18px} h1 .em{font-style:italic;color:var(--gold-soft)} header p{color:var(--ink-soft);max-width:54ch;margin:0 auto;font-size:1rem} /* The edition a visitor is reading is part of the document, not a caption: legal text changes, and "which version did I agree to" is a real question. --ink-dim sits at 4.18:1 and this is small text, so it moves to --ink-soft (8.38:1). */ .updated{display:inline-block;margin-top:22px;padding:8px 14px;border:1px solid var(--line);border-radius:40px; font-size:.82rem;letter-spacing:.06em;color:var(--ink-soft)} .updated b{color:var(--gold);font-weight:400} /* ---------- content blocks ---------- */ section{padding:0 0 60px} .block{margin-bottom:38px} .block h2{font-family:var(--serif);font-weight:300;font-size:1.5rem;margin-bottom:14px; border-bottom:1px solid var(--line);padding-bottom:12px} .block h2 .num{font-family:var(--serif);font-style:italic;color:var(--gold);font-size:1rem} .block p{color:var(--ink-soft);font-size:.96rem;margin-bottom:14px;max-width:66ch} .block p:last-child{margin-bottom:0} /* Underlined, not colour-only: these pages are almost entirely prose, so every link in them is a link inside a text block (WCAG 1.4.1). site.css owns the underline's look; this rule only says which links are prose links. */ .block a{color:var(--gold-soft);text-decoration:underline;text-decoration-thickness:1px; text-underline-offset:.18em;text-decoration-color:rgba(217,189,126,.55)} @media(hover:hover) and (pointer:fine){ .block a:hover{color:var(--gold);text-decoration-color:currentColor}} /* ---------- deep links ---------- */ /* Every clause has a permanent id (in the markup, so a link works without JS). The fixed bar would otherwise land on top of the heading a link points at. */ .block[id],.group-label[id]{scroll-margin-top:110px} /* The control that hands you the link. On a pointer it appears with the heading it belongs to; touch has no hover to reveal it, so there it is simply always there, small. */ .clause-link{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center; width:26px;height:26px;margin-left:10px;border-radius:6px;color:var(--ink-dim); transition:color var(--dur) var(--ease-standard),background-color var(--dur) var(--ease-standard)} .clause-link svg{width:15px;height:15px;display:block} .clause-link.copied{color:var(--gold)} .clause-link:focus-visible{outline:2px solid var(--gold);outline-offset:2px} @media(hover:hover) and (pointer:fine){ .clause-link{opacity:0;transition:opacity var(--dur) var(--ease-standard),color var(--dur) var(--ease-standard)} .block:hover .clause-link,.clause-link:focus-visible,.clause-link.copied{opacity:1} .clause-link:hover{color:var(--gold);background:rgba(201,165,88,.1)} } /* ---------- table of contents ---------- */ /* One element, two lives: a fold at the top of the page on a phone, a fixed rail in the left margin once the window is wide enough to have one. legal.js opens it for the rail and hides the summary there. */ .toc{margin:0 0 44px} .toc-box>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:12px; padding:14px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line); font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)} .toc-box>summary::-webkit-details-marker{display:none} .toc-box>summary::after{content:'';margin-left:auto;width:7px;height:7px; border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor; transform:translateY(-2px) rotate(45deg);transition:transform .42s var(--ease-settle)} .toc-box[open]>summary::after{transform:translateY(1px) rotate(-135deg)} .toc-box>summary:focus-visible{outline:2px solid var(--gold);outline-offset:2px} .toc ol{list-style:none;margin:0;padding:14px 0 0;counter-reset:toc} .toc li{counter-increment:toc} .toc a{display:block;padding:7px 0 7px 26px;position:relative;font-size:.88rem;line-height:1.4; color:var(--ink-soft);text-decoration:none;transition:color var(--dur) var(--ease-standard)} .toc a::before{content:counter(toc,decimal-leading-zero);position:absolute;left:0;top:7px; font-family:var(--serif);font-style:italic;font-size:.78rem;color:var(--ink-dim)} .toc a.on{color:var(--gold)} .toc a.on::before{color:var(--gold)} @media(hover:hover) and (pointer:fine){.toc a:hover{color:var(--gold-soft)}} .toc a:active{color:var(--gold-soft)} /* The rail. The content column is 820px wide and centred, so the rail is placed against its left edge: half the column, plus the gap, plus its own width. */ @media(min-width:1280px){ /* The rail is FIXED, so it knows nothing about where the page ends: scrolled to the bottom it used to hang over the footer and the last entries were cut by its edge. Its ceiling is therefore the SMALLER of the viewport allowance and the room the footer actually leaves. Every number stays here - the offset from the top, the viewport allowance and the gap kept clear of the footer; legal.js measures only where the footer currently is and publishes that one length. Until it does, the initial 100vh makes the second term lose, so the rail behaves as it did before the script runs. max(0px,...) because the term goes negative once the footer has scrolled past the rail's own top. The thin bar, its reveal and the faded edges are NOT here: the rail is an ordinary internal scroll surface and takes all of that from the shared owner (the [data-scroll] rules in base.css, wired by shared-ui.js), which is also what follows the active entry. This block is only what is peculiar to a fixed rail. */ .toc{position:fixed;top:var(--toc-top);left:calc(50% - 610px);width:180px;margin:0; --toc-top:118px;--toc-footer-gap:24px;--toc-footer-top:100vh; max-height:min(calc(100vh - 190px), max(0px,calc(var(--toc-footer-top) - var(--toc-top) - var(--toc-footer-gap)))); overflow-y:auto;overscroll-behavior:contain} .toc-box>summary{display:none} .toc ol{padding-top:0} } /* diamond-bullet list */ ul.plain{list-style:none;display:grid;gap:10px;margin:6px 0 16px} ul.plain li{position:relative;padding-left:22px;font-size:.94rem;color:var(--ink-soft);line-height:1.5;max-width:64ch} ul.plain li::before{content:"";position:absolute;left:0;top:9px;width:7px;height:7px;border:1px solid var(--gold);transform:rotate(45deg)} ul.plain li b{color:var(--ink);font-weight:500} /* group divider label (policies) */ .group-label{font-size:.72rem;letter-spacing:.28em;text-transform:uppercase;color:var(--gold); margin:52px 0 28px;padding-bottom:10px;border-bottom:1px solid var(--line)} /* callout (privacy) */ .callout{background:var(--bg-2);border:1px solid var(--line-soft);border-radius:4px;padding:24px 26px;margin:6px 0 0} @media(max-width:520px){.callout{padding:20px 18px}} .callout p{color:var(--ink-soft);font-size:.92rem;margin-bottom:0} /* contact card — var(--panel) is the marketing panel tone (#1a1815), set in site.css. */ .contact-box{background:var(--panel);border:1px solid var(--line-soft);border-radius:4px;padding:26px 28px;margin-top:6px} .contact-box .l{font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:6px} .contact-box a{color:var(--ink);text-decoration:none;font-size:1rem} @media(hover:hover) and (pointer:fine){.contact-box a:hover{color:var(--gold)}} .contact-box .line{margin-bottom:12px} .contact-box .line:last-child{margin-bottom:0} /* ---------- accessibility marks in a document hero ---------- */ /* The badges themselves are the chrome's component (chrome.css owns the skin, one owner for the footer, the home page and this hero). All this adds is where they sit in a centred hero. */ .doc-trust{display:flex;justify-content:center;margin-top:24px} /* ---------- the Legal Center index ---------- */ /* The hub is a list of documents, so it is a