/* =============================================================================
   support.css — THE MEMBERSHIPS PAGE.

   Everfall, 2026-09-07: "for /support make the design visual similar to
   [the MEMBERSHIPS reference] ... for the background use [the jungle lagoon]
   ... remove all this: Memberships / PayPal subscription - monthly renewal -
   Discord role - cancel any time. / No active membership / The tiers are
   listed below. / Open a locked dino / ... / The tiers / Every line below is
   enforced by the server, not promised by the page."

   THE SHAPE, read off the reference and measured rather than guessed:

     a numbered eyebrow  ->  a wide-tracked title  ->  a short accent rule
     ->  one tracked line  ->  three thin plates in a row, each opening on an
     ordinal, then the rank's name, then its perks under `//` marks, and
     closing on ONE full-width outlined control.

   ★ THIS SHEET HAD NEVER BEEN LINKED. It has existed since the public
   purchase feed landed (2026-08-29) and no Page row named it, so `.sup-feed-*`
   had never reached a browser and the feed shipped as a bare ordered list on
   every owner. assemble.py's support row names it as of today, which is also
   what COPIES it onto the box.

   ★ TOKEN-ONLY, OWNER-BLIND. Not one colour literal, not one owner name, not
   one asset path. Every colour is a role token or a `color-mix()` of one, so a
   server born tomorrow gets this page under its own palette. The one thing
   that IS owner-specific - the photograph - arrives as `--art-scene-support`,
   which theme.py emits ONLY for an owner who typed `theme.art_scenes.support`.

   ★ WHY THE GROUND CARRIES NO GRADIENT LAYER. The obvious way to darken a
   photograph is a `linear-gradient(...)` stacked over it in the same
   `background-image`. It is wrong here: `var(--art-scene-support, none)` still
   resolves on an owner who typed no scene, so the GRADIENT would paint over
   every other owner's ground - a near-black wash over a page that is supposed
   to look exactly as it did. So the darkening is the photo layer's OWN mask
   and filter. No image, nothing painted, no empty layer. The mask reads
   62% -> 34% -> 8% down the viewport, i.e. the "top ~35%, bottom ~92% black"
   the brief asked for, arrived at from the other side.
   ============================================================================= */

/* ★ DECLARED ON `html`, NOT ON `:root`, AND THE DIFFERENCE IS THE WHOLE POINT.
   Both select the same element; `:root` is a class-level selector and `html` a
   type one, so theme.css's `:root` block - which ships FIRST - still wins for
   an owner who typed a scene. An owner who typed none has nothing defining
   these at all, and this is what makes them `none` rather than undefined,
   which is what keeps the declarations that read them from being dropped
   whole at computed-value time. */
html {
  --art-scene-support: none;
  --art-scene-support-phone: none;
  --art-scene-support-placeholder: none;
}

/* -------------------------------------------------------------------------
   0. THE PAGE'S OWN SCALE
   One place to tune, rather than a number chosen per rule months apart. The
   house look owns the four INTERIOR heading steps; a page's hero is not an
   interior heading, and this is where its two sizes live.
   ------------------------------------------------------------------------- */
.sup-page {
  --sup-h: clamp(30px, 6.2vw, 82px);      /* the page title */
  --sup-name: clamp(25px, 2.6vw, 39px);   /* a rank's name on its plate */
  --sup-micro: 10.5px;                    /* every tracked label here */
  --sup-line: 13.5px;                     /* a perk line, a feed row */
  --sup-track: .34em;                     /* the register tracking */
  --sup-track-h: .3em;                    /* the title's, one notch tighter */
  --sup-hair: var(--tm-hair);
  --sup-hair-soft: var(--tm-hair-soft);
  --sup-plate: color-mix(in srgb, var(--bg-deep) 80%, transparent);
  --sup-plate-hi: color-mix(in srgb, var(--bg-deep) 72%, transparent);
  /* THE SCRIM, as an ALPHA MASK on the photograph itself - see the header.
     The colour is irrelevant to a mask (only its alpha is read); it is a real
     token so that nothing here invents one. */
  --sup-scrim: linear-gradient(180deg,
    color-mix(in srgb, var(--fg) 43%, transparent) 0%,
    color-mix(in srgb, var(--fg) 26%, transparent) 46%,
    color-mix(in srgb, var(--fg) 5%, transparent) 100%);
  position: relative;
}

/* -------------------------------------------------------------------------
   1. THE GROUND — the owner's photograph, fixed and full-bleed
   Two layers: the tiny placeholder underneath, the real cut fading in over
   it. Copied from the pattern livedossier.css proved on the live page, with
   the gradient half replaced for the reason stated in the header.
   ------------------------------------------------------------------------- */
.sup-page::before,
.sup-page::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-repeat: no-repeat;
  background-position: 50% 72%;
  background-size: cover;
  /* the darkening that lets small type sit over a jungle */
  filter: brightness(.46) saturate(.8);
  -webkit-mask-image: var(--sup-scrim);
  mask-image: var(--sup-scrim);
}
.sup-page::before { background-image: var(--art-scene-support-placeholder); }
.sup-page::after {
  background-image: var(--art-scene-support);
  opacity: 0;
  animation: sup-scene-in .5s ease .28s forwards;
}
@keyframes sup-scene-in { to { opacity: 1; } }

/* NO FADE UNDER REDUCED MOTION. A full-bleed cross-fade is exactly the
   large-area motion that rule exists to stop, so the real cut simply IS
   there. */
@media (prefers-reduced-motion: reduce) {
  .sup-page::after { animation: none; opacity: 1; }
}

/* -------------------------------------------------------------------------
   2. THE HERO
   ------------------------------------------------------------------------- */
.sup-hero {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-block: clamp(6px, 2vw, 26px) clamp(30px, 4.4vw, 60px);
}

/* THE NUMBERED FRAGMENT. The `//` is drawn here rather than typed into an
   owner's content.json, so every owner's eyebrow wears the register mark and
   nobody has to know the convention to get it. */
.sup-eyebrow {
  display: flex;
  align-items: baseline;
  gap: .5em;
  margin: 0 0 clamp(14px, 2vw, 26px);
  font-family: var(--font-ui);
  font-size: var(--sup-micro);
  font-weight: 600;
  letter-spacing: var(--sup-track);
  text-transform: uppercase;
  color: var(--fg-mute);
}
.sup-eyebrow::before {
  content: "//";
  letter-spacing: .04em;
  color: color-mix(in srgb, var(--accent) 62%, transparent);
}
.sup-eyebrow:empty { display: none; }

.sup-hero .sup-h {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--sup-h);
  line-height: 1;
  letter-spacing: var(--sup-track-h);
  text-transform: uppercase;
  /* the tracking is trailing space on the last glyph; nudge it back so the
     word reads optically centred rather than pushed left */
  text-indent: var(--sup-track-h);
  color: var(--fg);
}

/* THE SHORT RULE. One accent stroke under the title, the reference's own
   mark and the site's one use of accent as a line. */
.sup-rule {
  display: block;
  width: 52px;
  height: 2px;
  margin: clamp(16px, 2.2vw, 26px) 0 0;
  background-color: var(--accent);
}

.sup-sub {
  margin: clamp(12px, 1.6vw, 18px) 0 0;
  max-width: 46ch;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: var(--sup-track);
  text-transform: uppercase;
  color: var(--fg-dim);
}

/* -------------------------------------------------------------------------
   2b. THE STATUS LINE — what used to be a full-width well
   Four states, ONE row, and a row that has nothing to say has no height at
   all. The ids are support.js's and do not move.
   ------------------------------------------------------------------------- */
.sup-state {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 14px;
  margin-top: clamp(16px, 2.2vw, 24px);
  min-height: 0;
}

/* `.sup-page` leads both of these because the SURFACE REGISTER in
   terminal.css names them and terminal.css ships AFTER this sheet: at equal
   specificity the register's dim hairline would win and the chip would lose
   its accent. */
.sup-page .sup-state-t {
  padding: 6px 12px;
  border: 1px solid color-mix(in srgb, var(--accent) 34%, transparent);
  border-radius: var(--r);
  background-color: color-mix(in srgb, var(--accent) 7%, transparent);
  font-family: var(--font-ui);
  font-size: var(--sup-micro);
  font-weight: 700;
  letter-spacing: var(--sup-track);
  text-transform: uppercase;
  color: var(--accent-hi);
}
.sup-page .sup-state-b {
  font-family: var(--font-ui);
  font-size: 12.5px;
  color: var(--fg-mute);
}
/* An EMPTY state is silent. Without this the flex row keeps a gap and a
   baseline for a chip with no word in it, which reads as a rendering fault
   rather than as "nothing to report". */
.sup-state-t:empty,
.sup-state-b:empty,
.sup-state-act:empty { display: none; }

/* THE SIGN-IN LINK. support.js drops it into `#support-gate` as a `.btn
   .btn-primary`; on this page the committing control is the one on a rank's
   plate, so this one is a quiet outline. */
.sup-state-act .gate-act { margin: 0; }
.sup-page .sup-state .sup-signin {
  display: inline-flex;
  align-items: center;
  padding: 8px 18px;
  border: 1px solid color-mix(in srgb, var(--accent) 46%, transparent);
  border-radius: var(--r);
  background-color: transparent;
  background-image: none;
  box-shadow: none;
  font-family: var(--font-ui);
  font-size: var(--sup-micro);
  font-weight: 700;
  letter-spacing: var(--sup-track);
  text-transform: uppercase;
  color: var(--accent-hi);
}
.sup-page .sup-state .sup-signin:hover {
  border-color: var(--accent);
  background-color: color-mix(in srgb, var(--accent) 10%, transparent);
  transform: none;
}

/* -------------------------------------------------------------------------
   3. THE DECK — the ordinal rail and the plates
   ------------------------------------------------------------------------- */
.sup-deck { position: relative; }

/* THE QUIET INDEX. Decoration, in the page's outer margin, and only where
   there is margin to put it in. `aria-hidden` in the markup: the ordinals it
   lists are already the first thing on each plate. */
.sup-index {
  display: none;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 1320px) {
  .sup-index {
    display: grid;
    gap: 14px;
    position: absolute;
    left: -62px;
    top: 4px;
  }
  .sup-index li {
    font-family: var(--font-mono);
    font-size: var(--sup-micro);
    letter-spacing: .16em;
    color: color-mix(in srgb, var(--fg-mute) 62%, transparent);
  }
  .sup-index li.is-mine { color: var(--accent); }
}

.sup-tiers {
  display: grid;
  /* 2 ranks or 5 ranks lay out for the same reason 3 do: nothing here counts
     them. */
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(12px, 1.5vw, 22px);
}

/* THE PLATE. A hairline over the photograph, its own ground held back far
   enough to read the picture through it, and a soft blur so the jungle behind
   the type is texture rather than detail. */
.sup-page .sup-deck .sup-tier-card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 430px;
  padding: clamp(20px, 2.3vw, 32px);
  background-color: var(--sup-plate);
  background-image: none;
  border: 1px solid var(--sup-hair);
  border-radius: var(--r);
  box-shadow: none;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.sup-page .sup-deck .sup-tier-card:hover {
  background-color: var(--sup-plate-hi);
  border-color: color-mix(in srgb, var(--accent) 26%, transparent);
}

/* THE GHOST. The owner's OWN mark, bled into the plate's top-right corner and
   masked away toward the middle - the reference's ghosted head, drawn from
   the one image every owner already has and the browser has already fetched
   for the nav. An owner with no mark paints nothing: no image, no layer.

   ★★ IT RIDES THE HEAD'S ::after AND NOT THE PLATE'S, AND THAT IS NOT A
      PREFERENCE. The plate carries `.card`, so motion.js stamps it
      `data-wc-card` and motion.css OWNS `[data-wc-card]::after` - it is that
      engine's hover sheen. Three of its own media blocks then end
      `opacity: 0 !important` on it (reduced motion, reduced transparency,
      forced colours), and its hover rule sets `opacity: 1` and runs a sweep.
      Measured, not guessed: the first cut of this ghost drew on the plate's
      ::after and computed to `opacity: 0` in the screenshot rig, which
      emulates reduced motion - the art was simply not there, and on a normal
      reader it would have jumped to full strength and swept across on hover.
      The head is not in motion.js's CARD_SEL, so its ::after is free. */
.sup-page .sup-tier-card .sup-tier-top::after {
  content: "";
  position: absolute;
  z-index: -1;
  right: -24%;
  top: -48%;
  width: 96%;
  height: 290%;
  background-image: var(--art-mark, none);
  background-repeat: no-repeat;
  background-position: 100% 0;
  background-size: contain;
  filter: grayscale(1) brightness(2.1) contrast(.6);
  opacity: .3;
  mix-blend-mode: screen;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(212deg,
    color-mix(in srgb, var(--fg) 100%, transparent) 6%,
    color-mix(in srgb, var(--fg) 0%, transparent) 74%);
  mask-image: linear-gradient(212deg,
    color-mix(in srgb, var(--fg) 100%, transparent) 6%,
    color-mix(in srgb, var(--fg) 0%, transparent) 74%);
}

/* THE MEMBER'S OWN PLATE. One accent hairline and the label support.js
   already writes - never a second colour and never a badge in a corner. */
.sup-page .sup-deck .sup-tier-card.is-current {
  border-color: color-mix(in srgb, var(--accent) 52%, transparent);
}

.sup-page .sup-tier-top {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  /* ONE HEIGHT FOR EVERY HEAD IN THE ROW. The lowest rank inherits nothing,
     so its head is one line shorter than its neighbours' and its perk list
     used to start 24px higher than theirs. Derived from the name's own size
     rather than measured, so it tracks the clamp instead of drifting out of
     step with it at some width nobody shot. */
  min-height: calc(var(--sup-name) * 2.3);
  margin-bottom: clamp(18px, 2.6vw, 34px);
}

/* THE ORDINAL and its dash. The number is the card's POSITION in the row and
   is derived from the row itself; nothing here counts ranks or names one. */
.sup-ord {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: var(--sup-micro);
  letter-spacing: .18em;
  color: var(--fg-mute);
}
.sup-ord::after {
  content: "";
  width: 20px;
  height: 1px;
  background-color: color-mix(in srgb, var(--fg-mute) 55%, transparent);
}

.sup-page .sup-tier-card .sup-tier-name {
  margin: 4px 0 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--sup-name);
  line-height: 1;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--fg);
}

.sup-page .sup-tier-card .sup-tier-price {
  font-family: var(--font-ui);
  font-size: var(--sup-micro);
  font-weight: 600;
  letter-spacing: var(--sup-track);
  text-transform: uppercase;
  color: var(--fg-mute);
}

/* THE MEMBER'S MARK, on the plate's own head. */
.sup-page .sup-tier-card .sup-mine {
  align-self: flex-start;
  margin-top: 2px;
  padding: 3px 9px;
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  border-radius: var(--r);
  background-color: transparent;
  font-family: var(--font-ui);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: var(--sup-track);
  text-transform: uppercase;
  color: var(--accent-hi);
}

.sup-page .sup-tier-card .tier-inherits {
  margin: 2px 0 0;
  font-family: var(--font-ui);
  font-size: 12px;
  color: var(--fg-mute);
}

/* THE PERKS. `//` is a pseudo-element on purpose: it is a mark, not a word,
   so it never reaches a screen reader's list and never has to be typed by the
   renderer. */
.sup-page .sup-tier-card .tier-benefits {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 11px;
  margin: 0 0 clamp(20px, 3vw, 34px);
  padding: 0;
  list-style: none;
}
.sup-page .sup-tier-card .tier-benefits li {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: baseline;
  font-family: var(--font-ui);
  font-size: var(--sup-line);
  line-height: 1.5;
  color: var(--fg-dim);
}
.sup-page .sup-tier-card .tier-benefits li::before {
  content: "//";
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .02em;
  color: color-mix(in srgb, var(--accent) 66%, transparent);
}

/* THE TWO-ISLAND SPLIT keeps its columns and takes the same list rules. */
.sup-page .sup-tier-card .tier-split { position: relative; z-index: 1; }
.sup-page .sup-tier-card .tier-col-head {
  font-family: var(--font-ui);
  font-size: var(--sup-micro);
  font-weight: 700;
  letter-spacing: var(--sup-track);
  text-transform: uppercase;
  color: var(--fg-mute);
}

/* THE ONE CONTROL. The reference's outlined gold slab: an accent rule, accent
   words, and the page's ground showing through it. It is the LAST thing in
   the plate whatever else the rail drew, which is what `margin-top: auto`
   buys - a two-line plate and a six-line plate close on the same edge. */
.sup-page .sup-deck .sup-cta {
  position: relative;
  z-index: 1;
  margin-top: auto;
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 15px 18px;
  border: 1px solid color-mix(in srgb, var(--accent) 58%, transparent);
  border-radius: var(--r);
  background-color: color-mix(in srgb, var(--accent) 6%, transparent);
  background-image: none;
  box-shadow: inset 0 -18px 30px -26px var(--accent);
  font-family: var(--font-ui);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: var(--sup-track);
  text-transform: uppercase;
  color: var(--accent-hi);
  transform: none;
  /* THE LABEL WRAPS, IT IS NEVER CUT (El Ultimo Reino 2026-09-20: "Suscribirse
     con PayPal" under the primal theme's .btn { white-space: nowrap } inside
     the plate's overflow: hidden drew "UBSCRIBE WITH PAYPA"). The control is
     width: 100% of a 260px column, so any owner label past ~16 tracked
     capitals hit this; a second line beats a truncated verb on the one
     button that takes money. */
  white-space: normal;
  text-align: center;
  line-height: 1.35;
}
.sup-page .sup-deck .sup-cta:hover:not(:disabled) {
  border-color: var(--accent);
  background-color: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--accent-hi);
  transform: none;
}
.sup-page .sup-deck .sup-cta:disabled {
  border-color: color-mix(in srgb, var(--accent) 30%, transparent);
  color: color-mix(in srgb, var(--accent-hi) 62%, transparent);
  box-shadow: none;
  cursor: default;
}
/* The rail that grants the rank off-site draws a sentence instead of a
   control; it takes the control's seat so the plates still close level. */
.sup-page .sup-tier-card .tier-have {
  margin: auto 0 0;
  padding-top: 14px;
  font-family: var(--font-ui);
  font-size: var(--sup-micro);
  font-weight: 700;
  letter-spacing: var(--sup-track);
  text-transform: uppercase;
  color: var(--accent-hi);
}

/* -------------------------------------------------------------------------
   4. THE UNLOCK CARD (js/popunlock.js) — Frontier Prime's perk
   Owner-armed; absent entirely on an owner who set `support.unlock.show`
   false. Sits under the hero, centred, at the width of a reading column.
   ------------------------------------------------------------------------- */
.sup-page #support-unlock {
  margin: 0 auto clamp(24px, 3vw, 38px);
  max-width: 34em;
}

/* -------------------------------------------------------------------------
   5. THE SECTIONS UNDER THE DECK — the rank ladder and the purchase feed
   Quiet by construction: a tracked micro-label, a heading, hairline rows.
   ------------------------------------------------------------------------- */
.sup-sec { margin-top: clamp(44px, 6vw, 82px); }

.sup-sec-eyebrow {
  display: flex;
  align-items: baseline;
  gap: .5em;
  margin: 0 0 8px;
  font-family: var(--font-ui);
  font-size: var(--sup-micro);
  font-weight: 600;
  letter-spacing: var(--sup-track);
  text-transform: uppercase;
  color: var(--fg-mute);
}
.sup-sec-eyebrow::before {
  content: "//";
  letter-spacing: .04em;
  color: color-mix(in srgb, var(--accent) 62%, transparent);
}
.sup-sec-eyebrow:empty { display: none; }

.sup-page .sup-sec-h {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--tm-h-sec);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--fg);
}
.sup-page .sup-sec-h:empty { display: none; }

.sup-sec-note {
  margin: 8px 0 0;
  font-family: var(--font-ui);
  font-size: 12.5px;
  color: var(--fg-mute);
}
.sup-sec-note:empty { display: none; }

.sup-lines {
  margin: 18px 0 0;
  padding: 0;
  display: grid;
  gap: 9px;
  list-style: none;
}
.sup-lines li {
  font-family: var(--font-ui);
  font-size: var(--sup-line);
  color: var(--fg-dim);
}

/* THE LADDER. A register, not a panel: hairline rules, tracked caps heads,
   the wide direction scrolling inside its own box and never the page. */
#support-ladder-scroll { overflow-x: auto; margin-top: 20px; }
#support-ladder {
  width: 100%;
  min-width: 34em;
  border-collapse: collapse;
}
#support-ladder th,
#support-ladder td {
  padding: 12px 14px;
  text-align: center;
  border-bottom: 1px solid var(--sup-hair-soft);
}
#support-ladder thead th {
  background: none;
  font-family: var(--font-ui);
  font-size: var(--sup-micro);
  font-weight: 700;
  letter-spacing: var(--sup-track);
  text-transform: uppercase;
  color: var(--fg-mute);
  border-bottom-color: var(--sup-hair);
}
#support-ladder tbody td {
  font-family: var(--font-ui);
  font-size: var(--sup-line);
  color: var(--fg-dim);
}
#support-ladder th:first-child,
#support-ladder td:first-child {
  text-align: left;
  color: var(--fg);
  white-space: nowrap;
}
#support-ladder .ladder-none { opacity: .45; }

/* ===================== THE PUBLIC PURCHASE FEED =====================
   (Everfall, 2026-08-29). A small list, not a stack of chips: one hairline
   between rows, the rank in accent, the age on the right. */
.sup-feed {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: grid;
}
.sup-feed-row {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 11px 2px;
  border-bottom: 1px solid var(--sup-hair-soft);
  font-family: var(--font-ui);
  font-size: var(--sup-line);
  color: var(--fg-dim);
  animation: sup-feed-in .5s cubic-bezier(.2,.9,.25,1) both;
}
.sup-feed-tier {
  font-size: var(--sup-micro);
  font-weight: 700;
  letter-spacing: var(--sup-track);
  text-transform: uppercase;
  color: color-mix(in srgb, var(--accent-hi) 88%, transparent);
}
.sup-feed-when {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
  color: var(--fg-mute);
}
.sup-feed-empty {
  padding: 12px 2px;
  font-family: var(--font-ui);
  font-size: var(--sup-line);
  color: var(--fg-mute);
}
@keyframes sup-feed-in { from { opacity: 0; transform: translateX(-.5rem); }
                         to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .sup-feed-row { animation: none; }
}

/* -------------------------------------------------------------------------
   6. THE PHONE — 390px, one column, the portrait cut of the photograph
   ------------------------------------------------------------------------- */
@media (max-width: 720px) {
  .sup-page::before { background-image: var(--art-scene-support-placeholder); }
  .sup-page::after { background-image: var(--art-scene-support-phone); }
  .sup-page::before,
  .sup-page::after { background-position: center bottom; }

  .sup-page { --sup-track-h: .2em; --sup-track: .26em; }
  .sup-hero { padding-block: 4px 30px; }
  .sup-page .sup-deck .sup-tier-card { min-height: 0; }
  .sup-page .sup-tier-top { min-height: 0; }
  .sup-tiers { grid-template-columns: minmax(0, 1fr); }
  #support-ladder { min-width: 26em; }
}