
:root{
 --desk:#22313F;--desk-2:#1B2833;--desk-ink:#E9EEF0;--desk-soft:#A9B7BF;
 --paper:#F2F4F1;--sheet:#FFFFFF;--ink:#17222C;--ink-soft:#56656D;--rule:#D5DCD7;
 --tape:#A3302A;--green:#2E6B4F;--focus:#1F5F8B;
 --olive:#4B5A3A;--olive-ink:#EEF1E6;--khaki:#C9B27A;--khaki-ink:#2C2614;--steel:#4F6577;--steel-ink:#F1F4F6;
 --slate:#2F4E6F;--slate-ink:#EEF3F7;
 --serif:"Iowan Old Style",Charter,"Bitstream Charter","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
 --sans:"Avenir Next",Avenir,"Segoe UI","Helvetica Neue",system-ui,sans-serif}
@media(prefers-color-scheme:dark){:root{
 --paper:#151C21;--sheet:#1D262D;--ink:#E6ECEA;--ink-soft:#9AA9AE;--rule:#2C373E;--green:#78B596;--focus:#6FA8CF}}
*{box-sizing:border-box}
html,body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--serif);font-size:17px;
 line-height:1.55;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit}
.skip{position:absolute;left:1rem;top:-3rem;background:var(--sheet);color:var(--ink);padding:.5rem .8rem;
 font-family:var(--sans);font-size:14px;z-index:2}
.skip:focus{top:1rem;outline:2px solid var(--focus)}

/* The desk */
.desk{background-color:var(--desk);
 background-image:radial-gradient(120% 140% at 85% 10%,#2B3D4D 0,var(--desk) 45%,var(--desk-2) 100%);
 color:var(--desk-ink)}
.desk .in{max-width:72rem;margin:0 auto;padding:2.6rem 2rem 2.8rem;display:grid;
 grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:2.5rem;align-items:center}
.brand{font-family:var(--sans);font-size:15px;color:var(--desk-soft);margin:0 0 1.6rem;display:flex;
 align-items:center;gap:.6rem}
.brand b{font-family:var(--serif);font-size:1.35rem;font-weight:600;color:var(--desk-ink);letter-spacing:.01em}
h1{font-size:clamp(2.3rem,4.2vw,3.4rem);line-height:1.08;font-weight:600;letter-spacing:-.015em;margin:0 0 1rem}
.lede{font-family:var(--sans);font-size:17px;line-height:1.6;color:var(--desk-soft);max-width:31rem;margin:0}
.files{width:100%;height:auto;display:block;max-width:30rem;justify-self:end}
.tie{stroke-dasharray:1;stroke-dashoffset:0}
@media(prefers-reduced-motion:no-preference){
 .tie{stroke-dashoffset:1;animation:tie 1.4s cubic-bezier(.6,0,.2,1) .35s forwards}
 .knot{opacity:0;animation:knot .4s ease-out 1.6s forwards}}
@keyframes tie{to{stroke-dashoffset:0}}
@keyframes knot{to{opacity:1}}

/* The files */
main{max-width:72rem;margin:0 auto;padding:3rem 2rem 2rem}
.file{display:grid;grid-template-columns:minmax(15rem,20rem) minmax(0,1fr);gap:1.6rem;margin:0 0 2.6rem;
 align-items:start}
.cover{position:relative;padding:1.5rem 1.4rem 1.6rem;min-height:100%;border-radius:2px 10px 10px 2px;
 box-shadow:0 1px 0 rgba(0,0,0,.08),0 10px 24px -14px rgba(16,24,32,.45)}
.cover svg{width:56px;height:56px;display:block;margin:0 0 1.1rem}
.cover h2{position:relative;font-size:1.45rem;line-height:1.2;font-weight:600;margin:0 0 .5rem;max-width:14ch}
.cover .tape{display:block;height:10px;background:var(--tape);margin:1.3rem -1.4rem 1.2rem}
.cover .byline{position:relative;font-style:italic;margin:0;font-size:1.02rem;line-height:1.45}
.defence .cover{background:var(--olive);color:var(--olive-ink)}
.government .cover{background:var(--khaki);color:var(--khaki-ink)}
.psu .cover{background:var(--steel);color:var(--steel-ink)}
.education .cover{background:var(--slate);color:var(--slate-ink)}
.sheets{display:grid;grid-template-columns:repeat(auto-fit,minmax(17rem,1fr));gap:1.1rem}
a.card{position:relative;display:flex;flex-direction:column;gap:.45rem;text-decoration:none;color:var(--ink);
 background:var(--sheet);border:1px solid var(--rule);border-radius:3px;padding:1.2rem 1.25rem 1.1rem;
 box-shadow:3px 3px 0 -1px var(--sheet),3px 3px 0 0 var(--rule);transition:transform .18s ease,box-shadow .18s ease}
a.card:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 -1px var(--sheet),5px 5px 0 0 var(--rule)}
a.card:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.card b{font-size:1.18rem;font-weight:600;line-height:1.3}
.card .sum{font-family:var(--sans);font-size:15px;line-height:1.5;color:var(--ink-soft)}
.card ul{margin:.35rem 0 .2rem;padding:0;list-style:none;font-size:.95rem;line-height:1.45}
.card li{position:relative;padding:0 0 0 1.1rem;margin:.28rem 0}
.card li::before{content:"";position:absolute;left:0;top:.62em;width:.45rem;height:2px;background:var(--green)}
.card .foot{margin-top:auto;padding-top:.8rem;border-top:1px solid var(--rule);display:flex;
 flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:.3rem 1rem;font-family:var(--sans);
 font-size:13.5px}
.card .where{color:var(--ink-soft);flex:1 1 11rem}
.card .go{color:var(--green);font-weight:600;white-space:nowrap}

footer{max-width:72rem;margin:0 auto;padding:0 2rem 4rem}
.principle{border-top:2px solid var(--tape);padding-top:1.1rem;font-size:1.05rem;line-height:1.6;max-width:40rem;
 margin:0}
.made{font-family:var(--sans);font-size:13px;color:var(--ink-soft);margin:.8rem 0 0}

@media(max-width:60rem){
 .desk .in{grid-template-columns:1fr;padding:2.4rem 1.3rem 2.6rem;gap:1.6rem}
 .files{justify-self:start;max-width:24rem}
 main{padding:2.2rem 1.3rem 1rem}
 .file{grid-template-columns:1fr;gap:1rem}
 .cover{min-height:0}
 .files{max-width:19rem}
 footer{padding:0 1.3rem 3rem}}
/* The accessibility statement: a plain document on the same paper. */
.doc{max-width:44rem;margin:0 auto;padding:3rem 2rem 4rem}
.doc .brand{color:var(--ink-soft);margin:0 0 1.4rem}
.doc .brand b{color:var(--ink)}
.doc h1{font-size:2rem;margin:0 0 .6rem;max-width:none}
.doc h2{font-size:1.25rem;margin:2rem 0 .4rem}
.doc p,.doc li{font-size:1rem;line-height:1.6}
.doc ul{padding-left:1.2rem}
.doc .when{font-family:var(--sans);font-size:14px;color:var(--ink-soft)}
.doc a,.made a{color:var(--green)}
@media(forced-colors:active){.cover .tape{background:CanvasText}a.card{border-color:CanvasText}}
