/* FIQRi Portfolio — coherent gallery system v1.1
   Replaces legacy work-gallery/collage/curation styles to avoid cascading layout collisions.
   The ARTIFACT aspect ratio is the layout source of truth. */

#work{--gallery-gap:14px;padding-top:96px;padding-bottom:96px;scroll-margin-top:78px}
#work .section-header{margin-bottom:28px;align-items:end}
#work .section-lead{max-width:365px}
#work .filterbar{display:flex;flex-wrap:wrap;align-items:center;gap:9px;margin:0 0 10px}
#work .filter{
  appearance:none;display:inline-flex;align-items:center;justify-content:center;
  padding:11px 17px;border-radius:999px;line-height:1.2;
  font:600 12px "Space Grotesk",sans-serif;
  color:#b6cce4;background:#15243a;border:1px solid #779cc552;
  cursor:pointer;transition:background .22s,border-color .22s,transform .22s,color .22s
}
#work .filter[aria-pressed="true"]{background:#b7d9ff;border-color:#b7d9ff;color:#071528}
#work .filter:hover{border-color:#badcff;transform:translateY(-1px)}
#work .filter:focus-visible{outline:2px solid #d0ebff;outline-offset:3px}
#work .work-filter-status{
  display:flex;gap:4px;align-items:center;margin:0 0 22px;
  color:#8da8c8;text-transform:uppercase;
  font:600 10px/1.3 "Space Grotesk",sans-serif;letter-spacing:.14em
}

/* Every tile has one stable native-media ratio. No grid-row stretch, heights or parallax translate. */
#work .work-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gallery-gap);align-items:start;grid-auto-flow:row}
#work .work-card{
  --ratio:16/9;
  position:relative!important;
  display:block;
  width:100%;height:auto;min-width:0;min-height:0;
  margin:0;align-self:start;justify-self:stretch;
  aspect-ratio:var(--ratio);
  border:1px solid #85aadb4c;border-radius:17px;
  background:#0f1e33;
  overflow:hidden;isolation:isolate;
  box-shadow:0 9px 35px #02071454;
  transform:none;
  transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease;
  contain:layout paint;
}
#work .work-card[data-format="portrait"]{--ratio:9/16}
#work .work-card[data-format="event"],#work .work-card[data-format="landscape"]{--ratio:16/9}
#work .work-card[hidden]{display:none!important}
#work .work-card:hover,#work .work-card:focus-within{
  border-color:#9fcaffbc;
  box-shadow:0 19px 48px #02071599,0 0 30px #6b9eda16;
  transform:translateY(-3px)
}
#work .work-card .work-media,
#work .work-card[data-format="portrait"] .work-media,
#work .work-card[data-format="event"] .work-media{
  position:absolute!important;inset:0!important;
  width:100%!important;height:100%!important;
  min-height:0!important;max-width:none!important;
  margin:0!important;aspect-ratio:auto!important;
  border:0!important;border-radius:0!important;
  display:block;overflow:hidden;
  transform:none!important;
  box-shadow:none!important;
  background:#14253d
}
#work .work-card .work-media:hover{transform:none!important}
#work .work-media .art{
  position:absolute;z-index:1;inset:0;
  display:grid;place-items:center;
  max-width:none;
  padding:8%;color:#d5e8ff;
  font:700 clamp(25px,4vw,66px)/.98 "Space Grotesk",sans-serif;
  letter-spacing:-.07em;text-align:center;
  filter:none;transform:none!important;opacity:.9;
}
#work .work-media .art small{font-size:22%;letter-spacing:.08em}
#work .work-media .work-poster{
  display:block;position:absolute!important;inset:0;
  width:100%!important;height:100%!important;max-width:none;
  object-fit:cover!important;object-position:center center!important;
  z-index:2;pointer-events:none;
  filter:brightness(.90) saturate(.98);
  transform:scale(1.005);
  transition:filter .35s,transform .6s cubic-bezier(.2,.7,.2,1),opacity .25s
}
#work .work-media .work-poster[hidden]{display:none!important}
#work .work-card:hover .work-poster{transform:scale(1.045);filter:brightness(.78) saturate(1.03)}
#work .work-media.has-poster .art{opacity:0!important;visibility:hidden!important}
#work .work-media .serial{display:none!important}
#work .work-media::after{
  content:"";position:absolute;inset:0;z-index:5;
  background:linear-gradient(180deg,#02071412 25%,#02071425 46%,#020815d6 99%)!important;
  pointer-events:none
}
#work .work-media .work-hover-video{
  position:absolute!important;top:0;left:0;z-index:4;
  width:100%;height:100%;border:0;pointer-events:none;
  display:block;opacity:0;
  background:#050b13;
  transition:opacity .24s ease
}
#work .work-media.is-previewing .work-hover-video{opacity:1}
#work .work-media.is-previewing .work-poster{opacity:0}
#work .work-card[data-format="portrait"] .work-hover-video{
  width:316%;height:100%;left:-108%; /* YouTube 16:9 player centered to fill a vertical 9:16 preview */
}
#work .work-media .work-play-cue{
  position:absolute;z-index:7;top:50%;left:50%;
  display:grid;place-items:center;
  width:clamp(40px,4vw,60px);height:clamp(40px,4vw,60px);
  border-radius:50%;
  background:#101e35a8;color:#f3f8ff;
  border:1px solid #bedcffab;
  box-shadow:0 9px 35px #0009;
  backdrop-filter:blur(9px);
  transform:translate(-50%,-50%);
  opacity:.86;pointer-events:none;
  transition:transform .25s,background .25s,opacity .25s
}
#work .work-media .work-play-cue svg{width:23px;height:23px}
#work .work-card:hover .work-play-cue{transform:translate(-50%,-50%) scale(1.12);background:#9fd1ff;color:#09213b}
#work .work-media.is-previewing .work-play-cue{opacity:0}
#work .work-media-action{display:none!important}
#work .work-media .project-video[hidden]{display:none!important}
#work .work-trigger{
  position:absolute!important;z-index:11;inset:0;
  width:100%;height:100%;padding:0;margin:0;border:0;
  background:transparent;cursor:pointer;
  color:transparent;font-size:0
}
#work .work-trigger:focus-visible{outline:3px solid #d0e9ff;outline-offset:-5px;border-radius:15px}
#work .work-meta{
  position:absolute!important;z-index:8;left:18px;right:18px;bottom:51px;
  display:flex;align-items:center;gap:8px;
  padding:0;margin:0!important;
  font:600 9px/1.25 "Space Grotesk",sans-serif;
  letter-spacing:.14em;color:#bed7f5;
  text-shadow:0 2px 9px #020510;
  pointer-events:none
}
#work .work-meta span:last-child{display:none}
#work .work-titleline{
  position:absolute!important;z-index:8;left:17px;right:15px;bottom:15px;
  display:block;margin:0!important;
  color:#f7faff;pointer-events:none
}
#work .work-titleline h3{
  margin:0!important;padding:0!important;max-width:100%;
  color:#f6faff!important;
  font:650 clamp(16px,1.7vw,24px)/1.13 "Space Grotesk",sans-serif!important;
  letter-spacing:-.04em;text-shadow:0 2px 18px #000f;
  transform:none!important;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden
}
#work .work-featured,#work .work-availability{display:none!important}
#work .work-card>p{display:none!important}

/* Desktop Highlights: 1 native portrait + 1 large film + 2 landscape cards.
   The media dimensions naturally balance without any fixed row heights. */
#work[data-gallery-mode="highlights"] .work-grid{
  display:grid!important;columns:auto!important;
  grid-template-columns:.96fr 1fr 1fr!important;
  grid-template-areas:"reel film film" "reel event motion";
  grid-template-rows:auto auto!important;
  gap:12px;align-items:start
}
#work[data-gallery-mode="highlights"] .work-card{grid-column:auto!important;grid-row:auto!important;display:block!important;aspect-ratio:var(--ratio)!important}
#work[data-gallery-mode="highlights"] [data-project="bitcoin-almanac"]{grid-area:reel!important}
#work[data-gallery-mode="highlights"] [data-project="cinematic-mancing"]{grid-area:film!important}
#work[data-gallery-mode="highlights"] [data-project="age-of-chaos"]{grid-area:event!important}
#work[data-gallery-mode="highlights"] [data-project="logistics-nine"]{grid-area:motion!important}

/* Dense, self-balancing masonry. Crops never change aspect ratios. */
#work[data-gallery-mode="all"] .work-grid,
#work[data-gallery-mode="motion"] .work-grid,
#work[data-gallery-mode="longform"] .work-grid{
  display:block!important;columns:3;column-gap:14px
}
#work[data-gallery-mode="longform"] .work-grid{columns:2}
#work[data-gallery-mode="all"] .work-card,
#work[data-gallery-mode="motion"] .work-card,
#work[data-gallery-mode="longform"] .work-card{
  display:inline-block!important;width:100%;height:auto;
  aspect-ratio:var(--ratio)!important;
  margin:0 0 14px!important;vertical-align:top;
  break-inside:avoid;page-break-inside:avoid;
  grid-column:auto!important;grid-row:auto!important
}
/* Reels stand in a consistent 9:16 editorial row; events are film banners 16:9. */
#work[data-gallery-mode="reels"] .work-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
#work[data-gallery-mode="event"] .work-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
#work[data-gallery-mode="reels"] .work-card,#work[data-gallery-mode="event"] .work-card{grid-column:auto!important;grid-row:auto!important}
#work[data-gallery-mode="reels"] .work-meta{font-size:8px;bottom:57px}
#work[data-gallery-mode="reels"] .work-titleline h3{font-size:clamp(15px,1.45vw,21px)!important}

/* All dialogs use one consistent width, clear information hierarchy, and native media. */
dialog.portfolio-dialog{
  position:fixed;inset:0;
  width:min(1060px,calc(100vw - 28px));height:auto;
  max-width:1060px;max-height:calc(100dvh - 28px);
  margin:auto;padding:0;
  border:1px solid #8baed874;border-radius:22px;
  overflow:auto;overscroll-behavior:contain;
  background:linear-gradient(145deg,#111f34,#081120 78%);
  color:#f3f8ff;color-scheme:dark;
  box-shadow:0 32px 120px #000e,0 0 52px #4779b820
}
dialog.portfolio-dialog:not([open]){display:none!important}
dialog.portfolio-dialog::backdrop{background:#020612d9;backdrop-filter:blur(10px)}
dialog.portfolio-dialog[open]{animation:fiqri-dialog .25s ease-out both}
@keyframes fiqri-dialog{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.portfolio-dialog .dialog-layout{padding:clamp(20px,3vw,38px);display:block}
.portfolio-dialog .dialog-bar{
  position:sticky;top:0;z-index:15;
  display:flex;justify-content:space-between;align-items:center;
  gap:18px;margin:-2px 0 20px;padding:6px 0 13px;
  background:linear-gradient(#111f34 80%,#111f3400);
}
.portfolio-dialog .dialog-close{
  display:inline-flex;gap:11px;align-items:center;
  flex-shrink:0;color:#dbeaff;background:#1b304d;border:1px solid #b7d7ff74;
  border-radius:999px;padding:10px 16px;cursor:pointer;
  font:600 12px "Space Grotesk",sans-serif
}
.portfolio-dialog .dialog-close:hover{background:#304d72}
.portfolio-dialog .dialog-close span{font-size:18px}
.portfolio-dialog .dialog-intro{
  display:grid;grid-template-columns:1.3fr 1fr;gap:28px;
  align-items:end;margin-bottom:22px
}
.portfolio-dialog .dialog-intro h2,.portfolio-dialog>h2{
  margin:8px 0 0;font:600 clamp(31px,4.3vw,61px)/1.04 "Space Grotesk",sans-serif;
  letter-spacing:-.06em
}
.portfolio-dialog .dialog-intro p{
  color:#b2c6e0;font-size:14px;line-height:1.7;
  max-width:450px;margin:0
}
.portfolio-dialog [hidden]{display:none!important}
.portfolio-dialog .event-feature-player{
  position:relative;display:block;
  width:100%!important;max-width:none!important;height:auto!important;
  aspect-ratio:16/9!important;
  margin:0;padding:0;min-width:0;overflow:hidden;
  border:1px solid #8cbaef65;border-radius:16px;
  background:#030a15;isolation:isolate;
}
.portfolio-dialog .event-feature-player>img{
  display:block;position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;object-position:center;
}
.portfolio-dialog .event-feature-shade{position:absolute;inset:0;background:linear-gradient(180deg,#09152c1c,#050d1a8c);pointer-events:none}
.portfolio-dialog .event-feature-play{
  position:absolute;z-index:5;inset:0;width:100%;height:100%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
  background:transparent;border:0;color:#f2f8ff;cursor:pointer;
  text-shadow:0 3px 14px #000;
  font:600 13px "Space Grotesk",sans-serif
}
.portfolio-dialog .event-feature-play span:first-child{
  width:68px;height:68px;border-radius:50%;
  display:grid;place-items:center;background:#12355bad;
  border:1px solid #c9e5ffae;
  font-size:20px;transition:transform .2s,background .2s;
}
.portfolio-dialog .event-feature-play:hover span:first-child{transform:scale(1.08);background:#6897c8}
.portfolio-dialog .event-feature-player iframe{
  position:absolute;z-index:10;inset:0;width:100%;height:100%;
  display:block;border:0;background:#030714
}
.portfolio-dialog .event-feature-player.is-playing>img,
.portfolio-dialog .event-feature-player.is-playing .event-feature-shade{opacity:0}
.portfolio-dialog .event-feature-empty{
  position:absolute;inset:0;display:grid;place-items:center;
  color:#b9c9e0;text-align:center;padding:20px
}
.portfolio-dialog .event-section-heading{
  display:flex;justify-content:space-between;align-items:center;
  gap:16px;margin:32px 0 14px
}
.portfolio-dialog .event-section-heading h3,
.portfolio-dialog .event-project-context h3{
  font:600 clamp(20px,2.6vw,29px)/1.2 "Space Grotesk",sans-serif;
  letter-spacing:-.045em;margin:0
}
.portfolio-dialog .event-section-heading span{
  font:600 10px "Space Grotesk",sans-serif;letter-spacing:.1em;
  color:#94bde8;white-space:nowrap;text-transform:uppercase
}
.portfolio-dialog .event-video-list{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px
}
.portfolio-dialog .event-video-choice{
  display:flex;flex-direction:column;align-items:stretch;
  padding:0;margin:0;overflow:hidden;
  border:1px solid #779bbf70;border-radius:12px;
  background:#12243b;color:#f1f7ff;cursor:pointer;
  text-align:left;min-width:0;
  transition:transform .2s,border-color .2s,background .2s
}
.portfolio-dialog .event-video-choice:hover,
.portfolio-dialog .event-video-choice[aria-pressed="true"]{
  transform:translateY(-2px);border-color:#a6d2ff;background:#1d3b5e
}
.portfolio-dialog .event-video-choice img{
  display:block;width:100%;height:auto;aspect-ratio:16/9;
  object-fit:cover;object-position:center
}
.portfolio-dialog .event-video-choice__text{
  display:flex;flex-direction:column;gap:4px;
  padding:12px 13px 14px
}
.portfolio-dialog .event-video-choice strong{
  font:600 14px/1.25 "Space Grotesk",sans-serif
}
.portfolio-dialog .event-video-choice small{font-size:11px;color:#adc2dc}
.portfolio-dialog .event-photo-list{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px
}
.portfolio-dialog .event-photo{
  margin:0;border:1px solid #8faed342;border-radius:13px;
  background:#13243b;overflow:hidden;min-width:0
}
.portfolio-dialog .event-photo img{
  display:block;width:100%;height:auto;aspect-ratio:3/2;
  object-fit:cover;transition:transform .5s ease
}
.portfolio-dialog .event-photo:hover img{transform:scale(1.025)}
.portfolio-dialog .event-photo figcaption{
  padding:12px 15px;color:#b9cee6;font-size:12px;line-height:1.5
}
.portfolio-dialog .event-project-context{
  margin-top:30px;padding-top:23px;border-top:1px solid #799fcb37
}
.portfolio-dialog .event-project-context p{
  max-width:780px;color:#b5c8dd;line-height:1.7;font-size:14px
}
.portfolio-dialog .event-video-external,
.portfolio-dialog .video-external-link{
  display:inline-flex;margin:15px 0 0;
  color:#b7d9ff;font:600 12px "Space Grotesk",sans-serif;
  border-bottom:1px solid #84b9ef8a;padding-bottom:5px
}

/* Single-film player matches the original 16:9 or 9:16, never a stretched iframe. */
.portfolio-dialog.video-dialog{width:min(930px,calc(100vw - 28px))}
.portfolio-dialog.video-dialog h2{
  margin:8px 0 22px;font:600 clamp(28px,4vw,51px)/1.08 "Space Grotesk",sans-serif;letter-spacing:-.05em
}
.portfolio-dialog .video-player-frame{
  position:relative;display:block;
  width:100%;height:auto;
  aspect-ratio:16/9;background:#030710;
  border:1px solid #89b5e65e;border-radius:15px;overflow:hidden
}
.portfolio-dialog .video-player-frame.is-portrait{
  width:min(410px,100%);aspect-ratio:9/16;margin:0 auto
}
.portfolio-dialog .video-player-frame video,
.portfolio-dialog .video-player-frame iframe{
  position:absolute;inset:0;width:100%;height:100%;
  border:0;object-fit:contain;background:#030710
}
.portfolio-dialog .video-player-frame.is-portrait iframe{
  width:316%;left:-108%;height:100%; /* crop centered vertical Shorts inside YouTube player */
}
.portfolio-dialog .video-awaiting{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:10px;text-align:center;padding:25px
}
.portfolio-dialog .video-awaiting strong{font:600 32px "Space Grotesk",sans-serif}
.portfolio-dialog .video-awaiting p,.portfolio-dialog .video-dialog-description{
  color:#b1c5df;line-height:1.6;font-size:14px
}
body.modal-open{overflow:hidden!important}

/* Prevent decorative Chapter One cards obscuring showreel captions. */
#cinema-wrap .cinema-stick{isolation:isolate}
#cinema-wrap .cinema-atmosphere{z-index:1}
#cinema-wrap .cinema-copy{z-index:2!important;pointer-events:none}
#cinema-wrap .float-reel-card{
  z-index:3!important;opacity:.5;pointer-events:none;
  filter:brightness(.85)
}
#cinema-wrap .float-reel-card--one{left:-3%;top:42%}
#cinema-wrap .float-reel-card--two{right:-3%;top:43%}
#cinema-wrap .float-reel-card--three{display:none!important}
#cinema-wrap .cinema-frame.showreel-shell{z-index:9!important;overflow:hidden}
#cinema-wrap .showreel-message{left:6%;bottom:12%;max-width:45%;z-index:7}
#cinema-wrap .cinema-frame .showreel-message strong{font-size:clamp(19px,3vw,43px);line-height:1.04}
#cinema-wrap .showreel-bottomline{z-index:9}
#cinema-wrap .cinema-footer{z-index:12}

/* Smaller viewports stay natural and dense, without fixed row spans. */
@media(max-width:920px){
  #work[data-gallery-mode="highlights"] .work-grid{
    grid-template-columns:1fr 1fr!important;
    grid-template-areas:"reel film" "reel event" "reel motion";
    grid-template-rows:auto auto auto!important;
    gap:10px
  }
  #work[data-gallery-mode="all"] .work-grid,
  #work[data-gallery-mode="motion"] .work-grid{columns:2}
  #work[data-gallery-mode="longform"] .work-grid{columns:2}
  #work[data-gallery-mode="event"] .work-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  #work[data-gallery-mode="reels"] .work-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:640px){
  #work{padding-top:65px;padding-bottom:70px;--gallery-gap:9px}
  #work .section-header{display:block;margin-bottom:20px}
  #work .section-lead{margin-top:16px}
  #work .filterbar{gap:7px}
  #work .filter{padding:9px 12px;font-size:11px}
  #work .work-filter-status{margin-bottom:14px;font-size:9px}
  #work[data-gallery-mode="all"] .work-grid,
  #work[data-gallery-mode="motion"] .work-grid{columns:2;column-gap:9px}
  #work[data-gallery-mode="all"] .work-card,
  #work[data-gallery-mode="motion"] .work-card{margin-bottom:9px!important}
  #work[data-gallery-mode="longform"] .work-grid{columns:1}
  #work[data-gallery-mode="event"] .work-grid{grid-template-columns:1fr}
  #work[data-gallery-mode="highlights"] .work-grid{gap:9px}
  #work .work-titleline{left:9px;right:8px;bottom:9px}
  #work .work-titleline h3{font-size:clamp(11px,3vw,17px)!important;line-height:1.1!important}
  #work .work-meta{left:9px;right:8px;bottom:42px;font-size:7px}
  #work[data-gallery-mode="all"] .work-meta,
  #work[data-gallery-mode="motion"] .work-meta{display:none}
  #work .work-media .work-play-cue{width:37px;height:37px}
  #work .work-media .work-play-cue svg{width:18px;height:18px}
  #work .work-card[data-format="portrait"] .work-titleline h3{font-size:clamp(13px,3.2vw,18px)!important}
  .portfolio-dialog .dialog-layout{padding:18px}
  .portfolio-dialog .dialog-intro{display:block;margin-bottom:17px}
  .portfolio-dialog .dialog-intro p{margin-top:12px;font-size:12px}
  .portfolio-dialog .event-video-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
  .portfolio-dialog .event-video-choice strong{font-size:12px}
  .portfolio-dialog .event-video-choice__text{padding:9px 10px 11px}
  .portfolio-dialog .event-photo-list{grid-template-columns:1fr}
  .portfolio-dialog .event-section-heading{margin:24px 0 12px}
  .portfolio-dialog .event-section-heading h3{font-size:21px}
  .portfolio-dialog .event-feature-player{border-radius:12px}
  .portfolio-dialog .event-feature-play span:first-child{width:49px;height:49px;font-size:15px}
  .portfolio-dialog .event-feature-play{font-size:11px;gap:8px}
  .portfolio-dialog .video-player-frame.is-portrait{width:min(310px,100%)}
  #cinema-wrap .float-reel-card{display:none!important}
  #cinema-wrap .showreel-message{max-width:53%}
}
@media(prefers-reduced-motion:reduce){
 #work .work-card,#work .work-poster,#work .work-play-cue,
 .portfolio-dialog .event-photo img{transition:none!important}
 #work .work-card:hover{transform:none}
 dialog.portfolio-dialog[open]{animation:none}
}

/* Hidden cards must beat filter-specific !important display rules. */
#work .work-grid > .work-card[hidden],
#work[data-gallery-mode] .work-grid > .work-card[hidden]{display:none!important}


/* V1.1.1 — actual balanced masonry columns.
   CSS column-count can legally render fewer columns, leaving a large empty right side.
   The gallery now creates exactly 3 desktop / 2 mobile columns for All and Motion,
   placing each video in the shortest column without altering its media ratio. */
#work[data-gallery-mode="all"] .work-grid,
#work[data-gallery-mode="motion"] .work-grid,
#work[data-gallery-mode="longform"] .work-grid{
 display:grid!important;
 columns:auto!important;
 column-count:auto!important;
 grid-template-columns:repeat(var(--gallery-columns,3),minmax(0,1fr))!important;
 grid-auto-flow:row!important;
 gap:14px!important;
 align-items:start!important;
}
#work .work-grid .gallery-column{
 display:flex;
 flex-direction:column;
 align-items:stretch;
 gap:14px;
 min-width:0;
}
#work[data-gallery-mode="all"] .work-grid .gallery-column .work-card,
#work[data-gallery-mode="motion"] .work-grid .gallery-column .work-card,
#work[data-gallery-mode="longform"] .work-grid .gallery-column .work-card{
 position:relative;
 display:block!important;
 width:100%!important;
 height:auto!important;
 margin:0!important;
 aspect-ratio:var(--ratio)!important;
 flex:0 0 auto;
 break-inside:avoid;
}
#work .work-grid .gallery-column .work-card[hidden]{display:none!important}
@media(max-width:640px){
 #work[data-gallery-mode="all"] .work-grid,
 #work[data-gallery-mode="motion"] .work-grid,
 #work[data-gallery-mode="longform"] .work-grid{gap:9px!important}
 #work .work-grid .gallery-column{gap:9px}
}


/* V1.1.2 Motion collage: composition is balanced to the actual 9:16 + 16:9
   media. A wide story frame and two landscape cards complete the first row,
   then two wide cards create an even full-width editorial finish. */
#work[data-gallery-mode="motion"] .work-grid{
 display:grid!important;
 columns:auto!important;
 grid-template-columns:repeat(6,minmax(0,1fr))!important;
 grid-template-areas:
  "reel reel age age age age"
  "reel reel logistics logistics counter counter"
  "heaven heaven heaven archive archive archive";
 grid-template-rows:auto auto auto!important;
 grid-auto-flow:row!important;
 gap:12px!important;
 align-items:start!important
}
#work[data-gallery-mode="motion"] .work-grid > .work-card{
 position:relative;
 display:block!important;
 width:100%!important;
 margin:0!important;
 grid-column:auto!important;
 grid-row:auto!important;
 aspect-ratio:var(--ratio)!important;
 align-self:start!important
}
#work[data-gallery-mode="motion"] .work-card[data-project="bitcoin-almanac"]{grid-area:reel!important}
#work[data-gallery-mode="motion"] .work-card[data-project="age-of-chaos"]{grid-area:age!important}
#work[data-gallery-mode="motion"] .work-card[data-project="logistics-nine"]{grid-area:logistics!important}
#work[data-gallery-mode="motion"] .work-card[data-project="counter-trend"]{grid-area:counter!important}
#work[data-gallery-mode="motion"] .work-card[data-project="heavenly-whisper"]{grid-area:heaven!important}
#work[data-gallery-mode="motion"] .work-card[data-project="know-more-about-me-2024"]{grid-area:archive!important}
#work[data-gallery-mode="motion"] .work-grid > .work-card[hidden]{display:none!important}
@media(max-width:920px){
 #work[data-gallery-mode="motion"] .work-grid{
  grid-template-columns:1fr 1fr!important;
  grid-template-areas:
   "reel age"
   "reel logistics"
   "reel counter"
   "heaven archive";
  gap:10px!important
 }
}
@media(max-width:640px){
 #work[data-gallery-mode="motion"] .work-grid{gap:9px!important}
}


/* V1.3: A-CLUB Wrapped adds a second true-portrait Motion project.
   Use the already-balanced masonry columns instead of the old six-card
   named grid, which would leave an orphan seventh card and blank slots. */
#work[data-gallery-mode="motion"] .work-grid{
 display:grid!important;
 columns:auto!important;
 column-count:auto!important;
 grid-template-columns:repeat(var(--gallery-columns,3),minmax(0,1fr))!important;
 grid-template-areas:none!important;
 grid-template-rows:auto!important;
 grid-auto-flow:row!important;
 align-items:start!important;
 gap:14px!important;
}
#work[data-gallery-mode="motion"] .work-grid > .gallery-column{
 display:flex!important;flex-direction:column!important;
 align-items:stretch;gap:14px;min-width:0;
}
#work[data-gallery-mode="motion"] .work-grid .gallery-column .work-card{
 display:block!important;width:100%!important;max-width:none!important;
 height:auto!important;
 aspect-ratio:var(--ratio)!important;
 margin:0!important;
 grid-area:auto!important;
 flex:0 0 auto;
}
@media(max-width:640px){
 #work[data-gallery-mode="motion"] .work-grid{gap:9px!important}
 #work[data-gallery-mode="motion"] .work-grid>.gallery-column{gap:9px}
}