/* Shared by every school website template. */
[hidden]{display:none!important}
.skip{position:absolute;left:12px;top:-60px;z-index:300;background:#111;color:#fff;padding:.6rem 1rem;border-radius:6px;text-decoration:none}
.skip:focus{top:12px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.preview-bar{position:fixed;left:0;right:0;bottom:0;z-index:250;box-shadow:0 -4px 16px rgba(0,0,0,.12);background:#fff3c4;color:#4a3800;font:600 .85rem/1.4 system-ui,sans-serif;text-align:center;padding:.55rem 1rem;border-top:1px solid #e9d27a}
/* The bar sits at the foot of the screen (every design's header stays where it is); the page ends above it. */
body:has(> .preview-bar){padding-bottom:2.8rem}
body.plain{margin:0;min-height:100vh;display:grid;place-items:center;background:#f4f1ea;font-family:system-ui,sans-serif;color:#1d1f24}
.plain-box{max-width:420px;padding:2rem 1.4rem;text-align:center}
.plain-box h1{font-size:1.6rem;margin:0 0 .6rem}
.plain-box p{color:#5b616c;line-height:1.6}
.plain-box .small{font-size:.8rem;margin-top:2rem}
/* A stat written as text ("A1", "1 : 14") sits level with the rolling numbers
   beside it, whose digits number-flow sets a quarter em lower (its fade mask). */
.big{position:relative;top:.25em}
/* The school's own logo in place of a design's drawn mark: on a white plate so
   any logo reads on the dark and photo headers alike. */
.brand img.logo{width:40px;height:40px;flex:0 0 40px;object-fit:contain;background:#fff;border-radius:8px;padding:3px;box-sizing:border-box;box-shadow:0 0 0 1px rgba(0,0,0,.08)}
/* The head's photo beside the letter (stage 3c): a small round portrait above the signature.
   Sized by the page (width/height on the tag), so nothing jumps as it loads. */
.head-photo{display:block;width:96px;height:96px;max-width:none;border-radius:50%;object-fit:cover;margin:1.25rem 0 .6rem;box-shadow:0 0 0 3px rgba(255,255,255,.9),0 3px 12px rgba(0,0,0,.18)}