/* lockup. Reads the shared tier's page, gutter and frame vars by contract. */

.sk-lockup {
  position: relative;
  --sk-lockup-step: var(--sk-text-h2-size);
  --sk-lockup-gap: calc(var(--kit-type-base) * 0.4 + var(--sk-lockup-step) * 0.23);
  /* Non-zero only where the frame CLIMBED, or the clearance is paid twice. */
  --sk-frame-t: calc(
    var(--sk-lockup-climb, 0px) +
      var(--sk-frame-inset-t, var(--sk-frame-inset-y, var(--sk-frame-pad)))
  );
  --sk-frame-b: var(--sk-frame-inset-b, var(--sk-frame-inset-y, var(--sk-frame-pad)));
  /* A term of the value, so no selector outranks it. MAX, never a sum, and no gutter FLOOR: the frame hands each edge its number, and a floor would re-add a rail the row has paid. The cqi term reaches the cap inside a grid area, where the rail's percentage under-reads. */
  --sk-lockup-rail-s: max(var(--sk-page-rail-start), var(--sk-page-cap-pane));
  --sk-lockup-rail-e: max(var(--sk-page-rail-end), var(--sk-page-cap-pane));
  --sk-lockup-card-rail-s: var(--sk-lockup-rail-s);
  --sk-lockup-card-rail-e: var(--sk-lockup-rail-e);
  /* A SPLIT's rails are TRACKS: the halves divide the room inside them, so the seam falls where the page's own column splits. BOTH are the page's rail -- unequal tracks drift the seam as the rail grows. */
  --sk-lockup-split-rail-s: var(--sk-page-rail-start);
  --sk-lockup-split-rail-e: var(--sk-page-rail-end);
  /* On the CONTAINER's basis: a viewport term answers the window for a composition that is the pane's. */
  --sk-lockup-fold-lap: clamp(2.5rem, 12cqi, 4rem);
  --sk-lockup-shift-s: calc(var(--sk-lockup-rail-s) - calc(var(--sk-gutter) * var(--sk-air)));
  --sk-lockup-shift-e: calc(var(--sk-lockup-rail-e) - calc(var(--sk-gutter) * var(--sk-air)));
}
.sk-lockup[data-size="l"] {
  --sk-lockup-step: var(--sk-text-h1-size);
}
.sk-lockup[data-size="s"] {
  --sk-lockup-step: var(--sk-text-h3-size);
}
.sk-lockup[data-size="xs"] {
  --sk-lockup-step: var(--sk-text-h4-size);
}

:is([data-height="min"], [data-height="custom"]) .sk-lockup {
  --sk-lockup-min-h: 0px;
}
[data-height="full"] .sk-lockup {
  --sk-lockup-min-h: var(--sk-band-release);
  min-height: var(--sk-lockup-min-h);
}
[data-height="full"] .sk-lockup:not([data-box]) {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
[data-height="full"] .sk-lockup:not([data-box]):not(.sk-card) {
  padding-block: var(--sk-band-pad);
}

.sk-lockup-box {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sk-lockup-gap);
  min-width: 0;
}
.sk-lockup-box > * {
  margin: 0;
}
/* Margins ADD to the flex gap, so each calc is factor − 1. */
.sk-lockup-box > .sk-badge {
  margin-bottom: calc(var(--sk-lockup-gap) * (var(--sk-rhythm-badge, 1) - 1));
}
.sk-lockup-box > :is(.sk-eyebrow, .sk-detail) {
  margin-bottom: calc(var(--sk-lockup-gap) * (var(--sk-rhythm-label, 0.5) - 1));
}
.sk-lockup-box > .sk-lockup-title {
  margin-bottom: calc(var(--sk-lockup-gap) * (var(--sk-rhythm-title, 1) - 1));
}
.sk-lockup-box > .sk-lockup-actions {
  margin-top: calc(var(--sk-lockup-gap) * (var(--sk-rhythm-departure, 1.5) - 1));
}
.sk-lockup[data-size="s"] .sk-lockup-box > .sk-lockup-actions {
  margin-top: 0;
}

.sk-lockup-title {
  text-wrap: balance;
  border-width: var(--kit-edge-title);
  border-style: var(--kit-edge-style-title);
  border-color: currentcolor;
  border-radius: var(--kit-round-title);
  padding: var(--kit-pad-title);
}
.sk-lockup-desc {
  color: var(--sk-ink-muted);
  text-wrap: pretty;
  border-width: var(--kit-edge-body);
  border-style: var(--kit-edge-style-body);
  border-color: currentcolor;
  border-radius: var(--kit-round-body);
  padding: var(--kit-pad-body);
}
.sk-lockup:is([data-size="l"], [data-size="smaller"], [data-size="normal"], [data-size="larger"])
  .sk-lockup-desc {
  font-size: var(--sk-lede-size);
}
.sk-lockup:is(
    [data-size="s"],
    [data-size="m"],
    [data-size="l"],
    [data-size="smaller"],
    [data-size="normal"],
    [data-size="larger"]
  )
  .sk-lockup-desc {
  max-width: var(--sk-measure, 46ch);
}
.sk-lockup[data-size="xs"] .sk-lockup-desc {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.sk-lockup-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sk-actions-gap);
}
.sk-lockup-actions:has(> .sk-btn-link),
.sk-lockup-actions:has(> .sk-link) {
  gap: calc(var(--sk-actions-gap) * 2.3);
}

.sk-lockup[data-box]:where(:not([data-box=""])) {
  display: flex;
  overflow: hidden;
  isolation: isolate;
  border-radius: var(--sk-lockup-radius, var(--sk-radius));
  border-start-start-radius: var(
    --sk-chrome-dock-radius,
    var(--sk-lockup-radius, var(--sk-radius))
  );
  border-start-end-radius: var(--sk-chrome-dock-radius, var(--sk-lockup-radius, var(--sk-radius)));
  min-height: var(--sk-lockup-min-h, var(--sk-stage-h));
  /* The media is absolute against this padding box, so the copy insets alone. */
  --sk-frame-xs: var(--sk-lockup-rail-s);
  --sk-frame-xe: var(--sk-lockup-rail-e);
  padding-block: var(--sk-frame-t) var(--sk-frame-b);
  padding-inline: var(--sk-frame-xs) var(--sk-frame-xe);
}

.sk-component[data-sk="lockup"] {
  padding-block: 0;
}

.sk-primitive-lockup {
  --sk-lockup-radius: 0;
}
.sk-section:is([data-width="page"], [data-width="inset"]):not(
    :has(> :nth-child(2 of :is(.sk-component, .sk-section-col)))
  )
  .sk-primitive-lockup {
  --sk-lockup-radius: var(--sk-card-radius);
}

.sk-primitive-lockup[data-layout="bleed"][data-box]:where(:not([data-box=""], [data-card="true"]))
  .sk-lockup-box {
  width: fit-content;
  max-width: 100%;
}
.sk-primitive-lockup .sk-lockup-title {
  max-width: var(--sk-measure-title);
}

.sk-lockup[data-box]:where(:not([data-box=""])) .sk-lockup-media {
  position: absolute;
  inset: 0;
  height: 100%;
  border-radius: 0;
  background: none;
}

.sk-lockup[data-box]:where(:not([data-box=""])) .sk-lockup-box {
  position: relative;
  z-index: 2;
  max-width: 34rem;
}
.sk-lockup[data-box="tl"] .sk-lockup-box {
  margin: 0 auto auto 0;
}
.sk-lockup[data-box="tr"] .sk-lockup-box {
  margin: 0 0 auto auto;
}
.sk-lockup[data-box="bl"] .sk-lockup-box {
  margin: auto auto 0 0;
}
.sk-lockup[data-box="br"] .sk-lockup-box {
  margin: auto 0 0 auto;
}
.sk-lockup[data-box="cl"] .sk-lockup-box {
  margin: auto auto auto 0;
}
.sk-lockup[data-box="cr"] .sk-lockup-box {
  margin: auto 0 auto auto;
}

.sk-lockup[data-box="tr"] .sk-lockup-box,
.sk-lockup[data-box="cr"] .sk-lockup-box,
.sk-lockup[data-box="br"] .sk-lockup-box {
  align-items: flex-end;
  text-align: right;
}
/* The negated list enumerates the column layouts; a new manifest value needs an arm here. */
.sk-lockup[data-box="center"]:not([data-layout^="split-"], [data-layout^="overlap-"]) {
  justify-content: center;
  align-items: center;
}
.sk-lockup[data-box="center"] .sk-lockup-box {
  margin: auto;
  align-items: center;
  text-align: center;
  max-width: 760px;
}
.sk-lockup[data-box="center"] .sk-lockup-desc {
  text-align: center;
}
.sk-lockup[data-box="center"] .sk-lockup-actions {
  justify-content: center;
  align-self: center;
}

.sk-lockup[data-size="smaller"] {
  --sk-lockup-step: calc(var(--sk-text-h1-size) * 0.8);
}
.sk-lockup[data-size="normal"] {
  --sk-lockup-step: var(--sk-text-h1-size);
}
.sk-lockup[data-size="larger"] {
  --sk-lockup-step: calc(var(--sk-text-h1-size) * 1.2);
}

/* Ties the ramp's h1 rule at (0,2,0) and wins by SOURCE ORDER; the shared tier joins ahead of this file. */
.sk-primitive-lockup .sk-lockup-title {
  font-size: var(--sk-lockup-step);
}

.sk-lockup[data-box]:where(:not([data-box=""])):not(:has(> .sk-lockup-media)) {
  background-color: var(--sk-bg);
  color: inherit;
  /* The page's rail, not the lockup's: under flush copy with no picture meets the band's edge. */
  --sk-frame-xs: var(--sk-page-rail-start);
  --sk-frame-xe: var(--sk-page-rail-end);
}
.sk-lockup[data-box]:where(:not([data-box=""])):not(:has(> .sk-lockup-media))::before {
  content: none;
}

/* Tie bleed on specificity and win by SOURCE ORDER; keep them after the bleed rules. */
/* A flush row hands its members nothing, so bleed copy floors on the gutter rather than meeting the edge. Likewise with no row above at all. */
.sk-section[data-content="full"] .sk-lockup,
.sk-lockup:where(:not(.sk-section *)) {
  --sk-lockup-rail-s: max(var(--sk-gutter), var(--sk-page-rail-start), var(--sk-page-cap-pane));
  --sk-lockup-rail-e: max(var(--sk-gutter), var(--sk-page-rail-end), var(--sk-page-cap-pane));
  --sk-lockup-split-rail-s: max(var(--sk-gutter), var(--sk-page-rail-start));
  --sk-lockup-split-rail-e: max(var(--sk-gutter), var(--sk-page-rail-end));
}

.sk-lockup:is([data-layout^="split-"], [data-layout^="overlap-"]) {
  display: grid;
  grid-template-columns: 1fr 1fr;
  overflow: hidden;
  isolation: isolate;
  border-radius: var(--sk-lockup-radius, var(--sk-radius));
  border-start-start-radius: var(
    --sk-chrome-dock-radius,
    var(--sk-lockup-radius, var(--sk-radius))
  );
  border-start-end-radius: var(--sk-chrome-dock-radius, var(--sk-lockup-radius, var(--sk-radius)));
  min-height: var(--sk-lockup-min-h, var(--sk-stage-h));
  padding: 0;
  color: var(--sk-ink);
}
/* The gate costs no specificity, so the (0,2,0) data-height arms still outrank this. */
.sk-lockup:where([data-layout^="overlap-"]) {
  --sk-lockup-min-h: var(--sk-band-stage, calc(100svh - var(--sk-chrome-above, 0px)));
}
.sk-lockup:is([data-layout^="split-"], [data-layout^="overlap-"]) .sk-lockup-media {
  position: relative;
  inset: auto;
  width: 100%;
  height: 100%;
  border-radius: 0;
  background: none;
}
.sk-lockup:is([data-layout^="split-"], [data-layout^="overlap-"])::before {
  content: none;
}
.sk-lockup:is([data-layout^="split-"], [data-layout^="overlap-"]) .sk-lockup-box {
  position: relative;
  z-index: 2;
  margin: 0;
  max-width: none;
  padding-block: var(--sk-frame-inset-y, var(--sk-frame-pad));
  padding-inline: calc(var(--sk-gutter) * var(--sk-air));
  align-self: center;
}
.sk-lockup[data-layout^="split-"] .sk-lockup-box {
  padding-block-start: calc(
    var(--sk-lockup-climb, 0px) + var(--sk-frame-inset-y, var(--sk-frame-pad))
  );
}
/* The picture spans its 1fr plus the far rail track, so the bleed reaches the pane's edge. */
.sk-lockup:is([data-layout="split-l"], [data-layout="split-r"]):where(:has(> .sk-lockup-media)) {
  grid-template-columns:
    var(--sk-lockup-split-rail-s)
    1fr 1fr
    var(--sk-lockup-split-rail-e);
  padding-inline: 0;
}
.sk-lockup[data-layout="split-l"]:where(:has(> .sk-lockup-media)) .sk-lockup-box {
  grid-column: 2;
}
.sk-lockup[data-layout="split-l"]:where(:has(> .sk-lockup-media)) .sk-lockup-media {
  grid-column: 3 / -1;
}
.sk-lockup[data-layout="split-r"]:where(:has(> .sk-lockup-media)) .sk-lockup-box {
  grid-column: 3;
}
.sk-lockup[data-layout="split-r"]:where(:has(> .sk-lockup-media)) .sk-lockup-media {
  grid-column: 1 / 3;
}
.sk-lockup[data-layout="split-l"]:where(:has(> .sk-lockup-media)):where(:not([data-box="center"]))
  .sk-lockup-box {
  padding-inline: 0 calc(var(--sk-gutter) * var(--sk-air));
}
.sk-lockup[data-layout="split-r"]:where(:has(> .sk-lockup-media)):where(:not([data-box="center"]))
  .sk-lockup-box {
  padding-inline: calc(var(--sk-gutter) * var(--sk-air)) 0;
}
.sk-lockup:is(
    [data-layout="split-t"],
    [data-layout="split-b"],
    [data-layout="split-l"]:not(:has(> .sk-lockup-media)),
    [data-layout="split-r"]:not(:has(> .sk-lockup-media))
  ):where(:not([data-box="center"], [data-box="tr"], [data-box="cr"], [data-box="br"]))
  .sk-lockup-box {
  margin-inline-start: var(--sk-lockup-shift-s);
}
.sk-lockup:is(
    [data-layout="split-t"],
    [data-layout="split-b"],
    [data-layout="split-l"]:not(:has(> .sk-lockup-media)),
    [data-layout="split-r"]:not(:has(> .sk-lockup-media))
  ):where([data-box="tr"], [data-box="cr"], [data-box="br"])
  .sk-lockup-box {
  margin-inline-end: var(--sk-lockup-shift-e);
}

.sk-lockup[data-layout="split-b"] .sk-lockup-box {
  --sk-lockup-climb: 0px;
}
.sk-lockup:is([data-layout="split-l"], [data-layout="split-t"]) .sk-lockup-box {
  order: -1;
}
.sk-lockup:is([data-layout^="split-"], [data-layout^="overlap-"]):is(
    [data-box="tl"],
    [data-box="tr"]
  )
  .sk-lockup-box {
  align-self: start;
}
.sk-lockup:is([data-layout^="split-"], [data-layout^="overlap-"]):is(
    [data-box="bl"],
    [data-box="br"]
  )
  .sk-lockup-box {
  align-self: end;
}
.sk-lockup:is([data-layout^="split-"], [data-layout^="overlap-"])[data-box="center"]
  .sk-lockup-box {
  justify-self: center;
  align-items: center;
  text-align: center;
  max-width: min(760px, 100%);
}
.sk-lockup:is([data-layout="split-l"], [data-layout="split-r"], [data-layout^="overlap-"]):not(
    :has(> .sk-lockup-media)
  ) {
  grid-template-columns: 1fr;
}
/* Overlap's explicit spans would strand a lone box in implicit tracks; reset to one. */
.sk-lockup:is([data-layout^="overlap-"]):not(:has(> .sk-lockup-media)) .sk-lockup-box {
  grid-column: auto;
  grid-row: auto;
  justify-self: center;
}
.sk-lockup:is([data-layout="split-t"], [data-layout="split-b"]) {
  grid-template-columns: 1fr;
}
.sk-lockup:is([data-layout="split-t"], [data-layout="split-b"]) .sk-lockup-media {
  aspect-ratio: var(--sk-image-aspect, var(--kit-aspect-plate));
  height: auto;
}
.sk-lockup:is([data-layout="split-t"], [data-layout="split-b"]) .sk-lockup-box {
  max-width: min(760px, 100%);
}
.sk-lockup:is([data-layout="split-t"], [data-layout="split-b"]):is(
    [data-box="tr"],
    [data-box="cr"],
    [data-box="br"]
  )
  .sk-lockup-box {
  justify-self: end;
}

/* Both pin to grid-row 1, or auto rows dodge the overlap. */
.sk-lockup[data-layout^="overlap-"] {
  --sk-lockup-lap: clamp(4rem, 16cqi, 14rem);
}
.sk-lockup[data-layout="overlap-l"] {
  grid-template-columns: 0.85fr var(--sk-lockup-lap) 1.15fr;
}
.sk-lockup[data-layout="overlap-r"] {
  grid-template-columns: 1.15fr var(--sk-lockup-lap) 0.85fr;
}
.sk-lockup[data-layout="overlap-l"] .sk-lockup-media {
  grid-column: 2 / 4;
  grid-row: 1;
}
.sk-lockup[data-layout="overlap-l"] .sk-lockup-box {
  grid-column: 1 / 3;
  grid-row: 1;
  justify-self: end;
}
.sk-lockup[data-layout="overlap-r"] .sk-lockup-media {
  grid-column: 1 / 3;
  grid-row: 1;
}
.sk-lockup[data-layout="overlap-r"] .sk-lockup-box {
  grid-column: 2 / 4;
  grid-row: 1;
  justify-self: start;
}
.sk-lockup[data-layout^="overlap-"] .sk-lockup-box {
  margin-block: calc(var(--sk-band-pad) + var(--sk-lockup-climb, 0px)) var(--sk-band-pad);
}
.sk-lockup[data-layout="overlap-l"]:where(:has(> .sk-lockup-media)) .sk-lockup-box {
  margin-inline-start: var(--sk-lockup-card-rail-s);
}
.sk-lockup[data-layout="overlap-r"]:where(:has(> .sk-lockup-media)) .sk-lockup-box {
  margin-inline-end: var(--sk-lockup-card-rail-e);
}
/* Owed on an edge facing the PAGE, not one facing the row's INTERIOR, counted as MEMBERS so a painted row's layer does not shift the count. */
@media (width > 900px) {
  .sk-section:where(:not([data-content="full"]))
    > :where(:not(:nth-child(1 of :is(.sk-component, .sk-section-col))))
    .sk-lockup[data-layout="overlap-l"] {
    --sk-lockup-card-rail-s: 0px;
  }
  .sk-section:where(:not([data-content="full"]))
    > :where(:not(:nth-last-child(1 of :is(.sk-component, .sk-section-col))))
    .sk-lockup[data-layout="overlap-r"] {
    --sk-lockup-card-rail-e: 0px;
  }
}

@container sk-pane (max-width: 640px) {
  .sk-lockup:is([data-layout^="split-"], [data-layout^="overlap-"]) {
    display: flex;
    flex-direction: column;
    min-height: 0;
  }
  .sk-lockup:is([data-layout^="split-"], [data-layout^="overlap-"]) .sk-lockup-box {
    flex: 0 0 auto;
    --sk-lockup-climb: 0px;
    padding-inline: var(--sk-lockup-rail-s) var(--sk-lockup-rail-e);
    --sk-lockup-shift-s: 0px;
    --sk-lockup-shift-e: 0px;
  }
  .sk-lockup:is([data-layout^="split-"], [data-layout^="overlap-"])[data-box] .sk-lockup-box {
    align-self: stretch;
  }
  .sk-lockup:is([data-layout^="split-"], [data-layout^="overlap-"]) .sk-lockup-media {
    aspect-ratio: 4 / 3;
    height: auto;
    flex: 1 1 auto;
  }
  .sk-lockup[data-layout="split-l"] .sk-lockup-box {
    order: 0;
  }
  /* The zeroing arm keys on the ROW's width and the fold on the PANE's, so a pane folds while its row is still side by side. Ties on weight, wins on source order. */
  .sk-section .sk-lockup[data-layout^="overlap-"] {
    --sk-lockup-card-rail-s: var(--sk-lockup-rail-s);
    --sk-lockup-card-rail-e: var(--sk-lockup-rail-e);
  }

  .sk-lockup[data-layout^="overlap-"] .sk-lockup-box {
    margin-block: calc(-1 * var(--sk-lockup-fold-lap)) var(--sk-gutter);
    margin-inline: var(--sk-lockup-card-rail-s) var(--sk-lockup-card-rail-e);
  }
}

/* Ties the rules above on specificity and wins by SOURCE ORDER; keep it after them. */
.sk-lockup[data-layout="strip"] {
  --sk-lockup-min-h: 0px;
  min-height: 0;
  /* Deliberately a second copy: a shared token would be a knob the strip could not step down from. */
  --sk-lockup-gap: calc(var(--kit-type-base) * 0.4 + var(--sk-text-h3-size) * 0.23);
}
.sk-lockup[data-layout="strip"] .sk-lockup-box {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: var(--kit-space-5);
  row-gap: 0;
  width: 100%;
  max-width: none;
  margin: 0;
  text-align: start;
}
.sk-lockup[data-layout="strip"] .sk-lockup-box > * {
  grid-column: 1;
}
.sk-lockup[data-layout="strip"] .sk-lockup-box > .sk-badge {
  margin-bottom: calc(var(--sk-lockup-gap) * var(--sk-rhythm-badge, 1));
}
.sk-lockup[data-layout="strip"] .sk-lockup-box > :is(.sk-eyebrow, .sk-detail) {
  margin-bottom: calc(var(--sk-lockup-gap) * var(--sk-rhythm-label, 0.5));
}
.sk-lockup[data-layout="strip"] .sk-lockup-box > .sk-lockup-title {
  margin-bottom: 0;
}
.sk-lockup[data-layout="strip"] .sk-lockup-box > .sk-lockup-desc {
  margin-top: calc(var(--sk-lockup-gap) * var(--sk-rhythm-title, 1));
}
.sk-lockup[data-layout="strip"] .sk-lockup-title {
  font-size: var(--sk-text-h3-size);
  max-width: var(--sk-measure);
}
.sk-lockup[data-layout="strip"] .sk-lockup-desc {
  font-size: var(--kit-type-base);
  text-align: start;
}
.sk-lockup[data-layout="strip"] .sk-lockup-box > .sk-lockup-actions {
  grid-column: 2;
  grid-row: 1 / span 4;
  align-self: center;
  justify-content: flex-start;
  margin: 0;
}
@container sk-pane (max-width: 640px) {
  .sk-lockup[data-layout="strip"] .sk-lockup-box {
    grid-template-columns: minmax(0, 1fr);
  }
  .sk-lockup[data-layout="strip"] .sk-lockup-box > .sk-lockup-actions {
    grid-column: 1;
    grid-row: auto;
    justify-self: start;
    margin-top: calc(var(--sk-lockup-gap) * var(--sk-rhythm-departure, 1.5));
  }
}

.sk-component[data-sk="lockup"]:has(
    > .sk-lockup:is(
        [data-layout="bleed"],
        [data-layout="split-b"],
        [data-layout="strip"],
        [data-layout="split-l"],
        [data-layout="split-r"],
        [data-layout="overlap-l"],
        [data-layout="overlap-r"]
      )
      > .sk-lockup-media
  ) {
  --sk-lockup-climb: var(--sk-chrome-clear, 0px);
  margin-block-start: calc(-1 * var(--sk-lockup-climb));
  --sk-chrome-member-stage: var(--sk-chrome-row-stage);
  --sk-chrome-ground: media;
}

/* Keep after the layout blocks: the bleed card's clamp wins only by source order. */
.sk-lockup:is(
    [data-card="true"]:not([data-layout^="split-"], [data-layout="strip"]),
    [data-layout^="overlap-"]
  )
  .sk-lockup-box {
  --sk-ink: var(--kit-foreground);
  --sk-ink-on-dark: var(--sk-theme-dark);
  --sk-ink-muted: var(--kit-muted);
  --sk-accent: var(--kit-accent);
  --sk-focus-ring-color: var(--kit-accent);
  --sk-surface: var(--kit-surface);
  --sk-card: var(--kit-surface);
  --sk-stroke: var(--kit-divider);
  --sk-field: var(--kit-background);
  --sk-btn-bg: var(--kit-foreground);
  --sk-btn-ink: var(--kit-background);
  background-color: var(--sk-card);
  color: var(--sk-ink);
  /* The ONE inset, not the spacing scale: a card at a BAND's edge breathes with the page's gutter. */
  padding-block: var(--sk-frame-inset-y, var(--sk-frame-pad));
  padding-inline: calc(var(--sk-gutter) * var(--sk-air));
  border-radius: var(--sk-card-radius);
  max-width: 34rem;
}
.sk-lockup[data-layout^="overlap-"][data-card="true"]:where(:has(> .sk-lockup-media))
  .sk-lockup-box {
  max-width: none;
  justify-self: stretch;
}
/* Set here, not set-then-cancelled: the shared block scores (0,4,0). */
.sk-lockup[data-card="true"]:not(
    [data-layout^="split-"],
    [data-layout="strip"],
    [data-layout^="overlap-"]
  )
  .sk-lockup-box {
  box-shadow: 0 var(--kit-space-3) var(--kit-space-6) rgba(0, 0, 0, 0.28);
}