/* ==========================================================================
   THE WORK, PRESENTED AS IT LANDS ON THE FEED
   Phone frames in a fanned deck, an in-place sound toggle, court lines behind
   the deck and a scoreboard counter. The brand commercials below share the
   same frame language. Without script the rail stays a horizontal scroller.
   ========================================================================== */

html body #work-rail{
  grid-auto-columns:clamp(190px,21vw,280px)!important;
  gap:26px!important;
  padding-top:14px;
  padding-bottom:22px;
  background:
    linear-gradient(rgba(6,44,36,.1),rgba(6,44,36,.1)) 50% 0/1px 58% no-repeat,
    linear-gradient(rgba(6,44,36,.1),rgba(6,44,36,.1)) 0 58%/100% 1px no-repeat,
    linear-gradient(rgba(6,44,36,.14),rgba(6,44,36,.14)) 0 calc(100% - 96px)/100% 2px no-repeat,
    linear-gradient(rgba(6,44,36,.14),rgba(6,44,36,.14)) 50% calc(100% - 90px)/2px 14px no-repeat;
}
@media(min-width:700px) and (max-width:1079px){html body #work-rail{grid-auto-columns:clamp(180px,30vw,250px)!important;gap:20px!important}}
@media(max-width:699px){html body #work-rail{grid-auto-columns:min(62vw,220px)!important;gap:14px!important}}

html body #work-rail .work-item{position:relative}

/* Phone frame */
html body #work-rail .work-art{
  position:relative;
  overflow:hidden!important;
  border:6px solid #0b1713;
  border-radius:30px;
  background:#041f19;
  box-shadow:0 0 0 1px rgba(213,175,89,.32),0 26px 48px -30px rgba(6,44,36,.7);
}
html body #work-rail .work-art::before{
  content:"";
  position:absolute;
  top:9px;
  left:50%;
  z-index:3;
  width:30%;
  height:15px;
  border-radius:10px;
  background:#0b1713;
  transform:translateX(-50%);
  pointer-events:none;
}
html body #work-rail .work-item .play-button{border-radius:0 0 24px 24px}
/* The screen sits 6px inside the 30px frame, so its corners curve at 24px. Clipping the media itself
   keeps playing video inside the curve, where a moving 3D frame's own rounded overflow can fail to clip it. */
html body #work-rail .work-art>video,
html body #work-rail .work-art>img,
html body #work-rail .work-glare{border-radius:24px;clip-path:inset(0 round 24px)}

/* Static posts sit in the same frame, with a View bar that matches the Play bar. */
html body #work-rail .work-art-post{background:#0b1713;cursor:zoom-in}
html body #work-rail .work-art-post>img{object-fit:contain!important}
html body #work-rail .work-art-post::after{
  content:"View post";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  min-height:42px;
  padding:7px 14px;
  border-radius:0 0 24px 24px;
  background:#062c24;
  color:var(--paper);
  font-size:.75rem;
  font-weight:650;
}
@media(hover:hover) and (pointer:fine){html body #work-rail .work-art-post:hover::after{background:var(--gold);color:var(--pine)}}

/* Story progress for the carousel replaces the plain slide counter. */
html body #work-rail .work-carousel-count{display:none}
.work-story{position:absolute;top:32px;left:12px;right:12px;z-index:3;display:flex;gap:4px;pointer-events:none}
.work-story i{position:relative;flex:1;height:3px;border-radius:2px;background:rgba(244,242,234,.32);overflow:hidden}
.work-story i::after{content:"";position:absolute;inset:0;background:var(--paper);transform:scaleX(0);transform-origin:left}
.work-story i.is-done::after,.work-story i.is-current::after{transform:none}
.is-running .work-story i.is-current::after{animation:work-story-fill 2.6s linear both}
@keyframes work-story-fill{from{transform:scaleX(0)}to{transform:none}}

/* Sound toggle: plays a sample with sound without leaving the page. */
.work-sound{
  position:absolute;
  top:30px;
  right:14px;
  z-index:4;
  display:grid;
  place-items:center;
  width:40px;
  height:40px;
  padding:0;
  border:0;
  border-radius:50%;
  background:rgba(4,31,25,.72);
  color:var(--paper);
  cursor:pointer;
  transition:opacity .25s ease,background-color .25s ease;
}
.work-sound svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.work-sound svg path:first-child{fill:currentColor}
.work-sound .work-sound-waves{display:none}
.work-sound[aria-pressed="true"]{background:var(--gold);color:var(--pine)}
.work-sound[aria-pressed="true"] .work-sound-waves{display:block}
.work-sound[aria-pressed="true"] .work-sound-off{display:none}
.work-sound:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
@media(hover:hover) and (pointer:fine){
  .work-sound{opacity:0}
  .work-item:hover .work-sound,.work-item:focus-within .work-sound,.work-sound[aria-pressed="true"]{opacity:1}
  .work-sound:hover{background:var(--gold);color:var(--pine)}
}

/* Fanned deck: every phone shares one grid cell and script sets each one's place in the fan. */
html body #work-rail.is-deck{
  display:grid!important;
  grid-template-columns:minmax(0,1fr)!important;
  grid-auto-flow:row!important;
  grid-auto-columns:auto!important;
  gap:0!important;
  margin:0!important;
  padding:20px 0 64px!important;
  overflow:visible!important;
  scroll-snap-type:none!important;
  touch-action:pan-y;
  -webkit-user-select:none;
  user-select:none;
  background-position:50% 0,0 52%,0 calc(100% - 40px),50% calc(100% - 34px);
}
html body #work-rail.is-deck:focus-visible{outline:none}
html body #work-rail.is-deck:focus-visible .work-item.is-front .work-art{outline:2px solid var(--gold);outline-offset:5px}
html body #work-rail.is-deck .work-item{
  grid-area:1/1;
  justify-self:center;
  width:clamp(200px,22vw,270px);
  transform-origin:50% 120%;
  transition:transform .6s var(--ease,cubic-bezier(.2,.7,.2,1)),filter .6s ease,opacity .6s ease;
  will-change:transform;
}
html body #work-rail.is-deck .work-item:not(.is-front){filter:brightness(.55) saturate(.6);cursor:pointer}
html body #work-rail.is-deck .work-item.is-front .work-art{box-shadow:0 0 0 2px var(--gold),0 46px 70px -36px rgba(4,31,25,.85)}
html body #work-rail.is-deck .work-art{margin-bottom:0}
html body #work-rail.is-deck .work-meta{display:none}
html body #work-rail.is-deck img,html body #work-rail.is-deck video{-webkit-user-drag:none}
html body #work-rail.is-deck .work-item:not(.is-front) .play-button,
html body #work-rail.is-deck .work-item:not(.is-front) .work-art-post::after,
html body #work-rail.is-deck .work-item:not(.is-front) .work-sound{opacity:0;pointer-events:none}
@media(hover:hover) and (pointer:fine){html body #work-rail.is-deck .work-item:not(.is-front):hover{filter:brightness(.8) saturate(.85)}}
@media(max-width:699px){
  html body #work-rail.is-deck{padding:14px 0 52px!important}
  html body #work-rail.is-deck .work-item{width:min(54vw,220px)}
}
html.motion-off body #work-rail.is-deck .work-item{transition:none}
@media(prefers-reduced-motion:reduce){html body #work-rail.is-deck .work-item{transition:none}}

/* Depth: each phone drifts slowly in 3D on its own beat, a soft floor shadow breathes beneath it and a
   faint glare slides across the glass. On a mouse, the front phone also tilts toward the pointer. */
html body #work-rail.is-deck .work-item{perspective:1100px}
/* An older rule pins .work-art to transform:none!important, which beats keyframes, so the loop animates
   registered custom properties and the transform below reads them. */
@property --float-y{syntax:"<length>";inherits:false;initial-value:0px}
@property --float-z{syntax:"<length>";inherits:false;initial-value:0px}
@property --float-rx{syntax:"<angle>";inherits:false;initial-value:0deg}
@property --float-ry{syntax:"<angle>";inherits:false;initial-value:0deg}
html body #work-rail.is-deck .work-art{
  transform:translateY(var(--float-y)) translateZ(var(--float-z)) rotateX(var(--float-rx)) rotateY(var(--float-ry))!important;
  transform-origin:50% 55%;
  animation:work-float 9s ease-in-out var(--float-delay,0s) infinite;
  transition:rotate .5s var(--ease,cubic-bezier(.2,.7,.2,1));
  will-change:transform;
}
html body #work-rail.is-deck .work-item::after{
  content:"";
  position:absolute;
  left:14%;
  right:14%;
  bottom:-26px;
  z-index:-1;
  height:20px;
  border-radius:50%;
  background:radial-gradient(closest-side,rgba(4,31,25,.42),rgba(4,31,25,0));
  animation:work-float-shadow 9s ease-in-out var(--float-delay,0s) infinite;
  pointer-events:none;
}
.work-glare{
  position:absolute;
  inset:0;
  z-index:1;
  background:linear-gradient(115deg,rgba(255,255,255,0) 38%,rgba(255,255,255,.13) 48%,rgba(255,255,255,.04) 54%,rgba(255,255,255,0) 62%) 0 0/260% 100% no-repeat;
  mix-blend-mode:screen;
  animation:work-glare 9s ease-in-out var(--float-delay,0s) infinite;
  pointer-events:none;
}
html body #work-rail.is-deck .work-item:nth-child(8n+2){--float-delay:-1.4s}
html body #work-rail.is-deck .work-item:nth-child(8n+3){--float-delay:-5.1s}
html body #work-rail.is-deck .work-item:nth-child(8n+4){--float-delay:-2.7s}
html body #work-rail.is-deck .work-item:nth-child(8n+5){--float-delay:-6.6s}
html body #work-rail.is-deck .work-item:nth-child(8n+6){--float-delay:-3.9s}
html body #work-rail.is-deck .work-item:nth-child(8n+7){--float-delay:-7.8s}
html body #work-rail.is-deck .work-item:nth-child(8n+8){--float-delay:-4.5s}
/* The loop leans one way, then the other, then comes forward and holds nearly dead on before easing back. */
@keyframes work-float{
  0%,100%{--float-y:0px;--float-z:0px;--float-rx:2deg;--float-ry:-6deg}
  28%{--float-y:-5px;--float-z:4px;--float-rx:-2.5deg;--float-ry:6deg}
  52%{--float-y:-10px;--float-z:38px;--float-rx:.3deg;--float-ry:.4deg}
  68%{--float-y:-9px;--float-z:34px;--float-rx:0deg;--float-ry:-.4deg}
  86%{--float-y:-3px;--float-z:8px;--float-rx:2.5deg;--float-ry:-4deg}
}
@keyframes work-float-shadow{
  0%,100%{opacity:1;transform:scale(1) translateX(-4px)}
  28%{opacity:.86;transform:scale(.95) translateX(4px)}
  52%{opacity:.6;transform:scale(.84)}
  68%{opacity:.62;transform:scale(.85)}
  86%{opacity:.9;transform:scale(.97) translateX(-3px)}
}
@keyframes work-glare{
  0%,100%{background-position:5% 0}
  28%{background-position:95% 0}
  52%{background-position:52% 0}
  68%{background-position:48% 0}
  86%{background-position:15% 0}
}
html.motion-off body #work-rail.is-deck .work-art,
html.motion-off body #work-rail.is-deck .work-item::after,
html.motion-off .work-glare{animation:none;rotate:none}
@media(prefers-reduced-motion:reduce){
  html body #work-rail.is-deck .work-art,html body #work-rail.is-deck .work-item::after,.work-glare{animation:none;rotate:none}
}

/* Deck controls: counter on top, then previous, the front sample's caption and next. */
html body .rail-controls.is-deck{
  display:grid!important;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:14px 20px;
  max-width:640px;
  margin:4px auto 0;
  padding-top:0;
  border-top:0;
  text-align:center;
}
html body .rail-controls.is-deck>.work-score{grid-column:1/-1;justify-self:center}
html body .rail-controls.is-deck>div:last-child{display:contents}
html body .rail-controls.is-deck #work-prev{grid-column:1;grid-row:2}
html body .rail-controls.is-deck #work-next{grid-column:3;grid-row:2}
.work-caption{grid-column:2;grid-row:2;min-width:0}
/* The caption stacks its tag, title and meta; the legacy flex row on rail divs would squeeze them side by side. */
html body .rail-controls.is-deck>.work-caption{display:block}
.work-caption[hidden]{display:none}
/* Format label set as type, not a pill: small caps flanked by fine gold rules. */
.rail-controls .work-caption-tag{display:inline-flex;align-items:center;gap:10px;padding:0;border-radius:0;background:none;color:var(--pine);font-size:.6875rem;font-weight:650;letter-spacing:.24em;text-transform:uppercase;line-height:1}
.rail-controls .work-caption-tag::before,.rail-controls .work-caption-tag::after{content:"";width:18px;height:1px;background:var(--gold)}
.rail-controls .work-caption-title{margin-top:10px;font-size:clamp(1.3rem,2.4vw,1.8rem);font-weight:620;letter-spacing:-.035em;line-height:1.1}
.rail-controls .work-caption-meta{margin-top:6px;color:var(--muted);font-size:.875rem}
.work-swipe{display:none}
@media(hover:none){
  .rail-controls.is-deck p.work-swipe{display:inline-flex;align-items:center;gap:6px;margin-top:10px;color:var(--muted);font-size:.6875rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;transition:opacity .4s ease}
  .work-swipe svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
  .rail-controls.has-swiped .work-swipe{opacity:0}
}
/* Phones: arrows flank the counter so the caption gets the full width beneath. */
@media(max-width:699px){
  html body .rail-controls.is-deck{gap:18px 12px;margin-top:0}
  html body .rail-controls.is-deck>.work-score{grid-column:2;grid-row:1}
  html body .rail-controls.is-deck #work-prev{grid-column:1;grid-row:1}
  html body .rail-controls.is-deck #work-next{grid-column:3;grid-row:1}
  .work-caption{grid-column:1/-1;grid-row:2;padding-inline:4px}
  .rail-controls .work-caption-title{margin-top:12px;font-size:1.5rem;line-height:1.15;text-wrap:balance}
  .rail-controls .work-caption-meta{margin-top:8px;font-size:.9375rem;line-height:1.5}
  .rail-controls.is-deck p.work-swipe{margin-top:14px}
}

/* Scoreboard counter */
.rail-controls .work-score{display:inline-flex;align-items:center;gap:5px;padding:5px 6px 5px 12px;border-radius:6px;background:var(--pine);color:var(--paper)}
.work-score-label{margin-right:5px;font-size:.625rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-dark)}
.work-score-digit{display:inline-grid;place-items:center;min-width:26px;height:30px;padding:0 4px;border-radius:3px;background:#041f19;color:var(--gold);font-size:1rem;font-weight:650;font-variant-numeric:tabular-nums;box-shadow:inset 0 -1px 0 rgba(213,175,89,.25)}
.work-score-sep{color:var(--muted-dark);font-size:.875rem}

/* Brand commercials share the frame language of the samples above. */
html body .brand-work-showcase .brand-work-grid>.brand-work-card{
  border-radius:0;
  box-shadow:0 0 0 1px rgba(213,175,89,.32),0 26px 48px -30px rgba(6,44,36,.7);
  transition:opacity .35s ease,filter .35s ease,box-shadow .35s ease;
}
@media(hover:hover) and (pointer:fine){
  html body .brand-work-grid:hover>.brand-work-card:not(:hover){opacity:.7;filter:saturate(.6)}
  html body .brand-work-grid>.brand-work-card:hover{box-shadow:0 0 0 2px var(--gold),0 30px 60px -28px rgba(6,44,36,.8)}
}

/* Phones: square cards with larger, higher-contrast type that reads at a glance. */
@media(max-width:759px){
  html body .brand-work-showcase .brand-work-grid{gap:18px}
  html body .brand-work-showcase .brand-work-grid>.brand-work-card>span{padding:22px 20px 24px}
  html body .brand-work-card strong{font-size:27px;line-height:1.1;letter-spacing:-.025em}
  html body .brand-work-card small{max-width:none;margin-top:8px;color:#d6e2da;font-size:16px;line-height:1.5}
  html body .brand-work-card .brand-work-flag{white-space:normal;margin-top:16px;padding-top:14px;font-size:13px;letter-spacing:.06em;line-height:1.45}
  html body .brand-work-card .brand-work-action{margin-top:18px;font-size:14px;letter-spacing:.05em}
  html body .brand-work-heading h3{font-size:30px;line-height:1.1}
  html body .brand-work-heading .credit-context{font-size:14px}
  html body .brand-work-heading .brand-work-fluency{font-size:17px}
}

@media print{.work-sound,.work-story,.work-swipe,.work-glare{display:none!important}html body #work-rail{background:none}}