/* ═══════════════════════════════════════════════════════════════════════════
   R2 Education — shared stylesheet for the three policy pages.

   terms.html, privacy.html and security.html all link this file. The homepage
   inlines its own CSS because it is a single page; three long documents
   sharing one stylesheet is worth the extra request.

   Served from the same origin, so the CSP in _headers (style-src 'self')
   already allows it. No build step, same as everything else here.

   ── Typography decision ───────────────────────────────────────────────────
   The homepage sets everything in Special Elite, which is right for a page
   whose longest paragraph runs two lines. A several-thousand-word privacy
   policy in a distressed typewriter face is genuinely hard to read, and these
   documents get read by departmental reviewers, principals and parents.

   So these pages keep the zine furniture — ransom masthead, hard black
   borders, offset shadows, ruled paper, the same six accent colours — but set
   long-form body copy in Libre Baskerville, already loaded on the homepage as
   one of the ransom letter faces. Special Elite stays for all the small
   furniture: kickers, chips, table headers, labels, pills.

   Anton remains the display face, same as the homepage.
   No dark mode, deliberately — matching the homepage and both trainers.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  --paper:#fffaf0; --rule:#eee6d3; --ink:#111; --ink2:#55504a; --ink3:#7d766c;
  --card:#f2ebd9;
  --yellow:#ffd400; --red:#c4143a; --green:#7bc043;
  --cyan:#2bb3d6; --purple:#a24bd8; --pink:#ff2f92; --magenta:#c01f74;
  --mono:'Special Elite',Courier,monospace;
  --display:'Anton',Impact,sans-serif;
  --body:'Libre Baskerville',Georgia,serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; min-height:100vh; color:var(--ink); line-height:1.72;
  font-family:var(--body); font-size:15px;
  background:var(--paper);
  background-image:repeating-linear-gradient(var(--rule) 0 1px, transparent 1px 28px);
}

/* ── Masthead — same furniture as the homepage and both trainers ────────── */
.masthead{
  display:flex; align-items:flex-end; justify-content:space-between; gap:20px; flex-wrap:wrap;
  padding:16px 30px 12px; border-bottom:3px solid var(--ink); background:var(--paper);
}
.mast-left{display:flex; align-items:flex-end; gap:14px; flex-wrap:wrap}
.mast-mark{display:flex; gap:3px; align-items:flex-end; flex-wrap:wrap}
.mast-mark span{line-height:.9; display:inline-block; border:2px solid var(--ink); font-weight:400}
.mast-tag{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; color:var(--ink2);
  padding-bottom:6px; max-width:290px; line-height:1.5;
}
.mast-chip{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.14em; background:var(--yellow);
  border:2px solid var(--ink); box-shadow:2px 2px 0 var(--ink);
  padding:4px 8px; transform:rotate(-2deg); white-space:nowrap;
}

/* ── Ransom lettering ───────────────────────────────────────────────────── */
.r1{font-family:var(--display); background:var(--yellow); color:var(--ink); padding:1px 7px; transform:rotate(-3deg)}
.r2{font-family:var(--body); background:#fff; color:var(--red); padding:3px 7px; transform:rotate(3deg)}
.r3{font-family:'Bungee',sans-serif; background:var(--ink); color:var(--green); padding:3px 6px; transform:rotate(-1deg)}
.r4{font-family:var(--mono); background:var(--cyan); color:var(--ink); padding:3px 7px; transform:rotate(4deg)}
.r5{font-family:var(--display); background:var(--purple); color:var(--yellow); padding:1px 7px; transform:rotate(-2deg)}
.r6{font-family:'VT323',monospace; background:var(--pink); color:#fff; padding:0 8px; transform:rotate(5deg)}
.mast-mark .r1,.mast-mark .r5{font-size:30px}
.mast-mark .r2{font-size:24px}
.mast-mark .r3{font-size:22px}
.mast-mark .r4{font-size:26px}
.mast-mark .r6{font-size:32px}

/* ── Page frame ─────────────────────────────────────────────────────────── */
.wrap{max-width:880px; margin:0 auto; padding:clamp(26px,5vw,44px) clamp(16px,4vw,30px) 56px}
.kicker{font-family:var(--mono); font-size:11px; letter-spacing:.2em; color:var(--magenta); margin:0 0 10px}
h1{
  font-family:var(--display); font-weight:400; letter-spacing:.01em;
  font-size:clamp(38px,8vw,64px); line-height:.98; margin:0 0 14px;
}
.standfirst{font-size:14px; color:var(--ink2); margin:0 0 22px; max-width:56ch; line-height:1.75}

/* Document meta strip */
.meta{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:clamp(26px,4vw,36px)}
.meta span{
  font-family:var(--mono); font-size:10px; letter-spacing:.13em;
  background:var(--card); border:2px solid var(--ink); padding:4px 9px;
}
.meta span b{font-weight:400; color:var(--magenta)}

/* ── Contents ───────────────────────────────────────────────────────────── */
.toc{background:#fff; border:3px solid var(--ink); box-shadow:6px 6px 0 var(--ink); padding:20px 22px; margin-bottom:clamp(30px,5vw,44px)}
.toc h2{font-family:var(--mono); font-size:10.5px; letter-spacing:.2em; margin:0 0 14px; font-weight:400; color:var(--magenta)}
.toc ol{list-style:none; counter-reset:toc; margin:0; padding:0; columns:2; column-gap:34px}
.toc li{counter-increment:toc; margin-bottom:8px; break-inside:avoid; font-size:13.5px; line-height:1.45}
.toc li::before{content:counter(toc); font-family:var(--mono); font-size:11px; color:var(--ink3); margin-right:9px}
.toc a{color:var(--ink); text-decoration:none; border-bottom:1px solid var(--rule)}
.toc a:hover,.toc a:focus-visible{background:var(--yellow); border-bottom-color:var(--ink)}
@media(max-width:620px){.toc ol{columns:1}}

/* ── Sections ───────────────────────────────────────────────────────────── */
section{margin-bottom:clamp(30px,5vw,44px); scroll-margin-top:16px}
h2.sec{
  font-family:var(--display); font-weight:400; letter-spacing:.01em;
  font-size:clamp(24px,4.4vw,34px); line-height:1.08; margin:0 0 16px;
  padding-bottom:12px; border-bottom:3px solid var(--ink);
  display:flex; gap:13px; align-items:center;
}
h2.sec .num{
  font-family:var(--mono); font-size:13px; letter-spacing:0; flex:none;
  background:var(--yellow); border:2px solid var(--ink); box-shadow:2px 2px 0 var(--ink);
  padding:2px 8px; transform:rotate(-2deg);
}
h3{font-family:var(--display); font-weight:400; font-size:19px; letter-spacing:.01em; margin:26px 0 9px; line-height:1.2}
p{margin:0 0 14px; color:var(--ink2)}
p strong,li strong{color:var(--ink); font-weight:700}
ul,ol{margin:0 0 15px; padding-left:22px; color:var(--ink2)}
li{margin-bottom:8px}
li::marker{color:var(--ink3)}
a{color:var(--magenta)}
a:hover,a:focus-visible{background:var(--yellow); color:var(--ink)}
code{font-family:var(--mono); font-size:.94em; background:var(--card); border:1px solid var(--ink); padding:0 5px}
em{font-style:italic}

/* ── Callouts — bordered cards, offset shadow, coloured left edge ───────── */
.note{
  background:#fff; border:2.5px solid var(--ink); box-shadow:5px 5px 0 var(--ink);
  padding:15px 18px; margin:20px 0; font-size:13.5px; line-height:1.7;
  border-left-width:11px;
}
.note :last-child{margin-bottom:0}
.note p{color:var(--ink2)}
.note ul{margin-bottom:0}
.note.info{border-left-color:var(--cyan)}
.note.warn{border-left-color:var(--yellow)}
.note.good{border-left-color:var(--green)}
.note.stop{border-left-color:var(--red)}
.note .lbl{
  display:block; font-family:var(--mono); font-size:10.5px; letter-spacing:.16em;
  color:var(--magenta); margin-bottom:7px;
}

/* ── Tables ─────────────────────────────────────────────────────────────── */
.tw{overflow-x:auto; margin:18px 0 22px; border:3px solid var(--ink); box-shadow:5px 5px 0 var(--ink); background:#fff}
table{border-collapse:collapse; width:100%; font-size:13px; min-width:540px; line-height:1.6}
table.wide{min-width:720px}
th{
  font-family:var(--mono); font-weight:400; font-size:10.5px; letter-spacing:.14em;
  text-align:left; padding:10px 13px; background:var(--card);
  border-bottom:3px solid var(--ink); color:var(--ink);
}
td{padding:11px 13px; border-bottom:1px solid var(--rule); color:var(--ink2); vertical-align:top}
tr:last-child td{border-bottom:none}
td b{color:var(--ink); font-weight:700}
td+td,th+th{border-left:1px solid var(--rule)}

/* ── Status pills (security matrix) ─────────────────────────────────────── */
.pill{
  display:inline-block; font-family:var(--mono); font-size:9.5px; letter-spacing:.11em;
  border:2px solid var(--ink); padding:2px 7px; white-space:nowrap;
}
.pill.on{background:var(--green)}
.pill.part{background:var(--yellow)}
.pill.off{background:var(--red); color:#fff}

/* ── At-a-glance tiles ──────────────────────────────────────────────────── */
.glance{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:14px; margin:20px 0 6px}
.g{background:var(--card); border:2.5px solid var(--ink); box-shadow:3px 3px 0 var(--ink); padding:13px 15px}
.g .k{font-family:var(--mono); font-size:9.5px; letter-spacing:.15em; color:var(--magenta); margin-bottom:6px}
.g .v{font-size:13px; line-height:1.5; color:var(--ink)}


/* Which trainer a statement applies to */
.who{
  display:inline-block; font-family:var(--mono); font-size:9.5px; letter-spacing:.11em;
  border:2px solid var(--ink); padding:1px 6px; margin-right:5px; white-space:nowrap;
}
.who.olna{background:var(--cyan)}
.who.naplan{background:var(--yellow)}
.who.both{background:var(--card)}

/* ── Footer ─────────────────────────────────────────────────────────────── */
footer{border-top:3px solid var(--ink); background:var(--card); padding:26px 30px 34px}
.foot-in{max-width:880px; margin:0 auto}
.foot-nav{display:flex; flex-wrap:wrap; gap:9px; margin-bottom:16px}
.foot-nav a{
  font-family:var(--mono); font-size:11px; letter-spacing:.13em; text-decoration:none;
  color:var(--ink); background:#fff; border:2px solid var(--ink);
  box-shadow:2px 2px 0 var(--ink); padding:5px 11px;
}
.foot-nav a:hover,.foot-nav a:focus-visible{background:var(--yellow)}
.foot-nav a[aria-current]{background:var(--pink); color:#fff}
footer p{font-family:var(--mono); font-size:10.5px; letter-spacing:.06em; color:var(--ink2); margin:0 0 7px; line-height:1.75}

:focus-visible{outline:3px solid var(--magenta); outline-offset:3px}

@media (max-width:520px){
  .masthead{padding:12px 18px 10px}
  .mast-mark .r1,.mast-mark .r5{font-size:24px}
  .mast-mark .r2{font-size:19px}
  .mast-mark .r3{font-size:18px}
  .mast-mark .r4{font-size:21px}
  .mast-mark .r6{font-size:26px}
  .toc,.tw{box-shadow:4px 4px 0 var(--ink)}
}

@media print{
  body{background:#fff; font-size:10.5pt; line-height:1.5}
  .masthead{padding:0 0 10pt; margin-bottom:14pt}
  .mast-chip,.toc,footer,.meta{display:none}
  .wrap{max-width:none; padding:0}
  .note,.tw,.toc,.g{box-shadow:none}
  section{margin-bottom:16pt}
  h2.sec{break-after:avoid; font-size:15pt}
  h3{break-after:avoid}
  .tw,table,.note,.g{break-inside:avoid}
  a{color:#000; text-decoration:none}
  a:hover{background:none}
}