/* Mannuela — Boudoir Doré. Static, zero-build. Palette inherited from the original site.

   SCOPING (WordPress embed): every component selector is prefixed with .mn so it lands at specificity (0,2,0)+.
   The page is embedded in a WordPress page whose Hello theme reset styles bare elements, e.g.
     [type=button],button { border:1px solid #c36; padding:.5rem 1rem; color:#c36 }        -> (0,1,0)
     [type=button]:hover,button:hover { background-color:#c36; color:#fff }                 -> (0,2,0)
     a:hover { color:#336 }                                                                 -> (0,1,1)
   Reset below sits at (0,1,0) / (0,2,0) and is declared first, so: theme < reset <= components (ties won by order).
   This stylesheet must load AFTER the theme CSS. */

/* ───────── Tokens ───────── */
:root {
  --ink-0: #1d0a10;
  --ink-1: #2a0f17;
  --ink-2: #3a1521;
  --ink-3: #4a1825;
  --wine: #5e1f2e;
  --gold: #e0b48a;
  --copper: #c08457;
  --blush: #cda99a;
  --cream: #f3e7d8;
  --sand: #e6d2c4;
  --mute: #a98e88;

  --g-fill: linear-gradient(148deg, rgba(243, 231, 216, .1), rgba(243, 231, 216, .025));
  --g-line: rgba(224, 180, 138, .22);
  --g-blur: blur(22px) saturate(150%);
  --g-shadow: 0 24px 60px -24px rgba(0, 0, 0, .65);

  --r-sm: 16px;
  --r-md: 26px;
  --r-lg: 40px;
  --pill: 999px;

  --pad: clamp(20px, 5vw, 72px);
  --gap: clamp(24px, 4vw, 56px);
  --sec: clamp(72px, 8vw, 128px);
  --max: 1280px;

  --ease: cubic-bezier(.22, .68, .28, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);

  --f-display: "Playfair Display", "Times New Roman", serif;
  --f-script: "Cormorant Garamond", "Playfair Display", serif;
  --f-body: "Raleway", system-ui, sans-serif;
}

/* ───────── Page shell (the only rules outside .mn) ───────── */
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
html.lenis { scroll-behavior: auto; }
body { margin: 0; background: var(--ink-0); overflow-x: hidden; }
body.is-locked { overflow: hidden; }
/* TranslatePress floating switcher (the black "French" box, z-index 99999): hidden on THIS page only, because the
   home has its own FR / PT / EN buttons and the floater covered content on phones. It is NOT disabled in the plugin:
   the city pages have no other language switcher. This stylesheet only loads on the home, so the scope is natural.
   Plugin rule is ".trp-floating-switcher { display: flex }" (0,1,0, no !important) — this selector (0,1,1) wins. */
nav.trp-floating-switcher { display: none; }

/* ───────── Base ───────── */
.mn, .mn *, .mn *::before, .mn *::after { box-sizing: border-box; }
.mn {
  position: relative; z-index: 0; /* own stacking context: keeps the fixed wash behind content, above the body colour */
  color: var(--sand);
  font-family: var(--f-body);
  font-weight: 300;
  font-size: clamp(15.5px, .5vw + 14px, 17.5px);
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

/* Scoped reset — see SCOPING note at the top for why these exact specificities. */
.mn :where(img) { display: block; max-width: 100%; height: auto; }
.mn :where(a) { color: inherit; text-decoration: none; }
.mn :where(button, [type="button"]) {
  font: inherit; color: inherit; background: none; border: 0; border-radius: 0; padding: 0;
  cursor: pointer; appearance: none; -webkit-appearance: none;
  transition: none; /* the theme sets "transition: all .3s" on every button (measured on .burger); components opt back in */
}
.mn :where(button, [type="button"]):hover, .mn :where(button, [type="button"]):focus { background-color: transparent; color: inherit; }
.mn :where(a):hover, .mn :where(a):active { color: inherit; }
.mn :where(h1, h2, h3, p, blockquote) { margin: 0; }
.mn :focus-visible { outline: 1px solid var(--gold); outline-offset: 4px; }

/* Fixed ambient wash + film grain shared by the whole page */
.mn::before {
  content: "";
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(60vw 50vh at var(--ax, 12%) var(--ay, 8%), rgba(192, 132, 87, .16), transparent 70%),
    radial-gradient(55vw 60vh at 92% 18%, rgba(94, 31, 46, .55), transparent 72%),
    radial-gradient(70vw 60vh at 50% 108%, rgba(74, 24, 37, .7), transparent 70%),
    linear-gradient(180deg, var(--ink-0), var(--ink-1) 48%, var(--ink-0));
}
.mn::after {
  content: "";
  position: fixed; inset: 0; z-index: 60; pointer-events: none;
  opacity: .055; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (hover: none) and (pointer: coarse) { .mn::after { display: none; } }

.mn .wrap { width: min(100% - var(--pad) * 2, var(--max)); margin-inline: auto; }
.mn .section { padding-block: var(--sec); overflow-x: clip; position: relative; }

/* ───────── Type ───────── */
.mn .eyebrow {
  display: inline-flex; align-items: center; gap: 14px;
  font-size: 11px; font-weight: 500; letter-spacing: .3em; text-transform: uppercase; color: var(--gold);
}
.mn .eyebrow::before { content: ""; width: 34px; height: 1px; background: linear-gradient(90deg, transparent, var(--gold)); }
.mn .h-sec {
  font-family: var(--f-display); font-weight: 500; color: var(--cream);
  font-size: clamp(34px, 5.2vw, 68px); line-height: 1.02; letter-spacing: -.02em;
  margin-top: 18px;
}
.mn .script, .mn .h-sec em, .mn .hero__title em {
  font-family: var(--f-script); font-style: italic; font-weight: 400; letter-spacing: 0;
  background: linear-gradient(100deg, var(--cream), var(--gold) 45%, var(--copper));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  padding-right: .08em;
}
.mn .lede { font-size: clamp(16px, 1.2vw, 19px); color: var(--blush); max-width: 56ch; margin-top: 20px; }

/* ───────── Buttons & chips ───────── */
.mn .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 54px; padding: 0 30px; border-radius: var(--pill);
  font-size: 12px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase;
  transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out), background .4s, color .4s;
  will-change: transform;
}
.mn .btn--gold {
  color: var(--ink-0);
  background: linear-gradient(120deg, var(--gold), var(--copper));
  box-shadow: 0 18px 40px -18px rgba(224, 180, 138, .6), inset 0 1px 0 rgba(255, 255, 255, .35);
}
.mn .btn--gold:hover { transform: translateY(-2px); box-shadow: 0 26px 50px -18px rgba(224, 180, 138, .75), inset 0 1px 0 rgba(255, 255, 255, .45); }
.mn .btn--ghost { border: 1px solid var(--g-line); background: var(--g-fill); backdrop-filter: var(--g-blur); -webkit-backdrop-filter: var(--g-blur); color: var(--cream); }
.mn .btn--ghost:hover { border-color: var(--gold); transform: translateY(-2px); }
.mn .chip {
  display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px; border-radius: var(--pill);
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--cream);
  border: 1px solid var(--g-line); background: var(--g-fill);
  backdrop-filter: var(--g-blur); -webkit-backdrop-filter: var(--g-blur);
}
.mn .chip i { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 12px var(--gold); }

/* ───────── Nav ───────── */
.mn .nav {
  position: fixed; inset: 0 0 auto 0; z-index: 40;
  transition: background .5s, border-color .5s, backdrop-filter .5s;
  border-bottom: 1px solid transparent;
}
.mn .nav.is-stuck {
  background: rgba(29, 10, 16, .62); border-bottom-color: var(--g-line);
  backdrop-filter: blur(24px) saturate(160%); -webkit-backdrop-filter: blur(24px) saturate(160%);
}
.mn .nav__in { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 76px; }
.mn .brand { font-family: var(--f-display); font-size: 20px; letter-spacing: .34em; color: var(--cream); }
.mn .nav__links { display: none; gap: clamp(20px, 2.2vw, 34px); }
.mn .nav__links a { font-size: 11.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--sand); position: relative; padding-block: 8px; }
.mn .nav__links a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 1px; background: var(--gold); transition: right .5s var(--ease-out); }
.mn .nav__links a:hover::after { right: 0; }
.mn .nav__side { display: flex; align-items: center; gap: 18px; flex-shrink: 0; }
.mn .mn-lang { display: flex; gap: 2px; padding: 4px; border-radius: var(--pill); border: 1px solid var(--g-line); background: var(--g-fill); }
.mn .mn-lang button { width: 38px; height: 30px; border-radius: var(--pill); font-size: 11px; letter-spacing: .12em; color: var(--mute); transition: background .3s, color .3s; }
.mn .mn-lang button.on { background: var(--gold); color: var(--ink-0); font-weight: 500; }
.mn .burger { width: 44px; height: 44px; display: grid; place-content: center; gap: 6px; }
.mn .burger span { width: 24px; height: 1px; background: var(--cream); transition: transform .4s var(--ease-out); }
.mn .nav.is-open .burger span:first-child { transform: translateY(3.5px) rotate(45deg); }
.mn .nav.is-open .burger span:last-child { transform: translateY(-3.5px) rotate(-45deg); }
.mn .drawer {
  position: fixed; inset: 0; z-index: 39; display: grid; place-content: center; gap: 8px; text-align: center;
  background: rgba(29, 10, 16, .9); backdrop-filter: blur(28px); -webkit-backdrop-filter: blur(28px);
  opacity: 0; visibility: hidden; transition: opacity .5s, visibility .5s;
}
.mn .drawer.is-open { opacity: 1; visibility: visible; }
.mn .drawer a { font-family: var(--f-display); font-size: clamp(28px, 8vw, 40px); color: var(--cream); padding: 8px 20px; transform: translateY(20px); opacity: 0; transition: transform .7s var(--ease-out), opacity .7s; }
.mn .drawer.is-open a { transform: none; opacity: 1; }
.mn .drawer.is-open a:nth-child(2) { transition-delay: .06s; } .mn .drawer.is-open a:nth-child(3) { transition-delay: .12s; }
.mn .drawer.is-open a:nth-child(4) { transition-delay: .18s; } .mn .drawer.is-open a:nth-child(5) { transition-delay: .24s; }
.mn .drawer.is-open a:nth-child(6) { transition-delay: .3s; }
/* Phones: brand + language switch + burger overflowed the 335px wrap at a 375px viewport and pushed half of the
   burger off-screen (measured: burger 354..398). body{overflow-x:hidden} hid the scrollbar, not the problem.
   Tighter brand and gaps; language buttons get narrower but TALLER (better touch target than 38x30). */
@media (max-width: 480px) {
  .mn .nav__in { gap: 12px; }
  .mn .nav__side { gap: 8px; }
  .mn .nav .brand { font-size: 16px; letter-spacing: .2em; }
  .mn .mn-lang { padding: 3px; }
  .mn .mn-lang button { width: 32px; height: 36px; font-size: 10.5px; letter-spacing: .06em; }
}
/* 320px-wide phones: the row was 5px over budget (burger ate into the right gutter, measured 261..305 vs wrap 300). */
@media (max-width: 340px) {
  .mn .nav .brand { letter-spacing: .13em; }
}
/* 1180px, not 1000px: measured with the longest labels (PT) — brand + 6 links + language switch
   overflowed the wrap by 68px at a 1024px viewport and clipped the "EN" button. Below this, burger + drawer. */
@media (min-width: 1180px) { .mn .nav__links { display: flex; } .mn .burger { display: none; } }

/* ───────── Age gate ───────── */
.mn .gate { position: fixed; inset: 0; z-index: 80; display: none; }
.gate-locked .mn .gate { display: block; }
.mn .gate__door { position: absolute; top: 0; bottom: 0; width: 50.5%; background: linear-gradient(180deg, var(--ink-1), var(--ink-0)); transition: transform 1.5s var(--ease-out); }
.mn .gate__door--l { left: 0; border-right: 1px solid var(--g-line); }
.mn .gate__door--r { right: 0; border-left: 1px solid var(--g-line); }
.mn .gate__box { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 20px; text-align: center; padding: var(--pad); transition: opacity .6s; }
.mn .gate__box .brand { font-size: 26px; }
.mn .gate__box p { max-width: 44ch; color: var(--blush); }
.mn .gate__btns { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 8px; }
.mn .gate.is-opening .gate__door--l { transform: translateX(-100.5%); }
.mn .gate.is-opening .gate__door--r { transform: translateX(100.5%); }
.mn .gate.is-opening .gate__box { opacity: 0; pointer-events: none; }

/* ───────── Hero ───────── */
.mn .hero { position: relative; min-height: 100svh; display: grid; align-items: center; padding: 120px 0 72px; isolation: isolate; overflow: clip; }
.mn .hero__amb { position: absolute; inset: -6%; z-index: -2; }
.mn .hero__amb img { width: 100%; height: 100%; object-fit: cover; filter: blur(6px) saturate(115%); transform: scale(1.08); animation: mn-drift 28s ease-in-out infinite alternate; }
@keyframes mn-drift { to { transform: scale(1.16) translate(-1.4%, -1.2%); } }
.mn .hero__scrim {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(29, 10, 16, .82), rgba(29, 10, 16, .42) 38%, rgba(29, 10, 16, .55) 66%, var(--ink-0)),
    linear-gradient(96deg, rgba(42, 15, 23, .92) 8%, rgba(42, 15, 23, .25) 62%, transparent),
    radial-gradient(40vw 46vh at 74% 46%, rgba(224, 180, 138, .2), transparent 70%);
}
.mn .hero__grid { display: grid; gap: clamp(36px, 6vw, 80px); align-items: center; }
/* "Available in <city>" notice. display:flex + fit-content keeps it on its own line above the eyebrow.
   The green dot is the one deliberate colour outside the palette: it is the universal "available now" signal. */
.mn .now {
  display: flex; width: fit-content; align-items: center; gap: 10px; margin-bottom: 20px; padding: 9px 18px 9px 14px;
  border-radius: var(--pill); border: 1px solid rgba(224, 180, 138, .5); background: var(--g-fill);
  backdrop-filter: var(--g-blur); -webkit-backdrop-filter: var(--g-blur);
  font-size: 12px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--cream);
}
.mn .now i { position: relative; width: 8px; height: 8px; border-radius: 50%; background: #6fd39b; }
.mn .now i::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: #6fd39b; animation: mn-pulse 2.2s var(--ease-out) infinite; }
@keyframes mn-pulse { from { transform: scale(1); opacity: .7; } to { transform: scale(3.4); opacity: 0; } }
.mn .hero__title { font-family: var(--f-display); font-weight: 500; color: var(--cream); font-size: clamp(44px, 8.4vw, 112px); line-height: .96; letter-spacing: -.03em; margin-top: 22px; }
.mn .hero__title .w { display: inline-block; }
.mn .hero__sub { margin-top: 26px; font-size: clamp(16px, 1.3vw, 20px); color: var(--blush); max-width: 40ch; }
.mn .hero__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 38px; }
.mn .hero__chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 34px; }
.mn .hero__fig { position: relative; width: min(100%, 440px); margin-inline: auto; perspective: 1400px; order: -1; }
.mn .hero__frame { position: absolute; inset: -14px 14px 14px -14px; border: 1px solid var(--gold); border-radius: 999px 999px var(--r-md) var(--r-md); opacity: .55; }
.mn .hero__photo { position: relative; aspect-ratio: 4 / 5; border-radius: 999px 999px var(--r-md) var(--r-md); overflow: hidden; box-shadow: 0 50px 100px -40px rgba(0, 0, 0, .85), 0 0 0 1px rgba(224, 180, 138, .25); }
.mn .hero__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; transform: scale(1.04); }
.mn .hero__photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(29, 10, 16, .55)); }
.mn .hero__halo { position: absolute; inset: 8% -12% -6%; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, rgba(224, 180, 138, .34), transparent); filter: blur(30px); }
.mn .hero__tag { position: absolute; left: -6px; bottom: 9%; }
.mn .hero__cue { position: absolute; left: 50%; bottom: 22px; translate: -50% 0; width: 1px; height: 54px; background: linear-gradient(180deg, transparent, var(--gold)); overflow: hidden; }
.mn .hero__cue::after { content: ""; position: absolute; inset: 0; background: var(--cream); animation: mn-cue 2.4s var(--ease) infinite; }
@keyframes mn-cue { from { transform: translateY(-100%); } to { transform: translateY(100%); } }
@media (min-width: 900px) {
  .mn .hero__grid { grid-template-columns: 1.15fr .85fr; }
  .mn .hero__fig { order: 0; width: min(100%, 500px); margin-right: 0; }
}

/* ───────── City marquee ───────── */
.mn .ribbon { border-block: 1px solid var(--g-line); padding-block: 22px; overflow: hidden; background: rgba(42, 15, 23, .5); }
.mn .ribbon__track { display: flex; width: max-content; gap: 56px; animation: mn-marquee 46s linear infinite; }
.mn .ribbon span { font-family: var(--f-script); font-style: italic; font-size: clamp(20px, 2.4vw, 30px); color: var(--blush); white-space: nowrap; display: inline-flex; align-items: center; gap: 56px; }
.mn .ribbon span::after { content: "✦"; font-size: 12px; font-style: normal; color: var(--gold); }
@keyframes mn-marquee { to { transform: translate3d(-50%, 0, 0); } }

/* ───────── About ───────── */
.mn .grid-2 { display: grid; gap: var(--gap); align-items: center; }
@media (min-width: 900px) { .mn .grid-2 { grid-template-columns: .9fr 1.1fr; } }
.mn .fig { position: relative; }
.mn .fig__media { border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 4 / 5; box-shadow: var(--g-shadow); }
.mn .fig__media img { width: 100%; height: 100%; object-fit: cover; }
.mn .fig::before { content: ""; position: absolute; inset: 10% -8% -8% 10%; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, rgba(192, 132, 87, .4), transparent); filter: blur(40px); }
.mn .fig__tag { position: absolute; right: -8px; top: 9%; }
.mn .about p + p { margin-top: 18px; }
.mn .about__text { color: var(--sand); margin-top: 26px; }
.mn .facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 36px; }
.mn .fact { padding: 18px 16px; border-radius: var(--r-sm); border: 1px solid var(--g-line); background: var(--g-fill); }
.mn .fact b { display: block; font-family: var(--f-display); font-weight: 500; font-size: clamp(20px, 2vw, 26px); color: var(--cream); }
.mn .fact span { font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--mute); }

/* ───────── A word from her (single clip, see video.js) ───────── */
.mn .mot { padding-top: 0; } /* reads as the tail of "About", not as a new chapter */
.mn .mot__grid { display: grid; gap: var(--gap); align-items: center; }
@media (min-width: 900px) { .mn .mot__grid { grid-template-columns: 1.1fr .9fr; } }
.mn .mot__text { color: var(--sand); margin-top: 22px; max-width: 44ch; }
/* Phone footage is 576px wide: the card never grows past 340px, so it always renders at or below its real resolution. */
.mn .mot__card { position: relative; width: min(100%, 340px); margin-inline: auto; aspect-ratio: 4 / 5; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--g-line); box-shadow: var(--g-shadow); background: var(--ink-0); }
.mn .mot__video { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Tint is a background-IMAGE on purpose: the scoped reset forces background-color transparent on button:hover. */
/* Bottom-right, never centred: the frame is a close-up, a centred button sat on her face (seen at 375px). */
.mn .mot__play { position: absolute; right: 16px; bottom: 16px; width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; border: 1px solid rgba(224, 180, 138, .6); background-image: linear-gradient(rgba(29, 10, 16, .5), rgba(29, 10, 16, .5)); backdrop-filter: var(--g-blur); -webkit-backdrop-filter: var(--g-blur); color: var(--cream); transition: border-color .4s, scale .5s var(--ease-out), opacity .4s; }
.mn .mot__play:hover { border-color: var(--gold); scale: 1.06; }
.mn .mot__play[hidden] { display: none; }
.mn .mot__ico--play { margin-left: 3px; } /* optical centring of the triangle */
.mn .mot__ico--pause { display: none; }
/* While it plays the control shrinks and dims so the clip is the only thing asking for attention. */
.mn .mot__card.is-playing .mot__play { width: 48px; height: 48px; opacity: .85; }
.mn .mot__card.is-playing .mot__ico--play { display: none; }
.mn .mot__card.is-playing .mot__ico--pause { display: block; }
.mn .mot__note { position: absolute; left: 16px; bottom: 16px; transition: opacity .4s; }
.mn .mot__card.is-playing .mot__note { opacity: 0; }

/* ───────── Experiences ───────── */
.mn .exp-grid { display: grid; gap: 16px; margin-top: 52px; }
@media (min-width: 700px) { .mn .exp-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .mn .exp-grid { grid-template-columns: repeat(5, 1fr); } }
/* Card = scene image on top + text body. Padding lives on .exp__body so the image can bleed to the card edges. */
.mn .exp {
  position: relative; display: flex; flex-direction: column; border-radius: var(--r-md);
  border: 1px solid var(--g-line); background: var(--g-fill);
  backdrop-filter: var(--g-blur); -webkit-backdrop-filter: var(--g-blur);
  transition: transform .7s var(--ease-out), border-color .5s; overflow: hidden;
}
.mn .exp::before { content: ""; position: absolute; inset: 0; background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 0%), rgba(224, 180, 138, .16), transparent 70%); opacity: 0; transition: opacity .5s; }
.mn .exp:hover { transform: translateY(-6px); border-color: rgba(224, 180, 138, .55); }
.mn .exp:hover::before { opacity: 1; }
.mn .exp__media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; }
@media (min-width: 700px) { .mn .exp__media { aspect-ratio: 4 / 3; } }
.mn .exp__media img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); transition: transform 1.4s var(--ease-out); }
.mn .exp:hover .exp__media img { transform: scale(1.1); }
/* Fades the scene into the glass body so the card reads as one surface, not a photo glued on top. */
.mn .exp__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(29, 10, 16, .85)); }
.mn .exp__body { flex: 1; padding: 20px 24px 28px; }
.mn .exp__n { font-family: var(--f-script); font-style: italic; font-size: 28px; color: var(--gold); line-height: 1; }
.mn .exp h3 { font-family: var(--f-display); font-weight: 500; font-size: 21px; color: var(--cream); margin-top: 12px; line-height: 1.2; }
.mn .exp p { font-size: 14.5px; color: var(--blush); margin-top: 12px; line-height: 1.65; }

/* ───────── Series: ambient room + depth stage ───────── */
/* Top padding only has to clear the 76px fixed nav; bottom is lighter so heading + stage + controls fit one screen. */
.mn .serie { position: relative; min-height: 100svh; display: grid; align-content: center; gap: clamp(16px, 2.4vw, 40px); padding-block: clamp(84px, 7vw, 120px) clamp(36px, 5vw, 80px); isolation: isolate; overflow: clip; }
.mn .serie__amb { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.mn .serie__amb img { position: absolute; left: 0; top: -12%; width: 100%; height: 124%; max-width: none; object-fit: cover; filter: saturate(108%); will-change: transform; }
.mn .serie__scrim {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(180deg, var(--ink-0), rgba(29, 10, 16, .38) 22%, rgba(29, 10, 16, .3) 70%, var(--ink-0)),
    radial-gradient(90vw 80vh at 50% 58%, transparent 30%, rgba(29, 10, 16, .78));
}
.mn .serie__beam { position: absolute; inset: 0; z-index: -1; pointer-events: none; mix-blend-mode: screen; opacity: .5; background: conic-gradient(from 200deg at 50% -10%, transparent 0 8deg, rgba(224, 180, 138, .2) 14deg, transparent 22deg 360deg); }
.mn .serie__head { display: grid; gap: 6px; text-align: center; justify-items: center; }
.mn .serie__head .h-sec { margin-top: 10px; }
.mn .serie__head .lede { margin-top: 10px; text-align: center; }
.mn .serie__no { font-family: var(--f-script); font-style: italic; font-size: 20px; color: var(--gold); }

.mn .stage { position: relative; perspective: 1500px; perspective-origin: 50% 42%; touch-action: pan-y; user-select: none; -webkit-user-select: none; outline: 0; }
.mn .stage__track {
  /* Safe base for every browser. The height cap lives in the @supports block below: an unsupported unit inside a
     custom property makes the WHOLE property invalid at computed-value time, which would drop the card width. */
  --card-w: clamp(220px, 60vw, 380px);
  --step: calc(var(--card-w) * .79);
  position: relative; height: calc(var(--card-w) * 1.5 + 70px); transform-style: preserve-3d;
  transition: transform .8s var(--ease-out);
}
/* Card width is also capped by viewport HEIGHT: at 380px wide the card is 570px tall and pushed the
   ‹ 01/09 › controls below the fold on 768px-high laptops (measured). 450px = nav + heading + controls + padding.
   --step follows automatically because it is derived from --card-w. */
@supports (height: 100svh) {
  .mn .stage__track { --card-w: min(clamp(220px, 60vw, 380px), max(200px, calc((100svh - 450px) / 1.5))); }
}
.mn .card {
  --d: 0; --ad: 0; --r: 0;
  position: absolute; left: 50%; top: 50%; width: var(--card-w); aspect-ratio: 2 / 3;
  border-radius: var(--r-md); overflow: hidden; cursor: pointer;
  transform: translate(-50%, -50%) translateX(calc(var(--d) * var(--step))) translateZ(calc(var(--ad) * -240px)) rotateY(calc(var(--r) * -16deg));
  filter: brightness(calc(1 - var(--ad) * .24)) saturate(calc(1 - var(--ad) * .12));
  opacity: calc(1 - max(0, var(--ad) - 2) * .9);
  transition: transform 1s var(--ease-out), filter 1s var(--ease-out), opacity .8s, box-shadow 1s;
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .9), 0 0 0 1px rgba(224, 180, 138, .2);
  will-change: transform;
}
.mn .card.is-active { cursor: zoom-in; box-shadow: 0 60px 120px -34px rgba(0, 0, 0, .95), 0 0 0 1px rgba(224, 180, 138, .55), 0 0 90px -20px rgba(224, 180, 138, .35); }
.mn .card.is-far { visibility: hidden; }
.mn .card img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; transform: scale(1.06); transition: transform 1.6s var(--ease-out); }
.mn .card.is-active img { transform: scale(1); }
.mn .card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(200deg, rgba(255, 255, 255, .14), transparent 34%); pointer-events: none; }
.mn .stage.is-dragging .card { transition-duration: .25s; }
.mn .stage__floor { position: absolute; left: 50%; bottom: 8px; width: min(70vw, 560px); height: 46px; translate: -50% 0; background: radial-gradient(closest-side, rgba(0, 0, 0, .75), transparent); filter: blur(10px); pointer-events: none; }
.mn .stage__ui { display: flex; align-items: center; justify-content: center; gap: 22px; margin-top: 6px; }
.mn .stage__btn { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--g-line); background: var(--g-fill); backdrop-filter: var(--g-blur); -webkit-backdrop-filter: var(--g-blur); color: var(--cream); font-size: 18px; transition: border-color .4s, transform .5s var(--ease-out); }
.mn .stage__btn:hover { border-color: var(--gold); transform: scale(1.06); }
.mn .stage__count { font-family: var(--f-script); font-style: italic; font-size: 22px; color: var(--cream); min-width: 84px; text-align: center; }
.mn .stage__count b { font-weight: 400; color: var(--gold); }
.mn .stage__bar { width: min(240px, 40vw); height: 1px; background: var(--g-line); margin: 16px auto 0; position: relative; overflow: hidden; }
.mn .stage__bar i { position: absolute; inset: 0; background: var(--gold); transform-origin: left; transform: scaleX(var(--p, 0)); transition: transform .9s var(--ease-out); }
@media (min-width: 1024px) { .motion-full .mn .card { filter: brightness(calc(1 - var(--ad) * .24)) saturate(calc(1 - var(--ad) * .12)) blur(calc(var(--ad) * 1.2px)); } }

/* ───────── Agenda ───────── */
.mn .cities { display: grid; margin-top: 48px; border-top: 1px solid var(--g-line); }
.mn .city { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; padding: 22px 6px; border-bottom: 1px solid var(--g-line); transition: padding .6s var(--ease-out), background .5s; }
.mn .city:hover { padding-inline: 22px 12px; background: linear-gradient(90deg, rgba(224, 180, 138, .08), transparent); }
.mn .city b { font-family: var(--f-display); font-weight: 500; font-size: clamp(22px, 3vw, 38px); color: var(--cream); }
.mn .city span { font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--mute); white-space: nowrap; }
@media (min-width: 900px) { .mn .cities { grid-template-columns: 1fr 1fr; column-gap: var(--gap); } }

/* ───────── Landing pages (london.html): language link, "more" button under a stage, FAQ ───────── */
/* Single-language page: one link to the French home instead of the FR/PT/EN switch. Same pill look as .mn-lang. */
.mn .nav__alt { display: inline-flex; align-items: center; height: 38px; padding: 0 16px; border-radius: var(--pill); border: 1px solid var(--g-line); background: var(--g-fill); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--sand); transition: border-color .4s, color .4s; }
.mn .nav__alt:hover { border-color: var(--gold); color: var(--cream); }
@media (max-width: 480px) { .mn .nav__alt { height: 36px; padding: 0 12px; font-size: 10.5px; letter-spacing: .1em; } }
.mn .serie__more { position: relative; text-align: center; margin-top: 28px; }
.mn .faq { max-width: 880px; }
.mn .faq__list { margin-top: 44px; border-top: 1px solid var(--g-line); }
.mn .faq__item { border-bottom: 1px solid var(--g-line); }
.mn .faq__item summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 6px; cursor: pointer; list-style: none; font-family: var(--f-display); font-weight: 500; font-size: clamp(18px, 1.8vw, 24px); color: var(--cream); }
.mn .faq__item summary::-webkit-details-marker { display: none; }
.mn .faq__item summary::after { content: "+"; flex-shrink: 0; font-family: var(--f-body); font-weight: 300; font-size: 26px; line-height: 1; color: var(--gold); transition: rotate .5s var(--ease-out); }
.mn .faq__item[open] summary::after { rotate: 45deg; }
.mn .faq__item p { padding: 0 6px 24px; max-width: 68ch; color: var(--sand); }

/* ───────── Journal ───────── */
.mn .journal { display: grid; gap: 18px; margin-top: 48px; }
@media (min-width: 800px) { .mn .journal { grid-template-columns: repeat(3, 1fr); } }
.mn .note { display: block; padding: 32px 28px; border-radius: var(--r-md); border: 1px solid var(--g-line); background: var(--g-fill); transition: transform .7s var(--ease-out), border-color .5s; }
.mn .note:hover { transform: translateY(-6px); border-color: rgba(224, 180, 138, .55); }
.mn .note small { font-size: 10.5px; letter-spacing: .26em; text-transform: uppercase; color: var(--gold); }
.mn .note h3 { font-family: var(--f-display); font-weight: 500; font-size: 23px; line-height: 1.22; color: var(--cream); margin-top: 16px; }
.mn .note p { font-size: 14.5px; color: var(--blush); margin-top: 12px; }
.mn .note i { display: inline-block; margin-top: 22px; font-style: normal; color: var(--gold); transition: transform .5s var(--ease-out); }
.mn .note:hover i { transform: translateX(8px); }
.mn .quote { text-align: center; max-width: 900px; margin-inline: auto; }
.mn .quote blockquote { margin: 0; border: 0; font-family: var(--f-script); font-style: italic; font-size: clamp(28px, 4.4vw, 56px); line-height: 1.16; color: var(--cream); }
.mn .quote cite { display: block; margin-top: 24px; font-style: normal; font-size: 11px; letter-spacing: .26em; text-transform: uppercase; color: var(--gold); }

/* ───────── Contact quiz ───────── */
.mn .contact { position: relative; isolation: isolate; }
.mn .contact__card { max-width: 720px; margin: 48px auto 0; padding: clamp(28px, 4vw, 52px); border-radius: var(--r-lg); border: 1px solid var(--g-line); background: var(--g-fill); backdrop-filter: var(--g-blur); -webkit-backdrop-filter: var(--g-blur); box-shadow: var(--g-shadow); }
.mn .field { display: grid; gap: 10px; margin-bottom: 22px; }
.mn .field label { display: block; font-size: 11px; line-height: 1.4; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }
.mn .field input, .mn .field select {
  display: block; width: 100%; min-height: 54px; margin: 0; padding: 0 20px; border-radius: var(--r-sm);
  border: 1px solid var(--g-line); background-color: rgba(29, 10, 16, .55); color: var(--cream);
  font: inherit; font-size: 16px; line-height: 1.4; appearance: none; -webkit-appearance: none; transition: border-color .3s;
}
.mn .field select { background-image: linear-gradient(45deg, transparent 50%, var(--gold) 50%), linear-gradient(135deg, var(--gold) 50%, transparent 50%); background-position: calc(100% - 24px) 50%, calc(100% - 18px) 50%; background-size: 6px 6px; background-repeat: no-repeat; }
.mn .field select option { background: var(--ink-1); color: var(--cream); }
.mn .field input:focus, .mn .field select:focus { outline: 0; border-color: var(--gold); }
.mn .contact__card .btn { width: 100%; margin-top: 6px; }
.mn #qwarn { display: none; margin-top: 16px; font-size: 14px; color: #f0a9a0; text-align: center; }
.mn #qresult { display: none; margin-top: 18px; }
.mn #qresult .wa { display: flex; align-items: center; justify-content: center; min-height: 56px; border-radius: var(--pill); background: #1f8f55; color: #fff; font-size: 12px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; }

/* ───────── Footer ───────── */
.mn .foot { border-top: 1px solid var(--g-line); padding: 64px 0 40px; text-align: center; background: var(--ink-0); }
.mn .foot .brand { font-size: 24px; }
.mn .foot__tag { margin-top: 12px; color: var(--blush); font-size: 14px; }
.mn .foot__cities { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; margin: 30px auto 0; max-width: 900px; }
.mn .foot__cities a { font-size: 12px; color: var(--mute); transition: color .3s; }
.mn .foot__cities a:hover { color: var(--gold); }
.mn .foot__legal { margin-top: 30px; font-size: 12px; color: var(--mute); max-width: 70ch; margin-inline: auto; }
.mn .foot__legal a { text-decoration: underline; text-underline-offset: 3px; }

/* ───────── Lightbox ───────── */
.mn .lb { position: fixed; inset: 0; z-index: 70; display: flex; flex-direction: column; background: rgba(20, 6, 10, .94); backdrop-filter: blur(26px) saturate(140%); -webkit-backdrop-filter: blur(26px) saturate(140%); opacity: 0; visibility: hidden; transition: opacity .5s, visibility .5s; perspective: 1400px; }
/* visibility flips at once when opening (0s) so main.js can focus the close button in the same tick:
   focus() is a no-op inside a visibility:hidden ancestor, and with a .5s visibility transition the dialog
   still computed as hidden when .is-open was added (measured). Closing keeps the base .5s delay for the fade-out. */
.mn .lb.is-open { opacity: 1; visibility: visible; transition: opacity .5s, visibility 0s; }
.mn .lb__top, .mn .lb__bar { display: flex; align-items: center; justify-content: space-between; padding: 16px var(--pad); }
.mn .lb__bar { justify-content: center; gap: 20px; }
.mn .lb__stage { flex: 1; min-height: 0; display: grid; place-items: center; padding-inline: var(--pad); }
.mn .lb__stage img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; border-radius: var(--r-sm); box-shadow: 0 60px 120px -40px #000; transform: rotateY(-16deg) rotateX(6deg) scale(.86) translateZ(-140px); opacity: 0; transition: transform .9s var(--ease-out), opacity .6s; }
.mn .lb.is-open .lb__stage img { transform: none; opacity: 1; }
.mn .lb.is-swapping .lb__stage img { opacity: 0; transform: scale(.96); transition-duration: .22s; }

/* ───────── Consent banner (injected by consent.js into <body>, i.e. OUTSIDE .mn) ─────────
   ID selectors (1,0,x) already outrank every theme rule, including the theme's button:hover. */
#mnl-cc { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 75; transform: translateY(140%); transition: transform .8s var(--ease-out); font-family: var(--f-body); font-weight: 300; box-sizing: border-box; }
#mnl-cc *, #mnl-cc *::before, #mnl-cc *::after { box-sizing: border-box; }
#mnl-cc.show { transform: none; }
/* The banner lives outside #mn, so main.js cannot make it inert, and consent.js injects it AFTER the gate has locked.
   A CSS rule has no such race: while any overlay holds the scroll lock the banner leaves the tab order and the a11y tree.
   Analytics stays denied by default meanwhile, so hiding the choice is the safe direction. */
body.is-locked #mnl-cc { visibility: hidden; }
#mnl-cc .wrap { width: auto; max-width: 860px; margin-inline: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; padding: 18px 22px; border-radius: var(--r-md); border: 1px solid var(--g-line); background: rgba(42, 15, 23, .86); backdrop-filter: var(--g-blur); -webkit-backdrop-filter: var(--g-blur); box-shadow: var(--g-shadow); }
#mnl-cc p { margin: 0; flex: 1 1 320px; font-size: 13px; color: var(--sand); line-height: 1.6; }
#mnl-cc a, #mnl-cc a:hover { color: var(--gold); text-decoration: underline; }
#mnl-cc .btns { display: flex; gap: 10px; }
#mnl-cc button, #mnl-cc button:hover, #mnl-cc button:focus { min-height: 44px; padding: 0 22px; border-radius: var(--pill); font: 500 11px var(--f-body); letter-spacing: .18em; text-transform: uppercase; cursor: pointer; border: 1px solid var(--g-line); background: transparent; color: var(--cream); }
#mnl-cc button.acc, #mnl-cc button.acc:hover, #mnl-cc button.acc:focus { background: linear-gradient(120deg, var(--gold), var(--copper)); color: var(--ink-0); border-color: transparent; }

/* ───────── Reveal system (states only hidden when JS is present) ───────── */
.js .mn .rv { opacity: 0; transform: translateY(30px); transition: opacity 1.1s var(--ease-out), transform 1.1s var(--ease-out); }
.js .mn .rv.in { opacity: 1; transform: none; }
.mn .rv-d1 { transition-delay: .09s !important; } .mn .rv-d2 { transition-delay: .18s !important; }
.mn .rv-d3 { transition-delay: .27s !important; } .mn .rv-d4 { transition-delay: .36s !important; }
.js .mn .rv-mask > * { clip-path: inset(0 0 100% 0); transition: clip-path 1.5s var(--ease-out); }
.js .mn .rv-mask.in > * { clip-path: inset(0); }
.js .mn .hero__title .w { opacity: 0; transform: translateY(46px) rotate(2deg); }
.js body.loaded .mn .hero__title .w { animation: mn-w-in 1.2s var(--ease-out) forwards; animation-delay: calc(var(--i, 0) * .08s + .15s); }
@keyframes mn-w-in { to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .mn *, .mn *::before, .mn *::after, #mnl-cc { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .js .mn .rv, .js .mn .hero__title .w { opacity: 1; transform: none; }
  .js .mn .rv-mask > * { clip-path: none; }
  html { scroll-behavior: auto; }
}