/* cylinder-carousel showpiece: ClipCut kit (warm near-black, molten orange glow, Inter Tight + Bricolage). */
:root {
  --paper: #090401;
  --ink: #ffffff;
  --ink-80: rgba(255, 255, 255, .8);
  --ink-60: rgba(255, 255, 255, .6);
  --orange: #fa6114;
  --orange-hi: #ff6a00;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--paper); color: var(--ink);
  font: 400 17px/1.5 "Bricolage Grotesque", system-ui, sans-serif; letter-spacing: -.02em;
  overflow: hidden; -webkit-font-smoothing: antialiased;
}
.room {
  position: relative; height: 100svh; min-height: 560px; overflow: clip;
  display: grid; align-content: center; justify-items: center; row-gap: clamp(36px, 6.5vh, 84px);
  padding: 40px 0;
}
/* the planet-edge glow under the reel */
.glow {
  position: absolute; left: 50%; bottom: -50vh; width: 150vw; height: 84vh; translate: -50% 0; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(250, 97, 20, .55), rgba(232, 80, 26, .22) 55%, rgba(250, 97, 20, 0) 100%);
  filter: blur(10px); pointer-events: none;
}
.glow::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  box-shadow: 0 -2px 0 rgba(255, 170, 110, .55), 0 -18px 60px rgba(250, 97, 20, .5);
  clip-path: inset(0 0 60% 0);
}
.head { position: relative; z-index: 2; text-align: center; padding: 0 16px; }
.tag {
  display: inline-flex; align-items: center; gap: 10px; margin: 0 0 18px;
  font-size: 15px; color: var(--ink-80); letter-spacing: -.01em;
}
.tag span { width: 14px; height: 1px; background: var(--ink-60); }
h1 {
  margin: 0; font: 500 clamp(40px, 6.4vw, 72px)/1.05 "Inter Tight", system-ui, sans-serif; letter-spacing: -.035em;
}
h1 em { font-style: normal; color: var(--orange-hi); }

.cyl {
  position: relative; z-index: 1; width: 100%; align-self: center;
  --cyl-scale: 2; --cyl-w: 270px; --cyl-h: 348px; --cyl-corner: 18px;
  margin: calc(-56px * var(--cyl-scale)) 0;     /* the far wall is half the rotor's height: take back the empty band */
}
.cyl__panel {
  background: #100b08;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06);
}
.cyl__panel img { object-position: 50% 0; }
.cyl__panel::after {      /* a hairline of light on each panel's edge */
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
}

.btn {
  position: relative; z-index: 2; display: inline-block; padding: 15px 28px; border-radius: 100px;
  background: var(--orange); color: #fff; text-decoration: none; font: 500 17px/1 "Bricolage Grotesque", sans-serif;
  box-shadow: inset 0 -2px 2px rgba(255, 255, 255, .5), 0 10px 30px rgba(250, 97, 20, .35);
}

@media (max-width: 600px) {
  .room { min-height: 640px; }
  .cyl { --cyl-scale: .82; }
  h1 { font-size: 40px; }
}