/* =====================================================================
   theme-ostad.css — 11-Nov-2026 (Update 11)
   One palette for the whole public site, taken from the Ostad pre-recorded courses page:
     ink #101828 · deep maroon #4b0015 · brand red #ed1d24 · yellow #ffc000 · page #f9f9fa · font Hind Siliguri
   Loaded LAST in every public layout, so it only re-colours; no page structure changes.
   To go back to the old colours: delete the <link …theme-ostad.css> line from layouts v5.php / public.php / v10.php.
   ===================================================================== */
:root,.v5shell,.rb{
  --os-red:#ed1d24; --os-red2:#c4121a; --os-maroon:#4b0015; --os-maroon2:#7a0a1f; --os-ink:#101828; --os-yellow:#ffc000; --os-yellow2:#ffab00;
  --os-pink:#fdecee; --os-pink2:#f5c7cf; --os-bg:#f9f9fa; --os-green:#12b76a;
  /* theme-v8 tokens */
  --ac:#ed1d24; --ac2:#c4121a; --ac3:#ffc000; --green:#ed1d24; --green2:#c4121a; --gold:#ffc000;
  --grad:linear-gradient(120deg,#c4121a,#ed1d24); --grad2:linear-gradient(120deg,#ed1d24,#ffab00);
  --paper:#f9f9fa; --paper2:#f3f4f7; --card:#fff; --ink:#101828; --ink-2:#475467; --ink-3:#667085; --ink2:#475467; --ink3:#667085;
  --line:#eaecf0; --line-2:#d0d5dd;
  --shadow:0 1px 2px rgba(16,24,40,.05),0 8px 22px -10px rgba(75,0,21,.16);
  /* v5 tokens */
  --river:#ed1d24; --forest:#12b76a; --terra:#ed1d24; --saffron:#ffc000; --violet:#7a0a1f;
  --sans:'Hind Siliguri','Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif; --serif:var(--sans); --head:var(--sans);
}
html,body{background:var(--os-bg)!important;color:var(--os-ink)}
body{font-family:var(--sans)!important}
h1,h2,h3,h4,.shead h2{font-family:var(--sans)!important;color:var(--os-ink)!important}
h1 em,h2 em,.ls-hero h1 em,.me h1 em,.lu-hero h1 em{color:var(--os-red)!important}
a:not([class]){color:var(--os-red)}
.shead .num,.ls-hero .num,.vd-k,.num{color:var(--os-red)!important}.shead .num::before,.num::before{background:var(--os-red)!important}

/* buttons: red primary (12px corners), pink pill secondary, yellow call-to-action */
.btn,.rb-btn,.ln-btn,.lsw-btn{border-radius:12px!important;font-weight:600!important}
.btn.dark,.ln-btn.dark,.lsw-btn.dark,.rb-btn,.rb-btn.dark,.cv,.r-play.on{background:var(--os-red)!important;border-color:var(--os-red)!important;color:#fff!important}
.btn.dark:hover,.lsw-btn.dark:hover,.rb-btn:hover{background:var(--os-red2)!important;border-color:var(--os-red2)!important}
.btn.ghost,.rb-btn.ghost{background:var(--os-pink)!important;border:1px solid var(--os-pink2)!important;color:var(--os-red)!important;border-radius:999px!important}
.btn.ghost:hover,.rb-btn.ghost:hover{background:#fff!important;border-color:var(--os-red)!important;color:var(--os-red2)!important}
.btn.gold,.btn.yellow,.btn.cta{background:var(--os-yellow)!important;border-color:var(--os-yellow)!important;color:#101828!important}
.lk.on,.lk-life.on,.ls-tabs [role="tab"][aria-selected="true"],.vd-pill.on,.fp8-mode button.on,.ft2-seg button.on,.tl-ord button.on,.pg-base button.on,.xh-chips button.on,.rb-chip.on{background:var(--os-red)!important;border-color:var(--os-red)!important;color:#fff!important}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--os-red);outline-offset:2px}
.lsw-today{border-left-color:var(--os-red)!important}.lsw-today span{color:var(--os-red)!important}
.vd-card.on{box-shadow:0 0 0 3px #fff,0 0 0 5px var(--os-red),0 20px 40px -20px rgba(75,0,21,.35)!important}
.vd-nav:hover{border-color:var(--os-red)!important;color:var(--os-red)!important}
.chip,.tag,.pill{border-radius:999px}
.interest{background:linear-gradient(135deg,#101828 0%,#4b0015 70%,#7a0a1f 100%)!important;color:#fff!important;border:0}
.interest *{color:inherit}
.vd-sec,.interest~section:nth-of-type(even){background:#f3f4f7!important}
.pg-box,.lsw,.ft2,.fp8-map,.dy-day,.dy-chips,.sy-c,.case,.ab-card,.pub,.card,.rb-card,.ppx-card{border-radius:14px!important}

/* ---------- top menu: same floating bar and names, now ink → maroon with a yellow highlight ---------- */
header#hdr.nv9 .nv9-bar{--tab:#4b0015;--tabl:#101828;--tabr:#7a0a1f}
header#hdr.nv9 .nv9-mid{background:linear-gradient(90deg,#101828 0%,#4b0015 52%,#7a0a1f 100%);
  filter:drop-shadow(0 0 .7px rgba(75,0,21,.9)) drop-shadow(0 16px 18px rgba(75,0,21,.28)) drop-shadow(0 3px 4px rgba(16,24,40,.2))}
header#hdr.nv9.scrolled .nv9-mid{filter:drop-shadow(0 0 .7px rgba(75,0,21,.9)) drop-shadow(0 18px 22px rgba(75,0,21,.34)) drop-shadow(0 3px 4px rgba(16,24,40,.22))}
header#hdr.nv9 .nv9-mid::before{background:radial-gradient(circle at 0 100%,transparent calc(var(--r) - .5px),var(--tabl) var(--r))}
header#hdr.nv9 .nv9-mid::after{background:radial-gradient(circle at 100% 100%,transparent calc(var(--r) - .5px),var(--tabr) var(--r))}
.nv9-pill{background:linear-gradient(135deg,#101828 0%,#4b0015 60%,#7a0a1f 100%);border-color:rgba(255,255,255,.28);box-shadow:0 14px 26px -14px rgba(75,0,21,.7),0 2px 6px -2px rgba(16,24,40,.3)}
.nv9-burger{background:linear-gradient(135deg,#101828,#7a0a1f)}
.nv9-cv{background:var(--os-yellow)!important;color:#101828!important;box-shadow:0 8px 18px -8px rgba(255,192,0,.8)}
.nv9-cv:hover{background:var(--os-yellow2)!important}
header#hdr.nv9 .nv9-t small{color:#f5c7cf!important}header#hdr.nv9 .nv9-t small svg,.nv9-car{color:#f5c7cf;stroke:#fdecee}
header#hdr.nv9 .nv9-btn.on .nv9-t b,.nv9-g.open .nv9-btn .nv9-t b,header#hdr.nv9 .nv9-mid > a.lk.on,header#hdr.nv9 .nv9-mid > a.lk:hover{color:var(--os-yellow)!important}
header#hdr.nv9 .nv9-btn.on .nv9-t small svg,.nv9-btn:hover .nv9-t small svg,.nv9-g.open .nv9-t small svg{color:var(--os-yellow)}
header#hdr.nv9 .nv9-btn.on::after,header#hdr.nv9 .nv9-mid > a.lk.on::after{background:linear-gradient(90deg,#ffc000,#ffab00)}
@media (max-width:1060px){header#hdr.nv9 .nv9-mid.open{background:linear-gradient(160deg,#101828,#7a0a1f)}}

/* ---------- bottom: dark maroon footer with a curved top edge and a soft red glow ---------- */
.ajf{position:relative;margin-top:110px;border-top:0;color:#fff;overflow:hidden;
  background:radial-gradient(60% 90% at 92% 100%,rgba(237,29,36,.38),transparent 70%),radial-gradient(40% 60% at 6% 0%,rgba(255,192,0,.10),transparent 70%),linear-gradient(160deg,#101828 0%,#4b0015 62%,#7a0a1f 100%)}
.ajf::before{content:"";position:absolute;left:-8%;right:-8%;top:-1px;height:clamp(44px,6vw,86px);background:var(--os-bg);border-radius:0 0 50% 50% / 0 0 100% 100%;z-index:0}
.ajf::after{content:"";position:absolute;right:-90px;bottom:-110px;width:320px;height:320px;border-radius:50%;border:2px solid rgba(255,192,0,.18);box-shadow:0 0 0 38px rgba(255,255,255,.03),0 0 0 80px rgba(255,255,255,.025);pointer-events:none}
.ajf-in{position:relative;z-index:1;padding-top:calc(clamp(44px,6vw,86px) + 18px)}
.ajf h4{color:var(--os-yellow)!important}
.ajf a{color:#fde7ea}.ajf a:hover{color:#fff;text-decoration:underline}
.ajf p{color:#f5c7cf}
.ajf-ref{border-top:1px solid rgba(255,255,255,.14);color:#f5c7cf}.ajf-ref .refs b{color:#fff}
.ajf .ajh-mark{border-color:var(--os-yellow)!important;background:var(--os-yellow)!important;color:#101828!important}
.ajf .ajh-name{color:#fff!important}
/* the "Edit in admin" button keeps working on the dark footer */
.admin-edit{background:var(--os-yellow)!important;color:#101828!important;border-color:var(--os-yellow)!important}

/* ---- Update 12b: readability on dark panels, no repeated section tags, dot-grid background ---- */
.interest h1,.interest h2,.interest h3,.interest h4,.interest li,.interest p,
.dark h1,.dark h2,.dark h3,.dark h4,.on-dark h1,.on-dark h2,.on-dark h3,.on-dark h4,
.ajf h1,.ajf h2,.ajf h3{color:#fff!important}
.interest li{color:rgba(255,255,255,.92)!important}
.interest h3 em,.on-dark h2 em,.dark h2 em{color:var(--os-yellow)!important}
/* the small "02 · RESEARCH" tag above every section title repeats the title — hidden */
.shead .num,.shead>div>.num{display:none!important}
.shead>div>h2{margin-top:0!important}
/* dot grid (better than lines: reads as texture, never competes with text) */

section,.v5shell>section{background-color:transparent}
.ajf{background-image:radial-gradient(rgba(255,255,255,.07) 1px,transparent 1.2px)!important;background-size:20px 20px!important}

/* ---- Update 12c: dot grid on EVERY page, curved lines on selected sections (footer keeps the big curve) ---- */
html{background:#f9f9fa}
body,body.ajh-on,body.v5,.v5shell{background-color:#f9f9fa!important;background-image:radial-gradient(rgba(75,0,21,.07) 1px,transparent 1.2px)!important;background-size:22px 22px!important;background-attachment:fixed!important}
/* let the grid show through: page sections and wrappers carry no solid fill of their own */
main,main>section,.v5shell>section,#main,.aj-page,.aj-wrap{background-color:transparent!important}
/* ---- Update 12d: one continuous page, top to bottom — no section lines, no section colours; the dots are only ~7% visible ---- */
main section:not([class*="hero"]):not(.ajf),.v5shell>section:not([class*="hero"]),.aj-page>section{background:none!important;border-top:0!important;border-bottom:0!important;box-shadow:none!important}
main section::before,main section::after,.v5shell>section::before,.v5shell>section::after{background-image:none!important}
main hr,.shead::after{display:none!important}

/* ---- Update 12e: top menu bar = ONE solid colour (maroon), items separated by fine grid lines ---- */
header#hdr.nv9 .nv9-bar{--tab:#4b0015;--tabl:#4b0015;--tabr:#4b0015}
header#hdr.nv9 .nv9-mid{background:#4b0015!important}
.nv9-pill{background:#4b0015!important;border-color:rgba(255,255,255,.16)!important}
.nv9-burger{background:#4b0015!important}
@media (max-width:1060px){header#hdr.nv9 .nv9-mid.open{background:#4b0015!important}}
header#hdr.nv9 .nv9-mid>a.lk,header#hdr.nv9 .nv9-mid>.nv9-g{border-left:1px solid rgba(255,255,255,.14)}
header#hdr.nv9 .nv9-mid>a.lk:first-child,header#hdr.nv9 .nv9-mid>.nv9-g:first-child{border-left:0}
header#hdr.nv9 .nv9-mid>*:last-child{border-right:0}
header#hdr.nv9 .nv9-btn.on::after,header#hdr.nv9 .nv9-mid>a.lk.on::after{background:#ffc000!important}

/* ---- Update 12f: the strip under the menu matches the page (no white band, no lavender/blue tint) ---- */
html,body,main,#main{background-color:#f9f9fa!important}
#gallery,#gallery.gx-sec,.gx-sec,.gx-sec.first{background:none!important;background-image:none!important;border:0!important;box-shadow:none!important}
.gx-sec::before,.gx-sec::after,#gallery::before,#gallery::after{display:none!important}
.gx-sec.first{padding-top:112px}
.gx-k{color:var(--os-red)!important;background:var(--os-pink)!important;border:1px solid var(--os-pink2)!important}
.gx-grad{background:none!important;-webkit-text-fill-color:var(--os-red)!important;color:var(--os-red)!important}
.gx-pill.on{background:var(--os-red)!important;border-color:var(--os-red)!important;color:#fff!important}
header#hdr.nv9,header#hdr.nv9 .nv9-bar{background:transparent!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
header#hdr.nv9 .nv9-bar{--tab:#f9f9fa}

/* ---- Update 12g: Open Lab and Work project lists — always 3 equal columns, as many rows as there are projects ---- */
.lb8-grid,.wd-grid{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;grid-auto-flow:row!important;align-items:stretch;gap:20px!important;max-height:none!important;overflow:visible!important}
.lb8-grid>*,.wd-grid>*{min-width:0;grid-column:auto!important;height:auto}
.wd-c.feat{grid-column:auto!important}
.wd-c.feat .wd-img{aspect-ratio:auto}
@media (max-width:1000px){.lb8-grid,.wd-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media (max-width:620px){.lb8-grid,.wd-grid{grid-template-columns:1fr!important;gap:14px!important}}

/* ---- Update 12h: no white strip above the page — one soft pink-cream surface + dot grid from the very top ---- */
html,body,main,#main,body.ajh-on,body.v5,.v5shell{background-color:#fbf4f5!important}
body,body.ajh-on,body.v5,.v5shell{background-image:radial-gradient(rgba(122,10,31,.10) 1px,transparent 1.2px)!important;background-size:22px 22px!important;background-position:0 0!important}
header#hdr.nv9,header#hdr.nv9 .nv9-bar{background:transparent!important}
header#hdr.nv9 .nv9-bar{--tab:#fbf4f5}
header#hdr.nv9 .nv9-mid>*:first-child{border-left:0!important;box-shadow:none!important}
header#hdr.nv9 .nv9-mid>*:first-child::before{border-left:0!important}

/* ---- Update 12i: the purple/blue glows were separate layers (.gx-bg in the gallery, body::after) — removed so top and bottom are one colour ---- */
.gx-bg,.gx-sec .gx-bg,#gallery .gx-bg{background:none!important;background-image:none!important;display:none!important}
body::after,body.v5::after,body.ajh-on::after{background:none!important;background-image:none!important;display:none!important}
body::before{background-image:none!important}

/* ---- Update 12j: footer = maroon curved block with repeating curve lines + interactive links; the rest of the site is clean: no divider lines, coloured soft boxes ---- */
.ajf{background-color:#4b0015!important;background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='90' viewBox='0 0 240 90'><path d='M0 45 C40 5 80 5 120 45 S200 85 240 45' fill='none' stroke='%23ffc000' stroke-opacity='.16' stroke-width='1.2'/><path d='M0 65 C40 25 80 25 120 65 S200 105 240 65' fill='none' stroke='%23ffffff' stroke-opacity='.08' stroke-width='1'/></svg>"),radial-gradient(rgba(255,255,255,.07) 1px,transparent 1.2px)!important;background-size:240px 90px,20px 20px!important;position:relative}
.ajf a{transition:color .2s ease,transform .2s ease,background .2s ease}
.ajf a:hover{color:#ffc000!important;transform:translateX(4px)}
.ajf li,.ajf .ajf-col,.ajf div{border-color:transparent!important}
.ajf hr{display:none}
.ajf .ajf-col,.ajf [class*="col"]{transition:background .25s ease,transform .25s ease;border-radius:16px}
.ajf [class*="col"]:hover{background:rgba(255,255,255,.06)}
/* clean pages: dividers and hairlines off */
main hr,main [class*="divider"],main [class*="-sep"],main .sep,.shead::before{display:none!important}
main section h2,main section h3,main .shead,main li,main dd,main dt,main .row{border-top:0!important;border-bottom:0!important}
main .pub,main .wd-c,main .lb8-grid>*,main .case,main .stop,main .card,main article{border:0!important;box-shadow:0 1px 2px rgba(75,0,21,.05),0 12px 26px -16px rgba(75,0,21,.25)!important}
/* colourful soft boxes, four tints in rotation */
main .pubs>.pub:nth-child(4n+1),main .wd-grid>*:nth-child(4n+1),main .lb8-grid>*:nth-child(4n+1){background:#fff1f2!important}
main .pubs>.pub:nth-child(4n+2),main .wd-grid>*:nth-child(4n+2),main .lb8-grid>*:nth-child(4n+2){background:#fff7dd!important}
main .pubs>.pub:nth-child(4n+3),main .wd-grid>*:nth-child(4n+3),main .lb8-grid>*:nth-child(4n+3){background:#eaf8f1!important}
main .pubs>.pub:nth-child(4n+4),main .wd-grid>*:nth-child(4n+4),main .lb8-grid>*:nth-child(4n+4){background:#f2edff!important}
main .pub,main .wd-c,main .lb8-grid>*{transition:transform .22s ease,box-shadow .22s ease}
main .pub:hover,main .wd-c:hover,main .lb8-grid>*:hover{transform:translateY(-4px);box-shadow:0 22px 36px -20px rgba(75,0,21,.4)!important}
