/* ==========================================================================
   Wadhwani Electronics Laboratory - IIT Bombay
   Core stylesheet
   ========================================================================== */

/* ---------- Design tokens ---------- */
:root{
  --primary:#0c53a5;
  --primary-dark:#083c76;
  --primary-light:#e8f1fb;
  --primary-mid:#d9e9fc;
  --secondary:#da212f;
  --secondary-dark:#ad1926;
  --ink:#060b23;
  --ink-soft:#1b2340;
  --body:#444444;
  --muted:#6b7280;
  --line:#dcdfe4;
  --line-soft:#edf0f9;
  --bg:#ffffff;
  --bg-alt:#f6f8fc;
  --bg-dark:#060b23;
  --white:#ffffff;
  --accent:#00b0f0;

  --radius:14px;
  --radius-sm:8px;
  --radius-lg:22px;
  --shadow-sm:0 1px 2px rgba(6,11,35,.06),0 2px 8px rgba(6,11,35,.05);
  --shadow:0 4px 12px rgba(6,11,35,.07),0 12px 32px rgba(6,11,35,.07);
  --shadow-lg:0 18px 50px rgba(6,11,35,.16);
  --wrap:1240px;
  --header-h:76px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --font:"Barlow","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 20px)}
body{
  margin:0;font-family:var(--font);font-size:17px;line-height:1.65;
  color:var(--body);background:var(--bg);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--primary);text-decoration:none;transition:color .18s var(--ease)}
a:hover{color:var(--primary-dark)}
button{font-family:inherit}
ul,ol{padding-left:1.15rem}
h1,h2,h3,h4,h5{
  margin:0 0 .5em;color:var(--ink);font-weight:700;line-height:1.15;
  letter-spacing:-.015em;
}
h1{font-size:clamp(2.1rem,4.6vw,3.4rem)}
h2{font-size:clamp(1.7rem,3.2vw,2.5rem)}
h3{font-size:clamp(1.2rem,2vw,1.5rem)}
h4{font-size:1.1rem}
p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}
hr{border:0;border-top:1px solid var(--line);margin:2.5rem 0}
::selection{background:var(--primary);color:#fff}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:4px}
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:999;background:var(--primary);color:#fff;
  padding:.7rem 1.2rem;border-radius:0 0 var(--radius-sm) 0;font-weight:600;
}
.skip-link:focus{left:0;color:#fff}
.visually-hidden{
  position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
  white-space:nowrap;
}

/* ---------- Layout helpers ---------- */
.wrap{width:min(100% - 2.6rem,var(--wrap));margin-inline:auto}
.wrap-narrow{width:min(100% - 2.6rem,900px);margin-inline:auto}
.section{padding:clamp(3.4rem,7vw,6rem) 0}
.section--tight{padding:clamp(2.4rem,4.5vw,3.6rem) 0}
.section--alt{background:var(--bg-alt)}
.section--dark{background:var(--bg-dark);color:#c8cde0}
.section--dark h2,.section--dark h3,.section--dark h4{color:#fff}
/* A card keeps its own light background inside a dark section, so its
   heading must not take the section's white heading colour - that made the
   titles on the home page invisible, white on white. */
.section--dark .card h3,.section--dark .card h4,
.section--dark .lcard h3,.section--dark .lcard h4{color:var(--ink)}
.grid{display:grid;gap:1.6rem}
.g2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.g3{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.g4{grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.center{text-align:center}
.mt0{margin-top:0}
.mt2{margin-top:2rem}

/* ---------- Section headings ---------- */
.eyebrow{
  display:inline-flex;align-items:center;gap:.55rem;
  font-size:.78rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--primary);margin-bottom:.85rem;
}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--secondary);border-radius:2px}
.section--dark .eyebrow{color:var(--accent)}
.section-head{max-width:760px;margin-bottom:2.6rem}
.section-head.center{margin-inline:auto}
.section-head p{color:var(--muted);font-size:1.06rem;margin-bottom:0}
.section--dark .section-head p{color:#a8b0cc}
.lead{font-size:1.12rem;color:var(--ink-soft)}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  padding:.78rem 1.6rem;border-radius:999px;border:2px solid transparent;
  font-weight:600;font-size:.95rem;letter-spacing:.02em;cursor:pointer;
  transition:all .2s var(--ease);white-space:nowrap;
}
.btn svg{width:1em;height:1em;flex:none}
.btn--primary{background:var(--primary);border-color:var(--primary);color:#fff}
.btn--primary:hover{background:var(--primary-dark);border-color:var(--primary-dark);color:#fff;transform:translateY(-2px);box-shadow:0 10px 24px rgba(12,83,165,.28)}
.btn--red{background:var(--secondary);border-color:var(--secondary);color:#fff}
.btn--red:hover{background:var(--secondary-dark);border-color:var(--secondary-dark);color:#fff;transform:translateY(-2px);box-shadow:0 10px 24px rgba(218,33,47,.26)}
.btn--ghost{border-color:rgba(255,255,255,.55);color:#fff;background:transparent}
.btn--ghost:hover{background:#fff;border-color:#fff;color:var(--ink);transform:translateY(-2px)}
.btn--outline{border-color:var(--line);color:var(--ink);background:#fff}
.btn--outline:hover{border-color:var(--primary);color:var(--primary);transform:translateY(-2px)}
.btn--sm{padding:.5rem 1.1rem;font-size:.86rem}
.btn-row{display:flex;flex-wrap:wrap;gap:.85rem;align-items:center}

.arrow-link{display:inline-flex;align-items:center;gap:.45rem;font-weight:600;font-size:.92rem;text-transform:uppercase;letter-spacing:.06em}
.arrow-link::after{content:"\2192";transition:transform .2s var(--ease)}
.arrow-link:hover::after{transform:translateX(4px)}

/* ==========================================================================
   Header
   ========================================================================== */
.site-header{position:sticky;top:0;z-index:200;background:#fff;border-bottom:1px solid var(--line);transition:box-shadow .25s var(--ease)}
.site-header.is-stuck{box-shadow:0 6px 24px rgba(6,11,35,.09)}
.header__inner{
  display:flex;align-items:center;gap:1.4rem;height:var(--header-h);flex-wrap:nowrap;
  width:min(100% - 2rem,1440px);
}

.brand{display:flex;align-items:center;flex:none}
.brand img{height:52px;width:auto}

/* nav */
.nav{margin-left:auto;display:flex;align-items:center;gap:.15rem}
.nav__item{position:relative}
.nav__link{
  display:flex;align-items:center;gap:.3rem;padding:.55rem .68rem;border-radius:var(--radius-sm);
  font-size:.9rem;font-weight:600;color:var(--ink-soft);white-space:nowrap;position:relative;
  transition:color .18s var(--ease),background .18s var(--ease);background:none;border:0;cursor:pointer;
}
.nav__link:hover,.nav__item:focus-within>.nav__link{color:var(--primary);background:var(--primary-light)}
.nav__link.is-active{color:var(--primary)}
.nav__link.is-active::after{
  content:"";position:absolute;left:.68rem;right:.68rem;bottom:-.35rem;height:3px;
  background:var(--secondary);border-radius:3px;
}
.nav__caret{width:9px;height:9px;flex:none;transition:transform .2s var(--ease);opacity:.6}
.nav__item:hover .nav__caret{transform:rotate(180deg)}

.dropdown{
  position:absolute;top:calc(100% + 12px);left:50%;translate:-50% 0;min-width:264px;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow-lg);padding:.5rem;opacity:0;visibility:hidden;
  transform:translateY(8px);transition:all .2s var(--ease);
}
.dropdown::before{content:"";position:absolute;top:-12px;left:0;right:0;height:12px}
.nav__item:hover .dropdown,.nav__item:focus-within .dropdown{opacity:1;visibility:visible;transform:translateY(0)}
.dropdown a{
  display:block;padding:.55rem .8rem;border-radius:var(--radius-sm);
  font-size:.89rem;font-weight:500;color:var(--ink-soft);
}
.dropdown a small{display:block;font-size:.76rem;color:var(--muted);font-weight:400;margin-top:.1rem}
.dropdown a:hover{background:var(--primary-light);color:var(--primary)}
.dropdown a.is-active{background:var(--primary-light);color:var(--primary);font-weight:600}
.dropdown__sep{height:1px;background:var(--line-soft);margin:.35rem .5rem}

.header__cta{flex:none}
.nav__mobile-cta{display:none}
.nav-toggle{
  display:none;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;
  margin-left:auto;background:none;border:1px solid var(--line);border-radius:10px;cursor:pointer;
  align-items:center;
}
.nav-toggle span{display:block;width:20px;height:2px;background:var(--ink);border-radius:2px;transition:all .25s var(--ease)}
.nav-toggle.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle.is-open span:nth-child(2){opacity:0}
.nav-toggle.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.nav-scrim{
  position:fixed;inset:0;background:rgba(6,11,35,.45);z-index:190;opacity:0;visibility:hidden;
  transition:opacity .3s var(--ease);
}
.nav-scrim.is-open{opacity:1;visibility:visible}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{position:relative;background:var(--bg-dark);color:#fff;overflow:hidden;isolation:isolate}
.hero__bg{position:absolute;inset:0;z-index:-2}
.hero__bg img{width:100%;height:100%;object-fit:cover;opacity:.34}
.hero::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(120% 90% at 78% 15%,rgba(12,83,165,.55) 0%,transparent 62%),
    linear-gradient(105deg,rgba(6,11,35,.97) 0%,rgba(6,11,35,.86) 45%,rgba(6,11,35,.58) 100%);
}
.hero__inner{position:relative;padding:clamp(4rem,10vw,7.5rem) 0 clamp(3.4rem,8vw,6rem)}
.hero h1{
  color:#fff;font-size:clamp(2.5rem,7vw,5.2rem);font-weight:800;line-height:.98;
  letter-spacing:-.03em;margin-bottom:1.1rem;max-width:16ch;
}
.hero h1 em{font-style:normal;color:var(--accent);display:block}
.hero__sub{font-size:clamp(1.02rem,1.7vw,1.22rem);color:#b9c2e0;max-width:62ch;margin-bottom:2rem}
.hero__sub strong{color:#fff;font-weight:600}
.hero__meta{display:flex;flex-wrap:wrap;gap:2.2rem;margin-top:3.2rem;padding-top:2.2rem;border-top:1px solid rgba(255,255,255,.14)}
.hero__meta div{min-width:110px}
.hero__meta b{display:block;font-size:clamp(1.7rem,3vw,2.4rem);color:#fff;font-weight:800;line-height:1;letter-spacing:-.02em}
.hero__meta span{font-size:.82rem;color:#98a2c4;text-transform:uppercase;letter-spacing:.1em;font-weight:600}

/* compact page hero */
.page-hero{position:relative;background:var(--bg-dark);color:#fff;overflow:hidden;isolation:isolate}
.page-hero__bg{position:absolute;inset:0;z-index:-2}
.page-hero__bg img{width:100%;height:100%;object-fit:cover;opacity:.24}
.page-hero::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg,rgba(6,11,35,.96) 10%,rgba(12,83,165,.72) 120%);
}
.page-hero__inner{padding:clamp(2.8rem,6vw,4.6rem) 0 clamp(2.4rem,5vw,3.6rem)}
.page-hero h1{color:#fff;margin-bottom:.6rem;font-weight:800}
.page-hero p{color:#b9c2e0;max-width:70ch;font-size:1.05rem;margin-bottom:0}
.crumbs{display:flex;flex-wrap:wrap;gap:.45rem;align-items:center;font-size:.82rem;color:#8d97bb;margin-bottom:1.1rem}
.crumbs a{color:#b9c2e0}
.crumbs a:hover{color:#fff}
.crumbs span{opacity:.5}

/* ==========================================================================
   Cards
   ========================================================================== */
.card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;display:flex;flex-direction:column;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s var(--ease);
}
.card:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:var(--primary-mid)}
.card__media{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--bg-alt)}
.card__media img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.card:hover .card__media img{transform:scale(1.05)}
.card__media--contain{aspect-ratio:16/11;background:linear-gradient(160deg,#f2f6fc,#e6edf8);padding:1.2rem}
.card__media--contain img{object-fit:contain}
.card__body{padding:1.35rem 1.4rem 1.5rem;flex:1;display:flex;flex-direction:column}
.card__body h3{margin-bottom:.45rem;font-size:1.15rem}
.card__body p{font-size:.94rem;color:var(--muted);margin-bottom:1rem}
.card__body .arrow-link{margin-top:auto}
.card__tag{
  display:inline-block;padding:.22rem .6rem;border-radius:999px;background:var(--primary-light);
  color:var(--primary);font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  margin-bottom:.7rem;
}
.card__tag--red{background:#fdeaec;color:var(--secondary)}
.card__meta{font-size:.8rem;color:var(--muted);font-weight:600;margin-bottom:.6rem}

/* link card (no image) */
.lcard{
  display:block;background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:1.5rem 1.5rem 1.4rem;position:relative;overflow:hidden;color:inherit;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s var(--ease);
}
.lcard::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--primary);transform:scaleY(0);transform-origin:top;transition:transform .28s var(--ease)}
.lcard:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--primary-mid);color:inherit}
.lcard:hover::before{transform:scaleY(1)}
.lcard:hover h3{color:var(--primary)}
.lcard h3{font-size:1.1rem;margin-bottom:.4rem;transition:color .2s var(--ease)}
.lcard p{font-size:.92rem;color:var(--muted);margin-bottom:0}
.lcard__icon{
  width:46px;height:46px;border-radius:12px;background:var(--primary-light);color:var(--primary);
  display:grid;place-items:center;margin-bottom:1rem;
}
.lcard__icon svg{width:22px;height:22px}
.lcard--red .lcard__icon{background:#fdeaec;color:var(--secondary)}
.lcard--red::before{background:var(--secondary)}
.lcard--red:hover h3{color:var(--secondary)}

/* stat band */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1.4rem}
.stat{text-align:center;padding:1.4rem .8rem;border-radius:var(--radius);background:#fff;border:1px solid var(--line)}
.stat b{display:block;font-size:clamp(2rem,4vw,2.8rem);font-weight:800;color:var(--primary);line-height:1;letter-spacing:-.03em}
.stat span{display:block;margin-top:.5rem;font-size:.84rem;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
.section--dark .stat{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.12)}
.section--dark .stat b{color:#fff}
.section--dark .stat span{color:#9aa3c4}

/* split feature */
.split{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:clamp(2rem,5vw,3.6rem);align-items:center}
.split--reverse .split__media{order:2}
.split__media{position:relative;isolation:isolate}
.split__media img{border-radius:var(--radius-lg);box-shadow:var(--shadow);width:100%}
.split__media::after{
  content:"";position:absolute;inset:auto -14px -14px auto;width:58%;height:58%;
  border:2px solid var(--primary-mid);border-radius:var(--radius-lg);z-index:-1;
}
.split__body h2{margin-bottom:1rem}

/* people */
.person{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s var(--ease);
  display:flex;flex-direction:column;
}
.person:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--primary-mid)}
.person__photo{aspect-ratio:1/1;background:linear-gradient(160deg,#eef3fa,#dde7f5);overflow:hidden}
.person__photo img{width:100%;height:100%;object-fit:cover;object-position:center top}
.person__initials{
  width:100%;height:100%;display:grid;place-items:center;font-size:2.6rem;font-weight:800;
  color:var(--primary);letter-spacing:.02em;
}
.person.is-hidden{display:none}

/* ==========================================================================
   WEL Inventory browser
   ========================================================================== */
.inv-controls{
  display:grid;gap:.8rem;margin:1.4rem 0 1rem;
  grid-template-columns:minmax(240px,2fr) minmax(150px,1fr) minmax(150px,1fr);
}
.inv-controls select{
  border:1px solid var(--line);border-radius:999px;padding:.78rem 1rem;background:#fff;
  font-family:inherit;font-size:.92rem;color:var(--ink);cursor:pointer;
}
.inv-controls select:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 4px var(--primary-light)}
.inv-meta{
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  font-size:.86rem;color:var(--muted);margin-bottom:.9rem;
}

.inv-table{min-width:720px}
.inv-table td:first-child{max-width:340px}
.inv-desc{display:block;font-size:.85rem;color:var(--muted);font-weight:400;margin-top:.15rem}
.inv-link{display:inline-block;margin-top:.25rem;font-size:.8rem;font-weight:600}
.inv-none{color:var(--muted)}
.inv-stock{
  display:inline-block;padding:.2rem .6rem;border-radius:999px;font-size:.8rem;font-weight:700;
  white-space:nowrap;
}
.inv-stock--ok{background:#e4f6ec;color:#1a7a45}
.inv-stock--low{background:#fff4d6;color:#8a6300}
.inv-stock--out{background:#fdeaec;color:var(--secondary-dark)}
.inv-add{display:flex;gap:.4rem;align-items:center}
.inv-add input{
  width:64px;padding:.4rem .5rem;border:1px solid var(--line);border-radius:var(--radius-sm);
  font-family:inherit;font-size:.88rem;text-align:center;
}
.inv-add input:focus{outline:none;border-color:var(--primary)}

.inv-cart{
  margin-top:1.8rem;background:#fff;border:1px solid var(--line);border-left:4px solid var(--secondary);
  border-radius:var(--radius);padding:1.4rem 1.5rem;
}
.inv-cart h3{display:flex;align-items:center;gap:.6rem;font-size:1.1rem;margin-bottom:1rem}
.inv-badge{
  padding:.1rem .55rem;border-radius:999px;background:var(--secondary);color:#fff;
  font-size:.78rem;font-weight:700;
}
.inv-cart-list{list-style:none;padding:0;margin:0 0 1.2rem;display:grid;gap:.4rem}
.inv-cart-list li{
  display:flex;align-items:center;gap:.7rem;padding:.5rem .75rem;background:var(--bg-alt);
  border-radius:var(--radius-sm);font-size:.9rem;
}
.inv-cart-list li span{flex:1;min-width:0}
.inv-cart-list li b{color:var(--primary);font-variant-numeric:tabular-nums}
.inv-remove{
  border:0;background:none;color:var(--muted);cursor:pointer;font-size:1.15rem;line-height:1;
  padding:0 .2rem;border-radius:4px;
}
.inv-remove:hover{color:var(--secondary)}
.inv-fields{display:grid;gap:.8rem;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));margin-bottom:1.2rem}
.inv-fields label{display:flex;flex-direction:column;gap:.35rem;font-size:.85rem;font-weight:600;color:var(--ink)}
.inv-fields input,.inv-fields textarea{
  border:1px solid var(--line);border-radius:var(--radius-sm);padding:.6rem .8rem;
  font-family:inherit;font-size:.92rem;font-weight:400;color:var(--ink);resize:vertical;
}
.inv-fields input:focus,.inv-fields textarea:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-light)}
.inv-copied{margin:.9rem 0 0;font-size:.86rem;font-weight:600;color:#1a7a45}
.inv-foot{margin:1rem 0 0;font-size:.83rem;color:var(--muted)}

@media (max-width:720px){
  .inv-controls{grid-template-columns:1fr}
  .inv-table{min-width:0}
  .inv-table thead{display:none}
  .inv-table tbody tr{display:block;border-top:1px solid var(--line);padding:.7rem 0}
  .inv-table tbody td{display:flex;gap:.8rem;border:0;padding:.3rem 1rem}
  .inv-table tbody td::before{
    content:attr(data-label);flex:none;width:88px;color:var(--muted);font-size:.8rem;
    font-weight:600;padding-top:.1rem;
  }
  .inv-table td:first-child{max-width:none}
}

/* name-only cards - the homepage team preview, which carries no photographs */
.name-cards{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.name-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:1.2rem 1.3rem;border-left:3px solid var(--primary);
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s var(--ease);
}
.name-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-sm);border-color:var(--primary-mid);border-left-color:var(--primary)}
.name-card h4{margin:0 0 .2rem;font-size:1rem;line-height:1.3}
.name-card .person__role{margin:0}

/* ---------- staff grid ----------
   Every staff member sits in one continuous grid rather than a headed section
   per team. A team of one used to cost a heading plus a row with three empty
   slots; now the team travels on the card itself, so nothing is wasted and the
   grouping is still readable at a glance.

   Sizing is deliberately left to .g4, the same track and gap the research
   assistants use, so a staff card and an RA card are the same box. */
.filters .filter em{font-style:normal;opacity:.6;font-size:.8em;margin-left:.15rem}

/* ---------- flip cards (staff and research assistants) ----------
   Front carries photo, name, role and contact - so nothing you need to reach
   someone is ever hidden behind an interaction. The back carries the bio.
   Flips on hover, on keyboard focus, and on tap. */
.flipcard{
  perspective:1400px;height:330px;cursor:pointer;background:none;border:0;padding:0;
  font-family:inherit;text-align:left;width:100%;display:block;
}
.flipcard.is-hidden{display:none}
.flipcard__inner{
  position:relative;width:100%;height:100%;transform-style:preserve-3d;
  transition:transform .65s var(--ease),box-shadow .3s var(--ease);
}
.flipcard:hover .flipcard__inner,
.flipcard:focus-visible .flipcard__inner,
.flipcard.is-flipped .flipcard__inner{transform:rotateY(180deg)}
.flipcard__face{
  position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;
  border:1px solid var(--line);border-radius:var(--radius);background:#fff;overflow:hidden;
  display:flex;flex-direction:column;
}
/* The email and LinkedIn links live on the back. backface-visibility hides a
   face visually but leaves its links in the tab order, so a keyboard user
   would otherwise tab into links they cannot see. Toggling visibility takes
   the back out of the tab order and the accessibility tree until the card is
   turned.

   No transition on this: a delayed visibility swap only lands if the browser
   actually runs the transition, and if it does not the back stays hidden for
   good and its links become unreachable. Switching instantly is safe because
   backface-visibility still hides the back until it has turned past edge-on,
   so there is no flash. The front is left visible throughout for the same
   reason - it carries no links, so nothing is gained by hiding it. */
.flipcard__back{visibility:hidden}
.flipcard:hover .flipcard__back,
.flipcard:focus-within .flipcard__back,
.flipcard.is-flipped .flipcard__back{visibility:visible}
.flipcard:hover .flipcard__face,
.flipcard.is-flipped .flipcard__face{box-shadow:var(--shadow);border-color:var(--primary-mid)}

/* The photo takes whatever height the name and role do not, so the front is
   always full - no dead band under the text however tall the card is. */
.flipcard__photo{flex:1;min-height:0;background:linear-gradient(160deg,#eef3fa,#dde7f5);overflow:hidden}
.flipcard__photo img{width:100%;height:100%;object-fit:cover;object-position:center 28%}
.flipcard__id{padding:.75rem .95rem .85rem;display:flex;flex-direction:column;flex:none}
.flipcard__id h4{margin:0 0 .1rem;font-size:.95rem;line-height:1.28}
.flipcard__id .person__role{margin-bottom:0;font-size:.78rem}
.flipcard__contact{
  font-size:.78rem;line-height:1.6;margin-top:auto;border-top:1px solid var(--line-soft);
  padding-top:.55rem;word-break:break-word;color:var(--muted);
}
.flipcard__contact a{color:var(--primary);font-weight:500}
.flipcard__hint{
  position:absolute;right:.6rem;top:.6rem;width:22px;height:22px;border-radius:50%;
  background:rgba(6,11,35,.62);color:#fff;display:grid;place-items:center;font-size:.7rem;
  font-weight:700;pointer-events:none;
}
/* which team this person is on, carried on the card instead of a section heading */
.flipcard__team{
  position:absolute;left:.6rem;top:.6rem;padding:.18rem .5rem;border-radius:999px;
  background:rgba(6,11,35,.72);color:#fff;font-size:.66rem;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;pointer-events:none;
}
.flipcard__team-back{
  display:inline-block;margin-bottom:.6rem;padding:.14rem .5rem;border-radius:999px;
  background:var(--primary-light);color:var(--primary);font-size:.66rem;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;
}

.flipcard__back{
  transform:rotateY(180deg);padding:1rem 1.1rem;overflow-y:auto;
  background:linear-gradient(165deg,#fff,#f4f8fd);
}
.flipcard__back h4{margin:0 0 .1rem;font-size:.92rem}
.flipcard__back .person__role{margin-bottom:.55rem;font-size:.76rem}
.flipcard__back p{font-size:.79rem;line-height:1.5;color:var(--body);margin:0}
.flipcard__back .flipcard__contact{
  margin-top:.85rem;padding-top:.7rem;border-top:1px solid var(--line);font-size:.78rem;
}
.flipcard__back .flipcard__contact div{display:flex;gap:.45rem;align-items:flex-start;margin-bottom:.3rem}
.flipcard__back .flipcard__contact svg{width:13px;height:13px;flex:none;margin-top:.28rem;color:var(--muted)}
/* LinkedIn as an icon button rather than another line of text */
.flipcard__social{margin-top:.5rem}
.social-icon{
  display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;
  background:var(--primary-light);color:var(--primary);transition:all .2s var(--ease);
}
.social-icon:hover{background:var(--primary);color:#fff;transform:translateY(-1px)}
.flipcard__back .flipcard__contact .flipcard__social svg{
  width:15px;height:15px;margin-top:0;color:currentColor;
}
.flipcard__back::-webkit-scrollbar{width:5px}
.flipcard__back::-webkit-scrollbar-thumb{background:var(--line);border-radius:99px}

@media (hover:none){
  .flipcard:hover .flipcard__inner{transform:none}
  .flipcard.is-flipped .flipcard__inner{transform:rotateY(180deg)}
}
@media (prefers-reduced-motion:reduce){
  .flipcard__inner{transition:none}
}
.person__body{padding:1.1rem 1.2rem 1.3rem;flex:1;display:flex;flex-direction:column}
.person__body h4{margin-bottom:.15rem;font-size:1.03rem;line-height:1.3}
.person__role{font-size:.82rem;font-weight:600;color:var(--primary);margin-bottom:.6rem;display:block}
.person__body p{font-size:.88rem;color:var(--muted);margin-bottom:.7rem}
.person__contact{font-size:.82rem;line-height:1.7;border-top:1px solid var(--line-soft);padding-top:.7rem;word-break:break-word;margin-top:auto}
.person__contact a{font-weight:500}
.person__contact div{display:flex;gap:.45rem;align-items:flex-start}
.person__contact svg{width:14px;height:14px;flex:none;margin-top:.32rem;color:var(--muted)}

/* tables */
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);background:#fff}
table{width:100%;border-collapse:collapse;font-size:.93rem;min-width:520px}
thead th{
  background:var(--ink);color:#fff;text-align:left;padding:.85rem 1rem;font-weight:600;
  font-size:.8rem;letter-spacing:.07em;text-transform:uppercase;white-space:nowrap;
}
tbody td{padding:.8rem 1rem;border-top:1px solid var(--line-soft);vertical-align:top}
tbody tr:hover{background:var(--bg-alt)}
tbody td:first-child{font-weight:600;color:var(--ink)}

/* spec list */
.specs{list-style:none;padding:0;margin:0;font-size:.9rem}
.specs li{display:flex;gap:.6rem;padding:.42rem 0;border-top:1px solid var(--line-soft)}
.specs li:first-child{border-top:0}
.specs b{flex:none;min-width:46%;color:var(--muted);font-weight:600}
.specs span{color:var(--ink);font-weight:500}

/* notes / callouts */
.note{
  background:var(--primary-light);border-left:4px solid var(--primary);
  border-radius:0 var(--radius-sm) var(--radius-sm) 0;padding:1.1rem 1.3rem;font-size:.95rem;
}
.note--red{background:#fdeaec;border-left-color:var(--secondary)}
.note strong{color:var(--ink)}

/* tabs / filters */
.filters{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:2rem}
.filter{
  padding:.5rem 1.1rem;border-radius:999px;border:1px solid var(--line);background:#fff;
  font-size:.87rem;font-weight:600;color:var(--ink-soft);cursor:pointer;transition:all .2s var(--ease);
}
.filter:hover{border-color:var(--primary);color:var(--primary)}
.filter.is-active{background:var(--primary);border-color:var(--primary);color:#fff}

/* gallery */
.gallery{columns:4 260px;column-gap:1rem}
.gallery figure{margin:0 0 1rem;break-inside:avoid;position:relative;border-radius:var(--radius-sm);overflow:hidden;cursor:zoom-in;background:var(--bg-alt)}
.gallery img{width:100%;transition:transform .5s var(--ease)}
.gallery figure::after{
  content:attr(data-cat);position:absolute;left:.7rem;bottom:.7rem;padding:.25rem .65rem;
  border-radius:999px;background:rgba(6,11,35,.78);color:#fff;font-size:.72rem;font-weight:600;
  opacity:0;transform:translateY(6px);transition:all .25s var(--ease);
}
.gallery figure:hover img{transform:scale(1.06)}
.gallery figure:hover::after{opacity:1;transform:translateY(0)}
.gallery figure.is-hidden{display:none}

.lightbox{
  position:fixed;inset:0;z-index:500;background:rgba(6,11,35,.94);display:none;
  align-items:center;justify-content:center;padding:2rem;
}
.lightbox.is-open{display:flex}
.lightbox img{max-width:min(1100px,92vw);max-height:84vh;border-radius:var(--radius-sm);object-fit:contain;box-shadow:var(--shadow-lg)}
.lightbox__close,.lightbox__nav{
  position:absolute;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);
  color:#fff;width:46px;height:46px;border-radius:50%;cursor:pointer;font-size:1.3rem;
  display:grid;place-items:center;transition:background .2s var(--ease);line-height:1;
}
.lightbox__close:hover,.lightbox__nav:hover{background:rgba(255,255,255,.26)}
.lightbox__close{top:1.6rem;right:1.6rem}
.lightbox__nav--prev{left:1.6rem;top:50%;translate:0 -50%}
.lightbox__nav--next{right:1.6rem;top:50%;translate:0 -50%}
.lightbox__caption{position:absolute;bottom:1.5rem;left:50%;translate:-50% 0;color:#c8cde0;font-size:.88rem}

/* slider */
.slider{position:relative}
.slider__track{display:flex;gap:1.4rem;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:1rem;scrollbar-width:thin}
.slider__track>*{flex:0 0 min(330px,80vw);scroll-snap-align:start}
.slider__track::-webkit-scrollbar{height:6px}
.slider__track::-webkit-scrollbar-thumb{background:var(--line);border-radius:99px}
.slider__btns{display:flex;gap:.5rem;margin-top:.4rem}
.slider__btn{
  width:42px;height:42px;border-radius:50%;border:1px solid var(--line);background:#fff;
  cursor:pointer;display:grid;place-items:center;color:var(--ink);transition:all .2s var(--ease);
}
.slider__btn:hover{background:var(--primary);border-color:var(--primary);color:#fff}
.slider__btn svg{width:18px;height:18px}

/* search box */
.searchbox{position:relative;margin-bottom:1.6rem;max-width:460px}
.searchbox input{
  width:100%;padding:.8rem 1rem .8rem 2.8rem;border:1px solid var(--line);border-radius:999px;
  font-size:.95rem;font-family:inherit;color:var(--ink);background:#fff;transition:all .2s var(--ease);
}
.searchbox input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 4px var(--primary-light)}
.searchbox svg{position:absolute;left:1rem;top:50%;translate:0 -50%;width:17px;height:17px;color:var(--muted)}
.no-results{padding:2rem;text-align:center;color:var(--muted);display:none}
.no-results.is-shown{display:block}

/* accordion */
.acc{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:#fff}
.acc+.acc{margin-top:.8rem}
.acc__head{
  width:100%;display:flex;justify-content:space-between;align-items:center;gap:1rem;
  padding:1.05rem 1.3rem;background:none;border:0;cursor:pointer;text-align:left;
  font-size:1.02rem;font-weight:600;color:var(--ink);font-family:inherit;
}
.acc__head:hover{background:var(--bg-alt);color:var(--primary)}
.acc__head .ind{
  flex:none;width:26px;height:26px;border-radius:50%;background:var(--primary-light);color:var(--primary);
  display:grid;place-items:center;font-size:1.1rem;line-height:1;transition:transform .25s var(--ease);
}
.acc.is-open .acc__head .ind{transform:rotate(45deg)}
.acc__body{display:none;padding:1.1rem 1.3rem 1.4rem;border-top:1px solid var(--line-soft)}
.acc.is-open .acc__body{display:block}

/* course list */
.course{
  display:flex;gap:1.1rem;align-items:flex-start;padding:1.2rem 1.3rem;background:#fff;
  border:1px solid var(--line);border-radius:var(--radius);transition:all .25s var(--ease);
  color:inherit;text-decoration:none;
}
.course:hover{border-color:var(--primary-mid);box-shadow:var(--shadow-sm);transform:translateX(3px);color:inherit}
.course:hover h4{color:var(--primary)}
.course h4{transition:color .2s var(--ease)}
.course .arrow-link{margin-top:.6rem;font-size:.8rem}

/* publications */
.pub-year{
  font-size:1.05rem;font-weight:800;color:var(--primary);letter-spacing:.04em;
  margin:2.2rem 0 1rem;padding-bottom:.5rem;border-bottom:2px solid var(--primary-mid);
}
.pub-list>.pub-year:first-child{margin-top:0}
.pub{
  padding:1.05rem 1.2rem;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius);margin-bottom:.7rem;transition:all .25s var(--ease);
}
.pub:hover{border-color:var(--primary-mid);box-shadow:var(--shadow-sm)}
.pub-title{font-size:1rem;font-weight:600;color:var(--ink);line-height:1.45;margin:0 0 .35rem}
.pub-meta{font-size:.87rem;color:var(--muted);margin:0 0 .6rem;line-height:1.5}
.pub-link{
  display:inline-block;font-size:.8rem;font-weight:600;padding:.25rem .7rem;border-radius:999px;
  background:var(--primary-light);color:var(--primary);word-break:break-all;
}
.pub-link:hover{background:var(--primary);color:#fff}
.pub-link--search{background:var(--bg-alt);color:var(--muted)}
.pub-link--search:hover{background:var(--muted);color:#fff}
.pub-note{
  display:inline-block;margin-left:.5rem;padding:.1rem .55rem;border-radius:999px;
  background:#fff4d6;color:#8a6300;font-size:.7rem;font-weight:700;vertical-align:middle;
  text-transform:uppercase;letter-spacing:.05em;
}

/* board detail pages */
.feature-list{list-style:none;padding:0;margin:1.2rem 0 0;display:grid;gap:.55rem}
.feature-list li{
  position:relative;padding:.7rem .9rem .7rem 2.1rem;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius-sm);font-size:.94rem;line-height:1.5;
}
.feature-list li::before{
  content:"";position:absolute;left:.85rem;top:1.15rem;width:7px;height:7px;border-radius:50%;
  background:var(--primary);
}
.spec-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.3rem 1.4rem}
.spec-card h3{font-size:1.02rem;margin-bottom:.7rem;color:var(--primary)}
.board-dev{font-size:.9rem;color:var(--muted);margin-top:1rem}
.board-dev strong{color:var(--ink)}

/* course detail pages */
.res-list{list-style:none;padding:0;margin:0;display:grid;gap:.6rem;grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.res-list li{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:.85rem 1.05rem;font-size:.94rem;transition:all .2s var(--ease);
}
.res-list li:hover{border-color:var(--primary-mid);box-shadow:var(--shadow-sm)}
.res-list a{font-weight:600;display:inline-flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.tag-internal{
  display:inline-block;padding:.1rem .45rem;border-radius:999px;background:#fff4d6;color:#7a5600;
  font-size:.68rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;vertical-align:middle;
}
.course-figure{margin:2.4rem auto 0;max-width:640px;text-align:center}
.course-figure img{border-radius:var(--radius);box-shadow:var(--shadow);margin-inline:auto}
.course-figure figcaption{margin-top:.8rem;font-size:.88rem;color:var(--muted)}
table td .tag-internal{margin-left:.2rem}
.course__code{
  flex:none;padding:.4rem .75rem;border-radius:var(--radius-sm);background:var(--ink);color:#fff;
  font-size:.82rem;font-weight:700;letter-spacing:.03em;font-variant-numeric:tabular-nums;
}
.course h4{margin-bottom:.2rem;font-size:1.02rem}
.course p{font-size:.9rem;color:var(--muted);margin:0}

/* CTA band */
.cta-band{
  position:relative;overflow:hidden;border-radius:var(--radius-lg);
  background:linear-gradient(120deg,var(--primary-dark),var(--primary) 55%,#1372cf);
  color:#fff;padding:clamp(2.2rem,5vw,3.4rem);
}
.cta-band::after{
  content:"";position:absolute;right:-60px;top:-60px;width:320px;height:320px;border-radius:50%;
  background:rgba(255,255,255,.08);
}
.cta-band h2{color:#fff;margin-bottom:.6rem}
.cta-band p{color:rgba(255,255,255,.88);max-width:58ch}
.cta-band .btn-row{margin-top:1.6rem;position:relative;z-index:1}

/* quote */
.quote{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.8rem;
  position:relative;
}
.quote::before{
  content:"\201C";position:absolute;top:-.2rem;left:1.2rem;font-size:4.5rem;line-height:1;
  color:var(--primary-mid);font-family:Georgia,serif;
}
.quote p{position:relative;font-size:.98rem;font-style:italic;color:var(--ink-soft)}
.quote footer{margin-top:1rem;font-size:.86rem;font-weight:700;color:var(--ink);font-style:normal}
.quote footer span{display:block;font-weight:500;color:var(--muted);font-size:.82rem}

/* article figures */
.figure-grid{
  display:grid;gap:1.4rem;margin:2.4rem 0;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
}
.figure-grid--3{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.figure-grid figure{margin:0}
.figure-grid img{
  width:100%;border-radius:var(--radius);border:1px solid var(--line);
  box-shadow:var(--shadow-sm);background:var(--bg-alt);
}
.figure-grid figcaption{
  margin-top:.7rem;font-size:.85rem;line-height:1.5;color:var(--muted);text-align:center;
}

/* video embeds */
.video-grid{
  display:grid;gap:1.6rem;margin:1.6rem 0 0;
  grid-template-columns:repeat(auto-fit,minmax(340px,1fr));
}
.video-grid--one{grid-template-columns:minmax(0,760px);justify-content:center}
.video-grid figure{margin:0}
.video-embed{
  position:relative;aspect-ratio:16/9;border-radius:var(--radius);overflow:hidden;
  border:1px solid var(--line);background:var(--ink);box-shadow:var(--shadow-sm);
}
.video-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video figcaption{margin-top:.7rem;font-size:.88rem;line-height:1.5;color:var(--muted)}

/* one NPTEL edition */
.workshop-year{padding:2.6rem 0;border-top:1px solid var(--line)}
.workshop-year:first-of-type{border-top:0;padding-top:0}
.workshop-year .card__tag{margin-bottom:.6rem}
.workshop-year .card__meta{margin:-.2rem 0 1rem;font-size:.9rem}
.filters a.filter{text-decoration:none}

/* pull quote inside an article */
.pullquote{
  margin:2.2rem 0;padding:1.4rem 1.6rem;border-left:4px solid var(--primary);
  background:var(--primary-light);border-radius:0 var(--radius) var(--radius) 0;
}
.pullquote p{font-size:1rem;line-height:1.65;color:var(--ink-soft);font-style:italic;margin:0}
.pullquote footer{
  margin-top:.9rem;font-size:.86rem;font-weight:700;color:var(--ink);font-style:normal;
}
.pullquote footer span{display:block;font-weight:500;color:var(--muted);font-size:.8rem;margin-top:.1rem}

/* prose */
.prose h2{margin-top:2.4rem}
.prose h3{margin-top:2rem}
.prose ul li{margin-bottom:.45rem}
.prose>:first-child{margin-top:0}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer{background:var(--bg-dark);color:#98a2c4;padding-top:clamp(3rem,6vw,4.5rem);font-size:.93rem}
.footer__grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.3fr;gap:2.4rem}
/* width:auto keeps the logo's own 400x220 proportions - without it the width
   attribute wins and the mark stretches sideways */
.footer__brand img{height:56px;width:auto;margin-bottom:1.1rem}
.footer__brand p{color:#8d97bb;font-size:.92rem;max-width:38ch}
.site-footer h5{color:#fff;font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;margin-bottom:1.1rem;font-weight:700}
.site-footer ul{list-style:none;padding:0;margin:0}
.site-footer li{margin-bottom:.55rem}
.site-footer a{color:#98a2c4}
.site-footer a:hover{color:#fff}
.footer__contact div{display:flex;gap:.6rem;margin-bottom:.75rem;align-items:flex-start}
.footer__contact svg{width:15px;height:15px;flex:none;margin-top:.28rem;color:var(--accent)}
.footer__bottom{
  margin-top:3rem;border-top:1px solid rgba(255,255,255,.1);padding:1.3rem 0;
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:.85rem;color:#7c86ab;
}
.social{display:flex;gap:.55rem;margin-top:1.2rem}
.social a{
  width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.07);
  display:grid;place-items:center;color:#c3cae4;transition:all .2s var(--ease);
}
.social a:hover{background:var(--primary);color:#fff;transform:translateY(-2px)}
.social svg{width:17px;height:17px}

/* back to top */
.to-top{
  position:fixed;right:1.5rem;bottom:1.5rem;z-index:150;width:46px;height:46px;border-radius:50%;
  background:var(--primary);color:#fff;border:0;cursor:pointer;display:grid;place-items:center;
  box-shadow:var(--shadow);opacity:0;visibility:hidden;transform:translateY(12px);
  transition:all .28s var(--ease);
}
.to-top.is-visible{opacity:1;visibility:visible;transform:translateY(0)}
.to-top:hover{background:var(--primary-dark)}
.to-top svg{width:20px;height:20px}

/* reveal on scroll - only hidden when JS is running, so the page still reads
   fully with scripts blocked or broken */
.js .reveal{opacity:0;transform:translateY(22px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.js .reveal.is-in{opacity:1;transform:none}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:1180px){
  .nav__link{padding:.5rem .55rem;font-size:.86rem}
  .brand img{height:44px}
  .header__inner{gap:.9rem}
}
@media (max-width:1024px){
  .footer__grid{grid-template-columns:1fr 1fr}
  .gallery{columns:3 220px}
}
@media (max-width:960px){
  .nav-toggle{display:flex}
  .header__cta{display:none}
  .nav{
    position:fixed;inset:var(--header-h) 0 0 auto;width:min(360px,88vw);background:#fff;
    flex-direction:column;align-items:stretch;gap:0;padding:1.2rem 1.2rem 3rem;overflow-y:auto;
    border-left:1px solid var(--line);box-shadow:-16px 0 40px rgba(6,11,35,.14);z-index:195;
    transform:translateX(105%);transition:transform .3s var(--ease);margin-left:0;
  }
  .nav.is-open{transform:translateX(0)}
  .nav__link{padding:.85rem .6rem;font-size:1rem;border-bottom:1px solid var(--line-soft);border-radius:0;justify-content:space-between;width:100%}
  .nav__link.is-active::after{display:none}
  .nav__link.is-active{background:var(--primary-light)}
  .dropdown{
    position:static;transform:none;translate:none;opacity:1;visibility:visible;display:none;
    box-shadow:none;border:0;border-bottom:1px solid var(--line-soft);border-radius:0;
    padding:.3rem 0 .6rem .6rem;min-width:0;background:var(--bg-alt);
  }
  .nav__item.is-open .dropdown{display:block}
  .nav__item.is-open .nav__caret{transform:rotate(180deg)}
  .nav__item:hover .dropdown{opacity:1;visibility:visible;display:none}
  .nav__item.is-open:hover .dropdown{display:block}
  .nav__mobile-cta{display:block;margin-top:1.2rem}
  .nav__mobile-cta .btn{width:100%}
  .split--reverse .split__media{order:0}
}
@media (max-width:640px){
  body{font-size:16px}
  .wrap,.wrap-narrow{width:min(100% - 1.8rem,var(--wrap))}
  .footer__grid{grid-template-columns:1fr;gap:2rem}
  .gallery{columns:2 150px;column-gap:.7rem}
  .gallery figure{margin-bottom:.7rem}
  .hero__meta{gap:1.4rem 2rem}
  .lightbox__nav{width:40px;height:40px}
  .lightbox__nav--prev{left:.6rem}
  .lightbox__nav--next{right:.6rem}
  .course{flex-direction:column;gap:.7rem}
}

@media print{
  .site-header,.site-footer,.to-top,.nav-scrim{display:none}
  body{font-size:12pt}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .js .reveal,.reveal{opacity:1;transform:none}
}