/* ==========================================================
   zakariyasyed.com
   ========================================================== */
:root{
  --bg:#08080A;
  --text:#F3F2EF;
  --mute:#75757F;
  --dim:#4A4A53;
  --accent:#FF4A1C;
  --line:#1C1C22;
  --panel:#101014;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:Archivo,"Helvetica Neue",Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  display:flex;flex-direction:column;min-height:100vh;overflow-x:hidden;
}
/* The home page's <main> has to pass its height down, or .stage{flex:1}
   collapses to min-height and the band overflows the box it spins in. */
body > main{display:flex;flex-direction:column;flex:1;min-height:0}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}

/* ---------- masthead ---------- */
.top{
  display:flex;align-items:baseline;justify-content:space-between;gap:20px;
  padding:26px 34px;position:relative;z-index:5;
}
.mark{
  font-weight:900;font-size:19px;letter-spacing:-.035em;text-decoration:none;
  text-transform:lowercase;
}
.nav{
  display:flex;gap:30px;
  font-size:15px;font-weight:800;letter-spacing:-.015em;
  color:var(--text);
}
/* Dimmed rather than greyed: the inactive links stay white and keep their
   weight, so the row reads as one set, with the current page simply brightest.
   aria-current still carries the state for anyone not going on colour. */
.nav a{text-decoration:none;opacity:.76;transition:opacity .18s}
.nav a:hover,.nav a:focus-visible,.nav a[aria-current="page"]{opacity:1}

/* ---------- the band ---------- */
.stage{
  position:relative;flex:1;min-height:300px;
  perspective:2900px;perspective-origin:50% 50%;
  cursor:grab;touch-action:none;overscroll-behavior:contain;
  user-select:none;-webkit-user-select:none;
}
/* The filter defs are markup, not layout — keep them out of flow. */
.defs{position:absolute;width:0;height:0;overflow:hidden}
.stage:active{cursor:grabbing}
.ringwrap{position:absolute;inset:0;transform-style:preserve-3d}
.ringwrap.pre{opacity:0;transform:scale(.9)}
.ringwrap.anim{transition:opacity .8s ease .12s,transform 1.15s cubic-bezier(.2,.85,.25,1) .12s}
.ring{
  position:absolute;left:50%;top:50%;width:0;height:0;transform-style:preserve-3d;
  transform:translate(-50%,-50%) translateZ(var(--z,0px))
            rotateX(var(--tilt,14deg)) rotateY(var(--rot,0deg));
}
/* The link itself holds no geometry — it is a zero-size anchor point so its
   strips position against the ring's centre. Keeping it free of filter and
   opacity matters: either would flatten the 3D context its children live in. */
.pane{
  position:absolute;left:0;top:0;width:0;height:0;
  display:block;text-decoration:none;color:inherit;transform-style:preserve-3d;
}
.seg,.plate{
  position:absolute;
  height:var(--sh);margin-top:calc(var(--sh) / -2);
  transform:rotateY(calc(var(--i) * var(--step))) translateZ(var(--radius));
}
/* 1px of bleed each side closes the hairline gap where two planes meet. The
   earlier fix scaled the strip instead, which stretched its background too and
   repeated a sliver of the picture at every seam — invisible on abstract
   footage, but it doubled a face. Sizing the image in absolute units and
   offsetting by whole strips means the bleed continues the picture. */
.seg{
  width:calc(var(--sw) + 2px);
  margin-left:calc((var(--sw) + 2px) / -2);
  overflow:hidden;background:var(--panel);
}
/* The label plate spans the project's whole arc and sits just proud of the
   strips, so text and rim read across the bend instead of being sliced by it. */
.plate{
  width:var(--plate);margin-left:calc(var(--plate) / -2);
  transform:rotateY(calc(var(--i) * var(--step))) translateZ(calc(var(--radius) + 6px));
  pointer-events:none;
}
/* Applied only while the band is actually moving: an idle filter would keep
   every strip rasterised for nothing. */
.ring.smearing .seg{filter:url(#smear)}
/* Music-video stills run dark; lift them so the band reads as imagery
   rather than as a black solid. Static, so it rasterises once. */
/* Size and position are set inline per strip — see segFill() in build.js. */
.seg .fill{
  position:absolute;inset:0;
  filter:brightness(1.34) contrast(1.03);
}
.seg .veil{position:absolute;inset:0;background:#08080A;opacity:var(--fade,.5)}
.plate .lbl{
  position:absolute;left:0;right:0;bottom:0;padding:14px 16px;z-index:2;
  display:flex;align-items:flex-end;justify-content:space-between;gap:10px;
  opacity:var(--lo,1);transition:opacity .3s;
}
.plate .lbl b{
  font-weight:800;font-size:15px;line-height:1.08;letter-spacing:-.02em;
  text-transform:uppercase;text-shadow:0 1px 12px rgba(0,0,0,.75);
}
.plate .lbl span{
  font:500 10.5px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  color:rgba(255,255,255,.66);white-space:nowrap;
}

/* no-JS: the band can't spin, so lay the work out as a plain grid */
.nojs-grid{display:none}
body.nojs .stage{display:none}
body.nojs .wcap{display:none}
body.nojs .nojs-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:18px;padding:0 34px 44px;
}
body.nojs .nojs-grid a{
  display:block;text-decoration:none;color:inherit;position:relative;
  aspect-ratio:16/9;overflow:hidden;background:var(--panel);
}

.wcap{
  display:flex;align-items:flex-end;justify-content:space-between;gap:26px;
  padding:0 34px 30px;position:relative;z-index:4;
}
.wcap .t{
  font-weight:900;font-size:clamp(19px,2.6vw,27px);letter-spacing:-.03em;
  text-transform:uppercase;margin:0 0 5px;line-height:1.02;
}
.wcap .m{font:400 12px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--mute)}
.wcap .m b{color:var(--accent);font-weight:400}
.hint{
  font:500 10.5px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.16em;text-transform:uppercase;color:var(--dim);white-space:nowrap;
}

/* ---------- project page ---------- */
.pwrap{flex:1;padding:0 34px 56px}
.pinner{max-width:940px;margin:0 auto}
.back{
  display:inline-block;text-decoration:none;color:var(--mute);
  font:500 11px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.16em;text-transform:uppercase;padding-bottom:22px;transition:color .18s;
}
.back:hover{color:var(--accent)}

.player{position:relative;aspect-ratio:16/9;overflow:hidden;background:#000;border:1px solid var(--line)}
.player .fill{position:absolute;inset:0;background-size:cover;background-position:center}
.player .shade{position:absolute;inset:0;background:rgba(8,8,10,.34)}
.player iframe{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:4}
.playbtn{
  position:absolute;inset:0;z-index:3;display:flex;align-items:center;justify-content:center;
  background:none;border:0;cursor:pointer;padding:0;
}
.playbtn div{
  width:76px;height:76px;border-radius:50%;background:var(--accent);
  display:flex;align-items:center;justify-content:center;transition:transform .2s;
}
.playbtn:hover div,.playbtn:focus-visible div{transform:scale(1.08)}
.playbtn svg{width:25px;height:25px;margin-left:4px;fill:#08080A}

.pmeta{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:44px;padding:34px 0 0;align-items:start}
.pmeta h1{
  font-weight:900;text-transform:uppercase;font-size:clamp(26px,4.4vw,46px);
  line-height:.98;letter-spacing:-.035em;margin:0 0 12px;text-wrap:balance;
}
.pmeta .sub{font-size:15.5px;line-height:1.62;color:#A7A7B0;margin:0;max-width:46ch}
.pcred{display:grid;gap:14px;border-left:1px solid var(--line);padding-left:22px}
.pcred div{font-size:13.5px;line-height:1.45}
.pcred b{
  display:block;font:500 10px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.16em;text-transform:uppercase;color:var(--mute);margin-bottom:6px;font-weight:500;
}
.pnav{
  display:flex;justify-content:space-between;gap:20px;margin-top:48px;
  border-top:1px solid var(--line);padding-top:20px;
}
.pnav a{
  text-decoration:none;color:var(--mute);
  font:500 11px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.14em;text-transform:uppercase;transition:color .18s;
}
.pnav a:hover{color:var(--text)}
.pnav a span{
  display:block;font-family:Archivo,sans-serif;font-weight:800;font-size:16px;
  letter-spacing:-.02em;text-transform:uppercase;color:var(--text);margin-top:7px;
}
.pnav a:last-child{text-align:right}

/* ---------- about / simple pages ---------- */
.prose{flex:1;padding:14px 34px 72px}
.prose .inner{max-width:660px;margin:0 auto}
.prose h1{
  font-weight:900;text-transform:uppercase;font-size:clamp(30px,5.2vw,54px);
  line-height:.96;letter-spacing:-.035em;margin:0 0 30px;text-wrap:balance;
}
.prose p{font-size:16.5px;line-height:1.72;color:#BCBCC5;margin:0 0 18px}
.prose p strong{color:var(--text);font-weight:600}
.prose a{color:var(--accent)}
.prose .ch{
  display:flex;flex-wrap:wrap;gap:12px 26px;margin-top:34px;padding-top:26px;
  border-top:1px solid var(--line);
  font:500 11.5px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.1em;text-transform:uppercase;
}
.prose .ch a{text-decoration:none}
.prose .ch a:hover{color:var(--text)}

@media(max-width:900px){
  .stage{perspective:2200px}
}
@media(max-width:820px){
  .pmeta{grid-template-columns:1fr;gap:26px}
  .pcred{border-left:0;padding-left:0;border-top:1px solid var(--line);padding-top:20px}
}
@media(max-width:760px){
  .wcap{flex-direction:column;align-items:flex-start;gap:14px}
}
@media(max-width:640px){
  .top,.wcap,.pwrap,.prose{padding-left:20px;padding-right:20px}
  body.nojs .nojs-grid{padding-left:20px;padding-right:20px}
  .stage{perspective:1600px}
  .top{padding-top:18px;padding-bottom:18px}
  /* Touch: no hover to reveal it, and it describes a mouse anyway. */
  .hint{display:none}
  .plate .lbl{padding:10px 11px}
  .plate .lbl b{font-size:12px}
  .plate .lbl span{font-size:9px}
}
@media(max-width:380px){
  .stage{perspective:1300px}
}