/* Branding adapted from the public school website, reviewed 15 October 2026. */
:root{--lar-navy:#0d1f61;--lar-blue:#2340a8;--lar-yellow:#f7d118}
html,body{font-family:"Quicksand",Arial,sans-serif;font-weight:500;color:var(--lar-navy);background:#f5f6fa}
header{background:#fff;position:relative;border-bottom:4px solid var(--lar-navy);margin:0 -2.7vw;padding-left:2.7vw;padding-right:2.7vw}
header:after{content:"";position:absolute;bottom:-4px;left:2.7vw;width:7vw;height:4px;background:var(--lar-yellow)}
.identity{gap:1.6vw;min-width:0}.school-logo{display:block;width:clamp(210px,17.5vw,335px);height:auto;flex-shrink:0}.identity-copy{border-left:1px solid #d7dbea;padding-left:1.6vw}
.eyebrow,.pill,.calendarlabel,.noticetop,.footlabel,.footerbrand{font-family:"Montserrat",Arial,sans-serif}
.identity .eyebrow{color:#626b85;font-size:calc(.64em + var(--small-text-step));font-weight:500;letter-spacing:.11em}
.identity h1{font-family:"Quicksand",Arial,sans-serif;font-weight:500;letter-spacing:-.025em;color:var(--lar-navy)}
#date{font-weight:600}.pill{border-radius:2px;background:var(--lar-yellow);color:var(--lar-navy);font-weight:600}
.panel,.clockcard,.notice{border-radius:5px}.panel{border-color:#dce0ed;background:#fff;box-shadow:0 2px 5px #0d1f6105}
.clockcard{background:var(--lar-navy);color:#fff;border-top:4px solid var(--lar-yellow)}
.clockcard .eyebrow{color:#e5e9fa;font-weight:500;font-size:calc(.65em + var(--small-text-step))}#clock{font-family:"Montserrat",Arial,sans-serif;font-weight:500;letter-spacing:-.065em}
.live{color:#e1e6fa}.dot{background:var(--lar-yellow)}
h2,.dialog h3{font-family:"Quicksand",Arial,sans-serif;font-weight:600;color:var(--lar-navy)}h2 span{font-family:"Montserrat",Arial,sans-serif;font-weight:500;color:#646e89}
.sectionhead h2:after{content:"";display:block;width:37px;height:3px;background:var(--lar-yellow);box-shadow:0 3px 0 var(--lar-navy);margin-top:.55em;margin-bottom:3px}
.badge{border-radius:2px;background:var(--lar-yellow);color:var(--lar-navy);font-weight:700}
.now{font-weight:700}.now .small{color:#5d6784}.progress{background:#e9ecf5}.progress div{background:var(--lar-yellow)}
.next,.small,.calendarfoot,.muted,.weatherstatus,.weathercredit,.source{color:#5f6984}
.slot{border-radius:2px}.slot.active{background:#fff5b2;color:var(--lar-navy);font-weight:700;box-shadow:inset 3px 0 var(--lar-yellow)}.slot.past{color:#7b8296}.slot.break{border-color:var(--lar-yellow)}
.calendaricon{color:var(--lar-blue)}.calendarlabel{border-color:#e1e5f0;color:#5c6786;font-weight:500}.calendarviewport,iframe{background:#fff;border-radius:2px}
.calendarfoot a{color:var(--lar-blue)}.weathericon{color:#b29300}.weatherline strong{font-family:"Montserrat",Arial,sans-serif;color:var(--lar-navy);font-weight:500}.weatherline>div{font-weight:600}
.notice{background:var(--lar-navy);color:#fff;border-top:4px solid var(--lar-yellow)}
.notice h2{font-family:"Quicksand",Arial,sans-serif;font-weight:600;color:#fff;letter-spacing:-.035em;line-height:1.18}
.noticetop{color:var(--lar-yellow);font-weight:600;line-height:1.5}
.notice p{color:#f0f2fd;font-weight:500;line-height:1.65}
#noticeFooter{color:#d8dff6;font-weight:500}
.noticeart{right:-.1em;bottom:.5em;opacity:.07;transform:rotate(-9deg);font-size:7.8vw;pointer-events:none}
.noticeart div{display:none}.noticeart:after{content:"L A R";white-space:nowrap;font-family:Georgia,serif;color:#fff;letter-spacing:-.04em}
.dots i{background:#6574a5}.dots i.active{background:var(--lar-yellow)}
footer{background:var(--lar-navy);color:#fff;border-top:3px solid var(--lar-yellow)}
.footlabel{color:var(--lar-yellow);font-weight:600}.footlabel span{color:#d8dff6;font-weight:500}.thought{font-family:"Quicksand",Arial,sans-serif;font-weight:600;border-color:#4b5d98}#quoteEn{font-family:"Quicksand",Arial,sans-serif;font-weight:500;color:#d8dff6}
.footerbrand{color:#fff;font-size:calc(.55em + var(--bar-text-step));font-weight:500;letter-spacing:.08em;text-align:right;line-height:1.8}.footerbrand span{color:var(--lar-yellow);display:block;font-size:calc(.9em + var(--bar-text-step))}
button{font-family:"Quicksand",Arial,sans-serif;font-weight:600;border-color:#c4cbdf;color:var(--lar-navy);border-radius:3px}
button:hover{background:var(--lar-yellow);color:var(--lar-navy)}.primary{background:var(--lar-navy);color:#fff}.primary:hover{background:var(--lar-yellow);color:var(--lar-navy)}
.tools button{background:white}.tools button:hover{background:var(--lar-yellow)}
.dialog{background:#fff;border-radius:6px;box-shadow:0 25px 80px #0d1f6155}.dialog input,.dialog select,.dialog textarea{color:var(--lar-navy);border-color:#c4cbdf;border-radius:3px}.dialog hr{border-color:#dce1ef}
#previewBanner{background:var(--lar-yellow);color:var(--lar-navy)}.overlay{background:#0d1f61b8}
@media(min-width:901px){#screen{padding-top:0}header{padding-top:1.3vh;padding-bottom:1.3vh;min-height:12vh}.identity h1{font-size:calc(1.65vw + var(--small-text-step))}.now{margin-top:.8vw}.slot{font-size:calc(.74em + var(--small-text-step))}.weatherline{margin-top:.6vw}main{padding-top:1.7vh}.notice h2{font-size:2.4vw}}
@media(max-width:1100px) and (min-width:901px){.identity h1{font-size:calc(1.7vw + var(--small-text-step))}.school-logo{width:220px}.identity-copy{padding-left:1vw}.identity .eyebrow{font-size:calc(.55em + var(--small-text-step))}.slot{font-size:calc(.7em + var(--small-text-step))}}
@media(max-width:900px){header{margin:-18px -18px 0;padding:18px;align-items:flex-start}.school-logo{width:205px}.identity-copy{display:none}.identity{gap:0}.footerbrand{display:none}.notice h2{font-size:32px}.noticeart{font-size:80px}.sectionhead h2:after{margin-top:.45em}.notice{padding:20px}}
@media(max-width:540px){.school-logo{width:165px}.topright{max-width:48%}header{gap:10px}#date{line-height:1.5}.pill{font-size:calc(8px + var(--small-text-step));line-height:1.6;padding:5px}.tools{flex-wrap:wrap}.tools button{font-size:calc(10px + var(--small-text-step))}.noticeart{font-size:90px}}