/* Generated from work-reel-preview.html. Scoped to #workReel so no rule
   reaches the rest of the homepage. Edit the preview, then regenerate.
   NOTE: the "homepage embed" block at the end of this file is hand-written and
   must be re-applied if this file is regenerated. */
#workReel{--expo:cubic-bezier(.16,1,.3,1);--quint:cubic-bezier(.22,1,.36,1);--panel:rgba(11,13,18,.94);--line:rgba(var(--cream-rgb),.16);--muted:rgba(var(--cream-rgb),.55);color:var(--cream);font-family:"Geist",sans-serif}
#workReel img{display:block;width:100%;height:100%;object-fit:cover}
#workReel a{color:inherit;text-decoration:none}
#workReel button{font:inherit;color:inherit}
#workReel{position: relative;
  width: 100%;
  max-width: 100vw;
  min-width: 0;
  height: 100svh;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
  isolation: isolate;}
#workReel::before{content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(58% 52% at calc(50% + var(--wash-x, 0px)) 44%, rgba(var(--red-rgb), .17), transparent 72%),
    linear-gradient(180deg, rgba(var(--cream-rgb), .02), transparent 30%, rgba(0, 0, 0, .42));
  transition: background-position .9s var(--expo);}
#workReel .bar{min-height: 66px;
  min-width: 0;
  padding: 0 clamp(16px, 2vw, 34px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 20px;
  border-bottom: 1px solid var(--line);
  font-family: "Geist Mono", monospace;
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;}
#workReel .bar-meta, #workReel .bar-nav{display: flex; align-items: center; gap: clamp(10px, 1.4vw, 22px); min-width: 0;}
#workReel .bar-nav{justify-content: flex-end;}
#workReel .bar-meta a, #workReel .bar-nav a{position: relative;
  min-height: 44px; min-width: 44px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
  color: var(--muted);
  transition: color .3s ease;}
#workReel .bar-meta a:hover, #workReel .bar-nav a:hover{color: var(--cream);}
#workReel .bar-meta a::after, #workReel .bar-nav a::after{content: "";
  position: absolute;
  left: 0; right: 100%; bottom: 12px;
  height: 1px;
  background: var(--red);
  transition: right .32s var(--expo);}
#workReel .bar-meta a:hover::after, #workReel .bar-meta a:focus-visible::after, #workReel .bar-nav a:hover::after, #workReel .bar-nav a:focus-visible::after{right: 0;}
#workReel .bar-meta a:focus-visible, #workReel .bar-nav a:focus-visible{outline: 2px solid var(--red); outline-offset: 4px;}
#workReel .wr-main{position: relative;
  min-width: 0; min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2.9fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(10px, 1.8vw, 30px);
  padding: clamp(18px, 2.6vw, 42px) clamp(16px, 2vw, 34px);}
#workReel .wr-col{display: grid; gap: clamp(18px, 2.4vw, 34px); align-content: center; min-width: 0;}
#workReel .wr-col--end{justify-items: end;}
#workReel .sr-only{position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;}
#workReel .readout{display: grid; gap: 14px; max-width: 16rem;}
/* Only carries text for case studies that need no password, so it collapses on the rest. */
#workReel .readout-id{color: var(--red); font-family: "Geist Mono", monospace; font-size: .64rem; letter-spacing: .16em;}
#workReel .readout-id:empty{display: none;}
#workReel .readout-note{margin: 0; color: rgba(var(--cream-rgb), .82); font-size: .98rem; line-height: 1.5;}
#workReel .impact{display: grid;
  gap: clamp(12px, 1.4vw, 18px);
  margin: 0;
  padding: 0;
  list-style: none;
  justify-items: end;
  text-align: right;}
#workReel .impact li{display: grid; gap: 3px; justify-items: end;}
#workReel .impact b{font-family: "Geist Mono", monospace;
  font-size: clamp(.95rem, 1.15vw, 1.2rem);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1;
  color: var(--cream);
  white-space: nowrap;}
#workReel .impact span{font-size: .58rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  line-height: 1.35;
  color: rgba(var(--cream-rgb), .5);}
#workReel .stage{position: relative;
  width: min(100%, 880px);
  height: min(64vh, 600px);
  min-height: 340px;
  justify-self: center;
  perspective: 1300px;
  touch-action: pan-y pinch-zoom;}
#workReel .stage::after{content: "";
  position: absolute;
  left: 50%; bottom: 1%;
  width: 52%; height: 9%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, .55);
  filter: blur(30px);
  border-radius: 50%;
  z-index: -1;}
#workReel .card{position: absolute;
  transform-style: preserve-3d;
  transition: transform .6s var(--expo);}
#workReel .card-in{position: absolute;
  inset: 0;
  overflow: hidden;
  background: #05070b;
  border: 1px solid rgba(var(--cream-rgb), .26);
  box-shadow: 0 26px 66px rgba(0, 0, 0, .46);
  will-change: transform, opacity, filter;}
#workReel .card-in::after{content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 70%, rgba(0, 0, 0, .28));}
#workReel .card img{transition: transform .9s var(--expo), filter .5s ease;}
#workReel .card:focus-visible{outline: 2px solid var(--red); outline-offset: 6px;}
#workReel .card--side{top: 18%; width: 35%; height: 68%; z-index: 1;}
#workReel .card--side .card-in{opacity: .84; transition: opacity .45s ease, box-shadow .45s ease, border-color .45s ease;}
#workReel .card--prev{left: 2%; transform: rotate(var(--rot, -8.5deg)) translate3d(var(--mx, 0px), var(--my, 0px), -60px) scale(var(--sc, 1));}
#workReel .card--next{right: 2%; transform: rotate(var(--rot, 8.5deg)) translate3d(var(--mx, 0px), var(--my, 0px), -60px) scale(var(--sc, 1));}
#workReel .card--side img{filter: grayscale(.5) contrast(1.08) brightness(.78);}
#workReel .card--prev .card-in::after{background:
    linear-gradient(180deg, transparent 42%, rgba(0, 0, 0, .6) 78%, rgba(0, 0, 0, .94)),
    linear-gradient(to left, transparent 52%, rgba(0, 0, 0, .6));}
#workReel .card--next .card-in::after{background:
    linear-gradient(180deg, transparent 42%, rgba(0, 0, 0, .6) 78%, rgba(0, 0, 0, .94)),
    linear-gradient(to right, transparent 52%, rgba(0, 0, 0, .6));}
#workReel .card--prev:hover{--rot: -4.5deg; --sc: 1.05; --my: -10px;}
#workReel .card--next:hover{--rot: 4.5deg; --sc: 1.05; --my: -10px;}
#workReel .card--side:hover .card-in{opacity: 1;
  border-color: rgba(var(--red-rgb), .5);
  box-shadow: 0 34px 80px rgba(0, 0, 0, .58), 0 0 0 1px rgba(var(--red-rgb), .14);}
#workReel .card--side:hover img{filter: grayscale(0) contrast(1.04) brightness(.98);}
#workReel .side-tag{position: absolute;
  left: 14px; right: 14px; bottom: 14px;
  z-index: 4;
  display: grid;
  gap: 5px;
  font-family: "Geist Mono", monospace;
  font-size: .55rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  opacity: .68;
  transform: translateY(5px);
  transition: opacity .35s ease, transform .5s var(--expo);}
#workReel .card--side:hover .side-tag{opacity: 1; transform: translateY(0);}
#workReel .side-tag i{font-style: normal; display: flex; align-items: center; gap: 7px; color: var(--red);}
#workReel .side-tag i span{transition: transform .4s var(--expo);}
#workReel .card--prev:hover .side-tag i span{transform: translateX(-4px);}
#workReel .card--next:hover .side-tag i span{transform: translateX(4px);}
#workReel .side-tag b{font-weight: 600;
  font-size: .7rem;
  letter-spacing: -.01em;
  text-transform: none;
  line-height: 1.2;
  color: var(--cream);}
#workReel .card--next .side-tag{justify-items: end; text-align: right;}
#workReel .card--next .side-tag i{flex-direction: row-reverse;}
#workReel .card.is-cta .side-tag{display: none;}
#workReel .card--active{top: 50%;
  left: 50%;
  aspect-ratio: var(--card-ar, 1024 / 1536);
  height: 92%;
  width: auto;
  z-index: 3;
  transform: translate3d(calc(-50% + var(--mx, 0px)), calc(-50% + var(--my, 0px)), 0);}
#workReel .card--active .card-in{border-color: rgba(var(--cream-rgb), .46);
  box-shadow: 0 34px 88px rgba(0, 0, 0, .6), 0 0 0 1px rgba(var(--red-rgb), .12);}
#workReel .card--active:hover img{transform: scale(1.04);}
#workReel .card--active .card-in::before{content: "";
  position: absolute;
  inset: 14px;
  z-index: 3;
  pointer-events: none;
  border: 1px solid rgba(var(--cream-rgb), .32);
  clip-path: polygon(0 0, 22px 0, 22px 1px, 1px 1px, 1px 22px, 0 22px,
                     0 100%, 22px 100%, 22px calc(100% - 1px), 1px calc(100% - 1px), 1px calc(100% - 22px), 0 calc(100% - 22px),
                     100% 100%, calc(100% - 22px) 100%, calc(100% - 22px) calc(100% - 1px), calc(100% - 1px) calc(100% - 1px), calc(100% - 1px) calc(100% - 22px), 100% calc(100% - 22px),
                     100% 0, calc(100% - 22px) 0, calc(100% - 22px) 1px, calc(100% - 1px) 1px, calc(100% - 1px) 22px, 100% 22px);
  opacity: .55;
  transition: inset .5s var(--expo), opacity .4s ease;}
#workReel .card--active:hover .card-in::before{inset: 9px; opacity: 1;}
#workReel .cta-face{display: none;}
#workReel .card.is-cta img{visibility: hidden;}
#workReel .card.is-cta .card-in{background:
    radial-gradient(120% 90% at 50% 0%, rgba(var(--red-rgb), .5), transparent 62%),
    linear-gradient(180deg, rgba(var(--red-rgb), .3), rgba(var(--red-rgb), .06)),
    #070a12;
  border-color: rgba(var(--red-rgb), .58);}
#workReel .card.is-cta .card-in::after{background: none;}
#workReel .card.is-cta .cta-face{position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 2px;
  text-align: center;
  padding: 20px;}
#workReel .cta-face em{font-style: normal;
  font-size: clamp(1.3rem, 2.6vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -.05em;
  line-height: .95;
  text-transform: uppercase;}
#workReel .cta-face i{font-style: normal;
  margin-top: 14px;
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border: 1px solid rgba(var(--cream-rgb), .6);
  border-radius: 50%;
  font-size: 1rem;
  transition: transform .4s var(--expo), background .3s ease;}
#workReel .card.is-cta:hover i{transform: translateX(5px); background: rgba(var(--cream-rgb), .16);}
#workReel .ticker-item.is-cta{color: rgba(var(--red-rgb), .8);}
#workReel .ticker-item.is-cta[aria-selected="true"]{color: var(--red);}
#workReel .badge{position: absolute;
  z-index: 6;
  width: 94px; height: 94px;
  border-radius: 50%;
  display: grid; place-items: center;
  text-align: center;
  background: rgba(8, 10, 16, .3);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  backdrop-filter: blur(14px) saturate(150%);
  box-shadow: inset 0 0 0 1px rgba(var(--cream-rgb), .26);
  color: var(--cream);
  text-shadow: 0 1px 10px rgba(0, 0, 0, .6);
  font-family: "Geist Mono", monospace;
  font-size: .56rem;
  font-weight: 700;
  letter-spacing: .12em;
  line-height: 1.5;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -50%) scale(.6);
  transition: opacity .26s ease, transform .45s var(--expo);}
#workReel .badge::after{content: "";
  position: absolute;
  inset: -7px;
  border-radius: 50%;
  border: 1px solid rgba(var(--cream-rgb), .2);}
#workReel .stage.is-live .badge{opacity: 1; transform: translate(-50%, -50%) scale(1);}
@media (hover: none), (pointer: coarse){
#workReel .badge{display: none;}
}
#workReel .wr-foot{position: relative; z-index: 8; min-width: 0; background: var(--panel); border-top: 1px solid var(--line);}
#workReel .ruler{position: relative; height: 14px; overflow: hidden; border-bottom: 1px solid var(--line);}
#workReel .ruler i{position: absolute; bottom: 0; width: 1px; background: rgba(var(--cream-rgb), .34);}
#workReel .ruler i.tall{background: rgba(var(--cream-rgb), .6);}
#workReel .ruler b{position: absolute;
  left: 50%; top: 0; bottom: 0;
  width: 1px;
  background: var(--red);
  box-shadow: 0 0 10px rgba(var(--red-rgb), .85);}
#workReel .ruler u{position: absolute;
  left: 0; bottom: 0;
  height: 2px;
  background: var(--red);
  opacity: .55;
  transform-origin: left;
  transform: scaleX(var(--progress, .125));
  width: 100%;
  transition: transform .65s var(--expo);}
#workReel .ticker{position: relative;
  display: flex;
  align-items: stretch;
  overflow-x: auto;
  min-width: 0;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
  overscroll-behavior-x: contain;}
#workReel .ticker::-webkit-scrollbar{display: none;}
#workReel .ticker-item{position: relative;
  flex: 0 0 auto;
  min-width: clamp(190px, 19vw, 300px);
  min-height: 78px;
  padding: 0 26px;
  border: 0;
  border-right: 1px solid rgba(var(--cream-rgb), .07);
  background: transparent;
  cursor: pointer;
  scroll-snap-align: center;
  font-size: clamp(1.1rem, 2.1vw, 1.9rem);
  font-weight: 800;
  letter-spacing: -.045em;
  text-transform: uppercase;
  white-space: nowrap;
  color: rgba(var(--cream-rgb), .26);
  transition: color .34s ease, transform .5s var(--expo);}
#workReel .ticker-item:hover{color: rgba(var(--cream-rgb), .66);}
#workReel .ticker-item[aria-selected="true"]{color: var(--cream);}
#workReel .ticker-item:focus-visible{outline: 2px solid var(--red); outline-offset: -5px;}
#workReel .ticker-line{position: absolute;
  bottom: 0; left: 0;
  height: 3px;
  background: var(--red);
  transform: translateX(0);
  transition: transform .55s var(--expo), width .55s var(--expo);
  pointer-events: none;}
#workReel .transport{min-height: 50px;
  padding: 0 clamp(14px, 2vw, 34px);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 14px;
  border-top: 1px solid var(--line);
  padding-bottom: max(0px, env(safe-area-inset-bottom));
  font-family: "Geist Mono", monospace;
  font-size: .62rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);}
#workReel .transport-left, #workReel .transport-right{display: flex; align-items: center; gap: clamp(10px, 1.4vw, 20px); min-width: 0;}
#workReel .transport-right{justify-content: flex-end; padding-right: clamp(0px, 6vw, 96px);}
#workReel .transport-right a{min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; white-space: nowrap;}
#workReel .transport-right a:hover{color: var(--red);}
#workReel .transport-right a:focus-visible{outline: 2px solid var(--red); outline-offset: 3px;}
#workReel .deck{display: flex; align-items: center; justify-content: center; gap: 6px;}
#workReel .deck button{width: 44px; height: 44px;
  display: grid; place-items: center;
  border: 0; background: transparent; cursor: pointer;
  letter-spacing: 0;
  transition: color .2s ease, transform .3s var(--quint);}
#workReel .deck button:hover{color: var(--red); transform: scale(1.18);}
#workReel .deck button:active{transform: scale(.9);}
#workReel .deck button:focus-visible{outline: 2px solid var(--red); outline-offset: -4px;}
#workReel .deck-count{min-width: 84px; text-align: center; color: var(--cream); font-variant-numeric: tabular-nums; overflow: hidden;}
#workReel .deck-count b{display: inline-block; color: var(--red); font-weight: 700;}
@media (max-width: 1080px){
#workReel .wr-main{grid-template-columns: 1fr;}
#workReel .wr-col{position: absolute; top: 18px; left: 20px; max-width: 11rem; z-index: 5;}
#workReel .wr-col--end{left: auto; right: 20px;}
#workReel .readout, #workReel .impact{display: none;}
}
@media (max-width: 720px){
#workReel .bar{min-height: 56px; grid-template-columns: 1fr; padding-inline: 14px;}
#workReel .bar-meta{display: none;}
#workReel .bar-nav{justify-self: end;}
#workReel .wr-main{padding: 62px 8px 10px;}
#workReel .wr-col{top: 10px; left: 14px;}
#workReel .wr-col--end{left: auto; right: 14px;}
#workReel .stage{height: min(56vh, 460px); min-height: 0;}
#workReel .card--side{top: 17%; width: 41%; height: 64%;}
#workReel .card--side .card-in{opacity: .62;}
#workReel .card--prev{left: 0; transform: rotate(var(--rot, -6.5deg)) translate3d(0, 0, -60px) scale(var(--sc, 1));}
#workReel .card--next{right: 0; transform: rotate(var(--rot, 6.5deg)) translate3d(0, 0, -60px) scale(var(--sc, 1));}
#workReel .side-tag{display: none;}
#workReel .ticker-item{min-width: 176px; min-height: 62px; padding-inline: 18px; font-size: 1.05rem;}
#workReel .transport{grid-template-columns: 1fr auto; min-height: 54px; padding-inline: 10px;}
#workReel .transport-left{display: none;}
}
@media (max-width: 360px){
#workReel .deck-count{min-width: 70px;}
}
@media (max-height: 820px) and (min-width: 721px){
#workReel .bar{min-height: 58px;}
#workReel .wr-main{padding-block: 18px;}
#workReel .ticker-item{min-height: 70px;}
}
@media (max-height: 700px) and (min-width: 721px){
#workReel .stage{min-height: 300px; height: 58vh;}
#workReel .ticker-item{min-height: 62px;}
}
@media (prefers-reduced-motion: reduce){

}

/* ── Homepage embed (hand-written; re-apply after any regeneration) ──────────
   The preview page owned the whole viewport. On index.html the reel is one
   panel among many, so it has to clear the fixed side pillars and the fixed
   nav, and it must not swallow the page's own scrolling. */
#workReel{
  /* the generated rule sets width:100%, which would add the margins on top of a
     full-width box and push the right edge off screen */
  width: auto;
  max-width: none;
  height: 100svh;
  border-top: 1px solid var(--brdr);
  border-bottom: 1px solid var(--brdr);
}
/* one viewport of scroll per project, so the reel scrubs and then lets go */
.reel-track{
  position: relative;
  margin: 0 var(--col);
  height: calc(var(--reel-steps, 9) * 100svh);
}
.reel-track > #workReel{ position: sticky; top: 0; }
/* the site nav is fixed at the viewport top and would sit on the reel's own bar */
#workReel .bar{ padding-top: 70px; }
@media(max-width:640px){
  #workReel .bar{ padding-top: 58px; }
}

/* Section title, centred in the bar. Absolutely placed so it stays centred on
   the panel rather than on whatever the grid columns happen to be. */
#workReel .bar{ position: relative; }
#workReel .bar-title{
  position: absolute;
  left: 50%;
  top: 50%;
  /* the bar's 70px top padding clears the fixed nav, so the content centre sits
     half that distance below the box centre */
  transform: translate(-50%, calc(-50% + 35px));
  margin: 0;
  font: inherit;
  font-weight: 600;
  letter-spacing: .26em;
  white-space: nowrap;
  /* --redp is the palette's lighter accent; the display blue drops to 3.7:1 at this size */
  color: var(--redp);
  pointer-events: none;
}
/* no room for it once the two links close in */
@media(max-width:900px){
  #workReel .bar-title{ display: none; }
}

/* Flanks size from their own artwork too, so nothing is cropped in the side
   slots. fitFrame sets the height and aspect ratio; width follows. */
#workReel .card--side{ width: auto; }

/* ── Phones ─────────────────────────────────────────────────────────────────
   The desktop layout assumes a fixed top nav and a wide stage. Neither is true
   here: the nav becomes a bottom tab bar, so the reel reclaims the top space
   and keeps clear of the bar at the bottom instead. */
@media(max-width:640px){
  #workReel .bar{ padding-top: 0; min-height: 46px; font-size: .62rem; }
  /* the fixed tab bar is ~80px plus the home indicator */
  #workReel .wr-foot{ padding-bottom: calc(92px + env(safe-area-inset-bottom, 0px)); }
  #workReel .ticker-item{ min-width: 132px; min-height: 46px; padding-inline: 14px; font-size: .82rem; }
  #workReel .ruler{ height: 22px; }
  #workReel .transport{ min-height: 44px; }
  #workReel .card--side .card-in{ opacity: .5; }
  /* the 460px cap left a third of the screen empty above and below the cards */
  #workReel .stage{ height: 100%; min-height: 0; }
}

/* The floating sound and theme controls are fixed to the viewport corner and
   land on the transport row once the reel fills the screen. */
@media(max-width:640px){
  #workReel .transport{ padding-right: 78px; }
}

@media(max-width:640px){
  /* the 62px top padding existed to clear a tall bar that is now 46px */
  #workReel .wr-main{ padding-top: 14px; padding-bottom: 6px; }
  /* not enough room for both links once the corner dial is accounted for */
  #workReel .transport-right a[href*="instagram"]{ display: none; }
}

@media(max-width:640px){
  /* the link wrapped its arrow onto a second line and read as a stray control;
     the section header does the job better in the space available */
  #workReel .bar-nav{ display: none; }
  #workReel .bar-title{
    display: block;
    position: static;
    transform: none;
    justify-self: center;
    letter-spacing: .22em;
  }
}