/* Template 1 styles, ported from the approved mockup. Brand colours come in as CSS variables from the page head. */

:root{
  --bg:#ffffff; --surface:#f2f2f0; --ink:#0a0a0a; --muted:#3d3d3d;
  --blue:#2436ff; --red:#ff3b1f; --black:#0a0a0a; --navy:#050a5c; --paper:#ffffff;
  --m:clamp(16px,3vw,40px);
  --display:'Source Serif 4', Georgia, serif;
  --text:'Jost', system-ui, sans-serif;
  --s-small:1rem;
  --s-body:1.125rem;
  --s-lead:1.5rem;
  --s-head:clamp(2.25rem,1.5rem + 2.2vw,3.5rem);
  --s-display:clamp(56px,8.4vw,132px);
  --ease:cubic-bezier(.2,.7,.1,1);
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--text);font-size:var(--s-body);line-height:1.55;font-weight:450}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
h1,h2,h3{font-family:var(--display);font-weight:600;letter-spacing:-0.02em;margin:0;line-height:1.05}
.wrap{max-width:1440px;margin:0 auto;padding-inline:var(--m)}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:12px 22px;background:var(--blue);color:#fff;text-decoration:none;border:0;cursor:pointer;font:600 var(--s-small)/1.2 var(--text);letter-spacing:.02em;transition:transform .18s var(--ease),background-color .18s}
.btn:hover{transform:translateY(-2px)}
.btn.light{background:#fff;color:var(--ink)}
.btn.red{background:var(--red);color:var(--on-red)}
.more{font-weight:600;text-underline-offset:5px}
.sec{padding-block:clamp(88px,9vw,150px)}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:40px}
.sec-head h2{font-size:var(--s-head)}
.sec-head p{margin:10px 0 0;max-width:52ch}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips button{min-height:44px;padding:10px 16px;border:0;background:var(--surface);font:500 var(--s-small)/1.2 var(--text);cursor:pointer;transition:background-color .18s,transform .18s}
.chips button:hover{transform:translateY(-2px)}
.chips button[aria-pressed="true"]{background:var(--ink);color:#fff}

/* status strip */
.strip{background:var(--black);color:#fff;font-size:var(--s-small)}
.strip .wrap{display:flex;gap:28px;align-items:center;padding-block:10px;flex-wrap:wrap}
.strip .bld{display:flex;gap:20px;flex-wrap:wrap}
.dot{display:inline-block;width:10px;height:10px;border-radius:50%;background:#3ddc84;margin-right:7px;vertical-align:1px}
.snow .strip{background:var(--red);color:var(--on-red)}
.snow .dot{background:var(--ink)}

/* header */
.nav{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-block:16px}
.mark{font-family:var(--display);font-weight:700;font-size:var(--s-lead);text-decoration:none;letter-spacing:-0.01em;line-height:1}
.mark small{display:block;font:500 var(--s-small)/1.3 var(--text);letter-spacing:0;margin-top:4px}
.links{display:flex;gap:28px;font-size:var(--s-small)}
.links a{text-decoration:none;padding:12px 0}
.links a:hover{text-decoration:underline;text-underline-offset:6px}
.navend{display:flex;gap:10px;align-items:center}

/* hero: full-bleed photo, title low-left, today panel right */
.hero{position:relative;min-height:calc(100svh - 110px);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;align-items:end;padding:0 var(--m) 40px;overflow:hidden;color:#fff}
.hero>img{position:absolute;inset:0;width:100%;height:100%!important;object-fit:cover;object-position:50% 30%;animation:drift 22s ease-in-out infinite alternate}
@keyframes drift{from{transform:scale(1.02)}to{transform:scale(1.1)}}
.hero::after{/* taste-skill-ignore: neutral scrim over photo */content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(to top right,rgba(5,10,40,.8) 0%,rgba(5,10,40,.4) 38%,rgba(5,10,40,0) 65%)}
.hero .title{position:relative;z-index:2;grid-column:1/8;padding-bottom:12px}
.hero h1{font-weight:700;font-size:var(--s-display);line-height:.92}
.hero h1 .ln{display:block;overflow:hidden}
.hero h1 .ln span{display:block;animation:rise .9s var(--ease) both}
.hero h1 .ln:nth-child(2) span{animation-delay:.11s}
@keyframes rise{from{transform:translateY(105%)}to{transform:none}}
.hero .sub{margin:20px 0 28px;font-size:var(--s-lead);line-height:1.35;max-width:30ch;animation:fade .7s .45s var(--ease) both}
.hero .acts{display:flex;gap:10px;flex-wrap:wrap;animation:fade .7s .55s var(--ease) both}
@keyframes fade{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.today{position:relative;z-index:2;grid-column:9/13;background:var(--paper);color:var(--ink);padding:28px;animation:fade .7s .65s var(--ease) both}
.today h2{font-size:var(--s-lead);line-height:1.2;margin-bottom:6px}
.today .big{font-family:var(--display);font-size:var(--s-head);line-height:1.08;margin:16px 0 18px}
.today dl{margin:0;display:grid;grid-template-columns:auto 1fr;column-gap:18px;row-gap:10px;font-size:var(--s-small)}
.today dt{font-weight:600}
.today dd{margin:0}
.today .toggle{margin-top:18px;width:100%;min-height:48px;border:0;background:var(--surface);font:500 var(--s-small)/1.2 var(--text);cursor:pointer}
.snow .today .toggle{background:var(--red)}

/* find it fast */
.find{background:var(--blue);color:#fff}
.find .wrap{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:32px;padding-block:72px}
.find .q{grid-column:1/6}
.find h2{font-size:var(--s-head);margin-bottom:20px}
.search{display:flex;background:#fff}
.search label{flex:1}
.search input{width:100%;height:60px;border:0;padding:0 18px;font:inherit;font-size:var(--s-body);color:var(--ink)}
.search button{border:0;background:var(--ink);color:#fff;padding:0 22px;font:600 var(--s-small) var(--text);cursor:pointer}
.find .q p{margin:14px 0 0;font-size:var(--s-small)}
.aud{grid-column:6/13;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.aud h3{font-size:var(--s-lead);margin-bottom:12px}
.aud ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.aud a{display:block;padding:7px 0;text-decoration:none;font-size:var(--s-body)}
.aud a:hover{text-decoration:underline;text-underline-offset:5px}

/* front page */
.front{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:40px}
.lead{grid-column:1/8}
.lead .ph{overflow:hidden}
.lead img{width:100%;aspect-ratio:16/9;object-fit:cover;object-position:50% 28%;transition:transform 1.2s var(--ease)}
.lead:hover img{transform:scale(1.03)}
.lead h3{font-size:var(--s-head);margin:16px 0 12px}
.lead p{margin:0;font-size:var(--s-lead);line-height:1.4;max-width:40ch}
.lead .by{margin-top:14px;font-size:var(--s-small);color:var(--muted)}
.tops{grid-column:8/13;grid-row:1/3;display:flex;flex-direction:column;gap:28px}
.brief{grid-column:1/8;background:var(--surface);padding:28px 32px}
.brief h3{font-size:var(--s-lead);margin-bottom:12px}
.brief ul{margin:0;padding-left:20px;display:grid;grid-template-columns:1fr 1fr;gap:10px 32px}
.story{display:grid;grid-template-columns:168px 1fr;gap:18px;align-items:start;text-decoration:none}
.story img{width:168px;aspect-ratio:4/3;object-fit:cover}
.story h3{font-size:var(--s-lead);line-height:1.15;margin:4px 0 6px;transition:color .18s}
.story:hover h3{color:var(--blue)}
.story p{margin:0;font-size:var(--s-small);color:var(--muted)}
.tops .sb{background:var(--surface);padding:22px}
.tops .sb h3{font-size:var(--s-lead);margin-bottom:10px}
.tops .sb ul{margin:0;padding:0 0 0 18px;display:flex;flex-direction:column;gap:6px;font-size:var(--s-small)}

/* athletics */
.ath{background:var(--navy);color:#fff}
.photos{display:grid;grid-template-columns:2fr 1fr 1fr;grid-auto-rows:max(52vh,360px);gap:8px;overflow:hidden}
.photos img{width:100%;height:100%;min-height:0;object-fit:cover}
.ath .sec{padding-top:72px}
.ath .sec-head p{color:#e1e4f7}
.board{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px;padding-bottom:56px}
.score{display:flex;flex-direction:column;gap:4px}
.score .res{font-family:var(--display);font-size:clamp(44px,4.4vw,72px);line-height:1;margin-bottom:10px}
.score b{font-weight:600}
.score .o{font-size:var(--s-small);color:#e1e4f7}
.live{color:#ff8a78;font-weight:600;animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{50%{opacity:.4}}
.athx{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:0}
.results{grid-column:1/8;padding:40px 48px 40px 0}
.buses{grid-column:8/13;background:#0c1478;padding:40px}
.athx h3{font-size:var(--s-head)}
.src{font-size:var(--s-small);color:#e1e4f7;margin:8px 0 24px}
.rank{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:18px}
.rank li{display:grid;grid-template-columns:72px 1fr auto;column-gap:16px;row-gap:2px;align-items:center}
.rank .pl{font-family:var(--display);font-size:48px;line-height:1}
.rank b{font-size:var(--s-lead);font-weight:500}
.rank .tm{font-variant-numeric:tabular-nums;font-size:var(--s-lead)}
.rank .rk{grid-column:2/4;grid-row:2;font-size:var(--s-small);color:#e1e4f7}
.line{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:22px}
.line li{position:relative;display:flex;flex-direction:column;gap:2px;padding-left:22px}
.line li::before{content:"";position:absolute;left:0;top:4px;bottom:4px;width:4px;background:var(--red)}
.line .when{font-size:var(--s-small);color:#e1e4f7}
.line b{font-size:var(--s-lead);font-weight:500;line-height:1.25}
.line .o{font-size:var(--s-small)}
.ok{color:#7ef0b0}.late{color:#ffb4a6}

/* week + lunch */
.week{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:40px;align-items:start}
.cal{grid-column:1/8}
.day{display:grid;grid-template-columns:120px 1fr;gap:20px;padding:18px 0}
.day h3{font-size:var(--s-lead)}
.day ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.day li{display:grid;grid-template-columns:1fr auto;column-gap:16px}
.day li b{font-weight:500}
.day li .t{font-variant-numeric:tabular-nums}
.day li .w{grid-column:1/-1;font-size:var(--s-small);color:var(--muted)}
.lunch{grid-column:8/13;background:var(--red);color:var(--on-red);padding:0 0 28px}
.lunch img{width:100%;aspect-ratio:16/10;object-fit:cover}
.lunch .in{padding:24px 28px 0}
.lunch h3{font-size:var(--s-head);margin-bottom:8px}
.lunch p{margin:0 0 16px}
.menu{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.menu li{display:grid;grid-template-columns:96px 1fr;gap:12px}
.menu b{font-weight:600}

/* schools */
.schools{background:var(--surface)}
.sch{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:48px 40px}
.sch article{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:start}
.sch img{width:100%;aspect-ratio:4/5;object-fit:cover}
.sch h3{font-size:var(--s-lead);margin-bottom:6px}
.sch .gr{font-size:var(--s-small);font-weight:600;color:var(--blue)}
.sch p{margin:10px 0;font-size:var(--s-small)}
.sch dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:var(--s-small)}
.sch dt{font-weight:600}.sch dd{margin:0}

/* notices */
.notes{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:8px}
.note{display:flex;flex-direction:column;justify-content:space-between;gap:20px;padding:28px;min-height:280px;text-decoration:none;transition:transform .2s var(--ease)}
.note:hover{transform:translateY(-4px)}
.note h3{font-size:var(--s-lead)}
.note p{margin:0;font-size:var(--s-small)}
.n1{grid-column:1/6;background:var(--black);color:#fff}
.n2{grid-column:6/9;background:var(--blue);color:#fff}
.n3{grid-column:9/13;background:var(--surface)}
.n4{grid-column:1/5;background:var(--surface)}
.n5{grid-column:5/13;background:var(--red);color:var(--on-red)}
.count{font-family:var(--display);font-size:var(--s-head);line-height:1}
.note img{width:calc(100% + 56px);max-width:none;margin:-28px -28px 0;aspect-ratio:16/9;object-fit:cover}
.ag{margin:10px 0 12px;padding-left:20px;font-size:var(--s-small)}

/* alerts */
.reply{background:var(--navy);color:#fff;overflow:hidden}
.reply .wrap{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;padding-top:110px;align-items:start}
.pitch{grid-column:1/6;padding-bottom:96px}
.pitch h2{font-size:var(--s-head);margin-bottom:18px}
.pitch p{margin:0 0 18px;font-size:var(--s-lead);line-height:1.4}
.pitch ul{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:6px}
.card{grid-column:7/13;background:#fff;color:var(--ink);padding:48px 48px 100px;text-align:center;transform:rotate(2deg);margin-bottom:-56px;display:flex;flex-direction:column;gap:12px}
.card h3{font-size:var(--s-head)}
.card p{margin:0}
.card form{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}
.card label{display:flex;flex-direction:column;text-align:left;font-size:var(--s-small);gap:4px}
.card input{height:52px;border:0;background:var(--surface);padding:0 14px;font:inherit}
.card .send{grid-column:1/-1;height:56px;border:0;background:var(--ink);color:#fff;font:600 var(--s-body) var(--text);cursor:pointer}

/* footer */
footer{background:var(--black);color:#fff;padding:96px var(--m) 32px}
.blocks{max-width:1360px;margin:0 auto;height:30svh;min-height:190px;display:flex;align-items:flex-end;gap:4px}
.blocks span{flex:1;display:flex;align-items:flex-end;justify-content:center;font-family:var(--display);font-weight:700;font-size:var(--s-display);line-height:.78;overflow:hidden}
.fcols{max-width:1360px;margin:56px auto 0;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;font-size:var(--s-small)}
.fcols div{display:flex;flex-direction:column;gap:8px;grid-column:span 2}
.fcols .contact{grid-column:9/13}
.fcols a{text-decoration:none}.fcols a:hover{text-decoration:underline}
.legal{max-width:1360px;margin:48px auto 0;font-size:var(--s-small);color:#c4c4c4}
.legal p{margin:0;max-width:72ch}

.js .rv{opacity:0;transform:translateY(26px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js .rv.d1{transition-delay:.08s}.js .rv.d2{transition-delay:.16s}
.js .rv.on{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

@media (max-width: 960px){
  :root{--s-display:12.5vw;--s-head:2.25rem;--s-lead:1.3rem}
  .links{display:none}
  .navend .btn{display:none}
  .hero{grid-template-columns:1fr;min-height:0;padding-top:42vh}
  .hero .title,.today{grid-column:1/-1}
  .find .wrap{grid-template-columns:1fr;padding-block:56px}
  .find .q,.aud{grid-column:1/-1}
  .aud{grid-template-columns:1fr 1fr}
  .front,.week{grid-template-columns:1fr}
  .lead,.tops,.cal,.lunch{grid-column:1/-1}
  .story{grid-template-columns:96px 1fr}.story img{width:96px}
  .photos{grid-template-columns:1fr 1fr;grid-auto-rows:auto}
  .photos img{aspect-ratio:4/3;height:auto}
  .photos img:first-child{grid-column:1/-1}
  .board{grid-template-columns:1fr;gap:44px;padding-bottom:80px}
  .score{display:grid;grid-template-columns:1fr auto;column-gap:16px;align-items:center}
  .score .res{grid-column:2;grid-row:1/3;margin:0;font-size:30px}
  .score b,.score .o{grid-column:1}
  .athx{grid-template-columns:1fr}
  .results,.buses{grid-column:1/-1}
  .results{padding:0 0 64px}
  .buses{padding:32px 24px}
  .front .brief{grid-column:1/-1}.tops{grid-row:auto}
  .brief ul{grid-template-columns:1fr}
  .day{grid-template-columns:1fr;gap:10px}
  .sch{grid-template-columns:1fr}
  .notes{grid-template-columns:1fr 1fr}
  .note{grid-column:auto!important;min-height:200px}
  .n1,.n5{grid-column:1/-1!important}
  .reply .wrap{grid-template-columns:1fr;padding-top:64px}
  .pitch,.card{grid-column:1/-1}
  .pitch{padding-bottom:48px}
  .card{transform:rotate(1deg);padding:32px 20px 92px}
  .card form{grid-template-columns:1fr}
  .fcols div{grid-column:span 6}.fcols .contact{grid-column:1/-1}
  .blocks{height:20svh}
  .blocks span{font-size:16vw}
}
@media (max-width: 520px){
  .aud{grid-template-columns:1fr}
  .sch article{grid-template-columns:1fr}
  .sch img{aspect-ratio:16/10}
}
/* Tablet and phone: notice tiles stack, so give each its own breathing room. */
@media (max-width:960px){.notes{row-gap:40px}.note .count{font-size:clamp(28px,6vw,40px)}}