/* ===========================================================
   Major Project Presentation — Phase 2, Review 1
   BMS Institute of Technology & Management
   =========================================================== */

:root{
  --ink:#0d1b2a;
  --ink-soft:#3b4d61;
  --muted:#6b7c93;
  --navy:#0f3057;
  --blue:#1560bd;
  --blue-l:#e8f0fb;
  --gold:#b8860b;
  --gold-l:#fbf3e0;
  --green:#0f7b52;
  --green-l:#e6f4ee;
  --red:#a8321f;
  --red-l:#fbeceb;
  --line:#d8e0ea;
  --line-soft:#eaeff5;
  --paper:#ffffff;
  --stage:#0f3057;
  --radius:10px;
  --font-sans:'Inter','Segoe UI',system-ui,-apple-system,sans-serif;
  --font-head:'Sora','Inter','Segoe UI',system-ui,sans-serif;
  --font-mono:'JetBrains Mono','Consolas','Courier New',monospace;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;min-height:100%;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .slide.active.dir-next,.slide.active.dir-prev{animation:none!important;}
}
body{
  background:var(--paper);
  font-family:var(--font-sans);
  color:var(--ink);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
/* present mode fits the window exactly — nothing to scroll */
body.mode-deck{overflow:hidden;height:100%;}
body.mode-page{overflow-y:auto;}

/* ---------- Stage ----------
   The deck is authored on a 1280-wide canvas and scaled to the full window
   width, so the white slide is edge-to-edge with no letterboxing. Its design
   height grows to at least fill the viewport; if the scaled slide is taller
   than the window, the page scrolls. JS sets the sizes in fit(). */
#stage{
  position:relative;
  width:100%;
  background:var(--paper);
}
#deck{
  position:absolute; top:0; left:0;
  width:1280px; height:720px;
  transform-origin:top left;
  overflow:hidden;
  background:var(--paper);
}

/* ---------- Slides ---------- */
.slide{
  position:absolute; inset:0;
  padding:52px 64px 68px;      /* bottom clears the footer bar */
  background:var(--paper);
  display:none;
  flex-direction:column;
}
.slide.active{display:flex;}

/* directional transitions — forward slides in from the right, back from the left */
@keyframes slideNext{from{opacity:0;transform:translateX(38px);}to{opacity:1;transform:none;}}
@keyframes slidePrev{from{opacity:0;transform:translateX(-38px);}to{opacity:1;transform:none;}}
.slide.active.dir-next{animation:slideNext .3s cubic-bezier(.22,.61,.36,1) both;}
.slide.active.dir-prev{animation:slidePrev .3s cubic-bezier(.22,.61,.36,1) both;}

/* running header on content slides */
.slide::before{
  content:"";
  position:absolute; left:0; right:0; top:0; height:5px;
  background:linear-gradient(90deg,var(--navy) 0%, var(--blue) 45%, var(--gold) 100%);
}
/* .slide-num / .slide-foot are authored inline per slide, then folded into
   the footer bar by deck.js. These rules are the no-JS fallback. */
.slide-num{
  position:absolute; right:26px; bottom:16px;
  font-size:12px; color:var(--muted); letter-spacing:.06em;
  font-variant-numeric:tabular-nums;
}
.slide-foot{
  position:absolute; left:64px; bottom:16px;
  font-size:11.5px; color:var(--muted); letter-spacing:.05em;
  text-transform:uppercase;
}

/* ---------- Footer bar (closes the bottom of every slide) ---------- */
.s-bar{
  position:absolute; left:0; right:0; bottom:0; height:48px;
  display:flex; align-items:center; gap:14px;
  padding:0 22px 0 64px;
  background:#f6f8fb;
  border-top:1px solid var(--line);
}
.s-bar .bar-label{
  font-size:11px; letter-spacing:.11em; text-transform:uppercase;
  color:var(--muted); font-weight:650;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.s-bar .bar-nav{display:flex; align-items:center; gap:6px; margin-left:auto;}
.s-bar .bar-nav button{
  width:27px; height:27px; border-radius:7px;
  border:1px solid var(--line); background:#fff; color:var(--navy);
  cursor:pointer; font-size:14px; line-height:1;
  display:flex; align-items:center; justify-content:center;
  transition:background .15s, color .15s, border-color .15s;
}
.s-bar .bar-nav button:hover:not(:disabled){background:var(--navy);color:#fff;border-color:var(--navy);}
.s-bar .bar-nav button:disabled{opacity:.28;cursor:default;}
.s-bar .bar-count{
  font-family:var(--font-mono); font-size:11px; color:var(--muted);
  font-variant-numeric:tabular-nums; padding:0 5px; white-space:nowrap;
}
.s-bar .bar-sep{width:1px;height:18px;background:var(--line);margin:0 2px;}

/* dark slides get a matching dark bar */
.thanks .s-bar, .section-slide .s-bar{
  background:rgba(255,255,255,.05); border-top-color:rgba(255,255,255,.16);
}
.thanks .s-bar .bar-label, .thanks .s-bar .bar-count,
.section-slide .s-bar .bar-label, .section-slide .s-bar .bar-count{color:#7f9cb8;}
.thanks .s-bar .bar-sep, .section-slide .s-bar .bar-sep{background:rgba(255,255,255,.18);}
.thanks .s-bar .bar-nav button, .section-slide .s-bar .bar-nav button{
  background:rgba(255,255,255,.09); border-color:rgba(255,255,255,.22); color:#e3edf7;
}
.thanks .s-bar .bar-nav button:hover:not(:disabled),
.section-slide .s-bar .bar-nav button:hover:not(:disabled){background:#fff;color:var(--navy);border-color:#fff;}
.title-slide .s-bar{background:#fff;}
.corner-logo{
  position:absolute; right:52px; top:20px;
  height:48px; opacity:1;
}

h2.s-title{
  font-family:var(--font-head);
  font-size:42px; line-height:1.1; margin:0 0 4px;
  color:var(--navy); font-weight:700; letter-spacing:-.01em;
  max-width:900px;
}
.s-kicker{
  font-size:11.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--gold); font-weight:700; margin:0 0 10px;
}
.s-rule{height:3px;width:70px;background:var(--gold);border-radius:2px;margin:12px 0 22px;}
.s-body{flex:1;min-height:0;}

p{margin:0 0 12px;line-height:1.55;font-size:20px;color:var(--ink-soft);}
strong{color:var(--ink);font-weight:650;}
ul{margin:0 0 12px;padding-left:20px;}
li{margin:0 0 9px;line-height:1.5;font-size:19px;color:var(--ink-soft);}
li::marker{color:var(--blue);}
.dense p, .dense li{font-size:17px;line-height:1.45;margin-bottom:7px;}
.xdense p, .xdense li{font-size:16px;line-height:1.4;margin-bottom:5px;}

/* NOTE: no height:100% here — these grids are often stacked inside .s-body
   (a flex column), where a 100% height would be counted on top of the rows
   above them and force a phantom overflow. Grid items stretch by default. */
.cols{display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:start;}
.cols-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:start;}
.cols-6040{display:grid;grid-template-columns:1.4fr 1fr;gap:26px;align-items:start;}
.cols-4060{display:grid;grid-template-columns:1fr 1.4fr;gap:26px;align-items:start;}

/* ---------- Cards ---------- */
.card{
  background:#fbfcfe;border:1px solid var(--line);border-radius:var(--radius);
  padding:16px 18px;
}
.card h4{
  font-family:var(--font-head);font-size:17px;margin:0 0 8px;color:var(--navy);
  font-weight:650;letter-spacing:-.005em;
}
.card p,.card li{font-size:16px;line-height:1.45;margin-bottom:6px;}
.card.blue{background:var(--blue-l);border-color:#c3d8f2;}
.card.gold{background:var(--gold-l);border-color:#ecdcb4;}
.card.green{background:var(--green-l);border-color:#bfe0d1;}
.card.red{background:var(--red-l);border-color:#f0cdc7;}
.card .tag{
  display:inline-block;font-size:10px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;padding:3px 7px;border-radius:4px;
  background:var(--navy);color:#fff;margin-bottom:8px;
}

/* numbered objective / step list */
.steps{list-style:none;padding:0;margin:0;counter-reset:st;}
.steps li{
  counter-increment:st;position:relative;padding-left:40px;margin-bottom:11px;
  font-size:18px;line-height:1.45;
}
.steps li::before{
  content:counter(st,decimal-leading-zero);
  position:absolute;left:0;top:0;
  width:27px;height:27px;border-radius:7px;
  background:var(--navy);color:#fff;
  font-family:var(--font-mono);font-size:11.5px;font-weight:700;
  display:flex;align-items:center;justify-content:center;
}
.steps.gold li::before{background:var(--gold);}
.steps.dense li{font-size:17px;margin-bottom:8px;padding-left:36px;}
.steps.dense li::before{width:24px;height:24px;font-size:10.5px;}

/* checklist */
.check{list-style:none;padding:0;margin:0;}
.check li{position:relative;padding-left:26px;}
.check li::before{
  content:"▸";position:absolute;left:4px;top:-1px;color:var(--blue);font-size:15px;
}

/* ---------- Tables ---------- */
table{width:100%;border-collapse:collapse;font-size:15px;}
th{
  background:var(--navy);color:#fff;text-align:left;padding:8px 10px;
  font-weight:600;font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;
  border:1px solid var(--navy);
}
td{padding:7px 10px;border:1px solid var(--line);vertical-align:top;color:var(--ink-soft);line-height:1.35;}
tbody tr:nth-child(even) td{background:#f7f9fc;}
table.tight td,table.tight th{padding:5px 8px;font-size:12px;}
table.xtight td{padding:4px 7px;font-size:11.3px;line-height:1.3;}
table.xtight th{padding:5px 7px;font-size:10.3px;}
td .ok{color:var(--green);font-weight:700;}
td .no{color:var(--red);font-weight:700;}
td .part{color:var(--gold);font-weight:700;}

/* ---------- Title slide ---------- */
.title-slide{
  padding:0;background:
    radial-gradient(900px 500px at 82% 8%, rgba(21,96,189,.16) 0%, transparent 62%),
    linear-gradient(150deg,#ffffff 0%, #f4f7fb 100%);
}
.title-slide::before{height:8px;}
.title-inner{padding:34px 60px 48px;display:flex;flex-direction:column;height:100%;}
.college-head{display:flex;align-items:center;gap:18px;border-bottom:1px solid var(--line);padding-bottom:14px;}
.college-head img{height:68px;}
.college-head .ch-text{line-height:1.3;}
.college-head .ch-text b{display:block;font-family:var(--font-head);font-size:15px;color:var(--navy);letter-spacing:-.01em;}
.college-head .ch-text span{font-size:11.5px;color:var(--muted);}
.review-chip{
  margin-left:auto;background:var(--navy);color:#fff;border-radius:6px;
  padding:7px 13px;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
}
.title-main{flex:1;display:flex;flex-direction:column;justify-content:center;text-align:center;padding:0 30px;}
.title-eyebrow{font-size:11.5px;letter-spacing:.28em;text-transform:uppercase;color:var(--gold);font-weight:700;margin-bottom:14px;}
h1.deck-title{
  font-family:var(--font-head);font-weight:750;font-size:50px;line-height:1.18;
  color:var(--navy);margin:0 auto 14px;max-width:960px;letter-spacing:-.02em;
}
.title-sub{font-size:18px;color:var(--ink-soft);max-width:760px;margin:0 auto;line-height:1.5;}
.title-badges{display:flex;gap:8px;justify-content:center;margin-top:18px;flex-wrap:wrap;}
.badge{
  font-size:11px;font-weight:600;padding:5px 11px;border-radius:99px;
  background:#fff;border:1px solid var(--line);color:var(--ink-soft);
}
.badge.live{background:var(--green-l);border-color:#bfe0d1;color:var(--green);}

.title-foot{display:grid;grid-template-columns:1.55fr 1fr;gap:36px;padding:18px 0 10px;border-top:1px solid var(--line);}
.tf-label{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);font-weight:700;margin-bottom:9px;}
.team{display:grid;grid-template-columns:1fr 1fr;gap:5px 22px;}
.team div{font-size:13px;color:var(--ink);display:flex;justify-content:space-between;gap:10px;}
.team div span{font-family:var(--font-mono);font-size:11.5px;color:var(--muted);}
.guide b{display:block;font-size:14.5px;color:var(--ink);font-weight:650;}
.guide span{font-size:12px;color:var(--muted);}

/* ---------- Section divider ---------- */
.section-slide{
  background:linear-gradient(150deg,#0f3057 0%,#0a2440 100%);
  justify-content:center;
}
.section-slide::before{background:var(--gold);}
.section-slide h2.s-title{color:#fff;font-size:44px;}
.section-slide .s-kicker{color:#8ab4e8;}
.section-slide p{color:#b9cbe0;font-size:17px;max-width:720px;}
.section-slide .slide-num,.section-slide .slide-foot{color:#5f7f9f;}

/* ---------- Architecture diagram ---------- */
.arch{display:flex;flex-direction:column;gap:9px;font-size:12px;}
.arch-row{display:grid;gap:9px;}
.arch-box{
  border:1.5px solid var(--line);border-radius:8px;padding:9px 11px;background:#fff;
  text-align:center;
}
.arch-box b{display:block;font-family:var(--font-head);font-size:12.5px;color:var(--navy);font-weight:650;}
.arch-box i{display:block;font-style:normal;font-size:10.5px;color:var(--muted);margin-top:2px;line-height:1.35;}
.arch-box.edge{background:var(--gold-l);border-color:#ecdcb4;}
.arch-box.app{background:var(--blue-l);border-color:#c3d8f2;}
.arch-box.svc{background:#fff;border-color:#c3d8f2;}
.arch-box.data{background:#f2f5f9;border-color:var(--line);}
.arch-box.ai{background:var(--green-l);border-color:#bfe0d1;}
.arch-lane{
  display:flex;align-items:center;gap:10px;
}
.lane-label{
  writing-mode:vertical-rl;transform:rotate(180deg);
  font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
  font-weight:700;padding:2px 0;flex:none;width:16px;text-align:center;
}
.arrow{text-align:center;color:var(--blue);font-size:14px;line-height:1;margin:-2px 0;}

/* ---------- Code / pseudocode ---------- */
pre.algo{
  font-family:var(--font-mono);font-size:11.6px;line-height:1.5;
  background:#0d1b2a;color:#dbe6f2;border-radius:8px;padding:14px 16px;margin:0;
  overflow:hidden;white-space:pre-wrap;
}
pre.algo .kw{color:#7fb2f5;font-weight:600;}
pre.algo .cm{color:#7c93ac;font-style:italic;}
pre.algo .st{color:#d3b48c;}
pre.algo .fn{color:#8fd6a8;}
.formula{
  font-family:var(--font-mono);font-size:12.5px;background:var(--blue-l);
  border-left:3px solid var(--blue);padding:9px 12px;border-radius:0 6px 6px 0;
  color:var(--navy);margin:0 0 10px;line-height:1.5;
}

/* ---------- Metrics ---------- */
.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;}
.metric{
  background:#fbfcfe;border:1px solid var(--line);border-radius:var(--radius);
  padding:13px 14px;text-align:center;
}
.metric b{display:block;font-family:var(--font-head);font-size:32px;color:var(--navy);line-height:1;font-weight:700;}
.metric span{display:block;font-size:11px;color:var(--muted);margin-top:6px;line-height:1.3;}

/* ---------- SDG ---------- */
.sdg-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;}
.sdg{display:flex;gap:13px;border:1px solid var(--line);border-radius:var(--radius);padding:13px 15px;background:#fbfcfe;}
.sdg-no{
  flex:none;width:46px;height:46px;border-radius:8px;color:#fff;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  font-family:var(--font-head);font-weight:750;font-size:19px;line-height:1;
}
.sdg-no small{font-size:8px;font-weight:600;letter-spacing:.06em;margin-top:2px;opacity:.9;}
.sdg-4{background:#c5192d;}
.sdg-8{background:#a21942;}
.sdg-9{background:#fd6925;}
.sdg-10{background:#dd1367;}
.sdg-body b{display:block;font-family:var(--font-head);font-size:13px;color:var(--navy);margin-bottom:3px;}
.sdg-body p{font-size:12.3px;margin:0;line-height:1.4;}

/* ---------- References ---------- */
ol.refs{margin:0;padding:0;list-style:none;counter-reset:r;column-count:2;column-gap:30px;}
ol.refs li{
  counter-increment:r;position:relative;padding-left:30px;margin-bottom:8px;
  font-size:11.4px;line-height:1.4;color:var(--ink-soft);break-inside:avoid;
}
ol.refs li::before{
  content:"["counter(r)"]";position:absolute;left:0;top:0;
  font-family:var(--font-mono);font-size:10.5px;color:var(--blue);font-weight:700;
}
ol.refs i{color:var(--ink);}

/* ---------- Thank you ---------- */
.thanks{
  align-items:center;justify-content:center;text-align:center;
  background:linear-gradient(150deg,#0f3057 0%,#0a2440 100%);
}
.thanks::before{background:var(--gold);}
.thanks h2{font-family:var(--font-head);font-size:54px;color:#fff;margin:0 0 14px;font-weight:750;letter-spacing:-.02em;}
.thanks p{color:#b9cbe0;font-size:17px;}
.thanks .qr{margin-top:22px;display:flex;gap:10px;justify-content:center;flex-wrap:wrap;}
.thanks .qr span{
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);
  color:#cfe0f2;font-size:12px;padding:7px 14px;border-radius:99px;font-family:var(--font-mono);
}

/* ---------- Chrome: progress, nav, overview ---------- */
#progress{
  position:fixed;left:0;top:0;height:3px;background:var(--gold);z-index:40;
  transition:width .25s ease;box-shadow:0 0 12px rgba(184,134,11,.7);
}
/* keyboard hint sits outside the deck; fades while presenting */
#hint{
  position:fixed;left:16px;bottom:12px;z-index:39;
  color:var(--muted);font-size:10.5px;letter-spacing:.03em;
  background:rgba(255,255,255,.9);border:1px solid var(--line);
  padding:4px 10px;border-radius:99px;
  transition:opacity .4s ease;
}
body.idle #hint,body.mode-page #hint{opacity:0;pointer-events:none;}

/* ===========================================================
   Site header — visible in page mode, and as a slim bar in deck mode
   =========================================================== */
#siteNav{
  position:fixed;top:0;left:0;right:0;z-index:45;
  display:flex;align-items:center;gap:16px;
  padding:0 22px;height:58px;overflow:hidden;
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
body.mode-deck #siteNav{display:none;}
.sn-brand{
  display:flex;align-items:center;gap:12px;cursor:pointer;border:0;background:none;padding:0;
  min-width:0;flex-shrink:1;
}
.sn-brand img{height:40px;flex:none;}
.sn-brand span{
  font-family:var(--font-head);font-size:12.5px;font-weight:650;color:var(--navy);
  line-height:1.25;text-align:left;letter-spacing:-.01em;
  min-width:0;overflow:hidden;
}
.sn-brand small{display:block;font-family:var(--font-sans);font-size:10.5px;font-weight:500;color:var(--muted);letter-spacing:.02em;}
.sn-here{
  margin-left:14px;padding-left:16px;border-left:1px solid var(--line);
  font-size:12px;color:var(--ink-soft);font-weight:600;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:34vw;
}
.sn-actions{margin-left:auto;display:flex;align-items:center;gap:8px;}
.sn-actions button{
  font-family:var(--font-sans);font-size:11.5px;font-weight:600;
  padding:7px 14px;border-radius:99px;cursor:pointer;
  border:1px solid var(--line);background:#fff;color:var(--ink-soft);
  transition:background .15s,color .15s,border-color .15s;
  white-space:nowrap;
}
.sn-actions button:hover{border-color:var(--navy);color:var(--navy);}
.sn-actions #modeBtn{background:var(--navy);border-color:var(--navy);color:#fff;}
.sn-actions #modeBtn:hover{background:var(--blue);border-color:var(--blue);color:#fff;}

/* floating "read as page" affordance while in deck mode */
#deckModeBtn{
  position:fixed;top:14px;right:16px;z-index:39;
  font-family:var(--font-sans);font-size:11px;font-weight:600;
  padding:6px 13px;border-radius:99px;cursor:pointer;
  background:rgba(255,255,255,.92);border:1px solid var(--line);color:var(--ink-soft);
  transition:opacity .4s ease,border-color .15s,color .15s;
}
#deckModeBtn:hover{border-color:var(--navy);color:var(--navy);}
body.mode-page #deckModeBtn{display:none;}
body.idle #deckModeBtn{opacity:0;pointer-events:none;}

/* wide tables scroll inside their own box rather than breaking the layout */
.tbl-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;}

/* ---------- Compact: short canvas (wide, low window) ----------
   Give the padding and headings back to the content before shrinking it. */
body.compact.mode-deck .slide{padding:28px 46px 44px;}
body.compact.mode-deck .title-inner{padding:20px 46px 44px;}
body.compact.mode-deck h2.s-title{font-size:26px;}
body.compact.mode-deck h1.deck-title{font-size:31px;}
body.compact.mode-deck .s-kicker{margin-bottom:5px;font-size:10.5px;}
body.compact.mode-deck .s-rule{margin:8px 0 13px;height:2px;width:56px;}
body.compact.mode-deck .corner-logo{height:34px;top:12px;right:44px;}
body.compact.mode-deck .s-bar{height:38px;padding-left:46px;}
body.compact.mode-deck .college-head img{height:52px;}
body.compact.mode-deck .title-badges{margin-top:12px;}

/* ===========================================================
   PAGE MODE — the same sections as a normal scrollable website
   =========================================================== */
body.mode-page{overflow-y:auto;}
body.mode-page #stage{height:auto!important;}
body.mode-page #deck{
  position:static;width:auto!important;height:auto!important;
  transform:none!important;overflow:visible;
}
body.mode-page .slide{
  position:relative;inset:auto;
  display:flex!important;
  height:auto;min-height:0;
  padding:0;
  border-bottom:1px solid var(--line-soft);
  animation:none!important;
  scroll-margin-top:58px;          /* clear the sticky header when jumping */
}
body.mode-page .slide::before{height:3px;}
/* centre every section on a readable column */
body.mode-page .slide > *:not(.s-bar):not(.corner-logo){
  width:100%;max-width:1180px;margin-left:auto;margin-right:auto;
  padding-left:clamp(20px,4vw,48px);padding-right:clamp(20px,4vw,48px);
}
body.mode-page .s-kicker{padding-top:clamp(44px,6vw,74px);}
body.mode-page .s-body{
  zoom:1!important;flex:none;
  padding-bottom:clamp(44px,6vw,74px);
}
body.mode-page .corner-logo{display:none;}
body.mode-page .s-bar{display:none;}
body.mode-page .slide-num,body.mode-page .slide-foot{display:none;}

/* hero */
body.mode-page .title-slide{border-bottom:0;}
body.mode-page .title-slide .title-inner{
  height:auto;padding:0;
  width:100%;max-width:1180px;margin:0 auto;
}
body.mode-page .college-head{padding:78px clamp(20px,4vw,48px) 16px;}
body.mode-page .title-main{padding:clamp(50px,9vw,110px) clamp(20px,4vw,48px);}
body.mode-page .title-foot{
  padding:26px clamp(20px,4vw,48px) 56px;
  margin:0;
}
body.mode-page .thanks{padding:clamp(70px,11vw,130px) 24px;border-bottom:0;}

/* stack the multi-column grids on narrow screens */
@media (max-width:900px){
  body.mode-page .cols,
  body.mode-page .cols-3,
  body.mode-page .cols-6040,
  body.mode-page .cols-4060{grid-template-columns:1fr;gap:16px;}
  body.mode-page .metrics{grid-template-columns:repeat(2,1fr);}
  body.mode-page .sdg-grid{grid-template-columns:1fr;}
  body.mode-page ol.refs{column-count:1;}
  body.mode-page .title-foot{grid-template-columns:1fr;gap:22px;}
  body.mode-page .team{grid-template-columns:1fr;}
  body.mode-page h1.deck-title{font-size:clamp(26px,6vw,40px);}
  body.mode-page h2.s-title{font-size:clamp(24px,5vw,34px);}
  body.mode-page .arch-row{grid-template-columns:1fr!important;}
  body.mode-page .lane-label{display:none;}
  .sn-here{display:none;}
}
@media (max-width:600px){
  body.mode-page .metrics{grid-template-columns:1fr;}
  body.mode-page .college-head{flex-wrap:wrap;gap:12px;}
  body.mode-page .review-chip{margin-left:0;}
  /* keep the header one line tall on a phone */
  .sn-brand small{display:none;}
  .sn-brand span{font-size:11.5px;white-space:nowrap;text-overflow:ellipsis;}
  .sn-brand img{height:32px;}
  .sn-actions{gap:6px;}
  .sn-actions button{padding:6px 11px;font-size:11px;}
}

/* overview grid */
#overview{
  position:fixed;inset:0;z-index:50;background:rgba(8,25,44,.97);
  display:none;padding:28px 34px;overflow:auto;
}
#overview.open{display:block;}
#overview h3{
  font-family:var(--font-head);color:#fff;font-size:18px;margin:0 0 4px;font-weight:650;
}
#overview .ov-sub{color:#7f9cb8;font-size:12px;margin:0 0 20px;}
.ov-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:11px;}
.ov-item{
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);
  border-radius:8px;padding:11px 13px;cursor:pointer;color:#dce7f2;
  transition:background .15s,border-color .15s,transform .15s;
}
.ov-item:hover{background:rgba(255,255,255,.13);border-color:var(--gold);transform:translateY(-2px);}
.ov-item b{display:block;font-size:12.5px;font-weight:600;line-height:1.3;margin-bottom:4px;}
.ov-item span{font-family:var(--font-mono);font-size:10px;color:#7f9cb8;}
.ov-item.current{border-color:var(--gold);background:rgba(184,134,11,.16);}

/* ---------- Print / PDF export ---------- */
@page{size:1280px 720px;margin:0;}
@media print{
  body{background:#fff;overflow:visible;}
  #stage{position:static;display:block;}
  #deck{
    width:1280px;height:auto;transform:none!important;box-shadow:none;border-radius:0;
  }
  .slide{
    position:relative;display:flex!important;width:1280px;height:720px;
    page-break-after:always;break-after:page;animation:none;
  }
  #progress,#hint,#overview{display:none!important;}
  .s-bar .bar-nav{display:none!important;}   /* keep the bar, drop the buttons */
  .slide{animation:none!important;transform:none!important;}
}

/* Deck mode on a phone is unreadable, so it opens in page mode instead —
   this only appears if someone forces deck mode on a small portrait screen. */
#rotate{display:none;}
@media (max-width:640px) and (orientation:portrait){
  body.mode-deck #rotate{
    display:flex;position:fixed;inset:0;z-index:60;background:#0a2440;color:#cfe0f2;
    align-items:center;justify-content:center;text-align:center;padding:30px;
    font-size:14px;line-height:1.6;
  }
}