/* =====================================================================
   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);
}

/* On a large laptop or monitor, 1440px left a quarter of the screen
   empty and made everything read small. Every block of prose already
   caps its own line length in `ch`, so widening this only gives the
   pictures and grids more room, never longer lines of text. */
@media (min-width:1500px){
  :root{ --wrap: 1680px; }
}

*,*::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;
}

/* --- hero: name on the left, split image on the right ---------------
   Two columns so the picture reads beside the name rather than under
   it, which keeps the whole hero inside one screen. Below 1000px there
   is no room for two, so the picture drops under the text. */
.hero__inner--split{
  display:grid;
  grid-template-columns:1fr 1.02fr;
  gap:clamp(30px,4.2vw,64px);
  align-items:center;
}
.hero__inner--split .hero__name{ font-size:clamp(2.3rem, 4.5vw, 3.9rem); }
/* Give the picture the bigger share once there is width to spare. Held
   back below 1500px because a narrower text column wraps the name onto
   a second line, which is what the 1.02fr default is protecting. */
@media (min-width:1500px){
  /* The narrower gap, not a narrower text column, is what buys the
     picture its width here. At 643px the text column still holds the
     disciplines on one line and both links on one line; take it below
     that and they both wrap. */
  .hero__inner--split{ grid-template-columns:1fr 1.39fr; gap:40px; }

  /* Then let it run off the right of the page. The container stops at
     --wrap and leaves a wide empty margin on a big screen; this pulls
     the picture's right edge back out to 20px from the edge of the
     screen, which is where most of the extra size comes from. The text
     column is untouched, so the name still lines up with the header.
     max() keeps it at 0 between 1500px and --wrap, where there is no
     margin to reclaim and the maths would otherwise go positive. */
  .heroart{
    margin-right: calc(-1 * max(0px, (100vw - var(--wrap)) / 2 + var(--gut) - 20px));
  }
}
@media (max-width:1000px){
  .hero__inner--split{ grid-template-columns:1fr; gap:clamp(26px,5vw,40px); }
  .hero__inner--split .hero__name{ font-size:clamp(2.3rem, 6vw, 4.6rem); }
}

.heroart{ display:block; position:relative; }
.heroart__frame{
  display:block; position:relative; overflow:hidden;
  border:1px solid var(--rule);
  background:var(--shade);
  transition:border-color .5s var(--ease);
  /* aspect-ratio is set inline from the picture's own ratio, so the
     frame matches the file and nothing is cropped */
}
.heroart:hover .heroart__frame{ border-color:rgba(125,108,255,.45); }
.heroart img{
  width:100%; height:100%; object-fit:cover;
  transition:transform 1.2s var(--ease);
}
.heroart:hover img{ transform:scale(1.03); }
.heroart__tag{
  display:block; text-align:right;
  margin-top:9px;
  transition:color .3s var(--ease);
}
.heroart:hover .heroart__tag{ color:var(--accent-ink); }

/* --- 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);
}