/* Shared styling for the policy pages.

   These pages were inherited from philgood-web and never re-skinned: they
   carried --ink:#2E2E2E / --cream:#EEE9DF, so a reader clicking Privacy off a
   white navy-type poster landed on a dark charcoal page in cream type. They
   also @font-face'd /assets/archivo-black-latin.woff2, which does not exist in
   this repo, so the display face silently fell through to Helvetica.

   Both are fixed here. The palette is the landing page's, the display face is
   the landing page's Quicksand, and the alpha ramp is the SAME WCAG-measured
   ramp — .82 / .76 / .24 — not a set of values picked to look similar. The
   .45 and .35 alphas the old sheet used for the back link and the updated
   date measured 2.9:1 and 2.3:1 on this ground, well under the 4.5:1 floor. */

@font-face{
  font-family:"Quicksand";
  src:url("/assets/quicksand-var-latin.woff2") format("woff2");
  font-weight:400 700;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Archivo";
  src:url("/assets/archivo-var-latin.woff2") format("woff2");
  font-weight:300 600;font-style:normal;font-display:swap;
}

:root{
  --ink:#FFFFFF;      /* the ground */
  --cream:#213A92;    /* the mark   */
  --red:#CB262E;

  --c-display:rgba(33,58,146,1);     /* 10.10:1 */
  --c-rail:rgba(33,58,146,.82);      /*  6.13:1 */
  --c-body:rgba(33,58,146,.76);      /*  5.19:1 */
  --c-hair:rgba(33,58,146,.24);      /* decorative rules only */

  --sans:"Archivo","Helvetica Neue",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  --display:"Quicksand","Avenir Next","Century Gothic",sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--ink);
  position:relative;
  color:var(--c-body);
  font-family:var(--sans);font-weight:400;
  -webkit-font-smoothing:antialiased;
  padding:max(32px,env(safe-area-inset-top)) 24px max(48px,env(safe-area-inset-bottom));
}

/* the same centre light and darkened corners as the landing page */
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(115% 80% at 50% 30%, rgba(255,255,255,.9), transparent 58%),
    radial-gradient(130% 105% at 50% 50%, transparent 55%, rgba(33,58,146,.055) 100%);
}
.doc{position:relative;z-index:1}

/* the same grain, at the same strength and the same blend mode the landing
   page uses on white — overlay at .15 was tuned for a near-black ground and
   reads as dirt on this one */
body::after{
  content:"";
  position:fixed;inset:0;z-index:2;pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.55' numOctaves='4' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='180' height='180' filter='url(%23n)'/></svg>");
  background-size:200px 200px;
  opacity:.055;
  mix-blend-mode:multiply;
}

.doc{max-width:620px;margin:0 auto;font-size:14px;line-height:1.75}

.back{
  display:inline-block;margin-bottom:38px;
  font-family:var(--display);font-weight:500;
  font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--c-rail);text-decoration:none;
}
.back:hover{color:var(--c-display)}

h1{
  font-family:var(--display);font-weight:600;
  font-size:22px;letter-spacing:.1em;text-indent:.1em;text-transform:uppercase;
  color:var(--c-display);
}
h2{
  font-family:var(--display);font-weight:600;
  font-size:12px;letter-spacing:.16em;text-indent:.16em;text-transform:uppercase;
  color:var(--c-display);
  margin:34px 0 10px;
}
.updated{
  font-family:var(--display);font-weight:500;
  font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--c-body);
  margin-top:10px;margin-bottom:30px;
}
p{margin-bottom:14px}
ul{margin:0 0 14px 18px}
li{margin-bottom:8px}
strong{color:var(--c-display);font-weight:600}
a{color:var(--c-display);text-decoration:none;border-bottom:1px solid var(--c-hair)}
a:hover{border-bottom-color:var(--c-display)}
a:focus-visible{outline:2px solid var(--cream);outline-offset:2px}

.note{
  margin-top:34px;padding-top:18px;
  border-top:1px solid var(--c-hair);
  font-size:11px;color:var(--c-body);
}