/* ============================================================
   style-doc.css — About, Privacy, Terms.
   Tokens copied verbatim from style-k.css so the legal pages
   are the same system as the homepage, not a bolt-on.
   If a token changes there, change it here too.
   ============================================================ */

/* ============================================================
   Self-hosted fonts. 10 Sep 2026 — replaces the fonts.googleapis.com
   / fonts.gstatic.com <link>s removed from about.html, privacy.html
   and terms.html. Each file below is the exact woff2 Google was
   already serving for this page's request:

     fonts.googleapis.com/css2?family=Caveat:wght@600;700
       &family=Karla:wght@400;500;600
       &family=Newsreader:opsz,wght@6..72,300;6..72,400;6..72,500

   fetched from the live css2 API and downloaded once, byte-identical
   to what shipped before. Only latin + latin-ext. The Karla file here
   is a different download from style-t.css's — that page requests
   wght down to 200, these three request only down to 400, and Google
   serves a different file for each range. font-weight is written as a
   range because one variable file backs every weight in it.
   ============================================================ */

@font-face{
  font-family:"Caveat";
  font-style:normal;
  font-weight:600 700;
  font-display:swap;
  src:url("assets/fonts/caveat-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Caveat";
  font-style:normal;
  font-weight:600 700;
  font-display:swap;
  src:url("assets/fonts/caveat-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:"Karla";
  font-style:normal;
  font-weight:400 600;
  font-display:swap;
  src:url("assets/fonts/karla-wght400-600-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Karla";
  font-style:normal;
  font-weight:400 600;
  font-display:swap;
  src:url("assets/fonts/karla-wght400-600-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:"Newsreader";
  font-style:normal;
  font-weight:300 500;
  font-display:swap;
  src:url("assets/fonts/newsreader-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Newsreader";
  font-style:normal;
  font-weight:300 500;
  font-display:swap;
  src:url("assets/fonts/newsreader-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

:root{
  color-scheme:light;
  --c-hero:#FBF8F1;
  --c-1:#F3EFE4;
  --c-2:#EDEFE7;
  --c-6:#E9EEEC;
  --card:#FFFDF8;
  --ink:#2B2320;
  --soft:#6E645D;
  --line:#DCD5C8;
  --deep:#2C2023;
  --serif:"Newsreader",Iowan Old Style,Palatino,Georgia,serif;
  --sans:"Karla",ui-sans-serif,system-ui,sans-serif;
  /* This page's own corner radius, and deliberately NOT called --r.
     style-chrome.css defines --r for the shared footer and widens it to 22px
     above 820px. Holding a second --r here would have won that back (this
     file loads last) and given the document pages a footer with corners the
     homepage's does not have. One name, one meaning. */
  --doc-r:18px;
}

*{box-sizing:border-box}

body{
  margin:0;background:var(--c-hero);color:var(--ink);
  font-family:var(--sans);font-size:17px;line-height:1.62;
  -webkit-font-smoothing:antialiased;
}

/* ---------- header ----------
   The nav itself is not styled here any more, and neither is the footer.
   Both come from style-chrome.css, which hct-build.py generates out of
   style-t.css so the homepage and these four pages cannot drift apart. This
   page links style-chrome.css first and this file second.

   .dochead is only the wrapper the shared <nav> sits in, the way the homepage
   sits it inside <header class="hero">. It deliberately sets no padding and no
   max-width: .nav carries its own gutter and its own 1180px cap, and a second
   set here would double the padding and narrow the bar to 820px, which is
   exactly the mismatch this change exists to remove. */
.dochead{background:var(--c-hero)}

/* ---------- document body ---------- */
.doc{max-width:820px;margin:0 auto;padding:38px 22px 90px}

.doc h1{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(2.1rem,7vw,3rem);line-height:1.1;
  margin:14px 0 6px;letter-spacing:-.01em;
}
.doc h2{
  font-family:var(--serif);font-weight:500;
  font-size:clamp(1.3rem,3.4vw,1.62rem);line-height:1.25;
  margin:52px 0 12px;padding-top:26px;border-top:1px solid var(--line);
}
.doc h1 + p.lead,.doc p.lead{color:var(--soft);font-size:15px;margin:0 0 30px}
.doc p{margin:0 0 18px;max-width:66ch}
.doc a{color:var(--ink);text-decoration:underline;text-underline-offset:2px}
.doc a:hover{color:#000}
.doc ul{margin:0 0 20px;padding-left:1.1em;max-width:66ch}
.doc li{margin:0 0 9px}
.doc strong{font-weight:600}
.doc code{font-size:.92em;background:var(--c-1);padding:1px 5px;border-radius:5px}

/* ---------- tables ---------- */
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 0 26px;
  border:1px solid var(--line);border-radius:var(--doc-r);background:var(--card)}
.doc table{border-collapse:collapse;width:100%;min-width:460px;font-size:15.5px}
.doc th,.doc td{text-align:left;vertical-align:top;padding:13px 16px;border-bottom:1px solid var(--line)}
.doc th{font-weight:600;background:var(--c-1);white-space:nowrap}
.doc tbody tr:last-child td{border-bottom:0}

/* ---------- analytics opt-out ---------- */
.optout{background:var(--c-6);border:1px solid var(--line);border-radius:var(--doc-r);
  padding:22px;margin:0 0 26px;max-width:66ch}
.optout__btn{font-family:var(--sans);font-size:16px;font-weight:600;color:var(--ink);
  background:var(--card);border:1px solid var(--ink);border-radius:999px;
  padding:12px 22px;cursor:pointer;line-height:1.2}
.optout__btn:hover:not(:disabled){background:var(--ink);color:var(--c-hero)}
.optout__btn:disabled{cursor:default;opacity:.6;border-color:var(--line)}
.optout__btn:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.optout__state{margin:12px 0 0;font-size:14.5px;color:var(--soft)}

/* ---------- footer ----------
   Nothing here. The footer is style-chrome.css's, generated from style-t.css,
   so these pages carry the homepage's footer rather than a second one that
   looked close enough until someone changed one of them. The old two-column
   footer and the black colophon bar under it are both gone; the markup that
   used them went with the shared partial. Their rules were removed rather
   than left in place, because at equal specificity this file loads last and
   would have quietly won every one of them back. */

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}

/* ---------- About: single call to action, points at the one form ---------- */
.cta{margin:26px 0 8px}
.cta__btn{display:inline-block;font-size:16px;font-weight:600;text-decoration:none;
  color:var(--c-hero);background:var(--ink);border:1px solid var(--ink);
  border-radius:999px;padding:13px 26px;line-height:1.2}
.cta__btn:hover{background:#000;color:#fff}
.cta__btn:focus-visible{outline:2px solid var(--ink);outline-offset:3px}


/* ---------- tables on a phone ----------
   The lawful-basis table has a min-width, so on a narrow screen it forced
   sideways scrolling to read a legal document. Below 560px each row becomes
   a stacked block: the item in bold, its basis underneath. No scrolling. */
@media (max-width:560px){
  .tablewrap{overflow-x:visible;border-radius:var(--doc-r)}
  .doc table{min-width:0;width:100%}
  .doc thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
  .doc table,.doc tbody,.doc tr,.doc td{display:block;width:100%}
  .doc tr{border-bottom:1px solid var(--line);padding:12px 0}
  .doc tbody tr:last-child{border-bottom:0}
  .doc td{border-bottom:0;padding:2px 15px}
  .doc td:first-child{font-weight:600;padding-bottom:4px}
}


/* ---------- contact form (contact.html), 11 Sep 2026 ----------
   Additive only: every selector below is new, so About, Privacy and Terms
   render byte-identically to before. Tokens are this file's own — the
   homepage's --strike red and --ease do not exist here, so the button uses
   the same ink fill as .cta__btn above rather than importing a token.

   The homepage's .fields input{border-radius:999px} is a pill, which is
   right for one-line inputs on a centred hero form and wrong for a
   multi-line box. Everything here uses var(--doc-r), the same 18px the tables
   and the opt-out panel already use. */
.cform{display:grid;gap:20px;max-width:560px;margin:26px 0 20px}
.cform__row{display:grid;gap:7px}
.cform label{font-size:14px;font-weight:600;color:var(--soft)}
.cform input,
.cform textarea{
  font:inherit;width:100%;min-width:0;
  padding:13px 15px;border:1px solid var(--line);border-radius:var(--doc-r);
  background:var(--card);color:var(--ink);
}
.cform textarea{min-height:170px;line-height:1.55;resize:vertical}
.cform input::placeholder,.cform textarea::placeholder{color:var(--soft)}
.cform input:focus-visible,
.cform textarea:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.cform button{
  justify-self:start;
  font-family:var(--sans);font-size:16px;font-weight:600;line-height:1.2;
  color:var(--c-hero);background:var(--ink);border:1px solid var(--ink);
  border-radius:999px;padding:13px 26px;cursor:pointer;
}
.cform button:hover:not(:disabled){background:#000;color:#fff}
.cform button:disabled{opacity:.55;cursor:not-allowed}
.cform button:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

/* Turnstile draws an iframe in here once it loads. The reserved height is the
   widget's own (65px) so the button below it does not jump when it arrives. */
.cf-turnstile{min-height:65px}

/* Honeypot: off-screen, not display:none, so a bot that skips hidden fields
   still fills it. Same rule as the homepage's. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* Status line. Stays in the DOM at all times so its role="status" is a live
   region the moment the page loads; :empty collapses it to nothing rather
   than display:none plus an un-hide, which announces unreliably. */
/* Two classes, not one, on every <p> below: .doc p already sets a margin and
   a measure, and a single class would lose to it on specificity. */
.doc .cform__status{
  margin:22px 0 0;max-width:66ch;padding:15px 17px;
  border:1px solid var(--line);border-radius:var(--doc-r);
  background:var(--c-6);font-size:15.5px;
}
.doc .cform__status:empty{display:none}
.doc .cform__note{
  margin:22px 0 0;max-width:66ch;padding:15px 17px;
  border:1px solid var(--line);border-radius:var(--doc-r);
  background:var(--c-1);font-size:15.5px;
}
.doc .fine{font-size:13.5px;color:var(--soft);line-height:1.5;max-width:66ch;margin:0}
.doc .fine a{color:var(--soft)}
.doc .fine a:hover{color:var(--ink)}

/* ============================================================
   MOBILE TYPE SCALE — document pages
   ============================================================
   The same +10% Martin asked for on 11 September 2026, and the same single
   knob. `style-t.css` carries the homepage's copy; this file carries About,
   Contact, Privacy and Terms. Without this block those four pages would have
   stayed at 17px body while the homepage went to 18.7 — half the site quietly
   ignoring the instruction, which is worse than not doing it at all.

   `--m` must match the value in style-t.css. Change both together.

   Not scaled here: the chrome. The header and footer are generated into
   style-chrome.css from style-t.css by hct-build.py, so they already carry
   the homepage's scaling and must not be touched twice.
   ============================================================ */
@media (max-width:819.98px){
  :root{--m:1.10}

  body{font-size:calc(17px * var(--m))}
  .doc h1{font-size:calc(clamp(2.1rem,7vw,3rem) * var(--m))}
  .doc h2{font-size:calc(clamp(1.3rem,3.4vw,1.62rem) * var(--m))}
  .doc h1 + p.lead,
  .doc p.lead{font-size:calc(15px * var(--m))}
  .doc table{font-size:calc(15.5px * var(--m))}
  .doc .fine{font-size:calc(13.5px * var(--m))}
  .optout__btn{font-size:calc(16px * var(--m))}
  .optout__state{font-size:calc(14.5px * var(--m))}
  .cta__btn{font-size:calc(16px * var(--m))}
  .cform label{font-size:calc(14px * var(--m))}
}