/*
  School Portal pitch — foundation styles (chosen layout: the presentation deck).
  Palette measured from the printed pages (2.png), not approximated:
    navy        #002F90  role titles
    glyph blue  #003FB0  icon glyphs, first line of the lead
    deep green  #017D45  second line of the lead
    icon green  #2CAA34  filled icon circles, rules
    pale blue   #D9ECFE  pale icon circles
*/
:root{
  --navy:#002F90;
  --navy-ink:#001F66;
  --blue:#003FB0;
  --royal:#1553D6;
  --green-deep:#017D45;
  --green:#2CAA34;
  --pale:#D9ECFE;
  --wash:#F2F8FF;

  --ink:#15254D;
  --ink-2:#3C4A6B;
  --muted:#7A86A3;
  --line:#DCE6F5;
  --paper:#FFFFFF;

  --display:'Poppins',system-ui,-apple-system,'Segoe UI',sans-serif;
  --sans:'Poppins',system-ui,-apple-system,'Segoe UI',sans-serif;
  --script:'Allura','Brush Script MT',cursive;

  --r:18px;
  --r-lg:28px;
  --shadow:0 2px 6px rgba(0,31,102,.06),0 14px 36px rgba(0,31,102,.09);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);
  font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,p,ul,ol,figure{margin:0}
ul{list-style:none;padding:0}
img{max-width:100%;display:block}
a{color:var(--blue)}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
[hidden]{display:none!important}
:focus-visible{outline:3px solid var(--green);outline-offset:3px;border-radius:6px}

/* Material Symbols — the icon family the printed pages use. `display=block`
   on the font request keeps ligature names from flashing up as words. */
.msr{font-family:'Material Symbols Rounded';font-weight:500;font-style:normal;
  font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;
  display:inline-block;white-space:nowrap;direction:ltr;
  font-variation-settings:'FILL' 1,'wght' 500,'GRAD' 0,'opsz' 24;
  -webkit-font-smoothing:antialiased;user-select:none}

/* Icon badges, alternating as on the posters */
.badge{flex-shrink:0;width:64px;height:64px;border-radius:50%;
  display:grid;place-items:center}
.badge .msr{font-size:30px}
.badge.pale{background:var(--pale);color:var(--blue)}
.badge.green{background:var(--green);color:#fff}

/* Spaced small-caps eyebrow with its green rule */
.eyebrow{font-family:var(--sans);font-weight:500;font-size:.78rem;
  letter-spacing:.22em;text-transform:uppercase;color:var(--navy)}
.rule{display:block;width:70px;height:6px;border-radius:6px;background:var(--green)}

.script{font-family:var(--script);font-weight:400;color:var(--navy);line-height:1}

/* The two-colour lead line */
.lead .l1{color:var(--navy)}
.lead .l2{color:var(--green-deep)}

/* Poster nav words */
.pnav{display:flex;align-items:center;gap:14px;font-size:.72rem;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--navy)}
.pnav i{width:2px;height:18px;background:var(--green);border-radius:2px}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 20px;
  border-radius:999px;background:var(--navy);color:#fff;font-weight:600;
  font-size:.9rem;text-decoration:none;transition:background .15s ease,transform .15s ease}
.btn:hover{background:var(--royal)}
.btn.green{background:var(--green)}
.btn.green:hover{background:var(--green-deep)}
.btn.ghost{background:var(--pale);color:var(--navy)}
.btn.ghost:hover{background:#c7e1fd}
.btn .msr{font-size:19px}

/* The swoosh: blue sweep and green ribbon, as along the foot of each page */
.wave{display:block;width:100%;height:auto;pointer-events:none}

/* Page viewer (the printed page for a role) */
.viewer{position:fixed;inset:0;z-index:200;display:grid;place-items:center;
  padding:24px 16px calc(24px + env(safe-area-inset-bottom,0px));
  background:rgba(0,20,70,.78);backdrop-filter:blur(6px)}
.viewer figure{position:relative;max-height:100%;display:flex;flex-direction:column;
  align-items:center;gap:12px}
.viewer img{max-height:calc(100vh - 110px);width:auto;border-radius:10px;
  box-shadow:0 30px 80px rgba(0,0,0,.45);background:#fff}
.viewer figcaption{color:#fff;font-size:.85rem;opacity:.85}
.viewer .close{position:fixed;top:calc(14px + env(safe-area-inset-top,0px));right:16px;
  width:44px;height:44px;border-radius:50%;background:#fff;color:var(--navy);
  display:grid;place-items:center;box-shadow:var(--shadow)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;
    scroll-behavior:auto!important}
}