:root{--portal-navy:#123753;--portal-blue:#166b8d;--portal-gold:#f4bb4a;--portal-ink:#182b40;--portal-muted:#64748b;--portal-shadow:0 16px 45px rgba(21,46,71,.10)}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:90px}body.portal-page{margin:0;background:#f3f7fa;color:var(--portal-ink);font-family:'Prompt','Sarabun',sans-serif;line-height:1.65}a{text-decoration:none;color:inherit}button,input{font:inherit}.portal-container{width:min(1180px,calc(100% - 48px));margin-inline:auto}.portal-header{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.97);border-bottom:1px solid #e8edf2;box-shadow:0 5px 20px rgba(20,46,71,.05)}.portal-nav{min-height:76px;display:flex;align-items:center;justify-content:space-between;gap:24px}.portal-brand{display:flex;align-items:center;gap:12px;min-width:0}.portal-brand img{width:49px;height:49px;object-fit:contain}.portal-brand strong{display:block;font-size:17px;line-height:1.25;color:#143d54;font-weight:800}.portal-brand small{display:block;font-size:11px;line-height:1.5;color:#64748b}.portal-nav-links{display:flex;align-items:center;gap:9px}.portal-nav-links>a{font-size:13px;font-weight:600;color:#405568;padding:10px 14px;border-radius:12px;transition:background .15s}.portal-nav-links>a:hover,.portal-nav-links>a.is-current{color:#0b5d80;background:#eef6fa}.portal-nav-links>a.portal-nav-login{display:inline-flex;align-items:center;gap:7px;color:white;background:#0e6685;box-shadow:0 6px 16px rgba(10,95,132,.18);padding:10px 17px}.portal-nav-login .material-icons{font-size:19px}.portal-hero{min-height:405px;position:relative;overflow:hidden;background:#143950 url('../img/portal-school-1.jpg') center 54% / cover no-repeat}.portal-hero:before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(9,36,55,.92) 0%,rgba(12,49,69,.82) 34%,rgba(12,42,63,.35) 74%,rgba(12,42,63,.22) 100%)}.portal-hero:after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,rgba(7,35,49,.26),transparent 45%)}.portal-hero-content{position:relative;z-index:1;min-height:405px;display:flex;justify-content:center;flex-direction:column;padding-top:35px;padding-bottom:55px}.portal-hero-copy{max-width:700px}.portal-kicker{display:inline-flex;align-items:center;gap:8px;padding:7px 13px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);border-radius:999px;font-size:11px;letter-spacing:.11em;color:#f2f7fa}.portal-kicker .material-icons{font-size:18px;color:#f6c965}.portal-hero h1{font-size:clamp(38px,5.4vw,68px);line-height:1.1;letter-spacing:-.04em;color:#fff;margin:20px 0 10px;font-weight:800}.portal-hero h1 span{color:#f7c75b}.portal-hero h2{font-size:clamp(21px,2.4vw,30px);line-height:1.4;color:white;margin:0;font-weight:700}.portal-hero p{max-width:560px;color:#e1eaf0;font-size:14px;margin:15px 0 24px}.portal-hero-buttons{display:flex;flex-wrap:wrap;gap:12px}.portal-action{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:13px 18px;border-radius:12px;font-weight:700;font-size:13px;min-height:48px;transition:transform .16s,filter .16s}.portal-action:hover{transform:translateY(-2px);filter:brightness(1.05)}.portal-action .material-icons{font-size:20px}.portal-action-gold{background:linear-gradient(135deg,#fad470,#f3b93e);color:#263b43;box-shadow:0 9px 22px rgba(244,187,74,.23)}.portal-action-outline{background:rgba(4,115,144,.78);color:white;border:1px solid rgba(183,240,252,.47)}.portal-hero-tag{position:absolute;bottom:21px;right:0;display:flex;align-items:center;gap:5px;color:#e2edf0;font-size:11px}.portal-hero-tag .material-icons{font-size:17px}.portal-shortcuts{position:relative;z-index:2;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin-top:-30px;background:white;padding:13px;border-radius:19px;box-shadow:var(--portal-shadow);border:1px solid #e9eff3}.portal-shortcuts>a{display:flex;align-items:center;gap:12px;min-width:0;padding:16px 17px;border-radius:11px}.portal-shortcuts>a+a{border-left:1px solid #e9eef3;border-top-left-radius:0;border-bottom-left-radius:0}.portal-shortcuts>a:hover{background:#edf7fa}.portal-shortcut-icon{display:grid;place-items:center;flex-shrink:0;width:42px;height:42px;border-radius:12px;color:#0b8095;background:#e4f4f7}.portal-shortcut-icon .material-icons{font-size:23px}.portal-shortcuts strong{display:block;font-size:13px;color:#19344a}.portal-shortcuts small{display:block;font-size:11px;color:#7b8a97}.portal-shortcut-arrow{margin-left:auto;color:#7b93a0;font-size:24px}.portal-workspace{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(330px,.9fr);gap:40px;align-items:start;padding-block:62px 70px}.portal-section-label{font-size:11px;font-weight:800;color:#1684a1;letter-spacing:.12em}.portal-intro h2{font-size:clamp(24px,3vw,34px);margin:10px 0;color:#19334b;line-height:1.3}.portal-intro>p{font-size:14px;color:#607486;max-width:580px;margin:0 0 23px}.portal-photo{height:235px;border-radius:19px;background:#c9dce0 url('../img/portal-school-2.jpg') center 53% /cover no-repeat;box-shadow:0 15px 34px rgba(22,58,72,.11)}.portal-info-strip{display:flex;align-items:center;gap:10px;margin-top:18px;padding:13px 15px;color:#3b6679;font-size:12px;background:#eaf4f8;border-radius:12px}.portal-info-strip .material-icons{font-size:20px;color:#1680a0}.portal-login-card{scroll-margin-top:95px;background:#fff;padding:30px;border:1px solid #e5edf2;border-radius:22px;box-shadow:var(--portal-shadow)}.portal-login-head{display:flex;gap:15px;align-items:center;margin-bottom:24px}.portal-login-icon{display:grid;place-items:center;width:58px;height:58px;flex:0 0 58px;border-radius:18px;background:linear-gradient(135deg,#dceff8,#eaf8f7);color:#0a7593}.portal-login-icon .material-icons{font-size:29px}.portal-login-eyebrow{color:#1688a1;font-weight:700;font-size:10px;letter-spacing:.13em}.portal-login-head h2{font-size:21px;margin:0;line-height:1.3;color:#1b3047}.portal-login-head p{font-size:12px;margin:5px 0 0;color:#718194}.portal-field{margin:0 0 17px}.portal-field label{display:block;margin-bottom:7px;font-size:13px;font-weight:700;color:#30495d}.portal-input{display:flex;align-items:center;gap:9px;height:49px;border:1.5px solid #dce6ed;border-radius:12px;padding:0 12px;background:#f9fbfd;transition:border .16s,box-shadow .16s}.portal-input:focus-within{border-color:#1787a0;box-shadow:0 0 0 3px rgba(23,135,160,.12);background:white}.portal-input>.material-icons{font-size:21px;color:#829aa8}.portal-input input{outline:none;border:0;background:transparent;color:#22384a;width:100%;min-width:0;font-size:14px}.portal-input input::placeholder{color:#9aa8b3}.portal-toggle-pass{border:0;background:transparent;padding:5px;color:#77909e;cursor:pointer;display:flex;align-items:center}.portal-toggle-pass .material-icons{font-size:20px}.portal-turnstile{margin:18px 0;overflow:visible;min-height:64px}.portal-remember{display:flex;align-items:flex-start;gap:9px;color:#566a7c;font-size:12px;cursor:pointer;margin-bottom:22px}.portal-remember input{margin-top:3px;width:16px;height:16px;accent-color:#0b7a97;flex:0 0 auto}.portal-submit{display:flex;align-items:center;justify-content:center;gap:11px;width:100%;border:0;border-radius:12px;min-height:51px;padding:12px 20px;background:linear-gradient(135deg,#0f7493,#114b71);color:white;font-size:15px;font-weight:700;cursor:pointer;box-shadow:0 10px 18px rgba(15,103,138,.19)}.portal-submit:hover{filter:brightness(1.08)}.portal-submit .material-icons{font-size:21px}.portal-login-note{display:flex;gap:8px;align-items:center;color:#8092a0;font-size:11px;margin:18px 0 0}.portal-login-note .material-icons{font-size:16px}.portal-error{background:#fff1f2;border:1px solid #fecdd3;border-radius:10px;padding:12px;color:#b4233a;font-size:13px;margin-bottom:18px}.portal-footer{background:#12394f;color:#d5e4ed;padding:21px 0;font-size:11px}.portal-footer .portal-container{display:flex;flex-wrap:wrap;gap:8px 30px;justify-content:space-between}
@media(max-width:850px){.portal-nav{min-height:69px}.portal-nav-links>a:not(.portal-nav-login){display:none}.portal-workspace{grid-template-columns:1fr;gap:30px;padding-top:45px}.portal-intro{order:2}.portal-login-card{order:1}.portal-shortcuts{grid-template-columns:1fr 1fr}.portal-shortcuts>a:last-child{grid-column:1/-1;border-top:1px solid #e9eef3;border-left:0}.portal-hero{background-position:62% center}}
@media(max-width:550px){.portal-container{width:min(100% - 28px,1180px)}.portal-brand strong{font-size:14px}.portal-brand small{font-size:9.5px}.portal-brand img{width:42px;height:42px}.portal-nav-links>a.portal-nav-login{font-size:12px;padding:9px 11px}.portal-nav-login .material-icons{display:none}.portal-hero,.portal-hero-content{min-height:440px}.portal-hero:before{background:linear-gradient(90deg,rgba(9,36,55,.94),rgba(12,49,69,.72))}.portal-hero-content{padding-top:36px;padding-bottom:70px}.portal-hero h1{font-size:40px}.portal-hero h2{font-size:21px}.portal-hero p{font-size:12px}.portal-action{width:100%;font-size:12.5px}.portal-hero-tag{right:auto;left:0;font-size:10px}.portal-shortcuts{grid-template-columns:1fr;padding:8px}.portal-shortcuts>a{padding:12px}.portal-shortcuts>a+a,.portal-shortcuts>a:last-child{grid-column:auto;border-left:0;border-top:1px solid #e9eef3}.portal-workspace{padding-block:36px 50px}.portal-login-card{padding:21px 18px}.portal-login-head h2{font-size:18px}.portal-photo{height:190px}.portal-footer .portal-container{display:block}.portal-footer .portal-container>span{display:block;margin:4px 0}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.portal-action,.portal-submit{transition:none}}


/* Slow cinematic zoom on school photograph; overlays and content stay still. */
.portal-hero { isolation: isolate; background-image: none; }
.portal-hero-media {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: #143950 url('../img/portal-school-1.jpg') center 54% / cover no-repeat;
  transform: scale(1);
  transform-origin: 55% 50%;
  animation: portal-hero-ken-burns 14s ease-in-out infinite alternate;
  will-change: transform;
  pointer-events: none;
}
@keyframes portal-hero-ken-burns {
  from { transform: scale(1); }
  to { transform: scale(1.15); }
}
@media (max-width: 850px) {
  .portal-hero-media { background-position: 62% center; }
}
@media (prefers-reduced-motion: reduce) {
  .portal-hero-media { animation: none; will-change: auto; }
}

/* Clock overlay: readable on top of the school photo without interfering with links. */
.portal-hero-clock {
  position:absolute; right:0; top:50%; transform:translateY(-50%);
  display:flex; flex-direction:column; align-items:center; min-width:275px;
  padding:20px 23px; border:1px solid rgba(255,255,255,.28);
  border-radius:18px; background:rgba(7,35,53,.48); color:#fff;
  box-shadow:0 15px 42px rgba(0,0,0,.13); backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px); font-variant-numeric:tabular-nums;
}
.portal-clock-caption {display:flex;align-items:center;gap:6px;font-size:13px;color:#dcebf2;font-weight:600}
.portal-clock-caption .material-icons {font-size:17px;color:#f7cb65}
.portal-clock-time {display:block;font-family:'Prompt',sans-serif;font-size:clamp(38px,4vw,60px);line-height:1.32;font-weight:800;letter-spacing:.015em;text-shadow:0 3px 15px rgba(0,0,0,.28);white-space:nowrap}
.portal-clock-date {font-size:11px;color:#e2eef5;text-align:center}
@media(max-width:1000px){.portal-hero-clock{min-width:230px;padding:15px 16px;top:16px;right:0;transform:none}.portal-clock-time{font-size:39px}.portal-hero-copy{max-width:630px}.portal-hero-content{padding-top:100px}}
@media(max-width:650px){.portal-hero-clock{position:relative;right:auto;top:auto;transform:none;align-self:flex-start;min-width:0;width:100%;margin-top:20px;padding:10px 14px}.portal-clock-time{font-size:40px}.portal-clock-date{font-size:10px}.portal-hero-content{padding-top:29px;padding-bottom:65px}.portal-hero,.portal-hero-content{min-height:550px}.portal-hero-tag{bottom:16px}}


/* Clock moved to left information column, directly above the school photo. */
.portal-intro .portal-hero-clock {
  position: relative;
  inset: auto;
  top: auto;
  right: auto;
  transform: none;
  width: 100%;
  min-width: 0;
  margin: 0 0 16px;
  padding: 18px 24px;
  border-color: rgba(255,255,255,.16);
  border-radius: 18px;
  background: linear-gradient(120deg,#103e5b,#086e83);
  box-shadow: 0 12px 28px rgba(12,62,89,.15);
}
.portal-intro .portal-clock-time {font-size: clamp(42px, 5vw, 62px)}
.portal-intro .portal-clock-date {font-size: 12px}
/* Hero no longer needs extra vertical space for its former clock. */
@media (max-width:1000px) {
  .portal-hero-content {padding-top:35px}
}
@media (max-width:650px) {
  .portal-hero,.portal-hero-content {min-height:440px}
  .portal-hero-content {padding-top:36px;padding-bottom:70px}
  .portal-intro .portal-hero-clock {margin-top:0;padding:16px 18px}
  .portal-intro .portal-clock-time {font-size:clamp(38px,9vw,52px)}
}

/* Portal depth refresh: dark school brand bar and softly graded surfaces. */
.portal-header {
  background: linear-gradient(110deg,#092f49 0%,#105373 58%,#0d6680 100%);
  border-bottom: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 9px 25px rgba(6,36,59,.24);
}
.portal-brand strong { color:#fff; text-shadow:0 1px 5px rgba(0,0,0,.12); }
.portal-brand small { color:#d0e7f1; }
.portal-brand img { filter:drop-shadow(0 3px 9px rgba(0,0,0,.22)); }
.portal-nav-links>a { color:#e9f4f9; }
.portal-nav-links>a:hover,.portal-nav-links>a.is-current {
  background:rgba(255,255,255,.15); color:#fff;
}
.portal-nav-links>a.portal-nav-login {
  background:linear-gradient(130deg,#f8cc67,#edae35);
  color:#19364a; box-shadow:0 6px 17px rgba(0,0,0,.2);
}
.portal-nav-links>a.portal-nav-login:hover {background:linear-gradient(130deg,#ffdd83,#f2b943);color:#142f42;}
body.portal-page {
  background:linear-gradient(160deg,#edf6fb 0%,#f9fbfe 48%,#eaf3f8 100%);
}
.portal-shortcuts {
  background:linear-gradient(130deg,#fff 0%,#eff8fc 100%);
  border:1px solid rgba(172,207,224,.62);
  box-shadow:0 16px 40px rgba(12,54,82,.15),0 2px 5px rgba(12,54,82,.05);
}
.portal-shortcuts>a {transition:background .2s ease,transform .2s ease,box-shadow .2s ease;}
.portal-shortcuts>a:hover {
  background:linear-gradient(125deg,#dff4fa,#edf9fc);
  transform:translateY(-2px);
  box-shadow:0 8px 22px rgba(11,86,116,.1);
}
.portal-shortcut-icon {
  background:linear-gradient(145deg,#d2f1f7,#e5f8fb);
  box-shadow:inset 0 1px 1px #fff,0 4px 10px rgba(17,101,128,.09);
}
.portal-login-card {
  background:linear-gradient(145deg,#fff 0%,#f0f8fc 100%);
  border:1px solid #d6e9f3;
  box-shadow:0 22px 50px rgba(18,62,89,.15),0 3px 9px rgba(18,62,89,.045);
}
.portal-login-icon {box-shadow:inset 0 1px 0 #fff,0 8px 18px rgba(9,100,133,.12)}
.portal-intro .portal-hero-clock {
  background:linear-gradient(125deg,#092e4d 0%,#105576 58%,#08788a 100%);
  box-shadow:0 17px 34px rgba(8,54,80,.22);
}
.portal-photo {box-shadow:0 19px 36px rgba(16,70,92,.19),0 3px 10px rgba(16,70,92,.07);}
.portal-info-strip {
  background:linear-gradient(110deg,#e0f2fb,#f4fbfd);
  border:1px solid #cde5f1;
  box-shadow:0 7px 18px rgba(15,79,112,.06);
}
@media(prefers-reduced-motion:reduce){.portal-shortcuts>a{transition:none}}

/* CMR branding: red / grey / white. Overrides only Portal page. */
:root{--portal-ink:#2b2225;--portal-shadow:0 18px 42px rgba(71,29,36,.13)}
body.portal-page{background:linear-gradient(145deg,#f2f0f1 0%,#fff 45%,#eae6e7 100%);color:#31252a}
.portal-header{background:linear-gradient(105deg,#510c17 0%,#861c2a 52%,#ad3945 100%);box-shadow:0 9px 28px rgba(73,13,25,.29)}
.portal-brand strong{color:#fff}.portal-brand small{color:#f5dee1}
.portal-nav-links>a{color:#fff5f6}.portal-nav-links>a:hover,.portal-nav-links>a.is-current{background:rgba(255,255,255,.18);color:#fff}
.portal-nav-links>a.portal-nav-login{background:linear-gradient(135deg,#fff,#e8e3e5);color:#721822;box-shadow:0 7px 18px rgba(40,7,12,.2)}
.portal-nav-links>a.portal-nav-login:hover{background:#fff;color:#570b15}
.portal-hero:before{background:linear-gradient(90deg,rgba(44,8,16,.95) 0%,rgba(89,16,30,.80) 50%,rgba(35,27,31,.38) 100%)}
.portal-hero-media{background-position:center 48%}
.portal-kicker{color:#fbe7e9}.portal-kicker .material-icons{color:#ffe5e8}
.portal-hero h1 span{color:#ffb2bc}.portal-hero p{color:#fff0f1}
.portal-action-gold{background:linear-gradient(135deg,#f9e7e9,#ffffff);color:#761824;box-shadow:0 8px 20px rgba(24,7,12,.19)}
.portal-action-outline{background:linear-gradient(130deg,#992536,#771723);color:white;border:1px solid rgba(255,228,233,.5)}
.portal-shortcuts{background:linear-gradient(130deg,#fff,#faf4f5);border:1px solid #eee0e2;box-shadow:0 14px 36px rgba(62,20,28,.13)}
.portal-shortcuts>a:hover{background:linear-gradient(120deg,#fbe7e9,#fff3f4);box-shadow:0 8px 22px rgba(105,20,36,.11)}
.portal-shortcuts>a+a{border-color:#e9dde0}.portal-shortcut-icon{background:linear-gradient(130deg,#ffe4e8,#f4d5d9);color:#922333;box-shadow:inset 0 1px 1px white,0 4px 10px rgba(119,30,43,.09)}
.portal-shortcuts strong,.portal-intro h2,.portal-login-head h2{color:#312329}
.portal-section-label,.portal-login-eyebrow{color:#a02a3b}
.portal-intro .portal-hero-clock{background:linear-gradient(120deg,#4b0c17,#811c2c 62%,#aa3946);box-shadow:0 17px 34px rgba(86,18,32,.24)}
.portal-clock-caption .material-icons{color:#ffe0e4}
.portal-photo{background-position:center center;box-shadow:0 18px 36px rgba(68,28,34,.18),0 3px 9px rgba(68,28,34,.08)}
.portal-info-strip{background:linear-gradient(120deg,#f5e7e9,#fff8f9);border:1px solid #ebd4d8;color:#6d3d46}
.portal-info-strip .material-icons{color:#95273a}
.portal-login-card{background:linear-gradient(140deg,#fff 0%,#fcf3f4 100%);border:1px solid #ecdadf;box-shadow:0 22px 50px rgba(81,20,33,.14),0 3px 8px rgba(81,20,33,.05)}
.portal-login-icon{background:linear-gradient(130deg,#ffe3e7,#f7d0d6);color:#942336}
.portal-field label{color:#513840}.portal-input:focus-within{border-color:#a12a3c;box-shadow:0 0 0 3px rgba(161,42,60,.14)}
.portal-remember input{accent-color:#922333}
.portal-submit{background:linear-gradient(125deg,#aa3544,#751625 78%);box-shadow:0 10px 24px rgba(123,25,41,.24)}
.portal-footer{background:linear-gradient(115deg,#46101a,#731c29);color:#f7e5e8}
@media(max-width:550px){.portal-hero:before{background:linear-gradient(90deg,rgba(51,9,17,.94),rgba(94,19,35,.78))}}