/* ════════════════════════════════════════════════════════════════
   dollbite · "moonlit boudoir" — dark feminine dreamlike soft-gothic.
   blackberry/plum base · dusty violet mids · faint lavender highlights.
   layered atmospheric depth, velvet, haze, soft grain. never pure white.
   (visual restyle only — layout & components unchanged.)
   Fraunces display · Cormorant Garamond body. iOS-first.
   ════════════════════════════════════════════════════════════════ */

:root{
  --ink:#1b1024;          /* deepest blackberry base */
  --ink-2:#21112d;
  --card:#2a1840;         /* dark plum card */
  --card-2:#342046;
  --plum:#47305f;         /* mid plum — velvet borders/depth */
  --rose:#9a7fb5;         /* muted dusty-violet accent (links/cta) */
  --rose-deep:#7a5b88;
  --orchid:#b6a4ca;       /* soft lavender highlight */
  --blush:#cabbdf;        /* faint lavender (gentle accent) */
  --bone:#d9d0e4;         /* primary tinted text (never white) */
  --bone-dim:#c2b4d4;     /* muted */
  --bone-faint:#8a78a0;   /* faintest */
  --line:rgba(217,208,228,.10);
  --line-2:rgba(182,164,202,.22);
  --shadow:rgba(9,4,16,.6);
  --max:640px;
  --ease:cubic-bezier(.4,.18,.2,1);   /* slow, soft */
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
html,body{margin:0;padding:0}
a{color:var(--rose);text-decoration:none}

body{
  min-height:100svh;color:var(--bone);
  font-family:"Cormorant Garamond",Georgia,serif;font-size:18px;line-height:1.5;
  /* never flat — layered translucent plum, side bloom, bottom glow, vignette */
  background:
    radial-gradient(120% 80% at 50% -8%, rgba(86,64,109,.45), transparent 58%),
    radial-gradient(85% 55% at 86% 26%, rgba(71,48,95,.40), transparent 70%),
    radial-gradient(95% 65% at 50% 118%, rgba(122,91,136,.26), transparent 62%),
    radial-gradient(140% 120% at 50% 42%, transparent 52%, rgba(11,5,19,.55) 100%),
    linear-gradient(180deg, #21112d 0%, #1b1024 46%, #150c1d 100%);
  background-attachment:fixed;overflow-x:hidden;
}
/* slow breathing moonlight haze (behind everything) */
body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(58% 42% at 50% 16%, rgba(150,127,176,.16), transparent 72%);
  animation:breathe 16s ease-in-out infinite}
.grain{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.05;mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%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)'/%3E%3C/svg%3E");}
.site{position:relative;z-index:2;max-width:var(--max);margin:0 auto;
  padding-bottom:max(40px,env(safe-area-inset-bottom))}
::selection{background:var(--plum);color:var(--bone)}

/* ───────── sign in (top-right) ───────── */
.signin{position:fixed;z-index:45;top:calc(12px + env(safe-area-inset-top));right:calc(14px + env(safe-area-inset-right));
  display:inline-flex;align-items:center;gap:.4em;padding:8px 16px;border-radius:999px;
  font-size:.9rem;letter-spacing:.06em;text-transform:lowercase;color:var(--bone-dim);
  background:rgba(42,24,64,.55);border:1px solid var(--line-2);
  -webkit-backdrop-filter:blur(12px) saturate(.9);backdrop-filter:blur(12px) saturate(.9);
  transition:color .5s var(--ease),border-color .5s var(--ease)}
.signin:hover,.signin:focus-visible{color:var(--orchid);border-color:var(--rose-deep);outline:none}

/* ───────── hero ───────── */
.hero{padding:calc(58px + env(safe-area-inset-top)) 26px 34px;text-align:center}
.hero > *{opacity:0;animation:rise 1.2s var(--ease) forwards}
.hero__brand{margin:0 0 16px;font-weight:500;letter-spacing:.4em;text-indent:.4em;
  text-transform:uppercase;font-size:.7rem;color:var(--blush);opacity:.8;animation-delay:.05s}
.wordmark{margin:0;font-family:"Fraunces",serif;font-optical-sizing:auto;font-weight:600;font-style:italic;
  font-size:clamp(2.9rem,14vw,4.6rem);line-height:.9;letter-spacing:-.015em;color:var(--bone);
  text-shadow:0 0 42px rgba(182,164,202,.28),0 12px 40px rgba(0,0,0,.5);animation-delay:.16s}
.tagline{margin:.55em 0 0;font-size:1.22rem;color:var(--bone-dim);animation-delay:.3s}
.tagline em{font-style:italic;color:var(--blush)}

/* ───────── about ───────── */
.panel{padding:6px 26px 30px;text-align:center}
.aboutText{margin:0 auto .5em;max-width:34ch;font-size:1.22rem;line-height:1.55;color:var(--bone)}
.aboutText em{font-style:italic;color:var(--blush)}
.subcopy{margin:0;color:var(--bone-faint);font-style:italic;font-size:1.04rem}

/* ───────── feed ───────── */
.feed{padding-top:18px}
.panelHead{display:flex;align-items:center;gap:14px;margin:0 26px 16px}
.panelTitle{font-family:"Fraunces",serif;font-style:italic;font-weight:500;font-size:1.4rem;
  color:var(--blush);white-space:nowrap}
.panelRule{flex:1;height:1px;background:linear-gradient(90deg,var(--line-2),transparent)}
.photosGrid{display:flex;flex-direction:column;gap:6px}

.photoItem{position:relative;margin:0;overflow:hidden;background:#120a1c;animation:rise 1s var(--ease) both}
.photoImg{display:block;width:100%;height:auto;vertical-align:bottom}
.photoCaption{position:absolute;left:0;right:0;bottom:0;padding:46px 20px 16px;
  background:linear-gradient(to top, rgba(13,7,22,.88), rgba(13,7,22,.4) 55%, transparent);
  font-style:italic;font-size:1.1rem;color:var(--bone)}
.photoCaption::before{content:"⟡ ";color:var(--orchid);font-style:normal}

.textPost{margin:14px 16px;padding:26px 24px;border-radius:18px;
  background:linear-gradient(180deg, rgba(42,24,64,.85), rgba(52,32,70,.7));
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  border:1px solid var(--line);border-left:3px solid var(--plum);box-shadow:0 18px 44px var(--shadow)}
.textBody{margin:0;font-family:"Fraunces",serif;font-style:italic;font-weight:500;
  font-size:1.42rem;line-height:1.4;color:var(--bone)}
.textPost::after{content:"⟡";display:block;margin-top:14px;color:var(--blush);opacity:.6;font-size:1rem}

.photoLocked{cursor:pointer}
.photoLocked .photoImg{filter:blur(22px) saturate(.7) brightness(.6);transform:scale(1.08)}
.lockOverlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  background:radial-gradient(circle at 50% 45%, rgba(27,16,36,.25), rgba(27,16,36,.6));transition:opacity .7s var(--ease)}
.lockOverlay::after{content:"tap to peek";letter-spacing:.16em;text-transform:uppercase;font-size:.68rem;color:var(--blush)}
.lockIcon{width:40px;height:40px;color:var(--orchid);filter:drop-shadow(0 4px 16px rgba(182,164,202,.4))}
.feedError{text-align:center;color:var(--bone-faint);font-style:italic;padding:26px}

/* ───────── footer ───────── */
.footer{margin-top:54px;padding:28px 26px calc(30px + env(safe-area-inset-bottom));
  display:flex;justify-content:center;border-top:1px solid var(--line)}
.footerMark{color:var(--bone-faint);font-size:.9rem;letter-spacing:.08em;transition:color .5s var(--ease)}
.footerMark:hover{color:var(--blush)}

/* ───────── floating dock (bottom-left, always visible) ───────── */
.dock{position:fixed;z-index:40;left:max(16px,env(safe-area-inset-left));
  bottom:calc(16px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:10px}
.dockBtn{display:grid;place-items:center;width:48px;height:48px;padding:0;border-radius:50%;
  border:1px solid var(--line-2);cursor:pointer;color:var(--bone-dim);background:rgba(42,24,64,.6);
  -webkit-backdrop-filter:blur(12px) saturate(.9);backdrop-filter:blur(12px) saturate(.9);box-shadow:0 8px 24px var(--shadow);
  transition:color .5s var(--ease),border-color .5s var(--ease),transform .5s var(--ease)}
.dockBtn svg{width:22px;height:22px}
.dockBtn:hover,.dockBtn:focus-visible{color:var(--orchid);border-color:var(--rose-deep);transform:translateY(-2px);outline:none}
.dockBtn.is-copied{color:var(--orchid);border-color:var(--rose-deep)}

/* ───────── toast ───────── */
.toast{position:fixed;left:50%;bottom:calc(22px + env(safe-area-inset-bottom));
  transform:translateX(-50%) translateY(14px);z-index:60;padding:11px 20px;border-radius:999px;
  background:linear-gradient(180deg,var(--plum),var(--rose-deep));color:var(--bone);font-weight:600;font-size:.95rem;
  letter-spacing:.04em;box-shadow:0 14px 34px var(--shadow);opacity:0;pointer-events:none;
  transition:opacity .5s var(--ease),transform .5s var(--ease)}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
@keyframes breathe{0%,100%{opacity:.65;transform:scale(1)}50%{opacity:1;transform:scale(1.05)}}
@keyframes drift{from{transform:scale(1.06) translateY(0)}to{transform:scale(1.16) translateY(-2.5%)}}

@media(min-width:660px){
  .photoItem{border-radius:18px}
  .photoItem:not(.textPost){box-shadow:0 18px 44px var(--shadow)}
  .photosGrid{gap:14px}
  .dockBtn{width:50px;height:50px}
}
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
  .hero > *{opacity:1}
  body::before{animation:none}
}