/* =====================================================================
   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 bold line.
   Benny's colours: black #0b0b0c, white text, red #e3232b accent. One Inter line per slide.
   ===================================================================== */
.cstage { position: relative; overflow: hidden; touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: grab; background: #0b0b0c; }
.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: #0b0b0c; color: #f6f5f3; font-family: "Inter", 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(11,11,12,0) 34%, rgba(11,11,12,.74) 62%, rgba(11,11,12,.97) 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: "Inter", system-ui, sans-serif; font-weight: 700; font-size: 19.5px; line-height: 1.28; letter-spacing: -.015em; color: #fff; text-wrap: pretty; }
.cs__line em { font-style: normal; color: #ff4b52; }
.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(255,243,238,.78); }

.cslide .cs__k { color: #fff; text-shadow: 0 1px 8px rgba(0,0,0,.7); opacity: .9; }
/* per-slide photo crops (judged against the composited slide) */
.cs--beach img  { object-position: 30% 62%; }
.cs--laptop img { object-position: 42% 30%; }
.cs--thai img   { object-position: 50% 50%; }
.cs--wins img   { object-position: 0% 0%; height: 74%; -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent 100%); mask-image: linear-gradient(180deg, #000 70%, transparent 100%); }

/* slide 2: built graphic, Gary's 2009 website */
.cs--gary { background: #141416; }
.cs__gary { position: absolute; left: 22px; right: 22px; top: 40px; border-radius: 8px; overflow: hidden; background: #d4d0c8; box-shadow: 0 18px 40px rgba(0,0,0,.6); transform: rotate(-3deg); font-family: "Times New Roman", serif; color: #000; }
.g__bar { display: flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; background: #e8e8e8; border-bottom: 1px solid #bbb; font: 9px Arial; color: #555; }
.g__bar i { width: 7px; height: 7px; border-radius: 50%; background: #ff5f57; } .g__bar i:nth-child(2) { background: #febc2e; } .g__bar i:nth-child(3) { background: #28c840; } .g__bar span { margin-left: 6px; }
.g__head { background: #000080; color: #ffff00; text-align: center; padding: 12px 8px; font: bold 21px "Comic Sans MS", "Times New Roman", serif; }
.g__body { display: grid; gap: 8px; padding: 14px 14px 18px; font-size: 13px; line-height: 1.4; }
.g__body b { color: #c00; text-align: center; font-size: 11px; } .g__body u { color: #00e; }

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

/* slide 7: text CTA, no button */
.cs--cta { background: #0b0b0c; }
.cs--cta::after { background: radial-gradient(70% 50% at 50% 0%, rgba(227,35,43,.32), 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 24px; }
.cs__face { width: 74px; height: 74px; border-radius: 50%; overflow: hidden; border: 2px solid #e3232b; margin-bottom: 14px; position: relative; }
.cs__face img { object-position: 50% 12%; }
.cs__eyebrow { margin: 0 0 8px; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 8.5px; letter-spacing: .16em; text-transform: uppercase; color: #ff5a5f; }
.cs__ctahead { margin: 0; font-family: "Anton", Impact, sans-serif; font-weight: 400; text-transform: uppercase; font-size: 27px; line-height: 1.02; color: #fff; }
.cs__ctahead em { font-style: normal; color: #e3232b; }
.cs__pills { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 6px; width: 100%; }
.cs__pills li { display: flex; gap: 8px; align-items: center; text-align: left; font-size: 12px; font-weight: 600; line-height: 1.25; color: rgba(255,255,255,.92); padding: 8px 10px; border-radius: 8px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.04); }
.cs__pills li b { font-family: "Anton", Impact, sans-serif; font-weight: 400; color: #e3232b; font-size: 14px; }
.cs__when { margin: 14px 0 0; font-size: 12px; color: #f6f5f3; }
.cs__when b { font-weight: 700; color: #ff5a5f; }
.cs__bio { margin: 5px 0 0; font-size: 11px; color: rgba(255,255,255,.62); }