/* =========================================================================
   Office of the Dean of Students — University of Embu
   Static site stylesheet. Tokens first; nothing below needs editing to
   restyle the site.
   ========================================================================= */

:root{
  /* Palette matched to dos.embuni.ac.ke */
  --navy:#31519B;          /* cobalt */
  --navy-deep:#002A66;     /* dark blue */
  --navy-soft:#31519B;
  --gold:#D4AF37;
  --gold-light:#E7CB6E;
  --ink:#1E2A3A;
  --ink-soft:#4A5568;
  --line:#E2E8F0;
  --paper:#F9FBFD;
  --page-bg:#F5F7FC;
  --white:#fff;
  --shadow:0 8px 20px rgba(0,0,0,.08);
  --shadow-sm:0 2px 8px rgba(0,0,0,.05);
  --shadow-lg:0 14px 34px rgba(0,42,102,.14);
  --radius:20px;
  --radius-sm:12px;
  --wrap:1180px;
  --page:1280px;
  --gutter:24px;
  --serif:"Source Sans 3",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --sans:"Source Sans 3",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:90px}
body{
  margin:0;font-family:var(--sans);font-size:17px;line-height:1.65;color:var(--ink);
  background:var(--white);-webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--navy-soft);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{font-family:var(--serif);font-weight:700;line-height:1.14;letter-spacing:-.015em;margin:0}
h1{font-size:clamp(32px,4.2vw,52px)}
h2{font-size:clamp(24px,2.6vw,34px)}
h3{font-size:19px}
p{margin:0 0 1em}
ul,ol{margin:0 0 1.1em;padding-left:1.2em}
li{margin:.35em 0}
.wrap{width:min(var(--wrap),100% - (var(--gutter) * 2));margin-inline:auto}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:99;background:var(--gold);color:var(--navy-deep);padding:10px 16px;border-radius:6px}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px}

.kicker{font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin:0 0 10px}
.kicker--light{color:var(--gold-light)}
.lead{font-size:clamp(17px,1.5vw,21px);color:var(--ink-soft);max-width:62ch;margin:14px 0 0}
.note{font-size:15px;color:var(--ink-soft);margin:28px 0 0}

/* ---------------------------------------------------------------- buttons */
.btn{
  display:inline-flex;align-items:center;gap:8px;white-space:nowrap;padding:13px 24px;border-radius:999px;
  font-weight:700;font-size:16px;border:1.5px solid transparent;cursor:pointer;
  font-family:var(--sans);text-decoration:none;transition:transform .15s ease,background .15s ease;
}
.btn:hover{text-decoration:none;transform:translateY(-1px)}
.btn--gold{background:var(--gold);color:var(--navy-deep)}
.btn--gold:hover{background:var(--gold-light)}
.btn--navy{background:var(--navy);color:#fff}
.btn--navy:hover{background:var(--navy-soft)}
.btn--ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.btn--ghost:hover{background:rgba(255,255,255,.14)}
.btn--sm{padding:9px 17px;font-size:14.5px}
.nav__cta .btn--ghost{color:var(--navy);border-color:var(--line);background:#fff}
.nav__cta .btn--ghost:hover{background:var(--paper)}
.arrow{font-weight:600;display:inline-flex;align-items:center;gap:6px}
.arrow::after{content:"→";transition:transform .15s ease}
.arrow:hover{text-decoration:none}
.arrow:hover::after{transform:translateX(3px)}

/* ---------------------------------------------------------------- icons */
.ico{display:inline-block;width:1em;height:1em;background:currentColor;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain}
.ico--facebook{-webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M13 10h3V7h-3c-2 0-3 1-3 3v2H8v3h2v6h3v-6h2.5l.5-3H13v-1.5c0-.3.2-.5.5-.5H13z'/></svg>");mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M13 10h3V7h-3c-2 0-3 1-3 3v2H8v3h2v6h3v-6h2.5l.5-3H13v-1.5c0-.3.2-.5.5-.5H13z'/></svg>")}
.ico--x{-webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M4 4h4l4 5.5L16.5 4H20l-6 8 6.5 8h-4L12 14l-4.5 6H4l7-8.5z'/></svg>");mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M4 4h4l4 5.5L16.5 4H20l-6 8 6.5 8h-4L12 14l-4.5 6H4l7-8.5z'/></svg>")}
.ico--instagram{-webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M7 3h10a4 4 0 0 1 4 4v10a4 4 0 0 1-4 4H7a4 4 0 0 1-4-4V7a4 4 0 0 1 4-4zm5 5a4 4 0 1 0 0 8 4 4 0 0 0 0-8zm0 2a2 2 0 1 1 0 4 2 2 0 0 1 0-4zm5.5-3.2a1.1 1.1 0 1 0 0 2.2 1.1 1.1 0 0 0 0-2.2z'/></svg>");mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M7 3h10a4 4 0 0 1 4 4v10a4 4 0 0 1-4 4H7a4 4 0 0 1-4-4V7a4 4 0 0 1 4-4zm5 5a4 4 0 1 0 0 8 4 4 0 0 0 0-8zm0 2a2 2 0 1 1 0 4 2 2 0 0 1 0-4zm5.5-3.2a1.1 1.1 0 1 0 0 2.2 1.1 1.1 0 0 0 0-2.2z'/></svg>")}
.ico--heart{-webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 21s-8-5-8-11a4.5 4.5 0 0 1 8-2.8A4.5 4.5 0 0 1 20 10c0 6-8 11-8 11z'/></svg>");mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 21s-8-5-8-11a4.5 4.5 0 0 1 8-2.8A4.5 4.5 0 0 1 20 10c0 6-8 11-8 11z'/></svg>")}
.ico--dove{-webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2l2 5h5l-4 3 1.5 6L12 13l-4.5 3L9 10 5 7h5z'/></svg>");mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2l2 5h5l-4 3 1.5 6L12 13l-4.5 3L9 10 5 7h5z'/></svg>")}
.ico--users{-webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M8 11a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm8 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM2 19c0-3 3-5 6-5s6 2 6 5zm12-4.6c2.5.3 4 2.1 4 4.6h-3c0-1.7-.4-3.3-1-4.6z'/></svg>");mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M8 11a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm8 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM2 19c0-3 3-5 6-5s6 2 6 5zm12-4.6c2.5.3 4 2.1 4 4.6h-3c0-1.7-.4-3.3-1-4.6z'/></svg>")}
.ico--home{-webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 3l9 8h-3v10h-5v-6H11v6H6V11H3z'/></svg>");mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 3l9 8h-3v10h-5v-6H11v6H6V11H3z'/></svg>")}
.ico--vote{-webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M4 14h16v6H4zm3-9h10l2 7H5zm2.8 4.6l1.6 1.6 3.8-4-1.4-1.4-2.4 2.5-.8-.8z'/></svg>");mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M4 14h16v6H4zm3-9h10l2 7H5zm2.8 4.6l1.6 1.6 3.8-4-1.4-1.4-2.4 2.5-.8-.8z'/></svg>")}
.ico--file{-webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M6 2h8l4 4v16H6zm8 1.5V7h3.5zM8 11h8v2H8zm0 4h8v2H8z'/></svg>");mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M6 2h8l4 4v16H6zm8 1.5V7h3.5zM8 11h8v2H8zm0 4h8v2H8z'/></svg>")}

/* ---------------------------------------------------------------- header */
.util{background:var(--navy-deep);color:#C9D4E8;font-size:13.5px}
.util__in{display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:40px;flex-wrap:wrap}
.util__welcome{margin:0;letter-spacing:.01em}
.util__links{display:flex;align-items:center;gap:18px}
.util__links a{color:#C9D4E8}
.util__links a:hover{color:#fff}
.util__social{display:inline-flex;gap:12px;font-size:16px;padding-left:6px;border-left:1px solid rgba(255,255,255,.2)}
.util__social a{display:inline-flex;color:#C9D4E8}
.util__social a:hover{color:var(--gold-light)}

.bar{position:sticky;top:0;z-index:40;background:#fff;border-bottom:1px solid var(--line);box-shadow:0 2px 16px -12px rgba(11,33,73,.5)}
.bar__in{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:76px}
.brand img{height:46px;width:auto}
.burger{display:none;align-items:center;gap:8px;background:none;border:1.5px solid var(--line);border-radius:10px;padding:8px 12px;font:600 14px var(--sans);color:var(--navy)}
.burger span{display:block;width:18px;height:2px;background:var(--navy)}
.burger span + span{margin-top:4px}
.burger em{font-style:normal}
.nav{display:flex;align-items:center;gap:26px}
.nav > ul{display:flex;align-items:center;gap:4px;list-style:none;margin:0;padding:0}
.nav > ul > li > a{
  display:inline-flex;align-items:center;gap:5px;white-space:nowrap;padding:10px 12px;border-radius:8px;
  font-weight:600;font-size:15.5px;color:var(--ink);
}
.nav > ul > li > a:hover{background:var(--paper);color:var(--navy);text-decoration:none}
.nav > ul > li.is-active > a{color:var(--navy);box-shadow:inset 0 -2px 0 var(--gold)}
.caret{width:9px;height:6px;opacity:.6}
.has-sub{position:relative}
.sub{
  position:absolute;top:calc(100% + 6px);left:0;min-width:250px;background:#fff;border:1px solid var(--line);
  border-top:3px solid var(--gold);border-radius:0 0 var(--radius-sm) var(--radius-sm);box-shadow:var(--shadow);
  list-style:none;margin:0;padding:8px;opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .15s ease,transform .15s ease,visibility .15s;
}
.has-sub:hover .sub,.has-sub:focus-within .sub,.has-sub.open .sub{opacity:1;visibility:visible;transform:none}
.sub a{display:block;padding:9px 12px;border-radius:7px;font-size:15px;color:var(--ink)}
.sub a:hover{background:var(--paper);color:var(--navy);text-decoration:none}
.nav__cta{display:flex;align-items:center;gap:10px}

/* ---------------------------------------------------------------- hero */
.hero{position:relative;background:var(--navy-deep);color:#fff;overflow:hidden}
.hero__media{position:absolute;inset:0}
.hero__media img{width:100%;height:100%;object-fit:cover;opacity:.32}
.hero::after{content:"";position:absolute;inset:0;
  background:linear-gradient(105deg,rgba(11,33,73,.96) 0%,rgba(11,33,73,.82) 45%,rgba(11,33,73,.45) 100%)}
.hero__in{position:relative;z-index:2;padding:clamp(56px,8vw,110px) 0 clamp(44px,6vw,78px)}
.hero h1{font-size:clamp(38px,6vw,76px);letter-spacing:-.03em;color:#fff}
.hero__lead{font-size:clamp(17px,1.6vw,21px);color:#D8E1F1;max-width:52ch;margin-top:20px}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.hero__facts{display:flex;flex-wrap:wrap;gap:36px;margin:44px 0 0;padding-top:26px;border-top:1px solid rgba(255,255,255,.22)}
.hero__facts div{min-width:120px}
.hero__facts dt{font-family:var(--serif);font-size:clamp(30px,3.4vw,44px);font-weight:700;line-height:1;color:var(--gold-light)}
.hero__facts dd{margin:6px 0 0;font-size:14px;letter-spacing:.06em;text-transform:uppercase;color:#AFC0DC}

/* ---------------------------------------------------------------- bands */
.band{padding:clamp(48px,6vw,86px) 0}
.band--paper{background:var(--paper)}
.band--navy{background:var(--navy);color:#fff}
.band--navy h2,.band--navy h3{color:#fff}
.band__head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:28px;flex-wrap:wrap}

.intro{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(24px,4vw,64px);align-items:start}
.intro__body p{color:var(--ink-soft);font-size:17.5px}

.tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:44px}
.tile{
  position:relative;display:block;background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:26px 26px 52px;color:var(--ink);box-shadow:var(--shadow);transition:transform .16s ease,box-shadow .16s ease;
}
.tile:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);text-decoration:none}
.tile__ico{font-size:24px;color:var(--gold);margin-bottom:14px}
.tile h3{font-size:20px;margin-bottom:8px}
.tile p{color:var(--ink-soft);font-size:15.5px;margin:0}
.tile__go{position:absolute;left:26px;bottom:22px;color:var(--navy-soft);font-weight:700}

.split{display:grid;grid-template-columns:minmax(0,.52fr) minmax(0,1fr);gap:clamp(28px,5vw,70px);align-items:start}
.dean{margin:0;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:22px;text-align:center}
.dean img{width:100%;max-width:260px;margin:0 auto;border-radius:12px}
.dean figcaption{margin-top:16px;font-size:15.5px;color:var(--ink-soft)}
.dean strong{display:block;font-family:var(--serif);font-size:19px;color:var(--ink)}

.vm{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,4vw,56px);align-items:start}
.vm__text{font-family:var(--serif);font-size:clamp(19px,1.9vw,24px);line-height:1.4;color:#EAF0FA;margin:0}
.vm__cta p{color:#B9C8E4;font-size:15px;margin:16px 0 0}

.cta{background:var(--gold);color:var(--navy-deep)}
.cta__in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;padding:clamp(36px,4vw,60px) 0;align-items:center}
.cta h2{margin-bottom:10px}
.cta p{margin:0;color:#5A431A}
.cta__list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.cta__list li{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid rgba(11,33,73,.18);font-weight:600}
.cta__list span{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#5A431A}
.cta__list a{color:var(--navy-deep)}

/* ---------------------------------------------------------------- page head + layout */
.phead{background:linear-gradient(180deg,#F1F4FA,#fff);border-bottom:1px solid var(--line);padding:clamp(28px,4vw,52px) 0 clamp(26px,3.4vw,44px)}
.crumb{font-size:14px;color:var(--ink-soft);margin-bottom:16px;display:flex;flex-wrap:wrap;gap:8px}
.crumb a{color:var(--navy-soft)}
main{padding:clamp(40px,5vw,72px) 0 clamp(52px,6vw,90px)}
main.home{padding:0}
.layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:clamp(28px,4vw,60px);align-items:start}
.layout--bio{grid-template-columns:minmax(0,1fr) 340px}

.prose{max-width:74ch;font-size:17.5px}
.prose--wide{max-width:none}
.prose h2{margin:1.8em 0 .6em;scroll-margin-top:100px}
.prose h2:first-child{margin-top:0}
.prose h3,.prose h4{margin:1.5em 0 .5em;font-size:19px}
.prose p{color:#28313F}
.prose ul,.prose ol{padding-left:1.35em}
.prose li{color:#28313F}
.prose img{border-radius:12px;margin:22px 0;box-shadow:var(--shadow)}
.prose a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px}
.prose table{width:100%;border-collapse:collapse;margin:24px 0;font-size:16px}
.prose th,.prose td{border:1px solid var(--line);padding:10px 12px;text-align:left;vertical-align:top}
.prose thead th{background:var(--navy);color:#fff}

.side{display:grid;gap:18px;position:sticky;top:96px}
.side__box{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:22px}
.side__box h3{font-size:17px;margin-bottom:12px}
.side__box p{font-size:15.5px;color:var(--ink-soft)}
.side__box--navy{background:var(--navy);border-color:var(--navy);color:#fff}
.side__box--navy h3{color:#fff}
.side__box--navy p{color:#C6D3EA}
.side__box--navy a{color:var(--gold-light)}
.side__box--navy a:hover{color:#fff}
.side__box--profile{text-align:center}
.side__box--profile img{width:150px;height:150px;object-fit:cover;border-radius:50%;margin:0 auto 14px;border:4px solid #fff;box-shadow:var(--shadow)}
.side__box--mark{text-align:center}
.side__box--mark img{width:100%;max-width:230px;margin:0 auto 16px;background:#fff;border-radius:10px;padding:10px;box-shadow:var(--shadow)}
.side__role{font-size:14px;letter-spacing:.06em;text-transform:uppercase;color:var(--gold);font-weight:700;margin:0 0 14px}
.side__meta{margin:0;text-align:left;display:grid;gap:10px;font-size:15px}
.side__meta dt{font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);font-weight:700}
.side__meta dd{margin:2px 0 0}
.side__toc,.side__contact,.side__files{list-style:none;margin:0;padding:0;display:grid;gap:2px;font-size:15.5px}
.side__toc a,.side__files a{display:block;padding:8px 0;border-bottom:1px solid var(--line)}
.side__contact li{padding:7px 0;border-bottom:1px solid var(--line)}
.side__files li{padding:8px 0;border-bottom:1px solid var(--line)}
.side__files a{border:0;padding:0;font-weight:600}
.side__files span{display:block;font-size:12.5px;color:var(--ink-soft);letter-spacing:.04em}
.side__back{margin:0}

/* ---------------------------------------------------------------- people */
.people{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.pcard{
  display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;color:var(--ink);box-shadow:var(--shadow);transition:transform .16s ease,box-shadow .16s ease;
}
a.pcard:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);text-decoration:none}
.pcard__photo{aspect-ratio:1/1;background:var(--paper);display:grid;place-items:center;overflow:hidden}
.pcard__photo img{width:100%;height:100%;object-fit:cover}
.pcard__initials{font-family:var(--serif);font-size:38px;color:var(--navy);opacity:.35}
.pcard__body{padding:18px 18px 6px}
.pcard__body h3{font-size:17.5px}
.pcard__body p{font-size:14px;letter-spacing:.05em;text-transform:uppercase;color:var(--gold);font-weight:700;margin:6px 0 0}
.pcard__go{margin-top:auto;padding:14px 18px 16px;font-size:14.5px;font-weight:700;color:var(--navy-soft)}

/* ---------------------------------------------------------------- downloads */
.dl__group + .dl__group{margin-top:40px}
.dl{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:10px}
.dl a{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:16px;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);padding:16px 18px;color:var(--ink);
  transition:border-color .15s ease,box-shadow .15s ease;
}
.dl a:hover{border-color:var(--navy-soft);box-shadow:var(--shadow);text-decoration:none}
.dl__ico{font-size:20px;color:var(--gold)}
.dl__name{font-weight:600}
.dl__meta{font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);white-space:nowrap}

/* ---------------------------------------------------------------- charter table */
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);background:#fff;box-shadow:var(--shadow)}
.charter{width:100%;border-collapse:collapse;font-size:16px;min-width:760px}
.charter th,.charter td{padding:13px 16px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.charter thead th{background:var(--navy);color:#fff;font-family:var(--sans);font-size:13px;letter-spacing:.1em;text-transform:uppercase}
.charter tbody tr:nth-child(even){background:#FAFBFD}
.charter p{margin:0}

/* ---------------------------------------------------------------- gallery */
.album + .album{margin-top:clamp(40px,5vw,72px);padding-top:clamp(36px,4vw,56px);border-top:1px solid var(--line)}
.album__cap{color:var(--ink-soft);max-width:72ch}
.gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:22px}
.gallery--3{margin-top:0}
.shot,.gcard{display:block;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);background:var(--paper);position:relative}
.shot img,.gcard img{width:100%;aspect-ratio:16/10;object-fit:cover;transition:transform .3s ease}
.shot:hover img,.gcard:hover img{transform:scale(1.04)}
.gcard__cap{position:absolute;inset:auto 0 0;padding:34px 18px 16px;color:#fff;font-weight:600;font-size:15.5px;
  background:linear-gradient(180deg,transparent,rgba(11,33,73,.88))}
.gcard__cap em{display:block;font-style:normal;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-light);margin-bottom:4px}

.lightbox{position:fixed;inset:0;z-index:60;background:rgba(7,20,45,.94);display:grid;place-items:center;padding:24px}
.lightbox[hidden]{display:none}
.lightbox figure{margin:0;max-width:min(1100px,92vw)}
.lightbox img{max-height:80vh;width:auto;margin:0 auto;border-radius:10px}
.lightbox figcaption{color:#D8E1F1;text-align:center;margin-top:14px;font-size:15px}
.lightbox__close{position:absolute;top:18px;right:22px;background:none;border:0;color:#fff;font-size:34px;line-height:1;cursor:pointer}

/* ---------------------------------------------------------------- accordion */
.acc{display:grid;gap:10px;margin:18px 0 32px}
.acc details{border:1px solid var(--line);border-radius:var(--radius-sm);background:#fff;overflow:hidden}
.acc summary{
  cursor:pointer;padding:15px 18px;font-weight:700;color:var(--navy);list-style:none;
  display:flex;justify-content:space-between;align-items:center;gap:12px;background:var(--paper);
}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{content:"+";font-size:20px;color:var(--gold);font-weight:700}
.acc details[open] summary{background:var(--navy);color:#fff}
.acc details[open] summary::after{content:"–"}
.acc__body{padding:16px 18px}
.acc__body p:last-child,.acc__body ul:last-child{margin-bottom:0}
.acc__body table{width:100%;border-collapse:collapse}
.acc__body td{border:1px solid var(--line);padding:10px;vertical-align:top}

/* ---------------------------------------------------------------- contact */
.contact{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px;align-items:start}
.contact__card,.contact__form{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px;box-shadow:var(--shadow)}
.contact__dl{display:grid;gap:14px;margin:18px 0 0}
.contact__dl dt{font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);font-weight:700}
.contact__dl dd{margin:3px 0 0;font-size:16.5px}
.contact__note{font-size:14.5px;color:var(--ink-soft)}
.contact__form label{display:block;margin:0 0 14px;font-size:14px;font-weight:600}
.contact__form input,.contact__form textarea{
  width:100%;margin-top:6px;padding:11px 13px;border:1.5px solid var(--line);border-radius:9px;
  font:400 16px var(--sans);color:var(--ink);background:#fff;
}
.contact__form input:focus,.contact__form textarea:focus{border-color:var(--navy-soft);outline:none}

/* ---------------------------------------------------------------- search */
.search{position:fixed;inset:0;z-index:70;background:rgba(7,20,45,.7);padding:12vh 24px 24px;display:block}
.search[hidden]{display:none}
.search__panel{width:min(680px,100%);margin:0 auto;background:#fff;border-radius:var(--radius);box-shadow:var(--shadow-lg);padding:18px}
.search__row{display:flex;gap:10px}
.search__row input{flex:1;padding:14px 16px;border:1.5px solid var(--line);border-radius:10px;font:400 17px var(--sans)}
.search__results{list-style:none;margin:14px 0 0;padding:0;max-height:52vh;overflow:auto}
.search__results li{border-top:1px solid var(--line)}
.search__results a{display:block;padding:13px 6px;color:var(--ink)}
.search__results a:hover{background:var(--paper);text-decoration:none}
.search__results strong{display:block;font-family:var(--serif);font-size:17px}
.search__results span{font-size:14.5px;color:var(--ink-soft)}
.search__empty{padding:16px 6px;color:var(--ink-soft)}

/* ---------------------------------------------------------------- footer */
.foot{background:var(--navy-deep);color:#C2D0E8;padding:clamp(40px,5vw,70px) 0 0;font-size:15.5px}
.foot__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:34px;padding-bottom:40px}
.foot h3{font-family:var(--sans);font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin-bottom:14px}
.foot ul{list-style:none;margin:0;padding:0}
.foot li{margin:0 0 9px}
.foot a{color:#C2D0E8}
.foot a:hover{color:#fff}
.foot__contact li{color:#9FB2D4}
.foot__social{display:flex;gap:14px;font-size:18px;margin:18px 0 0}
.foot__bar{border-top:1px solid rgba(255,255,255,.14);padding:18px 0;font-size:14px}
.foot__bar__in{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
.foot__bar p{margin:0;color:#8FA4C9}
.foot__bar nav{display:flex;gap:18px}

/* ---------------------------------------------------------------- responsive */
@media (max-width:1080px){
  .tiles,.gallery,.gallery--3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .people{grid-template-columns:repeat(3,minmax(0,1fr))}
  .foot__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .layout,.layout--bio{grid-template-columns:1fr}
  .side{position:static}
}
@media (max-width:900px){
  .util__welcome{display:none}
  .burger{display:inline-flex}
  .nav{
    position:absolute;top:100%;left:0;right:0;background:#fff;border-bottom:1px solid var(--line);
    box-shadow:var(--shadow);flex-direction:column;align-items:stretch;gap:0;padding:12px var(--gutter) 20px;display:none;
  }
  .nav.open{display:flex}
  .nav > ul{flex-direction:column;align-items:stretch;gap:0}
  .nav > ul > li > a{padding:13px 4px;border-bottom:1px solid var(--line);border-radius:0;justify-content:space-between}
  .sub{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;border-left:2px solid var(--gold);
    border-radius:0;padding:4px 0 8px 14px;margin:0 0 6px;display:none}
  .has-sub.open .sub{display:block}
  .nav__cta{padding-top:14px}
  .intro,.split,.vm,.cta__in,.contact{grid-template-columns:1fr}
  .hero__facts{gap:24px}
}
@media (max-width:620px){
  body{font-size:16.5px}
  .tiles,.gallery,.gallery--3,.people,.foot__grid{grid-template-columns:1fr}
  .util__in{justify-content:center}
  .dl a{grid-template-columns:auto minmax(0,1fr);row-gap:4px}
  .dl__meta{grid-column:2}
  .foot__bar__in{flex-direction:column}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}
@media print{
  .top-bar,.bar,.foot,.cta,.side,.search,.lightbox{display:none!important}
  body{font-size:12pt}
  a{color:#000;text-decoration:none}
}


/* =========================================================================
   THEME — matched to dos.embuni.ac.ke
   Source Sans 3, cobalt + gold, boxed white page on a light background,
   blue top bar, logo row, separate menu row, gradient page banners.
   ========================================================================= */
.ico--phone{-webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.1.4 2.3.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1A17 17 0 0 1 3 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.6.1.3 0 .7-.2 1z'/></svg>");mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.1.4 2.3.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1A17 17 0 0 1 3 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.6.1.3 0 .7-.2 1z'/></svg>")}
.ico--mail{-webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M3 5h18a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1zm9 7.2L4.4 7H4v.6l8 5.4 8-5.4V7h-.4z'/></svg>");mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M3 5h18a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1zm9 7.2L4.4 7H4v.6l8 5.4 8-5.4V7h-.4z'/></svg>")}
.ico--clock{-webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2a10 10 0 1 1 0 20 10 10 0 0 1 0-20zm1 5h-2v6l5 3 1-1.7-4-2.4z'/></svg>");mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2a10 10 0 1 1 0 20 10 10 0 0 1 0-20zm1 5h-2v6l5 3 1-1.7-4-2.4z'/></svg>")}
.ico--pin{-webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2a7 7 0 0 1 7 7c0 5.3-7 13-7 13S5 14.3 5 9a7 7 0 0 1 7-7zm0 4.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5z'/></svg>");mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2a7 7 0 0 1 7 7c0 5.3-7 13-7 13S5 14.3 5 9a7 7 0 0 1 7-7zm0 4.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5z'/></svg>")}
.ico--search{-webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M10 3a7 7 0 0 1 5.6 11.2l5.1 5.1-1.4 1.4-5.1-5.1A7 7 0 1 1 10 3zm0 2a5 5 0 1 0 0 10 5 5 0 0 0 0-10z'/></svg>");mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M10 3a7 7 0 0 1 5.6 11.2l5.1 5.1-1.4 1.4-5.1-5.1A7 7 0 1 1 10 3zm0 2a5 5 0 1 0 0 10 5 5 0 0 0 0-10z'/></svg>")}

body{background:var(--page-bg);color:var(--ink);line-height:1.6}
.page{max-width:var(--page);margin:0 auto;background:#fff;box-shadow:var(--shadow);overflow-x:clip}
h1,h2,h3,h4{font-family:var(--sans);letter-spacing:-.01em}
h1{font-weight:800}
h2{font-weight:700;color:var(--navy)}
h3{font-weight:700;color:var(--navy)}
a{color:var(--navy)}
a:hover{color:var(--navy-deep)}
.kicker{color:#B8921F;letter-spacing:.14em}
.kicker--light{color:var(--gold)}

/* top bar */
.top-bar{background:var(--navy);color:#fff;font-size:13px}
.top-bar__in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 18px;min-height:38px;padding:6px 0}
.top-bar__left,.top-bar__right{display:flex;flex-wrap:wrap;align-items:center;gap:6px 20px}
.top-bar__left > span{display:inline-flex;align-items:center;gap:8px}
.top-bar .ico{color:var(--gold);font-size:13px}
.top-bar a{color:#fff;text-decoration:none}
.top-bar a:hover{color:var(--gold);text-decoration:none}
.top-bar__social{display:inline-flex;gap:12px;font-size:15px;padding-left:16px;border-left:1px solid rgba(255,255,255,.3)}
.top-bar__social a{display:inline-flex}

/* logo row */
.bar{position:sticky;top:0;z-index:40;background:#fff;border-bottom:0;box-shadow:var(--shadow-sm)}
.bar__in{min-height:0;padding:16px 0;border-bottom:2px solid var(--line);width:100%;max-width:none;padding-inline:max(var(--gutter),calc((100% - var(--wrap))/2))}
.brand{display:flex;align-items:center;gap:16px;text-decoration:none}
.brand:hover{text-decoration:none}
.brand__crest{height:62px;width:auto}
.brand__text{display:flex;flex-direction:column;line-height:1.15}
.brand__text strong{font-size:1.6rem;font-weight:800;color:var(--navy);letter-spacing:-.5px}
.brand__text em{font-style:normal;font-size:.72rem;font-weight:600;letter-spacing:1px;color:var(--gold);margin-top:3px;text-transform:uppercase}
.bar__right{display:flex;align-items:center;gap:14px}
.search-icon{width:42px;height:42px;border-radius:50%;border:0;background:var(--page-bg);color:var(--navy);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;font-size:17px;transition:background .2s,color .2s}
.search-icon:hover{background:var(--navy);color:#fff}
.btn--gold{background:var(--gold);color:var(--navy-deep)}
.btn--gold:hover{background:var(--gold-light);color:var(--navy-deep)}

/* menu row */
.nav{display:block;background:#fff;border-bottom:1px solid var(--line)}
.nav > .wrap > ul{display:flex;flex-wrap:wrap;align-items:center;gap:0 2rem;list-style:none;margin:0;padding:0}
.nav > .wrap > ul > li{margin:0}
.nav > .wrap > ul > li > a{display:inline-flex;align-items:center;gap:5px;padding:1rem 0;font-weight:700;font-size:.92rem;color:var(--navy);border-bottom:3px solid transparent;border-radius:0;white-space:nowrap;transition:color .2s,border-color .2s}
.nav > .wrap > ul > li > a:hover,
.nav > .wrap > ul > li.is-active > a{color:#B8921F;border-bottom-color:var(--gold);background:none;text-decoration:none;box-shadow:none}
.sub{top:100%;border-top:3px solid var(--gold);border-radius:0 0 var(--radius-sm) var(--radius-sm)}
.sub a{color:var(--navy);font-weight:600}
.sub a:hover{background:var(--page-bg);color:#B8921F}

/* page banner (all inner pages) */
.phead{background:linear-gradient(135deg,var(--navy-deep),var(--navy));color:#fff;text-align:center;border:0;padding:2.6rem 0}
.phead h1{color:#fff;font-size:clamp(1.6rem,3.2vw,2.3rem);font-weight:800;letter-spacing:-.5px}
.phead .kicker{color:var(--gold);margin-bottom:6px}
.phead .lead{color:rgba(255,255,255,.9);margin:.5rem auto 0;font-size:1.02rem}
.crumb{justify-content:center;color:rgba(255,255,255,.75);margin-bottom:12px;font-size:13.5px}
.crumb a{color:#fff}
.crumb a:hover{color:var(--gold)}

/* home banner */
.phead--home{padding:3.2rem 0 2.6rem}
.phead--home h1{font-size:clamp(1.9rem,4vw,2.8rem)}
.phead--home .lead{max-width:62ch}
.phead--home .hero__cta{justify-content:center;margin-top:22px}
.phead--home .hero__facts{justify-content:center;gap:clamp(24px,5vw,64px);margin-top:28px;padding-top:22px;border-top:1px solid rgba(255,255,255,.2)}
.phead--home .hero__facts div{min-width:0}
.hero__facts dt{font-family:var(--sans);font-weight:800;color:var(--gold)}
.hero__facts dd{color:rgba(255,255,255,.8)}
.btn--ghost{color:#fff;border-color:rgba(255,255,255,.6)}

/* welcome card (home) */
.welcome{display:flex;flex-wrap:wrap;align-items:center;gap:3rem;background:var(--paper);border:1px solid var(--line);border-radius:28px;padding:2.5rem}
.welcome__text{flex:2;min-width:280px}
.welcome__text h2{font-size:clamp(1.4rem,2.4vw,1.8rem);border-left:5px solid var(--gold);padding-left:1.1rem;margin-bottom:1rem}
.welcome__text p{text-align:justify;line-height:1.75;font-size:1.05rem;color:var(--ink)}
.welcome__sign{margin:1.4rem 0 1rem;padding-top:1rem;border-top:2px solid var(--line);color:var(--navy)}
.welcome__sign strong{display:block;font-size:1.1rem}
.welcome__sign span{font-size:.9rem;color:var(--ink-soft)}
.welcome__photo{flex:1;min-width:220px;margin:0;display:flex;flex-direction:column;align-items:center}
.welcome__photo img{width:100%;max-width:210px;aspect-ratio:1/1;object-fit:cover;border-radius:50%;border:4px solid var(--gold);box-shadow:var(--shadow);background:#fff;transition:transform .3s}
.welcome__photo img:hover{transform:scale(1.03)}
.welcome__photo figcaption{margin-top:1rem;font-weight:700;color:var(--navy);background:rgba(49,81,155,.08);padding:.4rem 1rem;border-radius:40px;font-size:.95rem}

/* sections & cards */
.band{padding:clamp(40px,5vw,72px) 0}
.band--paper{background:#fff}
.band--navy{background:linear-gradient(135deg,var(--navy-deep),var(--navy))}
.vm__text{font-family:var(--sans);font-weight:600}
.tiles{margin-top:36px}
.tile,.side__box,.pcard,.album,.contact__card,.acc,.dean{border-radius:var(--radius);border-color:var(--line);box-shadow:var(--shadow-sm)}
.tile{background:var(--paper)}
.tile:hover{box-shadow:var(--shadow);border-color:rgba(212,175,55,.6)}
.tile h3{color:var(--navy)}
.tile__ico{color:var(--gold)}
.side__box{background:var(--paper)}
.side__box--navy{background:linear-gradient(135deg,var(--navy-deep),var(--navy));border:0}
.side__box h3{color:var(--navy)}
.side__box--navy h3{color:#fff}
.side__box--profile img{border-color:var(--gold)}
.prose h2{border-left:5px solid var(--gold);padding-left:1rem;font-size:clamp(1.35rem,2.2vw,1.75rem)}
.prose thead th,.charter thead th{background:var(--navy)}
main{padding:clamp(36px,4.5vw,64px) 0 clamp(44px,5vw,80px)}
main.home{padding:0}
.cta{background:var(--paper);border-top:1px solid var(--line)}
.cta h2{color:var(--navy)}
.cta p,.cta__list span{color:var(--ink-soft)}
.cta__list li{border-bottom-color:var(--line)}
.cta__list a{color:var(--navy)}

/* footer */
.foot{background:var(--navy);color:#E8EEF2}
.foot h3{color:var(--gold)}
.foot a{color:#E8EEF2}
.foot a:hover{color:var(--gold)}
.foot__contact li{color:#D3DCEC}
.foot__bar{background:rgba(0,42,102,.35);border-top:1px solid rgba(255,255,255,.15)}
.foot__bar p{color:#D3DCEC}

/* responsive */
@media (max-width:900px){
  .bar__in{padding-block:12px}
  .brand__crest{height:48px}
  .brand__text strong{font-size:1.2rem}
  .bar__right .btn--gold{display:none}
  .nav{position:absolute;top:100%;left:0;right:0;display:none;box-shadow:var(--shadow);padding:6px 0 14px}
  .nav.open{display:block}
  .nav > .wrap > ul{flex-direction:column;align-items:stretch;gap:0}
  .nav > .wrap > ul > li > a{display:flex;justify-content:space-between;padding:13px 4px;border-bottom:1px solid var(--line)}
  .nav > .wrap > ul > li.is-active > a{border-bottom-color:var(--gold)}
  .welcome{padding:1.8rem;gap:2rem;flex-direction:column}
  .welcome__photo{order:-1}
  .welcome__photo img{max-width:180px}
}
@media (max-width:620px){
  .top-bar{font-size:12px}
  .top-bar__in{justify-content:center}
  .top-bar__left,.top-bar__right{justify-content:center;gap:4px 14px}
  .top-bar__loc{display:none}
  .brand{gap:10px}
  .brand__crest{height:42px}
  .brand__text strong{font-size:1.02rem}
  .brand__text em{font-size:.62rem}
  .phead{padding:2rem 0}
  .welcome{padding:1.4rem;border-radius:20px}
  .welcome__text p{text-align:left}
}

/* theme fixes */
.welcome__text .kicker,.prose .kicker{color:#B8921F}
.prose .kicker + h2{margin-top:.2em}
.side__box--navy .btn--gold,.side__box--navy .btn--gold:hover{color:var(--navy-deep)}
/* 404 page: banner sits flush, gold button */
main:has(> .phead:only-child){padding:0}
main > .phead:only-child{padding:4.5rem 0}
.phead .btn--navy{background:var(--gold);color:var(--navy-deep);margin-top:10px}
.phead .btn--navy:hover{background:var(--gold-light)}
/* compact burger icon */
.burger{flex-direction:column;justify-content:center;gap:4px;width:44px;height:42px;padding:0;border-radius:10px;border-color:var(--line)}
.burger span{width:20px;margin:0!important}
.burger em{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.bar__right{flex-shrink:0;gap:10px}
.brand{min-width:0}
@media (max-width:620px){
  .top-bar__left > span:nth-child(3),.top-bar__loc{display:none}
}
@media (max-width:620px){ .top-bar__left > span.top-bar__loc{display:none} }

/* no icons: plain text controls */
.contact{grid-template-columns:minmax(0,1fr)}
.contact__card{max-width:640px}
.btn--line{background:#fff;color:var(--navy);border-color:var(--line)}
.btn--line:hover{background:var(--page-bg);color:var(--navy)}
.top-bar__social{font-size:13px;gap:14px}
.foot__social{font-size:14.5px;gap:18px}
.arrow::after{content:none}
.tile{padding:26px}
.dl a{grid-template-columns:minmax(0,1fr) auto}
@media (max-width:620px){ .dl a{grid-template-columns:minmax(0,1fr)} .dl__meta{grid-column:1} }
@media (max-width:900px){ .bar__right #searchOpen{padding:8px 14px} }
@media (max-width:620px){ .top-bar__left > span:nth-child(3){display:none} }