/* ============================================================
   SZABUL ALUMNI PORTAL — theme
   Palette : crest green #0d4f37 · parchment #f5f3ea · ink #1d2a23
             medal gold #c29a3c · banner purple #4b3f8f
   Type    : Cormorant Garamond (display) + Public Sans (body)
   Signature: stacked "convocation plates" + seal rule dividers,
              echoing the university's own convocation banner.
   ============================================================ */
:root{
  --green:#0d4f37; --green-dark:#093a28; --green-soft:#e3ede7;
  --ink:#1d2a23; --muted:#65705f;
  --parchment:#f5f3ea; --card:#ffffff; --line:#e0dccb;
  --gold:#c29a3c; --gold-soft:#f3e9cf;
  --purple:#4b3f8f;
  --danger:#a33b2e; --ok:#1e6b46;
  --radius:6px;
  --shadow:0 2px 14px rgba(20,40,30,.08);
  --font-display:'Cormorant Garamond',Georgia,serif;
  --font-body:'Public Sans','Segoe UI',Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{margin:0;background:var(--parchment);color:var(--ink);font-family:var(--font-body);font-size:15px;line-height:1.6}
img{max-width:100%}
a{color:var(--green);text-decoration:none}
a:hover{color:var(--green-dark);text-decoration:underline}
h1,h2,h3,.display{font-family:var(--font-display);font-weight:600;color:var(--green-dark);line-height:1.15;margin:0 0 .5rem}
h1{font-size:2.4rem} h2{font-size:1.8rem} h3{font-size:1.3rem}
.container{max-width:1180px;margin:0 auto;padding:0 20px}
.muted{color:var(--muted)} .small{font-size:.85rem}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px}

/* ---------- eyebrow + seal rule (signature) ---------- */
.eyebrow{display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin-bottom:.4rem}
.seal-rule{display:flex;align-items:center;gap:12px;margin:10px 0 26px;max-width:340px}
.seal-rule::before,.seal-rule::after{content:"";flex:1;border-top:1px solid var(--green);border-bottom:1px solid var(--green);height:3px}
.seal-rule span{color:var(--gold);font-size:.95rem;line-height:1}
.seal-rule.center{margin-left:auto;margin-right:auto}

/* ---------- plates (from the convocation banner) ---------- */
.plates{display:inline-flex;flex-direction:column;align-items:flex-start;gap:6px}
.plate{display:inline-block;padding:.4rem 1.1rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#fff;font-size:.95rem}
.plate.green{background:var(--green)}
.plate.purple{background:var(--purple);font-size:.8rem;letter-spacing:.2em}

/* ---------- header ---------- */
.topbar{background:var(--green-dark);color:#cfe2d7;font-size:.78rem;letter-spacing:.06em}
.topbar .container{display:flex;justify-content:space-between;padding-top:6px;padding-bottom:6px}
.topbar a{color:#e9d8a8}
header.site{background:#fff;border-bottom:3px solid var(--green);position:sticky;top:0;z-index:50;box-shadow:0 1px 0 var(--line)}
.nav-wrap{display:flex;align-items:center;gap:18px;padding:10px 0;flex-wrap:nowrap}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none!important}
.brand img{height:48px;width:auto;flex-shrink:0}
.brand{flex-shrink:0}
.brand .t1{font-family:var(--font-display);font-size:1.22rem;font-weight:700;color:var(--green-dark);line-height:1.05;white-space:nowrap}
.brand .t2{font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);font-weight:700;white-space:nowrap}
nav.main{margin-left:auto;display:flex;gap:0;flex-wrap:nowrap;align-items:center}
nav.main a{padding:.55rem .6rem;color:var(--ink);font-weight:700;font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;border-radius:var(--radius);white-space:nowrap}
nav.main a:hover{background:var(--green-soft);text-decoration:none;color:var(--green)}
nav.main a.active{color:var(--green);box-shadow:inset 0 -3px 0 var(--gold)}
.nav-cta{display:flex;gap:10px;align-items:center;flex-shrink:0}
.btn{display:inline-flex;align-items:center;justify-content:center;line-height:1;white-space:nowrap;border:1.5px solid transparent;cursor:pointer;font-family:var(--font-body);font-weight:700;font-size:.88rem;letter-spacing:.03em;padding:.62rem 1.25rem;border-radius:var(--radius);background:var(--green);color:#fff;text-decoration:none!important;transition:background .15s,box-shadow .15s,transform .12s}
.btn:hover{box-shadow:0 4px 14px rgba(13,79,55,.25);transform:translateY(-1px)}
.btn:hover{background:var(--green-dark);color:#fff}
.btn.gold{background:var(--gold);color:#2c2410}
.btn.gold:hover{background:#a98430;color:#fff}
.btn.ghost{background:transparent;color:var(--green);border-color:var(--green)}
.btn.ghost:hover{background:var(--green-soft)}
.btn.danger{background:var(--danger)} .btn.danger:hover{background:#7e2c21}
.btn.sm{padding:.45rem .85rem;font-size:.74rem;letter-spacing:.05em;text-transform:uppercase}

/* ---------- hero ---------- */
.hero{position:relative;color:#fff;overflow:hidden;background:var(--green-dark)}
.hero .bg{position:absolute;inset:0;background-size:cover;background-position:center 30%;filter:saturate(.95)}
.hero .scrim{position:absolute;inset:0;background:linear-gradient(100deg,rgba(7,38,26,.93) 0%,rgba(7,38,26,.72) 45%,rgba(7,38,26,.25) 100%)}
.hero .container{position:relative;padding-top:84px;padding-bottom:84px;max-width:1180px}
.hero h1{color:#fff;font-size:3rem;max-width:640px;margin:.6rem 0 1rem}
.hero p{max-width:540px;color:#dce9e1;font-size:1.04rem}
.hero .actions{margin-top:1.6rem;display:flex;gap:12px;flex-wrap:wrap}

/* stats strip */
.stats{background:var(--green);color:#fff}
.stats .container{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(255,255,255,.18)}
.stats .cell{background:var(--green);padding:20px 14px;text-align:center}
.stats .n{font-family:var(--font-display);font-size:2rem;font-weight:700;color:var(--gold-soft)}
.stats .l{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:#bcd6c8}

/* ---------- sections & cards ---------- */
section.block{padding:54px 0}
.grid{display:grid;gap:22px}
.grid.c2{grid-template-columns:1fr 1fr}
.grid.c3{grid-template-columns:repeat(3,1fr)}
.grid.c4{grid-template-columns:repeat(4,1fr)}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);transition:box-shadow .18s,transform .18s}
section.block .grid>.card:hover{box-shadow:0 10px 26px rgba(29,42,35,.12);transform:translateY(-3px)}
.card .pad{padding:20px 22px}
.card h3 a{color:var(--green-dark)}
.news-date{font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);font-weight:700}
.card-body-clamp{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;color:var(--muted);font-size:.9rem}

/* gallery */
.gal{columns:4 240px;column-gap:14px}
.gal>*{break-inside:avoid;margin-bottom:14px}
.gal a{display:block;position:relative;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);background:#000}
.gal img{display:block;width:100%;height:auto;transition:transform .25s,opacity .25s}
.gal a:hover img{transform:scale(1.04);opacity:.88}
.gal .cap{position:absolute;left:0;right:0;bottom:0;padding:24px 10px 8px;background:linear-gradient(transparent,rgba(7,38,26,.85));color:#fff;font-size:.78rem}
.cat-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px}
.cat-tabs a{padding:.35rem .9rem;border:1.5px solid var(--green);border-radius:99px;font-size:.82rem;font-weight:600}
.cat-tabs a.active{background:var(--green);color:#fff;text-decoration:none}

/* ---------- forms ---------- */
label{display:block;font-weight:600;font-size:.84rem;margin:0 0 .3rem;color:var(--green-dark)}
input[type=text],input[type=email],input[type=password],input[type=date],input[type=number],input[type=file],select,textarea{
  width:100%;padding:.6rem .75rem;border:1px solid #c9c4b0;border-radius:var(--radius);background:#fff;color:var(--ink);
  font-family:var(--font-body);font-size:.92rem}
input:focus,select:focus,textarea:focus{border-color:var(--green);outline:2px solid rgba(13,79,55,.18)}
.form-row{margin-bottom:16px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 22px}
.field-validation-error{color:var(--danger);font-size:.8rem;display:block;margin-top:.2rem}
.validation-summary-errors{background:#fbeae7;border:1px solid #e7c0b8;color:var(--danger);border-radius:var(--radius);padding:10px 14px;margin-bottom:16px}
.validation-summary-errors ul{margin:0;padding-left:18px}
.input-validation-error{border-color:var(--danger)!important}
.help{font-size:.78rem;color:var(--muted);margin-top:.2rem}

/* alerts */
.alert{border-radius:var(--radius);padding:11px 16px;margin:0 0 18px;font-weight:600;font-size:.9rem;border:1px solid}
.alert.ok{background:#e7f3ec;border-color:#bcd9c8;color:var(--ok)}
.alert.err{background:#fbeae7;border-color:#e7c0b8;color:var(--danger)}

/* ---------- tables ---------- */
table.list{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;font-size:.88rem}
table.list th{background:var(--green);color:#fff;text-align:left;padding:.6rem .8rem;font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
table.list td{padding:.55rem .8rem;border-top:1px solid var(--line);vertical-align:middle}
table.list tr:nth-child(even) td{background:#faf8f1}
table.list tr:hover td{background:var(--green-soft)}
.badge{display:inline-block;padding:.15rem .55rem;border-radius:99px;font-size:.72rem;font-weight:700;letter-spacing:.04em}
.badge.green{background:var(--green-soft);color:var(--green)}
.badge.gold{background:var(--gold-soft);color:#7a5e17}
.badge.gray{background:#eceadf;color:var(--muted)}
.badge.red{background:#fbeae7;color:var(--danger)}
.pager{display:flex;gap:6px;align-items:center;margin-top:16px;flex-wrap:wrap}
.pager a,.pager span.cur{padding:.3rem .7rem;border:1px solid var(--line);border-radius:var(--radius);background:#fff;font-size:.84rem}
.pager span.cur{background:var(--green);color:#fff;border-color:var(--green);font-weight:700}

/* ---------- portal / admin shells ---------- */
.shell{display:grid;grid-template-columns:240px 1fr;min-height:calc(100vh - 0px)}
.side{background:var(--green-dark);color:#cfe2d7;padding:22px 0}
.side .brandbox{padding:0 20px 18px;border-bottom:1px solid rgba(255,255,255,.12);margin-bottom:14px;display:flex;gap:10px;align-items:center}
.side .brandbox img{height:44px}
.side .brandbox .t{font-family:var(--font-display);font-weight:700;color:#fff;font-size:1.05rem;line-height:1.1}
.side .brandbox .s{font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.side a.item{display:flex;gap:10px;align-items:center;padding:.6rem 20px;color:#cfe2d7;font-size:.88rem;font-weight:600}
.side a.item:hover{background:rgba(255,255,255,.07);text-decoration:none;color:#fff}
.side a.item.active{background:rgba(194,154,60,.18);color:#f3e9cf;box-shadow:inset 3px 0 0 var(--gold)}
.side .sect{padding:14px 20px 6px;font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;color:#7fa491}
.mainpane{padding:26px 30px;background:var(--parchment);min-width:0}
.pagehead{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:20px}
.pagehead h1{font-size:1.9rem;margin:0}
.pagehead .spacer{flex:1}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px;margin-bottom:24px}
.kpi{background:#fff;border:1px solid var(--line);border-left:4px solid var(--green);border-radius:var(--radius);padding:14px 16px}
.kpi .n{font-family:var(--font-display);font-size:1.9rem;font-weight:700;color:var(--green-dark);line-height:1}
.kpi .l{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-top:4px}
.kpi.gold{border-left-color:var(--gold)}
.profile-photo{width:130px;height:130px;border-radius:50%;object-fit:cover;border:4px solid var(--gold-soft);box-shadow:var(--shadow)}
.progress{height:10px;border-radius:99px;background:#e6e2d2;overflow:hidden}
.progress>span{display:block;height:100%;background:linear-gradient(90deg,var(--green),var(--gold))}
.record-strip{background:var(--green-soft);border:1px solid #c8dccf;border-radius:var(--radius);padding:14px 18px;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-bottom:22px}
.record-strip .l{font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.record-strip .v{font-weight:700;color:var(--green-dark)}

/* departments band */
.dept-band{background:linear-gradient(180deg,#0d4f37 0%,#0a3f2c 100%);color:#dce9e1}
.dept-band h2,.dept-band .eyebrow{color:#fff}
.dept-band .eyebrow{color:var(--gold-soft)}
.dept-card{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);border-radius:var(--radius);padding:24px 24px 20px;position:relative;overflow:hidden}
.dept-card::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--gold),transparent)}
.dept-card h3{color:#fff;margin:0 0 .45rem;font-size:1.35rem}
.dept-card p{color:#bcd6c8;font-size:.88rem;min-height:74px}
.dept-card .nums{display:flex;gap:22px;border-top:1px solid rgba(255,255,255,.14);padding-top:12px;margin-top:8px}
.dept-card .nums .n{font-family:var(--font-display);font-size:1.5rem;font-weight:700;color:var(--gold-soft);line-height:1}
.dept-card .nums .l{font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:#8fb3a0;margin-top:3px}

/* footer */
footer.site{background:var(--green-dark);color:#a9c5b5;margin-top:60px}
footer.site .container{padding:40px 20px 26px;display:grid;grid-template-columns:2fr 1fr 1fr;gap:30px}
footer.site h4{color:#fff;font-family:var(--font-display);font-size:1.15rem;margin:0 0 .7rem}
footer.site a{color:#d7e6dd;display:block;padding:.16rem 0;font-size:.88rem}
footer.site .legal{border-top:1px solid rgba(255,255,255,.12);padding:14px 20px;text-align:center;font-size:.76rem;color:#7fa491}

/* back to top */
#toTop{position:fixed;right:22px;bottom:24px;z-index:150;width:46px;height:46px;border-radius:50%;border:none;cursor:pointer;
  background:var(--green);color:#fff;font-size:1.25rem;line-height:1;box-shadow:0 6px 18px rgba(7,38,26,.35);
  display:none;align-items:center;justify-content:center;transition:background .15s,transform .15s}
#toTop:hover{background:var(--gold);color:#2c2410;transform:translateY(-2px)}
#toTop.show{display:flex}

/* lightbox */
.lightbox{position:fixed;inset:0;background:rgba(7,30,20,.92);display:none;align-items:center;justify-content:center;z-index:200;padding:30px}
.lightbox.open{display:flex}
.lightbox img{max-width:92vw;max-height:88vh;border:4px solid #fff;border-radius:4px}
.lightbox .x{position:absolute;top:16px;right:22px;color:#fff;font-size:2rem;cursor:pointer;background:none;border:none}

/* auth split */
.auth-wrap{display:grid;grid-template-columns:1.1fr 1fr;min-height:calc(100vh - 130px)}
.auth-photo{background-size:cover;background-position:center;position:relative}
.auth-photo .scrim{position:absolute;inset:0;background:linear-gradient(20deg,rgba(7,38,26,.9),rgba(7,38,26,.25))}
.auth-photo .copy{position:absolute;left:34px;bottom:34px;right:34px;color:#fff}
.auth-form{display:flex;align-items:center;justify-content:center;padding:46px 24px}
.auth-card{width:100%;max-width:440px}

@media (max-width:960px){
  .grid.c3,.grid.c4{grid-template-columns:1fr 1fr}
  .gal{columns:2 160px}
  .stats .container{grid-template-columns:1fr 1fr}
  .shell{grid-template-columns:1fr}
  .side{display:flex;flex-wrap:wrap;gap:2px;padding:8px}
  .side .brandbox{border:none;margin:0;padding:6px 12px}
  .side .sect{display:none}
  .side a.item{padding:.45rem .7rem;border-radius:var(--radius)}
  .auth-wrap{grid-template-columns:1fr}
  .auth-photo{min-height:200px}
  footer.site .container{grid-template-columns:1fr}
}
@media (max-width:1080px){
  .nav-wrap{flex-wrap:wrap}
  nav.main{flex-wrap:wrap}
}
@media (max-width:640px){
  .grid.c2,.grid.c3,.grid.c4{grid-template-columns:1fr}
  .nav-cta{width:100%;justify-content:flex-start}
  .form-grid{grid-template-columns:1fr}
  .hero h1{font-size:2.1rem}
  .nav-wrap{flex-wrap:wrap}
  nav.main{margin-left:0}
  table.list{display:block;overflow-x:auto;white-space:nowrap}
}