/* One stylesheet for the whole legal surface. Inlined-adjacent by design: no font CDN, no script,
   no third-party origin — a privacy policy that phones a stranger to render is a bad joke, and the
   CSP in the Caddyfile forbids it anyway.

   It takes the product's palette (ADR 0102) and keeps its own TYPE. The landing page is set in the
   sans and shouts; a policy is a reference document and stays in the serif, one column, quiet. Same
   voice, different register — the alternative is a consent page styled like an advertisement. */

:root {
  color-scheme: light dark;

  --ink: #0a0a0a;
  --ink-soft: #5c5a57;
  --ink-faint: #6e6c69;
  --ground: #f7f4f3;
  --surface: #fefffe;
  --rule: #dedbd8;
  --accent: #46520a;
  --accent-soft: #f1f5dc;
  --warn-ground: #fdf0e9;
  --warn-rule: #f0c3ac;

  --measure: 34rem;
  --step--1: clamp(0.82rem, 0.8rem + 0.1vw, 0.88rem);
  --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.08rem);
  --step-1: clamp(1.2rem, 1.1rem + 0.5vw, 1.4rem);
  --step-2: clamp(1.5rem, 1.3rem + 1vw, 2rem);
  --step-3: clamp(2rem, 1.5rem + 2.4vw, 3.4rem);
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink: #f5f3f1;
    --ink-soft: #b4b0ab;
    --ink-faint: #8e8a85;
    --ground: #131211;
    --surface: #1c1b1a;
    --rule: #332f2c;
    --accent: #c7d94a;
    --accent-soft: #232a10;
    --warn-ground: #2a1c14;
    --warn-rule: #6d4632;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font:
    var(--step-0)/1.65 ui-serif,
    Charter,
    'Bitstream Charter',
    'Iowan Old Style',
    Georgia,
    serif;
}

/* The masthead is a band, not a hero: this is a reference document, and the first thing a reader
   wants is the date it was last true. */
header.masthead {
  border-bottom: 1px solid var(--rule);
  background: var(--surface);
}

.wrap {
  max-width: calc(var(--measure) + 14rem);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 5vw, 3.5rem);
}

.masthead .wrap {
  padding-block: clamp(1.5rem, 4vw, 2.75rem);
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  align-items: baseline;
  justify-content: space-between;
}

.wordmark {
  font:
    600 var(--step-1)/1 ui-sans-serif,
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    system-ui,
    sans-serif;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}

.wordmark .mark {
  display: inline-block;
  width: 0.66em;
  height: 0.66em;
  border-radius: 0.18em;
  background: linear-gradient(to top, var(--accent) 45%, var(--warn-rule));
}

nav.masthead-nav {
  font:
    var(--step--1)/1 ui-sans-serif,
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    system-ui,
    sans-serif;
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
}

nav.masthead-nav a {
  color: var(--ink-soft);
  text-decoration: none;
}
nav.masthead-nav a:hover,
nav.masthead-nav a:focus-visible {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 0.25em;
}
nav.masthead-nav a[aria-current='page'] {
  color: var(--ink);
  font-weight: 600;
}

/* The language switch. A pill rather than a fourth link in the row, because it changes the whole
   document rather than moving inside it — and because the French pages are the reference version
   (loi Toubon) while the English ones are a translation, so the affordance has to be findable from
   either side without either looking like the default. */
nav.masthead-nav .lang {
  color: var(--ink);
  border: 1px solid var(--rule);
  background: var(--surface);
  border-radius: 999px;
  padding: 0.35rem 0.85rem;
  line-height: 1;
}
nav.masthead-nav .lang:hover,
nav.masthead-nav .lang:focus-visible {
  border-color: var(--accent);
  color: var(--accent);
  text-decoration: none;
}

main {
  padding-block: clamp(2.5rem, 7vw, 5rem) clamp(4rem, 10vw, 7rem);
}

h1 {
  font:
    600 var(--step-3)/1.05 ui-sans-serif,
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    system-ui,
    sans-serif;
  letter-spacing: -0.025em;
  margin: 0 0 0.6rem;
  max-width: 18ch;
}

.dateline {
  font:
    var(--step--1)/1.5 ui-sans-serif,
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    system-ui,
    sans-serif;
  color: var(--ink-faint);
  margin: 0 0 clamp(2rem, 5vw, 3rem);
  padding-bottom: 1.25rem;
  border-bottom: 2px solid var(--ink);
}

.dateline strong {
  color: var(--ink);
  font-weight: 600;
}

.lede {
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: var(--measure);
  margin: 0 0 clamp(2rem, 5vw, 3rem);
}

h2 {
  font:
    600 var(--step-2)/1.2 ui-sans-serif,
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    system-ui,
    sans-serif;
  letter-spacing: -0.015em;
  margin: clamp(2.5rem, 6vw, 4rem) 0 0.75rem;
  max-width: 24ch;
}

h2 + p,
h2 + ul,
h2 + div,
h2 + table {
  margin-top: 0;
}

h3 {
  font:
    600 var(--step-0)/1.35 ui-sans-serif,
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    system-ui,
    sans-serif;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 2rem 0 0.5rem;
}

p,
li {
  max-width: var(--measure);
}
p {
  margin: 0 0 1.1rem;
}

ul,
ol {
  padding-left: 1.2rem;
  margin: 0 0 1.1rem;
}
li {
  margin-bottom: 0.5rem;
}
li::marker {
  color: var(--ink-faint);
}

a {
  color: var(--accent);
  text-underline-offset: 0.2em;
}
a:hover,
a:focus-visible {
  text-decoration-thickness: 2px;
}

strong {
  font-weight: 600;
}

code {
  font:
    0.9em/1.4 ui-monospace,
    SFMono-Regular,
    'SF Mono',
    Menlo,
    monospace;
  background: var(--accent-soft);
  color: var(--ink);
  padding: 0.1em 0.35em;
  border-radius: 0.25em;
}

/* Tables carry the actual substance here — what is collected, why, and for how long. They get the
   space that usually goes to decoration. Horizontal scroll is contained, never on the body. */
.table-scroll {
  overflow-x: auto;
  /* Keyboard-reachable, because a region that scrolls must be scrollable without a mouse. */
  scrollbar-gutter: stable;
  margin: 0 0 1.5rem;
  border: 1px solid var(--rule);
  border-radius: 0.5rem;
  background: var(--surface);
}

table {
  border-collapse: collapse;
  width: 100%;
  min-width: 42rem;
}

/* The caption names the table for a screen reader and is redundant beside the heading that
   already introduces it, so it is removed from the visual flow rather than from the document. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

th,
td {
  text-align: left;
  vertical-align: top;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--rule);
  font-size: var(--step--1);
  line-height: 1.55;
  max-width: 22rem;
}

thead th {
  font:
    600 var(--step--1)/1.3 ui-sans-serif,
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    system-ui,
    sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
  border-bottom: 2px solid var(--ink);
  white-space: nowrap;
}

tbody tr:last-child td {
  border-bottom: 0;
}

/* A callout for the two things a reader must not miss: that this is not a medical device, and
   that special-category data has its own consent. */
.callout {
  border-left: 3px solid var(--warn-rule);
  background: var(--warn-ground);
  padding: 1.1rem 1.35rem;
  margin: 0 0 1.5rem;
  border-radius: 0 0.4rem 0.4rem 0;
}

.callout > :last-child {
  margin-bottom: 0;
}
.callout p {
  max-width: none;
}

.callout-title {
  font:
    600 var(--step--1)/1.3 ui-sans-serif,
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    system-ui,
    sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 0.5rem;
}

dl.contact {
  margin: 0 0 1.5rem;
}
dl.contact dt {
  font:
    600 var(--step--1)/1.4 ui-sans-serif,
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    system-ui,
    sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
  margin-top: 1rem;
}
dl.contact dd {
  margin: 0.15rem 0 0;
}

footer.colophon {
  border-top: 1px solid var(--rule);
  padding-block: 2rem 3rem;
  font:
    var(--step--1)/1.6 ui-sans-serif,
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    system-ui,
    sans-serif;
  color: var(--ink-faint);
}

footer.colophon a {
  color: var(--ink-soft);
}

.toc {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 0.5rem;
  padding: 1.25rem 1.5rem;
  margin: 0 0 clamp(2rem, 5vw, 3rem);
  max-width: var(--measure);
}

.toc h2 {
  font-size: var(--step--1);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
  margin: 0 0 0.65rem;
}

.toc ol {
  margin: 0;
  padding-left: 1.4rem;
}
.toc li {
  margin-bottom: 0.3rem;
  font-size: var(--step--1);
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}