/* ============================================================================
   DAYDREAM (daydream-fade), deployed page styles (Link-in-bio category): ONE
   sunlit portrait that FADES into a warm white page. Phone: the photo fills
   the top of the screen (height from --dd-hero-h, inline from
   daydream.heroHeight) and dissolves downward into the page colour
   (--dd-canvas); the content column overlaps the fade by 47px and is
   centered: muted handle, serif name (Instrument Serif) + the house verified
   badge, muted bio, ONE accent pill CTA (featured, no image: title left,
   price right), full-width soft pills for simple links, soft rounded cards
   for featured-with-image / image-card / gallery / media, and the
   "aftercare" row (44px muted social circles left, "Made with Bouncy"
   right). Desktop: the portrait pins to the LEFT 60% of the window at full
   height and fades sideways into the page; the content column sits on the
   right, left aligned, centered when short and scrolling past the pinned
   photo when long. Tokens ride .dd-root: --dd-canvas, --dd-accent and
   --dd-hero-h come inline from the client's normalizeDaydream; every
   surface derives from them here (color-mix), so recolouring the accent
   recolours the pills too. Instrument Serif (display) + Inter (body), loaded
   by the baked HTML's fonts link. Motion: one ease, a 280ms rise cascade on
   the blocks, 120ms presses, full reduced-motion kill switch. Entrance
   animations fill BACKWARDS so the hover/active transforms survive them
   (snap lesson). Faithful port of the dd- block in
   src/pages/NewEditor/NewEditor.css; KEEP IN PARITY with that block and with
   DaydreamPreview.jsx (the markup contract, .claude/tasks/DAYDREAM.md).
   Markup contract (the client emits exactly these classes):
     page      main.dd-root > .dd-page > .dd-hero + .dd-content > .dd-stack >
               .dd-section.is-<id>
     hero      .dd-hero (+ .is-washed .is-empty) > .dd-hero-photo (+ .dd-hero-empty)
               + .dd-hero-fade
     identity  .dd-identity .dd-handle .dd-name (+ badge img) .dd-bio
     links     .dd-links .dd-item.is-<type> (+ .pc-anim-*) > .dd-cta (.dd-cta-title
               .dd-cta-price) | .dd-pill (.dd-pill-title) | .dd-card (.dd-card-media
               .dd-card-empty .dd-card-copy .dd-card-title .dd-card-sub) | .dd-photo
               (+ .is-empty; .dd-photo-media .dd-photo-empty .dd-photo-fade
               .dd-photo-copy .dd-photo-title .dd-photo-sub) | .dd-gallery
               (.dd-gallery-title .dd-gallery-grid .dd-tile .dd-tile-photo
               .dd-tile-empty .dd-tile-caption) | .dd-media (+ .is-<platform>;
               .dd-media-frame .dd-media-placeholder .dd-media-copy .dd-media-title
               .dd-media-caption) | .dd-label | .dd-text | .dd-divider
               (+ .dd-divider-chars)
     socials   .dd-aftercare (+ .is-centered) > .dd-socials > .dd-social (+ .is-badge
               .is-disabled) [+ footer.dd-footer], then .ne-fpill as a sibling
     footer    .dd-footer (+ .is-solo) a.dd-footer-brand;  empty  .dd-empty -title -sub
     18+       .has-adult-warning host + .dd-adult-inline family; .bncy-sgate-*
   Page-context differences from the editor preview (everything else verbatim):
   - the DOCUMENT scrolls at every width. The editor's .dd-scroll was
     EDITOR-STRUCTURAL plumbing and does not exist here: main.dd-root >
     .dd-page > .dd-hero + .dd-content is the whole tree. The root is the
     full-width page (min-height 100svh, 100vh fallback) and a flex column,
     so .dd-page can grow to the fold (flex: 1 0 auto replaces the editor's
     min-height: 100%). On the phone the hero stays IN FLOW at --dd-hero-h,
     exactly as the editor lays it out.
   - DESKTOP is @media (min-width: 850px), replacing the editor's
     .ne-browser-viewport.is-cover-stack host prefix. The hero is position:
     FIXED there (the editor pinned it with position: absolute against its
     non-scrolling root; here the document scrolls, so fixed is what keeps
     the portrait put while the column scrolls past it), z-index 0 under the
     z-index 1 content inside the root's isolated stacking context. The root
     keeps NO transform/filter/overflow EVER, so that hero and the position:
     fixed .bncy-sgate overlay (mounted inside the root) stay viewport-true.
   - editor-only affordances are dropped: the .is-selected outline, the drag
     cursors on .dd-item and .dd-social, and the selection cursor: pointer
     on furniture (hero, identity, footer, empty state). Interactive blocks
     (cta, pill, card, photo, social) keep their pointer because gated 18+
     blocks render as span wrappers (no href, UA gives them no cursor).
   - real safe-area terms ride the column's bottom padding (the editor frame
     needed none); the narrow-phone tightening is the @media (max-width:
     359px) block.
   - the verified mark is the house badge img (/assets/bouncy-verified-badge
     .svg) inside .dd-name; the client sizes it inline at 0.5em, the rule
     here is the fallback.
   - Palette custom properties arrive inline on .dd-root from the client:
     --dd-canvas, --dd-accent, --dd-hero-h; the client ALSO sets --dd-canvas
     on <html> (snap --sn-tint precedent) so overscroll shows the picked page
     colour, the literal fallback below is the default warm white.
   VERSION: 1.1
   ========================================================================== */

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; color-scheme: light; }
/* the floor under the page: the page colour (inline on <html> when the
   client sets it, else the default warm white), visible on phone overscroll
   and behind the fixed desktop hero only */
html, body { margin: 0; padding: 0; background: var(--dd-canvas, #faf8f5); }
body {
  min-height: 100%;
  min-width: 320px;
  color: #514b48;
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; }
/* client utility (scene convention): hard-hide toggled nodes */
.dd-hidden { display: none !important; }
/* keyboard focus ring (deploy-only accessibility, canvas convention): the
   accent, offset off the block so it reads on the canvas, the soft pills and
   the accent CTA alike */
.dd-root :focus-visible {
  outline: 3px solid var(--dd-accent);
  outline-offset: 3px;
}

/* ---- Root + tokens: the page itself. Flex column so .dd-page can grow to
   the fold. NO transform/filter/overflow here EVER (the desktop hero and
   the social gate are position: fixed descendants). ---- */
.dd-root {
  --dd-canvas: #faf8f5;
  --dd-accent: #91667b;
  --dd-hero-h: 440px;
  --dd-ink: #514b48;
  --dd-muted: #78706c;
  --dd-surface: color-mix(in srgb, var(--dd-accent) 11%, var(--dd-canvas));
  --dd-surface-strong: color-mix(in srgb, var(--dd-accent) 18%, var(--dd-canvas));
  --dd-line: color-mix(in srgb, var(--dd-ink) 12%, transparent);
  --dd-shadow: 0 7px 20px color-mix(in srgb, var(--dd-accent) 13%, transparent);
  --dd-shadow-hover: 0 8px 23px color-mix(in srgb, var(--dd-accent) 20%, transparent);
  --dd-radius: 22px;
  --dd-display: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  --dd-body: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --dd-ease: cubic-bezier(0.2, 0, 0, 1);
  --dd-quick: 120ms;
  /* contact blocks (blocks/contactBlocks.css) inherit the Daydream look */
  --bc-ink: var(--dd-ink);
  --bc-muted: var(--dd-muted);
  --bc-bg: var(--dd-surface);
  --bc-bg-strong: #ffffff;
  --bc-border: var(--dd-line);
  --bc-accent: var(--dd-accent);
  --bc-accent-ink: #ffffff;
  --bc-radius: var(--dd-radius);
  --bc-field-radius: 999px;
  --bc-display: var(--dd-display);
  --bc-body: var(--dd-body);
  --bc-pill-bg: var(--dd-surface);
  --bc-pill-ink: var(--dd-ink);
  --bc-pill-radius: 999px;
  --bc-pill-font: var(--dd-body);
  position: relative;
  /* own stacking context: keeps the z 0 desktop hero under the z 1 content
     without a containing-block side effect (unlike transform/filter/contain,
     isolation leaves fixed descendants viewport-true) */
  isolation: isolate;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 100vh;
  min-height: 100svh;
  background: var(--dd-canvas);
  font-family: var(--dd-body);
  color: var(--dd-ink);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
/* the prototype relied on a global border-box; the skin declares it so
   padded boxes never overflow their 100% */
.dd-root, .dd-root * { box-sizing: border-box; }
.dd-root ::selection { background: var(--dd-accent); color: #ffffff; }
/* anchor blocks never underline, whatever a host reset does (the deployed
   page must not depend on the base a reset above) */
.dd-cta, .dd-pill, .dd-card, .dd-photo { text-decoration: none; }

/* ---- The page: hero + content column, grows to the fold so the desktop
   column can center beside the pinned portrait ---- */
.dd-page {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
}

/* ---- The portrait: fixed height on the phone (in flow), the photo under a
   downward fade into the page colour ---- */
.dd-hero {
  position: relative;
  flex: none;
  width: 100%;
  height: var(--dd-hero-h);
  background: var(--dd-canvas);
}
.dd-hero-photo { position: absolute; inset: 0; overflow: hidden; }
.dd-hero-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* focal point + crop scale come inline from daydream.photo */
}
/* the sunlit wash (daydream.wash) */
.dd-hero.is-washed .dd-hero-photo img { filter: saturate(0.72) brightness(1.05); }
/* no photo: a soft accent-tinted block, so the top of the page still reads
   as "the portrait goes here" */
.dd-hero-empty {
  background: linear-gradient(160deg,
    color-mix(in srgb, var(--dd-accent) 28%, var(--dd-canvas)) 0%,
    color-mix(in srgb, var(--dd-accent) 10%, var(--dd-canvas)) 100%);
}
.dd-hero-fade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg,
    transparent 54%,
    color-mix(in srgb, var(--dd-canvas) 22%, transparent) 68%,
    var(--dd-canvas) 99%);
}
/* ---- The content column, pulled up over the fade. Real safe-area terms
   ride the bottom padding (the editor frame faked none). ---- */
.dd-content {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 460px;
  margin: -47px auto 0;
  padding: 0 24px max(14px, env(safe-area-inset-bottom, 0px));
  /* light follower pill (shared .ne-fpill themed via --fp-*), centered
     under the socials */
  --fp-margin: 10px auto 0;
  --fp-bg: var(--dd-surface);
  --fp-border: 1px solid transparent;
  --fp-border-hover: var(--dd-line);
  --fp-text: var(--dd-ink);
  --fp-muted: var(--dd-muted);
  --fp-radius: 999px;
}
.dd-stack { display: flex; flex-direction: column; width: 100%; }
.dd-section { position: relative; width: 100%; }

/* ---- Identity: handle, serif name + badge, bio; centered on the phone ---- */
.dd-identity { text-align: center; }
.dd-handle {
  margin: 0 0 7px;
  color: var(--dd-muted);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.dd-name {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0;
  font-family: var(--dd-display);
  font-size: var(--dd-name-size, 42px);
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: -0.035em;
  color: var(--dd-ink);
  overflow-wrap: anywhere;
  text-wrap: balance;
}
.dd-name > span { min-width: 0; }
/* the verified mark: the house badge img (bouncy-verified-badge.svg) sized
   to the name (the client's inline 0.5em wins; this is the fallback) */
.dd-name img { width: 0.5em; height: 0.5em; flex: none; }
.dd-bio {
  max-width: 290px;
  margin: 10px auto 0;
  color: var(--dd-muted);
  font-size: 13px;
  line-height: 1.5;
  text-wrap: balance;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* ---- Links: ONE column; the CTA keeps the prototype's extra 3px before
   the pills ---- */
.dd-links {
  display: flex;
  flex-direction: column;
  gap: 7px;
  width: 100%;
  margin-top: 21px;
}
.dd-section.is-links:first-child .dd-links { margin-top: 0; }
.dd-item { position: relative; width: 100%; min-width: 0; }
.dd-item.is-featured + .dd-item { margin-top: 3px; }
/* entrance cascade rides the INNER block (the wrapper stays animation-free
   so pc-anim-* can ride it); backwards fill so hover/active survive it */
.dd-item > * { animation: dd-rise 280ms var(--dd-ease) 70ms backwards; }
.dd-item:nth-child(2) > * { animation-delay: 95ms; }
.dd-item:nth-child(3) > * { animation-delay: 120ms; }
.dd-item:nth-child(4) > * { animation-delay: 145ms; }
.dd-item:nth-child(5) > * { animation-delay: 170ms; }
.dd-item:nth-child(n+6) > * { animation-delay: 195ms; }

/* ---- The CTA (featured, no image): ONE accent pill, title left, price
   right. Custom colours ride --dd-cta-bg / --dd-cta-ink (inline from
   link.colors.background / .title) so the hover shade follows them ---- */
.dd-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 60px;
  padding: 11px 19px;
  border-radius: 999px;
  background: var(--dd-cta-bg, var(--dd-accent));
  color: var(--dd-cta-ink, #ffffff);
  box-shadow: var(--dd-shadow);
  font-size: 14px;
  font-weight: 650;
  line-height: 1.2;
  cursor: pointer;
  transition: transform var(--dd-quick) var(--dd-ease), background-color var(--dd-quick) ease, box-shadow var(--dd-quick) ease;
}
.dd-cta:hover {
  background: color-mix(in srgb, var(--dd-cta-bg, var(--dd-accent)) 88%, var(--dd-ink));
  box-shadow: var(--dd-shadow-hover);
}
.dd-cta:active { transform: scale(0.985); box-shadow: 0 2px 6px color-mix(in srgb, var(--dd-accent) 10%, transparent); }
.dd-cta-title { min-width: 0; overflow-wrap: anywhere; }
.dd-cta-price { flex-shrink: 0; font-size: 12px; font-weight: 450; white-space: nowrap; opacity: 0.92; }

/* ---- Simple links: full-width soft pills ---- */
.dd-pill {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 45px;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--dd-surface);
  color: var(--dd-ink);
  font-size: 13px;
  font-weight: 550;
  line-height: 1.25;
  text-align: center;
  overflow-wrap: anywhere;
  cursor: pointer;
  transition: transform var(--dd-quick) var(--dd-ease), background-color var(--dd-quick) ease;
}
.dd-pill:hover { background: var(--dd-surface-strong); }
.dd-pill:active { transform: scale(0.985); }

/* Optional link marks leave the photo and no-icon spacing unchanged. */
.dd-link-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin-inline-end: 8px;
  vertical-align: -3px;
  line-height: 1;
  font-size: 11px;
  letter-spacing: 0;
  text-transform: none;
}
.dd-link-icon > img { display: block; width: 18px; height: 18px; object-fit: contain; }
/* the title span inside the pill; its typography comes inline (explicit so
   the dd- contract enumerates every emitted class) */
.dd-pill-title { min-width: 0; }

/* ---- Featured WITH image: a soft rounded card, the image at EXACTLY
   2.35 / 1 (the featured crop stage) dissolving into the card surface,
   title + subtitle below ---- */
.dd-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  border-radius: var(--dd-radius);
  overflow: hidden;
  background: var(--dd-surface);
  color: var(--dd-ink);
  cursor: pointer;
  transition: transform 200ms var(--dd-ease), box-shadow 200ms ease;
}
.dd-card:hover { transform: translateY(-2px); box-shadow: var(--dd-shadow); }
.dd-card:active { transform: scale(0.99); }
.dd-card-media {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 2.35 / 1;
  overflow: hidden;
  background: var(--dd-surface-strong);
}
.dd-card-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* the bottom of the banner melts into the card surface (the hero idiom) */
.dd-card-media::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 62%, var(--dd-surface) 100%);
}
.dd-card-empty {
  background: linear-gradient(160deg,
    color-mix(in srgb, var(--dd-accent) 24%, var(--dd-canvas)) 0%,
    color-mix(in srgb, var(--dd-accent) 10%, var(--dd-canvas)) 100%);
}
.dd-card-media > .dd-card-empty { position: absolute; inset: 0; }
.dd-card-copy {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  min-height: 46px;
  padding: 8px 18px 14px;
}
.dd-card-title {
  min-width: 0;
  font-family: var(--dd-display);
  font-size: 21px;
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.1;
  overflow-wrap: anywhere;
}
.dd-card-sub {
  flex: 0 1 auto;
  max-width: 42%;
  color: var(--dd-muted);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.3;
  text-align: right;
  overflow-wrap: anywhere;
}

/* ---- Image card ("full bleed" photo card): the image at 4 / 3 (its crop
   stage) with the title over a fade into the page colour ---- */
.dd-photo {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: var(--dd-radius);
  overflow: hidden;
  background: var(--dd-surface-strong);
  color: var(--dd-ink);
  cursor: pointer;
  transition: transform 200ms var(--dd-ease), box-shadow 200ms ease;
}
.dd-photo:hover { transform: translateY(-2px); box-shadow: var(--dd-shadow); }
.dd-photo:active { transform: scale(0.99); }
.dd-photo-media { display: block; width: 100%; height: 100%; object-fit: cover; }
.dd-photo-empty {
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg,
    color-mix(in srgb, var(--dd-accent) 26%, var(--dd-canvas)) 0%,
    color-mix(in srgb, var(--dd-accent) 10%, var(--dd-canvas)) 100%);
}
.dd-photo-fade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg,
    transparent 46%,
    color-mix(in srgb, var(--dd-canvas) 30%, transparent) 66%,
    var(--dd-canvas) 100%);
}
.dd-photo-copy {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 13px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.dd-photo-title {
  font-family: var(--dd-display);
  font-size: 25px;
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.05;
  overflow-wrap: anywhere;
}
.dd-photo-sub { color: var(--dd-muted); font-size: 12px; font-weight: 500; }

/* ---- Gallery: rounded square tiles; columns from --dd-gallery-columns
   (inline, clamped by the client) ---- */
.dd-gallery { display: flex; flex-direction: column; gap: 9px; width: 100%; }
.dd-gallery-title {
  color: var(--dd-muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-align: center;
  text-transform: uppercase;
}
.dd-gallery-grid {
  display: grid;
  grid-template-columns: repeat(var(--dd-gallery-columns, 2), minmax(0, 1fr));
  gap: 8px;
}
.dd-tile { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.dd-tile-photo {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 16px;
  overflow: hidden;
  background: var(--dd-surface);
}
.dd-tile-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* the empty well is the photo box ITSELF (one element carries both classes),
   so it stays in flow at 1:1; only a nested placeholder is absolute */
.dd-tile-empty {
  background: linear-gradient(160deg,
    color-mix(in srgb, var(--dd-accent) 22%, var(--dd-canvas)) 0%,
    color-mix(in srgb, var(--dd-accent) 9%, var(--dd-canvas)) 100%);
}
.dd-tile-photo > .dd-tile-empty { position: absolute; inset: 0; }
.dd-tile-caption {
  color: var(--dd-muted);
  font-size: 11px;
  font-weight: 500;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---- Media: the universal embed engine inside a soft rounded card. Frame
   sizing comes inline from the client's getMediaFrameStyle /
   getMediaPlaceholderStyle (aspect-ratio + height auto, or a pixel height),
   so the frame carries no fallback height here ---- */
.dd-media {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 8px;
  border-radius: var(--dd-radius);
  background: var(--dd-surface);
}
.dd-media-frame { display: block; width: 100%; border: 0; border-radius: 14px; background: #000000; }
.dd-media-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: var(--dd-surface-strong);
  color: var(--dd-muted);
  font-size: 13px;
  font-weight: 600;
}
.dd-media-copy { display: flex; flex-direction: column; gap: 2px; padding: 9px 10px 4px; }
.dd-media-title { font-family: var(--dd-display); font-size: 19px; line-height: 1.15; overflow-wrap: anywhere; }
.dd-media-caption { color: var(--dd-muted); font-size: 12px; }

/* ---- Header label (small caps, muted), text (pre-wrap), divider ---- */
.dd-label {
  width: 100%;
  padding-top: 8px;
  color: var(--dd-muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-align: center;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}
.dd-text {
  width: 100%;
  color: var(--dd-muted);
  font-size: 13px;
  line-height: 1.55;
  text-align: center;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.dd-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 6px 0;
  color: var(--dd-divider-color, var(--dd-muted));
}
.dd-divider > span { display: block; width: 100%; height: 1px; background: var(--dd-divider-color, var(--dd-line)); }
.dd-divider.dd-divider-chars > span { width: auto; height: auto; background: none; letter-spacing: 0.35em; font-size: 13px; }

/* ---- Aftercare row: socials left, footer right; centered socials when the
   footer is not in the row ---- */
.dd-aftercare {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 44px;
  margin-top: 9px;
  animation: dd-rise 280ms var(--dd-ease) 120ms backwards;
}
.dd-aftercare.is-centered { justify-content: center; }
.dd-socials { display: flex; flex-wrap: wrap; align-items: center; }
.dd-social {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  color: var(--dd-muted);
  font-size: 0.65rem;
  font-weight: 800;
  cursor: pointer;
  transition: background-color var(--dd-quick) ease, color var(--dd-quick) ease, transform var(--dd-quick) var(--dd-ease);
}
/* small full-colour brand marks (house convention; a grayscale filter
   turned the boxed marks into heavy dark discs), a touch quieter at rest */
.dd-social img {
  width: 20px;
  height: 20px;
  object-fit: contain;
  opacity: 0.88;
  transition: opacity var(--dd-quick) ease;
}
.dd-social:hover { background: var(--dd-surface); color: var(--dd-accent); }
.dd-social:hover img { opacity: 1; }
.dd-social:active { transform: scale(0.95); }
/* no url (deploy-only state, snap precedent): inert, dimmed */
.dd-social.is-disabled { cursor: default; opacity: 0.55; }
/* text fallback for platforms without an icon asset */
.dd-social span { font-size: 0.65rem; line-height: 1; }
/* Bordered icon style (socialsAppearance.style 'badge'): hairline rings */
.dd-social.is-badge { box-shadow: inset 0 0 0 1px var(--dd-line); }
.dd-social.is-badge:hover { box-shadow: inset 0 0 0 1px transparent; }
.dd-socials .dd-social + .dd-social { margin-left: 0; }

/* ---- Footer (the brand is a real anchor on the deployed page) ---- */
.dd-footer {
  display: flex;
  gap: 4px;
  color: var(--dd-muted);
  font-size: 10px;
  font-weight: 500;
  white-space: nowrap;
}
.dd-footer.is-solo { justify-content: center; margin-top: 12px; animation: dd-rise 280ms var(--dd-ease) 150ms backwards; }
.dd-footer-brand { font-weight: 700; }
a.dd-footer-brand:hover { text-decoration: underline; }

/* ---- Empty state (the client emits it for a fully hidden page) ---- */
.dd-empty {
  width: 100%;
  margin: 18px auto;
  padding: 22px 16px;
  border: 1px dashed color-mix(in srgb, var(--dd-ink) 28%, transparent);
  border-radius: 18px;
  background: var(--dd-surface);
  text-align: center;
}
.dd-empty-title { font-family: var(--dd-display); font-size: 22px; color: var(--dd-ink); }
.dd-empty-sub { margin-top: 5px; font-size: 12px; color: var(--dd-muted); }


/* ---- Contact blocks: the shared block sits full width in the column; the
   accent buttons take the Daydream soft shadow (vars do the rest) ---- */
.dd-contact { width: 100%; }
.dd-root .bncy-c-btn, .dd-root .bncy-g-btn { box-shadow: var(--dd-shadow); }

/* ---- Motion ---- */
@keyframes dd-rise {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---- Per-link animations (bounce / pulse / glow / shine): the shared
   pc-anim-* classes (pro-card/noir/canvas/duotone/snap convention, KEEP IN
   PARITY with NewEditor.css). The class sits on the .dd-item wrapper so the
   inner block keeps its dd-rise entrance cascade. ---- */
@keyframes pc-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.pc-anim-bounce { animation: pc-bounce 2s ease-in-out infinite; }
@keyframes pc-scale-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.03); } }
.pc-anim-pulse { animation: pc-scale-pulse 2s ease-in-out infinite; }
.pc-anim-shine { position: relative; overflow: hidden; }
.pc-anim-shine::before {
  content: ''; position: absolute; top: -50%; left: -100%; width: 60%; height: 200%;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.03) 25%, rgba(255,255,255,0.12) 50%, rgba(255,255,255,0.03) 75%, transparent 100%);
  transform: skewX(-15deg); animation: pc-shine 4s ease-in-out infinite; z-index: 3; pointer-events: none;
}
@keyframes pc-shine { 0% { left: -100%; opacity: 0; } 10% { opacity: 1; } 50% { left: 100%; opacity: 1; } 55% { opacity: 0; } 100% { left: 100%; opacity: 0; } }
/* Glow: soft pulsing coloured halo; colour from --pc-glow-color (editor control). */
.pc-anim-glow { border-radius: 14px; animation: pc-glow-pulse 2.4s ease-in-out infinite; }
@keyframes pc-glow-pulse {
  0%, 100% { box-shadow: 0 0 12px 2px color-mix(in srgb, var(--pc-glow-color, #e8c6c0) 45%, transparent); }
  50%      { box-shadow: 0 0 28px 6px color-mix(in srgb, var(--pc-glow-color, #e8c6c0) 78%, transparent); }
}

/* ---- NARROW PHONES (<= 359px): the column and the CTA tighten so the
   title + price row keeps to one line on small screens ---- */
@media (max-width: 359px) {
  .dd-content { padding-inline: 18px; }
  .dd-cta { padding-inline: 15px; gap: 8px; font-size: 13px; }
  .dd-cta-price { font-size: 11px; }
  .dd-footer { font-size: 9px; }
}

/* ---- DESKTOP (>= 850px, the editor's .is-cover-stack stage): the portrait
   pins to the left 60% of the WINDOW at full height with a SIDEWAYS fade;
   the content column sits on the right, left aligned, overlapping the photo
   edge by 54px, centered when short (flex 1 0 auto + justify center against
   the fold-high .dd-page) and scrolling past the pinned photo when long.
   The hero is position: fixed (the editor used absolute against its
   non-scrolling root; here the DOCUMENT scrolls); the root has no
   transform/filter, so the viewport is its containing block. ---- */
@media (min-width: 850px) {
  .dd-hero {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 60%;
    height: auto;
    z-index: 0;
  }
  .dd-hero-fade {
    /* fully solid from 94%: the fade used to reach the page colour only at the
       last pixel, so a faint tint of photo ran up to the 60% edge and read as a
       hairline seam against the page (owner 2026-09-07) */
    background: linear-gradient(90deg,
      transparent 38%,
      color-mix(in srgb, var(--dd-canvas) 16%, transparent) 58%,
      var(--dd-canvas) 94%);
  }
  .dd-content {
    position: relative;
    z-index: 1;
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    --dd-col: clamp(min(470px, calc(40% - 48px)), calc(40% - 96px), 640px);
    width: 40%;
    max-width: none;
    margin: 0 0 0 60%;
    /* the box IS the right 40% of the screen; the content column (--dd-col) is
       centered inside it by the inline padding with equal gutters either side:
       470px wide when there is room, growing to 640px on large monitors, and
       never wider than the region minus a 24px gutter on small desktops. The
       prototype's 54px overlap onto the photo edge is gone on purpose: a fixed
       column pinned to the photo left a void on the right of wide screens. */
    padding: 40px calc((40% - var(--dd-col)) / 2);
  }
  .dd-identity { text-align: left; }
  .dd-handle { margin-bottom: 10px; font-size: 13px; }
  .dd-name { justify-content: flex-start; font-size: calc(var(--dd-name-size, 42px) * 1.38); }
  .dd-bio { max-width: 330px; margin: 15px 0 0; font-size: 15px; line-height: 1.6; }
  .dd-links { gap: 9px; margin-top: 29px; }
  .dd-cta { min-height: 66px; }
  .dd-pill { min-height: 49px; }
  .dd-aftercare { margin-top: 14px; }
}

/* ============================================================================
   Combined follower counter: themed pill (.ne-fpill, via the --fp-* vars set
   on .dd-content above, centered by --fp-margin) + an ALWAYS DARK breakdown
   sheet (.ne-fsheet-*). KEEP IN PARITY with NewEditor.css.
   ============================================================================ */
.ne-fpill { display: flex; align-items: baseline; justify-content: center; gap: 6px; width: fit-content; margin: var(--fp-margin, 14px auto 0); padding: var(--fp-pad, 8px 16px); background: var(--fp-bg, rgba(0,0,0,0.05)); border: var(--fp-border, 1px solid rgba(0,0,0,0.12)); border-radius: var(--fp-radius, 999px); color: var(--fp-text, inherit); font-family: inherit; line-height: 1; cursor: pointer; transition: border-color .15s, transform .12s, background .15s; }
.ne-fpill:hover { border-color: var(--fp-border-hover, rgba(0,0,0,0.28)); }
.ne-fpill:active { transform: scale(0.97); }
.ne-fpill-num { font-size: 16px; font-weight: 800; letter-spacing: -0.01em; }
.ne-fpill-label { font-size: 12.5px; color: var(--fp-muted, currentColor); opacity: .72; }
.ne-fsheet-overlay { position: fixed; inset: 0; z-index: 9000; display: flex; align-items: flex-end; background: rgba(0,0,0,0.5); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.ne-fsheet { width: 100%; max-width: 520px; margin: 0 auto; max-height: 80%; overflow-y: auto; background: #161618; color: #f4f4f6; border-radius: 20px 20px 0 0; padding: 10px 18px calc(18px + env(safe-area-inset-bottom)); box-shadow: 0 -16px 44px rgba(0,0,0,0.5); animation: ne-fsheet-up .3s cubic-bezier(.22,.61,.36,1); }
@keyframes ne-fsheet-up { from { transform: translateY(100%); } to { transform: none; } }
.ne-fsheet-grab { width: 38px; height: 4px; border-radius: 999px; background: rgba(255,255,255,0.22); margin: 2px auto 14px; }
.ne-fsheet-total { text-align: center; font-size: 30px; font-weight: 800; letter-spacing: -0.02em; }
.ne-fsheet-sub { text-align: center; font-size: 12.5px; opacity: .6; margin-top: 2px; }
.ne-fsheet-list { display: flex; flex-direction: column; margin-top: 14px; }
.ne-fsheet-row { display: flex; align-items: center; gap: 12px; padding: 11px 2px; border-top: 1px solid rgba(255,255,255,0.08); }
.ne-fsheet-row:first-child { border-top: none; }
.ne-fsheet-ic { width: 28px; height: 28px; flex: none; display: grid; place-items: center; opacity: .85; }
.ne-fsheet-ic img { width: 24px; height: 24px; object-fit: contain; }
.ne-fsheet-name { flex: 1; min-width: 0; font-size: 14.5px; }
.ne-fsheet-count { font-size: 14.5px; font-weight: 700; }
.ne-fsheet-empty { opacity: .6; font-size: 13px; text-align: center; padding: 14px; }
.ne-fsheet-done { width: 100%; margin-top: 16px; min-height: 46px; border: none; border-radius: 12px; background: #ffffff; color: #111111; font-weight: 700; font-size: 14.5px; cursor: pointer; }

/* ============================================================================
   Inline 18+ warning (adult-flagged LINK blocks), Daydream skin. The client
   injects .dd-adult-inline INTO the flagged block and adds has-adult-warning
   to it, so the block is the positioning context and the overlay adopts its
   rounding via border-radius: inherit (fit-wave contract): it hugs the 999px
   CTA and pills and the 22px cards alike. Skin: the page colour, near
   opaque, with a soft blur; serif title, muted body, Cancel as a soft ink
   pill, Continue as the accent pill. The JS fit pass adds is-compact /
   min-height grow for short hosts (the 60px CTA and the 45px pills land in
   the compact tier). All children are spans because the host may be a span.
   ========================================================================== */
.has-adult-warning { position: relative; overflow: hidden; }
/* while the warning is open the host itself takes the overlay colour and
   drops its shadow, so no hairline of accent or photo peeks at the rounded
   corners under the overlay's anti-aliased edge */
.dd-cta.has-adult-warning, .dd-pill.has-adult-warning, .dd-card.has-adult-warning, .dd-photo.has-adult-warning {
  background: color-mix(in srgb, var(--dd-canvas, #faf8f5) 96%, #ffffff);
  box-shadow: none;
  transform: none;
}
.dd-photo.has-adult-warning .dd-photo-media, .dd-card.has-adult-warning .dd-card-media img { visibility: hidden; }
.dd-adult-inline {
  position: absolute; inset: 0; z-index: 8;
  display: flex; align-items: center; justify-content: center;
  min-height: 100%; padding: 12px;
  background: color-mix(in srgb, var(--dd-canvas, #faf8f5) 96%, #ffffff);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  color: var(--dd-ink, #514b48); text-align: center; border-radius: inherit;
  font-family: var(--dd-body, 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif);
  font-weight: 500; line-height: 1.3; letter-spacing: 0; text-transform: none;
  cursor: default;
}
.dd-adult-inline-inner { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; max-width: 300px; }
.dd-adult-inline-title {
  display: block;
  color: var(--dd-ink, #514b48);
  font-family: var(--dd-display, 'Instrument Serif', Georgia, serif);
  font-size: 19px; font-weight: 400; line-height: 1.1; letter-spacing: -0.02em;
}
.dd-adult-inline-body { display: block; color: var(--dd-muted, #78706c); font-size: 11.5px; font-weight: 500; line-height: 1.3; }
.dd-adult-actions { display: flex; justify-content: center; gap: 8px; width: 100%; }
.dd-adult-btn {
  min-height: 30px; border: none; border-radius: 999px;
  padding: 5px 14px; cursor: pointer; font: inherit;
  font-family: var(--dd-body, 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif);
  font-size: 11.5px; font-weight: 600; line-height: 1.15;
  transition: background 120ms ease, box-shadow 120ms ease, transform 120ms ease;
}
/* Cancel: the soft surface pill (the page's own pill tint) */
.dd-adult-btn.secondary {
  background: var(--dd-surface-strong, #e8dce2);
  color: var(--dd-ink, #514b48);
}
.dd-adult-btn.secondary:hover { background: color-mix(in srgb, var(--dd-accent, #91667b) 26%, var(--dd-canvas, #faf8f5)); }
/* Continue: the accent pill, white ink by design (the CTA look) */
.dd-adult-btn.primary {
  background: var(--dd-accent, #91667b);
  color: #ffffff;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--dd-accent, #91667b) 22%, transparent);
}
.dd-adult-btn.primary:hover { background: color-mix(in srgb, var(--dd-accent, #91667b) 88%, var(--dd-ink, #514b48)); }
.dd-adult-btn.primary:active { transform: scale(0.985); }
/* JS fit pass: is-compact lands ON the overlay for ANY host too short for
   the full variant; the title goes, the body may wrap, the buttons may stack */
.dd-adult-inline.is-compact { padding: 7px 10px; }
.dd-adult-inline.is-compact .dd-adult-inline-title { display: none; }
.dd-adult-inline.is-compact .dd-adult-inline-inner { gap: 5px; }
.dd-adult-inline.is-compact .dd-adult-inline-body { color: var(--dd-ink, #514b48); white-space: normal; }
.dd-adult-inline.is-compact .dd-adult-actions { flex-wrap: wrap; }
.dd-adult-inline.is-compact .dd-adult-btn { min-height: 22px; padding: 4px 10px; font-size: 10.5px; }
/* A gated pill / CTA gets room for the full variant (title, body, buttons)
   instead of the compact tier; the min-height is released on close. */
.dd-pill.has-adult-warning, .dd-cta.has-adult-warning { min-height: 104px; border-radius: 28px; }
/* the press-and-hold variant carries a hint line too: a little more room
   keeps the serif title instead of dropping to the compact tier */
.dd-pill.has-adult-warning:has(.dd-adult-holdhint), .dd-cta.has-adult-warning:has(.dd-adult-holdhint) { min-height: 130px; }

/* FB iOS press-and-hold 18+ confirm: the primary confirm is a real anchor
   (long-press opens the native "Open in external browser" menu); tap is
   suppressed and pulses the hint line under the buttons. */
.dd-adult-btn.is-holdlink {
  display: inline-flex; align-items: center; justify-content: center;
  box-sizing: border-box; text-decoration: none; text-align: center;
  -webkit-touch-callout: default;
}
.dd-adult-holdhint {
  display: block; width: 100%; margin-top: 4px;
  color: var(--dd-muted, #78706c);
  font-size: 10.5px; font-weight: 500; line-height: 1.3; text-align: center;
}
.dd-adult-holdhint.is-pulsing { animation: bncy-holdpulse 0.6s ease; }
@keyframes bncy-holdpulse {
  0% { transform: scale(1); }
  35% { transform: scale(1.06); }
  100% { transform: scale(1); }
}

/* ============================================================================
   18+ age gate for adult PLATFORM social icons: a centered popup over the
   whole page. Shared markup across clients (.bncy-sgate-*), skinned for
   Daydream: a soft page-coloured card over a blurred, ink-tinted veil, serif
   title, the accent Yes pill. Vars carry literal fallbacks on purpose.
   ========================================================================== */
.bncy-sgate-overlay {
  position: fixed; inset: 0; z-index: 9990;
  display: flex; align-items: center; justify-content: center; padding: 18px;
  background: color-mix(in srgb, var(--dd-ink, #514b48) 42%, transparent);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.bncy-sgate {
  width: 310px; max-width: 94vw;
  font-family: var(--dd-body, 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif);
  animation: bncy-sgate-in 0.18s ease;
  background: var(--dd-canvas, #faf8f5);
  border-radius: 26px;
  box-shadow: 0 30px 80px -30px rgba(40, 30, 35, 0.6);
  padding: 26px 22px 22px;
  text-align: center;
  color: var(--dd-ink, #514b48);
}
.bncy-sgate-title {
  color: var(--dd-ink, #514b48);
  font-family: var(--dd-display, 'Instrument Serif', Georgia, serif);
  font-size: 27px; font-weight: 400; letter-spacing: -0.02em; line-height: 1.1;
}
.bncy-sgate-body { margin-top: 9px; color: var(--dd-muted, #78706c); font-size: 12.5px; font-weight: 500; line-height: 1.5; }
.bncy-sgate-btns { display: flex; gap: 9px; justify-content: center; margin-top: 18px; }
.bncy-sgate-btns button { flex: 1 1 0; }
.bncy-sgate-no {
  background: var(--dd-surface, #f0e9ec);
  color: var(--dd-ink, #514b48);
  border: none; border-radius: 999px;
  min-height: 42px; padding: 8px 16px;
  font-family: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
  transition: background 120ms ease;
}
.bncy-sgate-no:hover { background: var(--dd-surface-strong, #e8dce2); }
.bncy-sgate-yes {
  background: var(--dd-accent, #91667b);
  color: #ffffff;
  border: none; border-radius: 999px;
  min-height: 42px; padding: 8px 18px;
  box-shadow: 0 7px 20px color-mix(in srgb, var(--dd-accent, #91667b) 22%, transparent);
  font-family: inherit; font-size: 12.5px; font-weight: 650; cursor: pointer;
  transition: background 120ms ease, transform 120ms ease;
}
.bncy-sgate-yes:hover { background: color-mix(in srgb, var(--dd-accent, #91667b) 88%, var(--dd-ink, #514b48)); }
.bncy-sgate-yes:active { transform: scale(0.985); }
@keyframes bncy-sgate-in { from { opacity: 0; transform: translateY(6px) scale(0.97); } to { opacity: 1; transform: none; } }
/* FB iOS press-and-hold: the Yes control renders as a real anchor + hint. */
a.bncy-sgate-yes { flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; text-decoration: none; text-align: center; -webkit-touch-callout: default; }
.bncy-sgate-holdhint { display: block; margin-top: 11px; color: var(--dd-muted, #78706c); font-size: 11px; font-weight: 500; line-height: 1.35; text-align: center; }
.bncy-sgate-holdhint.is-pulsing { animation: bncy-holdpulse 0.6s ease; }
@media (prefers-reduced-motion: reduce) {
  .dd-adult-holdhint.is-pulsing, .bncy-sgate-holdhint.is-pulsing { animation: none; }
  .bncy-sgate { animation: none; }
}

/* ---- Reduced motion kill switch: every dd animation and transition (the
   rise cascade, the aftercare/footer rises, the 120ms presses, the 200ms
   lifts), the hover/active transforms back to their resting rules, the
   per-link loops, and the overlays' entrances and pulses ---- */
@media (prefers-reduced-motion: reduce) {
  .dd-root *,
  .dd-root *::before,
  .dd-root *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .dd-root .dd-cta:active,
  .dd-root .dd-pill:active,
  .dd-root .dd-card:hover,
  .dd-root .dd-card:active,
  .dd-root .dd-photo:hover,
  .dd-root .dd-photo:active,
  .dd-root .dd-social:active,
  .dd-root .dd-adult-btn.primary:active,
  .bncy-sgate-yes:active { transform: none; }
  /* per-link animations (noir parity): loops off, glow keeps a static halo */
  .pc-anim-bounce, .pc-anim-pulse { animation: none !important; }
  .pc-anim-shine::before { display: none; }
  .pc-anim-glow { animation: none !important; box-shadow: 0 0 16px 2px color-mix(in srgb, var(--pc-glow-color, #e8c6c0) 55%, transparent); }
  /* overlays that may mount outside .dd-root (sibling parity) */
  .ne-fsheet { animation: none; }
  .bncy-sgate { animation: none; }
  .dd-adult-holdhint.is-pulsing,
  .bncy-sgate-holdhint.is-pulsing { animation: none; }
}