/* Berolink — Privacy Policy (/privacy) CDO-06 .pp-* design system. Tokens + rules SCOPED to the privacy content (.pp-hero/.pp-body) so the live nav/footer/body are untouched. Loads after home -> nav -> approach. New face: Space Grotesk (eyebrow/index). */ @font-face{font-family:"Space Grotesk";src:url(../fonts/space-grotesk-500.woff2) format("woff2");font-weight:500;font-display:swap} .pp-hero,.pp-body{ --gardenia:#F1E9E0; --cream-hi:#FAFAF8; --umber:#221A15; --umber-2:#2B221B; --peri-deep:#4E5FA2; --peri:#7A85B8; --taupe:rgba(34,26,21,.76); --ink-faint:rgba(34,26,21,.5); --line:rgba(34,26,21,.12); --line-2:rgba(34,26,21,.18); --line-um:rgba(241,233,224,.14); --cobble:#A89A8E; --title:Quicksand,system-ui,sans-serif; --body:Manrope,system-ui,sans-serif; --label:"Space Grotesk",ui-monospace,monospace; --nav-h:64px; --wrap:1080px; /* content type baseline (scoped; does not touch live ) */ font-family:var(--body); color:var(--umber); font-size:17px; line-height:1.7; } .pp-hero a,.pp-body a{color:inherit} .pp-hero{background:var(--gardenia); padding:clamp(56px,9vw,104px) clamp(20px,5vw,48px) clamp(40px,6vw,72px); border-bottom:1px solid var(--line);} .pp-hero-in{max-width:var(--wrap); margin:0 auto} .pp-kick{font-family:var(--label); font-weight:500; font-size:12px; letter-spacing:.26em; text-transform:uppercase; color:var(--peri-deep); margin:0 0 22px;} .pp-hero h1{font-family:var(--title); font-weight:500; font-size:clamp(34px,5.4vw,50px); line-height:1.08; letter-spacing:-.01em; margin:0 0 24px; max-width:18ch;} .pp-lead{font-family:var(--body); font-weight:400; color:var(--taupe); font-size:clamp(17px,1.6vw,19px); line-height:1.62; margin:0; max-width:64ch;} .pp-dates{margin:34px 0 0; padding-top:20px; border-top:1px solid var(--line); font-family:var(--label); font-weight:500; font-size:12.5px; letter-spacing:.1em; color:var(--ink-faint);} .pp-dates .ph{color:var(--peri-deep)} .pp-body{background:var(--cream-hi)} .pp-grid{max-width:var(--wrap); margin:0 auto; padding:clamp(44px,6vw,80px) clamp(20px,5vw,48px) clamp(64px,8vw,108px); display:grid; grid-template-columns:212px minmax(0,1fr); gap:clamp(40px,6vw,88px); align-items:start;} .pp-toc{position:sticky; top:calc(var(--nav-h) + 28px)} .pp-toc-h{font-family:var(--label); font-weight:500; font-size:11.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-faint); margin:0 0 16px; padding-bottom:14px; border-bottom:1px solid var(--line);} .pp-toc ol{list-style:none; margin:0; padding:0; counter-reset:toc} .pp-toc li{counter-increment:toc} .pp-toc a{display:grid; grid-template-columns:24px 1fr; gap:9px; align-items:baseline; padding:7px 0; text-decoration:none; color:var(--taupe); font-family:var(--body); font-size:14px; line-height:1.3; transition:color .18s;} .pp-toc a::before{content:counter(toc,decimal-leading-zero); font-family:var(--label); font-weight:500; font-size:11px; letter-spacing:.04em; color:var(--cobble); transition:color .18s;} .pp-toc a:hover{color:var(--umber)} .pp-toc a:hover::before{color:var(--peri-deep)} .pp-toc a.is-current{color:var(--umber)} .pp-toc a.is-current::before{color:var(--peri-deep)} .pp-toc-m{display:none} .pp-doc{min-width:0; max-width:68ch} .pp-art{padding:36px 0; border-top:1px solid var(--line)} .pp-art:first-child{padding-top:4px; border-top:0} .pp-art-head{display:grid; grid-template-columns:auto 1fr; gap:16px; align-items:baseline; margin:0 0 18px;} .pp-idx{font-family:var(--label); font-weight:500; font-size:13px; letter-spacing:.04em; color:var(--peri-deep);} .pp-art h2{font-family:var(--title); font-weight:500; font-size:clamp(21px,2.4vw,25px); line-height:1.2; letter-spacing:-.005em; margin:0;} .pp-art p{margin:0 0 16px} .pp-art p:last-child{margin-bottom:0} .pp-sub{font-weight:600; color:var(--umber)} .pp-art .em{color:var(--peri-deep); font-weight:600} .pp-note{color:var(--taupe); font-size:16px} .pp-list{margin:6px 0 18px; padding:0; list-style:none} .pp-list li{position:relative; padding:0 0 0 22px; margin:0 0 11px; color:var(--umber);} .pp-list li::before{content:""; position:absolute; left:2px; top:.72em; width:6px; height:1px; background:var(--cobble);} .pp-list li:last-child{margin-bottom:0} a.pp-ph{color:var(--peri-deep); text-decoration:none; border-bottom:1px solid rgba(78,95,162,.32)} .pp-contact{margin-top:8px; border:1px solid var(--line-2); border-radius:3px; background:transparent; position:relative; overflow:hidden;} .pp-contact::before{content:""; position:absolute; inset:0 0 auto 0; height:3px; background:var(--peri-deep)} .pp-contact-in{padding:clamp(24px,3.4vw,38px)} .pp-contact-lead{margin:0 0 24px; color:var(--taupe); font-size:16px} .pp-kv{display:grid; gap:18px} .pp-kv .row{display:grid; grid-template-columns:128px 1fr; gap:18px; align-items:baseline} .pp-kv dt{font-family:var(--label); font-weight:500; font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-faint); margin:0;} .pp-kv dd{margin:0; font-family:var(--body); font-weight:500; color:var(--umber); font-size:16px} .pp-kv dd a{color:var(--peri-deep); text-decoration:none; border-bottom:1px solid rgba(78,95,162,.34); transition:border-color .18s} .pp-kv dd a:hover{border-bottom-color:var(--peri-deep)} @media (max-width:880px){ .pp-grid{grid-template-columns:1fr; gap:0} .pp-toc{display:none} .pp-toc-m{display:block; margin-bottom:8px} .pp-toc-m summary{list-style:none; cursor:pointer; padding:15px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); font-family:var(--label); font-weight:500; font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-faint); display:flex; align-items:center; justify-content:space-between;} .pp-toc-m summary::-webkit-details-marker{display:none} .pp-toc-m summary::after{content:"+"; font-family:var(--body); font-size:18px; color:var(--cobble)} .pp-toc-m[open] summary::after{content:"\2212"} .pp-toc-m ol{list-style:none; margin:0; padding:16px 0 8px; counter-reset:tocm; columns:2; column-gap:28px} .pp-toc-m li{counter-increment:tocm; break-inside:avoid; margin:0 0 12px} .pp-toc-m a{text-decoration:none; color:var(--taupe); font-size:14px; display:flex; gap:8px;} .pp-toc-m a::before{content:counter(tocm,decimal-leading-zero); font-family:var(--label); font-size:11px; color:var(--cobble);} .pp-doc{max-width:none} } @media (max-width:620px){ .pp-toc-m ol{columns:1} .pp-art-head{grid-template-columns:1fr; gap:6px} .pp-kv .row{grid-template-columns:1fr; gap:4px} } .pp-art{scroll-margin-top:calc(var(--nav-h) + 20px)}