/* =========================================================
   Yomna El-Ghazouly — academic portfolio
   Fonts:  main headers  → Lato
           small headers → Arial Nova
           body          → Arial Nova Light
   Arial Nova is a licensed Windows font (no web CDN); it renders
   natively on Win10+ and degrades to Arial elsewhere.
   ========================================================= */
:root{
  --crimson:#A6192E;   /* PhD  — primary, dominant */
  --teal:#1F6F6B;      /* MSc */
  --indigo:#3B4B9A;    /* VR Lab */
  --amber:#B26B00;     /* Design + Practice / Other */
  --ink:#1A1A1A;
  --ink2:#3A3733;
  --paper:#FAFAF8;
  --panel:#FFFFFF;
  --muted:#6E6A66;
  --rule:#E4E1DC;
  --rule2:#EEEBE6;

  --display:'Lato','Helvetica Neue',Arial,sans-serif;              /* main headers */
  --head:'Arial Nova','Arial Nova Regular',Arial,'Helvetica Neue',sans-serif; /* small headers */
  --body:'Arial Nova Light','Arial Nova',Arial,'Helvetica Neue',sans-serif;   /* body */
  --mono:'IBM Plex Mono',ui-monospace,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-font-smoothing:antialiased;scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font-family:var(--body);font-weight:300;line-height:1.6}
img{display:block;max-width:100%}
a{color:inherit}

/* ---------------- NAV ---------------- */
nav{position:fixed;top:0;left:0;right:0;z-index:200;display:flex;align-items:center;
  justify-content:space-between;padding:15px 34px;background:rgba(250,250,248,.86);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--rule)}
nav .mark{font-family:var(--display);font-weight:900;font-size:15px;letter-spacing:.01em}
nav .mark span{color:var(--crimson)}
nav ul{display:flex;gap:26px;list-style:none;align-items:center}
nav a{font-family:var(--head);text-decoration:none;font-size:12px;letter-spacing:.08em;
  text-transform:uppercase;opacity:.7;transition:opacity .2s,color .2s}
nav a:hover,nav a:focus-visible{opacity:1;color:var(--crimson)}
nav .cta{border:1px solid var(--crimson);color:var(--crimson);padding:7px 13px;border-radius:2px;opacity:1}
nav .cta:hover{background:var(--crimson);color:#fff}
.navtoggle{display:none}
@media(max-width:820px){
  nav{padding:12px 18px}
  .navtoggle{display:flex;flex-direction:column;justify-content:center;gap:5px;width:40px;height:40px;
    background:none;border:none;cursor:pointer;padding:8px;z-index:210}
  .navtoggle span{display:block;width:24px;height:2px;background:var(--ink);transition:transform .26s,opacity .26s}
  nav ul{position:fixed;inset:0 0 0 auto;height:100dvh;width:min(80vw,320px);background:var(--paper);
    flex-direction:column;align-items:stretch;gap:0;padding:74px 26px 26px;
    transform:translateX(100%);transition:transform .3s ease;box-shadow:-10px 0 34px rgba(26,26,26,.14);
    border-left:1px solid var(--rule);overflow-y:auto}
  nav.open ul{transform:translateX(0)}
  nav ul li{width:100%}
  nav a.navlink,nav a.cta{display:block;width:100%;padding:15px 2px;font-size:15px;letter-spacing:.04em;
    border-bottom:1px solid var(--rule);opacity:.85}
  nav a.navlink.hideSm{display:block}
  nav a.cta{border:none;color:var(--crimson);margin-top:6px}
  nav a[aria-current=page]{color:var(--crimson);opacity:1}
  nav.open .navtoggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  nav.open .navtoggle span:nth-child(2){opacity:0}
  nav.open .navtoggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  body.navlock{overflow:hidden}
}

/* ---------------- shared layout ---------------- */
.wrap{max-width:1200px;margin:0 auto;padding:0 34px}
section{position:relative}
.eyebrow{font-family:var(--head);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--crimson);margin-bottom:14px;display:flex;align-items:center;gap:10px}
h2{font-family:var(--display);font-weight:900;font-size:clamp(1.9rem,4.4vw,3.3rem);
  line-height:1.02;letter-spacing:-.02em}
h3{font-family:var(--display);font-weight:700;font-size:1.4rem;line-height:1.12;letter-spacing:-.01em}
.smallhead{font-family:var(--head);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.lead{font-family:var(--body);font-size:clamp(1.05rem,1.8vw,1.3rem);line-height:1.5;max-width:60ch;color:var(--ink2)}
p{max-width:64ch}
.reveal{opacity:0;transform:translateY(22px)}

/* ---------------- HERO ---------------- */
.hero{padding:150px 34px 70px;max-width:1200px;margin:0 auto}
.hero .status{font-family:var(--head);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--crimson);display:inline-flex;align-items:center;gap:9px;margin-bottom:22px}
.hero .status .dot{width:7px;height:7px;border-radius:50%;background:var(--crimson);
  box-shadow:0 0 0 0 rgba(166,25,46,.5);animation:pulse 2.4s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(166,25,46,.45)}70%{box-shadow:0 0 0 9px rgba(166,25,46,0)}100%{box-shadow:0 0 0 0 rgba(166,25,46,0)}}
.hero h1{font-family:var(--display);font-weight:900;font-size:clamp(2.7rem,8.4vw,7.1rem);
  line-height:.92;letter-spacing:-.03em}
.hero h1 .w{display:inline-block}
.rule{height:3px;background:var(--crimson);width:0;margin:22px 0 20px}
.hero .kicker{font-family:var(--head);font-size:clamp(.82rem,1.5vw,1.02rem);color:var(--muted);letter-spacing:.02em}
.thesis{max-width:64ch;margin:26px 0 30px;font-family:var(--display);font-weight:300;
  font-size:clamp(1.15rem,2.3vw,1.7rem);line-height:1.34;letter-spacing:-.01em}
.thesis em{font-style:normal;color:var(--crimson);font-weight:700}
.meta{display:flex;flex-wrap:wrap;gap:9px 22px;font-size:.85rem;color:var(--muted);margin-bottom:30px;align-items:center}
.meta a{color:var(--crimson);text-decoration:none;border-bottom:1px solid transparent}
.meta a:hover{border-color:var(--crimson)}
.heroactions{display:flex;flex-wrap:wrap;gap:12px}
.btn{font-family:var(--head);font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;
  text-decoration:none;padding:11px 18px;border-radius:2px;border:1px solid var(--crimson);
  color:var(--crimson);transition:.2s}
.btn:hover{background:var(--crimson);color:#fff}
.btn.solid{background:var(--crimson);color:#fff}
.btn.solid:hover{background:#8a1526}

.stage{position:relative;overflow:hidden;border-radius:2px;background:#ddd;margin-top:44px}
.stage img{width:100%;filter:saturate(.08) contrast(.94);transform:scale(1.05)}
.stage svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.stage .path{fill:none;stroke:#fff;stroke-width:1.7;stroke-dasharray:4 6;opacity:.9}
.stage .agent{fill:var(--crimson);stroke:#fff;stroke-width:1.4}
.cap{font-family:var(--head);font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin-top:12px}
.scrollcue{text-align:center;padding:46px 0 40px;font-family:var(--head);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.scrollcue i{display:block;width:1px;height:40px;background:var(--rule);margin:12px auto 0}

/* ---------------- RESEARCH ---------------- */
.research{padding:70px 0 40px}
.sectionhead{max-width:1200px;margin:0 auto 40px;padding:0 34px}

/* stream tag chips */
.tag{display:inline-flex;align-items:center;gap:7px;font-family:var(--head);font-size:.66rem;
  letter-spacing:.15em;text-transform:uppercase;padding:5px 10px;border-radius:2px;font-weight:400}
.tag .sq{width:8px;height:8px;border-radius:1px}
.tag.phd{color:var(--crimson);background:rgba(166,25,46,.09)}.tag.phd .sq{background:var(--crimson)}
.tag.msc{color:var(--teal);background:rgba(31,111,107,.10)}.tag.msc .sq{background:var(--teal)}
.tag.vr{color:var(--indigo);background:rgba(59,75,154,.10)}.tag.vr .sq{background:var(--indigo)}
.tag.other{color:var(--amber);background:rgba(178,107,0,.10)}.tag.other .sq{background:var(--amber)}

/* PhD — the dominant, full-width block */
.phdblock{border-top:3px solid var(--crimson);background:var(--panel);
  border:1px solid var(--rule);border-top:3px solid var(--crimson);border-radius:3px;
  padding:38px 40px;margin:0 34px 26px;max-width:1200px;margin-left:auto;margin-right:auto}
.phdblock h3{font-size:clamp(1.5rem,3vw,2.2rem);margin:12px 0 8px}
.phdgrid{display:grid;grid-template-columns:1.15fr .85fr;gap:38px;margin-top:26px}
.subproj{border-left:2px solid var(--rule);padding:4px 0 4px 18px;margin-bottom:22px}
.subproj .smallhead{color:var(--crimson);margin-bottom:6px}
.subproj p{font-size:.95rem;color:var(--ink2)}
.facts{list-style:none;font-size:.9rem}
.facts li{display:flex;gap:12px;padding:8px 0;border-top:1px solid var(--rule2)}
.facts li b{font-family:var(--head);font-weight:400;text-transform:uppercase;letter-spacing:.08em;
  font-size:.66rem;color:var(--muted);min-width:96px;padding-top:2px}
.figrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-top:20px}
.figrow figure{margin:0}
.figrow img{width:100%;aspect-ratio:4/3;object-fit:cover;border:1px solid var(--rule);border-radius:2px}
.figrow figcaption{font-family:var(--head);font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);margin-top:6px}

/* supporting lines — MSc + VR, compressed side by side, clearly subordinate */
.supportrow{max-width:1200px;margin:14px auto 0;padding:0 34px;display:grid;
  grid-template-columns:1fr 1fr;gap:22px}
.supportcard{background:var(--panel);border:1px solid var(--rule);border-radius:3px;padding:26px 28px}
.supportcard.msc{border-top:3px solid var(--teal)}
.supportcard.vr{border-top:3px solid var(--indigo)}
.supportcard h3{font-size:1.3rem;margin:12px 0 6px}
.supportcard p{font-size:.92rem;color:var(--ink2)}
.supportcard .connect{margin-top:14px;font-size:.82rem;color:var(--muted);border-top:1px dashed var(--rule);padding-top:12px}
.supportcard .connect b{color:var(--ink);font-family:var(--head);font-weight:400}
.supportcard img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:2px;margin-top:16px;border:1px solid var(--rule)}

/* other — slim single line */
.otherline{max-width:1200px;margin:22px auto 0;padding:22px 34px;border-top:1px solid var(--rule);
  display:grid;grid-template-columns:auto 1fr;gap:22px;align-items:start}
.otherline .otherbody{display:flex;flex-wrap:wrap;gap:10px}
.chip{font-family:var(--head);font-size:.74rem;border:1px solid var(--rule);border-radius:2px;
  padding:6px 11px;color:var(--ink2)}

/* ---------------- PUBLICATIONS ---------------- */
.pubs{padding:76px 0;background:#F5F3EF;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);margin-top:56px}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;max-width:1200px;margin:0 auto 44px;padding:0 34px}
.stat .n{font-family:var(--display);font-weight:900;font-size:clamp(2rem,4vw,2.8rem);color:var(--crimson);line-height:1}
.stat .l{font-family:var(--head);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-top:6px}
.pubgroup{margin-bottom:30px}
.pubgroup > .smallhead{color:var(--crimson);border-bottom:1px solid var(--rule);padding-bottom:8px;margin-bottom:14px}
.pub{display:flex;gap:16px;padding:13px 0;border-bottom:1px solid var(--rule2)}
.pub .yr{font-family:var(--mono);font-size:.82rem;color:var(--muted);min-width:44px;padding-top:2px}
.pub .body{font-size:.94rem;color:var(--ink2);max-width:none}
.pub .body .t{color:var(--ink)}
.pub .body .v{font-style:italic}
.pub a{color:var(--crimson);text-decoration:none}
.pub a:hover{text-decoration:underline}
.badge{font-family:var(--head);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;
  padding:2px 7px;border-radius:2px;margin-left:8px;white-space:nowrap}
.badge.review{background:rgba(178,107,0,.12);color:var(--amber)}
.badge.jmp{background:var(--crimson);color:#fff}

/* ---------------- ABOUT ---------------- */
.about{padding:80px 0}
.aboutgrid{display:grid;grid-template-columns:.9fr 1.1fr;gap:50px;align-items:start}
.portrait{width:100%;aspect-ratio:4/5;background:var(--rule2);border-radius:3px;
  display:flex;align-items:center;justify-content:center;font-family:var(--head);
  font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);text-align:center;padding:20px}
.profilelinks{display:flex;flex-direction:column;gap:2px;margin-top:20px}
.profilelinks a{font-family:var(--head);font-size:.86rem;padding:10px 0;border-top:1px solid var(--rule);
  text-decoration:none;color:var(--ink2);display:flex;justify-content:space-between}
.profilelinks a:hover{color:var(--crimson)}
.profilelinks a span{color:var(--muted);font-size:.78rem}

/* ---------------- TEACHING ---------------- */
.teaching{padding:80px 0;background:#F5F3EF;border-top:1px solid var(--rule)}
.principles{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;margin-top:34px}
.principle{background:var(--panel);border:1px solid var(--rule);border-radius:3px;padding:22px}
.principle h4{font-family:var(--display);font-weight:700;font-size:1.05rem;margin-bottom:8px}
.principle p{font-size:.88rem;color:var(--ink2)}
.critique{margin-top:40px;background:var(--panel);border:1px solid var(--rule);border-left:3px solid var(--crimson);
  border-radius:3px;padding:30px 34px}
.critique ol{margin:16px 0 0 0;padding-left:0;list-style:none;counter-reset:q}
.critique li{counter-increment:q;font-family:var(--display);font-weight:300;font-size:1.15rem;line-height:1.4;
  padding:12px 0;border-top:1px solid var(--rule2);display:flex;gap:16px}
.critique li:before{content:counter(q,decimal-leading-zero);font-family:var(--mono);font-size:.8rem;
  color:var(--crimson);padding-top:8px}

/* ---------------- CV ---------------- */
.cv{padding:80px 0}
.timeline{position:relative;margin-top:40px;padding-left:26px;max-width:900px}
.timeline:before{content:"";position:absolute;left:6px;top:6px;bottom:6px;width:2px;background:var(--rule)}
.tl{position:relative;padding:0 0 26px 22px}
.tl:before{content:"";position:absolute;left:-24px;top:5px;width:11px;height:11px;border-radius:50%;
  background:var(--paper);border:2px solid var(--crimson)}
.tl .yr{font-family:var(--mono);font-size:.8rem;color:var(--muted)}
.tl h4{font-family:var(--display);font-weight:700;font-size:1.05rem;margin:3px 0 2px}
.tl .inst{font-family:var(--head);font-size:.84rem;color:var(--ink2)}
.tl p{font-size:.88rem;color:var(--muted);margin-top:4px}

/* ---------------- SUBSECTION LEGEND ---------------- */
.subnav{position:sticky;top:51px;z-index:90;margin-top:51px;
  background:rgba(250,250,248,.94);backdrop-filter:blur(10px);border-bottom:1px solid var(--rule)}
.subnav .inner{max-width:1200px;margin:0 auto;display:flex;gap:4px;overflow-x:auto;padding:9px 30px;
  scrollbar-width:none}
.subnav .inner::-webkit-scrollbar{display:none}
.subnav .lbl{font-family:var(--head);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--crimson);white-space:nowrap;padding:7px 10px 7px 0;border-right:1px solid var(--rule);margin-right:6px}
.subnav a{font-family:var(--head);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;
  white-space:nowrap;text-decoration:none;color:var(--muted);padding:7px 13px;border-radius:2px;transition:.18s}
.subnav a:hover,.subnav a:focus-visible{color:var(--crimson);background:rgba(166,25,46,.08)}
.subnav + section .pagehero, .subnav + .pagehero{padding-top:34px}
section[id]{scroll-margin-top:108px}

/* ---------------- ABOUT — emphasized credentials ---------------- */
.creds{border-top:2px solid var(--ink);margin-top:0}
.credstat{padding:18px 0;border-bottom:1px solid var(--rule)}
.credstat .cn{font-family:var(--display);font-weight:900;font-size:2.1rem;color:var(--crimson);line-height:1}
.credstat .cl{font-family:var(--head);font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink2);margin-top:6px;line-height:1.4}
.credstat.badge{background:var(--crimson);color:#fff;padding:16px 18px;border:none;border-radius:3px;margin-bottom:2px}
.credstat.badge .cn{color:#fff;font-size:1.25rem;line-height:1.15}
.credstat.badge .cl{color:rgba(255,255,255,.82)}

/* ---------------- WORKSHOP / MENTORSHIP GRID ---------------- */
.wsgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px;margin-top:22px}
.wscard{border:1px solid var(--rule);border-radius:3px;padding:20px 22px;background:var(--panel)}
.wscard .wt{font-family:var(--display);font-weight:700;font-size:1.02rem;margin-bottom:6px}
.wscard .wm{font-family:var(--mono);font-size:.72rem;color:var(--muted);margin-bottom:8px}
.wscard p{font-size:.86rem;color:var(--ink2)}

/* ---------------- TESTIMONIALS ---------------- */
.testis{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;margin-top:24px}
.testi{background:var(--panel);border:1px solid var(--rule);border-top:3px solid var(--crimson);
  border-radius:3px;padding:24px 26px}
.testi p{font-family:var(--display);font-weight:300;font-size:1.08rem;line-height:1.4;color:var(--ink)}
.testi p:before{content:"\201C";color:var(--crimson);font-size:1.4em;line-height:0;vertical-align:-.2em;margin-right:2px}
.testi .who{font-family:var(--head);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-top:14px}
.fbthemes{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.fbthemes span{font-family:var(--head);font-size:.74rem;border:1px solid var(--rule);border-radius:2px;padding:6px 11px;color:var(--ink2)}

/* courses-taught compact list */
.taught{margin-top:22px}
.taughtrow{display:grid;grid-template-columns:200px 1fr;gap:20px;padding:14px 0;border-top:1px solid var(--rule)}
.taughtrow .u{font-family:var(--head);font-weight:400;font-size:.92rem;color:var(--ink)}
.taughtrow .u .uy{display:block;font-family:var(--mono);font-size:.72rem;color:var(--muted);margin-top:3px}
.taughtrow .cl2{display:flex;flex-wrap:wrap;gap:7px}
.taughtrow .cl2 span{font-family:var(--head);font-size:.78rem;border:1px solid var(--rule);border-radius:2px;padding:5px 10px;color:var(--ink2)}
@media(max-width:720px){.taughtrow{grid-template-columns:1fr;gap:8px}}

/* ---------------- CAROUSEL ---------------- */
.carousel{position:relative;margin-top:22px}
.carviewport{overflow:hidden;border:1px solid var(--rule);border-radius:3px;background:#EFEDE9}
.cartrack{display:flex;transition:transform .5s cubic-bezier(.4,0,.2,1)}
.carslide{min-width:100%;position:relative}
.carslide img{width:100%;aspect-ratio:16/10;object-fit:contain;background:#EFEDE9}
.carslide figcaption{position:absolute;left:0;right:0;bottom:0;padding:16px 18px;
  background:linear-gradient(to top,rgba(26,26,26,.82),rgba(26,26,26,0));
  color:#fff;font-family:var(--head);font-size:.82rem;line-height:1.35}
.carslide figcaption b{display:block;font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;
  color:#F0A6B0;margin-bottom:4px;font-weight:400}
.carbtn{position:absolute;top:50%;transform:translateY(-50%);width:42px;height:42px;border-radius:50%;
  border:none;background:rgba(255,255,255,.92);color:var(--ink);font-size:20px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;box-shadow:0 3px 12px rgba(0,0,0,.18);z-index:3;transition:.2s}
.carbtn:hover{background:#fff;color:var(--crimson)}
.carbtn.prev{left:12px}.carbtn.next{right:12px}
.cardots{display:flex;gap:7px;justify-content:center;margin-top:14px}
.cardots button{width:8px;height:8px;border-radius:50%;border:none;background:var(--rule);cursor:pointer;padding:0;transition:.2s}
.cardots button.on{background:var(--crimson);width:22px;border-radius:4px}
.carcount{position:absolute;top:12px;right:14px;z-index:3;font-family:var(--mono);font-size:11px;
  background:rgba(26,26,26,.66);color:#fff;padding:3px 9px;border-radius:2px;letter-spacing:.06em}

/* mini carousel inside project cards */
.carousel.mini{margin-top:0}
.dpcard .carousel.mini .carviewport{border:none;border-bottom:1px solid var(--rule);border-radius:0}
.carousel.mini .carslide img{aspect-ratio:16/10}
.carousel.mini .carbtn{width:32px;height:32px;font-size:16px}
.carousel.mini .carbtn.prev{left:9px}.carousel.mini .carbtn.next{right:9px}
.carousel.mini .cardots{position:absolute;bottom:9px;left:0;right:0;margin:0}
.carousel.mini .cardots button{background:rgba(255,255,255,.6);box-shadow:0 1px 3px rgba(0,0,0,.3)}
.carousel.mini .cardots button.on{background:var(--crimson)}
.carousel.mini .carcount{top:9px;right:10px}

/* ---------------- TRANSDISCIPLINARY COLLABORATION ---------------- */
.collab{padding:66px 0}
.collabgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:36px}
.collabcard{background:var(--panel);border:1px solid var(--rule);border-radius:3px;padding:26px 26px 24px;
  display:flex;flex-direction:column;position:relative}
.collabcard.c1{border-top:3px solid var(--teal)}
.collabcard.c2{border-top:3px solid var(--indigo)}
.collabcard.c3{border-top:3px solid var(--amber)}
.collabcard .role{font-family:var(--head);font-size:.66rem;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.collabcard h3{font-size:1.18rem;line-height:1.15;margin-bottom:6px}
.collabcard .yrs{font-family:var(--mono);font-size:.76rem;color:var(--muted);margin-bottom:12px}
.collabcard p{font-size:.9rem;color:var(--ink2);flex:1}
.collabcard .fund{margin-top:16px;padding-top:14px;border-top:1px dashed var(--rule);
  font-family:var(--head);font-size:.72rem;color:var(--ink)}
.collabcard .fund b{color:var(--crimson)}
.collabcard .disc{margin-top:12px;display:flex;flex-wrap:wrap;gap:6px}
.collabcard .disc span{font-family:var(--head);font-size:.64rem;letter-spacing:.04em;
  border:1px solid var(--rule);border-radius:2px;padding:3px 7px;color:var(--muted)}
@media(max-width:820px){.collabgrid{grid-template-columns:1fr}}

/* ---------------- DESIGN + PRACTICE ---------------- */
.dpgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:26px;margin-top:38px}
.dpcard{background:var(--panel);border:1px solid var(--rule);border-radius:3px;overflow:hidden}
.dpcard .dpimg{aspect-ratio:16/10;overflow:hidden;background:var(--rule2)}
.dpcard .dpimg img{width:100%;height:100%;object-fit:cover}
.dpcard .dptext{padding:22px 24px}
.dpcard .dptag{font-family:var(--head);font-size:.64rem;letter-spacing:.13em;text-transform:uppercase;color:var(--amber);margin-bottom:8px}
.dpcard h3{font-size:1.2rem;margin-bottom:6px}
.dpcard p{font-size:.9rem;color:var(--ink2)}
.dpcard .award{margin-top:12px;font-family:var(--head);font-size:.76rem;color:var(--crimson)}

/* ---------------- COURSE DETAIL ---------------- */
.course{background:var(--panel);border:1px solid var(--rule);border-left:3px solid var(--crimson);
  border-radius:3px;padding:30px 32px;margin-top:26px}
.course h3{font-size:1.35rem;margin-bottom:4px}
.course .meta2{display:flex;flex-wrap:wrap;gap:8px 18px;font-family:var(--head);font-size:.76rem;color:var(--muted);margin:10px 0 16px}
.course .meta2 b{color:var(--ink);font-weight:400}
.course p{font-size:.94rem;color:var(--ink2)}
.assess{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin-top:18px}
.assess .a{border:1px solid var(--rule);border-radius:2px;padding:12px 14px}
.assess .a .pct{font-family:var(--display);font-weight:900;color:var(--crimson);font-size:1.1rem}
.assess .a .an{font-size:.82rem;color:var(--ink2);margin-top:2px}

/* ---------------- page hero (secondary pages) ---------------- */
.pagehero{padding:120px 34px 40px;max-width:1200px;margin:0 auto}
.pagehero .eyebrow{margin-bottom:16px}
.pagehero h1{font-family:var(--display);font-weight:900;font-size:clamp(2rem,5.4vw,4rem);
  line-height:.98;letter-spacing:-.025em}
.pagehero .lead{margin-top:20px}
nav a[aria-current=page]{color:var(--crimson);opacity:1}

/* ---------------- IN THE NEWS ---------------- */
.news{padding:80px 0;background:#F5F3EF;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.newsgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:22px;margin-top:38px}
.newscard{background:var(--panel);border:1px solid var(--rule);border-radius:3px;overflow:hidden;
  text-decoration:none;color:inherit;display:flex;flex-direction:column;transition:transform .25s,box-shadow .25s}
.newscard:hover{transform:translateY(-4px);box-shadow:0 14px 34px -18px rgba(26,26,26,.4)}
.newscard .ph{aspect-ratio:3/2;overflow:hidden;background:var(--rule2)}
.newscard .ph img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.newscard:hover .ph img{transform:scale(1.05)}
.newscard .nbody{padding:18px 20px 20px;display:flex;flex-direction:column;flex:1}
.newscard .src{font-family:var(--head);font-size:.64rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--crimson);margin-bottom:9px}
.newscard h4{font-family:var(--display);font-weight:700;font-size:1.02rem;line-height:1.2;letter-spacing:-.01em}
.newscard .more{font-family:var(--head);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);margin-top:auto;padding-top:14px}
.newscard:hover .more{color:var(--crimson)}

/* ---------------- FULL CV ---------------- */
.cvfull{margin-top:64px;border-top:2px solid var(--ink);padding-top:12px}
.cvsection{padding:26px 0;border-bottom:1px solid var(--rule)}
.cvsection > .smallhead{color:var(--crimson);margin-bottom:16px;font-size:.72rem}
.cvrow{display:grid;grid-template-columns:120px 1fr;gap:20px;padding:9px 0;align-items:baseline}
.cvrow .when{font-family:var(--mono);font-size:.78rem;color:var(--muted)}
.cvrow .what h5{font-family:var(--head);font-weight:400;font-size:.98rem;color:var(--ink);margin-bottom:2px}
.cvrow .what .where{font-size:.86rem;color:var(--ink2)}
.cvrow .what .note{font-size:.82rem;color:var(--muted);margin-top:3px}
.cvrow .amt{font-family:var(--mono);font-size:.82rem;color:var(--crimson);white-space:nowrap}
.cvrow.fund{grid-template-columns:120px 1fr auto}
.kv{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.kv span{font-family:var(--head);font-size:.76rem;border:1px solid var(--rule);border-radius:2px;padding:5px 10px;color:var(--ink2)}
@media(max-width:720px){.cvrow,.cvrow.fund{grid-template-columns:1fr}.cvrow .amt{grid-column:1}}

/* pull quote band */
.pullband{padding:90px 34px;text-align:center;background:var(--ink);color:var(--paper)}
.pullband p{font-family:var(--display);font-weight:300;font-size:clamp(1.4rem,3.4vw,2.5rem);
  line-height:1.28;max-width:20ch;margin:0 auto;letter-spacing:-.01em}
.pullband p em{font-style:normal;color:#F0A6B0;font-weight:700}

/* quiet quote for teaching */
.quiet-quote{font-family:var(--display);font-weight:300;font-size:clamp(1.2rem,2.6vw,1.8rem);
  line-height:1.36;max-width:26ch;color:var(--ink)}

footer{border-top:1px solid var(--rule);padding:60px 34px 90px;text-align:center;color:var(--muted);font-size:.85rem}
footer a{color:var(--crimson);text-decoration:none}
footer .fmeta{font-family:var(--head);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;margin-top:14px}

/* overflow safety net */
html,body{overflow-x:hidden;max-width:100%}

@media(max-width:900px){
  .phdgrid,.aboutgrid{grid-template-columns:1fr !important;gap:28px}
  .supportrow{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr 1fr}
  .otherline{grid-template-columns:1fr}
  .phdblock{padding:28px 24px}
  /* nested carousel+text grids inside support cards use inline 1fr 1fr — force stack */
  .supportcard .phdgrid{grid-template-columns:1fr !important}
  .carousel.mini .carslide img,.dpcard .carousel .carslide img{aspect-ratio:16/11}
}

/* ---- phone ---- */
@media(max-width:600px){
  .wrap,.sectionhead{padding-left:18px;padding-right:18px}
  .hero{padding:100px 18px 34px}
  .pagehero{padding:96px 18px 28px}
  .subnav .inner{padding-left:18px;padding-right:18px}
  section[id]{scroll-margin-top:120px}
  .hero h1{font-size:clamp(2.1rem,10.5vw,3.4rem)}
  .hero h1 .w{overflow-wrap:anywhere}
  h2{font-size:clamp(1.55rem,6.4vw,2.2rem)}
  .thesis{font-size:clamp(1.05rem,4.8vw,1.4rem)}
  .phdblock{padding:22px 18px;margin-left:18px;margin-right:18px}
  .supportcard{padding:22px 18px !important}
  .supportrow{padding-left:18px;padding-right:18px}
  .collab .wrap,.pubs .wrap,.about .wrap,.teaching .wrap,.cv .wrap{padding-left:18px;padding-right:18px}
  .stats{grid-template-columns:1fr 1fr;gap:12px}
  .principles,.wsgrid,.testis,.dpgrid,.assess,.newsgrid{grid-template-columns:1fr}
  .heroactions{flex-wrap:wrap}
  .heroactions .btn{flex:1 1 auto;text-align:center}
  .course{padding:24px 20px}
  .critique{padding:24px 20px}
  .critique li{font-size:1.02rem}
  .pubs{padding:52px 0}
  .cvrow,.cvrow.fund{grid-template-columns:1fr}
  .cvrow .amt{grid-column:1;color:var(--crimson)}
  .pub{gap:10px}
  footer{padding:44px 18px 70px}
  .carbtn{width:38px;height:38px}
}

/* ---- tablet ---- */
@media(min-width:601px) and (max-width:900px){
  .newsgrid{grid-template-columns:1fr 1fr}
  .principles,.wsgrid,.testis,.dpgrid{grid-template-columns:1fr 1fr}
}
@media(prefers-reduced-motion:reduce){
  .stage img{filter:none;transform:none}
  .rule{width:120px}
  .reveal{opacity:1;transform:none}
  .hero .status .dot{animation:none}
}