/* ============================================================ HARK — shared styles for legal / content pages Mirrors the design tokens from HARK.html ============================================================ */ :root{ --forest:#0E1F17; --forest-2:#13261B; --forest-3:#0A1710; --ivory:#F7F3E9; --ivory-dim:rgba(247,243,233,0.66); --ivory-faint:rgba(247,243,233,0.40); --gold:#D2A857; --line:rgba(247,243,233,0.12); --radius:20px; --serif:'DM Serif Display', Georgia, serif; --sans:'Plus Jakarta Sans', system-ui, sans-serif; } *{box-sizing:border-box;} html{scroll-behavior:smooth;} body{ margin:0; background:var(--forest); color:var(--ivory); font-family:var(--sans); font-weight:400; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden; } img{display:block;max-width:100%;} a{color:inherit;} ::selection{background:var(--gold);color:var(--forest-3);} /* film grain — matches the home page */ .grain{position:fixed;inset:0;z-index:40;pointer-events:none;opacity:0.05;mix-blend-mode:overlay; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");} /* ---------- top nav ---------- */ .nav{ position:sticky;top:0;z-index:50; display:flex;align-items:center;justify-content:space-between; padding:18px clamp(20px,5vw,64px); background:rgba(10,23,16,0.78); backdrop-filter:blur(14px); border-bottom:1px solid var(--line); } .wordmark{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ivory);} .wordmark img{width:32px;height:auto;filter:drop-shadow(0 2px 10px rgba(210,168,87,.25));} .wordmark span{font-family:var(--serif);font-size:24px;letter-spacing:0.14em;padding-top:2px;} .nav-back{ text-decoration:none;color:var(--ivory-dim);font-size:14.5px;font-weight:500; display:inline-flex;align-items:center;gap:9px;transition:color .3s; } .nav-back:hover{color:var(--ivory);} .nav-back .arrow{font-size:17px;transform:translateY(1px);} /* ---------- header band ---------- */ .legal-head{ position:relative;overflow:hidden; padding:clamp(76px,12vh,150px) clamp(20px,5vw,64px) clamp(48px,7vh,80px); border-bottom:1px solid var(--line); } .legal-head::before{ content:"";position:absolute;inset:0;z-index:0; background: radial-gradient(ellipse 60% 80% at 78% -10%, rgba(210,168,87,0.13), transparent 60%), linear-gradient(180deg, var(--forest-2), var(--forest)); } .legal-head .inner{position:relative;z-index:1;max-width:820px;margin:0 auto;} .eyebrow{ font-family:var(--sans);font-size:12.5px;font-weight:600;letter-spacing:0.34em; text-transform:uppercase;color:var(--gold);margin:0 0 22px; } .legal-head h1{ font-family:var(--serif);font-weight:400;margin:0; font-size:clamp(40px,6.4vw,74px);line-height:1.02;letter-spacing:-0.015em; } .legal-head .updated{ margin-top:24px;color:var(--ivory-faint);font-size:14px;letter-spacing:0.02em; } .legal-head .lede{ margin:28px 0 0;max-width:600px;font-size:18px;line-height:1.7; color:var(--ivory-dim);font-weight:300; } /* ---------- body / reading column ---------- */ .legal-body{ max-width:820px;margin:0 auto; padding:clamp(52px,8vh,88px) clamp(20px,5vw,64px) clamp(64px,9vh,110px); } /* table of contents */ .toc{ border:1px solid var(--line);border-radius:var(--radius); background:rgba(247,243,233,0.03); padding:28px clamp(22px,3vw,34px);margin:0 0 clamp(48px,7vh,72px); } .toc h2{ font-family:var(--sans);font-size:12.5px;font-weight:600;letter-spacing:0.28em; text-transform:uppercase;color:var(--ivory-faint);margin:0 0 18px; } .toc ol{ margin:0;padding:0;list-style:none; display:grid;grid-template-columns:1fr 1fr;gap:11px 32px;counter-reset:toc; } .toc li{counter-increment:toc;} .toc a{ text-decoration:none;color:var(--ivory-dim);font-size:15.5px;line-height:1.4; display:flex;gap:12px;transition:color .25s; } .toc a::before{ content:counter(toc,decimal-leading-zero); font-family:var(--serif);color:var(--gold);font-size:14px;min-width:24px; } .toc a:hover{color:var(--ivory);} /* sections */ .legal-body section{padding-top:14px;margin-top:clamp(40px,5vh,56px);} .legal-body section:first-of-type{margin-top:0;} .legal-body h2{ font-family:var(--serif);font-weight:400;letter-spacing:-0.01em; font-size:clamp(26px,3.2vw,38px);line-height:1.12;margin:0 0 8px; display:flex;align-items:baseline;gap:16px; } .legal-body h2 .num{ font-size:0.52em;color:var(--gold);font-family:var(--serif); letter-spacing:0;transform:translateY(-0.15em); } .legal-body h3{ font-family:var(--sans);font-weight:600;font-size:16px;letter-spacing:0.01em; color:var(--ivory);margin:30px 0 8px; } .legal-body p{ margin:14px 0;font-size:17px;line-height:1.78;color:var(--ivory-dim);font-weight:300; text-wrap:pretty; } .legal-body ul{margin:14px 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:11px;} .legal-body ul li{ position:relative;padding-left:26px;font-size:17px;line-height:1.7; color:var(--ivory-dim);font-weight:300;text-wrap:pretty; } .legal-body ul li::before{ content:"";position:absolute;left:4px;top:12px;width:6px;height:6px;border-radius:50%; background:var(--gold);opacity:0.8; } /* Ordered lists in the body share the ul spacing/typography but show a zero-padded serif counter in gold instead of a bullet, so the numbered "commitments" / "DMCA steps" lists read consistently with the surrounding bullet lists. Scoped to `section ol` only so the TOC's
    (which lives in