/* =========================================================================
   STEADY STATE · static ad (Variant A) · the 1:1 creative in the post slot
   Andrew's own look: dark cinematic canvas, bold white type, one word in
   his cyan. Every size is in container units (cqw) so the creative scales
   with the post, exactly like a flat 1080 x 1080 image would.
   ========================================================================= */

.post-media--square { aspect-ratio: 1 / 1; container-type: inline-size; color: #fff; }

.cr {
  position: absolute; inset: 0; overflow: hidden; isolation: isolate;
  background:
    radial-gradient(70% 60% at 78% 30%, rgba(12, 191, 240, 0.20), transparent 70%),
    radial-gradient(60% 50% at 0% 100%, rgba(12, 191, 240, 0.08), transparent 70%),
    #030505;
}
/* fine grain so the dark doesn't band */
.cr::after {
  content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none; opacity: 0.07; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Andrew, white coat, standing in from the right */
.cr__photo {
  position: absolute; z-index: 1; top: 5cqw; right: -15cqw;
  width: auto; height: 104cqw; max-width: none;
  filter: saturate(0.86) contrast(1.04);
}
/* the dark he steps out of: left edge and floor */
.cr__shade {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    linear-gradient(90deg, #030505 0%, rgba(3, 5, 5, 0.94) 34%, rgba(3, 5, 5, 0.55) 48%, rgba(3, 5, 5, 0) 62%),
    linear-gradient(0deg, rgba(3, 5, 5, 0.92) 0%, rgba(3, 5, 5, 0) 30%);
}

/* the range band: a CGM trace settling flat between 70 and 180 */
.cr__trace { display: block; width: 17cqw; height: 4.5cqw; margin: 0 0 4cqw; overflow: visible; }
.cr__trace line { stroke: rgba(238, 243, 246, 0.22); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.cr__trace path { fill: none; stroke: #0cbff0; stroke-width: 2.2; stroke-linecap: round; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 3px rgba(12, 191, 240, 0.55)); }

.cr__copy {
  position: absolute; z-index: 3; left: 7cqw; bottom: 7.5cqw; width: 54cqw;
  display: flex; flex-direction: column; align-items: flex-start;
}
.cr__chip {
  display: inline-flex; align-items: center; gap: 1.6cqw; padding: 1.3cqw 2.6cqw 1.3cqw 2.2cqw; border-radius: 99px;
  border: 1px solid rgba(12, 191, 240, 0.55); background: rgba(12, 191, 240, 0.12);
  font-family: var(--display); font-weight: 500; text-transform: uppercase; letter-spacing: 0.16em;
  font-size: 3.1cqw; line-height: 1; color: #bfeeff;
}
.cr__chip i { width: 1.6cqw; height: 1.6cqw; border-radius: 50%; background: #0cbff0; box-shadow: 0 0 0 0.8cqw rgba(12, 191, 240, 0.22); }
.cr__head {
  margin: 3.6cqw 0 0; font-family: var(--display); font-weight: 700; text-transform: uppercase;
  font-size: 9.3cqw; line-height: 1.01; letter-spacing: 0.005em; color: #fff;
  text-shadow: 0 0.4cqw 2.4cqw rgba(0, 0, 0, 0.6);
}
.cr__head em { font-style: normal; color: #0cbff0; }
.cr__when { margin: 4cqw 0 0; display: flex; flex-direction: column; gap: 0.9cqw; padding-left: 2.6cqw; border-left: 0.6cqw solid #0cbff0; }
.cr__when b { font-family: var(--sans); font-weight: 800; font-size: 3.6cqw; line-height: 1.15; color: #fff; letter-spacing: 0.01em; }
.cr__when span { font-family: var(--sans); font-weight: 600; font-size: 3.3cqw; line-height: 1.2; color: rgba(238, 243, 246, 0.72); }