/* Chustagram: shared profile baseline, flush tab indicator and theater engraving.
   Scoped to the gallery; the home brand marks and archive behavior are unchanged. */
#page-gallery{
  --ig-profile-size:150px;
  --ig-action-ink:#f2edf5;
  --ig-tab-height:48px;
  --ig-icon-shift:5px;
  --ig-tab-line-width:64px;
  --ig-photo-height:18px;
  --ig-soop-width:40px;
  --ig-youtube-width:24px;
  --ig-engraving:linear-gradient(175deg,#eee6f2 5%,#d8cde1 48%,#c9b9d4 100%);
}

/* A quiet charcoal surface. Static light stays at the rim; dimensions are inherited. */
#page-gallery .ig-shell{
  background:
    linear-gradient(90deg,transparent 5%,#d8c4ea21 32%,#eee2f12b 52%,#cbb1df14 76%,transparent 95%) top center/100% 1px no-repeat,
    linear-gradient(180deg,#26242e 0,#22212b 160px,#202129 100%);
  border-color:#bba5cf29;
}

#page-gallery .ig-profile-info{
  display:flex;flex-direction:column;min-height:var(--ig-profile-size);
}
#page-gallery .ig-profile-info>*{flex-shrink:0;}
#page-gallery .ig-profile-note{
  margin: auto 0 0;
  /* The existing 14px/20px face has 4px of blank space below the visible ink. */
  position:relative;top:4px;
}
#page-gallery .ig-profile-actions button,
#page-gallery .ig-profile-actions button:first-child,
#page-gallery #igMessageOpen{
  box-sizing:border-box;height:44px;min-height:44px;
  display:flex;align-items:center;justify-content:center;
  color:var(--ig-action-ink);opacity:1;line-height:18px;
  background:linear-gradient(120deg,#bda3d21c,#ffffff04);
  border-color:#c6afd33d;
  transition:background-color 150ms ease-out,border-color 150ms ease-out;
}
#page-gallery .ig-profile-actions button svg{display:block;color:inherit;}
#page-gallery #igMessageOpen{word-break:keep-all;overflow-wrap:normal;text-wrap:balance;}
#page-gallery .ig-profile-actions button:focus-visible{
  outline:2px solid #dec2ff;outline-offset:3px;
}
@media(hover:hover) and (pointer:fine){
  #page-gallery .ig-profile-actions button:not(:disabled):hover{
    background-color:#b595d30d;border-color:#d0b5e45c;
  }
}

#page-gallery .ig-tabs{
  height:var(--ig-tab-height);box-sizing:border-box;
  align-items:stretch;justify-items:center;
  border-bottom:1px solid #b09ac72e;
}
#page-gallery .ig-tabs button{
  position:relative;box-sizing:border-box;align-self:stretch;
  width:88px;height:100%;min-height:0;min-width:0;
  display:flex;align-items:center;justify-content:center;
  padding:0;margin:0;gap:0;border:0;line-height:1;
  background:none;box-shadow:none;transform:none;
}
#page-gallery .ig-tabs button::after{
  content:'';display:block;position:absolute;pointer-events:none;
  bottom:0;left:50%;width:var(--ig-tab-line-width);height:2px;
  transform:translateX(-50%);background:#d3aff8;opacity:0;
}
#page-gallery .ig-tabs button[aria-selected=true]::after{opacity:1;}
#page-gallery .ig-tabs button:active:not(:disabled){transform:none;}
#page-gallery .ig-tabs button:focus-visible{
  outline:2px solid #dec2ff;outline-offset:-5px;border-radius:5px;
}
#page-gallery .ig-engraved-icon{
  position:relative;top:var(--ig-icon-shift);
  display:block;flex:none;background:var(--ig-engraving);
  mask-repeat:no-repeat;mask-position:center;mask-size:contain;
  opacity:.72;transition:opacity 140ms ease-out;
}
#page-gallery .ig-icon-photos{
  width:calc(var(--ig-photo-height) * 18 / 22);height:var(--ig-photo-height);
  mask-image:url('assets/theater/gallery-posts-engraved.svg');
}
#page-gallery .ig-icon-soop{
  /* Preserve the original mask: its visible artwork is 404 x 116 in a 404 x 124 box. */
  width:var(--ig-soop-width);
  height:calc(var(--ig-soop-width) * 124 / 404);
  mask-image:url('soop-instagram-mask.svg');
}
#page-gallery .ig-icon-youtube{
  width:var(--ig-youtube-width);height:calc(var(--ig-youtube-width) * 20 / 29);
  mask-image:url('assets/theater/youtube-symbol-engraved.svg');
}
#page-gallery .ig-tabs [aria-selected=true] .ig-engraved-icon{opacity:1;}
@media(hover:hover) and (pointer:fine){
  #page-gallery .ig-tabs button[aria-selected=false]:hover .ig-engraved-icon{opacity:.9;}
}

@media(max-width:735px){
  #page-gallery{--ig-profile-size:88px;}
  #page-gallery .ig-profile{
    grid-template-columns:var(--ig-profile-size) minmax(0,1fr);
    grid-template-rows:auto auto auto auto auto auto;
    grid-template-areas:'avatar account' 'avatar name' 'avatar stats' 'bio bio' 'status status' 'actions actions';
    row-gap:0;
  }
  #page-gallery .ig-profile-info{display:contents;}
  #page-gallery .ig-avatar{grid-area:avatar;width:var(--ig-profile-size);height:var(--ig-profile-size);}
  #page-gallery .ig-account{grid-area:account;}
  #page-gallery .ig-display-name{grid-area:name;}
  #page-gallery .ig-stats{grid-area:stats;}
  #page-gallery .ig-profile-note{grid-area:bio;margin:16px 0 0;top:0;}
  #page-gallery .ig-profile-status{grid-area:status;}
  #page-gallery .ig-profile-actions{grid-area:actions;margin-top:20px;}
}
@media(max-width:600px){
  #page-gallery{--ig-profile-size:80px;--ig-tab-height:45px;--ig-icon-shift:2.5px;--ig-tab-line-width:52px;--ig-photo-height:16px;--ig-soop-width:36px;--ig-youtube-width:22px;}
  #page-gallery .ig-tabs button{width:64px;}
  #page-gallery .ig-profile-actions button,#page-gallery #igMessageOpen{padding-inline:8px;line-height:15px;}
  #page-gallery .ig-profile-actions .ig-add-person{padding:0;}
}
@media(max-width:360px){
  #page-gallery .ig-profile{
    grid-template-areas:'avatar account' 'avatar name' 'stats stats' 'bio bio' 'status status' 'actions actions';
  }
  #page-gallery .ig-stats{column-gap:12px;}
}
@media(prefers-reduced-motion:reduce){
  #page-gallery .ig-engraved-icon,#page-gallery .ig-profile-actions button{transition:none;}
}

/* Archive controls: one small glass selector, with static optical layers for scrolling. */
#page-gallery #igVideoPanel .ig-video-toolbar{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  margin:0;padding:32px 0 24px;
}
#page-gallery #igVideoTitle{
  display:flex;align-items:center;height:38px;margin:0;flex-shrink:0;line-height:1;
}
#page-gallery .ig-archive-wordmark{
  --archive-ink-height:22px;
  display:block;flex:none;background:var(--ig-engraving);
  mask-repeat:no-repeat;mask-position:center;mask-size:contain;
}
#page-gallery .ig-archive-wordmark[data-platform=soop]{
  /* The home mask has 4px transparent insets above/below its 116px artwork. */
  width:calc(var(--archive-ink-height) * 404 / 116);
  height:calc(var(--archive-ink-height) * 124 / 116);
  /* Align the painted left edge, accounting for the mask's transparent bearing. */
  position:relative;left:calc(var(--archive-ink-height) * -3.3 / 116);
  mask-image:url('soop-instagram-mask.svg');
}
#page-gallery .ig-archive-wordmark[data-platform=youtube]{
  width:calc(var(--archive-ink-height) * 93 / 20);height:var(--archive-ink-height);
  mask-image:url('assets/theater/youtube-wordmark-engraved.svg');
}
#page-gallery #vodTabs{
  --vod-filter-index:0;
  position:relative;isolation:isolate;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  flex:0 0 290px;width:290px;height:38px;box-sizing:border-box;
  gap:0;margin:0;padding:3px;border:1px solid #c4b2d137;border-radius:999px;
  background:linear-gradient(180deg,#cbb8df0c,#17151e33 54%,#b49bc20a),#13111838;
  box-shadow:inset 0 1px 0 #ffffff0d,inset 0 -1px 1px #00000017,0 1px 0 #ffffff08;
}
#page-gallery #vodTabs[hidden]{display:none!important;}
#page-gallery #vodTabs::before{
  content:'';position:absolute;z-index:-1;top:3px;bottom:3px;left:3px;
  width:calc((100% - 6px) / 3);box-sizing:border-box;border-radius:999px;
  border:1px solid #d4c0e361;
  background:radial-gradient(ellipse at 24% 0%,#fff3,transparent 58%),radial-gradient(ellipse at 90% 110%,#d8b7f02e,transparent 60%),linear-gradient(115deg,#e8dbfa1f,#c3a6df08 45%,#b7a2cb24),#c7afd51c;
  box-shadow:inset 0 1px 0 #fff4,inset 1px 0 0 #edddff12,inset 0 -1px 0 #e6caff1a,0 2px 5px #0c08172e,0 0 0 1px #08051017;
  backdrop-filter:blur(6px) saturate(1.2);-webkit-backdrop-filter:blur(6px) saturate(1.2);
  transform:translateX(calc(var(--vod-filter-index) * 100%));
  transition:transform 160ms cubic-bezier(.23,1,.32,1);
  pointer-events:none;
}
#page-gallery #vodTabs button,
#page-gallery #vodTabs button[aria-pressed=true]{
  position:relative;display:flex;align-items:center;justify-content:center;
  width:100%;height:100%;min-width:0;min-height:0;box-sizing:border-box;
  margin:0;padding:0 8px;border:0;border-radius:999px;
  background:none;box-shadow:none;transform:none;opacity:1;
  color:#bfb5c9;font:500 12px/18px var(--font-ui);white-space:nowrap;
  transition:color 140ms ease-out;
}
#page-gallery #vodTabs button[aria-pressed=true]{color:#fbf6ff;font-weight:600;}
#page-gallery #vodTabs button:active{transform:none;}
#page-gallery #vodTabs button:focus-visible{
  outline:2px solid #dec2ff;outline-offset:1px;
}
#page-gallery #vodTabs.is-keyboard::before,
#page-gallery #vodTabs.is-keyboard button{transition:none;}
@media(hover:hover) and (pointer:fine){
  #page-gallery #vodTabs button:hover{opacity:1;color:#f3eaf9;}
}
#page-gallery #igVideoPanel .ig-video-duration{
  display:inline-flex;align-items:center;justify-content:center;
  box-sizing:border-box;margin:0;color:#f4eef8;
  border:1px solid #e4cee43d;
  background:linear-gradient(145deg,#34303eeb,#201e28e8);
  box-shadow:inset 0 1px 0 #fff1,0 1px 3px #0002;
  font-family:var(--sans);font-weight:500;letter-spacing:0;
  pointer-events:none;text-shadow:none;
}
#page-gallery #igVideoPanel .ig-video-duration{
  bottom:8px;right:8px;top:auto;left:auto;height:20px;padding:0 5px;border-radius:5px;
  font-size:11px;line-height:16px;font-variant-numeric:tabular-nums;
}
#page-gallery #igVideoPanel .ig-video-duration[hidden]{display:none!important;}

@media(max-width:735px){
  #page-gallery #igVideoPanel .ig-video-toolbar{flex-wrap:wrap;gap:16px;padding:26px 0 20px;}
  #page-gallery #igVideoTitle{height:44px;}
  #page-gallery #vodTabs{flex-basis:290px;max-width:100%;height:44px;}
}
@media(max-width:600px){
  #page-gallery #igVideoTitle{width:100%;}
  #page-gallery #vodTabs{
    width:100%;flex-basis:100%;height:44px;
  }
  #page-gallery #vodTabs button{font-size:12px;}
  #page-gallery #igVideoPanel .ig-video-duration{bottom:6px;right:6px;font-size:10px;height:18px;}
}
@media(prefers-reduced-motion:reduce){
  #page-gallery #vodTabs::before,#page-gallery #vodTabs button{transition:none;}
}

/* View counts sit on the image; titles keep their existing position and type. */
#page-gallery #igVideoPanel .ig-video-views{position:absolute;left:10px;bottom:8px;z-index:2;display:inline-flex;align-items:center;gap:5px;max-width:calc(100% - 76px);height:20px;margin:0;padding:0;border:0;background:none;color:#fff;font:600 12px/20px var(--font-ui);letter-spacing:0;font-variant-numeric:tabular-nums;text-shadow:0 1px 3px #000,0 0 9px #0009;pointer-events:none}
#page-gallery #igVideoPanel .ig-video-views svg{width:13px;height:13px;flex:none;fill:currentColor;stroke:none;filter:drop-shadow(0 1px 2px #0008)}
#page-gallery #igVideoPanel .ig-video-views span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#page-gallery #igVideoPanel .ig-video-views[hidden]{display:none!important}
#page-gallery #igVideoPanel .auto-vod-thumb::after{content:"";position:absolute;inset:auto 0 0;height:48px;background:linear-gradient(transparent,#0007);pointer-events:none}
#page-gallery #igVideoPanel .ig-video-duration{z-index:2}
@media(max-width:600px){#page-gallery #igVideoPanel .ig-video-views{left:8px;bottom:6px;height:18px;font-size:11px;line-height:18px;gap:4px;max-width:calc(100% - 62px)}#page-gallery #igVideoPanel .ig-video-views svg{width:12px;height:12px}}