/* Hackcessible — experience enhancements (additive; loads after styles.css) */

/* ---------- brand mark ---------- */
.brand{gap:11px}
.brand-mark{display:grid;place-items:center;width:38px;height:38px;flex:0 0 auto;padding:4px;border-radius:11px;background:#fff;box-shadow:inset 0 0 0 1px #10131a1f}
[data-theme=dark] .brand-mark{background:#232c65;box-shadow:inset 0 0 0 1px #ffffff24}
.brand-mark img{display:block;width:100%;height:100%;object-fit:contain;transition:transform .7s cubic-bezier(.16,1,.3,1)}
.brand:hover .brand-mark img{transform:rotate(72deg)}
.brand svg.brand-word{width:148px;height:32px}
@media(max-width:760px){.brand svg.brand-word{width:120px}.brand-mark{width:32px;height:32px;padding:3px}}

/* One identity from the first frame: the supplied 2026 mark replaces the legacy intro glyph. */
.intro-brand{display:flex;align-items:center;gap:clamp(16px,2.4vw,30px);font-size:clamp(38px,8vw,96px);font-weight:850;letter-spacing:-.075em}
.intro-brand span{display:grid;place-items:center;width:clamp(64px,10vw,118px);aspect-ratio:1;padding:clamp(7px,1vw,12px);border-radius:24%;background:#fff;box-shadow:0 18px 55px #10131a24}
.intro-brand img{display:block;width:100%;height:100%;object-fit:contain}
[data-theme=dark] .intro-brand span{background:#232c65;box-shadow:inset 0 0 0 1px #ffffff24,0 18px 55px #10131a55}

/* Four principles, each given its own place instead of a repeating marquee. */
.word-band{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(20px,4vw,64px);padding-inline:clamp(20px,5vw,72px);white-space:normal!important;overflow:visible!important;text-align:center}
.word-band>span{display:block}
@media(max-width:760px){.word-band{grid-template-columns:repeat(2,minmax(0,1fr));font-size:clamp(32px,10vw,48px);gap:18px 24px;padding-block:28px}}

/* Retire the obstructed ambience frame from the public moments selection. */
.moments figure:has(img[src*="moment-aku-ambience"]){display:none}

/* Preserve the complete cohort instead of cropping people at the image edges. */
.home-hero picture{background:#151922}
.home-hero picture img{object-fit:contain;object-position:center}
@media(max-width:760px){
  .home-hero{min-height:76vh;background:#151922}
  .home-hero picture{inset:0 0 auto;height:calc((100vw - 20px)*.6667)}
  .home-hero picture img{object-fit:contain}
  .home-hero .hero-shade{background:linear-gradient(to bottom,transparent 22%,#151922 58%,#10131a 100%)}
  .home-hero .hero-copy{left:28px;right:22px;bottom:34px}
  .home-hero .hero-copy h1{font-size:clamp(48px,14vw,66px)}
}

/* ---------- scroll progress ---------- */
.scroll-progress{position:fixed;left:0;right:0;top:0;z-index:60;height:3px;pointer-events:none;background:linear-gradient(90deg,var(--blue),var(--coral) 55%,var(--yellow));transform:scaleX(0);transform-origin:0 50%;opacity:0;transition:opacity .3s ease}
.scroll-progress.on{opacity:1}

/* ---------- nav: sliding pill indicator ---------- */
@media(min-width:761px){
  .nav-links{isolation:isolate}
  .nav-ind{position:absolute;z-index:-1;left:0;top:0;height:44px;border-radius:999px;background:color-mix(in srgb,var(--ink) 10%,transparent);opacity:0;transform:translateX(0);transition:transform .42s cubic-bezier(.16,1,.3,1),width .42s cubic-bezier(.16,1,.3,1),opacity .25s ease,background .25s ease;pointer-events:none}
  .nav-links.ind-on .nav-ind{opacity:1}
  .nav-link:hover{background:transparent}
  .nav-link{transition:color .2s ease,opacity .2s ease}
}

/* ---------- hero: parallax + scroll cue ---------- */
.home-hero img{will-change:transform}
.hero-cue{position:absolute;z-index:2;right:clamp(20px,4vw,46px);bottom:clamp(30px,6vw,54px);display:flex;align-items:center;gap:12px;color:#fff;font-size:11px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;opacity:.85}
.hero-cue i{display:block;width:1px;height:54px;background:linear-gradient(#fff0,#fff);position:relative;overflow:hidden}
.hero-cue i::after{content:"";position:absolute;left:-1px;width:3px;height:14px;border-radius:2px;background:var(--yellow);animation:cue 2.2s cubic-bezier(.6,0,.4,1) infinite}
@keyframes cue{0%{transform:translateY(-16px);opacity:0}30%{opacity:1}100%{transform:translateY(54px);opacity:0}}
.hero-cue span{writing-mode:vertical-rl}

/* ---------- cursor spotlight on cards ---------- */
.door,.project-card{position:relative;overflow:hidden}
.door::before,.project-card::before{content:"";position:absolute;z-index:0;inset:-1px;pointer-events:none;opacity:0;transition:opacity .35s ease;background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.28),transparent 62%)}
.door:hover::before,.project-card:hover::before{opacity:1}
.door>*{position:relative;z-index:1}
.door{transition:transform .35s cubic-bezier(.16,1,.3,1),border-color .25s ease,box-shadow .35s ease}
.door:hover{box-shadow:0 26px 60px rgba(16,19,26,.18)}

/* ---------- moments: hover + lightbox ---------- */
.moments figure{position:relative;cursor:zoom-in}
.moments img{transition:transform .6s cubic-bezier(.16,1,.3,1),filter .4s ease}
.moments figure:hover img{transform:scale(1.02)}
.moments figure::after{content:"View";position:absolute;top:14px;right:14px;padding:7px 13px;border-radius:999px;background:rgba(16,19,26,.72);color:#fff;font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;opacity:0;transform:translateY(-6px);transition:opacity .28s ease,transform .28s ease;backdrop-filter:blur(6px)}
.moments figure:hover::after,.moments figure:focus-within::after{opacity:1;transform:none}

.lightbox{position:fixed;inset:0;z-index:120;display:grid;grid-template-rows:1fr auto;place-items:center;padding:clamp(14px,3vw,34px);background:rgba(8,10,16,.86);backdrop-filter:blur(14px) saturate(140%);opacity:0;pointer-events:none;transition:opacity .32s ease}
.lightbox.open{opacity:1;pointer-events:auto}
.lightbox-stage{position:relative;display:grid;place-items:center;width:100%;height:100%;min-height:0}
.lightbox-media{position:relative;display:grid;place-items:center;max-width:min(1180px,100%);max-height:100%}
.lightbox img{display:block;max-width:100%;max-height:calc(100vh - 110px);width:auto;border-radius:20px;box-shadow:0 40px 90px rgba(0,0,0,.55);transform:scale(.965);opacity:0;transition:transform .45s cubic-bezier(.16,1,.3,1),opacity .35s ease}
.lightbox.open img{transform:none;opacity:1}
.lightbox-bar{display:flex;align-items:center;gap:16px;padding-top:16px;color:#fff}
.lightbox-bar p{margin:0;font-size:14px;font-weight:700}
.lightbox-bar small{color:rgba(255,255,255,.6);font-size:12px;font-variant-numeric:tabular-nums}
.lb-btn{display:grid;place-items:center;width:48px;height:48px;border:1px solid rgba(255,255,255,.48);border-radius:999px;background:rgba(8,10,16,.68);color:#fff;cursor:pointer;transition:background .2s ease,transform .2s ease}
.lb-btn:hover{background:rgba(8,10,16,.88);transform:translateY(-2px)}
.lb-btn svg{width:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.lightbox-nav{position:absolute;inset:50% 14px auto;display:flex;justify-content:space-between;pointer-events:none;transform:translateY(-50%)}
.lightbox-nav .lb-btn{pointer-events:auto}
.lightbox-close{position:absolute;top:14px;right:14px}

/* ---------- quick jump palette (Cmd/Ctrl-K) ---------- */
.cmdk{position:fixed;inset:0;z-index:130;display:grid;align-items:start;justify-items:center;padding:14vh 16px 0;background:rgba(8,10,16,.55);backdrop-filter:blur(8px);opacity:0;pointer-events:none;transition:opacity .24s ease}
.cmdk.open{opacity:1;pointer-events:auto}
.cmdk-panel{width:min(560px,100%);border:1px solid var(--line);border-radius:22px;background:var(--panel);color:var(--ink);box-shadow:0 40px 90px rgba(8,10,16,.42);overflow:hidden;transform:translateY(-14px) scale(.98);transition:transform .34s cubic-bezier(.16,1,.3,1)}
.cmdk.open .cmdk-panel{transform:none}
.cmdk-panel input{width:100%;border:0;border-bottom:1px solid var(--line);background:transparent;color:inherit;padding:20px 22px;font-size:17px;font-weight:600;outline:none}
.cmdk-list{list-style:none;margin:0;padding:8px;max-height:46vh;overflow:auto}
.cmdk-list li{display:flex;align-items:center;gap:14px;padding:12px 14px;border-radius:14px;cursor:pointer;font-weight:650;font-size:15px}
.cmdk-list li small{margin-left:auto;color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.12em}
.cmdk-list li[aria-selected=true]{background:var(--ink);color:var(--paper)}
.cmdk-list li[aria-selected=true] small{color:rgba(255,255,255,.6)}
[data-theme=dark] .cmdk-list li[aria-selected=true] small{color:rgba(0,0,0,.55)}
.cmdk-list li i{display:grid;place-items:center;width:26px;height:26px;border-radius:8px;background:color-mix(in srgb,var(--blue) 16%,transparent);font-style:normal;font-size:12px;font-weight:800}
.cmdk-hint{display:flex;gap:14px;padding:11px 18px;border-top:1px solid var(--line);color:var(--muted);font-size:11px;letter-spacing:.04em}
.cmdk-hint kbd{border:1px solid var(--line);border-radius:6px;padding:1px 6px;font:inherit;font-size:10px}

/* ---------- back to top ---------- */
.to-top{position:fixed;right:clamp(14px,3vw,28px);bottom:clamp(14px,3vw,28px);z-index:55;display:grid;place-items:center;width:52px;height:52px;border:1px solid var(--glass-border);border-radius:999px;background:var(--glass-bg-scrolled);color:var(--ink);box-shadow:var(--glass-shadow);-webkit-backdrop-filter:blur(18px) saturate(180%);backdrop-filter:blur(18px) saturate(180%);cursor:pointer;opacity:0;transform:translateY(16px) scale(.9);pointer-events:none;transition:opacity .3s ease,transform .4s cubic-bezier(.16,1,.3,1),background .3s ease}
.to-top.on{opacity:1;transform:none;pointer-events:auto}
.to-top:hover{transform:translateY(-3px)}
.to-top svg{width:20px;fill:none;stroke:currentColor;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}
.to-top::after{content:"";position:absolute;inset:-5px;border-radius:inherit;border:2px solid transparent;border-top-color:var(--coral);opacity:.9;transform:rotate(calc(var(--sp,0) * 360deg));transition:transform .1s linear}

/* ---------- toast ---------- */
.toast{position:fixed;left:50%;bottom:34px;z-index:140;display:flex;align-items:center;gap:12px;padding:14px 20px;border-radius:999px;background:var(--ink);color:var(--paper);font-size:14px;font-weight:700;box-shadow:0 20px 50px rgba(8,10,16,.35);transform:translate(-50%,26px);opacity:0;pointer-events:none;transition:opacity .3s ease,transform .45s cubic-bezier(.16,1,.3,1)}
.toast.on{opacity:1;transform:translate(-50%,0)}
.toast svg{width:18px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}

/* ---------- lazy image fade-in ---------- */
img.lz{opacity:0;transition:opacity .6s ease}
img.lz.ready{opacity:1}

/* ---------- theme cross-fade (View Transitions) ---------- */
::view-transition-old(root){animation:none}
::view-transition-new(root){animation:hk-theme-in .62s cubic-bezier(.2,.8,.2,1)}
@keyframes hk-theme-in{from{clip-path:circle(0% at var(--vt-x,88%) var(--vt-y,3%))}to{clip-path:circle(148% at var(--vt-x,88%) var(--vt-y,3%))}}

/* ---------- misc polish ---------- */
.cohort-pill,.btn{transition:background .25s ease,color .25s ease,transform .3s cubic-bezier(.16,1,.3,1)}
.cohort-pill:hover,.btn:hover{transform:translateY(-2px)}
.cohort-pill span{transition:transform .3s cubic-bezier(.16,1,.3,1)}
.cohort-pill:hover span{transform:translate(3px,-3px)}
/* Carousel: the card you rest on grows and lifts above its neighbours. */
.person-card{transition:transform .45s cubic-bezier(.16,1,.3,1),box-shadow .45s ease}
.person-card img{transition:filter .45s ease}
.person-card:hover,.person-card:focus-visible{z-index:3;transform:scale(1.11);box-shadow:0 28px 60px rgba(16,19,26,.34)}
.person-card:hover img,.person-card:focus-visible img{filter:grayscale(0)}

/* Mobile drawer. .nav is overflow:hidden so the glass sheen stays inside the
   pill, but the drawer is an absolutely positioned child at top:68px — it was
   opening and then being clipped out of existence. Unclip it on small screens
   (the ::before/::after sheen already inherits the pill's border-radius, so it
   never needed the clip) and float it clear of the pill. */
@media (max-width:760px){
  .nav{overflow:visible}
  .nav-links{z-index:3;box-shadow:0 22px 50px rgba(16,19,26,.22)}
  .nav-links.open{animation:drawer-in .28s cubic-bezier(.16,1,.3,1)}
}
@keyframes drawer-in{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
@media (max-width:760px) and (prefers-reduced-motion:reduce){.nav-links.open{animation:none}}
.foot a{position:relative;width:fit-content}
.foot a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:0 50%;transition:transform .3s cubic-bezier(.16,1,.3,1)}
.foot a:hover::after{transform:scaleX(1)}
.tech span{transition:background .25s ease,color .25s ease}
.tech span:hover{background:#fff;color:var(--blue)}

@media(prefers-reduced-motion:reduce){
  .hero-cue i::after{animation:none}
  .brand-mark img,.moments img,.door,.person-card,.cohort-pill,.btn{transition:none!important}
  ::view-transition-new(root){animation:none}
  .lightbox img{transition:opacity .2s ease}
}

/* ---------- August 2026 accessibility and polish pass ---------- */
:root{--paper:#f2f3f7;--muted:#5f6673;--line:#c9ced8;--panel:#e9edf3;--nav:rgba(242,243,247,.88);--glass-bg:rgba(242,243,247,.64);--glass-bg-scrolled:rgba(242,243,247,.86);--glass-specular:rgba(255,255,255,.5)}
.what-we-do h2,.page-head h1{letter-spacing:-.04em}
.foot a{text-decoration:none}
.marks>div{background:#eef1f5}
.m5-institution{grid-template-rows:1fr auto;gap:7px;padding-block:14px!important}
.m5-institution img{min-height:0}
.m5-institution strong{font-size:12px;letter-spacing:.06em;text-transform:uppercase}
.contact-card .form-grid input,.contact-card .form-grid textarea{background:#f4f5f7}
@media(max-width:760px){
  .word-band{grid-template-columns:1fr;font-size:clamp(36px,12vw,48px);gap:10px;padding-block:24px}
  .door{min-height:300px;padding:28px}
  .door h3{font-size:clamp(32px,10vw,42px)}
  .door p{font-size:17px}
  .door b{font-size:16px}
  .lightbox-nav{inset-inline:8px}
  .lightbox-close{top:8px;right:8px}
}

/* ---------- 18 Aug 2026 fixes ---------- */

/* The August polish pass above retunes the palette on a bare `:root`. `:root`
   and `[data-theme=dark]` carry the same specificity, and this file loads last,
   so it was also overwriting the dark palette: `--panel`, `--paper`, `--line`
   and the glass tokens stayed light while the text flipped light, leaving the
   Sheffield card, the sponsor/interest toggle and the active nav pill unreadable
   in dark mode. Restate the dark values here so the dark theme wins again. */
[data-theme=dark]{--paper:#0b0f19;--ink:#f4f6fc;--muted:#9ba5c0;--line:rgba(255,255,255,.14);--panel:#141b2d;--nav:rgba(14,19,31,.78);--glass-bg:rgba(20,27,45,.6);--glass-bg-scrolled:rgba(11,15,25,.88);--glass-border:rgba(58,98,255,.32);--glass-shadow:0 14px 44px rgba(0,0,0,.68),0 0 20px rgba(58,98,255,.16);--glass-specular:rgba(120,158,255,.28)}
/* Logo plates stay light in both themes — the marks are dark-on-white artwork. */
[data-theme=dark] .marks>div{background:#eef1f5;color:#111}
/* The Sheffield crest is dark artwork; give it the same light plate as the
   marks so it stays readable once the inspiration card goes navy. */
[data-theme=dark] .uos-crest{padding:5px;border-radius:12px;background:#eef1f5}

/* Programme institutions: three marks now that the CDIE plate is gone. */
.marks{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:760px){.marks{grid-template-columns:1fr 1fr}}

/* Mobile hero: the photo was letterboxed at the top of a 76vh box with the
   title pinned to the floor, which opened a tall empty band between them on
   anything taller than a small phone. Let the hero size to its own content
   instead — photo, then copy directly beneath it. */
@media(max-width:760px){
  .home-hero{min-height:0;display:flex;flex-direction:column;background:#10131a}
  .home-hero picture{position:static;inset:auto;width:100%;height:auto}
  .home-hero img{position:static;width:100%;height:auto;object-fit:contain;transform:none!important}
  .home-hero .hero-shade{display:none}
  .home-hero .hero-copy{position:static;left:auto;right:auto;bottom:auto;padding:26px 24px 32px}
  .home-hero .hero-copy h1{margin:10px 0 26px}
  .home-hero .hero-cue{display:none}
}

/* People popover: readable and tap-driven on touch, where there is no hover. */
@media(pointer:coarse){
  .person-pop{display:grid;width:min(320px,calc(100vw - 28px))}
}