/* page.css v1.0 - 1st Aug 2026
   Shared stylesheet for OliveCore's utility pages (privacy, accessibility).

   These pages deliberately do NOT implement the seven theme packs - those are
   structurally different layouts, and duplicating 520KB of pack CSS onto a legal
   page would be absurd. They DO honour every accessibility preference the main
   page offers (light/dark, three text sizes, high contrast, reduced motion), so a
   visitor never loses a setting by following a footer link.

   Tokens are copied verbatim from olivecore.html's :root and [data-theme=dark].
   Do not re-key them by eye - if the main page's tokens change, copy them again. */

@font-face{font-family:'Manrope';font-weight:200;font-style:normal;font-display:swap;
  src:url('../fonts/manrope-200.woff2') format('woff2')}
@font-face{font-family:'Manrope';font-weight:500;font-style:normal;font-display:swap;
  src:url('../fonts/manrope-500.woff2') format('woff2')}
@font-face{font-family:'Manrope';font-weight:800;font-style:normal;font-display:swap;
  src:url('../fonts/manrope-800.woff2') format('woff2')}

:root{
  --paper:#fafaf7; --cream:#f1eede; --ink:#141d27; --deep:#0d1620;
  --olive:#6f7f33; --olive-b:#96a851; --stone:#4c5a24;
  --muted:#51616e; --hair:rgba(20,29,39,.14);
  --mono:ui-monospace,'Cascadia Code','SF Mono',Menlo,Consolas,monospace;
  --pad:clamp(20px,4.5vw,76px);
  --bg:var(--paper); --fg:var(--ink); --mut:var(--muted); --ln:var(--hair);
  /* --olive is only 4.22:1 on paper, so it is NEVER used for text in light mode.
     Links use --stone (7.18:1). In dark, --olive-b is 9.67:1 and safe. */
  --link:var(--stone);
}
html[data-theme="dark"]{
  --paper:#111820; --cream:#19221c; --ink:#edf2e8; --deep:#080f15;
  --olive:#8fa348; --olive-b:#b2c86a; --stone:#71843a;
  --muted:#aeb9c0; --hair:rgba(237,242,232,.15);
  --link:var(--olive-b);
}
html[data-fs="2"]{font-size:112.5%}
html[data-fs="3"]{font-size:125%}
html[data-contrast="1"]{--mut:var(--fg);--ln:color-mix(in srgb,var(--fg) 42%,transparent)}

*,*::before,*::after{box-sizing:border-box}
html{color-scheme:light dark;-webkit-text-size-adjust:100%}
html[data-theme="dark"]{color-scheme:dark}
html[data-theme="light"]{color-scheme:light}
body{
  margin:0;background:var(--bg);color:var(--fg);
  font:500 clamp(16px,.55vw + 15px,18px)/1.66 'Manrope',system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;
}

.skip{position:absolute;left:-9999px;top:0;z-index:99;background:var(--fg);color:var(--bg);
  padding:.7em 1.2em;font-weight:800;border-radius:0 0 10px 0}
.skip:focus{left:0}

.wrap{width:min(760px,calc(100% - (var(--pad) * 2)));margin-inline:auto}

/* ── masthead ── */
.top{border-bottom:1px solid var(--ln)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding-block:clamp(18px,2.4vw,26px);flex-wrap:wrap}
.lockup{display:inline-flex;align-items:baseline;gap:.06em;text-decoration:none;color:var(--fg);
  font-weight:800;font-size:clamp(1.15rem,2.4vw,1.4rem);letter-spacing:-.028em}
.lockup em{font-style:normal;color:var(--link)}
.top nav{display:flex;gap:clamp(14px,2.4vw,26px);font-size:.9rem;font-weight:800}
.top nav a{color:var(--mut)}
.top nav a[aria-current="page"]{color:var(--fg)}

/* ── type ── */
main{padding-block:clamp(42px,6vw,86px) clamp(60px,8vw,110px)}
h1{font-weight:800;letter-spacing:-.045em;line-height:1.04;margin:0 0 .5em;
  font-size:clamp(2.3rem,7vw,4rem)}
h2{font-weight:800;letter-spacing:-.03em;line-height:1.14;margin:2.4em 0 .55em;
  font-size:clamp(1.28rem,2.6vw,1.6rem)}
h3{font-weight:800;letter-spacing:-.018em;margin:1.9em 0 .4em;font-size:1.06rem}
h2:first-of-type{margin-top:1.6em}
p,li{color:var(--fg);margin:0 0 1.05em}
.lede{font-size:clamp(1.06rem,1.5vw,1.24rem);line-height:1.58;color:var(--fg)}
.meta{font-family:var(--mono);font-size:.78rem;letter-spacing:.06em;color:var(--mut);
  text-transform:uppercase;margin:0 0 2.6em}
ul,ol{padding-left:1.3em;margin:0 0 1.05em}
li{margin-bottom:.45em}
strong,b{font-weight:800}
a{color:var(--link);text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--link);outline-offset:3px;border-radius:2px}

/* ── panel: used for the "what we do not do" and summary blocks ── */
.panel{background:var(--cream);border:1px solid var(--ln);border-radius:14px;
  padding:clamp(20px,3vw,30px);margin:2em 0}
.panel > :last-child{margin-bottom:0}
.panel h2,.panel h3{margin-top:0}

/* Numbered section headings, echoing the (01)(02) device on neooptic.com/accessibility. */
h2 i{font-style:normal;font-family:var(--mono);font-size:.6em;color:var(--link);
  margin-right:.65em;letter-spacing:.04em;vertical-align:.14em;font-weight:500}
ul.ticks{list-style:none;padding-left:0}
ul.ticks li{position:relative;padding-left:1.5em}
ul.ticks li::before{content:"";position:absolute;left:0;top:.62em;width:.62em;height:.62em;
  border:1.5px solid var(--link);border-radius:50%}

dl.kv{margin:0 0 1.05em}
dl.kv dt{font-weight:800;margin-top:1em}
dl.kv dd{margin:.15em 0 0;color:var(--fg)}

/* ── footer ── */
.foot{border-top:1px solid var(--ln);margin-top:clamp(40px,6vw,70px)}
.foot .wrap{padding-block:clamp(26px,3.4vw,40px);display:flex;gap:18px;
  justify-content:space-between;flex-wrap:wrap;align-items:center}
.foot p{margin:0;font-size:.86rem;color:var(--mut)}
.foot nav{display:flex;gap:clamp(14px,2.4vw,24px);font-size:.86rem;font-weight:800}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
}
@media print{
  .top nav,.skip,.foot nav{display:none}
  body{background:#fff;color:#000;font-size:11pt}
  a{color:#000}
  .panel{border:1px solid #999;background:#fff}
}