@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500&display=swap');

/* =========================================================
   BASE
   ========================================================= */

html, body{
  height:100%;
  overflow-x:hidden;
}

body{
  margin:0;
  background:black;
  color:white;
  font-family:'Inter', -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* default: no scroll (desktop folder pages) */
.no-scroll{ overflow:hidden; }

/* allow scroll when needed (project pages etc.) */
.allow-scroll{ overflow:auto; }

/* =========================================================
   TOP BAR
   ========================================================= */

.topbar{
  height:90px;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
}

.brand{
  font-size:18px;
  font-weight:500;
  letter-spacing:0.08em;
  text-transform:uppercase;
}

/* =========================================================
   WRAP
   ========================================================= */

.wrap{
  max-width:1200px;
  margin:0 auto;
  padding:0 14px 40px;
}

/* Project detail pages get width, but NOT title spacing here anymore */
.project-detail .wrap{
  max-width:1600px;
  padding:0 24px 40px;
}

/* =========================================================
   DESKTOP (HOME / WORK / FILM)
   ========================================================= */

.desktop{
  position:relative;
  height:calc(100vh - 90px);
  min-height:520px;
  top:4vh;
  left:-2vw;
}

/* FILM: nudge whole cluster west + a touch up */
.desktop-film{
  left:-5vw;
  top:-3vh;
}

/* folder buttons */

.folder{
  position:absolute;
  width:220px;
  height:74px;

  background:black;
  border:1px solid rgba(255,255,255,0.18);
  border-radius:18px;

  display:flex;
  align-items:center;
  justify-content:center;

  text-decoration:none;

  text-transform:lowercase;
  letter-spacing:0.06em;
  font-weight:500;
  font-size:14px;

  /* invisible label until hover (your design choice) */
  color:rgba(255,255,255,0);

  transition:
    background 180ms ease,
    border-color 180ms ease,
    color 180ms ease;
}

.folder:hover{
  background:white;
  border-color:rgba(255,255,255,0.85);
  color:black;
}

/* Prevent hover flash after back/forward navigation */
.no-hover .folder{
  transition:none !important;
}
.no-hover .folder:hover{
  background:black !important;
  border-color:rgba(255,255,255,0.18) !important;
  color:rgba(255,255,255,0) !important;
}

/* positioning: home */
.pos-work{
  left:25%;
  top:180px;
  transform:translateX(-50%);
}
.pos-contact{
  left:75%;
  top:200px;
  transform:translateX(-50%);
}
.pos-about{
  left:50%;
  top:380px;
  transform:translateX(-50%);
}

/* WORK page grid */
.grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:40px;
  margin-top:40px;
}
.grid .folder{
  position:relative;
  left:auto;
  top:auto;
  transform:none !important;
}
.pos-film{ left:18%; top:20%; }
.pos-music{ left:46%; top:30%; }
.pos-other{ left:72%; top:40%; }

/* vertical page title (work / film) */
h1{
  position:fixed;
  left:40px;
  top:50%;
  transform:translateY(-50%) rotate(180deg);
  writing-mode:vertical-rl;

  text-transform:uppercase;
  letter-spacing:0.2em;
  font-size:28px;
}

/* =========================================================
   FILM ELLIPSE POSITIONS
   ========================================================= */

:root{
  --film-cx: 50%;
  --film-cy: 52%;
  --film-rx: 22vw;
  --film-ry: 18vh;
}

/* Top band: 1–3 */
.pos-film-1{ left: calc(var(--film-cx) - var(--film-rx)); top:  calc(var(--film-cy) - var(--film-ry)); }
.pos-film-2{ left: var(--film-cx);                        top:  calc(var(--film-cy) - var(--film-ry) - 6vh); }
.pos-film-3{ left: calc(var(--film-cx) + var(--film-rx)); top:  calc(var(--film-cy) - var(--film-ry)); }

/* Bottom U: play my song / games / sheerly touch-ya */
.pos-film-7{
  left: calc(var(--film-cx) - var(--film-rx));
  top: calc(var(--film-cy) + (var(--film-ry) * 0.22));
}

.pos-film-6{
  left: var(--film-cx);
  top: calc(var(--film-cy) + (var(--film-ry) * 0.52));
}

.pos-film-5{
  left: calc(var(--film-cx) + var(--film-rx));
  top: calc(var(--film-cy) + (var(--film-ry) * 0.22));
}

/* =========================================================
   BACK ARROW
   ========================================================= */

.nav-back{
  position:fixed;
  left:40px;
  top:34px;

  font-size:34px;
  font-weight:500;
  letter-spacing:0.2em;

  color:white;
  text-decoration:none;

  transform:rotate(90deg);

  opacity:0.9;
  z-index:20;

  transition: opacity 160ms ease, letter-spacing 160ms ease;
}

.nav-back:hover{
  opacity:1;
  letter-spacing:0.24em;
}

/* =========================================================
   PROJECT PAGE
   ========================================================= */

.project-page{
  position:relative;
  min-height:auto;
  height:auto;
  max-width:1600px;
  margin:0 auto;
  overflow-x:hidden;

  /* permanent reserved lane for vertical title */
  --title-lane: 50px;
  padding-left:var(--title-lane);
  box-sizing:border-box;
}

/* Vertical project title lives inside its own reserved lane */
.project-title-vertical{
  position:fixed;
  left:40px;
  top:50%;
  transform:translateY(-50%) rotate(180deg);
  writing-mode:vertical-rl;

  text-transform:uppercase;
  letter-spacing:0.2em;
  font-size:28px;
  font-weight:500;

  z-index:10;
  pointer-events:none;

  /* keeps the title visually centered inside the reserved lane */
  width:70px;
  text-align:center;
}

@media (max-width: 1100px){
  .project-page{
    --title-lane: 125px;
  }
}

@media (max-width: 900px){
  .project-page{
    --title-lane: 110px;
  }
}

@media (max-width: 640px){
  .project-page{
    --title-lane: 92px;
  }

  .project-title-vertical{
    left:22px;
    font-size:24px;
    letter-spacing:0.16em;
    width:56px;
  }

  .nav-back{
    left:22px;
  }
}

/* Video */
.video-wrap{
  width:100%;
  aspect-ratio:16 / 9;
  border-radius:16px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,0.14);
  box-shadow:0 0 0 1px rgba(255,255,255,0.05) inset;
}
.video-wrap iframe{
  width:100%;
  height:100%;
  display:block;
}

/* Blurb + inline links */
.project-blurb{
  margin-top:14px;
  margin-bottom:16px;
  font-size:12px;
  letter-spacing:0.06em;
  opacity:0.7;
}

.inline-link{
  color:rgba(255,255,255,0.9);
  text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,0.25);
  padding-bottom:1px;
  text-transform:none;
}
.inline-link:hover{
  border-bottom-color:rgba(255,255,255,0.85);
}

.lowercase-link{
  text-transform:none;
}

/* Shared typography for credits + laurels */
.meta-head{
  font-size:12px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  margin-top:18px;
  margin-bottom:10px;
  opacity:0.85;
}

.meta-body{
  font-size:14px;
  line-height:1.55;
  opacity:0.9;
}

/* =========================================================
   STILLS DECK (shared)
   ========================================================= */

.stills-head{
  width:100%;
  text-transform:uppercase;
  letter-spacing:0.14em;
  font-size:12px;
  opacity:0.9;
  margin-bottom:8px;
  text-align:right;
}

.stills-deck{
  position:relative;
  width:100%;
  aspect-ratio:16 / 9;
  height:auto;
  min-width:320px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,0.10);
  overflow:visible;
}

/* GAMES — override size + ratio */
.project-page--games .stills-deck,
.project-page--games .stills-deck--hero{
  aspect-ratio: 1.43 / 1;
  width: 640px;
  max-width: 90vw;
}

/* Cards */
.stills-card{
  position:absolute;
  inset:0;
  border:0;
  padding:0;
  margin:0;
  background:transparent;
  border-radius:18px;
  overflow:hidden;
  cursor:grab;
  transform-origin:center;
  transition: transform 180ms ease, opacity 180ms ease;
  box-shadow:0 10px 36px rgba(0,0,0,0.6);
}
.stills-card:active{ cursor:grabbing; }

.stills-card img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  user-select:none;
  pointer-events:none;
}

/* Stack preview */
.stills-card:nth-child(1){ transform:translate3d(0,0,0); }
.stills-card:nth-child(2){ transform:translate3d(10px,10px,0); }
.stills-card:nth-child(3){ transform:translate3d(20px,20px,0); }
.stills-card:nth-child(4){ transform:translate3d(30px,30px,0); }
.stills-card:nth-child(n+5){ transform:translate3d(40px,40px,0); opacity:0.98; }

/* =========================================================
   VIDEO PROJECT LAYOUT (Keyless etc.)
   ========================================================= */

.project-grid--video{
  display:grid;
  grid-template-columns:minmax(720px, 2fr) minmax(320px, 0.9fr);
  grid-template-rows:auto auto;
  column-gap:36px;
  row-gap:16px;
  padding:48px 48px 48px 24px;
  box-sizing:border-box;
  align-items:start;
}

/* top row */
.media-left{ grid-column:1; grid-row:1; }
.media-right{ grid-column:2; grid-row:1; }

/* keep stills aligned with video top */
.media-right .stills-deck{
  margin-top:0;
}

/* bottom row (shared baseline) */
.project-bottom-row{
  grid-column:1 / span 2;
  grid-row:2;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:72px;
  align-items:start;
}

.bottom-col--right{ text-align:right; }


/* =========================================================
   STILLS-FIRST PROJECT LAYOUT (Tail of Anguish etc.)
   ========================================================= */

.project-grid--stills{
  display:grid;
  grid-template-columns:1fr;
  gap:18px;          /* was 36px */
  padding:32px 72px; /* was 48px */
}

.stills-hero{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
}

.stills-head--center{
  position:absolute;

  top:-26px;
  right:0;

  text-align:right;

  letter-spacing:0.14em;
  font-size:12px;
  opacity:0.9;
}

/* Give the stills stack room so it doesn't cover the blurb below */
.stills-deck--hero{
  width:min(1000px,70vw);

  aspect-ratio:16 / 9;

  height:auto; /* overrides the shared stills-deck height */

  border-radius:22px;

  margin-top:-10px;     /* was 8px */
  margin-bottom:34px;   /* was 90px */
}

.project-page--games .stills-deck--hero{
  aspect-ratio: 1.43 / 1;
}

/* Ensure blurb renders above any overflowing cards/lines */
.project-blurb--center{
  position: relative;
  z-index: 5;
}

/* Bottom row: credits left, laurels right */
.project-bottom{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:72px;
  align-items:start;
  margin-top:-10px; /* pulls credits/laurels upward */
}

/* Tail of Anguish: don't use the centered label block */
.project-grid--stills .stills-head--center{
  display:none;
}

/* Tail of Anguish: anchor STILLS to the deck, aligned to the back-of-stack edge */
.project-grid--stills .stills-deck--hero{
  position: relative; /* gives the pseudo-element a positioning context */
}

.project-grid--stills .stills-deck--hero::after{
  content:"STILLS";
  position:absolute;

  top:-16px;
  right:-30px;
  transform:translateX(-42px);

  font-size:12px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  opacity:0.9;

  white-space:nowrap;
  pointer-events:none;
  line-height:1;

  z-index:20;   /* ensures it renders above the card stack */
}

/* =========================================================
   LIGHTBOX (optional; kept from your file)
   ========================================================= */

.stills-lightbox{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.78);
  backdrop-filter:blur(10px);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:9999;
  padding:40px;
  box-sizing:border-box;
}
.stills-lightbox.is-open{ display:flex; }

.stills-lightbox-inner{
  width:min(1200px,92vw);
  aspect-ratio:16 / 9;

  border-radius:18px;
  overflow:hidden;

  border:1px solid rgba(255,255,255,0.16);
  box-shadow:0 20px 70px rgba(0,0,0,0.65);
  background:rgba(0,0,0,0.25);
}
.stills-lightbox-inner img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
  opacity:1;
  transition:opacity 360ms ease;
}

.stills-lightbox-inner img.is-fading{
  opacity:0.2;
}

/* =========================================================
   PORTRAIT DESKTOP (tall + narrow windows)
   Forces clean vertical stacking on project pages
   ========================================================= */

@media (max-aspect-ratio: 4/5){

  /* give the page room and stop wide-layout padding from crushing */
  .project-detail .wrap{
    padding: 0 24px 40px;
  }

  /* VIDEO projects (Keyless etc.): stack everything vertically */
  .project-grid--video{
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto;
    row-gap: 20px;
    padding: 28px 24px;
  }

  .media-left{ grid-column: 1; grid-row: 1; }
  .media-right{ grid-column: 1; grid-row: 2; }

  /* bottom row becomes a normal vertical flow */
  .project-bottom-row{
    grid-column: 1;
    grid-row: 3;
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .bottom-col--right{
    text-align: left;
  }

  /* Make stills feel like a proper 16:9 “section” in portrait mode */
  .media-right .stills-deck{
    width: min(980px, 92vw);
    aspect-ratio: 16 / 9;
    height: auto;
    margin-top: 0;
  }

  /* If you want “stills” label to behave like a section header in portrait: */
  .media-right .stills-head{
    text-align: left;
    margin-bottom: 10px;
  }

  /* OPTIONAL: tighten the card stack offsets so it doesn't sprawl */
  .stills-card:nth-child(2){ transform:translate3d(8px,8px,0); }
  .stills-card:nth-child(3){ transform:translate3d(16px,16px,0); }
  .stills-card:nth-child(4){ transform:translate3d(24px,24px,0); }
  .stills-card:nth-child(n+5){ transform:translate3d(32px,32px,0); opacity:0.98; }
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1180px){
  .project-detail .wrap{
    padding:0 18px 40px;
  }

  .project-grid--video{
    grid-template-columns:1fr;
    grid-template-rows:auto auto auto;
    padding:26px 18px;
  }

  .media-left{ grid-column:1; grid-row:1; }
  .media-right{ grid-column:1; grid-row:2; }
  .media-right .stills-deck{
    margin-top:0;
    min-width:0;
    width:100%;
    max-width:none;
  }

  .project-bottom-row{
    grid-column:1;
    grid-row:3;
    grid-template-columns:1fr;
    gap:26px;
  }

  .project-grid--stills{
    padding:26px 18px;
  }

  .stills-deck--hero{
    width:100%;
    max-width:100%;
    min-width:0;
    aspect-ratio:16 / 9;
    height:auto;
    margin-left:0;
    margin-right:0;
  }

  .project-bottom{
    grid-template-columns:1fr;
    gap:26px;
  }

  .bottom-col--right{
    text-align:left;
  }
}

/* =========================================================
   CONTACT PAGE
   ========================================================= */

.contact-wrap{
  height:calc(100vh - 90px);
  display:grid;
  place-items:center;
  padding:0 18px;
  box-sizing:border-box;
}

.contact-card{
  width:min(520px,92vw);

  border:1px solid rgba(255,255,255,0.18);
  border-radius:18px;

  padding:26px 28px;
  box-sizing:border-box;

  text-align:center; /* ✅ center contents */
}

.contact-list{
  display:grid;
  gap:16px;
  justify-items:center; /* ✅ center each row block */
}

.contact-row{
  display:inline-grid;                 /* ✅ shrink to content */
  grid-template-columns:22px auto;
  column-gap:14px;
  align-items:center;
  justify-content:center;
}

.contact-row svg{
  width:18px;
  height:18px;
  opacity:0.85;
}

.contact-link{
  color:rgba(255,255,255,0.88);
  text-decoration:none;

  letter-spacing:0.03em;

  border-bottom:1px solid rgba(255,255,255,0.25);
  padding-bottom:2px;

  width:fit-content;
}

.contact-link:hover{
  border-bottom-color:rgba(255,255,255,0.85);
}

/* =========================================================
   KEYLESS-SPECIFIC STILLS
   ========================================================= */

.media-right--keyless{
  width:100%;
}

.media-right--keyless .stills-head{
  text-align:right;
  margin-bottom:10px;
}

.media-right--keyless .stills-deck{
  width:100%;
  min-width:0;
  max-width:900px;
  aspect-ratio:4 / 3;
  margin-left:auto;
}

/* =========================================================
   KEYLESS PORTRAIT SPACING
   ========================================================= */

@media (max-width: 1180px){
  .media-right--keyless{
    margin-bottom: 90px;
  }
}

.lightbox-close{
  position:absolute;
  top:20px;
  right:24px;
  z-index:10001;

  background:transparent;
  border:0;
  color:white;

  font-family:'Inter', -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size:34px;
  font-weight:500;
  letter-spacing:0.08em;
  line-height:1;

  cursor:pointer;
  opacity:0.9;
}

.lightbox-close:hover{
  opacity:1;
}

.lightbox-nav{
  position:absolute;
  top:50%;
  z-index:10001;

  background:transparent;
  border:0;
  color:white;

  font-family:'Inter', -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size:52px;
  font-weight:500;
  letter-spacing:0.12em;
  line-height:1;

  cursor:pointer;
  opacity:0.9;
  padding:10px 16px;
}

.lightbox-nav:hover{
  opacity:1;
}

.lightbox-prev{
  left:20px;
  transform:translateY(-50%) rotate(90deg);
}

.lightbox-next{
  right:20px;
  transform:translateY(-50%) rotate(-90deg);
}

@media (max-aspect-ratio: 4/5){
  .project-grid--stills{
    padding:28px 24px;
  }

  .stills-hero{
    align-items:stretch;
  }

  .stills-deck--hero{
    width:100%;
    max-width:100%;
    min-width:0;
    aspect-ratio:16 / 9;
    height:auto;
  }
}

/* =========================================================
   CHASHMISH STILLS (2.39:1 SCOPE)
   ========================================================= */

.project-page--chashmish .stills-deck--hero{
  width:100%;
  max-width:100%;
  min-width:0;
  aspect-ratio:2.39 / 1;
  height:auto;
}

.project-page--chashmish .stills-card img{
  object-fit:cover;
}

.project-page--chashmish .stills-lightbox-inner{
  width:min(1400px, 94vw);
  aspect-ratio:2.39 / 1;
}

/* =========================================================
   ABOUT PAGE
   ========================================================= */

.about-wrap{
  height:calc(100vh - 90px);
  display:grid;
  place-items:center;
  padding:0 18px;
  box-sizing:border-box;
}

.about-card{
  width:min(560px, 88vw);
  margin-top:-3vh;
  text-align:left;
}

.about-photo-wrap{
  width:min(620px, 92vw);
  aspect-ratio:2532 / 1170;
  margin:0 0 22px;
  border:0;
  border-radius:0;
  overflow:hidden;
  background:transparent;
}

.about-photo{
  width:102%;
  height:102%;
  display:block;
  object-fit:cover;
  object-position:center center;
  transform:translate(-1%, -1%);
}

.about-title{
  position:static;
  transform:none;
  writing-mode:horizontal-tb;

  margin:0 0 14px;

  font-size:11px;
  line-height:1;
  letter-spacing:0.18em;
  text-transform:uppercase;

  opacity:0.72;
}

.about-bio{
  margin:0;
  max-width:520px;

  font-size:13px;
  line-height:1.55;
  letter-spacing:0.04em;
  font-weight:400;
  opacity:0.88;
}

@media (max-width: 640px){
  .about-card{
    width:min(420px, 86vw);
    margin-top:-2vh;
  }

  .about-photo-wrap{
    width:min(500px, 92vw);
    margin-bottom:18px;
  }

  .about-bio{
    font-size:12px;
    line-height:1.55;
  }
}

/* =========================================================
   MUSIC PAGE
   ========================================================= */

.desktop-music{
  left:0;
  top:0;
}

.pos-music-super{
  left:50%;
  top:26%;
  transform:translateX(-50%);
}

.music-samples{
  position:absolute;
  left:50%;
  top:48%;
  transform:translateX(-50%);

  width:min(760px, 82vw);
  padding-left:70px;
  padding-bottom:80px;

  text-align:left;
  box-sizing:border-box;
}

.music-samples-head{
  font-size:12px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  opacity:0.72;
}

/* =========================================================
   MUSIC DETAIL PAGE
   ========================================================= */

.music-project-page{
  position:relative;
  min-height:calc(100vh - 90px);
  max-width:900px;
  margin:0 auto;
  padding:80px 24px 60px 90px;
  box-sizing:border-box;
}

.music-embed-wrap{
  width:min(680px, 82vw);
  margin:0 auto;
}

.music-embed-wrap iframe{
  display:block;
  border:0;
  background:transparent;
}

@media (max-width: 640px){
  .music-project-page{
  padding:70px 18px 50px 78px;
}

  .music-embed-wrap{
    width:100%;
  }
}
.music-embed-wrap--apple{
  margin-top:26px;
}

.music-embed-wrap--apple iframe{
  display:block;
  margin:0 auto;
  border-radius:12px;
}

.music-samples{
  position:absolute;
  left:50%;
  top:48%;
  transform:translateX(-50%);

  width:min(780px, 84vw);
  padding-left:28px;
  padding-bottom:80px;

  text-align:left;
  box-sizing:border-box;
}

.music-samples::before{
  content:"sample tracks";

  position:absolute;
  left:0;
  top:44%;

  transform:translateY(-50%) rotate(180deg);
  writing-mode:vertical-rl;

  font-size:12px;
  font-weight:500;
  letter-spacing:0.18em;
  text-transform:uppercase;

  color:rgba(255,255,255,0.72);
  pointer-events:none;
}

.sample-track-list{
  display:grid;
  gap:8px;
  margin-top:18px;
  width:100%;
}

.sample-track-header{
  display:grid;
  grid-template-columns:54px 1fr 1fr;
  gap:14px;
  align-items:center;

  padding:0 18px 8px;

  font-size:10px;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:rgba(255,255,255,0.58);
}

.sample-track{
  display:grid;
  grid-template-columns:54px 1fr 1fr;
  gap:14px;
  align-items:center;

  min-height:58px;
  padding:7px 18px;

  background:linear-gradient(
    90deg,
    rgba(255,255,255,0.11),
    rgba(255,255,255,0.17)
  );
  color:white;

  border:1px solid rgba(255,255,255,0.09);
  box-sizing:border-box;
}

.sample-play{
  position:relative;
  width:42px;
  height:42px;

  border:0;
  padding:0;
  background:transparent;
  color:white;

  display:grid;
  place-items:center;

  cursor:pointer;
}

.sample-progress{
  position:absolute;
  inset:0;
  width:42px;
  height:42px;
  transform:rotate(-90deg);
}

.sample-progress-bg,
.sample-progress-fg{
  fill:none;
  stroke-width:2;
}

.sample-progress-bg{
  stroke:rgba(255,255,255,0.22);
}

.sample-progress-fg{
  stroke:white;
  stroke-linecap:round;
  stroke-dasharray:119.38;
  stroke-dashoffset:119.38;
  transition:stroke-dashoffset 120ms linear;
}

.sample-play-icon{
  width:0;
  height:0;

  border-top:7px solid transparent;
  border-bottom:7px solid transparent;
  border-left:11px solid white;

  transform:translateX(2px);
}

/* cleaner pause icon */
.sample-track.is-playing .sample-play-icon{
  width:14px;
  height:16px;
  border:0;
  transform:none;

  background:linear-gradient(
    90deg,
    white 0 4px,
    transparent 4px 10px,
    white 10px 14px
  );
}

.sample-track-title,
.sample-track-project{
  font-size:12px;
  line-height:1.2;
  letter-spacing:0.04em;
  text-transform:lowercase;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.sample-track-project{
  opacity:0.72;
}

.sample-track audio{
  display:none;
}

@media (max-width: 640px){
  .music-samples{
    top:44%;
    width:86vw;
    padding-bottom:90px;
  }

  .sample-track-header,
  .sample-track{
    grid-template-columns:48px 1fr;
  }

  .sample-track-header div:nth-child(3),
  .sample-track-project{
    display:none;
  }
}

.sample-track-link{
  color:inherit;
  text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,0.22);
  padding-bottom:1px;
}

.sample-track-link:hover{
  border-bottom-color:rgba(255,255,255,0.8);
}

@media (max-width: 900px){
  .desktop-music{
    left:0;
    top:0;
  }

  .music-samples{
    left:auto;
    right:24px;
    transform:none;

    width:calc(100vw - 150px);
    max-width:720px;
    padding-left:46px;
  }

  .pos-music-super{
    left:calc(50% + 36px);
  }
}

/* =========================================================
   OTHER PAGE
   ========================================================= */

.desktop-other{
  left:0;
  top:0;
}

.pos-other-comedy{
  left:50%;
  top:24%;
  transform:translateX(-50%);
}

.pos-other-decks{
  left:36%;
  top:48%;
  transform:translateX(-50%);
}

.pos-other-photo{
  left:64%;
  top:48%;
  transform:translateX(-50%);
}

/* =========================================================
   DECKS PAGE
   ========================================================= */

.deck-view-page{
  position:relative;
  min-height:calc(100vh - 90px);
  max-width:1200px;
  margin:0 auto;
  padding:48px 40px 80px 90px;
  box-sizing:border-box;
}

.deck-list{
  display:grid;
  gap:54px;
}

.deck-item{
  width:100%;
}

.deck-head{
  margin-bottom:10px;

  font-size:12px;
  letter-spacing:0.18em;
  text-transform:uppercase;

  opacity:0.72;
}

.deck-frame{
  width:100%;
  height:min(72vh, 720px);

  display:block;

  border:1px solid rgba(255,255,255,0.12);
  background:rgba(255,255,255,0.04);
}

@media (max-width: 640px){
  .deck-view-page{
    padding:36px 18px 70px 78px;
  }

  .deck-frame{
    height:68vh;
  }
}

.deck-frame--clean{
  width:100%;
  height:min(76vh, 760px);
  display:block;

  border:1px solid rgba(255,255,255,0.10);
  background:rgba(255,255,255,0.04);
}

/* =========================================================
   PHOTO PAGE
   ========================================================= */

.photo-page-wrap{
  position:relative;
  min-height:calc(100vh - 90px);
  max-width:1200px;
  margin:0 auto;
  padding:48px 40px 80px 90px;
  box-sizing:border-box;
}

.photo-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:34px;
}

.photo-tile{
  width:100%;
  aspect-ratio:4 / 3;

  border:0;
  padding:0;
  margin:0;

  background:rgba(255,255,255,0.045);
  overflow:hidden;
  cursor:pointer;

  transform:scale(1);
  transition:transform 180ms ease, opacity 180ms ease;
}

.photo-tile:hover{
  transform:scale(1.035);
  z-index:2;
}

.photo-tile img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}

.photo-lightbox{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.82);
  backdrop-filter:blur(10px);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:9999;
  padding:40px;
  box-sizing:border-box;
}

.photo-lightbox.is-open{
  display:flex;
}

.photo-lightbox-inner{
  width:min(1200px, 88vw);
  height:min(78vh, 820px);

  display:flex;
  align-items:center;
  justify-content:center;
}

.photo-lightbox-inner img{
  max-width:100%;
  max-height:100%;
  display:block;
  object-fit:contain;
}

.photo-lightbox-close{
  position:absolute;
  top:20px;
  right:24px;
  z-index:10001;

  background:transparent;
  border:0;
  color:white;

  font-family:'Inter', -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size:34px;
  font-weight:500;
  letter-spacing:0.08em;
  line-height:1;

  cursor:pointer;
  opacity:0.9;
}

.photo-lightbox-nav{
  position:absolute;
  top:50%;
  z-index:10001;

  background:transparent;
  border:0;
  color:white;

  font-family:'Inter', -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size:52px;
  font-weight:500;
  letter-spacing:0.12em;
  line-height:1;

  cursor:pointer;
  opacity:0.9;
  padding:10px 16px;
}

.photo-lightbox-close:hover,
.photo-lightbox-nav:hover{
  opacity:1;
}

.photo-lightbox-prev{
  left:20px;
  transform:translateY(-50%) rotate(90deg);
}

.photo-lightbox-next{
  right:20px;
  transform:translateY(-50%) rotate(-90deg);
}

@media (max-width: 900px){
  .photo-grid{
    grid-template-columns:repeat(2, 1fr);
    gap:22px;
  }
}

@media (max-width: 640px){
  .photo-page-wrap{
    padding:36px 18px 70px 78px;
  }

  .photo-grid{
    grid-template-columns:1fr;
    gap:18px;
  }

  .photo-lightbox{
    padding:28px;
  }
}

/* =========================================================
   COMEDY PAGE
   ========================================================= */

.comedy-page-wrap{
  position:relative;
  min-height:calc(100vh - 90px);
  max-width:1200px;
  margin:0 auto;
  padding:48px 40px 80px 90px;
  box-sizing:border-box;
}

.comedy-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:34px;
}

.comedy-tile{
  position:relative;
  width:100%;
  aspect-ratio:16 / 9;
  background:rgba(255,255,255,0.045);
  overflow:hidden;
}

.comedy-tile video{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}

.comedy-label{
  position:absolute;
  left:14px;
  top:12px;
  z-index:2;

  font-size:11px;
  line-height:1.35;
  letter-spacing:0.12em;
  text-transform:uppercase;

  color:white;
  opacity:0.92;
  text-shadow:0 1px 12px rgba(0,0,0,0.75);

  pointer-events:none;
}

@media (max-width: 760px){
  .comedy-page-wrap{
    padding:36px 18px 70px 78px;
  }

  .comedy-grid{
    grid-template-columns:1fr;
    gap:22px;
  }
}

@media (max-width: 760px){
  .folder{
    color:rgba(255,255,255,0.88);
  }

  .folder:hover{
    background:black;
    border-color:rgba(255,255,255,0.18);
    color:rgba(255,255,255,0.88);
  }
}

/* =========================================================
   MOBILE FOLDER DECKS
   ========================================================= */

@media (max-width: 760px){
  .desktop:not(.desktop-music){
    position:relative;
    left:auto;
    top:auto;

    height:calc(100vh - 90px);
    min-height:420px;

    display:grid;
    place-items:center;

    overflow:hidden;
    padding:0;
    box-sizing:border-box;

    touch-action:none;
  }

  .desktop:not(.desktop-music) .folder{
    position:absolute !important;
    left:50% !important;
    top:50% !important;

    width:min(58vw, 260px);
    height:112px;

    color:rgba(255,255,255,0.88);
    font-size:13px;
    letter-spacing:0.08em;

    border-radius:18px;
    background:black;
    border-color:rgba(255,255,255,0.18);

    box-shadow:0 12px 34px rgba(0,0,0,0.55);

    will-change:transform, opacity, filter;

    transition:
      transform 360ms cubic-bezier(0.22, 1, 0.36, 1),
      opacity 360ms ease,
      filter 360ms ease;
  }

  .desktop:not(.desktop-music) .folder:hover{
    background:black;
    border-color:rgba(255,255,255,0.18);
    color:rgba(255,255,255,0.88);
  }

  h1{
    left:22px;
    font-size:24px;
    letter-spacing:0.16em;
  }
}

/* =========================================================
   MOBILE FILM PROJECTS
   ========================================================= */

@media (max-width: 760px){
  .project-detail .wrap{
    max-width:none;
    width:100%;
    padding:0 12px 44px;
    box-sizing:border-box;
  }

  .project-page{
    width:100%;
    max-width:none;
    overflow:visible;

    --title-lane:82px;
    padding-left:82px;
    padding-right:14px;
    box-sizing:border-box;
  }

  .project-title-vertical{
    left:18px;
    width:48px;
    font-size:20px;
    letter-spacing:0.14em;
  }

  .project-grid--video,
  .project-grid--stills{
    display:grid;
    grid-template-columns:1fr;
    width:100%;
    padding:26px 0 48px;
    gap:18px;
    box-sizing:border-box;
    overflow:visible;
  }

  .media-left,
  .media-right,
  .stills-hero,
  .project-bottom-row,
  .project-bottom{
    grid-column:1;
    width:100%;
    min-width:0;
    overflow:visible;
    box-sizing:border-box;
  }

  .video-wrap,
  .stills-deck,
  .stills-deck--hero,
  .media-right--keyless .stills-deck,
  .project-page--games .stills-deck,
  .project-page--games .stills-deck--hero,
  .project-page--chashmish .stills-deck--hero{
    width:100%;
    max-width:100%;
    min-width:0;
    box-sizing:border-box;
    overflow:visible;
  }

  .stills-head{
    display:block;
    width:100%;
    text-align:left;
    margin:0 0 12px;
    padding-left:8px;

    font-size:10px;
    letter-spacing:0.14em;
    line-height:1;
    white-space:nowrap;
  }

  .project-grid--stills .stills-deck--hero::after{
    content:"STILLS";
    position:absolute;

    left:8px;
    right:auto;
    top:-22px;
    transform:none;

    font-size:10px;
    letter-spacing:0.14em;
    line-height:1;
    white-space:nowrap;
    text-transform:uppercase;

    opacity:0.9;
    z-index:30;
  }

  .stills-card:nth-child(2){ transform:translate3d(8px,8px,0); }
  .stills-card:nth-child(3){ transform:translate3d(16px,16px,0); }
  .stills-card:nth-child(4){ transform:translate3d(24px,24px,0); }
  .stills-card:nth-child(n+5){ transform:translate3d(32px,32px,0); }

  .project-blurb{
    font-size:10px;
    line-height:1.45;
    letter-spacing:0.04em;
    margin-top:20px;
  }

  .project-bottom-row,
  .project-bottom{
    display:grid;
    grid-template-columns:1fr;
    gap:18px;
    margin-top:0;
  }

  .bottom-col,
  .bottom-col--right{
    width:100%;
    min-width:0;
    text-align:left;
  }

  .meta-head{
    font-size:10px;
    letter-spacing:0.14em;
    margin-top:14px;
    margin-bottom:8px;
  }

  .meta-body{
    max-width:100%;
    overflow-wrap:anywhere;
    word-break:normal;

    font-size:11px;
    line-height:1.42;
    letter-spacing:0.01em;
    opacity:0.88;
  }

  .meta-body div{
    margin-bottom:4px;
  }

  .inline-link{
    overflow-wrap:anywhere;
  }
}

@media (max-width: 760px){
  .media-right .stills-head{
    text-align:left;
    padding-left:0;
    margin-left:0;
    margin-bottom:12px;
  }

  .project-grid--stills .stills-deck--hero::after{
    left:0;
    right:auto;
    transform:none;
    text-align:left;
  }
}

/* Slightly nudge stills decks left */
@media (max-width: 760px){
  .media-right,
  .stills-hero{
    transform:translateX(-12px);
  }
}

/* Mobile spacing for Play My Song credits */
@media (max-width: 760px){
  .project-page--play-my-song .project-bottom-row{
    margin-top:28px;
  }
}

@media (max-width: 760px){
  html,
  body{
    width:100%;
    max-width:100%;
    overflow-x:hidden;
  }

  .wrap,
  .project-page,
  .desktop,
  .photo-page-wrap,
  .deck-view-page,
  .comedy-page-wrap,
  .music-project-page{
    max-width:100vw;
    overflow-x:hidden;
  }
}

@media (max-width: 760px){
  .stills-deck,
  .stills-deck--hero{
    overflow:visible;
    touch-action:none;
    max-width:100%;
  }

  .stills-card{
    touch-action:none;
  }
}

/* Center mobile folder deck */
@media (max-width: 760px){
  .desktop:not(.desktop-music){
    height:calc(100svh - 90px);
    min-height:0;
    padding:0;
    display:grid;
    place-items:center;
  }

  .desktop:not(.desktop-music) .folder{
    left:50% !important;
    top:44% !important;
  }
}

@media (max-width: 760px){
  .stills-card{
    transition:
      transform 360ms cubic-bezier(0.22, 1, 0.36, 1),
      opacity 360ms ease;
  }
}

@media (max-width: 760px){
  .project-grid--stills .stills-hero{
    padding-top:22px;
    overflow:visible;
  }

  .project-grid--stills .stills-deck--hero::after{
    left:0;
    top:-22px;
    right:auto;
    transform:none;

    width:max-content;
    min-width:70px;

    overflow:visible;
    clip-path:none;

    white-space:nowrap;
    z-index:50;
  }
}

/* =========================================================
   MOBILE MUSIC PAGE CLEANUP
   ========================================================= */

@media (max-width: 760px){
  .desktop-music{
    height:auto;
    min-height:calc(100svh - 90px);
    padding:0 16px 70px 82px;
    box-sizing:border-box;
    overflow-x:hidden;
  }

  .pos-music-super{
    left:50%;
    top:22%;
    width:min(60vw, 280px);
    height:112px;
    transform:translateX(-50%);
  }

  .music-samples{
    position:relative;
    left:auto;
    right:auto;
    top:auto;
    transform:none;

    width:100%;
    max-width:none;

    margin-top:48vh;
    padding-left:34px;
    padding-bottom:40px;

    box-sizing:border-box;
    text-align:left;
  }

  .music-samples::before{
    left:0;
    top:50%;
    transform:translateY(-50%) rotate(180deg);

    font-size:11px;
    letter-spacing:0.16em;
  }

  .sample-track-list{
    width:100%;
    max-width:none;
  }

  .sample-track-header,
  .sample-track{
    grid-template-columns:52px minmax(0, 1fr);
    gap:12px;
    width:100%;
    box-sizing:border-box;
  }

  .sample-track-header div:nth-child(3),
  .sample-track-project{
    display:none;
  }

  .sample-track{
    min-height:76px;
    padding:8px 12px;
  }

  .sample-track-title{
    min-width:0;
    max-width:100%;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    text-align:left;
    font-size:13px;
  }

  .sample-play{
    width:46px;
    height:46px;
  }

  .sample-progress{
    width:46px;
    height:46px;
  }
}

/* =========================================================
   MOBILE FOLDER DECK FLOAT
   ========================================================= */

@media (max-width: 760px){
  .desktop:not(.desktop-music){
    animation:mobileDeckFloat 4.8s ease-in-out infinite;
    transform-origin:center;
  }
}

@keyframes mobileDeckFloat{
  0%{
    transform:translate3d(0, 0, 0);
  }

  50%{
    transform:translate3d(0, -7px, 0);
  }

  100%{
    transform:translate3d(0, 0, 0);
  }
}

/* =========================================================
   MOBILE MUSIC FULL INFO FIT
   ========================================================= */

@media (max-width: 760px){
  .desktop-music{
    position:relative;
    min-height:calc(100svh - 90px);
    padding:0 14px 80px 56px;
    overflow-x:hidden;
    box-sizing:border-box;
  }

  .pos-music-super{
    position:relative !important;
    left:50% !important;
    top:auto !important;

    width:min(48vw, 210px);
    height:76px;

    margin-top:3vh;
    margin-bottom:34px;

    transform:translateX(-50%) !important;

    font-size:11px;
    letter-spacing:0.08em;
  }

  .music-samples{
    position:relative;
    left:auto;
    top:auto;
    right:auto;
    transform:none;

    width:100%;
    max-width:100%;
    margin:0;

    padding-left:24px;
    padding-right:0;
    padding-bottom:40px;

    box-sizing:border-box;
    text-align:left;
  }

  .music-samples::before{
    left:0;
    top:56%;
    transform:translateY(-50%) rotate(180deg);

    font-size:10px;
    letter-spacing:0.14em;
  }

  .sample-track-list{
    width:100%;
    max-width:100%;
    margin-top:14px;
  }

  .sample-track-header,
  .sample-track{
    grid-template-columns:34px minmax(0, 1fr) minmax(0, 0.78fr);
    gap:8px;
    width:100%;
    max-width:100%;
    box-sizing:border-box;
  }

  .sample-track-header{
    padding:0 8px 7px;
    font-size:8px;
    letter-spacing:0.14em;
  }

  .sample-track-header div:nth-child(3),
  .sample-track-project{
    display:block;
  }

  .sample-track{
    min-height:56px;
    padding:6px 8px;
  }

  .sample-play{
    width:30px;
    height:30px;
  }

  .sample-progress{
    width:30px;
    height:30px;
  }

  .sample-play-icon{
    border-top-width:5px;
    border-bottom-width:5px;
    border-left-width:8px;
    transform:translateX(1px);
  }

  .sample-track.is-playing .sample-play-icon{
    width:10px;
    height:12px;
    background:linear-gradient(
      90deg,
      white 0 3px,
      transparent 3px 7px,
      white 7px 10px
    );
  }

  .sample-track-title,
  .sample-track-project{
    min-width:0;
    max-width:100%;

    font-size:9px;
    line-height:1.15;
    letter-spacing:0.02em;
    text-align:left;

    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  .sample-track-project{
    opacity:0.72;
  }
}

/* =========================================================
   MOBILE MUSIC LABEL BELOW PLAYER
   ========================================================= */

@media (max-width: 760px){
  .music-samples{
    padding-left:0;
    padding-right:0;
    width:100%;
  }

  .music-samples::before{
    content:none;
  }

  .sample-track-list{
    position:relative;
    width:100%;
    margin-top:14px;
    margin-bottom:34px;
  }

  .sample-track-list::after{
    content:"sample tracks";

    display:block;
    margin-top:16px;

    text-align:center;

    font-size:10px;
    letter-spacing:0.16em;
    text-transform:uppercase;

    color:rgba(255,255,255,0.72);
  }
}

/* =========================================================
   MOBILE SIDE TITLE TUNING
   ========================================================= */

@media (max-width: 760px){
  h1,
  .project-title-vertical{
    left:12px;
    font-size:18px;
    letter-spacing:0.12em;
  }

  .nav-back{
    left:18px;
  }

  .project-page{
    --title-lane:66px;
    padding-left:66px;
  }

  .photo-page-wrap,
  .deck-view-page,
  .comedy-page-wrap,
  .music-project-page{
    padding-left:66px;
  }

  .desktop-music{
    padding-left:50px;
  }
}

/* Mobile float for super senior folder */
@media (max-width: 760px){
  .pos-music-super{
    animation:mobileSuperFloat 4.6s ease-in-out infinite;
  }
}

@keyframes mobileSuperFloat{
  0%{
    transform:translateX(-50%) translate3d(0, 0, 0) !important;
  }

  50%{
    transform:translateX(-50%) translate3d(0, -7px, 0) !important;
  }

  100%{
    transform:translateX(-50%) translate3d(0, 0, 0) !important;
  }
}