/* =====================================================================
   Carousel slides (shared .cstage/.ctrack/.cslide markup, carousel.js).
   Lives inside the Instagram phone mock, so it's excluded from the
   global +2px font bump along with phone.css.
   One fixed template: full-bleed photo, bottom scrim, one PT Serif line.
   Three colours: navy #161e2a (primary), paper #fbf7f2 (text), brass #ecc077 (accent).
   ===================================================================== */
.cstage { position: relative; overflow: hidden; touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: grab; background: #161e2a; }
.cstage:active { cursor: grabbing; }
.ctrack { display: flex; height: 100%; transition: transform .45s cubic-bezier(.25, .8, .25, 1); will-change: transform; }
.ctrack.no-anim { transition: none; }
.cslide { position: relative; min-width: 100%; height: 100%; overflow: hidden; background: #161e2a; color: #fbf7f2; font-family: "Poppins", system-ui, sans-serif; }
.cslide img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; -webkit-user-drag: none; pointer-events: none; }
.cslide::after { /* shared grain + bottom scrim for legibility */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(22,30,42,0) 34%, rgba(22,30,42,.72) 62%, rgba(22,30,42,.96) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.12'/%3E%3C/svg%3E");
}
.cs__line { position: absolute; left: 22px; right: 22px; bottom: 26px; z-index: 2; margin: 0;
  font-family: "PT Serif", Georgia, serif; font-weight: 500; font-size: 21px; line-height: 1.24; letter-spacing: -.008em; color: #fff; text-wrap: pretty; }
.cs__line em { font-style: italic; color: #f3d39b; }
.cs__k { position: absolute; left: 22px; top: 20px; z-index: 2; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 8.5px; letter-spacing: .16em; text-transform: uppercase; color: rgba(251,247,242,.78); }

/* per-slide photo crops (judged against the composited slide) */
/* 16:9 video frames: shown at full frame height in the top of the slide so heads aren't clipped */
.cs--wide img  { height: 76%; -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent 100%); mask-image: linear-gradient(180deg, #000 70%, transparent 100%); }
.cs--rxo img   { object-position: 100% 50%; transform: scale(1.2); transform-origin: 82% 100%; }
.cs--jz2 img   { object-position: 50% 50%; }
.cs--q1sm img  { object-position: 50% 50%; }
.cs--og img    { object-position: 66% 30%; }
.cs--port img  { object-position: 50% 14%; }
.cs--tone img  { filter: saturate(.82) brightness(.9); }

/* slide 4: built graphic, a wall of his real thumbnails */
.cs--wall { background: #0b141f; }
.cs__wall { position: absolute; left: -30px; right: -30px; top: -10px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; transform: rotate(-6deg); }
.cs__wall img { position: static; width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: 4px; object-fit: cover; box-shadow: 0 6px 16px rgba(0,0,0,.45); }

/* slide 7: text CTA, no button */
.cs--cta { background: #161e2a; }
.cs--cta::after { background: radial-gradient(70% 50% at 50% 0%, rgba(0,194,203,.35), transparent 70%); }
.cs__cta { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0 26px; }
.cs__face { width: 74px; height: 74px; border-radius: 50%; overflow: hidden; border: 2px solid rgba(236,192,119,.7); margin-bottom: 16px; position: relative; }
.cs__face img { object-position: 50% 14%; }
.cs__eyebrow { margin: 0 0 10px; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 8.5px; letter-spacing: .16em; text-transform: uppercase; color: #ecc077; }
.cs__ctahead { margin: 0; font-family: "PT Serif", Georgia, serif; font-weight: 500; font-size: 22px; line-height: 1.2; color: #fff; text-wrap: balance; }
.cs__ctahead em { font-style: italic; color: #f3d39b; }
.cs__pills { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 6px; width: 100%; }
.cs__pills li { font-family: "PT Serif", Georgia, serif; font-size: 12.5px; line-height: 1.25; color: rgba(251,247,242,.9); padding: 7px 10px; border-radius: 8px; border: 1px solid rgba(251,247,242,.14); background: rgba(255,255,255,.04); }
.cs__when { margin: 16px 0 0; font-size: 12px; color: #fbf7f2; }
.cs__when b { font-weight: 600; }
.cs__bio { margin: 6px 0 0; font-size: 11px; color: rgba(251,247,242,.66); }