/* ══════════════════════════════════════════════════════════════════════════
   css/sell-media-pass.css — THE SWEEP PASS FOR THE THREE MEDIA SELLING PAGES
   service.tnaado.ca · /brand-video-toronto · /product-photography-toronto
                     · /content-retainer

   A THIRD FILE, AND THE REASON IS OWNERSHIP. css/sell-media.css is the paint
   and css/sell-media-motion.css is the motion; both are somebody else's
   surface in a repo with ten agents in it. This sheet only ADDS, reads their
   tokens rather than redeclaring them, and is linked from exactly the three
   pages named above.

   WHAT IT FIXES, IN ORDER OF HOW BADLY IT SHOWED
   1. THE DEAD RIGHT HALF OF EVERY HERO. Measured in Chrome at 1440x900 on all
      three pages: the headline, the promise, the price plate and the call to
      action all sit inside the left 545px of a 1272px rail. The other 727px —
      57% of the first screen a paid click lands on — was empty ink. The hero
      is now two columns from 62rem, and the right one carries evidence: the
      frame PHOTO-RULING licenses for that page, or on /content-retainer the
      month itself, drawn.
   2. A PROCESS LISTED AS FIVE DURATIONS. "3 days · 2 weeks · 1 week · 2 weeks
      · 1 week" then a sentence asserting the sum. `.rt` draws the same five
      spans to scale, so the shape of the schedule — most of it is review and
      pre-production, one week of it is the shoot — is visible instead of
      arithmetic the reader has to do.
   3. TWELVE FILES DESCRIBED IN A SENTENCE. `.msheet` draws them at their real
      aspect ratios: one 16:9, six 9:16, five 4:5. The sentence is deleted.

   DEGRADATION — THE SAME CONTRACT AS THE TWO SHEETS IT SITS BESIDE
   Everything is authored in its finished state. Every proportion is an inline
   percentage in the markup, because the proportion IS the fact; the animation
   only reveals it. Nothing here reads scroll position, runs a rAF loop or
   measures a box: reveals come from js/sell-media.js's one observer adding
   `.is-on` to a `[data-arc]` root, which is the same hook the day arc uses.
   A blocked or throwing script costs the reveal and nothing else.

   prefers-reduced-motion is honoured at the foot.
   ══════════════════════════════════════════════════════════════════════════ */

/* ══ 1. THE HERO, IN TWO COLUMNS ═══════════════════════════════════════════
   Below 62rem nothing changes: `.rail` stays a block, the left column is a
   plain wrapper, and the evidence figure falls under the call to action in
   document order. That order is deliberate — on a phone the price and the
   button must not be pushed below a photograph.

   0.86fr on the right, not 1fr. The headline is the largest object on the
   page and it has to stay the largest; a right column at parity turns the
   first screen into two competing halves. */
.hero__grid { display: block; }

@media (min-width: 62rem) {
  .hero .rail {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, .86fr);
    gap: clamp(2rem, 5vw, 4.25rem);
    align-items: center;
  }
  /* Both columns must be able to shrink, or a long word in the headline and a
     wide image in the figure both refuse to and the document scrolls sideways.
     body has overflow-x:hidden, which would HIDE that rather than fix it. */
  .hero__col { min-width: 0; }
  .hero__ev  { min-width: 0; margin-top: 0; }
}

/* ── THE EVIDENCE FIGURE ─────────────────────────────────────────────────
   A photograph, not an ornament: it is the licensed frame for that page,
   moved up from the section below rather than added to the page, so the
   first screen carries real work instead of a decorative crop.

   NO TRANSFORM ON THE REVEAL. `[data-lift]` gives figures opacity only — the
   rule is already in css/sell-media-motion.css — because a hero image that
   slides is a hero image that shifts layout on a slow network. The intrinsic
   width/height attributes plus aspect-ratio here mean the box is reserved
   before the bytes land. */
.hero__ev { margin-top: clamp(2rem, 5vw, 2.75rem); }
.hero__ev img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 2px;
  background: #16161a;
}
.hero__ev figcaption {
  margin-top: .7rem;
  font-size: .8125rem;
  line-height: 1.5;
  color: var(--cap-ink);
}
/* Two ratios, both native to their file. 2:1 for the lit-set frame and 3:2
   for the penthouse frame — the same reasoning css/sell-media-motion.css
   gives for `.solo--native`: both frames carry their subject at opposite
   edges and a centre crop removes half the argument. */
.hero__ev--wide   img { aspect-ratio: 2 / 1;   object-fit: cover; }
.hero__ev--native img { aspect-ratio: 3 / 2;   object-fit: cover; }

/* ══ 2. `.rt` — THE RUN TIMELINE ═══════════════════════════════════════════
   One band, five spans, drawn to scale out of business days. Same shape and
   same trigger as `.arc` in css/sell-media-motion.css, and deliberately not
   that class: `.arc__seg--build/light/rolling` are named for a shoot day and
   reusing them here would make one component mean two things.

   THE WIDTHS ARE IN THE MARKUP. /brand-video-toronto is 33 business days —
   3 + 10 + 5 + 10 + 5 — so its spans are 9.091 / 30.303 / 15.152 / 30.303 /
   15.151. /product-photography-toronto is 16 — 2 + 5 + 1 + 3 + 5 — so
   12.5 / 31.25 / 6.25 / 18.75 / 31.25. Both sum to 100 and both agree with
   the total already printed under the list.

   THE SHOOT SPAN IS THE RED ONE, on both pages, and it is the small one. That
   is the honest shape of a production schedule and stating it was costing a
   sentence. */
.rt { margin-top: clamp(1.4rem, 3.5vw, 1.9rem); }

.rt__bar {
  display: flex;
  height: 2.25rem;
  overflow: hidden;
  border-radius: 2px;
  background: rgba(245, 241, 232, .06);
}
.band--paper .rt__bar { background: rgba(10, 10, 10, .06); }

.rt__seg {
  display: block;
  transform: scaleX(0);
  transform-origin: left center;
}
/* Declared on the ARMED state, not on `.is-on`. Putting a transition in the
   same rule as the value it changes is the classic no-animation bug and
   css/sell-media-motion.css calls it out by name. */
.is-armed .rt__seg { transition: transform .75s var(--ease) calc(var(--i, 0) * 130ms); }
.is-armed .rt.is-on .rt__seg,
html:not(.is-armed) .rt__seg { transform: none; }

/* Four greys and one red, and the greys RAMP left to right so the bar reads
   as elapsed time on its own. Corrected after looking at it: the fourth span
   was --dim-ink (#b9b3a6), far brighter than anything else on the bar, and it
   pulled the eye off the red. The red must be the only thing that jumps,
   because the red is the shoot — the one span that produces material, and
   deliberately not the widest. */
.rt__seg--a { background: rgba(245, 241, 232, .12); }
.rt__seg--b { background: rgba(245, 241, 232, .20); }
.rt__seg--c { background: var(--red); }
.rt__seg--d { background: rgba(245, 241, 232, .28); }
.rt__seg--e { background: rgba(245, 241, 232, .36); }

.rt__key {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1.4rem;
  margin-top: .85rem;
}
.rt__k {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .8125rem;
  color: var(--mute-ink);
}
.rt__sw { width: .8rem; height: .8rem; border-radius: 1px; flex: none; }
.rt__k b {
  font-family: var(--mono);
  font-size: .75rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--bone);
}

/* ══ 3. `.msheet` — THE MONTH, DRAWN ═══════════════════════════════════════
   /content-retainer only. Twelve plates at their delivered ratios: one 16:9,
   six 9:16, five 4:5. The counts are the markup's, the ratios are CSS, and
   between them they say everything the deleted sentence said.

   IT IS AN IMAGE, NOT A LIST, to a screen reader: one role="img" with one
   label, because twelve empty divs read one at a time is noise. `.msheet__key`
   directly beneath names all twelve in words, so the drawing is never the only
   copy of the fact. (It used to say the board's key further down the page did
   that too. It did — word for word, which is why the board's key was cut back
   to naming its own marks. One statement of the twelve, not two.) */
.msheet { margin-top: clamp(2rem, 5vw, 2.75rem); }

.msheet__k {
  font-family: var(--mono);
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--red-ink);
  margin: 0 0 .9rem;
}

.msheet__set { display: grid; gap: .55rem; }

.msheet__row { display: flex; gap: .4rem; align-items: flex-end; }

.msheet__p {
  display: block;
  flex: 1 1 0;
  min-width: 0;
  border-radius: 2px;
  background: rgba(245, 241, 232, .13);
  border: 1px solid rgba(245, 241, 232, .16);
  transform: scaleY(0);
  transform-origin: bottom center;
}
.msheet__p--wide { aspect-ratio: 16 / 9; }
.msheet__p--vert { aspect-ratio: 9 / 16; }
.msheet__p--four { aspect-ratio: 4 / 5; }

/* The long-form piece is the one the month is built around, so it is the one
   that carries colour. Six verticals and five stills are the run around it. */
.msheet__p--wide {
  background: rgba(200, 16, 46, .16);
  border-color: rgba(200, 16, 46, .42);
}

.is-armed .msheet__p { transition: transform .55s var(--ease) calc(var(--i, 0) * 55ms); }
.is-armed .msheet.is-on .msheet__p,
html:not(.is-armed) .msheet__p { transform: none; }

.msheet__key {
  display: grid;
  gap: .3rem;
  margin-top: 1rem;
}
.msheet__key p {
  display: flex;
  align-items: baseline;
  gap: .6rem;
  margin: 0;
  font-family: var(--mono);
  font-size: .75rem;
  color: var(--mute-ink);
}
.msheet__key b {
  min-width: 3.4rem;
  font-weight: 500;
  color: var(--bone);
}

/* ══ 4. MOUNT POINTS ═══════════════════════════════════════════════════════
   `[data-mount]:empty { display:none }` already lives in
   css/sell-media-motion.css, so an unfilled mount costs no layout. Repeated
   here only as a comment so the next reader does not go looking for it.  */

/* ══ 5. REDUCED MOTION ═════════════════════════════════════════════════════
   Every proportion is authored in the markup, so removing the animation
   removes nothing but the animation. */
@media (prefers-reduced-motion: reduce) {
  .rt__seg,
  .msheet__p {
    transform: none !important;
    transition: none !important;
  }
}