/* Original case media components; Aspect mechanism adapted from Bencho (MIT, bencho.dev/licence). Scoped to these cases. */
.original-case .video-frame{
  position: relative;
  width: 100%;
  
  aspect-ratio: var(--ar, 16 / 9);
  background: var(--surface);
  border-radius: 6px;
  overflow: hidden;
}
.original-case .video-frame::after{
  content: ""; position: absolute; inset: 0;
  border: 1px solid var(--line); border-radius: inherit;
  pointer-events: none;
}
.original-case .video-frame iframe{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0;
  
  color-scheme: light;
}
.original-case .video-grid.stack{ grid-template-columns: minmax(0, 1fr); }
.original-case .video-grid.pair{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
.original-case .video-grid.duo{
  grid-template-columns: minmax(0, var(--duo-a, 1fr)) minmax(0, var(--duo-b, 0.5625fr));
}
.original-case .video-grid.duo.flip{
  grid-template-columns: minmax(0, var(--duo-b, 0.5625fr)) minmax(0, var(--duo-a, 1fr));
}
.original-case .video-grid.duo + .video-grid.duo{ margin-top: 24px; }
.original-case .video-grid.duo.beside{
  grid-template-columns:
    minmax(0, 1fr)
    minmax(0, calc((100% - 24px - 52px * var(--duo-r)) / (1 + var(--duo-r))));
}
@media (max-width: 700px){.original-case .video-grid.duo,.original-case .video-grid.duo.flip,.original-case .video-grid.duo.beside{ grid-template-columns: minmax(0, 1fr); }
.original-case .video-grid.duo > .portrait{ width: 100%; max-width: 360px; margin-inline: auto; }}
.original-case .video-grid.tower{
  grid-template-columns: minmax(0, calc((100% - 51px) / 1.4)) minmax(0, 1fr);
}
.original-case .video-grid.tower > :nth-child(1){ grid-column: 1; grid-row: 1; }
.original-case .video-grid.tower > :nth-child(2){ grid-column: 1; grid-row: 2; }
.original-case .video-grid.tower > .tall{ grid-column: 2; grid-row: 1 / span 2; }
.original-case .video-grid.tower figcaption{
  line-height: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
@media (max-width: 700px){.original-case .video-grid.tower{ grid-template-columns: minmax(0, 1fr); }
.original-case .video-grid.tower > :nth-child(n){ grid-column: auto; grid-row: auto; }
.original-case .video-grid.tower > .tall{ width: 100%; max-width: 320px; margin-inline: auto; }
.original-case .video-grid.tower figcaption{ white-space: normal; }}
.original-case .video-grid.pair > .case-fig:last-child:nth-child(odd){
  grid-column: 1 / -1;
  justify-self: center;
  width: calc(50% - 12px);
}
@media (max-width: 700px){.original-case .video-grid.pair{ grid-template-columns: minmax(0, 1fr); }
.original-case .video-grid.pair > .case-fig:last-child:nth-child(odd){
    grid-column: auto; width: 100%;
  }}
.original-case .video-grid{
  display: grid;
  
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 24px;
  margin-top: 8px;
}
.original-case .wall-controls{ display:flex; gap:10px; margin: 0 0 20px; flex-wrap: wrap; }
.original-case .wall-controls button{
  background: var(--surface); color: var(--text); border: 1px solid var(--line);
  border-radius: 4px; padding: 7px 14px; min-height: 32px;
  font-family: var(--font-mono);
  font-size: var(--t-micro); text-transform: uppercase; letter-spacing: 0.05em; cursor: pointer;
}
.original-case .wall-controls button:hover{ border-color: var(--accent); }
.original-case .case-facts{ display: grid; gap: 12px; }
.original-case .case-facts > div{
  display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 16px;
  padding-top: 12px; border-top: 1px solid var(--line);
}
.original-case .case-facts dt{
  font-family: var(--font-mono); font-size: var(--t-micro);
  text-transform: uppercase; letter-spacing: 0.12em; color: var(--accent-dim);
  padding-top: 2px;
}
.original-case .case-facts dd{ color: var(--text); font-size: var(--t-meta); line-height: 1.6; }
.original-case .case-facts dd code{
  font-family: var(--font-mono); font-size: 0.92em;
  color: var(--muted); background: var(--surface-2);
  padding: 1px 5px; border-radius: 3px;
}
.original-case .ticklist{ list-style: none; display: grid; gap: 14px; }
.original-case .ticklist li{
  position: relative; padding-left: 22px;
  color: var(--muted); font-size: var(--t-meta); line-height: 1.65; max-width: 56ch;
}
.original-case .ticklist li::before{
  content: ""; position: absolute; left: 0; top: 8px;
  width: 7px; height: 7px; background: var(--accent); transform: rotate(45deg);
}
.original-case .ticklist li b{ color: var(--text); font-weight: 500; }
.original-case .chips{ display: flex; flex-wrap: wrap; gap: 8px; }
.original-case .chips span{
  font-family: var(--font-mono); font-size: var(--t-micro);
  letter-spacing: 0.06em; text-transform: uppercase;
  border: 1px solid var(--line); border-radius: 3px;
  padding: 5px 10px; color: var(--text);
}
.original-case .case-back{ margin-top: 0; font-size: var(--t-meta); }
.original-case .case-meta{ margin-top: 6px; font-size: var(--t-meta); }
.original-case .case-back-end{ margin: 40px 0 0; }
.original-case .case-facts dd a{ border-bottom: 1px solid var(--line); }
.original-case .case-facts dd a:hover{ color: var(--accent); border-bottom-color: var(--accent); }
.original-case .case-h{
  font-family: var(--font-serif); font-size: var(--t-lead);
  font-weight: 600; letter-spacing: -0.01em; line-height: 1.3;
  text-wrap: balance;
}
.original-case .case-prose{ display: grid; gap: 16px; }
.original-case .case-h + .case-prose{ margin-top: 14px; }
.original-case .case-prose p{ color: var(--muted); max-width: 68ch; }
.original-case .case-prose code{
  font-family: var(--font-mono); font-size: 0.92em;
  color: var(--text); background: var(--surface-2);
  padding: 1px 5px; border-radius: 3px;
}
.original-case .case-prose + .video-grid{ margin-top: 32px; }
.original-case .case-prose + .live-note{ margin-top: 32px; }
.original-case .case-prose + .case-fig{ margin-top: 32px; }
.original-case .case-fig{ margin: 0; min-width: 0; }
.original-case .case-fig figcaption,.original-case .case-lot figcaption{
  margin-top: 10px;
  font-family: var(--font-mono); font-size: var(--t-meta);
  letter-spacing: 0.03em; color: var(--muted);
}
.original-case .video-frame.square{ aspect-ratio: 1 / 1; }
.original-case .case-fig.half{ max-width: 540px; }
@media (max-width: 760px){.original-case .video-frame.adaptive{ aspect-ratio: 1478 / 1900; }}
.original-case .case-shot{
  position: relative; width: 100%;
  background: var(--surface); border-radius: 6px; overflow: hidden;
}
.original-case .case-shot::after{
  content: ""; position: absolute; inset: 0;
  border: 1px solid var(--line); border-radius: inherit;
  pointer-events: none;
}
.original-case .case-shot img{ display: block; width: 100%; height: auto; }
.original-case .case-shot.square{ aspect-ratio: 1 / 1; }
.original-case .case-shot.wide{ aspect-ratio: 16 / 9; }
.original-case .case-shot.square img,.original-case .case-shot.wide img{ height: 100%; object-fit: cover; }
.original-case .case-shots{
  display: grid; gap: 24px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
}
.original-case .case-shots.lead{ grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.original-case .case-shots + .case-shots{ margin-top: 24px; }
@media (max-width: 700px){.original-case .case-shots,.original-case .case-shots.lead{ grid-template-columns: minmax(0, 1fr); }
.original-case .case-shots > .tall{ width: 100%; max-width: 360px; margin-inline: auto; }}
.original-case .case-set{ display: grid; gap: 24px; }
.original-case .case-prose + .case-set{ margin-top: 32px; }
.original-case .case-set > .video-grid{ margin-top: 0; }
.original-case .ring-lines{ display: grid; gap: 10px; }
.original-case .video-frame.pending,.original-case .case-shot.pending,.original-case .case-shot.missing,.original-case .cell.pending,.original-case .asp-fr.pending{
  display: grid; place-items: center;
  background:
    repeating-linear-gradient(45deg,
      transparent 0 11px,
      color-mix(in srgb, var(--accent) 6%, transparent) 11px 22px),
    var(--surface-2);
}
.original-case .video-frame.pending::before,.original-case .case-shot.pending::before,.original-case .case-shot.missing::before,.original-case .cell.pending::before,.original-case .asp-fr.pending::before{
  content: "asset pending";
  font-family: var(--font-mono); font-size: var(--t-micro);
  letter-spacing: 0.18em; text-transform: uppercase; text-align: center;
  color: var(--accent); border: 1px dashed var(--accent-dim);
  border-radius: 3px; padding: 7px 14px; margin: 0 12px;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
}
.original-case .video-frame.pending[data-pending]::before,.original-case .case-shot.pending[data-pending]::before,.original-case .cell.pending[data-pending]::before,.original-case .asp-fr.pending[data-pending]::before{ content: attr(data-pending); }
.original-case .spec-table-wrap{ overflow-x: auto; margin: 28px 0 32px; }
.original-case .spec-table{ width: 100%; min-width: 560px; border-collapse: collapse; }
.original-case .spec-table caption{
  caption-side: bottom; text-align: left; padding-top: 10px;
  font-family: var(--font-mono); font-size: var(--t-meta);
  letter-spacing: 0.03em; color: var(--muted);
}
.original-case .spec-table thead th{
  text-align: left; font-weight: 500;
  font-family: var(--font-mono); font-size: var(--t-micro);
  text-transform: uppercase; letter-spacing: 0.12em; color: var(--accent-dim);
  padding: 0 16px 10px 0; border-bottom: 1px solid var(--line);
}
.original-case .spec-table tbody th,.original-case .spec-table td{
  text-align: left; vertical-align: top;
  padding: 12px 16px 12px 0; border-bottom: 1px solid var(--line);
  font-size: var(--t-meta); line-height: 1.6;
}
.original-case .spec-table tbody th{ font-weight: 500; color: var(--text); }
.original-case .spec-table td{ color: var(--muted); }
.original-case .spec-table .num{ font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.original-case .case-lotties{
  display: grid; gap: 18px 10px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.original-case .case-lotties.pair{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
.original-case .case-lot{ margin: 0; min-width: 0; }
.original-case .case-lot.wide{ grid-column: 1 / -1; }
.original-case .case-lot .cell{ aspect-ratio: var(--ar, 1 / 1); }
.original-case .case-lot.wide .cell{ aspect-ratio: var(--ar, 3549 / 964); }
.original-case .case-lot .anim{ position: absolute; inset: 7%; width: auto; height: auto; }
.original-case .case-lot.wide .anim{ inset: 8% 3%; }
.original-case .case-lotties + .case-lotties{ margin-top: 18px; }
.original-case .case-lotties.icons,.original-case .case-lotties.under{ max-width: calc(66.667% - 3.333px); margin-inline: auto; }
.original-case .case-lot.icon .anim{ inset: 24%; }
.original-case .case-lot figcaption{ display: flex; justify-content: space-between; gap: 4px 12px; flex-wrap: wrap; }
.original-case .case-lot figcaption span:first-child{ color: var(--text); }
@media (max-width: 620px){.original-case .case-lotties,.original-case .case-lotties.pair{ grid-template-columns: minmax(0, 1fr); }
.original-case .case-lotties.under{ max-width: none; }}
.original-case .wall-controls button[aria-pressed="true"]{ border-color: var(--accent); color: var(--accent); }
.original-case .case-figs{
  list-style: none; display: grid; gap: 24px;
  grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
  margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--line);
}
.original-case .case-fig-k{
  display: block;
  font-family: var(--font-serif); font-size: var(--t-display);
  font-weight: 600; letter-spacing: -0.03em; line-height: 1;
  font-variant-numeric: lining-nums tabular-nums;
}
.original-case .case-fig-v{
  display: block; margin-top: 10px;
  font-size: var(--t-meta); line-height: 1.5; color: var(--muted); max-width: 24ch;
}
.original-case .asp{
  
  --asp-ink-rgb: 236, 233, 226;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  
  max-width: var(--asp-w, 560px);
  
  margin-inline: auto;
  font-family: var(--font-mono);
}
.original-case .asp-fig{
  --asp-w: 560px;
  max-width: var(--asp-w);
  margin-inline: auto;
}
.original-case .video-grid > .asp-fig{ width: 100%; }
.original-case .asp-fig figcaption{ text-align: center; }
.original-case .asp-stage{
  display: grid;
  place-items: end center;
  width: 100%;
  aspect-ratio: 1 / 1;
}
.original-case .asp-pic{
  position: relative;
  background: var(--surface);
  border-radius: 6px;
  overflow: hidden;
  
  transition:
    width var(--asp-ms, 520ms) cubic-bezier(0.22, 1, 0.36, 1),
    height var(--asp-ms, 520ms) cubic-bezier(0.22, 1, 0.36, 1);
}
.original-case .asp-pic::after{
  content: ""; position: absolute; inset: 0;
  border: 1px solid var(--line); border-radius: inherit;
  pointer-events: none;
}
.original-case .asp-fr{ position: absolute; inset: 0; }
.original-case .asp-fr[hidden]{ display: none; }
.original-case .asp-fr iframe{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0;
  color-scheme: light;   
}
.original-case .asp-tabs{
  position: relative;
  display: grid;
  
  grid-template-columns: repeat(var(--asp-n, 3), 40px);
  padding: 2px;
  border-radius: 999px;
  background: rgba(var(--asp-ink-rgb), 0.06);
}
.original-case .asp-thumb{
  position: absolute;
  top: 2px; left: 2px;
  width: calc((100% - 4px) / var(--asp-n, 3));
  height: calc(100% - 4px);
  border-radius: 999px;
  background: var(--surface-2);
  box-shadow: 0 1px 2px rgba(var(--asp-ink-rgb), 0.1);
  
  transition: transform calc(var(--asp-ms, 520ms) * 0.55)
    cubic-bezier(0.22, 1, 0.36, 1), opacity 160ms ease;
  pointer-events: none;
}
.original-case .asp-tab{
  position: relative;
  display: grid;
  place-items: center;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  
  font: inherit;
  font-size: var(--t-meta);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: color 160ms ease, scale 130ms cubic-bezier(0.3, 0.9, 0.4, 1);
}
.original-case .asp-tab:hover{ color: var(--text); }
.original-case .asp-tab[aria-checked="true"]{ color: var(--text); }
.original-case .asp-tab:active{ scale: 0.92; }
.original-case .asp-tab:focus-visible{ outline: 2px solid var(--accent); outline-offset: 2px; }
.original-case .asp.ground{ max-width: none; }
.original-case .asp.ground .asp-stage{ aspect-ratio: var(--ar, 16 / 9); }
.original-case .asp.ground .asp-pic{
  width: 100%; height: 100%;
  transition: background-color var(--asp-ms, 520ms) cubic-bezier(0.22, 1, 0.36, 1);
}
.original-case .asp.ground[data-ground="dark"]  .asp-pic{ background: #000; }
.original-case .asp.ground[data-ground="light"] .asp-pic{ background: #fff; }
.original-case .asp.ratio{ max-width: none; }
.original-case .asp.ratio .asp-stage{ aspect-ratio: var(--ar, 16 / 9); }
.original-case .asp.ratio .asp-pic{ width: 100%; height: 100%; }
.original-case .asp-axes{
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  gap: 8px 12px;
}
.original-case .asp-axis{ display: contents; }
.original-case .asp-axes .asp-tabs{ justify-self: start; }
.original-case .asp-tabs[data-off] .asp-thumb{ opacity: 0; }
.original-case .asp-axis-name{
  font-size: var(--t-micro); text-transform: uppercase;
  letter-spacing: 0.12em; text-align: right;
  color: var(--muted);
}
@media (prefers-reduced-motion: reduce){.original-case .asp-pic,.original-case .asp-thumb,.original-case .asp-tab{ transition-duration: 1ms; }}
.original-case .feed-fig{
  --feed-w: 520px;
  max-width: var(--feed-w);
  
  margin-inline: auto;
}
.original-case .feed{
  position: relative;
  max-width: var(--feed-w, 520px);
  font-family: var(--font-mono);
}
.original-case .feed-stage{
  position: relative;
  aspect-ratio: var(--ar, 4 / 5);
  background: var(--surface);
  border-radius: 6px;
}
.original-case .feed-stage::after{
  content: ""; position: absolute; inset: 0;
  border: 1px solid var(--line); border-radius: inherit;
  pointer-events: none;
  z-index: 2;   
}
.original-case .feed-track{
  position: absolute; inset: 0;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  border-radius: inherit;
}
.original-case .feed-track::-webkit-scrollbar{ display: none; }
.original-case .feed-slide{ position: relative; scroll-snap-align: center; }
.original-case .feed-fr{ position: absolute; inset: 0; }
.original-case .feed-fr iframe{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0;
  color-scheme: light;   
}
.original-case .feed-arrow{
  position: absolute;
  top: 50%; translate: 0 -50%;
  z-index: 3;
  display: grid; place-items: center;
  width: 32px; height: 32px;
  padding: 0; border: 0; border-radius: 999px;
  background: color-mix(in srgb, var(--bg) 70%, transparent);
  backdrop-filter: blur(6px);
  color: var(--text);
  cursor: pointer;
  transition: opacity 160ms ease, scale 130ms cubic-bezier(0.3, 0.9, 0.4, 1);
}
.original-case .feed-arrow[data-feed-step="-1"]{ left: 10px; }
.original-case .feed-arrow[data-feed-step="1"]{ right: 10px; }
.original-case .feed-arrow:active{ scale: 0.92; }
.original-case .feed-arrow[aria-disabled="true"]{ opacity: 0.25; cursor: default; }
.original-case .feed-count{
  position: absolute;
  top: 10px; right: 10px;
  z-index: 3;
  padding: 2px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg) 70%, transparent);
  backdrop-filter: blur(6px);
  font-size: var(--t-micro);
  font-variant-numeric: tabular-nums;
  line-height: 18px;
  color: var(--text);
  pointer-events: none;
}
.original-case .feed-dots{
  display: flex;
  justify-content: center;
  
  margin-top: 12px;
}
.original-case .feed-dot{
  display: grid; place-items: center;
  width: 22px; height: 22px;
  padding: 0; border: 0;
  background: transparent;
  cursor: pointer;
}
.original-case .feed-dot::before{
  content: "";
  width: 6px; height: 6px;
  border-radius: 999px;
  background: var(--muted);
  opacity: 0.4;
  transition: background-color 160ms ease, opacity 160ms ease,
    scale 160ms cubic-bezier(0.3, 0.9, 0.4, 1);
}
.original-case .feed-dot:hover::before{ opacity: 0.7; }
.original-case .feed-dot[aria-checked="true"]::before{
  background: var(--accent);
  opacity: 1;
  scale: 1.2;
}
.original-case .feed-dot:focus-visible{ outline: 2px solid var(--accent); outline-offset: 0; border-radius: 999px; }
@media (prefers-reduced-motion: reduce){.original-case .feed-arrow,.original-case .feed-dot::before{ transition-duration: 1ms; }}