@charset "UTF-8";
/* ============================================================================
   /masterclass/ — the gate, the hold and the viewer.

   Page-scoped supplement, loaded only on that surface by inc/enqueue.php. It
   introduces no colours and no new scale: every value here resolves to a token
   declared in priceless.css §0.

   It exists for one thing the template cannot do with inline attributes, which
   is the media query. At 375px a 16:9 stage inside the page gutter is 335×188,
   which is not a presentation, it is a thumbnail. Below 720px the stage breaks
   out of the gutter and uses the full width of the device.
   ========================================================================= */

/* The progress rules: the 120-second hold, and the position through the deck. */
.mc-rule { height: 2px; background: var(--rule); overflow: hidden; }
.mc-rule > i {
  display: block; height: 100%;
  background: var(--swan-500);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-2) var(--ease);
}
/* The countdown ticks once a second, so it moves linearly. An ease on a clock
   reads as the clock being wrong. */
.mc-rule--tick > i { transition: transform 1000ms linear; }

@media (prefers-reduced-motion: reduce) {
  .mc-rule > i, .mc-rule--tick > i { transition: none; }
}

/* The stage. A slide is a whole composed image, so it is contained rather than
   covered, and it does not take the .art ink wash — washing a slide would make
   its own type unreadable. */
.mc-stage {
  position: relative;
  /* The stage declares its own ratio so it can stand alone. The slide image has
     no src until the script sets one, so without this the stage collapses to a
     2px line on first paint and then jumps — a layout shift on the one surface
     the visitor waited two minutes to reach. */
  aspect-ratio: 16 / 9;
  overflow: hidden;
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none;
  background: var(--ink-950);
  border: 1px solid var(--line);
}
.mc-stage > img {
  width: 100%; height: 100%;
  object-fit: contain;
  filter: none;
  -webkit-user-drag: none;
}

/* A transparent layer over the slide so a right-click, a drag or a long-press
   lands on the shield rather than on the image. The site-wide guard covers this
   too; the viewer does not rely on it, because this is the one surface where
   the whole point is that the content does not leave the page. */
.mc-shield { position: absolute; inset: 0; z-index: 2; }

.mc-count { margin-left: auto; font-variant-numeric: tabular-nums; }

@media (max-width: 720px) {
  /* Full-bleed the stage on a phone. Losing the gutter buys roughly 12% more
     slide, which is the difference between reading a figure and squinting. */
  .mc-stage {
    margin-inline: calc(var(--gutter) * -1);
    border-inline: 0;
  }
}

/* The scrubber ------------------------------------------------------------ */
/* The house range thumb is --act, and at the end of a 201-slide deck the closing
   action is orange too. Two orange things on one screen spends a ration that is
   supposed to buy exactly one instruction per view. Blue is the token for
   structure, data and rules, and a position control through a document is
   structure — it is not something the visitor is being asked to do. */
/* Written as input[type="range"].mc-scrub, not bare .mc-scrub. The house rule
   in priceless.css §12 is input[type="range"]::-webkit-slider-thumb — one type
   plus one attribute — which outranks a lone class, so the bare version of this
   override lost the cascade and the deck shipped with the orange thumb this
   whole comment argues against. Verified against the rendered page, not the
   file. */
input[type="range"].mc-scrub::-webkit-slider-thumb {
  background: var(--swan-500);
  box-shadow: 0 0 0 6px rgba(96, 144, 252, .16);
}
input[type="range"].mc-scrub:hover::-webkit-slider-thumb { box-shadow: 0 0 0 10px rgba(96, 144, 252, .22); }
input[type="range"].mc-scrub::-moz-range-thumb {
  background: var(--swan-500);
  box-shadow: 0 0 0 6px rgba(96, 144, 252, .16);
}