/* ══════════════════════════════════════════════════════════════════
   Servei · Gestió del coneixement — «Del caos al sistema» (film)
   ------------------------------------------------------------------
   Styles for the scroll-scrubbed motion graphic in #proces. Everything
   is gated behind a class the script adds to the mount:
     .is-live     pinned stage (canvas + captions + HUD + rail)
     .is-narrow   stacked layout (canvas on top, docked caption below)
     .is-compact  unpinned 70svh stage with timed autoplay
     .is-sheet    reduced motion: contact sheet of seven final frames
   Without any of them the shell's numbered <ol class="gc-steps"> stays
   exactly as the shell styled it (no-JS fallback).

   The chrome over the canvas uses ONE colour, an off-white, blended
   with `difference`. On the ink stage it reads as bone; when beat 05
   floods the canvas to bone it reads as ink, inverting pixel by pixel
   along the flood line instead of flipping at once.
   ══════════════════════════════════════════════════════════════════ */

.gc-film {
  /* Not a palette colour but the difference-blend operand: near-white
     minus ink lands close to bone, near-white minus bone lands close to
     ink. Swapping it for --pz-bone would print the type a dull grey on
     the flooded stage. Its alpha variants follow. */
  --gcf-x: #FFFDF8;
  --gcf-x2: rgba(255, 253, 248, .72);
  --gcf-x3: rgba(255, 253, 248, .5);
  --gcf-line: rgba(255, 253, 248, .16);
  --gcf-line2: rgba(255, 253, 248, .32);
  position: relative;
  height: calc(7 * 80vh + 100vh - var(--gc-nav-h));
}
@supports (height: 1svh) {
  .gc-film { height: calc(7 * 80svh + 100svh - var(--gc-nav-h)); }
}
.gc-mount--film.is-live { padding-bottom: 0; }

.gc .gc-film__stage {
  /* content inset of a .pz-wrap, resolved against the stage width */
  --gcf-in: max(var(--pz-pad-x), calc((100% - var(--pz-max)) / 2 + var(--pz-pad-x)));
  position: sticky;
  top: var(--gc-nav-h);
  height: calc(100vh - var(--gc-nav-h));
  overflow: hidden;
  isolation: isolate;
  background: var(--pz-ink);
  color: var(--gcf-x);
}
@supports (height: 1svh) {
  .gc .gc-film__stage { height: calc(100svh - var(--gc-nav-h)); }
}
/* Once flooded, the stage's own ground is bone too, so a sub-pixel edge
   against the bone exit block never shows an ink seam. */
.gc .gc-film__stage[data-theme="bone"] { background: var(--pz-bone); }

.gc-film__cv {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

/* ─── Overlay labels (translatable words over the canvas) ───────── */
.gc-film__ov {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  mix-blend-mode: difference;
}
.gc-film__lbl {
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--gc-mono);
  font-size: 10.5px;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gcf-x3);
  white-space: nowrap;
  visibility: hidden;
}
/* Layers only while the film is near the viewport (the script toggles
   .is-near); far off they would hold 30-odd compositor layers for nothing */
.gc-mount--film.is-near .gc-film__lbl { will-change: transform, opacity; }
.gc-film__lbl--gt,
.gc-film__lbl--repo {
  /* The plate that keeps the pile's name legible is painted in the
     canvas, after the cards: under `difference` a CSS background would
     occlude nothing. The padding stays, so the measured box includes it. */
  padding: 2px 6px 1px;
  color: rgba(255, 253, 248, .6);
}
.gc-film__lbl--gt,
.gc-film__lbl--index,
.gc-film__lbl--registry { font-size: 9.5px; color: rgba(255, 253, 248, .62); }
.gc-film__lbl--orphan { font-size: 9.5px; color: rgba(255, 253, 248, .58); }
.gc-film__lbl--dup {
  font-size: 9px;
  letter-spacing: .1em;
  color: var(--pz-ink);
  background: var(--gcf-x);
  padding: 2px 5px 1px;
  border-radius: 1px;
}
.gc-film__lbl--sup,
.gc-film__lbl--orig { font-size: 9.5px; color: rgba(255, 253, 248, .5); }
.gc-film__lbl--f {
  font-size: 9.5px;
  letter-spacing: .02em;
  text-align: center;
  color: rgba(255, 253, 248, .74);
  white-space: normal;
  text-transform: none;
}
.gc-film__lbl--f b {
  display: block;
  margin-bottom: 2px;
  font-weight: 500;
  color: var(--gcf-x);
}
.gc-film__lbl--m { font-size: 9px; letter-spacing: .14em; color: rgba(255, 253, 248, .68); }
.gc-film__lbl--context { font-size: 9.5px; color: var(--pz-lilac); letter-spacing: .16em; }
.gc-film__lbl--query {
  font-size: 12.5px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--gcf-x);
  white-space: normal;
}
.gc-film__lbl--query::before {
  content: "›";
  color: var(--pz-lilac);
  margin-right: .6em;
}
.gc-film__lbl--query::after {
  content: "";
  display: inline-block;
  width: .55em;
  height: 1.05em;
  margin-left: 2px;
  vertical-align: -.18em;
  background: var(--pz-lilac);
}
.gc-film__lbl--g { font-size: 9.5px; letter-spacing: .08em; color: rgba(255, 253, 248, .8); }
.gc-film__lbl--alta,
.gc-film__lbl--upd,
.gc-film__lbl--baixa { font-size: 9px; letter-spacing: .06em; color: rgba(255, 253, 248, .66); }

/* ─── HUD (aria-hidden: the narrative lives in the captions) ────── */
.gc-film__hud {
  position: absolute;
  z-index: 2;
  top: 26px;
  right: var(--gcf-in);
  width: min(440px, 44%);
  font-family: var(--gc-mono);
  color: var(--gcf-x);
  mix-blend-mode: difference;
  pointer-events: none;
}
.gc-film__hud-h {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gcf-x3);
}
.gc-film__hud-h::before {
  content: "";
  width: 6px;
  height: 6px;
  border: 1px solid currentColor;
  flex: none;
}
.gc-film__hud-ht { flex: none; }
.gc-film__hud-g {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 14px;
  row-gap: 8px;
}
.gc-film__hud-c {
  /* A key that wraps (long in Spanish) pushes its value down; the
     siblings sit on the bottom so the row's values stay aligned */
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  border-top: 1px solid var(--gcf-line);
  padding-top: 6px;
  min-width: 0;
}
.gc-film__hud-c dt {
  font-size: 9px;
  line-height: 1.2;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gcf-x3);
  white-space: normal;
}
.gc-film__hud-c dd {
  margin: 2px 0 0;
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.gc-film__hud-c:last-child dd { font-size: 13px; padding-top: 4px; letter-spacing: .02em; }
.gc-film__hud-x {
  margin-left: auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 9px;
  letter-spacing: .02em;
  text-transform: none;
  color: var(--gcf-x2);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 400ms var(--gc-ease), transform 400ms var(--gc-ease);
}
.gc-film__hud-x.is-on { opacity: 1; transform: none; }

/* ─── Caption column (the real content: an <ol> of seven steps) ─── */
.gc-film__cap {
  position: absolute;
  z-index: 2;
  top: 30px;
  bottom: calc(var(--gcf-bar-b, 28px) + 78px);
  left: var(--gcf-in);
  width: min(388px, calc((100% - 2 * var(--gcf-in)) * .31));
  padding-right: 28px;
  border-right: 1px solid var(--gcf-line);
  color: var(--gcf-x);
  mix-blend-mode: difference;
  overflow: hidden;
}
.gc-film__cap .gc-steps {
  max-width: none;
  border-top: 1px solid var(--gcf-line);
  transition: transform 520ms var(--gc-ease);
}
.gc-film__cap.is-shifted {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 28px);
  mask-image: linear-gradient(to bottom, transparent 0, #000 28px);
}
.gc-film__cap .gc-steps__item {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  grid-template-rows: auto 0fr;
  column-gap: 6px;
  row-gap: 0;
  padding: 12px 0;
  border-bottom: 1px solid var(--gcf-line);
  opacity: .28;
  transition:
    opacity 420ms var(--gc-ease),
    grid-template-rows 560ms var(--gc-ease),
    row-gap 560ms var(--gc-ease),
    padding 560ms var(--gc-ease);
}
.gc-film__cap .gc-steps__item.is-active {
  grid-template-rows: auto 1fr;
  row-gap: 14px;
  padding: 20px 0 24px;
  opacity: 1;
}
.gc-film__cap .gc-steps__no {
  grid-row: 1;
  align-self: start;
  padding-top: .35em;
  font-size: 11px;
  color: var(--gcf-x3);
}
.gc-film__cap .gc-steps__t {
  grid-column: 2;
  grid-row: 1;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -.01em;
  transition: font-size 560ms var(--gc-ease), letter-spacing 560ms var(--gc-ease);
}
.gc-film__cap .is-active .gc-steps__t {
  font-size: clamp(22px, 2.05vw, 28px);
  font-weight: 700;
  letter-spacing: -.025em;
}
.gc-film__cap .is-active .gc-steps__no { color: var(--gcf-x); }
.gc-film__cap .gc-steps__b {
  grid-column: 2;
  grid-row: 2;
  min-height: 0;
  overflow: hidden;
  font-size: 16px;
  line-height: 1.52;
  color: var(--gcf-x2);
  max-width: none;
}
@supports (height: 1svh) {
  .gc-film__cap .gc-steps__b { font-size: clamp(14px, 1.95svh, 17px); }
}

/* ─── Bar: controls + rail ──────────────────────────────────────── */
.gc-film__bar {
  position: absolute;
  z-index: 3;
  left: max(var(--gcf-in), var(--gcf-bar-l, 0px));
  right: max(var(--gcf-in), var(--gcf-bar-r, 0px));
  bottom: var(--gcf-bar-b, 28px);
  display: flex;
  align-items: flex-end;
  gap: 28px;
  color: var(--gcf-x);
  mix-blend-mode: difference;
}
.gc-film__ctl {
  display: flex;
  gap: 6px;
  flex: none;
}
.gc-film__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-width: 38px;
  height: 38px;
  padding: 0 12px;
  border: 1px solid var(--gcf-line2);
  border-radius: 2px;
  background: transparent;
  color: var(--gcf-x);
  font-family: var(--gc-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 200ms var(--gc-ease), color 200ms var(--gc-ease), border-color 200ms var(--gc-ease);
}
.gc-film__btn--prev,
.gc-film__btn--next { padding: 0; width: 38px; font-size: 14px; letter-spacing: 0; }
.gc-film__btn:hover {
  background: var(--gcf-x);
  border-color: var(--gcf-x);
  color: var(--pz-ink);
}
.gc-film__ico {
  position: relative;
  width: 9px;
  height: 10px;
  flex: none;
}
.gc-film__ico::before {
  content: "";
  position: absolute;
  left: 1px;
  top: 0;
  border-style: solid;
  border-width: 5px 0 5px 8px;
  border-color: transparent transparent transparent currentColor;
}
.gc-film__btn.is-playing .gc-film__ico::before {
  left: 0;
  width: 3px;
  height: 10px;
  border: 0;
  background: currentColor;
}
.gc-film__btn.is-playing .gc-film__ico::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  width: 3px;
  height: 10px;
  background: currentColor;
}

.gc-film__rail {
  flex: 1;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}
.gc-film__step {
  position: relative;
  display: block;
  min-width: 0;
  padding: 0 8px 12px 0;
  border: 0;
  border-bottom: 1px solid var(--gcf-line2);
  background: none;
  color: var(--gcf-x);
  font-family: var(--gc-mono);
  text-align: left;
  cursor: pointer;
  opacity: .46;
  transition: opacity 260ms var(--gc-ease);
}
.gc-film__step::before {
  /* hairline tick at the start of each phase */
  content: "";
  position: absolute;
  left: 0;
  bottom: -5px;
  width: 1px;
  height: 9px;
  background: var(--gcf-x3);
}
.gc-film__step:hover,
.gc-film__step.is-active { opacity: 1; }
.gc-film__step.is-done { opacity: .72; }
.gc-film__step-no {
  display: block;
  margin-bottom: 4px;
  font-size: 10px;
  letter-spacing: .1em;
  color: var(--gcf-x3);
}
.gc-film__step-t {
  /* Two lines at most, never an ellipsis: the rail is the film's main
     navigation, and a cut name reads as unfinished. 10px with no
     tracking fits the longest single word (PROCESAMIENTO) at 1280. */
  display: block;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  min-height: 2.5em;
  overflow: hidden;
  font-size: 10px;
  line-height: 1.25;
  letter-spacing: 0;
  text-transform: uppercase;
  white-space: normal;
}
.gc-film__step-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  overflow: hidden;
}
.gc-film__step-bar i {
  display: block;
  height: 100%;
  background: var(--gcf-x);
  transform: scaleX(0);
  transform-origin: 0 50%;
}
.gc-film__step.is-done .gc-film__step-bar i { transform: scaleX(1); opacity: .5; }
.gc-film__step.is-active .gc-film__step-bar i { transform: scaleX(var(--gcf-step, 0)); }

/* Focus: the same off-white, so the ring inverts with the flood too */
.gc .gc-film__stage button:focus-visible {
  outline: 2px solid var(--gcf-x);
  outline-offset: 3px;
}
.gc .gc-film__step:focus-visible { outline-offset: 2px; opacity: 1; }

/* ─── Short laptop screens: tighter vertical rhythm ─────────────── */
@media (max-height: 760px) {
  .gc-film__hud { top: 18px; }
  .gc-film__hud-h { margin-bottom: 6px; }
  .gc-film__hud-c dd { font-size: 15px; }
  .gc-film__cap { top: 20px; }
  .gc-film__cap .gc-steps__item { padding: 8px 0; }
  .gc-film__cap .gc-steps__item.is-active { padding: 14px 0 16px; row-gap: 10px; }
  .gc-film__cap .gc-steps__t { font-size: 14.5px; }
  .gc-film__cap .is-active .gc-steps__t { font-size: clamp(20px, 1.8vw, 24px); }
}

/* ═══ Narrow: canvas on top (58%), caption docked below (42%) ═════ */
.gc-mount--film.is-narrow .gc-film { height: calc(7 * 62vh + 100vh - var(--gc-nav-h)); }
@supports (height: 1svh) {
  .gc-mount--film.is-narrow .gc-film { height: calc(7 * 62svh + 100svh - var(--gc-nav-h)); }
}
.is-narrow .gc-film__hud {
  top: 12px;
  left: var(--gcf-in);
  right: var(--gcf-in);
  width: auto;
}
.is-narrow .gc-film__hud-h { font-size: 8.5px; margin-bottom: 6px; letter-spacing: .14em; flex-wrap: wrap; row-gap: 2px; }
.is-narrow .gc-film__hud-g { column-gap: 10px; row-gap: 4px; }
.is-narrow .gc-film__hud-c { padding-top: 3px; }
/* Phones: no DOM label under 9px */
.is-narrow .gc-film__hud-c dt { font-size: 9px; letter-spacing: .06em; }
.is-narrow .gc-film__hud-c dd { font-size: 13px; margin-top: 0; }
.is-narrow .gc-film__hud-c:last-child dd { font-size: 10px; padding-top: 2px; }
/* The anonymisation note takes its own line instead of being cut */
.is-narrow .gc-film__hud-x {
  flex: 1 0 100%;
  margin-left: 0;
  font-size: 9px;
  letter-spacing: 0;
  white-space: normal;
}
.is-narrow .gc-film__lbl--f {
  font-size: 9px;
  letter-spacing: -.02em;
  hyphens: auto;
  overflow-wrap: anywhere;
}
.is-narrow .gc-film__lbl--sup,
.is-narrow .gc-film__lbl--orig { font-size: 9px; letter-spacing: .04em; }
.is-narrow .gc-film__lbl--m { font-size: 9px; letter-spacing: .02em; }
.is-narrow .gc-film__lbl--query { font-size: 11px; }
.is-narrow .gc-film__lbl--g,
.is-narrow .gc-film__lbl--alta,
.is-narrow .gc-film__lbl--upd,
.is-narrow .gc-film__lbl--baixa { font-size: 9px; letter-spacing: .02em; }

.is-narrow .gc-film__bar {
  top: 58%;
  bottom: auto;
  left: var(--gcf-in);
  right: var(--gcf-in);
  height: 44px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid var(--gcf-line);
}
.is-narrow .gc-film__ctl { order: 2; gap: 4px; }
/* 44px touch targets: the dots and arrows are the only way to jump to
   a beat on a phone. 7 × 26 + 12 + 3 × 44 + 8 = 334px fits 343px. */
.is-narrow .gc-film__btn { height: 44px; min-width: 44px; padding: 0 9px; }
.is-narrow .gc-film__btn--prev,
.is-narrow .gc-film__btn--next { width: 44px; padding: 0; }
.is-narrow .gc-film__btn-t {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.is-narrow .gc-film__rail {
  flex: none;
  display: flex;
  gap: 0;
}
.is-narrow .gc-film__step {
  width: 26px;
  height: 44px;
  padding: 0;
  border: 0;
  opacity: 1;
}
.is-narrow .gc-film__step::before {
  left: 50%;
  top: 50%;
  bottom: auto;
  width: 7px;
  height: 7px;
  margin: -3.5px 0 0 -3.5px;
  border: 1px solid var(--gcf-x2);
  border-radius: 50%;
  background: transparent;
}
.is-narrow .gc-film__step.is-done::before { background: var(--gcf-x3); border-color: transparent; }
.is-narrow .gc-film__step.is-active::before { background: var(--gcf-x); border-color: var(--gcf-x); transform: scale(1.25); }
.is-narrow .gc-film__step-no,
.is-narrow .gc-film__step-t,
.is-narrow .gc-film__step-bar {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.is-narrow .gc-film__cap {
  top: calc(58% + 44px);
  bottom: 0;
  left: var(--gcf-in);
  right: var(--gcf-in);
  width: auto;
  padding: 14px 0 64px;
  border-right: 0;
}
.is-narrow .gc-film__cap .gc-steps { border-top: 0; }
.is-narrow .gc-film__cap .gc-steps__item:not(.is-active) {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.is-narrow .gc-film__cap .gc-steps__item.is-active {
  grid-template-columns: 30px minmax(0, 1fr);
  padding: 0;
  row-gap: 8px;
  border: 0;
  animation: gcf-cap-in 420ms var(--gc-ease) both;
}
.is-narrow .gc-film__cap .is-active .gc-steps__t { font-size: clamp(19px, 5.6vw, 24px); }
.is-narrow .gc-film__cap .gc-steps__b { font-size: 14px; line-height: 1.5; }
@keyframes gcf-cap-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
/* Tablets in portrait use the stacked layout with far more height than
   a phone: give the canvas more of it, so short captions leave no dead
   band of ink underneath. measure() reads the bar, the art box follows. */
@media (min-width: 641px) and (max-width: 900px) {
  .is-narrow .gc-film__bar { top: 64%; }
  .is-narrow .gc-film__cap { top: calc(64% + 44px); }
}
/* Short phones (iPhone SE/8): the longest caption has to end above the
   motion control. Never make the caption scroll: it would capture touch
   scrolling inside the pinned stage. */
@media (max-height: 700px) {
  .is-narrow .gc-film__bar { top: 51%; }
  .is-narrow .gc-film__cap { top: calc(51% + 44px); padding: 10px 0 56px; }
  .is-narrow .gc-film__cap .is-active .gc-steps__t { font-size: 19px; }
  .is-narrow .gc-film__cap .gc-steps__b { font-size: 13px; line-height: 1.45; }
}

/* ═══ Compact: no pin, a 70svh stage with timed autoplay ══════════ */
.gc-mount--film.is-compact .gc-film { height: auto; }
.gc-mount--film.is-compact .gc-film__stage {
  position: relative;
  top: auto;
  height: 70vh;
  min-height: 520px;
}
@supports (height: 1svh) {
  .gc-mount--film.is-compact .gc-film__stage { height: 70svh; }
}
.gc-mount--film.is-compact.is-narrow .gc-film__stage { min-height: 600px; }
/* A shorter stage: the inactive steps tighten so the active one fits */
.gc-mount--film.is-compact:not(.is-narrow) .gc-film__cap .gc-steps__item { padding: 6px 0; }
.gc-mount--film.is-compact:not(.is-narrow) .gc-film__cap .gc-steps__item.is-active { padding: 14px 0 16px; row-gap: 10px; }
.gc-mount--film.is-compact:not(.is-narrow) .gc-film__cap .gc-steps__t { font-size: 13.5px; }
.gc-mount--film.is-compact:not(.is-narrow) .gc-film__cap .is-active .gc-steps__t { font-size: clamp(19px, 1.7vw, 23px); }
.gc-mount--film.is-compact:not(.is-narrow) .gc-film__cap .gc-steps__b { font-size: 14.5px; }

/* ═══ Reduced motion: contact sheet of seven final frames ═════════ */
.gc-mount--film.is-sheet .gc-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 48px 24px;
  max-width: none;
  border-top: 0;
}
.gc-mount--film.is-sheet .gc-steps__item {
  display: block;
  padding: 0;
  border-bottom: 0;
}
.gc-film-sheet__fig { margin: 0; }
.gc-film-sheet__frame {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border: 1px solid var(--gc-line);
  border-radius: 1px;
  background: var(--pz-ink);
}
.gc-film-sheet__cv {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}
.gc-film-sheet__ov .gc-film__lbl { font-size: 8px; letter-spacing: .08em; }
.gc-film-sheet__ov .gc-film__lbl--f { font-size: 8px; }
.gc-film-sheet__cap {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  column-gap: 8px;
  row-gap: 8px;
  padding-top: 16px;
}
.gc-mount--film.is-sheet .gc-steps__no { grid-row: 1; padding-top: 4px; }
.gc-mount--film.is-sheet .gc-steps__t { grid-column: 2; font-size: clamp(19px, 1.6vw, 22px); }
.gc-mount--film.is-sheet .gc-steps__b { grid-column: 2; font-size: 15px; }
.gc-film-sheet__hud {
  grid-column: 2;
  font-family: var(--gc-mono);
  font-size: 10.5px;
  line-height: 1.6;
  letter-spacing: .02em;
  color: var(--gc-mute);
  font-variant-numeric: tabular-nums;
}
@media (max-width: 1024px) {
  .gc-mount--film.is-sheet .gc-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .gc-mount--film.is-sheet .gc-steps { grid-template-columns: minmax(0, 1fr); gap: 40px; }
}