/* ============================================================
   PRIVACY 02 · the privacy policy (Julian, 12 Sep 2026, §9). See the
   html's header: Julian's standalone design of the same day, in the
   site's system. Cream ground, ink type, the dark nav; coral for the
   short version, beige for the rules, paper for the contact panel —
   his palette. Quiet text is the type at 70%, not his #9B988E (4.5:1
   on cream, §8). Tokens only. Nothing moves on scroll (§4.7).
   ============================================================ */

#privacy{--chapter-bg:var(--cream);color:var(--ink);
  --quiet:color-mix(in srgb, currentColor 70%, transparent);
  /* the site's y150 line at 1440, clearing the opaque band (§12 #13) */
  padding:clamp(96px,10.42vw,150px) var(--m) clamp(64px,8svh,120px)}
/* his grid: a 190 label gutter, a 20 gutter, a 715 text column — 925
   in all, on the left margin like every page */
#privacy .shell{max-width:925px;
  --label-col:clamp(88px,13.2vw,190px);--gutter:20px}

/* the label: Space Mono, the site's eyebrow (mono 16, .08em, §3) */
#privacy .label{margin:0;font-family:var(--mono);font-size:16px;line-height:1.4;
  letter-spacing:.08em;text-transform:uppercase;font-weight:400}

/* ---- masthead: the eyebrow, the one display line, the colophon ---- */
#privacy .masthead{margin-bottom:clamp(48px,6.1vw,88px)}
#privacy .eyebrow{color:var(--quiet);margin-bottom:8px}
#privacy h1{margin:0 0 clamp(20px,2.2vw,32px);font-family:var(--display);font-weight:900;
  font-size:clamp(44px,5.83vw,84px);line-height:.95;letter-spacing:-.015em}   /* his display/rl; the brand book's Aqva tracking */
#privacy .colophon{margin:0;font-family:var(--deck-text);font-weight:400;font-size:16px;line-height:1.375;color:var(--quiet)}   /* 16px is Forma's Text optical size (19 Sep 2026) */
#privacy .colophon strong{color:var(--ink);font-weight:500}

/* ---- the short version: the asides' coral rule on the left, ink on
   paper (Julian, 25 Sep 2026 — was a cream-on-coral block, 2.74:1,
   under WCAG's 4.5 for its 16px label and body) ---- */
#privacy .summary{background:var(--paper);color:var(--ink);border-left:3px solid var(--coral);
  padding:clamp(28px,3.3vw,48px);margin-bottom:clamp(48px,6.1vw,88px)}
#privacy .summary .label{margin-bottom:24px}
#privacy .summary .text{margin:0;font-family:var(--deck);font-weight:400;
  font-size:clamp(20px,1.67vw,24px);line-height:1.25;max-width:30em}   /* body/l, no tracking (brand book) */

/* ---- contents: two mono columns with leading-zero counters ---- */
#privacy .toc{padding-bottom:clamp(32px,3.9vw,56px);margin-bottom:clamp(48px,6.1vw,88px);
  border-bottom:1px solid var(--beige)}
#privacy .toc .label{color:var(--quiet);margin-bottom:24px}
#privacy .toc ol{list-style:none;margin:0;padding:0;columns:2;column-gap:var(--gutter)}
#privacy .toc li{break-inside:avoid;margin-bottom:10px}
#privacy .toc a{display:flex;gap:.75em;font-family:var(--mono);font-size:16px;line-height:1.4;
  letter-spacing:.08em;text-transform:uppercase;text-decoration:none;min-height:24px}
#privacy .toc a .n{color:var(--quiet);flex:none}
@media(hover:hover){#privacy .toc a:hover{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}}   /* an underline cut, not coral: coral on cream is 2.74:1 (a11y pass, 25 Sep 2026) */

/* ---- the parts: the counter in the gutter, the body on the measure ---- */
#privacy .part{display:grid;grid-template-columns:var(--label-col) minmax(0,715px);column-gap:var(--gutter);
  margin-bottom:clamp(48px,5.6vw,80px);scroll-margin-top:96px}
#privacy .part:last-child{margin-bottom:0}
/* a contents link lands the part (or the contents) just under the fixed
   nav, not behind it: the nav's own height formula (base.css) + 24px
   (Julian, 25 Sep 2026) */
#privacy .part,#privacy .toc{scroll-margin-top:calc(2*clamp(24px,3.056vw,60px) + clamp(31.7px,2.928vw,39.1px) + 24px)}
#privacy .toc:focus{outline:none}

/* BACK TO CONTENTS: a chip fixed at the lower right, the banner's chip in
   ink on the cream ground. Shown (a cut) once the contents list has left
   the screen; --lift keeps it above the footer bar at the end */
#privacy .to-contents{position:fixed;right:var(--m);z-index:90;
  bottom:calc(20px + env(safe-area-inset-bottom, 0px) + var(--lift, 0px));
  display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 18px;border-radius:999px;
  background:var(--ink);color:var(--cream);text-decoration:none;
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase}
#privacy .to-contents[hidden]{display:none}
#privacy .to-contents svg{width:11px;height:13px;fill:none;stroke:currentColor;stroke-width:1.6}
@media(forced-colors:active){#privacy .to-contents{border:1px solid ButtonText}}
#privacy .counter{color:var(--quiet);padding-top:10px}
#privacy .body{min-width:0;font-family:var(--deck-text);font-weight:400;font-size:18px;line-height:1.444}   /* body/m 18/26. 18px is Forma's Text optical size (19 Sep 2026) */
#privacy h2{margin:0 0 24px;font-family:var(--deck);font-weight:500;font-size:clamp(26px,2.22vw,32px);
  line-height:1.19;letter-spacing:-.02em}   /* header/m 32/38 */
#privacy h3{margin:48px 0 16px;font-family:var(--deck);font-weight:500;font-size:24px;
  line-height:1.25;letter-spacing:-.02em}   /* header/s 24/30 */
#privacy .body p{margin:0 0 20px}
#privacy .body > :last-child{margin-bottom:0}
#privacy .body ul{margin:0 0 20px;padding-left:1.15em}
#privacy .body li{margin-bottom:10px}
#privacy .body li::marker{color:var(--quiet)}
#privacy .body strong{font-weight:500}
#privacy .body a{color:inherit;text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1px;text-decoration-color:var(--coral)}
@media(hover:hover){#privacy .body a:hover{text-decoration-color:currentColor;text-decoration-thickness:2px}}   /* the rule goes ink and heavier; the text stays ink (was coral, 2.74:1 — 25 Sep 2026) */

/* tables: mono heads, a beige rule under every row */
#privacy .table-wrap{margin:0 0 24px;overflow-x:auto;-webkit-overflow-scrolling:touch}
#privacy table{width:100%;border-collapse:collapse}
#privacy th{font-family:var(--mono);font-size:16px;line-height:1.4;letter-spacing:.08em;
  text-transform:uppercase;font-weight:400;color:var(--quiet);text-align:left;vertical-align:bottom;
  padding:0 20px 12px 0;border-bottom:1px solid var(--beige)}
#privacy td{font-size:16px;line-height:1.375;vertical-align:top;padding:16px 20px 16px 0;
  border-bottom:1px solid var(--beige)}
#privacy td:first-child{width:42%;font-weight:500;padding-right:24px}
#privacy th:last-child,#privacy td:last-child{padding-right:0}

/* the aside: a coral rule on the left */
#privacy .note{border-left:3px solid var(--coral);padding:2px 0 2px 20px;margin:28px 0}

/* the contact panel: paper, a beige border, mono terms */
#privacy .panel{background:var(--paper);border:1px solid var(--beige);padding:clamp(24px,2.2vw,32px);margin-bottom:20px}
#privacy .panel dl{margin:0}
#privacy .panel dt{font-family:var(--mono);font-size:16px;line-height:1.4;letter-spacing:.08em;
  text-transform:uppercase;color:var(--quiet);margin-bottom:4px}
#privacy .panel dd{margin:0 0 24px}
#privacy .panel dd:last-child{margin-bottom:0}

/* YOUR COOKIE CHOICE ON THIS SITE: the state line and the two chips
   (the banner's, ink on cream here). The chosen one is filled, a cut. */
#privacy .choice{margin:28px 0}
#privacy .choice h3{margin-top:0}
#privacy .choice .state{margin-bottom:18px}
#privacy .choice .row{display:flex;gap:10px;flex-wrap:wrap}
#privacy .choice .consent-btn{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
#privacy .choice .consent-btn[aria-pressed="true"]{background:var(--ink);color:var(--cream)}
#privacy .choice .consent-btn[disabled]{opacity:.5;cursor:default}
#privacy .choice .consent-btn:focus-visible{outline:2px solid var(--ink);outline-offset:3px}   /* ink, not coral: 2.74:1 on cream failed 1.4.11 (the a11y pass, 25 Sep 2026) */
/* high-contrast mode (forced colours, 25 Sep 2026): the chip's outline
   is a shadow and the chosen one is marked by its fill — the mode drops
   both, so the buttons read as loose words and the choice is invisible.
   A system border for every chip; the chosen one takes the system's
   selection colours (Highlight), the mode's own way to say "selected" */
@media(forced-colors:active){
  #privacy .choice .consent-btn{border:1px solid ButtonText}
  #privacy .choice .consent-btn[aria-pressed="true"]{forced-color-adjust:none;
    background:Highlight;color:HighlightText;border-color:Highlight}
}

/* PHONES (§3 stacked flow, one breakpoint — his 1040, 700 and 600 fold
   into it): one column inside --m, the counter above its heading, the
   contents in one column. Body stays 18 (floor 17). */
@media(max-width:760px),(pointer:fine) and (max-height:560px){
  #privacy{padding:max(96px,11svh) var(--m) max(40px,5svh)}
  #privacy h1{font-size:clamp(40px,11vw,52px)}
  #privacy .summary{padding:32px 24px}
  #privacy .summary .text{font-size:20px;line-height:1.3}
  #privacy .toc ol{columns:1}
  #privacy .part{display:block;margin-bottom:56px}
  #privacy .counter{padding-top:0;margin-bottom:12px}
  #privacy h2{font-size:clamp(24px,7vw,28px)}
  #privacy h3{font-size:clamp(20px,5.8vw,22px);margin-top:36px}
  #privacy .choice .consent-btn{flex:1 1 0;text-align:center}
}

/* ZOOMED (WCAG 1.4.4 — the zoom pass, Julian, 25 Sep 2026): on a computer
   at a narrow or short window — where 200% browser zoom lands — this
   section is in its stacked, still layout, and its type is set at the
   size the board draws it, in rem, so zoom enlarges it (the phone sizes
   above are fitted to the screen and would cancel the zoom). !important
   beats the sizes the js writes inline; utils.js zoomFit() then eases
   back any line whose longest word would run past the edge. */
@media(pointer:fine) and (max-width:760px),(pointer:fine) and (max-height:560px){
  #privacy h1{font-size:5.25rem!important;line-height:.95!important}
  #privacy h2{font-size:2rem!important;line-height:1.15!important}
  #privacy h3{font-size:1.5rem!important;line-height:1.2!important}
  #privacy .summary .text,#privacy .summary .label{font-size:1.5rem!important;line-height:1.3!important}
  #privacy .summary .label{font-size:1rem!important}
  #privacy .choice .consent-btn{font-size:.8rem!important}
  #privacy .to-contents{font-size:.75rem!important}
  #privacy .part,#privacy .toc{scroll-margin-top:96px}   /* the zoomed nav holds at 72px */
}