/* =============================================================================
   Coquette — soft pastel / ballet-core. Cream + blush, ribbon bows, pearls,
   delicate grain, light type. Hyper-feminine but sweet & delicate (not punchy).
   Aesthetic EXPLORATION palette.
   ========================================================================== */

body {
  font-family: var(--font-ui);
  color: #6e4b57;
  background:
    radial-gradient(60% 40% at 80% 6%, #fbe1ea, transparent 60%),
    radial-gradient(56% 42% at 10% 18%, #f6e9f0, transparent 62%),
    linear-gradient(170deg, #fdf3ee, #f9e7ee 60%, #f7e9f0);
  background-color: #fdf3ee;
  overflow-x: hidden;
}
.grain {
  position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: 0.35; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}

.wrap {
  position: relative; z-index: 2;
  inline-size: min(92vw, 30rem); margin-inline: auto;
  padding-block: var(--space-4) calc(var(--space-10) + var(--space-9));
}

.topchips { display: flex; justify-content: space-between; padding-block: var(--space-3); }
.chip {
  display: inline-grid; place-items: center; inline-size: var(--control-md); block-size: var(--control-md);
  border-radius: var(--radius-pill); border: 1px solid #f0cddd; color: #c07d95;
  background: #fff9fb; box-shadow: 0 6px 14px -8px #d98fa8;
}
.chipRow { display: inline-flex; gap: var(--space-2); }
.i { inline-size: var(--icon-md); block-size: var(--icon-md); stroke: currentcolor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.i-sm { inline-size: var(--icon-sm); block-size: var(--icon-sm); }

/* portrait frame tied with a ribbon bow */
.hero { text-align: center; padding-block: var(--space-6) var(--space-2); }
.frame {
  position: relative; inline-size: 13rem; margin-inline: auto;
  padding: 0.7rem; border-radius: 48% 48% 46% 46% / 40% 40% 60% 60%;
  background: linear-gradient(160deg, #ffffff, #fdeef4);
  box-shadow: 0 0 0 2px #f4d3e0, 0 20px 44px -18px rgba(200, 120, 150, 0.5);
}
.frameImg {
  aspect-ratio: 3 / 4; border-radius: 46% 46% 44% 44% / 40% 40% 60% 60%;
  background:
    radial-gradient(60% 45% at 40% 26%, #ffffffcc, transparent 55%),
    linear-gradient(160deg, #f7c9d9, #e8a9c4 55%, #cf9ec0);
}
/* pearl string around the frame */
.pearls { position: absolute; inset-block-start: -0.4rem; inset-inline: 0; display: flex; justify-content: center; gap: 0.28rem; }
.pearls i {
  inline-size: 0.55rem; block-size: 0.55rem; border-radius: 50%;
  background: radial-gradient(40% 40% at 35% 30%, #fff, #f3d9e4 70%);
  box-shadow: 0 1px 2px rgba(180, 120, 150, 0.4);
}
/* the bow */
.bow { position: absolute; inset-block-start: -1.4rem; inset-inline-start: 50%; transform: translateX(-50%); inline-size: 5rem; block-size: 2.6rem; z-index: 3; }
.bowWing { position: absolute; inset-block-start: 0; inline-size: 2.3rem; block-size: 2.6rem; background: linear-gradient(160deg, #f8ccdb, #e58bab); box-shadow: inset 0 -3px 6px rgba(180, 80, 120, 0.35), inset 0 3px 5px #fff8; }
.bowWing.l { inset-inline-start: 0; border-radius: 85% 25% 60% 40% / 70% 40% 60% 30%; transform: rotate(-10deg); }
.bowWing.r { inset-inline-end: 0; border-radius: 25% 85% 40% 60% / 40% 70% 30% 60%; transform: rotate(10deg); }
.bowKnot { position: absolute; inset-inline-start: 50%; inset-block-start: 0.35rem; transform: translateX(-50%); inline-size: 1.1rem; block-size: 1.7rem; border-radius: 44%; background: linear-gradient(160deg, #f3b6cb, #dd7ba0); z-index: 4; box-shadow: inset 0 2px 3px #fff8; }

.hosts { display: inline-flex; margin-block-start: var(--space-3); }
.ava {
  inline-size: var(--control-md); block-size: var(--control-md); border-radius: var(--radius-pill);
  display: grid; place-items: center; font-weight: var(--font-weight-bold); font-size: var(--font-size-sm); color: #fff;
  background: linear-gradient(160deg, #f2a9c2, #d98fa8); box-shadow: 0 0 0 3px #fff, 0 4px 10px -4px #d98fa8;
}
.ava + .ava { margin-inline-start: calc(-1 * var(--space-3)); }

.eyebrow { margin-block-start: var(--space-5); font-size: var(--font-size-xs); letter-spacing: 0.28em; text-transform: uppercase; color: #c78ba0; font-weight: var(--font-weight-semibold); }
.title {
  margin-block-start: var(--space-2);
  font-size: clamp(2.7rem, 14vw, 4rem); font-weight: var(--font-weight-regular);
  line-height: 0.98; letter-spacing: -0.02em; color: #cf6f92;
}
.title em { font-style: italic; font-weight: var(--font-weight-light, 300); color: #d98fa8; }
.sub { margin-block-start: var(--space-4); font-size: var(--font-size-base); line-height: var(--line-relaxed); color: #8a6472; }
.sub b { color: #cf6f92; font-weight: var(--font-weight-semibold); }

.soft {
  margin-block-start: var(--space-6); padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-xl); background: #fff9fb; border: 1px solid #f6d7e2;
  box-shadow: 0 18px 40px -22px rgba(200, 120, 150, 0.5);
}
.gRow { display: flex; align-items: center; gap: var(--space-4); padding-block: var(--space-3); }
.gRow + .gRow { border-block-start: 1px solid #f6dee7; }
.gGlyph { display: grid; place-items: center; inline-size: var(--control-md); block-size: var(--control-md); border-radius: var(--radius-md); flex: none; color: #b05a7a; background: #fbe3ec; }
.gGlyph--b { color: #9a7bb0; background: #efe4f6; }
.gBody { flex: 1; min-inline-size: 0; }
.gBody b { display: block; font-size: var(--font-size-base); font-weight: var(--font-weight-semibold); color: #6e4b57; }
.gBody span { font-size: var(--font-size-sm); color: #a98795; }

.who { margin-block-start: var(--space-6); text-align: center; }
.whoLabel { font-size: var(--font-size-xs); letter-spacing: 0.2em; text-transform: uppercase; color: #c78ba0; font-weight: var(--font-weight-semibold); }
.bubbles { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); margin-block-start: var(--space-4); }
.bubble {
  inline-size: var(--control-lg); block-size: var(--control-lg); border-radius: var(--radius-pill);
  display: grid; place-items: center; font-weight: var(--font-weight-bold); color: #fff;
  background: linear-gradient(160deg, var(--c1), var(--c2)); box-shadow: 0 0 0 3px #fff, 0 6px 14px -6px #d98fa8;
}

.cta {
  display: block; inline-size: 100%; margin-block-start: var(--space-7);
  padding-block: var(--space-4); border: 1px solid #f2b8cd; border-radius: var(--radius-pill);
  font-size: var(--font-size-lg); font-weight: var(--font-weight-bold); color: #fff;
  background: linear-gradient(150deg, #f3a6c0, #de7ea0);
  box-shadow: inset 0 2px 3px #ffffff70, 0 14px 30px -12px rgba(200, 110, 150, 0.6);
  transition: transform var(--dur-fast) var(--ease);
}
.cta:active { transform: scale(0.98); }

.nav { position: fixed; inset-block-end: calc(var(--space-4) + env(safe-area-inset-bottom, 0px)); inset-inline: 0; z-index: 5; display: flex; justify-content: center; pointer-events: none; }
.navInner {
  pointer-events: auto; display: flex; gap: var(--space-1); padding: var(--space-1);
  border-radius: var(--radius-pill); background: #fff9fb; border: 1px solid #f4d3e0;
  box-shadow: 0 16px 40px -18px rgba(200, 120, 150, 0.55);
}
.navInner button {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding-block: var(--space-2); padding-inline: var(--space-3); border: none;
  border-radius: var(--radius-pill); background: transparent; color: #c78ba0;
  font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold);
}
.navInner button .lbl { display: none; }
.navInner button[aria-current='true'] { color: #fff; background: linear-gradient(150deg, #f3a6c0, #de7ea0); }
.navInner button[aria-current='true'] .lbl { display: inline; }