:root{
  --portfolio-media:#e9edf2;
  --portfolio-caption:#fbfbfc;
  --portfolio-caption-ink:#344054;
}

*,*::before,*::after{box-sizing:border-box}

.sr-only{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  padding:0!important;
  margin:-1px!important;
  overflow:hidden!important;
  clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;
  border:0!important
}

.ui-icon{
  width:18px;
  height:18px;
  display:block;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
  flex:0 0 auto
}

html{scrollbar-color:#6f83ab var(--deep)}

body{
  min-height:100vh;
  overflow-x:hidden;
  background:var(--deep);
  color:var(--text)
}

body::before{
  content:'';
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  opacity:.08;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' width='512' height='512'%3E%3Cpath d='M0,128h512 M0,384h512 M320,128v256 M192,128V0 M448,128V0 M192,384v128 M448,384v128 M64,128v256' vector-effect='non-scaling-stroke' fill='none' stroke='rgba(255,255,255,0.45)' stroke-width='1px'/%3E%3C/svg%3E");
  background-size:8px;
  background-position:center
}

body>*{position:relative;z-index:1}
button,a{touch-action:manipulation}

.site-nav{
  position:sticky;
  top:0;
  z-index:100;
  background:rgba(6,22,64,.9);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(245,197,24,.08)
}

.navbar{
  max-width:var(--wrap);
  height:var(--nav-h);
  margin:0 auto;
  padding:0 var(--sec-x);
  display:flex;
  align-items:center;
  gap:16px
}

.brand-mark{
  flex:0 0 auto;
  display:flex;
  align-items:center
}

.brand-mark img{width:44px;height:44px}

.navstrip{
  flex:1;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:clamp(14px,2.4vw,30px);
  overflow-x:auto;
  scrollbar-width:none
}

.navstrip::-webkit-scrollbar{display:none}

.navstrip a{
  color:var(--text-2);
  font-family:var(--font-display);
  font-size:.875rem;
  font-weight:500;
  letter-spacing:.3px;
  white-space:nowrap
}

.navstrip a:hover,.navstrip a[aria-current=page]{color:var(--gold)}

.nav-cta{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  min-height:42px;
  padding:10px 20px;
  border-radius:var(--r-btn);
  background:var(--gold);
  color:var(--deep);
  font-family:var(--font-display);
  font-size:.875rem;
  font-weight:700;
  letter-spacing:.3px;
  white-space:nowrap
}

.nav-cta:hover{
  background:var(--gold-hover);
  color:var(--deep);
  transform:translateY(-1px);
  box-shadow:0 4px 20px rgba(245,197,24,.3)
}

main{overflow:hidden}

.intro{
  padding:clamp(20px,2.5vw,28px) var(--sec-x) clamp(20px,2.5vw,28px)
}

.intro-inner{
  max-width:var(--wrap);
  margin:0 auto;
  display:grid;
  grid-template-columns:minmax(280px,.72fr) minmax(0,1fr);
  gap:clamp(32px,6vw,88px);
  align-items:end
}

.intro h1{
  max-width:650px;
  margin:0;
  color:var(--text);
  font-family:var(--font-display);
  font-size:clamp(2.5rem,4vw,3.5rem);
  font-weight:700;
  letter-spacing:-.04em;
  line-height:.98;
  text-wrap:balance
}

.intro p{
  max-width:680px;
  margin:0 0 4px;
  color:var(--text-2);
  font-size:clamp(.98rem,1.2vw,1.08rem);
  line-height:1.55;
  text-wrap:pretty
}

.work-shell{
  max-width:calc(var(--wrap) + 240px);
  margin:0 auto;
  padding:0 var(--sec-x) clamp(84px,9vw,124px);
  display:grid;
  grid-template-columns:170px minmax(0,1fr);
  gap:28px;
  align-items:start
}

.project-rail{
  position:sticky;
  top:calc(var(--nav-h) + 28px);
  max-height:calc(100vh - var(--nav-h) - 48px);
  overflow:auto;
  padding:0 8px 20px 0
}

.project-rail>h2{
  margin:0 0 16px;
  color:var(--blue);
  font-family:var(--font-display);
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase
}

.project-rail ol{
  margin:0;
  padding:0;
  list-style:none;
  border-top:1px solid rgba(255,255,255,.14)
}

.project-rail li{border-bottom:1px solid rgba(255,255,255,.14)}

.project-rail a{
  display:grid;
  grid-template-columns:28px 1fr;
  gap:9px;
  min-height:50px;
  padding:13px 6px;
  color:var(--mute);
  font-size:.8rem;
  line-height:1.35;
  text-decoration:none
}

.project-rail a:hover{color:var(--text)}

.project-rail a[aria-current=true]{
  color:var(--text);
  background:rgba(255,255,255,.055)
}

.project-rail a span{
  color:var(--blue);
  font-family:var(--font-display);
  font-size:.68rem;
  font-weight:600;
  line-height:1.6
}

.project-rail a b{font-weight:500}
.exhibits{display:grid;gap:32px;min-width:0}
.case-exhibit{scroll-margin-top:calc(var(--nav-h) + 24px)}

.case-stage{
  display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(460px,1fr);
  min-height:560px;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:var(--r-card);
  background:var(--card);
  box-shadow:0 18px 50px rgba(0,0,0,.18)
}

.case-media{
  position:relative;
  min-width:0;
  margin:0;
  display:grid;
  grid-template-rows:minmax(0,1fr) auto;
  background:var(--portfolio-media)
}

.media-open{
  display:flex;
  min-height:430px;
  padding:clamp(20px,2.8vw,36px);
  align-items:center;
  justify-content:center;
  overflow:hidden;
  text-decoration:none
}

.media-open img{
  display:block;
  width:100%;
  height:100%;
  max-width:100%;
  max-height:500px;
  object-fit:contain;
  border-radius:var(--r-btn);
  filter:saturate(.96);
  transition:transform var(--t)
}

.media-open:hover img{transform:scale(1.012)}

#win10min .case-media{background:#0d0d0d}
#win10min .media-open{min-height:520px}
#win10min .media-open img{width:auto;max-width:58%;filter:none}

.case-media figcaption{
  min-height:76px;
  padding:12px 14px 12px 18px;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:14px;
  align-items:center;
  border-top:1px solid var(--doc-line);
  background:var(--portfolio-caption);
  color:var(--portfolio-caption-ink);
  font-size:.78rem;
  line-height:1.45
}

.caption-copy{
  min-width:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px
}

.media-caption{min-width:0;text-wrap:pretty}
.media-count{flex:0 0 auto;color:var(--doc-mute);font-variant-numeric:tabular-nums}

.media-controls{
  display:flex;
  align-items:center;
  gap:2px;
  min-height:48px;
  padding:3px;
  border:1px solid var(--doc-line);
  border-radius:var(--r-btn);
  background:#fff
}

.media-controls>button{
  width:44px;
  height:44px;
  padding:0;
  border:0;
  border-radius:6px;
  display:grid;
  place-items:center;
  background:transparent;
  color:var(--navy);
  font-family:var(--font-display);
  font-size:.72rem;
  font-weight:600;
  cursor:pointer
}

.media-controls>button:hover{background:#eef2f7}
.media-controls [data-action=toggle]{width:68px}
.media-controls [data-action=toggle][aria-pressed=true]{background:#fff4c9;color:#6b5000}

.media-dots{
  display:flex;
  align-items:center;
  gap:0;
  padding:0 2px
}

.media-dot{
  position:relative;
  width:30px!important;
  height:44px!important;
  padding:0!important;
  border:0!important;
  border-radius:5px!important;
  display:grid;
  place-items:center;
  background:transparent!important
}

.media-dot::before{
  content:'';
  display:block;
  width:7px;
  height:7px;
  border-radius:50%;
  background:#aab5c4
}

.media-dot[aria-pressed=true]::before{background:var(--navy)}

.case-notes{
  min-width:0;
  padding:clamp(28px,2.4vw,34px);
  display:flex;
  flex-direction:column;
  background:rgba(10,36,99,.92);
  color:var(--text)
}

.case-notes h2{
  margin:0 0 14px;
  color:var(--text);
  font-family:var(--font-display);
  font-size:clamp(2rem,3vw,2.65rem);
  font-weight:700;
  letter-spacing:-.04em;
  line-height:1.04;
  text-wrap:balance
}

.case-meta{
  margin:0 0 20px;
  padding:0 0 16px;
  display:grid;
  gap:4px;
  border-bottom:1px solid rgba(255,255,255,.14);
  color:var(--text-2);
  font-size:.82rem
}

.case-meta strong{
  color:var(--gold);
  font-family:var(--font-display);
  font-size:1.06rem;
  font-weight:700
}

.case-facts{
  margin:0;
  display:grid;
  gap:14px
}

.case-facts div{display:grid;gap:4px}

.case-facts dt{
  color:var(--blue);
  font-family:var(--font-display);
  font-size:.68rem;
  font-weight:600;
  letter-spacing:.1em;
  line-height:1.4;
  text-transform:uppercase
}

.case-facts dd{
  max-width:70ch;
  margin:0;
  color:var(--body);
  font-size:.88rem;
  line-height:1.58;
  text-wrap:pretty
}

.case-result{
  margin:auto 0 0;
  padding-top:18px;
  border-top:1px solid rgba(255,255,255,.14);
  color:#fff;
  font-family:var(--font-display);
  font-size:1rem;
  font-weight:600;
  line-height:1.45
}

.case-links{
  margin-top:14px;
  display:flex;
  flex-wrap:wrap;
  gap:10px
}

.case-link{
  display:inline-flex;
  min-height:44px;
  padding:10px 14px;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  border:1px solid rgba(255,255,255,.24);
  border-radius:var(--r-btn);
  color:var(--text);
  font-family:var(--font-display);
  font-size:.8rem;
  font-weight:600;
  line-height:1.25;
  text-decoration:none
}

.case-link:hover{border-color:var(--blue);color:var(--blue)}

.case-link.primary{
  border-color:var(--gold);
  background:var(--gold);
  color:var(--deep)
}

.case-link.primary:hover{
  border-color:var(--gold-hover);
  background:var(--gold-hover);
  color:var(--deep);
  transform:translateY(-1px)
}

.walkthroughs{
  padding:var(--sec-y) max(var(--sec-x),calc((100vw - var(--wrap))/2));
  display:grid;
  grid-template-columns:minmax(270px,.72fr) minmax(0,1.28fr);
  gap:clamp(48px,8vw,112px);
  align-items:start;
  border-top:1px solid var(--line);
  background:var(--navy);
  color:var(--text)
}

.screening-copy h2{
  max-width:470px;
  margin:0 0 20px;
  font-family:var(--font-display);
  font-size:clamp(2.5rem,5vw,4.3rem);
  font-weight:700;
  letter-spacing:-.04em;
  line-height:.98;
  text-wrap:balance
}

.screening-copy p{max-width:460px;margin:0;color:var(--text-2);text-wrap:pretty}

.playlist-card{
  min-height:260px;
  padding:clamp(28px,4vw,48px);
  border:1px solid rgba(255,255,255,.18);
  border-radius:var(--r-card);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  background:var(--card);
  color:var(--text);
  text-decoration:none
}

.playlist-card:hover{
  border-color:rgba(245,197,24,.42);
  background:var(--gold-tint);
  color:var(--text);
  transform:translateY(-2px);
  box-shadow:0 12px 32px rgba(0,0,0,.24)
}

.playlist-card span{
  color:var(--blue);
  font-family:var(--font-display);
  font-size:.7rem;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase
}

.playlist-card strong{
  max-width:560px;
  font-family:var(--font-display);
  font-size:clamp(1.7rem,3vw,2.7rem);
  font-weight:700;
  line-height:1.08
}

.playlist-card svg{
  width:34px;
  height:34px;
  align-self:flex-end;
  fill:none;
  stroke:var(--gold);
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round
}

.site-footer{
  max-width:var(--wrap);
  margin:0 auto;
  padding:52px var(--sec-x);
  display:flex;
  justify-content:space-between;
  gap:40px;
  align-items:end;
  color:var(--mute);
  font-size:.82rem
}

.site-footer p{max-width:560px;margin:9px 0 0}
.site-footer>p{text-align:right}

.footer-brand{
  color:var(--text);
  font-family:var(--font-display);
  font-size:1.25rem;
  letter-spacing:-.02em
}

.footer-brand span{color:var(--gold)}

@media(max-width:1120px){
  .work-shell{grid-template-columns:1fr}
  .project-rail{position:static;max-height:none;padding:0}
  .project-rail>h2{margin-bottom:12px}
  .project-rail ol{display:flex;overflow:auto;scroll-snap-type:x proximity;overscroll-behavior-inline:contain}
  .project-rail li{min-width:168px;border-right:1px solid rgba(255,255,255,.14);scroll-snap-align:start}
  .project-rail a{height:100%}
}

@media(max-width:900px){
  .case-stage{grid-template-columns:1fr}
  .media-open{min-height:390px}
  #win10min .media-open{min-height:500px}
  .case-notes{min-height:0}
  .case-result{margin-top:28px}
}

@media(max-width:720px){
  .navbar{padding:0 18px}
  .navstrip{justify-content:flex-end}
  .navstrip a:not([aria-current=page]){display:none}
  .nav-cta{padding:9px 13px}
  .intro{padding-left:20px;padding-right:20px}
  .intro-inner{grid-template-columns:1fr;gap:18px}
  .intro h1{font-size:clamp(2.5rem,13vw,3.5rem)}
  .work-shell{padding-left:14px;padding-right:14px}
  .exhibits{gap:32px}
  .case-stage{border-radius:12px}
  .media-open{min-height:320px;padding:14px}
  #win10min .media-open{min-height:430px}
  #win10min .media-open img{max-width:76%}
  .case-media figcaption{grid-template-columns:1fr;padding:14px;gap:10px}
  .caption-copy{align-items:flex-start}
  .media-controls{width:100%;justify-content:space-between}
  .media-dots{margin-left:auto}
  .case-notes{padding:30px 24px 34px}
  .case-notes h2{font-size:clamp(2rem,10vw,2.65rem)}
  .case-facts dd{font-size:.94rem}
  .walkthroughs{grid-template-columns:1fr;padding-left:20px;padding-right:20px}
  .site-footer{display:block;padding-left:20px;padding-right:20px}
  .site-footer>p{margin-top:28px;text-align:left}
}

@media(max-width:430px){
  .brand-mark img{width:40px;height:40px}
  .nav-cta{font-size:.8rem}
  .project-rail li{min-width:154px}
  .media-open{min-height:270px}
  #win10min .media-open{min-height:390px}
  .media-controls>button{width:44px}
  .media-controls [data-action=toggle]{width:68px}
  .media-dot{width:30px!important}
}

@media(prefers-reduced-motion:reduce){
  .media-open:hover img,.case-link.primary:hover,.playlist-card:hover{transform:none}
}

@media print{
  .site-nav,.project-rail,.walkthroughs,.media-controls{display:none}
  body{background:#fff;color:#111}
  body::before{display:none}
  .intro{padding:30px}
  .work-shell{display:block;padding:0}
  .case-exhibit{break-inside:avoid;margin-bottom:20px}
  .case-stage{grid-template-columns:1fr 1fr;min-height:0}
  .site-footer{padding:20px;color:#333}
}