/* Shared by privacy.html and consumer-health-data.html.
 *
 * A stylesheet rather than inline <style>, because these two pages are the
 * same page twice and the tokens below must not drift between them. index.html
 * deliberately keeps everything inline and is left alone — see AGENTS.md — so
 * the token block exists in two files rather than three.
 *
 * Everything here follows the theming contract index.html already sets: a plain
 * dark value in :root, the same token as light-dark(light,dark) inside the
 * @supports guard, and color-scheme doing the actual switching. A browser with
 * no light-dark() gets a complete dark page rather than an unstyled one.
 */

:root{
	--amber:#E8A33D;

	--bg:#2A2320;
	--ink:#FDF8F1;
	--text:rgba(253,248,241,.62);
	--text-2:rgba(253,248,241,.55);
	--text-3:rgba(253,248,241,.5);
	--text-5:rgba(253,248,241,.4);

	--surface:rgba(253,248,241,.05);
	--surface-line:rgba(253,248,241,.07);
	--rule:rgba(253,248,241,.08);

	--nav:rgba(253,248,241,.1);
	--nav-line:rgba(253,248,241,.14);

	--wash-a:rgba(232,163,61,.19);
	--wash-b:rgba(138,90,52,.48);
	--wash-c:rgba(232,163,61,.10);

	--link:#E8A33D;
	--link-hover:#F2B75B;
}

@supports (color: light-dark(#000, #fff)){
	:root{
		color-scheme:light dark;

		--bg:light-dark(#EFE7DA,#2A2320);
		--ink:light-dark(#2A2320,#FDF8F1);
		--text:light-dark(rgba(42,35,32,.66),rgba(253,248,241,.62));
		--text-2:light-dark(rgba(42,35,32,.6),rgba(253,248,241,.55));
		--text-3:light-dark(rgba(42,35,32,.58),rgba(253,248,241,.5));
		--text-5:light-dark(rgba(42,35,32,.5),rgba(253,248,241,.4));

		--surface:light-dark(#FDF8F1,rgba(253,248,241,.05));
		--surface-line:light-dark(rgba(42,35,32,.09),rgba(253,248,241,.07));
		--rule:light-dark(rgba(42,35,32,.12),rgba(253,248,241,.08));

		--nav:light-dark(#FDF8F1,rgba(253,248,241,.1));
		--nav-line:light-dark(rgba(42,35,32,.14),rgba(253,248,241,.14));

		--wash-a:light-dark(rgba(232,163,61,.34),rgba(232,163,61,.19));
		--wash-b:light-dark(rgba(138,90,52,.17),rgba(138,90,52,.48));
		--wash-c:light-dark(rgba(232,163,61,.20),rgba(232,163,61,.10));

		--link:light-dark(#8A5A34,#E8A33D);
		--link-hover:light-dark(#6E4728,#F2B75B);
	}
	:root[data-theme="light"]{color-scheme:light}
	:root[data-theme="dark"]{color-scheme:dark}
}

*,*::before,*::after{box-sizing:border-box}
html{background:var(--bg)}
body{
	margin:0;
	background:transparent;
	font-family:'Nunito Sans',system-ui,sans-serif;
	-webkit-font-smoothing:antialiased;
}
/* The wash needs body transparent and the page background on html: a negative
   z-index layer parented to body paints behind body's own background. */
body::before{
	content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;
	background:
		radial-gradient(1000px 660px at 86% -8%,var(--wash-a),transparent 70%),
		radial-gradient(880px 640px at -4% 34%,var(--wash-b),transparent 66%),
		radial-gradient(900px 620px at 70% 104%,var(--wash-c),transparent 68%);
}
a{color:var(--link);text-decoration:none}
a:hover{color:var(--link-hover)}

.page{min-height:100vh;padding:0 24px}
/* Narrower than index.html's 1080px: this is prose, and a measure that wide is
   unreadable. The masthead and the footer sit on the same column so the page
   reads as one block rather than a wide frame around a narrow document. */
.wrap{max-width:720px;margin:0 auto}

/* ---------- header ---------- */
.masthead{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:26px 0 0}
.brand{display:flex;align-items:center;gap:11px}
.brand__mark{
	width:38px;height:38px;flex:0 0 38px;border-radius:13px;background:var(--amber);
	display:flex;align-items:center;justify-content:center;
}
.brand__name{
	font:800 18px/18px 'Bricolage Grotesque',system-ui,sans-serif;
	letter-spacing:-.2px;color:var(--ink);
}
a.brand:hover .brand__name{color:var(--ink)}
/* Hidden by default so the button is absent where the theming it drives is
   unsupported. This has to sit after the rule it overrides — both selectors are
   one class, so source order decides. */
.themer{
	display:none;place-items:center;width:34px;height:34px;padding:0;
	border-radius:11px;background:var(--nav);border:1px solid var(--nav-line);
	cursor:pointer;
}
@supports (color: light-dark(#000, #fff)){
	.themer{display:grid}
}
.themer svg{grid-area:1/1}
.themer .i-sun{color:light-dark(transparent,#FDF8F1)}
.themer .i-moon{color:light-dark(#2A2320,transparent)}

/* ---------- document ---------- */
.doc{padding:52px 0 0}
.doc__kicker{
	font:800 11px 'Bricolage Grotesque',system-ui,sans-serif;
	letter-spacing:1.8px;text-transform:uppercase;color:var(--text-5);
}
.doc__title{
	margin:12px 0 0;
	font:800 clamp(28px,6vw,38px)/1.1 'Bricolage Grotesque',system-ui,sans-serif;
	letter-spacing:-.4px;color:var(--ink);text-wrap:balance;
}
.doc__date{margin:14px 0 0;font:700 12.5px 'Nunito Sans',sans-serif;color:var(--text-5)}

/* The opening statement, raised off the page like the site's own cards. */
.doc__lead{
	margin:26px 0 0;padding:22px 24px;border-radius:18px;
	background:var(--surface);border:1px solid var(--surface-line);
}
.doc__lead p{margin:0;font:400 16px/26px 'Nunito Sans',sans-serif;color:var(--text)}
.doc__lead p + p{margin-top:12px}
.doc__lead strong{color:var(--ink);font-weight:800}

.doc h2{
	margin:44px 0 0;
	font:800 20px/26px 'Bricolage Grotesque',system-ui,sans-serif;
	letter-spacing:-.2px;color:var(--ink);
}
.doc h3{
	margin:28px 0 0;
	font:800 14.5px/22px 'Nunito Sans',sans-serif;color:var(--ink);
}
.doc p{margin:14px 0 0;font:400 15px/25px 'Nunito Sans',sans-serif;color:var(--text);text-wrap:pretty}
.doc ul{margin:14px 0 0;padding:0 0 0 21px}
.doc li{
	margin:9px 0 0;font:400 15px/25px 'Nunito Sans',sans-serif;color:var(--text);
	text-wrap:pretty;
}
.doc li::marker{color:var(--text-5)}
.doc strong{color:var(--ink);font-weight:700}
.doc em{font-style:italic}

/* ---------- footer ---------- */
.colophon{
	margin-top:70px;padding:26px 0 40px;border-top:1px solid var(--rule);
	display:flex;flex-wrap:wrap;gap:10px 22px;align-items:center;
	font:600 12.5px 'Nunito Sans',sans-serif;
}
.colophon__rights{color:var(--text)}
.colophon__disclaimer{color:var(--text-2);flex:1 1 100%}
.colophon a{color:var(--text);text-decoration:underline;text-underline-offset:3px}
.colophon a:hover{color:var(--link-hover)}