/* Phone-frame wrapper for press-kit screenshots.
   Each HTML file is a 1080×1920 poster — gradient bg, tagline at top,
   iPhone mockup in the middle, crema.live footer.
   The phone's interior renders the real app DOM using app.css, scaled up
   via transform so it looks identical to the app at phone proportions. */

html,
body.poster {
  margin: 0;
  padding: 0;
}

body.poster {
  width: 1080px;
  height: 1920px;
  min-height: 0; /* override app.css */
  overflow: hidden;
  background:
    radial-gradient(ellipse at top, rgba(217, 181, 128, 0.55), transparent 60%),
    radial-gradient(ellipse at bottom left, rgba(122, 62, 29, 0.14), transparent 55%),
    linear-gradient(180deg, #f0e6d2, #d8c8a8);
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  color: #2b1b12;
  position: relative;
}

/* Neutralize app.css body::before (would cover the whole poster). */
body.poster::before {
  display: none !important;
  content: none !important;
}

.poster-eyebrow {
  position: absolute;
  top: 84px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 26px;
  font-weight: 600;
  letter-spacing: 0.15em;
  color: #7a3e1d;
  text-transform: uppercase;
  margin: 0;
}

.poster-title {
  position: absolute;
  top: 138px;
  left: 0;
  right: 0;
  text-align: center;
  font-family: "Fraunces", Georgia, serif;
  font-weight: 500;
  font-size: 60px;
  letter-spacing: -0.015em;
  color: #2b1b12;
  margin: 0;
  padding: 0 40px;
}

.poster-url {
  position: absolute;
  bottom: 76px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 22px;
  font-weight: 500;
  letter-spacing: 0.2em;
  color: #7a3e1d;
  text-transform: uppercase;
  margin: 0;
}

/* Phone device */
.phone {
  position: absolute;
  top: 280px;
  left: 50%;
  transform: translateX(-50%);
  width: 640px;
  height: 1380px;
  border-radius: 124px;
  background: #1a0f09;
  padding: 12px;
  box-shadow:
    0 40px 80px -20px rgba(43, 27, 18, 0.45),
    0 10px 30px -10px rgba(43, 27, 18, 0.25),
    inset 0 0 0 2px #3a2818;
}

.phone-screen {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 114px;
  background: #f4ede0;
  overflow: hidden;
}

.phone-notch {
  position: absolute;
  top: 22px;
  left: 50%;
  transform: translateX(-50%);
  width: 184px;
  height: 44px;
  border-radius: 22px;
  background: #0a0604;
  z-index: 30;
  pointer-events: none;
}

.status-bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 78px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 26px 50px 0;
  font-size: 22px;
  font-weight: 600;
  color: #2b1b12;
  z-index: 25;
  pointer-events: none;
  font-family: "Inter", system-ui, sans-serif;
}

.status-bar .s-icons {
  display: inline-flex;
  gap: 8px;
  align-items: center;
}

/* Stage: area below the status bar. We render the real app DOM
   inside .stage-inner and scale it up via transform.
   Because .stage-inner has `transform`, it becomes the containing block
   for any fixed descendants — so app.css's `.nav { position: fixed }`
   and `.masthead { position: sticky }` anchor to the phone, not the
   poster's window. */
.stage {
  position: absolute;
  top: 78px;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  background:
    radial-gradient(ellipse at top, rgba(217, 181, 128, 0.35), transparent 60%),
    radial-gradient(ellipse at bottom left, rgba(122, 62, 29, 0.12), transparent 55%),
    #f4ede0;
}

.stage-inner {
  width: 400px;
  height: 828px;
  transform-origin: top left;
  transform: scale(1.54);
  position: relative;
  overflow: hidden;
  background: transparent;
}

/* app.css sets body overflow-x/position/background. Those styles apply
   to body.poster but we've already overridden. For the DOM inside
   .stage-inner we want the app.css rules on descendants (.view, .card,
   .nav, .masthead, etc.) to work unchanged. No further overrides needed. */