/* =====================================================================
   PaintedPoems polish pack (typography + spine branding + de-teal)
   ===================================================================== */

:root{
  /* unify typography + color language */
  --pp-bg: #070a12;
  --pp-text: rgba(245,247,255,.94);
  --pp-muted: rgba(220,228,245,.70);
  --pp-dim: rgba(220,228,245,.48);

  /* accent: deep galaxy blue -> soft silver (NO teal) */
  --pp-accent: rgba(140,170,255,.55);
  --pp-accent2: rgba(245,247,255,.16);

  --pp-radius: 22px;
}

/* ---- GLOBAL TYPOGRAPHY UNIFY (kills “multiple personalities”) ---- */
html, body{
  color: var(--pp-text);
  background: var(--pp-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: geometricPrecision;
}
body{
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}
h1,h2,h3,.title,.hero h1{
  font-family: ui-serif, Georgia, "Times New Roman", Times, serif;
  letter-spacing: .2px;
}
p, .muted, .sub, .hero p, .card p, nav, .nav a{
  color: var(--pp-muted);
}

/* remove stray teal markers/dots anywhere */
.dot, .teal, .accent, .chip-dot, .badge-dot, .spine .dot, .spine .mark, .spine .mark img{
  background: transparent !important;
  box-shadow: none !important;
}
.hero .kicker .dot,
.hero .kicker:before,
.hero .kicker:after{
  display:none !important;
}

/* ---- NAV polish (less “generic windows”) ---- */
nav, .nav, header .nav{
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
nav a, .nav a{
  letter-spacing: .14em;
  text-transform: uppercase;
  font-size: 12px;
  color: rgba(235,240,255,.80);
}
nav a:hover, .nav a:hover{
  color: rgba(245,247,255,.96);
}

/* ---- HERO frame: more “gallery” and less “app window” ---- */
.hero, .panel, .wrap, .container{
  border-radius: var(--pp-radius);
}
.hero .image, .hero .art, .hero figure{
  border-radius: 26px;
}
.hero .image img, .hero figure img{
  object-fit: contain !important; /* ensure NOTHING gets cut out */
  background: rgba(0,0,0,.18);
}

/* soften hard borders that feel “window-y” */
.hero, .panel, .card, .frame, .image, figure{
  border-color: rgba(255,255,255,.06) !important;
  box-shadow: 0 22px 80px rgba(0,0,0,.55) !important;
}

/* ---- BUTTON polish ---- */
button, .btn, a.button, .cta a{
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 14px 40px rgba(0,0,0,.50);
}
button:hover, .btn:hover, a.button:hover, .cta a:hover{
  border-color: rgba(255,255,255,.16);
}

/* =====================================================================
   SIGNATURE SPINE (no box, brand-aligned, elegant “gallery label”)
   ===================================================================== */

/* the spine container becomes an “overlay label”, not a sidebar box */
.spine{
  position:absolute;
  left: 18px;
  top: 28px;
  bottom: 28px;
  width: 72px;

  background: transparent !important;
  border: none !important;
  box-shadow: none !important;

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:space-between;
  pointer-events:none; /* purely decorative */
}

/* subtle vertical hairline to feel premium */
.spine::before{
  content:"";
  position:absolute;
  left: 50%;
  top: 10px;
  bottom: 10px;
  width: 1px;
  transform: translateX(-50%);
  background: linear-gradient(
    to bottom,
    rgba(255,255,255,0),
    rgba(245,247,255,.10),
    rgba(255,255,255,0)
  );
  filter: blur(.0px);
  opacity: .85;
}

/* logo placement: clean, small, “seal” style */
.spine .spine-logo{
  width: 28px;
  height: 28px;
  border-radius: 999px;
  margin-top: 6px;
  opacity: .92;
  filter: drop-shadow(0 10px 22px rgba(0,0,0,.55));
}

/* spine text: signature vibe + metallic gradient (no typewriter feel) */
.spine .sig{
  writing-mode: vertical-rl;
  transform: rotate(180deg);

  font-family: "Segoe Script", "Snell Roundhand", "Brush Script MT", "Lucida Handwriting", cursive;
  font-size: 18px;
  line-height: 1.0;

  letter-spacing: .06em;
  opacity: .90;

  /* metallic “gallery plaque ink” */
  color: transparent;
  background: linear-gradient(
    180deg,
    rgba(245,247,255,.92),
    rgba(200,210,235,.72),
    rgba(245,247,255,.88)
  );
  -webkit-background-clip: text;
  background-clip: text;

  text-shadow:
    0 1px 0 rgba(255,255,255,.08),
    0 10px 30px rgba(0,0,0,.55);
}

/* supporting text on spine: subtle + refined */
.spine .label{
  writing-mode: vertical-rl;
  transform: rotate(180deg);

  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(235,240,255,.55);
  text-shadow: 0 10px 30px rgba(0,0,0,.55);
}

/* hide any leftover spine UI widgets / teal pills */
.spine .mark, .spine .pill, .spine .chip, .spine .dot, .spine .badge{
  display:none !important;
}

/* ============================================================
   TEAL REFINED — gallery-grade, not UI teal
   ============================================================ */

:root{
  /* refined teal palette (deep ocean, not neon) */
  --pp-teal-main: rgba(80, 190, 185, .85);   /* primary accent */
  --pp-teal-soft: rgba(80, 190, 185, .45);   /* glow / hairline */
  --pp-teal-dim:  rgba(80, 190, 185, .18);   /* background hint */
}

/* --- Replace leftover teal dots with glow-based accents --- */
.dot, .chip-dot, .badge-dot{
  background: radial-gradient(
    circle,
    var(--pp-teal-main) 0%,
    transparent 65%
  ) !important;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  box-shadow: 0 0 14px var(--pp-teal-soft);
}

/* ============================================================
   SPINE — teal/silver patina, signature feel
   ============================================================ */

.spine::before{
  background: linear-gradient(
    to bottom,
    rgba(255,255,255,0),
    var(--pp-teal-soft),
    rgba(255,255,255,0)
  );
}

/* spine logo = gallery seal */
.spine .spine-logo{
  filter:
    drop-shadow(0 0 12px var(--pp-teal-soft))
    drop-shadow(0 10px 28px rgba(0,0,0,.6));
  opacity: .95;
}

/* signature text gets teal-metallic ink */
.spine .sig{
  background: linear-gradient(
    180deg,
    rgba(240,255,252,.95),
    var(--pp-teal-main),
    rgba(220,245,240,.9)
  );
  -webkit-background-clip: text;
  background-clip: text;

  text-shadow:
    0 1px 0 rgba(255,255,255,.08),
    0 12px 32px rgba(0,0,0,.65);
}

/* supporting spine label */
.spine .label{
  color: rgba(200,240,235,.65);
}

/* ============================================================
   HERO + CTA — teal used sparingly and intentionally
   ============================================================ */

.hero .kicker,
.hero .kicker span{
  color: var(--pp-teal-main);
}

button.primary,
.btn.primary,
.cta a.primary{
  border-color: var(--pp-teal-soft);
}

button.primary:hover,
.btn.primary:hover,
.cta a.primary:hover{
  box-shadow:
    0 0 0 1px var(--pp-teal-soft),
    0 18px 48px rgba(0,0,0,.55);
}

/* prevent teal bleed elsewhere */
nav a, .nav a{
  color: rgba(235,240,255,.82);
}

/* ============================================================
   REMOVE GREY — shift to ink + deep blue + teal atmosphere
   ============================================================ */

/* Global background correction */
body{
  background:
    radial-gradient(
      1200px 800px at 30% 20%,
      rgba(40,90,100,.18),
      rgba(5,10,20,.92)
    ),
    linear-gradient(
      180deg,
      rgba(10,18,30,.98),
      rgba(3,6,12,1)
    ) !important;
}

/* Main content panels */
.panel,
.section,
.hero,
.frame{
  background:
    linear-gradient(
      180deg,
      rgba(18,30,44,.92),
      rgba(6,10,18,.96)
    ) !important;
}

/* Kill grey overlays */
.panel::before,
.frame::before{
  background: none !important;
}

/* Hero image frame — cooler, richer edge */
.hero-image,
.art-frame{
  box-shadow:
    inset 0 0 0 1px rgba(120,200,195,.15),
    0 40px 90px rgba(0,0,0,.85);
}

/* Text contrast — no washed greys */
p, .subtext, .label{
  color: rgba(220,235,245,.82);
}

/* Secondary text */
.small, .meta{
  color: rgba(170,210,215,.55);
}

/* Navigation pills — remove grey plastic look */
nav, .nav{
  background:
    linear-gradient(
      180deg,
      rgba(12,20,32,.9),
      rgba(5,8,14,.95)
    ) !important;
}

/* Buttons stay dark but rich */
button, .btn{
  background:
    linear-gradient(
      180deg,
      rgba(20,32,48,.9),
      rgba(8,12,20,.95)
    );
}