/* =============================================================================
   iShowcase — front end
   Every value here resolves from a --is-* token emitted per showcase, so two
   showcases on one page can look nothing alike without a second stylesheet.
============================================================================= */

@property --is-p { syntax: "<number>"; inherits: true; initial-value: 0; }

.is-show {
  /* Escape whatever column the theme wrapped us in. A scroll showcase needs
     the whole viewport; block themes constrain post content to ~40rem. */
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);

  --is-tape-w: 5.5rem;
  --is-gut: clamp(1.25rem, 4vw, 4rem);
  --is-span: 340vh;
  position: relative;
  background: var(--is-field);
  color: var(--is-chalk);
  font-family: var(--is-body);
  font-size: clamp(1rem, .55vw + .9rem, 1.12rem);
  line-height: 1.55;
  overflow-x: clip;
  scrollbar-gutter: stable;
}
.is-show *, .is-show *::before, .is-show *::after { box-sizing: border-box; }
.is-show ::selection { background: var(--is-flare); color: var(--is-field); }
.is-show img, .is-show video { display: block; max-width: 100%; }

/* ---------------------------------------------------------------- tape ---- */
.is-tape {
  position: fixed; left: 0; top: 0; bottom: 0; width: var(--is-tape-w); z-index: 40;
  border-right: 1px solid var(--is-edge);
  background: color-mix(in oklab, var(--is-field) 92%, #000);
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 1.25rem .75rem;
  font: 500 .62rem/1 var(--is-tele); letter-spacing: .16em; color: var(--is-mist);
}
.is-tape__head {
  position: absolute; left: 0; top: 5rem; width: 2px; height: calc(100% - 10rem);
  background: linear-gradient(180deg, transparent, var(--is-signal) 12%, var(--is-flare));
  transform-origin: top; transform: scaleY(var(--is-p, 0));
}
.is-tape__marks {
  position: absolute; inset: 5rem .75rem 5rem;
  display: flex; flex-direction: column; justify-content: space-between;
}
.is-tape__marks em {
  display: flex; align-items: center; gap: .4rem; font-style: normal;
  opacity: .45; white-space: nowrap; transition: opacity .3s, color .3s;
}
.is-tape__marks em::before { content: ""; width: .7rem; height: 1px; background: currentColor; }
.is-tape__marks em.on { opacity: 1; color: var(--is-flare); }
.is-tape__brand {
  writing-mode: vertical-rl; transform: rotate(180deg);
  font-weight: 700; color: var(--is-chalk); letter-spacing: .28em;
}
.is-tape__pct { writing-mode: vertical-rl; color: var(--is-signal); letter-spacing: .2em; }
.is-show--taped .is-stage { padding-left: var(--is-tape-w); }

/* ------------------------------------------------------------- typography -- */
.is-wrap { max-width: var(--is-max, 78rem); margin-inline: auto; padding-inline: var(--is-gut); }
.is-eyebrow {
  margin: 0 0 .6rem; font: 500 .68rem/1 var(--is-tele);
  letter-spacing: .24em; text-transform: uppercase; color: var(--is-signal);
}
.is-show .is-title {
  margin: 0 0 1.1rem; font-family: var(--is-display); font-weight: 800;
  font-stretch: var(--is-stretch, 100%); letter-spacing: -.03em; line-height: .94;
  font-size: clamp(2.2rem, 6vw, 4.6rem);
}
.is-scene--cover .is-title { font-size: clamp(3rem, 10.5vw, 9.5rem); line-height: .9; }
.is-scene--depth .is-title { font-size: clamp(1.15rem, 2.2vw, 1.6rem); }
.is-title em { font-style: normal; color: var(--is-flare); }
.is-lede { max-width: 40ch; color: var(--is-mist); }
.is-lede p { margin: 0 0 .8rem; }

/* ------------------------------------------------------------------ scenes -- */
.is-scene { position: relative; }
.is-span { height: var(--is-span); }
.is-sticky {
  position: sticky; top: 0; height: 100svh; overflow: clip;
  display: grid; align-content: center; gap: 1.5rem;
}

/* cover */
.is-scene--cover {
  min-height: 100svh; display: grid; align-content: center;
  padding-block: min(18vh, 9rem); overflow: clip;
}
.is-plates { position: absolute; inset: -10%; pointer-events: none; }
.is-plate {
  position: absolute; overflow: hidden; border-radius: var(--is-radius);
  border: 1px solid var(--is-edge);
}
.is-plate img, .is-plate video { width: 100%; height: 100%; object-fit: cover; }
.is-plate[data-plate="0"] { left: 56%; top: 4%;  width: 27%; aspect-ratio: 3/4; }
.is-plate[data-plate="1"] { left: 80%; top: 46%; width: 17%; aspect-ratio: 1/1; }
.is-plate[data-plate="2"] { left: 47%; top: 64%; width: 22%; aspect-ratio: 4/3; opacity: .6; }
.is-cover__inner { position: relative; z-index: 1; }

/* pin */
.is-pin__grid { display: grid; gap: var(--is-gut); align-items: center; }
@media (min-width: 56rem) { .is-pin__grid { grid-template-columns: 1fr 1.05fr; } }
.is-deck {
  position: relative; margin: 0; aspect-ratio: 4/3; overflow: hidden;
  border: 1px solid var(--is-edge); border-radius: var(--is-radius);
  background: var(--is-panel);
}
.is-deck__layer {
  position: absolute; inset: 0; padding: 0; border: 0; background: none;
  cursor: pointer; width: 100%; height: 100%;
}
.is-deck__layer img, .is-deck__layer video { width: 100%; height: 100%; object-fit: cover; }

/* rail */
.is-rail__head { margin-bottom: 1.5rem; }
.is-rail__track {
  display: flex; gap: 1.25rem; width: max-content;
  padding-inline: var(--is-gut); will-change: transform;
}

/* depth */
.is-scene--depth { min-height: 180vh; padding-block: 22vh; overflow: clip; }
.is-depth__field { position: absolute; inset: 0; pointer-events: none; }
.is-depth__layer {
  position: absolute; padding: 0; overflow: hidden; pointer-events: auto;
  cursor: pointer; background: var(--is-panel);
  border: 1px solid var(--is-edge); border-radius: var(--is-radius);
  transition: border-color .25s, box-shadow .35s;
}
.is-depth__layer:hover, .is-depth__layer:focus-visible {
  border-color: var(--is-flare); outline: none;
  box-shadow: 0 0 0 1px var(--is-flare), 0 24px 60px -20px rgb(0 0 0 / .6);
}
.is-depth__layer img, .is-depth__layer video { width: 100%; height: 100%; object-fit: cover; }
.is-depth__note {
  position: relative; z-index: 2; max-width: 36ch; padding: 1.6rem;
  background: color-mix(in oklab, var(--is-field) 80%, transparent);
  backdrop-filter: blur(14px);
  border: 1px solid var(--is-edge); border-radius: var(--is-radius);
}

/* sequence */
.is-seq { justify-items: center; }
.is-seq__frames {
  position: relative; width: min(74vw, 36rem); aspect-ratio: 1;
  border: 1px solid var(--is-edge); border-radius: var(--is-radius); overflow: hidden;
}
.is-seq__frame { position: absolute; inset: 0; }
.is-seq__frame img, .is-seq__frame video { width: 100%; height: 100%; object-fit: cover; }
.is-seq__bar {
  width: min(74vw, 36rem); height: 2px; background: var(--is-edge);
  position: relative; overflow: hidden;
}
.is-seq__bar::after {
  content: ""; position: absolute; inset: 0; background: var(--is-flare);
  transform-origin: left; transform: scaleX(var(--is-p, 0));
}

/* grid */
.is-grid {
  display: grid; gap: 1.25rem; margin-top: 2.5rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}
@media (min-width: 60rem) {
  .is-grid { grid-template-columns: repeat(var(--is-cols, 3), minmax(0, 1fr)); }
}
.is-scene--text, .is-scene--grid { padding-block: 18vh; }

/* ------------------------------------------------------------------- cards -- */
.is-card {
  display: block; padding: 0; border: 0; background: none; text-align: left;
  color: inherit; font: inherit; cursor: pointer;
}
.is-rail__track .is-card {
  flex: 0 0 auto; width: min(64vw, 25rem);
  content-visibility: auto; contain-intrinsic-size: 25rem 32rem;
}
.is-card__frame {
  position: relative; display: block; aspect-ratio: 4/5; overflow: hidden;
  background: var(--is-panel); border: 1px solid var(--is-edge);
  border-radius: var(--is-radius);
  transition: border-color .25s, transform .35s cubic-bezier(.2,.8,.2,1);
}
.is-card__frame img, .is-card__frame video { width: 100%; height: 100%; object-fit: cover; }
.is-card:hover .is-card__frame, .is-card:focus-visible .is-card__frame {
  border-color: var(--is-signal); transform: translateY(-6px);
}
.is-card:focus-visible { outline: none; }
.is-card:focus-visible .is-card__frame { outline: 2px solid var(--is-flare); outline-offset: 3px; }
.is-open {
  position: absolute; right: .6rem; bottom: .6rem; padding: .45rem .6rem;
  font: 700 .6rem/1 var(--is-tele); letter-spacing: .16em;
  background: color-mix(in oklab, var(--is-field) 80%, transparent);
  border: 1px solid var(--is-edge); border-radius: 2px; color: var(--is-chalk);
  opacity: 0; transform: translateY(4px); transition: opacity .25s, transform .25s;
}
.is-card:hover .is-open, .is-card:focus-visible .is-open { opacity: 1; transform: none; }
.is-card__label {
  display: flex; justify-content: space-between; gap: 1rem; margin-top: .7rem;
  font: 500 .66rem/1.4 var(--is-tele); letter-spacing: .12em;
  text-transform: uppercase; color: var(--is-mist);
}
.is-card__label b { color: var(--is-chalk); font-weight: 700; }

/* ------------------------------------------------------------------ viewer -- */
.is-viewer {
  width: min(64rem, 92vw); max-height: 88svh; padding: 0; overflow: hidden;
  border: 1px solid var(--is-edge); border-radius: var(--is-radius);
  background: var(--is-panel); color: var(--is-chalk);
  font-family: var(--is-body);
  box-shadow: 0 40px 120px -30px rgb(0 0 0 / .7);
}
.is-viewer::backdrop {
  background: color-mix(in srgb, #000 82%, transparent); backdrop-filter: blur(10px);
}
.is-viewer__grid {
  display: grid; grid-template-columns: 1fr; max-height: 88svh;
  overflow-y: auto; overscroll-behavior: contain;
}
@media (min-width: 52rem) { .is-viewer__grid { grid-template-columns: 1.05fr 1fr; } }
.is-viewer__media { position: relative; background: var(--is-field); aspect-ratio: 4/5; }
@media (min-width: 52rem) {
  .is-viewer__media { aspect-ratio: auto; border-right: 1px solid var(--is-edge); }
}
.is-viewer__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.is-viewer__bar {
  position: absolute; inset: auto 0 0 0; display: flex; align-items: center;
  justify-content: space-between; gap: 1rem; padding: .7rem .9rem;
  background: linear-gradient(transparent, color-mix(in oklab, var(--is-field) 92%, #000));
}
.is-viewer__count { font: 500 .62rem/1 var(--is-tele); letter-spacing: .16em; color: var(--is-mist); }
.is-viewer__nav { display: flex; gap: .4rem; }
.is-viewer__nav button, .is-viewer__close {
  padding: .5rem .7rem; cursor: pointer; color: var(--is-chalk);
  background: color-mix(in oklab, var(--is-field) 80%, transparent);
  border: 1px solid var(--is-edge); border-radius: 2px;
  font: 700 .68rem/1 var(--is-tele); letter-spacing: .1em;
  transition: border-color .2s, color .2s;
}
.is-viewer__nav button:hover, .is-viewer__close:hover { border-color: var(--is-flare); color: var(--is-flare); }
.is-viewer__close { position: absolute; top: .9rem; right: .9rem; z-index: 3; }
.is-viewer__body { padding: clamp(1.4rem, 3vw, 2.4rem); display: flex; flex-direction: column; gap: .9rem; }
.is-viewer__kind {
  margin: 0; font: 500 .66rem/1 var(--is-tele); letter-spacing: .2em;
  text-transform: uppercase; color: var(--is-signal);
}
.is-viewer__body h3 {
  margin: 0; font-family: var(--is-display); font-weight: 800;
  font-stretch: var(--is-stretch, 100%); letter-spacing: -.025em; line-height: 1;
  font-size: clamp(1.6rem, 3.4vw, 2.4rem);
}
.is-viewer__body p { margin: 0; color: var(--is-mist); font-size: .97rem; }
.is-viewer__facts { display: flex; flex-wrap: wrap; gap: .4rem; }
.is-viewer__facts span:not(:empty) {
  padding: .35rem .7rem; border: 1px solid var(--is-edge); border-radius: 999px;
  font: 500 .64rem/1 var(--is-tele); letter-spacing: .1em;
  text-transform: uppercase; color: var(--is-mist);
}
.is-viewer__link {
  color: var(--is-flare); text-decoration: none;
  font: 500 .72rem/1 var(--is-tele); letter-spacing: .14em; text-transform: uppercase;
}
.is-viewer__related { margin-top: auto; padding-top: 1.3rem; border-top: 1px solid var(--is-edge); }
.is-viewer__related h4 {
  margin: 0 0 .8rem; font: 500 .62rem/1 var(--is-tele); letter-spacing: .2em;
  text-transform: uppercase; color: var(--is-mist);
}
.is-viewer__rel { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; }
.is-viewer__rel button {
  padding: 0; overflow: hidden; cursor: pointer; color: var(--is-mist); font: inherit;
  background: none; border: 1px solid var(--is-edge); border-radius: var(--is-radius);
  transition: border-color .2s;
}
.is-viewer__rel button[hidden] { display: none; }
.is-viewer__rel button:hover, .is-viewer__rel button:focus-visible {
  border-color: var(--is-signal); outline: none;
}
.is-viewer__rel img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.is-viewer__rel span {
  display: block; padding: .45rem .5rem; text-align: left;
  font: 500 .58rem/1.3 var(--is-tele); letter-spacing: .1em; text-transform: uppercase;
}

@keyframes is-viewer-in { from { opacity: 0; transform: translateY(14px) scale(.985); } }
.is-viewer[open] { animation: is-viewer-in .32s cubic-bezier(.2,.85,.25,1); }
.is-viewer[open]::backdrop { animation: is-viewer-in .32s ease; }
::view-transition-old(is-asset), ::view-transition-new(is-asset) {
  animation-duration: .42s; animation-timing-function: cubic-bezier(.2,.85,.25,1);
}
html.is-locked { overflow: hidden; }

/* ----------------------------------------------------------------- limits -- */
@media (max-width: 40rem) {
  .is-show { --is-tape-w: 3.25rem; }
  .is-tape__marks em span { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .is-span { height: auto; }
  .is-sticky { position: static; height: auto; padding-block: 12vh; }
  .is-rail__track { flex-wrap: wrap; width: auto; }
  .is-viewer[open], .is-viewer[open]::backdrop { animation: none; }
  .is-card__frame, .is-open, .is-depth__layer { transition: none; }
}