/* ===== chibu mbadugha — portfolio ===== */
:root{
  --bg:#a6a6a6;
  --nav:#666666;
  --sw1:#666666; --sw2:#cbd2db; --sw3:#fafafa;
  --ink:#000;
  /* the design is drawn on a 1456 x 819 canvas; --u is "one design pixel" */
  --u: calc(min(100vw, 177.7778vh) / 1456);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--bg)}
body{font-family:"Public Sans","Work Sans",system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;font-weight:300;color:#fff;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img,video{display:block}

/* ---------- nav ---------- */
.nav a{display:block;color:#000;transition:color .15s}
.nav a:hover,.nav a[aria-current="page"]{color:#fff}

/* ---------- stage (fixed 16:9 canvas) ---------- */
body.stage-page{min-height:100vh;display:flex;align-items:center;justify-content:center}
.stage{position:relative;overflow:hidden;width:calc(1456*var(--u));height:calc(819*var(--u));background:var(--bg)}
.abs{position:absolute;left:calc(var(--x)*var(--u));top:calc(var(--y)*var(--u));width:calc(var(--w)*var(--u));height:calc(var(--h)*var(--u))}
.navbox{position:absolute;left:0;top:0;width:calc(301*var(--u));height:calc(212*var(--u));padding:calc(2*var(--u)) calc(10*var(--u));background:linear-gradient(135deg,#6a6a6a,#5b5b5b);z-index:5}
.navbox .nav a{font-size:calc(33*var(--u));line-height:calc(41*var(--u))}
.navbox.small{height:calc(90*var(--u))}
.navbox .nav .here{display:block;color:#fff;font-size:calc(33*var(--u));line-height:calc(41*var(--u))}

.tile{background:#fff;overflow:hidden}
.tile.bordered{border:calc(5*var(--u)) solid #000}
.tile img,.tile video{width:100%;height:100%;object-fit:cover}
.tile.contain img{object-fit:contain}
.tile a{display:block;width:100%;height:100%}

.label{position:absolute;left:calc(var(--x)*var(--u));top:calc(var(--y)*var(--u));font-size:calc(35*var(--u));line-height:1;color:#fff;font-weight:300}
.rule{position:absolute;left:0;top:calc(396*var(--u));width:calc(811*var(--u));height:calc(3*var(--u));background:#000}

.swatches{position:absolute;display:flex}
.swatches{transition:opacity .15s}
.swatches:hover{opacity:.65}
.swatches i{display:block;width:calc(69*var(--u));height:calc(62*var(--u))}
.swatches i:nth-child(1){background:var(--sw1)}
.swatches i:nth-child(2){background:var(--sw2)}
.swatches i:nth-child(3){background:var(--sw3)}
.swatches.v{flex-direction:column;gap:calc(24*var(--u));left:calc(1364*var(--u));top:calc(568*var(--u))}
.swatches.h{flex-direction:row;gap:calc(26*var(--u));left:calc(1176*var(--u));top:calc(741*var(--u))}

/* hover-to-play videos: no controls, no scrubber, always muted */
video{background:#f6f8fc;pointer-events:none;-webkit-user-select:none;user-select:none}
video::-webkit-media-controls,video::-webkit-media-controls-enclosure{display:none!important}
.hover-video{cursor:default}
.home-video.hover-video,.tile.hover-video:has(a){cursor:pointer}
.frenz-tiles .hover-video{cursor:default}

/* ---------- homepage ---------- */
body.home{height:100vh;display:flex;flex-direction:column;overflow:hidden}
.home-head{position:relative;flex:0 0 28.1vh;min-height:150px}
.home-head .nav{position:absolute;left:calc(.5vw);top:0}
.home-head .nav a{color:#fff;font-size:clamp(24px,2.35vw,48px);line-height:1.45;transition:opacity .15s}
.home-head .nav a:hover{opacity:.6}
.name{position:absolute;right:0;top:8.8vh;background:var(--nav);color:#fff;font-size:clamp(26px,3.2vw,64px);line-height:1;padding:.3em .22em .3em .22em;white-space:nowrap}
.home-body{flex:none;width:62vw;height:min(25vw,45vh);margin-top:auto;display:flex;gap:2px;background:#fff;min-height:0}
.home-grid{flex:0 0 23.3%;background:#fff}
.home-grid img{width:100%;height:100%;object-fit:cover}
.home-video{flex:1;min-width:0}
.home-video a{display:block;width:100%;height:100%}
.home-video video{width:100%;height:100%;object-fit:cover;object-position:50% 50%}

/* ---------- work ---------- */
.work-item{position:absolute;left:calc(var(--x)*var(--u));top:calc(var(--y)*var(--u));font-size:calc(27*var(--u));line-height:calc(34.5*var(--u));color:#fff}
.work-item a.title{text-decoration:underline;text-underline-offset:.12em;text-decoration-thickness:.05em}
.work-item a.title:hover{opacity:.65}
.work-item p{margin:0}

/* ---------- contact ---------- */
.contact{position:absolute;left:calc(545*var(--u));top:calc(318*var(--u));font-size:calc(37*var(--u));line-height:calc(48*var(--u));color:#fff}
.contact a{display:block;width:max-content}
.contact a:hover{opacity:.65}

/* ---------- small screens: stack everything ---------- */
@media (max-width:820px){
  body.stage-page{display:block}
  .stage{width:100%;height:auto;overflow:visible;padding:0 0 28px}
  .abs{position:relative;left:auto;top:auto;width:auto;height:auto;margin:14px 14px 0}
  .navbox{position:sticky;top:0;width:100%;height:auto;padding:10px 14px;margin:0 0 6px;background:var(--nav)}
  .navbox .nav{display:flex;flex-wrap:wrap;gap:4px 18px}
  .navbox .nav a{font-size:22px;line-height:1.5}
  .navbox.small{height:auto;padding:12px 14px}
  .navbox .nav .here{font-size:22px;line-height:1.5}
  .tile img,.tile video{height:auto}
  .tile.vid{aspect-ratio:1280/628}
  .tile.vid video{height:100%}
  .tile.bordered{border-width:4px}
  .label{position:static;display:block;font-size:26px;margin:14px 14px 0}
  .rule{position:static;width:auto;height:3px;margin:18px 0 0}
  .swatches{position:static;margin:22px 14px 0;gap:10px!important;flex-direction:row!important}
  .swatches i{width:44px;height:40px}
  .work-item{position:static;font-size:19px;line-height:1.5;margin:26px 18px 0}
  .contact{position:static;margin:60px 18px 0;font-size:22px;line-height:1.9}
  body.home{height:auto;overflow:auto;display:block}
  .home-head{height:210px}
  .home-head .nav a{font-size:24px}
  .name{top:auto;bottom:14px;font-size:26px}
  .home-body{display:block;width:100%;height:auto;margin-top:0}
  .home-grid{width:100%;height:auto}
  .home-grid img{height:auto}
  .home-video{margin-top:2px;aspect-ratio:1280/628}
}

/* ---------- gallery viewer (graphic design) ---------- */
[data-gallery]{cursor:zoom-in}
[data-gallery]:focus-visible{outline:3px solid #fff;outline-offset:-3px}
.lb{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;background:#a6a6a6;opacity:0;visibility:hidden;transition:opacity .2s,visibility .2s}
.lb.open{opacity:1;visibility:visible}
.lb figure{margin:0;display:flex;flex-direction:row;align-items:flex-end;gap:26px}
.lb .cap{width:230px;flex:none;color:#fff;font-size:21px;line-height:1.35;font-weight:300;text-align:left}
.lb .cap .yr{margin-top:6px}
.lb img{max-width:none;max-height:none;border:5px solid #000;background:#fff;transform:scale(.97);transition:transform .2s}
.lb.open img{transform:scale(1)}
.lb .count{position:absolute;left:0;right:0;bottom:22px;text-align:center;color:#fff;font-size:20px;font-weight:300;letter-spacing:.04em}
.lb button{position:absolute;border:0;background:var(--nav);color:#fff;font:inherit;font-weight:300;cursor:pointer;line-height:1;transition:background .15s}
.lb button:hover,.lb button:focus-visible{background:#000;outline:none}
.lb .prev,.lb .next{top:50%;transform:translateY(-50%);width:56px;height:72px;font-size:34px}
.lb .prev{left:2vw}.lb .next{right:2vw}
.lb .close{top:2vh;right:2vw;padding:12px 18px;font-size:24px}
@media (max-width:820px){
  .lb .prev,.lb .next{top:auto;bottom:18px;transform:none;width:60px;height:52px}
  .lb .prev{left:18px}.lb .next{right:18px}
  .lb figure{flex-direction:column;align-items:center;gap:14px}
  .lb .cap{width:90vw;text-align:center;font-size:17px}
  .lb .count{bottom:34px}
}