/* Privacy notice page. Reuses scrollcraft.css + site.css (tokens, footer, grounds);
   this file only adds the plain reading layout. There is no folio rail on this page. */

:root { --rail-w: 0rem; }                 /* no rail here, so content starts at the normal gutter */
body.legal-page { padding-top: 0; }        /* site.css reserves space for the mobile rail bar */

/* ------------------------------------------------------------- header -- */
.legal-head { border-bottom: 1px solid var(--rule); background: #FFFFFF; }
.legal-head__in { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 1.1rem; }
.legal-head__brand { display: flex; align-items: center; gap: .7rem; text-decoration: none; color: var(--sc-ink); }
.legal-head__brand .mark-j { width: 1.5rem; height: auto; }
.legal-head__name { font: 600 1.35rem/1 var(--sc-font-display); letter-spacing: -.03em; }
.legal-head__sub { font: 500 var(--sc-t-xs)/1 var(--sc-font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--sc-ink-soft); }
.legal-head__back { font: 500 var(--sc-t-sm)/1 var(--sc-font-text); color: var(--sc-accent); text-underline-offset: .25em; }
@media (hover: hover) and (pointer: fine) { .legal-head__back:hover { color: var(--sc-ink); } }
@media (max-width: 560px) { .legal-head__sub { display: none; } }

/* ------------------------------------------------------------ content -- */
.legal { padding-block: clamp(3rem, 7vw, 6rem) clamp(3.5rem, 7vw, 6rem); }
.legal .wrap > * { max-width: 44rem; }
.legal__kicker { margin: 0 0 1rem; font: 500 var(--sc-t-xs)/1 var(--sc-font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--sc-accent); }
.legal__title { margin: 0; max-width: none; }
.legal__meta { margin: 1rem 0 0; font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }
.legal__intro { margin: 2rem 0 0; font-size: var(--sc-t-lg); line-height: 1.45; letter-spacing: -.01em; color: var(--sc-ink); text-wrap: pretty; }

.legal section { margin-top: clamp(2.25rem, 4.5vw, 3.25rem); padding-top: 1.5rem; border-top: 1px solid var(--rule); }
.legal h2 { margin: 0 0 1rem; font: 560 var(--sc-t-xl)/1.1 var(--sc-font-display); letter-spacing: -.03em; color: var(--sc-ink); text-wrap: balance; }
.legal h3 { margin: 1.75rem 0 .5rem; font: 600 var(--sc-t-base)/1.3 var(--sc-font-display); letter-spacing: -.01em; color: var(--sc-ink); }
.legal p, .legal li { color: var(--sc-ink-soft); text-wrap: pretty; }
.legal p { margin: 0 0 1rem; }
.legal strong { color: var(--sc-ink); font-weight: 600; }
.legal ul { margin: 0 0 1rem; padding-left: 1.25rem; }
.legal li { margin-bottom: .4rem; }
.legal a { color: var(--sc-accent); text-decoration-color: color-mix(in oklab, var(--sc-accent) 45%, transparent); }
@media (hover: hover) and (pointer: fine) { .legal a:hover { color: var(--sc-ink); text-decoration-color: currentColor; } }