/* ==========================================================================
   Lady Rose Tarot — coming-soon.css
   Holding pages for destinations that are not live yet. Loads after
   styles.css and reuses its palette, buttons, washes and ink flicks.
   ========================================================================== */

html, body { min-height: 100%; }
body { overflow-x: hidden; }

.cs-top {
  position: relative;
  z-index: 3;
  display: flex;
  justify-content: center;
  padding: calc(env(safe-area-inset-top, 0px) + clamp(1.25rem, 4vh, 2.5rem)) var(--gutter) 0;
}
.cs-top a { display: block; border-radius: 6px; }
.cs-top img {
  width: min(70vw, 420px);
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
}

.cs {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  margin-top: calc(-1 * (env(safe-area-inset-top, 0px) + clamp(1.25rem, 4vh, 2.5rem) + 120px));
  padding: 215px var(--gutter) clamp(3rem, 8vh, 6rem);
  display: grid;
  place-items: center;
  overflow: clip;
}

/* Big, bold pigment: corners and sides, larger than on the main page */
.cs .wash { z-index: 0; }
.cs .wc { --s: min(48vw, 640px); }
.cs .wc--tl { left: -16vw; top: -14%; }
.cs .wc--tr { right: -16vw; top: -14%; }
.cs .wc--bl { left: -16vw; bottom: -16%; }
.cs .wc--br { right: -16vw; bottom: -16%; }
.cs .wc--l  { left: -18vw; top: 26%; }
.cs .wc--r  { right: -18vw; top: 26%; }
.cs .wc--tl-sm, .cs .wc--tr-sm, .cs .wc--bl-sm, .cs .wc--br-sm { --s: min(24vw, 320px); }
.cs .wc--tl-sm { left: 6%; top: 2%; }
.cs .wc--tr-sm { right: 6%; top: 2%; }
.cs .wc--bl-sm { left: 6%; bottom: 2%; }
.cs .wc--br-sm { right: 6%; bottom: 2%; }
.cs .ink { width: clamp(120px, 16vw, 260px); }
.cs .ink--tl { left: 4%; top: 6%; }
.cs .ink--tr { right: 4%; top: 6%; }
.cs .ink--bl { left: 5%; bottom: 8%; }
.cs .ink--br { right: 5%; bottom: 8%; }
.cs .ink.is-in { opacity: .7; }

/* The two paintings, either side of the message */
.cs-art {
  position: absolute;
  z-index: 1;
  bottom: 0;
  width: min(34vw, 460px);
  height: auto;
  filter: drop-shadow(0 20px 28px rgba(49,31,31,.22));
  transition: opacity 1.4s ease .5s, transform 1.8s var(--ease-out) .5s;
  pointer-events: none;
}
.cs-art--left  { left: max(-2vw, calc((100vw - 78rem) / 2 - 6vw)); }
.cs-art--right { right: max(-2vw, calc((100vw - 78rem) / 2 - 6vw)); transition-delay: .75s; }

/* Message on a paper panel */
.cs-panel {
  position: relative;
  z-index: 2;
  width: min(100%, 40rem);
  text-align: center;
  padding: clamp(2rem, 5vw, 3.5rem) clamp(1.5rem, 5vw, 3rem);
  background: rgba(244,243,236,.86);
  box-shadow:
    inset 0 0 0 1px rgba(49,31,31,.45),
    inset 0 0 0 6px rgba(244,243,236,.86),
    inset 0 0 0 7px rgba(156,117,63,.6),
    0 30px 50px -30px rgba(49,31,31,.55);
  border-radius: 2px;
  transition: opacity 1s ease .3s, transform 1.4s var(--ease-out) .3s;
}
/* Start hidden only when scripts can run to reveal them (coming-soon.js adds .is-in);
   with scripts off or failed, the message and paintings simply show. */
@media (scripting: enabled) {
  html:not(.is-in) .cs-art   { opacity: 0; transform: translateY(30px); }
  html:not(.is-in) .cs-panel { opacity: 0; transform: translateY(16px); }
}
.cs-panel .kicker { justify-content: center; }
.cs-panel .kicker::after { content: ""; width: 2.5rem; height: 1px; background: var(--gold-aged); }
.cs-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2rem, 1.4rem + 2.6vw, 3.4rem);
  line-height: 1.05;
  color: var(--wine);
  margin: .7rem 0 1.2rem;
  text-wrap: balance;
}
.cs-panel .lead { margin: 0 auto 1.6rem; max-width: 32rem; }
.cs-panel .cta-row { justify-content: center; }
.cs-panel .note { margin-top: 1.4rem; }

/* The stamp: a large version of the "Coming soon" tag on the buttons */
.stamp {
  display: inline-block;
  margin: .4rem 0 1.4rem;
  padding: .45em 1.1em .5em;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.6rem, 1rem + 3vw, 3.2rem);
  letter-spacing: .18em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--paper-light);
  background:
    radial-gradient(120% 140% at 50% 30%, #6b3538 0%, var(--wine) 55%, #43202a 100%);
  border-radius: 18px 5px 15px 6px / 6px 15px 5px 18px;
  box-shadow:
    inset 0 0 0 3px var(--wine),
    inset 0 0 0 4px rgba(215,183,142,.75),
    0 1px 0 rgba(49,31,31,.4),
    0 18px 30px -18px rgba(49,31,31,.7);
  transform: rotate(-4deg);
  animation: stamp-in .7s cubic-bezier(.2,.9,.3,1.3) .9s both;
}
@keyframes stamp-in {
  from { opacity: 0; transform: rotate(-4deg) scale(1.6); }
  70%  { opacity: 1; }
  to   { opacity: 1; transform: rotate(-4deg) scale(1); }
}

@media (max-width: 899px) {
  .cs { padding-top: 190px; padding-bottom: 14rem; }
  .cs-art { width: min(44vw, 300px); bottom: 0; }
  .cs-art--left  { left: -6vw; }
  .cs-art--right { right: -6vw; }
  .cs-panel { width: min(100%, 34rem); }
}
@media (max-width: 639px) {
  .cs { padding-bottom: 12rem; }
  .cs-art { width: 46vw; }
  .cs .wc { --s: min(64vw, 380px); }
}
@media (prefers-reduced-motion: reduce) {
  .cs-art, .cs-panel, html:not(.is-in) .cs-art, html:not(.is-in) .cs-panel { opacity: 1; transform: none; transition: none; }
  .stamp { animation: none; }
}

/* Long-form text pages (privacy): left-aligned prose in a wider panel */
.cs-panel.prose { width: min(100%, 46rem); text-align: left; }
.cs-panel.prose .kicker, .cs-panel.prose .cs-title { justify-content: flex-start; text-align: left; }
.cs-panel.prose .kicker::after { display: none; }
.cs-panel.prose h2 { font-family: var(--font-display); font-weight: 600; font-size: 1.35rem; color: var(--wine); margin: 1.6rem 0 .4rem; }
.cs-panel.prose p, .cs-panel.prose li { max-width: none; }
.cs-panel.prose ul { padding-left: 1.2rem; margin: 0 0 1.1em; }
.cs-panel.prose .cta-row { justify-content: flex-start; margin-top: 1.8rem; }