/* =====================================================================
   Ashwin Sailesh Nair — portfolio
   Colours, type and spacing all live in the :root block below.
   Change a value there and it updates across every page.
   ===================================================================== */

:root{
  /* --- colour --- */
  --paper:      #0b0c0e;   /* page background */
  --card:       #14161b;   /* card / panel background */
  --ink:        #ecebe8;   /* body text */
  --muted:      #9a9ca3;   /* secondary text */
  --faint:      #6c6e75;   /* tertiary text, meta */
  --rule:       rgba(255,255,255,.11);   /* hairlines */
  --rule-soft:  rgba(255,255,255,.06);
  --accent:     #7d6cff;   /* the violet — links, active filters, hovers */
  --accent-ink: #a99cff;   /* accent, lightened for small text on dark */
  --shade:      #16181d;   /* image placeholders, overlay ground */

  /* --- type --- */
  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --mono:    "DM Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* --- layout --- */
  --wrap: 1440px;
  --gut:  clamp(18px, 3.6vw, 52px);
  --sect: clamp(56px, 8vw, 116px);

  --ease: cubic-bezier(.22,.61,.36,1);
}

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

html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--display);
  font-size:15px;
  font-weight:400;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.is-locked{ overflow:hidden; }

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{ margin:0; font-weight:600; letter-spacing:-.02em; text-wrap:balance; }

.wrap{
  width:100%; max-width:var(--wrap);
  margin:0 auto; padding-inline:var(--gut);
}

/* utility type */
.mono{
  font-family:var(--mono);
  font-size:.72rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--faint);
  font-weight:400;
}

::selection{ background:var(--accent); color:var(--paper); }

:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
  border-radius:2px;
}

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
  html{ scroll-behavior:auto; }
}


/* =====================================================================
   HEADER
   ===================================================================== */
.hdr{
  border-bottom:1px solid var(--rule);
  background:var(--paper);
  position:sticky; top:0; z-index:600;
}
.hdr__in{
  display:flex; align-items:center; justify-content:space-between;
  gap:24px;
  padding-block:18px;
}
.hdr__name{
  font-family:var(--mono);
  font-size:.78rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ink);
  white-space:nowrap;
}
.hdr__nav{ display:flex; align-items:center; gap:26px; }
.hdr__nav a,
.hdr__nav button{
  font-family:var(--mono);
  font-size:.72rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--muted);
  padding-block:3px;
  border-bottom:1px solid transparent;
  transition:color .25s var(--ease), border-color .25s var(--ease);
}
.hdr__nav a:hover,
.hdr__nav button:hover{ color:var(--ink); border-bottom-color:var(--ink); }
.hdr__nav a.on{ color:var(--ink); border-bottom-color:var(--accent); }

.hdr__burger{ display:none; width:30px; height:30px; position:relative; }
.hdr__burger span{
  position:absolute; left:4px; right:4px; height:1.5px; background:var(--ink);
  transition:transform .3s var(--ease);
}
.hdr__burger span:nth-child(1){ top:11px; }
.hdr__burger span:nth-child(2){ top:17px; }
.hdr.open .hdr__burger span:nth-child(1){ transform:translateY(3px) rotate(45deg); }
.hdr.open .hdr__burger span:nth-child(2){ transform:translateY(-3px) rotate(-45deg); }

@media (max-width:760px){
  .hdr__burger{ display:block; }
  .hdr__nav{
    position:absolute; left:0; right:0; top:100%;
    flex-direction:column; align-items:flex-start; gap:0;
    background:var(--paper);
    border-bottom:1px solid var(--rule);
    padding:6px var(--gut) 20px;
    display:none;
  }
  .hdr.open .hdr__nav{ display:flex; }
  .hdr__nav a, .hdr__nav button{
    font-size:.86rem; padding-block:12px; width:100%;
    border-bottom:1px solid var(--rule-soft);
  }
}


/* =====================================================================
   HERO (home)
   ===================================================================== */
.hero{ padding-block:clamp(48px,9vw,120px) clamp(36px,5vw,64px); }
.hero__name{
  font-size:clamp(2rem, 4.4vw, 3.3rem);
  line-height:1.02;
  letter-spacing:-.035em;
  font-weight:600;
  margin:0;
}
.hero__disc{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px;
  margin-top:20px;
}
.hero__disc span{
  font-family:var(--mono);
  font-size:.76rem; letter-spacing:.05em;
  color:var(--muted);
}
.hero__disc i{ color:var(--accent); font-style:normal; }

.hero__foot{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:8px 26px;
  margin-top:34px;
  padding-top:20px;
  border-top:1px solid var(--rule);
}
.hero__loc{ color:var(--muted); font-size:.9rem; }

.txtlink{
  font-size:.9rem;
  color:var(--accent-ink);
  border-bottom:1px solid var(--rule);
  padding-bottom:2px;
  transition:border-color .25s var(--ease);
}
.txtlink:hover{ border-bottom-color:var(--accent); }


/* =====================================================================
   SECTION HEADS
   ===================================================================== */
.shead{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:16px; flex-wrap:wrap;
  padding-bottom:14px;
  margin-bottom:clamp(18px,2.6vw,30px);
  border-bottom:1px solid var(--rule);
}
.shead__t{
  font-family:var(--mono);
  font-size:.74rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink); font-weight:500;
}
.shead__n{ font-family:var(--mono); font-size:.72rem; color:var(--faint); }


/* =====================================================================
   CARDS — shared image treatment
   ===================================================================== */
.pic{
  position:relative;
  width:100%;
  overflow:hidden;
  background:var(--shade);
}
.pic img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .9s var(--ease);
}
.card:hover .pic img{ transform:scale(1.028); }

/* placeholder shown when a project has no cover image yet */
.pic__ph{
  position:absolute; inset:0;
  background:
    linear-gradient(140deg, #22242a 0%, #17181c 60%, #131418 100%);
}
.pic__ph::after{
  content:""; position:absolute; inset:0;
  background:radial-gradient(circle at 62% 34%, rgba(93,80,230,.30), transparent 60%);
}

/* bottom scrim so overlaid text stays readable on any image */
.pic__scrim{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(10,11,13,0) 38%, rgba(10,11,13,.78) 100%);
}

.card{ display:block; position:relative; }
.card__over{
  position:absolute; left:0; right:0; bottom:0;
  padding:clamp(16px,2.2vw,32px);
  color:#fff;
  display:flex; flex-direction:column; align-items:flex-start; gap:8px;
}
.card__cat{
  font-family:var(--mono);
  font-size:.68rem; letter-spacing:.1em; text-transform:uppercase;
  color:#fff; opacity:.72;
}
.card__title{
  font-size:clamp(1.15rem, 2vw, 1.9rem);
  line-height:1.1; font-weight:600; letter-spacing:-.025em;
  color:#fff;
}
.card__sub{
  font-family:var(--mono);
  font-size:.7rem; letter-spacing:.03em;
  color:#fff; opacity:.66;
}
.card__blurb{
  font-size:.95rem; line-height:1.5;
  color:#fff; opacity:.84;
  max-width:56ch;
  margin-top:2px;
}
.card__tags{ display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; }
.card__tag{
  font-family:var(--mono);
  font-size:.63rem; letter-spacing:.05em;
  padding:4px 9px;
  border:1px solid rgba(255,255,255,.34);
  border-radius:100px;
  color:#fff;
}

/* featured — full-bleed, one per row */
.feat{ display:grid; gap:clamp(14px,1.8vw,24px); }
.feat .pic{ aspect-ratio:16/9; }
@media (max-width:620px){ .feat .pic{ aspect-ratio:4/3; } }

/* archive grid */
.grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:clamp(14px,1.8vw,24px);
}
.grid .pic{ aspect-ratio:4/3; }
@media (max-width:760px){
  .grid{ grid-template-columns:1fr; }
}

.card.is-out{ display:none; }


/* =====================================================================
   FILTER BAR
   ===================================================================== */
.filters{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:clamp(16px,2.4vw,40px);
  padding-bottom:22px;
  margin-bottom:clamp(18px,2.6vw,30px);
  border-bottom:1px solid var(--rule);
}
@media (max-width:760px){ .filters{ grid-template-columns:1fr; gap:18px; } }

.fgroup__label{
  font-family:var(--mono);
  font-size:.68rem; letter-spacing:.11em; text-transform:uppercase;
  color:var(--faint);
  margin-bottom:10px;
}
.fgroup__opts{ display:flex; flex-wrap:wrap; gap:6px; }

.fbtn{
  font-family:var(--mono);
  font-size:.7rem; letter-spacing:.03em;
  padding:6px 12px;
  border:1px solid var(--rule);
  border-radius:100px;
  color:var(--muted);
  background:var(--card);
  transition:color .22s var(--ease), border-color .22s var(--ease),
             background .22s var(--ease);
}
.fbtn:hover{ color:var(--ink); border-color:var(--ink); }
.fbtn.on{
  background:var(--accent); border-color:var(--accent);
  color:var(--paper);
}

.fcount{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:16px; margin-bottom:14px;
}
.fclear{
  font-family:var(--mono); font-size:.7rem;
  letter-spacing:.05em; text-transform:uppercase;
  color:var(--accent-ink);
  border-bottom:1px solid transparent;
}
.fclear:hover{ border-bottom-color:var(--accent); }
.fclear[hidden]{ display:none; }

.empty{
  padding:56px 0;
  text-align:center;
  color:var(--muted);
  border:1px dashed var(--rule);
  border-radius:4px;
}


/* =====================================================================
   PROJECT PAGE
   ===================================================================== */
.pj{ padding-block:clamp(28px,4vw,52px) var(--sect); }

.pj__back{
  font-family:var(--mono); font-size:.7rem;
  letter-spacing:.08em; text-transform:uppercase;
  color:var(--muted);
  display:inline-block; margin-bottom:26px;
}
.pj__back:hover{ color:var(--accent-ink); }

.pj__head{
  display:grid;
  grid-template-columns:1.25fr .75fr;
  gap:clamp(24px,4vw,72px);
  align-items:end;
  padding-bottom:clamp(22px,3vw,38px);
  border-bottom:1px solid var(--rule);
}
@media (max-width:860px){ .pj__head{ grid-template-columns:1fr; align-items:start; } }

.pj__cat{ margin-bottom:12px; }
.pj__title{
  font-size:clamp(1.9rem, 4.6vw, 3.6rem);
  line-height:1.02; letter-spacing:-.035em; font-weight:600;
}
.pj__blurb{
  margin-top:16px;
  font-size:1.02rem; line-height:1.55;
  color:var(--muted); max-width:56ch;
}
.pj__metaList{ display:grid; gap:9px; }
.pj__metaRow{
  display:grid; grid-template-columns:96px 1fr; gap:14px;
  padding-bottom:9px;
  border-bottom:1px solid var(--rule-soft);
  font-size:.88rem;
}
.pj__metaRow:last-child{ border-bottom:0; }
.pj__metaRow dt{
  font-family:var(--mono); font-size:.68rem;
  letter-spacing:.08em; text-transform:uppercase; color:var(--faint);
  padding-top:2px;
}
.pj__metaRow dd{ margin:0; color:var(--ink); }

.pj__hero{ margin-top:clamp(24px,3.4vw,46px); }
.pj__hero .pic{ aspect-ratio:16/9; }

.pj__body{
  margin-top:clamp(28px,4vw,56px);
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,.55fr);
  gap:clamp(24px,4vw,72px);
  align-items:start;
}
@media (max-width:860px){ .pj__body{ grid-template-columns:1fr; } }
.pj__prose p{
  margin:0 0 18px;
  font-size:1.02rem; line-height:1.65;
  color:var(--ink);
  max-width:64ch;
}
.pj__prose p:first-child{ font-size:1.12rem; }

.pj__aside h3{
  font-family:var(--mono); font-size:.68rem;
  letter-spacing:.1em; text-transform:uppercase; color:var(--faint);
  font-weight:400; margin-bottom:12px;
}
.taglist{ display:flex; flex-wrap:wrap; gap:6px; }
.tag{
  font-family:var(--mono);
  font-size:.68rem; letter-spacing:.03em;
  padding:5px 10px;
  border:1px solid var(--rule);
  border-radius:100px;
  color:var(--muted);
  background:var(--card);
}

.btn{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--mono);
  font-size:.72rem; letter-spacing:.08em; text-transform:uppercase;
  padding:12px 22px;
  border-radius:100px;
  border:1px solid var(--ink);
  background:var(--ink); color:var(--paper);
  transition:background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
}
.btn:hover{ background:var(--accent); border-color:var(--accent); color:var(--paper); }
.btn--ghost{ background:transparent; color:var(--ink); border-color:var(--rule); }
.btn--ghost:hover{ background:transparent; color:var(--accent-ink); border-color:var(--accent); }

/* media stack on a project page */
.stack{ display:grid; gap:clamp(16px,2.4vw,34px); margin-top:clamp(28px,4vw,56px); }
.stack figure{ margin:0; }
.stack figcaption{
  font-family:var(--mono); font-size:.68rem;
  letter-spacing:.05em; color:var(--faint);
  margin-top:9px;
}

/* prev / next */
.pjnav{
  display:flex; justify-content:space-between; gap:20px;
  margin-top:var(--sect);
  padding-top:22px;
  border-top:1px solid var(--rule);
}
.pjnav a{ max-width:46%; }
.pjnav span{ display:block; }
.pjnav .t{ font-size:1.02rem; font-weight:600; letter-spacing:-.02em; margin-top:4px; }
.pjnav a:hover .t{ color:var(--accent-ink); }
.pjnav .nx{ text-align:right; margin-left:auto; }


/* =====================================================================
   VIDEO FRAMES
   ===================================================================== */
.vframe{
  position:relative; width:100%;
  aspect-ratio:16/9;
  background:var(--shade);
  overflow:hidden;
  cursor:pointer;
}
.vframe--vertical{ aspect-ratio:9/16; max-width:420px; }
.vframe img{ width:100%; height:100%; object-fit:cover; }
.vframe iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }

.vframe__play{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:66px; height:66px; border-radius:50%;
  display:grid; place-items:center;
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.5);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  transition:background .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
}
.vframe:hover .vframe__play{
  background:var(--accent); border-color:var(--accent);
  transform:translate(-50%,-50%) scale(1.06);
}
.vframe__play svg{ width:18px; height:18px; margin-left:3px; fill:#fff; }


/* =====================================================================
   DEMOS — wipe slider + pass switcher
   ===================================================================== */
.demo{ margin-top:clamp(28px,4vw,52px); }
.demo__label{ margin-bottom:12px; }

.wipe{
  position:relative; aspect-ratio:16/9;
  overflow:hidden; background:var(--shade);
  cursor:ew-resize; user-select:none; touch-action:none;
}
.wipe__layer{ position:absolute; inset:0; }
.wipe__layer img{ width:100%; height:100%; object-fit:cover; }
.wipe__layer--after{ clip-path:inset(0 0 0 var(--pos,50%)); }
.wipe__cap{
  position:absolute; bottom:14px;
  font-family:var(--mono); font-size:.63rem;
  letter-spacing:.06em; text-transform:uppercase;
  background:rgba(10,11,13,.72);
  padding:5px 11px; border-radius:100px; color:#fff;
  pointer-events:none;
}
.wipe__cap--l{ left:14px; }
.wipe__cap--r{ right:14px; }
.wipe__handle{
  position:absolute; top:0; bottom:0; left:var(--pos,50%);
  width:2px; margin-left:-1px; background:#fff;
  pointer-events:none; box-shadow:0 0 14px rgba(0,0,0,.45);
}
.wipe__knob{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:40px; height:40px; border-radius:50%;
  background:#fff; display:grid; place-items:center;
  box-shadow:0 4px 16px rgba(0,0,0,.35);
}
.wipe__knob svg{ width:17px; height:17px; fill:var(--ink); }

.ptabs{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:12px; }
.pstage{ position:relative; aspect-ratio:16/9; overflow:hidden; background:var(--shade); }
.pstage img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity .4s var(--ease);
}
.pstage img.on{ opacity:1; }

/* placeholder tile used inside demos */
.phbox{
  position:absolute; inset:0; display:grid; place-items:center;
  background:repeating-linear-gradient(45deg,#1c1e24 0 12px,#17191e 12px 24px);
  opacity:0; transition:opacity .4s var(--ease);
}
.phbox.on{ opacity:1; }
.phbox--alt{ background:repeating-linear-gradient(45deg,#2a2d35 0 12px,#24262d 12px 24px); }
.phbox span{
  font-family:var(--mono); font-size:.66rem;
  letter-spacing:.1em; text-transform:uppercase; color:#8b8d95;
  text-align:center; padding:0 18px;
}


/* =====================================================================
   BIO PAGE
   ===================================================================== */
.bio{ padding-block:clamp(36px,5vw,72px) var(--sect); }
.bio__top{
  display:grid; grid-template-columns:1.15fr .85fr;
  gap:clamp(26px,4vw,72px); align-items:start;
}
@media (max-width:860px){ .bio__top{ grid-template-columns:1fr; } }

.bio__intro{
  font-size:clamp(1.25rem,2.4vw,1.85rem);
  line-height:1.28; letter-spacing:-.025em; font-weight:500;
  max-width:24ch;
}
.bio__prose p{
  margin:0 0 18px; color:var(--muted);
  font-size:1rem; line-height:1.68; max-width:60ch;
}
.bio__prose p:first-child{ color:var(--ink); }

.bio__portrait{ aspect-ratio:4/5; }

.bio__sect{ margin-top:var(--sect); }

.rolerow{
  display:grid; grid-template-columns:150px 1fr 1fr;
  gap:20px; padding:18px 0;
  border-bottom:1px solid var(--rule-soft);
  align-items:baseline;
}
.rolerow:first-of-type{ border-top:1px solid var(--rule); }
@media (max-width:760px){
  .rolerow{ grid-template-columns:1fr; gap:4px; }
}
.rolerow__co{ font-size:1.05rem; font-weight:600; letter-spacing:-.02em; }
.rolerow__ti{ color:var(--accent-ink); font-size:.92rem; }
.rolerow__no{ color:var(--muted); font-size:.9rem; }

.twocol{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(26px,4vw,72px);
}
@media (max-width:760px){ .twocol{ grid-template-columns:1fr; gap:34px; } }

.filmrow, .edurow{
  padding:13px 0; border-bottom:1px solid var(--rule-soft);
}
.filmrow:first-child, .edurow:first-child{ border-top:1px solid var(--rule); }
.filmrow{ font-size:1rem; font-weight:500; }
.edurow__d{ font-size:1rem; font-weight:600; letter-spacing:-.02em; }
.edurow__i{ color:var(--muted); font-size:.9rem; }
.edurow__n{ color:var(--faint); font-size:.84rem; }

.skillgrid{ display:grid; gap:26px; }
.skillgrid h3{
  font-family:var(--mono); font-size:.68rem; font-weight:400;
  letter-spacing:.1em; text-transform:uppercase; color:var(--faint);
  margin-bottom:10px;
}


/* =====================================================================
   CONTACT PAGE
   ===================================================================== */
.ct{ padding-block:clamp(48px,9vw,120px) var(--sect); }
.ct__h{
  font-size:clamp(1.9rem,4.4vw,3.2rem);
  line-height:1.04; letter-spacing:-.035em; font-weight:600;
}
.ct__b{ margin-top:20px; max-width:48ch; color:var(--muted); font-size:1.04rem; }
.ct__mail{
  display:inline-block; margin-top:36px;
  font-size:clamp(1.2rem,3.2vw,2.2rem);
  font-weight:500; letter-spacing:-.03em;
  border-bottom:1px solid var(--rule);
  padding-bottom:5px; word-break:break-all;
  transition:color .25s var(--ease), border-color .25s var(--ease);
}
.ct__mail:hover{ color:var(--accent-ink); border-bottom-color:var(--accent); }
.ct__links{ display:flex; flex-wrap:wrap; gap:8px; margin-top:40px; }
.ct__note{ margin-top:34px; color:var(--faint); font-size:.9rem; }


/* =====================================================================
   FOOTER
   ===================================================================== */
.foot{ border-top:1px solid var(--rule); padding-block:22px; }
.foot__in{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; flex-wrap:wrap;
}
.foot__links{ display:flex; flex-wrap:wrap; gap:18px; }
.foot__links a:hover{ color:var(--ink); }


/* =====================================================================
   REEL OVERLAY
   ===================================================================== */
.reel{
  position:fixed; inset:0; z-index:900;
  display:grid; place-items:center;
  padding:clamp(16px,4vw,56px);
  background:rgba(14,15,18,.93);
  opacity:0; transition:opacity .3s var(--ease);
}
.reel[hidden]{ display:none; }
.reel.on{ opacity:1; }
.reel__stage{
  width:100%; max-width:1360px; aspect-ratio:16/9;
  background:#000; overflow:hidden;
  transform:scale(.98); transition:transform .35s var(--ease);
}
.reel.on .reel__stage{ transform:none; }
.reel__stage--vertical{ aspect-ratio:9/16; width:auto; height:min(86svh,900px); max-width:100%; }
.reel__stage iframe{ width:100%; height:100%; border:0; display:block; }
.reel__close{
  position:absolute; top:clamp(12px,3vw,26px); right:clamp(12px,3vw,26px);
  width:44px; height:44px; border-radius:50%;
  display:grid; place-items:center;
  font-size:1.7rem; line-height:1;
  border:1px solid rgba(255,255,255,.3); color:#fff;
  transition:background .25s var(--ease), transform .25s var(--ease);
}
.reel__close:hover{ background:var(--accent); border-color:var(--accent); transform:rotate(90deg); }


/* =====================================================================
   HOME — ambient hero, showreel band, live tool demos
   ===================================================================== */
.hero{ position:relative; overflow:hidden; }
.hero__glow{
  position:absolute; z-index:0; pointer-events:none;
  top:-60%; left:50%; width:min(1400px,140vw); aspect-ratio:1;
  transform:translateX(-50%);
  background:
    radial-gradient(circle at 50% 45%, rgba(125,108,255,.16) 0%, transparent 48%),
    radial-gradient(circle at 30% 62%, rgba(60,150,255,.09) 0%, transparent 52%);
  filter:blur(24px);
  animation:drift 24s ease-in-out infinite alternate;
}
@keyframes drift{
  from{ transform:translateX(-52%) translateY(0) scale(1); }
  to  { transform:translateX(-48%) translateY(4%) scale(1.09); }
}
.hero .wrap{ position:relative; z-index:1; }

/* full-bleed showreel band */
.reelband{
  position:relative;
  width:100%; aspect-ratio:21/9;
  overflow:hidden; cursor:pointer;
  background:var(--shade);
  border-block:1px solid var(--rule);
}
@media (max-width:760px){ .reelband{ aspect-ratio:16/9; } }
.reelband img{ width:100%; height:100%; object-fit:cover; }
.reelband__scrim{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(11,12,14,.25) 0%, rgba(11,12,14,.72) 100%);
  transition:background .45s var(--ease);
}
.reelband:hover .reelband__scrim{ background:linear-gradient(180deg, rgba(11,12,14,.12) 0%, rgba(11,12,14,.6) 100%); }
.reelband__in{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:16px; text-align:center; padding:20px;
}
.reelband__play{
  width:76px; height:76px; border-radius:50%;
  display:grid; place-items:center;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.42);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  transition:background .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
}
.reelband:hover .reelband__play{
  background:var(--accent); border-color:var(--accent);
  transform:scale(1.07);
}
.reelband__play svg{ width:21px; height:21px; margin-left:3px; fill:#fff; }
.reelband__label{
  font-family:var(--mono); font-size:.72rem;
  letter-spacing:.16em; text-transform:uppercase; color:#fff;
}


/* --- hero: live splat field ---------------------------------------- */
.hero--tall{
  min-height:min(92svh, 900px);
  display:flex; flex-direction:column; justify-content:center;
  padding-block:clamp(80px,12vw,150px) clamp(56px,8vw,110px);
  border-bottom:1px solid var(--rule);
}
.hero__canvas{
  position:absolute; inset:0; z-index:0;
  width:100%; height:100%;
  pointer-events:none;
}
.hero__inner{ position:relative; z-index:2; }
.hero--tall .hero__name{ font-size:clamp(2.3rem, 6vw, 4.6rem); }
.hero--tall .hero__disc span{ font-size:.82rem; }

.hero__cue{
  position:absolute; z-index:2;
  left:var(--gut); bottom:26px;
  display:flex; align-items:center; gap:12px;
  color:var(--faint);
}
.hero__cue::after{
  content:""; width:52px; height:1px;
  background:linear-gradient(90deg,var(--faint),transparent);
  position:relative; overflow:hidden;
}
@media (max-width:760px){ .hero__cue{ display:none; } }

/* --- selected work: hover index ------------------------------------ */
.index{
  display:grid;
  grid-template-columns:1fr .82fr;
  gap:clamp(28px,4vw,64px);
  align-items:start;
}
@media (max-width:900px){ .index{ grid-template-columns:1fr; } }

.ixrow{
  display:grid;
  grid-template-columns:38px 1fr auto;
  gap:16px; align-items:baseline;
  padding:clamp(16px,2vw,24px) 0;
  border-top:1px solid var(--rule-soft);
  transition:border-color .3s var(--ease);
}
.ixrow:last-child{ border-bottom:1px solid var(--rule-soft); }
.ixrow__n{ color:var(--faint); transition:color .3s var(--ease); }
.ixrow__t{
  font-size:clamp(1.25rem,2.6vw,2.05rem);
  font-weight:600; letter-spacing:-.03em; line-height:1.08;
  transition:color .3s var(--ease), transform .45s var(--ease);
}
.ixrow__m{ text-align:right; transition:color .3s var(--ease); }

.ixrow.on{ border-top-color:var(--accent); }
.ixrow.on .ixrow__n{ color:var(--accent); }
.ixrow.on .ixrow__t{ color:var(--accent-ink); transform:translateX(6px); }
.ixrow.on .ixrow__m{ color:var(--muted); }

@media (max-width:640px){
  .ixrow{ grid-template-columns:30px 1fr; }
  .ixrow__m{ grid-column:2; text-align:left; margin-top:2px; }
}

/* preview panel beside the list */
.index__stage{
  position:relative;
  aspect-ratio:4/3;
  overflow:hidden;
  background:var(--shade);
  border:1px solid var(--rule-soft);
  position:sticky; top:88px;
}
@media (max-width:900px){ .index__stage{ display:none; } }
.ixpic{
  position:absolute; inset:0;
  opacity:0; transform:scale(1.03);
  transition:opacity .5s var(--ease), transform .8s var(--ease);
}
.ixpic.on{ opacity:1; transform:none; }
.ixpic img{ width:100%; height:100%; object-fit:cover; }
.ixpic__tag{
  position:absolute; left:14px; bottom:14px;
  font-family:var(--mono); font-size:.64rem;
  letter-spacing:.1em; text-transform:uppercase;
  background:rgba(10,11,13,.7); color:#fff;
  padding:5px 11px; border-radius:100px;
}

/* --- tools: one demo at a time -------------------------------------- */
.tsw__tabs{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:20px; }
.tswtab{
  font-family:var(--mono);
  font-size:.72rem; letter-spacing:.05em;
  padding:9px 17px; border-radius:100px;
  border:1px solid var(--rule); color:var(--muted);
  background:var(--card);
  transition:color .22s var(--ease), border-color .22s var(--ease), background .22s var(--ease);
}
.tswtab:hover{ color:var(--ink); border-color:var(--ink); }
.tswtab.on{ background:var(--accent); border-color:var(--accent); color:var(--paper); }

.tswpanel{ display:none; }
.tswpanel.on{ display:block; }
.tswpanel__head{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:16px 26px; flex-wrap:wrap; margin-bottom:18px;
}
.tswpanel__line{ color:var(--muted); font-size:.97rem; max-width:62ch; }
.tswpanel .demo{ margin-top:0; }

/* --- closing strip --------------------------------------------------- */
.cta{ border-top:1px solid var(--rule); padding-block:clamp(40px,6vw,80px); }
.cta__in{
  display:flex; align-items:center; justify-content:space-between;
  gap:22px; flex-wrap:wrap;
}
.cta__t{
  margin:0;
  font-size:clamp(1.15rem,2.6vw,1.9rem);
  font-weight:500; letter-spacing:-.025em;
  max-width:24ch;
}

/* --- work strip: a band that keeps moving ---------------------------- */
.strip{
  position:relative;
  overflow:hidden;
  border-bottom:1px solid var(--rule);
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.strip__track{
  display:flex;
  width:max-content;
  animation:strip-slide 64s linear infinite;
}
.strip:hover .strip__track,
.strip:focus-within .strip__track{ animation-play-state:paused; }
@keyframes strip-slide{
  from{ transform:translateX(0); }
  to  { transform:translateX(-50%); }
}

.strip__item{
  position:relative;
  flex:none;
  width:clamp(210px, 24vw, 360px);
  aspect-ratio:16/10;
  overflow:hidden;
  background:var(--shade);
  border-right:1px solid var(--rule-soft);
}
.strip__item img{
  width:100%; height:100%; object-fit:cover;
  filter:saturate(.92) brightness(.88);
  transition:transform .7s var(--ease), filter .4s var(--ease);
}
.strip__item:hover img{ transform:scale(1.06); filter:saturate(1.05) brightness(1); }

.strip__cap{
  position:absolute; left:12px; bottom:10px;
  font-family:var(--mono); font-size:.62rem;
  letter-spacing:.09em; text-transform:uppercase;
  color:#fff;
  text-shadow:0 1px 10px rgba(0,0,0,.9);
  opacity:0; transform:translateY(4px);
  transition:opacity .3s var(--ease), transform .3s var(--ease);
}
.strip__item:hover .strip__cap{ opacity:1; transform:none; }

@media (prefers-reduced-motion:reduce){
  .strip__track{ animation:none; }
  .strip{ overflow-x:auto; }
}

/* CV buttons sit side by side */
[data-bind="cv"]{ display:flex; flex-wrap:wrap; gap:10px; }

/* --- film posters on the bio page ------------------------------------ */
.filmgrid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(118px, 1fr));
  gap:clamp(12px,1.6vw,20px);
}
.filmcard__art{
  position:relative;
  aspect-ratio:2/3;
  overflow:hidden;
  background:var(--shade);
  border:1px solid var(--rule-soft);
  display:grid; place-items:center;
}
.filmcard__art img{
  width:100%; height:100%; object-fit:cover;
  filter:saturate(.95);
  transition:transform .6s var(--ease), filter .4s var(--ease);
}
.filmcard:hover .filmcard__art img{ transform:scale(1.04); filter:saturate(1.05); }
.filmcard__none{
  position:relative;
  font-size:.6rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--faint); text-align:center; padding:0 10px;
}
.filmcard__t{
  margin-top:10px;
  font-size:.95rem; font-weight:600; letter-spacing:-.015em;
}
.filmcard__n{
  margin-top:3px;
  font-size:.78rem; line-height:1.4; color:var(--faint);
}

/* --- site-wide space field ------------------------------------------- */
/* A fixed canvas behind every page. The header keeps its solid ground so
   the nav stays readable; everything else floats over the stars. */
.space{
  position:fixed; inset:0;
  z-index:0;
  width:100%; height:100%;
  pointer-events:none;
}
body > header,
body > main,
body > footer{ position:relative; z-index:1; }

/* --- filter bar: one flat row, one active at a time ------------------ */
.fbar{
  display:flex; flex-wrap:wrap; gap:7px;
  padding-bottom:22px;
  margin-bottom:clamp(18px,2.6vw,30px);
  border-bottom:1px solid var(--rule);
}

/* --- university gallery ---------------------------------------------- */
.unigrid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(min(100%,340px), 1fr));
  gap:clamp(18px,2.4vw,32px);
}
.unicard{ margin:0; }
.unicard__art{
  position:relative;
  aspect-ratio:16/9;
  overflow:hidden;
  background:var(--shade);
  border:1px solid var(--rule-soft);
}
.unicard__art img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .7s var(--ease);
}
.unicard:hover .unicard__art img{ transform:scale(1.035); }
.unicard figcaption{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:14px; flex-wrap:wrap;
  margin-top:11px;
}
.unicard__t{ font-size:1rem; font-weight:600; letter-spacing:-.015em; }
.unicard__m{ font-size:.68rem; }

/* --- self-hosted video, played in the page --------------------------- */
.vid{
  display:block;
  width:100%;
  aspect-ratio:16/9;
  background:#000;
  border:1px solid var(--rule-soft);
}