/* =========================================================================
   LEVEL 3 — HEAVY CUSTOMISATION
   NLU Delhi's section ORDER is kept, because that part is sound. Every
   component is rebuilt in dbranlu's own language, developed in Option F:
     · sandstone ground with a jali lattice, not slate/grey bands
     · centred crest masthead
     · double-rule frames with corner brackets, not their title bars
     · lozenge rules, not their centred gold bar
     · Ashoka chakra and scales drawn in SVG as the ornament
     · a Preamble / Ambedkar band where they put "Jurist Speaks"
   And the move that changes the page at a glance: the boxed sidebar-plus-slider
   hero is replaced by a FULL-BLEED hero on the University's own campus film,
   with In Focus / Events / Latest Notice floating over its lower edge.
   ========================================================================= */
:root{
  --navy:#0a2342; --navy-d:#061627; --navy-2:#0e2d57;
  --ink:#1b2432; --muted:#5a6577;
  --gold:#c39a3e; --gold-lt:#dcb964; --gold-dp:#7d5c12;
  --maroon:#7a1f2b;
  --saffron:#ff9933; --green:#138808;
  --paper:#fdfbf6; --sand:#f4eee1; --sand-2:#eae0cc;
  --line:rgba(10,35,66,.12); --rule:rgba(195,154,62,.45);
  --maxw:1300px; --ease:cubic-bezier(.16,1,.3,1);
  --jali:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%23c39a3e' stroke-width='1' stroke-opacity='.34'%3E%3Cpath d='M32 1 L63 32 L32 63 L1 32Z'/%3E%3Cpath d='M32 14 L50 32 L32 50 L14 32Z'/%3E%3Ccircle cx='32' cy='32' r='4.5'/%3E%3Cpath d='M0 0 L13 13 M64 0 L51 13 M0 64 L13 51 M64 64 L51 51'/%3E%3C/g%3E%3C/svg%3E");
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Mulish',system-ui,-apple-system,'Segoe UI',sans-serif;color:var(--ink);
  background:var(--paper);line-height:1.68;-webkit-font-smoothing:antialiased;overflow-x:clip}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(16px,3vw,40px)}
.dev{font-family:'Noto Serif Devanagari','Noto Sans Devanagari',serif}
.skip{position:absolute;left:-9999px;background:var(--gold);color:var(--navy);padding:.6rem 1.2rem;z-index:999;font-weight:800}
.skip:focus{left:0;top:0}

/* ---------------- ornament kit ---------------- */
.rule{display:flex;align-items:center;gap:.85rem;color:var(--gold)}
.rule::before,.rule::after{content:"";flex:1;height:3px;border-top:1px solid currentColor;border-bottom:1px solid currentColor;opacity:.5}
.rule .dia{width:8px;height:8px;background:currentColor;transform:rotate(45deg);flex-shrink:0;
  box-shadow:0 0 0 3px var(--paper),0 0 0 4px currentColor}
.rule.on-sand .dia{box-shadow:0 0 0 3px var(--sand),0 0 0 4px currentColor}
.rule.on-dark{color:var(--gold-lt)}
.rule.on-dark .dia{box-shadow:0 0 0 3px var(--navy-d),0 0 0 4px currentColor}
.rule.c{max-width:300px;margin-inline:auto}
.dbox{border:1px solid var(--rule);box-shadow:inset 0 0 0 4px var(--paper),inset 0 0 0 5px var(--rule);background:var(--paper)}
.dbox.sand{background:var(--sand);box-shadow:inset 0 0 0 4px var(--sand),inset 0 0 0 5px var(--rule)}
.brk{position:relative}
.brk::before,.brk::after{content:"";position:absolute;width:24px;height:24px;border:1px solid var(--gold);opacity:.75;pointer-events:none}
.brk::before{left:0;top:0;border-right:0;border-bottom:0}
.brk::after{right:0;bottom:0;border-left:0;border-top:0}
.chk,.mk,.scales{display:block}
.chk circle,.chk line{stroke:currentColor;fill:none;vector-effect:non-scaling-stroke}
.mk circle,.mk line,.mk path{stroke:currentColor;fill:none}
.jali{background-image:var(--jali)}
.eyebrow{display:inline-flex;align-items:center;gap:.7rem;font-size:.66rem;font-weight:800;
  letter-spacing:.26em;text-transform:uppercase;color:var(--gold-dp)}
.eyebrow::before,.eyebrow::after{content:"";width:22px;height:1px;background:currentColor}
.eyebrow.lt{color:var(--gold-lt)}
.secnum{font-family:'Spectral';font-size:.76rem;color:var(--gold-dp);letter-spacing:.22em}
.sechead{text-align:center;max-width:720px;margin:0 auto clamp(1.9rem,3.2vw,2.8rem)}
.sechead h2{font-family:'Spectral';font-weight:300;font-size:clamp(1.6rem,3vw,2.5rem);color:var(--navy);
  line-height:1.12;margin-top:.5rem;letter-spacing:-.012em}
.sechead h2 em{font-style:normal;color:var(--gold-dp)}
.sechead p{color:var(--muted);font-size:.9rem;margin-top:.7rem}
.sechead .rule{max-width:270px;margin:.9rem auto 0}
.sechead.lt h2{color:#fff}.sechead.lt p{color:rgba(255,255,255,.6)}.sechead.lt .secnum{color:var(--gold-lt)}
.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.78rem 1.5rem;font-size:.71rem;font-weight:800;
  letter-spacing:.12em;text-transform:uppercase;transition:.3s var(--ease);border:0}
.btn.gold{background:var(--gold);color:var(--navy);box-shadow:inset 0 0 0 1px var(--gold),inset 0 0 0 3px var(--gold),inset 0 0 0 4px rgba(10,35,66,.35)}
.btn.gold:hover{background:#fff;gap:.85rem}
.btn.dark{background:var(--navy);color:#fff}
.btn.dark:hover{background:var(--maroon);gap:.85rem}
.btn.out{color:#fff;background:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.4),inset 0 0 0 3px transparent,inset 0 0 0 4px rgba(255,255,255,.18)}
.btn.out:hover{color:var(--gold-lt);gap:.85rem}
.btn.outd{background:none;color:var(--navy);box-shadow:inset 0 0 0 1px var(--rule),inset 0 0 0 3px transparent,inset 0 0 0 4px var(--rule)}
.btn.outd:hover{color:var(--gold-dp);gap:.85rem}
.more{display:inline-flex;align-items:center;gap:.45rem;font-size:.7rem;font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;color:var(--gold-dp);transition:gap .3s var(--ease)}
.more:hover{gap:.8rem}

/* ---------------- header ---------------- */
.ticker{background:var(--navy-d);color:#fff;font-size:.8rem;overflow:hidden}
.ticker .wrap{display:flex;align-items:center;gap:1rem;padding:.42rem clamp(16px,3vw,40px)}
.ticker .lbl{background:var(--gold);color:var(--navy);font-weight:800;font-size:.63rem;letter-spacing:.12em;
  text-transform:uppercase;padding:.2rem .7rem;flex-shrink:0}
.ticker .run{flex:1;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 2%,#000 96%,transparent)}
.ticker .track{display:flex;width:max-content;animation:tick 46s linear infinite}
.ticker .track>span{white-space:nowrap;padding-right:3rem;color:rgba(255,255,255,.82)}
.ticker b{color:var(--gold-lt);font-weight:700}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.ticker:hover .track{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.ticker .track{animation:none}}
.util{background:#f3f5f8;border-bottom:1px solid var(--line);font-size:.76rem}
.util .wrap{display:flex;align-items:center;gap:1.1rem;padding:.4rem clamp(16px,3vw,40px);flex-wrap:wrap}
.util .contact{display:flex;gap:1.1rem;color:var(--muted)}
.util nav{margin-left:auto;display:flex;gap:1.05rem;align-items:center;flex-wrap:wrap}
.util nav a{font-weight:700;color:var(--navy)}
.util nav a:hover,.util .contact a:hover{color:var(--gold-dp)}
.util .lang{color:var(--muted)}.util .lang b{color:var(--navy)}
.util .soc{display:flex;gap:.3rem}
.util .soc a{width:24px;height:24px;border-radius:50%;background:var(--navy);color:#fff;display:grid;place-items:center;font-size:.6rem;font-weight:700;transition:.25s}
.util .soc a:hover{background:var(--gold);color:var(--navy)}
@media(max-width:900px){.util .contact{display:none}}
.tri{height:3px;display:flex}
.tri i{flex:1}
.tri i:nth-child(1){background:var(--saffron)}.tri i:nth-child(2){background:#fff}.tri i:nth-child(3){background:var(--green)}

/* centred masthead */
.mast{background:var(--sand);position:relative;overflow:hidden;border-bottom:1px solid var(--rule)}
.mast::before{content:"";position:absolute;inset:0;background-image:var(--jali);opacity:.5}
.mast .wrap{position:relative;z-index:1;padding-top:1.15rem;padding-bottom:1rem;text-align:center}
.crestrow{display:flex;align-items:center;justify-content:center;gap:clamp(.8rem,2.4vw,2rem)}
.crestrow .sideL,.crestrow .sideR{flex:1;max-width:280px;font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);line-height:1.7}
.crestrow .sideL{text-align:right}.crestrow .sideR{text-align:left}
.crestrow b{display:block;color:var(--navy);font-size:.71rem;letter-spacing:.1em}
.crestchip{width:80px;height:80px;border-radius:50%;background:var(--paper);display:grid;place-items:center;flex-shrink:0;
  box-shadow:0 0 0 1px var(--rule),0 0 0 5px var(--sand),0 0 0 6px var(--rule)}
.crestchip img{width:59px;height:59px;object-fit:contain}
.mast h1{font-family:'Spectral';font-weight:500;font-size:clamp(1.06rem,2vw,1.66rem);color:var(--navy);line-height:1.2;margin-top:.7rem}
.mast .hi{display:block;font-size:clamp(.9rem,1.6vw,1.26rem);color:var(--maroon);line-height:1.6;font-weight:500}
.mast .est{font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-top:.26rem}
.mast .rule{max-width:420px;margin:.65rem auto 0}
.mast .tools{display:flex;justify-content:center;gap:.8rem;margin-top:.85rem;flex-wrap:wrap}
.search{display:flex;align-items:center;background:var(--paper);height:36px;box-shadow:inset 0 0 0 1px var(--rule)}
.search input{border:0;outline:0;font:inherit;font-size:.82rem;padding:0 .7rem;width:200px;background:transparent}
.search button{border:0;background:var(--navy);color:#fff;height:100%;width:40px;display:grid;place-items:center}
.search button:hover{background:var(--gold);color:var(--navy)}
@media(max-width:860px){.crestrow .sideL,.crestrow .sideR{display:none}.search input{width:140px}}

.nav{background:var(--navy);position:sticky;top:0;z-index:70;box-shadow:0 2px 0 var(--gold),0 4px 0 var(--navy),0 5px 0 rgba(195,154,62,.5)}
.nav>.wrap{display:flex;align-items:center;justify-content:center}
.menu{list-style:none;display:flex;flex-wrap:wrap;justify-content:center}
.menu>li>a{display:block;padding:.76rem .7rem;font-size:.73rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:rgba(255,255,255,.86);white-space:nowrap;position:relative}
.menu>li+li>a::before{content:"";position:absolute;left:-2px;top:50%;transform:translateY(-50%) rotate(45deg);width:3px;height:3px;background:var(--gold);opacity:.7}
.menu>li>a .ar2{font-size:.57rem;opacity:.65;margin-left:.1rem}
.menu>li:hover>a,.menu>li.open>a{background:var(--navy-2);color:#fff}
.mega{position:absolute;left:0;right:0;top:100%;background:var(--paper);border-top:1px solid var(--gold);
  box-shadow:0 26px 48px rgba(6,22,39,.22);display:none;z-index:80}
.menu>li.open .mega{display:block}
.mega-inner{max-width:var(--maxw);margin:0 auto;padding:1.5rem clamp(16px,3vw,40px) 1.7rem;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.3rem 2.2rem;align-items:start}
.mega.cols3 .mega-inner{grid-template-columns:repeat(3,minmax(0,1fr))}
.mega.cols2 .mega-inner{grid-template-columns:repeat(2,minmax(0,280px));justify-content:start}
.mcol h4{font-size:.61rem;letter-spacing:.17em;text-transform:uppercase;color:var(--gold-dp);font-weight:800;
  padding-bottom:.42rem;margin-bottom:.42rem;border-bottom:1px solid var(--rule)}
.mcol a{display:block;padding:.25rem 0;font-size:.83rem;line-height:1.45;border-left:2px solid transparent;transition:.2s}
.mcol a:hover{color:var(--gold-dp);border-left-color:var(--gold);padding-left:.4rem}
.mcol a .pdf{font-size:.57rem;color:#a3261c;font-weight:800;margin-left:.25rem;vertical-align:.08em}
.mcol a.todo{color:#9aa3b2;cursor:not-allowed}
.mcol a.todo:hover{border-left-color:transparent;padding-left:0}
.mfeat{background:var(--sand);padding:1rem;box-shadow:inset 0 0 0 1px var(--rule)}
.mfeat h5{font-family:'Spectral';font-weight:500;font-size:1rem;color:var(--navy);margin-bottom:.3rem}
.mfeat p{font-size:.76rem;color:var(--muted);line-height:1.6;margin-bottom:.6rem}
.mfeat a{font-size:.67rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-dp)}
.burger{display:none;margin-left:auto;background:none;border:0;color:#fff;padding:.6rem .2rem;font-size:1.3rem;line-height:1}
.burger .lbl{font-size:.7rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;margin-right:.45rem;vertical-align:.14em}
@media(min-width:1101px){.burger .lbl{display:none}}
@media(max-width:1100px){
  .burger{display:block}
  .nav>.wrap{justify-content:flex-end;flex-wrap:wrap}
  .menu{display:none;position:absolute;left:0;right:0;top:100%;background:var(--navy-d);flex-direction:column;
    max-height:74vh;overflow-y:auto;border-top:1px solid rgba(255,255,255,.1);padding:0 clamp(16px,3vw,40px)}
  .nav.open .menu{display:flex}
  .menu>li{width:100%;border-bottom:1px solid rgba(255,255,255,.07)}
  .menu>li>a{padding:.85rem 0;display:flex;justify-content:space-between;align-items:center}
  .menu>li+li>a::before{display:none}
  .mega{position:static;box-shadow:none;border-top:0;background:rgba(255,255,255,.04)}
  .mega-inner,.mega.cols3 .mega-inner,.mega.cols2 .mega-inner{grid-template-columns:1fr;padding:.4rem 0 1rem;gap:.9rem}
  .mcol h4{color:var(--gold-lt);border-bottom-color:rgba(255,255,255,.12)}
  .mcol a{color:rgba(255,255,255,.82)}
  .mfeat{background:rgba(255,255,255,.05)}
  .mfeat h5{color:#fff}
}

/* ---------------- hero band ---------------- */
.heroband{background:var(--navy-d);position:relative;padding:clamp(1.7rem,3.2vw,2.6rem) 0;overflow:hidden}
.heroband::before{content:"";position:absolute;inset:0;background-image:var(--jali);opacity:.3}
.heroband .wrap{position:relative;z-index:1;display:grid;grid-template-columns:310px 1fr;gap:clamp(1.1rem,2.2vw,1.8rem)}
@media(max-width:1000px){.heroband .wrap{grid-template-columns:1fr}}
.side{display:flex;flex-direction:column;gap:1rem}
.panel{background:var(--paper);box-shadow:inset 0 0 0 1px var(--rule),inset 0 0 0 4px var(--paper),inset 0 0 0 5px var(--rule)}
.panel>h3{text-align:center;font-family:'Spectral';font-weight:500;font-size:1.05rem;color:var(--navy);
  padding:.75rem .9rem 0;display:flex;align-items:center;justify-content:center;gap:.55rem}
.panel>h3 .mk{width:15px;height:15px;color:var(--gold)}
.panel .rule{margin:.6rem 1.1rem .3rem}
.panel .body{padding:.5rem 1.1rem 1.1rem}
.focus{position:relative;min-height:106px;text-align:center}
.focus .slide{display:none}
.focus .slide.on{display:block;animation:fadein .5s var(--ease)}
@keyframes fadein{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.focus .slide a{font-family:'Spectral';font-size:.96rem;color:var(--navy);line-height:1.4;display:block}
.focus .slide a:hover{color:var(--gold-dp)}
.focus .slide .dt{display:block;font-size:.68rem;color:var(--gold-dp);margin-top:.4rem;font-weight:700}
.focus .dots{display:flex;gap:.3rem;justify-content:center;margin-top:.8rem}
.focus .dots button{width:7px;height:7px;border:0;background:var(--sand-2);padding:0;border-radius:50%}
.focus .dots button[aria-current="true"]{background:var(--gold)}
.ev{display:grid;grid-template-columns:46px 1fr;gap:.7rem;padding:.56rem 0;border-bottom:1px dotted var(--rule);align-items:center}
.ev:last-of-type{border-bottom:0}
.ev .d{text-align:center;background:var(--sand);padding:.26rem 0;box-shadow:inset 0 0 0 1px var(--rule);position:relative}
.ev .d::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--gold)}
.ev .d b{display:block;font-family:'Spectral';font-size:1.04rem;color:var(--navy);line-height:1}
.ev .d small{font-size:.52rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-dp);font-weight:700}
.ev h4{font-size:.81rem;color:var(--navy);font-weight:600;line-height:1.35}
.ev p{font-size:.7rem;color:var(--muted)}
.needs{font-size:.68rem;color:var(--gold-dp);font-style:italic;margin-top:.7rem;line-height:1.5}
.slider{position:relative;overflow:hidden;background:#000;min-height:300px;
  box-shadow:inset 0 0 0 1px var(--rule),0 0 0 4px rgba(195,154,62,.16)}
.slider .track{display:flex;height:100%;transition:transform .7s var(--ease)}
.slider figure{min-width:100%;position:relative}
.slider img{width:100%;height:100%;object-fit:cover;aspect-ratio:16/9}
.slider figcaption{position:absolute;left:0;right:0;bottom:0;padding:2.2rem 1.5rem 1.1rem;
  background:linear-gradient(transparent,rgba(6,22,39,.9));color:#fff}
.slider figcaption b{display:block;font-family:'Spectral';font-weight:400;font-size:clamp(1rem,1.7vw,1.4rem)}
.slider figcaption span{font-size:.73rem;color:rgba(255,255,255,.62)}
.slider .arw{position:absolute;top:50%;transform:translateY(-50%);width:40px;height:52px;border:0;
  background:rgba(6,22,39,.55);color:#fff;font-size:1.1rem;display:grid;place-items:center;transition:.25s}
.slider .arw:hover{background:var(--gold);color:var(--navy)}
.slider .prev{left:0}.slider .next{right:0}
.slider .dots{position:absolute;bottom:.7rem;right:1rem;display:flex;gap:.35rem}
.slider .dots button{width:9px;height:9px;border:0;padding:0;border-radius:50%;background:rgba(255,255,255,.4)}
.slider .dots button[aria-current="true"]{background:var(--gold);width:22px;border-radius:5px}

section{padding:clamp(2.6rem,5vw,4.2rem) 0}
.bg-sand{background:var(--sand);position:relative;overflow:hidden}
.bg-sand::before{content:"";position:absolute;inset:0;background-image:var(--jali);opacity:.45}
.bg-sand>.wrap{position:relative;z-index:1}
.bg-navy{background:var(--navy-d);color:#fff;position:relative;overflow:hidden}
.bg-navy::before{content:"";position:absolute;inset:0;background-image:var(--jali);opacity:.26}
.bg-navy>.wrap{position:relative;z-index:1}

/* ---------------- LEVEL 3 hero: full-bleed film ---------------- */
.fhero{position:relative;min-height:min(84vh,780px);display:flex;align-items:center;background:#000;
  overflow:hidden;padding:clamp(3rem,6vw,4.6rem) 0 clamp(120px,13vw,180px)}
.fhero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 46%}
.fhero::after{content:"";position:absolute;inset:0;background:
  linear-gradient(100deg,rgba(6,22,39,.94) 16%,rgba(8,28,51,.8) 46%,rgba(10,35,66,.42) 78%,rgba(10,35,66,.26) 100%)}
.fhero .chk{position:absolute;right:3%;top:48%;transform:translateY(-50%);width:min(40vw,430px);aspect-ratio:1;
  color:rgba(220,185,100,.15);z-index:1;pointer-events:none}
.fhero .wrap{position:relative;z-index:2;width:100%}
.fhero h2{font-family:'Spectral';font-weight:300;font-size:clamp(2.05rem,4.3vw,3.7rem);color:#fff;
  max-width:17ch;line-height:1.07;margin-top:1rem;letter-spacing:-.016em}
.fhero h2 em{font-style:normal;color:var(--gold-lt)}
.fhero .rule{max-width:320px;margin-top:1.2rem}
.fhero p{margin-top:1.2rem;max-width:46ch;color:rgba(255,255,255,.7);font-size:clamp(.93rem,1.05vw,1.03rem);line-height:1.82}
.fhero .acts{margin-top:1.9rem;display:flex;gap:1.1rem;flex-wrap:wrap;align-items:center}
.watch{display:inline-flex;align-items:center;gap:.75rem;background:none;border:0;color:#fff;
  font-size:.71rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.watch .disc{width:46px;height:46px;border-radius:50%;background:rgba(255,255,255,.13);display:grid;
  place-items:center;box-shadow:inset 0 0 0 1px rgba(220,185,100,.55);transition:.3s var(--ease)}
.watch:hover .disc{background:var(--gold);transform:scale(1.07)}
.watch .disc::after{content:"";width:0;height:0;margin-left:3px;
  border-left:13px solid #fff;border-top:8px solid transparent;border-bottom:8px solid transparent}
.watch:hover .disc::after{border-left-color:var(--navy)}
/* three cards floating over the hero's lower edge */
.hcards{position:relative;z-index:12;margin-top:clamp(-150px,-12vw,-100px)}
.hcards .inner{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
@media(max-width:980px){.hcards .inner{grid-template-columns:1fr}}
.hcards .panel{box-shadow:inset 0 0 0 1px var(--rule),inset 0 0 0 4px var(--paper),inset 0 0 0 5px var(--rule),0 24px 54px rgba(6,22,39,.26)}
.hcards .panel>h3{padding-top:.85rem}
.lastn{display:block;padding:.3rem 0}
.lastn .tg{display:inline-block;font-size:.55rem;font-weight:800;letter-spacing:.11em;text-transform:uppercase;
  padding:.12rem .45rem;background:#f6dedb;color:#95251b;margin-bottom:.4rem}
.lastn h4{font-family:'Spectral';font-weight:500;font-size:1rem;color:var(--navy);line-height:1.38}
.lastn:hover h4{color:var(--gold-dp)}
.lastn p{font-size:.78rem;color:var(--muted);margin-top:.35rem;line-height:1.6}
/* film modal */
.film{position:fixed;inset:0;background:rgba(4,12,22,.95);display:none;place-items:center;z-index:210;padding:3rem 1rem}
.film.on{display:grid}
.film video{max-width:min(1100px,94vw);max-height:80vh;width:100%;background:#000;
  box-shadow:0 0 0 1px rgba(220,185,100,.4),0 0 0 6px rgba(4,12,22,.95),0 0 0 7px rgba(220,185,100,.25)}
.film .x{position:absolute;top:1rem;right:1.3rem;background:none;border:0;color:#fff;font-size:2rem;line-height:1}
.film .cap{color:rgba(255,255,255,.6);text-align:center;margin-top:.9rem;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase}

/* ---------------- about ---------------- */
.about .cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.6rem,3.4vw,3.2rem);align-items:center}
@media(max-width:900px){.about .cols{grid-template-columns:1fr}}
.about .pic{position:relative;background:#000;padding:0;
  box-shadow:0 0 0 1px var(--rule),0 0 0 6px var(--paper),0 0 0 7px var(--rule)}
.about .pic img,.about .pic video{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}
.about .pic .play{position:absolute;inset:0;width:100%;height:100%;border:0;background:rgba(6,22,39,.28);display:grid;place-items:center;transition:background .3s var(--ease)}
.about .pic .play:hover{background:rgba(6,22,39,.42)}
.about .pic .disc{width:72px;height:72px;border-radius:50%;background:rgba(255,255,255,.93);display:grid;place-items:center;
  box-shadow:0 8px 26px rgba(0,0,0,.35),0 0 0 1px var(--gold);transition:transform .3s var(--ease)}
.about .pic .play:hover .disc{transform:scale(1.08);background:var(--gold)}
.about .pic .disc::after{content:"";width:0;height:0;margin-left:5px;border-left:20px solid var(--navy);border-top:12px solid transparent;border-bottom:12px solid transparent}
.about .pic .vcap{position:absolute;left:0;right:0;bottom:0;padding:1.5rem .9rem .55rem;pointer-events:none;
  background:linear-gradient(transparent,rgba(6,22,39,.8));color:#fff;font-size:.7rem;letter-spacing:.09em;text-transform:uppercase;font-weight:700}
.about .pic.playing .play,.about .pic.playing .vcap{display:none}
.about h3{font-family:'Spectral';font-weight:400;font-size:clamp(1.3rem,2.3vw,1.85rem);color:var(--navy)}
.about .rule{max-width:220px;margin:.7rem 0 1rem}
.about p{color:var(--muted);font-size:.92rem;line-height:1.86;margin-bottom:.9rem}
.about p.dc::first-letter{font-family:'Spectral';font-size:3.6rem;float:left;line-height:.72;padding:.07em .01em 0 0;color:var(--gold-dp);font-weight:400}

/* ---------------- preamble band (new — replaces their "Jurist Speaks") -------- */
.preamble{background:var(--maroon);color:#fff;position:relative;overflow:hidden;padding:clamp(2.6rem,5vw,4.2rem) 0}
.preamble::before{content:none;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  font-family:'Spectral';font-weight:300;font-size:clamp(1.5rem,6.2vw,5.6rem);white-space:nowrap;
  letter-spacing:.06em;color:rgba(255,255,255,.08);pointer-events:none;line-height:1}
.preamble .chk{position:absolute;left:-6%;top:50%;transform:translateY(-50%);width:min(32vw,300px);aspect-ratio:1;color:rgba(255,255,255,.08)}
.preamble .wrap{position:relative;z-index:1}
.preamble .in{display:grid;grid-template-columns:auto 1fr;gap:clamp(1.5rem,3.2vw,3rem);align-items:center}
@media(max-width:760px){.preamble .in{grid-template-columns:1fr}}
.preamble .medal{width:118px;height:118px;border-radius:50%;display:grid;place-items:center;flex-shrink:0;
  box-shadow:0 0 0 1px rgba(255,255,255,.35),0 0 0 6px var(--maroon),0 0 0 7px rgba(255,255,255,.22)}
.preamble .medal span{font-family:'Spectral';font-size:1.45rem;letter-spacing:.06em}
.preamble blockquote{font-family:'Spectral';font-weight:300;font-style:italic;font-size:clamp(1.12rem,2.2vw,1.68rem);line-height:1.52}
.preamble blockquote::first-letter{font-size:1.9em;float:left;line-height:.82;padding:.08em .14em 0 0;font-style:normal;color:var(--gold-lt)}
.preamble cite{display:block;margin-top:.9rem;font-style:normal;font-size:.73rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.76);font-weight:700}

/* ---------------- news + announcements in framed panels ---------------- */
.nacols{display:grid;grid-template-columns:1.9fr 1fr;gap:clamp(1.3rem,2.6vw,2.2rem);align-items:start}
@media(max-width:960px){.nacols{grid-template-columns:1fr}}
.pan{padding:clamp(1.2rem,2.2vw,1.8rem)}
.pan>h3{font-family:'Spectral';font-weight:500;font-size:1.26rem;color:var(--navy);display:flex;align-items:center;gap:.6rem}
.pan>h3 .mk{width:15px;height:15px;color:var(--gold);flex-shrink:0}
.pan .rule{margin:.7rem 0 1.1rem}
.newsgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
@media(max-width:820px){.newsgrid{grid-template-columns:1fr}}
.ncard{background:var(--sand);box-shadow:inset 0 0 0 1px var(--rule);display:flex;flex-direction:column;transition:.32s var(--ease)}
.ncard:hover{transform:translateY(-3px);box-shadow:inset 0 0 0 1px var(--gold),0 12px 26px rgba(6,22,39,.12)}
.ncard .ph{overflow:hidden;aspect-ratio:16/10;background:var(--sand-2)}
.ncard .ph img{width:100%;height:100%;object-fit:cover;object-position:center top;transition:transform 1s var(--ease)}
.ncard:hover .ph img{transform:scale(1.05)}
.ncard .t{padding:.8rem .9rem 1rem;flex:1;display:flex;flex-direction:column}
.ncard .dt{font-size:.63rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-dp);font-weight:800}
.ncard h4{font-family:'Spectral';font-weight:500;font-size:1rem;color:var(--navy);line-height:1.35;margin:.3rem 0 .45rem}
.ncard p{font-size:.78rem;color:var(--muted);line-height:1.6;flex:1}
.ncard .go{font-size:.63rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-dp);margin-top:.65rem}
.anns{max-height:320px;overflow-y:auto;scrollbar-width:thin}
.ann{display:block;padding:.72rem 0;border-bottom:1px dotted var(--rule);transition:.25s}
.ann:last-child{border-bottom:0}
.ann:hover{padding-left:.4rem}
.ann:hover h4{color:var(--gold-dp)}
.ann h4{font-size:.85rem;color:var(--navy);font-weight:600;line-height:1.4;transition:color .25s}
.ann .meta{display:flex;gap:.5rem;align-items:center;margin-top:.26rem;flex-wrap:wrap}
.ann .tg{font-size:.55rem;font-weight:800;letter-spacing:.11em;text-transform:uppercase;padding:.12rem .45rem;background:var(--sand-2);color:var(--gold-dp)}
.ann .tg.hot{background:#f6dedb;color:#95251b}
.ann .ld{font-size:.67rem;color:var(--muted)}
.bandfoot{display:flex;justify-content:center;gap:.8rem;margin-top:1.3rem;flex-wrap:wrap}

/* ---------------- five tiles as framed cards ---------------- */
.t5{display:grid;grid-template-columns:repeat(5,1fr);gap:1rem}
@media(max-width:900px){.t5{grid-template-columns:repeat(2,1fr)}}
@media(max-width:460px){.t5{grid-template-columns:1fr}}
.t5 a{background:var(--paper);padding:1.5rem .9rem;text-align:center;transition:.3s var(--ease);
  box-shadow:inset 0 0 0 1px var(--rule),inset 0 0 0 4px var(--paper),inset 0 0 0 5px var(--rule)}
.t5 a:hover{background:var(--sand);transform:translateY(-5px)}
.t5 svg{width:32px;height:32px;margin:0 auto .65rem;color:var(--gold-dp);stroke:currentColor;fill:none;stroke-width:1.3}
.t5 b{font-family:'Spectral';font-weight:500;font-size:.94rem;color:var(--navy)}

/* ---------------- admissions + tiles ---------------- */
.adm .cols{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(1.4rem,3vw,2.6rem);align-items:center}
@media(max-width:900px){.adm .cols{grid-template-columns:1fr}}
.admcard{position:relative;overflow:hidden;min-height:300px;display:flex;align-items:center;justify-content:center;text-align:center;
  box-shadow:0 0 0 1px var(--rule),0 0 0 6px var(--paper),0 0 0 7px var(--rule)}
.admcard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.admcard::after{content:"";position:absolute;inset:0;background:rgba(6,22,39,.76)}
.admcard .in{position:relative;z-index:1;padding:2rem 1.4rem}
.admcard h3{font-family:'Spectral';font-weight:300;font-size:clamp(1.35rem,2.4vw,1.95rem);color:#fff;margin-bottom:.5rem}
.admcard .rule{max-width:160px;margin:0 auto .8rem}
.admcard p{color:rgba(255,255,255,.68);font-size:.85rem;margin-bottom:1.1rem;max-width:34ch;margin-inline:auto}
.t6{display:grid;grid-template-columns:repeat(3,1fr);gap:.9rem}
@media(max-width:620px){.t6{grid-template-columns:repeat(2,1fr)}}
.t6 a{background:var(--paper);padding:1.2rem .8rem;text-align:center;transition:.28s var(--ease);box-shadow:inset 0 0 0 1px var(--rule)}
.t6 a:hover{background:var(--navy);box-shadow:inset 0 0 0 1px var(--navy)}
.t6 svg{width:28px;height:28px;margin:0 auto .55rem;color:var(--gold-dp);stroke:currentColor;fill:none;stroke-width:1.25}
.t6 a:hover svg{color:var(--gold-lt)}
.t6 .cap{font-size:.73rem;font-weight:700;color:var(--navy);line-height:1.35}
.t6 a:hover .cap{color:#fff}

/* ---------------- research row of 5, scales divider ---------------- */
.scales{width:48px;height:48px;margin:0 auto 1.2rem;color:var(--gold-lt);opacity:.85;stroke:currentColor;fill:none;stroke-width:1.5}
.r5{display:grid;grid-template-columns:repeat(5,1fr);gap:1rem}
@media(max-width:900px){.r5{grid-template-columns:repeat(2,1fr)}}
@media(max-width:460px){.r5{grid-template-columns:1fr}}
.r5 a{background:rgba(255,255,255,.07);padding:1.5rem 1rem;text-align:center;transition:.3s var(--ease);
  box-shadow:inset 0 0 0 1px rgba(220,185,100,.3)}
.r5 a:hover{background:var(--gold);box-shadow:inset 0 0 0 1px var(--gold)}
.r5 svg{width:30px;height:30px;margin:0 auto .65rem;color:var(--gold-lt);stroke:currentColor;fill:none;stroke-width:1.3}
.r5 a:hover svg{color:var(--navy)}
.r5 b{font-family:'Spectral';font-weight:400;font-size:.92rem;color:#fff}
.r5 a:hover b{color:var(--navy)}

/* ---------------- messages ---------------- */
.msg{display:grid;grid-template-columns:250px 1fr;gap:clamp(1.4rem,3vw,2.6rem);align-items:center;margin-bottom:clamp(2rem,4vw,3.2rem)}
.msg:last-child{margin-bottom:0}
.msg.rev{grid-template-columns:1fr 250px}
.msg.rev .port{order:2}
@media(max-width:820px){.msg,.msg.rev{grid-template-columns:1fr}.msg.rev .port{order:0}}
.port{background:var(--sand);box-shadow:0 0 0 1px var(--rule),0 0 0 6px var(--paper),0 0 0 7px var(--rule)}
.port img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:center top}
.msg h3{font-family:'Spectral';font-weight:400;font-size:clamp(1.25rem,2.2vw,1.7rem);color:var(--navy)}
.msg .who{font-size:.74rem;font-weight:800;letter-spacing:.11em;text-transform:uppercase;color:var(--gold-dp);margin:.28rem 0 .7rem}
.msg .rule{max-width:200px;margin-bottom:1rem}
.msg p{color:var(--muted);font-size:.9rem;line-height:1.85;margin-bottom:.9rem}

/* ---------------- achievements, press, connect ---------------- */
.achgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
@media(max-width:960px){.achgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.achgrid{grid-template-columns:1fr}}
.achgrid button{border:0;padding:0;background:var(--paper);text-align:left;display:block;width:100%;
  box-shadow:inset 0 0 0 1px var(--rule);transition:.3s var(--ease)}
.achgrid button:hover{box-shadow:inset 0 0 0 1px var(--gold);transform:translateY(-4px)}
.achgrid .ph{aspect-ratio:4/3;overflow:hidden;background:var(--sand-2)}
.achgrid .ph img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.achgrid button:hover .ph img{transform:scale(1.05)}
.achgrid .cap{padding:.65rem .8rem .85rem}
.achgrid .cap b{display:block;font-size:.84rem;color:var(--navy);line-height:1.35}
.achgrid .cap span{font-size:.67rem;color:var(--muted)}
.pgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
@media(max-width:960px){.pgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.pgrid{grid-template-columns:1fr}}
.pgrid a{background:var(--paper);display:block;transition:.3s var(--ease);box-shadow:inset 0 0 0 1px var(--rule)}
.pgrid a:hover{box-shadow:inset 0 0 0 1px var(--gold);transform:translateY(-4px)}
.pgrid .ph{aspect-ratio:4/3;overflow:hidden;background:var(--sand-2)}
.pgrid .ph img{width:100%;height:100%;object-fit:cover;object-position:center top}
.pgrid .t{padding:.7rem .8rem .9rem}
.pgrid .src{font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-dp);font-weight:800}
.pgrid h4{font-family:'Spectral';font-weight:500;font-size:.92rem;color:var(--navy);line-height:1.35;margin-top:.22rem}
.sc{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
@media(max-width:900px){.sc{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.sc{grid-template-columns:1fr}}
.sc a{padding:1.35rem 1rem;text-align:center;transition:.3s var(--ease);box-shadow:inset 0 0 0 1px rgba(220,185,100,.3)}
.sc a:hover{background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px var(--gold)}
.sc .ic{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.1);display:grid;place-items:center;
  margin:0 auto .6rem;font-weight:800;font-size:.88rem;color:var(--gold-lt)}
.sc b{display:block;font-size:.85rem;color:#fff}
.sc span{font-size:.72rem;color:rgba(255,255,255,.5)}

.lb{position:fixed;inset:0;background:rgba(4,12,22,.93);display:none;place-items:center;z-index:200;padding:3rem 1rem}
.lb.on{display:grid}
.lb img{max-width:min(1000px,92vw);max-height:78vh;object-fit:contain}
.lb .cap{color:#fff;text-align:center;margin-top:.9rem;font-size:.88rem}
.lb .x{position:absolute;top:1rem;right:1.3rem;background:none;border:0;color:#fff;font-size:2rem;line-height:1}
.lb .nv{position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,.1);border:0;color:#fff;width:44px;height:60px;font-size:1.3rem}
.lb .nv:hover{background:var(--gold);color:var(--navy)}
.lb .p{left:1rem}.lb .n{right:1rem}

footer{background:#051320;color:rgba(255,255,255,.55);font-size:.85rem}
footer .tri{height:3px}
.fmain{padding:clamp(2.4rem,4.4vw,3.6rem) 0 0;position:relative;overflow:hidden}
.fmain::before{content:"";position:absolute;inset:0;background-image:var(--jali);opacity:.2}
.fmain .wrap{position:relative;z-index:1}
footer h4{color:#fff;font-size:.65rem;letter-spacing:.2em;text-transform:uppercase;font-weight:800;margin-bottom:.85rem;display:flex;align-items:center;gap:.5rem}
footer h4::before{content:"";width:5px;height:5px;background:var(--gold);transform:rotate(45deg)}
footer a{display:block;padding:.22rem 0;color:rgba(255,255,255,.55)}
footer a:hover{color:var(--gold-lt)}
.fcols{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.1fr;gap:2rem}
@media(max-width:880px){.fcols{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.fcols{grid-template-columns:1fr}}
.fchip{width:58px;height:58px;border-radius:50%;background:#fff;display:grid;place-items:center;margin-bottom:.9rem;
  box-shadow:0 0 0 4px #051320,0 0 0 5px rgba(195,154,62,.5)}
.fchip img{width:43px;height:43px;object-fit:contain}
.fphone{display:flex;gap:.6rem;padding:.3rem 0}
.fphone b{color:#fff;font-weight:700;min-width:104px;font-size:.78rem}
.fsoc{display:flex;gap:.45rem;margin-top:.9rem}
.fsoc a{width:32px;height:32px;border:1px solid rgba(255,255,255,.16);display:grid;place-items:center;font-size:.72rem;padding:0}
.fsoc a:hover{background:var(--gold);color:var(--navy);border-color:var(--gold)}
.policy{border-top:1px solid rgba(255,255,255,.1);margin-top:2rem;padding:.95rem 0}
.policy .wrap{display:flex;flex-wrap:wrap;gap:.2rem 1.3rem;font-size:.73rem;justify-content:center}
.policy a{display:inline;padding:0}
.fbot{border-top:1px solid rgba(255,255,255,.1);padding:.9rem 0 1.3rem}
.fbot .wrap{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:.72rem;color:rgba(255,255,255,.4)}

.totop{position:fixed;right:1rem;bottom:1rem;width:42px;height:42px;background:var(--navy);color:#fff;border:0;
  display:grid;place-items:center;font-size:1.1rem;opacity:0;pointer-events:none;transition:.3s var(--ease);z-index:90}
.totop.on{opacity:1;pointer-events:auto}
.totop:hover{background:var(--gold);color:var(--navy)}
.rv{opacity:0;transform:translateY(20px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}html{scroll-behavior:auto}.slider .track{transition:none}}

/* =========================================================================
   ROUNDING LAYER — softened corners. One scale, applied consistently.
   The lozenge, the jali lattice and the tricolour hairline stay sharp:
   they are ornament, not containers.
   ========================================================================= */
:root{ --r1:5px; --r2:10px; --r3:16px; --rp:999px; }

.ticker .lbl{border-radius:var(--rp)}
.search{border-radius:var(--r2);overflow:hidden}
.btn{border-radius:var(--r2)}
.mega{border-radius:0 0 var(--r3) var(--r3);overflow:hidden}
.mfeat{border-radius:var(--r2)}
@media(max-width:1100px){.mega{border-radius:0}}

.panel{border-radius:var(--r3);overflow:hidden}
.dbox{border-radius:var(--r3)}
.annbox{border-radius:var(--r3);overflow:hidden}
.bar{border-radius:var(--r2) var(--r2) 0 0}
.anns{border-radius:var(--r1)}
.ann{border-radius:var(--r1)}
.ev .d,.edate{border-radius:var(--r1)}
.focus .dots button,.slider .dots button{border-radius:var(--rp)}
.slider{border-radius:var(--r3);overflow:hidden}
.slider .prev{border-radius:0 var(--r2) var(--r2) 0}
.slider .next{border-radius:var(--r2) 0 0 var(--r2)}

.about .pic{border-radius:var(--r3);overflow:hidden}
.about .pic img,.about .pic video{border-radius:var(--r3)}
.preamble .medal,.crestchip,.fchip{border-radius:50%}

.ncard,.card{border-radius:var(--r2);overflow:hidden}
.t5 a,.t6 a,.r5 a,.sc a{border-radius:var(--r2)}
.admcard{border-radius:var(--r3);overflow:hidden}
.port{border-radius:var(--r3);overflow:hidden}
.port img{border-radius:var(--r3)}
.achgrid button,.pgrid a,.press a{border-radius:var(--r2);overflow:hidden}
.achgrid .ph,.pgrid .ph,.press .ph{border-radius:var(--r2) var(--r2) 0 0}
.lead .ph,.srow .ph,.split .art{border-radius:var(--r2);overflow:hidden}
.access .inner{border-radius:var(--r3);overflow:hidden}
.tg,.ann .tg,.ncard .dt{border-radius:var(--r1)}
.film video{border-radius:var(--r2)}
.lb img{border-radius:var(--r2)}
.lb .p{border-radius:0 var(--r2) var(--r2) 0}
.lb .n{border-radius:var(--r2) 0 0 var(--r2)}
.totop{border-radius:var(--r2)}
.a11y .grp button{border-radius:var(--r1)}
.mast .applyb,.cta{border-radius:var(--r2)}

/* ---------------- sticky social rail (replaces the top-bar and footer icons) ---------------- */
/* Anchored to the lower half rather than centred: at scroll-top the sticky nav
   sits mid-page, and a centred rail lands on top of it. */
.socrail{position:fixed;right:0;top:auto;bottom:20%;z-index:95;
  display:flex;flex-direction:column;align-items:flex-end;gap:2px}
.socrail a{display:flex;align-items:center;justify-content:flex-end;height:42px;width:42px;
  background:var(--navy);color:#fff;font-weight:800;font-size:.82rem;white-space:nowrap;overflow:hidden;
  border-radius:var(--r2,0) 0 0 var(--r2,0);
  box-shadow:-2px 0 10px rgba(6,22,39,.18);
  transition:width .34s cubic-bezier(.16,1,.3,1),background .25s,color .25s}
.socrail a .g{width:42px;flex:0 0 42px;display:grid;place-items:center}
.socrail a .t{font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;font-weight:800;
  opacity:0;transition:opacity .25s;padding-left:.9rem}
.socrail a:hover,.socrail a:focus-visible{width:150px;background:var(--gold);color:var(--navy)}
.socrail a:hover .t,.socrail a:focus-visible .t{opacity:1}
@media(max-width:760px){
  .socrail a{height:36px;width:36px;font-size:.74rem}
  .socrail a .g{width:36px;flex:0 0 36px}
  .socrail a:hover,.socrail a:focus-visible{width:36px}
  .socrail a .t{display:none}
  .socrail{bottom:16%}
}
@media(max-height:520px){.socrail{display:none}}

/* ---------------- client changes, 21 Oct 2026 ---------------- */
.mast .actline{text-align:center;margin-top:.6rem;font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:#5a6577}
.mast .actline b{color:var(--navy);font-size:.71rem;letter-spacing:.1em}
.util .search{height:28px}.util .search input{width:150px;font-size:.74rem;padding:0 .55rem}.util .search button{width:30px}
@media(max-width:600px){.util .search input{width:110px}}
.vlist{height:206px;overflow:hidden;position:relative;-webkit-mask-image:linear-gradient(transparent,#000 9%,#000 91%,transparent);mask-image:linear-gradient(transparent,#000 9%,#000 91%,transparent)}
.vtrack{animation:vup 34s linear infinite}
.vlist:hover .vtrack,.vlist:focus-within .vtrack{animation-play-state:paused}
@keyframes vup{to{transform:translateY(-50%)}}
.vlist a{display:block;padding:.6rem .1rem;border-bottom:1px solid var(--line);font-family:'Spectral';font-size:.9rem;line-height:1.38;color:var(--navy)}
.vlist a:hover{color:var(--gold-dp)}
.vlist .dt{display:block;font-family:'Mulish',sans-serif;font-size:.6rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#7d5c12;margin-bottom:.18rem}
.vmore{margin-top:.9rem;text-align:center}
@media(prefers-reduced-motion:reduce){.vtrack{animation:none}.vlist{overflow-y:auto;-webkit-mask-image:none;mask-image:none}.vtrack>div[aria-hidden]{display:none}}
.preamble .medal img{width:96px;height:96px;object-fit:contain;background:#fff;border-radius:50%;padding:8px}

/* client 21 Oct: the diamond (jali) lattice background removed everywhere - delete this line to bring it back */
:root{--jali:none}

/* ---------------- compliance fixes, 21 Oct 2026 ---------------- */
.mpause{border:0;background:transparent;color:inherit;cursor:pointer;font-size:.6rem;line-height:1;padding:.35rem .45rem;border-radius:var(--r1);opacity:.8}
.mpause:hover,.mpause:focus-visible{opacity:1;background:rgba(195,154,62,.18)}
.ticker .mpause{color:#fff;margin-left:.4rem}
.vmore{display:flex;align-items:center;justify-content:center;gap:.6rem}
.vmore .mpause{color:var(--navy);box-shadow:inset 0 0 0 1px var(--rule)}
.paused .track,.paused .vtrack{animation-play-state:paused !important}
.util .a11y{display:flex;gap:.15rem}
.util .a11y button{border:0;background:transparent;font:700 .74rem/1 'Mulish',sans-serif;color:var(--navy);padding:.3rem .35rem;border-radius:var(--r1);cursor:pointer}
.util .a11y button:hover,.util .a11y button[aria-pressed="true"]{background:var(--navy);color:#fff}
html.hc{filter:invert(1) hue-rotate(180deg)} html.hc img,html.hc video,html.hc .fhero>img{filter:invert(1) hue-rotate(180deg)}
/* the rail sat on top of body text on narrow screens - make it a normal row there */
@media(max-width:760px){.socrail{position:static;flex-direction:row;justify-content:center;gap:.5rem;padding:1rem 0;background:var(--navy);transform:none}
  .socrail a{border-radius:50% !important;width:40px}.socrail a .t{display:none}}

/* ---------------- masthead: Campus (chosen 21 Oct) ---------------- */
.mast.m3::before{opacity:1;background:
   linear-gradient(180deg,rgba(244,238,225,.86) 0%,rgba(244,238,225,.9) 55%,#f4eee1 100%),
   url(../home/about-video-poster.jpg) 50% 45%/cover no-repeat}
/* ---------------- client changes, 31 Oct 2026 ---------------- */
/* header: logo + name on the left, utilities on the right; the centred masthead band is gone */
.hdr{background:var(--paper);border-bottom:1px solid var(--line)}
.hdr>.wrap{display:flex;align-items:center;justify-content:space-between;gap:.8rem 2rem;padding-top:.65rem;padding-bottom:.65rem;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:.9rem;min-width:0}
.brand .crestchip{width:66px;height:66px;box-shadow:0 0 0 1px var(--rule),0 0 0 4px var(--paper),0 0 0 5px var(--rule)}
.brand .crestchip img{width:52px;height:52px}
.brand h1,.brand .bn{font-family:'Spectral';font-weight:500;font-size:clamp(1.02rem,1.5vw,1.32rem);color:var(--navy);line-height:1.22}
.brand h1 .hi,.brand .bn .hi{display:block;font-family:'Noto Serif Devanagari','Noto Sans Devanagari',serif;font-size:clamp(.84rem,1.12vw,.98rem);color:var(--maroon);line-height:1.55;font-weight:500}
.brand .actline{font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:.12rem}
.brand .actline b{color:var(--navy);font-size:.64rem;letter-spacing:.08em}
.hdr .util{background:none;border:0;display:flex;flex-direction:column;align-items:flex-end;gap:.4rem}
.hdr .util .row{display:flex;align-items:center;justify-content:flex-end;gap:.9rem;flex-wrap:wrap;margin:0}
.util a.todo{color:var(--muted);font-weight:600;cursor:default}
.hdr .lang{font-family:'Noto Serif Devanagari','Noto Sans Devanagari',serif;font-weight:600;font-size:.8rem;color:var(--navy);padding:.1rem .7rem;border-radius:var(--rp);box-shadow:inset 0 0 0 1px var(--rule)}
.hdr .lang:hover{background:var(--navy);color:#fff}
@media(max-width:900px){.hdr>.wrap{justify-content:center}.hdr .util{align-items:center}.hdr .util .row{justify-content:center}}
@media(max-width:600px){.brand .crestchip{width:54px;height:54px}.brand .crestchip img{width:42px;height:42px}.brand .actline{display:none}.brand h1,.brand .bn{font-size:.98rem}}
/* no section serial numbers and no diamond rules, so the heading groups close up */
.sechead h2{margin-top:0}
.about{padding-top:clamp(1.8rem,3.4vw,2.6rem)}
.about .sechead{margin-bottom:clamp(1.2rem,2.2vw,1.8rem)}
.about h3{margin-bottom:.8rem}
.pan>h3{margin-bottom:1rem}
.panel>h3{padding-bottom:.35rem}
.admcard h3{margin-bottom:.8rem}
/* hero cards: Tenders + Student Notices */
@media(min-width:981px){.hcards .inner{grid-template-columns:repeat(2,1fr)}}
.ncard .go{margin-top:auto;padding-top:.65rem}
/* VC and Registrar: solid dark-blue boxes with white text */
.lead-msg{padding:clamp(2rem,4vw,3.2rem) 0}
.msg.box{background:var(--navy);border-radius:var(--r3);padding:clamp(1.3rem,2.6vw,2.2rem);grid-template-columns:220px 1fr;margin-bottom:1.25rem;box-shadow:0 18px 40px rgba(6,22,39,.16)}
.msg.box.rev{grid-template-columns:1fr 220px}
.msg.box:last-child{margin-bottom:0}
.msg.box h3{color:#fff}
.msg.box .who{font-size:1.02rem;letter-spacing:.08em;color:var(--gold-lt);margin:.35rem 0 .9rem}
.msg.box p{color:rgba(255,255,255,.86)}
.msg.box p a{color:var(--gold-lt);text-decoration:underline;text-underline-offset:3px}
.msg.box .port{box-shadow:0 0 0 1px rgba(220,185,100,.6);background:var(--navy-2)}
@media(max-width:820px){.msg.box,.msg.box.rev{grid-template-columns:1fr}.msg.box .port{max-width:240px}.msg.box.rev .port{order:-1}}
/* Digital @DBRANLU: photo tiles (2 Nov), after Priya's reference: under the pointer or keyboard focus a gold circle grows from the
   bottom middle until it fills the tile, the title rolls up into a navy copy of itself and the subtitle rolls into an underlined
   "Explore". Three to a row and the last two wider; phones two to a row and the last one full width. */
.digital{padding:clamp(2rem,3.6vw,3rem) 0}
.dg{display:flex;flex-wrap:wrap;gap:.8rem}
.dgt{position:relative;isolation:isolate;overflow:hidden;flex:1 1 calc((100% - 1.6rem)/3 - 1px);height:clamp(210px,21vw,280px);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:3.4rem 1.2rem 2.4rem;text-align:center;border-radius:var(--r2);background:var(--navy);color:#fff}
.dgt img{position:absolute;inset:0;z-index:-3;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.dgt img[src*="dg-recordings"]{object-position:33% 50%}
.dgt img[src*="dg-library"]{object-position:56% 50%}
.dgt::before{content:"";position:absolute;inset:0;z-index:-2;background:radial-gradient(ellipse 85% 75% at 50% 56%,rgba(6,22,39,.84),rgba(6,22,39,.56))}
.dgt::after{content:"";position:absolute;inset:0;z-index:-1;background:var(--gold);clip-path:circle(0 at 50% 100%);transition:clip-path .55s cubic-bezier(.3,.7,.2,1)}
.dgt svg{position:absolute;top:.85rem;left:.85rem;width:38px;height:38px;padding:9px;border-radius:50%;background:rgba(6,22,39,.62);box-shadow:inset 0 0 0 1px rgba(220,185,100,.55);color:var(--gold-lt);stroke:currentColor;fill:none;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;transition:background .35s,box-shadow .35s}
.dgt-t{max-width:100%}
.dgt b{display:block;font-family:'Mulish',sans-serif;font-weight:800;font-size:clamp(1rem,1.45vw,1.3rem);line-height:1.2;letter-spacing:.05em;text-transform:uppercase}
.dgt b>:first-child,.dgt b:not(.roll){text-shadow:0 1px 14px rgba(6,22,39,.55)}
.dgt b>:last-child{color:var(--navy)}
.dgt .roll{display:grid;overflow:hidden}
.roll>*{grid-area:1/1;transition:transform .5s var(--ease)}
.roll>:last-child{transform:translateY(110%)}
.dgt-s{display:grid;justify-items:center;margin-top:.55rem}
.dgt-s>*{font-size:.64rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;line-height:1.6}
.dgt small{color:#f1d999}
.dgt .go{color:var(--navy);padding-bottom:2px;background:linear-gradient(currentColor,currentColor) 0 100%/0 2px no-repeat;transition:transform .5s var(--ease) .06s,background-size .45s var(--ease) .3s}
.dgt .go::after{content:"\2192";margin-left:.45em}
a.dgt:focus-visible{outline:2px solid var(--navy);outline-offset:3px}
a.dgt:focus-visible::after,a.dgt.on::after{clip-path:circle(125% at 50% 100%)}
a.dgt:focus-visible img,a.dgt.on img{transform:scale(1.06)}
a.dgt:focus-visible .roll>:first-child,a.dgt.on .roll>:first-child{transform:translateY(-110%);text-shadow:none}
a.dgt:focus-visible .roll>:last-child,a.dgt.on .roll>:last-child{transform:none}
a.dgt:focus-visible .go,a.dgt.on .go{background-size:100% 2px}
a.dgt:focus-visible svg,a.dgt.on svg{background:var(--navy);box-shadow:none}
@media(hover:hover){
  a.dgt:hover::after{clip-path:circle(125% at 50% 100%)}
  a.dgt:hover img{transform:scale(1.06)}
  a.dgt:hover .roll>:first-child{transform:translateY(-110%);text-shadow:none}
  a.dgt:hover .roll>:last-child{transform:none}
  a.dgt:hover .go{background-size:100% 2px}
  a.dgt:hover svg{background:var(--navy);box-shadow:none}
}
.dgt.soon{cursor:default}
.dgt.soon img{filter:grayscale(.45)}
@media(max-width:640px){.dgt{flex-basis:calc((100% - .8rem)/2 - 1px);height:clamp(168px,48vw,250px);padding:2.7rem .7rem 1.5rem}.dgt svg{top:.7rem;left:.7rem;width:32px;height:32px;padding:7px}.dgt b{font-size:.92rem;letter-spacing:.03em}.dgt-s{margin-top:.4rem}.dgt-s>*{font-size:.6rem;letter-spacing:.1em}}
@media(max-width:400px){.dgt{padding-top:2.5rem}.dgt svg{width:28px;height:28px;padding:6px}.dgt b{font-size:.84rem}}
@media(prefers-reduced-motion:reduce){.dgt img,.dgt::after,.dgt svg,.roll>*,.dgt .go{transition:none}a.dgt:hover img,a.dgt:focus-visible img{transform:none}}
/* Research Centres: rotating row with arrows */
.rc{padding:clamp(2.2rem,4vw,3.2rem) 0}
.sechead.lt h2 em{color:var(--gold-lt)}
.rcar{display:flex;align-items:center;gap:.7rem}
.rview{overflow:hidden;flex:1;min-width:0;padding:.4rem 8px 1.2rem;margin:-.4rem -8px -1.2rem}
.rtrack{display:flex;gap:1rem;transition:transform .6s var(--ease)}
.rcard{flex:0 0 calc((100% - 5rem)/6);min-width:0;aspect-ratio:1;display:flex;flex-direction:column;align-items:center;gap:.55rem;padding:.85rem .6rem .7rem;text-align:center;border-radius:var(--r2);background:#fff;box-shadow:0 3px 8px rgba(3,12,24,.2);transition:box-shadow .25s,transform .25s var(--ease)}
.rcard:hover,.rcard:focus-visible{transform:translateY(-3px);box-shadow:inset 0 0 0 2px var(--gold),0 6px 12px rgba(3,12,24,.26)}
.rcard img{width:auto;height:52px;flex-shrink:0}
.rcard b{font-family:'Spectral';font-weight:500;font-size:.84rem;line-height:1.28;color:var(--navy);overflow-wrap:anywhere}
/* the band curves up behind the tiles and runs on into the sand section below */
.rc::after{content:"";position:absolute;left:-15%;right:-15%;bottom:0;height:160px;background:var(--sand);border-radius:50% 50% 0 0/130px 130px 0 0}
.rnav{position:relative;z-index:1;flex:0 0 42px;height:42px;border-radius:50%;border:0;box-shadow:inset 0 0 0 1px rgba(220,185,100,.55);background:transparent;color:#fff;font-size:1.4rem;line-height:1;display:grid;place-items:center}
.rnav:hover{background:var(--gold);color:var(--navy)}
.rc .bandfoot .mpause{width:42px;height:42px;border-radius:50%;padding:0;display:grid;place-items:center;color:var(--navy);opacity:1;box-shadow:inset 0 0 0 1px rgba(10,35,66,.45)}
.rc .bandfoot .mpause:hover{background:var(--gold);color:var(--navy)}
@media(max-width:1180px){.rcard{flex-basis:calc((100% - 4rem)/5)}}
@media(max-width:960px){.rcard{flex-basis:calc((100% - 3rem)/4)}}
@media(max-width:740px){.rcard{flex-basis:calc((100% - 2rem)/3)}}
@media(max-width:600px){.rcard{padding-inline:.4rem}}
@media(max-width:540px){.rcard{flex-basis:calc((100% - 1rem)/2)}.rcard img{height:44px}.rcard b{font-size:.8rem}.rnav{flex-basis:36px;height:36px}.rc::after{height:140px;border-radius:50% 50% 0 0/70px 70px 0 0}}
@media(max-width:400px){.rcar{gap:.35rem}.rnav{flex-basis:32px;height:32px}.rcard{padding:.6rem .35rem}.rcard b{font-size:.74rem}}
@media(max-width:340px){.rcard{padding-inline:.2rem}.rcard b{font-size:.7rem}}
@media(prefers-reduced-motion:reduce){.rtrack{transition:none}}
/* admissions: five tiles, three on top and two wider below (no orphan) */
.t6{grid-template-columns:repeat(6,1fr)}
.t6 a{grid-column:span 2}
.t6 a:nth-child(n+4){grid-column:span 3}
@media(max-width:620px){.t6{grid-template-columns:repeat(2,1fr)}.t6 a,.t6 a:nth-child(n+4){grid-column:auto}.t6 a:last-child{grid-column:1/-1}}
/* Stay Connected: smaller cards in the platforms' own colours */
.sconn{padding:clamp(2rem,4vw,3rem) 0}
.sconn .sechead p{color:var(--gold-lt);font-weight:700;letter-spacing:.04em;font-size:.95rem}
.sc{grid-template-columns:repeat(5,1fr);gap:.75rem}
.sc a{display:flex;align-items:center;justify-content:center;gap:.65rem;padding:.7rem .8rem}
.sc .ic{width:32px;height:32px;margin:0;flex-shrink:0;color:#fff}
.sc .ic svg{width:16px;height:16px;fill:currentColor}
.sc b{display:inline;font-size:.84rem}
@media(max-width:900px){.sc{grid-template-columns:repeat(3,1fr)}}
@media(max-width:520px){.sc{grid-template-columns:repeat(2,1fr)}.sc a:last-child{grid-column:1/-1}}
.b-fb{background:#1877f2 !important}.b-in{background:#0a66c2 !important}.b-yt{background:#ff0000 !important}.b-x{background:#000 !important}
.b-ig{background:radial-gradient(circle at 30% 107%,#fdf497 0%,#fdf497 5%,#fd5949 45%,#d6249f 60%,#285aeb 90%) !important}
.sc .b-x{box-shadow:0 0 0 1px rgba(255,255,255,.4)}
/* social rail: platform colours and logos */
.socrail a{color:#fff}
.socrail a .g svg{width:18px;height:18px;fill:currentColor}
@media(min-width:761px){.socrail a .g{align-self:stretch;background:inherit}}
.socrail a:hover,.socrail a:focus-visible{color:#fff}
/* items whose page does not exist yet */
footer .todo{display:block;padding:.22rem 0;color:rgba(255,255,255,.5);cursor:default}
footer .todo small{font-size:.66rem;margin-left:.3rem}
/* accessibility fixes, 31 Oct (contrast audit + GIGW 3.0) */
.fbot .wrap{color:rgba(255,255,255,.62)}
/* social rail: white label on brand blue/red was below 4.5:1, so the label sits on navy */
.socrail a .t{align-self:stretch;flex:1 1 auto;display:flex;align-items:center;justify-content:center;background:var(--navy);padding:0 .75rem}
.socrail a:hover,.socrail a:focus-visible{width:164px}
.vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* admissions card: one link per programme instead of a single Read More to the Ph.D. page */
.aplinks{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem;max-width:30rem;margin-inline:auto}
.aplinks a{background:var(--gold);color:var(--navy);font-size:.7rem;font-weight:800;letter-spacing:.06em;padding:.5rem .85rem;border-radius:var(--r2);transition:background .25s}
.aplinks a:hover,.aplinks a:focus-visible{background:#fff}
/* one smaller gap for every section; the hero keeps its own */
main>section:not(.fhero){padding-block:clamp(1.6rem,2.8vw,2.4rem)}
.fmain{padding-top:clamp(1.8rem,3vw,2.6rem)}
/* News & Events and All Notices end level with their buttons in line; the list takes the spare height and scrolls */
@media(min-width:961px){
  .nacols{align-items:stretch}
  .nacols>.pan{display:flex;flex-direction:column}
  .nacols>.pan .anns{flex:1 1 0;min-height:240px;max-height:none}
  .nacols>.pan .bandfoot{margin-top:auto;padding-top:1.3rem}
}
/* press cards take the news cards' 16:10 shape; the pictures in assets/news are cut to it, so no headline is trimmed */
.pgrid .ph{aspect-ratio:16/10}
.pgrid .ph,.ncard .ph{background:#fff}
/* copyright line centred; text-align for when it wraps on a phone */
.fbot .wrap{justify-content:center;text-align:center}
/* footer columns stop short of the fixed social rail (42px + 8px clear), less the page padding already there */
@media(min-width:881px) and (max-width:1320px){.fcols{padding-right:calc(50px - clamp(16px,3vw,40px))}}
/* hero: the photograph and one play button, no caption; the film plays only when someone presses it (client, 2 Nov) */
.fhero::after{background:linear-gradient(180deg,rgba(6,22,39,.34) 0%,rgba(6,22,39,.16) 42%,rgba(6,22,39,.58) 100%)}
.fhero .wrap{display:flex;justify-content:center}
.hplay .disc{width:84px;height:84px;background:rgba(6,22,39,.45);box-shadow:inset 0 0 0 2px rgba(220,185,100,.85),0 10px 30px rgba(0,0,0,.35);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.hplay .disc::after{margin-left:6px;border-left-width:24px;border-top-width:14px;border-bottom-width:14px}
/* hero notice cards: dark blue, see-through at the top where they sit on the photograph (client, 2 Nov) */
.hcards .panel{background:linear-gradient(180deg,rgba(10,35,66,.76) 0%,rgba(10,35,66,.9) 42%,rgba(8,28,51,.97) 100%);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  box-shadow:inset 0 0 0 1px rgba(220,185,100,.4),0 24px 54px rgba(6,22,39,.3)}
.hcards .panel>h3{color:#fff}
.hcards .vlist a{color:#fff;border-bottom-color:rgba(255,255,255,.14)}
.hcards .vlist a:hover{color:var(--gold-lt)}
.hcards .vlist .dt{color:var(--gold-lt)}
.hcards .vmore .mpause{color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.35)}
.hcards .vmore .btn.outd{color:#fff;box-shadow:inset 0 0 0 1px rgba(220,185,100,.6),inset 0 0 0 3px transparent,inset 0 0 0 4px rgba(220,185,100,.6)}
.hcards .vmore .btn.outd:hover{color:var(--gold-lt)}
/* phones and tablets (1000px and below, where the header runs out of room): the header keeps the name and one row of reading
   tools; search and the quick links move to the end of the menu (2 Nov) */
.menu .m-extra{display:none}
@media(max-width:1000px){
  .hdr .util nav.row{display:none}
  .menu>li.m-extra{display:block}
  .menu .m-search{padding:.85rem 0 .5rem}
  .menu .m-search .search{width:100%}
  .menu .m-search .search input{flex:1;width:auto;min-width:0}
  .menu>li.m-links{display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;padding:.75rem 0 .95rem}
  .menu .m-links>a{display:inline;padding:0;color:#fff;font-weight:700;font-size:.86rem;text-transform:none;letter-spacing:.02em}
  .menu .m-links>a.todo{color:rgba(255,255,255,.45);cursor:default}
}
/* Apply card beside All Notices, in the News & Events box's place (client, 2 Nov) */
.nacols>.admcard{min-height:320px}
/* Moments from our DBRANLU: a row of photos that slides, three at a time on desktop (client, 2 Nov). Not ".slider": the page
   already has an old hero-slider rule by that name */
.mslider{display:flex;align-items:center;gap:.7rem}
.achgrid.strack{flex:1;min-width:0;display:grid;grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:calc((100% - 2rem)/3);gap:1rem;
  overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;padding:.4rem 0 .6rem}
.achgrid.strack::-webkit-scrollbar{display:none}
.achgrid.strack>button{scroll-snap-align:start}
.achgrid.strack .ph{aspect-ratio:3/2}
.snav{flex:0 0 42px;height:42px;border-radius:50%;border:0;background:transparent;color:var(--navy);font-size:1.4rem;line-height:1;display:grid;place-items:center;box-shadow:inset 0 0 0 1px var(--rule);cursor:pointer}
.snav:hover{background:var(--navy);color:#fff}
.snav:disabled{opacity:.35;cursor:default;background:transparent;color:var(--navy)}
@media(max-width:900px){.achgrid.strack{grid-auto-columns:calc((100% - 1rem)/2)}}
@media(max-width:560px){.achgrid.strack{grid-auto-columns:86%}.snav{display:none}}
@media(prefers-reduced-motion:reduce){.achgrid.strack{scroll-behavior:auto}}
/* Stay Connected: heading on the left of the platform buttons, less height, a handle under each name (client, 2 Nov) */
main>section.sconn{padding-block:clamp(1.2rem,2.2vw,1.8rem)}
.sconn-row{display:flex;align-items:center;gap:clamp(1.2rem,3vw,2.6rem)}
.sconn .sechead{margin:0;text-align:left;flex:0 0 auto;max-width:none}
.sconn .sechead h2{font-size:clamp(1.5rem,2.2vw,1.85rem)}
.sconn .sc{flex:1;min-width:0}
.sc a{justify-content:flex-start;text-align:left;gap:.55rem;padding:.65rem .75rem}
.sc .nm{display:flex;flex-direction:column;min-width:0;line-height:1.25}
.sc .nm small{font-size:.66rem;color:rgba(255,255,255,.66);white-space:nowrap}
/* five buttons with handles need the full width below 1181px, so the heading goes above them there */
@media(max-width:1180px){.sconn-row{flex-direction:column;align-items:stretch;gap:1rem}.sconn .sechead{text-align:center}}
@media(max-width:400px){.sc a{padding:.6rem .55rem;gap:.45rem}.sc .nm small{font-size:.6rem}}
/* footer: campus map under the address (client, 2 Nov) */
.fmap{margin-top:1rem;max-width:340px;aspect-ratio:16/10;border-radius:var(--r2);overflow:hidden;box-shadow:0 0 0 1px rgba(255,255,255,.14);background:#0b1d33}
.fmap iframe{display:block;width:100%;height:100%;border:0}
.fmaplink{display:inline-block;margin-top:.5rem;font-size:.78rem;color:var(--gold-lt)}
.fmaplink:hover{color:#fff}
/* Moments slider pause button, the same round control as the Research Centres row */
.moments .bandfoot .mpause{width:42px;height:42px;border-radius:50%;padding:0;display:grid;place-items:center;color:var(--navy);opacity:1;box-shadow:inset 0 0 0 1px var(--rule)}
.moments .bandfoot .mpause:hover{background:var(--gold);color:var(--navy)}
/* Tenders and Student Notices lists: moved by script (gliding, by transform) and scrollable by hand; the thin scrollbar's space is
   kept all the time, so the text never shifts when it shows (2 Nov) */
.vtrack{animation:none;will-change:transform}
.vlist{overflow-y:auto;scrollbar-width:thin;scrollbar-gutter:stable;scrollbar-color:transparent transparent}
.vlist:hover,.vlist:focus-within{scrollbar-color:rgba(255,255,255,.35) transparent}
/* footer map made to sit in the dark footer: dark tone (full colour under the pointer), shorter, thin gold edge (2 Nov) */
.fmap{aspect-ratio:16/9;margin-top:.75rem;box-shadow:0 0 0 1px rgba(220,185,100,.35)}
.fmap iframe{filter:invert(90%) hue-rotate(180deg) saturate(.55) contrast(.92);transition:filter .35s var(--ease)}
.fmap:hover iframe,.fmap:focus-within iframe{filter:none}
.fmaplink{margin-top:.15rem;font-weight:700;letter-spacing:.02em}
/* footer tidied (2 Nov): three even columns on computers (address and map | quick links | committees and enquiries), the crest
   beside the name, one rule above the policy links and copyright; tablets two columns; phones one centred column with the quick
   links two to a row and the enquiries as a centred list */
.fcols{grid-template-columns:1.25fr 1fr 1fr;gap:clamp(1.5rem,4vw,3.5rem)}
.fbrand{display:flex;align-items:center;gap:.9rem;margin-bottom:.9rem}
.fbrand .fchip{flex:none;margin:0}
.fbrand p{line-height:1.45}
.fbrand b{display:block;color:#fff;font-size:.9rem}
.fbrand .dev{display:block;color:rgba(255,255,255,.72);font-size:.8rem;margin-top:.2rem}
.faddr{line-height:1.75}
.fmaplink{margin-top:.5rem}
.fmap{max-width:none;aspect-ratio:auto;height:170px}
.fmore>div+div{margin-top:1.7rem}
.policy{margin-top:2.4rem;padding:1.1rem 0 .35rem}
.fbot{border-top:0;padding:.35rem 0 1.3rem}
@media(max-width:880px){
  .fcols{grid-template-columns:1fr 1fr}
  .fmore{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,4vw,3.5rem)}
  .fmore>div+div{margin-top:0}
}
@media(max-width:520px){
  .fcols{grid-template-columns:1fr;gap:2.1rem;text-align:center}
  footer h4{justify-content:center}
  .fbrand{flex-direction:column;gap:.7rem}
  .fmap{height:180px}
  .flinks{display:grid;grid-template-columns:1fr 1fr;column-gap:1rem;align-items:start}
  .flinks h4{grid-column:1/-1}
  .fmore{grid-template-columns:1fr;gap:2.1rem}
  .fenq{display:grid;grid-template-columns:auto auto;justify-content:center;column-gap:.9rem;row-gap:.5rem;text-align:left}
  .fenq h4{grid-column:1/-1;margin-bottom:.35rem}
  .fphone{display:contents}
  .fphone b{min-width:0;text-align:right}
  .fbot{padding-bottom:4.6rem}
}
/* phones: About, the vision band and the two message boxes centred under their centred headings, photos and crest (2 Nov);
   no drop caps there, since a dropped first letter cannot sit in centred text */
@media(max-width:640px){
  .about .cols>div:last-child,.preamble .in,.msg.box{text-align:center}
  .preamble .in,.msg.box{justify-items:center}
  .about p.dc::first-letter,.preamble blockquote::first-letter{float:none;font-size:inherit;line-height:inherit;padding:0;color:inherit;font-family:inherit;font-style:inherit;font-weight:inherit}
}
/* three boxes side by side on computers again: Tenders, Events, Student Notices */
@media(min-width:981px){.hcards .inner{grid-template-columns:repeat(3,1fr)}}
/* client, 2 Nov 5:05 pm. Hero: the whole campus film plays by itself, muted and looped, fading in over the still photo */
.fhero>.hbg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 46%;opacity:0;transition:opacity .9s var(--ease),filter .3s}
.fhero.vplay>.hbg{opacity:1}
/* while a drop-down menu is open over the film, the film dims behind it, so the links on the see-through menu stay readable */
.fhero>img{transition:filter .3s}
.nav.over-film~main .fhero>img,.nav.over-film~main .fhero>.hbg{filter:brightness(.6)}
html.hc .nav.over-film~main .fhero>img,html.hc .nav.over-film~main .fhero>.hbg{filter:invert(1) hue-rotate(180deg) brightness(.6)}
/* Tenders and Student Notices: 70% see-through where they lie over the film (Ashish: "set the transparency to 70% so that video
   didn't overlap by these two"), the film blurred behind the words; below the film, on the white page, they turn solid blue
   (see-through there would leave white words on near-white). Shorter, a small "Show more..." link, and less far up into the
   hero (--ov = how far) */
.hcards{--ov:clamp(72px,8vw,112px);margin-top:calc(-1 * var(--ov))}
.hcards .panel{background:linear-gradient(180deg,rgba(10,35,66,.3) 0,rgba(10,35,66,.3) calc(var(--ov) - 44px),rgba(10,35,66,.95) calc(var(--ov) + 8px));-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
/* lighter shading at the bottom of the film (was .58), so it shows through the boxes more clearly (Ashish chose this). The boxes turn
   solid just before the film's edge: the blur pulls the white page below up into them, which made the words there too faint */
.fhero::after{background:linear-gradient(180deg,rgba(6,22,39,.34) 0%,rgba(6,22,39,.16) 42%,rgba(6,22,39,.3) 100%)}
@media(max-width:980px){.hcards .panel+.panel{background:rgba(10,35,66,.95)}}
.hcards .vlist{height:156px}
.hcards .body{padding-bottom:.8rem}
.hcards .vmore{margin-top:.45rem}
.hcards .vmore .smore{display:inline;font-size:.76rem;font-weight:700;letter-spacing:.02em;color:#fdf8ee;text-decoration:underline;text-decoration-color:rgba(253,248,238,.55);text-underline-offset:3px;padding:.2rem .3rem}
.hcards .vmore .smore:hover{color:#fff;text-decoration-color:#fff}
.hcards .vlist .dt{color:#fdf8ee}
.hcards .vlist a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.hcards .panel>h3,.hcards .vlist a,.hcards .vmore .smore{text-shadow:0 1px 3px rgba(6,22,39,.6)}
/* drop-down menus on computers: dark blue with light text; 70% see-through while they open over the hero film (the script sets
   .over-film), solid enough to read once the page is scrolled and they would cover the white page */
@media(min-width:1101px){
  .mega{background:rgba(6,22,39,.8);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 26px 48px rgba(0,0,0,.35);transition:background-color .25s}
  .nav.over-film .mega{background:rgba(6,22,39,.3);box-shadow:0 26px 48px rgba(0,0,0,.18)}
  .nav.over-film .mcol a:not(.todo){color:#fff}
  .nav.over-film .mcol h4{color:#fdf8ee}
  .nav.over-film .mcol a,.nav.over-film .mcol h4{text-shadow:0 1px 3px rgba(6,22,39,.7)}
  .mcol h4{color:var(--gold-lt);border-bottom-color:rgba(255,255,255,.16)}
  .mcol a{color:rgba(255,255,255,.9)}
  .mcol a:hover{color:var(--gold-lt);border-left-color:var(--gold)}
  .mcol a .pdf{color:#ffb3a9}
  .mcol a.todo{color:rgba(255,255,255,.58)}
  .mfeat{background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(220,185,100,.35)}
  .mfeat h5{color:#fff}
  .mfeat p{color:rgba(255,255,255,.76)}
  .mfeat a{color:var(--gold-lt)}
}
/* header: the menu bar's navy, one block with it, no coloured line between */
.hdr{background:var(--navy);border-bottom:0}
.hdr+.tri{display:none}
.brand h1,.brand .bn{color:#fff}
.brand h1 .hi,.brand .bn .hi{color:var(--gold-lt)}
.brand .actline{color:rgba(255,255,255,.7)}
.brand .actline b{color:#fff}
.brand .crestchip{box-shadow:0 0 0 1px rgba(220,185,100,.6),0 0 0 4px var(--navy),0 0 0 5px rgba(220,185,100,.6)}
.hdr .util .a11y button{color:#fff}
.hdr .util .a11y button:hover,.hdr .util .a11y button[aria-pressed="true"]{background:#fff;color:var(--navy)}
.hdr .lang{color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.45)}
.hdr .lang:hover{background:#fff;color:var(--navy)}
.hdr .util nav a{color:#fff}
.hdr .util nav a:hover{color:var(--gold-lt)}
.hdr .util a.todo{color:rgba(255,255,255,.62)}
.hdr .search{background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.3)}
.hdr .search input{color:#fff}
.hdr .search input::placeholder{color:rgba(255,255,255,.66)}
.hdr .search button{background:var(--gold);color:var(--navy)}
.hdr .search button:hover{background:#fff}
/* the DBRANLU Blog tile (not a link yet) moves like the others; its second line stays "Coming soon", in navy (2 Nov) */
.dgt .soonnow{color:var(--navy)}
.dgt.soon.on::after{clip-path:circle(125% at 50% 100%)}
.dgt.soon.on img{transform:scale(1.06)}
.dgt.soon.on .roll>:first-child{transform:translateY(-110%);text-shadow:none}
.dgt.soon.on .roll>:last-child{transform:none}
.dgt.soon.on svg{background:var(--navy);box-shadow:none}
@media(hover:hover){
  .dgt.soon:hover::after{clip-path:circle(125% at 50% 100%)}
  .dgt.soon:hover img{transform:scale(1.06)}
  .dgt.soon:hover .roll>:first-child{transform:translateY(-110%);text-shadow:none}
  .dgt.soon:hover .roll>:last-child{transform:none}
  .dgt.soon:hover svg{background:var(--navy);box-shadow:none}
}
@media(prefers-reduced-motion:reduce){.dgt.soon:hover img,.dgt.soon.on img{transform:none}}
/* drop-down menus over the film: see-through you can actually see (light blur, film dimmed only to 70%), links still 5.9:1+ */
@media(min-width:1101px){.nav.over-film .mega{-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}}
.nav.over-film~main .fhero>img,.nav.over-film~main .fhero>.hbg{filter:brightness(.7)}
html.hc .nav.over-film~main .fhero>img,html.hc .nav.over-film~main .fhero>.hbg{filter:invert(1) hue-rotate(180deg) brightness(.7)}
/* Tenders, Events, Student Notices over the film: see-through you can actually see (3px blur, clear down to the film's edge);
   solid below it, on the white page */
.hcards .panel{background:linear-gradient(180deg,rgba(10,35,66,.3) 0,rgba(10,35,66,.3) calc(var(--ov) - 12px),rgba(10,35,66,.95) calc(var(--ov) + 4px));-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
/* phone and tablet menu: one column that scrolls; without this the last items wrapped into a second column off the right edge.
   Starts at the top (13 Nov): centred, an opened long section (About) pushed HOME and ABOUT above the panel where no scroll could reach */
@media(max-width:1100px){.nav .menu{flex-wrap:nowrap;justify-content:flex-start}}
/* hero no taller than about the film's own 16:9 shape, so phones and tablets see the whole picture, not a zoomed-in slice
   (computers unchanged); the notice boxes reach less far into the shorter film on phones */
.fhero{min-height:min(84vh,780px,60vw)}
.hcards{--ov:clamp(40px,8vw,112px)}
/* phones: no second row of social icons at the end of the page where Stay Connected (same five links, with handles) is just
   above; computers keep the side rail; pages without Stay Connected keep the row */
@media(max-width:760px){body:has(#facebook-feed) .socrail{display:none}}
/* Vision band: the faint wheel centred behind the emblem at every width and zoom (it used to sit against the band's left edge) */
.preamble .medal{position:relative}
.preamble .medal .chk{left:50%;top:50%;transform:translate(-50%,-50%);width:250px;z-index:0;pointer-events:none}
.preamble .medal img{position:relative;z-index:1}
/* Vision band: the wheel never reaches the quote (190px, fixed gap beside and under the emblem); the large first letter sits
   close to the rest of its word */
.preamble .medal .chk{width:190px}
.preamble .in{gap:2.75rem 3rem}
@media(min-width:641px){.preamble blockquote::first-letter{padding:.08em .03em 0 0}}
/* News & Media Coverage on phones (3 Nov, "needs slider in mobile view, it become too long"): the stories sit in one row to
   swipe through, the next one peeking in at the edge, like the Moments photos; dots under them show which one is in view */
.pdots{display:none}
@media(max-width:560px){
  .pgrid{grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:86%;gap:.9rem;overflow-x:auto;scroll-snap-type:x mandatory;
    scroll-behavior:smooth;scrollbar-width:none;overscroll-behavior-x:contain;padding:.25rem 0 .5rem}
  .pgrid::-webkit-scrollbar{display:none}
  .pgrid>a{scroll-snap-align:start}
  /* no lift inside the row: it would be cut off at the top, and on a touch screen it sticks after a tap */
  .pgrid a:hover{transform:none}
  .pdots{display:flex;justify-content:center;gap:.1rem;margin-top:.3rem}
  .pdots button{width:24px;height:24px;padding:0;border:0;background:transparent;display:grid;place-items:center;cursor:pointer}
  .pdots button::before{content:"";width:8px;height:8px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--navy);transition:background-color .2s}
  .pdots button[aria-current="true"]::before{background:var(--navy)}
}
@media(max-width:560px) and (prefers-reduced-motion:reduce){.pgrid{scroll-behavior:auto}}
/* About text on phones: closer lines (3 Nov, "decrease the spacing between the lines"); computers keep 1.86 */
@media(max-width:640px){.about p{line-height:1.6}}
/* The whole page on phones: closer lines, like the About text (3 Nov, "for overall page?"): the page's own spacing 1.68 -> 1.6
   (captions, news sources, the copyright line ...), the blocks with their own wider spacing 1.6, headings that wrap onto two
   lines 1.3. Computers and tablets keep their spacing. */
@media(max-width:640px){
  body{line-height:1.6}
  .msg p,.faddr{line-height:1.6}
  .about h3,.msg h3,.msg .who,.admcard h3{line-height:1.3}
}
/* footer (3 Nov): navy like the header; clearer links, gold underline on hover; tap-to-call and tap-to-email; small gold icons by
   the address, numbers and email; one quiet bottom strip under a thin gold line */
/* a University photo behind it (Ashish: "can you put a unversity photo in the background of footer"): the campus from the air,
   a still from the University's film (assets/home/footer-campus.jpg), under navy so the words stay clear */
footer{background:linear-gradient(180deg,rgba(10,35,66,.8),rgba(10,35,66,.9)),url(../home/footer-campus.jpg) center 45%/cover no-repeat var(--navy)}
/* high contrast turns the page negative and turns pictures back; a background photo can't be turned back, so it goes there */
html.hc footer{background:var(--navy)}
footer{color:rgba(255,255,255,.7)}
footer a{color:rgba(255,255,255,.84)}
footer a:hover,footer a:focus-visible{color:var(--gold-lt);text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(220,185,100,.7)}
footer .todo{color:rgba(255,255,255,.6)}
.fphone a{display:inline;padding:0}
.faddr{position:relative;padding-left:1.45rem}
.faddr::before,.fphone b::before{content:"";width:14px;height:14px;background:var(--gold-lt);-webkit-mask:var(--ic) center/contain no-repeat;mask:var(--ic) center/contain no-repeat}
.faddr::before{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z'/%3E%3C/svg%3E");position:absolute;left:0;top:.38em}
.fphone b::before{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z'/%3E%3C/svg%3E");display:inline-block;margin-right:.45rem;vertical-align:-2px}
.fmail b::before{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z'/%3E%3C/svg%3E")}
.fphone b{min-width:126px}
.fstrip{margin-top:2.2rem;border-top:1px solid rgba(220,185,100,.35);padding:1rem 0 1.3rem}
.fstrip .wrap{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:.4rem 1.4rem;font-size:.72rem;text-align:center}
.fstrip .fcopy{color:rgba(255,255,255,.66)}
.fstrip .fpol{display:flex;flex-wrap:wrap;justify-content:center;gap:.2rem 1.1rem}
.fstrip .fpol a{display:inline;padding:0;color:rgba(255,255,255,.74)}
@media(min-width:1101px){.fstrip .fpol{border-left:1px solid rgba(255,255,255,.18);padding-left:1.4rem}}
/* the back-to-top button is the same navy: a thin gold ring keeps it visible over the navy footer */
.totop{box-shadow:0 0 0 1px rgba(220,185,100,.65)}
@media(max-width:520px){
  .faddr{padding-left:0}
  .faddr::before{position:static;display:inline-block;margin-right:.4rem;vertical-align:-2px}
  .fphone b{min-width:0}
  .fstrip{padding-bottom:4.6rem}
}
/* footer, Priya's layout kept (3 Nov): each of its three parts set out the same way, a heading and then one line per row.
   Every line is one row (--frow) tall, so lines sit level across the columns. */
footer{--frow:2rem}
.floc{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-top:1rem}
footer .floc h4{margin:0}
.floc .fmaplink{margin:0;padding:0}
/* every width, phones included */
footer .fcols h4{height:var(--frow);margin:0;justify-content:flex-start}
.flinks,.fcomm,.fenq{display:grid;grid-auto-rows:minmax(var(--frow),auto);align-content:start}
/* one line = exactly one row; a link that must wrap (narrow screens only) grows its row and its second line starts under
   the first line's words, not under the arrow */
.flinks>a,.flinks>.todo,.fcomm>a,.fcomm>.todo{padding:calc((var(--frow) - 1.4em) / 2) 0 calc((var(--frow) - 1.4em) / 2) 18px;line-height:1.4;text-indent:-18px}
/* a small arrow before each link; grey for the ones with no page yet */
.flinks>a::before,.flinks>.todo::before,.fcomm>a::before,.fcomm>.todo::before{content:"";display:inline-block;width:5px;height:5px;border:solid var(--gold-lt);border-width:1.5px 1.5px 0 0;transform:rotate(45deg);margin:0 14.2px 0 -2.2px;vertical-align:.12em}
.flinks>.todo::before,.fcomm>.todo::before{border-color:rgba(255,255,255,.45)}
.fphone{display:flex;padding:0;line-height:var(--frow);align-items:baseline}
/* one left edge per column (3 Nov, "i'm asking about the alignment"): every mark (crest ring, pin, heading diamonds, arrows,
   phone and mail icons) starts on the column's edge, where the map starts, and every word starts 18px in. The offsets allow
   for where each shape's visible part sits inside its box (measured with cmp\footalign.mjs). */
.fbrand .fchip{margin-left:5px}
footer .fcols h4{gap:0}
footer .fcols h4::before{flex:none;margin:0 11.7px 0 1.3px}
.faddr{padding-left:18px}
.faddr::before{position:absolute;left:-2.6px;top:.38em;margin:0}
.fphone b::before{margin:0 4.6px 0 -.6px}
@media(min-width:521px){
  .fabout .fmap{height:calc(4 * var(--frow) - .5rem);margin-top:.5rem}
  /* the bottom line keeps clear of the back-to-top button (42px, 16px from the corner), which sits over its right end once the
     page is scrolled to the bottom; the same space on the left keeps it centred. Phones already leave room under it. */
  .fstrip .wrap{padding-inline:66px}
}
/* phones (3 Nov, "mobile view look weird"): the same edges as computers, in one column, instead of centred lines of different
   lengths (ragged two-to-a-row links, phone icons zigzagging beside right-aligned labels): crest beside the name, LOCATION with
   Get directions on one line, Quick Links two to a row, enquiry labels and numbers in two straight columns */
@media(max-width:520px){
  .fcols{text-align:left;gap:1.75rem}
  .fbrand{flex-direction:row;align-items:center;gap:.9rem}
  .fabout .fmap{margin-top:.5rem;height:170px}
  .flinks{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .fenq{grid-template-columns:minmax(0,1fr);justify-content:stretch;gap:0}
  .fphone{flex-wrap:wrap;column-gap:.6rem}
  .fphone b{min-width:112px;text-align:left}
}
/* tablets: two equal columns with a thin line between them; Committees | Enquiries below, under the two columns */
@media(min-width:521px) and (max-width:1100px){
  /* minmax(0,1fr): the halves stay equal even when the name column asks for more, so the line stays in the middle */
  .fcols{grid-template-columns:minmax(0,1fr) minmax(0,1fr);background:linear-gradient(rgba(255,255,255,.16),rgba(255,255,255,.16)) 50% 0/1px 100% no-repeat content-box}
  .fmore{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,4vw,3.5rem)}
  .fmore>div+div{margin-top:0}
}
/* small tablets, where the name takes two lines: the map fills down to where Quick Links ends */
@media(min-width:521px) and (max-width:880px){
  .fabout{display:flex;flex-direction:column}
  .fabout .fmap{flex:1 1 0;height:auto;min-height:96px}
}
/* the address part on the same nine rows as Quick Links, once its column is wide enough to keep the name on one line:
   rows 1-2 name, 3-4 address, 5 LOCATION and Get directions, 6-9 the map */
@media(min-width:881px){
  .fabout{display:grid;grid-template-rows:repeat(9,var(--frow))}
  .fbrand{grid-row:1/3;margin:0;align-items:flex-start}
  .fbrand .fchip{margin-top:calc(var(--frow) - 29px)}
  /* the name's line centred on row 1, like the headings */
  .fbrand p{padding-top:calc(var(--frow) / 2 - .6525rem)}
  /* the address keeps its normal line spacing, centred between the name and LOCATION */
  .faddr{grid-row:3/5;align-self:center}
  .floc{grid-row:5;margin:0}
  .fabout .fmap{grid-row:6/10;height:auto;margin:.3rem 0}
}
/* computers: the three parts side by side on those nine rows, with thin lines centred in the space between them:
   rows 1-2 name | QUICK LINKS, Recruitment | COMMITTEES, SC/ST Cell
   rows 3-4 address | ERP Login, Auto Appeal | Grievance Redressal Committee, (space)
   row 5    LOCATION, Get directions | Journal | ENQUIRIES
   rows 6-9 map | RTI to Results | the four enquiry lines */
@media(min-width:1101px){
  .fcols{grid-template-columns:minmax(0,430px) minmax(3rem,1fr) max-content minmax(3rem,1fr) max-content;column-gap:0}
  .fcols::before,.fcols::after{content:"";grid-row:1;justify-self:center;width:1px;background:rgba(255,255,255,.16)}
  .fcols::before{grid-column:2}
  .fcols::after{grid-column:4}
  .fabout{grid-column:1;grid-row:1}
  .flinks{grid-column:3;grid-row:1}
  .fmore{grid-column:5;grid-row:1}
  .fmore>div+div{margin-top:var(--frow)}
}
/* the fixed social icons: the columns stop short of them on small tablets too (an earlier rule covers 881-1320px) */
@media(min-width:761px) and (max-width:880px){.fcols{padding-right:calc(50px - clamp(16px,3vw,40px))}}
/* column 1 lines up with the University's name, not the crest (3 Nov, "it should be align with the name of the university",
   "the map is in rectangle shape make it short"): the address, LOCATION and the map start where the name starts, and the
   column is only as wide as the crest and name, so the map is as wide as the name (about 297px, was 430) and Get directions
   ends where the name ends. From 800px; narrower, the indented address would wrap onto four lines. */
@media(min-width:800px){
  .fabout{width:max-content;max-width:100%}
  .fabout>.faddr,.fabout>.floc,.fabout>.fmap{margin-left:calc(5px + 58px + .9rem)}
  /* the map's frame takes no width of its own (an iframe would otherwise ask for 300px) */
  .fabout .fmap{position:relative}
  .fabout .fmap iframe{position:absolute;inset:0}
}
@media(min-width:1101px){
  .fcols{grid-template-columns:minmax(0,max-content) minmax(3rem,1fr) max-content minmax(3rem,1fr) max-content}
}
/* ---------- client batch, 3 Nov ---------- */
/* section headings in one colour ("single font color" on About the University) */
.sechead h2 em,.sechead.lt h2 em{color:inherit}
/* pictures that zoom a little: with a mouse on hover, on a touch screen with a tap (the script below) */
.zoompic{overflow:hidden}
.zoompic img{transition:transform 1.4s var(--ease)}
@media(hover:hover){.zoompic:hover img{transform:scale(1.06)}}
.zoompic.zin img{transform:scale(1.06)}
/* About: square picture, and a Read more link instead of a button */
.about .pic,.about .pic img{border-radius:0}
.rmore{font-weight:700;color:var(--gold-dp);text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.rmore:hover{color:var(--navy)}
/* VC and Registrar: each message a full-width navy band, half photo and half words, square corners; the words sit towards the
   middle of the page and the photos run out to its edges */
.lead-msg{padding:0}
.lead-msg>.wrap{max-width:none;padding:0}
.msg.box,.msg.box.rev{grid-template-columns:1fr 1fr;gap:0;padding:0;margin:0;border-radius:0;box-shadow:none;align-items:stretch}
.msg.box+.msg.box{border-top:1px solid rgba(220,185,100,.3)}
/* the photo is pinned inside its frame, so its own 1500px size never widens the band (it made phones lay out 628px wide) */
.msg.box .port{position:relative;border-radius:0;box-shadow:none;max-width:none;min-width:0;min-height:clamp(320px,34vw,520px);background:var(--navy-2)}
.msg.box .port img{position:absolute;inset:0;border-radius:0;width:100%;height:100%;aspect-ratio:auto;object-fit:cover;object-position:50% 40%}
.msg.box>div:not(.port){align-self:center;width:100%;max-width:40rem;padding:clamp(2rem,4.5vw,4rem) clamp(1.5rem,4.5vw,4.5rem)}
.msg.box.rev>div:not(.port){justify-self:end}
.msg.box .rmore{color:var(--gold-lt)}
.msg.box .rmore:hover{color:#fff}
@media(max-width:820px){
  .msg.box,.msg.box.rev{grid-template-columns:minmax(0,1fr)}
  /* full width: the phones' centring rule would otherwise shrink the frame to its (pinned, so empty) contents */
  .msg.box .port{max-width:none;min-height:0;aspect-ratio:3/2;justify-self:stretch;width:100%}
  .msg.box>div:not(.port){max-width:none;justify-self:stretch;padding:1.6rem clamp(16px,3vw,40px) 2.2rem}
}
/* Notice Board beside Apply: the live site's board (navy, date blocks, gold categories and New badges), gliding by itself like
   the Tenders list and holding under the pointer, the keyboard or a finger */
@media(min-width:961px){.nacols{grid-template-columns:1.25fr 1fr}}
.nboard{position:relative;overflow:hidden;background:var(--navy);color:#fff;border-radius:var(--r3);padding:clamp(1.3rem,2.4vw,1.9rem);display:flex;flex-direction:column;box-shadow:0 18px 40px rgba(6,22,39,.16)}
.nboard::before{content:"";position:absolute;inset:0;background-image:radial-gradient(420px 300px at 95% -10%,rgba(195,154,62,.18),transparent 60%);pointer-events:none}
.nboard>*{position:relative}
.nb-tag{display:flex;align-items:center;gap:.6rem;font-size:.72rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.nb-tag::before{content:"";width:30px;height:2px;background:var(--gold)}
.nb-title{font-family:'Spectral';font-weight:500;font-size:clamp(1.35rem,2vw,1.7rem);line-height:1.2;color:#fff;margin:.45rem 0 1rem}
.nb-tabs{display:flex;margin-bottom:1rem}
.nb-pill{background:var(--gold);color:var(--navy);border-radius:var(--rp);padding:.45rem 1rem;font-weight:700;font-size:.8rem}
.nb-list{height:300px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:var(--r2);-webkit-mask-image:none;mask-image:none}
.nb-list .notice-list{list-style:none;margin:0;padding:0}
.nb-list .notice-list li a{display:flex;gap:1rem;padding:.9rem 1.1rem;border-bottom:1px solid rgba(255,255,255,.08);font-family:'Mulish',sans-serif;font-size:1rem;line-height:1.45;color:#e3ebf5}
.nb-list .notice-list li a:hover{background:rgba(195,154,62,.12);color:#fff}
.notice-date{flex-shrink:0;width:46px;text-align:center}
.notice-date b{display:block;font-family:'Spectral';font-size:1.3rem;font-weight:600;color:var(--gold);line-height:1}
.notice-date small{font-size:.66rem;color:#9fb1c9;text-transform:uppercase;letter-spacing:.05em}
.notice-body{font-size:.86rem;color:#e3ebf5}
.notice-body .cat{display:block;font-size:.66rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--gold);margin-bottom:.15rem}
.newbadge{font-size:.6rem;font-weight:800;color:var(--navy);background:var(--gold);padding:0 .35rem;border-radius:3px;margin-left:.4rem;vertical-align:middle;white-space:nowrap}
.nb-all{display:flex;align-items:center;margin-top:1rem;padding:.85rem 1.5rem;border-radius:var(--rp);font-weight:800;font-size:.9rem;color:#fff;background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 2px rgba(255,255,255,.4);transition:.2s}
.nb-all:hover{background:#fff;color:var(--navy)}
@media(prefers-reduced-motion:reduce){.nb-list .vtrack>[aria-hidden]{display:none}}
/* ---------- client batch, 3 Nov (Research Centres, Moments) ---------- */
/* Moments: two larger photos to a row on computers (were three) */
@media(min-width:901px){.achgrid.strack{grid-auto-columns:calc((100% - 1rem)/2)}}
/* with a mouse on a photo, that photo grows a little and the others blur; the row holds still meanwhile (it already did) */
@media(hover:hover) and (min-width:561px){
  .achgrid.strack>button{transition:transform .45s var(--ease),filter .45s var(--ease),opacity .45s var(--ease),box-shadow .3s}
  .achgrid.strack:has(>button:hover)>button:not(:hover){filter:blur(2.5px) saturate(.85);opacity:.72}
  .achgrid.strack>button:hover{transform:scale(1.03);box-shadow:0 14px 30px rgba(6,22,39,.22),inset 0 0 0 1px var(--gold);position:relative;z-index:1}
}
/* a photo opened large sits over a blurred page */
.lb{background:rgba(4,12,22,.8);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
#mAll{font-family:inherit;cursor:pointer;border:0}
/* About's drop-down: two short groups share a column, so the panel is no taller than Students' and fits over the hero film like
   the other menus (at 571px it ran past the film on laptop screens and fell back to the solid look) */
.mstack{display:flex;flex-direction:column;gap:1.3rem;min-width:0}
@media(max-width:1100px){.mstack{gap:.9rem}}
/* Research Centres, 4 Nov: the centres' own logos replace the crest as they arrive. A centre with a logo shows just the logo,
   filling a square white tile, as in the reference Ashish sent (the logo names the centre; screen readers get the name from the
   picture's alt text). Centres without a logo yet keep the crest and their name, the crest larger and the two centred, so no
   tile has an empty band ("there is too much space, shorten it"); slightly less side padding on computers keeps the longest name
   to three lines at common widths. A wide logo shrinks to fit instead of being squeezed */
.rcard img{object-fit:contain}
.rcard{aspect-ratio:auto;justify-content:center}
.rcard>img{height:64px}
.rcard.logo{aspect-ratio:1;padding:.6rem}
.rcard.logo>img{flex:1 1 0;min-height:0;width:100%;height:auto}
@media(min-width:601px){.rcard{padding-inline:.4rem}}
@media(max-width:540px){.rcard>img{height:48px}}
/* Moments (12 Nov): the live homepage's 17 photos in the redesign's own slider; a tall poster in a wide frame shows whole, centred,
   over a soft blurred copy of itself */
.achgrid.strack .ph{position:relative}
.achgrid.strack .ph img.fit{position:relative;z-index:1;object-fit:contain}
.achgrid.strack .ph .phbg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:blur(16px) brightness(.82);transform:scale(1.15)}

/* ======================================================================================================================
   INNER PAGES (11 Nov 2026) - appended to the homepage's styling by build-site.mjs. Built from the homepage's own pieces:
   the photo banner, Spectral headings with the gold rule, paper and sand, the gold-ruled frames (.dbox), navy boxes.
   ====================================================================================================================== */
/* the older pages' colour names, mapped onto the homepage's, so page-specific styles keep working */
:root{--bg:var(--paper);--bg-soft:var(--sand);--gold-deep:var(--gold-dp);--gold-soft:#f3e9cf;--navy-3:var(--navy-2);
  --line-2:#d3dae4;--radius:10px;--shadow:0 6px 18px rgba(6,22,39,.08);--shadow-lg:0 18px 40px rgba(6,22,39,.16)}
a.brand{color:inherit}

/* page header (12 Nov; Ashish, pointing at NLU Delhi's Core Faculty page: "can you make like that"): a slim dark strip with the
   path, then the page's own title on the page itself; no photo banner */
.pg-crumbbar{background:var(--navy-d);color:rgba(255,255,255,.8);font-size:.82rem;line-height:1.5;padding:.72rem 0}
.pg-crumbbar .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:.25rem .6rem}
.pg-crumbbar a{color:#fff;font-weight:700}
.pg-crumbbar a:hover{color:var(--gold-lt);text-decoration:underline;text-underline-offset:3px}
.pg-crumbbar [aria-current]{color:#fff}
main>section.pg-title{padding:clamp(1.1rem,2.2vw,1.7rem) 0 0;background:var(--paper)}
/* under the title: room before a heading, an officer's box or a table (13 Nov, Controller of Examinations: the title sat on the
   message heading); a short intro line stays close under it (12 Nov: "tighten the gap", then "decrease the gap") */
main>section.pg-title+section.pg-sec{padding-top:clamp(1.6rem,3vw,2.4rem)}
main>section.pg-title+section.pg-sec:has(>.wrap>:is(.pg-lede,.pg-intro):first-child,>.wrap>.vh:first-child+:is(.pg-lede,.pg-intro)){padding-top:clamp(.45rem,.9vw,.7rem)}
.pg-body>.vh:first-child+*{margin-top:0}   /* a heading hidden for repeating the title leaves no gap behind */
.pg-title h1{font-family:'Spectral';font-weight:400;font-variant-caps:small-caps;letter-spacing:.015em;font-size:clamp(1.8rem,3.4vw,2.6rem);line-height:1.15;color:var(--navy);text-align:center;max-width:920px;margin-inline:auto}   /* about the content's width: short titles on one line, a long one in two even lines rather than edge to edge (13 Nov) */
.pg-title h1,.pg-body .sechead h2,.pg-lede{text-wrap:balance}   /* a title breaks into even lines, not one word left alone */
.nw{white-space:nowrap}                                          /* a degree name or a year range kept on one line */

/* the page's content (generic rules; the homepage's section look follows below) */
.pg-body{color:var(--ink)}
.pg-body>*+*{margin-top:1.4rem}
.pg-body :where(h2){font-family:'Spectral';font-weight:400;color:var(--navy);font-size:clamp(1.35rem,2.4vw,1.75rem);line-height:1.25;margin:2rem 0 1rem}
.pg-body :where(h2)::after{content:"";display:block;width:34px;height:2px;background:var(--gold);margin-top:.55rem}
.pg-body :where(h3){font-family:'Spectral';font-weight:500;color:var(--navy);font-size:1.2rem;line-height:1.3;margin:1.5rem 0 .6rem}
.pg-body>:where(h2,h3):first-child{margin-top:0}
.pg-body :where(p){line-height:1.8}
.pg-body :where(p+p){margin-top:.9rem}
.pg-body :where(ul:not([class]),ol:not([class])){padding-left:1.3rem;line-height:1.75}
.pg-body :where(ul:not([class]),ol:not([class]))>:where(li+li){margin-top:.35rem}
.pg-body :where(ul:not([class])):has(>li:nth-child(10)):not(:has(>li>:is(b,strong))){columns:3 230px;column-gap:2.6rem}   /* long lists of short names (journals, newspapers ...) in columns; lists of described items stay one column */
.pg-body :where(ul:not([class]))>li{break-inside:avoid}
.pg-body :where(ul:not([class]))>li::marker{color:var(--gold)}
.pg-body :where(b,strong){color:var(--navy)}
.pg-body p a,.pg-body li a,.pg-body td a:not(.pdf-btn),.pg-body .bio a:not(.pdf-btn),.pg-body .prose a:not(.pdf-btn){color:var(--navy);text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:3px}
.pg-body p a:hover,.pg-body li a:hover,.pg-body td a:not(.pdf-btn):hover{color:var(--gold-dp)}
.pg-body :where(img){height:auto}   /* low weight, so a page's own picture sizes (the faculty directory's round photos) still apply */
.pg-body [style*="text-align:center"]>img{margin-inline:auto}   /* the homepage shows images as blocks, so a centred wrapper alone no longer centres them */
.pg-body a{overflow-wrap:anywhere}                    /* a long web address in the text wraps instead of widening the page */
@media(max-width:600px){.pg-body img{max-width:100%!important}}   /* some pictures carry a fixed max-width wider than a phone */
.prose{max-width:880px;margin-inline:auto;font-size:1.01rem}
.prose img{margin:1.2rem auto;border:1px solid var(--rule);padding:6px;background:#fff}
.prose h2{margin-top:1.8rem}

/* ---- the content in the homepage's own sections (12 Nov: "you didnt apply body style of homepage on others pages") ----
   build-site.mjs splits each page at its h2 headings: every heading is the homepage's centred .sechead, the sections take paper and
   sand-with-lattice (.bg-sand) in turn, text is set as the homepage's About text with its drop cap, tables sit in the double-ruled
   .dbox frame, a few text pages open with the About layout (photo beside the words), and every block rises into view (.rv). */
main>section.pg-sec{padding-block:clamp(2rem,3.6vw,3rem)}
.pg-sec .sechead{margin-bottom:clamp(1.3rem,2.4vw,2rem)}
.pg-body .sechead h2{margin:0}
.pg-body .sechead h2::after{display:none}
.pg-text{max-width:820px;margin-inline:auto}
.pg-text :where(p,li){color:var(--muted);font-size:.92rem;line-height:1.86}
.pg-text :where(p,ul,ol){margin:0 0 .9rem}
.pg-text>:last-child{margin-bottom:0}
.pg-body a[href^="tel:"]{white-space:nowrap}   /* a phone number stays on one line */
.pg-text :where(h3,h4,h5,h6){font-family:'Spectral';font-weight:400;color:var(--navy);font-size:1.3rem;line-height:1.3;margin:1.8rem 0 .7rem}
.pg-text>:where(h3,h4,h5,h6):first-child{margin-top:0}
.pg-text .prose{max-width:none;margin-inline:0;font-size:inherit}
.pg-sec:not(.about) .pg-text p.dc::first-letter{font-family:'Spectral';font-size:3.6rem;float:left;line-height:.72;padding:.07em .01em 0 0;color:var(--gold-dp);font-weight:400}
.pg-text :where(ul:not([class])){list-style:none;padding-left:1.35rem}
.pg-text :where(ul:not([class]))>li{position:relative}
.pg-text :where(ul:not([class]))>li::before{content:"";position:absolute;left:-1.1rem;top:.8em;width:6px;height:6px;background:var(--gold);transform:rotate(45deg)}
.pg-text :where(ol:not([class]))>li::marker{color:var(--gold-dp);font-family:'Spectral';font-weight:600}
.pg-lede{max-width:64ch;margin-inline:auto;text-align:center;color:var(--muted);font-size:.95rem;line-height:1.75}
.pg-intro{margin-bottom:clamp(1.4rem,2.6vw,2rem)}
.pg-intro>*+*{margin-top:.9rem}
.pg-introbar{text-align:center}
.pg-card{padding:clamp(1.2rem,2.4vw,1.8rem);text-align:center}
.pg-card h2::after{margin-inline:auto}
/* the About layout: a photo beside the words */
.pg-about .cols{align-items:start}   /* the photo lines up with the first line of the text (centred, a long text left the photo floating low, 12 Nov) */
.pg-about .pg-text{max-width:none}
.about .pic.pg-ownpic{background:#fff}
.about .pic.pg-ownpic img{aspect-ratio:auto;object-fit:contain}
@media(max-width:640px){.pg-about .cols ul,.pg-about .cols ol{text-align:left}
  .pg-about-left .cols>div:last-child{text-align:left}
  .pg-about-left p.dc::first-letter{font-family:'Spectral';font-size:3.6rem;float:left;line-height:.72;padding:.07em .01em 0 0;color:var(--gold-dp);font-weight:400}}
/* tables in the homepage's double-ruled frame */
.pg-frame{padding:clamp(.6rem,1.4vw,1rem);max-width:1100px;margin-inline:auto}
.pg-has-text .pg-frame{max-width:960px}
.pg-body .pg-frame table{border:0;box-shadow:none}
.pg-frame>h3{font-family:'Spectral';font-weight:400;color:var(--navy);font-size:1.3rem;line-height:1.3;text-align:center;margin:.35rem 0 .9rem}
.pg-frame .council-table td:first-child{font-family:'Spectral';font-weight:600;color:var(--gold-dp);width:4.5rem}
/* council columns by their heading, not their position: the Finance Committee table has a different column order (12 Nov) */
.pg-frame .council-table td[data-label="Designation"]{font-weight:700;color:var(--navy)}
.pg-frame .council-table td[data-label="Tenure"]{color:var(--muted)}
@media(min-width:1100px){.pg-frame .council-table td[data-label="Designation"],.pg-frame .council-table:has(td[data-label="Designation"]) td[data-label="Tenure"]{white-space:nowrap}}   /* not the Finance Committee's table, whose long Tenure entries squeezed the names */
@media(max-width:760px){.pg-frame:has(table.pg-cards){border:0;box-shadow:none;padding:0;background:none}.pg-frame .council-table td:first-child{width:auto}}
/* on wide screens a column heading, and a person's name, stay on one line ("SR. NO." and names were breaking in two); narrower
   screens let them wrap, or wide tables would no longer fit their frame */
@media(min-width:1100px){.pg-body thead th{white-space:nowrap}.pg-body td[data-nw]{white-space:nowrap}}
/* a reference line that had been a heading row with no rows under it (About > Academic Council) */
.pg-note{max-width:900px;margin-inline:auto;text-align:center;color:var(--muted);font-size:.86rem;line-height:1.7}
.pg-note span{display:block;text-wrap:balance}   /* one part of the reference per line (a separator dot started a wrapped line) */
/* notice lists */
.pg-notices{max-width:980px;margin-inline:auto}
.pg-notices>h3{font-family:'Spectral';font-weight:400;color:var(--navy);font-size:1.3rem;line-height:1.3;text-align:center;margin:0 0 1rem}
.pg-notices .notice-list{max-width:none}
.pg-notices .notice-list>p,.pg-notices .notice-panel>p{text-align:center;text-wrap:pretty}   /* "no notices yet" messages sit under the centred tabs */
.pg-lede .pg-sep{display:block;height:0;overflow:hidden;visibility:hidden}   /* "a | b" in a centred line: b starts its own line */
/* photo galleries (NSS, Sports, PwD): even rows, each photo framed like the homepage's, logos shown whole */
.pg-gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.1rem;max-width:960px;margin-inline:auto}
.pg-gallery.n4{grid-template-columns:repeat(4,minmax(0,1fr));max-width:1100px}
.pg-gallery.n1,.pg-gallery.n2{grid-template-columns:repeat(2,minmax(0,1fr));max-width:720px}
.pg-gallery img{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:center 30%;background:#fff;box-shadow:0 0 0 1px var(--rule),0 0 0 5px var(--paper),0 0 0 6px var(--rule)}
.pg-gallery img.pg-logo{object-fit:contain;padding:.8rem}
@media(max-width:900px){.pg-gallery,.pg-gallery.n4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:480px){.pg-gallery,.pg-gallery.n4,.pg-gallery.n2{grid-template-columns:minmax(0,1fr)}}
/* B.A. LL.B. scheme: the semester tables in pairs, one row per year */
.pg-semgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.6rem 2rem}
@media(max-width:760px){.pg-semgrid{grid-template-columns:minmax(0,1fr)}}
/* the faculty directory: a gap under the disclaimer; round photos that keep their size beside long names on phones */
.pg-body .fpi-wrap{margin-top:1.4rem}
.fpi-head>:first-child{flex:none}
/* a section heading over a few short lines, as a small gold label (13 Nov, Sports "From the Officer's Desk") */
.pg-labelhead{text-align:center;margin-bottom:.7rem}
.pg-body .pg-labelhead h2{display:inline-flex;align-items:center;gap:.7rem;margin:0;font-family:'Mulish',sans-serif;font-size:.74rem;font-weight:800;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-dp);line-height:1.4}
.pg-body .pg-labelhead h2::before,.pg-body .pg-labelhead h2::after{content:"";display:block;width:22px;height:1px;margin:0;background:currentColor}
.pg-labelhead+.pg-lede{margin-top:0}
/* Brochure: closer lines in its paragraphs (13 Nov: "reduce the line spacing in the para on Brochure.html") */
main[data-page="Brochure.html"] .pg-text p{line-height:1.6;margin-bottom:.75rem}
@media print{.rv{opacity:1!important;transform:none!important}}

/* buttons and PDF links */
.pdf-btn{display:inline-flex;align-items:center;gap:.45rem;background:var(--navy);color:#fff;font-size:.78rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:.55rem 1rem;border-radius:999px;white-space:nowrap;transition:background .2s}
.pdf-btn:hover{background:var(--gold-dp);color:#fff}
.pdf-btn i{display:inline-block;width:.9rem;height:.9rem;flex:0 0 auto;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 2h8l6 6v14H6z' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='M14 2v6h6' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 2h8l6 6v14H6z' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='M14 2v6h6' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E") center/contain no-repeat}
.pdf-btn i.fa-up-right-from-square{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 4h6v6M20 4l-9 9M18 14v6H4V6h6' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 4h6v6M20 4l-9 9M18 14v6H4V6h6' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E")}
.pg-body i.fa-solid:not(.pdf-btn i),.pg-body i.fa-brands{display:none}

/* tabs (Latest / Archive ...) */
.tabs{display:flex;justify-content:center;gap:.5rem;flex-wrap:wrap;margin:0 0 1.4rem}
.tabs .tab{font:inherit;font-size:.8rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:.6rem 1.3rem;border-radius:999px;border:1px solid var(--rule);background:#fff;color:var(--navy);cursor:pointer;transition:background .2s,border-color .2s}
.tabs .tab:hover{border-color:var(--gold)}
.tabs .tab.active{background:var(--navy);border-color:var(--navy);color:#fff}
.notice-panel{display:none}.notice-panel.active{display:block}

/* notices: one row each, a gold edge, the title and its View button */
.notice-list{display:grid;gap:.7rem;max-width:980px;margin-inline:auto}
.notice-item{display:flex;align-items:center;justify-content:space-between;gap:1rem;background:#fff;border:1px solid var(--line);border-left:3px solid var(--gold);padding:.95rem 1.1rem;transition:box-shadow .2s,border-color .2s}
.notice-item:hover{box-shadow:0 10px 24px rgba(6,22,39,.1);border-left-color:var(--gold-dp)}
.notice-item .t{color:var(--ink);font-weight:600;font-size:.93rem;line-height:1.5}
.notice-item .t span[style]{background:var(--gold)!important;color:var(--navy)!important;letter-spacing:.06em}
@media(max-width:640px){.notice-item{flex-direction:column;align-items:flex-start;gap:.6rem}}

/* tables: a gold-ruled frame with a dark blue head; on phones each row becomes a labelled card */
.pg-body table{width:100%;border-collapse:collapse;font-size:.92rem;background:#fff;border:1px solid var(--rule);box-shadow:inset 0 0 0 4px #fff,inset 0 0 0 5px var(--rule)}
.pg-body thead th{background:var(--navy);color:#fff;text-align:left;font-weight:700;font-size:.76rem;letter-spacing:.08em;text-transform:uppercase;padding:.85rem 1rem;vertical-align:bottom}
.pg-body tbody td,.pg-body tbody th{padding:.8rem 1rem;border-bottom:1px solid var(--line);vertical-align:top;color:var(--ink);line-height:1.6;text-align:left}
.pg-body tbody tr:nth-child(even) td{background:rgba(244,238,225,.5)}
.pg-body tbody tr:hover td{background:rgba(220,185,100,.14)}
.pg-body table+table{margin-top:1.4rem}
.pg-body div[style*="overflow-x"]{-webkit-overflow-scrolling:touch}
@media(max-width:760px){
  .pg-body table.pg-cards{border:0;box-shadow:none;background:none}
  .pg-body table.pg-cards thead{display:none}
  .pg-body table.pg-cards,.pg-body table.pg-cards tbody,.pg-body table.pg-cards tr,.pg-body table.pg-cards td{display:block;width:auto}
  .pg-body table.pg-cards tr{border:1px solid var(--rule);background:#fff;margin-bottom:.8rem;padding:.45rem .2rem}
  .pg-body table.pg-cards tbody tr:nth-child(even) td,.pg-body table.pg-cards tbody tr:hover td{background:none}
  .pg-body table.pg-cards tbody td{border:0;padding:.35rem .9rem;white-space:normal}
  .pg-body table.pg-cards td[data-empty]{display:none}   /* no label standing over nothing */
  .pg-body table.pg-cards td[data-label]::before{content:attr(data-label);display:block;font-family:'Mulish',sans-serif;font-size:.66rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
  .pg-body table:not(.pg-cards){display:block;overflow-x:auto}
}

/* an officer's page: a dark blue box with the photo, name and post (as the homepage's messages), the message beside it */
.profile{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:clamp(1.4rem,3vw,2.6rem);align-items:start;max-width:1100px;margin-inline:auto}
/* the person box itself: every page with one (Dean, Registrar and Internship Cell too, whose box is not inside .profile, 12 Nov) */
.pcard{background:var(--navy);color:#fff;padding:1.3rem;text-align:center;box-shadow:0 18px 40px rgba(6,22,39,.16)}
.profile .pcard{position:sticky;top:5.5rem}
.pcard img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:center top;box-shadow:0 0 0 1px rgba(220,185,100,.6)}
.pcard .ph-fallback{aspect-ratio:4/5;background:var(--navy-2);color:var(--gold-lt);align-items:center;justify-content:center;font:300 3rem 'Spectral'}
.pcard .pname{font-family:'Spectral';font-weight:400;font-size:1.3rem;line-height:1.25;color:#fff;margin-top:1rem}
.pcard .pdesig{font-size:.76rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-lt);margin-top:.35rem}
.pcard .mail{display:block;font-size:.84rem;color:rgba(255,255,255,.82);margin-top:.5rem;overflow-wrap:anywhere}
.pcard a.mail+br{display:none}                       /* two addresses one under the other, without a blank line (Chief Warden) */
.pcard .pname,.pcard .pdesig{text-wrap:balance}      /* "Head of Department" / "(Under Graduate)", not a bracket split across lines */
.pcard img.pg-wide{aspect-ratio:auto;object-fit:contain}   /* a clearly wide photo is shown whole (marked by the build) */
.pcard .mail:hover{color:var(--gold-lt)}
.pcard .pdf-btn{background:var(--gold);color:var(--navy)}
.pcard .pdf-btn:hover{background:#fff}
.profile .bio{font-size:1.01rem;line-height:1.85}
.profile .bio h2{margin-top:0}
.profile .bio p+p{margin-top:1rem}
@media(max-width:820px){.profile{grid-template-columns:minmax(0,1fr)}.profile .pcard{max-width:320px;width:100%;margin-inline:auto;position:static}}

/* staff cards: photo, name, post, email */
.staff-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:1.2rem}   /* every row centred, a short last row too (12 Nov) */
.staff-grid>.staff-card{flex:0 1 270px;min-width:230px}
.staff-card{display:flex;flex-direction:column;align-items:center;background:#fff;border:1px solid var(--rule);box-shadow:inset 0 0 0 4px #fff,inset 0 0 0 5px var(--rule);padding:1.5rem 1.1rem;text-align:center;transition:transform .2s,box-shadow .2s}
.staff-card>div:last-child:has(.pdf-btn){margin-top:auto!important;padding-top:.7rem}   /* View CV buttons line up along a row */
.staff-card:hover{transform:translateY(-3px);box-shadow:inset 0 0 0 4px #fff,inset 0 0 0 5px var(--gold),0 14px 30px rgba(6,22,39,.1)}
.staff-card .photo{width:132px;height:132px;border-radius:50%;object-fit:cover;object-position:center top;margin:0 auto .9rem;box-shadow:0 0 0 3px #fff,0 0 0 4px var(--gold)}
.staff-card .photo[src$="images/priya.jpeg"]{object-position:50% 25%}   /* a tall selfie with a pale band at the top: framed from hair to shoulders like the others (13 Nov) */
.staff-card .ph-fallback{width:132px;height:132px;border-radius:50%;background:var(--navy);color:var(--gold-lt);display:flex;align-items:center;justify-content:center;font:300 2.4rem 'Spectral';margin:0 auto .9rem}
.staff-card .name{font-family:'Spectral';font-weight:500;color:var(--navy);font-size:1.08rem;line-height:1.3}
.staff-card .desig{color:var(--gold-dp);font-weight:800;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;margin:.3rem 0}
.staff-card .mail{display:inline-block;margin-top:.3rem;color:var(--muted);font-size:.8rem;word-break:break-word}
.staff-card .mail:hover{color:var(--navy)}
@media(max-width:600px){.staff-grid{gap:.8rem}.staff-grid>.staff-card{flex-basis:calc(50% - .4rem);min-width:0}.staff-card{padding:1.1rem .7rem}.staff-card .photo,.staff-card .ph-fallback{width:92px;height:92px;font-size:1.7rem}.staff-card .name{font-size:.95rem}}
@media(max-width:480px){.staff-grid>.staff-card{flex-basis:100%;max-width:340px}}   /* phones: one card per row, so an email address stays whole */

/* embedded documents and forms */
.ip-iframe{display:block;width:100%;max-width:980px;margin-inline:auto;height:min(80vh,820px);border:1px solid var(--rule);box-shadow:inset 0 0 0 4px #fff,inset 0 0 0 5px var(--rule);background:#fff}
.pg-body form input,.pg-body form select,.pg-body form textarea{font:inherit;background:#fff;color:var(--ink);margin-top:.35rem}
.pg-body form label{font-weight:700;color:var(--navy);font-size:.9rem}
.pg-body form input:focus,.pg-body form select:focus,.pg-body form textarea:focus{outline:2px solid var(--gold);outline-offset:1px}