/* ============================================================================
   Dylanmadeforyou

   Grammar: gallery / catalog. The page is a room with objects in it. Each object
   is a real piece of work, in a vitrine, and the label under it states fact
   rather than pitch: page counts, photograph counts, lines of CSS. Museum
   labels, not marketing copy.

   Ground: paper. Every site in the collection is dark and characterful, so the
   room holding them is light and quiet. Press red is the only accent, and it is
   the one colour none of the three works use, so it never competes with what is
   inside the frame.

   Type: Instrument Serif for display, Instrument Sans for labels and prose. One
   superfamily, so the pairing is designed rather than assembled, and a
   high-contrast didone-ish serif is what a printed catalogue actually sets its
   plates in. Neither face appears in any of the three works, so the room never
   borrows an object's voice.
   ========================================================================== */

:root {
  /* Paper, ink, and one accent. Six roles, no more. */
  --sc-canvas:     #F2F1EC;
  --sc-surface:    #E6E4DC;
  --sc-ink:        #14140F;
  --sc-ink-soft:   #5B594E;
  --sc-accent:     #B4231C;
  --sc-accent-ink: #FDF9F6;

  --sc-font-display: "Instrument Serif", Georgia, "Times New Roman", serif;
  --sc-font-text:    "Instrument Sans", system-ui, -apple-system, sans-serif;
  --sc-font-mono:    ui-monospace, "SFMono-Regular", "Cascadia Mono", monospace;

  /* Shadows carry the paper's hue. A pure-black shadow on warm paper is dirt. */
  --sc-shadow-color: 45 18% 8%;

  --dmy-rail: 11rem;          /* the index gutter on desktop */
  --dmy-hair: color-mix(in oklab, var(--sc-ink) 16%, transparent);
  --dmy-hair-soft: color-mix(in oklab, var(--sc-ink) 9%, transparent);
}

/* ---------------------------------------------------------------- base ---- */
html { background: var(--sc-canvas); }
body {
  background: var(--sc-canvas);
  color: var(--sc-ink);
  font-family: var(--sc-font-text);
  font-size: var(--sc-t-base);
  line-height: var(--sc-leading-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection { background: var(--sc-accent); color: var(--sc-accent-ink); }
:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 3px; border-radius: 2px; }
a { color: inherit; text-underline-offset: 0.18em; text-decoration-thickness: from-font; }

.dmy-skip {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--sc-ink); color: var(--sc-canvas); padding: var(--sc-3) var(--sc-5);
}
.dmy-skip:focus { left: var(--sc-4); top: var(--sc-4); }

/* --------------------------------------------------------------- type ----- */
.dmy-display {
  font-family: var(--sc-font-display);
  font-weight: 400;
  line-height: var(--sc-leading-none);
  letter-spacing: var(--sc-track-tight);
  text-wrap: balance;
}
.dmy-display--xl { font-size: var(--sc-t-3xl); }
.dmy-display--lg { font-size: var(--sc-t-2xl); }
.dmy-display--md { font-size: var(--sc-t-xl); letter-spacing: var(--sc-track-snug); }

.dmy-lede {
  font-size: var(--sc-t-lg);
  line-height: 1.42;
  max-width: 34ch;
  letter-spacing: var(--sc-track-normal);
  text-wrap: pretty;
}
.dmy-body { max-width: var(--sc-measure); text-wrap: pretty; }
.dmy-body + .dmy-body { margin-top: var(--sc-4); }

/* The label voice. Every fact on this page is set in it, which is what makes the
   collection read as a collection. */
.dmy-label {
  font-size: var(--sc-t-xs);
  font-weight: 500;
  letter-spacing: var(--sc-track-wide);
  text-transform: uppercase;
  color: var(--sc-ink-soft);
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------- shell ---- */
.dmy-wrap {
  width: 100%;
  max-width: var(--sc-maxw);
  margin-inline: auto;
  padding-inline: var(--sc-gutter);
}

/* ------------------------------------------------- the index (the nav) ----
   Gallery grammar: the nav is an index of objects, and it jumps. It is a folio
   in the margin on desktop, not a bar across the top, because a bar is the
   chrome of a page that is selling and this page is a room.
   -------------------------------------------------------------------------- */
.dmy-index {
  position: fixed; z-index: var(--sc-z-chrome);
  top: 0; left: 0; bottom: 0; width: var(--dmy-rail);
  padding: var(--sc-6) 0 var(--sc-6) var(--sc-5);
  display: flex; flex-direction: column; gap: var(--sc-5);
  border-right: 1px solid var(--dmy-hair-soft);
  background: var(--sc-canvas);
}
.dmy-index__mark {
  font-family: var(--sc-font-display);
  font-size: var(--sc-t-sm); font-weight: 600; line-height: 1.15;
  letter-spacing: var(--sc-track-snug);
  text-decoration: none;
}
.dmy-index__mark b { display: block; font-weight: 600; }
.dmy-index__mark span {
  display: block; color: var(--sc-ink-soft);
  font-family: var(--sc-font-text); font-size: var(--sc-t-xs);
  font-weight: 400; letter-spacing: 0;
}
.dmy-index__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sc-2); }
.dmy-index__list a {
  display: block; padding: 2px 0;
  font-size: var(--sc-t-xs); letter-spacing: 0.04em;
  color: var(--sc-ink-soft); text-decoration: none;
  transition: color var(--sc-d-fast) var(--sc-ease-out);
}
.dmy-index__list a::before {
  content: ""; display: inline-block; width: 2rem; height: 1px; margin-right: 0.5rem;
  vertical-align: 0.28em; background: var(--dmy-hair);
  /* The rule grows by scaling a fixed 2rem width, not by animating width: a
     width transition relayouts the whole index on every frame of a hover. */
  transform: scaleX(0.55); transform-origin: left center;
  transition: transform var(--sc-d-base) var(--sc-ease-out), background var(--sc-d-fast) linear;
}
.dmy-index__list a[aria-current="true"] { color: var(--sc-ink); }
.dmy-index__list a[aria-current="true"]::before { transform: scaleX(1); background: var(--sc-accent); }
@media (hover: hover) and (pointer: fine) {
  .dmy-index__list a:hover { color: var(--sc-ink); }
  .dmy-index__list a:hover::before { transform: scaleX(1); background: var(--sc-accent); }
}
.dmy-index__foot { margin-top: auto; }
.dmy-index__cta {
  display: inline-block; font-size: var(--sc-t-xs); letter-spacing: 0.06em;
  text-transform: uppercase; font-weight: 600; text-decoration: none;
  border-bottom: 2px solid var(--sc-accent); padding-bottom: 2px;
}

.dmy-shell { margin-left: var(--dmy-rail); }

/* Below the rail's width the index becomes a real top bar, because a 13rem
   gutter on a phone is the page. */
@media (max-width: 900px) {
  :root { --dmy-rail: 0rem; }
  .dmy-index {
    inset: 0 0 auto 0; width: auto; height: auto; bottom: auto;
    flex-direction: row; align-items: center; justify-content: space-between;
    gap: var(--sc-4); padding: var(--sc-3) var(--sc-gutter);
    border-right: 0; border-bottom: 1px solid var(--dmy-hair-soft);
  }
  .dmy-index__list, .dmy-index__mark span { display: none; }
  .dmy-index__foot { margin-top: 0; }
  .dmy-shell { margin-left: 0; padding-top: 3.25rem; }
}

/* ------------------------------------------------------------ sections ---- */
.dmy-section { padding-block: var(--sc-section); position: relative; }
/* A flow section straight after a pinned act inherits a whole viewport of the
   stage sliding off. Full padding on top of that is a second empty screen. */
.dmy-section--after-pin { padding-block-start: var(--sc-7); }

.dmy-rule { height: 1px; background: var(--dmy-hair); border: 0; margin: 0; }

/* ============================================================ THE VITRINE ==
   The signature move. A real capture of a real site, advancing under the
   reader's own hand inside a browser frame, with a rail beside it that stamps
   the site's own section landmarks as the scroll crosses them. The marks are
   measured off the live DOM at capture time, not authored here.
   ========================================================================= */
.dmy-vitrine { position: relative; }
/* The pane is the object and everything else is its label, so the pane takes
   the free space and the two side columns are capped. Sizing the pane in vw
   instead squeezed it to 456px on a 1440 screen, because the fixed side columns
   and the index gutter were competing for the same row. */
.dmy-vitrine .sc-stage {
  display: grid;
  grid-template-columns: clamp(14rem, 21vw, 18rem) minmax(0, 1fr) clamp(9rem, 14vw, 12.5rem);
  align-items: center;
  gap: clamp(1rem, 2.2vw, 2rem);
  padding-inline: clamp(1rem, 2.5vw, 2.5rem);
}
.dmy-vitrine__aside { grid-column: 1; }
.dmy-vitrine__pane  { grid-column: 2; }
.dmy-vitrine__rail  { grid-column: 3; }

/* The frame. Real browser chrome drawn in markup, holding a real capture. It is
   a frame around genuine content, which is the opposite of a div-built fake
   screenshot. The URL in it is the site's real URL and it is a working link. */
.dmy-pane {
  position: relative;
  border-radius: var(--sc-r-md);
  overflow: hidden;
  background: var(--pane-chrome, #1b1b18);
  box-shadow: var(--sc-e3);
  transform: translateZ(0);
}
.dmy-pane__bar {
  display: flex; align-items: center; gap: var(--sc-3);
  padding: 0.55rem 0.75rem;
  background: var(--pane-chrome, #1b1b18);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.dmy-pane__dots { display: flex; gap: 5px; flex: none; }
.dmy-pane__dots i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, 0.16); }
.dmy-pane__url {
  flex: 1; min-width: 0;
  font-family: var(--sc-font-mono); font-size: 11.5px; line-height: 1.6;
  color: rgba(255, 255, 255, 0.66);
  background: rgba(255, 255, 255, 0.07);
  border-radius: var(--sc-r-pill);
  padding: 2px 10px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  text-decoration: none;
}
.dmy-pane__url:hover { color: rgba(255, 255, 255, 0.95); }
.dmy-pane__live {
  flex: none; display: inline-flex; align-items: center; gap: 6px;
  font-size: 10.5px; letter-spacing: 0.09em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.58);
}
.dmy-pane__live i { width: 6px; height: 6px; border-radius: 50%; background: #5CBE7E; }
.dmy-pane__live--pending i { background: #D9A43C; }

.dmy-pane__view { position: relative; aspect-ratio: 1200 / 750; background: var(--pane-ground, #0b0b0a); }
.dmy-pane__view > canvas,
.dmy-pane__view > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
/* The poster is the ground the "ground or greet" rule asks for: a pinned stage
   is fully visible about a viewport before its progress leaves 0, and the canvas
   is blank until the first frame decodes. */
.dmy-pane__view > canvas { z-index: 1; }

/* The annotation rail. Ticks are the site's own sections, at their real depths. */
.dmy-marks { list-style: none; margin: 0; padding: 0; position: relative; padding-left: var(--sc-5); }
.dmy-marks::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 1px;
  background: color-mix(in oklab, var(--vit-ink, var(--sc-ink)) 18%, transparent);
}
/* The playhead: how far through the captured site the reader currently is. */
.dmy-marks::after {
  content: ""; position: absolute; left: -1px; top: 0; width: 3px;
  height: calc(var(--sc-p, 0) * 100%);
  background: var(--vit-accent, var(--sc-accent));
}
.dmy-marks li {
  position: relative;
  font-size: var(--sc-t-xs); line-height: 1.3;
  letter-spacing: 0.03em;
  color: color-mix(in oklab, var(--vit-ink, var(--sc-ink)) 55%, transparent);
  padding-block: 0.42rem;
  opacity: 0.32;
  transition: opacity var(--sc-d-base) var(--sc-ease-out), color var(--sc-d-base) linear;
}
.dmy-marks li::before {
  content: ""; position: absolute; left: calc(-1 * var(--sc-5)); top: 0.85em;
  width: 1.25rem; height: 1px;
  background: color-mix(in oklab, var(--vit-ink, var(--sc-ink)) 30%, transparent);
  transform: scaleX(0.6); transform-origin: right center;
  transition: transform var(--sc-d-base) var(--sc-ease-out), background var(--sc-d-base) linear;
}
/* Stamped, and it stays stamped: by the end of the vitrine the rail is a
   complete record of the site the reader just scrolled. */
.dmy-marks li.is-passed { opacity: 1; color: var(--vit-ink, var(--sc-ink)); }
.dmy-marks li.is-passed::before { transform: scaleX(1); background: var(--vit-accent, var(--sc-accent)); }

/* The label under each object. Fact, in the same schema every time. */
.dmy-spec { list-style: none; margin: var(--sc-4) 0 0; padding: 0; }
.dmy-spec li {
  display: flex; justify-content: space-between; gap: var(--sc-4);
  padding-block: 0.34rem;
  border-bottom: 1px solid color-mix(in oklab, var(--vit-ink, var(--sc-ink)) 12%, transparent);
  font-size: var(--sc-t-sm);
  font-variant-numeric: tabular-nums;
}
.dmy-spec .k { color: color-mix(in oklab, var(--vit-ink, var(--sc-ink)) 62%, transparent); }
.dmy-spec .v { text-align: right; }

.dmy-vitrine__title { margin-bottom: var(--sc-2); }
.dmy-vitrine__meta {
  color: color-mix(in oklab, var(--vit-ink, var(--sc-ink)) 66%, transparent);
  font-size: var(--sc-t-sm);
}
.dmy-vitrine__more {
  display: inline-block; margin-top: var(--sc-4);
  font-size: var(--sc-t-xs); letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600;
  border-bottom: 2px solid var(--vit-accent, var(--sc-accent)); padding-bottom: 2px; text-decoration: none;
}

/* ------------------------------------------------- the three identities ---
   Each vitrine is scoped to its client's own palette and face for its span. The
   room becomes the object. `color` is restated on every subtree that redefines
   --sc-ink, because color inherits as a computed value and a redefined token
   alone would leave the text at the body's ink.
   -------------------------------------------------------------------------- */
.scene { color: var(--vit-ink); background: var(--vit-bg); }
.scene .dmy-display { font-family: var(--vit-display, var(--sc-font-display)); }
.scene .dmy-label { color: color-mix(in oklab, var(--vit-ink) 58%, transparent); }

.scene--stay {
  --vit-bg: #0A0807; --vit-ink: #F2EDE4; --vit-accent: #C9A84C;
  --vit-display: "Playfair Display", Georgia, serif;
  --pane-chrome: #1C1814; --pane-ground: #0A0807;
}
.scene--stay .dmy-display { font-weight: 700; }

.scene--phoenix {
  --vit-bg: #0C1B33; --vit-ink: #E7EBF2; --vit-accent: #F07A26;
  --vit-display: "Archivo", system-ui, sans-serif;
  --pane-chrome: #16294A; --pane-ground: #0C1B33;
}
.scene--phoenix .dmy-display {
  font-variation-settings: "wdth" 112; font-weight: 800;
  text-transform: uppercase; letter-spacing: -0.028em;
}

.scene--forte {
  --vit-bg: #08090B; --vit-ink: #E8EDF4; --vit-accent: #4D9EE2;
  --vit-display: "Barlow Condensed", "Archivo", sans-serif;
  --pane-chrome: #15181D; --pane-ground: #08090B;
}
.scene--forte .dmy-display {
  font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.005em;
}

/* ------------------------------------------------------------ the rail ---- */
/* Pan act. The heading rides in as the first item and a closing note as the
   last, which is what gives the rail the overflow its travel needs as well as a
   beginning and an end. */
/* Centre the rail in the stage. No height here: .sc-stage is already 100svh,
   and a `height: 100%` resolves against the padded act box instead, which made
   the sticky stage 1540px tall on a 900px viewport and pushed the rail's
   headings off the top of the screen. */
.dmy-pan-stage { display: flex; align-items: center; }
.dmy-rail {
  display: flex; gap: var(--sc-5); align-items: stretch;
  padding-inline: var(--sc-gutter); will-change: transform;
  width: max-content;
}
.dmy-rail > * { flex: 0 0 auto; width: clamp(17rem, 25vw, 22rem); }
.dmy-rail__lead {
  width: clamp(20rem, 32vw, 30rem);
  display: flex; flex-direction: column; justify-content: center;
}
.dmy-plate {
  display: flex; flex-direction: column;
  padding: var(--sc-5); background: var(--sc-canvas);
  border: 1px solid var(--dmy-hair);
  border-radius: var(--sc-r-md);
  box-shadow: var(--sc-e1);
}
.dmy-plate h3 {
  font-size: var(--sc-t-lg); font-family: var(--sc-font-display);
  font-weight: 400; letter-spacing: var(--sc-track-snug); line-height: 1.1;
}
.dmy-plate p { margin-top: var(--sc-3); color: var(--sc-ink-soft); font-size: var(--sc-t-sm); }
.dmy-plate .dmy-label { margin-bottom: var(--sc-4); }
.dmy-rail__end { display: flex; align-items: center; }
/* A rail item is read cropped for most of its life, so the staggered settle is
   what makes it read as arriving rather than as failing to load. The first item
   is exempt: a pan act needs its opening content already present. */
@media (prefers-reduced-motion: no-preference) {
  /* The multiplier has to outrun the stagger or the last item never reaches
     full opacity: at 2.6 with a 0.34 step, item 8 peaked at 2.6 - 2.72, i.e.
     below the floor, for the entire act. 3.6 against a 0.30 step clears item 8
     comfortably before p reaches 1. */
  .dmy-rail > * + * {
    opacity: clamp(0.55, calc(var(--sc-p, 0) * 3.6 - var(--i, 0) * 0.3), 1);
    transform: translateY(calc((1 - clamp(0, calc(var(--sc-p, 0) * 3.6 - var(--i, 0) * 0.3), 1)) * 14px));
  }
}

/* ---------------------------------------------------------- the method ---- */
/* The quiet act. No media, no numbers, no motion past entry. Authored silence. */
.dmy-method { display: grid; gap: var(--sc-7) var(--sc-8); grid-template-columns: 1fr; }
@media (min-width: 62rem) { .dmy-method { grid-template-columns: 22rem 1fr; } }
.dmy-steps { list-style: none; margin: 0; padding: 0; counter-reset: s; }
.dmy-steps li {
  counter-increment: s;
  padding-block: var(--sc-5);
  border-top: 1px solid var(--dmy-hair);
  display: grid; grid-template-columns: 2.5rem 1fr; gap: var(--sc-4);
}
.dmy-steps li::before {
  content: counter(s, decimal-leading-zero);
  font-family: var(--sc-font-mono); font-size: var(--sc-t-xs);
  color: var(--sc-accent); padding-top: 0.35em;
}
.dmy-steps h3 { font-size: var(--sc-t-base); font-weight: 600; letter-spacing: var(--sc-track-normal); }
.dmy-steps p { color: var(--sc-ink-soft); margin-top: var(--sc-2); font-size: var(--sc-t-sm); max-width: 52ch; }

/* -------------------------------------------------- packages and close ----
   The close is an inquiry plate typeset exactly like every label above it, on
   the one ink ground on the page, so the ask reads as part of the collection.
   -------------------------------------------------------------------------- */
.dmy-close { --sc-ink: #F2F1EC; --sc-ink-soft: #A8A497; color: var(--sc-ink); background: #14140F; }
.dmy-close .dmy-label { color: var(--sc-ink-soft); }
.dmy-close { padding-block: var(--sc-9); }

.dmy-prices { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
@media (min-width: 54rem) { .dmy-prices { grid-template-columns: repeat(3, 1fr); } }
.dmy-prices li { padding: var(--sc-6) var(--sc-5); border-top: 1px solid rgba(242, 241, 236, 0.16); }
@media (min-width: 54rem) { .dmy-prices li + li { border-left: 1px solid rgba(242, 241, 236, 0.16); } }
.dmy-prices .amt {
  display: block; font-family: var(--sc-font-display);
  font-size: var(--sc-t-2xl); font-weight: 400; line-height: 1;
  letter-spacing: var(--sc-track-tight);
  font-variant-numeric: tabular-nums;
  margin-block: var(--sc-3);
}
.dmy-prices p { color: var(--sc-ink-soft); font-size: var(--sc-t-sm); max-width: 30ch; }

.dmy-ask { display: grid; gap: var(--sc-6); align-items: end; grid-template-columns: 1fr; }
@media (min-width: 62rem) { .dmy-ask { grid-template-columns: 1fr auto; } }
.dmy-cta {
  display: inline-flex; align-items: center; gap: var(--sc-3);
  padding: var(--sc-4) var(--sc-6);
  background: var(--sc-accent); color: var(--sc-accent-ink);
  font-weight: 600; font-size: var(--sc-t-base); letter-spacing: var(--sc-track-normal);
  text-decoration: none; border-radius: var(--sc-r-sm); border: 0; cursor: pointer;
  white-space: nowrap;
  transition: transform var(--sc-d-fast) var(--sc-ease-out), background var(--sc-d-fast) linear;
}
.dmy-cta:hover { background: #C82B23; }
.dmy-cta:active { transform: translateY(1px); }

/* -------------------------------------------------------------- footer ---- */
.dmy-foot { background: #14140F; color: #A8A497; padding: var(--sc-7) 0 var(--sc-6); font-size: var(--sc-t-sm); }
.dmy-foot a { color: #F2F1EC; }
.dmy-foot__row { display: flex; flex-wrap: wrap; gap: var(--sc-5) var(--sc-7); justify-content: space-between; }

/* --------------------------------------------------------------- misc ----- */
.dmy-figure { margin: 0; }
.dmy-figure img { width: 100%; height: auto; display: block; border-radius: var(--sc-r-md); }
.dmy-figure figcaption { margin-top: var(--sc-3); color: var(--sc-ink-soft); font-size: var(--sc-t-sm); }

/* Below 900px the vitrine stops being a three-column vitrine and becomes a
   stacked plate: the pane, then its label. The annotation rail is furniture at
   that width, so it goes. */
@media (max-width: 900px) {
  .dmy-vitrine .sc-stage {
    grid-template-columns: 1fr;
    align-content: center;
    gap: var(--sc-5);
    padding-block: var(--sc-6);
  }
  .dmy-vitrine__aside, .dmy-vitrine__pane, .dmy-vitrine__rail {
    grid-column: 1; width: auto; justify-self: stretch;
  }
  .dmy-vitrine__rail { display: none; }
  .dmy-vitrine .dmy-display--lg { font-size: var(--sc-t-xl); }
  .dmy-spec li { font-size: var(--sc-t-xs); }
}

/* The wordmark is the page h1 on the landing page and a plain lockup on the
   sub-pages, so the heading's own metrics have to be neutralised either way. */
.dmy-index__mark h1 { font: inherit; margin: 0; letter-spacing: inherit; }

/* ------------------------------------------------------------- aerial ----
   The one act on a photographic ground.

   Two things bite here, and both are in taste.md. First, the engine builds its
   scrim by mixing toward --sc-canvas, and this page's canvas is paper, so an
   unscoped scrim LIGHTENS the frame under the copy. Second, redefining a token
   does not re-ink text: `color` inherits as a computed value, so the copy block
   kept the body's dark ink while its children were individually painted white,
   and the measured contrast was 1.03:1 on a block that looked white by eye.

   So: scope a dark canvas, restate the ink tokens, and restate `color` on the
   same subtree.
   -------------------------------------------------------------------------- */
.dmy-aerial {
  --sc-canvas: #070C12;
  --sc-ink: #FFFFFF;
  --sc-ink-soft: rgba(255, 255, 255, 0.84);
  color: var(--sc-ink);
}
.dmy-aerial .dmy-label { color: var(--sc-ink-soft); }
.dmy-aerial .dmy-display { color: var(--sc-ink); }
.dmy-aerial .dmy-lede { color: var(--sc-ink-soft); }
/* A column, not a corner: the footage is bright edge to edge, so the density
   goes under the text column and the right of the frame keeps its own contrast
   rather than the whole shot being thrown away to fix one corner. */
.dmy-aerial .sc-scrim {
  background: linear-gradient(90deg,
    color-mix(in oklab, var(--sc-canvas) 90%, transparent) 0%,
    color-mix(in oklab, var(--sc-canvas) 78%, transparent) 38%,
    color-mix(in oklab, var(--sc-canvas) 34%, transparent) 60%,
    transparent 80%);
}
.dmy-aerial .sc-copy { max-width: 44ch; }
@media (max-width: 860px) {
  /* Both corner anchors become full-width bands on a phone, so the column
     gradient has to become a bottom band or the copy sits on bare footage. */
  .dmy-aerial .sc-scrim {
    background: linear-gradient(0deg,
      color-mix(in oklab, var(--sc-canvas) 92%, transparent) 0%,
      color-mix(in oklab, var(--sc-canvas) 78%, transparent) 46%,
      transparent 78%);
  }
}