@font-face { font-family: "Monsieur La Doulaise"; src: url("../fonts/coquette/monsieur-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Bodoni Moda"; src: url("../fonts/coquette/bodoni-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Bodoni Moda"; src: url("../fonts/coquette/bodoni-400i.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }

/* COQUETTE (theme key "coquette", round 46): bows, pearls, swans and a locket in soft pastels, the "coquette" look in
   the 2027 trend lists. Real photographs (V12-V13: a gold heart locket, silk bows, pearls) and our own swan watercolour
   (V11). The bows are grey photos tinted to the colourway's ribbon colour (--bow). Intro: the locket hangs from a bow; tap
   and it opens like a book with your two initials. Cover: a bow over an oval (the swans, or your photo), names in a fine
   script, a strand of pearls. Blush (original), Butter, Powder Blue, Lilac.
   Type: Monsieur La Doulaise (names), Bodoni Moda (text, headings, italic details). */
:root {
  --bg: #fcf1f1; --paper: #fffafa; --ink: #5a3d45; --muted: #94757d; --line: rgba(90, 61, 69, .16);
  --accent: #bb6a82; --accent-ink: #fff8f8; --name: #6b3f4c; --bow: #f1c3cc;
  --display: "Bodoni Moda", "Didot", Georgia, serif; --text: "Bodoni Moda", Georgia, serif; --script: "Monsieur La Doulaise", "Snell Roundhand", cursive;
  --radius: 999px; --maxw: 520px;
}
body { font-family: var(--text); font-size: 1rem; line-height: 1.8; color: var(--ink); background: var(--bg); }
.cq-bow { display: block; aspect-ratio: 718 / 859; background: var(--bow) url(../img/real/cq-bow-g.webp) center / 100% 100% no-repeat; background-blend-mode: hard-light; -webkit-mask: url(../img/real/cq-bow-g.webp) center / 100% 100% no-repeat; mask: url(../img/real/cq-bow-g.webp) center / 100% 100% no-repeat; }
.cq-bow.is-end { width: 110px; aspect-ratio: 575 / 254; margin: 0 auto 16px; background: var(--bow) url(../img/real/cq-bow2-g.webp) center / 100% 100% no-repeat; background-blend-mode: hard-light; -webkit-mask: url(../img/real/cq-bow2-g.webp) center / 100% 100% no-repeat; mask: url(../img/real/cq-bow2-g.webp) center / 100% 100% no-repeat; }
.cq-pearls { display: block; width: min(76%, 300px); aspect-ratio: 640 / 29; margin: 18px auto 0; background: url(../img/real/cq-pearls.webp) center / 100% 100% no-repeat; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .15)); }
.cq-swans { display: block; background: url(../img/real/cq-swans.webp) center / cover no-repeat; mix-blend-mode: multiply; }
/* opening */
.cq-intro { background: radial-gradient(90% 60% at 50% 40%, var(--paper), var(--bg)); }
.cq-start { align-content: start; padding-top: 9vh; }
.cq-hang { --w: min(74vw, 300px); position: relative; display: block; width: var(--w); height: calc(var(--w) * 1.62); }
.cq-hang .cq-bow { position: absolute; z-index: 2; left: 50%; top: 0; width: 46%; margin-left: -23%; filter: drop-shadow(0 6px 5px rgba(0, 0, 0, .18)); }
.cq-lk { position: absolute; left: 50%; display: block; background: center top / contain no-repeat; filter: drop-shadow(0 12px 10px rgba(0, 0, 0, .25)); transform-origin: 50% 6%; }
.cq-lk.is-shut { top: 16%; width: 42%; margin-left: -21%; aspect-ratio: 464 / 917; background-image: url(../img/real/cq-locket.webp); animation: cq-sway 4.5s ease-in-out infinite; transition: opacity .3s ease .25s; }
.cq-lk.is-open { top: 16%; width: 73%; margin-left: -36.5%; aspect-ratio: 804 / 921; background-image: url(../img/real/cq-locket-open.webp); opacity: 0; transform: scale(.7); transition: opacity .3s ease .25s, transform .9s cubic-bezier(.3, 1.3, .5, 1) .25s; }
.cq-lk b { position: absolute; top: 61%; width: 26%; text-align: center; font: 400 clamp(1.4rem, 8vw, 2.1rem)/1 var(--display); color: #8a6a2c; opacity: 0; transition: opacity .5s ease .8s; }
.cq-lk b.is-a { left: 14%; } .cq-lk b.is-b { right: 13%; }
@keyframes cq-sway { 0%, 100% { transform: rotate(-2.5deg); } 50% { transform: rotate(2.5deg); } }
.is-opening .cq-lk.is-shut { opacity: 0; animation: none; }
.is-opening .cq-lk.is-open { opacity: 1; transform: scale(1); } .is-opening .cq-lk b { opacity: 1; }
/* cover */
.t-coquette .cq-hero { padding: 78px 22px 60px; }
.cq-oval { position: relative; width: min(64vw, 260px); margin-bottom: 20px; }
.cq-oval .cq-bow { position: absolute; z-index: 2; left: 50%; top: -44px; width: 84px; margin-left: -42px; filter: drop-shadow(0 4px 4px rgba(0, 0, 0, .18)); }
.cq-oval .cq-swans, .cq-ph { aspect-ratio: 4 / 5; border-radius: 50%; }
.cq-oval .cq-swans { background-size: 190% auto; -webkit-mask: radial-gradient(closest-side, #000 80%, transparent); mask: radial-gradient(closest-side, #000 80%, transparent); }
.cq-ph { background: #f4e6e8; box-shadow: 0 0 0 5px var(--paper), 0 0 0 6px var(--line), 0 14px 24px -12px rgba(0, 0, 0, .35); }
.t-coquette .hero-k { letter-spacing: .02em; }
.t-coquette .hero-t { margin: 12px 0 0; font: 400 clamp(2.8rem, min(17vw, calc(122vw / var(--nl, 6))), 4.4rem)/1.05 var(--script); color: var(--name); }
.t-coquette .hero-t span { display: block; }
.t-coquette .hero-t i { display: block; margin: 4px 0 2px; font: italic 400 1.1rem/1.2 var(--display); color: var(--accent); }
.cq-date { margin: 16px 0 0; font: italic 400 .95rem/1.7 var(--display); color: var(--muted); } .cq-date b { font: 400 1.05rem var(--display); letter-spacing: .16em; text-transform: uppercase; color: var(--ink); }
.cq-swans.is-foot { width: min(100%, 420px); aspect-ratio: 3 / 2; margin-top: 26px; -webkit-mask: radial-gradient(closest-side, #000 60%, transparent); mask: radial-gradient(closest-side, #000 60%, transparent); }
/* sections: a pearl under each heading, soft rounded cards */
.t-coquette .sh::after { content: ""; display: block; width: 14px; height: 14px; margin: 12px auto 0; background: url(../img/real/cq-pearl.webp) center / contain no-repeat; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .2)); }
.t-coquette .sh-t { font-style: italic; }
.t-coquette .vn-c, .t-coquette .dr-roles > div, .t-coquette .rs, .t-coquette .rs-done, .t-coquette .gl-c, .t-coquette .gl-it { border-radius: 22px; background: var(--paper); }
.t-coquette .f-in { border-radius: 14px; }
.t-coquette .gal-i img, .t-coquette .gal-ph { border-radius: 50% / 40%; }

/* ---------- opening: shared mechanics ---------- */
.cq-intro { --intro-ms: 3000; overflow: hidden; transition: opacity .6s ease 2.3s, visibility 0s linear 2.9s; }
.cq-start { position: relative; display: grid; justify-items: center; align-content: center; gap: 22px; width: 100%; height: 100%; padding: 24px; border: 0; background: none; color: var(--ink); cursor: pointer; }
.cq-for { font: italic 400 .95rem/1.5 var(--display); font-size: 1.15rem; } .cq-for b { font-weight: 400; }
.cq-tap { font: italic 400 .95rem/1.5 var(--display); color: var(--muted); animation: cq-pulse 3s ease-in-out infinite; }
@keyframes cq-pulse { 50% { opacity: .5; } }
.is-opening .cq-tap, .is-opening .cq-for { opacity: 0; animation: none; transition: opacity .3s; }
@media (prefers-reduced-motion: reduce) { .cq-tap { animation: none; } .cq-intro * { transition-duration: .01s !important; transition-delay: 0s !important; animation-duration: .01s !important; animation-delay: 0s !important; } }

/* ---------- sections ---------- */
.t-coquette .s-hero { position: relative; display: block; min-height: 100svh; text-align: center; overflow: hidden; }
.t-coquette .s-hero > * { margin-left: auto; margin-right: auto; }
.t-coquette .hero-guest { margin: 0 0 8px; font: italic 400 .95rem/1.5 var(--display); font-size: 1.05rem; } .t-coquette .hero-guest b { font-weight: 400; }
.t-coquette .hero-k, .t-coquette .sh-k { margin: 0; font: italic 400 .95rem/1.5 var(--display); color: var(--muted); text-wrap: balance; }
.t-coquette .hero-line { margin: 14px auto 0; max-width: 19em; font-size: .98rem; color: var(--muted); text-wrap: balance; }
.t-coquette .hero-cta { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; margin-top: 26px; padding: 12px 34px; border: 0; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font: italic 400 1rem var(--display); text-decoration: none; }
.t-coquette .sh { margin-bottom: 28px; }
.t-coquette .sh-t { font: 400 clamp(1.8rem, 8.2vw, 2.3rem)/1.2 var(--display); color: var(--name); }
.t-coquette .sh-n { font: italic 400 .95rem/1.5 var(--display); color: var(--accent); }
.t-coquette .cd-u b { font: 400 clamp(2rem, 9vw, 2.6rem)/1 var(--display); color: var(--name); }
.t-coquette .cd-u span { font: italic 400 .95rem/1.5 var(--display); font-size: .8rem; color: var(--muted); }
.t-coquette .vn-c, .t-coquette .dr-roles > div, .t-coquette .rs, .t-coquette .rs-done, .t-coquette .gl-c, .t-coquette .gl-it { border: 1px solid var(--line); border-radius: 999px; background: rgba(255, 255, 255, .5); box-shadow: none; }
.t-coquette .vn-l, .t-coquette .dr-roles dt, .t-coquette .bio-r, .t-coquette .tml-d { font: italic 400 .95rem/1.5 var(--display); font-size: .84rem; color: var(--accent); }
.t-coquette .vn-n, .t-coquette .pp-h, .t-coquette .tml-t { font: 400 1.28rem/1.3 var(--display); color: var(--ink); }
.t-coquette .tl-time { color: var(--accent); font: italic 400 .95rem/1.5 var(--display); font-size: .88rem; }
.t-coquette .tl-title { font: 400 1.05rem var(--display); }
.t-coquette .f-in, .t-coquette .ch span { border-radius: 999px; background: rgba(255, 255, 255, .7); border-color: var(--line); }
.t-coquette .rs-btn, .t-coquette .gl-btn { border-radius: 999px; background: var(--accent); color: var(--accent-ink); font: italic 400 1rem var(--display); }
.t-coquette .btn-line { min-height: 46px; border-radius: 999px; border-color: var(--line); color: var(--ink); font: italic 400 1rem var(--display); }
.t-coquette .btn-line:hover { border-color: var(--ink); }
.t-coquette .faq summary { font: 400 1.05rem var(--display); }
.t-coquette .gal-i img, .t-coquette .gal-ph { border-radius: 999px; }
.t-coquette .gal-i figcaption { margin-top: 8px; font: italic 400 .95rem/1.5 var(--display); font-size: .84rem; color: var(--ink); }
.t-coquette .s-closing { position: relative; text-align: center; overflow: hidden; }
.t-coquette .cl-line { font: 400 clamp(1.8rem, 8.2vw, 2.3rem)/1.2 var(--display); color: var(--name); text-wrap: balance; }
.t-coquette .cl-sign { margin-top: 10px; color: var(--ink); }
.t-coquette .cl-tag { font: italic 400 .95rem/1.5 var(--display); color: var(--accent); }
.t-coquette .f-in { border-radius: 14px; }

/* round 64: legibility */
.cq-tap{color:color-mix(in srgb,var(--ink) 80%,var(--muted))}@keyframes cq-pulse{50%{opacity:.76}}
.t-coquette .inv .s{--ax:color-mix(in srgb,var(--ink) 60%,var(--accent));--af:color-mix(in srgb,var(--ink) 46%,var(--accent));--mx:color-mix(in srgb,var(--ink) 50%,var(--muted))}
.t-coquette .inv :is(.hero-k,.sh-k,.sh-n,.tl-time,.vn-l,.dr-look>dt,.bio-r,.btn-line,.cl-tag,.att-lv-b,.st-end,.cd-line,.tml-d){--accent:var(--ax)}
.t-coquette .inv :is(.hero-cta,.rs-btn,.rs-said b,.tl-time){--accent:var(--af)}
.t-coquette .inv .s>*{--muted:var(--mx)}
/* end round 64 legibility */